@frontify/guideline-blocks-settings 0.33.4 → 0.34.0

package/src/components/RichTextEditor/plugins/ButtonPlugin/components/ButtonToolbarButton.tsx

@@ -1,56 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { getButtonClassNames, getHotkeyByPlatform, getTooltip } from '@frontify/fondue';
-import {
-    BlockToolbarButtonProps,
-    ToolbarButton,
-    focusEditor,
-    isRangeInSameBlock,
-    someNode,
-    useEditorRef,
-} from '@udecode/plate';
-
-import { triggerFloatingButton } from '../utils';
-
-export interface LinkToolbarButtonProps extends BlockToolbarButtonProps {
-    /**
-     * Default onMouseDown is getting the link url by calling this promise before inserting the image.
-     */
-    getLinkUrl?: (prevUrl: string | null) => Promise<string | null>;
-}
-
-export const ButtonToolbarButton = ({ type, ...props }: LinkToolbarButtonProps) => {
-    const editor = useEditorRef();
-    const isEnabled = !!isRangeInSameBlock(editor, {
-        at: editor.selection,
-    });
-
-    const isLink = !!editor?.selection && someNode(editor, { match: { type } });
-
-    return (
-        <ToolbarButton
-            tooltip={getTooltip(
-                isEnabled
-                    ? `Button\n${getHotkeyByPlatform('Ctrl+Shift+K')}`
-                    : 'Buttons can only be set for a single text block.',
-            )}
-            classNames={getButtonClassNames(isEnabled)}
-            active={isLink}
-            onMouseDown={async (event) => {
-                if (!editor) {
-                    return;
-                }
-
-                event.preventDefault();
-                event.stopPropagation();
-
-                focusEditor(editor, editor.selection ?? editor.prevSelection ?? undefined);
-
-                setTimeout(() => {
-                    triggerFloatingButton(editor, { focused: true });
-                }, 0);
-            }}
-            {...props}
-        />
-    );
-};

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

@@ -1,19 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { EditModal } from './EditButtonModal/EditModal';
-import { FloatingButton } from './FloatingButton';
-import { useFloatingButtonSelectors } from './floatingButtonStore';
-import { InsertButtonModal } from './InsertButtonModal/InsertButtonModal';
-
-export const CustomFloatingButton = () => {
-    const isEditing = useFloatingButtonSelectors().isEditing();
-
-    const input = <InsertButtonModal />;
-    const editContent = isEditing ? input : <EditModal />;
-    return (
-        <>
-            <FloatingButton.InsertRoot>{input}</FloatingButton.InsertRoot>
-            <FloatingButton.EditRoot>{editContent}</FloatingButton.EditRoot>
-        </>
-    );
-};

package/src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/EditButtonModal/EditModal.tsx

@@ -1,42 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { IconPen16, IconTrashBin16 } from '@frontify/fondue';
-import { FloatingButton, useFloatingButtonUrlInput } from '..';
-
-export const EditModal = () => {
-    const urlHtmlProps = useFloatingButtonUrlInput({});
-
-    return (
-        <div
-            data-test-id="floating-button-edit"
-            className="tw-bg-white tw-text-text tw-rounded tw-shadow tw-p-4 tw-min-w-[400px]"
-        >
-            <span data-test-id="preview-button-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-button-button"
-                        className="tw-transition tw-cursor-pointer tw-rounded hover:tw-bg-black-10 tw-p-1"
-                    >
-                        <FloatingButton.EditButton>
-                            <IconPen16 />
-                        </FloatingButton.EditButton>
-                    </span>
-
-                    <span
-                        role="button"
-                        tabIndex={0}
-                        data-test-id="remove-button-button"
-                        className="tw-transition tw-cursor-pointer tw-rounded hover:tw-bg-black-10 tw-p-1"
-                    >
-                        <FloatingButton.UnlinkButton>
-                            <IconTrashBin16 />
-                        </FloatingButton.UnlinkButton>
-                    </span>
-                </span>
-            </span>
-        </div>
-    );
-};

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

@@ -1,37 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { HTMLPropsAs, UseVirtualFloatingOptions, createComponentAs, createElementAs } from '@udecode/plate';
-import { useFloatingButtonEdit } from './useFloatingButtonEdit';
-import { useFloatingButtonInsert } from './useFloatingButtonInsert';
-import { FloatingButtonEditButton } from './FloatingButtonEditButton';
-import { UnlinkButton } from './UnlinkButton';
-
-export type FloatingButtonProps = HTMLPropsAs<'div'> & {
-    floatingOptions?: UseVirtualFloatingOptions;
-};
-
-export const FloatingButtonEditRoot = createComponentAs<FloatingButtonProps>((props) => {
-    const htmlProps = useFloatingButtonEdit(props);
-
-    if (htmlProps.style?.display === 'none') {
-        return null;
-    }
-
-    return createElementAs('div', htmlProps);
-});
-
-export const FloatingButtonInsertRoot = createComponentAs<FloatingButtonProps>((props) => {
-    const htmlProps = useFloatingButtonInsert(props);
-
-    if (htmlProps.style?.display === 'none') {
-        return null;
-    }
-    return createElementAs('div', htmlProps);
-});
-
-export const FloatingButton = {
-    EditRoot: FloatingButtonEditRoot,
-    InsertRoot: FloatingButtonInsertRoot,
-    EditButton: FloatingButtonEditButton,
-    UnlinkButton,
-};

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

@@ -1,22 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { useCallback } from 'react';
-import { AsProps, HTMLPropsAs, createComponentAs, createElementAs, useEditorRef } from '@udecode/plate';
-import { triggerFloatingButtonEdit } from '../../utils/triggerFloatingButtonEdit';
-
-export const useFloatingButtonEditButton = (props: HTMLPropsAs<'button'>): HTMLPropsAs<'button'> => {
-    const editor = useEditorRef();
-
-    return {
-        onClick: useCallback(() => {
-            triggerFloatingButtonEdit(editor);
-        }, [editor]),
-        ...props,
-    };
-};
-
-export const FloatingButtonEditButton = createComponentAs<AsProps<'button'>>((props) => {
-    const htmlProps = useFloatingButtonEditButton(props);
-
-    return createElementAs('button', htmlProps);
-});

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

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

@@ -1,81 +0,0 @@
-/* (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(), marginTop: 0, marginBottom: 0 }}
-            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

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

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

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

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

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

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

@@ -1,21 +0,0 @@
-/* (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'],
-        },
-        [],
-    );
-};