@frontify/guideline-blocks-settings 0.27.0 → 0.28.1

package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonInsert.ts

@@ -0,0 +1,71 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import {
+    HTMLPropsAs,
+    getPluginOptions,
+    getSelectionBoundingClientRect,
+    useComposedRef,
+    useEditorRef,
+    useHotkeys,
+} from '@udecode/plate';
+import { useEffect } from 'react';
+import { useFocused } from 'slate-react';
+import { ButtonPlugin, ELEMENT_BUTTON } from '../../createButtonPlugin';
+import { triggerFloatingButtonInsert } from '../../utils/triggerFloatingButtonInsert';
+import {
+    FloatingButtonProps,
+    floatingButtonActions,
+    useFloatingButtonEscape,
+    useFloatingButtonSelectors,
+    useVirtualFloatingButton,
+} from '.';
+
+export const useFloatingButtonInsert = ({ floatingOptions, ...props }: FloatingButtonProps): HTMLPropsAs<'div'> => {
+    const editor = useEditorRef();
+    const focused = useFocused();
+    const mode = useFloatingButtonSelectors().mode();
+    const open = useFloatingButtonSelectors().isOpen(editor.id);
+
+    const { triggerFloatingButtonHotkeys } = getPluginOptions<ButtonPlugin>(editor, ELEMENT_BUTTON);
+
+    useHotkeys(
+        triggerFloatingButtonHotkeys,
+        (e) => {
+            e.preventDefault();
+
+            triggerFloatingButtonInsert(editor, {
+                focused,
+            });
+        },
+        {
+            enableOnContentEditable: true,
+        },
+        [focused]
+    );
+
+    const { update, style, floating } = useVirtualFloatingButton({
+        open: open && mode === 'insert',
+        getBoundingClientRect: getSelectionBoundingClientRect,
+        whileElementsMounted: undefined,
+        ...floatingOptions,
+    });
+
+    // wait for update before focusing input
+    useEffect(() => {
+        if (open) {
+            update();
+        }
+        floatingButtonActions.updated(open);
+    }, [open, update]);
+
+    useFloatingButtonEscape();
+
+    return {
+        style: {
+            ...style,
+            zIndex: 1000,
+        },
+        ...props,
+        ref: useComposedRef<HTMLElement | null>(props.ref, floating),
+    };
+};

package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useVirtualFloatingButton.ts

@@ -0,0 +1,22 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { UseVirtualFloatingOptions, flip, offset, useVirtualFloating } from '@udecode/plate';
+
+const OFFSET_Y = 12;
+const OFFSET_X = -22;
+const PADDING = 96;
+
+export const useVirtualFloatingButton = (floatingOptions?: UseVirtualFloatingOptions) =>
+    useVirtualFloating({
+        placement: 'bottom-start',
+        middleware: [
+            offset({
+                mainAxis: OFFSET_Y,
+                alignmentAxis: OFFSET_X,
+            }),
+            flip({
+                padding: PADDING,
+            }),
+        ],
+        ...floatingOptions,
+    });

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

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

package/src/components/RichTextEditor/plugins/ButtonPlugin/createButtonPlugin.ts

@@ -0,0 +1,116 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { AppBridgeBlock } from '@frontify/app-bridge';
+import { Plugin, PluginProps } from '@frontify/fondue';
+import { RangeBeforeOptions, createPluginFactory } from '@udecode/plate';
+import { CSSProperties } from 'react';
+import { isValidUrl } from '../LinkPlugin/utils/url';
+import { ButtonMarkupElement } from './ButtonMarkupElement';
+import { ButtonButton } from './components/ButtonButton';
+import { CustomFloatingButton } from './components/FloatingButton/CustomFloatingButton';
+import { BlockButtonStyles } from './utils';
+import { withButton } from './withButton';
+
+export const ELEMENT_BUTTON = 'button';
+export const BUTTON_PLUGIN = 'button-plugin';
+
+export interface ButtonPlugin {
+    forceSubmit?: boolean;
+
+    /**
+     * Allow custom config for rangeBeforeOptions.
+     * @example default
+     * {
+     *   matchString: ' ',
+     *   skipInvalid: true,
+     *   afterMatch: true,
+     * }
+     */
+    rangeBeforeOptions?: RangeBeforeOptions;
+
+    /**
+     * Hotkeys to trigger floating button.
+     * @default 'command+k, ctrl+k'
+     */
+    triggerFloatingButtonHotkeys: string;
+
+    /**
+     * Callback to validate an url.
+     * @default isUrl
+     */
+    isUrl: (text: string) => boolean;
+
+    /**
+     * Callback to optionally get the href for a url
+     * @returns href: an optional link to be used that is different from the text content (example https://google.com for google.com)
+     */
+    getUrlHref?: (url: string) => string | undefined;
+
+    /**
+     * On keyboard shortcut or toolbar mousedown, get the link url by calling this promise. The
+     * default behavior is to use the browser's native `prompt`.
+     */
+    getLinkUrl?: (prevUrl: string | null) => Promise<string | null>;
+}
+
+/**
+ * Enables support for hyperlinks.
+ */
+export const createButtonPlugin = (appBridge: AppBridgeBlock) =>
+    createPluginFactory({
+        key: ELEMENT_BUTTON,
+        isElement: true,
+        isInline: true,
+        props: ({ element }) => ({
+            nodeProps: { href: element?.url, target: element?.target },
+        }),
+        withOverrides: withButton,
+        renderAfterEditable: CustomFloatingButton,
+        options: {
+            isUrl: isValidUrl,
+            rangeBeforeOptions: {
+                matchString: ' ',
+                skipInvalid: true,
+                afterMatch: true,
+            },
+            triggerFloatingButtonHotkeys: 'command+shift+k, ctrl+shift+k',
+            appBridge,
+        },
+        then: (editor, { type }) => ({
+            deserializeHtml: {
+                rules: [
+                    {
+                        validNodeName: 'A',
+                        validClassName: 'btn',
+                    },
+                ],
+                getNode: (el) => ({
+                    type,
+                    url: el.getAttribute('href'),
+                    target: el.getAttribute('target') || '_blank',
+                }),
+            },
+        }),
+    })();
+
+export type ButtonPluginProps = Omit<PluginProps, 'styles'> & {
+    styles?: Record<string, CSSProperties & { hover?: CSSProperties }>;
+} & { appBridge: AppBridgeBlock };
+
+export class ButtonPlugin extends Plugin {
+    public styles: CSSProperties = {};
+    private appBridge: AppBridgeBlock;
+    constructor({ styles = BlockButtonStyles, ...props }: ButtonPluginProps) {
+        super(BUTTON_PLUGIN, {
+            button: ButtonButton,
+            markupElement: new ButtonMarkupElement(),
+            ...props,
+        });
+        this.styles = styles;
+        this.appBridge = props?.appBridge as AppBridgeBlock;
+    }
+
+    plugins() {
+        return [createButtonPlugin(this.appBridge)];
+    }
+}

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

@@ -0,0 +1,7 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export * from './createButtonPlugin';
+export * from './types';
+export * from './withButton';
+export * from './transforms/index';
+export * from './utils/index';

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

@@ -0,0 +1,8 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export * from './insertButton';
+export * from './submitFloatingButton';
+export * from './unwrapButton';
+export * from './upsertButton';
+export * from './upsertButtonText';
+export * from './wrapButton';

package/src/components/RichTextEditor/plugins/ButtonPlugin/transforms/insertButton.ts

@@ -0,0 +1,17 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { InsertNodesOptions, PlateEditor, TText, Value, insertNodes } from '@udecode/plate';
+import { TButtonElement } from '../types';
+import { CreateButtonNodeOptions, createButtonNode } from '../utils/index';
+
+export const insertButton = <V extends Value>(
+    editor: PlateEditor<V>,
+    createButtonNodeOptions: CreateButtonNodeOptions,
+    options?: InsertNodesOptions<V>
+) => {
+    insertNodes<TButtonElement | TText>(
+        editor,
+        [createButtonNode(editor, createButtonNodeOptions)],
+        options as InsertNodesOptions
+    );
+};

package/src/components/RichTextEditor/plugins/ButtonPlugin/transforms/submitFloatingButton.ts

@@ -0,0 +1,40 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { PlateEditor, Value, focusEditor, getPluginOptions } from '@udecode/plate';
+import { floatingButtonActions, floatingButtonSelectors } from '../components/FloatingButton/floatingButtonStore';
+import { ButtonPlugin, ELEMENT_BUTTON } from '../createButtonPlugin';
+import { upsertButton } from '.';
+
+export const submitFloatingButton = <V extends Value>(editor: PlateEditor<V>) => {
+    if (!editor.selection) {
+        return;
+    }
+
+    const { isUrl, forceSubmit } = getPluginOptions<ButtonPlugin, V>(editor, ELEMENT_BUTTON);
+    const url = floatingButtonSelectors.url();
+
+    const isValid = isUrl?.(url) || forceSubmit;
+    if (!isValid) {
+        return;
+    }
+
+    const text = floatingButtonSelectors.text();
+    const buttonStyle = floatingButtonSelectors.buttonStyle();
+    const target = floatingButtonSelectors.newTab() ? undefined : '_self';
+
+    floatingButtonActions.hide();
+
+    upsertButton(editor, {
+        url,
+        text,
+        buttonStyle,
+        target,
+        isUrl: (_url) => (forceSubmit || !isUrl ? true : isUrl(_url)),
+    });
+
+    setTimeout(() => {
+        focusEditor(editor, editor.selection ?? undefined);
+    }, 0);
+
+    return true;
+};

package/src/components/RichTextEditor/plugins/ButtonPlugin/transforms/unwrapButton.ts

@@ -0,0 +1,68 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import {
+    PlateEditor,
+    UnwrapNodesOptions,
+    Value,
+    getAboveNode,
+    getPluginType,
+    isElement,
+    splitNodes,
+    unwrapNodes,
+    withoutNormalizing,
+} from '@udecode/plate';
+import { ELEMENT_BUTTON } from '../createButtonPlugin';
+
+/**
+ * Unwrap button node.
+ */
+export const unwrapButton = <V extends Value>(
+    editor: PlateEditor<V>,
+    options?: UnwrapNodesOptions & {
+        split?: boolean;
+    }
+) => {
+    return withoutNormalizing(editor, () => {
+        if (options?.split) {
+            const buttonAboveAnchor = getAboveNode(editor, {
+                at: editor.selection?.anchor,
+                match: { type: getPluginType(editor, ELEMENT_BUTTON) },
+            });
+
+            // anchor in button
+            if (buttonAboveAnchor) {
+                splitNodes(editor, {
+                    at: editor.selection?.anchor,
+                    match: (n) => isElement(n) && n.type === getPluginType(editor, ELEMENT_BUTTON),
+                });
+                unwrapButton(editor, {
+                    at: editor.selection?.anchor,
+                });
+                return true;
+            }
+            const buttonAboveFocus = getAboveNode(editor, {
+                at: editor.selection?.focus,
+                match: { type: getPluginType(editor, ELEMENT_BUTTON) },
+            });
+
+            // focus in button
+            if (buttonAboveFocus) {
+                splitNodes(editor, {
+                    at: editor.selection?.focus,
+                    match: (n) => isElement(n) && n.type === getPluginType(editor, ELEMENT_BUTTON),
+                });
+                unwrapButton(editor, {
+                    at: editor.selection?.focus,
+                });
+                return true;
+            }
+        }
+
+        unwrapNodes(editor, {
+            match: { type: getPluginType(editor, ELEMENT_BUTTON) },
+            ...options,
+        });
+
+        return;
+    });
+};

package/src/components/RichTextEditor/plugins/ButtonPlugin/transforms/upsertButton.ts

@@ -0,0 +1,198 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import {
+    InsertNodesOptions,
+    PlateEditor,
+    TNode,
+    TNodeEntry,
+    UnwrapNodesOptions,
+    Value,
+    WrapNodesOptions,
+    findNode,
+    getAboveNode,
+    getEditorString,
+    getNodeLeaf,
+    getNodeProps,
+    getPluginOptions,
+    getPluginType,
+    isDefined,
+    isExpanded,
+    removeNodes,
+    setNodes,
+} from '@udecode/plate';
+import { Path } from 'slate';
+import { ButtonPlugin, ELEMENT_BUTTON } from '../createButtonPlugin';
+import { RichTextButtonStyle, TButtonElement } from '../types';
+import { CreateButtonNodeOptions } from '../utils/index';
+import { insertButton, unwrapButton, upsertButtonText, wrapButton } from '.';
+
+export type UpsertButtonOptions<V extends Value = Value> = CreateButtonNodeOptions & {
+    /**
+     * If true, insert text when selection is in url.
+     */
+    insertTextInButton?: boolean;
+    insertNodesOptions?: InsertNodesOptions<V>;
+    unwrapNodesOptions?: UnwrapNodesOptions<V>;
+    wrapNodesOptions?: WrapNodesOptions<V>;
+    isUrl?: (url: string) => boolean;
+};
+
+/**
+ * If selection in a button or is not url:
+ * - insert text with url, exit
+ * If selection is expanded or `update` in a button:
+ * - remove button node, get button text
+ * Then:
+ * - insert button node
+ */
+export const upsertButton = <V extends Value>(
+    editor: PlateEditor<V>,
+    {
+        url,
+        text,
+        buttonStyle,
+        target,
+        insertTextInButton,
+        insertNodesOptions,
+        isUrl = getPluginOptions<ButtonPlugin, V>(editor, ELEMENT_BUTTON).isUrl,
+    }: UpsertButtonOptions<V>
+) => {
+    const at = editor.selection;
+    if (!at) {
+        return;
+    }
+
+    const buttonAbove = getAboveNode<TButtonElement>(editor, {
+        at,
+        match: { type: getPluginType(editor, ELEMENT_BUTTON) },
+    });
+
+    // anchor and focus in button -> insert text
+    if (insertTextInButton && buttonAbove) {
+        // we don't want to insert marks in buttons
+        editor.insertText(url);
+        return true;
+    }
+
+    if (!isUrl?.(url)) {
+        return;
+    }
+
+    if (isDefined(text) && text.length === 0) {
+        text = url;
+    }
+
+    if (buttonAbove) {
+        editButtonUrlAndTarget<V>(url, editor, buttonAbove, target, buttonStyle, text);
+        return true;
+    }
+
+    // selection contains at one edge edge or between the edges
+    const buttonEntry = findNode<TButtonElement>(editor, {
+        at,
+        match: { type: getPluginType(editor, ELEMENT_BUTTON) },
+    });
+
+    const [buttonNode, buttonPath] = buttonEntry ?? [];
+
+    const shouldReplaceText = shouldReplaceButtonText<V>(editor, buttonPath, text);
+
+    if (isExpanded(at)) {
+        anchorAndFocusInButton<V>(buttonAbove, editor, url, buttonStyle, target, text);
+        return true;
+    }
+
+    if (shouldReplaceText) {
+        removeNodes(editor, {
+            at: buttonPath,
+        });
+    }
+
+    const props = getNodeProps(buttonNode ?? ({} as TNode));
+
+    const path = editor.selection?.focus.path;
+    if (!path) {
+        return;
+    }
+
+    // button text should have the focused leaf marks
+    const leaf = getNodeLeaf(editor, path);
+
+    // if text is empty, text is url
+    if (!text?.length) {
+        text = url;
+    }
+
+    insertButton(
+        editor,
+        {
+            ...props,
+            url,
+            target,
+            children: [
+                {
+                    ...leaf,
+                    text,
+                },
+            ],
+        },
+        insertNodesOptions
+    );
+    return true;
+};
+
+function shouldReplaceButtonText<V extends Value>(editor: PlateEditor<V>, buttonPath?: Path, text?: string) {
+    return buttonPath && text?.length && text !== getEditorString(editor, buttonPath);
+}
+
+function anchorAndFocusInButton<V extends Value>(
+    buttonAbove: undefined,
+    editor: PlateEditor<V>,
+    url: string,
+    buttonStyle?: RichTextButtonStyle,
+    target?: string,
+    text?: string
+) {
+    if (buttonAbove) {
+        unwrapButton(editor, {
+            at: buttonAbove[1],
+        });
+    } else {
+        unwrapButton(editor, {
+            split: true,
+        });
+    }
+
+    wrapButton(editor, {
+        url,
+        buttonStyle,
+        target,
+    });
+
+    upsertButtonText(editor, { url, target, text });
+}
+
+function editButtonUrlAndTarget<V extends Value>(
+    url: string,
+    editor: PlateEditor<V>,
+    buttonAbove: TNodeEntry<TButtonElement>,
+    target?: string,
+    buttonStyle?: string,
+    text?: string
+) {
+    if (
+        url !== buttonAbove[0]?.url ||
+        target !== buttonAbove[0]?.target ||
+        buttonStyle !== buttonAbove[0]?.buttonStyle
+    ) {
+        setNodes<TButtonElement>(
+            editor,
+            { url, target, buttonStyle },
+            {
+                at: buttonAbove[1],
+            }
+        );
+    }
+
+    upsertButtonText(editor, { url, text, target });
+}

package/src/components/RichTextEditor/plugins/ButtonPlugin/transforms/upsertButtonText.ts

@@ -0,0 +1,40 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import {
+    PlateEditor,
+    TText,
+    Value,
+    getAboveNode,
+    getEditorString,
+    getPluginType,
+    replaceNodeChildren,
+} from '@udecode/plate';
+import { ELEMENT_BUTTON, TButtonElement } from '..';
+import { UpsertButtonOptions } from './upsertButton';
+
+/**
+ * If the text is different than the button above text, replace button children by a new text.
+ * The new text has the same marks than the first text replaced.
+ */
+export const upsertButtonText = <V extends Value>(editor: PlateEditor<V>, { text }: UpsertButtonOptions<V>) => {
+    const newButton = getAboveNode<TButtonElement>(editor, {
+        match: { type: getPluginType(editor, ELEMENT_BUTTON) },
+    });
+
+    if (newButton) {
+        const [newButtonNode, newButtonPath] = newButton;
+
+        if (text?.length && text !== getEditorString(editor, newButtonPath)) {
+            const firstText = newButtonNode.children[0];
+
+            // remove button children
+            replaceNodeChildren<TText>(editor, {
+                at: newButtonPath,
+                nodes: { ...firstText, text },
+                insertOptions: {
+                    select: true,
+                },
+            });
+        }
+    }
+};

package/src/components/RichTextEditor/plugins/ButtonPlugin/transforms/wrapButton.ts

@@ -0,0 +1,30 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { PlateEditor, Value, WrapNodesOptions, getPluginType, wrapNodes } from '@udecode/plate';
+import { ELEMENT_BUTTON, RichTextButtonStyle, TButtonElement } from '..';
+
+export interface WrapButtonOptions<V extends Value = Value> extends WrapNodesOptions<V> {
+    url: string;
+    buttonStyle?: RichTextButtonStyle;
+    target?: string;
+}
+
+/**
+ * Wrap a button node with split.
+ */
+export const wrapButton = <V extends Value>(
+    editor: PlateEditor<V>,
+    { url, buttonStyle, target, ...options }: WrapButtonOptions<V>
+) => {
+    wrapNodes<TButtonElement, Value>(
+        editor,
+        {
+            type: getPluginType(editor, ELEMENT_BUTTON),
+            url,
+            buttonStyle,
+            target,
+            children: [],
+        },
+        { split: true, ...options } as WrapNodesOptions
+    );
+};

package/src/components/RichTextEditor/plugins/ButtonPlugin/types.ts

@@ -0,0 +1,13 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { TLinkElement } from '@udecode/plate';
+
+export type TButtonElement = TLinkElement & {
+    chosenLink?: {
+        searchResult?: {
+            link?: string;
+        };
+    };
+};
+
+export type RichTextButtonStyle = 'primary' | 'secondary' | 'tertiary';

package/src/components/RichTextEditor/plugins/ButtonPlugin/utils/createButtonNode.ts

@@ -0,0 +1,28 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { PlateEditor, TText, Value, getPluginType } from '@udecode/plate';
+import { RichTextButtonStyle, TButtonElement } from '..';
+import { ELEMENT_BUTTON } from '../createButtonPlugin';
+
+export interface CreateButtonNodeOptions {
+    url: string;
+    text?: string;
+    buttonStyle?: RichTextButtonStyle;
+    target?: string;
+    children?: TText[];
+}
+
+export const createButtonNode = <V extends Value>(
+    editor: PlateEditor<V>,
+    { url, text = '', buttonStyle = 'primary', target, children }: CreateButtonNodeOptions
+): TButtonElement => {
+    const type = getPluginType(editor, ELEMENT_BUTTON);
+
+    return {
+        type,
+        url,
+        target,
+        buttonStyle,
+        children: children ?? [{ text }],
+    };
+};

package/src/components/RichTextEditor/plugins/ButtonPlugin/utils/getButtonStyle.ts

@@ -0,0 +1,14 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { PlateEditor, getAboveNode } from '@udecode/plate';
+import { ELEMENT_BUTTON, RichTextButtonStyle, TButtonElement } from '..';
+
+export const getButtonStyle = (editor: PlateEditor): RichTextButtonStyle => {
+    const linkNode = getAboveNode<TButtonElement>(editor, { match: { type: ELEMENT_BUTTON } });
+
+    if (!Array.isArray(linkNode)) {
+        return 'primary';
+    }
+
+    return (linkNode[0]?.buttonStyle as RichTextButtonStyle) || 'primary';
+};