@frontify/guideline-blocks-settings 0.33.4 → 0.33.5

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

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

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

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

@@ -1,18 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { PlateEditor, getAboveNode } from '@udecode/plate';
-import { ELEMENT_BUTTON, TButtonElement } from '..';
-
-const getLinkNode = (editor: PlateEditor, cb: (link: TButtonElement) => string): string => {
-    const linkNode = getAboveNode<TButtonElement>(editor, { match: { type: ELEMENT_BUTTON } });
-
-    if (!Array.isArray(linkNode)) {
-        return '';
-    }
-
-    return cb(linkNode[0]);
-};
-
-export const getUrlFromEditor = (editor: PlateEditor) => {
-    return getLinkNode(editor, (link) => link.url ?? '');
-};

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

@@ -1,8 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-export * from './getUrl';
-export * from './createButtonNode';
-export * from './triggerFloatingButton';
-export * from './triggerFloatingButtonEdit';
-export * from './triggerFloatingButtonInsert';
-export * from './styles';

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

@@ -1,83 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { CSSProperties } from 'react';
-
-export const BlockButtonStyles: Record<string, CSSProperties & { hover?: CSSProperties }> = {
-    buttonPrimary: {
-        fontFamily: 'var(--f-theme-settings-button-primary-font-family)',
-        fontSize: 'var(--f-theme-settings-button-primary-font-size)',
-        fontWeight: 'var(--f-theme-settings-button-primary-font-weight)',
-        lineHeight: 'var(--f-theme-settings-button-primary-line-height)',
-        paddingTop: 'var(--f-theme-settings-button-primary-padding-top)',
-        paddingRight: 'var(--f-theme-settings-button-primary-padding-right)',
-        paddingBottom: 'var(--f-theme-settings-button-primary-padding-bottom)',
-        paddingLeft: 'var(--f-theme-settings-button-primary-padding-left)',
-        fontStyle: 'var(--f-theme-settings-button-primary-font-style)',
-        textTransform: 'var(--f-theme-settings-button-primary-text-transform)' as CSSProperties['textTransform'],
-        backgroundColor: 'var(--f-theme-settings-button-primary-background-color)',
-        borderColor: 'var(--f-theme-settings-button-primary-border-color)',
-        borderRadius: 'var(--f-theme-settings-button-primary-border-radius)',
-        borderWidth: 'var(--f-theme-settings-button-primary-border-width)',
-        color: 'var(--f-theme-settings-button-primary-color)',
-        marginTop: '10px',
-        marginBottom: '10px',
-        display: 'inline-block',
-        hover: {
-            backgroundColor: 'var(--f-theme-settings-button-primary-background-color-hover)',
-            borderColor: 'var(--f-theme-settings-button-primary-border-color-hover)',
-            color: 'var(--f-theme-settings-button-primary-color-hover)',
-        },
-    },
-
-    buttonSecondary: {
-        fontFamily: 'var(--f-theme-settings-button-secondary-font-family)',
-        fontSize: 'var(--f-theme-settings-button-secondary-font-size)',
-        fontWeight: 'var(--f-theme-settings-button-secondary-font-weight)',
-        lineHeight: 'var(--f-theme-settings-button-secondary-line-height)',
-        paddingTop: 'var(--f-theme-settings-button-secondary-padding-top)',
-        paddingRight: 'var(--f-theme-settings-button-secondary-padding-right)',
-        paddingBottom: 'var(--f-theme-settings-button-secondary-padding-bottom)',
-        paddingLeft: 'var(--f-theme-settings-button-secondary-padding-left)',
-        fontStyle: 'var(--f-theme-settings-button-secondary-font-style)',
-        textTransform: 'var(--f-theme-settings-button-secondary-text-transform)' as CSSProperties['textTransform'],
-        backgroundColor: 'var(--f-theme-settings-button-secondary-background-color)',
-        borderColor: 'var(--f-theme-settings-button-secondary-border-color)',
-        borderRadius: 'var(--f-theme-settings-button-secondary-border-radius)',
-        borderWidth: 'var(--f-theme-settings-button-secondary-border-width)',
-        color: 'var(--f-theme-settings-button-secondary-color)',
-        display: 'inline-block',
-        marginTop: '10px',
-        marginBottom: '10px',
-        hover: {
-            backgroundColor: 'var(--f-theme-settings-button-secondary-background-color-hover)',
-            borderColor: 'var(--f-theme-settings-button-secondary-border-color-hover)',
-            color: 'var(--f-theme-settings-button-secondary-color-hover)',
-        },
-    },
-
-    buttonTertiary: {
-        fontFamily: 'var(--f-theme-settings-button-tertiary-font-family)',
-        fontSize: 'var(--f-theme-settings-button-tertiary-font-size)',
-        fontWeight: 'var(--f-theme-settings-button-tertiary-font-weight)',
-        lineHeight: 'var(--f-theme-settings-button-tertiary-line-height)',
-        paddingTop: 'var(--f-theme-settings-button-tertiary-padding-top)',
-        paddingRight: 'var(--f-theme-settings-button-tertiary-padding-right)',
-        paddingBottom: 'var(--f-theme-settings-button-tertiary-padding-bottom)',
-        paddingLeft: 'var(--f-theme-settings-button-tertiary-padding-left)',
-        fontStyle: 'var(--f-theme-settings-button-tertiary-font-style)',
-        textTransform: 'var(--f-theme-settings-button-tertiary-text-transform)' as CSSProperties['textTransform'],
-        backgroundColor: 'var(--f-theme-settings-button-tertiary-background-color)',
-        borderColor: 'var(--f-theme-settings-button-tertiary-border-color)',
-        borderRadius: 'var(--f-theme-settings-button-tertiary-border-radius)',
-        borderWidth: 'var(--f-theme-settings-button-tertiary-border-width)',
-        color: 'var(--f-theme-settings-button-tertiary-color)',
-        display: 'inline-block',
-        marginTop: '10px',
-        marginBottom: '10px',
-        hover: {
-            backgroundColor: 'var(--f-theme-settings-button-tertiary-background-color-hover)',
-            borderColor: 'var(--f-theme-settings-button-tertiary-border-color-hover)',
-            color: 'var(--f-theme-settings-button-tertiary-color-hover)',
-        },
-    },
-};

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

@@ -1,23 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { PlateEditor, Value } from '@udecode/plate';
-import { floatingButtonSelectors } from '../components';
-import { triggerFloatingButtonEdit, triggerFloatingButtonInsert } from '.';
-
-export const triggerFloatingButton = <V extends Value>(
-    editor: PlateEditor<V>,
-    {
-        focused,
-    }: {
-        focused?: boolean;
-    } = {},
-) => {
-    if (floatingButtonSelectors.mode() === 'edit') {
-        triggerFloatingButtonEdit(editor);
-        return;
-    }
-
-    triggerFloatingButtonInsert(editor, {
-        focused,
-    });
-};

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

@@ -1,30 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { PlateEditor, Value, findNode, getEditorString, getPluginType } from '@udecode/plate';
-import { ELEMENT_BUTTON, TButtonElement } from '..';
-import { floatingButtonActions } from '../components/FloatingButton/floatingButtonStore';
-
-export const triggerFloatingButtonEdit = <V extends Value>(editor: PlateEditor<V>) => {
-    const entry = findNode<TButtonElement>(editor, {
-        match: { type: getPluginType(editor, ELEMENT_BUTTON) },
-    });
-    if (!entry) {
-        return;
-    }
-
-    const [link, path] = entry;
-
-    let text = getEditorString(editor, path);
-
-    floatingButtonActions.url(link.url);
-
-    floatingButtonActions.newTab(link.target === undefined);
-
-    if (text === link.url) {
-        text = '';
-    }
-
-    floatingButtonActions.text(text);
-
-    floatingButtonActions.isEditing(true);
-};

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

@@ -1,45 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { PlateEditor, Value, getEditorString, getPluginType, isRangeAcrossBlocks, someNode } from '@udecode/plate';
-import { floatingButtonActions, floatingButtonSelectors } from '../components/FloatingButton/floatingButtonStore';
-import { ELEMENT_BUTTON } from '../createButtonPlugin';
-
-/**
- * Trigger floating button.
- *
- * Do not trigger when:
- * - selection is across blocks
- * - selection has more than one leaf node
- * - lowest selection is not text
- * - selection has a button node
- */
-export const triggerFloatingButtonInsert = <V extends Value>(
-    editor: PlateEditor<V>,
-    {
-        focused,
-    }: {
-        focused?: boolean;
-    } = {},
-) => {
-    if (floatingButtonSelectors.mode()) {
-        return;
-    }
-
-    if (!focused) {
-        return;
-    }
-
-    if (isRangeAcrossBlocks(editor, { at: editor.selection })) {
-        return;
-    }
-
-    const hasButton = someNode(editor, {
-        match: { type: getPluginType(editor, ELEMENT_BUTTON) },
-    });
-    if (hasButton) {
-        return;
-    }
-
-    floatingButtonActions.text(getEditorString(editor, editor.selection));
-    floatingButtonActions.show('insert', editor.id);
-};

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

@@ -1,106 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import {
-    AnyObject,
-    EText,
-    PlateEditor,
-    Value,
-    WithOverride,
-    getAboveNode,
-    getNextNodeStartPoint,
-    getPluginType,
-    getPreviousNodeEndPoint,
-    insertNodes,
-    isCollapsed,
-    isEndPoint,
-    isStartPoint,
-    mockPlugin,
-    select,
-    withRemoveEmptyNodes,
-} from '@udecode/plate';
-import { Path, Point, Range } from 'slate';
-import { ELEMENT_BUTTON } from './createButtonPlugin';
-
-/**
- * Insert space after a url to wrap a button.
- * Lookup from the block start to the cursor to check if there is an url.
- * If not found, lookup before the cursor for a space character to check the url.
- *
- * On insert data:
- * Paste a string inside a button element will edit its children text but not its url.
- *
- */
-
-export const withButton: WithOverride = (editor, { type }) => {
-    const { apply, normalizeNode } = editor;
-
-    editor.apply = (operation) => {
-        if (operation.type !== 'set_selection') {
-            apply(operation);
-            return;
-        }
-
-        const range = operation.newProperties;
-        if (!range?.focus || !range.anchor || !isCollapsed(range as Range)) {
-            apply(operation);
-            return;
-        }
-
-        const entry = getAboveNode(editor, {
-            at: range as Range,
-            match: { type: getPluginType(editor, ELEMENT_BUTTON) },
-        });
-
-        if (entry) {
-            const [, path] = entry;
-
-            let newPoint: Point | undefined;
-
-            if (isStartPoint(editor, range.focus, path)) {
-                newPoint = getPreviousNodeEndPoint(editor, path);
-            }
-
-            if (isEndPoint(editor, range.focus, path)) {
-                newPoint = getNextNodeStartPoint(editor, path);
-            }
-
-            if (newPoint) {
-                operation.newProperties = {
-                    anchor: newPoint,
-                    focus: newPoint,
-                };
-            }
-        }
-
-        apply(operation);
-    };
-
-    editor.normalizeNode = ([node, path]) => {
-        if (node.type === getPluginType(editor, ELEMENT_BUTTON)) {
-            const range = editor.selection as Range | null;
-
-            if (range && isCollapsed(range) && isEndPoint(editor, range.focus, path)) {
-                const nextPoint = getNextNodeStartPoint(editor, path);
-
-                // select next text node if any
-                if (nextPoint) {
-                    select(editor, nextPoint);
-                } else {
-                    // insert text node then select
-                    const nextPath = Path.next(path);
-                    insertNodes(editor, { text: '' } as EText<Value>, { at: nextPath });
-                    select(editor, nextPath);
-                }
-            }
-        }
-
-        normalizeNode([node, path]);
-    };
-
-    return withRemoveEmptyNodes<Value, PlateEditor<Value>>(
-        editor,
-        mockPlugin<AnyObject, Value, PlateEditor<Value>>({
-            options: { types: type },
-        }),
-    );
-};

package/src/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/CustomFloatingLink.tsx

@@ -1,26 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { TEditableProps, useFloatingLinkSelectors } from '@udecode/plate';
-
-import { EditModal } from './EditLinkModal';
-import { FloatingLink } from './FloatingLink';
-import { InsertLinkModal } from './InsertLinkModal/InsertLinkModal';
-
-export const CustomFloatingLink = ({ readOnly }: TEditableProps) => {
-    const isEditing = useFloatingLinkSelectors().isEditing();
-
-    if (readOnly) {
-        return null;
-    }
-
-    const input = <InsertLinkModal />;
-    const editContent = isEditing ? input : <EditModal />;
-
-    return (
-        <>
-            <FloatingLink.InsertRoot>{input}</FloatingLink.InsertRoot>
-
-            <FloatingLink.EditRoot>{editContent}</FloatingLink.EditRoot>
-        </>
-    );
-};

package/src/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/EditLinkModal/EditModal.tsx

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

package/src/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/EditLinkModal/index.ts

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

package/src/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/EditLinkModal/useFloatingLinkEdit.ts

@@ -1,113 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import {
-    ELEMENT_LINK,
-    FloatingLinkProps,
-    HTMLPropsAs,
-    LinkPlugin,
-    floatingLinkActions,
-    floatingLinkSelectors,
-    getAboveNode,
-    getDefaultBoundingClientRect,
-    getEndPoint,
-    getPluginOptions,
-    getPluginType,
-    getRangeBoundingClientRect,
-    getStartPoint,
-    someNode,
-    triggerFloatingLinkEdit,
-    useComposedRef,
-    useEditorRef,
-    useFloatingLinkEnter,
-    useFloatingLinkEscape,
-    useFloatingLinkSelectors,
-    useHotkeys,
-    usePlateSelectors,
-    useVirtualFloatingLink,
-} from '@udecode/plate';
-import { useCallback, useEffect } from 'react';
-import { getLinkFromEditor } from '../../../../../Link';
-
-export const useFloatingLinkEdit = ({ floatingOptions, ...props }: FloatingLinkProps): HTMLPropsAs<'div'> => {
-    const editor = useEditorRef();
-    const keyEditor = usePlateSelectors().keyEditor();
-    const mode = useFloatingLinkSelectors().mode();
-    const open = useFloatingLinkSelectors().isOpen(editor.id);
-
-    const { triggerFloatingLinkHotkeys = 'command+k, ctrl+k' } = getPluginOptions<LinkPlugin>(editor, ELEMENT_LINK);
-
-    const getBoundingClientRect = useCallback(() => {
-        const entry = getAboveNode(editor, {
-            match: { type: getPluginType(editor, ELEMENT_LINK) },
-        });
-
-        if (entry) {
-            const [, path] = entry;
-            return getRangeBoundingClientRect(editor, {
-                anchor: getStartPoint(editor, path),
-                focus: getEndPoint(editor, path),
-            });
-        }
-
-        return getDefaultBoundingClientRect();
-    }, [editor]);
-
-    const isOpen = open && mode === 'edit';
-
-    const { update, style, floating } = useVirtualFloatingLink({
-        editorId: editor.id,
-        open: isOpen,
-        getBoundingClientRect,
-        ...floatingOptions,
-    });
-
-    useEffect(() => {
-        const url = getLinkFromEditor(editor);
-        if (url) {
-            floatingLinkActions.url(url);
-        }
-
-        if (
-            editor.selection &&
-            someNode(editor, {
-                match: { type: getPluginType(editor, ELEMENT_LINK) },
-            })
-        ) {
-            floatingLinkActions.show('edit', editor.id);
-            update();
-            return;
-        }
-
-        if (floatingLinkSelectors.mode() === 'edit') {
-            floatingLinkActions.hide();
-        }
-    }, [editor, keyEditor, update]);
-
-    useHotkeys(
-        triggerFloatingLinkHotkeys,
-        (e) => {
-            e.preventDefault();
-
-            if (floatingLinkSelectors.mode() === 'edit') {
-                triggerFloatingLinkEdit(editor);
-            }
-        },
-        {
-            enableOnContentEditable: true,
-        },
-        [],
-    );
-
-    useFloatingLinkEnter();
-
-    useFloatingLinkEscape();
-
-    return {
-        style: {
-            ...style,
-            zIndex: 1000,
-        },
-        ...props,
-        ref: useComposedRef<HTMLElement | null>(props.ref, floating),
-    };
-};

package/src/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/FloatingLink.tsx

@@ -1,45 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import {
-    FloatingLinkProps,
-    FloatingLink as PlateFloatingLink,
-    createComponentAs,
-    createElementAs,
-} from '@udecode/plate';
-import { useFloatingLinkEdit } from './EditLinkModal';
-import { useFloatingLinkInsert } from './InsertLinkModal/useFloatingLinkInsert';
-
-const FloatingLinkInsertRoot = createComponentAs<FloatingLinkProps>((props) => {
-    const htmlProps = useFloatingLinkInsert({
-        ...props,
-        floatingOptions: {
-            strategy: 'absolute',
-        },
-    });
-
-    if (htmlProps.style?.display === 'none') {
-        return null;
-    }
-
-    return createElementAs('div', htmlProps);
-});
-
-const FloatingLinkEditRoot = createComponentAs<FloatingLinkProps>((props) => {
-    const htmlProps = useFloatingLinkEdit({
-        ...props,
-        floatingOptions: {
-            strategy: 'absolute',
-        },
-    });
-
-    if (htmlProps.style?.display === 'none') {
-        return null;
-    }
-
-    return createElementAs('div', htmlProps);
-});
-
-PlateFloatingLink.EditRoot = FloatingLinkEditRoot;
-PlateFloatingLink.InsertRoot = FloatingLinkInsertRoot;
-
-export const FloatingLink = PlateFloatingLink;

package/src/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/InsertLinkModal/InsertLinkModal.tsx

@@ -1,5 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { InsertModal, useInsertModal } from '.';
-
-export const InsertLinkModal = () => <InsertModal {...useInsertModal()} testId="floating-link-insert" />;