@dile/editor 2.4.1 → 2.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/editor",
-  "version": "2.4.1",
+  "version": "2.4.3",
   "description": "Webcomponent to create a user editor interface, configured on various ways",
   "keywords": [
     "markdown",
@@ -41,5 +41,5 @@
     "prosemirror-state": "^1.4.2",
     "prosemirror-view": "^1.30.1"
   },
-  "gitHead": "2f4e696db6cb74d33233b83b5da7ce79699c5632"
+  "gitHead": "eb9a2765a85207c45fcc88825fd61030e65c56fb"
 }

package/src/DileEditor.js

@@ -172,7 +172,7 @@ export class DileEditor extends DileI18nMixin(DileEmmitChange(LitElement)) {
       /** Disable toolbar items, string with items separated by tubes like "italic|h4" */
       disableToolbarItems: { type: String },
     
-      addicionalCommands: { type: Object },
+      additionalCommands: { type: Object },
 
       /** Menu config */
       _menuConfig: { type: Object },
@@ -193,7 +193,7 @@ export class DileEditor extends DileI18nMixin(DileEmmitChange(LitElement)) {
     this.message = '';
     this.disableToolbarItems = '';
     this._menuConfig = {...defaultToolbarConfig};
-    this.addicionalCommands = {};
+    this.additionalCommands = {};
     this.internals = this.attachInternals();
   }
 
@@ -247,21 +247,10 @@ export class DileEditor extends DileI18nMixin(DileEmmitChange(LitElement)) {
           </nav>
           <dile-pages selected="${this.viewSelected}" attrForSelected="name">
             <section name="markdown">
-              <textarea 
-                id="eltextarea" 
-                .value="${this.value}"
-                @input=${this.doTextareaKeypress}
-              ></textarea>
+              ${this.textareaTemplate}
             </section>
             <section class="editor" name="design">
-              <dile-editor-markdown
-                id="editor"
-                @dile-editor-change=${this.updateValue}
-                ._menuConfig=${this._menuConfig}
-                @dile-editor-markdown-initialized=${this.setInitialized}
-                .addicionalCommands=${this.addicionalCommands}
-                language="${this.language}"
-              ></dile-editor-markdown>
+              ${this.editorMarkdownTemplate}
             </section>
           </dile-pages>
         </section>
@@ -270,6 +259,29 @@ export class DileEditor extends DileI18nMixin(DileEmmitChange(LitElement)) {
     `;
   }
 
+  get editorMarkdownTemplate() {
+    return html`
+      <dile-editor-markdown
+        id="editor"
+        @dile-editor-change=${this.updateValue}
+        ._menuConfig=${this._menuConfig}
+        @dile-editor-markdown-initialized=${this.setInitialized}
+        .additionalCommands=${this.additionalCommands}
+        language="${this.language}"
+      ></dile-editor-markdown>
+    `
+  }
+
+  get textareaTemplate() {
+    return html`
+      <textarea 
+        id="eltextarea" 
+        .value="${this.value}"
+        @input=${this.doTextareaKeypress}
+      ></textarea>
+    `
+  }
+
   updateValue(e) {
     this.value = e.detail.content;
     this.textarea.value = e.detail.content;

package/src/dile-editor-markdown.js

@@ -30,7 +30,7 @@ export class DileEditorMarkdown extends DileI18nMixin(LitElement) {
   static get properties() {
     return {
       _menuConfig: { type: Object },
-      addicionalCommands: { type: Object },
+      additionalCommands: { type: Object },
     };
   }
   constructor() {
@@ -71,7 +71,7 @@ export class DileEditorMarkdown extends DileI18nMixin(LitElement) {
         history(),
         keymap(buildKeymap(schema)),
         keymap(baseKeymap),
-        menuPlugin(this._menuConfig, this.addicionalCommands, this.language),
+        menuPlugin(this._menuConfig, this.additionalCommands, this.language),
       ]
     })
   }

package/src/dile-editor-toolbar.js

@@ -51,13 +51,13 @@ export class DileEditorToolbar extends DileI18nMixin(LitElement) {
       blockItems: { type: Array },
       undoItems: { type: Array },
       menuConfig: { type: Object },
-      addicionalCommands: { type: Object },
+      additionalCommands: { type: Object },
     };
   }
 
   constructor() {
     super();
-    this.addicionalCommands = {}
+    this.additionalCommands = {}
   }
 
   get blockselect() {
@@ -65,9 +65,9 @@ export class DileEditorToolbar extends DileI18nMixin(LitElement) {
   }
   
   firstUpdated() {
-    this.toolbarItems = getToolbarItems(this.menuConfig, this.addicionalCommands.toolbarItems || []);
-    this.undoItems = getUndoItems(this.menuConfig, this.addicionalCommands.undoItems || []);
-    this.blockItems = getBlockItems(this.menuConfig, this.addicionalCommands.blockItems || []);
+    this.toolbarItems = getToolbarItems(this.menuConfig, this.additionalCommands.toolbarItems || []);
+    this.undoItems = getUndoItems(this.menuConfig, this.additionalCommands.undoItems || []);
+    this.blockItems = getBlockItems(this.menuConfig, this.additionalCommands.blockItems || []);
   }
 
   render() {

package/src/prosemirror/menu-plugin.js

@@ -2,14 +2,14 @@ import { Plugin } from "prosemirror-state";
 
 const toolbarElement = 'dile-editor-toolbar';
 
-export const menuPlugin = (menuConfig, addicionalCommands, language) => new Plugin({
+export const menuPlugin = (menuConfig, additionalCommands, language) => new Plugin({
   view(editorView) {
     let toolbar;
     if (!editorView.dom.parentElement.querySelector(toolbarElement)) {
       toolbar = document.createElement(toolbarElement);
       toolbar.menuConfig = menuConfig;
       toolbar.editorView = editorView;
-      toolbar.addicionalCommands = addicionalCommands;
+      toolbar.additionalCommands = additionalCommands;
       toolbar.language = language;
       editorView.dom.parentNode.insertBefore(toolbar, editorView.dom);
     } else {