@frontify/guideline-blocks-settings 0.27.0 → 0.28.0

package/src/components/RichTextEditor/RichTextEditor.spec.ct.tsx

@@ -0,0 +1,204 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { DocumentApiDummy, getAppBridgeBlockStub } from '@frontify/app-bridge';
+import { PluginComposer } from '@frontify/fondue';
+import { mount } from 'cypress/react18';
+import { SinonStub } from 'cypress/types/sinon';
+import { ButtonPlugin, LinkPlugin, RichTextEditor, TextStyles } from '.';
+import { convertToRteValue } from '../../helpers';
+
+const RteHtmlSelector = '[data-test-id="rte-content-html"]';
+const RichTextSelector = '[data-test-id="rich-text-editor"]';
+const ButtonSelector = '[data-test-id="button"]';
+const ToolbarButtonSelector = '[data-testid="ToolbarButton"]';
+const InternalDocumentLinkSelector = '[data-test-id="internal-link-selector-document-link"]';
+const FloatingLinkModalSelector = '[data-test-id="floating-link-insert"]';
+const FloatingButtonModalSelector = '[data-test-id="floating-button-insert"]';
+const UrlInputSelector = 'input[id="url"]';
+
+const apiDocuments = [{ ...DocumentApiDummy.with(1), permanentLink: '/r/document' }];
+
+const appBridge = getAppBridgeBlockStub({
+    blockId: 1,
+});
+
+describe('RichTextEditor', () => {
+    it('should render a rich text editor in edit mode', () => {
+        mount(<RichTextEditor isEditing />);
+        cy.get(RichTextSelector).should('exist');
+    });
+
+    it('should render a rich text html in view mode', () => {
+        mount(<RichTextEditor isEditing={false} value="test" />);
+        cy.get(RteHtmlSelector).should('exist');
+    });
+
+    it('should render a json value in view mode', () => {
+        mount(<RichTextEditor isEditing={false} value={convertToRteValue(TextStyles.heading1, 'Test Heading')} />);
+        cy.get(RteHtmlSelector).should('exist');
+    });
+
+    it('should render a html value in view mode', () => {
+        mount(<RichTextEditor isEditing={false} value="<p>Test Paragraph</p>" />);
+        cy.get(RteHtmlSelector).should('exist');
+    });
+
+    it('should not render html output if value is empty', () => {
+        mount(<RichTextEditor isEditing={false} value="" />);
+        cy.get(RteHtmlSelector).should('not.exist');
+    });
+
+    it('should not render html output if value is undefined', () => {
+        mount(<RichTextEditor isEditing={false} />);
+        cy.get(RteHtmlSelector).should('not.exist');
+    });
+
+    it('should be able to select internal link', () => {
+        (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
+        (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
+
+        mount(
+            <RichTextEditor
+                isEditing={true}
+                plugins={new PluginComposer().setPlugin([new LinkPlugin({ appBridge })])}
+                value={convertToRteValue('p', 'This is a link')}
+            />
+        );
+        cy.get(RichTextSelector).click();
+        cy.get(RichTextSelector).type('{selectall}');
+        cy.get(ToolbarButtonSelector).click();
+        cy.get(ButtonSelector).first().click();
+        cy.get(InternalDocumentLinkSelector).click();
+        cy.get(ButtonSelector).last().click();
+        cy.get(FloatingLinkModalSelector).find(ButtonSelector).last().click();
+        cy.get(RichTextSelector).find('a[href="/r/document"]').should('exist');
+    });
+
+    it('should prepend the URL with https:// if not exists', () => {
+        (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
+        (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
+
+        mount(
+            <RichTextEditor
+                isEditing={true}
+                plugins={new PluginComposer().setPlugin([new LinkPlugin({ appBridge })])}
+                value={convertToRteValue('p', 'This is a link')}
+            />
+        );
+        cy.get(RichTextSelector).click();
+        cy.get(RichTextSelector).type('{selectall}');
+        cy.get(ToolbarButtonSelector).click();
+        cy.get(UrlInputSelector).type('frontify.com');
+        cy.get(FloatingLinkModalSelector).find(ButtonSelector).last().click();
+        cy.get(RichTextSelector).find('a[href="https://frontify.com"]').should('exist');
+    });
+
+    it('should allow URLs that start with /document/', () => {
+        (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
+        (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
+
+        mount(
+            <RichTextEditor
+                isEditing={true}
+                plugins={new PluginComposer().setPlugin([new LinkPlugin({ appBridge })])}
+                value={convertToRteValue('p', 'This is a link')}
+            />
+        );
+
+        cy.get(RichTextSelector).click();
+        cy.get(RichTextSelector).type('{selectall}');
+        cy.get(ToolbarButtonSelector).click();
+        cy.get(UrlInputSelector).type('/document/test');
+        cy.get(FloatingLinkModalSelector).find(ButtonSelector).last().click();
+        cy.get(RichTextSelector).find('a[href="/document/test"]').should('exist');
+    });
+
+    it('should not add https:// to the URL for mailto: links', () => {
+        (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
+        (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
+
+        mount(
+            <RichTextEditor
+                isEditing={true}
+                plugins={new PluginComposer().setPlugin([new LinkPlugin({ appBridge })])}
+                value={convertToRteValue('p', 'This is a link')}
+            />
+        );
+        cy.get(RichTextSelector).click();
+        cy.get(RichTextSelector).type('{selectall}');
+        cy.get(ToolbarButtonSelector).click();
+        cy.get(UrlInputSelector).type('mailto:info@frontify.com');
+        cy.get(FloatingLinkModalSelector).find(ButtonSelector).last().click();
+        cy.get(RichTextSelector).find('a[href="mailto:info@frontify.com"]').should('exist');
+    });
+
+    it('should create a link with a link typed in the RTE', () => {
+        (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
+        (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
+
+        mount(
+            <RichTextEditor
+                isEditing={true}
+                plugins={new PluginComposer().setPlugin([new LinkPlugin({ appBridge })])}
+            />
+        );
+        cy.get(RichTextSelector).click();
+        cy.get(RichTextSelector).type('mailto:info@frontify.com {enter}');
+        cy.get(RichTextSelector).find('a[href="mailto:info@frontify.com"]').should('exist');
+    });
+
+    it('should not create a link with a : after a word', () => {
+        (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
+        (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
+
+        mount(
+            <RichTextEditor
+                isEditing={true}
+                plugins={new PluginComposer().setPlugin([new LinkPlugin({ appBridge })])}
+            />
+        );
+        cy.get(RichTextSelector).click();
+        cy.get(RichTextSelector).type('list:{enter}');
+        cy.get(RichTextSelector).find('a').should('not.exist');
+    });
+
+    it('should allow URLs that start with /document/', () => {
+        (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
+        (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
+
+        mount(
+            <RichTextEditor
+                isEditing={true}
+                plugins={new PluginComposer().setPlugin([new LinkPlugin({ appBridge })])}
+                value={convertToRteValue('p', 'This is a link')}
+            />
+        );
+        cy.get(RichTextSelector).click();
+        cy.get(RichTextSelector).type('{selectall}');
+        cy.get(ToolbarButtonSelector).click();
+        cy.get(UrlInputSelector).type('/document/test');
+        cy.get(FloatingLinkModalSelector).find(ButtonSelector).last().click();
+        cy.get(RichTextSelector).find('a[href="/document/test"]').should('exist');
+    });
+
+    it('should be able to select internal button link', () => {
+        (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
+        (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
+
+        mount(
+            <RichTextEditor
+                isEditing={true}
+                plugins={new PluginComposer().setPlugin([new ButtonPlugin({ appBridge })])}
+                value={convertToRteValue('p', 'This is a button')}
+            />
+        );
+        cy.get(RichTextSelector).click();
+        cy.get(RichTextSelector).type('{selectall}');
+        cy.get(ToolbarButtonSelector).click();
+        cy.get(ButtonSelector).first().click();
+        cy.get(InternalDocumentLinkSelector).click();
+        cy.get(ButtonSelector).last().click();
+        cy.get(FloatingButtonModalSelector).find(ButtonSelector).last().click();
+        cy.get(RichTextSelector).find('a[href="/r/document"]').should('exist');
+    });
+});

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -0,0 +1,62 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { useEffect, useState } from 'react';
+
+import { RichTextEditor as FondueRichTextEditor } from '@frontify/fondue';
+import { RichTextEditorProps } from './types';
+import { SerializedText } from './SerializedText';
+import { floatingButtonActions, floatingButtonSelectors } from './plugins/ButtonPlugin/components';
+
+export const RichTextEditor = ({
+    id = 'rte',
+    isEditing,
+    value,
+    columns,
+    gap,
+    placeholder,
+    plugins,
+    onTextChange,
+    showSerializedText,
+}: RichTextEditorProps) => {
+    const [shouldPreventPageLeave, setShouldPreventPageLeave] = useState(false);
+
+    const saveText = (newContent: string) => {
+        if (onTextChange && newContent !== value) {
+            onTextChange(newContent);
+        }
+        setShouldPreventPageLeave(false);
+    };
+
+    useEffect(() => {
+        const unloadHandler = (event: BeforeUnloadEvent) => {
+            event.preventDefault();
+            return (event.returnValue = 'Unprocessed changes');
+        };
+
+        if (shouldPreventPageLeave) {
+            window.addEventListener('beforeunload', unloadHandler);
+        }
+
+        return () => window.removeEventListener('beforeunload', unloadHandler);
+    }, [shouldPreventPageLeave]);
+
+    if (isEditing) {
+        return (
+            <FondueRichTextEditor
+                id={id}
+                value={value}
+                border={false}
+                placeholder={placeholder}
+                plugins={plugins}
+                onValueChanged={() => setShouldPreventPageLeave(true)}
+                onTextChange={saveText}
+                hideExternalFloatingModals={(editorId: string) => {
+                    if (floatingButtonSelectors.isOpen(editorId)) {
+                        floatingButtonActions.reset();
+                    }
+                }}
+            />
+        );
+    }
+    return <SerializedText value={value} columns={columns} gap={gap} show={showSerializedText} plugins={plugins} />;
+};

package/src/components/RichTextEditor/SerializedText.tsx

@@ -0,0 +1,25 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { useEffect, useState } from 'react';
+import { SerializedTextProps } from './types';
+import { serializeRawToHtmlAsync } from './serializer';
+
+export const SerializedText = ({ value = '', gap, columns, show = true, plugins }: SerializedTextProps) => {
+    const [html, setHtml] = useState<string | null>(null);
+
+    useEffect(() => {
+        (async () => {
+            setHtml(await serializeRawToHtmlAsync(value, columns, gap, plugins));
+        })();
+    }, [value, columns, gap, plugins]);
+
+    if (!show || html === '<br />') {
+        return null;
+    }
+
+    return html !== null ? (
+        <div className="tw-w-full" data-test-id="rte-content-html" dangerouslySetInnerHTML={{ __html: html }} />
+    ) : (
+        <div className="tw-rounded-sm tw-bg-base-alt tw-animate-pulse tw-h-full tw-min-h-[10px] tw-w-full" />
+    );
+};

package/src/components/RichTextEditor/constants.ts

@@ -0,0 +1,3 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export const THEME_PREFIX = '--f-theme-settings-';

package/src/components/RichTextEditor/index.ts

@@ -0,0 +1,6 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export * from './RichTextEditor';
+export * from './plugins';
+export * from './pluginPresets';
+export * from './constants';

package/src/components/RichTextEditor/pluginPresets/defaultPluginsWithLinkChooser.tsx

@@ -0,0 +1,53 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { AppBridgeBlock } from '@frontify/app-bridge';
+import {
+    AlignCenterPlugin,
+    AlignJustifyPlugin,
+    AlignLeftPlugin,
+    AlignRightPlugin,
+    BoldPlugin,
+    CheckboxListPlugin,
+    CodePlugin,
+    ItalicPlugin,
+    OrderedListPlugin,
+    PluginComposer,
+    ResetFormattingPlugin,
+    SoftBreakPlugin,
+    StrikethroughPlugin,
+    TextStylePlugin,
+    UnderlinePlugin,
+    UnorderedListPlugin,
+} from '@frontify/fondue';
+import { ButtonPlugin, LinkPlugin, TextStylePluginsWithoutImage, TextStylesWithoutImage } from '../plugins';
+
+export const getDefaultPluginsWithLinkChooser = (appBridge: AppBridgeBlock) => {
+    return new PluginComposer()
+        .setPlugin(
+            new SoftBreakPlugin(),
+            new TextStylePlugin({
+                textStyles: TextStylePluginsWithoutImage,
+            })
+        )
+        .setPlugin(
+            [
+                new BoldPlugin(),
+                new ItalicPlugin(),
+                new UnderlinePlugin(),
+                new StrikethroughPlugin(),
+                new LinkPlugin({ appBridge }),
+                new ButtonPlugin({ appBridge }),
+                new CodePlugin(),
+            ],
+            [
+                new AlignLeftPlugin({ validTypes: TextStylesWithoutImage }),
+                new AlignCenterPlugin({ validTypes: TextStylesWithoutImage }),
+                new AlignRightPlugin({ validTypes: TextStylesWithoutImage }),
+                new AlignJustifyPlugin({ validTypes: TextStylesWithoutImage }),
+                new UnorderedListPlugin(),
+                new CheckboxListPlugin(),
+                new OrderedListPlugin(),
+                new ResetFormattingPlugin(),
+            ]
+        );
+};

package/src/components/RichTextEditor/pluginPresets/index.ts

@@ -0,0 +1,3 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export * from './defaultPluginsWithLinkChooser';

package/src/components/RichTextEditor/plugins/ButtonPlugin/ButtonMarkupElement/ButtonMarkupElementNode.tsx

@@ -0,0 +1,74 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { HTMLPropsAs, PlateRenderElementProps, Value, useElementProps } from '@udecode/plate';
+import { CSSProperties, HTMLAttributeAnchorTarget, ReactElement, ReactNode, useState } from 'react';
+import { RichTextButtonStyle, TButtonElement } from '../types';
+import { BlockButtonStyles } from '../utils';
+
+export type ButtonRootProps = PlateRenderElementProps<Value, TButtonElement> & HTMLPropsAs<'a'>;
+
+const useButton = (props: ButtonRootProps): HTMLPropsAs<'a'> & { buttonStyle: RichTextButtonStyle } => {
+    const _props = useElementProps<TButtonElement, 'a'>({
+        ...props,
+        elementToAttributes: (element) => ({
+            url: element.href,
+            buttonStyle: element.buttonStyle || 'primary',
+            target: element.target || '_blank',
+        }),
+    });
+
+    return {
+        ...(_props as HTMLPropsAs<'a'> & { buttonStyle: RichTextButtonStyle }),
+        // quick fix: hovering <a> with href loses the editor focus
+        onMouseOver: (e) => {
+            e.stopPropagation();
+        },
+    };
+};
+
+export const ButtonMarkupElementNode = (props: ButtonRootProps) => {
+    const { href, target, buttonStyle } = useButton(props);
+    const { attributes, children } = props;
+
+    return (
+        <HoverableButtonLink
+            attributes={attributes}
+            href={href}
+            target={target}
+            styles={BlockButtonStyles[`button${buttonStyle.charAt(0).toUpperCase() + buttonStyle.slice(1)}`]}
+        >
+            {children}
+        </HoverableButtonLink>
+    );
+};
+
+type Props = {
+    attributes: ButtonRootProps['attributes'];
+    children: ReactNode;
+    styles?: CSSProperties & { hover?: CSSProperties };
+    href?: string;
+    target?: HTMLAttributeAnchorTarget;
+};
+
+const HoverableButtonLink = ({
+    attributes,
+    styles = { hover: {} },
+    children,
+    href = '#',
+    target,
+}: Props): ReactElement => {
+    const [hovered, setHovered] = useState(false);
+
+    return (
+        <a
+            {...attributes}
+            onMouseEnter={() => setHovered(true)}
+            onMouseLeave={() => setHovered(false)}
+            href={href}
+            target={target}
+            style={hovered ? { ...styles, ...styles.hover } : styles}
+        >
+            {children}
+        </a>
+    );
+};

package/src/components/RichTextEditor/plugins/ButtonPlugin/ButtonMarkupElement/index.ts

@@ -0,0 +1,11 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { MarkupElement } from '@frontify/fondue';
+import { ELEMENT_BUTTON } from '../createButtonPlugin';
+import { ButtonMarkupElementNode } from './ButtonMarkupElementNode';
+
+export class ButtonMarkupElement extends MarkupElement {
+    constructor(id = ELEMENT_BUTTON, node = ButtonMarkupElementNode) {
+        super(id, node);
+    }
+}

package/src/components/RichTextEditor/plugins/ButtonPlugin/components/ButtonButton.tsx

@@ -0,0 +1,20 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { IconButton16, PluginButtonProps, buttonStyles } from '@frontify/fondue';
+import { getPluginType } from '@udecode/plate';
+import { ELEMENT_BUTTON } from '../createButtonPlugin';
+import { ButtonToolbarButton } from './ButtonToolbarButton';
+
+export const ButtonButton = ({ editor, id }: PluginButtonProps) => (
+    <div data-plugin-id={id}>
+        <ButtonToolbarButton
+            type={getPluginType(editor, ELEMENT_BUTTON)}
+            icon={
+                <span className="tw-p-2 tw-h-8 tw-justify-center tw-items-center tw-flex">
+                    <IconButton16 />
+                </span>
+            }
+            styles={buttonStyles}
+        />
+    </div>
+);

package/src/components/RichTextEditor/plugins/ButtonPlugin/components/ButtonToolbarButton.tsx

@@ -0,0 +1,56 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { getButtonClassNames, getHotkeyByPlatform, getTooltip } from '@frontify/fondue';
+import {
+    BlockToolbarButtonProps,
+    ToolbarButton,
+    focusEditor,
+    isRangeInSameBlock,
+    someNode,
+    useEditorRef,
+} from '@udecode/plate';
+
+import { triggerFloatingButton } from '../utils';
+
+export interface LinkToolbarButtonProps extends BlockToolbarButtonProps {
+    /**
+     * Default onMouseDown is getting the link url by calling this promise before inserting the image.
+     */
+    getLinkUrl?: (prevUrl: string | null) => Promise<string | null>;
+}
+
+export const ButtonToolbarButton = ({ type, ...props }: LinkToolbarButtonProps) => {
+    const editor = useEditorRef();
+    const isEnabled = !!isRangeInSameBlock(editor, {
+        at: editor.selection,
+    });
+
+    const isLink = !!editor?.selection && someNode(editor, { match: { type } });
+
+    return (
+        <ToolbarButton
+            tooltip={getTooltip(
+                isEnabled
+                    ? `Button\n${getHotkeyByPlatform('Ctrl+Shift+K')}`
+                    : 'Buttons can only be set for a single text block.'
+            )}
+            classNames={getButtonClassNames(isEnabled)}
+            active={isLink}
+            onMouseDown={async (event) => {
+                if (!editor) {
+                    return;
+                }
+
+                event.preventDefault();
+                event.stopPropagation();
+
+                focusEditor(editor, editor.selection ?? editor.prevSelection ?? undefined);
+
+                setTimeout(() => {
+                    triggerFloatingButton(editor, { focused: true });
+                }, 0);
+            }}
+            {...props}
+        />
+    );
+};

package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/CustomFloatingButton.tsx

@@ -0,0 +1,19 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { EditModal } from './EditButtonModal/EditModal';
+import { FloatingButton } from './FloatingButton';
+import { useFloatingButtonSelectors } from './floatingButtonStore';
+import { InsertButtonModal } from './InsertButtonModal/InsertButtonModal';
+
+export const CustomFloatingButton = () => {
+    const isEditing = useFloatingButtonSelectors().isEditing();
+
+    const input = <InsertButtonModal />;
+    const editContent = isEditing ? input : <EditModal />;
+    return (
+        <>
+            <FloatingButton.InsertRoot>{input}</FloatingButton.InsertRoot>
+            <FloatingButton.EditRoot>{editContent}</FloatingButton.EditRoot>
+        </>
+    );
+};

package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/EditButtonModal/EditModal.tsx

@@ -0,0 +1,42 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { IconPen16, IconTrashBin16 } from '@frontify/fondue';
+import { FloatingButton, useFloatingButtonUrlInput } from '..';
+import { BlockStyles } from '../../../..';
+
+export const EditModal = () => {
+    const urlHtmlProps = useFloatingButtonUrlInput({});
+
+    return (
+        <div data-test-id="floating-button-edit" className="tw-bg-white tw-rounded tw-shadow tw-p-4 tw-min-w-[400px]">
+            <span data-test-id="preview-button-flyout" className="tw-flex tw-justify-between">
+                <span className="tw-pointer-events-none" style={BlockStyles.p}>
+                    {urlHtmlProps.defaultValue}
+                </span>
+                <span className="tw-flex tw-gap-2">
+                    <span
+                        role="button"
+                        tabIndex={0}
+                        data-test-id="edit-button-button"
+                        className="tw-transition tw-cursor-pointer tw-rounded hover:tw-bg-black-10 tw-p-1"
+                    >
+                        <FloatingButton.EditButton>
+                            <IconPen16 />
+                        </FloatingButton.EditButton>
+                    </span>
+
+                    <span
+                        role="button"
+                        tabIndex={0}
+                        data-test-id="remove-button-button"
+                        className="tw-transition tw-cursor-pointer tw-rounded hover:tw-bg-black-10 tw-p-1"
+                    >
+                        <FloatingButton.UnlinkButton>
+                            <IconTrashBin16 />
+                        </FloatingButton.UnlinkButton>
+                    </span>
+                </span>
+            </span>
+        </div>
+    );
+};

package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/FloatingButton.tsx

@@ -0,0 +1,37 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { HTMLPropsAs, UseVirtualFloatingOptions, createComponentAs, createElementAs } from '@udecode/plate';
+import { useFloatingButtonEdit } from './useFloatingButtonEdit';
+import { useFloatingButtonInsert } from './useFloatingButtonInsert';
+import { FloatingButtonEditButton } from './FloatingButtonEditButton';
+import { UnlinkButton } from './UnlinkButton';
+
+export type FloatingButtonProps = HTMLPropsAs<'div'> & {
+    floatingOptions?: UseVirtualFloatingOptions;
+};
+
+export const FloatingButtonEditRoot = createComponentAs<FloatingButtonProps>((props) => {
+    const htmlProps = useFloatingButtonEdit(props);
+
+    if (htmlProps.style?.display === 'none') {
+        return null;
+    }
+
+    return createElementAs('div', htmlProps);
+});
+
+export const FloatingButtonInsertRoot = createComponentAs<FloatingButtonProps>((props) => {
+    const htmlProps = useFloatingButtonInsert(props);
+
+    if (htmlProps.style?.display === 'none') {
+        return null;
+    }
+    return createElementAs('div', htmlProps);
+});
+
+export const FloatingButton = {
+    EditRoot: FloatingButtonEditRoot,
+    InsertRoot: FloatingButtonInsertRoot,
+    EditButton: FloatingButtonEditButton,
+    UnlinkButton,
+};

package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/FloatingButtonEditButton.tsx

@@ -0,0 +1,22 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { useCallback } from 'react';
+import { AsProps, HTMLPropsAs, createComponentAs, createElementAs, useEditorRef } from '@udecode/plate';
+import { triggerFloatingButtonEdit } from '../../utils/triggerFloatingButtonEdit';
+
+export const useFloatingButtonEditButton = (props: HTMLPropsAs<'button'>): HTMLPropsAs<'button'> => {
+    const editor = useEditorRef();
+
+    return {
+        onClick: useCallback(() => {
+            triggerFloatingButtonEdit(editor);
+        }, [editor]),
+        ...props,
+    };
+};
+
+export const FloatingButtonEditButton = createComponentAs<AsProps<'button'>>((props) => {
+    const htmlProps = useFloatingButtonEditButton(props);
+
+    return createElementAs('button', htmlProps);
+});