feat(text editor): use new popup trigger plugin

src/components/text-editor/prosemirror-adapter/prosemirror-adapter.tsx

@@ -16,7 +16,7 @@ import { addListNodes } from 'prosemirror-schema-list';
 import { exampleSetup } from 'prosemirror-example-setup';
 import { keymap } from 'prosemirror-keymap';
 import { ActionBarItem } from 'src/components/action-bar/action-bar.types';
-import { ListSeparator } from 'src/components/list/list-item.types';
+import { ListItem, ListSeparator } from 'src/components/list/list-item.types';
 import { MenuCommandFactory } from './menu/menu-commands';
 import { menuTranslationIDs, getTextEditorMenuItems } from './menu/menu-items';
 import { ContentTypeConverter } from '../utils/content-type-converter';
@@ -40,6 +40,9 @@ import {
 import { createImageRemoverPlugin } from './plugins/image-remover-plugin';
 import { createMenuStateTrackingPlugin } from './plugins/menu-state-tracking-plugin';
 import { createActionBarInteractionPlugin } from './plugins/menu-action-interaction-plugin';
+import { createTriggerPlugin } from './plugins/trigger-popup-plugin';
+import { LimelPickerCustomEvent } from '../../../../src/index';
+import { mentionTagMark } from './mentions/mark-schema-extender';
 
 /**
  * The ProseMirror adapter offers a rich text editing experience with markdown support.
@@ -98,6 +101,31 @@ export class ProsemirrorAdapter {
     @State()
     public isLinkMenuOpen: boolean = false;
 
+    /**
+     * Open state of the picker
+     */
+    @State()
+    public isPickerOpen: boolean = false;
+
+    @State()
+    private selectedItem: ListItem<number>;
+
+    private fakeMentionItems: Array<ListItem<number>> = [
+        { text: 'Admiral Swiggins', value: 1 },
+        { text: 'Ayla', value: 2 },
+        { text: 'Clunk', value: 3 },
+        { text: 'Coco', value: 4 },
+        { text: 'Derpl', value: 5 },
+        { text: 'Froggy G', value: 6 },
+        { text: 'Gnaw', value: 7 },
+        { text: 'Lonestar', value: 8 },
+        { text: 'Leon', value: 9 },
+        { text: 'Raelynn', value: 10 },
+        { text: 'Skølldir', value: 11 },
+        { text: 'Voltar', value: 12 },
+        { text: 'Yuri', value: 13 },
+    ];
+
     private menuCommandFactory: MenuCommandFactory;
     private schema: Schema;
     private contentConverter: ContentTypeConverter;
@@ -153,13 +181,18 @@ export class ProsemirrorAdapter {
             'open-editor-link-menu',
             this.handleOpenLinkMenu,
         );
+
+        this.host.addEventListener('open-picker', this.handleOpenPicker);
+        this.host.addEventListener('close-picker', this.handleClosePicker);
     }
 
     public disconnectedCallback() {
         this.host.removeEventListener(
             'open-editor-link-menu',
             this.handleOpenLinkMenu,
         );
+        this.host.removeEventListener('open-picker', this.handleOpenPicker);
+        this.host.removeEventListener('close-picker', this.handleClosePicker);
         this.view.destroy();
     }
 
@@ -175,6 +208,7 @@ export class ProsemirrorAdapter {
                 />
             </div>,
             this.renderLinkMenu(),
+            this.renderPicker(),
         ];
     }
 
@@ -202,6 +236,66 @@ export class ProsemirrorAdapter {
         );
     }
 
+    renderPicker() {
+        console.log('renderPicker');
+        if (!this.isPickerOpen) {
+            return;
+        }
+
+        console.log('picker is open');
+
+        return (
+            <limel-portal
+                containerId={this.portalId}
+                visible={this.isPickerOpen}
+                openDirection="top"
+                inheritParentWidth={true}
+                anchor={this.actionBarElement}
+            >
+                <limel-picker
+                    label="Favorite awesomenaut"
+                    value={this.selectedItem}
+                    searcher={this.search}
+                    onChange={this.onChange}
+                    onInteract={this.onInteract}
+                />
+            </limel-portal>
+        );
+    }
+
+    private handleClosePicker = (event: CustomEvent<void>) => {
+        event.stopImmediatePropagation();
+        this.isPickerOpen = false;
+    };
+
+    private handleOpenPicker = (event: CustomEvent<string>) => {
+        event.stopImmediatePropagation();
+        this.isPickerOpen = true;
+        console.log('open picker', this.isPickerOpen);
+    };
+
+    private search = (query: string): Promise<ListItem[]> => {
+        return new Promise((resolve) => {
+            if (query === '') {
+                return resolve(this.fakeMentionItems);
+            }
+
+            const filteredItems = this.fakeMentionItems.filter((item) => {
+                return item.text.toLowerCase().includes(query.toLowerCase());
+            });
+
+            return resolve(filteredItems);
+        });
+    };
+
+    private onChange = (event: LimelPickerCustomEvent<ListItem<number>>) => {
+        this.selectedItem = event.detail;
+    };
+
+    private onInteract = (event: LimelPickerCustomEvent<ListItem<number>>) => {
+        console.log('Value interacted with:', event.detail);
+    };
+
     private setupContentConverter() {
         if (this.contentType === 'markdown') {
             this.contentConverter = new markdownConverter();
@@ -256,6 +350,7 @@ export class ProsemirrorAdapter {
             nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),
             marks: schema.spec.marks.append({
                 strikethrough: strikethrough,
+                mention: mentionTagMark,
             }),
         });
     }
@@ -290,6 +385,7 @@ export class ProsemirrorAdapter {
                     this.updateActiveActionBarItems,
                 ),
                 createActionBarInteractionPlugin(this.menuCommandFactory),
+                createTriggerPlugin(),
             ],
         });
     }