@exmg/exm-wysiwyg-editor 1.1.16 → 1.1.18

package/README.md

@@ -1,25 +1,13 @@
+# Wysiwyg editor element
 
-  # Markdown editor element.
-  ### An out of the box customizable Markdown Editor for Exmachina
- 
-  ```
-  <exm-markdown-editor markdown="# Header 1"></exm-markdown-editor>
-  ```
-  ## Styling
- 
-   Custom property | Description | Default
-   ----------------|-------------|----------
-  `--exm-markdown-editor-code-color` | Editor's text color | --md-sys-color-on-surface
-  `--exm-markdown-editor-code-cursor-color` | Editor's cursor color | --md-sys-color-on-surface
-  `--exm-markdown-editor-code-header-color` | H1 color in editor | #4a8fc0;
-  `--exm-markdown-editor-code-inline-code-color` | Inline code color | #ea881f
-  `--exm-markdown-editor-code-list-color` | Lists color | rgb(25, 165, 28)
-  `--exm-markdown-editor-selected-code-color` | Selected text color | rgb(140, 140, 140)
-  `--exm-markdown-editor-border-color` | Editor's border color | --md-sys-color-primary
-  `--exm-markdown-editor-background-color` | Toolbar and default preview background | --md-sys-color-surface-container-high
-  `--exm-markdown-editor-code-background-color` | Editor's background color when focused | --md-sys-color-surface-container-high
- 
-   ## Events:
-   - change - where detail is current markdown value
-   - insert-image - if the Editor is set to upload, it will trigger this event when the insert-image is clicked
- 
+### An out of the box customizable Wysiwyg Editor for Exmachina
+
+```html
+<exm-wysiwyg-editor value="<h1>Title</h1>"></exm-wysiwyg-editor>
+```
+
+## Events
+
+- change - where detail is current html value
+- blur - on editor blur
+- focus - on editor focus

package/dist/exm-wysiwyg-editor-base.d.ts

@@ -28,6 +28,7 @@ export declare class WysiwygEditorElementBase extends ExmgElement {
     editor?: Editor;
     reset(): void;
     protected firstUpdated(): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     private createExtensionList;
     editorSetup(): void;
     private handleEditorUpdate;

package/dist/exm-wysiwyg-editor-base.js

@@ -49,14 +49,25 @@ export class WysiwygEditorElementBase extends ExmgElement {
         this.value = (_a = this.getAttribute('value')) !== null && _a !== void 0 ? _a : '';
     }
     firstUpdated() {
-        if (!this.disabled) {
-            this.editorSetup();
-        }
+        this.editorSetup();
         if (this.label && this.required) {
             this.setAttribute('aria-required', 'true');
             this.label += ' *';
         }
     }
+    attributeChangedCallback(name, _old, value) {
+        var _a, _b;
+        this[name] = value;
+        if (name === 'value') {
+            (_a = this.editor) === null || _a === void 0 ? void 0 : _a.commands.setContent(value);
+        }
+        if (name === 'disabled') {
+            this.disabled = value !== null;
+            (_b = this.editor) === null || _b === void 0 ? void 0 : _b.setOptions({
+                editable: value === null,
+            });
+        }
+    }
     createExtensionList() {
         const headingList = [];
         let hasList = false;
@@ -127,7 +138,6 @@ export class WysiwygEditorElementBase extends ExmgElement {
             onBlur: this.handleBlur.bind(this),
             onFocus: this.handleFocus.bind(this),
         });
-        this.editor;
     }
     handleEditorUpdate({ editor }) {
         this.value = editor.getHTML();
@@ -156,10 +166,12 @@ export class WysiwygEditorElementBase extends ExmgElement {
         ${this.label
             ? html `<label class="${classMap(labelClasses)}" for="wysiwygEditorContainer">${this.label}</label>`
             : nothing}
-        <exm-wysiwyg-editor-toolbar
-          .editor=${this.editor}
-          .editorActions=${this.editorActions}
-        ></exm-wysiwyg-editor-toolbar>
+        ${!this.disabled
+            ? html `<exm-wysiwyg-editor-toolbar
+              .editor=${this.editor}
+              .editorActions=${this.editorActions}
+            ></exm-wysiwyg-editor-toolbar>`
+            : nothing}
         <div class="editor" id="editor"></div>
         ${this.supportingText ? html `<div class="supporting-text">${this.supportingText}</div>` : nothing}
       </div>

package/dist/styles/exm-wysiwyg-editor-toolbar-css.js

@@ -9,6 +9,7 @@ export const style = css `
     padding: 0.5rem 1rem;
     display: flex;
     flex-wrap: wrap;
+    gap: 2px;
   }
 
   .separator {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-wysiwyg-editor",
-  "version": "1.1.16",
+  "version": "1.1.18",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -63,5 +63,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e0ce15fa919af66b23633174437044a47b0b683a"
+  "gitHead": "3d6851a4ecf25db65978adfe024851020529e570"
 }