@peers-app/peers-ui 0.14.0 → 0.15.0

package/dist/components/markdown-editor/mentions-plugin.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MENTIONS_MAX_RESULTS = void 0;
 exports.MentionsPlugin = MentionsPlugin;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
 const LexicalTypeaheadMenuPlugin_1 = require("@lexical/react/LexicalTypeaheadMenuPlugin");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
@@ -44,50 +45,50 @@ 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 PUNCTUATION = "\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'\"~=<>_:;";
+const NAME = `\\b[A-Z][^\\s${PUNCTUATION}]`;
 const DocumentMentionsRegex = {
     NAME,
     PUNCTUATION,
 };
 const PUNC = DocumentMentionsRegex.PUNCTUATION;
-const TRIGGERS = ['@', '<'].join('');
+const TRIGGERS = ["@", "<"].join("");
 // Chars we expect to see in a mention (non-space, non-punctuation).
-const VALID_CHARS = '[^' + TRIGGERS + PUNC + '\\s]';
+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"
-    '[' +
+const VALID_JOINS = "(?:" +
+    "\\.[ |$]|" + // E.g. "r. " in "Mr. Smith"
+    " |" + // E.g. " " in "Josh Duck"
+    "[" +
     PUNC +
-    ']|' + // E.g. "-' in "Salier-Hellendag"
-    ')';
+    "]|" + // E.g. "-' in "Salier-Hellendag"
+    ")";
 const LENGTH_LIMIT = 75;
-const AtSignMentionsRegex = new RegExp('(^|\\s|\\()(' +
-    '[' +
+const AtSignMentionsRegex = new RegExp("(^|\\s|\\()(" +
+    "[" +
     TRIGGERS +
-    ']' +
-    '((?:' +
+    "]" +
+    "((?:" +
     VALID_CHARS +
     VALID_JOINS +
-    '){0,' +
+    "){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|\\()(' +
-    '[' +
+const AtSignMentionsRegexAliasRegex = new RegExp("(^|\\s|\\()(" +
+    "[" +
     TRIGGERS +
-    ']' +
-    '((?:' +
+    "]" +
+    "((?:" +
     VALID_CHARS +
-    '){0,' +
+    "){0," +
     ALIAS_LENGTH_LIMIT +
-    '})' +
-    ')$');
+    "})" +
+    ")$");
 // At most, 5 suggestions are shown in the popup.
 const SUGGESTION_LIST_LENGTH_LIMIT = 10;
 exports.MENTIONS_MAX_RESULTS = 10;
@@ -102,31 +103,31 @@ function useMentionLookupService(mentionString, mentionConfigs = []) {
             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');
+            const searchCompletedTasks = prefix === "$" && mentionString.startsWith("done");
             if (searchCompletedTasks) {
                 mentionString = mentionString.slice(4);
             }
-            let kind = '';
-            if (mentionString.includes(':')) {
-                const parts = mentionString.split(':');
+            let kind = "";
+            if (mentionString.includes(":")) {
+                const parts = mentionString.split(":");
                 kind = parts[0];
-                mentionString = parts[1] || '';
+                mentionString = parts[1] || "";
             }
-            const config = mentionConfigs?.find(c => c.kind === kind);
+            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 || '')));
+            const results = await Promise.all(mentionConfigs?.map((c) => c.query(mentionString || "")));
             let allResults = results.flat();
-            allResults = (0, lodash_1.uniqBy)(allResults, 'id');
+            allResults = (0, lodash_1.uniqBy)(allResults, "id");
             let filteredResults = allResults;
-            if (prefix === '@') {
-                filteredResults = filteredResults.filter((result) => result.kind === 'user' || result.kind === 'assistant');
+            if (prefix === "@") {
+                filteredResults = filteredResults.filter((result) => result.kind === "user" || result.kind === "assistant");
             }
             else {
-                filteredResults = filteredResults.filter((result) => result.kind !== 'user' && result.kind !== 'assistant');
+                filteredResults = filteredResults.filter((result) => result.kind !== "user" && result.kind !== "assistant");
             }
             if (kind) {
                 filteredResults = allResults.filter((result) => result.kind.toLowerCase() === kind.toLowerCase());
@@ -134,13 +135,13 @@ function useMentionLookupService(mentionString, mentionConfigs = []) {
             else if (!filteredResults.length) {
                 filteredResults = allResults;
             }
-            filteredResults = (0, lodash_1.sortBy)(filteredResults, r => {
-                return r.name.toLowerCase().indexOf((mentionString).toLowerCase());
+            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]);
+    }, [mentionString, mentionConfigs?.find, mentionConfigs?.map]);
     return results;
 }
 function checkForAtSignMentions(text, minMatchLength) {
@@ -184,13 +185,11 @@ class MentionTypeaheadOption extends LexicalTypeaheadMenuPlugin_1.MenuOption {
     }
 }
 function MentionsTypeaheadMenuItem({ index, isSelected, onClick, onMouseEnter, option, }) {
-    let className = 'item';
+    let className = "item";
     if (isSelected) {
-        className += ' selected';
+        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)));
+    return ((0, jsx_runtime_1.jsxs)("li", { tabIndex: -1, className: className, ref: option.setRefElement, "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, children: [option.picture, (0, jsx_runtime_1.jsx)("span", { className: "text", children: option.name })] }, option.key));
 }
 function MentionsPlugin(props) {
     const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
@@ -203,27 +202,28 @@ function MentionsPlugin(props) {
             props.mentionsOpen(finalMentionsOpen);
         }
     }
-    const checkForSlashTriggerMatch = (0, LexicalTypeaheadMenuPlugin_1.useBasicTypeaheadTriggerMatch)('/', {
+    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);
+        const picKey = `mention-pic-${result.kind}-${result.id}`;
+        let picture = (0, jsx_runtime_1.jsx)("i", { className: "bi bi-question pe-1" }, picKey);
+        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' });
+                picture = (0, jsx_runtime_1.jsx)("i", { className: `${config.iconClass} pe-1` }, picKey);
             }
         }
         else {
-            picture = React.createElement("i", { className: 'bi bi-question pe-1' });
+            picture = (0, jsx_runtime_1.jsx)("i", { className: "bi bi-question pe-1" }, picKey);
         }
         return new MentionTypeaheadOption(result, picture);
     })
-        .slice(0, SUGGESTION_LIST_LENGTH_LIMIT), [results]);
+        .slice(0, SUGGESTION_LIST_LENGTH_LIMIT), [results, props.mentionConfigs?.find]);
     const onSelectOption = (0, react_1.useCallback)((selectedOption, nodeToReplace, closeMenu) => {
         editor.update(() => {
             const mentionNode = (0, mention_node_1.$createMentionNode)(selectedOption.data);
@@ -233,7 +233,7 @@ function MentionsPlugin(props) {
             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
+                selection.insertText(" "); // Insert a space after the mention
             }
             closeMenu();
         });
@@ -245,24 +245,23 @@ function MentionsPlugin(props) {
         }
         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 }) => {
+    const _popoverRef = React.useRef(null);
+    return ((0, jsx_runtime_1.jsx)(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';
+            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);
+            return ReactDOM.createPortal((0, jsx_runtime_1.jsx)("div", { className: className, children: (0, jsx_runtime_1.jsx)("ul", { children: options.map((option, i) => ((0, jsx_runtime_1.jsx)(MentionsTypeaheadMenuItem, { index: i, isSelected: selectedIndex === i, onClick: () => {
+                            setHighlightedIndex(i);
+                            selectOptionAndCleanUp(option);
+                        }, onMouseEnter: () => {
+                            setHighlightedIndex(i);
+                        }, option: option }, option.key))) }) }), anchorElementRef.current);
         } }));
 }

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

@@ -8,41 +8,41 @@ Object.defineProperty(exports, "__esModule", { value: true });
  *
  */
 exports.default = {
-    code: 'editor-code',
+    code: "editor-code",
     heading: {
-        h1: 'editor-heading-h1',
-        h2: 'editor-heading-h2',
-        h3: 'editor-heading-h3',
-        h4: 'editor-heading-h4',
-        h5: 'editor-heading-h5',
+        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',
+    image: "editor-image",
+    link: "editor-link",
     list: {
-        listitem: 'editor-listitem',
+        listitem: "editor-listitem",
         nested: {
             // listitem: 'editor-nested-listitem',
-            listitem: 'PlaygroundEditorTheme__nestedListItem',
+            listitem: "PlaygroundEditorTheme__nestedListItem",
         },
-        ol: 'editor-list-ol',
-        ul: 'editor-list-ul',
-        checklist: 'PlaygroundEditorTheme__checklist',
-        listitemChecked: 'PlaygroundEditorTheme__listItemChecked',
-        listitemUnchecked: 'PlaygroundEditorTheme__listItemUnchecked',
+        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',
+    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',
+        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

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

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

@@ -1,53 +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.ToolbarPlugin = ToolbarPlugin;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const list_1 = require("@lexical/list");
 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 react_1 = require("react");
 const LowPriority = 1;
 function Divider() {
-    return react_1.default.createElement("span", { className: 'tool-bar-divider' });
+    return (0, jsx_runtime_1.jsx)("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);
+    const toolbarRef = (0, react_1.useRef)(null);
+    const [_canUndo, setCanUndo] = (0, react_1.useState)(false);
+    const [_canRedo, setCanRedo] = (0, react_1.useState)(false);
+    const [isBold, setIsBold] = (0, react_1.useState)(false);
+    const [isItalic, setIsItalic] = (0, react_1.useState)(false);
+    const [_isUnderline, setIsUnderline] = (0, react_1.useState)(false);
+    const [isStrikethrough, setIsStrikethrough] = (0, react_1.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 [isUnorderedList, setIsUnorderedList] = (0, react_1.useState)(false);
+    const [isOrderedList, setIsOrderedList] = (0, react_1.useState)(false);
+    const [isCheckList, setIsCheckList] = (0, react_1.useState)(false);
+    const $updateToolbar = (0, react_1.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'));
+            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 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'));
+                setIsUnorderedList(elementDOM.tagName === "UL");
+                setIsOrderedList(elementDOM.tagName === "OL");
+                setIsCheckList(elementDOM.tagName === "UL" &&
+                    elementDOM.classList.contains("PlaygroundEditorTheme__checklist"));
             }
         }
     }, [editor]);
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         return (0, utils_1.mergeRegister)(editor.registerUpdateListener(({ editorState }) => {
             editorState.read(() => {
                 $updateToolbar();
@@ -87,26 +85,11 @@ function ToolbarPlugin(props) {
             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 }))))))));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "toolbar", ref: toolbarRef, children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                    editor.dispatchCommand(lexical_1.FORMAT_TEXT_COMMAND, "bold");
+                }, tabIndex: -1, className: `toolbar-item spaced ${isBold ? "active" : ""}`, "aria-label": "Format Bold", children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-type-bold" }) }), (0, jsx_runtime_1.jsx)("button", { tabIndex: -1, onClick: () => {
+                    editor.dispatchCommand(lexical_1.FORMAT_TEXT_COMMAND, "italic");
+                }, className: `toolbar-item spaced ${isItalic ? "active" : ""}`, "aria-label": "Format Italics", children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-type-italic" }) }), (0, jsx_runtime_1.jsx)("button", { tabIndex: -1, onClick: () => {
+                    editor.dispatchCommand(lexical_1.FORMAT_TEXT_COMMAND, "strikethrough");
+                }, className: `toolbar-item spaced ${isStrikethrough ? "active" : ""}`, "aria-label": "Format Strikethrough", children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-type-strikethrough" }) }), (0, jsx_runtime_1.jsx)(Divider, {}), (0, jsx_runtime_1.jsx)("button", { tabIndex: -1, onClick: insertUnorderedList, className: `toolbar-item spaced ${isUnorderedList ? "active" : ""}`, "aria-label": "Insert Unordered List", children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-list-ul" }) }), (0, jsx_runtime_1.jsx)("button", { tabIndex: -1, onClick: insertOrderedList, className: `toolbar-item spaced ${isOrderedList ? "active" : ""}`, "aria-label": "Insert Ordered List", children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-list-ol" }) }), (0, jsx_runtime_1.jsx)("button", { tabIndex: -1, onClick: insertCheckList, className: `toolbar-item spaced ${isCheckList ? "active" : ""}`, "aria-label": "Insert Check List", children: (0, jsx_runtime_1.jsx)("i", { className: "bi bi-list-check" }) }), (props.topRightControls?.length ?? 0) > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "float-end", children: props.topRightControls?.map((control) => ((0, jsx_runtime_1.jsx)("button", { tabIndex: -1, onClick: control.onClick, className: "toolbar-item spaced active", "aria-label": "Insert Check List", title: control.title, children: (0, jsx_runtime_1.jsx)("i", { className: control.iconClass }) }, control.title))) }))] }));
 }

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

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

package/dist/components/markdown-with-mentions.js

@@ -4,21 +4,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MarkdownWithMentions = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 // import { FileListDisplay } from './file-list-display';
 const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importDefault(require("react"));
 const react_markdown_1 = __importDefault(require("react-markdown"));
 const remark_gfm_1 = __importDefault(require("remark-gfm"));
 const mention_configs_1 = require("../mention-configs");
 // Custom Link Renderer
 const LinkRenderer = (props) => {
     const { href } = props;
-    return (react_1.default.createElement("a", { href: href, onClick: (e) => {
-            if (href?.startsWith('http')) {
+    return ((0, jsx_runtime_1.jsx)("a", { href: href, onClick: (e) => {
+            if (href?.startsWith("http")) {
                 e.preventDefault();
                 peers_sdk_1.rpcServerCalls.openLinkInBrowser(href);
             }
-        } }, props.children));
+        }, children: props.children }));
 };
 const processTextWithMentions = (text) => {
     const parts = [];
@@ -26,35 +27,36 @@ const processTextWithMentions = (text) => {
     let match;
     let cnt = 0;
     const regex = (0, peers_sdk_1.mentionRegex)();
-    while ((match = regex.exec(text)) !== null) {
+    match = regex.exec(text);
+    while (match !== null) {
         cnt++;
         if (match.index > lastIndex) {
             parts.push(text.slice(lastIndex, match.index));
         }
         text = text.slice(match.index + match[0].length);
         const kind = match[2];
-        const name = match[3].replace(/_/g, ' ');
+        const name = match[3].replace(/_/g, " ");
         const id = match[4];
         const data = {
             kind,
             name,
             id,
         };
-        const style = { cursor: 'pointer' };
+        const style = { cursor: "pointer" };
         if (name.length < 20) {
-            style.whiteSpace = 'nowrap';
+            style.whiteSpace = "nowrap";
         }
-        const mentionConfig = mention_configs_1.mentionConfigs.find(c => c.kind === kind);
-        const mentionClass = mentionConfig ? mentionConfig.styleClass || 'mention-default-default' : `mention-${kind}`;
+        const mentionConfig = mention_configs_1.mentionConfigs.find((c) => c.kind === kind);
+        const mentionClass = mentionConfig
+            ? mentionConfig.styleClass || "mention-default-default"
+            : `mention-${kind}`;
         const onClick = mentionConfig?.onClick;
-        const href = !onClick && `#${kind}s/${id}` || undefined;
-        const icon = (kind === 'user' && '@') ||
-            mentionConfig?.iconClass && react_1.default.createElement("i", { className: `pe-1 ${mentionConfig.iconClass}` }) ||
-            react_1.default.createElement("i", { className: `pe-1 bi bi-question` });
-        parts.push(react_1.default.createElement("a", { key: cnt, className: mentionClass, "data-kind": kind, "data-id": id, style: style, href: href, onClick: onClick && (() => onClick(data)) },
-            icon,
-            data.name));
+        const href = (!onClick && `#${kind}s/${id}`) || undefined;
+        const icon = (kind === "user" && "@") ||
+            (mentionConfig?.iconClass && (0, jsx_runtime_1.jsx)("i", { className: `pe-1 ${mentionConfig.iconClass}` })) || ((0, jsx_runtime_1.jsx)("i", { className: `pe-1 bi bi-question` }));
+        parts.push((0, jsx_runtime_1.jsxs)("a", { className: mentionClass, "data-kind": kind, "data-id": id, style: style, href: href, onClick: onClick && (() => onClick(data)), children: [icon, data.name] }, cnt));
         lastIndex = regex.lastIndex;
+        match = regex.exec(text);
     }
     if (lastIndex < text.length) {
         parts.push(text.slice(lastIndex));
@@ -103,38 +105,36 @@ const processTextWithMentions = (text) => {
 //   );
 // };
 const createElementWithMentions = (Element) => {
-    // @ts-ignore
-    return ({ node, ...props }) => {
-        return (react_1.default.createElement(Element, { ...props }, react_1.default.Children.map(props.children, child => {
-            if (typeof child === 'string') {
-                return processTextWithMentions(child);
-            }
-            return child;
-        })));
+    return ({ node: _node, ...props }) => {
+        return ((0, jsx_runtime_1.jsx)(Element, { ...props, children: react_1.default.Children.map(props.children, (child) => {
+                if (typeof child === "string") {
+                    return processTextWithMentions(child);
+                }
+                return child;
+            }) }));
     };
 };
 const MarkdownWithMentions = ({ content }) => {
     const components = {
-        p: createElementWithMentions('p'),
-        h1: createElementWithMentions('h1'),
-        h2: createElementWithMentions('h2'),
-        h3: createElementWithMentions('h3'),
-        h4: createElementWithMentions('h4'),
-        h5: createElementWithMentions('h5'),
-        h6: createElementWithMentions('h6'),
-        li: createElementWithMentions('li'),
+        p: createElementWithMentions("p"),
+        h1: createElementWithMentions("h1"),
+        h2: createElementWithMentions("h2"),
+        h3: createElementWithMentions("h3"),
+        h4: createElementWithMentions("h4"),
+        h5: createElementWithMentions("h5"),
+        h6: createElementWithMentions("h6"),
+        li: createElementWithMentions("li"),
         // a: createElementWithMentions('a'),
         a: LinkRenderer,
-        strong: createElementWithMentions('strong'),
-        em: createElementWithMentions('em'),
-        blockquote: createElementWithMentions('blockquote'),
-        code: createElementWithMentions('code'),
-        td: createElementWithMentions('td'),
-        th: createElementWithMentions('th'),
+        strong: createElementWithMentions("strong"),
+        em: createElementWithMentions("em"),
+        blockquote: createElementWithMentions("blockquote"),
+        code: createElementWithMentions("code"),
+        td: createElementWithMentions("td"),
+        th: createElementWithMentions("th"),
     };
-    return (react_1.default.createElement("div", { className: 'markdown' },
-        react_1.default.createElement(react_markdown_1.default, { remarkPlugins: [remark_gfm_1.default], 
-            // @ts-ignore
-            components: components }, content)));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "markdown", children: (0, jsx_runtime_1.jsx)(react_markdown_1.default, { remarkPlugins: [remark_gfm_1.default], 
+            // @ts-expect-error
+            components: components, children: content }) }));
 };
 exports.MarkdownWithMentions = MarkdownWithMentions;

package/dist/components/message-logs/message-logs.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 interface MessageLogsProps {
     messageId: string;
 }
-export declare const MessageLogs: ({ messageId }: MessageLogsProps) => false | React.JSX.Element;
+export declare const MessageLogs: ({ messageId }: MessageLogsProps) => false | import("react/jsx-runtime").JSX.Element;
 export {};