@peers-app/peers-ui 0.0.14

package/dist/components/markdown-editor/mention-node.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MentionNode = void 0;
+exports.$createMentionNode = $createMentionNode;
+exports.$isMentionNode = $isMentionNode;
+const lexical_1 = require("lexical");
+const globals_1 = require("../../globals");
+const mention_configs_1 = require("../../mention-configs");
+function $convertMentionElement(domNode) {
+    const mentionName = domNode.textContent?.substring(1);
+    const dataKind = domNode.getAttribute('data-kind') ?? '';
+    const dataId = domNode.getAttribute('data-id') ?? '';
+    const clickable = domNode.getAttribute('data-clickable');
+    if (mentionName && dataId) {
+        const data = {
+            kind: dataKind,
+            name: mentionName,
+            id: dataId,
+            clickable: clickable === 'true' ? true : clickable === 'false' ? false : undefined,
+        };
+        const node = $createMentionNode(data);
+        return {
+            node,
+        };
+    }
+    return null;
+}
+class MentionNode extends lexical_1.TextNode {
+    data;
+    static getType() {
+        return 'mention';
+    }
+    static clone(node) {
+        return new MentionNode(node.data, node.__key);
+    }
+    static importJSON(serializedNode) {
+        const node = $createMentionNode(serializedNode.data);
+        // node.setTextContent('@' + serializedNode.text);
+        node.setTextContent(serializedNode.text);
+        node.setFormat(serializedNode.format);
+        node.setDetail(serializedNode.detail);
+        node.setMode(serializedNode.mode);
+        node.setStyle(serializedNode.style);
+        return node;
+    }
+    constructor(data, key) {
+        // const prefix = (data.kind === 'assistant' || data.kind === 'user') ? '@' : '$';
+        const prefix = data.kind === 'user' ? '@' : '';
+        super(prefix + data.name, key);
+        this.data = data;
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            type: 'mention',
+            version: 1,
+            data: this.data,
+        };
+    }
+    createDOM(config) {
+        const dom = super.createDOM(config);
+        const kind = this.data.kind;
+        const mentionConfig = mention_configs_1.mentionConfigs.find(c => c.kind === kind);
+        if (mentionConfig) {
+            dom.className = mentionConfig.styleClass || 'mention-default-default';
+        }
+        else {
+            dom.className = `mention-${this.data.kind}`;
+        }
+        dom.textContent = this.__text;
+        dom.setAttribute('data-kind', this.data.kind);
+        dom.setAttribute('data-id', this.data.id);
+        dom.setAttribute('data-clickable', this.data.clickable === undefined ? '' : String(this.data.clickable));
+        // currently ignoring `clickable` attribute
+        // if (this.data.clickable !== false) {...
+        const onClick = mentionConfig?.onClick;
+        dom.style.cursor = 'pointer';
+        dom.addEventListener('click', () => {
+            if (onClick) {
+                onClick(this.data);
+            }
+            else {
+                const id = this.data.id;
+                const href = `#${kind}s/${id}`;
+                (0, globals_1.mainContentPath)(href);
+            }
+        });
+        if (mentionConfig && kind !== 'user') {
+            const iconSpan = document.createElement('i');
+            iconSpan.className = 'pe-1 ' + mentionConfig.iconClass;
+            dom.prepend(iconSpan);
+            return dom;
+        }
+        // else if (kind === 'task') {
+        //   const ckbx = document.createElement('input');
+        //   ckbx.type = 'checkbox';
+        //   ckbx.className = 'me-1';
+        //   const taskId = this.data.id;
+        //   Tasks().get(taskId).then(task => {
+        //     if (!task) return;
+        //     ckbx.checked = !!task.completeDT;
+        //     ckbx.addEventListener('change', () => {
+        //       task.completeDT = ckbx.checked ? new Date() : undefined;
+        //       Tasks().update(task);
+        //     });
+        //   });
+        //   const sub = Tasks().dataChanged.subscribe(evt => {
+        //     const task = evt.dataObject as ITask;
+        //     if (!task || task.taskId !== taskId) return;
+        //     if (!document.body.contains(ckbx)) {
+        //       sub.unsubscribe();
+        //     } else {
+        //       ckbx.checked = !!task.completeDT;
+        //     }
+        //   });
+        //   dom.prepend(ckbx);
+        // }
+        return dom;
+    }
+    exportDOM() {
+        const element = document.createElement('span');
+        element.setAttribute('data-lexical-mention', 'true');
+        element.textContent = this.__text;
+        element.setAttribute('data-kind', this.data.kind);
+        element.setAttribute('data-id', this.data.id);
+        element.setAttribute('data-clickable', this.data.clickable === undefined ? '' : String(this.data.clickable));
+        return { element };
+    }
+    static importDOM() {
+        return {
+            span: (domNode) => {
+                if (!domNode.hasAttribute('data-lexical-mention')) {
+                    return null;
+                }
+                return {
+                    conversion: $convertMentionElement,
+                    priority: 1,
+                };
+            },
+        };
+    }
+    isTextEntity() {
+        return true;
+    }
+    canInsertTextBefore() {
+        return false;
+    }
+    canInsertTextAfter() {
+        return false;
+    }
+}
+exports.MentionNode = MentionNode;
+function $createMentionNode(data) {
+    const mentionNode = new MentionNode(data);
+    mentionNode.setMode('segmented').toggleDirectionless();
+    return (0, lexical_1.$applyNodeReplacement)(mentionNode);
+}
+function $isMentionNode(node) {
+    return node instanceof MentionNode;
+}

package/dist/components/markdown-editor/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/markdown-editor/mentions-plugin.js

@@ -0,0 +1,268 @@
+"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("./mention-node");
+const PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
+const NAME = '\\b[A-Z][^\\s' + PUNCTUATION + ']';
+const DocumentMentionsRegex = {
+    NAME,
+    PUNCTUATION,
+};
+const PUNC = DocumentMentionsRegex.PUNCTUATION;
+const TRIGGERS = ['@', '<'].join('');
+// Chars we expect to see in a mention (non-space, non-punctuation).
+const VALID_CHARS = '[^' + TRIGGERS + PUNC + '\\s]';
+// Non-standard series of chars. Each series must be preceded and followed by
+// a valid char.
+const VALID_JOINS = '(?:' +
+    '\\.[ |$]|' + // E.g. "r. " in "Mr. Smith"
+    ' |' + // E.g. " " in "Josh Duck"
+    '[' +
+    PUNC +
+    ']|' + // E.g. "-' in "Salier-Hellendag"
+    ')';
+const LENGTH_LIMIT = 75;
+const AtSignMentionsRegex = new RegExp('(^|\\s|\\()(' +
+    '[' +
+    TRIGGERS +
+    ']' +
+    '((?:' +
+    VALID_CHARS +
+    VALID_JOINS +
+    '){0,' +
+    LENGTH_LIMIT +
+    '})' +
+    ')$');
+// 50 is the longest alias length limit.
+const ALIAS_LENGTH_LIMIT = 50;
+// Regex used to match alias.
+const AtSignMentionsRegexAliasRegex = new RegExp('(^|\\s|\\()(' +
+    '[' +
+    TRIGGERS +
+    ']' +
+    '((?:' +
+    VALID_CHARS +
+    '){0,' +
+    ALIAS_LENGTH_LIMIT +
+    '})' +
+    ')$');
+// 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 () => {
+            const prefix = mentionString[0];
+            mentionString = mentionString.slice(1);
+            // 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) {
+                const results = await config.query(mentionString);
+                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);
+            setResults(filteredResults);
+        })();
+    }, [mentionString]);
+    return results;
+}
+function checkForAtSignMentions(text, minMatchLength) {
+    let match = AtSignMentionsRegex.exec(text);
+    if (match === null) {
+        match = AtSignMentionsRegexAliasRegex.exec(text);
+    }
+    if (match !== null) {
+        // The strategy ignores leading whitespace but we need to know it's
+        // length to add it to the leadOffset
+        const maybeLeadingWhitespace = match[1];
+        const matchingString = match[3];
+        if (matchingString.length >= minMatchLength) {
+            return {
+                leadOffset: match.index + maybeLeadingWhitespace.length,
+                matchingString: match[2],
+                replaceableString: match[2],
+            };
+        }
+    }
+    return null;
+}
+function getPossibleQueryMatch(text) {
+    return checkForAtSignMentions(text, 1);
+}
+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 slashMatch = checkForSlashTriggerMatch(text, editor);
+        if (slashMatch !== null) {
+            return null;
+        }
+        return getPossibleQueryMatch(text);
+    }, [checkForSlashTriggerMatch, editor]);
+    const popoverRef = React.useRef(null);
+    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/markdown-editor/theme.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+declare const _default: {
+    code: string;
+    heading: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+    };
+    image: string;
+    link: string;
+    list: {
+        listitem: string;
+        nested: {
+            listitem: string;
+        };
+        ol: string;
+        ul: string;
+        checklist: string;
+        listitemChecked: string;
+        listitemUnchecked: string;
+    };
+    ltr: string;
+    paragraph: string;
+    placeholder: string;
+    quote: string;
+    rtl: string;
+    text: {
+        bold: string;
+        code: string;
+        hashtag: string;
+        italic: string;
+        overflowed: string;
+        strikethrough: string;
+        underline: string;
+        underlineStrikethrough: string;
+    };
+};
+export default _default;

package/dist/components/markdown-editor/theme.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+exports.default = {
+    code: 'editor-code',
+    heading: {
+        h1: 'editor-heading-h1',
+        h2: 'editor-heading-h2',
+        h3: 'editor-heading-h3',
+        h4: 'editor-heading-h4',
+        h5: 'editor-heading-h5',
+    },
+    image: 'editor-image',
+    link: 'editor-link',
+    list: {
+        listitem: 'editor-listitem',
+        nested: {
+            // listitem: 'editor-nested-listitem',
+            listitem: 'PlaygroundEditorTheme__nestedListItem',
+        },
+        ol: 'editor-list-ol',
+        ul: 'editor-list-ul',
+        checklist: 'PlaygroundEditorTheme__checklist',
+        listitemChecked: 'PlaygroundEditorTheme__listItemChecked',
+        listitemUnchecked: 'PlaygroundEditorTheme__listItemUnchecked',
+    },
+    ltr: 'ltr',
+    paragraph: 'editor-paragraph',
+    placeholder: 'editor-placeholder',
+    quote: 'editor-quote',
+    rtl: 'rtl',
+    text: {
+        bold: 'editor-text-bold',
+        code: 'editor-text-code',
+        hashtag: 'editor-text-hashtag',
+        italic: 'editor-text-italic',
+        overflowed: 'editor-text-overflowed',
+        strikethrough: 'editor-text-strikethrough',
+        underline: 'editor-text-underline',
+        underlineStrikethrough: 'editor-text-underlineStrikethrough',
+    },
+};

package/dist/components/markdown-editor/toolbar.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface IToolbarControl {
+    iconClass: string;
+    onClick: () => any;
+    title?: string;
+}
+export interface IToolbarProps {
+    topRightControls?: IToolbarControl[];
+}
+export declare function ToolbarPlugin(props: IToolbarProps): React.JSX.Element;

package/dist/components/markdown-editor/toolbar.js

@@ -0,0 +1,112 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarPlugin = ToolbarPlugin;
+const react_1 = __importDefault(require("react"));
+const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+const utils_1 = require("@lexical/utils");
+const lexical_1 = require("lexical");
+const list_1 = require("@lexical/list");
+const react_2 = require("react");
+const LowPriority = 1;
+function Divider() {
+    return react_1.default.createElement("span", { className: 'tool-bar-divider' });
+}
+function ToolbarPlugin(props) {
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    const toolbarRef = (0, react_2.useRef)(null);
+    const [canUndo, setCanUndo] = (0, react_2.useState)(false);
+    const [canRedo, setCanRedo] = (0, react_2.useState)(false);
+    const [isBold, setIsBold] = (0, react_2.useState)(false);
+    const [isItalic, setIsItalic] = (0, react_2.useState)(false);
+    const [isUnderline, setIsUnderline] = (0, react_2.useState)(false);
+    const [isStrikethrough, setIsStrikethrough] = (0, react_2.useState)(false);
+    // New state for list types
+    const [isUnorderedList, setIsUnorderedList] = (0, react_2.useState)(false);
+    const [isOrderedList, setIsOrderedList] = (0, react_2.useState)(false);
+    const [isCheckList, setIsCheckList] = (0, react_2.useState)(false);
+    const $updateToolbar = (0, react_2.useCallback)(() => {
+        const selection = (0, lexical_1.$getSelection)();
+        if ((0, lexical_1.$isRangeSelection)(selection)) {
+            // Update text format
+            setIsBold(selection.hasFormat('bold'));
+            setIsItalic(selection.hasFormat('italic'));
+            setIsUnderline(selection.hasFormat('underline'));
+            setIsStrikethrough(selection.hasFormat('strikethrough'));
+            // Update list format
+            const anchorNode = selection.anchor.getNode();
+            const element = anchorNode.getKey() === 'root' ? anchorNode : anchorNode.getTopLevelElementOrThrow();
+            const elementKey = element.getKey();
+            const elementDOM = editor.getElementByKey(elementKey);
+            if (elementDOM !== null) {
+                setIsUnorderedList(elementDOM.tagName === 'UL');
+                setIsOrderedList(elementDOM.tagName === 'OL');
+                setIsCheckList(elementDOM.tagName === 'UL' && elementDOM.classList.contains('PlaygroundEditorTheme__checklist'));
+            }
+        }
+    }, [editor]);
+    (0, react_2.useEffect)(() => {
+        return (0, utils_1.mergeRegister)(editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                $updateToolbar();
+            });
+        }), editor.registerCommand(lexical_1.SELECTION_CHANGE_COMMAND, (_payload, _newEditor) => {
+            $updateToolbar();
+            return false;
+        }, LowPriority), editor.registerCommand(lexical_1.CAN_UNDO_COMMAND, (payload) => {
+            setCanUndo(payload);
+            return false;
+        }, LowPriority), editor.registerCommand(lexical_1.CAN_REDO_COMMAND, (payload) => {
+            setCanRedo(payload);
+            return false;
+        }, LowPriority));
+    }, [editor, $updateToolbar]);
+    const insertUnorderedList = () => {
+        if (isUnorderedList) {
+            editor.dispatchCommand(list_1.REMOVE_LIST_COMMAND, undefined);
+        }
+        else {
+            editor.dispatchCommand(list_1.INSERT_UNORDERED_LIST_COMMAND, undefined);
+        }
+    };
+    const insertOrderedList = () => {
+        if (isOrderedList) {
+            editor.dispatchCommand(list_1.REMOVE_LIST_COMMAND, undefined);
+        }
+        else {
+            editor.dispatchCommand(list_1.INSERT_ORDERED_LIST_COMMAND, undefined);
+        }
+    };
+    const insertCheckList = () => {
+        if (isCheckList) {
+            editor.dispatchCommand(list_1.REMOVE_LIST_COMMAND, undefined);
+        }
+        else {
+            editor.dispatchCommand(list_1.INSERT_CHECK_LIST_COMMAND, undefined);
+        }
+    };
+    return (react_1.default.createElement("div", { className: "toolbar", ref: toolbarRef },
+        react_1.default.createElement("button", { onClick: () => {
+                editor.dispatchCommand(lexical_1.FORMAT_TEXT_COMMAND, 'bold');
+            }, tabIndex: -1, className: 'toolbar-item spaced ' + (isBold ? 'active' : ''), "aria-label": "Format Bold" },
+            react_1.default.createElement("i", { className: "bi bi-type-bold" })),
+        react_1.default.createElement("button", { tabIndex: -1, onClick: () => {
+                editor.dispatchCommand(lexical_1.FORMAT_TEXT_COMMAND, 'italic');
+            }, className: 'toolbar-item spaced ' + (isItalic ? 'active' : ''), "aria-label": "Format Italics" },
+            react_1.default.createElement("i", { className: "bi bi-type-italic" })),
+        react_1.default.createElement("button", { tabIndex: -1, onClick: () => {
+                editor.dispatchCommand(lexical_1.FORMAT_TEXT_COMMAND, 'strikethrough');
+            }, className: 'toolbar-item spaced ' + (isStrikethrough ? 'active' : ''), "aria-label": "Format Strikethrough" },
+            react_1.default.createElement("i", { className: "bi bi-type-strikethrough" })),
+        react_1.default.createElement(Divider, null),
+        react_1.default.createElement("button", { tabIndex: -1, onClick: insertUnorderedList, className: 'toolbar-item spaced ' + (isUnorderedList ? 'active' : ''), "aria-label": "Insert Unordered List" },
+            react_1.default.createElement("i", { className: "bi bi-list-ul" })),
+        react_1.default.createElement("button", { tabIndex: -1, onClick: insertOrderedList, className: 'toolbar-item spaced ' + (isOrderedList ? 'active' : ''), "aria-label": "Insert Ordered List" },
+            react_1.default.createElement("i", { className: "bi bi-list-ol" })),
+        react_1.default.createElement("button", { tabIndex: -1, onClick: insertCheckList, className: 'toolbar-item spaced ' + (isCheckList ? 'active' : ''), "aria-label": "Insert Check List" },
+            react_1.default.createElement("i", { className: "bi bi-list-check" })),
+        (props.topRightControls?.length ?? 0) > 0 && (react_1.default.createElement("div", { className: 'float-end' }, props.topRightControls?.map((control, i) => (react_1.default.createElement("button", { key: i, tabIndex: -1, onClick: control.onClick, className: 'toolbar-item spaced active', "aria-label": "Insert Check List", title: control.title },
+            react_1.default.createElement("i", { className: control.iconClass }))))))));
+}

package/dist/components/markdown-with-mentions.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const MarkdownWithMentions: React.FC<{
+    content: string;
+}>;