@lesjoursfr/edith 2.0.2 → 2.1.2

package/src/core/{edit.js → edit.ts}

@@ -1,26 +1,27 @@
-import { getSelection, moveCursorInsideNode, moveCursorAfterNode, selectNodeContents } from "./range.js";
 import {
-  hasClass,
-  hasTagName,
   cleanDomContent,
   createNodeWith,
-  unwrapNode,
-  textifyNode,
+  hasClass,
+  hasTagName,
+  isHTMLElement,
   isSelfClosing,
-  removeNodes,
-  removeEmptyTextNodes,
   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 {Node} node the node to split
+ * @param {HTMLElement} node the node to split
  * @returns {Text} the created text node with the caret inside
  */
-function splitNodeAtCaret(range, node) {
+function splitNodeAtCaret(range: Range, node: HTMLElement): Text {
   // Get the node's parent
-  const parent = node.parentNode;
+  const parent = node.parentNode as HTMLElement;
 
   // Clone the current range & move the starting point to the beginning of the parent's node
   const beforeCaret = range.cloneRange();
@@ -43,15 +44,63 @@ function splitNodeAtCaret(range, node) {
   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: Range, node: HTMLElement): HTMLElement {
+  // Get the node's parent
+  const parent = node.parentNode as HTMLElement;
+
+  // 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 as HTMLElement)
+    : range.commonAncestorContainer;
+  while (current.tagName !== node.tagName) {
+    // Take the parent
+    current = current.parentNode as HTMLElement;
+  }
+  const innerNodes = unwrapNode(current);
+
+  // Preserve the selection
+  selectNodes(innerNodes);
+
+  // Return the inserted TextNode
+  return innerNodes[0].parentNode as HTMLElement;
+}
+
 /**
  * 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 {Text} the created node with the caret inside
+ * @returns {HTMLElement} the created node with the caret inside
  */
-function insertTagAtCaret(range, tag, options) {
+function insertTagAtCaret<K extends keyof HTMLElementTagNameMap>(
+  range: Range,
+  tag: K,
+  options: { textContent?: string } = {}
+): HTMLElementTagNameMap[K] {
   // Create the tag
   const node = document.createElement(tag);
 
@@ -81,12 +130,14 @@ function insertTagAtCaret(range, tag, options) {
  * Replace the current selection by the given HTML code.
  * @param {string} html the HTML code
  */
-export function replaceSelectionByHtml(html) {
+export function replaceSelectionByHtml(html: string): void {
   // Get the caret position
   const { sel, range } = getSelection();
 
   // Check if the user has selected something
-  if (range === undefined) return false;
+  if (range === undefined) {
+    return;
+  }
 
   // Create the fragment to insert
   const frag = document.createDocumentFragment();
@@ -109,19 +160,24 @@ export function replaceSelectionByHtml(html) {
  * @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 {Node} the created node or the root node
+ * @returns {HTMLElement|Text} the created node or the root node
  */
-export function wrapInsideTag(tag, options = {}) {
+export function wrapInsideTag<K extends keyof HTMLElementTagNameMap>(
+  tag: K,
+  options: { textContent?: string } = {}
+): HTMLElement | Text | undefined {
   // Get the caret position
   const { sel, range } = getSelection();
 
   // Check if the user has selected something
-  if (range === undefined) return false;
+  if (range === undefined) {
+    return;
+  }
 
-  // Check if the range is collapsed
+  // Check if there is a Selection
   if (range.collapsed) {
     // Check if a parent element has the same tag name
-    let parent = sel.anchorNode.parentNode;
+    let parent = sel.anchorNode!.parentNode as HTMLElement;
     while (!hasClass(parent, "edith-visual")) {
       if (hasTagName(parent, tag)) {
         // One of the parent has the same tag name
@@ -130,7 +186,7 @@ export function wrapInsideTag(tag, options = {}) {
       }
 
       // Take the parent
-      parent = parent.parentNode;
+      parent = parent.parentNode as HTMLElement;
     }
 
     // We just have to insert a new Node at the caret position
@@ -140,29 +196,30 @@ export function wrapInsideTag(tag, options = {}) {
   // There is a selection
   // Check if a parent element has the same tag name
   let parent = range.commonAncestorContainer;
-  while (!hasClass(parent, "edith-visual")) {
-    if (hasTagName(parent, tag)) {
-      // One of the parent has the same tag name : unwrap it
-      return unwrapNode(parent);
+  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;
+    parent = parent.parentNode as HTMLElement;
   }
 
   // Try to replace all elements with the same tag name in the selection
-  let replaced = false;
-  for (const el of [...parent.getElementsByTagName(tag)]) {
+  for (const el of [...parent.getElementsByTagName(tag)] as HTMLElement[]) {
     // Check if the the Element Intersect the Selection
     if (sel.containsNode(el, true)) {
-      unwrapNode(el);
-      replaced = true;
+      // Unwrap the node
+      const innerNodes = unwrapNode(el);
+
+      // Return the node
+      selectNodes(innerNodes);
+      parent.normalize();
+      return parent;
     }
   }
-  if (replaced) {
-    parent.normalize();
-    return parent;
-  }
 
   // Nothing was replaced
   // Wrap the selection inside the given tag
@@ -171,7 +228,9 @@ export function wrapInsideTag(tag, options = {}) {
   range.insertNode(node);
 
   // Remove empty tags
-  removeNodes(parent, (el) => !isSelfClosing(el.tagName) && el.textContent.length === 0);
+  removeNodes(parent, (el) => {
+    return isHTMLElement(el) && !isSelfClosing(el.tagName) && (el.textContent === null || el.textContent.length === 0);
+  });
 
   // Return the node
   selectNodeContents(node);
@@ -183,9 +242,9 @@ export function wrapInsideTag(tag, options = {}) {
  * @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 the created node
+ * @returns {HTMLElement|Text} the created node
  */
-export function wrapInsideLink(text, href, targetBlank) {
+export function wrapInsideLink(text: string, href: string, targetBlank: boolean): HTMLElement | Text | undefined {
   // Wrap the selection inside a link
   const tag = wrapInsideTag("a", { textContent: text });
 
@@ -194,6 +253,11 @@ export function wrapInsideLink(text, href, targetBlank) {
     return;
   }
 
+  // Check if it's a Text node
+  if (!isHTMLElement(tag)) {
+    return tag;
+  }
+
   // Add an href Attribute
   tag.setAttribute("href", href);
 
@@ -209,17 +273,17 @@ export function wrapInsideLink(text, href, targetBlank) {
 /**
  * Clear the style in the current selection.
  */
-export function clearSelectionStyle() {
+export function clearSelectionStyle(): void {
   // Get the caret position
   const { sel, range } = getSelection();
 
   // Check if there is something to do
-  if (range.commonAncestorContainer.nodeType === Node.TEXT_NODE) {
+  if (range === undefined || !isHTMLElement(range.commonAncestorContainer)) {
     return;
   }
 
   // Try to replace all non-text elements by their text
-  for (const el of [...range.commonAncestorContainer.children]) {
+  for (const el of [...range.commonAncestorContainer.children] as HTMLElement[]) {
     // Check if the the Element Intersect the Selection
     if (sel.containsNode(el, true)) {
       // Replace the node by its text
@@ -232,9 +296,9 @@ export function clearSelectionStyle() {
  * Clean the given HTML code.
  * @param {string} html the HTML code to clean
  * @param {object} style active styles
- * @returns the cleaned HTML code
+ * @returns {HTMLElement} the cleaned HTML code
  */
-export function cleanPastedHtml(html, style) {
+export function cleanPastedHtml(html: string, style: { [keyof: string]: boolean }): HTMLElement {
   // Create a new div with the HTML content
   const result = document.createElement("div");
   result.innerHTML = html;

package/src/core/events.ts

@@ -0,0 +1,148 @@
+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/history.ts

@@ -0,0 +1,28 @@
+export class History {
+  private buffer: string[] = [];
+
+  constructor() {}
+
+  /**
+   * Add a new snapshot to the history.
+   * @param {string} doc the element to save
+   */
+  public push(doc: string): void {
+    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
+   */
+  public pop(): string | null {
+    if (this.buffer.length === 0) {
+      return null;
+    }
+
+    return this.buffer.pop()!;
+  }
+}

package/src/core/index.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/src/core/mode.ts

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

package/src/core/range.ts

@@ -0,0 +1,105 @@
+import { isHTMLElement, isSelfClosing } from "./dom.js";
+
+/**
+ * @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 function getSelection(): CurrentSelection {
+  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: CurrentSelection): void {
+  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: ChildNode): void {
+  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: ChildNode): void {
+  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: ChildNode): void {
+  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: ChildNode[]): void {
+  // 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: ChildNode): boolean {
+  const { range } = getSelection();
+  if (range === undefined) {
+    return false;
+  }
+
+  return node.contains(range.startContainer) && node.contains(range.endContainer);
+}