@antscorp/antsomi-ui 1.3.7-beta.25 → 1.3.7-beta.26

package/es/components/organism/TextEditor/TextEditor.js

@@ -9,7 +9,7 @@ import { Selection, Focus } from '@tiptap/extensions';
 import { useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import clsx from 'clsx';
-import { isBoolean, omit } from 'lodash';
+import { isBoolean } from 'lodash';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 import { DEFAULT_TEXT_STYLE } from './constants';
@@ -23,6 +23,7 @@ import { Indent } from './extensions/Indent';
 import { LetterSpacing } from './extensions/LetterSpacing';
 import { LineHeight } from './extensions/LineHeight';
 import { CustomLink } from './extensions/Link';
+import { CustomListItem } from './extensions/ListItem';
 import { CustomOrderedList } from './extensions/OrderedList';
 import { SmartTag } from './extensions/SmartTag';
 import { TextTransform } from './extensions/TextTransform';
@@ -104,15 +105,12 @@ const TextEditorInternal = memo(forwardRef((props, ref) => {
                 link: false,
                 bulletList: false,
                 orderedList: false,
-                listItem: {
-                    HTMLAttributes: {
-                        style: 'line-height:normal;',
-                    },
-                },
+                listItem: false,
                 undoRedo: {
                     depth: 100,
                 },
             }),
+            CustomListItem,
             CustomUnorderedList,
             CustomOrderedList,
             FontWeight.configure({
@@ -307,7 +305,7 @@ const TextEditorInternal = memo(forwardRef((props, ref) => {
     }
     return (_jsxs(_Fragment, { children: [_jsx(StyledEditorContent, { className: clsx(`${ANTSOMI_COMPONENT_PREFIX_CLS}-text-editor`, className), "$textStyle": defaultTextStyle, style: {
                     // Inline styles apply to inner html elements (support email client)
-                    ...omit(defaultTextStyle, ['fontSize']),
+                    ...defaultTextStyle,
                     ...style,
                 }, id: id, ref: contentRef, editor: editor, ...dataAttributes }), _jsx(LinkPopover, { editor: editor }), !linkFormVisible && (_jsxs(_Fragment, { children: [_jsx(BubbleMenu, { pluginKey: "linkPreviewBubbleMenu", ...bubbleMenuProps, appendTo: bubbleMenuContainer.current, editor: editor, shouldShow: shouldShowLinkPreview, children: _jsx(LinkPreviewToolbar, { editor: editor, linkHanlder: {
                                 onUpsert: () => {

package/es/components/organism/TextEditor/extensions/ListItem.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Custom ListItem extension that extends the default TipTap ListItem
+ * with custom Backspace behavior to prevent merging paragraphs into lists
+ *
+ * This extension only overrides keyboard shortcuts while maintaining
+ * all other default ListItem functionality (HTML parsing, rendering, etc.)
+ *
+ * @see https://www.tiptap.dev/api/nodes/list-item
+ */
+export declare const CustomListItem: import("@tiptap/core").Node<import("@tiptap/extension-list").ListItemOptions, any>;

package/es/components/organism/TextEditor/extensions/ListItem.js

@@ -0,0 +1,93 @@
+import { ListItem } from '@tiptap/extension-list-item';
+/**
+ * Custom ListItem extension that extends the default TipTap ListItem
+ * with custom Backspace behavior to prevent merging paragraphs into lists
+ *
+ * This extension only overrides keyboard shortcuts while maintaining
+ * all other default ListItem functionality (HTML parsing, rendering, etc.)
+ *
+ * @see https://www.tiptap.dev/api/nodes/list-item
+ */
+export const CustomListItem = ListItem.extend({
+    addOptions() {
+        return {
+            HTMLAttributes: {
+                style: 'line-height:normal;',
+            },
+            bulletListTypeName: 'customUnorderedList',
+            orderedListTypeName: 'customOrderedList',
+        };
+    },
+    addKeyboardShortcuts() {
+        return {
+            // Keep default keyboard shortcuts from parent ListItem
+            Enter: () => this.editor.commands.splitListItem(this.name),
+            Tab: () => this.editor.commands.sinkListItem(this.name),
+            'Shift-Tab': () => this.editor.commands.liftListItem(this.name),
+            /**
+             * Custom Backspace handler to prevent merging empty paragraphs into lists
+             *
+             * Behavior:
+             * 1. Check if cursor is at the start of a paragraph
+             * 2. Check if the node before is a list (ordered or unordered)
+             * 3. If both conditions are true and paragraph is empty, delete the paragraph
+             * 4. Otherwise, use default backspace behavior
+             */
+            Backspace: () => {
+                const { state } = this.editor;
+                const { selection } = state;
+                const { $from, empty } = selection;
+                // Only handle if selection is empty (cursor position, not text selection)
+                if (!empty) {
+                    return false;
+                }
+                // Check if cursor is at the start of current node
+                const isAtStart = $from.parentOffset === 0;
+                if (!isAtStart) {
+                    return false;
+                }
+                // Get current node (should be a paragraph)
+                const currentNode = $from.parent;
+                // Only handle paragraphs
+                if (currentNode.type.name !== 'paragraph') {
+                    return false;
+                }
+                // Get the index of current paragraph in its parent (usually doc)
+                const paragraphDepth = $from.depth;
+                const indexInParent = $from.index(paragraphDepth - 1);
+                // Check if there's a node before (index > 0)
+                if (indexInParent === 0) {
+                    return false;
+                }
+                // Get parent node (usually doc) and the node before current paragraph
+                const parent = $from.node(paragraphDepth - 1);
+                const nodeBefore = parent.child(indexInParent - 1);
+                if (!nodeBefore) {
+                    return false;
+                }
+                // Check if the node before is a list (ordered or unordered)
+                const isListBefore = nodeBefore.type.name === this.options.orderedListTypeName ||
+                    nodeBefore.type.name === this.options.bulletListTypeName;
+                if (!isListBefore) {
+                    return false;
+                }
+                // Check if current paragraph is empty
+                const isParagraphEmpty = currentNode.content.size === 0;
+                if (!isParagraphEmpty) {
+                    // If paragraph has content, allow default backspace to handle
+                    return false;
+                }
+                // Calculate the exact positions of the paragraph node
+                // We need to delete from the position before the paragraph open tag
+                // to the position after the paragraph close tag
+                const paragraphPos = $from.before();
+                const paragraphEndPos = $from.after();
+                // Delete the entire paragraph node using deleteRange
+                return this.editor.commands.deleteRange({
+                    from: paragraphPos,
+                    to: paragraphEndPos,
+                });
+            },
+        };
+    },
+});

package/es/components/organism/TextEditor/styled.js

@@ -12,6 +12,7 @@ export const StyledEditorContent = styled(EditorContent) `
 
       // Some apps have global p styles, so we need to override it
 
+      font-size: ${p => p.$textStyle.fontSize};
       line-height: ${p => p.$textStyle.lineHeight};
       font-family: ${p => p.$textStyle.fontFamily};
       color: ${p => p.$textStyle.color};

package/es/components/organism/TextEditor/ui/TextAlignSelect/TextAlignSelect.js

@@ -52,9 +52,7 @@ export const TextAlignSelect = (props) => {
         editor: editor,
         selector: ({ editor: editorInstance }) => {
             const alignment = ['left', 'center', 'right', 'justify'].find(alignment => editorInstance?.isActive({ textAlign: alignment }));
-            return {
-                currentAlignment: alignment || 'left',
-            };
+            return { currentAlignment: alignment };
         },
     });
     const selectedOption = useMemo(() => textAlignOptions.find(option => option.value === currentAlignment), [currentAlignment]);

package/es/components/organism/TextEditor/ui/Toolbar/actions/FontSizeAction.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useTextEditorStore } from '../../../provider';
 import { FontSizeInput, } from '@antscorp/antsomi-ui/es/components/molecules';
 import styled from 'styled-components';
-import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useThrottledCallback } from 'use-debounce';
 import { useEditorState } from '@tiptap/react';
 import { toString } from 'lodash';
@@ -30,6 +30,11 @@ export const FontSizeAction = memo(({ editor, throttled = 100, defaultFontSize =
         },
     });
     const [currentFontSize, setCurrentFontSize] = useState(numberFontSize);
+    useEffect(() => {
+        if (numberFontSize) {
+            setCurrentFontSize(numberFontSize);
+        }
+    }, [numberFontSize]);
     const updateEditorFontSize = useThrottledCallback((v) => {
         if (v === numberFontSize)
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.7-beta.25",
+  "version": "1.3.7-beta.26",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",