NextGen Editor: Added support for multiple editor instances

Author: w00fz

CHANGELOG.md

@@ -3,6 +3,7 @@
 
 1. [](#improved)
     * Added the ability to enable/disable built-in notice CSS
+    * NextGen Editor: Added support for multiple editor instances
 
 # v5.0.5
 ## 03/12/2021

nextgen-editor/dist/js/app.js

@@ -9,16 +9,16 @@
     "lint": "vue-cli-service lint"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.10",
-    "@vue/cli-plugin-eslint": "~4.5.10",
-    "@vue/cli-service": "~4.5.10",
+    "@vue/cli-plugin-babel": "~4.5.12",
+    "@vue/cli-plugin-eslint": "~4.5.12",
+    "@vue/cli-service": "~4.5.12",
     "@vue/eslint-config-airbnb": "^5.3.0",
     "babel-eslint": "^10.1.0",
     "directory-named-webpack-plugin": "^4.0.1",
-    "eslint": "^7.17.0",
+    "eslint": "^7.25.0",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-vue": "^7.4.1",
+    "eslint-plugin-vue": "^7.9.0",
     "node-sass": "^5.0.0",
-    "sass-loader": "^10.1.0"
+    "sass-loader": "^11.0.1"
   }
 }

nextgen-editor/dist/js/app.js.map

@@ -9,64 +9,78 @@ window.scDisplaySettings = function scDisplaySettings() {
 };
 
 window.scBlockAddChildFromParent = function scBlockAddChildFromParent() {
-  const { editor } = window.nextgenEditor;
+  const { editors } = window.nextgenEditor;
 
   const domShortcode = this.parentNode;
+  const editor = (editors.filter((instance) => instance.ui.view.element.contains(domShortcode)) || []).shift();
+
   const name = domShortcode.getAttribute('name');
   const shortcode = window.nextgenEditor.shortcodes[name];
-  const viewShortcode = editor.editing.view.domConverter.mapDomToView(domShortcode);
-  const modelShortcode = editor.editing.mapper.toModelElement(viewShortcode);
 
-  const domShortcodeBlockReadOnly = domShortcode.querySelector('shortcode-block-readonly');
-  const viewShortcodeBlockReadOnly = editor.editing.view.domConverter.mapDomToView(domShortcodeBlockReadOnly);
-  const modelShortcodeBlockReadOnly = editor.editing.mapper.toModelElement(viewShortcodeBlockReadOnly);
+  if (editor) {
+    const viewShortcode = editor.editing.view.domConverter.mapDomToView(domShortcode);
+    const modelShortcode = editor.editing.mapper.toModelElement(viewShortcode);
+
+    const domShortcodeBlockReadOnly = domShortcode.querySelector('shortcode-block-readonly');
+    const viewShortcodeBlockReadOnly = editor.editing.view.domConverter.mapDomToView(domShortcodeBlockReadOnly);
+    const modelShortcodeBlockReadOnly = editor.editing.mapper.toModelElement(viewShortcodeBlockReadOnly);
 
-  editor.model.change((modelWriter) => {
-    const insertPosition = modelWriter.createPositionAt(modelShortcodeBlockReadOnly, 0);
-    editor.execute(`shortcode_${shortcode.child.name}`, { insertPosition, modelParentShortcode: modelShortcode });
+    editor.model.change((modelWriter) => {
+      const insertPosition = modelWriter.createPositionAt(modelShortcodeBlockReadOnly, 0);
+      editor.execute(`shortcode_${shortcode.child.name}`, { insertPosition, modelParentShortcode: modelShortcode });
 
-    domShortcode.querySelector('.sc-add-child').classList.remove('sc-visible');
-  });
+      domShortcode.querySelector('.sc-add-child').classList.remove('sc-visible');
+    });
+  }
 };
 
 window.scBlockAddChild = function scBlockAddChild(event, where) {
-  const { editor } = window.nextgenEditor;
+  const { editors } = window.nextgenEditor;
 
   const domShortcode = this.parentNode;
+  const editor = (editors.filter((instance) => instance.ui.view.element.contains(domShortcode)) || []).shift();
+
   const name = domShortcode.getAttribute('name');
   const shortcode = window.nextgenEditor.shortcodes[name];
-  const viewShortcode = editor.editing.view.domConverter.mapDomToView(domShortcode);
-  const modelShortcode = editor.editing.mapper.toModelElement(viewShortcode);
 
-  editor.model.change((modelWriter) => {
-    let modelParentShortcode = modelShortcode.parent;
-    const insertPosition = modelWriter.createPositionAt(modelShortcode, where);
+  if (editor) {
+    const viewShortcode = editor.editing.view.domConverter.mapDomToView(domShortcode);
+    const modelShortcode = editor.editing.mapper.toModelElement(viewShortcode);
 
-    while (modelParentShortcode && modelParentShortcode.name !== 'shortcode-block') {
-      modelParentShortcode = modelParentShortcode.parent;
-    }
+    editor.model.change((modelWriter) => {
+      let modelParentShortcode = modelShortcode.parent;
+      const insertPosition = modelWriter.createPositionAt(modelShortcode, where);
 
-    if (modelParentShortcode) {
-      editor.execute(`shortcode_${shortcode.name}`, { insertPosition, modelParentShortcode });
-    }
-  });
+      while (modelParentShortcode && modelParentShortcode.name !== 'shortcode-block') {
+        modelParentShortcode = modelParentShortcode.parent;
+      }
+
+      if (modelParentShortcode) {
+        editor.execute(`shortcode_${shortcode.name}`, { insertPosition, modelParentShortcode });
+      }
+    });
+  }
 };
 
 window.scBlockMoveChild = function scBlockMove(event, where) {
-  const { editor } = window.nextgenEditor;
+  const { editors } = window.nextgenEditor;
 
   const domShortcode = this.parentNode;
-  const viewShortcode = editor.editing.view.domConverter.mapDomToView(domShortcode);
-  const modelShortcode = editor.editing.mapper.toModelElement(viewShortcode);
+  const editor = (editors.filter((instance) => instance.ui.view.element.contains(domShortcode)) || []).shift();
 
-  const domSiblingShortcode = where === 'up'
-    ? domShortcode.previousSibling
-    : domShortcode.nextSibling;
+  if (editor) {
+    const viewShortcode = editor.editing.view.domConverter.mapDomToView(domShortcode);
+    const modelShortcode = editor.editing.mapper.toModelElement(viewShortcode);
 
-  const viewSiblingShortcode = editor.editing.view.domConverter.mapDomToView(domSiblingShortcode);
-  const modelSiblingShortcode = editor.editing.mapper.toModelElement(viewSiblingShortcode);
+    const domSiblingShortcode = where === 'up'
+      ? domShortcode.previousSibling
+      : domShortcode.nextSibling;
 
-  editor.model.change((modelWriter) => {
-    modelWriter.move(modelWriter.createRangeOn(modelShortcode), modelSiblingShortcode, where === 'up' ? 'before' : 'after');
-  });
+    const viewSiblingShortcode = editor.editing.view.domConverter.mapDomToView(domSiblingShortcode);
+    const modelSiblingShortcode = editor.editing.mapper.toModelElement(viewSiblingShortcode);
+
+    editor.model.change((modelWriter) => {
+      modelWriter.move(modelWriter.createRangeOn(modelShortcode), modelSiblingShortcode, where === 'up' ? 'before' : 'after');
+    });
+  }
 };