@dile/editor 2.2.0 → 2.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/editor",
-  "version": "2.2.0",
+  "version": "2.3.1",
   "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.2.0",
+    "@dile/icons": "^2.1.0",
+    "@dile/ui": "^2.3.1",
     "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": "5d4e95bced050de218bb3d5a0e489437d9dea8a6"
+  "gitHead": "80e68858b65ac111ffba6ed72eee05df0a0aeb94"
 }

package/src/DileEditor.js

@@ -4,8 +4,10 @@ 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';
+import { DileI18nMixin } from './DileI18nMixin.js';
 
-export class DileEditor extends DileEmmitChange(LitElement) {
+export class DileEditor extends DileI18nMixin(DileEmmitChange(LitElement)) {
   static styles = [
     messageStyles,
     css`
@@ -107,6 +109,15 @@ export class DileEditor extends DileEmmitChange(LitElement) {
         opacity: 0.5;
       }
 
+      .ProseMirror img {
+        max-width: 100%;
+      }
+
+      .ProseMirror code {
+        background-color: #eee;
+        padding: 0.4rem;
+      }
+
       dile-tabs {
         margin-bottom: 0.3rem;
       }
@@ -152,15 +163,29 @@ 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 },
+
+      /** Language config */
     };
   }
 
   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 +195,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">
@@ -193,7 +228,7 @@ export class DileEditor extends DileEmmitChange(LitElement) {
               attrForSelected="name"
               @dile-selected-changed=${this.tabSelectedChange}
             >
-              <dile-tab name="design">Design view</dile-tab>
+              <dile-tab name="design">${this.translations.design_view}</dile-tab>
               <dile-tab name="markdown">Markdown</dile-tab>
             </dile-tabs>
           </nav>
@@ -209,6 +244,10 @@ 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}
+                language="${this.language}"
               ></dile-editor-markdown>
             </section>
           </dile-pages>
@@ -231,8 +270,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 +300,8 @@ export class DileEditor extends DileEmmitChange(LitElement) {
       this.message = '';
     }
   }
+
+  setInitialized() {
+    this.initialized = true;
+  }
 }

package/src/DileI18nMixin.js

@@ -0,0 +1,7 @@
+import { DileI18nMixin as OriginalDileI18nMixin } from '@dile/ui/mixins/i18n/DileI18nMixin.js';
+import { translationService } from './translationService';
+
+export const DileI18nMixin = (superclass) => 
+  class extends OriginalDileI18nMixin(translationService)(superclass) {
+    
+  };

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

@@ -3,8 +3,9 @@ import { NodeSelection } from "prosemirror-state"
 import { schema } from "prosemirror-markdown";
 import '@dile/ui/components/menu-overlay/menu-overlay.js';
 import '@dile/ui/components/button/button.js';
+import { DileI18nMixin } from './DileI18nMixin.js';
 
-export class DileEditorImageDialog extends LitElement {
+export class DileEditorImageDialog extends DileI18nMixin(LitElement) {
   static styles = [
     css`
       :host {
@@ -30,11 +31,11 @@ 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> 
+          <dile-button @click=${this.accept}>${this.translations.accept}</dile-button> <dile-button @click=${this.close}>${this.translations.cancel}</dile-button> 
         </div>
       </dile-menu-overlay>
     `;
@@ -69,6 +70,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

@@ -1,8 +1,9 @@
 import { LitElement, html, css } from 'lit';
 import '@dile/ui/components/menu-overlay/menu-overlay.js';
 import '@dile/ui/components/button/button.js';
+import { DileI18nMixin } from './DileI18nMixin.js';
 
-export class DileEditorLinkDialog extends LitElement {
+export class DileEditorLinkDialog extends DileI18nMixin(LitElement) {
   static styles = [
     css`
       :host {
@@ -33,10 +34,10 @@ export class DileEditorLinkDialog extends LitElement {
           <section class="grid">
             <div>URL:</div>
             <div><input type="text" id="url"></div>
-            <div>Title:</div>
+            <div>${this.translations.title}:</div>
             <div><input type="text" id="title"></div>
           </section>
-          <dile-button @click=${this.accept}>Accept</dile-button> <dile-button @click=${this.close}>Cancel</dile-button> 
+          <dile-button @click=${this.accept}>${this.translations.accept}</dile-button> <dile-button @click=${this.close}>${this.translations.cancel}</dile-button> 
         </div>
       </dile-menu-overlay>
     `;
@@ -45,6 +46,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 +67,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

@@ -12,19 +12,37 @@ import { history } from "prosemirror-history";
 import { buildKeymap } from "prosemirror-example-setup";
 import './dile-editor-toolbar.js';
 import { menuPlugin } from './prosemirror/menu-plugin.js';
+import { DileI18nMixin } from './DileI18nMixin.js';
 
-export class DileEditorMarkdown extends LitElement {
+export class DileEditorMarkdown extends DileI18nMixin(LitElement) {
   
   static styles = [
     css`
+      * {
+        box-sizing: border-box;
+      }
       :host {
         display: block;
       }
     `
   ];
 
+  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 +55,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 +71,7 @@ export class DileEditorMarkdown extends LitElement {
         history(),
         keymap(buildKeymap(schema)),
         keymap(baseKeymap),
-        menuPlugin(),
+        menuPlugin(this._menuConfig, this.addicionalCommands, this.language),
       ]
     })
   }

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

@@ -2,8 +2,9 @@ import { LitElement, html, css } from 'lit';
 import '@dile/ui/components/icon/icon.js';
 import './dile-editor-link-dialog.js';
 import './dile-editor-image-dialog.js';
+import { DileI18nMixin } from './DileI18nMixin.js';
 
-export class DileEditorToolbarItem extends LitElement {
+export class DileEditorToolbarItem extends DileI18nMixin(LitElement) {
   static styles = [
     css`
       :host {
@@ -37,8 +38,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(this.language) : ''}
     `;
   }
 

package/src/dile-editor-toolbar.js

@@ -2,11 +2,12 @@ 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";
+import { DileI18nMixin } from './DileI18nMixin.js';
 
-export class DileEditorToolbar extends LitElement {
+export class DileEditorToolbar extends DileI18nMixin(LitElement) {
   static styles = [
     css`
       :host {
@@ -25,6 +26,7 @@ export class DileEditorToolbar extends LitElement {
         margin-bottom: 0;
         --dile-input-border-width: 0;
         --dile-input-padding: 3px;
+        --dile-input-background-color: var(--dile-editor-toolbar-block-background-color, #eee);
       }
       .marks, .blocks {
         display: flex;
@@ -48,32 +50,41 @@ 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 = {}
   }
 
+  get blockselect() {
+    return this.shadowRoot.getElementById('blockselect');
+  }
+  
   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`
@@ -86,6 +97,7 @@ export class DileEditorToolbar extends LitElement {
                 @accept-link-dialog=${this.doLinkCommand}
                 @accept-image-dialog=${this.doImageCommand}
                 .editorView=${this.editorView}
+                language="${this.language}"
               ></dile-editor-toolbar-item>
               `
             : ''
@@ -97,21 +109,27 @@ 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}">${this.translations[item.commandName] || item.commandName}</option>
+                  `)}
+                  <option value="-"></option>
+              </select>
+            </dile-select>
+          </div>
+        `
+        : ''
+      }
     `
   }
 
@@ -140,7 +158,11 @@ export class DileEditorToolbar extends LitElement {
     this.toolbarItems = this.computeActive(this.toolbarItems);
     this.undoItems = this.computeActive(this.undoItems);
     let currentBlock = this.blockItems.find(item => !item.command(this.editorView.state, null, this.editorView))
-    this.blockselect?.quietChange(currentBlock.commandName);
+    if(currentBlock) {
+      this.blockselect?.quietChange(currentBlock.commandName);
+    } else {
+      this.blockselect?.quietChange('-');
+    }
   }
 
   computeActive(items) {

package/src/i18n/en.js

@@ -0,0 +1,8 @@
+export const translations = {
+  design_view: 'Design view',
+  code: 'Code',
+  paragraph: 'Paragraph',
+  accept: 'Accept',
+  cancel: 'Cancel',
+  title: 'Title',
+}

package/src/i18n/es.js

@@ -0,0 +1,8 @@
+export const translations = {
+  design_view: 'Vista diseño',
+  code: 'Código',
+  paragraph: 'Párrafo',
+  accept: 'Aceptar',
+  cancel: 'Cancelar',
+  title: 'Título',
+}

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:(language) => html`<dile-editor-link-dialog language="${language}" id="linkDialog"></dile-editor-link-dialog> `,
   }),
   new ToolbarRemoveLink({
     commandName: 'removeLink',
@@ -55,6 +57,7 @@ export const toolbarItems = [
     command: linkCommand,
     commandName: 'image',
     icon: imageIcon,
+    dialogTemplate:(language) => html`<dile-editor-image-dialog language="${language}" 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,14 +87,19 @@ 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: setParagraphCommand,
     commandName: 'paragraph',
   },
+  {
+    command: setCodeCommand,
+    commandName: 'code',
+  },
   {
     command: headingCommandCreator(1),
     commandName: 'h1',
@@ -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,15 @@ import { Plugin } from "prosemirror-state";
 
 const toolbarElement = 'dile-editor-toolbar';
 
-export const menuPlugin = () => new Plugin({
+export const menuPlugin = (menuConfig, addicionalCommands, 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.language = language;
       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) {

package/src/translationService.js

@@ -0,0 +1,15 @@
+import {TranslationService as OriginalTranslationService} from '@dile/ui/mixins/i18n/TranslationService.js';
+
+class TranslationService extends OriginalTranslationService {
+  async importLanguage(language) {
+    const module = await import(`./i18n/${language}.js`);
+    return module;
+  }
+
+  async importFallback() {
+    const defaultModule = await import('./i18n/en.js');
+    return defaultModule;
+  }
+}
+
+export const translationService = new TranslationService();