@frontify/guideline-blocks-settings 0.33.4 → 0.34.0

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

@@ -1,88 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { AppBridgeBlock } from '@frontify/app-bridge';
-import {
-    Button,
-    ButtonEmphasis,
-    ButtonSize,
-    ButtonStyle,
-    FormControl,
-    IconCheckMark20,
-    TextInput,
-} from '@frontify/fondue';
-import { FC, ReactNode } from 'react';
-import { InsertModalStateProps } from './types';
-import { LinkInput } from '../../../../../Link/LinkInput';
-
-type InsertModalProps = {
-    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;
-    testId?: string;
-    children?: ReactNode;
-    appBridge: AppBridgeBlock;
-};
-
-export const InsertModal: FC<InsertModalProps> = ({
-    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-mt-5">
-            <LinkInput
-                url={state.url}
-                newTab={state.newTab}
-                onUrlChange={onUrlChange}
-                onToggleTab={onToggleTab}
-                isValidUrlOrEmpty={isValidUrlOrEmpty}
-                appBridge={appBridge}
-            />
-        </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

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

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

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

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

@@ -1,73 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import {
-    ELEMENT_LINK,
-    FloatingLinkProps,
-    HTMLPropsAs,
-    LinkPlugin,
-    floatingLinkActions,
-    getPluginOptions,
-    getSelectionBoundingClientRect,
-    triggerFloatingLinkInsert,
-    useComposedRef,
-    useEditorRef,
-    useFloatingLinkEscape,
-    useFloatingLinkSelectors,
-    useHotkeys,
-    useVirtualFloatingLink,
-} from '@udecode/plate';
-import { useEffect } from 'react';
-import { useFocused } from 'slate-react';
-
-export const useFloatingLinkInsert = ({ floatingOptions, ...props }: FloatingLinkProps): HTMLPropsAs<'div'> => {
-    const editor = useEditorRef();
-    const focused = useFocused();
-    const mode = useFloatingLinkSelectors().mode();
-    const open = useFloatingLinkSelectors().isOpen(editor.id);
-
-    const { triggerFloatingLinkHotkeys } = getPluginOptions<LinkPlugin>(editor, ELEMENT_LINK);
-
-    useHotkeys(
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        triggerFloatingLinkHotkeys!,
-        (e) => {
-            if (triggerFloatingLinkInsert(editor, { focused })) {
-                e.preventDefault();
-            }
-        },
-        {
-            enableOnContentEditable: true,
-        },
-        [focused],
-    );
-
-    const { update, style, floating } = useVirtualFloatingLink({
-        editorId: editor.id,
-        open: open && mode === 'insert',
-        getBoundingClientRect: getSelectionBoundingClientRect,
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        whileElementsMounted: () => {},
-        ...floatingOptions,
-    });
-
-    // wait for update before focusing input
-    useEffect(() => {
-        if (open) {
-            update();
-            floatingLinkActions.updated(true);
-        } else {
-            floatingLinkActions.updated(false);
-        }
-    }, [open, update]);
-
-    useFloatingLinkEscape();
-
-    return {
-        style: {
-            ...style,
-            zIndex: 1000,
-        },
-        ...props,
-        ref: useComposedRef<HTMLElement | null>(props.ref, floating),
-    };
-};

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

@@ -1,136 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { AppBridgeBlock } from '@frontify/app-bridge';
-import { CheckboxState } from '@frontify/fondue';
-import {
-    ELEMENT_LINK,
-    floatingLinkActions,
-    floatingLinkSelectors,
-    getPluginOptions,
-    submitFloatingLink,
-    useEditorRef,
-    useHotkeys,
-} from '@udecode/plate';
-import { Dispatch, Reducer, useEffect, useReducer } from 'react';
-import { getLegacyUrl, getUrl } from '../../../../../Link/utils';
-import { InsertModalDispatchType, InsertModalStateProps } from './types';
-import { addHttps } from '../../../../../../helpers';
-import { isValidUrlOrEmpty } from '../../../../../Link/utils/url';
-
-const initialState: InsertModalStateProps = {
-    url: '',
-    text: '',
-    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 'INIT':
-                return {
-                    ...state,
-                    ...payload,
-                };
-            default:
-                return state;
-        }
-    }, initialState);
-
-    return [state, dispatch];
-};
-
-export const useInsertModal = () => {
-    const editor = useEditorRef();
-    const [state, dispatch] = InsertModalState();
-
-    useEffect(() => {
-        const legacyUrl = getLegacyUrl(editor);
-        const url = getUrl(editor);
-
-        dispatch({
-            type: 'INIT',
-            payload: {
-                text: floatingLinkSelectors.text(),
-                newTab: floatingLinkSelectors.newTab() ? CheckboxState.Checked : CheckboxState.Unchecked,
-                url: legacyUrl && url === '' ? legacyUrl : floatingLinkSelectors.url(),
-            },
-        });
-    }, [dispatch, editor]);
-
-    const onTextChange = (value: string) => {
-        dispatch({
-            type: 'TEXT',
-            payload: { text: 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 = () => {
-        floatingLinkActions.hide();
-    };
-
-    const onSave = (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | KeyboardEvent | undefined) => {
-        if (!isValidUrlOrEmpty(state.url) || !hasValues) {
-            return;
-        }
-
-        const urlToSave = addHttps(state.url);
-
-        floatingLinkActions.text(state.text);
-        floatingLinkActions.url(urlToSave);
-        floatingLinkActions.newTab(state.newTab === CheckboxState.Checked);
-
-        if (submitFloatingLink(editor)) {
-            event?.preventDefault();
-        }
-    };
-
-    const hasValues = state.url !== '' && state.text !== '';
-
-    const { appBridge } = getPluginOptions<{ appBridge: AppBridgeBlock }>(editor, ELEMENT_LINK);
-
-    useHotkeys(
-        'enter',
-        onSave,
-        {
-            enableOnFormTags: ['INPUT'],
-        },
-        [],
-    );
-
-    return {
-        state,
-        onTextChange,
-        onUrlChange,
-        onToggleTab,
-        onCancel,
-        onSave,
-        hasValues,
-        isValidUrlOrEmpty,
-        appBridge,
-    };
-};

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

@@ -1,38 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import {
-    IconLink,
-    IconSize,
-    PluginButtonProps,
-    getButtonClassNames,
-    getHotkeyByPlatform,
-    getTooltip,
-} from '@frontify/fondue';
-import { LinkToolbarButton, isRangeInSameBlock, useEventPlateId, usePlateEditorState } from '@udecode/plate';
-
-export const LinkButton = ({ id, editorId }: PluginButtonProps) => {
-    const editor = usePlateEditorState(useEventPlateId(editorId));
-    const isEnabled = !!isRangeInSameBlock(editor, {
-        at: editor.selection,
-    });
-
-    return (
-        <div data-plugin-id={id}>
-            <LinkToolbarButton
-                tooltip={getTooltip(
-                    isEnabled
-                        ? `Link\n${getHotkeyByPlatform('Ctrl+K')}`
-                        : 'Links can only be set for a single text block.',
-                )}
-                icon={
-                    <span className="tw-p-2 tw-h-8 tw-justify-center tw-items-center tw-flex">
-                        <IconLink size={IconSize.Size16} />
-                    </span>
-                }
-                classNames={getButtonClassNames(isEnabled)}
-                styles={{ root: { width: '24px', height: '24px' } }}
-                actionHandler="onMouseDown"
-            />
-        </div>
-    );
-};

package/src/components/RichTextEditor/plugins/LinkPlugin/LinkMarkupElement/LinkMarkupElementNode.tsx

@@ -1,36 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { HTMLPropsAs, LinkRootProps, useElementProps } from '@udecode/plate';
-import type { MouseEvent } from 'react';
-import { TLinkElement } from '../types';
-import { BlockStyles } from '../../styles';
-import { LINK_PLUGIN } from '../id';
-
-const useLink = (props: LinkRootProps): HTMLPropsAs<'a'> => {
-    const _props = useElementProps<TLinkElement, 'a'>({
-        ...props,
-        elementToAttributes: (element) => ({
-            href: element.url || element.chosenLink?.searchResult?.link || '',
-            target: element.target || '_self',
-        }),
-    });
-
-    return {
-        ..._props,
-        // quick fix: hovering <a> with href loses the editor focus
-        onMouseOver: (event: MouseEvent) => {
-            event.stopPropagation();
-        },
-    };
-};
-
-export const LinkMarkupElementNode = (props: LinkRootProps) => {
-    const htmlProps = useLink(props);
-    const { attributes, children } = props;
-
-    return (
-        <a {...attributes} href={htmlProps.href} target={htmlProps.target} style={BlockStyles[LINK_PLUGIN]}>
-            {children}
-        </a>
-    );
-};

package/src/components/RichTextEditor/plugins/LinkPlugin/LinkMarkupElement/index.ts

@@ -1,11 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { MarkupElement } from '@frontify/fondue';
-import { ELEMENT_LINK } from '@udecode/plate';
-import { LinkMarkupElementNode } from './LinkMarkupElementNode';
-
-export class LinkMarkupElement extends MarkupElement {
-    constructor(id = ELEMENT_LINK, node = LinkMarkupElementNode) {
-        super(id, node);
-    }
-}

package/src/components/RichTextEditor/plugins/LinkPlugin/id.ts

@@ -1,3 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-export const LINK_PLUGIN = 'link-plugin';

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

@@ -1,49 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import type { CSSProperties } from 'react';
-import { AppBridgeBlock } from '@frontify/app-bridge';
-import { Plugin, PluginProps } from '@frontify/fondue';
-import { createLinkPlugin as createPlateLinkPlugin, createPluginFactory } from '@udecode/plate';
-
-import { CustomFloatingLink } from './FloatingLink/CustomFloatingLink';
-import { LINK_PLUGIN } from './id';
-import { LinkButton } from './LinkButton';
-import { LinkMarkupElement } from './LinkMarkupElement';
-import { isValidUrl } from '../../../Link/utils/url';
-import { BlockStyles } from '../styles';
-
-export const createLinkPlugin = (appBridge: AppBridgeBlock) =>
-    createPluginFactory({
-        ...createPlateLinkPlugin(),
-        renderAfterEditable: CustomFloatingLink,
-        options: {
-            isUrl: isValidUrl,
-            rangeBeforeOptions: {
-                matchString: ' ',
-                skipInvalid: true,
-                afterMatch: true,
-            },
-            triggerFloatingLinkHotkeys: 'command+k, ctrl+k',
-            appBridge,
-        },
-    })();
-
-export type LinkPluginProps = PluginProps & { appBridge: AppBridgeBlock };
-
-export class LinkPlugin extends Plugin {
-    private appBridge: AppBridgeBlock;
-    public styles: CSSProperties = {};
-    constructor(props?: LinkPluginProps, styles = BlockStyles[LINK_PLUGIN]) {
-        super(LINK_PLUGIN, {
-            button: LinkButton,
-            markupElement: new LinkMarkupElement(),
-            ...props,
-        });
-        this.styles = styles;
-        this.appBridge = props?.appBridge as AppBridgeBlock;
-    }
-
-    plugins() {
-        return [createLinkPlugin(this.appBridge)];
-    }
-}

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

@@ -1,12 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { TLinkElement as TPlateLinkElement } from '@udecode/plate';
-
-export type TLinkElement = TPlateLinkElement & {
-    chosenLink?: {
-        searchResult?: {
-            link?: string;
-        };
-        openInNewTab?: boolean;
-    };
-};

package/src/components/RichTextEditor/plugins/TextStylePlugins/custom1Plugin.tsx

@@ -1,62 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { createPluginFactory } from '@udecode/plate';
-import type { CSSProperties } from 'react';
-import {
-    MarkupElement,
-    Plugin,
-    PluginProps,
-    TextStyleRenderElementProps,
-    alignmentClassnames,
-    getColumnBreakClasses,
-    merge,
-} from '@frontify/fondue';
-import { BlockStyles, TextStyles } from '../styles';
-
-const ID = 'textstyle-custom1-plugin';
-
-export class Custom1Plugin extends Plugin {
-    public styles: CSSProperties = {};
-    constructor({ styles = BlockStyles.custom1, ...props }: PluginProps = {}) {
-        super(TextStyles.custom1, {
-            label: 'Custom 1',
-            markupElement: new Custom1MarkupElement(),
-            ...props,
-        });
-        this.styles = styles;
-    }
-
-    plugins() {
-        return [createCustom1Plugin(this.styles)];
-    }
-}
-
-class Custom1MarkupElement extends MarkupElement {
-    constructor(id = ID, node = Custom1MarkupElementNode) {
-        super(id, node);
-    }
-}
-
-const Custom1MarkupElementNode = ({ element, attributes, children, styles }: TextStyleRenderElementProps) => {
-    const align = element.align as string;
-    return (
-        <p
-            {...attributes}
-            style={styles}
-            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element)])}
-        >
-            {children}
-        </p>
-    );
-};
-
-const createCustom1Plugin = (styles: CSSProperties) =>
-    createPluginFactory({
-        key: TextStyles.custom1,
-        isElement: true,
-        deserializeHtml: {
-            rules: [{ validClassName: TextStyles.custom1 }],
-        },
-    })({
-        component: (props: TextStyleRenderElementProps) => <Custom1MarkupElementNode {...props} styles={styles} />,
-    });

package/src/components/RichTextEditor/plugins/TextStylePlugins/custom2Plugin.tsx

@@ -1,62 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { createPluginFactory } from '@udecode/plate';
-import type { CSSProperties } from 'react';
-import {
-    MarkupElement,
-    Plugin,
-    PluginProps,
-    TextStyleRenderElementProps,
-    alignmentClassnames,
-    getColumnBreakClasses,
-    merge,
-} from '@frontify/fondue';
-import { BlockStyles, TextStyles } from '../styles';
-
-const ID = 'textstyle-custom2-plugin';
-
-export class Custom2Plugin extends Plugin {
-    public styles: CSSProperties = {};
-    constructor({ styles = BlockStyles.custom2, ...props }: PluginProps = {}) {
-        super(TextStyles.custom2, {
-            label: 'Custom 2',
-            markupElement: new Custom2MarkupElement(),
-            ...props,
-        });
-        this.styles = styles;
-    }
-
-    plugins() {
-        return [createCustom2Plugin(this.styles)];
-    }
-}
-
-class Custom2MarkupElement extends MarkupElement {
-    constructor(id = ID, node = Custom2MarkupElementNode) {
-        super(id, node);
-    }
-}
-
-const Custom2MarkupElementNode = ({ element, attributes, children, styles }: TextStyleRenderElementProps) => {
-    const align = element.align as string;
-    return (
-        <p
-            {...attributes}
-            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element)])}
-            style={styles}
-        >
-            {children}
-        </p>
-    );
-};
-
-const createCustom2Plugin = (styles: CSSProperties) =>
-    createPluginFactory({
-        key: TextStyles.custom2,
-        isElement: true,
-        deserializeHtml: {
-            rules: [{ validClassName: TextStyles.custom2 }],
-        },
-    })({
-        component: (props: TextStyleRenderElementProps) => <Custom2MarkupElementNode {...props} styles={styles} />,
-    });

package/src/components/RichTextEditor/plugins/TextStylePlugins/custom3Plugin.tsx

@@ -1,63 +0,0 @@
-/* (c) Copyright Frontify Ltd., all rights reserved. */
-
-import { PlateRenderElementProps, createPluginFactory } from '@udecode/plate';
-import type { CSSProperties } from 'react';
-import {
-    MarkupElement,
-    Plugin,
-    PluginProps,
-    TextStyleRenderElementProps,
-    TextStyles,
-    alignmentClassnames,
-    getColumnBreakClasses,
-    merge,
-} from '@frontify/fondue';
-import { BlockStyles } from '../styles';
-
-const ID = 'textstyle-custom3-plugin';
-
-export class Custom3Plugin extends Plugin {
-    public styles: CSSProperties = {};
-    constructor({ styles = BlockStyles.custom3, ...props }: PluginProps = {}) {
-        super(TextStyles.custom3, {
-            label: 'Custom 3',
-            markupElement: new Custom3MarkupElement(),
-            ...props,
-        });
-        this.styles = styles;
-    }
-
-    plugins() {
-        return [createCustom3Plugin(this.styles)];
-    }
-}
-
-class Custom3MarkupElement extends MarkupElement {
-    constructor(id = ID, node = Custom3MarkupElementNode) {
-        super(id, node);
-    }
-}
-
-const Custom3MarkupElementNode = ({ element, attributes, children, styles }: TextStyleRenderElementProps) => {
-    const align = element.align as string;
-    return (
-        <p
-            {...attributes}
-            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element)])}
-            style={styles}
-        >
-            {children}
-        </p>
-    );
-};
-
-const createCustom3Plugin = (styles: CSSProperties) =>
-    createPluginFactory({
-        key: TextStyles.custom3,
-        isElement: true,
-        deserializeHtml: {
-            rules: [{ validClassName: TextStyles.custom3 }],
-        },
-    })({
-        component: (props: PlateRenderElementProps) => <Custom3MarkupElementNode {...props} styles={styles} />,
-    });