@antscorp/antsomi-ui 1.3.7-beta.7 → 1.3.7-beta.70

package/es/components/organism/SQLGeneration/index.scss

@@ -1 +1 @@
-@use './integrations/AceEditor';
+@use './integrations/AceEditor';

package/es/components/organism/SQLGeneration/integrations/AceEditor/index.scss

@@ -1,4 +1,4 @@
-.ace-sqlgen-placeholder {
-  display: inline-block;
-  cursor: pointer;
-}
+.ace-sqlgen-placeholder {
+  display: inline-block;
+  cursor: pointer;
+}

package/es/components/organism/Table/CrossTabTable/components/CustomCell/styled.js

@@ -1,13 +1,13 @@
 import styled from 'styled-components';
-export const BarCell = styled.div `
-  position: absolute;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.075);
-
-  .bar-line {
-    position: absolute;
-    bottom: 0;
-    height: 3px;
-    width: 100%;
-  }
+export const BarCell = styled.div `
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.075);
+
+  .bar-line {
+    position: absolute;
+    bottom: 0;
+    height: 3px;
+    width: 100%;
+  }
 `;

package/es/components/organism/Table/CrossTabTable/styled.js

@@ -1,13 +1,13 @@
 import styled from 'styled-components';
-export const BarCell = styled.div `
-  position: absolute;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.075);
-
-  .bar-line {
-    position: absolute;
-    bottom: 0;
-    height: 3px;
-    width: 100%;
-  }
+export const BarCell = styled.div `
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.075);
+
+  .bar-line {
+    position: absolute;
+    bottom: 0;
+    height: 3px;
+    width: 100%;
+  }
 `;

package/es/components/organism/Table/ExplorePivotTable/components/CustomCell/styled.js

@@ -1,21 +1,21 @@
 import styled from 'styled-components';
-export const BarCell = styled.div `
-  position: absolute;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.075);
-
-  .bar-line {
-    position: absolute;
-    bottom: 0;
-    height: 3px;
-    width: 100%;
-  }
+export const BarCell = styled.div `
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.075);
+
+  .bar-line {
+    position: absolute;
+    bottom: 0;
+    height: 3px;
+    width: 100%;
+  }
 `;
-export const HeatCell = styled.div `
-  position: absolute;
-  inset: 0;
+export const HeatCell = styled.div `
+  position: absolute;
+  inset: 0;
 `;
-export const StyledValue = styled.div `
-  position: relative;
-  z-index: 1;
+export const StyledValue = styled.div `
+  position: relative;
+  z-index: 1;
 `;

package/es/components/organism/Table/ExplorePivotTable/styled.js

@@ -1,15 +1,15 @@
 import styled from 'styled-components';
 import { Table } from '../Table';
-export const StyledTable = styled(Table) `
-  .antsomi-table-thead {
-    .antsomi-table-cell {
-      background-color: white !important;
-      font-weight: 400 !important;
-    }
-  }
+export const StyledTable = styled(Table) `
+  .antsomi-table-thead {
+    .antsomi-table-cell {
+      background-color: white !important;
+      font-weight: 400 !important;
+    }
+  }
 `;
-export const StyledHeader = styled.div `
-  background-color: #4285f4;
-  padding: 8px 10px;
-  text-align: right;
+export const StyledHeader = styled.div `
+  background-color: #4285f4;
+  padding: 8px 10px;
+  text-align: right;
 `;

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

@@ -1,3 +1,10 @@
 import React from 'react';
-import { TextEditorProps, TextEditorRef } from './types';
-export declare const TextEditor: React.MemoExoticComponent<React.ForwardRefExoticComponent<TextEditorProps & React.RefAttributes<TextEditorRef>>>;
+import { type TextEditorProviderRefHandler } from './provider';
+import { type TextEditorProps, type TextEditorRef, type TextEditorWithProviderRef } from './types';
+export declare const TextEditor: React.ForwardRefExoticComponent<TextEditorProps & {
+    colors?: string[] | undefined;
+    onChangeColors?: ((colors: string[]) => void) | undefined;
+} & React.RefAttributes<TextEditorWithProviderRef>> & {
+    Provider: React.ForwardRefExoticComponent<import("./provider").TextEditorProviderProps & React.RefAttributes<TextEditorProviderRefHandler>>;
+    Internal: React.MemoExoticComponent<React.ForwardRefExoticComponent<TextEditorProps & React.RefAttributes<TextEditorRef>>>;
+};

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

@@ -1,16 +1,16 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ANTSOMI_COMPONENT_PREFIX_CLS } from '@antscorp/antsomi-ui/es/constants';
-import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 import SubScript from '@tiptap/extension-subscript';
 import Superscript from '@tiptap/extension-superscript';
 import TextAlign from '@tiptap/extension-text-align';
 import { TextStyleKit } from '@tiptap/extension-text-style';
-import { Selection } from '@tiptap/extensions';
+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 { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, } from 'react';
+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';
 import { BackgroundColor } from './extensions/BackgroundColor';
@@ -23,29 +23,54 @@ 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';
 import { CustomUnorderedList } from './extensions/UnorderedList';
 import { ClearFormatting } from './extensions/ClearFormatting';
-import { useTextEditorStore } from './provider';
+import { TextEditorProvider, useTextEditorStore, } from './provider';
 import { StyledEditorContent } from './styled';
+import { isSmartTagNode, } from './types';
 import { emojiSuggestion } from './ui/Emoji';
-import { Toolbar } from './ui/Toolbar';
-import { analyzeFont, defaultShouldShowBubbleMenu, handleLinkAction, handleSmartTagAction, isShowLinkToolbar, safeParseHTMLContent, htmlSerializerForOutput, } from './utils';
+import { LinkPreviewToolbar, FormattingToolbar } from './ui/Toolbar';
+import { analyzeFont, defaultShouldShowBubbleMenu, getAllFullLinkGroups, handleLinkAction, handleSmartTagAction, isShowLinkToolbar, safeParseHTMLContent, htmlSerializerForOutput, } from './utils';
 import { BubbleMenu } from './ui/BubbleMenu';
-export const TextEditor = memo(forwardRef((props, ref) => {
-    const { id, className, config, editable = true, initialContent = '', dataAttributes, onUpdateDebounced = 400, defaultTextStyle: defaultTextStyleProp, linkHandler: outerLinkHandler, smartTagHandler: outerSmartTagHandler, bubbleMenuProps, style, render, onUpdate, onFocus, onChangeFont, } = props;
-    const isShowBubbleMenu = useTextEditorStore(state => state.isShowBubbleMenu);
+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, onCreate, onChangeFont, } = props;
+    // Initialize bubbleMenuContainer with default value (document.body)
+    // This ensures BubbleMenu receives a valid appendTo prop on first render
+    const bubbleMenuContainer = useRef((() => {
+        const appendTo = bubbleMenuProps?.appendTo;
+        if (!appendTo)
+            return document.body;
+        return typeof appendTo === 'function' ? appendTo() : appendTo;
+    })());
+    const linkFormVisible = useTextEditorStore(state => state.linkFormState?.isVisible);
     const setBubbleMenuContainer = useTextEditorStore(state => state.setBubbleMenuContainer);
+    const showLinkForm = useTextEditorStore(state => state.showLinkForm);
     const defaultTextStyle = useDeepCompareMemo(() => ({
         ...DEFAULT_TEXT_STYLE,
         ...defaultTextStyleProp,
     }), [defaultTextStyleProp]);
+    useEffect(() => {
+        const bubbleMenuAppendTo = bubbleMenuProps?.appendTo;
+        // Default to document.body when no appendTo is provided
+        // This prevents bubble menu from being clipped by overflow containers
+        const el = bubbleMenuAppendTo
+            ? typeof bubbleMenuAppendTo === 'function'
+                ? bubbleMenuAppendTo()
+                : bubbleMenuAppendTo
+            : document.body;
+        setBubbleMenuContainer(el);
+        bubbleMenuContainer.current = el;
+    }, [bubbleMenuProps?.appendTo, setBubbleMenuContainer]);
     const handleOnUpdateDebounce = useDebouncedCallback((editor) => {
-        const html = editor.getHTML();
         const text = editor.getText();
         const json = editor.getJSON();
+        const html = editor.getHTML();
+        // console.log(id, { text });
         onUpdate?.({
             html: htmlSerializerForOutput(html),
             text,
@@ -53,21 +78,40 @@ export const TextEditor = memo(forwardRef((props, ref) => {
         });
     }, onUpdateDebounced);
     const contentRef = useRef(null);
+    // Compose linkHandler: merge outerLinkHandler with default handlers
+    // Allows partial override - user can provide only setNew or only edit
+    const linkHandler = useMemo(() => {
+        const defaultSetNew = ({ selectionText }) => {
+            showLinkForm('insert', {
+                url: '',
+                text: selectionText,
+                openInNewTab: false,
+            });
+        };
+        const defaultEdit = ({ attrs, selectionText, }) => {
+            showLinkForm('edit', {
+                url: attrs.href || '',
+                text: selectionText,
+                openInNewTab: attrs.target === '_blank',
+            });
+        };
+        return {
+            setNew: outerLinkHandler?.setNew || defaultSetNew,
+            edit: outerLinkHandler?.edit || defaultEdit,
+        };
+    }, [outerLinkHandler, showLinkForm]);
     const editor = useEditor({
         extensions: [
             StarterKit.configure({
                 link: false,
                 bulletList: false,
                 orderedList: false,
-                listItem: {
-                    HTMLAttributes: {
-                        style: 'line-height:normal;',
-                    },
-                },
-                undoRedo: {
+                listItem: false,
+                undoRedo: config?.UndoRedo && {
                     depth: 100,
                 },
             }),
+            CustomListItem,
             CustomUnorderedList,
             CustomOrderedList,
             FontWeight.configure({
@@ -107,7 +151,12 @@ export const TextEditor = memo(forwardRef((props, ref) => {
             Selection.configure({
                 className: 'selection',
             }),
-            SmartTag,
+            Focus.configure({
+                className: 'has-focused',
+            }),
+            SmartTag.configure({
+                generateSmartTagId: config?.SmartTag?.generateId,
+            }),
             TextAlign.configure({
                 types: ['heading', 'paragraph'],
             }),
@@ -121,7 +170,7 @@ export const TextEditor = memo(forwardRef((props, ref) => {
             Indent,
             Emoji.configure({
                 suggestion: emojiSuggestion({
-                    container: bubbleMenuProps?.container,
+                    container: bubbleMenuContainer.current,
                 }),
             }),
             ClearFormatting.configure({
@@ -138,9 +187,22 @@ export const TextEditor = 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();
+            const json = editor.getJSON();
+            const html = editor.getHTML();
+            onCreate?.({
+                html: htmlSerializerForOutput(html),
+                text,
+                json,
+            });
         },
         onUpdate: ({ editor }) => {
             handleOnUpdateDebounce(editor);
@@ -154,7 +216,7 @@ export const TextEditor = memo(forwardRef((props, ref) => {
                 if (event.ctrlKey && event.key === 'k') {
                     // Add this line to prevent browser's default behavior.
                     event.preventDefault();
-                    handleLinkAction(view, outerLinkHandler);
+                    handleLinkAction(view, linkHandler);
                 }
             },
         },
@@ -183,10 +245,15 @@ export const TextEditor = memo(forwardRef((props, ref) => {
             return updatedAttrs;
     })
         .run(), [editor]);
-    const shouldShowBubbleMenu = useCallback((params) => {
+    const shouldShowLinkPreview = useCallback((params) => {
+        const { state } = params;
+        return isShowLinkToolbar(state);
+    }, []);
+    const shouldShowFormattingToolbar = useCallback((params) => {
         const { state, view, element } = params;
+        // Don't show if link preview is visible
         if (isShowLinkToolbar(state)) {
-            return true;
+            return false;
         }
         return defaultShouldShowBubbleMenu({
             state,
@@ -203,10 +270,25 @@ export const TextEditor = memo(forwardRef((props, ref) => {
             editor?.chain().blur().setTextSelection({ from: 0, to: 0 }).run();
         }
     }, [editor]);
-    const handleBubbleMenuRef = useCallback((htmlElement) => {
-        setBubbleMenuContainer(htmlElement);
-    }, [setBubbleMenuContainer]);
+    const handleEachLinkGroup = useCallback(callback => {
+        if (!editor)
+            return;
+        const linkGroups = getAllFullLinkGroups(editor.state);
+        linkGroups.forEach(callback);
+    }, [editor]);
+    const handleEachSmartag = useCallback(callback => {
+        if (!editor)
+            return;
+        const { state } = editor;
+        const { doc } = state;
+        doc.descendants(node => {
+            if (isSmartTagNode(node)) {
+                callback(node.attrs);
+            }
+        });
+    }, [editor]);
     useImperativeHandle(ref, () => ({
+        editor,
         setLink: params => {
             editor?.chain().setCustomLink(params).run();
         },
@@ -226,33 +308,112 @@ export const TextEditor = memo(forwardRef((props, ref) => {
             })
                 .run();
         },
+        getHTML: () => htmlSerializerForOutput(editor.getHTML()),
+        eachLinkGroup: handleEachLinkGroup,
+        eachSmartag: handleEachSmartag,
         setSmartTag: handleSetSmartTag,
         deleteSmartTag: handleDeleteSmartTag,
         updateSmartTagAttrs: handleUpdateSmartTagAttrs,
         blur: handleBlur,
+        focus() {
+            editor.chain().focus().run();
+        },
+        setContent: editor.commands.setContent,
         style: contentRef.current?.style,
-        editor,
     }));
     if (!editor) {
         return null;
     }
+    const bubbleMenus = (bubbleMenuProps?.enabled ?? true) ? (_jsxs(_Fragment, { children: [_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: () => {
+                                    handleLinkAction(editor.view, linkHandler);
+                                },
+                            }, render: render }) }), _jsx(BubbleMenu, { pluginKey: "formattingBubbleMenu", ...bubbleMenuProps, appendTo: bubbleMenuContainer.current, editor: editor, shouldShow: shouldShowFormattingToolbar, children: _jsx(FormattingToolbar, { config: config, editor: editor, defaultTextStyle: defaultTextStyle, linkHanlder: {
+                                onUpsert: () => {
+                                    handleLinkAction(editor.view, linkHandler);
+                                },
+                            }, smartTagHandler: {
+                                onUpsert: (event) => {
+                                    handleSmartTagAction(event, editor.view, outerSmartTagHandler);
+                                },
+                            }, onChangeFont: ({ font, weight }) => {
+                                onChangeFont?.({
+                                    font,
+                                    weight,
+                                    analysis: analyzeFont(font),
+                                });
+                            } }) })] }))] })) : null;
     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(BubbleMenu, { ref: handleBubbleMenuRef, editor: editor, shouldShow: shouldShowBubbleMenu, resizeDelay: 700, ...bubbleMenuProps, children: isShowBubbleMenu && (_jsx(Toolbar, { config: config, editor: editor, defaultTextStyle: defaultTextStyle, linkHanlder: {
-                        onUpsert: () => {
-                            handleLinkAction(editor.view, outerLinkHandler);
-                        },
-                    }, smartTagHandler: {
-                        onUpsert: (event) => {
-                            handleSmartTagAction(event, editor.view, outerSmartTagHandler);
-                        },
-                    }, render: render, onChangeFont: ({ font, weight }) => {
-                        onChangeFont?.({
-                            font,
-                            weight,
-                            analysis: analyzeFont(font),
-                        });
-                    } })) })] }));
+                }, id: id, ref: contentRef, editor: editor, ...dataAttributes }), bubbleMenus] }));
 }));
+TextEditorInternal.displayName = 'TextEditorInternal';
+const TextEditorWithProvider = forwardRef((props, ref) => {
+    const { colors, onChangeColors, ...editorProps } = props;
+    const providerRef = useRef(null);
+    const editorRef = useRef(null);
+    // Sync external colors to internal store
+    useDeepCompareEffect(() => {
+        if (colors !== undefined) {
+            providerRef.current?.updateColors?.(colors);
+        }
+    }, [colors]);
+    useImperativeHandle(ref, () => ({
+        // Forward TextEditorRef methods - accessed at call time
+        get editor() {
+            return editorRef.current?.editor;
+        },
+        get style() {
+            return editorRef.current?.style;
+        },
+        get getHTML() {
+            return editorRef.current.getHTML;
+        },
+        get setLink() {
+            return editorRef.current.setLink;
+        },
+        get deleteLink() {
+            return editorRef.current.deleteLink;
+        },
+        get updateLinkAttrs() {
+            return editorRef.current.updateLinkAttrs;
+        },
+        get updateLinkText() {
+            return editorRef.current.updateLinkText;
+        },
+        get eachLinkGroup() {
+            return editorRef.current.eachLinkGroup;
+        },
+        get eachSmartag() {
+            return editorRef.current.eachSmartag;
+        },
+        get setSmartTag() {
+            return editorRef.current.setSmartTag;
+        },
+        get deleteSmartTag() {
+            return editorRef.current.deleteSmartTag;
+        },
+        get updateSmartTagAttrs() {
+            return editorRef.current.updateSmartTagAttrs;
+        },
+        get blur() {
+            return editorRef.current.blur;
+        },
+        get focus() {
+            return editorRef.current.focus;
+        },
+        get setContent() {
+            return editorRef.current.setContent;
+        },
+        // Forward TextEditorProviderRefHandler methods
+        updateColors: colors => providerRef.current?.updateColors?.(colors),
+    }), []);
+    return (_jsx(TextEditorProvider, { ref: providerRef, colors: colors, onChangeColors: onChangeColors, children: _jsx(TextEditorInternal, { ...editorProps, ref: editorRef }) }));
+});
+TextEditorWithProvider.displayName = 'TextEditorWithProvider';
+export const TextEditor = Object.assign(TextEditorWithProvider, {
+    Provider: TextEditorProvider,
+    Internal: TextEditorInternal,
+});

package/es/components/organism/TextEditor/__mocks__/text-contennt.js

@@ -1,47 +1,47 @@
 import SETTINGS from './text-block.settings.json';
-const CONTENT_WITH_INHERITED_STYLES = `
-    <div class="fr-box" role="application">
-      <div class="fr-wrapper" dir="auto">
-        <div class="fr-element fr-view" dir="auto" contenteditable="true" aria-disabled="false" spellcheck="true">
-          <p style="text-align: center;">
-            <span style="font-family: Montserrat; font-size: 22px; letter-spacing: 0px; color: rgb(0, 0, 0);">
-              <span id="isPasted" style="font-weight: 800; font-size: 34px; line-height: inherit; font-family: Montserrat; letter-spacing: 0px; text-align: center; text-transform: none; color: rgb(77, 96, 116);">Receive&nbsp;</span>
-              <span style="font-weight: 400; font-size: 34px; line-height: inherit; font-family: Montserrat; color: rgb(0, 0, 0); letter-spacing: normal; text-align: center; text-transform: none;">
-                <span style="font-weight: 800; font-size: inherit; line-height: inherit; font-family: Montserrat; letter-spacing: 0px; color: rgb(255, 79, 66);"><u>10% Off</u></span>
-              </span>
-              <span style="font-weight: 800; font-size: 34px; line-height: inherit; font-family: Montserrat; letter-spacing: 0px; text-align: center; text-transform: none; color: rgb(77, 96, 116);">&nbsp;Your First Order!</span>
-            </span>
-          </p>
-        </div>
-        <span class="fr-placeholder" style="font-size: 12px; line-height: 12px; margin-top: 0px; padding-top: 0px; padding-left: 0px; margin-left: 0px; padding-right: 0px; margin-right: 0px; text-align: left;">Enter your text here</span>
-      </div>
-    </div>
+const CONTENT_WITH_INHERITED_STYLES = `
+    <div class="fr-box" role="application">
+      <div class="fr-wrapper" dir="auto">
+        <div class="fr-element fr-view" dir="auto" contenteditable="true" aria-disabled="false" spellcheck="true">
+          <p style="text-align: center;">
+            <span style="font-family: Montserrat; font-size: 22px; letter-spacing: 0px; color: rgb(0, 0, 0);">
+              <span id="isPasted" style="font-weight: 800; font-size: 34px; line-height: inherit; font-family: Montserrat; letter-spacing: 0px; text-align: center; text-transform: none; color: rgb(77, 96, 116);">Receive&nbsp;</span>
+              <span style="font-weight: 400; font-size: 34px; line-height: inherit; font-family: Montserrat; color: rgb(0, 0, 0); letter-spacing: normal; text-align: center; text-transform: none;">
+                <span style="font-weight: 800; font-size: inherit; line-height: inherit; font-family: Montserrat; letter-spacing: 0px; color: rgb(255, 79, 66);"><u>10% Off</u></span>
+              </span>
+              <span style="font-weight: 800; font-size: 34px; line-height: inherit; font-family: Montserrat; letter-spacing: 0px; text-align: center; text-transform: none; color: rgb(77, 96, 116);">&nbsp;Your First Order!</span>
+            </span>
+          </p>
+        </div>
+        <span class="fr-placeholder" style="font-size: 12px; line-height: 12px; margin-top: 0px; padding-top: 0px; padding-left: 0px; margin-left: 0px; padding-right: 0px; margin-right: 0px; text-align: left;">Enter your text here</span>
+      </div>
+    </div>
 `;
-export const HTML_DOM = `<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Raw HTML</title>
-  </head>
-  <body>
-    <p><span style="line-height: 100%;"><span style="font-family: Arial, sans-serif; font-size: 14px; letter-spacing: 0px;">Dear </span><span style="font-family: Arial, sans-serif; font-size: 14px; letter-spacing: 0px; font-weight: 600; color: rgb(85, 85, 85);"><span data-dynamic="true" data-dynamic-id="zfs1gvrr" style="direction: unset; unicode-bidi: bidi-override; text-align: right; background-color: rgba(0, 199, 97, 0.2);">Email</span></span><span style="font-family: Arial, sans-serif; font-size: 14px; letter-spacing: 0px;">,</span></span></p>
-    <p><span style="font-size: 14px;"><br></span></p>
-    <p></p>
-    <p><span style="font-family: Arial, sans-serif; font-size: 14px; line-height: 100%; letter-spacing: 0px;">Here's a roundup of our top health and fitness stories from the past two weeks.</span></p>
-
-    <p><span style="font-family: Arial, sans-serif; font-size: 16px; line-height: 100%; letter-spacing: 0px;">Your Special Bonus Offer Has Been Unlocked</span></p>
-    <p><br></p>
-    <p><br></p>
-    <p><br></p>
-    <p><br></p>
-    <p><br></p>
-    <p><br></p>
-    <p><span style="font-family: Arial, sans-serif; font-size: 16px; line-height: 100%; letter-spacing: 0px;">fasdfasdf</span></p>
-
-    ${SETTINGS.settings.rawHTML}
-
-    ${CONTENT_WITH_INHERITED_STYLES}
-  </body>
-</html>
+export const HTML_DOM = `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Raw HTML</title>
+  </head>
+  <body>
+    <p><span style="line-height: 100%;"><span style="font-family: Arial, sans-serif; font-size: 14px; letter-spacing: 0px;">Dear </span><span style="font-family: Arial, sans-serif; font-size: 14px; letter-spacing: 0px; font-weight: 600; color: rgb(85, 85, 85);"><span data-dynamic="true" data-dynamic-id="zfs1gvrr" style="direction: unset; unicode-bidi: bidi-override; text-align: right; background-color: rgba(0, 199, 97, 0.2);">Email</span></span><span style="font-family: Arial, sans-serif; font-size: 14px; letter-spacing: 0px;">,</span></span></p>
+    <p><span style="font-size: 14px;"><br></span></p>
+    <p></p>
+    <p><span style="font-family: Arial, sans-serif; font-size: 14px; line-height: 100%; letter-spacing: 0px;">Here's a roundup of our top health and fitness stories from the past two weeks.</span></p>
+
+    <p><span style="font-family: Arial, sans-serif; font-size: 16px; line-height: 100%; letter-spacing: 0px;">Your Special Bonus Offer Has Been Unlocked</span></p>
+    <p><br></p>
+    <p><br></p>
+    <p><br></p>
+    <p><br></p>
+    <p><br></p>
+    <p><br></p>
+    <p><span style="font-family: Arial, sans-serif; font-size: 16px; line-height: 100%; letter-spacing: 0px;">fasdfasdf</span></p>
+
+    ${SETTINGS.settings.rawHTML}
+
+    ${CONTENT_WITH_INHERITED_STYLES}
+  </body>
+</html>
 `;

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

@@ -185,3 +185,12 @@ export declare const DEFAULT_FONT_GROUPING: {
         readonly label: "Non-standard";
     };
 };
+/**
+ * All available toolbar actions in default order
+ */
+export declare const ALL_TOOLBAR_ACTIONS: readonly ["fontFamily", "fontSize", "bold", "italic", "underline", "link", "strike", "superscript", "subscript", "textTransform", "textColor", "backgroundColor", "emoji", "smartTag", "bulletList", "orderedList", "textAlign", "lineSpacing", "letterSpacing", "indent", "outdent", "history", "clearFormatting"];
+/**
+ * Default grouping of toolbar actions into rows
+ */
+export declare const DEFAULT_TOOLBAR_GROUPING: readonly [readonly ["fontFamily", "fontSize", "bold", "italic", "underline", "link", "strike", "superscript", "subscript", "textTransform", "textColor", "backgroundColor", "emoji", "smartTag"], readonly ["bulletList", "orderedList", "textAlign", "lineSpacing", "letterSpacing", "indent", "outdent", "history", "clearFormatting"]];
+export declare const ATTR_WHITESPACE: RegExp;