Improve the command

artf · artf · commit 9186e7158e5d · 2018-07-23T08:25:13.000+02:00
diff --git a/src/commands.js b/src/commands.js
@@ -1,50 +1,93 @@
 import {
-  commandCustomCode,
+  commandNameCustomCode,
   keyCustomCode,
 } from './config';
 
 export default (editor, opts = {}) => {
   const cmd = editor.Commands;
-  const { modalTitle, codeViewOptions } = opts;
+  const { modalTitle, codeViewOptions, commandCustomCode } = opts;
+  const appendToContent = (target, content) => {
+    if (content instanceof HTMLElement) {
+        target.appendChild(content);
+    } else if (content) {
+        target.insertAdjacentHTML('beforeend', content);
+    }
+  }
+
+  cmd.add(commandNameCustomCode, {
+    keyCustomCode,
 
-  cmd.add(commandCustomCode, {
     run(editor, sender, opts = {}) {
       this.editor = editor;
       this.options = opts;
       this.target = opts.target || editor.getSelected();
       const target = this.target;
 
       if (target && target.get('editable')) {
-        const title = opts.title || modalTitle;
-        const content = this.getContent();
-        const code = target.get(keyCustomCode) || '';
-        editor.Modal.open({ title, content });
-        this.getCodeViewer().setContent(code);
+        this.showCustomCode(target);
       }
     },
 
     stop(editor) {
       editor.Modal.close();
     },
 
+    /**
+     * Method which tells how to show the custom code
+     * @param  {Component} target
+     */
+    showCustomCode(target) {
+      const { editor, options } = this;
+      const title = options.title || modalTitle;
+      const content = this.getContent();
+      const code = target.get(keyCustomCode) || '';
+      editor.Modal.open({ title, content });
+      this.getCodeViewer().setContent(code);
+    },
+
+    /**
+     * Custom pre-content. Can be a simple string or an HTMLElement
+     */
+    getPreContent() {},
+
+    /**
+     * Custom post-content. Can be a simple string or an HTMLElement
+     */
+    getPostContent() {},
+
+    /**
+     * Get all the content for the custom code
+     * @return {HTMLElement}
+     */
     getContent() {
-      const { options, editor, target } = this;
+      const { editor, options, target } = this;
       const content = document.createElement('div');
       const codeViewer = this.getCodeViewer();
+      appendToContent(content, this.getPreContent());
       content.appendChild(codeViewer.getElement());
+      appendToContent(content, this.getPostContent());
+      appendToContent(content, this.getContentActions());
 
+      return content;
+    },
+
+    /**
+     * Get the actions content. Can be a simple string or an HTMLElement
+     * @return {HTMLElement|String}
+     */
+    getContentActions() {
+      const { editor, options, target } = this;
       const btn = document.createElement('button');
-      const pfx = options.pfx || editor.getConfig('stylePrefix');
-      content.appendChild(btn);
-      btn.innerHTML = options.labelBtn || 'Save';
+      const pfx = editor.getConfig('stylePrefix');
+      btn.innerHTML = opts.buttonLabel;
       btn.className = `${pfx}btn-prim ${pfx}btn-import__custom-code`;
       btn.onclick = () => {
-        const code = codeViewer.getContent();
+        const code = this.getCodeViewer().getContent();
         target.set(keyCustomCode, code);
         editor.Modal.close();
       };
 
-      return content;
+      return btn;
     },
 
     getCodeViewer() {
@@ -60,6 +103,8 @@ export default (editor, opts = {}) => {
       }
 
       return this.codeViewer;
-    }
+    },
+
+    ...commandCustomCode,
   });
 };
diff --git a/src/components.js b/src/components.js
@@ -1,6 +1,6 @@
 import {
   keyCustomCode,
-  commandCustomCode,
+  commandNameCustomCode,
   typeCustomCode,
 } from './config';
 
@@ -35,7 +35,7 @@ export default (editor, opts = {}) => {
         if (toolbarBtnCustomCode && !toolbar.filter(tlb => tlb.id === id ).length) {
           toolbar.unshift({
             id,
-            command: commandCustomCode,
+            command: commandNameCustomCode,
             label: `<svg viewBox="0 0 24 24">
               <path d="M14.6 16.6l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4m-5.2 0L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4z"></path>
             </svg>`,
@@ -91,7 +91,7 @@ export default (editor, opts = {}) => {
 
       onActive() {
         const target = this.model;
-        this.em.get('Editor').runCommand(commandCustomCode, { target });
+        this.em.get('Editor').runCommand(commandNameCustomCode, { target });
       },
     })
   });
diff --git a/src/config.js b/src/config.js
@@ -1,9 +1,9 @@
 const keyCustomCode = 'custom-code-plugin__code';
 const typeCustomCode = 'custom-code';
-const commandCustomCode = 'custom-code:open-modal';
+const commandNameCustomCode = 'custom-code:open-modal';
 
 export {
   keyCustomCode,
   typeCustomCode,
-  commandCustomCode,
+  commandNameCustomCode,
 }
diff --git a/src/index.js b/src/index.js
@@ -35,6 +35,13 @@ export default grapesjs.plugins.add('YOUR-PLUGIN-NAME', (editor, opts = {}) => {
 
     // Additional options for the code viewer, eg. `{ theme: 'hopscotch', readOnly: 0 }`
     codeViewOptions: {},
+
+    // Label for the default save button
+    buttonLabel: 'Insert your code',
+
+    // Object to extend the default custom code command.
+    // Check the source to see all available methods
+    commandCustomCode: {},
   },  ...opts };
 
   // Add components
