@lesjoursfr/edith 1.0.1 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lesjoursfr/edith",
-	"version": "1.0.1",
+	"version": "1.1.1",
 	"description": "Simple WYSIWYG editor.",
 	"license": "MIT",
 	"repository": "lesjoursfr/edith",
@@ -45,29 +45,29 @@
 		"editor"
 	],
 	"devDependencies": {
-		"@babel/core": "^7.20.5",
+		"@babel/core": "^7.20.12",
 		"@babel/preset-env": "^7.20.2",
 		"@codemirror/lang-html": "^6.4.0",
 		"@fortawesome/fontawesome-free": "^6.2.1",
 		"@popperjs/core": "^2.11.6",
 		"ava": "^5.1.0",
-		"babel-loader": "^9.1.0",
+		"babel-loader": "^9.1.2",
 		"codemirror": "^6.0.1",
 		"css-loader": "^6.7.3",
-		"eslint": "^8.30.0",
-		"eslint-config-prettier": "^8.5.0",
+		"eslint": "^8.31.0",
+		"eslint-config-prettier": "^8.6.0",
 		"eslint-config-standard": "^17.0.0",
 		"eslint-plugin-import": "^2.26.0",
-		"eslint-plugin-n": "^15.6.0",
+		"eslint-plugin-n": "^15.6.1",
 		"eslint-plugin-promise": "^6.1.1",
-		"jsdom": "^20.0.3",
+		"jsdom": "^21.0.0",
 		"mini-css-extract-plugin": "^2.7.2",
-		"postcss": "^8.4.20",
-		"prettier": "^2.8.1",
-		"sass": "^1.57.0",
+		"postcss": "^8.4.21",
+		"prettier": "^2.8.2",
+		"sass": "^1.57.1",
 		"sass-loader": "^13.2.0",
 		"style-loader": "^3.3.1",
-		"stylelint": "^14.16.0",
+		"stylelint": "^14.16.1",
 		"stylelint-config-prettier": "^9.0.4",
 		"stylelint-config-sass-guidelines": "^9.0.1",
 		"webpack": "^5.75.0",
@@ -80,5 +80,5 @@
 		"@popperjs/core": "^2.11.6",
 		"codemirror": "^6.0.1"
 	},
-	"packageManager": "yarn@3.3.0"
+	"packageManager": "yarn@3.3.1"
 }

package/src/core/dom.js

@@ -92,6 +92,31 @@ export function textifyNode(node) {
   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
@@ -105,6 +130,25 @@ export function removeNodes(node, callbackFn) {
   }
 }
 
+/**
+ * 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

package/src/core/edit.js

@@ -6,6 +6,8 @@ import {
   createNodeWith,
   unwrapNode,
   textifyNode,
+  isSelfClosing,
+  removeNodes,
   removeEmptyTextNodes,
   removeCommentNodes,
 } from "./dom.js";
@@ -167,6 +169,11 @@ export function wrapInsideTag(tag, options = {}) {
   const node = document.createElement(tag);
   node.appendChild(range.extractContents());
   range.insertNode(node);
+
+  // Remove empty tags
+  removeNodes(parent, (el) => !isSelfClosing(el.tagName) && el.textContent.length === 0);
+
+  // Return the node
   selectNodeContents(node);
   return node;
 }

package/src/core/event.js

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

package/src/index.js

@@ -1,5 +1,6 @@
 import { EdithEditor } from "./ui/editor.js";
 import { EdithButton, EdithButtons } from "./ui/button.js";
+import { Events } from "./core/event.js";
 
 /*
  * Represents an editor
@@ -43,6 +44,9 @@ function Edith(element, options) {
   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) {

package/src/ui/editor.js

@@ -1,6 +1,6 @@
 import { EditorView, basicSetup } from "codemirror";
 import { html } from "@codemirror/lang-html";
-import { hasClass, hasTagName } from "../core/dom.js";
+import { hasClass, hasTagName, createNodeWith, isSelfClosing, removeNodesRecursively } from "../core/dom.js";
 import {
   wrapInsideTag,
   replaceSelectionByHtml,
@@ -101,8 +101,15 @@ EdithEditor.prototype.getContent = function () {
     return "";
   }
 
+  // Remove empty tags
+  const placeholder = createNodeWith("div", { innerHTML: code });
+  removeNodesRecursively(
+    placeholder,
+    (el) => el.nodeType === Node.ELEMENT_NODE && !isSelfClosing(el.tagName) && el.textContent.length === 0
+  );
+
   // Return clean code
-  return code
+  return placeholder.innerHTML
     .replace(/\u200B/gi, "")
     .replace(/<\/p>\s*<p>/gi, "<br>")
     .replace(/(<p>|<\/p>)/gi, "")