@exmg/exm-wysiwyg-editor 1.1.16

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

@@ -0,0 +1,38 @@
+import { Editor } from '@tiptap/core';
+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';
+/**
+ *  # Events:
+ *  - change - where detail is current html value
+ *  - blur - on editor blur
+ *  - focus - on editor focus
+ *
+ * @customElement
+ * @element exm-markdown-editor
+ * @memberof Exmg
+ * @extends ExmgElement
+ * @summary Markdown editor element
+ */
+export declare class WysiwygEditorElementBase extends ExmgElement {
+    value: string;
+    label: string;
+    upload: boolean;
+    editorActions: EditorActions[];
+    required: boolean;
+    disabled: boolean;
+    supportingText: string;
+    editorElement?: HTMLDivElement;
+    toolbar?: WysiwygEditorToolbar;
+    editor?: Editor;
+    reset(): void;
+    protected firstUpdated(): void;
+    private createExtensionList;
+    editorSetup(): void;
+    private handleEditorUpdate;
+    private handleEditorTransaction;
+    private handleBlur;
+    private handleFocus;
+    protected render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,199 @@
+import { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { Editor } from '@tiptap/core';
+import Document from '@tiptap/extension-document';
+import Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import Bold from '@tiptap/extension-bold';
+import Italic from '@tiptap/extension-italic';
+import Heading from '@tiptap/extension-heading';
+import OrderedList from '@tiptap/extension-ordered-list';
+import UnOrderedList from '@tiptap/extension-bullet-list';
+import ListItem from '@tiptap/extension-list-item';
+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 { query, property, state } from 'lit/decorators.js';
+import { ExmgElement } from '@exmg/lit-base';
+import { classMap } from 'lit/directives/class-map.js';
+import { EditorActions } from './types.js';
+import './exm-wysiwyg-editor-toolbar.js';
+import { linkOptions } from './actions/anchor/options.js';
+import { defaultActionList } from './toolbarActions.js';
+/**
+ *  # Events:
+ *  - change - where detail is current html value
+ *  - blur - on editor blur
+ *  - focus - on editor focus
+ *
+ * @customElement
+ * @element exm-markdown-editor
+ * @memberof Exmg
+ * @extends ExmgElement
+ * @summary Markdown editor element
+ */
+export class WysiwygEditorElementBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+        this.label = '';
+        this.upload = false;
+        this.editorActions = defaultActionList;
+        this.required = false;
+        this.disabled = false;
+        this.supportingText = '';
+    }
+    reset() {
+        var _a;
+        this.value = (_a = this.getAttribute('value')) !== null && _a !== void 0 ? _a : '';
+    }
+    firstUpdated() {
+        if (!this.disabled) {
+            this.editorSetup();
+        }
+        if (this.label && this.required) {
+            this.setAttribute('aria-required', 'true');
+            this.label += ' *';
+        }
+    }
+    createExtensionList() {
+        const headingList = [];
+        let hasList = false;
+        const extensions = [];
+        for (const action of this.editorActions) {
+            switch (action) {
+                case EditorActions.Anchor:
+                    extensions.push(Link.configure(linkOptions));
+                    break;
+                case EditorActions.Bold:
+                    extensions.push(Bold);
+                    break;
+                case EditorActions.Italic:
+                    extensions.push(Italic);
+                    break;
+                case EditorActions.Blockquote:
+                    extensions.push(Blockquote);
+                    break;
+                case EditorActions.Strike:
+                    extensions.push(Strike);
+                    break;
+                case EditorActions.Underline:
+                    extensions.push(Underline);
+                    break;
+                case EditorActions.OrderedList:
+                    extensions.push(OrderedList);
+                    hasList = true;
+                    break;
+                case EditorActions.UnOrderedList:
+                    extensions.push(UnOrderedList);
+                    hasList = true;
+                    break;
+                case EditorActions.Heading_1:
+                    headingList.push(1);
+                    break;
+                case EditorActions.Heading_2:
+                    headingList.push(2);
+                    break;
+                case EditorActions.Heading_3:
+                    headingList.push(3);
+                    break;
+            }
+        }
+        if (hasList) {
+            extensions.push(ListItem);
+        }
+        if (headingList.length > 0) {
+            extensions.push(Heading.configure({
+                levels: headingList,
+                HTMLAttributes: {},
+            }));
+        }
+        return extensions;
+    }
+    editorSetup() {
+        if (!this.editorElement) {
+            return;
+        }
+        this.editor = new Editor({
+            element: this.editorElement,
+            extensions: [Document, Paragraph, Text, ...this.createExtensionList()],
+            content: this.value,
+            autofocus: true,
+            editable: !this.disabled,
+            injectCSS: false,
+            onUpdate: this.handleEditorUpdate.bind(this),
+            onTransaction: this.handleEditorTransaction.bind(this),
+            onBlur: this.handleBlur.bind(this),
+            onFocus: this.handleFocus.bind(this),
+        });
+        this.editor;
+    }
+    handleEditorUpdate({ editor }) {
+        this.value = editor.getHTML();
+        this.fire('change', this.value);
+    }
+    handleEditorTransaction() {
+        var _a;
+        (_a = this.toolbar) === null || _a === void 0 ? void 0 : _a.requestUpdate();
+    }
+    handleBlur() {
+        this.fire('blur');
+    }
+    handleFocus() {
+        this.fire('focus');
+    }
+    render() {
+        const containerClasses = {
+            'has-label': !!this.label,
+            'has-editor': !!this.editor,
+        };
+        const labelClasses = { 'not-empty': !!this.value };
+        return html `
+      <div id="wysiwygEditorContainer" class="container ${classMap(containerClasses)}">
+        <div class="background"></div>
+        <div class="state-layer"></div>
+        ${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>
+        <div class="editor" id="editor"></div>
+        ${this.supportingText ? html `<div class="supporting-text">${this.supportingText}</div>` : nothing}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], WysiwygEditorElementBase.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], WysiwygEditorElementBase.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], WysiwygEditorElementBase.prototype, "upload", void 0);
+__decorate([
+    property({ type: Array })
+], WysiwygEditorElementBase.prototype, "editorActions", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], WysiwygEditorElementBase.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], WysiwygEditorElementBase.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, attribute: 'supporting-text' })
+], WysiwygEditorElementBase.prototype, "supportingText", void 0);
+__decorate([
+    query('#editor')
+], WysiwygEditorElementBase.prototype, "editorElement", void 0);
+__decorate([
+    query('exm-wysiwyg-editor-toolbar')
+], WysiwygEditorElementBase.prototype, "toolbar", void 0);
+__decorate([
+    state()
+], WysiwygEditorElementBase.prototype, "editor", void 0);
+//# sourceMappingURL=exm-wysiwyg-editor-base.js.map

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

@@ -0,0 +1,18 @@
+import { nothing } from 'lit';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import '@material/web/iconbutton/icon-button.js';
+import '@material/web/icon/icon.js';
+import { EditorActionList } from './toolbarActions.js';
+import { Editor } from '@tiptap/core';
+import { EditorButtonActions, EditorSeparator } from './types.js';
+export declare class WysiwygEditorToolbarBase extends ExmgElement {
+    upload: boolean;
+    editor?: Editor;
+    actions: EditorActionList;
+    editorActions: (EditorButtonActions | EditorSeparator)[];
+    private handleSelectionUpdate;
+    protected firstUpdated(): void;
+    disconnectedCallback(): void;
+    renderActionButtons(): typeof nothing | import("lit-html").TemplateResult<1>[];
+    protected render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,75 @@
+import { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { ExmgElement } from '@exmg/lit-base/index.js';
+import { property } from 'lit/decorators.js';
+import '@material/web/iconbutton/icon-button.js';
+import '@material/web/icon/icon.js';
+import { toolbarActions } from './toolbarActions.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { EditorActions } from './types.js';
+export class WysiwygEditorToolbarBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        this.upload = false;
+        this.actions = toolbarActions;
+        this.editorActions = [];
+    }
+    handleSelectionUpdate() {
+        this.requestUpdate();
+    }
+    firstUpdated() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.on('selectionUpdate', this.handleSelectionUpdate);
+        document.addEventListener('fullscreenchange', () => this.requestUpdate());
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.off('selectionUpdate', this.handleSelectionUpdate);
+        document.removeEventListener('fullscreenchange', () => this.requestUpdate());
+        super.disconnectedCallback();
+    }
+    renderActionButtons() {
+        if (!this.editor) {
+            return nothing;
+        }
+        const buttons = this.editorActions.map((action) => {
+            if (action === EditorActions.Separator) {
+                return html `<span class="separator"></span>`;
+            }
+            const editorAction = this.actions[action];
+            const classNames = { 'is-active': editorAction.isActive(this.editor) };
+            const icon = !Array.isArray(editorAction.icon)
+                ? editorAction.icon
+                : editorAction.isActive(this.editor)
+                    ? editorAction.icon[1]
+                    : editorAction.icon[0];
+            return html ` <md-icon-button
+        aria-label=${editorAction.title}
+        title=${editorAction.title}
+        @click=${(event) => editorAction.action(this.editor, {
+                event,
+            })}
+        class="${classMap(classNames)}"
+      >
+        <md-icon>${icon}</md-icon>
+      </md-icon-button>`;
+        });
+        return buttons;
+    }
+    render() {
+        return html `<section class="toolbar-container">${this.renderActionButtons()}</section>`;
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], WysiwygEditorToolbarBase.prototype, "upload", void 0);
+__decorate([
+    property({ type: Object })
+], WysiwygEditorToolbarBase.prototype, "editor", void 0);
+__decorate([
+    property({ type: Object })
+], WysiwygEditorToolbarBase.prototype, "actions", void 0);
+__decorate([
+    property({ type: Array })
+], WysiwygEditorToolbarBase.prototype, "editorActions", void 0);
+//# sourceMappingURL=exm-wysiwyg-editor-toolbar-base.js.map

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

@@ -0,0 +1,9 @@
+import { WysiwygEditorToolbarBase } from './exm-wysiwyg-editor-toolbar-base.js';
+export declare class WysiwygEditorToolbar extends WysiwygEditorToolbarBase {
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-wysiwyg-editor-toolbar': WysiwygEditorToolbar;
+    }
+}

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

@@ -0,0 +1,12 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { WysiwygEditorToolbarBase } from './exm-wysiwyg-editor-toolbar-base.js';
+import { style as toolbarStyles } from './styles/exm-wysiwyg-editor-toolbar-css.js';
+let WysiwygEditorToolbar = class WysiwygEditorToolbar extends WysiwygEditorToolbarBase {
+};
+WysiwygEditorToolbar.styles = [toolbarStyles];
+WysiwygEditorToolbar = __decorate([
+    customElement('exm-wysiwyg-editor-toolbar')
+], WysiwygEditorToolbar);
+export { WysiwygEditorToolbar };
+//# sourceMappingURL=exm-wysiwyg-editor-toolbar.js.map

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

@@ -0,0 +1,18 @@
+import { WysiwygEditorElementBase } from './exm-wysiwyg-editor-base.js';
+/**
+ * @customElement
+ * @group Exmg Core Elements
+ * @element exm-wysiwyg-editor
+ * @demo demo/index.html
+ * @memberof Exmg
+ * @extends ExmgElement
+ * @summary Wysiwyg editor element
+ */
+export declare class WysiwygEditorElement extends WysiwygEditorElementBase {
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-wysiwyg-editor': WysiwygEditorElement;
+    }
+}

package/dist/exm-wysiwyg-editor.js

@@ -0,0 +1,21 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { WysiwygEditorElementBase } from './exm-wysiwyg-editor-base.js';
+import { style as wysiwygEditorStyles } from './styles/exm-wysiwyg-editor-css.js';
+/**
+ * @customElement
+ * @group Exmg Core Elements
+ * @element exm-wysiwyg-editor
+ * @demo demo/index.html
+ * @memberof Exmg
+ * @extends ExmgElement
+ * @summary Wysiwyg editor element
+ */
+let WysiwygEditorElement = class WysiwygEditorElement extends WysiwygEditorElementBase {
+};
+WysiwygEditorElement.styles = [wysiwygEditorStyles];
+WysiwygEditorElement = __decorate([
+    customElement('exm-wysiwyg-editor')
+], WysiwygEditorElement);
+export { WysiwygEditorElement };
+//# sourceMappingURL=exm-wysiwyg-editor.js.map

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { WysiwygEditorElement } from './exm-wysiwyg-editor.js';
+import { EditorAction, EditorButtonActions, EditorActions } from './types.js';
+export { WysiwygEditorElement, EditorAction, EditorButtonActions, EditorActions };

package/dist/index.js

@@ -0,0 +1,4 @@
+import { WysiwygEditorElement } from './exm-wysiwyg-editor.js';
+import { EditorActions } from './types.js';
+export { WysiwygEditorElement, EditorActions };
+//# sourceMappingURL=index.js.map

package/dist/styles/exm-wysiwyg-editor-css.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

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

@@ -0,0 +1,142 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    display: block;
+    overflow: hidden;
+    --editor-border-color: var(--exm-markdown-editor-border-color, var(--md-sys-color-on-surface-variant));
+    --editor-border-color-focus: var(--exm-markdown-editor-border-color-focus, var(--md-sys-color-primary));
+    --editor-background-color: var(
+      --exm-markdown-editor-background-color,
+      var(--md-sys-color-surface-container-highest)
+    );
+    --editor-code-background-color: var(
+      --exm-markdown-editor-code-background-color,
+      var(--md-sys-color-surface-container-highest)
+    );
+    --editor-background-focus-color: var(--exm-markdown-editor-background-focus-color, var(--md-sys-color-on-surface));
+    --editor-code-background-focus-color: var(
+      --exm-markdown-editor-code-background-focus-color,
+      var(--md-sys-color-on-surface)
+    );
+    --editor-label-focus-color: var(--exm-markdown-editor-label-focus-color, var(--md-sys-color-primary));
+    --editor-label-color: var(--exm-markdown-editor-label-color, var(--md-sys-color-on-surface));
+  }
+
+  .container {
+    --label-height: 0px;
+
+    display: grid;
+    position: relative;
+    grid-template-columns: 100%;
+    grid-template-rows: var(--label-height) auto 1fr auto;
+    transition: grid-template-rows 0.2s ease;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    overflow: hidden;
+    height: 100%;
+  }
+
+  .container.has-label {
+    --label-height: 2rem;
+  }
+
+  .container.preview-mode exm-markdown-editor-toolbar {
+    display: none;
+  }
+
+  .editor {
+    grid-area: 3/1/4/2;
+    position: relative;
+    overflow: scroll;
+    padding-inline: 1rem;
+  }
+
+  .editor > div {
+    outline: none;
+    min-height: 100%;
+  }
+
+  .editor a {
+    color: var(--md-sys-color-primary);
+  }
+
+  exm-wysiwyg-editor-toolbar {
+    grid-area: 2/1/3/2;
+  }
+
+  .background,
+  .state-layer {
+    grid-area: 1/1/4/3;
+  }
+
+  .background {
+    background-color: var(--editor-code-background-color, var(--md-sys-color-surface-container-highest));
+    border-bottom: 1px solid var(--editor-border-color-focus, var(--md-sys-color-primary));
+  }
+
+  .container:hover .state-layer {
+    background-color: var(--editor-code-background-focus-color, var(--md-sys-color-on-surface-variant));
+    opacity: 0.08;
+  }
+
+  .background::after {
+    content: ' ';
+    display: block;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 3px;
+  }
+
+  /* The form label style */
+  label {
+    grid-area: 1/1/2/3;
+  }
+
+  label[for='wysiwygEditorContainer'],
+  label[for='wysiwygEditorContainer'].not-empty.preview-mode {
+    padding: 0.5rem 0 0 1rem;
+    font-size: 0.7rem;
+    color: var(--editor-label-focus-color, var(--md-sys-color-primary));
+    transition: all 200ms ease;
+    transform: scale(1) translateY(0px);
+  }
+
+  label[for='wysiwygEditorContainer'].not-empty.preview-mode {
+    color: var(--editor-label-color, var(--md-sys-color-on-surface));
+  }
+
+  label[for='wysiwygEditorContainer'].preview-mode {
+    color: var(--editor-label-color, var(--md-sys-color-on-surface));
+    padding-bottom: 1rem;
+    transform: translateY(8px);
+    font-size: 1rem;
+  }
+
+  /* Supporting text, also know as Description */
+  .supporting-text {
+    grid-area: 4/1/5/3;
+
+    color: var(--md-filled-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));
+    display: flex;
+    font-family: var(
+      --md-filled-field-supporting-text-font,
+      var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto))
+    );
+    font-size: var(--md-filled-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));
+    line-height: var(
+      --md-filled-field-supporting-text-line-height,
+      var(--md-sys-typescale-body-small-line-height, 1rem)
+    );
+    font-weight: var(
+      --md-filled-field-supporting-text-weight,
+      var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400))
+    );
+    gap: 16px;
+    justify-content: space-between;
+    padding-inline-start: var(--md-filled-field-supporting-text-leading-space, 16px);
+    padding-inline-end: var(--md-filled-field-supporting-text-trailing-space, 16px);
+    padding-top: var(--md-filled-field-supporting-text-top-space, 4px);
+  }
+`;
+//# sourceMappingURL=exm-wysiwyg-editor-css.js.map

package/dist/styles/exm-wysiwyg-editor-toolbar-css.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

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

@@ -0,0 +1,43 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    display: block;
+    border-bottom: 1px solid var(--md-sys-color-surface-variant);
+  }
+
+  .toolbar-container {
+    padding: 0.5rem 1rem;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .separator {
+    display: inline-block;
+    width: 1px;
+    margin-inline: 0.5rem;
+    background-color: var(--md-sys-color-surface-variant);
+  }
+
+  md-icon-button {
+    --md-icon-button-state-layer-shape: 0.25rem;
+  }
+
+  md-icon-button.is-active {
+    --md-icon-button-icon-color: var(--md-sys-color-on-primary);
+    --md-icon-button-hover-icon-color: var(--md-sys-color-on-primary);
+    --md-icon-button-active-icon-color: var(--md-sys-color-on-primary);
+    --md-icon-button-focus-icon-color: var(--md-sys-color-on-primary);
+
+    border-radius: var(--md-icon-button-state-layer-shape);
+    background-color: var(--md-sys-color-primary);
+  }
+
+  md-icon-button:not(:first) {
+    margin: 0 0.3rem;
+  }
+
+  md-icon-button:first {
+    margin: 0 0;
+  }
+`;
+//# sourceMappingURL=exm-wysiwyg-editor-toolbar-css.js.map

package/dist/toolbarActions.d.ts

@@ -0,0 +1,4 @@
+import { EditorAction, EditorActions, EditorButtonActions } from './types.js';
+export type EditorActionList = Record<EditorButtonActions, EditorAction>;
+export declare const toolbarActions: EditorActionList;
+export declare const defaultActionList: EditorActions[];

package/dist/toolbarActions.js

@@ -0,0 +1,39 @@
+import { heading1, heading2, heading3 } from './actions/heading.js';
+import { bold, italic, strike, underline } from './actions/text.js';
+import { anchor } from './actions/anchor/action.js';
+import { EditorActions } from './types.js';
+import { blockquote, orderedList, unorderedList } from './actions/block.js';
+import { fullscreen } from './actions/fullScreen.js';
+export const toolbarActions = {
+    heading1,
+    heading2,
+    heading3,
+    bold,
+    italic,
+    strike,
+    underline,
+    anchor,
+    blockquote,
+    ordered_list: orderedList,
+    unordered_list: unorderedList,
+    fullscreen,
+};
+export const defaultActionList = [
+    EditorActions.Heading_1,
+    EditorActions.Heading_2,
+    EditorActions.Heading_3,
+    EditorActions.Separator,
+    EditorActions.Bold,
+    EditorActions.Italic,
+    EditorActions.Strike,
+    EditorActions.Underline,
+    EditorActions.Separator,
+    EditorActions.Anchor,
+    EditorActions.Separator,
+    EditorActions.Blockquote,
+    EditorActions.OrderedList,
+    EditorActions.UnOrderedList,
+    EditorActions.Separator,
+    EditorActions.FullScreen,
+];
+//# sourceMappingURL=toolbarActions.js.map