@lesjoursfr/edith 2.1.0 → 2.1.2

package/src/core/dom.js

@@ -1,353 +0,0 @@
-/**
- * Check if the node has the given tag name, or if its tag name is in the given list.
- * @param {Node} node the element to check
- * @param {(string|Array)} tags a tag name or a list of tag name
- * @returns {boolean} true if the node has the given tag name
- */
-export function hasTagName(node, tags) {
-  if (node.nodeType !== Node.ELEMENT_NODE) {
-    return false;
-  }
-
-  if (typeof tags === "string") {
-    return node.tagName === tags.toUpperCase();
-  }
-
-  return tags.some((tag) => node.tagName === tag.toUpperCase());
-}
-
-/**
- * Check if the node has the given class name.
- * @param {Node} node the element to check
- * @param {(string|Array)} className a class name
- * @returns {boolean} true if the node has the given class name
- */
-export function hasClass(node, className) {
-  if (node.nodeType !== Node.ELEMENT_NODE) {
-    return false;
-  }
-
-  return node.classList.contains(className);
-}
-
-/**
- * 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 {Node} the created node
- */
-export function createNodeWith(tag, { innerHTML, textContent, attributes } = {}) {
-  const node = document.createElement(tag);
-
-  if (attributes) {
-    for (const key in attributes) {
-      if (Object.hasOwnProperty.call(attributes, key)) {
-        node.setAttribute(key, attributes[key]);
-      }
-    }
-  }
-
-  if (typeof innerHTML === "string") {
-    node.innerHTML = innerHTML;
-  } else if (typeof textContent === "string") {
-    node.textContent = textContent;
-  }
-
-  return node;
-}
-
-/**
- * Replace a node.
- * @param {Node} node the node to replace
- * @param {Node} replacement the new node
- * @returns {Node} the new node
- */
-export function replaceNodeWith(node, replacement) {
-  node.replaceWith(replacement);
-  return replacement;
-}
-
-/**
- * Replace the node by its child nodes.
- * @param {Node} node the node to replace
- * @returns {Array} its child nodes
- */
-export function unwrapNode(node) {
-  const newNodes = [...node.childNodes];
-  node.replaceWith(...newNodes);
-  return newNodes;
-}
-
-/**
- * Replace the node by its text content.
- * @param {Node} node the node to replace
- * @returns {Text} the created Text node
- */
-export function textifyNode(node) {
-  const newNode = document.createTextNode(node.textContent);
-  node.replaceWith(newNode);
-  return newNode;
-}
-
-/**
- * Know if a tag si a self-closing tag
- * @param {String} tagName
- * @returns {Boolean}
- */
-export function isSelfClosing(tagName) {
-  return [
-    "AREA",
-    "BASE",
-    "BR",
-    "COL",
-    "EMBED",
-    "HR",
-    "IMG",
-    "INPUT",
-    "KEYGEN",
-    "LINK",
-    "META",
-    "PARAM",
-    "SOURCE",
-    "TRACK",
-    "WBR",
-  ].includes(tagName);
-}
-
-/**
- * Remove all node's child nodes that pass the test implemented by the provided function.
- * @param {Node} node the node to process
- * @param {Function} callbackFn the predicate
- */
-export function removeNodes(node, callbackFn) {
-  for (const el of [...node.childNodes]) {
-    if (callbackFn(el)) {
-      el.remove();
-    }
-  }
-}
-
-/**
- * Remove recursively all node's child nodes that pass the test implemented by the provided function.
- * @param {Node} node the node to process
- * @param {Function} callbackFn the predicate
- */
-export function removeNodesRecursively(node, callbackFn) {
-  // Remove the node if it meets the condition
-  if (callbackFn(node)) {
-    node.remove();
-    return;
-  }
-
-  // Loop through the node’s children
-  for (const el of [...node.childNodes]) {
-    // Execute the same function if it’s an element node
-    removeNodesRecursively(el, callbackFn);
-  }
-}
-
-/**
- * Remove all node's child nodes that are empty text nodes.
- * @param {Node} node the node to process
- */
-export function removeEmptyTextNodes(node) {
-  removeNodes(node, (el) => el.nodeType === Node.TEXT_NODE && el.textContent.trim().length === 0);
-}
-
-/**
- * Remove all node's child nodes that are comment nodes.
- * @param {Node} node the node to process
- */
-export function removeCommentNodes(node) {
-  removeNodes(node, (el) => el.nodeType === Node.COMMENT_NODE);
-}
-
-/**
- * Reset all node's attributes to the given list.
- * @param {Node} node the node
- * @param {object} targetAttributes the requested node's attributes
- */
-export function resetAttributesTo(node, targetAttributes) {
-  for (const name of node.getAttributeNames()) {
-    if (targetAttributes[name] === undefined) {
-      node.removeAttribute(name);
-    }
-  }
-  for (const name of Object.keys(targetAttributes)) {
-    node.setAttribute(name, targetAttributes[name]);
-  }
-}
-
-/**
- * Replace the node's style attribute by some regular nodes (<b>, <i>, <u> or <s>).
- * @param {Node} node the node to process
- * @returns {Node} the new node
- */
-export function replaceNodeStyleByTag(node) {
-  // Get the style
-  const styleAttr = node.getAttribute("style") || "";
-
-  // Check if a tag is override by the style attribute
-  if (
-    (hasTagName(node, "b") && styleAttr.match(/font-weight\s*:\s*(normal|400);/)) ||
-    (hasTagName(node, "i") && styleAttr.match(/font-style\s*:\s*normal;/)) ||
-    (hasTagName(node, ["u", "s"]) && styleAttr.match(/text-decoration\s*:\s*none;/))
-  ) {
-    node = replaceNodeWith(
-      node,
-      createNodeWith("span", { attributes: { style: styleAttr }, innerHTML: node.innerHTML })
-    );
-  }
-
-  // Infer the tag from the style
-  if (styleAttr.match(/font-weight\s*:\s*(bold|700|800|900);/)) {
-    node = replaceNodeWith(
-      node,
-      createNodeWith("b", {
-        innerHTML: `<span style="${styleAttr.replace(/font-weight\s*:\s*(bold|700|800|900);/, "")}">${
-          node.innerHTML
-        }</span>`,
-      })
-    );
-  } else if (styleAttr.match(/font-style\s*:\s*italic;/)) {
-    node = replaceNodeWith(
-      node,
-      createNodeWith("i", {
-        innerHTML: `<span style="${styleAttr.replace(/font-style\s*:\s*italic;/, "")}">${node.innerHTML}</span>`,
-      })
-    );
-  } else if (styleAttr.match(/text-decoration\s*:\s*underline;/)) {
-    node = replaceNodeWith(
-      node,
-      createNodeWith("u", {
-        innerHTML: `<span style="${styleAttr.replace(/text-decoration\s*:\s*underline;/, "")}">${
-          node.innerHTML
-        }</span>`,
-      })
-    );
-  } else if (styleAttr.match(/text-decoration\s*:\s*line-through;/)) {
-    node = replaceNodeWith(
-      node,
-      createNodeWith("s", {
-        innerHTML: `<span style="${styleAttr.replace(/text-decoration\s*:\s*line-through;/, "")}">${
-          node.innerHTML
-        }</span>`,
-      })
-    );
-  }
-
-  // Return the node
-  return node;
-}
-
-/**
- * Remove all leading & trailing node's child nodes that match the given tag.
- * @param {Node} node the node to process
- * @param {string} tag the tag
- */
-export function trimTag(node, tag) {
-  // Children
-  const children = node.childNodes;
-
-  // Remove Leading
-  while (children.length > 0 && hasTagName(children[0], tag)) {
-    children[0].remove();
-  }
-
-  // Remove Trailing
-  while (children.length > 0 && hasTagName(children[children.length - 1], tag)) {
-    children[children.length - 1].remove();
-  }
-}
-
-/**
- * Clean the DOM content of the node
- * @param {Node} root the node to process
- * @param {object} style active styles for the root
- */
-export function cleanDomContent(root, style) {
-  // Iterate through children
-  for (let el of [...root.children]) {
-    // 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 = {};
-      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.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);
-  }
-}

package/src/core/event.js

@@ -1,4 +0,0 @@
-export const Events = Object.freeze({
-  modeChanged: "edith-mode-changed",
-  initialized: "edith-initialized",
-});

package/src/core/history.js

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

package/src/core/mode.js

@@ -1,4 +0,0 @@
-export const EditorModes = Object.freeze({
-  Visual: 1,
-  Code: 2,
-});

package/src/index.js

@@ -1,90 +0,0 @@
-import { EdithEditor } from "./ui/editor.js";
-import { EdithButton, EdithButtons } from "./ui/button.js";
-import { Events } from "./core/event.js";
-
-/*
- * Represents an editor
- * @constructor
- * @param {HTMLElement} element - The <input> element to add the Wysiwyg to.
- * @param {Object} options - Options for the editor.
- */
-function Edith(element, options) {
-  // Render the editor in the element
-  this.element = element;
-  this.element.classList.add("edith");
-
-  // Create the toolbar
-  this.toolbar = document.createElement("div");
-  this.toolbar.setAttribute("class", "edith-toolbar");
-  this.element.append(this.toolbar);
-
-  // Create buttons
-  options.buttons = options.buttons || {};
-  options.toolbar = options.toolbar || [["style", ["bold", "italic", "underline", "strikethrough"]]];
-  for (const { 0: group, 1: buttons } of options.toolbar) {
-    // Create the button group
-    const btnGroup = document.createElement("div");
-    btnGroup.setAttribute("id", group);
-    btnGroup.setAttribute("class", "edith-btn-group");
-    this.toolbar.append(btnGroup);
-
-    // Add buttons
-    for (const buttonId of buttons) {
-      // Render the button
-      const button = options.buttons[buttonId] || EdithButtons[buttonId];
-      btnGroup.append(button(this).render());
-    }
-  }
-
-  // Create the editor
-  this.editor = new EdithEditor(this, options);
-  this.element.append(this.editor.render());
-
-  // Create the modals
-  this.modals = document.createElement("div");
-  this.modals.setAttribute("class", "edith-modals");
-  this.element.append(this.modals);
-
-  // Trigger the initialized event once its initialized
-  this.trigger(Events.initialized);
-}
-
-Edith.prototype.on = function (type, listener, options) {
-  this.element.addEventListener(type, listener, options);
-};
-
-Edith.prototype.off = function (type, listener, options) {
-  this.element.removeEventListener(type, listener, options);
-};
-
-Edith.prototype.trigger = function (type, payload = null) {
-  this.element.dispatchEvent(new CustomEvent(type, { detail: payload }));
-};
-
-Edith.prototype.setContent = function (content) {
-  this.editor.setContent(content);
-};
-
-Edith.prototype.getContent = function () {
-  return this.editor.getContent();
-};
-
-Edith.prototype.destroy = function () {
-  // Delete the modals
-  this.modals.remove();
-  this.modals = undefined;
-
-  // Delete the editor
-  this.editor.destroy();
-  this.editor = undefined;
-
-  // Delete the toolbar
-  this.toolbar.remove();
-  this.toolbar = undefined;
-
-  // Clean the main element
-  this.element.classList.remove("edith");
-  this.element = undefined;
-};
-
-export { Edith, EdithButton };

package/src/ui/button.js

@@ -1,200 +0,0 @@
-import { createPopper } from "@popperjs/core";
-import { Events } from "../core/event.js";
-import { EditorModes } from "../core/mode.js";
-
-function onButtonClick(context, kind) {
-  switch (kind) {
-    case "bold":
-      context.editor.wrapInsideTag("b");
-      break;
-    case "italic":
-      context.editor.wrapInsideTag("i");
-      break;
-    case "underline":
-      context.editor.wrapInsideTag("u");
-      break;
-    case "strikethrough":
-      context.editor.wrapInsideTag("s");
-      break;
-    case "subscript":
-      context.editor.wrapInsideTag("sub");
-      break;
-    case "superscript":
-      context.editor.wrapInsideTag("sup");
-      break;
-    case "nbsp":
-      context.editor.replaceByHtml('<span class="edith-nbsp" contenteditable="false">¶</span>');
-      break;
-    case "clear":
-      context.editor.clearStyle();
-      break;
-    case "link":
-      context.editor.insertLink();
-      break;
-    case "codeview":
-      context.editor.toggleCodeView();
-      break;
-  }
-}
-
-function EdithButton(ctx, options) {
-  this.ctx = ctx;
-  this.icon = options.icon;
-  this.title = options.title;
-  this.onclick = options.onclick;
-  this.showOnCodeView = options.showOnCodeView === true;
-}
-
-EdithButton.prototype.click = function (event) {
-  // Prevent default
-  event.preventDefault();
-
-  // Check if the onclick attribute is a internal function ID or a custom function
-  if (typeof this.onclick === "string") {
-    onButtonClick(this.ctx, this.onclick);
-  } else {
-    this.onclick(this.ctx, event);
-  }
-};
-
-EdithButton.prototype.showTooltip = function () {
-  if (this.popper !== undefined) {
-    return;
-  }
-
-  // Add the tooltip content to the DOM
-  this.popperEl = document.createElement("div");
-  this.popperEl.setAttribute("class", "edith-tooltip");
-  this.popperEl.textContent = this.title;
-  const arrowEl = document.createElement("div");
-  arrowEl.setAttribute("class", "arrow");
-  arrowEl.setAttribute("data-popper-arrow", "");
-  this.popperEl.append(arrowEl);
-  this.ctx.toolbar.append(this.popperEl);
-
-  // Create the tooltip
-  this.popper = createPopper(this.el, this.popperEl, {
-    placement: "bottom",
-    modifiers: [
-      {
-        name: "arrow",
-        options: {
-          padding: 5, // 5px from the edges of the popper
-        },
-      },
-      {
-        name: "offset",
-        options: {
-          offset: [0, 8],
-        },
-      },
-    ],
-  });
-};
-
-EdithButton.prototype.hideTooltip = function () {
-  if (this.popper === undefined) {
-    return;
-  }
-
-  // Destroy the tooltip
-  this.popper.destroy();
-  this.popper = undefined;
-
-  // Remove the tooltip content from the DOM
-  this.popperEl.remove();
-};
-
-EdithButton.prototype.onEditorModeChange = function (event) {
-  if (event.detail.mode === EditorModes.Code) {
-    this.el.setAttribute("disabled", "disabled");
-  } else {
-    this.el.removeAttribute("disabled");
-  }
-};
-
-EdithButton.prototype.render = function () {
-  // Create the button
-  this.el = document.createElement("button");
-  this.el.setAttribute("class", `edith-btn ${this.icon}`);
-  this.el.setAttribute("type", "button");
-
-  // Bind events
-  this.el.onclick = this.click.bind(this);
-  this.el.onmouseenter = this.showTooltip.bind(this);
-  this.el.onmouseleave = this.hideTooltip.bind(this);
-
-  // Check if we have to disable the button on the code view
-  if (this.showOnCodeView !== true) {
-    this.ctx.on(Events.modeChanged, this.onEditorModeChange.bind(this));
-  }
-
-  // Return the button
-  return this.el;
-};
-
-const EdithButtons = {
-  bold: (context) =>
-    new EdithButton(context, {
-      icon: "fa-solid fa-bold",
-      title: "Gras",
-      onclick: "bold",
-    }),
-  italic: (context) =>
-    new EdithButton(context, {
-      icon: "fa-solid fa-italic",
-      title: "Italique",
-      onclick: "italic",
-    }),
-  underline: (context) =>
-    new EdithButton(context, {
-      icon: "fa-solid fa-underline",
-      title: "Souligner",
-      onclick: "underline",
-    }),
-  strikethrough: (context) =>
-    new EdithButton(context, {
-      icon: "fa-solid fa-strikethrough",
-      title: "Barrer",
-      onclick: "strikethrough",
-    }),
-  subscript: (context) =>
-    new EdithButton(context, {
-      icon: "fa-solid fa-subscript",
-      title: "Indice",
-      onclick: "subscript",
-    }),
-  superscript: (context) =>
-    new EdithButton(context, {
-      icon: "fa-solid fa-superscript",
-      title: "Exposant",
-      onclick: "superscript",
-    }),
-  nbsp: (context) =>
-    new EdithButton(context, {
-      icon: "edith-btn-nbsp",
-      title: "Ajouter une espace insécable",
-      onclick: "nbsp",
-    }),
-  clear: (context) =>
-    new EdithButton(context, {
-      icon: "fa-solid fa-eraser",
-      title: "Effacer la mise en forme",
-      onclick: "clear",
-    }),
-  link: (context) =>
-    new EdithButton(context, {
-      icon: "fa-solid fa-link",
-      title: "Lien",
-      onclick: "link",
-    }),
-  codeview: (context) =>
-    new EdithButton(context, {
-      icon: "fa-solid fa-code",
-      title: "Afficher le code HTML",
-      onclick: "codeview",
-      showOnCodeView: true,
-    }),
-};
-
-export { EdithButton, EdithButtons };