@dile/editor - npm Package Compare versions

Comparing version 2.3.0 to 2.3.1

package.json

 {
   "name": "@dile/editor",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "Webcomponent to create a user editor interface, configured on various ways",
@@ -33,3 +33,3 @@ "keywords": [
     "@dile/icons": "^2.1.0",
-    "@dile/ui": "^2.3.0",
+    "@dile/ui": "^2.3.1",
     "lit": "^2.7.0 || ^3.0.0",
@@ -45,3 +45,3 @@ "prosemirror-commands": "^1.5.0",
   },
-  "gitHead": "b36ca91ece255381a48008c90b7e4f54c6e6c046"
+  "gitHead": "80e68858b65ac111ffba6ed72eee05df0a0aeb94"
 }

src/dile-editor-image-dialog.js

@@ -6,4 +6,5 @@ import { LitElement, html, css } from 'lit';
 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 = [
@@ -38,3 +39,3 @@ css`
           </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>
@@ -41,0 +42,0 @@ </dile-menu-overlay>

src/dile-editor-link-dialog.js

 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 = [
@@ -36,6 +37,6 @@ css`
             <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>
@@ -42,0 +43,0 @@ </dile-menu-overlay>

src/dile-editor-markdown.js

@@ -15,7 +15,11 @@ import { LitElement, css } from 'lit';
 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 {
@@ -71,3 +75,3 @@ display: block;
         keymap(baseKeymap),
-        menuPlugin(this._menuConfig, this.addicionalCommands),
+        menuPlugin(this._menuConfig, this.addicionalCommands, this.language),
       ]
@@ -74,0 +78,0 @@ })

src/dile-editor-toolbar-item.js

@@ -5,4 +5,5 @@ import { LitElement, html, css } from 'lit';
 import './dile-editor-image-dialog.js';
+import { DileI18nMixin } from './DileI18nMixin.js';
 
-export class DileEditorToolbarItem extends LitElement {
+export class DileEditorToolbarItem extends DileI18nMixin(LitElement) {
   static styles = [
@@ -41,3 +42,3 @@ css`
       ></dile-icon> 
-      ${this.item.dialogTemplate ? this.item.dialogTemplate : ''}
+      ${this.item.dialogTemplate ? this.item.dialogTemplate(this.language) : ''}
     `;
@@ -44,0 +45,0 @@ }

src/dile-editor-toolbar.js

@@ -8,4 +8,5 @@ import { LitElement, html, css } from 'lit';
 import { schema } from "prosemirror-markdown";
+import { DileI18nMixin } from './DileI18nMixin.js';
 
-export class DileEditorToolbar extends LitElement {
+export class DileEditorToolbar extends DileI18nMixin(LitElement) {
   static styles = [
@@ -29,2 +30,3 @@ css`
         --dile-input-padding: 3px;
+        --dile-input-background-color: var(--dile-editor-toolbar-block-background-color, #eee);
       }
@@ -63,4 +65,7 @@ .marks, .blocks {
 
+  get blockselect() {
+    return this.shadowRoot.getElementById('blockselect');
+  }
+  
   firstUpdated() {
-    this.blockselect = this.shadowRoot.getElementById('blockselect');
     this.toolbarItems = getToolbarItems(this.menuConfig, this.addicionalCommands.toolbarItems || []);
@@ -98,2 +103,3 @@ this.undoItems = getUndoItems(this.menuConfig, this.addicionalCommands.undoItems || []);
                 .editorView=${this.editorView}
+                language="${this.language}"
               ></dile-editor-toolbar-item>
@@ -122,4 +128,5 @@ `
                 ${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>
@@ -159,3 +166,7 @@ </dile-select>
     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('-');
+    }
   }
@@ -162,0 +173,0 @@

src/DileEditor.js

@@ -8,4 +8,5 @@ import { LitElement, html, css } from 'lit';
 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 = [
@@ -116,2 +117,7 @@ messageStyles,
 
+      .ProseMirror code {
+        background-color: #eee;
+        padding: 0.4rem;
+      }
+
       dile-tabs {
@@ -170,2 +176,4 @@ margin-bottom: 0.3rem;
       _menuConfig: { type: Object },
+
+      /** Language config */
     };
@@ -226,3 +234,3 @@ }
             >
-              <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>
@@ -246,2 +254,3 @@ </dile-tabs>
                 .addicionalCommands=${this.addicionalCommands}
+                language="${this.language}"
               ></dile-editor-markdown>
@@ -248,0 +257,0 @@ </section>

src/prosemirror/menu-items.js

@@ -50,3 +50,3 @@ import { html } from "lit";
     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> `,
   }),
@@ -61,3 +61,3 @@ new ToolbarRemoveLink({
     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> `,
   }),
@@ -98,2 +98,6 @@ new ToolbarItem({
   {
+    command: setParagraphCommand,
+    commandName: 'paragraph',
+  },
+  {
     command: setCodeCommand,
@@ -103,6 +107,2 @@ commandName: 'code',
   {
-    command: setParagraphCommand,
-    commandName: 'paragraph',
-  },
-  {
     command: headingCommandCreator(1),
@@ -109,0 +109,0 @@ commandName: 'h1',

src/prosemirror/menu-plugin.js

@@ -5,3 +5,3 @@ import { Plugin } from "prosemirror-state";
 
-export const menuPlugin = (menuConfig, addicionalCommands) => new Plugin({
+export const menuPlugin = (menuConfig, addicionalCommands, language) => new Plugin({
   view(editorView) {
@@ -14,2 +14,3 @@ let toolbar;
       toolbar.addicionalCommands = addicionalCommands;
+      toolbar.language = language;
       editorView.dom.parentNode.insertBefore(toolbar, editorView.dom);
@@ -16,0 +17,0 @@ } else {

No alert changes

Improved metrics

Total package byte prevSize

32400

increased by7.64%

Number of package files

20

increased by25%

Lines of code

991

increased by5.88%

Dependency changes

• Updated@dile/ui@^2.3.1