Merge pull request #27 from dimitrov-adrian/improve-change-handler

1.3.0

Author: dimitrov-adrian

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "directus-extension-editorjs",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "author": {
     "email": "dimitrov.adrian+gh@gmail.com",
     "name": "Adrian Dimitrov"
@@ -47,19 +47,21 @@
     "@editorjs/image": "^2.6.2",
     "@editorjs/inline-code": "^1.3.1",
     "@editorjs/marker": "^1.2.2",
+    "@editorjs/nested-list": "^1.0.2",
     "@editorjs/paragraph": "^2.8.0",
-    "editorjs-text-alignment-blocktune": "^1.0.3",
     "@editorjs/personality": "^2.0.2",
     "@editorjs/quote": "^2.4.0",
     "@editorjs/raw": "^2.3.0",
     "@editorjs/simple-image": "^1.4.1",
     "@editorjs/table": "^2.0.1",
     "@editorjs/underline": "^1.0.0",
     "@editorjs/warning": "^1.2.0",
+    "editorjs-undo": "^1.0.0",
     "@itech-indrustries/editorjs-strikethrough": "^1.0.0",
     "directus-codestyle": "dimitrov-adrian/directus-codestyle",
     "editorjs-alert": "^1.0.3",
     "editorjs-list": "^2.1.4",
+    "editorjs-text-alignment-blocktune": "^1.0.3",
     "lodash": "^4.17.21",
     "typescript": "^4.5.2"
   },

package.json

@@ -2,7 +2,8 @@
  * Modified version of https://github.com/editor-js/image/blob/master/src/uploader.js
  */
 export default class Uploader {
-	constructor({ config, onUpload, onError }) {
+	constructor({ config, getCurrentFile, onUpload, onError }) {
+		this.getCurrentFile = getCurrentFile;
 		this.config = config;
 		this.onUpload = onUpload;
 		this.onError = onError;
@@ -40,31 +41,41 @@ export default class Uploader {
 	}
 
 	uploadSelectedFile({ onPreview }) {
-		this.config.uploader.setFileHandler((file) => {
-			if (file) {
-				const response = {
-					success: 1,
-					file: {
-						width: file.width,
-						height: file.height,
-						size: file.filesize,
-						name: file.filename_download,
-						title: file.title,
-						extension: file.filename_download.split('.').pop(),
-						fileId: file.id,
-						fileURL: this.config.uploader.baseURL + 'files/' + file.id,
-						url: this.config.uploader.baseURL + 'assets/' + file.id,
-					},
-				};
+		if (this.getCurrentFile) {
+			const currentPreview = this.getCurrentFile();
+			if (currentPreview) {
+				this.config.uploader.setCurrentPreview(
+					this.config.uploader.addTokenToURL(currentPreview) + '&key=system-large-contain'
+				);
+			}
+		}
 
-				onPreview(this.config.uploader.addTokenToURL(response.file.fileURL));
-				this.onUpload(response);
-			} else {
+		this.config.uploader.setFileHandler((file) => {
+			if (!file) {
 				this.onError({
 					success: 0,
 					message: this.config.t.no_file_selected,
 				});
+				return;
 			}
+
+			const response = {
+				success: 1,
+				file: {
+					width: file.width,
+					height: file.height,
+					size: file.filesize,
+					name: file.filename_download,
+					title: file.title,
+					extension: file.filename_download.split('.').pop(),
+					fileId: file.id,
+					fileURL: this.config.uploader.baseURL + 'files/' + file.id,
+					url: this.config.uploader.baseURL + 'assets/' + file.id,
+				},
+			};
+
+			onPreview(this.config.uploader.addTokenToURL(response.file.fileURL));
+			this.onUpload(response);
 		});
 	}
 }

src/custom-plugins/editorjs-uploader.js

@@ -6,24 +6,23 @@ import Uploader from './editorjs-uploader.js';
  * https://github.com/editor-js/attaches/blob/master/src/index.js
  */
 export default class extends AttachesTool {
-	static get isReadOnlySupported() {
-		return true;
-	}
+	constructor(params) {
+		super(params);
 
-	constructor({ data, config, api, readOnly }) {
-		super({ data, config, api });
-		this.readOnly = !!readOnly;
+		this.config.uploader = params.config.uploader;
 		this.uploader = new Uploader({
 			config: this.config,
 			onUpload: (response) => this.onUpload(response),
 			onError: (error) => this.uploadingFailed(error),
 		});
-	}
 
-	prepareUploadButton() {
-		if (!this.readOnly) {
-			super.prepareUploadButton();
-		}
+		// Until get https://github.com/editor-js/attaches/issues/50 solved, this is required.
+		this.onUpload = (response) => {
+			super.onUpload(response);
+			params.block.save().then((state) => {
+				params.api.blocks.update(state.id, state.data);
+			});
+		};
 	}
 
 	showFileData() {
@@ -34,8 +33,5 @@ export default class extends AttachesTool {
 				downloadButton.href = this.uploader.config.uploader.addTokenToURL(this.data.file.url);
 			}
 		}
-		if (this.readOnly && this.nodes.title) {
-			this.nodes.title.contentEditable = false;
-		}
 	}
 }

src/custom-plugins/plugin-attaches-patch.js

@@ -6,11 +6,12 @@ import Uploader from './editorjs-uploader.js';
  * https://github.com/editor-js/image/blob/master/src/index.js
  */
 export default class extends ImageTool {
-	constructor({ data, config, api, readOnly }) {
-		super({ data, config, api, readOnly });
+	constructor(params) {
+		super(params);
 
 		this.uploader = new Uploader({
 			config: this.config,
+			getCurrentFile: () => this.data?.file?.url,
 			onUpload: (response) => this.onUpload(response),
 			onError: (error) => this.uploadingFailed(error),
 		});

src/custom-plugins/plugin-image-patch.js

@@ -5,16 +5,28 @@ import Uploader from './editorjs-uploader.js';
  * Patch allows custom uploader.
  * https://github.com/editor-js/personality/blob/master/src/index.js
  */
+
+const LOADER_DELAY = 500;
+
 export default class extends Personality {
-	constructor({ data, config, api, readOnly }) {
-		super({ data, config, api });
-		this.readOnly = !!readOnly;
-		this.config.uploader = config.uploader;
+	constructor(params) {
+		super(params);
+
+		this.config.uploader = params.config.uploader;
 		this.uploader = new Uploader({
 			config: this.config,
+			getCurrentFile: () => this.data.photo,
 			onUpload: (response) => this.onUpload({ body: response }),
 			onError: (error) => this.uploadingFailed(error),
 		});
+
+		// Until get https://github.com/editor-js/attaches/issues/50 solved, this is required.
+		this.onUpload = (response) => {
+			super.onUpload(response);
+			params.block.save().then((state) => {
+				params.api.blocks.update(state.id, state.data);
+			});
+		};
 	}
 
 	setFullImageSource(image) {
@@ -26,34 +38,15 @@ export default class extends Personality {
 		setTimeout(() => {
 			this.nodes.photo.classList.remove(this.CSS.loader);
 			this.setFullImageSource(this.data.photo);
-		}, 500);
-	}
-
-	static get isReadOnlySupported() {
-		return true;
+		}, LOADER_DELAY);
 	}
 
 	render() {
 		const result = super.render();
-
-		// Clear events.
-		if (this.readOnly) {
-			this.nodes.photo.replaceWith(this.nodes.photo.cloneNode(true));
-		}
-
 		if (this.data.photo) {
 			this.setFullImageSource(this.data.photo);
 		}
 
 		return result;
 	}
-
-	make(...args) {
-		const result = super.make(...args);
-		if (this.readOnly && result.contentEditable) {
-			result.contentEditable = false;
-		}
-
-		return result;
-	}
 }