@dile/editor 2.3.1 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/editor",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "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.1",
+    "@dile/ui": "^2.4.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": "80e68858b65ac111ffba6ed72eee05df0a0aeb94"
+  "gitHead": "9514bd93f87c3237a41056fb6bb59025088f230e"
 }

package/src/DileEditor.js

@@ -113,11 +113,16 @@ export class DileEditor extends DileI18nMixin(DileEmmitChange(LitElement)) {
         max-width: 100%;
       }
 
-      .ProseMirror code {
+      .ProseMirror pre {
         background-color: #eee;
         padding: 0.4rem;
       }
 
+      .ProseMirror p code {
+        background-color: #eee;
+        padding: 1px;
+      }
+
       dile-tabs {
         margin-bottom: 0.3rem;
       }
@@ -172,10 +177,13 @@ export class DileEditor extends DileI18nMixin(DileEmmitChange(LitElement)) {
       /** Menu config */
       _menuConfig: { type: Object },
 
-      /** Language config */
     };
   }
 
+  static get formAssociated() {
+    return true;
+  }
+
   constructor() {
     super();
     this.initialized = false;
@@ -185,13 +193,18 @@ export class DileEditor extends DileI18nMixin(DileEmmitChange(LitElement)) {
     this.message = '';
     this.disableToolbarItems = '';
     this._menuConfig = {...defaultToolbarConfig};
-    this.addicionalCommands = {}
+    this.addicionalCommands = {};
+    this.internals = this.attachInternals();
   }
 
   updated(changedProperties) {
     if(changedProperties.has('value') && this.isValueExternalyUpdated) {
       this.updateEditorContent(this.value);
     }
+    if(changedProperties.has('value')) {
+      this.emmitChange();
+      this.internals.setFormValue(this.value);
+    }
   }
 
   firstUpdated() {
@@ -218,7 +231,7 @@ export class DileEditor extends DileI18nMixin(DileEmmitChange(LitElement)) {
       }
       <main>
         ${this.label
-          ? html`<label for="textField">${this.label}</label>`
+          ? html`<label for="textField" @click=${this.focus}>${this.label}</label>`
           : ""
         }
         <section class="for-input ${this.errored ? 'errored' : ''}">
@@ -254,8 +267,6 @@ export class DileEditor extends DileI18nMixin(DileEmmitChange(LitElement)) {
         </section>
       </main>
     </div>
-    
-      
     `;
   }
 
@@ -304,4 +315,12 @@ export class DileEditor extends DileI18nMixin(DileEmmitChange(LitElement)) {
   setInitialized() {
     this.initialized = true;
   }
+
+  focus() {
+    if(this.viewSelected == 'design') {
+      console.log(this.editor);
+      this.editor.focus();
+    }
+    this.textarea.focus();
+  }
 }

package/src/dile-editor-markdown.js

@@ -91,5 +91,9 @@ export class DileEditorMarkdown extends DileI18nMixin(LitElement) {
   get markdownCode() {
     return defaultMarkdownSerializer.serialize(this.view.state.doc);
   }
+
+  focus() {
+    this.view.focus();
+  }
 }
 customElements.define('dile-editor-markdown', DileEditorMarkdown);

package/src/dile-editor-toolbar.js

@@ -173,6 +173,7 @@ export class DileEditorToolbar extends DileI18nMixin(LitElement) {
   }
 
   blockElementChanged(e) {
+    e.stopPropagation();
     let commandName = e.detail.value;
     let commandElement = this.blockItems.find(item => item.commandName == commandName);
     commandElement.command(this.editorView.state, this.editorView.dispatch);