@lesjoursfr/edith 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lesjoursfr/edith",
-	"version": "1.1.0",
+	"version": "1.1.2",
 	"description": "Simple WYSIWYG editor.",
 	"license": "MIT",
 	"repository": "lesjoursfr/edith",
@@ -47,23 +47,23 @@
 	"devDependencies": {
 		"@babel/core": "^7.20.12",
 		"@babel/preset-env": "^7.20.2",
-		"@codemirror/lang-html": "^6.4.0",
+		"@codemirror/lang-html": "^6.4.1",
 		"@fortawesome/fontawesome-free": "^6.2.1",
 		"@popperjs/core": "^2.11.6",
-		"ava": "^5.1.0",
+		"ava": "^5.1.1",
 		"babel-loader": "^9.1.2",
 		"codemirror": "^6.0.1",
 		"css-loader": "^6.7.3",
-		"eslint": "^8.31.0",
+		"eslint": "^8.32.0",
 		"eslint-config-prettier": "^8.6.0",
 		"eslint-config-standard": "^17.0.0",
-		"eslint-plugin-import": "^2.26.0",
+		"eslint-plugin-import": "^2.27.4",
 		"eslint-plugin-n": "^15.6.1",
 		"eslint-plugin-promise": "^6.1.1",
 		"jsdom": "^21.0.0",
 		"mini-css-extract-plugin": "^2.7.2",
 		"postcss": "^8.4.21",
-		"prettier": "^2.8.2",
+		"prettier": "^2.8.3",
 		"sass": "^1.57.1",
 		"sass-loader": "^13.2.0",
 		"style-loader": "^3.3.1",
@@ -75,7 +75,7 @@
 		"webpack-dev-server": "^4.11.1"
 	},
 	"peerDependencies": {
-		"@codemirror/lang-html": "^6.4.0",
+		"@codemirror/lang-html": "^6.4.1",
 		"@fortawesome/fontawesome-free": "^6.2.1",
 		"@popperjs/core": "^2.11.6",
 		"codemirror": "^6.0.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

package/src/core/edit.js

@@ -6,6 +6,7 @@ import {
   createNodeWith,
   unwrapNode,
   textifyNode,
+  isSelfClosing,
   removeNodes,
   removeEmptyTextNodes,
   removeCommentNodes,
@@ -170,7 +171,7 @@ export function wrapInsideTag(tag, options = {}) {
   range.insertNode(node);
 
   // Remove empty tags
-  removeNodes(parent, (el) => el.textContent.length === 0);
+  removeNodes(parent, (el) => !isSelfClosing(el.tagName) && el.textContent.length === 0);
 
   // Return the node
   selectNodeContents(node);

package/src/ui/editor.js

@@ -1,6 +1,6 @@
 import { EditorView, basicSetup } from "codemirror";
 import { html } from "@codemirror/lang-html";
-import { hasClass, hasTagName, createNodeWith, removeNodesRecursively } from "../core/dom.js";
+import { hasClass, hasTagName, createNodeWith, isSelfClosing, removeNodesRecursively } from "../core/dom.js";
 import {
   wrapInsideTag,
   replaceSelectionByHtml,
@@ -32,9 +32,9 @@ function EdithEditor(ctx, options) {
 
 EdithEditor.prototype.render = function () {
   // Create a wrapper for the editor
-  const editorWrapper = document.createElement("div");
-  editorWrapper.setAttribute("class", "edith-editing-area");
-  editorWrapper.setAttribute(
+  this.editors.wrapper = document.createElement("div");
+  this.editors.wrapper.setAttribute("class", "edith-editing-area");
+  this.editors.wrapper.setAttribute(
     "style",
     this.resizable ? `min-height: ${this.height}px; resize: vertical` : `height: ${this.height}px`
   );
@@ -44,12 +44,12 @@ EdithEditor.prototype.render = function () {
   this.editors.visual.setAttribute("class", "edith-visual");
   this.editors.visual.setAttribute("contenteditable", "true");
   this.editors.visual.innerHTML = this.content;
-  editorWrapper.append(this.editors.visual);
+  this.editors.wrapper.append(this.editors.visual);
 
   // Create the code editor
   this.editors.code = document.createElement("div");
   this.editors.code.setAttribute("class", "edith-code edith-hidden");
-  editorWrapper.append(this.editors.code);
+  this.editors.wrapper.append(this.editors.code);
 
   // Bind events
   const keyEventsListener = this.onKeyEvent.bind(this);
@@ -59,7 +59,7 @@ EdithEditor.prototype.render = function () {
   this.editors.visual.addEventListener("paste", pasteEventListener);
 
   // Return the wrapper
-  return editorWrapper;
+  return this.editors.wrapper;
 };
 
 EdithEditor.prototype.getVisualEditorElement = function () {
@@ -103,7 +103,10 @@ EdithEditor.prototype.getContent = function () {
 
   // Remove empty tags
   const placeholder = createNodeWith("div", { innerHTML: code });
-  removeNodesRecursively(placeholder, (el) => el.nodeType === Node.ELEMENT_NODE && el.textContent.length === 0);
+  removeNodesRecursively(
+    placeholder,
+    (el) => el.nodeType === Node.ELEMENT_NODE && !isSelfClosing(el.tagName) && el.textContent.length === 0
+  );
 
   // Return clean code
   return placeholder.innerHTML
@@ -353,16 +356,14 @@ EdithEditor.prototype.onPasteEvent = function (e) {
 };
 
 EdithEditor.prototype.destroy = function () {
-  // Check the current mode
-  if (this.mode === EditorModes.Visual) {
-    // Remove the visual editor
-    this.editors.visual.remove();
-  } else {
-    // Remove the code editor
+  if (this.mode === EditorModes.Code) {
     this.codeMirror.destroy();
     this.codeMirror = null;
-    this.editors.code.remove();
   }
+
+  // Remove editors from the DOM
+  this.editors.wrapper.remove();
+  this.editors = {};
 };
 
 export { EdithEditor };