@exmg/exm-wysiwyg-editor 1.1.16

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Ex Machina
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,25 @@
+
+  # 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
+ 

package/dist/actions/anchor/action.d.ts

@@ -0,0 +1,9 @@
+import { Editor } from '@tiptap/core';
+import './dialog/exm-wysiwyg-toolbar-link-dialog.js';
+export declare const anchor: {
+    action: (editor?: Editor) => Promise<void>;
+    isActive: (editor?: Editor) => boolean;
+    icon: string;
+    title: string;
+    element: string;
+};

package/dist/actions/anchor/action.js

@@ -0,0 +1,108 @@
+import './dialog/exm-wysiwyg-toolbar-link-dialog.js';
+import { sleep } from '../../utils.js';
+/**
+ * Open the dialog and wait until the close or submit button has been pressed
+ * @param url The initial url for the input
+ * @returns
+ */
+const linkDialog = (url) => new Promise((resolve) => {
+    /**
+     * First we get the dialog, open it and set the initial value for the url
+     */
+    const dialog = document.querySelector('exm-wysiwyg-toolbar-link-dialog');
+    dialog.open();
+    dialog.setValue(url);
+    /**
+     * Callback function for the cancel button, or escape key
+     */
+    function resolveCancel() {
+        removeListeners();
+        resolve({ success: false });
+    }
+    /**
+     * Callback function for the submit button (also gets triggered through the dialog with the enter key)
+     * @param param Detail contains the url entered in the dialog
+     */
+    function resolveSubmit({ detail }) {
+        removeListeners();
+        resolve({ success: true, value: detail });
+    }
+    /**
+     * Remove allk previously added event listeners to prevent unwanted artifacts
+     */
+    function removeListeners() {
+        dialog === null || dialog === void 0 ? void 0 : dialog.removeEventListener('click', resolveCancel);
+        // @ts-ignore
+        dialog === null || dialog === void 0 ? void 0 : dialog.removeEventListener('click', resolveSubmit);
+        window.removeEventListener('keyup', handleKeyUp);
+    }
+    /**
+     * Check if the escape key has been used. If so, treat it as a cancel click
+     */
+    function handleKeyUp({ code }) {
+        if (code === 'Escape') {
+            resolveCancel();
+        }
+    }
+    dialog === null || dialog === void 0 ? void 0 : dialog.addEventListener('wysiwyg-dialog-link-cancel', resolveCancel);
+    dialog === null || dialog === void 0 ? void 0 : dialog.addEventListener('wysiwyg-dialog-link-submit', resolveSubmit);
+    window.addEventListener('keyup', handleKeyUp);
+});
+/**
+ * Create a dom element, add the dialog and add it to the body
+ */
+const createDialog = () => {
+    const dialog = document.createElement('div');
+    dialog.id = 'editor-link-dialog-container';
+    dialog.innerHTML = '<exm-wysiwyg-toolbar-link-dialog></exm-wysiwyg-toolbar-link-dialog>';
+    document.body.appendChild(dialog);
+};
+/**
+ * Remove the dialog from the body
+ */
+const removeDialog = () => {
+    const dialogContainer = document.getElementById('editor-link-dialog-container');
+    if (dialogContainer) {
+        dialogContainer.remove();
+    }
+};
+/**
+ * Function triggered when clicking the anchor button.
+ * @param editor
+ * @returns
+ */
+const setLink = async (editor) => {
+    if (!editor) {
+        return;
+    }
+    const previousUrl = editor.getAttributes('link').href || '';
+    createDialog();
+    // Due to some timing issues, this little power-nap is needed
+    await sleep(1);
+    const urlData = await linkDialog(previousUrl);
+    removeDialog();
+    // cancelled
+    if (!urlData.success) {
+        return;
+    }
+    // empty
+    if (!(urlData === null || urlData === void 0 ? void 0 : urlData.value)) {
+        editor.chain().focus().extendMarkRange('link').unsetLink().run();
+        return;
+    }
+    // update link
+    try {
+        editor.chain().focus().extendMarkRange('link').setLink({ href: urlData.value }).run();
+    }
+    catch (error) {
+        alert(error.message);
+    }
+};
+export const anchor = {
+    action: setLink,
+    isActive: (editor) => !!(editor === null || editor === void 0 ? void 0 : editor.isActive('link')),
+    icon: 'insert_link',
+    title: 'Toggle format link',
+    element: 'anchor-input-dialog',
+};
+//# sourceMappingURL=action.js.map

package/dist/actions/anchor/dialog/exm-wysiwyg-toolbar-dialog-css.d.ts

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

package/dist/actions/anchor/dialog/exm-wysiwyg-toolbar-dialog-css.js

@@ -0,0 +1,53 @@
+import { css } from 'lit';
+export const styles = css `
+  .link-dialog {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    border: none;
+    padding: 0;
+    background-color: transparent;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .link-dialog[open] {
+    display: flex;
+  }
+
+  ::backdrop {
+    background-color: hsla(0deg, 0%, 0%, 0.4);
+    backdrop-filter: blur(4px);
+    display: block;
+  }
+
+  .content {
+    background-color: var(--md-sys-color-surface-container-high);
+    width: 20rem;
+    padding: 1rem;
+    border-radius: var(--md-dialog-container-shape, var(--md-sys-shape-corner-extra-large, 1rem));
+  }
+
+  md-filled-text-field {
+    width: 100%;
+  }
+
+  .row {
+    margin-block: 1rem;
+  }
+
+  header {
+    padding-block: 1rem;
+    color: var(--md-list-item-label-text-color, var(--md-sys-color-on-surface, #1d1b20));
+  }
+
+  footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+    padding-top: 1rem;
+  }
+`;
+//# sourceMappingURL=exm-wysiwyg-toolbar-dialog-css.js.map

package/dist/actions/anchor/dialog/exm-wysiwyg-toolbar-link-dialog.d.ts

@@ -0,0 +1,21 @@
+import '@material/web/button/filled-button.js';
+import '@material/web/button/outlined-button.js';
+import '@material/web/textfield/filled-text-field.js';
+import { ExmgElement } from '@exmg/lit-base';
+import { MdFilledTextField } from '@material/web/textfield/filled-text-field.js';
+export declare class ExmWysiwygToolbarLinkDialog extends ExmgElement {
+    value: string;
+    errorMessage: string;
+    dialog?: HTMLDialogElement;
+    input?: MdFilledTextField;
+    static styles: import("lit").CSSResult[];
+    open(): void;
+    close(): void;
+    setValue(url: string): void;
+    private handleCancelClick;
+    private handleSubmitClick;
+    private handleSubmit;
+    private validateInput;
+    private handleInputChange;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/actions/anchor/dialog/exm-wysiwyg-toolbar-link-dialog.js

@@ -0,0 +1,124 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators/custom-element.js';
+import { styles } from './exm-wysiwyg-toolbar-dialog-css.js';
+import { html } from 'lit';
+import '@material/web/button/filled-button.js';
+import '@material/web/button/outlined-button.js';
+import '@material/web/textfield/filled-text-field.js';
+import { query, state } from 'lit/decorators.js';
+import { ExmgElement } from '@exmg/lit-base';
+let ExmWysiwygToolbarLinkDialog = class ExmWysiwygToolbarLinkDialog extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+        this.errorMessage = '';
+    }
+    open() {
+        if (!this.dialog) {
+            return;
+        }
+        this.dialog.showModal();
+    }
+    close() {
+        if (!this.dialog) {
+            return;
+        }
+        this.dialog.close();
+    }
+    setValue(url) {
+        this.value = url;
+        if (!this.input) {
+            return;
+        }
+        this.input.value = url;
+    }
+    handleCancelClick() {
+        this.fire('wysiwyg-dialog-link-cancel');
+    }
+    handleSubmitClick() {
+        var _a;
+        if (this.validateInput()) {
+            this.fire('wysiwyg-dialog-link-submit', (_a = this.input) === null || _a === void 0 ? void 0 : _a.value);
+        }
+        else {
+            this.errorMessage = 'The entered url is not valid';
+        }
+    }
+    handleSubmit({ code }) {
+        if (code === 'Enter') {
+            this.handleSubmitClick();
+        }
+    }
+    validateInput() {
+        var _a;
+        let value = (_a = this.input) === null || _a === void 0 ? void 0 : _a.value;
+        if (value === null || value === void 0 ? void 0 : value.startsWith('#')) {
+            return true;
+        }
+        if (!value || !value.includes('.') || !this.input) {
+            return false;
+        }
+        if (!value.startsWith('http')) {
+            value = `https://${value}`;
+        }
+        this.input.value = value;
+        return true;
+    }
+    handleInputChange(event) {
+        this.errorMessage = '';
+        this.value = event.target.value;
+    }
+    render() {
+        return html `
+      <dialog class="link-dialog" id="wysiwyg-editor-button-link-dialog">
+        <article class="content">
+          <header>Enter a valid url</header>
+          <form @submit=${this.handleSubmit} @keyup=${this.handleSubmit}>
+            <md-filled-text-field
+              id="wysiwyg-editor-dialog-input-field"
+              type="text"
+              label="Url"
+              required
+              supporting-text="Provide a valid url or anchor like https://test.nl or #chapter-1"
+              error-text="${this.errorMessage}"
+              ?error=${this.errorMessage !== ''}
+              @keyup=${this.handleInputChange}
+            ></md-filled-text-field>
+            <input type="submit" hidden />
+          </form>
+          <footer>
+            <md-outlined-button type="button" id="wysiwyg-editor-dialog-button-cancel" @click=${this.handleCancelClick}>
+              Cancel
+            </md-outlined-button>
+            <md-filled-button
+              type="submit"
+              id="wysiwyg-editor-dialog-button-submit"
+              @click=${this.handleSubmitClick}
+              ?disabled=${!this.value}
+            >
+              Submit
+            </md-filled-button>
+          </footer>
+        </article>
+      </dialog>
+    `;
+    }
+};
+ExmWysiwygToolbarLinkDialog.styles = [styles];
+__decorate([
+    state()
+], ExmWysiwygToolbarLinkDialog.prototype, "value", void 0);
+__decorate([
+    state()
+], ExmWysiwygToolbarLinkDialog.prototype, "errorMessage", void 0);
+__decorate([
+    query('#wysiwyg-editor-button-link-dialog')
+], ExmWysiwygToolbarLinkDialog.prototype, "dialog", void 0);
+__decorate([
+    query('#wysiwyg-editor-dialog-input-field')
+], ExmWysiwygToolbarLinkDialog.prototype, "input", void 0);
+ExmWysiwygToolbarLinkDialog = __decorate([
+    customElement('exm-wysiwyg-toolbar-link-dialog')
+], ExmWysiwygToolbarLinkDialog);
+export { ExmWysiwygToolbarLinkDialog };
+//# sourceMappingURL=exm-wysiwyg-toolbar-link-dialog.js.map

package/dist/actions/anchor/options.d.ts

@@ -0,0 +1,9 @@
+import { LinkContext } from './types.js';
+export declare const linkOptions: {
+    openOnClick: boolean;
+    autolink: boolean;
+    defaultProtocol: string;
+    protocols: string[];
+    shouldAutoLink: (url: string) => boolean;
+    isAllowedUri: (url: string, ctx: LinkContext) => boolean;
+};

package/dist/actions/anchor/options.js

@@ -0,0 +1,30 @@
+export const linkOptions = {
+    openOnClick: false,
+    autolink: true,
+    defaultProtocol: 'https',
+    protocols: ['https'],
+    shouldAutoLink: (url) => url.startsWith('https://'),
+    isAllowedUri: (url, ctx) => {
+        try {
+            // We accept anchor links
+            if (url.startsWith('#')) {
+                return true;
+            }
+            const parsedUrl = url.includes(':') ? new URL(url) : new URL(`${ctx.defaultProtocol}://${url}`);
+            if (!ctx.defaultValidate(parsedUrl.href)) {
+                return false;
+            }
+            // Only accept https:// urls for security reasons
+            const disallowedProtocols = ['http', 'ftp', 'file', 'mailto'];
+            const protocol = parsedUrl.protocol.replace(':', '');
+            if (disallowedProtocols.includes(protocol)) {
+                return false;
+            }
+            return true;
+        }
+        catch (_a) {
+            return false;
+        }
+    },
+};
+//# sourceMappingURL=options.js.map

package/dist/actions/anchor/types.d.ts

@@ -0,0 +1,13 @@
+import { LinkProtocolOptions } from '@tiptap/extension-link';
+export type LinkDialogResponse = {
+    success: boolean;
+    value?: string;
+};
+/**
+ * Stole this from : https://github.com/ueberdosis/tiptap/blob/6ceff32242dc815acb121717752467f205d52e42/packages/extension-link/src/link.ts#L99C10-L112C6
+ */
+export type LinkContext = {
+    defaultValidate: (url: string) => boolean;
+    protocols: Array<LinkProtocolOptions | string>;
+    defaultProtocol: string;
+};

package/dist/actions/anchor/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/actions/block.d.ts

@@ -0,0 +1,19 @@
+import { Editor } from '@tiptap/core';
+export declare const blockquote: {
+    action: (editor?: Editor) => void;
+    isActive: (editor?: Editor) => boolean;
+    icon: string;
+    title: string;
+};
+export declare const orderedList: {
+    action: (editor?: Editor) => void;
+    isActive: (editor?: Editor) => boolean;
+    icon: string;
+    title: string;
+};
+export declare const unorderedList: {
+    action: (editor?: Editor) => void;
+    isActive: (editor?: Editor) => boolean;
+    icon: string;
+    title: string;
+};

package/dist/actions/block.js

@@ -0,0 +1,25 @@
+export const blockquote = {
+    action: (editor) => {
+        editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBlockquote().run();
+    },
+    isActive: (editor) => !!(editor === null || editor === void 0 ? void 0 : editor.isActive('blockquote')),
+    icon: 'format_quote',
+    title: 'Toggle blockquote',
+};
+export const orderedList = {
+    action: (editor) => {
+        editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleOrderedList().run();
+    },
+    isActive: (editor) => !!(editor === null || editor === void 0 ? void 0 : editor.isActive('orderedList')),
+    icon: 'format_list_numbered',
+    title: 'Toggle ordered list',
+};
+export const unorderedList = {
+    action: (editor) => {
+        editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBulletList().run();
+    },
+    isActive: (editor) => !!(editor === null || editor === void 0 ? void 0 : editor.isActive('bulletList')),
+    icon: 'format_list_bulleted',
+    title: 'Toggle unordered list',
+};
+//# sourceMappingURL=block.js.map

package/dist/actions/fullScreen.d.ts

@@ -0,0 +1,8 @@
+import { Editor } from '@tiptap/core';
+import { ActionOptions } from '../types.js';
+export declare const fullscreen: {
+    action: (_?: Editor, options?: ActionOptions) => void;
+    isActive: (_?: Editor) => boolean;
+    icon: string[];
+    title: string;
+};

package/dist/actions/fullScreen.js

@@ -0,0 +1,21 @@
+const toggleFullscreen = (event) => {
+    const container = (event === null || event === void 0 ? void 0 : event.target).offsetParent;
+    if (!container) {
+        return;
+    }
+    if (!document.fullscreenElement) {
+        container.requestFullscreen();
+    }
+    else {
+        document.exitFullscreen();
+    }
+};
+export const fullscreen = {
+    action: (_, options) => {
+        toggleFullscreen(options === null || options === void 0 ? void 0 : options.event);
+    },
+    isActive: (_) => !!document.fullscreenElement,
+    icon: ['fullscreen', 'fullscreen_exit'],
+    title: 'Toggle fullscreen mode',
+};
+//# sourceMappingURL=fullScreen.js.map

package/dist/actions/heading.d.ts

@@ -0,0 +1,19 @@
+import { Editor } from '@tiptap/core';
+export declare const heading1: {
+    action: (editor?: Editor) => void;
+    isActive: (editor?: Editor) => boolean;
+    icon: string;
+    title: string;
+};
+export declare const heading2: {
+    action: (editor?: Editor) => void;
+    isActive: (editor?: Editor) => boolean;
+    icon: string;
+    title: string;
+};
+export declare const heading3: {
+    action: (editor?: Editor) => Promise<void>;
+    isActive: (editor?: Editor) => boolean;
+    icon: string;
+    title: string;
+};

package/dist/actions/heading.js

@@ -0,0 +1,25 @@
+export const heading1 = {
+    action: (editor) => {
+        editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleHeading({ level: 1 }).run();
+    },
+    isActive: (editor) => !!(editor === null || editor === void 0 ? void 0 : editor.isActive('heading', { level: 1 })),
+    icon: 'format_h1',
+    title: 'Toggle format heading 1',
+};
+export const heading2 = {
+    action: (editor) => {
+        editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleHeading({ level: 2 }).run();
+    },
+    isActive: (editor) => !!(editor === null || editor === void 0 ? void 0 : editor.isActive('heading', { level: 2 })),
+    icon: 'format_h2',
+    title: 'Toggle format heading 2',
+};
+export const heading3 = {
+    action: async (editor) => {
+        editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleHeading({ level: 3 }).run();
+    },
+    isActive: (editor) => !!(editor === null || editor === void 0 ? void 0 : editor.isActive('heading', { level: 3 })),
+    icon: 'format_h3',
+    title: 'Toggle format heading 3',
+};
+//# sourceMappingURL=heading.js.map

package/dist/actions/lists.d.ts

@@ -0,0 +1,13 @@
+import { Editor } from '@tiptap/core';
+export declare const orderedList: {
+    action: (editor?: Editor) => void;
+    isActive: (editor?: Editor) => boolean;
+    icon: string;
+    title: string;
+};
+export declare const unorderedList: {
+    action: (editor?: Editor) => void;
+    isActive: (editor?: Editor) => boolean;
+    icon: string;
+    title: string;
+};

package/dist/actions/lists.js

@@ -0,0 +1,17 @@
+export const orderedList = {
+    action: (editor) => {
+        editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleOrderedList().run();
+    },
+    isActive: (editor) => !!(editor === null || editor === void 0 ? void 0 : editor.isActive('orderedList')),
+    icon: 'format_list_numbered',
+    title: 'Toggle ordered list',
+};
+export const unorderedList = {
+    action: (editor) => {
+        editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBulletList().run();
+    },
+    isActive: (editor) => !!(editor === null || editor === void 0 ? void 0 : editor.isActive('bulletList')),
+    icon: 'format_list_bulleted',
+    title: 'Toggle unordered list',
+};
+//# sourceMappingURL=lists.js.map

package/dist/actions/text.d.ts

@@ -0,0 +1,25 @@
+import { Editor } from '@tiptap/core';
+export declare const bold: {
+    action: (editor?: Editor) => void;
+    isActive: (editor?: Editor) => boolean;
+    icon: string;
+    title: string;
+};
+export declare const italic: {
+    action: (editor?: Editor) => void;
+    isActive: (editor?: Editor) => boolean;
+    icon: string;
+    title: string;
+};
+export declare const strike: {
+    action: (editor?: Editor) => void;
+    isActive: (editor?: Editor) => boolean;
+    icon: string;
+    title: string;
+};
+export declare const underline: {
+    action: (editor?: Editor) => void;
+    isActive: (editor?: Editor) => boolean;
+    icon: string;
+    title: string;
+};

package/dist/actions/text.js

@@ -0,0 +1,33 @@
+export const bold = {
+    action: (editor) => {
+        editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBold().run();
+    },
+    isActive: (editor) => !!(editor === null || editor === void 0 ? void 0 : editor.isActive('bold')),
+    icon: 'format_bold',
+    title: 'Toggle format bold',
+};
+export const italic = {
+    action: (editor) => {
+        editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleItalic().run();
+    },
+    isActive: (editor) => !!(editor === null || editor === void 0 ? void 0 : editor.isActive('italic')),
+    icon: 'format_italic',
+    title: 'Toggle format italic',
+};
+export const strike = {
+    action: (editor) => {
+        editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleStrike().run();
+    },
+    isActive: (editor) => !!(editor === null || editor === void 0 ? void 0 : editor.isActive('strike')),
+    icon: 'format_strikethrough',
+    title: 'Toggle format strike through',
+};
+export const underline = {
+    action: (editor) => {
+        editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleUnderline().run();
+    },
+    isActive: (editor) => !!(editor === null || editor === void 0 ? void 0 : editor.isActive('underline')),
+    icon: 'format_underlined',
+    title: 'Toggle format underline',
+};
+//# sourceMappingURL=text.js.map