@lesjoursfr/edith 2.1.2 → 2.1.4

package/dist/ui/editor.js

@@ -0,0 +1,323 @@
+import { html } from "@codemirror/lang-html";
+import { createNodeWith, hasClass, hasTagName, isHTMLElement, isSelfClosing, isTextNode, removeNodesRecursively, throttle, unwrapNode, } from "@lesjoursfr/browser-tools";
+import { EditorView, basicSetup } from "codemirror";
+import { EditorModes, Events, History, cleanPastedHtml, clearSelectionStyle, getSelection, isSelectionInsideNode, replaceSelectionByHtml, restoreSelection, 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 = (isTextNode(sel.anchorNode) ? sel.anchorNode.parentNode : 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;
+}

package/dist/ui/modal.js

@@ -0,0 +1,145 @@
+import { createNodeWith, getAttribute, hasAttribute } from "@lesjoursfr/browser-tools";
+export var EdithModalFieldType;
+(function (EdithModalFieldType) {
+    EdithModalFieldType[EdithModalFieldType["input"] = 1] = "input";
+    EdithModalFieldType[EdithModalFieldType["checkbox"] = 2] = "checkbox";
+})(EdithModalFieldType || (EdithModalFieldType = {}));
+function renderInputModalField(field) {
+    const el = document.createElement("div");
+    el.setAttribute("class", "edith-modal-input");
+    const label = document.createElement("label");
+    label.textContent = field.label;
+    const input = document.createElement("input");
+    input.setAttribute("name", field.name);
+    input.setAttribute("type", "text");
+    if (field.initialState !== null) {
+        input.value = field.initialState.toString();
+    }
+    el.append(label);
+    el.append(input);
+    return el;
+}
+function renderCheckboxModalField(field) {
+    const el = document.createElement("div");
+    el.setAttribute("class", "edith-modal-checkbox");
+    const label = document.createElement("label");
+    label.textContent = field.label;
+    const input = document.createElement("input");
+    input.setAttribute("name", field.name);
+    input.setAttribute("type", "checkbox");
+    if (field.initialState) {
+        input.checked = true;
+    }
+    label.prepend(input);
+    el.append(label);
+    return el;
+}
+export function createInputModalField(label, name, initialState = null) {
+    return {
+        fieldType: EdithModalFieldType.input,
+        label,
+        name,
+        initialState,
+    };
+}
+export function createCheckboxModalField(label, name, initialState = false) {
+    return {
+        fieldType: EdithModalFieldType.checkbox,
+        label,
+        name,
+        initialState,
+    };
+}
+export class EdithModal {
+    el;
+    ctx;
+    title;
+    fields;
+    callback;
+    constructor(ctx, options) {
+        this.ctx = ctx;
+        this.title = options.title;
+        this.fields = options.fields || [];
+        this.callback = options.callback;
+    }
+    cancel(event) {
+        event.preventDefault();
+        // Call the callback with a null value
+        this.callback(null);
+        // Close the modal
+        this.close();
+    }
+    submit(event) {
+        event.preventDefault();
+        // Call the callback with the input & checkboxes values
+        const payload = {};
+        for (const el of this.el.querySelectorAll("input")) {
+            if (hasAttribute(el, "name")) {
+                payload[getAttribute(el, "name")] = getAttribute(el, "type") === "checkbox" ? el.checked : el.value;
+            }
+        }
+        this.callback(payload);
+        // Close the modal
+        this.close();
+    }
+    close() {
+        // Remove the element from the dom
+        this.el.remove();
+    }
+    show() {
+        // Create the modal
+        this.el = createNodeWith("div", {
+            attributes: { class: "edith-modal" },
+        });
+        // Create the header
+        const header = createNodeWith("div", {
+            attributes: { class: "edith-modal-header" },
+        });
+        const title = createNodeWith("span", {
+            textContent: this.title,
+            attributes: { class: "edith-modal-title" },
+        });
+        header.append(title);
+        // Create the content
+        const content = createNodeWith("div", {
+            attributes: { class: "edith-modal-content" },
+        });
+        for (const field of this.fields) {
+            switch (field.fieldType) {
+                case EdithModalFieldType.input:
+                    content.append(renderInputModalField(field));
+                    break;
+                case EdithModalFieldType.checkbox:
+                    content.append(renderCheckboxModalField(field));
+                    break;
+                default:
+                    throw new Error(`Unknown fieldType ${field.fieldType}`);
+            }
+        }
+        // Create the footer
+        const footer = createNodeWith("div", {
+            attributes: { class: "edith-modal-footer" },
+        });
+        const cancel = createNodeWith("button", {
+            textContent: "Annuler",
+            attributes: { class: "edith-modal-cancel", type: "button" },
+        });
+        footer.append(cancel);
+        const submit = createNodeWith("button", {
+            textContent: "Valider",
+            attributes: { class: "edith-modal-submit", type: "button" },
+        });
+        footer.append(submit);
+        // Append everything
+        this.el.append(header);
+        this.el.append(content);
+        this.el.append(footer);
+        // Add the modal to the editor
+        this.ctx.modals.append(this.el);
+        // Bind events
+        cancel.onclick = this.cancel.bind(this);
+        submit.onclick = this.submit.bind(this);
+        // Return the modal
+        return this.el;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lesjoursfr/edith",
-	"version": "2.1.2",
+	"version": "2.1.4",
 	"description": "Simple WYSIWYG editor.",
 	"license": "MIT",
 	"repository": "lesjoursfr/edith",
@@ -23,7 +23,7 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"scripts": {
-		"freshlock": "rm -rf node_modules/ && rm .yarn/install-state.gz && rm -r .yarn/cache/ && rm yarn.lock && yarn",
+		"freshlock": "rm -rf node_modules/ && rm .yarn/install-state.gz && rm yarn.lock && yarn",
 		"eslint-check": "eslint . --ext .js,.jsx,.ts,.tsx",
 		"eslint-fix": "eslint . --fix --ext .js,.jsx,.ts,.tsx",
 		"stylelint-check": "stylelint **/*.scss",
@@ -46,6 +46,9 @@
 		"WYSIWYG",
 		"editor"
 	],
+	"dependencies": {
+		"@lesjoursfr/browser-tools": "^1.0.2"
+	},
 	"devDependencies": {
 		"@babel/core": "^7.23.5",
 		"@babel/preset-env": "^7.23.5",
@@ -58,20 +61,20 @@
 		"@types/color": "^3.0.6",
 		"@types/jsdom": "^21.1.6",
 		"@types/mocha": "^10.0.6",
-		"@types/node": "^20.10.1",
-		"@typescript-eslint/eslint-plugin": "^6.13.1",
-		"@typescript-eslint/parser": "^6.13.1",
+		"@types/node": "^20.10.4",
+		"@typescript-eslint/eslint-plugin": "^6.13.2",
+		"@typescript-eslint/parser": "^6.13.2",
 		"babel-loader": "^9.1.3",
 		"codemirror": "^6.0.1",
 		"css-loader": "^6.8.1",
 		"css-minimizer-webpack-plugin": "^5.0.1",
-		"eslint": "^8.54.0",
-		"eslint-config-prettier": "^9.0.0",
+		"eslint": "^8.55.0",
+		"eslint-config-prettier": "^9.1.0",
 		"fs-extra": "^11.2.0",
 		"jsdom": "^23.0.1",
 		"mini-css-extract-plugin": "^2.7.6",
 		"mocha": "^10.2.0",
-		"postcss": "^8.4.31",
+		"postcss": "^8.4.32",
 		"prettier": "^3.1.0",
 		"sass": "^1.69.5",
 		"sass-loader": "^13.3.2",
@@ -80,7 +83,7 @@
 		"terser-webpack-plugin": "^5.3.9",
 		"ts-loader": "^9.5.1",
 		"ts-node": "^10.9.1",
-		"typescript": "^5.3.2",
+		"typescript": "^5.3.3",
 		"webpack": "^5.89.0",
 		"webpack-cli": "^5.1.4",
 		"webpack-dev-server": "^4.15.1"

package/src/core/edit.ts

@@ -1,5 +1,4 @@
 import {
-  cleanDomContent,
   createNodeWith,
   hasClass,
   hasTagName,
@@ -8,9 +7,13 @@ import {
   removeCommentNodes,
   removeEmptyTextNodes,
   removeNodes,
+  replaceNodeStyleByTag,
+  replaceNodeWith,
+  resetAttributesTo,
   textifyNode,
+  trimTag,
   unwrapNode,
-} from "./dom.js";
+} from "@lesjoursfr/browser-tools";
 import { getSelection, moveCursorAfterNode, moveCursorInsideNode, selectNodeContents, selectNodes } from "./range.js";
 
 /**
@@ -292,6 +295,95 @@ export function clearSelectionStyle(): void {
   }
 }
 
+/**
+ * Clean the DOM content of the node
+ * @param {HTMLElement} root the node to process
+ * @param {object} style active styles for the root
+ */
+export function cleanDomContent(root: HTMLElement, style: { [keyof: string]: boolean }): void {
+  // Iterate through children
+  for (let el of [...root.children] as HTMLElement[]) {
+    // Check if the span is an edith-nbsp
+    if (hasTagName(el, "span") && hasClass(el, "edith-nbsp")) {
+      // Ensure that we have a clean element
+      resetAttributesTo(el, { class: "edith-nbsp", contenteditable: "false" });
+      el.innerHTML = "¶";
+
+      continue;
+    }
+
+    // Check if there is a style attribute on the current node
+    if (el.hasAttribute("style")) {
+      // Replace the style attribute by tags
+      el = replaceNodeStyleByTag(el);
+    }
+
+    // Check if the Tag Match a Parent Tag
+    if (style[el.tagName]) {
+      el = replaceNodeWith(
+        el,
+        createNodeWith("span", { attributes: { style: el.getAttribute("style") || "" }, innerHTML: el.innerHTML })
+      );
+    }
+
+    // Save the Current Style Tag
+    const newTags = { ...style };
+    if (hasTagName(el, ["b", "i", "q", "u", "s"])) {
+      newTags[el.tagName] = true;
+    }
+
+    // Clean Children
+    cleanDomContent(el, newTags);
+
+    // Keep only href & target attributes for <a> tags
+    if (hasTagName(el, "a")) {
+      const linkAttributes: { href?: string; target?: string } = {};
+      if (el.hasAttribute("href")) {
+        linkAttributes.href = el.getAttribute("href")!;
+      }
+      if (el.hasAttribute("target")) {
+        linkAttributes.target = el.getAttribute("target")!;
+      }
+      resetAttributesTo(el, linkAttributes);
+      continue;
+    }
+
+    // Remove all tag attributes for tags in the allowed list
+    if (hasTagName(el, ["b", "i", "q", "u", "s", "br", "sup"])) {
+      resetAttributesTo(el, {});
+      continue;
+    }
+
+    // Remove useless tags
+    if (hasTagName(el, ["style", "meta", "link"])) {
+      el.remove();
+      continue;
+    }
+
+    // Check if it's a <p> tag
+    if (hasTagName(el, "p")) {
+      // Check if the element contains text
+      if (el.textContent === null || el.textContent.trim().length === 0) {
+        // Remove the node
+        el.remove();
+        continue;
+      }
+
+      // Remove all tag attributes
+      resetAttributesTo(el, {});
+
+      // Remove leading & trailing <br>
+      trimTag(el, "br");
+
+      // Return
+      continue;
+    }
+
+    // Unwrap the node
+    unwrapNode(el);
+  }
+}
+
 /**
  * Clean the given HTML code.
  * @param {string} html the HTML code to clean