@frontify/guideline-blocks-settings 0.27.0 → 0.28.0

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

@@ -0,0 +1,30 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { ChangeEventHandler, useCallback, useEffect, useRef } from 'react';
+import { HTMLPropsAs, mergeProps, useComposedRef } from '@udecode/plate';
+import { floatingButtonActions, floatingButtonSelectors, useFloatingButtonSelectors } from './floatingButtonStore';
+
+export const useFloatingButtonUrlInput = (props: HTMLPropsAs<'input'>): HTMLPropsAs<'input'> => {
+    const updated = useFloatingButtonSelectors().updated();
+    const ref = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        if (ref.current && updated) {
+            setTimeout(() => {
+                ref.current?.focus();
+            }, 0);
+        }
+    }, [updated]);
+
+    const onChange: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
+        floatingButtonActions.url(e.target.value);
+    }, []);
+
+    return mergeProps(
+        {
+            onChange,
+            defaultValue: floatingButtonSelectors.url(),
+        },
+        { ...props, ref: useComposedRef<HTMLInputElement>(props.ref, ref) }
+    );
+};

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

@@ -0,0 +1,81 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { FormControl } from '@frontify/fondue';
+import { CSSProperties, ReactElement, ReactNode, useState } from 'react';
+import { InsertModal } from '../../../../LinkPlugin/FloatingLink/InsertLinkModal/InsertModal';
+import { useInsertModal } from './useInsertModal';
+import { BlockStyles } from '../../../../styles';
+
+export const InsertButtonModal = () => {
+    const modalProps = useInsertModal();
+    const { state, onButtonStyleChange } = modalProps;
+
+    return (
+        <InsertModal {...modalProps} testId="floating-button-insert">
+            <div className="tw-pt-5">
+                <FormControl
+                    label={{
+                        children: 'Button Style',
+                        htmlFor: 'buttonStyle',
+                        required: true,
+                    }}
+                >
+                    <HoverableButton
+                        id="primary"
+                        styles={BlockStyles.buttonPrimary}
+                        isActive={state.buttonStyle === 'primary'}
+                        onClick={() => onButtonStyleChange('primary')}
+                    >
+                        {state.text || 'Primary Button'}
+                    </HoverableButton>
+
+                    <HoverableButton
+                        id="secondary"
+                        styles={BlockStyles.buttonSecondary}
+                        isActive={state.buttonStyle === 'secondary'}
+                        onClick={() => onButtonStyleChange('secondary')}
+                    >
+                        {state.text || 'Secondary Button'}
+                    </HoverableButton>
+
+                    <HoverableButton
+                        id="tertiary"
+                        styles={BlockStyles.buttonTertiary}
+                        isActive={state.buttonStyle === 'tertiary'}
+                        onClick={() => onButtonStyleChange('tertiary')}
+                    >
+                        {state.text || 'Tertiary Button'}
+                    </HoverableButton>
+                </FormControl>
+            </div>
+        </InsertModal>
+    );
+};
+
+type Props = {
+    id: string;
+    styles?: CSSProperties & { hover?: CSSProperties };
+    isActive: boolean;
+    onClick: () => void;
+    children: ReactNode;
+};
+
+const HoverableButton = ({ id, styles, isActive, onClick, children }: Props): ReactElement => {
+    const [hovered, setHovered] = useState(false);
+    const getStyles = () => (styles && styles.hover && hovered ? { ...styles, ...styles.hover } : styles);
+
+    return (
+        <button
+            data-test-id={`floating-button-insert-${id}`}
+            onMouseEnter={() => setHovered(true)}
+            onMouseLeave={() => setHovered(false)}
+            onClick={onClick}
+            style={getStyles()}
+            className={
+                isActive ? 'tw-outline tw-outline-1 tw-outline-violet-60 tw-outline-offset-2 tw-w-fit' : 'tw-w-fit'
+            }
+        >
+            {children}
+        </button>
+    );
+};

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

@@ -0,0 +1,13 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { CheckboxState } from '@frontify/fondue';
+import { RichTextButtonStyle } from '../../../types';
+
+export type InsertModalDispatchType = { type: string; payload?: Partial<InsertModalStateProps> };
+
+export type InsertModalStateProps = {
+    url: string;
+    text: string;
+    buttonStyle: RichTextButtonStyle;
+    newTab: CheckboxState;
+};

package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/useInsertModal.ts

@@ -0,0 +1,143 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { Dispatch, Reducer, useEffect, useReducer } from 'react';
+import { getPluginOptions, useEditorRef, useHotkeys } from '@udecode/plate';
+import { InsertModalDispatchType, InsertModalStateProps } from './types';
+import { floatingButtonActions, floatingButtonSelectors } from '../floatingButtonStore';
+import { ELEMENT_BUTTON } from '../../../createButtonPlugin';
+import { submitFloatingButton } from '../../../transforms/submitFloatingButton';
+import { RichTextButtonStyle } from '../../../types';
+import { getButtonStyle } from '../../../utils/getButtonStyle';
+import { AppBridgeBlock } from '@frontify/app-bridge';
+import { CheckboxState } from '@frontify/fondue';
+import { addHttps } from '../../../../../../../helpers';
+import { isValidUrlOrEmpty } from '../../../../LinkPlugin/utils/url';
+
+const initialState: InsertModalStateProps = {
+    url: '',
+    text: '',
+    buttonStyle: 'primary',
+    newTab: CheckboxState.Unchecked,
+};
+
+export const InsertModalState = (): [InsertModalStateProps, Dispatch<InsertModalDispatchType>] => {
+    const [state, dispatch] = useReducer<Reducer<InsertModalStateProps, InsertModalDispatchType>>((state, action) => {
+        const { type, payload } = action;
+
+        switch (type) {
+            case 'NEW_TAB':
+                return {
+                    ...state,
+                    newTab: CheckboxState.Checked,
+                };
+            case 'SAME_TAB':
+                return {
+                    ...state,
+                    newTab: CheckboxState.Unchecked,
+                };
+            case 'URL':
+            case 'TEXT':
+            case 'BUTTON_STYLE':
+            case 'INIT':
+                return {
+                    ...state,
+                    ...payload,
+                };
+            default:
+                return state;
+        }
+    }, initialState);
+
+    return [state, dispatch];
+};
+
+export const useInsertModal = () => {
+    const editor = useEditorRef();
+    const [state, dispatch] = InsertModalState();
+
+    useEffect(() => {
+        const buttonStyle = getButtonStyle(editor);
+
+        dispatch({
+            type: 'INIT',
+            payload: {
+                text: floatingButtonSelectors.text(),
+                buttonStyle,
+                newTab: floatingButtonSelectors.newTab() ? CheckboxState.Checked : CheckboxState.Unchecked,
+                url: floatingButtonSelectors.url(),
+            },
+        });
+    }, [dispatch, editor]);
+
+    const onTextChange = (value: string) => {
+        dispatch({
+            type: 'TEXT',
+            payload: { text: value },
+        });
+    };
+
+    const onButtonStyleChange = (value: RichTextButtonStyle) => {
+        dispatch({
+            type: 'BUTTON_STYLE',
+            payload: { buttonStyle: value },
+        });
+    };
+
+    const onUrlChange = (value: string) => {
+        dispatch({
+            type: 'URL',
+            payload: { url: value },
+        });
+    };
+
+    const onToggleTab = (checked: boolean) => {
+        checked ? dispatch({ type: 'NEW_TAB' }) : dispatch({ type: 'SAME_TAB' });
+    };
+
+    const onCancel = () => {
+        floatingButtonActions.hide();
+    };
+
+    const onSave = (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | KeyboardEvent | undefined) => {
+        if (!isValidUrlOrEmpty(state.url) || !hasValues) {
+            return;
+        }
+
+        const urlToSave = addHttps(state.url);
+
+        floatingButtonActions.text(state.text);
+        floatingButtonActions.url(urlToSave);
+        floatingButtonActions.buttonStyle(state.buttonStyle);
+        floatingButtonActions.newTab(state.newTab === CheckboxState.Checked);
+
+        if (submitFloatingButton(editor)) {
+            event?.preventDefault();
+        }
+    };
+
+    const hasValues = state.url !== '' && state.text !== '';
+
+    const { appBridge } = getPluginOptions<{ appBridge: AppBridgeBlock }>(editor, ELEMENT_BUTTON);
+
+    useHotkeys(
+        'enter',
+        onSave,
+        {
+            enableOnFormTags: ['INPUT'],
+        },
+        []
+    );
+
+    return {
+        state,
+        onTextChange,
+        onButtonStyleChange,
+        onUrlChange,
+        onToggleTab,
+        onCancel,
+        onSave,
+        hasValues,
+        isValidUrlOrEmpty,
+        appBridge,
+    };
+};

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

@@ -0,0 +1,31 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { useCallback } from 'react';
+import {
+    AsProps,
+    Button,
+    HTMLPropsAs,
+    createComponentAs,
+    createElementAs,
+    focusEditor,
+    useEditorRef,
+} from '@udecode/plate';
+import { unwrapButton } from '../../transforms/index';
+
+export const useUnlinkButton = (props: HTMLPropsAs<'button'>): HTMLPropsAs<'button'> => {
+    const editor = useEditorRef();
+
+    return {
+        onClick: useCallback(() => {
+            unwrapButton(editor);
+            focusEditor(editor, editor.selection ?? undefined);
+        }, [editor]),
+        ...props,
+    };
+};
+
+export const UnlinkButton = createComponentAs<AsProps<'button'>>((props) => {
+    const htmlProps = useUnlinkButton(props);
+
+    return createElementAs(Button, htmlProps);
+});

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

@@ -0,0 +1,46 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { createStore } from '@udecode/plate';
+import { RichTextButtonStyle } from '../../types';
+
+export type FloatingButtonMode = '' | 'insert' | 'edit';
+
+export const floatingButtonStore: any = createStore('floatingButton')({
+    openEditorId: null as null | string,
+    mouseDown: false,
+    updated: false,
+    url: '',
+    text: '',
+    buttonStyle: 'primary' as RichTextButtonStyle,
+    newTab: false,
+    mode: '' as FloatingButtonMode,
+    isEditing: false,
+})
+    .extendActions((set) => ({
+        reset: () => {
+            set.url('');
+            set.text('');
+            set.buttonStyle('primary');
+            set.newTab(false);
+            set.mode('');
+            set.isEditing(false);
+        },
+    }))
+    .extendActions((set) => ({
+        show: (mode: FloatingButtonMode, editorId: string) => {
+            set.mode(mode);
+            set.isEditing(false);
+            set.openEditorId(editorId);
+        },
+        hide: () => {
+            set.reset();
+            set.openEditorId(null);
+        },
+    }))
+    .extendSelectors((state) => ({
+        isOpen: (editorId: string) => state.openEditorId === editorId,
+    }));
+
+export const floatingButtonActions = floatingButtonStore.set;
+export const floatingButtonSelectors = floatingButtonStore.get;
+export const useFloatingButtonSelectors = () => floatingButtonStore.use;

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

@@ -0,0 +1,12 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export * from './FloatingButton';
+export * from './FloatingButtonEditButton';
+export * from './FloatingButtonUrlInput';
+export * from './UnlinkButton';
+export * from './floatingButtonStore';
+export * from './useFloatingButtonEdit';
+export * from './useFloatingButtonEnter';
+export * from './useFloatingButtonEscape';
+export * from './useFloatingButtonInsert';
+export * from './useVirtualFloatingButton';

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

@@ -0,0 +1,113 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import {
+    HTMLPropsAs,
+    getAboveNode,
+    getDefaultBoundingClientRect,
+    getEndPoint,
+    getPluginOptions,
+    getPluginType,
+    getRangeBoundingClientRect,
+    getStartPoint,
+    someNode,
+    useComposedRef,
+    useEditorRef,
+    useHotkeys,
+    usePlateSelectors,
+} from '@udecode/plate';
+import { useCallback, useEffect } from 'react';
+import { ButtonPlugin, ELEMENT_BUTTON } from '../../createButtonPlugin';
+import { getUrlFromEditor } from '../../utils';
+import { triggerFloatingButtonEdit } from '../../utils/triggerFloatingButtonEdit';
+import {
+    FloatingButtonProps,
+    floatingButtonActions,
+    floatingButtonSelectors,
+    useFloatingButtonEnter,
+    useFloatingButtonEscape,
+    useFloatingButtonSelectors,
+    useVirtualFloatingButton,
+} from '.';
+
+export const useFloatingButtonEdit = ({ floatingOptions, ...props }: FloatingButtonProps): HTMLPropsAs<'div'> => {
+    const editor = useEditorRef();
+    const keyEditor = usePlateSelectors(editor.id).keyEditor();
+    const mode = useFloatingButtonSelectors().mode();
+    const open = useFloatingButtonSelectors().isOpen(editor.id);
+
+    const { triggerFloatingButtonHotkeys } = getPluginOptions<ButtonPlugin>(editor, ELEMENT_BUTTON);
+
+    const getBoundingClientRect = useCallback(() => {
+        const entry = getAboveNode(editor, {
+            match: { type: getPluginType(editor, ELEMENT_BUTTON) },
+        });
+
+        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 } = useVirtualFloatingButton({
+        open: isOpen,
+        getBoundingClientRect,
+        ...floatingOptions,
+    });
+
+    useEffect(() => {
+        const url = getUrlFromEditor(editor);
+        if (url) {
+            floatingButtonActions.url(url);
+        }
+
+        if (
+            editor.selection &&
+            someNode(editor, {
+                match: { type: getPluginType(editor, ELEMENT_BUTTON) },
+            })
+        ) {
+            floatingButtonActions.show('edit', editor.id);
+            update();
+            return;
+        }
+
+        if (floatingButtonSelectors.mode() === 'edit') {
+            floatingButtonActions.hide();
+        }
+    }, [editor, keyEditor, update]);
+
+    useHotkeys(
+        triggerFloatingButtonHotkeys,
+        (e) => {
+            e.preventDefault();
+
+            if (floatingButtonSelectors.mode() === 'edit') {
+                triggerFloatingButtonEdit(editor);
+            }
+        },
+        {
+            enableOnContentEditable: true,
+        },
+        []
+    );
+
+    useFloatingButtonEnter();
+
+    useFloatingButtonEscape();
+
+    return {
+        style: {
+            ...style,
+            zIndex: 1000,
+        },
+        ...props,
+        ref: useComposedRef<HTMLElement | null>(props.ref, floating),
+    };
+};

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

@@ -0,0 +1,21 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { useEditorRef, useHotkeys } from '@udecode/plate';
+import { submitFloatingButton } from '../../transforms/submitFloatingButton';
+
+export const useFloatingButtonEnter = () => {
+    const editor = useEditorRef();
+
+    useHotkeys(
+        '*',
+        (e) => {
+            if (e.key === 'Enter' && submitFloatingButton(editor)) {
+                e.preventDefault();
+            }
+        },
+        {
+            enableOnFormTags: ['INPUT'],
+        },
+        []
+    );
+};

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

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

@@ -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';