@frontify/guideline-blocks-settings 0.27.0 → 0.28.0

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

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

@@ -0,0 +1,136 @@
+/* (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 '../../utils';
+import { InsertModalDispatchType, InsertModalStateProps } from './types';
+import { addHttps } from '../../../../../../helpers';
+import { isValidUrlOrEmpty } from '../../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

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

@@ -0,0 +1,36 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { HTMLPropsAs, LinkRootProps, useElementProps } from '@udecode/plate';
+import { 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 || '_blank',
+        }),
+    });
+
+    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

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

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

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

@@ -0,0 +1,48 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+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 './utils/url';
+import { CSSProperties } from 'react';
+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

@@ -0,0 +1,12 @@
+/* (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/LinkPlugin/utils/getUrl.ts

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

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

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

package/src/components/RichTextEditor/plugins/LinkPlugin/utils/relativeUrlRegex.spec.ts

@@ -0,0 +1,35 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { describe, expect, it } from 'vitest';
+import { relativeUrlRegex } from './relativeUrlRegex';
+
+describe('Regex values', () => {
+    it('should only match internal documents starting with /r/ or /document/', () => {
+        const testData = [
+            {
+                input: '/document/123',
+                shouldMatch: true,
+            },
+            {
+                input: '/r/123',
+                shouldMatch: true,
+            },
+            {
+                input: '/wrong/123',
+                shouldMatch: false,
+            },
+            {
+                input: '/r/',
+                shouldMatch: false,
+            },
+            {
+                input: '/document/',
+                shouldMatch: false,
+            },
+        ];
+        for (const data of testData) {
+            const isMatching = relativeUrlRegex.test(data.input);
+            expect(isMatching).toBe(data.shouldMatch);
+        }
+    });
+});

package/src/components/RichTextEditor/plugins/LinkPlugin/utils/relativeUrlRegex.ts

@@ -0,0 +1,3 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export const relativeUrlRegex = /^\/(document|r)\/\S+$/i;

package/src/components/RichTextEditor/plugins/LinkPlugin/utils/url.spec.ts

@@ -0,0 +1,75 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { describe, expect, it } from 'vitest';
+import { isValidUrl } from './url';
+
+describe('LinkPlugin URL utils', () => {
+    it('should validate isValidUrl', () => {
+        const testData = [
+            {
+                input: 'https://frontify.com',
+                shouldBeValid: true,
+            },
+            {
+                input: 'http://frontify.com',
+                shouldBeValid: true,
+            },
+            {
+                input: 'http://frontify.com/any/path',
+                shouldBeValid: true,
+            },
+            {
+                input: 'https://product.frontify.com/any/path/with#3/',
+                shouldBeValid: true,
+            },
+            {
+                input: 'mailto:hello@frontify.com',
+                shouldBeValid: true,
+            },
+            {
+                input: 'tel:+123456789',
+                shouldBeValid: true,
+            },
+            {
+                input: 'tel:',
+                shouldBeValid: false,
+            },
+            {
+                input: 'anyword:',
+                shouldBeValid: false,
+            },
+            {
+                input: '/r/123',
+                shouldBeValid: true,
+            },
+            {
+                input: '/document/123',
+                shouldBeValid: true,
+            },
+            {
+                input: '/wrongpage/123',
+                shouldBeValid: false,
+            },
+            {
+                input: '+123456789',
+                shouldBeValid: false,
+            },
+            {
+                input: 'hello@frontify.com',
+                shouldBeValid: false,
+            },
+            {
+                input: 'frontify.com',
+                shouldBeValid: false,
+            },
+            {
+                input: 'frontify',
+                shouldBeValid: false,
+            },
+        ];
+        for (const data of testData) {
+            const isValid = isValidUrl(data.input);
+            expect(isValid).toBe(data.shouldBeValid);
+        }
+    });
+});

package/src/components/RichTextEditor/plugins/LinkPlugin/utils/url.ts

@@ -0,0 +1,21 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { addHttps } from '../../../../../helpers';
+import { relativeUrlRegex } from './relativeUrlRegex';
+
+export const isValidUrl = (url: string) => {
+    if (relativeUrlRegex.test(url)) {
+        return true;
+    }
+    try {
+        const parsedUrl = new URL(url);
+        const validProtocols = ['http:', 'https:', 'mailto:', 'tel:'];
+        return validProtocols.includes(parsedUrl.protocol) && parsedUrl.pathname !== '';
+    } catch (error) {
+        return false;
+    }
+};
+
+export const isValidUrlOrEmpty = (url: string) => {
+    return isValidUrl(addHttps(url)) || url === '';
+};

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

@@ -0,0 +1,61 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { createPluginFactory } from '@udecode/plate';
+import { 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}
+            className={merge([align && alignmentClassnames[align], getColumnBreakClasses(element), 'a-custom1'])}
+        >
+            <span style={styles}>{children}</span>
+        </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

@@ -0,0 +1,61 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { createPluginFactory } from '@udecode/plate';
+import { 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), 'a-custom2'])}
+        >
+            <span style={styles}>{children}</span>
+        </p>
+    );
+};
+
+const createCustom2Plugin = (styles: CSSProperties) =>
+    createPluginFactory({
+        key: TextStyles.custom2,
+        isElement: true,
+        deserializeHtml: {
+            rules: [{ validClassName: TextStyles.custom2 }],
+        },
+    })({
+        component: (props: TextStyleRenderElementProps) => <Custom2MarkupElementNode {...props} styles={styles} />,
+    });