[DEV-12566] Feature - Implement GalleryBookmark extension

packages/slate-editor/src/extensions/gallery-bookmark/GalleryBookmarkExtension.tsx

@@ -0,0 +1,7 @@
+import type { Extension } from '@prezly/slate-commons';
+
+export const EXTENSION_ID = 'GalleryBookmarkExtension';
+
+export const GalleryBookmarkExtension = (): Extension => ({
+    id: EXTENSION_ID,
+});

packages/slate-editor/src/extensions/gallery-bookmark/index.ts

@@ -0,0 +1,2 @@
+export { GalleryBookmarkExtension, EXTENSION_ID } from './GalleryBookmarkExtension';
+export { createGalleryBookmark } from './lib';

packages/slate-editor/src/extensions/gallery-bookmark/lib/createGalleryBookmark.ts

@@ -0,0 +1,26 @@
+import { BookmarkNode } from '@prezly/slate-types';
+import { v4 as uuidV4 } from 'uuid';
+
+type RequiredProps = Pick<BookmarkNode, 'url' | 'oembed'>;
+type OptionalProps = Omit<BookmarkNode, 'type' | 'children'>;
+
+function withoutExtraAttributes<T extends BookmarkNode>(node: T): BookmarkNode {
+    const { type, children, layout, new_tab, show_thumbnail, uuid, url, oembed, ...extra } = node;
+    if (Object.keys(extra).length === 0) {
+        return node;
+    }
+
+    return { type, children, layout, new_tab, show_thumbnail, uuid, url, oembed };
+}
+
+export function createGalleryBookmark(props: RequiredProps & Partial<OptionalProps>): BookmarkNode {
+    return withoutExtraAttributes({
+        layout: BookmarkNode.Layout.VERTICAL,
+        new_tab: false,
+        show_thumbnail: true,
+        uuid: uuidV4(),
+        ...props,
+        children: [{ text: '' }],
+        type: BookmarkNode.TYPE,
+    });
+}

packages/slate-editor/src/extensions/gallery-bookmark/lib/index.ts

@@ -0,0 +1 @@
+export * from './createGalleryBookmark';

packages/slate-editor/src/extensions/placeholders/PlaceholderNode.ts

@@ -42,6 +42,7 @@ export namespace PlaceholderNode {
         COVERAGE = 'placeholder:coverage',
         EMBED = 'placeholder:embed',
         GALLERY = 'placeholder:gallery',
+        GALLERY_BOOKMARK = 'placeholder:gallery-bookmark',
         IMAGE = 'placeholder:image',
         /**
          * Media placeholder allows to insert one of multiple types of media (image, video, and maybe embed?)

packages/slate-editor/src/extensions/placeholders/PlaceholdersExtension.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { Editor } from 'slate';
 
 import { withPastedUrlsUnfurling } from './behaviour';
+import { GalleryBookmarkPlaceholderElement } from './elements';
 import {
     AttachmentPlaceholderElement,
     ContactPlaceholderElement,
@@ -58,6 +59,18 @@ export interface Parameters {
           >;
     withEmbedPlaceholders?: false | { fetchOembed: FetchOEmbedFn };
     withGalleryPlaceholders?: boolean | { withMediaGalleryTab: WithMediaGalleryTab };
+    withGalleryBookmarkPlaceholders?:
+        | false
+        | Pick<
+              GalleryBookmarkPlaceholderElement.Props,
+              | 'fetchOembed'
+              | 'getSuggestions'
+              | 'invalidateSuggestions'
+              | 'renderAddon'
+              | 'renderEmpty'
+              | 'renderSuggestion'
+              | 'renderSuggestionsFooter'
+          >;
     withImagePlaceholders?:
         | boolean
         | { withCaptions: boolean; withMediaGalleryTab: WithMediaGalleryTab };
@@ -112,6 +125,7 @@ export function PlaceholdersExtension({
     withCoveragePlaceholders = false,
     withEmbedPlaceholders = false,
     withGalleryPlaceholders = false,
+    withGalleryBookmarkPlaceholders = false,
     withImagePlaceholders = false,
     withInlineContactPlaceholders = false,
     withMediaPlaceholders = false,
@@ -142,6 +156,7 @@ export function PlaceholdersExtension({
                 withCoveragePlaceholders: Boolean(withCoveragePlaceholders),
                 withEmbedPlaceholders: Boolean(withEmbedPlaceholders),
                 withGalleryPlaceholders: Boolean(withGalleryPlaceholders),
+                withGalleryBookmarkPlaceholders: Boolean(withGalleryBookmarkPlaceholders),
                 withImagePlaceholders: Boolean(withImagePlaceholders),
                 withInlineContactPlaceholders: Boolean(withInlineContactPlaceholders),
                 withMediaPlaceholders: Boolean(withMediaPlaceholders),
@@ -269,6 +284,22 @@ export function PlaceholdersExtension({
                     </GalleryPlaceholderElement>
                 );
             }
+            if (
+                withGalleryBookmarkPlaceholders &&
+                isPlaceholderNode(element, PlaceholderNode.Type.GALLERY_BOOKMARK)
+            ) {
+                return (
+                    <GalleryBookmarkPlaceholderElement
+                        {...withGalleryBookmarkPlaceholders}
+                        attributes={attributes}
+                        element={element}
+                        format={format}
+                        removable={removable}
+                    >
+                        {children}
+                    </GalleryBookmarkPlaceholderElement>
+                );
+            }
             if (withMediaPlaceholders && isPlaceholderNode(element, PlaceholderNode.Type.MEDIA)) {
                 const { withMediaGalleryTab = false, withCaptions = false } =
                     withMediaPlaceholders === true ? {} : withMediaPlaceholders;

packages/slate-editor/src/extensions/placeholders/PlaceholdersManager.ts

@@ -41,6 +41,10 @@ interface Data {
         gallery: GalleryNode;
         operation: 'add' | 'edit';
     };
+    [Type.GALLERY_BOOKMARK]: {
+        url: string;
+        oembed?: OEmbedInfo; // `oembed` is undefined if an error occurred
+    };
     [Type.IMAGE]: {
         image: ImageNode;
         operation: 'add' | 'replace' | 'crop';

packages/slate-editor/src/extensions/placeholders/elements/GalleryBookmarkPlaceholderElement.tsx

@@ -0,0 +1,131 @@
+import type { NewsroomGallery } from '@prezly/sdk';
+import type { BookmarkNode } from '@prezly/slate-types';
+import React from 'react';
+import { useSelected, useSlateStatic } from 'slate-react';
+
+import { SearchInput } from '#components';
+import { PlaceholderGallery } from '#icons';
+import { useFunction } from '#lib';
+
+import { EventsEditor } from '#modules/events';
+
+import { createGalleryBookmark } from '../../gallery-bookmark';
+import type { Props as PlaceholderElementProps } from '../components/PlaceholderElement';
+import {
+    type Props as BaseProps,
+    SearchInputPlaceholderElement,
+} from '../components/SearchInputPlaceholderElement';
+import { replacePlaceholder } from '../lib';
+import type { PlaceholderNode } from '../PlaceholderNode';
+import { PlaceholdersManager, usePlaceholderManagement } from '../PlaceholdersManager';
+import type { FetchOEmbedFn } from '../types';
+
+export function GalleryBookmarkPlaceholderElement({
+    children,
+    element,
+    fetchOembed,
+    format = 'card',
+    getSuggestions,
+    removable,
+    renderAddon,
+    renderEmpty,
+    renderSuggestion,
+    renderSuggestionsFooter,
+    ...props
+}: GalleryBookmarkPlaceholderElement.Props) {
+    const editor = useSlateStatic();
+    const isSelected = useSelected();
+
+    const handleTrigger = useFunction(() => {
+        PlaceholdersManager.activate(element);
+    });
+
+    const handleSelect = useFunction(async (uuid: string, { url }: NewsroomGallery) => {
+        EventsEditor.dispatchEvent(editor, 'gallery-bookmark-placeholder-submitted', {
+            gallery: { uuid },
+        });
+
+        const loading = fetchOembed(url).then(
+            (oembed) => ({ oembed, url }),
+            () => ({ url }), // `oembed` is undefined if an error occurred
+        );
+
+        PlaceholdersManager.register(element.type, element.uuid, loading);
+        PlaceholdersManager.deactivateAll();
+    });
+
+    const handleData = useFunction(
+        (data: { url: BookmarkNode['url']; oembed?: BookmarkNode['oembed'] }) => {
+            const { url, oembed } = data;
+            if (!oembed) {
+                EventsEditor.dispatchEvent(editor, 'notification', {
+                    children: 'Provided URL does not exist or is not supported.',
+                    type: 'error',
+                });
+                return;
+            }
+            replacePlaceholder(editor, element, createGalleryBookmark({ url, oembed }), {
+                select: isSelected,
+            });
+        },
+    );
+
+    usePlaceholderManagement(element.type, element.uuid, {
+        onTrigger: handleTrigger,
+        onResolve: handleData,
+    });
+
+    return (
+        <SearchInputPlaceholderElement<NewsroomGallery>
+            {...props}
+            element={element}
+            // Core
+            format={format}
+            icon={PlaceholderGallery}
+            title="Click to insert a media gallery bookmark"
+            description="Add a link to your media gallery"
+            // Input
+            getSuggestions={getSuggestions}
+            renderAddon={renderAddon}
+            renderEmpty={renderEmpty}
+            renderSuggestion={renderSuggestion}
+            renderSuggestions={(props) => (
+                <SearchInput.Suggestions
+                    activeElement={props.activeElement}
+                    query={props.query}
+                    suggestions={props.suggestions}
+                    footer={renderSuggestionsFooter?.(props)}
+                >
+                    {props.children}
+                </SearchInput.Suggestions>
+            )}
+            inputTitle="Media gallery bookmark"
+            inputDescription="Add a media gallery card to your stories, campaigns and pitches"
+            inputPlaceholder="Search media galleries"
+            onSelect={handleSelect}
+            removable={removable}
+        >
+            {children}
+        </SearchInputPlaceholderElement>
+    );
+}
+
+export namespace GalleryBookmarkPlaceholderElement {
+    export interface Props
+        extends Omit<
+                BaseProps<NewsroomGallery>,
+                | 'onSelect'
+                | 'icon'
+                | 'title'
+                | 'description'
+                | 'inputTitle'
+                | 'inputDescription'
+                | 'inputPlaceholder'
+                | 'renderSuggestions'
+            >,
+            Pick<PlaceholderElementProps, 'removable'> {
+        element: PlaceholderNode<PlaceholderNode.Type.GALLERY_BOOKMARK>;
+        fetchOembed: FetchOEmbedFn;
+        renderSuggestionsFooter?: BaseProps<NewsroomGallery>['renderSuggestions'];
+    }
+}

packages/slate-editor/src/extensions/placeholders/elements/index.ts

@@ -3,6 +3,7 @@ export { ContactPlaceholderElement } from './ContactPlaceholderElement';
 export { CoveragePlaceholderElement } from './CoveragePlaceholderElement';
 export { EmbedPlaceholderElement } from './EmbedPlaceholderElement';
 export { GalleryPlaceholderElement } from './GalleryPlaceholderElement';
+export { GalleryBookmarkPlaceholderElement } from './GalleryBookmarkPlaceholderElement';
 export { ImagePlaceholderElement } from './ImagePlaceholderElement';
 export { InlineContactPlaceholderElement } from './InlineContactPlaceholderElement';
 export { SocialPostPlaceholderElement } from './SocialPostPlaceholderElement';

packages/slate-editor/src/extensions/placeholders/normalization/removeDisabledPlaceholders.ts

@@ -10,6 +10,7 @@ interface Parameters {
     withImagePlaceholders: boolean;
     withInlineContactPlaceholders: boolean;
     withGalleryPlaceholders: boolean;
+    withGalleryBookmarkPlaceholders: boolean;
     withEmbedPlaceholders: boolean;
     withMediaPlaceholders: boolean;
     withSocialPostPlaceholders: boolean;
@@ -26,6 +27,7 @@ export function removeDisabledPlaceholders({
     withImagePlaceholders,
     withInlineContactPlaceholders,
     withGalleryPlaceholders,
+    withGalleryBookmarkPlaceholders,
     withEmbedPlaceholders,
     withMediaPlaceholders,
     withSocialPostPlaceholders,
@@ -40,6 +42,7 @@ export function removeDisabledPlaceholders({
         [PlaceholderNode.Type.COVERAGE]: withCoveragePlaceholders,
         [PlaceholderNode.Type.IMAGE]: withImagePlaceholders,
         [PlaceholderNode.Type.GALLERY]: withGalleryPlaceholders,
+        [PlaceholderNode.Type.GALLERY_BOOKMARK]: withGalleryBookmarkPlaceholders,
         [PlaceholderNode.Type.EMBED]: withEmbedPlaceholders,
         [PlaceholderNode.Type.MEDIA]: withMediaPlaceholders,
         [PlaceholderNode.Type.SOCIAL_POST]: withSocialPostPlaceholders,

packages/slate-editor/src/modules/editor/Editor.tsx

@@ -93,6 +93,7 @@ export const Editor = forwardRef<EditorRef, EditorProps>((props, forwardedRef) =
         withEntryPointsAroundBlocks = false,
         withFloatingAddMenu = false,
         withGalleries = false,
+        withGalleryBookmarks = false,
         withHeadings = false,
         withImages = false,
         withInlineContacts = false,
@@ -152,6 +153,7 @@ export const Editor = forwardRef<EditorRef, EditorProps>((props, forwardedRef) =
             withEmbeds,
             withFloatingAddMenu,
             withGalleries,
+            withGalleryBookmarks,
             withHeadings,
             withImages,
             withInlineContacts,
@@ -318,6 +320,7 @@ export const Editor = forwardRef<EditorRef, EditorProps>((props, forwardedRef) =
         withEmbedSocial: Boolean(withEmbeds),
         withEmbeds: Boolean(withEmbeds),
         withGalleries: Boolean(withGalleries),
+        withGalleryBookmarks: Boolean(withGalleryBookmarks),
         withHeadings,
         withImages: Boolean(withImages),
         withParagraphs: true,
@@ -680,6 +683,16 @@ export const Editor = forwardRef<EditorRef, EditorProps>((props, forwardedRef) =
             EditorCommands.selectNode(editor, placeholder);
             return;
         }
+        if (action === MenuAction.ADD_GALLERY_BOOKMARK && withGalleryBookmarks) {
+            const placeholder = insertPlaceholder(
+                editor,
+                { type: PlaceholderNode.Type.GALLERY_BOOKMARK },
+                true,
+            );
+            PlaceholdersManager.trigger(placeholder);
+            EditorCommands.selectNode(editor, placeholder);
+            return;
+        }
         if (action === MenuAction.ADD_IMAGE && withImages) {
             const placeholder = insertPlaceholder(
                 editor,

packages/slate-editor/src/modules/editor/getEnabledExtensions.ts

@@ -16,6 +16,7 @@ import { FileAttachmentExtension } from '#extensions/file-attachment';
 import { FlashNodesExtension } from '#extensions/flash-nodes';
 import { FloatingAddMenuExtension } from '#extensions/floating-add-menu';
 import { GalleriesExtension } from '#extensions/galleries';
+import { GalleryBookmarkExtension } from '#extensions/gallery-bookmark';
 import { HeadingExtension } from '#extensions/heading';
 import { HotkeysExtension } from '#extensions/hotkeys';
 import { HtmlExtension } from '#extensions/html';
@@ -71,6 +72,7 @@ type Parameters = {
     | 'withEmbeds'
     | 'withFloatingAddMenu'
     | 'withGalleries'
+    | 'withGalleryBookmarks'
     | 'withHeadings'
     | 'withImages'
     | 'withInlineContacts'
@@ -104,6 +106,7 @@ export function* getEnabledExtensions(parameters: Parameters): Generator<Extensi
         withEmbeds,
         withFloatingAddMenu,
         withGalleries,
+        withGalleryBookmarks,
         withHeadings,
         withImages,
         withInlineContacts,
@@ -261,6 +264,10 @@ export function* getEnabledExtensions(parameters: Parameters): Generator<Extensi
         });
     }
 
+    if (withGalleryBookmarks) {
+        yield GalleryBookmarkExtension();
+    }
+
     if (withImages) {
         yield PasteImagesExtension({
             onImagesPasted: (editor, images) => {
@@ -374,6 +381,7 @@ function buildPlaceholdersExtensionConfiguration({
     withCoverage,
     withEmbeds,
     withGalleries,
+    withGalleryBookmarks,
     withImages,
     withInlineContacts,
     withPlaceholders,
@@ -421,6 +429,11 @@ function buildPlaceholdersExtensionConfiguration({
                 },
             };
         }
+        if (withGalleryBookmarks) {
+            yield {
+                withGalleryBookmarkPlaceholders: withGalleryBookmarks,
+            };
+        }
         if (withInlineContacts) {
             yield {
                 withInlineContactPlaceholders: withInlineContacts,