@dile/editor 2.4.2 → 2.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/editor",
-  "version": "2.4.2",
+  "version": "2.4.4",
   "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": "bddd214424a2b8a1d0a91d780bc77459a70508f2"
+  "gitHead": "01f46d3178e1272b079586110ab4bdca749f5710"
 }

package/src/DileEditor.js

@@ -63,6 +63,7 @@ export class DileEditor extends DileI18nMixin(DileEmmitChange(LitElement)) {
       }
 
       .ProseMirror {
+        line-height: var(--dile-editor-line-height, 1.3rem);
         position: relative;
         word-wrap: break-word;
         white-space: pre-wrap;
@@ -72,7 +73,6 @@ export class DileEditor extends DileI18nMixin(DileEmmitChange(LitElement)) {
         font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
         outline: none;
         padding: 0 10px;
-
         max-width: 100%;
         overflow: auto;
       }
@@ -112,15 +112,23 @@ export class DileEditor extends DileI18nMixin(DileEmmitChange(LitElement)) {
       .ProseMirror img {
         max-width: 100%;
       }
+      .ProseMirror pre, .ProseMirror p code {
+        background-color: var(--dile-editor-code-bakground-color, #eee);
+        font-family: var(--dile-editor-code-font-family, Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace);
+        font-size: var(--dile-editor-code-font-size, 0.9em);
+        color: var(--dile-editor-code-color, #657b83);
+      }
 
       .ProseMirror pre {
-        background-color: #eee;
         padding: 0.4rem;
+        overflow-x: auto;
+        line-height: 1.5em;
+        tab-size: 4;
+        hyphens: none;
       }
 
       .ProseMirror p code {
-        background-color: #eee;
-        padding: 1px;
+        padding: 2px;
       }
 
       dile-tabs {
@@ -144,6 +152,11 @@ export class DileEditor extends DileI18nMixin(DileEmmitChange(LitElement)) {
          display: flex; 
          flex-direction: column-reverse;
       }
+
+      li p {
+        margin: 0.25rem 0 !important;
+      }
+      
     `
   ];
 
@@ -172,7 +185,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 +206,7 @@ export class DileEditor extends DileI18nMixin(DileEmmitChange(LitElement)) {
     this.message = '';
     this.disableToolbarItems = '';
     this._menuConfig = {...defaultToolbarConfig};
-    this.addicionalCommands = {};
+    this.additionalCommands = {};
     this.internals = this.attachInternals();
   }
 
@@ -266,7 +279,7 @@ export class DileEditor extends DileI18nMixin(DileEmmitChange(LitElement)) {
         @dile-editor-change=${this.updateValue}
         ._menuConfig=${this._menuConfig}
         @dile-editor-markdown-initialized=${this.setInitialized}
-        .addicionalCommands=${this.addicionalCommands}
+        .additionalCommands=${this.additionalCommands}
         language="${this.language}"
       ></dile-editor-markdown>
     `

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 {