@exmg/exm-wysiwyg-editor 1.1.23 → 1.1.25

package/dist/actions/anchor/action.js

@@ -1,5 +1,5 @@
 import './dialog/exm-wysiwyg-toolbar-link-dialog.js';
-import { sleep } from '../../utils.js';
+import { sleep } from '../../utils/index.js';
 /**
  * Open the dialog and wait until the close or submit button has been pressed
  * @param url The initial url for the input

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

@@ -1,8 +1,13 @@
 import { Editor } from '@tiptap/core';
+import { getFormValue } from '@material/web/labs/behaviors/form-associated.js';
+import { WysiwygEditorValidator } from './validator/exm-wysiwyg-editor-validator.js';
+import { createValidator, getValidityAnchor } from '@material/web/labs/behaviors/constraint-validation.js';
 import { ExmgElement } from '@exmg/lit-base';
 import { EditorActions } from './types.js';
 import './exm-wysiwyg-editor-toolbar.js';
 import { WysiwygEditorToolbar } from './exm-wysiwyg-editor-toolbar.js';
+declare const WysiwygBaseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("@material/web/labs/behaviors/element-internals.js").WithElementInternals) & typeof ExmgElement & import("@material/web/labs/behaviors/form-associated.js").FormAssociatedConstructor, import("@material/web/labs/behaviors/form-associated.js").FormAssociated>, import("@material/web/labs/behaviors/constraint-validation.js").ConstraintValidation>;
+type WysiwygMode = 'md' | 'html';
 /**
  *  # Events:
  *  - change - where detail is current html value
@@ -10,13 +15,23 @@ import { WysiwygEditorToolbar } from './exm-wysiwyg-editor-toolbar.js';
  *  - focus - on editor focus
  *
  * @customElement
- * @element exm-markdown-editor
+ * @element exm-wysiwyg-editor
  * @memberof Exmg
  * @extends ExmgElement
- * @summary Markdown editor element
+ * @summary Wysiwyg editor element
  */
-export declare class WysiwygEditorElementBase extends ExmgElement {
+export declare class WysiwygEditorElementBase extends WysiwygBaseClass {
+    /**
+     * Input value. Can be either a markdown string or html. Don't forget to set the mode
+     */
     value: string;
+    /**
+     * The value type of the Editor. Can de either `md` for Markdown, of `html` for HTML.
+     * Internally the editor uses html, so when set to markdown, the values will be converted
+     *
+     * @default html
+     */
+    mode: WysiwygMode;
     label: string;
     upload: boolean;
     editorActions: EditorActions[];
@@ -25,10 +40,22 @@ export declare class WysiwygEditorElementBase extends ExmgElement {
     supportingText: string;
     editorElement?: HTMLDivElement;
     toolbar?: WysiwygEditorToolbar;
+    /**
+     * The actual content used in the editor. This is always the html content of the editor
+     */
+    content: string;
     editor?: Editor;
+    internalTextarea?: HTMLTextAreaElement;
     reset(): void;
+    [getFormValue](): string;
+    [createValidator](): WysiwygEditorValidator;
+    [getValidityAnchor](): HTMLTextAreaElement;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    focus(): void;
+    disconnectedCallback(): void;
     protected firstUpdated(): void;
-    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): Promise<void>;
     private createExtensionList;
     editorSetup(): void;
     private handleEditorUpdate;
@@ -37,3 +64,4 @@ export declare class WysiwygEditorElementBase extends ExmgElement {
     private handleFocus;
     protected render(): import("lit-html").TemplateResult<1>;
 }
+export {};

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

@@ -14,6 +14,10 @@ import Strike from '@tiptap/extension-strike';
 import Underline from '@tiptap/extension-underline';
 import Blockquote from '@tiptap/extension-blockquote';
 import Link from '@tiptap/extension-link';
+import { mixinElementInternals } from '@material/web/labs/behaviors/element-internals.js';
+import { getFormValue, mixinFormAssociated } from '@material/web/labs/behaviors/form-associated.js';
+import { WysiwygEditorValidator } from './validator/exm-wysiwyg-editor-validator.js';
+import { createValidator, getValidityAnchor, mixinConstraintValidation, } from '@material/web/labs/behaviors/constraint-validation.js';
 import { query, property, state } from 'lit/decorators.js';
 import { ExmgElement } from '@exmg/lit-base';
 import { classMap } from 'lit/directives/class-map.js';
@@ -21,6 +25,8 @@ import { EditorActions } from './types.js';
 import './exm-wysiwyg-editor-toolbar.js';
 import { linkOptions } from './actions/anchor/options.js';
 import { defaultActionList } from './toolbarActions.js';
+import { md2html, html2md } from './utils/index.js';
+const WysiwygBaseClass = mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(ExmgElement)));
 /**
  *  # Events:
  *  - change - where detail is current html value
@@ -28,26 +34,62 @@ import { defaultActionList } from './toolbarActions.js';
  *  - focus - on editor focus
  *
  * @customElement
- * @element exm-markdown-editor
+ * @element exm-wysiwyg-editor
  * @memberof Exmg
  * @extends ExmgElement
- * @summary Markdown editor element
+ * @summary Wysiwyg editor element
  */
-export class WysiwygEditorElementBase extends ExmgElement {
+export class WysiwygEditorElementBase extends WysiwygBaseClass {
     constructor() {
         super(...arguments);
+        /**
+         * Input value. Can be either a markdown string or html. Don't forget to set the mode
+         */
         this.value = '';
+        /**
+         * The value type of the Editor. Can de either `md` for Markdown, of `html` for HTML.
+         * Internally the editor uses html, so when set to markdown, the values will be converted
+         *
+         * @default html
+         */
+        this.mode = 'html';
         this.label = '';
         this.upload = false;
         this.editorActions = defaultActionList;
         this.required = false;
         this.disabled = false;
         this.supportingText = '';
+        /**
+         * The actual content used in the editor. This is always the html content of the editor
+         */
+        this.content = '';
     }
     reset() {
         var _a;
         this.value = (_a = this.getAttribute('value')) !== null && _a !== void 0 ? _a : '';
     }
+    [getFormValue]() {
+        return this.value;
+    }
+    [createValidator]() {
+        return new WysiwygEditorValidator(() => this);
+    }
+    [getValidityAnchor]() {
+        return this.internalTextarea;
+    }
+    formResetCallback() {
+        this.reset();
+    }
+    formStateRestoreCallback(state) {
+        this.value = state;
+    }
+    focus() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.commands.focus();
+    }
+    disconnectedCallback() {
+        this.removeEventListener('blur', this.handleBlur);
+    }
     firstUpdated() {
         this.editorSetup();
         if (this.label && this.required) {
@@ -55,11 +97,17 @@ export class WysiwygEditorElementBase extends ExmgElement {
             this.label += ' *';
         }
     }
-    attributeChangedCallback(name, _old, value) {
+    async 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 (this.mode === 'md') {
+                this.content = await md2html(this.value);
+            }
+            else {
+                this.content = this.value;
+            }
+            (_a = this.editor) === null || _a === void 0 ? void 0 : _a.commands.setContent(this.content);
         }
         if (name === 'disabled') {
             this.disabled = value !== null;
@@ -139,8 +187,13 @@ export class WysiwygEditorElementBase extends ExmgElement {
             onFocus: this.handleFocus.bind(this),
         });
     }
-    handleEditorUpdate({ editor }) {
-        this.value = editor.getHTML();
+    async handleEditorUpdate({ editor }) {
+        if (this.mode === 'md') {
+            this.value = await html2md(editor.getHTML());
+        }
+        else {
+            this.value = editor.getHTML();
+        }
         this.fire('change', this.value);
     }
     handleEditorTransaction() {
@@ -181,6 +234,9 @@ export class WysiwygEditorElementBase extends ExmgElement {
 __decorate([
     property({ type: String })
 ], WysiwygEditorElementBase.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], WysiwygEditorElementBase.prototype, "mode", void 0);
 __decorate([
     property({ type: String })
 ], WysiwygEditorElementBase.prototype, "label", void 0);
@@ -205,6 +261,9 @@ __decorate([
 __decorate([
     query('exm-wysiwyg-editor-toolbar')
 ], WysiwygEditorElementBase.prototype, "toolbar", void 0);
+__decorate([
+    state()
+], WysiwygEditorElementBase.prototype, "content", void 0);
 __decorate([
     state()
 ], WysiwygEditorElementBase.prototype, "editor", void 0);

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

@@ -15,7 +15,7 @@ export class WysiwygEditorToolbarBase extends ExmgElement {
         this.editorActions = [];
     }
     handleSelectionUpdate() {
-        this.requestUpdate();
+        this.requestUpdate && this.requestUpdate();
     }
     firstUpdated() {
         var _a;

package/dist/utils/html2md.d.ts

@@ -0,0 +1 @@
+export declare const html2md: (html: string) => Promise<string>;

package/dist/utils/html2md.js

@@ -0,0 +1,12 @@
+import TurndownService from 'turndown';
+import { gfm } from 'turndown-plugin-gfm';
+export const html2md = async (html) => {
+    const turndownService = new TurndownService({
+        headingStyle: 'atx',
+        bulletListMarker: '-',
+    });
+    turndownService.use(gfm);
+    const markdown = turndownService.turndown(html);
+    return await markdown;
+};
+//# sourceMappingURL=html2md.js.map

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { sleep } from './sleep.js';
+export { md2html } from './md2html.js';
+export { html2md } from './html2md.js';

package/dist/utils/index.js

@@ -0,0 +1,4 @@
+export { sleep } from './sleep.js';
+export { md2html } from './md2html.js';
+export { html2md } from './html2md.js';
+//# sourceMappingURL=index.js.map

package/dist/utils/md2html.d.ts

@@ -0,0 +1 @@
+export declare const md2html: (markdown: string) => Promise<string>;

package/dist/utils/md2html.js

@@ -0,0 +1,10 @@
+import { marked } from 'marked';
+export const md2html = async (markdown) => {
+    marked.use({
+        pedantic: false,
+        gfm: true,
+        breaks: false,
+    });
+    return await marked.parse(markdown);
+};
+//# sourceMappingURL=md2html.js.map

package/dist/{utils.js → utils/sleep.js}

@@ -1,2 +1,2 @@
 export const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));
-//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=sleep.js.map

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

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Validator } from '@material/web/labs/behaviors/validators/validator.js';
+export interface WysiwygEditorState {
+    /**
+     * Whether the checkbox is required.
+     */
+    readonly required: boolean;
+    readonly value: string;
+    readonly internalElement?: HTMLInputElement;
+}
+export declare class WysiwygEditorValidator extends Validator<WysiwygEditorState> {
+    private inputElement?;
+    protected computeValidity(state: WysiwygEditorState): {
+        validity: ValidityState;
+        validationMessage: string;
+    };
+    protected equals(prevState: WysiwygEditorState, state: WysiwygEditorState): boolean;
+    protected copy(state: WysiwygEditorState): WysiwygEditorState;
+}

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

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Validator } from '@material/web/labs/behaviors/validators/validator.js';
+export class WysiwygEditorValidator extends Validator {
+    computeValidity(state) {
+        var _a;
+        if (!this.inputElement) {
+            this.inputElement = state.internalElement;
+        }
+        /**
+         * Lazily create the input element if not existing
+         */
+        if (!this.inputElement) {
+            this.inputElement = document.createElement('input');
+            this.inputElement.type = 'text';
+        }
+        /**
+         * Set values to the input element
+         */
+        this.inputElement.value = (_a = state.value) !== null && _a !== void 0 ? _a : '';
+        this.inputElement.required = state.required;
+        return {
+            validity: this.inputElement.validity,
+            validationMessage: this.inputElement.validationMessage,
+        };
+    }
+    equals(prevState, state) {
+        return prevState.value === state.value && prevState.required === state.required;
+    }
+    copy(state) {
+        return {
+            ...state,
+        };
+    }
+}
+//# sourceMappingURL=exm-wysiwyg-editor-validator.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-wysiwyg-editor",
-  "version": "1.1.23",
+  "version": "1.1.25",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -47,7 +47,11 @@
     "@tiptap/extension-paragraph": "^2.11.7",
     "@tiptap/extension-strike": "^2.11.7",
     "@tiptap/extension-text": "^2.11.7",
-    "@tiptap/extension-underline": "^2.11.7"
+    "@tiptap/extension-underline": "^2.11.7",
+    "@types/turndown": "^5.0.0",
+    "marked": "^15.0.0",
+    "turndown": "^7.2.0",
+    "turndown-plugin-gfm": "^1.0.2"
   },
   "peerDependencies": {
     "@exmg/lit-base": "^3.0.3",
@@ -63,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7f954ebfd386f5084e7f76a04c839de66aea3102"
+  "gitHead": "e0e168ccfc3d87bcf73b42fe244bba2dd40fc926"
 }