@dile/editor 2.1.39 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/editor",
-  "version": "2.1.39",
+  "version": "2.3.0",
   "description": "Webcomponent to create a user editor interface, configured on various ways",
   "keywords": [
     "markdown",
@@ -29,8 +29,8 @@
     "url": "https://github.com/Polydile/dile-components/issues"
   },
   "dependencies": {
-    "@dile/icons": "^2.0.12",
-    "@dile/ui": "^2.1.39",
+    "@dile/icons": "^2.1.0",
+    "@dile/ui": "^2.3.0",
     "lit": "^2.7.0 || ^3.0.0",
     "prosemirror-commands": "^1.5.0",
     "prosemirror-example-setup": "^1.2.1",
@@ -41,5 +41,5 @@
     "prosemirror-state": "^1.4.2",
     "prosemirror-view": "^1.30.1"
   },
-  "gitHead": "072d0ecf23ade48c6f33d3dc37b29a209114f08b"
+  "gitHead": "b36ca91ece255381a48008c90b7e4f54c6e6c046"
 }

package/src/DileEditor.js

@@ -4,6 +4,7 @@ import './dile-editor-markdown.js';
 import '@dile/ui/components/pages/pages.js';
 import '@dile/ui/components/tabs/tabs.js';
 import { messageStyles } from '@dile/ui/components/input/index.js';
+import { defaultToolbarConfig } from './defaultToolbarConfig.js';
 
 export class DileEditor extends DileEmmitChange(LitElement) {
   static styles = [
@@ -107,6 +108,10 @@ export class DileEditor extends DileEmmitChange(LitElement) {
         opacity: 0.5;
       }
 
+      .ProseMirror img {
+        max-width: 100%;
+      }
+
       dile-tabs {
         margin-bottom: 0.3rem;
       }
@@ -152,15 +157,27 @@ export class DileEditor extends DileEmmitChange(LitElement) {
 
       /** Hide errors on input */
       hideErrorOnInput: { type: Boolean },
+
+      /** Disable toolbar items, string with items separated by tubes like "italic|h4" */
+      disableToolbarItems: { type: String },
+    
+      addicionalCommands: { type: Object },
+
+      /** Menu config */
+      _menuConfig: { type: Object },
     };
   }
 
   constructor() {
     super();
+    this.initialized = false;
     this.value = this.innerHTML;
     this.label = '';
     this.viewSelected = 'design';
     this.message = '';
+    this.disableToolbarItems = '';
+    this._menuConfig = {...defaultToolbarConfig};
+    this.addicionalCommands = {}
   }
 
   updated(changedProperties) {
@@ -170,10 +187,20 @@ export class DileEditor extends DileEmmitChange(LitElement) {
   }
 
   firstUpdated() {
+    this.setupMenuConfig();
     this.editor = this.shadowRoot.getElementById('editor');
     this.textarea = this.shadowRoot.getElementById('eltextarea');
   }
 
+  setupMenuConfig() {
+    const disabledItems = this.disableToolbarItems.split('|');
+    disabledItems.forEach(item => {
+      if (this._menuConfig.hasOwnProperty(item)) {
+        this._menuConfig[item] = false;
+      }
+    });
+  }
+
   render() {
     return html`
     <div class="column-reverse">
@@ -209,6 +236,9 @@ export class DileEditor extends DileEmmitChange(LitElement) {
               <dile-editor-markdown
                 id="editor"
                 @dile-editor-change=${this.updateValue}
+                ._menuConfig=${this._menuConfig}
+                @dile-editor-markdown-initialized=${this.setInitialized}
+                .addicionalCommands=${this.addicionalCommands}
               ></dile-editor-markdown>
             </section>
           </dile-pages>
@@ -231,8 +261,12 @@ export class DileEditor extends DileEmmitChange(LitElement) {
   }
 
   updateEditorContent(value) {
-    this.editor.updateEditorContent(value);
-    this.textarea.value = value;
+    if(this.initialized) {
+      this.editor.updateEditorContent(value);
+      this.textarea.value = value;
+    } else {
+      setTimeout(() => this.updateEditorContent(value), 100);
+    }
   }
 
   get isValueExternalyUpdated() {
@@ -257,4 +291,8 @@ export class DileEditor extends DileEmmitChange(LitElement) {
       this.message = '';
     }
   }
+
+  setInitialized() {
+    this.initialized = true;
+  }
 }

package/src/defaultToolbarConfig.js

@@ -0,0 +1,19 @@
+export const defaultToolbarConfig = {
+  bold: true,
+  italic: true,
+  code_mark: true,
+  link: true,
+  removeLink: true,
+  image: true,
+  unordered_list: true,
+  ordered_list: true,
+  lift: true,
+  paragraph: true,
+  h1: true,
+  h2: true,
+  h3: true,
+  h4: true,
+  code: true,
+  undo: true,
+  redo: true
+};

package/src/dile-editor-image-dialog.js

@@ -30,9 +30,9 @@ export class DileEditorImageDialog extends LitElement {
         <div slot="content">
           <section class="grid">
             <div>URL:</div>
-            <div><input type="text" id="src" value="https://placekitten.com/540/360"></div>
+            <div><input type="text" id="src"></div>
             <div>Alt:</div>
-            <div><input type="text" id="alt" value="Un gatito"></div>
+            <div><input type="text" id="alt"></div>
           </section>
           <dile-button @click=${this.accept}>Accept</dile-button> <dile-button @click=${this.close}>Cancel</dile-button> 
         </div>
@@ -69,6 +69,8 @@ export class DileEditorImageDialog extends LitElement {
         alt: this.altInput.value,
       }
     }));
+    this.srcInput.value = '';
+    this.altInput.value = '';
   }
 }
 customElements.define('dile-editor-image-dialog', DileEditorImageDialog);

package/src/dile-editor-link-dialog.js

@@ -45,6 +45,15 @@ export class DileEditorLinkDialog extends LitElement {
   get menu() {
     return this.shadowRoot.querySelector('dile-menu-overlay');
   }
+
+  get urlInput() {
+    return this.shadowRoot.getElementById('url');
+  }
+
+  get titleInput() {
+    return this.shadowRoot.getElementById('title');
+  }
+
   open() {
     this.menu.open();
   }
@@ -57,10 +66,12 @@ export class DileEditorLinkDialog extends LitElement {
       bubbles: true,
       composed: true,
       detail: {
-        url: this.shadowRoot.getElementById('url').value,
-        title: this.shadowRoot.getElementById('title').value,
+        url: this.urlInput.value,
+        title: this.titleInput.value,
       }
     }));
+    this.urlInput.value = '';
+    this.titleInput.value = '';
   }
 }
 customElements.define('dile-editor-link-dialog', DileEditorLinkDialog);

package/src/dile-editor-markdown.js

@@ -23,8 +23,22 @@ export class DileEditorMarkdown extends LitElement {
     `
   ];
 
+  static get properties() {
+    return {
+      _menuConfig: { type: Object },
+      addicionalCommands: { type: Object },
+    };
+  }
   constructor() {
     super();
+    this._menuConfig = {}
+  }
+
+  createRenderRoot() {
+    return this;
+  }
+
+  firstUpdated() {
     const editorElement = this;
     const dispatchChange = this.dispatchChange.bind(this);
     const state = this.createState('');
@@ -37,14 +51,13 @@ export class DileEditorMarkdown extends LitElement {
       }
     })
     this.view = view;
-  }
-
-  createRenderRoot() {
-    return this;
+    this.dispatchEvent(new CustomEvent('dile-editor-markdown-initialized'));
   }
 
   get editorMarkdown() {
-    return defaultMarkdownSerializer.serialize(this.view.state.doc);
+    if(this.view) {
+      return defaultMarkdownSerializer.serialize(this.view.state.doc);
+    }
   }
 
   createState(content) {
@@ -54,7 +67,7 @@ export class DileEditorMarkdown extends LitElement {
         history(),
         keymap(buildKeymap(schema)),
         keymap(baseKeymap),
-        menuPlugin(),
+        menuPlugin(this._menuConfig, this.addicionalCommands),
       ]
     })
   }

package/src/dile-editor-toolbar-item.js

@@ -37,8 +37,7 @@ export class DileEditorToolbarItem extends LitElement {
         .icon=${this.item.icon} 
         @click=${this.doCommand}
       ></dile-icon> 
-      <dile-editor-link-dialog id="linkDialog"></dile-editor-link-dialog> 
-      <dile-editor-image-dialog id="imageDialog"></dile-editor-image-dialog> 
+      ${this.item.dialogTemplate ? this.item.dialogTemplate : ''}
     `;
   }
 

package/src/dile-editor-toolbar.js

@@ -2,7 +2,7 @@ import { LitElement, html, css } from 'lit';
 import { notesIcon } from '@dile/icons'
 import './dile-editor-toolbar-item.js';
 import '@dile/ui/components/select/select.js';
-import { toolbarItems, undoItems, blockItems } from './prosemirror/menu-items.js';
+import { getToolbarItems, getUndoItems, getBlockItems } from './prosemirror/menu-items.js';
 import { linkCommand } from './prosemirror/markdown-commands.js';
 import { schema } from "prosemirror-markdown";
 
@@ -48,32 +48,38 @@ export class DileEditorToolbar extends LitElement {
       toolbarItems: { type: Array },
       blockItems: { type: Array },
       undoItems: { type: Array },
+      menuConfig: { type: Object },
+      addicionalCommands: { type: Object },
     };
   }
 
   constructor() {
     super();
-    this.toolbarItems = toolbarItems;
-
-    this.undoItems = undoItems
-
-    this.blockItems = blockItems
+    this.addicionalCommands = {}
   }
 
   firstUpdated() {
-    
     this.blockselect = this.shadowRoot.getElementById('blockselect');
+    this.toolbarItems = getToolbarItems(this.menuConfig, this.addicionalCommands.toolbarItems || []);
+    this.undoItems = getUndoItems(this.menuConfig, this.addicionalCommands.undoItems || []);
+    this.blockItems = getBlockItems(this.menuConfig, this.addicionalCommands.blockItems || []);
   }
 
   render() {
     return html`
-      ${this.showItems(this.toolbarItems, 'marks')}
-      ${this.paragraphTypes}
-      ${this.showItems(this.undoItems, 'blocks')}
+      ${this.menuConfig
+        ? html`
+          ${this.showItems(this.toolbarItems, 'marks')}
+          ${this.paragraphTypes}
+          ${this.showItems(this.undoItems, 'blocks')}
+        `
+        : ''
+      }
     `;
   }
 
   showItems(items, cssClass) {
+    if(!items) return '';
     return html`
       <div class="${cssClass}">
         ${items.map(item => html`
@@ -97,21 +103,26 @@ export class DileEditorToolbar extends LitElement {
 
   get paragraphTypes() {
     return html`
-      <div class="blocks">
-        <dile-icon .icon=${notesIcon}></dile-icon>
-        <dile-select 
-          id="blockselect" 
-          name="blockselect" 
-          @element-changed=${this.blockElementChanged} 
-          quietOnStart
-        >
-          <select slot="select">
-            ${this.blockItems.map(item => html`
-              <option value="${item.commandName}">${item.commandName}</option>
-            `)}
-          </select>
-        </dile-select>
-      </div>
+      ${this.blockItems
+        ? html `
+          <div class="blocks">
+            <dile-icon .icon=${notesIcon}></dile-icon>
+            <dile-select 
+              id="blockselect" 
+              name="blockselect" 
+              @element-changed=${this.blockElementChanged} 
+              quietOnStart
+            >
+              <select slot="select">
+                ${this.blockItems.map(item => html`
+                  <option value="${item.commandName}">${item.commandName}</option>
+                `)}
+              </select>
+            </dile-select>
+          </div>
+        `
+        : ''
+      }
     `
   }
 

package/src/prosemirror/menu-items.js

@@ -1,3 +1,4 @@
+import { html } from "lit";
 import { undo, redo } from "prosemirror-history";
 import {
   formatBoldIcon,
@@ -26,7 +27,7 @@ import {
 } from './markdown-commands.js';
 import { ToolbarItem, ToolbarLink, ToolbarRemoveLink, ToolbarImage } from "./toolbar-item.js";
 
-export const toolbarItems = [
+export const getToolbarItems = (config, additionalItems) => [
   new ToolbarItem({
     command: boldCommand,
     commandName: 'bold',
@@ -46,6 +47,7 @@ export const toolbarItems = [
     command: linkCommand,
     commandName: 'link',
     icon: insertLinkIcon,
+    dialogTemplate: html`<dile-editor-link-dialog id="linkDialog"></dile-editor-link-dialog> `,
   }),
   new ToolbarRemoveLink({
     commandName: 'removeLink',
@@ -55,6 +57,7 @@ export const toolbarItems = [
     command: linkCommand,
     commandName: 'image',
     icon: imageIcon,
+    dialogTemplate: html`<dile-editor-image-dialog id="imageDialog"></dile-editor-image-dialog> `,
   }),
   new ToolbarItem({
     command: setUnorderedListCommand,
@@ -71,9 +74,10 @@ export const toolbarItems = [
     commandName: 'lift',
     icon: formatIndentDecreaseIcon,
   }),
-];
+  ...additionalItems,
+].filter(item => config[item.commandName] !== false);
 
-export const undoItems = [
+export const getUndoItems = (config, additionalItems) => [
   new ToolbarItem({
     command: undo,
     commandName: 'undo',
@@ -83,10 +87,15 @@ export const undoItems = [
     command: redo,
     commandName: 'redo',
     icon: redoIcon,
-  })
-];
+  }),
+  ...additionalItems,
+].filter(item => config[item.commandName] !== false);
 
-export const blockItems = [
+export const getBlockItems = (config, additionalItems) => [
+  {
+    command: setCodeCommand,
+    commandName: 'code',
+  },
   {
     command: setParagraphCommand,
     commandName: 'paragraph',
@@ -107,9 +116,5 @@ export const blockItems = [
     command: headingCommandCreator(4),
     commandName: 'h4',
   },
-  {
-    command: setCodeCommand,
-    commandName: 'code',
-  },
-
-];
+  ...additionalItems,
+].filter(item => config[item.commandName] !== false);

package/src/prosemirror/menu-plugin.js

@@ -2,12 +2,14 @@ import { Plugin } from "prosemirror-state";
 
 const toolbarElement = 'dile-editor-toolbar';
 
-export const menuPlugin = () => new Plugin({
+export const menuPlugin = (menuConfig, addicionalCommands) => 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;
       editorView.dom.parentNode.insertBefore(toolbar, editorView.dom);
     } else {
       toolbar = editorView.dom.parentElement.querySelector(toolbarElement);

package/src/prosemirror/toolbar-item.js

@@ -11,6 +11,7 @@ export class ToolbarItem {
     this.command = config.command;
     this.commandName = config.commandName;
     this.icon = config.icon;
+    this.dialogTemplate = config.dialogTemplate;
   }
 
   checkActive(editorView) {