@frontify/guideline-blocks-settings 0.27.0 → 0.28.0

package/src/components/RichTextEditor/plugins/shared/LinkSelector/DocumentLink.tsx

@@ -0,0 +1,80 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { AppBridgeBlock } from '@frontify/app-bridge';
+import { useEffect, useState } from 'react';
+import { PageLinks } from './PageLinks';
+import { IconColorFan16, merge } from '@frontify/fondue';
+import { InitiallyExpandedItems } from '../../LinkPlugin/FloatingLink/InsertLinkModal/types';
+
+type DocumentLinkProps = {
+    document: {
+        id: number;
+        title: string;
+        permanentLink: string;
+    };
+    appBridge: AppBridgeBlock;
+    selectedUrl: string;
+    onSelectUrl: (url: string) => void;
+    itemsToExpandInitially: InitiallyExpandedItems;
+};
+
+export const DocumentLink = ({
+    document,
+    appBridge,
+    selectedUrl,
+    onSelectUrl,
+    itemsToExpandInitially,
+}: DocumentLinkProps) => {
+    const [isExpanded, setIsExpanded] = useState(document.id === itemsToExpandInitially.documentId);
+    const isActive = document.permanentLink === selectedUrl;
+
+    useEffect(() => {
+        if (document.id === itemsToExpandInitially.documentId) {
+            setIsExpanded(true);
+        }
+    }, [itemsToExpandInitially, document.id]);
+
+    return (
+        <>
+            <button
+                data-test-id="internal-link-selector-document-link"
+                className={merge([
+                    'tw-flex tw-flex-1 tw-space-x-2 tw-items-center tw-py-2 tw-px-2.5 tw-leading-5 tw-cursor-pointer tw-w-full',
+                    isActive
+                        ? 'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover:hover hover:tw-text-box-selected-strong-inverse-hover:hover'
+                        : 'hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',
+                ])}
+                onClick={() => onSelectUrl(document.permanentLink)}
+                onFocus={() => onSelectUrl(document.permanentLink)}
+            >
+                <div
+                    role="button"
+                    tabIndex={0}
+                    data-test-id="tree-item-toggle"
+                    className="tw-flex tw-items-center tw-justify-center tw-p-1.5 tw-cursor-pointer"
+                    onClick={() => setIsExpanded(!isExpanded)}
+                    onFocus={() => setIsExpanded(!isExpanded)}
+                >
+                    <div
+                        className={merge([
+                            'tw-transition-transform tw-w-0 tw-h-0 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',
+                            isExpanded ? 'tw-rotate-90' : '',
+                        ])}
+                    ></div>
+                </div>
+                <IconColorFan16 />
+                <span className="tw-text-s">{document.title}</span>
+                <span className="tw-flex-auto tw-font-sans tw-text-xs tw-text-right">Document</span>
+            </button>
+            {isExpanded && (
+                <PageLinks
+                    appBridge={appBridge}
+                    documentId={document.id}
+                    selectedUrl={selectedUrl}
+                    onSelectUrl={onSelectUrl}
+                    itemsToExpandInitially={itemsToExpandInitially}
+                />
+            )}
+        </>
+    );
+};

package/src/components/RichTextEditor/plugins/shared/LinkSelector/DocumentLinks.tsx

@@ -0,0 +1,97 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { AppBridgeBlock, Document } from '@frontify/app-bridge';
+import { LoadingCircle } from '@frontify/fondue';
+import { ReactElement, useEffect, useState } from 'react';
+import { InitiallyExpandedItems } from '../../LinkPlugin/FloatingLink/InsertLinkModal/types';
+import { DocumentLink } from './DocumentLink';
+
+type DocumentLinksProps = {
+    appBridge: AppBridgeBlock;
+    selectedUrl: string;
+    onSelectUrl: (url: string) => void;
+};
+
+export const DocumentLinks = ({ appBridge, selectedUrl, onSelectUrl }: DocumentLinksProps): ReactElement => {
+    const [isLoading, setIsLoading] = useState(true);
+    const [documents, setDocuments] = useState<Document[]>([]);
+    const [itemsToExpandInitially, setItemsToExpandInitially] = useState<InitiallyExpandedItems>({
+        documentId: undefined,
+        pageId: undefined,
+    });
+
+    const documentArray = [...documents.values()];
+
+    useEffect(() => {
+        if (selectedUrl && documentArray.length > 0) {
+            findLocationOfSelectedUrl().then((items) => {
+                setItemsToExpandInitially(items);
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [documentArray.length]);
+
+    useEffect(() => {
+        appBridge
+            .getAllDocuments()
+            .then((_documents) => {
+                setDocuments(_documents);
+            })
+            .finally(() => {
+                setIsLoading(false);
+            });
+    }, []);
+
+    const findLocationOfSelectedUrl = async () => {
+        const itemsToExpand: InitiallyExpandedItems = {
+            documentId: undefined,
+            pageId: undefined,
+        };
+        const selectedUrlIsDocument = documentArray.find((document) => document.permanentLink === selectedUrl);
+        if (selectedUrlIsDocument) {
+            return itemsToExpand;
+        }
+        for (const document of documentArray) {
+            const pages = await appBridge.getDocumentPagesByDocumentId(document.id);
+            appBridge.getAllDocuments();
+            const pagesArray = [...pages.values()];
+            const selectedUrlIsPage = !!pagesArray.find((page) => page.permanentLink === selectedUrl);
+            if (selectedUrlIsPage) {
+                itemsToExpand.documentId = document.id;
+                return itemsToExpand;
+            }
+            for (const page of pagesArray) {
+                const sections = await appBridge.getDocumentSectionsByDocumentPageId(page.id);
+                const sectionsArray = [...sections.values()];
+                const selectedUrlIsSection = !!sectionsArray.find((section) => section.permanentLink === selectedUrl);
+                if (selectedUrlIsSection) {
+                    itemsToExpand.documentId = document.id;
+                    itemsToExpand.pageId = page.id;
+                    return itemsToExpand;
+                }
+            }
+        }
+        return itemsToExpand;
+    };
+
+    return isLoading ? (
+        <div className="tw-flex tw-justify-center tw-p-4">
+            <LoadingCircle />
+        </div>
+    ) : (
+        <>
+            {documentArray.map((document) => {
+                return (
+                    <DocumentLink
+                        key={document.id}
+                        document={document}
+                        appBridge={appBridge}
+                        selectedUrl={selectedUrl}
+                        onSelectUrl={onSelectUrl}
+                        itemsToExpandInitially={itemsToExpandInitially}
+                    />
+                );
+            })}
+        </>
+    );
+};

package/src/components/RichTextEditor/plugins/shared/LinkSelector/LinkSelector.spec.ct.tsx

@@ -0,0 +1,138 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import {
+    DocumentApiDummy,
+    DocumentPageApiDummy,
+    DocumentSectionApiDummy,
+    getAppBridgeBlockStub,
+    withAppBridgeBlockStubs,
+} from '@frontify/app-bridge';
+import { mount } from 'cypress/react18';
+import { LinkSelector } from './LinkSelector';
+import { SinonStub } from 'cypress/types/sinon';
+
+const LinkSelectorSelector = '[data-test-id="internal-link-selector"]';
+const LinkSelectorButtonSelector = '[data-test-id="internal-link-selector"] > button';
+const LinkSelectorModalSelector = '[data-test-id="modal-body"]';
+const DocumentLinkSelector = '[data-test-id="internal-link-selector-document-link"]';
+const DocumentTreeItemToggleSelector = '[data-test-id="tree-item-toggle"]';
+const PageLinkSelector = '[data-test-id="internal-link-selector-page-link"]';
+const SectionLinkSelector = '[data-test-id="internal-link-selector-section-link"]';
+
+const apiDocuments = [
+    { ...DocumentApiDummy.with(1), permanentLink: '/1' },
+    { ...DocumentApiDummy.with(2), permanentLink: '/2' },
+];
+const apiPages = [
+    { ...DocumentPageApiDummy.with(1), permanentLink: '/3' },
+    { ...DocumentPageApiDummy.with(2), permanentLink: '/4' },
+    { ...DocumentPageApiDummy.with(3), permanentLink: '/5' },
+];
+const apiSections = [
+    { ...DocumentSectionApiDummy.with(1), permanentLink: '/6' },
+    { ...DocumentSectionApiDummy.with(2), permanentLink: '/7' },
+    { ...DocumentSectionApiDummy.with(3), permanentLink: '/8' },
+    { ...DocumentSectionApiDummy.with(4), permanentLink: '/9' },
+];
+
+describe('Link Selector', () => {
+    it('renders the link selector button', () => {
+        const [LinkSelectorWithStubs] = withAppBridgeBlockStubs(LinkSelector, {});
+        mount(<LinkSelectorWithStubs url="" onUrlChange={cy.stub()} />);
+        cy.get(LinkSelectorSelector).should('exist');
+    });
+
+    it('opens the modal on button click', () => {
+        const appBridge = getAppBridgeBlockStub({
+            blockId: 1,
+        });
+        const apiDocuments = [DocumentApiDummy.with(1)];
+        (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
+        (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
+
+        mount(<LinkSelector appBridge={appBridge} url="" onUrlChange={cy.stub()} />);
+        cy.get(LinkSelectorButtonSelector).click();
+        cy.get(LinkSelectorModalSelector).should('exist');
+    });
+
+    it('renders two documents initially', () => {
+        const appBridge = getAppBridgeBlockStub({
+            blockId: 1,
+        });
+        (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
+        (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
+
+        mount(<LinkSelector appBridge={appBridge} url="" onUrlChange={cy.stub()} />);
+        cy.get(LinkSelectorButtonSelector).click();
+        cy.get(DocumentLinkSelector).should('have.length', 2);
+    });
+
+    it('renders three pages on document expand', () => {
+        const appBridge = getAppBridgeBlockStub({
+            blockId: 1,
+        });
+
+        (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
+        (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
+        (appBridge.getDocumentPagesByDocumentId as SinonStub) = cy.stub().returns(Promise.resolve(apiPages));
+        (appBridge.getDocumentSectionsByDocumentPageId as SinonStub) = cy.stub().returns(Promise.resolve(apiSections));
+
+        mount(<LinkSelector appBridge={appBridge} url="" onUrlChange={cy.stub()} />);
+        cy.get(LinkSelectorButtonSelector).click();
+        cy.get(DocumentLinkSelector).eq(0).find(DocumentTreeItemToggleSelector).click();
+        cy.get(PageLinkSelector).should('have.length', 3);
+    });
+
+    it('renders four sections on page expand', () => {
+        const appBridge = getAppBridgeBlockStub({
+            blockId: 1,
+        });
+        (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
+        (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
+        (appBridge.getDocumentPagesByDocumentId as SinonStub) = cy.stub().returns(Promise.resolve(apiPages));
+        (appBridge.getDocumentSectionsByDocumentPageId as SinonStub) = cy.stub().returns(Promise.resolve(apiSections));
+
+        mount(<LinkSelector appBridge={appBridge} url="" onUrlChange={cy.stub()} />);
+        cy.get(LinkSelectorButtonSelector).click();
+        cy.get(DocumentLinkSelector).eq(0).find(DocumentTreeItemToggleSelector).click();
+        cy.get(PageLinkSelector).eq(0).find('button').click();
+        cy.get(SectionLinkSelector).should('have.length', 4);
+    });
+
+    it('renders the selected section immediately if it is preselected', () => {
+        const appBridge = getAppBridgeBlockStub({
+            blockId: 1,
+        });
+        (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
+        (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
+        (appBridge.getDocumentPagesByDocumentId as SinonStub) = cy.stub().returns(Promise.resolve(apiPages));
+        (appBridge.getDocumentSectionsByDocumentPageId as SinonStub) = cy.stub().returns(Promise.resolve(apiSections));
+
+        mount(<LinkSelector appBridge={appBridge} url="/7" onUrlChange={cy.stub()} />);
+        cy.get(LinkSelectorButtonSelector).click();
+        cy.get(SectionLinkSelector).should('have.length', 4);
+    });
+
+    it('renders the all section and they are shown on focus and stores if you press enter', () => {
+        const appBridge = getAppBridgeBlockStub({
+            blockId: 1,
+        });
+        (appBridge.getDocumentGroups as SinonStub) = cy.stub().returns([]);
+        (appBridge.getAllDocuments as SinonStub) = cy.stub().returns(Promise.resolve(apiDocuments));
+        (appBridge.getDocumentPagesByDocumentId as SinonStub) = cy.stub().returns(Promise.resolve(apiPages));
+        (appBridge.getDocumentSectionsByDocumentPageId as SinonStub) = cy.stub().returns(Promise.resolve(apiSections));
+
+        mount(<LinkSelector appBridge={appBridge} url="" onUrlChange={cy.stub().as('urlChange')} />);
+        cy.get(LinkSelectorButtonSelector).click();
+        cy.get(DocumentLinkSelector).should('have.length', 2);
+        cy.realPress('Tab');
+        cy.realPress('Tab');
+        cy.get(PageLinkSelector).should('have.length', 3);
+        cy.realPress('Tab');
+        cy.realPress('Tab');
+        cy.get(SectionLinkSelector).should('have.length', 4);
+        cy.realPress('Tab');
+        cy.realPress('Enter');
+        cy.get('@urlChange').should('be.calledWith', '/6');
+    });
+});

package/src/components/RichTextEditor/plugins/shared/LinkSelector/LinkSelector.tsx

@@ -0,0 +1,80 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { AppBridgeBlock } from '@frontify/app-bridge';
+import { Button, ButtonEmphasis, ButtonSize, ButtonStyle, ButtonType, IconLink, Modal } from '@frontify/fondue';
+import { useOverlayTriggerState } from '@react-stately/overlays';
+import { KeyboardEvent, ReactElement, useEffect, useState } from 'react';
+import { DocumentLinks } from './DocumentLinks';
+
+type LinkSelectorProps = {
+    appBridge: AppBridgeBlock;
+    url: string;
+    onUrlChange: (value: string) => void;
+};
+
+export const LinkSelector = ({ appBridge, url, onUrlChange }: LinkSelectorProps): ReactElement => {
+    const { open: openLinkTree, isOpen: isLinkTreeOpen, close: closeLinkTree } = useOverlayTriggerState({});
+    const [selectedUrl, setSelectedUrl] = useState<string>(url);
+
+    const onSelectUrl = (url: string) => {
+        setSelectedUrl(url);
+    };
+
+    const onPressEnter = (event: KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === 'Enter') {
+            saveLink();
+        }
+    };
+
+    useEffect(() => {
+        if (url && !selectedUrl) {
+            setSelectedUrl(url);
+        }
+    }, [url, selectedUrl]);
+
+    const saveLink = () => {
+        onUrlChange(selectedUrl);
+        closeLinkTree();
+    };
+
+    return (
+        <div data-test-id="internal-link-selector" onKeyDown={onPressEnter}>
+            <Button
+                icon={<IconLink />}
+                size={ButtonSize.Medium}
+                type={ButtonType.Button}
+                style={ButtonStyle.Default}
+                emphasis={ButtonEmphasis.Default}
+                onClick={() => openLinkTree()}
+            >
+                Internal link
+            </Button>
+            <Modal zIndex={1001} onClose={() => closeLinkTree()} isOpen={isLinkTreeOpen} isDismissable>
+                <Modal.Header title="Select internal link" />
+                <Modal.Body>
+                    <DocumentLinks appBridge={appBridge} selectedUrl={selectedUrl} onSelectUrl={onSelectUrl} />
+                </Modal.Body>
+                <Modal.Footer
+                    buttons={[
+                        {
+                            children: 'Cancel',
+                            onClick: () => closeLinkTree(),
+                            style: ButtonStyle.Default,
+                            emphasis: ButtonEmphasis.Default,
+                        },
+                        {
+                            children: 'Choose',
+                            onClick: (event) => {
+                                event?.preventDefault();
+                                saveLink();
+                            },
+                            style: ButtonStyle.Default,
+                            emphasis: ButtonEmphasis.Strong,
+                            disabled: !selectedUrl,
+                        },
+                    ]}
+                />
+            </Modal>
+        </div>
+    );
+};

package/src/components/RichTextEditor/plugins/shared/LinkSelector/PageLink.tsx

@@ -0,0 +1,83 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { AppBridgeBlock, useDocumentSection } from '@frontify/app-bridge';
+import { merge } from '@frontify/fondue';
+import { useEffect, useState } from 'react';
+import { InitiallyExpandedItems } from '../../LinkPlugin/FloatingLink/InsertLinkModal/types';
+import { SectionLink } from './SectionLink';
+
+type DocumentLinkProps = {
+    page: {
+        id: number;
+        title: string;
+        permanentLink: string;
+    };
+    selectedUrl: string;
+    onSelectUrl: (url: string) => void;
+    appBridge: AppBridgeBlock;
+    itemsToExpandInitially: InitiallyExpandedItems;
+};
+
+export const PageLink = ({ page, selectedUrl, onSelectUrl, itemsToExpandInitially, appBridge }: DocumentLinkProps) => {
+    const [isExpanded, setIsExpanded] = useState(page.id === itemsToExpandInitially.documentId);
+    const isActive = page.permanentLink === selectedUrl;
+    const { documentSections } = useDocumentSection(appBridge, page.id);
+    const sectionsArray = [...documentSections.values()];
+    const hasSections = sectionsArray.length > 0;
+
+    useEffect(() => {
+        if (page.id === itemsToExpandInitially.pageId) {
+            setIsExpanded(true);
+        }
+    }, [itemsToExpandInitially, page.id]);
+
+    return (
+        <>
+            <div
+                tabIndex={0}
+                data-test-id="internal-link-selector-page-link"
+                className={merge([
+                    'tw-py-2 tw-px-2.5 tw-leading-5 tw-cursor-pointer',
+                    hasSections ? 'tw-pl-7' : 'tw-pl-12',
+                    isActive
+                        ? 'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover:hover hover:tw-text-box-selected-strong-inverse-hover:hover'
+                        : 'hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',
+                ])}
+                onClick={() => onSelectUrl(page.permanentLink)}
+                onFocus={() => onSelectUrl(page.permanentLink)}
+            >
+                <div key={page.id} className="tw-flex tw-flex-1 tw-space-x-1 tw-items-center tw-h-6">
+                    {hasSections && (
+                        <button
+                            data-test-id="tree-item-toggle"
+                            className="tw-flex tw-items-center tw-justify-center tw-p-1.5 tw-cursor-pointer"
+                            onClick={() => setIsExpanded(!isExpanded)}
+                            onFocus={() => setIsExpanded(!isExpanded)}
+                        >
+                            <div
+                                className={merge([
+                                    'tw-transition-transform tw-w-0 tw-h-0 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',
+                                    isExpanded ? 'tw-rotate-90' : '',
+                                ])}
+                            ></div>
+                        </button>
+                    )}
+                    <span className="tw-text-s">{page.title}</span>
+                    <span className="tw-flex-auto tw-font-sans tw-text-xs tw-text-right">Page</span>
+                </div>
+            </div>
+            {isExpanded &&
+                sectionsArray.length > 0 &&
+                sectionsArray.map((section) => {
+                    return (
+                        <SectionLink
+                            key={section.id}
+                            section={section}
+                            selectedUrl={selectedUrl}
+                            onSelectUrl={onSelectUrl}
+                        />
+                    );
+                })}
+        </>
+    );
+};

package/src/components/RichTextEditor/plugins/shared/LinkSelector/PageLinks.tsx

@@ -0,0 +1,68 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { AppBridgeBlock, DocumentPage } from '@frontify/app-bridge';
+import { LoadingCircle } from '@frontify/fondue';
+import { ReactElement, useEffect, useState } from 'react';
+import { InitiallyExpandedItems } from '../../LinkPlugin/FloatingLink/InsertLinkModal/types';
+import { PageLink } from './PageLink';
+
+type PageLinksProps = {
+    appBridge: AppBridgeBlock;
+    documentId: number;
+    selectedUrl: string;
+    onSelectUrl: (url: string) => void;
+    itemsToExpandInitially: InitiallyExpandedItems;
+};
+
+export const PageLinks = ({
+    appBridge,
+    documentId,
+    selectedUrl,
+    onSelectUrl,
+    itemsToExpandInitially,
+}: PageLinksProps): ReactElement => {
+    const [pages, setPages] = useState<DocumentPage[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const pagesArray = [...pages.values()];
+    const hasPages = !isLoading && pagesArray.length > 0;
+
+    useEffect(() => {
+        appBridge
+            .getDocumentPagesByDocumentId(documentId)
+            .then((_pages) => {
+                setPages(_pages);
+            })
+            .finally(() => {
+                setIsLoading(false);
+            });
+    }, []);
+
+    if (isLoading) {
+        return (
+            <div className="tw-flex tw-justify-center tw-p-4">
+                <LoadingCircle />
+            </div>
+        );
+    }
+
+    return hasPages ? (
+        <>
+            {pagesArray.map((page) => {
+                return (
+                    <PageLink
+                        key={page.id}
+                        page={page}
+                        appBridge={appBridge}
+                        selectedUrl={selectedUrl}
+                        onSelectUrl={onSelectUrl}
+                        itemsToExpandInitially={itemsToExpandInitially}
+                    />
+                );
+            })}
+        </>
+    ) : (
+        <div className="tw-py-2 tw-px-2.5 tw-pl-7 tw-leading-5 tw-text-s tw-text-text-weak">
+            This document does not contain any pages.
+        </div>
+    );
+};

package/src/components/RichTextEditor/plugins/shared/LinkSelector/SectionLink.tsx

@@ -0,0 +1,37 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { IconDocumentText16, merge } from '@frontify/fondue';
+
+type SectionLinkProps = {
+    section: {
+        id: number;
+        title: string;
+        permanentLink: string;
+    };
+    selectedUrl: string;
+    onSelectUrl: (url: string) => void;
+};
+
+export const SectionLink = ({ section, selectedUrl, onSelectUrl }: SectionLinkProps) => {
+    const isActive = section.permanentLink === selectedUrl;
+
+    return (
+        <button
+            data-test-id="internal-link-selector-section-link"
+            className={merge([
+                'tw-py-2 tw-px-2.5 tw-pl-14 tw-leading-5 tw-cursor-pointer tw-w-full',
+                isActive
+                    ? 'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover:hover hover:tw-text-box-selected-strong-inverse-hover:hover'
+                    : 'hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',
+            ])}
+            onClick={() => onSelectUrl(section.permanentLink)}
+            onFocus={() => onSelectUrl(section.permanentLink)}
+        >
+            <div className="tw-flex tw-flex-1 tw-space-x-2 tw-items-center tw-h-6">
+                <IconDocumentText16 />
+                <span className="tw-text-s">{section.title}</span>
+                <span className="tw-flex-auto tw-font-sans tw-text-xs tw-text-right">Section</span>
+            </div>
+        </button>
+    );
+};

package/src/components/RichTextEditor/plugins/shared/LinkSelector/index.ts

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