@lesjoursfr/edith 2.0.1 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lesjoursfr/edith",
-	"version": "2.0.1",
+	"version": "2.1.0",
 	"description": "Simple WYSIWYG editor.",
 	"license": "MIT",
 	"repository": "lesjoursfr/edith",
@@ -32,7 +32,7 @@
 		"lint-js": "eslint . --fix --ext .js",
 		"lint-sass": "stylelint **/*.scss --fix",
 		"format": "prettier --write .",
-		"test": "npx ava",
+		"test": "npx mocha",
 		"builddeps": "webpack --mode production --config server/deps/codemirror.webpack.js --progress",
 		"server": "webpack serve --mode development --config server/editor.webpack.js --hot --open"
 	},
@@ -44,35 +44,35 @@
 		"editor"
 	],
 	"devDependencies": {
-		"@babel/core": "^7.22.5",
-		"@babel/preset-env": "^7.22.5",
-		"@codemirror/lang-html": "^6.4.5",
-		"@fortawesome/fontawesome-free": "^6.4.0",
+		"@babel/core": "^7.22.11",
+		"@babel/preset-env": "^7.22.14",
+		"@codemirror/lang-html": "^6.4.6",
+		"@fortawesome/fontawesome-free": "^6.4.2",
 		"@popperjs/core": "^2.11.8",
-		"ava": "^5.3.1",
-		"babel-loader": "^9.1.2",
+		"babel-loader": "^9.1.3",
 		"codemirror": "^6.0.1",
 		"css-loader": "^6.8.1",
-		"eslint": "^8.44.0",
-		"eslint-config-prettier": "^8.8.0",
+		"eslint": "^8.48.0",
+		"eslint-config-prettier": "^9.0.0",
 		"jsdom": "^22.1.0",
 		"mini-css-extract-plugin": "^2.7.6",
-		"postcss": "^8.4.24",
-		"prettier": "^2.8.8",
-		"sass": "^1.63.6",
+		"mocha": "^10.2.0",
+		"postcss": "^8.4.29",
+		"prettier": "^3.0.3",
+		"sass": "^1.66.1",
 		"sass-loader": "^13.3.2",
 		"style-loader": "^3.3.3",
-		"stylelint": "^15.9.0",
+		"stylelint": "^15.10.3",
 		"stylelint-config-sass-guidelines": "^10.0.0",
-		"webpack": "^5.88.1",
+		"webpack": "^5.88.2",
 		"webpack-cli": "^5.1.4",
 		"webpack-dev-server": "^4.15.1"
 	},
 	"peerDependencies": {
-		"@codemirror/lang-html": "^6.4.5",
-		"@fortawesome/fontawesome-free": "^6.4.0",
+		"@codemirror/lang-html": "^6.4.6",
+		"@fortawesome/fontawesome-free": "^6.4.2",
 		"@popperjs/core": "^2.11.8",
 		"codemirror": "^6.0.1"
 	},
-	"packageManager": "yarn@3.6.1"
+	"packageManager": "yarn@3.6.3"
 }

package/src/core/dom.js

@@ -76,7 +76,7 @@ export function replaceNodeWith(node, replacement) {
  * @returns {Array} its child nodes
  */
 export function unwrapNode(node) {
-  const newNodes = node.childNodes;
+  const newNodes = [...node.childNodes];
   node.replaceWith(...newNodes);
   return newNodes;
 }

package/src/core/edit.js

@@ -1,4 +1,4 @@
-import { getSelection, moveCursorInsideNode, moveCursorAfterNode, selectNodeContents } from "./range.js";
+import { getSelection, moveCursorInsideNode, moveCursorAfterNode, selectNodeContents, selectNodes } from "./range.js";
 import {
   hasClass,
   hasTagName,
@@ -43,6 +43,48 @@ function splitNodeAtCaret(range, node) {
   return textNode;
 }
 
+/**
+ * Extract the selection from the node.
+ * @param {Range} range the selection to extract
+ * @param {Node} node the node to split
+ * @param {String} tag the tag to remove
+ * @returns {Node} 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 = range.commonAncestorContainer;
+  while (current.tagName !== node.tagName) {
+    // Take the parent
+    current = current.parentNode;
+  }
+  let innerNodes = unwrapNode(current);
+
+  // Preserve the selection
+  selectNodes(innerNodes);
+
+  // Return the inserted TextNode
+  return range.commonAncestorContainer;
+}
+
 /**
  * Create a node at the caret position.
  * @param {Range} range the caret position
@@ -116,9 +158,11 @@ export function wrapInsideTag(tag, options = {}) {
   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;
@@ -142,8 +186,9 @@ export function wrapInsideTag(tag, options = {}) {
   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);
+      // One of the parent has the same tag name
+      // Extract the selection from the parent
+      return extractSelectionFromNode(range, parent);
     }
 
     // Take the parent
@@ -151,18 +196,18 @@ export function wrapInsideTag(tag, options = {}) {
   }
 
   // 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;
+      // Unwrap the node
+      let 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

package/src/core/range.js

@@ -1,3 +1,5 @@
+import { isSelfClosing } from "./dom.js";
+
 /**
  * @typedef {Object} CurrentSelection
  * @property {Selection} sel the current selection
@@ -63,6 +65,25 @@ export function selectNodeContents(target) {
   sel.addRange(range);
 }
 
+/**
+ * Select the given Nodes.
+ * @param {Array<Node>} nodes The list of Nodes to select.
+ */
+export function selectNodes(nodes) {
+  // Check if we just have a self-closing tag
+  if (nodes.length === 1 && 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 {Node} node the targeted node

package/src/ui/editor.js

@@ -50,6 +50,10 @@ EdithEditor.prototype.render = function () {
   this.editors.visual = document.createElement("div");
   this.editors.visual.setAttribute("class", "edith-visual");
   this.editors.visual.setAttribute("contenteditable", "true");
+  this.editors.visual.setAttribute(
+    "style",
+    this.resizable ? `min-height: ${this.height - 10}px` : `height: ${this.height - 10}px`
+  );
   this.editors.visual.innerHTML = this.content;
   this.editors.wrapper.append(this.editors.visual);
 
@@ -334,7 +338,7 @@ EdithEditor.prototype.onPasteEvent = function (e) {
 
     // Add the content as text nodes with a <br> node between each line
     for (let i = 0; i < lines.length; i++) {
-      if (frag.length !== 0) {
+      if (i !== 0) {
         frag.append(document.createElement("br"));
       }
       frag.append(document.createTextNode(lines[i]));