@frontify/guideline-blocks-settings 0.27.0 → 0.28.0

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

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

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

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

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

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

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

@@ -0,0 +1,43 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { IconPen16, IconTrashBin16 } from '@frontify/fondue';
+import { useFloatingLinkUrlInput } from '@udecode/plate';
+import { FloatingLink } from '../FloatingLink';
+import { BlockStyles } from '../../../styles';
+
+export const EditModal = () => {
+    const urlHtmlProps = useFloatingLinkUrlInput({});
+
+    return (
+        <div data-test-id="floating-link-edit" className="tw-bg-white tw-rounded tw-shadow tw-p-4 tw-min-w-[400px]">
+            <span data-test-id={'preview-link-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-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

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

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

@@ -0,0 +1,113 @@
+/* (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 { getUrlFromEditor } from '../../utils';
+
+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 = getUrlFromEditor(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

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

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

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

@@ -0,0 +1,105 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { AppBridgeBlock } from '@frontify/app-bridge';
+import {
+    Button,
+    ButtonEmphasis,
+    ButtonSize,
+    ButtonStyle,
+    Checkbox,
+    FormControl,
+    IconCheckMark20,
+    TextInput,
+} from '@frontify/fondue';
+import { FC, ReactNode } from 'react';
+import { LinkSelector } from '../../../shared/LinkSelector';
+import { InsertModalStateProps } from './types';
+
+type Props = {
+    state: InsertModalStateProps;
+    onTextChange: (value: string) => void;
+    onUrlChange: (value: string) => void;
+    onToggleTab: (checked: boolean) => void;
+    onCancel: () => void;
+    onSave: (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | KeyboardEvent | undefined) => void;
+    hasValues: boolean;
+    isValidUrlOrEmpty: (url: string) => boolean | undefined;
+    testId?: string;
+    children?: ReactNode;
+    appBridge: AppBridgeBlock;
+};
+
+export const InsertModal: FC<Props> = ({
+    state,
+    onTextChange,
+    onUrlChange,
+    onToggleTab,
+    onCancel,
+    onSave,
+    isValidUrlOrEmpty,
+    hasValues,
+    testId,
+    appBridge,
+    children,
+}) => (
+    <div data-test-id={testId} className="tw-bg-white tw-rounded tw-shadow tw-p-7 tw-min-w-[400px] tw-overflow-y-auto">
+        <FormControl
+            label={{
+                children: 'Text',
+                htmlFor: 'linkText',
+                required: true,
+            }}
+        >
+            <TextInput id="linkText" value={state.text} placeholder="Link Text" onChange={onTextChange} />
+        </FormControl>
+
+        {children}
+
+        <div className="tw-pt-5">
+            <FormControl
+                label={{
+                    children: 'URL',
+                    htmlFor: 'url',
+                    required: true,
+                }}
+            >
+                <TextInput
+                    id="url"
+                    value={state.url}
+                    placeholder="https://example.com"
+                    focusOnMount
+                    onChange={onUrlChange}
+                />
+            </FormControl>
+            {!isValidUrlOrEmpty(state?.url) && <div className="tw-text-red-65 tw-mt-3">Please enter a valid URL.</div>}
+        </div>
+
+        <div className="tw-mt-3">
+            <LinkSelector url={state.url} appBridge={appBridge} onUrlChange={onUrlChange} />
+        </div>
+
+        <div className="tw-mt-3">
+            <Checkbox value="new-tab" label="Open in new tab" state={state.newTab} onChange={onToggleTab} />
+        </div>
+        <div className="tw-mt-3">
+            <div className={'tw-pt-5 tw-flex tw-gap-x-3 tw-justify-end tw-border-t tw-border-t-black-10'}>
+                <Button
+                    onClick={onCancel}
+                    size={ButtonSize.Medium}
+                    style={ButtonStyle.Default}
+                    emphasis={ButtonEmphasis.Default}
+                >
+                    Cancel
+                </Button>
+                <Button
+                    onClick={onSave}
+                    size={ButtonSize.Medium}
+                    icon={<IconCheckMark20 />}
+                    disabled={!hasValues || !isValidUrlOrEmpty(state?.url)}
+                >
+                    Save
+                </Button>
+            </div>
+        </div>
+    </div>
+);

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

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

package/src/components/RichTextEditor/plugins/LinkPlugin/FloatingLink/InsertLinkModal/types.ts

@@ -0,0 +1,16 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { CheckboxState } from '@frontify/fondue';
+
+export type InsertModalDispatchType = { type: string; payload?: Partial<InsertModalStateProps> };
+
+export type InsertModalStateProps = {
+    url: string;
+    text: string;
+    newTab: CheckboxState;
+};
+
+export type InitiallyExpandedItems = {
+    documentId: number | undefined;
+    pageId: number | undefined;
+};