@peers-app/peers-ui 0.0.14

package/dist/components/save-button.js

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SaveButton = void 0;
+const react_1 = __importDefault(require("react"));
+const globals_1 = require("../globals");
+const hooks_1 = require("../hooks");
+const SaveButton = (props) => {
+    let { doc, addActions } = props;
+    (0, hooks_1.useObservable)(doc.q);
+    const q = doc.q;
+    if (!addActions) {
+        addActions = [];
+    }
+    const allActions = props.addActions ? [...addActions] : [];
+    if (!props.noBuiltInActions) {
+        if (q()) {
+            allActions.unshift({
+                label: 'Discard Changes',
+                className: 'text-bg-warning',
+                onClick: () => {
+                    if (confirm('Are you sure you want to discard your changes?')) {
+                        doc.load()
+                            .then(() => {
+                            setTimeout(() => doc.q(0), 100);
+                        });
+                    }
+                }
+            });
+        }
+        if (allActions.length) {
+            allActions.push(react_1.default.createElement("hr", { className: "dropdown-divider mt-3" }));
+        }
+        allActions.push({
+            label: 'Delete',
+            className: `text-bg-danger`,
+            onClick: async () => {
+                if (confirm('Are you sure you want to delete this?')) {
+                    await doc.delete();
+                    const pathParts = (0, globals_1.mainContentPath)().split('/');
+                    pathParts.pop();
+                    const path = pathParts.join('/') ?? '';
+                    (0, globals_1.mainContentPath)(path);
+                }
+            }
+        });
+    }
+    let className = `btn `;
+    if (q()) {
+        className += 'btn-primary';
+    }
+    else {
+        className += 'disabled';
+    }
+    if (!addActions?.length && props.noBuiltInActions) {
+        return (react_1.default.createElement("button", { className: className, onClick: props.onClick ?? doc.save, disabled: !q() }, (0, globals_1.isDesktop)() ? 'Save Changes' : 'Save'));
+    }
+    return (react_1.default.createElement("div", { style: { display: 'inline-block' } },
+        react_1.default.createElement("div", { className: "input-group" },
+            react_1.default.createElement("button", { className: className, onClick: props.onClick ?? doc.save, disabled: !q() }, (0, globals_1.isDesktop)() ? 'Save Changes' : 'Save'),
+            react_1.default.createElement("button", { type: "button", "data-bs-toggle": "dropdown", "aria-expanded": "false", 
+                // className={`btn dropdown-toggle dropdown-toggle-split ${q() ? 'btn-primary' : 'btn-secondary'}`}
+                className: `btn dropdown-toggle dropdown-toggle-split btn-secondary` },
+                react_1.default.createElement("span", { className: "visually-hidden" }, "Toggle Dropdown")),
+            react_1.default.createElement("ul", { className: "dropdown-menu dropdown-menu-end" }, allActions.map(action => {
+                if (typeof action !== 'object' || action === null || !('label' in action)) {
+                    return (react_1.default.createElement("li", { key: Math.random() }, action));
+                }
+                return (react_1.default.createElement("li", { key: action.label },
+                    react_1.default.createElement("button", { className: `dropdown-item rounded mt-2 ${action.className || ''}`, onClick: action.onClick }, action.label)));
+            })))));
+};
+exports.SaveButton = SaveButton;

package/dist/components/sortable-list.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Observable } from "@peers-app/peers-sdk";
+export interface ISortable {
+    sortOrder: number;
+}
+interface ISortableListProps<T extends ISortable> {
+    items: Observable<T[]> | T[];
+    renderItem: (props: {
+        item: T;
+        listId: string;
+        sortHandle: string;
+    }) => React.ReactNode;
+    listsGroup?: string;
+    onAdd?: ((itemId: string, sortOrder: number) => any);
+    onUpdate?: ((args: {
+        items: T[];
+        ixMoved: number[];
+    }) => any);
+    hidden?: boolean;
+    containerProps?: Record<string, any>;
+    dragHandleClassName?: string;
+    sortDirection?: 'asc' | 'desc';
+    minHeight?: string | number;
+    paddingBottom?: string | number;
+}
+export declare class SortableList<T extends ISortable> extends React.Component<ISortableListProps<T>, {}> {
+    constructor(props: any);
+    self: any;
+    items: any[];
+    listId: string;
+    sortHandle: string;
+    calculateSortOrder(index: number): number;
+    componentDidMount(): void;
+    render(): React.JSX.Element;
+}
+export {};

package/dist/components/sortable-list.js

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SortableList = void 0;
+const react_1 = __importDefault(require("react"));
+const sortablejs_1 = __importDefault(require("sortablejs"));
+const lodash_1 = require("lodash");
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+class SortableList extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.sortHandle = this.props.dragHandleClassName && `.${this.props.dragHandleClassName}` || this.sortHandle;
+    }
+    self;
+    items = [];
+    listId = `${Date.now()}_${Math.round(Math.random() * 100000)}`;
+    sortHandle = `.sort-handle-${this.listId}`;
+    calculateSortOrder(index) {
+        const items = this.items;
+        if (index === 0)
+            return Date.now();
+        if (index >= items.length)
+            return (0, lodash_1.last)(items).sortOrder - 10000;
+        const above = items[index - 1].sortOrder ?? Date.now();
+        const below = items[index].sortOrder ?? Number.MIN_VALUE;
+        if (above === below)
+            alert('sort order has converged to the same number in this area.  Try moving items to the top or bottom of the list to fix it');
+        return above - ((above - below) / 2);
+    }
+    componentDidMount() {
+        const self = this;
+        const listDiv = document.getElementById(this.listId);
+        sortablejs_1.default.create(listDiv, {
+            handle: this.sortHandle,
+            group: { name: this.props.listsGroup || this.listId, put: !!this.props.onAdd },
+            animation: 100,
+            onUpdate: evt => {
+                const items = self.items;
+                const item = items.splice(evt.oldIndex, 1)[0];
+                item.sortOrder = this.calculateSortOrder(evt.newIndex);
+                items.splice(evt.newIndex, 0, item);
+                // console.log(items.map(i => i.toJS()));
+                if (this.props.onUpdate) {
+                    this.props.onUpdate({ items, ixMoved: [evt.newIndex] });
+                }
+            },
+            onAdd: evt => {
+                const itemEl = evt.item; // dragged HTMLElement
+                if (evt.to !== evt.from) {
+                    // first restore html hierarchy so html doesn't get out of sync with react
+                    evt.to.removeChild(itemEl);
+                    evt.from.appendChild(itemEl);
+                    // now if we were given an `onAdd` function, call it
+                    if (this.props.onAdd) {
+                        const itemId = evt.item.id;
+                        this.props.onAdd(itemId, this.calculateSortOrder(evt.newIndex));
+                    }
+                }
+            },
+        });
+    }
+    render() {
+        let items = (0, peers_sdk_1.unwrapObservable)(this.props.items);
+        if (this.props.sortDirection === 'asc') {
+            items = (0, lodash_1.sortBy)(items, i => i.sortOrder ?? -Infinity);
+        }
+        else {
+            // @ts-ignore
+            items = (0, lodash_1.sortBy)(items, i => -i.sortOrder ?? Infinity);
+        }
+        this.items = items;
+        return (react_1.default.createElement("div", { id: this.listId, style: { minHeight: this.props.minHeight ?? "25px", paddingBottom: this.props.paddingBottom ?? "10px" }, ...this.props.containerProps }, items.map(item => this.props.renderItem({ item, listId: this.listId, sortHandle: this.sortHandle.substring(1) }))));
+    }
+}
+exports.SortableList = SortableList;

package/dist/components/tabs.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface ITabsProps {
+    tabs: {
+        name: string;
+        content: JSX.Element;
+        active?: true;
+    }[];
+}
+export declare const Tabs: (props: ITabsProps) => React.JSX.Element;
+export declare const ScreenTabBody: (props: React.PropsWithChildren) => React.JSX.Element;
+export {};

package/dist/components/tabs.js

@@ -0,0 +1,69 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScreenTabBody = exports.Tabs = void 0;
+const react_1 = __importStar(require("react"));
+const globals_1 = require("../globals");
+let lastActive = '';
+const Tabs = (props) => {
+    const { tabs } = props;
+    const [activeTab, _setActiveTab] = (0, react_1.useState)(() => {
+        let activeTabName = tabs.find(tab => tab.active)?.name || (0, globals_1.queryParam)('tab') || lastActive;
+        activeTabName = activeTabName.toLowerCase();
+        const _activeTab = tabs.find(tab => tab.name.toLowerCase() === activeTabName) || tabs[0];
+        lastActive = _activeTab.name;
+        setTimeout(() => (0, globals_1.queryParam)('tab', lastActive.toLowerCase()));
+        return _activeTab;
+    });
+    function setActiveTab(tab) {
+        _setActiveTab(tab);
+        (0, globals_1.queryParam)('tab', tab.name.toLowerCase());
+        lastActive = tab.name;
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("ul", { className: "nav nav-tabs" }, tabs.map((tab, iTab) => {
+            return (react_1.default.createElement("li", { key: tab.name + iTab, className: "nav-item" },
+                react_1.default.createElement("a", { href: "#", className: "nav-link " + (activeTab.name === tab.name ? 'active' : ''), onClick: evt => (evt.preventDefault(), setActiveTab(tab)) }, tab.name)));
+        })),
+        react_1.default.createElement("br", null),
+        tabs.map((tab, iTab) => {
+            return (react_1.default.createElement("div", { key: tab.name + iTab, hidden: activeTab.name !== tab.name }, tab.content));
+        })));
+};
+exports.Tabs = Tabs;
+const ScreenTabBody = (props) => {
+    return (react_1.default.createElement("div", { style: { maxHeight: 'calc(100vh - 138px)', overflowY: 'auto' } }, props.children));
+};
+exports.ScreenTabBody = ScreenTabBody;

package/dist/components/text-list-editor.tsx/text-list-editor.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IMarkdownEditorProps } from '../markdown-editor/editor';
+interface TextListEditorProps extends IMarkdownEditorProps {
+}
+export declare const TextListEditor: (props: TextListEditorProps) => React.JSX.Element;
+export {};

package/dist/components/text-list-editor.tsx/text-list-editor.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextListEditor = void 0;
+const react_1 = __importDefault(require("react"));
+const editor_1 = require("../markdown-editor/editor");
+const TextListEditor = (props) => {
+    return (react_1.default.createElement("div", { className: "border rounded border-dark-subtle" },
+        react_1.default.createElement(editor_1.MarkdownEditor, { ...props })));
+};
+exports.TextListEditor = TextListEditor;

package/dist/components/tooltip.d.ts

@@ -0,0 +1,11 @@
+import { Observable } from "@peers-app/peers-sdk";
+import React from 'react';
+interface IProps {
+    markdownContent?: string | Observable<string> | Observable<string | undefined>;
+    handle?: React.ReactNode;
+    handleClassName?: string;
+    positions?: ('right' | 'bottom' | 'left' | 'top')[];
+    genericContent?: React.ReactNode;
+}
+export declare const Tooltip: (props: IProps) => React.JSX.Element;
+export {};

package/dist/components/tooltip.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+const react_1 = __importDefault(require("react"));
+const react_tiny_popover_1 = require("react-tiny-popover");
+const markdown_with_mentions_1 = require("./markdown-with-mentions");
+const hooks_1 = require("../hooks");
+const Tooltip = (props) => {
+    const { handle } = props;
+    let [markdownContent] = (0, hooks_1.useObservable)(props.markdownContent);
+    markdownContent = markdownContent ?? '';
+    const showPopover = (0, hooks_1.useObservableState)(false);
+    return (react_1.default.createElement(react_tiny_popover_1.Popover, { isOpen: showPopover(), onClickOutside: () => showPopover(false), positions: props.positions ?? ['right', 'bottom', 'left', 'top'], content: () => (react_1.default.createElement("div", { className: 'card p-2 bg-light-subtle', style: { maxWidth: 500, maxHeight: 400, overflowY: 'auto', zIndex: 1000001 } }, props.genericContent ||
+            react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: markdownContent }))) },
+        react_1.default.createElement("span", { className: props.handleClassName ?? 'p-2', onClick: () => showPopover(!showPopover()) }, handle ?? react_1.default.createElement("i", { className: "bi bi-info-circle", style: { cursor: 'pointer' } }))));
+};
+exports.Tooltip = Tooltip;

package/dist/components/top-bar.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TopBar: () => React.JSX.Element;

package/dist/components/top-bar.js

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TopBar = void 0;
+const react_1 = __importDefault(require("react"));
+// import { visibleNotifications } from '../notifications';
+const TopBar = () => {
+    // const [_notifications] = useObservable(visibleNotifications);
+    // const unreadNotifications = _notifications.filter(n => !n.status);
+    // const unreadNotificationCount = unreadNotifications.length;
+    // const [group] = useObservable(globals.activeGroup);
+    let connections = [1, 2, 3];
+    let connectionsSyncing = [1, 2];
+    let unreadNotificationCount = 0;
+    return (react_1.default.createElement("nav", { className: "navbar navbar-expand-lg navbar-dark bg-body-tertiary fixed-top peers-top-bar", 
+        // style={{ borderLeft: 'solid', borderColor: '#606365', borderWidth: globals.isDesktop() ? '1px' : 0,   }}
+        // style={{ borderBottom: 'solid', borderColor: '#606365', borderWidth: '1px',   }}
+        style: { height: '50px' } },
+        react_1.default.createElement("div", { className: "container-fluid" },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("button", { className: "navbar-toggler collapsed", type: "button", "data-bs-toggle": "offcanvas", "data-bs-target": "#leftBar", "aria-controls": "leftBar", "aria-expanded": "false", "aria-label": "Toggle Left Bar" },
+                    react_1.default.createElement("span", { className: "navbar-toggler-icon" }))),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("span", { className: "text-white" }, " open tabs here")),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("span", { className: "navbar-text", style: { marginRight: 8, fontSize: "12pt" } },
+                    react_1.default.createElement("span", { style: { display: 'inline-block' } },
+                        Boolean(connectionsSyncing.length) && [
+                            connectionsSyncing.length + " ",
+                            react_1.default.createElement("i", { key: "1", className: "bi bi-arrow-repeat" }),
+                            react_1.default.createElement("span", { key: "2" }, "\u00A0\u00A0\u00A0")
+                        ],
+                        connections.length,
+                        " ",
+                        react_1.default.createElement("i", { className: "bi bi-arrow-down-up" }))),
+                react_1.default.createElement("button", { type: "button", className: "btn btn-dark position-relative", "data-bs-toggle": "offcanvas", "data-bs-target": "#rightBar", "aria-controls": "rightBar", "aria-expanded": "false", "aria-label": "Toggle Right Bar", 
+                    // TODO take this out once we are ready to show content in the right bar
+                    hidden: true },
+                    react_1.default.createElement("i", { className: `bi bi-bell${unreadNotificationCount > 0 ? '-fill' : ''}` }),
+                    react_1.default.createElement("span", { className: "translate-middle badge rounded-pill bg-danger", style: {
+                            display: unreadNotificationCount < 1 ? 'none' : '',
+                            position: 'absolute',
+                            top: unreadNotificationCount > 9 ? 4 : 7,
+                            right: unreadNotificationCount > 9 ? -27 : -16
+                        } },
+                        unreadNotificationCount > 9 ? "9+" : unreadNotificationCount,
+                        react_1.default.createElement("span", { className: "visually-hidden" }, "unread notifications")))))));
+};
+exports.TopBar = TopBar;

package/dist/components/typeahead/mentions-plugin.d.ts

@@ -0,0 +1,7 @@
+import { Observable } from "@peers-app/peers-sdk";
+import { IMentionConfig } from '../../mention-configs';
+export declare const MENTIONS_MAX_RESULTS = 10;
+export declare function MentionsPlugin(props: {
+    mentionConfigs?: IMentionConfig[];
+    mentionsOpen?: Observable<boolean>;
+}): JSX.Element | null;

package/dist/components/typeahead/mentions-plugin.js

@@ -0,0 +1,203 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MENTIONS_MAX_RESULTS = void 0;
+exports.MentionsPlugin = MentionsPlugin;
+const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+const LexicalTypeaheadMenuPlugin_1 = require("@lexical/react/LexicalTypeaheadMenuPlugin");
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const lexical_1 = require("lexical");
+const lodash_1 = require("lodash");
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const ReactDOM = __importStar(require("react-dom"));
+const mention_node_1 = require("../markdown-editor/mention-node");
+// At most, 5 suggestions are shown in the popup.
+const SUGGESTION_LIST_LENGTH_LIMIT = 10;
+exports.MENTIONS_MAX_RESULTS = 10;
+function useMentionLookupService(mentionString, mentionConfigs = []) {
+    const [results, setResults] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        if (!mentionString) {
+            setResults([]);
+            return;
+        }
+        (async () => {
+            mentionString = mentionString || '';
+            const prefix = mentionString[0];
+            // TODO simplify how users can include completed tasks in their search
+            let searchCompletedTasks = prefix === '$' && mentionString.startsWith('done');
+            if (searchCompletedTasks) {
+                mentionString = mentionString.slice(4);
+            }
+            let kind = '';
+            if (mentionString.includes(':')) {
+                const parts = mentionString.split(':');
+                kind = parts[0];
+                mentionString = parts[1] || '';
+            }
+            const config = mentionConfigs?.find(c => c.kind === kind);
+            if (config) {
+                let results = await config.query(mentionString);
+                results = results.map(r => ({ ...r, clickable: false }));
+                setResults(results);
+                return;
+            }
+            const results = await Promise.all(mentionConfigs?.map(c => c.query(mentionString || '')));
+            let allResults = results.flat();
+            allResults = (0, lodash_1.uniqBy)(allResults, 'id');
+            let filteredResults = allResults;
+            if (prefix === '@') {
+                filteredResults = filteredResults.filter((result) => result.kind === 'user' || result.kind === 'assistant');
+            }
+            else {
+                filteredResults = filteredResults.filter((result) => result.kind !== 'user' && result.kind !== 'assistant');
+            }
+            if (kind) {
+                filteredResults = allResults.filter((result) => result.kind.toLowerCase() === kind.toLowerCase());
+            }
+            else if (!filteredResults.length) {
+                filteredResults = allResults;
+            }
+            filteredResults = (0, lodash_1.sortBy)(filteredResults, r => {
+                return r.name.toLowerCase().indexOf((mentionString).toLowerCase());
+            });
+            filteredResults = filteredResults.slice(0, SUGGESTION_LIST_LENGTH_LIMIT);
+            filteredResults = filteredResults.map(r => ({ ...r, clickable: false }));
+            setResults(filteredResults);
+        })();
+    }, [mentionString]);
+    return results;
+}
+class MentionTypeaheadOption extends LexicalTypeaheadMenuPlugin_1.MenuOption {
+    data;
+    name;
+    picture;
+    id;
+    userId;
+    constructor(data, picture) {
+        super(data.name);
+        this.data = data;
+        this.name = data.name;
+        this.picture = picture;
+        this.id = data.id;
+        // if (data.kind === 'assistant') {
+        //   this.userId = data.userId;
+        // }
+    }
+}
+function MentionsTypeaheadMenuItem({ index, isSelected, onClick, onMouseEnter, option, }) {
+    let className = 'item';
+    if (isSelected) {
+        className += ' selected';
+    }
+    return (React.createElement("li", { key: option.key, tabIndex: -1, className: className, ref: option.setRefElement, role: "option", "aria-selected": isSelected, id: 'typeahead-item-' + index, onMouseEnter: onMouseEnter, onClick: onClick, "data-kind": option.data.kind, "data-id": option.id, "data-user-id": option.userId || undefined },
+        option.picture,
+        React.createElement("span", { className: "text" }, option.name)));
+}
+function MentionsPlugin(props) {
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    const [queryString, setQueryString] = (0, react_1.useState)(null);
+    const results = useMentionLookupService(queryString, props.mentionConfigs);
+    const [_mentionsOpen] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(false));
+    if (props.mentionsOpen) {
+        const finalMentionsOpen = _mentionsOpen() && results.length > 0;
+        if (props.mentionsOpen() !== finalMentionsOpen) {
+            props.mentionsOpen(finalMentionsOpen);
+        }
+    }
+    const checkForSlashTriggerMatch = (0, LexicalTypeaheadMenuPlugin_1.useBasicTypeaheadTriggerMatch)('/', {
+        minLength: 0,
+    });
+    const options = (0, react_1.useMemo)(() => results
+        .map((result) => {
+        let picture = React.createElement("i", { className: "bi bi-question pe-1" });
+        const config = props.mentionConfigs?.find(c => c.kind === result.kind);
+        if (config) {
+            if (config.picture) {
+                picture = config.picture(result);
+            }
+            else {
+                picture = React.createElement("i", { className: config.iconClass + ' pe-1' });
+            }
+        }
+        else {
+            picture = React.createElement("i", { className: 'bi bi-question pe-1' });
+        }
+        return new MentionTypeaheadOption(result, picture);
+    })
+        .slice(0, SUGGESTION_LIST_LENGTH_LIMIT), [results]);
+    const onSelectOption = (0, react_1.useCallback)((selectedOption, nodeToReplace, closeMenu) => {
+        editor.update(() => {
+            const mentionNode = (0, mention_node_1.$createMentionNode)(selectedOption.data);
+            if (nodeToReplace) {
+                nodeToReplace.replace(mentionNode);
+            }
+            mentionNode.selectNext(); // Move cursor to the position after the mention
+            const selection = (0, lexical_1.$getSelection)();
+            if (selection !== null) {
+                selection.insertText(' '); // Insert a space after the mention
+            }
+            closeMenu();
+        });
+    }, [editor]);
+    const checkForMentionMatch = (0, react_1.useCallback)((text) => {
+        const textTrimmed = text.trimStart();
+        return {
+            leadOffset: text.length - textTrimmed.length,
+            matchingString: text.trim(),
+            replaceableString: text.trim(),
+        };
+    }, [checkForSlashTriggerMatch, editor]);
+    return (React.createElement(LexicalTypeaheadMenuPlugin_1.LexicalTypeaheadMenuPlugin, { onQueryChange: setQueryString, onSelectOption: onSelectOption, triggerFn: checkForMentionMatch, options: options, onOpen: () => _mentionsOpen(true), onClose: () => _mentionsOpen(false), menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
+            if (!(anchorElementRef.current && results.length)) {
+                return null;
+            }
+            // distance from the top of the viewport to the top of the anchor element
+            const anchorTop = anchorElementRef.current.getBoundingClientRect().top;
+            const viewportHeight = window.innerHeight;
+            let className = 'typeahead-popover mentions-menu';
+            if (anchorTop > (viewportHeight / 2)) {
+                className += ' mentions-menu-popup';
+            }
+            return ReactDOM.createPortal(React.createElement("div", { className: className },
+                React.createElement("ul", null, options.map((option, i) => (React.createElement(MentionsTypeaheadMenuItem, { index: i, isSelected: selectedIndex === i, onClick: () => {
+                        setHighlightedIndex(i);
+                        selectOptionAndCleanUp(option);
+                    }, onMouseEnter: () => {
+                        setHighlightedIndex(i);
+                    }, key: option.key, option: option }))))), anchorElementRef.current);
+        } }));
+}

package/dist/components/typeahead/typeahead-editor.d.ts

@@ -0,0 +1,15 @@
+import { Observable } from "@peers-app/peers-sdk";
+import React from 'react';
+import { IMentionConfig } from '../../mention-configs';
+export interface IEditorEffects {
+    onKeyDown?: (e: React.KeyboardEvent) => (boolean | void);
+    focus?: () => void;
+}
+export interface ITypeaheadEditorProps {
+    value: Observable<string>;
+    effects?: IEditorEffects;
+    autoFocus?: boolean;
+    maxHeight?: string | number;
+    mentionConfigs?: IMentionConfig[];
+}
+export declare function TypeaheadEditor(props: ITypeaheadEditorProps): React.JSX.Element;