@malaya_jeeva/rich-text-editor 1.0.8 → 1.0.10

package/dist/index.js

@@ -224,7 +224,42 @@ function getColorAtCursor(editor) {
   }
   return "#000000";
 }
+function sanitizeScriptTags(html) {
+  const div = document.createElement("div");
+  div.innerHTML = html;
+  div.querySelectorAll("script").forEach((script) => script.remove());
+  const riskyAttrs = [
+    "onabort",
+    "onblur",
+    "onchange",
+    "onclick",
+    "ondblclick",
+    "onerror",
+    "onfocus",
+    "onkeydown",
+    "onkeypress",
+    "onkeyup",
+    "onload",
+    "onmousedown",
+    "onmousemove",
+    "onmouseout",
+    "onmouseover",
+    "onmouseup",
+    "onresize",
+    "onscroll",
+    "onselect",
+    "onsubmit",
+    "onunload"
+  ];
+  div.querySelectorAll("*").forEach((el) => {
+    riskyAttrs.forEach((attr) => {
+      if (el.hasAttribute(attr)) el.removeAttribute(attr);
+    });
+  });
+  return div.innerHTML;
+}
 function prettifyHtml(html) {
+  const cleanHtml = sanitizeScriptTags(html);
   const INLINE = /* @__PURE__ */ new Set(["a", "b", "i", "u", "em", "strong", "span", "code", "br", "small", "sub", "sup"]);
   let indent = 0;
   const pad = () => "  ".repeat(indent);
@@ -1207,16 +1242,28 @@ function RichTextEditor({ value, onChange, toolbar }) {
     else setLinkInfoFP(null);
     const txt = (_b = (_a2 = editorRef.current) == null ? void 0 : _a2.innerText) != null ? _b : "";
     setWords(txt.trim() ? txt.trim().split(/\s+/).length : 0);
-    onChange == null ? void 0 : onChange((_d = (_c = editorRef.current) == null ? void 0 : _c.innerHTML) != null ? _d : "");
-  }, [onChange, calcFloat, linkBar]);
+    onChange == null ? void 0 : onChange(sanitizeScriptTags((_d = (_c = editorRef.current) == null ? void 0 : _c.innerHTML) != null ? _d : ""));
+  }, [onChange, calcFloat, linkBar, sanitizeScriptTags]);
+  const fixListInParagraph = (0, import_react5.useCallback)(() => {
+    var _a2;
+    (_a2 = editorRef.current) == null ? void 0 : _a2.querySelectorAll("p > ol, p > ul").forEach((list) => {
+      var _a3;
+      const p = list.parentElement;
+      p.insertAdjacentElement("afterend", list);
+      if (!((_a3 = p.textContent) == null ? void 0 : _a3.trim()) && !p.querySelector("img, br")) p.remove();
+    });
+  }, []);
   const exec = (0, import_react5.useCallback)((cmd, val = null) => {
     var _a2;
     (_a2 = editorRef.current) == null ? void 0 : _a2.focus();
     document.execCommand(cmd, false, val != null ? val : void 0);
     fixFontTags();
     fixListNesting();
+    if (cmd === "insertUnorderedList" || cmd === "insertOrderedList") {
+      fixListInParagraph();
+    }
     refresh();
-  }, [fixFontTags, fixListNesting, refresh]);
+  }, [fixFontTags, fixListNesting, fixListInParagraph, refresh]);
   const insertImage = (0, import_react5.useCallback)((src) => {
     var _a2;
     (_a2 = editorRef.current) == null ? void 0 : _a2.focus();
@@ -1263,6 +1310,16 @@ function RichTextEditor({ value, onChange, toolbar }) {
     var _a2, _b;
     clearSelection();
     clearImageSel();
+    if (!e.ctrlKey && !e.metaKey && !e.altKey && e.key.length === 1) {
+      const sel = window.getSelection();
+      if (sel == null ? void 0 : sel.rangeCount) {
+        const anchor = sel.anchorNode;
+        const parent = (anchor == null ? void 0 : anchor.nodeType) === Node.TEXT_NODE ? anchor.parentElement : anchor;
+        if (parent === editorRef.current) {
+          document.execCommand("formatBlock", false, fmt.block || "p");
+        }
+      }
+    }
     if (e.key === "Tab") {
       e.preventDefault();
       const cell = getCurrentCell();
@@ -1294,7 +1351,7 @@ function RichTextEditor({ value, onChange, toolbar }) {
         exec("underline");
       }
     }
-  }, [exec, clearSelection, clearImageSel]);
+  }, [exec, clearSelection, clearImageSel, fmt.block]);
   const insertTable = (rows, cols) => {
     var _a2;
     (_a2 = editorRef.current) == null ? void 0 : _a2.focus();
@@ -1449,7 +1506,7 @@ function RichTextEditor({ value, onChange, toolbar }) {
     setIsCode(true);
   };
   const toVisual = () => {
-    if (editorRef.current) editorRef.current.innerHTML = codeVal;
+    if (editorRef.current) editorRef.current.innerHTML = sanitizeScriptTags(codeVal);
     setIsCode(false);
     refresh();
   };
@@ -1460,7 +1517,8 @@ function RichTextEditor({ value, onChange, toolbar }) {
   };
   (0, import_react5.useEffect)(() => {
     if (editorRef.current) {
-      editorRef.current.innerHTML = value != null ? value : "<p>Start writing here...</p>";
+      document.execCommand("defaultParagraphSeparator", false, "p");
+      editorRef.current.innerHTML = sanitizeScriptTags(value != null ? value : "<p>Start writing here...</p>");
       refresh();
     }
   }, []);

package/dist/index.mjs

@@ -203,7 +203,42 @@ function getColorAtCursor(editor) {
   }
   return "#000000";
 }
+function sanitizeScriptTags(html) {
+  const div = document.createElement("div");
+  div.innerHTML = html;
+  div.querySelectorAll("script").forEach((script) => script.remove());
+  const riskyAttrs = [
+    "onabort",
+    "onblur",
+    "onchange",
+    "onclick",
+    "ondblclick",
+    "onerror",
+    "onfocus",
+    "onkeydown",
+    "onkeypress",
+    "onkeyup",
+    "onload",
+    "onmousedown",
+    "onmousemove",
+    "onmouseout",
+    "onmouseover",
+    "onmouseup",
+    "onresize",
+    "onscroll",
+    "onselect",
+    "onsubmit",
+    "onunload"
+  ];
+  div.querySelectorAll("*").forEach((el) => {
+    riskyAttrs.forEach((attr) => {
+      if (el.hasAttribute(attr)) el.removeAttribute(attr);
+    });
+  });
+  return div.innerHTML;
+}
 function prettifyHtml(html) {
+  const cleanHtml = sanitizeScriptTags(html);
   const INLINE = /* @__PURE__ */ new Set(["a", "b", "i", "u", "em", "strong", "span", "code", "br", "small", "sub", "sup"]);
   let indent = 0;
   const pad = () => "  ".repeat(indent);
@@ -1186,16 +1221,28 @@ function RichTextEditor({ value, onChange, toolbar }) {
     else setLinkInfoFP(null);
     const txt = (_b = (_a2 = editorRef.current) == null ? void 0 : _a2.innerText) != null ? _b : "";
     setWords(txt.trim() ? txt.trim().split(/\s+/).length : 0);
-    onChange == null ? void 0 : onChange((_d = (_c = editorRef.current) == null ? void 0 : _c.innerHTML) != null ? _d : "");
-  }, [onChange, calcFloat, linkBar]);
+    onChange == null ? void 0 : onChange(sanitizeScriptTags((_d = (_c = editorRef.current) == null ? void 0 : _c.innerHTML) != null ? _d : ""));
+  }, [onChange, calcFloat, linkBar, sanitizeScriptTags]);
+  const fixListInParagraph = useCallback3(() => {
+    var _a2;
+    (_a2 = editorRef.current) == null ? void 0 : _a2.querySelectorAll("p > ol, p > ul").forEach((list) => {
+      var _a3;
+      const p = list.parentElement;
+      p.insertAdjacentElement("afterend", list);
+      if (!((_a3 = p.textContent) == null ? void 0 : _a3.trim()) && !p.querySelector("img, br")) p.remove();
+    });
+  }, []);
   const exec = useCallback3((cmd, val = null) => {
     var _a2;
     (_a2 = editorRef.current) == null ? void 0 : _a2.focus();
     document.execCommand(cmd, false, val != null ? val : void 0);
     fixFontTags();
     fixListNesting();
+    if (cmd === "insertUnorderedList" || cmd === "insertOrderedList") {
+      fixListInParagraph();
+    }
     refresh();
-  }, [fixFontTags, fixListNesting, refresh]);
+  }, [fixFontTags, fixListNesting, fixListInParagraph, refresh]);
   const insertImage = useCallback3((src) => {
     var _a2;
     (_a2 = editorRef.current) == null ? void 0 : _a2.focus();
@@ -1242,6 +1289,16 @@ function RichTextEditor({ value, onChange, toolbar }) {
     var _a2, _b;
     clearSelection();
     clearImageSel();
+    if (!e.ctrlKey && !e.metaKey && !e.altKey && e.key.length === 1) {
+      const sel = window.getSelection();
+      if (sel == null ? void 0 : sel.rangeCount) {
+        const anchor = sel.anchorNode;
+        const parent = (anchor == null ? void 0 : anchor.nodeType) === Node.TEXT_NODE ? anchor.parentElement : anchor;
+        if (parent === editorRef.current) {
+          document.execCommand("formatBlock", false, fmt.block || "p");
+        }
+      }
+    }
     if (e.key === "Tab") {
       e.preventDefault();
       const cell = getCurrentCell();
@@ -1273,7 +1330,7 @@ function RichTextEditor({ value, onChange, toolbar }) {
         exec("underline");
       }
     }
-  }, [exec, clearSelection, clearImageSel]);
+  }, [exec, clearSelection, clearImageSel, fmt.block]);
   const insertTable = (rows, cols) => {
     var _a2;
     (_a2 = editorRef.current) == null ? void 0 : _a2.focus();
@@ -1428,7 +1485,7 @@ function RichTextEditor({ value, onChange, toolbar }) {
     setIsCode(true);
   };
   const toVisual = () => {
-    if (editorRef.current) editorRef.current.innerHTML = codeVal;
+    if (editorRef.current) editorRef.current.innerHTML = sanitizeScriptTags(codeVal);
     setIsCode(false);
     refresh();
   };
@@ -1439,7 +1496,8 @@ function RichTextEditor({ value, onChange, toolbar }) {
   };
   useEffect3(() => {
     if (editorRef.current) {
-      editorRef.current.innerHTML = value != null ? value : "<p>Start writing here...</p>";
+      document.execCommand("defaultParagraphSeparator", false, "p");
+      editorRef.current.innerHTML = sanitizeScriptTags(value != null ? value : "<p>Start writing here...</p>");
       refresh();
     }
   }, []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malaya_jeeva/rich-text-editor",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "Custom React Rich Text Editor",
   "main": "dist/index.js",
   "module": "dist/index.mjs",