@dile/editor 2.3.0 → 2.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/editor",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "Webcomponent to create a user editor interface, configured on various ways",
   "keywords": [
     "markdown",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@dile/icons": "^2.1.0",
-    "@dile/ui": "^2.3.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": "b36ca91ece255381a48008c90b7e4f54c6e6c046"
+  "gitHead": "ea951d488df2f6ae44dec2b4b4487549caca09e6"
 }

package/src/DileEditor.js

@@ -5,8 +5,9 @@ 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`
@@ -112,6 +113,11 @@ export class DileEditor extends DileEmmitChange(LitElement) {
         max-width: 100%;
       }
 
+      .ProseMirror code {
+        background-color: #eee;
+        padding: 0.4rem;
+      }
+
       dile-tabs {
         margin-bottom: 0.3rem;
       }
@@ -165,6 +171,8 @@ export class DileEditor extends DileEmmitChange(LitElement) {
 
       /** Menu config */
       _menuConfig: { type: Object },
+
+      /** Language config */
     };
   }
 
@@ -184,6 +192,9 @@ export class DileEditor extends DileEmmitChange(LitElement) {
     if(changedProperties.has('value') && this.isValueExternalyUpdated) {
       this.updateEditorContent(this.value);
     }
+    if(changedProperties.has('value')) {
+      this.emmitChange();
+    }
   }
 
   firstUpdated() {
@@ -220,7 +231,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>
@@ -239,6 +250,7 @@ export class DileEditor extends DileEmmitChange(LitElement) {
                 ._menuConfig=${this._menuConfig}
                 @dile-editor-markdown-initialized=${this.setInitialized}
                 .addicionalCommands=${this.addicionalCommands}
+                language="${this.language}"
               ></dile-editor-markdown>
             </section>
           </dile-pages>

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/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 {
@@ -34,7 +35,7 @@ export class DileEditorImageDialog extends LitElement {
             <div>Alt:</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>
     `;

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>
     `;

package/src/dile-editor-markdown.js

@@ -12,11 +12,15 @@ 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;
       }
@@ -67,7 +71,7 @@ export class DileEditorMarkdown extends LitElement {
         history(),
         keymap(buildKeymap(schema)),
         keymap(baseKeymap),
-        menuPlugin(this._menuConfig, this.addicionalCommands),
+        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,7 +38,7 @@ export class DileEditorToolbarItem extends LitElement {
         .icon=${this.item.icon} 
         @click=${this.doCommand}
       ></dile-icon> 
-      ${this.item.dialogTemplate ? this.item.dialogTemplate : ''}
+      ${this.item.dialogTemplate ? this.item.dialogTemplate(this.language) : ''}
     `;
   }
 

package/src/dile-editor-toolbar.js

@@ -5,8 +5,9 @@ import '@dile/ui/components/select/select.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;
@@ -58,8 +60,11 @@ export class DileEditorToolbar extends LitElement {
     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 || []);
@@ -92,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>
               `
             : ''
@@ -115,8 +121,9 @@ export class DileEditorToolbar extends LitElement {
             >
               <select slot="select">
                 ${this.blockItems.map(item => html`
-                  <option value="${item.commandName}">${item.commandName}</option>
-                `)}
+                  <option value="${item.commandName}">${this.translations[item.commandName] || item.commandName}</option>
+                  `)}
+                  <option value="-"></option>
               </select>
             </dile-select>
           </div>
@@ -151,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

@@ -47,7 +47,7 @@ export const getToolbarItems = (config, additionalItems) => [
     command: linkCommand,
     commandName: 'link',
     icon: insertLinkIcon,
-    dialogTemplate: html`<dile-editor-link-dialog id="linkDialog"></dile-editor-link-dialog> `,
+    dialogTemplate:(language) => html`<dile-editor-link-dialog language="${language}" id="linkDialog"></dile-editor-link-dialog> `,
   }),
   new ToolbarRemoveLink({
     commandName: 'removeLink',
@@ -57,7 +57,7 @@ export const getToolbarItems = (config, additionalItems) => [
     command: linkCommand,
     commandName: 'image',
     icon: imageIcon,
-    dialogTemplate: html`<dile-editor-image-dialog id="imageDialog"></dile-editor-image-dialog> `,
+    dialogTemplate:(language) => html`<dile-editor-image-dialog language="${language}" id="imageDialog"></dile-editor-image-dialog> `,
   }),
   new ToolbarItem({
     command: setUnorderedListCommand,
@@ -92,14 +92,14 @@ export const getUndoItems = (config, additionalItems) => [
 ].filter(item => config[item.commandName] !== false);
 
 export const getBlockItems = (config, additionalItems) => [
-  {
-    command: setCodeCommand,
-    commandName: 'code',
-  },
   {
     command: setParagraphCommand,
     commandName: 'paragraph',
   },
+  {
+    command: setCodeCommand,
+    commandName: 'code',
+  },
   {
     command: headingCommandCreator(1),
     commandName: 'h1',

package/src/prosemirror/menu-plugin.js

@@ -2,7 +2,7 @@ import { Plugin } from "prosemirror-state";
 
 const toolbarElement = 'dile-editor-toolbar';
 
-export const menuPlugin = (menuConfig, addicionalCommands) => new Plugin({
+export const menuPlugin = (menuConfig, addicionalCommands, language) => new Plugin({
   view(editorView) {
     let toolbar;
     if (!editorView.dom.parentElement.querySelector(toolbarElement)) {
@@ -10,6 +10,7 @@ export const menuPlugin = (menuConfig, addicionalCommands) => new Plugin({
       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/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();