Add custom module support

resolves #28
chmln · Feb 18, 2018 · e2c3d9b · e2c3d9b
1 parent c41d815
commit e2c3d9b
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 14 deletions.
diff --git a/src/Button.vue b/src/Button.vue
@@ -44,25 +44,26 @@ export default {
 			this.showDashboard = true;
 		},
 
-    exec (...args) {
-      this.$parent.exec(...args)
+    exec () {
+      this.$parent.exec.apply(null, arguments)
     },
 
-		onBtnClick($event, action, arg) {
-			if (
+		onBtnClick() {
+			if (this.module.action !== undefined)
+				this.exec.apply(null, this.module.action);
+
+			else if (this.module.customAction !== undefined) {
+				this.module.customAction(bus.utils).forEach(a => this.exec.apply(null, a));
+			}
+
+			else if (
 				this.module.render &&
 				(!this.$refs.dashboard || !this.$refs.dashboard.contains($event.target))
 			) {
 				this.showDashboard = !this.showDashboard;
 				bus.emit(`${this.uid}_${this.showDashboard ? "show" : "hide"}_dashboard_${this.module.title}`);
 				return;
 			}
-
-			action = action || this.module.action;
-			arg = arg || this.module.actionArgs;
-
-			if (action)
-				this.exec(action, arg, false);
 		}
 	}
 }

diff --git a/src/Editr.vue b/src/Editr.vue
@@ -77,9 +77,10 @@ export default {
         },
 
         modules: function() {
-            if (this.mergedOptions.hideModules)
-                return modules.filter(m => !this.mergedOptions.hideModules[m.title]);
-            return modules;
+            return modules.filter(
+                m => this.mergedOptions.hideModules === undefined
+                || !this.mergedOptions.hideModules[m.title]
+            ).concat(this.mergedOptions.customModules);
         },
 
         btnsWithDashboards: function () {

diff --git a/src/bus.js b/src/bus.js
@@ -24,7 +24,27 @@ emitter.options = {
     },
     hideModules: {},
     paragraphSeparator: "div",
-    maxHeight: undefined
+    maxHeight: undefined,
+    customModules: [],
+}
+
+emitter.utils = {
+  getHTMLOfSelection () {
+    if (document.selection && document.selection.createRange) {
+      return document.selection.createRange().htmlText;
+    }
+    else if (window.getSelection) {
+      const selection = window.getSelection();
+      if (selection.rangeCount > 0) {
+        const clonedSelection = selection.getRangeAt(0).cloneContents();
+        const div = document.createElement('div');
+        div.appendChild(clonedSelection);
+        return div.innerHTML;
+      }
+    }
+
+    return '';
+  }
 }
 
 export default emitter;
diff --git a/src/customModule.vue b/src/customModule.vue
@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <button type="button" @click="blockquote ">Wrap in blockquote</button>
+    </div>
+</template>
+
+<script>
+
+export default {
+    title: "customModuleExample-Blockquote",
+    icon: '<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M832 320v704q0 104-40.5 198.5t-109.5 163.5-163.5 109.5-198.5 40.5h-64q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h64q106 0 181-75t75-181v-32q0-40-28-68t-68-28h-224q-80 0-136-56t-56-136v-384q0-80 56-136t136-56h384q80 0 136 56t56 136zm896 0v704q0 104-40.5 198.5t-109.5 163.5-163.5 109.5-198.5 40.5h-64q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h64q106 0 181-75t75-181v-32q0-40-28-68t-68-28h-224q-80 0-136-56t-56-136v-384q0-80 56-136t136-56h384q80 0 136 56t56 136z"/></svg>',
+
+    methods: {
+        blockquote (e){
+            this.$parent.closeDashboard();
+
+            // EXAMPLES
+
+            // wrap selection with a tag
+            this.$emit("exec", "formatBlock", "blockquote");
+
+            // insert html
+            // this.$emit("exec", "insertHTML", `<a href='${this.url}'>${this.title}</a>`);
+        }
+    }
+};
+
+</script>
+
diff --git a/src/customModule_simple.js b/src/customModule_simple.js
@@ -0,0 +1,13 @@
+module.exports = {
+	title: "blockquoteBoldItalic",
+	customAction (utils) {
+        const sel = utils.getHTMLOfSelection();
+
+        // wrap selection in custom html tags
+        return [
+            ["forwardDelete", undefined, false],
+            ["insertHTML", `<blockquote><b><i>${sel}</b></i></blockquote>`, true],
+        ]
+    },
+	icon: '<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M832 960v384q0 80-56 136t-136 56h-384q-80 0-136-56t-56-136v-704q0-104 40.5-198.5t109.5-163.5 163.5-109.5 198.5-40.5h64q26 0 45 19t19 45v128q0 26-19 45t-45 19h-64q-106 0-181 75t-75 181v32q0 40 28 68t68 28h224q80 0 136 56t56 136zm896 0v384q0 80-56 136t-136 56h-384q-80 0-136-56t-56-136v-704q0-104 40.5-198.5t109.5-163.5 163.5-109.5 198.5-40.5h64q26 0 45 19t19 45v128q0 26-19 45t-45 19h-64q-106 0-181 75t-75 181v32q0 40 28 68t68 28h224q80 0 136 56t56 136z"/></svg>'
+}