@antscorp/antsomi-ui 2.0.112 → 2.0.114

package/es/components/icons/QRCodeManagementIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './types';
+export declare const QRCodeManagementIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/QRCodeManagementIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const QRCodeManagementIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("g", { children: _jsx("path", { d: "M2.604 7.3118V2.60425H7.31156V4.16675H4.1665V7.3118H2.604ZM2.604 22.3959V17.6884H4.1665V20.8334H7.31156V22.3959H2.604ZM17.6881 22.3959V20.8334H20.8332V17.6884H22.3957V22.3959H17.6881ZM20.8332 7.3118V4.16675H17.6881V2.60425H22.3957V7.3118H20.8332ZM17.9386 17.9389H19.3509V19.3511H17.9386V17.9389ZM17.9386 15.1141H19.3509V16.5264H17.9386V15.1141ZM16.5261 16.5264H17.9386V17.9389H16.5261V16.5264ZM15.1139 17.9389H16.5261V19.3511H15.1139V17.9389ZM13.7017 16.5264H15.1139V17.9389H13.7017V16.5264ZM16.5261 13.7019H17.9386V15.1141H16.5261V13.7019ZM15.1139 15.1141H16.5261V16.5264H15.1139V15.1141ZM13.7017 13.7019H15.1139V15.1141H13.7017V13.7019ZM19.3509 5.64904V11.2983H13.7017V5.64904H19.3509ZM11.298 13.7019V19.3511H5.6488V13.7019H11.298ZM11.298 5.64904V11.2983H5.6488V5.64904H11.298ZM10.0558 18.1089V14.9441H6.89098V18.1089H10.0558ZM10.0558 10.0561V6.89123H6.89098V10.0561H10.0558ZM18.1087 10.0561V6.89123H14.9438V10.0561H18.1087Z", fill: "currentColor" }) }) }));
+});

package/es/components/icons/QRSetDashboardIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './types';
+export declare const QRSetDashboardIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/QRSetDashboardIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const QRSetDashboardIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 18 18", width: width, height: height, ref: ref, ...props, children: _jsx("path", { fill: "currentColor", d: "M10 18v-2h2v2zm-2-2v-5h2v5zm8-3V9h2v4zm-2-4V7h2v2zM2 11V9h2v2zM0 9V7h2v2zm9-7V0h2v2zM1.5 4.5h3v-3h-3zM0 6V0h6v6zm1.5 10.5h3v-3h-3zM0 18v-6h6v6zM13.5 4.5h3v-3h-3zM12 6V0h6v6zm2 12v-3h-2v-2h4v3h2v2zm-4-7V9h4v2zm-4 0V9H4V7h6v2H8v2zm1-5V2h2v2h2v2zM2.25 3.75v-1.5h1.5v1.5zm0 12v-1.5h1.5v1.5zm12-12v-1.5h1.5v1.5z" }) }));
+});

package/es/components/icons/index.d.ts

@@ -401,3 +401,5 @@ export { WebIcon } from './WebIcon';
 export { WebPersonalizationIcon } from './WebPersonalizationIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';
+export { QRCodeManagementIcon } from './QRCodeManagementIcon';
+export { QRSetDashboardIcon } from './QRSetDashboardIcon';

package/es/components/icons/index.js

@@ -401,3 +401,5 @@ export { WebIcon } from './WebIcon';
 export { WebPersonalizationIcon } from './WebPersonalizationIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';
+export { QRCodeManagementIcon } from './QRCodeManagementIcon';
+export { QRSetDashboardIcon } from './QRSetDashboardIcon';

package/es/components/molecules/ColorPicker/index.d.ts

@@ -6,8 +6,10 @@ export interface ColorPickerProps {
     defaultColor?: string;
     icon?: React.ReactNode | string;
     onChange?: (color: string) => void;
+    onAfterClosePicker?: (color: string) => void;
     showInput?: boolean;
     positionInput?: 'right' | 'left';
     style?: React.CSSProperties;
+    inputProps?: any;
 }
 export declare const ColorPicker: React.FC<ColorPickerProps>;

package/es/components/molecules/ColorPicker/index.js

@@ -22,8 +22,8 @@ const styleBtnColor = {
 };
 export const ColorPicker = props => {
     // Props
-    const { className = '', defaultColor = '#000000', presetColors, positionInput = 'left', icon, showInput = true, style = {}, } = props;
-    const { onChange = () => { } } = props;
+    const { className = '', defaultColor = '#000000', presetColors, positionInput = 'left', icon, showInput = true, style = {}, inputProps = {}, } = props;
+    const { onChange = () => { }, onAfterClosePicker = () => { } } = props;
     // States
     const [color, setColor] = useState(defaultColor);
     const [popoverVisible, setPopoverVisible] = useState(false);
@@ -71,7 +71,12 @@ export const ColorPicker = props => {
     const onPopoverVisibleChange = visible => {
         setPopoverVisible(visible);
     };
-    return (_jsxs(ColorPickerWrapper, { className: `antsomi-color-picker ${className || ''}`, style: style, children: [showInput && positionInput === 'left' && (_jsx(Input, { style: { textTransform: 'uppercase' }, value: color, onChange: onChangeColorInput })), _jsx(Popover, { arrow: true, content: _jsx(CustomPicker, { color: color, presetColors: presetColors, onChange: onChangeColorPicker, onChangeComplete: onChangeComplete }), trigger: "click", open: popoverVisible, getPopupContainer: triggerNode => triggerNode, onOpenChange: onPopoverVisibleChange, children: _jsx("div", { className: "antsomi-popover-button", style: styleBtnColor, children: iconNode || (_jsx("span", { style: {
+    const handleAfterOpenChange = (visible) => {
+        if (!visible && typeof onAfterClosePicker === 'function') {
+            onAfterClosePicker(color);
+        }
+    };
+    return (_jsxs(ColorPickerWrapper, { className: `antsomi-color-picker ${className || ''}`, style: style, children: [showInput && positionInput === 'left' && (_jsx(Input, { style: { textTransform: 'uppercase' }, value: color, onChange: onChangeColorInput, ...inputProps })), _jsx(Popover, { arrow: true, content: _jsx(CustomPicker, { color: color, presetColors: presetColors, onChange: onChangeColorPicker, onChangeComplete: onChangeComplete }), trigger: "click", open: popoverVisible, getPopupContainer: triggerNode => triggerNode, onOpenChange: onPopoverVisibleChange, afterOpenChange: handleAfterOpenChange, children: _jsx("div", { className: "antsomi-popover-button", style: styleBtnColor, children: iconNode || (_jsx("span", { style: {
                             backgroundColor: color,
                             display: 'block',
                             width: 20,

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

@@ -70,6 +70,7 @@ const TextEditorInternal = memo(forwardRef((props, ref) => {
         const text = editor.getText();
         const json = editor.getJSON();
         const html = editor.getHTML();
+        // console.log(id, { text });
         onUpdate?.({
             html: htmlSerializerForOutput(html),
             text,
@@ -106,7 +107,7 @@ const TextEditorInternal = memo(forwardRef((props, ref) => {
                 bulletList: false,
                 orderedList: false,
                 listItem: false,
-                undoRedo: config?.UndoRedo ?? {
+                undoRedo: config?.UndoRedo && {
                     depth: 100,
                 },
             }),
@@ -186,7 +187,12 @@ const TextEditorInternal = memo(forwardRef((props, ref) => {
                 wrapperElement: contentRef.current.parentElement,
                 defaultStyle: defaultTextStyle,
             });
+            // console.log(
+            //   '[ONCREATE] safeParseContent !== initialContent:',
+            //   safeParseContent !== initialContent,
+            // );
             if (safeParseContent !== initialContent) {
+                // console.log('[ONCREATE] Calling setContent - this RESETS editor content!');
                 editor.commands.setContent(safeParseContent);
             }
             const text = editor.getText();
@@ -282,6 +288,7 @@ const TextEditorInternal = memo(forwardRef((props, ref) => {
         });
     }, [editor]);
     useImperativeHandle(ref, () => ({
+        editor,
         setLink: params => {
             editor?.chain().setCustomLink(params).run();
         },
@@ -308,6 +315,9 @@ const TextEditorInternal = memo(forwardRef((props, ref) => {
         deleteSmartTag: handleDeleteSmartTag,
         updateSmartTagAttrs: handleUpdateSmartTagAttrs,
         blur: handleBlur,
+        focus() {
+            editor.chain().focus().run();
+        },
         setContent: editor.commands.setContent,
         style: contentRef.current?.style,
     }));
@@ -352,6 +362,9 @@ const TextEditorWithProvider = forwardRef((props, ref) => {
     }, [colors]);
     useImperativeHandle(ref, () => ({
         // Forward TextEditorRef methods - accessed at call time
+        get editor() {
+            return editorRef.current?.editor;
+        },
         get style() {
             return editorRef.current?.style;
         },
@@ -388,6 +401,9 @@ const TextEditorWithProvider = forwardRef((props, ref) => {
         get blur() {
             return editorRef.current.blur;
         },
+        get focus() {
+            return editorRef.current.focus;
+        },
         get setContent() {
             return editorRef.current.setContent;
         },

package/es/components/organism/TextEditor/types.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { JSONContent, MarkRange } from '@tiptap/core';
+import type { Editor, JSONContent, MarkRange } from '@tiptap/core';
 import { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
 import type { Mark, Node } from '@tiptap/pm/model';
 import { ORDERED_LIST_STYLE_TYPE, UNORDERED_LIST_STYLE_TYPE } from './constants';
@@ -29,9 +29,13 @@ export type HandleLinkRef = {
 };
 export type TextEditorRef = HandleSmartTagRef & HandleLinkRef & {
     blur: (perserveSelection?: boolean) => void;
+    focus: () => void;
     style?: CSSStyleDeclaration;
     getHTML?: () => string;
-    setContent?: (text: string) => void;
+    setContent?: (text: string, options?: Partial<{
+        emitUpdate: boolean;
+    }>) => void;
+    readonly editor: Editor;
 };
 export type SmartTagHandler = Partial<{
     edit: (id: string, event: React.MouseEvent) => void;

package/es/components/organism/TextEditor/ui/Toolbar/FormattingToolbar.js

@@ -46,15 +46,20 @@ export const FormattingToolbar = (props) => {
         letterSpacing: _jsx(LetterSpacingAction, { editor: editor }, "letterSpacing"),
         indent: _jsx(IndentAction, { editor: editor }, "indent"),
         outdent: _jsx(OutdentAction, { editor: editor }, "outdent"),
-        history: _jsx(HistoryAction, { editor: editor }, "history"),
+        history: config?.UndoRedo !== false ? _jsx(HistoryAction, { editor: editor }, "history") : null,
         clearFormatting: _jsx(ClearFormattingAction, { editor: editor }, "clearFormatting"),
     }), [
         editor,
-        config?.FontFamily,
-        config?.UnorderedList,
-        defaultTextStyle,
-        linkHanlder,
-        smartTagHandler,
+        config?.FontFamily?.fonts,
+        config?.FontFamily?.fontGroupingFn,
+        config?.FontFamily?.groupOrder,
+        config?.UnorderedList?.useCustomBullet,
+        config?.UndoRedo,
+        defaultTextStyle.fontFamily,
+        defaultTextStyle.fontSize,
+        defaultTextStyle?.lineHeight,
+        linkHanlder?.onUpsert,
+        smartTagHandler?.onUpsert,
         onChangeFont,
     ]);
     // Group actions into rows

package/package.json

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