@lesjoursfr/edith 2.1.0 → 2.1.3

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;
+}

package/dist/ui/modal.js

@@ -0,0 +1,145 @@
+import { createNodeWith, getAttribute, hasAttribute } from "../core/index.js";
+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.0",
+	"version": "2.1.3",
 	"description": "Simple WYSIWYG editor.",
 	"license": "MIT",
 	"repository": "lesjoursfr/edith",
@@ -15,64 +15,81 @@
 		"node": "18.x || 20.x"
 	},
 	"browserslist": [
-		"Chrome >= 60",
-		"Safari >= 12",
-		"iOS >= 12",
-		"Firefox >= 60",
-		"Edge >= 79"
+		"> 1%",
+		"last 3 versions",
+		"not dead"
 	],
-	"main": "src/index.js",
+	"main": "./dist/index.js",
+	"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",
-		"eslint-check": "eslint-config-prettier src/index.js",
-		"check-js": "eslint . --ext .js",
-		"check-sass": "stylelint **/*.scss",
-		"check-style": "prettier --check .",
-		"lint-js": "eslint . --fix --ext .js",
-		"lint-sass": "stylelint **/*.scss --fix",
-		"format": "prettier --write .",
-		"test": "npx mocha",
+		"eslint-check": "eslint . --ext .js,.jsx,.ts,.tsx",
+		"eslint-fix": "eslint . --fix --ext .js,.jsx,.ts,.tsx",
+		"stylelint-check": "stylelint **/*.scss",
+		"stylelint-fix": "stylelint **/*.scss --fix",
+		"prettier-check": "prettier --check .",
+		"prettier-fix": "prettier --write .",
+		"test": "NODE_OPTIONS='--loader=ts-node/esm' mocha",
+		"build-esm": "tsc && node assets.js",
+		"build-browser": "webpack --mode production --config ./server/webpack.config.js --progress",
+		"build": "npm run build-esm && npm run build-browser",
 		"builddeps": "webpack --mode production --config server/deps/codemirror.webpack.js --progress",
-		"server": "webpack serve --mode development --config server/editor.webpack.js --hot --open"
+		"server": "webpack serve --mode development --config ./server/webpack.config.js --hot --open"
 	},
 	"files": [
-		"src/**/*"
+		"src/**/*",
+		"dist/**/*",
+		"build/**/*"
 	],
 	"keywords": [
 		"WYSIWYG",
 		"editor"
 	],
 	"devDependencies": {
-		"@babel/core": "^7.22.11",
-		"@babel/preset-env": "^7.22.14",
-		"@codemirror/lang-html": "^6.4.6",
-		"@fortawesome/fontawesome-free": "^6.4.2",
+		"@babel/core": "^7.23.5",
+		"@babel/preset-env": "^7.23.5",
+		"@codemirror/lang-html": "^6.4.7",
+		"@fortawesome/fontawesome-free": "^6.5.1",
 		"@popperjs/core": "^2.11.8",
+		"@tsconfig/next": "^2.0.1",
+		"@types/babel__core": "^7.20.5",
+		"@types/babel__preset-env": "^7.9.6",
+		"@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",
 		"babel-loader": "^9.1.3",
 		"codemirror": "^6.0.1",
 		"css-loader": "^6.8.1",
-		"eslint": "^8.48.0",
+		"css-minimizer-webpack-plugin": "^5.0.1",
+		"eslint": "^8.54.0",
 		"eslint-config-prettier": "^9.0.0",
-		"jsdom": "^22.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.29",
-		"prettier": "^3.0.3",
-		"sass": "^1.66.1",
+		"postcss": "^8.4.31",
+		"prettier": "^3.1.0",
+		"sass": "^1.69.5",
 		"sass-loader": "^13.3.2",
-		"style-loader": "^3.3.3",
-		"stylelint": "^15.10.3",
+		"stylelint": "^15.11.0",
 		"stylelint-config-sass-guidelines": "^10.0.0",
-		"webpack": "^5.88.2",
+		"terser-webpack-plugin": "^5.3.9",
+		"ts-loader": "^9.5.1",
+		"ts-node": "^10.9.1",
+		"typescript": "^5.3.2",
+		"webpack": "^5.89.0",
 		"webpack-cli": "^5.1.4",
 		"webpack-dev-server": "^4.15.1"
 	},
 	"peerDependencies": {
-		"@codemirror/lang-html": "^6.4.6",
-		"@fortawesome/fontawesome-free": "^6.4.2",
+		"@codemirror/lang-html": "^6.4.7",
+		"@fortawesome/fontawesome-free": "^6.5.1",
 		"@popperjs/core": "^2.11.8",
 		"codemirror": "^6.0.1"
 	},
-	"packageManager": "yarn@3.6.3"
+	"packageManager": "yarn@4.0.2"
 }