@lesjoursfr/edith 2.1.2 → 2.1.3

package/dist/ui/button.js

@@ -0,0 +1,165 @@
+import { createPopper } from "@popperjs/core";
+import { EditorModes, Events, createNodeWith } from "../core/index.js";
+export class EdithButton {
+    el;
+    ctx;
+    icon;
+    title;
+    onclick;
+    showOnCodeView;
+    popperEl;
+    popper;
+    constructor(ctx, options) {
+        this.ctx = ctx;
+        this.icon = options.icon;
+        this.title = options.title;
+        this.onclick = options.onclick;
+        this.showOnCodeView = options.showOnCodeView === true;
+    }
+    click(event) {
+        // Prevent default
+        event.preventDefault();
+        // Call the callback
+        this.onclick(this.ctx, event);
+    }
+    showTooltip() {
+        if (this.popper !== undefined) {
+            return;
+        }
+        // Add the tooltip content to the DOM
+        this.popperEl = createNodeWith("div", {
+            textContent: this.title,
+            attributes: { class: "edith-tooltip" },
+        });
+        const arrowEl = createNodeWith("div", {
+            attributes: { class: "arrow", "data-popper-arrow": "" },
+        });
+        this.popperEl.append(arrowEl);
+        this.ctx.toolbar.append(this.popperEl);
+        // Create the tooltip
+        this.popper = createPopper(this.el, this.popperEl, {
+            placement: "bottom",
+            modifiers: [
+                {
+                    name: "arrow",
+                    options: {
+                        padding: 5, // 5px from the edges of the popper
+                    },
+                },
+                {
+                    name: "offset",
+                    options: {
+                        offset: [0, 8],
+                    },
+                },
+            ],
+        });
+    }
+    hideTooltip() {
+        if (this.popper === undefined) {
+            return;
+        }
+        // Destroy the tooltip
+        this.popper.destroy();
+        this.popper = undefined;
+        // Remove the tooltip content from the DOM
+        this.popperEl?.remove();
+    }
+    onEditorModeChange(event) {
+        if (event.detail.mode === EditorModes.Code) {
+            this.el.setAttribute("disabled", "disabled");
+        }
+        else {
+            this.el.removeAttribute("disabled");
+        }
+    }
+    render() {
+        // Create the button
+        this.el = createNodeWith("button", {
+            attributes: { class: `edith-btn ${this.icon}`, type: "button" },
+        });
+        // Bind events
+        this.el.onclick = this.click.bind(this);
+        this.el.onmouseenter = this.showTooltip.bind(this);
+        this.el.onmouseleave = this.hideTooltip.bind(this);
+        // Check if we have to disable the button on the code view
+        if (this.showOnCodeView !== true) {
+            this.ctx.on(Events.modeChanged, this.onEditorModeChange.bind(this));
+        }
+        // Return the button
+        return this.el;
+    }
+}
+export const EdithButtons = Object.freeze({
+    bold: (context) => new EdithButton(context, {
+        icon: "fa-solid fa-bold",
+        title: "Gras",
+        onclick: (ctx) => {
+            ctx.editor.wrapInsideTag("b");
+        },
+    }),
+    italic: (context) => new EdithButton(context, {
+        icon: "fa-solid fa-italic",
+        title: "Italique",
+        onclick: (ctx) => {
+            ctx.editor.wrapInsideTag("i");
+        },
+    }),
+    underline: (context) => new EdithButton(context, {
+        icon: "fa-solid fa-underline",
+        title: "Souligner",
+        onclick: (ctx) => {
+            ctx.editor.wrapInsideTag("u");
+        },
+    }),
+    strikethrough: (context) => new EdithButton(context, {
+        icon: "fa-solid fa-strikethrough",
+        title: "Barrer",
+        onclick: (ctx) => {
+            ctx.editor.wrapInsideTag("s");
+        },
+    }),
+    subscript: (context) => new EdithButton(context, {
+        icon: "fa-solid fa-subscript",
+        title: "Indice",
+        onclick: (ctx) => {
+            ctx.editor.wrapInsideTag("sub");
+        },
+    }),
+    superscript: (context) => new EdithButton(context, {
+        icon: "fa-solid fa-superscript",
+        title: "Exposant",
+        onclick: (ctx) => {
+            ctx.editor.wrapInsideTag("sup");
+        },
+    }),
+    nbsp: (context) => new EdithButton(context, {
+        icon: "edith-btn-nbsp",
+        title: "Ajouter une espace insécable",
+        onclick: (ctx) => {
+            ctx.editor.replaceByHtml('<span class="edith-nbsp" contenteditable="false">¶</span>');
+        },
+    }),
+    clear: (context) => new EdithButton(context, {
+        icon: "fa-solid fa-eraser",
+        title: "Effacer la mise en forme",
+        onclick: (ctx) => {
+            ctx.editor.clearStyle();
+        },
+    }),
+    link: (context) => new EdithButton(context, {
+        icon: "fa-solid fa-link",
+        title: "Lien",
+        onclick: (ctx) => {
+            ctx.editor.insertLink();
+        },
+    }),
+    codeview: (context) => new EdithButton(context, {
+        icon: "fa-solid fa-code",
+        title: "Afficher le code HTML",
+        onclick: (ctx) => {
+            ctx.editor.toggleCodeView();
+        },
+        showOnCodeView: true,
+    }),
+});

package/dist/ui/editor.d.ts

@@ -0,0 +1,37 @@
+import { throttle } from "../core/index.js";
+import { Edith } from "../edith.js";
+export declare class EdithEditor {
+    private el;
+    private ctx;
+    private content;
+    private height;
+    private resizable;
+    private mode;
+    private visualEditor;
+    private codeEditor;
+    private codeMirror;
+    private history;
+    throttledSnapshots: ReturnType<typeof throttle>;
+    constructor(ctx: Edith, options: {
+        initialContent: string;
+        height: number;
+        resizable: boolean;
+    });
+    render(): HTMLDivElement;
+    getVisualEditorElement(): HTMLElement;
+    getCodeEditorElement(): HTMLElement;
+    setContent(content: string): void;
+    getContent(): string;
+    takeSnapshot(): void;
+    restoreSnapshot(): void;
+    wrapInsideTag<K extends keyof HTMLElementTagNameMap>(tag: K): void;
+    replaceByHtml(html: string): void;
+    clearStyle(): void;
+    insertLink(): void;
+    toggleCodeView(): void;
+    onKeyEvent(e: KeyboardEvent): void;
+    private _processKeyEvent;
+    private _processKeyEventWithMeta;
+    onPasteEvent(e: ClipboardEvent): void;
+    destroy(): void;
+}

package/dist/ui/editor.js

@@ -0,0 +1,322 @@
+import { html } from "@codemirror/lang-html";
+import { EditorView, basicSetup } from "codemirror";
+import { EditorModes, Events, History, cleanPastedHtml, clearSelectionStyle, createNodeWith, getSelection, hasClass, hasTagName, isHTMLElement, isSelectionInsideNode, isSelfClosing, removeNodesRecursively, replaceSelectionByHtml, restoreSelection, throttle, unwrapNode, wrapInsideLink, wrapInsideTag, } from "../core/index.js";
+import { EdithModal, createCheckboxModalField, createInputModalField } from "./modal.js";
+export class EdithEditor {
+    el;
+    ctx;
+    content;
+    height;
+    resizable;
+    mode;
+    visualEditor;
+    codeEditor;
+    codeMirror;
+    history;
+    throttledSnapshots;
+    constructor(ctx, options) {
+        this.ctx = ctx;
+        this.content = options.initialContent;
+        this.height = options.height;
+        this.resizable = options.resizable;
+        this.mode = EditorModes.Visual;
+        this.history = new History();
+        this.throttledSnapshots = throttle(() => this.takeSnapshot(), 3000, { leading: false, trailing: true });
+        // Replace   by the string we use as a visual return
+        this.content = this.content.replace(/&nbsp;/g, '<span class="edith-nbsp" contenteditable="false">¶</span>');
+    }
+    render() {
+        // Create a wrapper for the editor
+        this.el = createNodeWith("div", {
+            attributes: {
+                class: "edith-editing-area",
+                style: this.resizable ? `min-height: ${this.height}px; resize: vertical` : `height: ${this.height}px`,
+            },
+        });
+        // Create the visual editor
+        this.visualEditor = createNodeWith("div", {
+            innerHTML: this.content,
+            attributes: {
+                class: "edith-visual",
+                contenteditable: "true",
+                style: this.resizable ? `min-height: ${this.height - 10}px` : `height: ${this.height - 10}px`,
+            },
+        });
+        this.el.append(this.visualEditor);
+        // Create the code editor
+        this.codeEditor = createNodeWith("div", {
+            attributes: { class: "edith-code edith-hidden" },
+        });
+        this.el.append(this.codeEditor);
+        // Bind events
+        const keyEventsListener = this.onKeyEvent.bind(this);
+        this.visualEditor.addEventListener("keydown", keyEventsListener);
+        this.visualEditor.addEventListener("keyup", keyEventsListener);
+        const pasteEventListener = this.onPasteEvent.bind(this);
+        this.visualEditor.addEventListener("paste", pasteEventListener);
+        // Return the wrapper
+        return this.el;
+    }
+    getVisualEditorElement() {
+        return this.visualEditor;
+    }
+    getCodeEditorElement() {
+        return this.codeEditor;
+    }
+    setContent(content) {
+        // Replace &nbsp; by the string we use as a visual return
+        content = content.replace(/&nbsp;/g, '<span class="edith-nbsp" contenteditable="false">¶</span>');
+        // Check the current mode
+        if (this.mode === EditorModes.Visual) {
+            // Update the visual editor content
+            this.visualEditor.innerHTML = content;
+        }
+        else {
+            // Update the code editor content
+            this.codeMirror.dispatch({
+                changes: { from: 0, to: this.codeMirror.state.doc.length, insert: content },
+            });
+        }
+    }
+    getContent() {
+        // Get the visual editor content or the code editor content
+        const code = this.mode === EditorModes.Visual
+            ? this.visualEditor.innerHTML
+            : this.codeMirror.state.doc.toJSON()
+                .map((line) => line.trim())
+                .join("\n");
+        // Check if there is something in the editor
+        if (code === "<p><br></p>") {
+            return "";
+        }
+        // Remove empty tags
+        const placeholder = createNodeWith("div", { innerHTML: code });
+        removeNodesRecursively(placeholder, (el) => {
+            return (isHTMLElement(el) && !isSelfClosing(el.tagName) && (el.textContent === null || el.textContent.length === 0));
+        });
+        // Remove any style attribute
+        for (const el of placeholder.querySelectorAll("[style]")) {
+            el.removeAttribute("style");
+        }
+        // Unwrap span without attributes
+        for (const el of placeholder.querySelectorAll("span")) {
+            if (el.attributes.length === 0) {
+                unwrapNode(el);
+            }
+        }
+        // Return clean code
+        return placeholder.innerHTML
+            .replace(/\u200B/gi, "")
+            .replace(/<\/p>\s*<p>/gi, "<br>")
+            .replace(/(<p>|<\/p>)/gi, "")
+            .replace(/<span[^>]+class="edith-nbsp"[^>]*>[^<]*<\/span>/gi, "&nbsp;")
+            .replace(/(?:<br\s?\/?>)+$/gi, "");
+    }
+    takeSnapshot() {
+        this.history.push(this.visualEditor.innerHTML);
+    }
+    restoreSnapshot() {
+        this.visualEditor.innerHTML = this.history.pop() ?? "";
+    }
+    wrapInsideTag(tag) {
+        if (isSelectionInsideNode(this.visualEditor)) {
+            wrapInsideTag(tag);
+            this.takeSnapshot();
+        }
+    }
+    replaceByHtml(html) {
+        if (isSelectionInsideNode(this.visualEditor)) {
+            replaceSelectionByHtml(html);
+            this.takeSnapshot();
+        }
+    }
+    clearStyle() {
+        clearSelectionStyle();
+        this.takeSnapshot();
+    }
+    insertLink() {
+        // Get the caret position
+        const { sel, range } = getSelection();
+        // Check if the user has selected something
+        if (range === undefined) {
+            return;
+        }
+        // Show the modal
+        const modal = new EdithModal(this.ctx, {
+            title: "Insérer un lien",
+            fields: [
+                createInputModalField("Texte à afficher", "text", range.toString()),
+                createInputModalField("URL du lien", "href"),
+                createCheckboxModalField("Ouvrir dans une nouvelle fenêtre", "openInNewTab", true),
+            ],
+            callback: (data) => {
+                // Check if we have something
+                if (data === null) {
+                    // Nothing to do
+                    return;
+                }
+                // Restore the selection
+                restoreSelection({ sel, range });
+                // Insert a link
+                wrapInsideLink(data.text, data.href, data.openInNewTab);
+            },
+        });
+        modal.show();
+    }
+    toggleCodeView() {
+        // Check the current mode
+        if (this.mode === EditorModes.Visual) {
+            // Switch mode
+            this.mode = EditorModes.Code;
+            // Hide the visual editor
+            this.visualEditor.classList.add("edith-hidden");
+            // Display the code editor
+            this.codeEditor.classList.remove("edith-hidden");
+            const codeMirrorEl = document.createElement("div");
+            this.codeEditor.append(codeMirrorEl);
+            this.codeMirror = new EditorView({
+                doc: this.visualEditor.innerHTML,
+                extensions: [basicSetup, EditorView.lineWrapping, html({ matchClosingTags: true, autoCloseTags: true })],
+                parent: codeMirrorEl,
+            });
+        }
+        else {
+            // Switch mode
+            this.mode = EditorModes.Visual;
+            // Hide the code editor
+            this.codeEditor.classList.add("edith-hidden");
+            // Display the visual editor
+            this.visualEditor.classList.remove("edith-hidden");
+            this.visualEditor.innerHTML = this.codeMirror.state.doc.toJSON()
+                .map((line) => line.trim())
+                .join("\n");
+            this.codeMirror.destroy();
+            this.codeMirror = undefined;
+            this.codeEditor.innerHTML = "";
+        }
+        // Trigger an event with the new mode
+        this.ctx.trigger(Events.modeChanged, { mode: this.mode });
+    }
+    onKeyEvent(e) {
+        // Check if a Meta key is pressed
+        const prevent = e.metaKey || e.ctrlKey ? this._processKeyEventWithMeta(e) : this._processKeyEvent(e);
+        // Check if we must stop the event here
+        if (prevent) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }
+    _processKeyEvent(e) {
+        // Check the key code
+        switch (e.keyCode) {
+            case 13: // Enter : 13
+                if (e.type === "keydown") {
+                    this.replaceByHtml("<br />"); // Insert a line break
+                }
+                return true;
+        }
+        // Save the editor content
+        this.throttledSnapshots();
+        // Return false
+        return false;
+    }
+    _processKeyEventWithMeta(e) {
+        // Check the key code
+        switch (e.keyCode) {
+            case 13: // Enter : 13
+                if (e.type === "keydown") {
+                    this.replaceByHtml("<br />"); // Insert a line break
+                }
+                return true;
+            case 32: // Space : 32
+                if (e.type === "keydown") {
+                    this.replaceByHtml('<span class="edith-nbsp" contenteditable="false">¶</span>'); // Insert a non-breaking space
+                }
+                return true;
+            case 66: // b : 66
+                if (e.type === "keydown") {
+                    this.wrapInsideTag("b"); // Toggle bold
+                }
+                return true;
+            case 73: // i : 73
+                if (e.type === "keydown") {
+                    this.wrapInsideTag("i"); // Toggle italic
+                }
+                return true;
+            case 85: // u : 85
+                if (e.type === "keydown") {
+                    this.wrapInsideTag("u"); // Toggle underline
+                }
+                return true;
+            case 83: // s : 83
+                if (e.type === "keydown") {
+                    this.wrapInsideTag("s"); // Toggle strikethrough
+                }
+                return true;
+            case 90: // z : 90
+                if (e.type === "keydown") {
+                    this.restoreSnapshot(); // Undo
+                }
+                return true;
+        }
+        // Return false
+        return false;
+    }
+    onPasteEvent(e) {
+        // Prevent default
+        e.preventDefault();
+        e.stopPropagation();
+        // Get the caret position
+        const { sel, range } = getSelection();
+        // Check if the user has selected something
+        if (range === undefined || e.clipboardData === null) {
+            return;
+        }
+        // Create the fragment to insert
+        const frag = document.createDocumentFragment();
+        // Check if we try to paste HTML content
+        if (!e.clipboardData.types.includes("text/html")) {
+            // Get the content as a plain text & split it by lines
+            const lines = e.clipboardData.getData("text/plain").split(/[\r\n]+/g);
+            // Add the content as text nodes with a <br> node between each line
+            for (let i = 0; i < lines.length; i++) {
+                if (i !== 0) {
+                    frag.append(document.createElement("br"));
+                }
+                frag.append(document.createTextNode(lines[i]));
+            }
+        }
+        else {
+            // Detect style blocs in parents
+            let dest = sel.anchorNode;
+            const style = { B: false, I: false, U: false, S: false, Q: false };
+            while (dest !== null && !hasClass(dest, "edith-visual")) {
+                // Check if it's a style tag
+                if (hasTagName(dest, ["b", "i", "u", "s", "q"])) {
+                    // Update the style
+                    style[(dest.tagName, "I", "U", "S", "Q")] = true;
+                }
+                // Get the parent
+                dest = dest.parentNode;
+            }
+            // We have HTML content
+            let html = e.clipboardData.getData("text/html").replace(/[\r\n]+/g, " ");
+            // Wrap the HTML content into <html><body></body></html>
+            if (!/^<html>\s*<body>/.test(html)) {
+                html = "<html><body>" + html + "</body></html>";
+            }
+            // Clean the content
+            const contents = cleanPastedHtml(html, style);
+            // Add the content to the frgament
+            frag.append(...contents.childNodes);
+        }
+        // Replace the current selection by the pasted content
+        sel.deleteFromDocument();
+        range.insertNode(frag);
+    }
+    destroy() {
+        this.codeMirror?.destroy();
+        this.codeMirror = undefined;
+        this.el.remove();
+    }
+}

package/dist/ui/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./button.js";
+export * from "./editor.js";
+export * from "./modal.js";

package/dist/ui/index.js

@@ -0,0 +1,3 @@
+export * from "./button.js";
+export * from "./editor.js";
+export * from "./modal.js";

package/dist/ui/modal.d.ts

@@ -0,0 +1,32 @@
+import { Edith } from "../edith.js";
+export declare enum EdithModalFieldType {
+    input = 1,
+    checkbox = 2
+}
+export type EdithModalField = {
+    fieldType: EdithModalFieldType;
+    label: string;
+    name: string;
+    initialState: string | boolean | null;
+};
+export declare function createInputModalField(label: string, name: string, initialState?: string | null): EdithModalField;
+export declare function createCheckboxModalField(label: string, name: string, initialState?: boolean): EdithModalField;
+export type EdithModalCallback = (payload: {
+    [keyof: string]: string | boolean;
+} | null) => void;
+export declare class EdithModal {
+    private el;
+    private ctx;
+    private title;
+    private fields;
+    private callback;
+    constructor(ctx: Edith, options: {
+        title: string;
+        fields?: EdithModalField[];
+        callback: EdithModalCallback;
+    });
+    cancel(event: Event): void;
+    submit(event: Event): void;
+    close(): void;
+    show(): HTMLDivElement;
+}