kamotive_ui 19.3.26 → 20.3.26

package/dist/components/TextEditor/TextEditor.js

@@ -184,12 +184,16 @@ export const TextEditor = ({ defaultValue, attachedFiles, label, onSubmit, onCan
         }
         const range = selection.getRangeAt(0);
         const element = getElementFromRange(range);
+        const isInH2 = element ? checkFormatting(element, ['H2']) : false;
+        const isBold = isInH2
+            ? (element ? checkFormatting(element, ['B', 'STRONG']) : false)
+            : document.queryCommandState('bold');
         const newStates = {
-            bold: document.queryCommandState('bold'),
+            bold: isBold,
             italic: document.queryCommandState('italic'),
             underline: document.queryCommandState('underline'),
             strikethrough: document.queryCommandState('strikethrough'),
-            heading2: element ? checkFormatting(element, ['H2']) : false,
+            heading2: isInH2,
             olist: element ? (checkFormatting(element, ['OL']) || !!element.closest('ol')) : false,
         };
         setActiveStates(newStates);
@@ -222,7 +226,9 @@ export const TextEditor = ({ defaultValue, attachedFiles, label, onSubmit, onCan
         }
         if (h2Element) {
             const div = document.createElement('div');
-            div.innerHTML = h2Element.innerHTML;
+            while (h2Element.firstChild) {
+                div.appendChild(h2Element.firstChild);
+            }
             const rangeOffset = range.startOffset;
             const textNode = range.startContainer;
             (_a = h2Element.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(div, h2Element);
@@ -482,6 +488,52 @@ export const TextEditor = ({ defaultValue, attachedFiles, label, onSubmit, onCan
         setEditorHtml(defaultValue || '');
         setTimeout(setCursorToEnd, 0);
     }, [defaultValue]);
+    const handleBoldToggle = () => {
+        var _a, _b;
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        const range = getSafeRange();
+        if (!range)
+            return;
+        const element = getElementFromRange(range);
+        const isInH2 = element ? checkFormatting(element, ['H2']) : false;
+        if (!isInH2) {
+            document.execCommand('bold', false, undefined);
+            return;
+        }
+        const hasBold = element ? checkFormatting(element, ['B', 'STRONG']) : false;
+        if (hasBold) {
+            document.execCommand('bold', false, undefined);
+        }
+        else if (!range.collapsed) {
+            try {
+                const b = document.createElement('b');
+                range.surroundContents(b);
+                const newRange = document.createRange();
+                newRange.selectNodeContents(b);
+                newRange.collapse(false);
+                selection.removeAllRanges();
+                selection.addRange(newRange);
+                (_a = pellRef.current) === null || _a === void 0 ? void 0 : _a.content.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+            catch (_c) {
+                document.execCommand('insertHTML', false, `<b>${range.toString()}</b>`);
+            }
+        }
+        else {
+            const b = document.createElement('b');
+            const zws = document.createTextNode('\u200B');
+            b.appendChild(zws);
+            range.insertNode(b);
+            const newRange = document.createRange();
+            newRange.setStart(zws, 1);
+            newRange.collapse(true);
+            selection.removeAllRanges();
+            selection.addRange(newRange);
+            (_b = pellRef.current) === null || _b === void 0 ? void 0 : _b.content.dispatchEvent(new Event('input', { bubbles: true }));
+        }
+    };
     const setupToolbar = (pellEditor) => {
         if (!editorRef.current)
             return;
@@ -533,7 +585,10 @@ export const TextEditor = ({ defaultValue, attachedFiles, label, onSubmit, onCan
                 htmlButton.addEventListener('mousedown', (e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                    if (command === 'heading2') {
+                    if (command === 'bold') {
+                        handleBoldToggle();
+                    }
+                    else if (command === 'heading2') {
                         toggleHeading2();
                     }
                     else if (command === 'olist') {
@@ -567,8 +622,9 @@ export const TextEditor = ({ defaultValue, attachedFiles, label, onSubmit, onCan
         (_a = uploaderRef.current) === null || _a === void 0 ? void 0 : _a.click();
     };
     const handleEditorChange = useCallback((html) => {
-        setEditorHtml(html);
-        redoContentRef.current = html;
+        const cleanHtml = html.replace(/\u200B/g, '');
+        setEditorHtml(cleanHtml);
+        redoContentRef.current = cleanHtml;
         updateActiveStates();
     }, [updateActiveStates]);
     useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kamotive_ui",
-  "version": "19.3.26",
+  "version": "20.3.26",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [