@peers-app/peers-ui 0.14.0 → 0.15.0

package/dist/components/list-screen.js

@@ -34,34 +34,38 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListScreen = ListScreen;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const _ = __importStar(require("lodash"));
-const react_1 = __importStar(require("react"));
+const react_1 = require("react");
 const globals_1 = require("../globals");
 const hooks_1 = require("../hooks");
 const input_1 = require("./input");
 const lazy_list_1 = require("./lazy-list");
 const loading_indicator_1 = require("./loading-indicator");
 function ListScreen(props) {
-    const { table, newRecord, sortBy, } = props;
-    const [searchTextObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(''));
+    const { table, newRecord, sortBy } = props;
+    const [searchTextObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(""));
     const [searchText] = (0, hooks_1.useObservable)(searchTextObs);
     const [cursorObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)());
-    async function newCursor() {
+    const newCursor = (0, react_1.useCallback)(async () => {
         const filter = props.getFilter ? props.getFilter(searchText) : null;
-        const cursor = await table.cursor(filter || {}, { sortBy, ...(filter ? {} : { textSearch: searchText }) });
+        const cursor = await table.cursor(filter || {}, {
+            sortBy,
+            ...(filter ? {} : { textSearch: searchText }),
+        });
         cursorObs(cursor);
         return cursor;
-    }
+    }, [table, searchText, props.getFilter, sortBy, cursorObs]);
     (0, react_1.useEffect)(() => {
-        newCursor();
-    }, [searchText]);
+        void newCursor();
+    }, [newCursor]);
     const idFieldName = table.metaData.primaryKeyName;
     async function loadMore(existing) {
         let moreMatches = [];
-        let cursor = cursorObs() || await newCursor();
+        const cursor = cursorObs() || (await newCursor());
         for await (const nextRecord of cursor) {
-            if (existing.find(e => e[idFieldName] === nextRecord[idFieldName]))
+            if (existing.find((e) => e[idFieldName] === nextRecord[idFieldName]))
                 continue;
             moreMatches.push(nextRecord);
             if (searchText.length && moreMatches.length > 5)
@@ -73,9 +77,16 @@ function ListScreen(props) {
             cursorObs(undefined);
         }
         // if we're using default textSearch, list items with the most words matched in the name first
-        if (!props.getFilter && moreMatches && searchText && table.metaData.fields.find(f => f.name === 'name')) {
-            const words = searchText.toLowerCase().split(' ');
-            moreMatches = _.sortBy(moreMatches, r => words.filter(w => r.name.toLowerCase().includes(w)).length).reverse();
+        if (!props.getFilter &&
+            moreMatches &&
+            searchText &&
+            table.metaData.fields.find((f) => f.name === "name")) {
+            const words = searchText.toLowerCase().split(" ");
+            moreMatches = _.sortBy(moreMatches, (r) => {
+                const nameVal = r.name;
+                const nameStr = typeof nameVal === "string" ? nameVal : String(nameVal ?? "");
+                return words.filter((w) => nameStr.toLowerCase().includes(w)).length;
+            }).reverse();
         }
         return moreMatches;
     }
@@ -85,16 +96,10 @@ function ListScreen(props) {
         const name = searchText.trim();
         if (!name)
             return;
-        searchTextObs('');
+        searchTextObs("");
         await newRecord(name);
     }
-    return (react_1.default.createElement("div", { className: 'container-fluid' },
-        react_1.default.createElement("div", { className: "input-group mt-3 mb-3" },
-            react_1.default.createElement(input_1.Input, { value: searchTextObs, className: "form-control", placeholder: `Search or create ${props.placeholderName || table.metaData.name}`, autoFocus: (0, globals_1.isDesktop)() ? true : false, onKeyUp: evt => searchSubmit(evt) })),
-        react_1.default.createElement("div", { className: "peers-list-container" },
-            react_1.default.createElement(lazy_list_1.LazyList, { resetTrigger: searchText, loadMore: loadMore, scrollThreshold: 0.6, renderItems: (notes) => {
-                    return notes.map(props.renderItem);
-                }, loadingIndicator: react_1.default.createElement("div", { className: "d-flex justify-content-center", style: { height: 200 } },
-                    react_1.default.createElement(loading_indicator_1.LoadingIndicator, null)), endOfList: react_1.default.createElement("div", { className: "d-flex justify-content-center", style: { height: 200 } }) }))));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid", children: [(0, jsx_runtime_1.jsx)("div", { className: "input-group mt-3 mb-3", children: (0, jsx_runtime_1.jsx)(input_1.Input, { value: searchTextObs, className: "form-control", placeholder: `Search or create ${props.placeholderName || table.metaData.name}`, autoFocus: !!(0, globals_1.isDesktop)(), onKeyUp: (evt) => searchSubmit(evt) }) }), (0, jsx_runtime_1.jsx)("div", { className: "peers-list-container", children: (0, jsx_runtime_1.jsx)(lazy_list_1.LazyList, { resetTrigger: searchText, loadMore: loadMore, scrollThreshold: 0.6, renderItems: (notes) => {
+                        return notes.map(props.renderItem);
+                    }, loadingIndicator: (0, jsx_runtime_1.jsx)("div", { className: "d-flex justify-content-center", style: { height: 200 }, children: (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {}) }), endOfList: (0, jsx_runtime_1.jsx)("div", { className: "d-flex justify-content-center", style: { height: 200 } }) }) })] }));
 }
-;

package/dist/components/loading-indicator.d.ts

@@ -1,2 +1 @@
-import React from 'react';
-export declare const LoadingIndicator: () => React.JSX.Element;
+export declare const LoadingIndicator: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/loading-indicator.js

@@ -1,12 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoadingIndicator = void 0;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const LoadingIndicator = () => {
-    return (react_1.default.createElement("span", { className: "spinner-grow spinner-grow-sm text-secondary m-4", role: "status" },
-        react_1.default.createElement("span", { className: "visually-hidden" }, "Loading...")));
+    return ((0, jsx_runtime_1.jsx)("span", { className: "spinner-grow spinner-grow-sm text-secondary m-4", role: "status", children: (0, jsx_runtime_1.jsx)("span", { className: "visually-hidden", children: "Loading..." }) }));
 };
 exports.LoadingIndicator = LoadingIndicator;

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

@@ -1,29 +1,26 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LexicalAutoLinkPlugin = LexicalAutoLinkPlugin;
 exports.default = LinkPlugin;
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const LexicalAutoLinkPlugin_1 = require("@lexical/react/LexicalAutoLinkPlugin");
 const URL_REGEX = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)(?<![-.+():%])/;
 const EMAIL_REGEX = /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
 const MATCHERS = [
     (0, LexicalAutoLinkPlugin_1.createLinkMatcherWithRegExp)(URL_REGEX, (text) => {
-        return text.startsWith('http') ? text : `https://${text}`;
+        return text.startsWith("http") ? text : `https://${text}`;
     }),
     (0, LexicalAutoLinkPlugin_1.createLinkMatcherWithRegExp)(EMAIL_REGEX, (text) => {
         return `mailto:${text}`;
     }),
 ];
 function LexicalAutoLinkPlugin() {
-    return react_1.default.createElement(LexicalAutoLinkPlugin_1.AutoLinkPlugin, { matchers: MATCHERS });
+    return (0, jsx_runtime_1.jsx)(LexicalAutoLinkPlugin_1.AutoLinkPlugin, { matchers: MATCHERS });
 }
 const LexicalLinkPlugin_1 = require("@lexical/react/LexicalLinkPlugin");
 function LinkPlugin() {
     const validateUrl = (url) => {
-        return url.startsWith('http://') || url.startsWith('https://') || url.startsWith('mailto:');
+        return url.startsWith("http://") || url.startsWith("https://") || url.startsWith("mailto:");
     };
-    return react_1.default.createElement(LexicalLinkPlugin_1.LinkPlugin, { validateUrl: validateUrl });
+    return (0, jsx_runtime_1.jsx)(LexicalLinkPlugin_1.LinkPlugin, { validateUrl: validateUrl });
 }

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

@@ -1,3 +1,2 @@
-import React from "react";
-import { IMarkdownEditorProps } from "./editor";
-export declare const MarkdownEditorInline: (props: IMarkdownEditorProps) => React.JSX.Element;
+import { type IMarkdownEditorProps } from "./editor";
+export declare const MarkdownEditorInline: (props: IMarkdownEditorProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,9 +1,9 @@
-import { Observable } from "@peers-app/peers-sdk";
-import React from 'react';
-import { IToolbarControl } from './toolbar';
-import { IMentionConfig } from '../../mention-configs';
+import { type Observable } from "@peers-app/peers-sdk";
+import React from "react";
+import { type IMentionConfig } from "../../mention-configs";
+import { type IToolbarControl } from "./toolbar";
 export interface IEditorEffects {
-    onKeyDown?: (e: React.KeyboardEvent) => (boolean | void);
+    onKeyDown?: (e: React.KeyboardEvent) => boolean | undefined;
     focus?: () => void;
 }
 export interface IMarkdownEditorProps {
@@ -15,4 +15,4 @@ export interface IMarkdownEditorProps {
     maxHeight?: string | number;
     mentionConfigs?: IMentionConfig[];
 }
-export declare function MarkdownEditor(props: IMarkdownEditorProps): React.JSX.Element;
+export declare function MarkdownEditor(props: IMarkdownEditorProps): import("react/jsx-runtime").JSX.Element;

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

@@ -37,12 +37,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MarkdownEditor = MarkdownEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const code_1 = require("@lexical/code");
 const link_1 = require("@lexical/link");
 const list_1 = require("@lexical/list");
 const LexicalAutoFocusPlugin_1 = require("@lexical/react/LexicalAutoFocusPlugin");
 const LexicalCheckListPlugin_1 = require("@lexical/react/LexicalCheckListPlugin");
 const LexicalComposer_1 = require("@lexical/react/LexicalComposer");
+const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
 const LexicalContentEditable_1 = require("@lexical/react/LexicalContentEditable");
 const LexicalErrorBoundary_1 = require("@lexical/react/LexicalErrorBoundary");
 const LexicalHistoryPlugin_1 = require("@lexical/react/LexicalHistoryPlugin");
@@ -52,18 +54,17 @@ const LexicalRichTextPlugin_1 = require("@lexical/react/LexicalRichTextPlugin");
 const LexicalTabIndentationPlugin_1 = require("@lexical/react/LexicalTabIndentationPlugin");
 const rich_text_1 = require("@lexical/rich-text");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
+const lexical_1 = require("lexical");
 const react_1 = __importStar(require("react"));
+const mention_configs_1 = require("../../mention-configs");
 const autolink_plugin_1 = require("./autolink-plugin");
 const markdown_plugin_1 = require("./markdown-plugin");
 const mention_node_1 = require("./mention-node");
 const mentions_plugin_1 = require("./mentions-plugin");
 const theme_1 = __importDefault(require("./theme"));
 const toolbar_1 = require("./toolbar");
-const lexical_1 = require("lexical");
-const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
-const mention_configs_1 = require("../../mention-configs");
 const editorConfig = {
-    namespace: 'PeersEditor',
+    namespace: "PeersEditor",
     nodes: [
         rich_text_1.HeadingNode,
         rich_text_1.QuoteNode,
@@ -71,6 +72,7 @@ const editorConfig = {
         list_1.ListNode,
         list_1.ListItemNode,
         mention_node_1.MentionNode,
+        // biome-ignore lint/suspicious/noExplicitAny: Lexical node registry typing is narrower than runtime; AutoLinkNode is required for links.
         link_1.AutoLinkNode,
         link_1.LinkNode,
     ],
@@ -108,24 +110,12 @@ function MarkdownEditor(props) {
         };
     }
     const _mentionConfigs = props.mentionConfigs ?? mention_configs_1.mentionConfigs;
-    return (react_1.default.createElement(LexicalComposer_1.LexicalComposer, { initialConfig: { ...editorConfig } },
-        react_1.default.createElement("div", { className: "editor-container" },
-            props.hideToolbar ? null : react_1.default.createElement(toolbar_1.ToolbarPlugin, { topRightControls: props.topRightControls }),
-            react_1.default.createElement("div", { className: "editor-inner", ref: editorRef, style: { maxHeight: props.maxHeight, overflowY: 'auto' } },
-                react_1.default.createElement(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: react_1.default.createElement(LexicalContentEditable_1.ContentEditable, { className: "editor-input p-2" }), placeholder: null, ErrorBoundary: LexicalErrorBoundary_1.LexicalErrorBoundary }),
-                react_1.default.createElement(LexicalHistoryPlugin_1.HistoryPlugin, null),
-                props.autoFocus && react_1.default.createElement(LexicalAutoFocusPlugin_1.AutoFocusPlugin, { defaultSelection: 'rootEnd' }),
-                react_1.default.createElement(LexicalListPlugin_1.ListPlugin, null),
-                _mentionConfigs.length > 0 && (react_1.default.createElement(mentions_plugin_1.MentionsPlugin, { mentionConfigs: _mentionConfigs, mentionsOpen: mentionsOpen })),
-                react_1.default.createElement(autolink_plugin_1.LexicalAutoLinkPlugin, null),
-                react_1.default.createElement(markdown_plugin_1.MarkdownPlugin, { markdownObs: props.value }),
-                react_1.default.createElement(LexicalMarkdownShortcutPlugin_1.MarkdownShortcutPlugin, { transformers: markdown_plugin_1.customMarkdownTransformers }),
-                react_1.default.createElement(LexicalCheckListPlugin_1.CheckListPlugin, null),
-                react_1.default.createElement(LexicalTabIndentationPlugin_1.TabIndentationPlugin, null),
-                react_1.default.createElement(OnKeyDownPlugin, { effects: props.effects, mentionsOpen: mentionsOpen })))));
+    return ((0, jsx_runtime_1.jsx)(LexicalComposer_1.LexicalComposer, { initialConfig: { ...editorConfig }, children: (0, jsx_runtime_1.jsxs)("div", { className: "editor-container", children: [props.hideToolbar ? null : (0, jsx_runtime_1.jsx)(toolbar_1.ToolbarPlugin, { topRightControls: props.topRightControls }), (0, jsx_runtime_1.jsxs)("div", { className: "editor-inner", ref: editorRef, style: { maxHeight: props.maxHeight, overflowY: "auto" }, children: [(0, jsx_runtime_1.jsx)(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: (0, jsx_runtime_1.jsx)(LexicalContentEditable_1.ContentEditable, { className: "editor-input p-2" }), placeholder: null, ErrorBoundary: LexicalErrorBoundary_1.LexicalErrorBoundary }), (0, jsx_runtime_1.jsx)(LexicalHistoryPlugin_1.HistoryPlugin, {}), props.autoFocus && (0, jsx_runtime_1.jsx)(LexicalAutoFocusPlugin_1.AutoFocusPlugin, { defaultSelection: "rootEnd" }), (0, jsx_runtime_1.jsx)(LexicalListPlugin_1.ListPlugin, {}), _mentionConfigs.length > 0 && ((0, jsx_runtime_1.jsx)(mentions_plugin_1.MentionsPlugin, { mentionConfigs: _mentionConfigs, mentionsOpen: mentionsOpen })), (0, jsx_runtime_1.jsx)(autolink_plugin_1.LexicalAutoLinkPlugin, {}), (0, jsx_runtime_1.jsx)(markdown_plugin_1.MarkdownPlugin, { markdownObs: props.value }), (0, jsx_runtime_1.jsx)(LexicalMarkdownShortcutPlugin_1.MarkdownShortcutPlugin, { transformers: markdown_plugin_1.customMarkdownTransformers }), (0, jsx_runtime_1.jsx)(LexicalCheckListPlugin_1.CheckListPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalTabIndentationPlugin_1.TabIndentationPlugin, {}), (0, jsx_runtime_1.jsx)(OnKeyDownPlugin, { effects: props.effects, mentionsOpen: mentionsOpen })] })] }) }));
 }
 const OnKeyDownPlugin = (props) => {
     const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    // Intentionally `[editor]` only: `props.effects` is a stable object ref whose `onKeyDown` is
+    // imperatively reassigned by callers each render; the closure reads the latest value at event time.
     (0, react_1.useEffect)(() => {
         const removeListener = editor.registerCommand(lexical_1.KEY_DOWN_COMMAND, (event) => {
             if (props.mentionsOpen()) {

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

@@ -1,4 +1,4 @@
-import { Observable } from "@peers-app/peers-sdk";
+import { type Observable } from "@peers-app/peers-sdk";
 export declare const customMarkdownTransformers: import("@lexical/markdown").Transformer[];
 interface IProps {
     markdownObs: Observable<string>;

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

@@ -26,7 +26,7 @@ const listReplace = (listType) => {
     return (parentNode, children, match) => {
         const previousNode = parentNode.getPreviousSibling();
         const nextNode = parentNode.getNextSibling();
-        const listItem = (0, list_1.$createListItemNode)(listType === 'check' ? match[3] === 'x' : undefined);
+        const listItem = (0, list_1.$createListItemNode)(listType === "check" ? match[3] === "x" : undefined);
         if ((0, list_1.$isListNode)(nextNode) && nextNode.getListType() === listType) {
             const firstChild = nextNode.getFirstChild();
             if (firstChild !== null) {
@@ -38,13 +38,12 @@ const listReplace = (listType) => {
             }
             parentNode.remove();
         }
-        else if ((0, list_1.$isListNode)(previousNode) &&
-            previousNode.getListType() === listType) {
+        else if ((0, list_1.$isListNode)(previousNode) && previousNode.getListType() === listType) {
             previousNode.append(listItem);
             parentNode.remove();
         }
         else {
-            const list = (0, list_1.$createListNode)(listType, listType === 'number' ? Number(match[2]) : undefined);
+            const list = (0, list_1.$createListNode)(listType, listType === "number" ? Number(match[2]) : undefined);
             list.append(listItem);
             parentNode.replace(list);
         }
@@ -69,18 +68,18 @@ const listExport = (listNode, exportChildren, depth) => {
                     continue;
                 }
             }
-            const indent = ' '.repeat(depth * LIST_INDENT_SIZE);
+            const indent = " ".repeat(depth * LIST_INDENT_SIZE);
             const listType = listNode.getListType();
-            const prefix = listType === 'number'
+            const prefix = listType === "number"
                 ? `${listNode.getStart() + index}. `
-                : listType === 'check'
-                    ? `- [${listItemNode.getChecked() ? 'x' : ' '}] `
-                    : '- ';
+                : listType === "check"
+                    ? `- [${listItemNode.getChecked() ? "x" : " "}] `
+                    : "- ";
             output.push(indent + prefix + exportChildren(listItemNode));
             index++;
         }
     }
-    return output.join('\n');
+    return output.join("\n");
 };
 const CHECK_LIST_TRANSFORMER = {
     dependencies: [list_1.ListNode, list_1.ListItemNode],
@@ -88,12 +87,12 @@ const CHECK_LIST_TRANSFORMER = {
         return (0, list_1.$isListNode)(node) ? listExport(node, exportChildren, 0) : null;
     },
     regExp: /^(\s*)(?:-\s)?\s?(\[(\s|x)?\])\s/i,
-    replace: listReplace('check'),
-    type: 'element',
+    replace: listReplace("check"),
+    type: "element",
 };
 const MENTION_TRANSFORMER = {
-    type: 'text-match',
-    trigger: '<',
+    type: "text-match",
+    trigger: "<",
     dependencies: [mention_node_1.MentionNode],
     importRegExp: (0, peers_sdk_1.mentionRegex)(),
     regExp: (0, peers_sdk_1.mentionRegex)(),
@@ -105,10 +104,10 @@ const MENTION_TRANSFORMER = {
     },
     replace: (textNode, match) => {
         const kind = match[2];
-        const name = match[3].replace(/_/g, ' ');
+        const name = match[3].replace(/_/g, " ");
         const id = match[4];
         const data = {
-            kind: kind,
+            kind,
             name,
             id,
             clickable: false,
@@ -120,10 +119,10 @@ const MENTION_TRANSFORMER = {
 exports.customMarkdownTransformers = [
     MENTION_TRANSFORMER,
     CHECK_LIST_TRANSFORMER, // This needs to be first or checklists will be treated as unordered lists
-    ...markdown_1.TRANSFORMERS.filter(transformer => {
+    ...markdown_1.TRANSFORMERS.filter((transformer) => {
         const t = transformer;
         // disable headings for this markdown since these are inline messages
-        if (t.dependencies?.[0]?.name === 'HeadingNode') {
+        if (t.dependencies?.[0]?.name === "HeadingNode") {
             return false;
         }
         return true;
@@ -133,9 +132,9 @@ function MarkdownPlugin(props) {
     const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
     const { markdownObs } = props;
     (0, react_1.useEffect)(() => {
-        let markdown = '';
+        let markdown = "";
         function setMarkdown() {
-            const newMarkdown = markdownObs() || '';
+            const newMarkdown = markdownObs() || "";
             if (newMarkdown === markdown) {
                 return;
             }
@@ -161,6 +160,6 @@ function MarkdownPlugin(props) {
             sub.dispose();
             sub2Dispose();
         };
-    }, [editor]);
+    }, [editor, markdownObs]);
     return null;
 }

package/dist/components/markdown-editor/mention-node.d.ts

@@ -1,5 +1,5 @@
-import { type DOMConversionMap, type DOMExportOutput, type EditorConfig, type LexicalNode, type NodeKey, type SerializedTextNode, type Spread, TextNode } from 'lexical';
-import { IMentionData } from "@peers-app/peers-sdk";
+import type { IMentionData } from "@peers-app/peers-sdk";
+import { type DOMConversionMap, type DOMExportOutput, type EditorConfig, type LexicalNode, type NodeKey, type SerializedTextNode, type Spread, TextNode } from "lexical";
 export type SerializedMentionNode = Spread<{
     data: IMentionData;
 }, SerializedTextNode>;

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

@@ -8,15 +8,15 @@ 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');
+    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,
+            clickable: clickable === "true" ? true : clickable === "false" ? false : undefined,
         };
         const node = $createMentionNode(data);
         return {
@@ -28,7 +28,7 @@ function $convertMentionElement(domNode) {
 class MentionNode extends lexical_1.TextNode {
     data;
     static getType() {
-        return 'mention';
+        return "mention";
     }
     static clone(node) {
         return new MentionNode(node.data, node.__key);
@@ -45,14 +45,14 @@ class MentionNode extends lexical_1.TextNode {
     }
     constructor(data, key) {
         // const prefix = (data.kind === 'assistant' || data.kind === 'user') ? '@' : '$';
-        const prefix = data.kind === 'user' ? '@' : '';
+        const prefix = data.kind === "user" ? "@" : "";
         super(prefix + data.name, key);
         this.data = data;
     }
     exportJSON() {
         return {
             ...super.exportJSON(),
-            type: 'mention',
+            type: "mention",
             version: 1,
             data: this.data,
         };
@@ -60,22 +60,22 @@ class MentionNode extends lexical_1.TextNode {
     createDOM(config) {
         const dom = super.createDOM(config);
         const kind = this.data.kind;
-        const mentionConfig = mention_configs_1.mentionConfigs.find(c => c.kind === kind);
+        const mentionConfig = mention_configs_1.mentionConfigs.find((c) => c.kind === kind);
         if (mentionConfig) {
-            dom.className = mentionConfig.styleClass || 'mention-default-default';
+            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));
+        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', () => {
+        dom.style.cursor = "pointer";
+        dom.addEventListener("click", () => {
             if (onClick) {
                 onClick(this.data);
             }
@@ -85,9 +85,9 @@ class MentionNode extends lexical_1.TextNode {
                 (0, globals_1.mainContentPath)(href);
             }
         });
-        if (mentionConfig && kind !== 'user') {
-            const iconSpan = document.createElement('i');
-            iconSpan.className = 'pe-1 ' + mentionConfig.iconClass;
+        if (mentionConfig && kind !== "user") {
+            const iconSpan = document.createElement("i");
+            iconSpan.className = `pe-1 ${mentionConfig.iconClass}`;
             dom.prepend(iconSpan);
             return dom;
         }
@@ -118,18 +118,18 @@ class MentionNode extends lexical_1.TextNode {
         return dom;
     }
     exportDOM() {
-        const element = document.createElement('span');
-        element.setAttribute('data-lexical-mention', 'true');
+        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));
+        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')) {
+                if (!domNode.hasAttribute("data-lexical-mention")) {
                     return null;
                 }
                 return {
@@ -152,7 +152,7 @@ class MentionNode extends lexical_1.TextNode {
 exports.MentionNode = MentionNode;
 function $createMentionNode(data) {
     const mentionNode = new MentionNode(data);
-    mentionNode.setMode('segmented').toggleDirectionless();
+    mentionNode.setMode("segmented").toggleDirectionless();
     return (0, lexical_1.$applyNodeReplacement)(mentionNode);
 }
 function $isMentionNode(node) {

package/dist/components/markdown-editor/mentions-plugin.d.ts

@@ -1,5 +1,5 @@
-import { Observable } from "@peers-app/peers-sdk";
-import { IMentionConfig } from '../../mention-configs';
+import { type Observable } from "@peers-app/peers-sdk";
+import type { IMentionConfig } from "../../mention-configs";
 export declare const MENTIONS_MAX_RESULTS = 10;
 export declare function MentionsPlugin(props: {
     mentionConfigs?: IMentionConfig[];