@frontify/guideline-blocks-settings 0.33.4 → 0.34.0

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

@@ -1,30 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { focusEditor, useEditorRef, useHotkeys } from '@udecode/plate';
-import { floatingButtonActions, floatingButtonSelectors } from './floatingButtonStore';
-
-export const useFloatingButtonEscape = () => {
-    const editor = useEditorRef();
-
-    useHotkeys(
-        'escape',
-        () => {
-            if (floatingButtonSelectors.mode() !== 'edit') {
-                return;
-            }
-
-            if (floatingButtonSelectors.isEditing()) {
-                floatingButtonActions.show('edit', editor.id);
-                focusEditor(editor, editor.selection ?? undefined);
-                return;
-            }
-
-            floatingButtonActions.hide();
-        },
-        {
-            enableOnFormTags: ['INPUT'],
-            enableOnContentEditable: true,
-        },
-        [],
-    );
-};

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

@@ -1,71 +0,0 @@
-/* (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

@@ -1,22 +0,0 @@
-/* (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

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

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

@@ -1,118 +0,0 @@
-/* (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 type { CSSProperties } from 'react';
-import { isValidUrl } from '../../../Link/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';
-
-// eslint-disable-next-line
-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 };
-
-// eslint-disable-next-line
-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

@@ -1,7 +0,0 @@
-/* (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

@@ -1,8 +0,0 @@
-/* (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

@@ -1,17 +0,0 @@
-/* (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

@@ -1,40 +0,0 @@
-/* (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

@@ -1,68 +0,0 @@
-/* (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

@@ -1,198 +0,0 @@
-/* (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

@@ -1,40 +0,0 @@
-/* (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

@@ -1,30 +0,0 @@
-/* (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

@@ -1,13 +0,0 @@
-/* (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';