@lesjoursfr/edith 0.1.0

package/license

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) Les Jours (github.com/lesjoursfr)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/package.json

@@ -0,0 +1,84 @@
+{
+	"name": "@lesjoursfr/edith",
+	"version": "0.1.0",
+	"description": "Simple WYSIWYG editor.",
+	"license": "MIT",
+	"repository": "lesjoursfr/edith",
+	"homepage": "https://github.com/lesjoursfr/edith#readme",
+	"bugs": {
+		"url": "https://github.com/lesjoursfr/edith/issues"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"engines": {
+		"node": ">=v18.3.0"
+	},
+	"browserslist": [
+		"Chrome >= 60",
+		"Safari >= 12",
+		"iOS >= 12",
+		"Firefox >= 60",
+		"Edge >= 79"
+	],
+	"main": "src/index.js",
+	"type": "module",
+	"scripts": {
+		"freshlock": "rm -rf node_modules/ && rm .yarn/install-state.gz && rm -r .yarn/cache/ && rm yarn.lock && yarn",
+		"stylelint-check": "stylelint-config-prettier-check",
+		"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 ava",
+		"builddeps": "webpack --mode production --config server/deps/codemirror.webpack.js --progress",
+		"server": "webpack serve --mode development --config server/editor.webpack.js --hot --open"
+	},
+	"files": [
+		"src/**/*"
+	],
+	"keywords": [
+		"WYSIWYG",
+		"editor"
+	],
+	"devDependencies": {
+		"@babel/core": "^7.18.5",
+		"@babel/preset-env": "^7.18.2",
+		"@codemirror/lang-html": "^6.0.0",
+		"@fortawesome/fontawesome-free": "^6.1.1",
+		"@popperjs/core": "^2.11.5",
+		"ava": "^4.3.0",
+		"babel-loader": "^8.2.5",
+		"codemirror": "^6.0.0",
+		"css-loader": "^6.7.1",
+		"eslint": "^8.18.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-config-standard": "^17.0.0",
+		"eslint-plugin-import": "^2.26.0",
+		"eslint-plugin-n": "^15.2.3",
+		"eslint-plugin-promise": "^6.0.0",
+		"jsdom": "^20.0.0",
+		"mini-css-extract-plugin": "^2.6.1",
+		"postcss": "^8.4.14",
+		"prettier": "^2.7.1",
+		"sass": "^1.52.3",
+		"sass-loader": "^13.0.0",
+		"style-loader": "^3.3.1",
+		"stylelint": "^14.9.1",
+		"stylelint-config-prettier": "^9.0.3",
+		"stylelint-config-sass-guidelines": "^9.0.1",
+		"webpack": "^5.73.0",
+		"webpack-cli": "^4.10.0",
+		"webpack-dev-server": "^4.9.2"
+	},
+	"peerDependencies": {
+		"@codemirror/lang-html": "^6.0.0",
+		"@fortawesome/fontawesome-free": "^6.1.1",
+		"@popperjs/core": "^2.11.5",
+		"codemirror": "^6.0.0"
+	},
+	"packageManager": "yarn@3.2.1"
+}

package/readme.md

@@ -0,0 +1,34 @@
+[![npm version](https://badge.fury.io/js/@lesjoursfr%2Fedith.svg)](https://badge.fury.io/js/@lesjoursfr%2Fedith)
+[![Build Status](https://travis-ci.org/lesjoursfr/edith.svg?branch=master)](https://travis-ci.org/lesjoursfr/edith)
+
+# @lesjoursfr/edith
+
+Edith, simple WYSIWYG editor.
+
+# Requirements
+
+To work this library needs :
+
+-   [codemirror](https://www.npmjs.com/package/codemirror) **6.x**
+-   [@codemirror/lang-html](https://www.npmjs.com/package/@codemirror/lang-html) **6.x**
+-   [@popperjs/core](https://www.npmjs.com/package/@popperjs/core) **2.x**
+-   [@fortawesome/fontawesome-free](https://www.npmjs.com/package/@fortawesome/fontawesome-free) **6.x**
+
+# How to use
+
+```javascript
+import { Edith } from "@lesjoursfr/edith";
+
+/* Initialize the WYSIWYG Editor */
+new Edith(document.querySelector("#editor"), {
+	height: 200,
+	toolbar: [
+		["style", ["bold", "italic", "underline", "strikethrough", "subscript", "superscript", "nbsp", "clear"]],
+		/*** Other toolbar blocs ***/
+	],
+	buttons: {
+		/*** Extra buttons for the toolbar ***/
+	},
+	initialContent: "Optional initial content",
+});
+```

package/src/core/dom.js

@@ -0,0 +1,309 @@
+/**
+ * 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;
+}
+
+/**
+ * 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 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"])) {
+      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/edit.js

@@ -0,0 +1,255 @@
+import { getSelection, moveCursorInsideNode, moveCursorAfterNode, selectNodeContents } from "./range.js";
+import {
+  hasClass,
+  hasTagName,
+  cleanDomContent,
+  createNodeWith,
+  unwrapNode,
+  textifyNode,
+  removeEmptyTextNodes,
+  removeCommentNodes,
+} from "./dom.js";
+
+/**
+ * Split the node at the caret position.
+ * @param {Range} range the caret position
+ * @param {Node} 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;
+}
+
+/**
+ * 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
+ */
+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 false;
+
+  // 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 {Node} 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 false;
+
+  // Check if the range is collapsed
+  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 (!hasClass(parent, "edith-visual")) {
+    if (hasTagName(parent, tag)) {
+      // One of the parent has the same tag name : unwrap it
+      return unwrapNode(parent);
+    }
+
+    // Take the parent
+    parent = parent.parentNode;
+  }
+
+  // Try to replace all elements with the same tag name in the selection
+  let replaced = false;
+  for (const el of [...parent.getElementsByTagName(tag)]) {
+    // Check if the the Element Intersect the Selection
+    if (sel.containsNode(el, true)) {
+      unwrapNode(el);
+      replaced = true;
+    }
+  }
+  if (replaced) {
+    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);
+  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 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;
+  }
+
+  // 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.commonAncestorContainer.nodeType === Node.TEXT_NODE) {
+    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 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/src/core/event.js

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