@antscorp/antsomi-ui 1.3.7-beta.30 → 1.3.7-beta.32

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

@@ -38,7 +38,7 @@ import { analyzeFont, defaultShouldShowBubbleMenu, getAllFullLinkGroups, handleL
 import { BubbleMenu } from './ui/BubbleMenu';
 import { LinkPopover } from './ui/LinkPopover';
 const TextEditorInternal = memo(forwardRef((props, ref) => {
-    const { id, className, config, editable = true, initialContent = '', dataAttributes, onUpdateDebounced = 300, defaultTextStyle: defaultTextStyleProp, linkHandler: outerLinkHandler, smartTagHandler: outerSmartTagHandler, bubbleMenuProps, style, render, onUpdate, onFocus, onChangeFont, } = props;
+    const { id, className, config, editable = true, initialContent = '', dataAttributes, onUpdateDebounced = 300, defaultTextStyle: defaultTextStyleProp, linkHandler: outerLinkHandler, smartTagHandler: outerSmartTagHandler, bubbleMenuProps, style, render, onUpdate, onFocus, onCreate, onChangeFont, } = props;
     // Initialize bubbleMenuContainer with default value (document.body)
     // This ensures BubbleMenu receives a valid appendTo prop on first render
     const bubbleMenuContainer = useRef((() => {
@@ -189,6 +189,14 @@ const TextEditorInternal = memo(forwardRef((props, ref) => {
             if (safeParseContent !== initialContent) {
                 editor.commands.setContent(safeParseContent);
             }
+            const text = editor.getText();
+            const json = editor.getJSON();
+            const html = editor.getHTML();
+            onCreate?.({
+                html: htmlSerializerForOutput(html),
+                text,
+                json,
+            });
         },
         onUpdate: ({ editor }) => {
             handleOnUpdateDebounce(editor);
@@ -293,6 +301,7 @@ const TextEditorInternal = memo(forwardRef((props, ref) => {
             })
                 .run();
         },
+        getHTML: () => htmlSerializerForOutput(editor.getHTML()),
         eachLinkGroup: handleEachLinkGroup,
         eachSmartag: handleEachSmartag,
         setSmartTag: handleSetSmartTag,
@@ -300,7 +309,6 @@ const TextEditorInternal = memo(forwardRef((props, ref) => {
         updateSmartTagAttrs: handleUpdateSmartTagAttrs,
         blur: handleBlur,
         style: contentRef.current?.style,
-        editor,
     }));
     if (!editor) {
         return null;
@@ -346,8 +354,8 @@ const TextEditorWithProvider = forwardRef((props, ref) => {
         get style() {
             return editorRef.current?.style;
         },
-        get editor() {
-            return editorRef.current?.editor ?? null;
+        get getHTML() {
+            return editorRef.current.getHTML;
         },
         get setLink() {
             return editorRef.current.setLink;

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

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { JSONContent, Editor, MarkRange } from '@tiptap/core';
+import type { 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';
@@ -30,7 +30,7 @@ export type HandleLinkRef = {
 export type TextEditorRef = HandleSmartTagRef & HandleLinkRef & {
     blur: (perserveSelection?: boolean) => void;
     style?: CSSStyleDeclaration;
-    readonly editor: Editor | null;
+    getHTML?: () => string;
 };
 export type SmartTagHandler = Partial<{
     edit: (id: string, event: React.MouseEvent) => void;
@@ -185,6 +185,11 @@ export type TextEditorProps = {
         text: string;
         json: JSONContent;
     }) => void;
+    onCreate?: (args: {
+        html: string;
+        text: string;
+        json: JSONContent;
+    }) => void;
     onChangeFont?: (changeInfo: {
         font: FontConfig;
         weight: number;

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

@@ -25,7 +25,7 @@ export const FormattingToolbar = (props) => {
     }, [config?.Toolbar]);
     // Map action names to React components
     const actionComponentMap = useMemo(() => ({
-        fontFamily: (_jsx(FontFamilyAction, { editor: editor, fonts: config?.FontFamily?.fonts, onChange: (font, weight) => onChangeFont?.({ font, weight }), fontGroupingFn: config?.FontFamily?.fontGroupingFn, groupOrder: config?.FontFamily?.groupOrder }, "fontFamily")),
+        fontFamily: (_jsx(FontFamilyAction, { editor: editor, fonts: config?.FontFamily?.fonts, onChange: (font, weight) => onChangeFont?.({ font, weight }), fontGroupingFn: config?.FontFamily?.fontGroupingFn, groupOrder: config?.FontFamily?.groupOrder, defaultFontFamily: defaultTextStyle.fontFamily }, "fontFamily")),
         fontSize: (_jsx(FontSizeAction, { editor: editor, defaultFontSize: defaultTextStyle.fontSize }, "fontSize")),
         bold: _jsx(BoldAction, { editor: editor }, "bold"),
         italic: _jsx(ItalicAction, { editor: editor }, "italic"),

package/es/components/organism/TextEditor/ui/Toolbar/actions/FontFamilyAction.d.ts

@@ -14,5 +14,6 @@ export interface FontFamilyActionProps {
     groupOrder?: string[] | GroupOrderFunction;
     /** Callback when font selection changes */
     onChange?: (font: FontConfig, weight: number) => void;
+    defaultFontFamily?: string;
 }
 export declare const FontFamilyAction: (props: FontFamilyActionProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -5,7 +5,7 @@ import { getPrimaryFontFamily } from '@antscorp/antsomi-ui/es/utils';
 import { useEditorState } from '@tiptap/react';
 import { useCallback, useEffect, useRef } from 'react';
 export const FontFamilyAction = (props) => {
-    const { editor, fonts = DEFAULT_FONT_CONFIGS, onChange, fontGroupingFn, groupOrder } = props;
+    const { editor, fonts = DEFAULT_FONT_CONFIGS, onChange, fontGroupingFn, groupOrder, defaultFontFamily, } = props;
     const onChangeRef = useRef();
     useEffect(() => {
         onChangeRef.current = onChange;
@@ -15,7 +15,7 @@ export const FontFamilyAction = (props) => {
         selector: ({ editor: editorInstance }) => {
             const { fontWeight, fontFamily } = editorInstance.getAttributes('textStyle') || {};
             return {
-                fontValue: getPrimaryFontFamily(fontFamily),
+                fontValue: getPrimaryFontFamily(fontFamily || defaultFontFamily),
                 fontWeight: Number(fontWeight),
             };
         },

package/package.json

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