@lesjoursfr/edith 2.1.3 → 2.2.0

package/src/core/events.ts

@@ -1,148 +1,4 @@
-const eventsNamespace = "edithEvents";
-let eventsGuid = 0;
-
-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 enum Events {
   modeChanged = "edith-mode-changed",
   initialized = "edith-initialized",
 }
-
-/**
- * Parse an event type to separate the type & the namespace
- * @param {string} string
- */
-function parseEventType(string: string): Omit<EdithEvent, "handler"> {
-  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: Window | Document | HTMLElement,
-  events: string,
-  handler: EventListenerOrEventListenerObject
-): void {
-  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: Window | Document | HTMLElement,
-  events: string,
-  handler?: EventListenerOrEventListenerObject
-): void {
-  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: Window | Document | HTMLElement | NodeListOf<HTMLElement>,
-  events: string,
-  handler: EventListenerOrEventListenerObject
-): void {
-  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: Window | Document | HTMLElement | NodeListOf<HTMLElement>,
-  events: string,
-  handler?: EventListenerOrEventListenerObject
-): void {
-  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: Window | Document | HTMLElement,
-  event: string,
-  payload?: { [key: string]: unknown }
-): void {
-  node.dispatchEvent(new CustomEvent(event, { detail: payload }));
-}

package/src/core/index.ts

@@ -1,7 +1,5 @@
-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/src/core/range.ts

@@ -1,4 +1,4 @@
-import { isHTMLElement, isSelfClosing } from "./dom.js";
+import { isHTMLElement, isSelfClosing } from "@lesjoursfr/browser-tools";
 
 /**
  * @typedef {Object} CurrentSelection

package/src/edith.ts

@@ -1,4 +1,5 @@
-import { Events, addClass, createNodeWith, off, on, removeClass, trigger } from "./core/index.js";
+import { addClass, createNodeWith, off, on, removeClass, trigger } from "@lesjoursfr/browser-tools";
+import { Events } from "./core/index.js";
 import { DefaultOptions, EdithButtonsOption, EdithOptions, EdithToolbarOption } from "./edith-options.js";
 import { EdithButton, EdithButtons, EdithEditor } from "./ui/index.js";
 

package/src/ui/button.ts

@@ -1,5 +1,6 @@
+import { createNodeWith } from "@lesjoursfr/browser-tools";
 import { createPopper } from "@popperjs/core";
-import { EditorModes, Events, createNodeWith } from "../core/index.js";
+import { EditorModes, Events } from "../core/index.js";
 import { EdithButtonsOption } from "../edith-options.js";
 import { Edith } from "../edith.js";
 

package/src/ui/editor.ts

@@ -1,4 +1,15 @@
 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,
@@ -6,18 +17,10 @@ import {
   History,
   cleanPastedHtml,
   clearSelectionStyle,
-  createNodeWith,
   getSelection,
-  hasClass,
-  hasTagName,
-  isHTMLElement,
   isSelectionInsideNode,
-  isSelfClosing,
-  removeNodesRecursively,
   replaceSelectionByHtml,
   restoreSelection,
-  throttle,
-  unwrapNode,
   wrapInsideLink,
   wrapInsideTag,
 } from "../core/index.js";
@@ -362,7 +365,7 @@ export class EdithEditor {
       }
     } else {
       // Detect style blocs in parents
-      let dest = sel.anchorNode as HTMLElement;
+      let dest = (isTextNode(sel.anchorNode!) ? sel.anchorNode!.parentNode : sel.anchorNode) as HTMLElement;
       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

package/src/ui/modal.ts

@@ -1,4 +1,4 @@
-import { createNodeWith, getAttribute, hasAttribute } from "../core/index.js";
+import { createNodeWith, getAttribute, hasAttribute } from "@lesjoursfr/browser-tools";
 import { Edith } from "../edith.js";
 
 export enum EdithModalFieldType {

package/dist/core/dom.d.ts

@@ -1,224 +0,0 @@
-type EdithData = {
-    [key: string]: string | null;
-};
-declare global {
-    interface Document {
-        edithData: EdithData;
-    }
-    interface HTMLElement {
-        edithData: EdithData;
-    }
-}
-/**
- * Check if a node is an HTML Element.
- * @param {Node} node the node to test
- * @returns {boolean} true if the node is an HTMLElement
- */
-export declare function isCommentNode(node: Node): node is Comment;
-/**
- * Check if a node is an HTML Element.
- * @param {Node} node the node to test
- * @returns {boolean} true if the node is an HTMLElement
- */
-export declare function isTextNode(node: Node): node is Text;
-/**
- * Check if a node is an HTML Element.
- * @param {Node} node the node to test
- * @returns {boolean} true if the node is an HTMLElement
- */
-export declare function isHTMLElement(node: Node): node is HTMLElement;
-/**
- * Create an HTMLElement from the HTML template.
- * @param {string} template the HTML template
- * @returns {HTMLElement} the created HTMLElement
- */
-export declare function createFromTemplate(template: string): HTMLElement;
-/**
- * Update the given CSS property.
- * If the value is `null` the property will be removed.
- * @param {HTMLElement} node the node to update
- * @param {string|{ [key: string]: string|null }} property multi-word property names are hyphenated (kebab-case) and not camel-cased.
- * @param {string|null} value (default to `null`)
- * @returns {HTMLElement} the element
- */
-export declare function updateCSS(node: HTMLElement, property: string | {
-    [key: string]: string | null;
-}, value?: string | null): HTMLElement;
-/**
- * Check if the node has the given attribute.
- * @param {HTMLElement} node
- * @param {string} attribute
- * @returns {boolean} true or false
- */
-export declare function hasAttribute(node: HTMLElement, attribute: string): boolean;
-/**
- * Get the given attribute.
- * @param {HTMLElement} node
- * @param {string} attribute
- * @returns {string|null} the value
- */
-export declare function getAttribute(node: HTMLElement, attribute: string): string | null;
-/**
- * Set the given attribute.
- * If the value is `null` the attribute will be removed.
- * @param {HTMLElement} node
- * @param {string} attribute
- * @param {string|null} value
- * @returns {HTMLElement} the element
- */
-export declare function setAttribute(node: HTMLElement, attribute: string, value: string | null): HTMLElement;
-/**
- * Get the given data.
- * This function does not change the DOM.
- * If there is no key this function return all data
- * @param {HTMLElement} node
- * @param {string|undefined} key
- * @returns {EdithData|string|null} the value
- */
-export declare function getData(node: HTMLElement, key?: string): EdithData | string | null;
-/**
- * Set the given data.
- * If the value is `null` the data will be removed.
- * This function does not change the DOM.
- * @param {HTMLElement} node
- * @param {string} key
- * @param {string|null} value
- * @returns {HTMLElement} the element
- */
-export declare function setData(node: HTMLElement, key: string, value: string | null): HTMLElement;
-/**
- * Check if the node has the given tag name, or if its tag name is in the given list.
- * @param {HTMLElement} node the element to check
- * @param {string|Array<string>} tags a tag name or a list of tag name
- * @returns {boolean} true if the node has the given tag name
- */
-export declare function hasTagName(node: HTMLElement, tags: string | Array<string>): boolean;
-/**
- * Check if the node has the given class name.
- * @param {HTMLElement} node the element to check
- * @param {string} className a class name
- * @returns {boolean} true if the node has the given class name
- */
-export declare function hasClass(node: HTMLElement, className: string): boolean;
-/**
- * Add the class to the node's class attribute.
- * @param {HTMLElement} node
- * @param {string|Array<string>} className
- * @returns {HTMLElement} the element
- */
-export declare function addClass(node: HTMLElement, className: string | Array<string>): HTMLElement;
-/**
- * Remove the class from the node's class attribute.
- * @param {HTMLElement} node
- * @param {string|Array<string>} className
- * @returns {HTMLElement} the element
- */
-export declare function removeClass(node: HTMLElement, className: string | Array<string>): HTMLElement;
-/**
- * Test if the node match the given selector.
- * @param {HTMLElement} node
- * @param {string} selector
- * @returns {boolean} true or false
- */
-export declare function is(node: HTMLElement, selector: string): boolean;
-/**
- * Get the node's offset.
- * @param {HTMLElement} node
- * @returns {{ top: number, left: number }} The node's offset
- */
-export declare function offset(node: HTMLElement): {
-    top: number;
-    left: number;
-};
-/**
- * Create a new node.
- * @param {string} tag the tag name of the node
- * @param {object} options optional parameters
- * @param {string} options.innerHTML the HTML code of the node
- * @param {string} options.textContent the text content of the node
- * @param {object} options.attributes attributes of the node
- * @returns {HTMLElement} the created node
- */
-export declare function createNodeWith<K extends keyof HTMLElementTagNameMap>(tag: K, { innerHTML, textContent, attributes, }?: {
-    innerHTML?: string;
-    textContent?: string;
-    attributes?: {
-        [keyof: string]: string;
-    };
-}): HTMLElementTagNameMap[K];
-/**
- * Replace a node.
- * @param {HTMLElement} node the node to replace
- * @param {HTMLElement} replacement the new node
- * @returns {HTMLElement} the new node
- */
-export declare function replaceNodeWith(node: HTMLElement, replacement: HTMLElement): HTMLElement;
-/**
- * Replace the node by its child nodes.
- * @param {HTMLElement} node the node to replace
- * @returns {Array<ChildNode>} its child nodes
- */
-export declare function unwrapNode(node: HTMLElement): ChildNode[];
-/**
- * Replace the node by its text content.
- * @param {HTMLElement} node the node to replace
- * @returns {Text} the created Text node
- */
-export declare function textifyNode(node: HTMLElement): Text;
-/**
- * Know if a tag si a self-closing tag
- * @param {string} tagName
- * @returns {boolean}
- */
-export declare function isSelfClosing(tagName: string): boolean;
-/**
- * Remove all node's child nodes that pass the test implemented by the provided function.
- * @param {ChildNode} node the node to process
- * @param {Function} callbackFn the predicate
- */
-export declare function removeNodes(node: ChildNode, callbackFn: (node: ChildNode) => boolean): void;
-/**
- * Remove recursively all node's child nodes that pass the test implemented by the provided function.
- * @param {ChildNode} node the node to process
- * @param {Function} callbackFn the predicate
- */
-export declare function removeNodesRecursively(node: ChildNode, callbackFn: (node: ChildNode) => boolean): void;
-/**
- * Remove all node's child nodes that are empty text nodes.
- * @param {ChildNode} node the node to process
- */
-export declare function removeEmptyTextNodes(node: ChildNode): void;
-/**
- * Remove all node's child nodes that are comment nodes.
- * @param {ChildNode} node the node to process
- */
-export declare function removeCommentNodes(node: ChildNode): void;
-/**
- * Reset all node's attributes to the given list.
- * @param {HTMLElement} node the node
- * @param {object} targetAttributes the requested node's attributes
- */
-export declare function resetAttributesTo(node: HTMLElement, targetAttributes: {
-    [keyof: string]: string;
-}): void;
-/**
- * Replace the node's style attribute by some regular nodes (<b>, <i>, <u> or <s>).
- * @param {HTMLElement} node the node to process
- * @returns {HTMLElement} the new node
- */
-export declare function replaceNodeStyleByTag(node: HTMLElement): HTMLElement;
-/**
- * Remove all leading & trailing node's child nodes that match the given tag.
- * @param {HTMLElement} node the node to process
- * @param {string} tag the tag
- */
-export declare function trimTag(node: HTMLElement, tag: string): void;
-/**
- * Clean the DOM content of the node
- * @param {HTMLElement} root the node to process
- * @param {object} style active styles for the root
- */
-export declare function cleanDomContent(root: HTMLElement, style: {
-    [keyof: string]: boolean;
-}): void;
-export {};