@lesjoursfr/edith 2.1.2 → 2.1.3

package/dist/core/edit.js

@@ -0,0 +1,255 @@
+import { cleanDomContent, createNodeWith, hasClass, hasTagName, isHTMLElement, isSelfClosing, removeCommentNodes, removeEmptyTextNodes, removeNodes, textifyNode, unwrapNode, } from "./dom.js";
+import { getSelection, moveCursorAfterNode, moveCursorInsideNode, selectNodeContents, selectNodes } from "./range.js";
+/**
+ * Split the node at the caret position.
+ * @param {Range} range the caret position
+ * @param {HTMLElement} node the node to split
+ * @returns {Text} the created text node with the caret inside
+ */
+function splitNodeAtCaret(range, node) {
+    // Get the node's parent
+    const parent = node.parentNode;
+    // Clone the current range & move the starting point to the beginning of the parent's node
+    const beforeCaret = range.cloneRange();
+    beforeCaret.setStart(parent, 0);
+    // Extract the content before the caret
+    const frag = beforeCaret.extractContents();
+    // Add a TextNode
+    const textNode = document.createTextNode("\u200B");
+    frag.append(textNode);
+    // Add back the content into the node's parent
+    parent.prepend(frag);
+    // Move the cursor in the created TextNode
+    moveCursorInsideNode(textNode);
+    // Return the inserted TextNode
+    return textNode;
+}
+/**
+ * Extract the selection from the node.
+ * @param {Range} range the selection to extract
+ * @param {HTMLElement} node the node to split
+ * @param {string} tag the tag to remove
+ * @returns {HTMLElement} the created node
+ */
+function extractSelectionFromNode(range, node) {
+    // Get the node's parent
+    const parent = node.parentNode;
+    // Clone the current range & move the starting point to the beginning of the parent's node
+    const beforeSelection = new Range();
+    beforeSelection.selectNodeContents(parent);
+    beforeSelection.setEnd(range.startContainer, range.startOffset);
+    const afterSelection = new Range();
+    afterSelection.selectNodeContents(parent);
+    afterSelection.setStart(range.endContainer, range.endOffset);
+    // Extract the content of the selection
+    const fragBefore = beforeSelection.extractContents();
+    const fragAfter = afterSelection.extractContents();
+    // Add back the content into the node's parent
+    parent.prepend(fragBefore);
+    parent.append(fragAfter);
+    // Remove the parent from the selection
+    let current = !isHTMLElement(range.commonAncestorContainer)
+        ? range.commonAncestorContainer.parentNode
+        : range.commonAncestorContainer;
+    while (current.tagName !== node.tagName) {
+        // Take the parent
+        current = current.parentNode;
+    }
+    const innerNodes = unwrapNode(current);
+    // Preserve the selection
+    selectNodes(innerNodes);
+    // Return the inserted TextNode
+    return innerNodes[0].parentNode;
+}
+/**
+ * Create a node at the caret position.
+ * @param {Range} range the caret position
+ * @param {string} tag the tag name of the node
+ * @param {object} options optional parameters
+ * @param {string} options.textContent the text content of the node
+ * @returns {HTMLElement} the created node with the caret inside
+ */
+function insertTagAtCaret(range, tag, options = {}) {
+    // Create the tag
+    const node = document.createElement(tag);
+    // Add a zero-width char or the word "lien" to create a valid cursor position inside the element
+    if (tag === "a") {
+        node.textContent = options.textContent || "lien";
+    }
+    else {
+        node.innerHTML = "\u200B";
+    }
+    // Insert the tag at the cursor position
+    range.insertNode(node);
+    // Add an extra space after the tag if it's a link
+    if (tag === "a") {
+        node.insertAdjacentText("afterend", " ");
+    }
+    // Move the cursor inside the created tag
+    moveCursorInsideNode(node);
+    // Return the inserted tag
+    return node;
+}
+/**
+ * Replace the current selection by the given HTML code.
+ * @param {string} html the HTML code
+ */
+export function replaceSelectionByHtml(html) {
+    // Get the caret position
+    const { sel, range } = getSelection();
+    // Check if the user has selected something
+    if (range === undefined) {
+        return;
+    }
+    // Create the fragment to insert
+    const frag = document.createDocumentFragment();
+    // Create the nodes to insert
+    const el = createNodeWith("div", { innerHTML: html });
+    frag.append(...el.childNodes);
+    const lastNode = frag.childNodes[frag.childNodes.length - 1];
+    // Replace the current selection by the pasted content
+    sel.deleteFromDocument();
+    range.insertNode(frag);
+    // Preserve the selection
+    moveCursorAfterNode(lastNode);
+}
+/**
+ * Wrap the current selection inside a new node.
+ * @param {string} tag the tag name of the node
+ * @param {object} options optional parameters
+ * @param {string} options.textContent the text content of the node
+ * @returns {HTMLElement|Text} the created node or the root node
+ */
+export function wrapInsideTag(tag, options = {}) {
+    // Get the caret position
+    const { sel, range } = getSelection();
+    // Check if the user has selected something
+    if (range === undefined) {
+        return;
+    }
+    // Check if there is a Selection
+    if (range.collapsed) {
+        // Check if a parent element has the same tag name
+        let parent = sel.anchorNode.parentNode;
+        while (!hasClass(parent, "edith-visual")) {
+            if (hasTagName(parent, tag)) {
+                // One of the parent has the same tag name
+                // Split the parent at the caret & insert a TextNode
+                return splitNodeAtCaret(range, parent);
+            }
+            // Take the parent
+            parent = parent.parentNode;
+        }
+        // We just have to insert a new Node at the caret position
+        return insertTagAtCaret(range, tag, options);
+    }
+    // There is a selection
+    // Check if a parent element has the same tag name
+    let parent = range.commonAncestorContainer;
+    while (!isHTMLElement(parent) || !hasClass(parent, "edith-visual")) {
+        if (isHTMLElement(parent) && hasTagName(parent, tag)) {
+            // One of the parent has the same tag name
+            // Extract the selection from the parent
+            return extractSelectionFromNode(range, parent);
+        }
+        // Take the parent
+        parent = parent.parentNode;
+    }
+    // Try to replace all elements with the same tag name in the selection
+    for (const el of [...parent.getElementsByTagName(tag)]) {
+        // Check if the the Element Intersect the Selection
+        if (sel.containsNode(el, true)) {
+            // Unwrap the node
+            const innerNodes = unwrapNode(el);
+            // Return the node
+            selectNodes(innerNodes);
+            parent.normalize();
+            return parent;
+        }
+    }
+    // Nothing was replaced
+    // Wrap the selection inside the given tag
+    const node = document.createElement(tag);
+    node.appendChild(range.extractContents());
+    range.insertNode(node);
+    // Remove empty tags
+    removeNodes(parent, (el) => {
+        return isHTMLElement(el) && !isSelfClosing(el.tagName) && (el.textContent === null || el.textContent.length === 0);
+    });
+    // Return the node
+    selectNodeContents(node);
+    return node;
+}
+/**
+ * Wrap the current selection inside a link.
+ * @param {string} text the text of the link
+ * @param {string} href the href of the link
+ * @param {boolean} targetBlank add target="_blank" attribute or not
+ * @returns {HTMLElement|Text} the created node
+ */
+export function wrapInsideLink(text, href, targetBlank) {
+    // Wrap the selection inside a link
+    const tag = wrapInsideTag("a", { textContent: text });
+    // Check if we have a tag
+    if (tag === undefined) {
+        return;
+    }
+    // Check if it's a Text node
+    if (!isHTMLElement(tag)) {
+        return tag;
+    }
+    // Add an href Attribute
+    tag.setAttribute("href", href);
+    // Create a target="_blank" attribute if required
+    if (targetBlank === true) {
+        tag.setAttribute("target", "_blank");
+    }
+    // Return the tag
+    return tag;
+}
+/**
+ * Clear the style in the current selection.
+ */
+export function clearSelectionStyle() {
+    // Get the caret position
+    const { sel, range } = getSelection();
+    // Check if there is something to do
+    if (range === undefined || !isHTMLElement(range.commonAncestorContainer)) {
+        return;
+    }
+    // Try to replace all non-text elements by their text
+    for (const el of [...range.commonAncestorContainer.children]) {
+        // Check if the the Element Intersect the Selection
+        if (sel.containsNode(el, true)) {
+            // Replace the node by its text
+            textifyNode(el);
+        }
+    }
+}
+/**
+ * Clean the given HTML code.
+ * @param {string} html the HTML code to clean
+ * @param {object} style active styles
+ * @returns {HTMLElement} the cleaned HTML code
+ */
+export function cleanPastedHtml(html, style) {
+    // Create a new div with the HTML content
+    const result = document.createElement("div");
+    result.innerHTML = html;
+    // Clean the HTML content
+    cleanDomContent(result, style);
+    result.normalize();
+    // Clean empty text nodes
+    removeEmptyTextNodes(result);
+    // Fix extra stuff in the HTML code :
+    //  - Clean spaces
+    //  - Merge siblings tags
+    result.innerHTML = result.innerHTML
+        .replace(/\s* \s*/g, " ")
+        .replace(/\s+/g, " ")
+        .replace(/(<\/b>[\n\r\s]*<b>|<\/i>[\n\r\s]*<i>|<\/u>[\n\r\s]*<u>|<\/s>[\n\r\s]*<s>)/g, " ");
+    // Clean comment nodes
+    removeCommentNodes(result);
+    // Return Cleaned HTML
+    return result;
+}

package/dist/core/events.d.ts

@@ -0,0 +1,47 @@
+type EdithEvent = {
+    type: string;
+    ns: Array<string> | null;
+    handler: EventListenerOrEventListenerObject;
+};
+type EdithEvents = {
+    [key: string]: EdithEvent;
+};
+declare global {
+    interface Window {
+        edithEvents: EdithEvents;
+    }
+    interface Document {
+        edithEvents: EdithEvents;
+    }
+    interface HTMLElement {
+        edithEvents: EdithEvents;
+    }
+}
+export declare enum Events {
+    modeChanged = "edith-mode-changed",
+    initialized = "edith-initialized"
+}
+/**
+ * Set an event listener on every node.
+ * @param {Window|Document|HTMLElement|NodeList} nodes
+ * @param {string} events
+ * @param {Function} handler
+ */
+export declare function on(nodes: Window | Document | HTMLElement | NodeListOf<HTMLElement>, events: string, handler: EventListenerOrEventListenerObject): void;
+/**
+ * Remove event listeners from the node.
+ * @param {Window|Document|HTMLElement|NodeList} node
+ * @param {string} events
+ * @param {Function|undefined} handler
+ */
+export declare function off(nodes: Window | Document | HTMLElement | NodeListOf<HTMLElement>, events: string, handler?: EventListenerOrEventListenerObject): void;
+/**
+ * Trigger the EdithEvent on the node.
+ * @param {Window|Document|HTMLElement} node
+ * @param {string} event
+ * @param {Object|undefined} payload
+ */
+export declare function trigger(node: Window | Document | HTMLElement, event: string, payload?: {
+    [key: string]: unknown;
+}): void;
+export {};

package/dist/core/events.js

@@ -0,0 +1,100 @@
+const eventsNamespace = "edithEvents";
+let eventsGuid = 0;
+export var Events;
+(function (Events) {
+    Events["modeChanged"] = "edith-mode-changed";
+    Events["initialized"] = "edith-initialized";
+})(Events || (Events = {}));
+/**
+ * Parse an event type to separate the type & the namespace
+ * @param {string} string
+ */
+function parseEventType(string) {
+    const [type, ...nsArray] = string.split(".");
+    return {
+        type,
+        ns: nsArray ?? null,
+    };
+}
+/**
+ * Set an event listener on the node.
+ * @param {Window|Document|HTMLElement} node
+ * @param {string} events
+ * @param {Function} handler
+ */
+function addEventListener(node, events, handler) {
+    if (node[eventsNamespace] === undefined) {
+        node[eventsNamespace] = {};
+    }
+    for (const event of events.split(" ")) {
+        const { type, ns } = parseEventType(event);
+        const handlerGuid = (++eventsGuid).toString(10);
+        node.addEventListener(type, handler);
+        node[eventsNamespace][handlerGuid] = { type, ns, handler };
+    }
+}
+/**
+ * Remove event listeners from the node.
+ * @param {Window|Document|HTMLElement} node
+ * @param {string} events
+ * @param {Function|undefined} handler
+ */
+function removeEventListener(node, events, handler) {
+    if (node[eventsNamespace] === undefined) {
+        node[eventsNamespace] = {};
+    }
+    for (const event of events.split(" ")) {
+        const { type, ns } = parseEventType(event);
+        for (const [guid, handlerObj] of Object.entries(node[eventsNamespace])) {
+            if (handlerObj.type !== type && type !== "*") {
+                continue;
+            }
+            if ((ns === null || handlerObj.ns?.includes(ns[0])) &&
+                (handler === undefined || (typeof handler === "function" && handler === handlerObj.handler))) {
+                delete node[eventsNamespace][guid];
+                node.removeEventListener(handlerObj.type, handlerObj.handler);
+            }
+        }
+    }
+}
+/**
+ * Set an event listener on every node.
+ * @param {Window|Document|HTMLElement|NodeList} nodes
+ * @param {string} events
+ * @param {Function} handler
+ */
+export function on(nodes, events, handler) {
+    if (nodes instanceof NodeList) {
+        for (const node of nodes) {
+            addEventListener(node, events, handler);
+        }
+    }
+    else {
+        addEventListener(nodes, events, handler);
+    }
+}
+/**
+ * Remove event listeners from the node.
+ * @param {Window|Document|HTMLElement|NodeList} node
+ * @param {string} events
+ * @param {Function|undefined} handler
+ */
+export function off(nodes, events, handler) {
+    if (nodes instanceof NodeList) {
+        for (const node of nodes) {
+            removeEventListener(node, events, handler);
+        }
+    }
+    else {
+        removeEventListener(nodes, events, handler);
+    }
+}
+/**
+ * Trigger the EdithEvent on the node.
+ * @param {Window|Document|HTMLElement} node
+ * @param {string} event
+ * @param {Object|undefined} payload
+ */
+export function trigger(node, event, payload) {
+    node.dispatchEvent(new CustomEvent(event, { detail: payload }));
+}

package/dist/core/history.d.ts

@@ -0,0 +1,14 @@
+export declare class History {
+    private buffer;
+    constructor();
+    /**
+     * Add a new snapshot to the history.
+     * @param {string} doc the element to save
+     */
+    push(doc: string): void;
+    /**
+     * Get the last saved element
+     * @returns {(string|null)} the last saved element or null
+     */
+    pop(): string | null;
+}

package/dist/core/history.js

@@ -0,0 +1,24 @@
+export class History {
+    buffer = [];
+    constructor() { }
+    /**
+     * Add a new snapshot to the history.
+     * @param {string} doc the element to save
+     */
+    push(doc) {
+        this.buffer.push(doc);
+        if (this.buffer.length > 20) {
+            this.buffer.shift();
+        }
+    }
+    /**
+     * Get the last saved element
+     * @returns {(string|null)} the last saved element or null
+     */
+    pop() {
+        if (this.buffer.length === 0) {
+            return null;
+        }
+        return this.buffer.pop();
+    }
+}

package/dist/core/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./dom.js";
+export * from "./edit.js";
+export * from "./events.js";
+export * from "./history.js";
+export * from "./mode.js";
+export * from "./range.js";
+export * from "./throttle.js";

package/dist/core/index.js

@@ -0,0 +1,7 @@
+export * from "./dom.js";
+export * from "./edit.js";
+export * from "./events.js";
+export * from "./history.js";
+export * from "./mode.js";
+export * from "./range.js";
+export * from "./throttle.js";

package/dist/core/mode.d.ts

@@ -0,0 +1,4 @@
+export declare enum EditorModes {
+    Visual = 1,
+    Code = 2
+}

package/dist/core/mode.js

@@ -0,0 +1,5 @@
+export var EditorModes;
+(function (EditorModes) {
+    EditorModes[EditorModes["Visual"] = 1] = "Visual";
+    EditorModes[EditorModes["Code"] = 2] = "Code";
+})(EditorModes || (EditorModes = {}));

package/dist/core/range.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @typedef {Object} CurrentSelection
+ * @property {Selection} sel the current selection
+ * @property {(Range|undefined)} range the current range
+ */
+export type CurrentSelection = {
+    sel: Selection;
+    range?: Range;
+};
+/**
+ * Get the current selection.
+ * @returns {CurrentSelection} the current selection
+ */
+export declare function getSelection(): CurrentSelection;
+/**
+ * Restore the given selection.
+ * @param {CurrentSelection} selection the selection to restore
+ */
+export declare function restoreSelection(selection: CurrentSelection): void;
+/**
+ * Move the cursor inside the node.
+ * @param {ChildNode} target the targeted node
+ */
+export declare function moveCursorInsideNode(target: ChildNode): void;
+/**
+ * Move the cursor after the node.
+ * @param {ChildNode} target the targeted node
+ */
+export declare function moveCursorAfterNode(target: ChildNode): void;
+/**
+ * Select the node's content.
+ * @param {ChildNode} target the targeted node
+ */
+export declare function selectNodeContents(target: ChildNode): void;
+/**
+ * Select the given Nodes.
+ * @param {Array<ChildNode>} nodes The list of Nodes to select.
+ */
+export declare function selectNodes(nodes: ChildNode[]): void;
+/**
+ * Check if the current selection is inside the given node.
+ * @param {ChildNode} node the targeted node
+ * @returns {boolean} true if the selection is inside
+ */
+export declare function isSelectionInsideNode(node: ChildNode): boolean;

package/dist/core/range.js

@@ -0,0 +1,86 @@
+import { isHTMLElement, isSelfClosing } from "./dom.js";
+/**
+ * Get the current selection.
+ * @returns {CurrentSelection} the current selection
+ */
+export function getSelection() {
+    const sel = window.getSelection();
+    return { sel, range: sel.rangeCount ? sel.getRangeAt(0) : undefined };
+}
+/**
+ * Restore the given selection.
+ * @param {CurrentSelection} selection the selection to restore
+ */
+export function restoreSelection(selection) {
+    const sel = window.getSelection();
+    sel.removeAllRanges();
+    if (selection.range !== undefined) {
+        sel.addRange(selection.range);
+    }
+}
+/**
+ * Move the cursor inside the node.
+ * @param {ChildNode} target the targeted node
+ */
+export function moveCursorInsideNode(target) {
+    const range = document.createRange();
+    const sel = window.getSelection();
+    range.setStart(target, 1);
+    range.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(range);
+}
+/**
+ * Move the cursor after the node.
+ * @param {ChildNode} target the targeted node
+ */
+export function moveCursorAfterNode(target) {
+    const range = document.createRange();
+    const sel = window.getSelection();
+    range.setStartAfter(target);
+    range.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(range);
+}
+/**
+ * Select the node's content.
+ * @param {ChildNode} target the targeted node
+ */
+export function selectNodeContents(target) {
+    const range = document.createRange();
+    const sel = window.getSelection();
+    range.selectNodeContents(target);
+    range.collapse(false);
+    sel.removeAllRanges();
+    sel.addRange(range);
+}
+/**
+ * Select the given Nodes.
+ * @param {Array<ChildNode>} nodes The list of Nodes to select.
+ */
+export function selectNodes(nodes) {
+    // Check if we just have a self-closing tag
+    if (nodes.length === 1 && isHTMLElement(nodes[0]) && isSelfClosing(nodes[0].tagName)) {
+        moveCursorAfterNode(nodes[0]); // Move the cursor after the Node
+        return;
+    }
+    // Select Nodes
+    const range = document.createRange();
+    const sel = window.getSelection();
+    range.setStartBefore(nodes[0]);
+    range.setEndAfter(nodes[nodes.length - 1]);
+    sel.removeAllRanges();
+    sel.addRange(range);
+}
+/**
+ * Check if the current selection is inside the given node.
+ * @param {ChildNode} node the targeted node
+ * @returns {boolean} true if the selection is inside
+ */
+export function isSelectionInsideNode(node) {
+    const { range } = getSelection();
+    if (range === undefined) {
+        return false;
+    }
+    return node.contains(range.startContainer) && node.contains(range.endContainer);
+}

package/dist/core/throttle.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Based on lodash version of throttle : https://github.com/lodash/lodash/blob/master/throttle.js
+ */
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked, or until the next browser frame is drawn. Provide `options` to indicate
+ * whether `func` should be invoked on the leading and/or trailing edge of the
+ * `wait` timeout. The `func` is invoked with the last arguments provided to the
+ * debounced function. Subsequent calls to the debounced function return the
+ * result of the last `func` invocation.
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the debounced function
+ * is invoked more than once during the `wait` timeout.
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until the next tick, similar to `setTimeout` with a timeout of `0`.
+ * @param {Function} func The function to debounce
+ * @param {number} wait The number of milliseconds to delay
+ * @param {Object} [options={}] The options object
+ * @param {boolean} [options.leading=false] Specify invoking on the leading edge of the timeout
+ * @param {boolean} [options.trailing=true] Specify invoking on the trailing edge of the timeout
+ * @param {number} [options.maxWait] The maximum time `func` is allowed to be delayed before it's invoked
+ * @returns {Function} Returns the new debounced function
+ */
+declare function debounce<F extends (...args: any) => any>(func: F, wait: number, options?: {
+    leading?: boolean;
+    trailing?: boolean;
+    maxWait?: number;
+}): (...args: Parameters<F>) => ReturnType<F>;
+/**
+ * Creates a throttled function that only invokes `func` at most once per
+ * every `wait` milliseconds (or once per browser frame). Provide `options` to indicate
+ * whether `func` should be invoked on the leading and/or trailing edge of the
+ * `wait` timeout. The `func` is invoked with the last arguments provided to the
+ * throttled function. Subsequent calls to the throttled function return the
+ * result of the last `func` invocation.
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the throttled function
+ * is invoked more than once during the `wait` timeout.
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until the next tick, similar to `setTimeout` with a timeout of `0`.
+ * @param {Function} func The function to throttle
+ * @param {number} wait The number of milliseconds to throttle invocations to
+ * @param {Object} [options={}] The options object
+ * @param {boolean} [options.leading=true] Specify invoking on the leading edge of the timeout
+ * @param {boolean} [options.trailing=true] Specify invoking on the trailing edge of the timeout
+ * @returns {Function} Returns the new throttled function
+ */
+declare function throttle<F extends (...args: any) => any>(func: F, wait: number, options?: {
+    leading?: boolean;
+    trailing?: boolean;
+}): (...args: Parameters<F>) => ReturnType<F>;
+export { debounce, throttle };