@malaya_jeeva/rich-text-editor 1.0.9 → 1.0.10

package/dist/index.js

@@ -1244,14 +1244,26 @@ function RichTextEditor({ value, onChange, toolbar }) {
     setWords(txt.trim() ? txt.trim().split(/\s+/).length : 0);
     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();
@@ -1298,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();
@@ -1329,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();
@@ -1495,6 +1517,7 @@ function RichTextEditor({ value, onChange, toolbar }) {
   };
   (0, import_react5.useEffect)(() => {
     if (editorRef.current) {
+      document.execCommand("defaultParagraphSeparator", false, "p");
       editorRef.current.innerHTML = sanitizeScriptTags(value != null ? value : "<p>Start writing here...</p>");
       refresh();
     }

package/dist/index.mjs

@@ -1223,14 +1223,26 @@ function RichTextEditor({ value, onChange, toolbar }) {
     setWords(txt.trim() ? txt.trim().split(/\s+/).length : 0);
     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();
@@ -1277,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();
@@ -1308,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();
@@ -1474,6 +1496,7 @@ function RichTextEditor({ value, onChange, toolbar }) {
   };
   useEffect3(() => {
     if (editorRef.current) {
+      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.9",
+  "version": "1.0.10",
   "description": "Custom React Rich Text Editor",
   "main": "dist/index.js",
   "module": "dist/index.mjs",