Add generic plugin API

Author: fabianmichael

index.js

@@ -17,17 +17,17 @@
     "kirbyup": "^0.23.0"
   },
   "dependencies": {
-    "@codemirror/commands": "^0.19.8",
+    "@codemirror/commands": "^0.20.0",
     "@codemirror/comment": "^0.19.1",
-    "@codemirror/highlight": "^0.19.7",
+    "@codemirror/highlight": "^0.19.8",
     "@codemirror/history": "^0.19.2",
-    "@codemirror/lang-markdown": "^0.19.6",
-    "@codemirror/language": "^0.19.8",
+    "@codemirror/lang-markdown": "^0.20.0",
+    "@codemirror/language": "^0.20.0",
     "@codemirror/rangeset": "^0.19.9",
-    "@codemirror/search": "^0.19.9",
-    "@codemirror/state": "^0.19.9",
-    "@codemirror/stream-parser": "^0.19.7",
-    "@codemirror/view": "^0.19.47",
-    "underscore": "^1.13.2"
+    "@codemirror/search": "^0.20.1",
+    "@codemirror/state": "^0.20.0",
+    "@codemirror/stream-parser": "^0.19.9",
+    "@codemirror/view": "^0.20.4",
+    "underscore": "^1.13.3"
   }
 }

package.json

@@ -42,13 +42,4 @@ export default class Button extends Extension {
 
     return () => this.editor.isActiveToken("Kirbytag", "FencedCode", "Link", "URL");
   }
-
-  /**
-   * Creates a custom button from an object
-   */
-  static factory(definition) {
-    const button = new Button();
-    completeAssign(button, definition);
-    return button;
-  }
 }

src/components/Buttons/Button.js

@@ -1,4 +1,5 @@
 import { formatKeyName } from "./Utils/keymap.js";
+import completeAssign from "./Utils/complete-assign.js";
 
 export default class Extension {
 
@@ -55,4 +56,13 @@ export default class Extension {
   get syntax() {
     return null;
   }
+
+  /**
+   * Creates a custom extension from an object
+   */
+  static factory(definition) {
+    const extension = new Extension();
+    completeAssign(extension, definition);
+    return extension;
+  }
 }

src/components/Extension.js

@@ -77,6 +77,7 @@ import PageLink from "./Buttons/PageLink.js"
 import SpecialChars from "./Buttons/SpecialChars.js"
 import Strikethrough from "./Buttons/Strikethrough.js"
 import StrongEmphasis from "./Buttons/StrongEmphasis.js"
+import Extension from './Extension.js';
 
 
 let resizeObserver;
@@ -153,6 +154,7 @@ export default {
       extensions: [
         ...this.createHighlights(),
         ...this.createToolbarButtons(),
+        ...this.createCustomExtensions(),
       ],
       events: {
         active: (active) => {
@@ -226,6 +228,17 @@ export default {
       ], []);
     },
 
+    createCustomExtensions() {
+      if (!window.markdownEditorExtensions) {
+        return [];
+      }
+
+      return window.markdownEditorExtensions.reduce((accumulator, definition) => [
+        ...accumulator,
+        Extension.factory(definition)
+      ], []);
+    },
+
     createToolbarButtons() {
       const available = [
         new Blockquote(),