@liveblocks/react-lexical 1.12.0-lexical6 → 2.0.0-alpha3

package/dist/mentions/mention-node.js.map

@@ -1 +1 @@
-{"version":3,"file":"mention-node.js","sources":["../../src/mentions/mention-node.tsx"],"sourcesContent":["import type {\n  DOMConversionMap,\n  DOMExportOutput,\n  LexicalNode,\n  NodeKey,\n  SerializedLexicalNode,\n  Spread,\n} from \"lexical\";\nimport { $applyNodeReplacement, DecoratorNode } from \"lexical\";\nimport { nanoid } from \"nanoid\";\nimport type { ComponentType, JSX } from \"react\";\nimport * as React from \"react\";\n\nimport type { MentionProps } from \"../liveblocks-config\";\nimport { MentionWrapper } from \"./mention-component\";\n\nexport type SerializedMentionNode = Spread<\n  {\n    userId: string;\n  },\n  SerializedLexicalNode\n>;\n\nexport function createMentionNodeFactory(\n  Component: ComponentType<MentionProps>\n): any {\n  class MentionNode extends DecoratorNode<JSX.Element> {\n    __id: string;\n    __userId: string;\n\n    constructor(id: string, userId: string, key?: NodeKey) {\n      super(key);\n      this.__id = id;\n      this.__userId = userId;\n    }\n\n    static getType(): string {\n      return \"lb-mention\";\n    }\n\n    static clone(node: MentionNode): MentionNode {\n      return new MentionNode(node.__id, node.__userId);\n    }\n\n    createDOM(): HTMLElement {\n      const element = document.createElement(\"span\");\n      element.style.display = \"inline-block\";\n      return element;\n    }\n\n    updateDOM(): boolean {\n      return false;\n    }\n\n    static importDom(): DOMConversionMap<HTMLElement> | null {\n      return {\n        span: () => ({\n          conversion: (element) => {\n            const value = atob(\n              element.getAttribute(\"data-lexical-lb-mention\")!\n            );\n            const node = $createMentionNode(value);\n            return { node };\n          },\n          priority: 1,\n        }),\n      };\n    }\n\n    exportDOM(): DOMExportOutput {\n      const element = document.createElement(\"span\");\n      const value = this.getTextContent();\n      element.setAttribute(\"data-lexical-lb-mention\", btoa(value));\n      element.textContent = this.getTextContent();\n      return { element };\n    }\n\n    static importJSON(serializedNode: SerializedMentionNode): MentionNode {\n      const node = $createMentionNode(serializedNode.userId);\n      return node;\n    }\n\n    exportJSON(): SerializedMentionNode {\n      return {\n        userId: this.__userId,\n        type: \"lb-mention\",\n        version: 1,\n      };\n    }\n\n    getUserId(): string {\n      const self = this.getLatest();\n      return self.__userId;\n    }\n\n    getId(): string {\n      const self = this.getLatest();\n      return self.__id;\n    }\n\n    decorate(): JSX.Element {\n      return (\n        <MentionWrapper nodeKey={this.getKey()}>\n          <Component userId={this.__userId} />\n        </MentionWrapper>\n      );\n    }\n  }\n\n  function $isMentionNode(\n    node: LexicalNode | null | undefined\n  ): node is MentionNode {\n    return node instanceof MentionNode;\n  }\n\n  function $createMentionNode(userId: string): MentionNode {\n    const id = `in_${nanoid()}`;\n    const node = new MentionNode(id, userId);\n    return $applyNodeReplacement(node);\n  }\n\n  return {\n    MentionNode,\n    $isMentionNode,\n    $createMentionNode,\n  };\n}\n"],"names":["DecoratorNode","React","MentionWrapper","nanoid","$applyNodeReplacement"],"mappings":"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"}
+{"version":3,"file":"mention-node.js","sources":["../../src/mentions/mention-node.tsx"],"sourcesContent":["import type {\n  DOMConversionMap,\n  DOMExportOutput,\n  LexicalNode,\n  NodeKey,\n  SerializedLexicalNode,\n  Spread,\n} from \"lexical\";\nimport { $applyNodeReplacement, DecoratorNode } from \"lexical\";\nimport { nanoid } from \"nanoid\";\nimport type { JSX } from \"react\";\nimport * as React from \"react\";\n\nimport { Mention } from \"./mention-component\";\nimport { User } from \"./user\";\n\nconst MENTION_CHARACTER = \"@\";\n\nexport type SerializedMentionNode = Spread<\n  {\n    userId: string;\n  },\n  SerializedLexicalNode\n>;\nexport class MentionNode extends DecoratorNode<JSX.Element> {\n  __id: string;\n  __userId: string;\n\n  constructor(id: string, userId: string, key?: NodeKey) {\n    super(key);\n    this.__id = id;\n    this.__userId = userId;\n  }\n\n  static getType(): string {\n    return \"lb-mention\";\n  }\n\n  static clone(node: MentionNode): MentionNode {\n    return new MentionNode(node.__id, node.__userId);\n  }\n\n  createDOM(): HTMLElement {\n    const element = document.createElement(\"span\");\n    element.style.display = \"inline-block\";\n    element.style.userSelect = \"none\";\n    return element;\n  }\n\n  updateDOM(): boolean {\n    return false;\n  }\n\n  static importDom(): DOMConversionMap<HTMLElement> | null {\n    return {\n      span: () => ({\n        conversion: (element) => {\n          const value = atob(element.getAttribute(\"data-lexical-lb-mention\")!);\n          const node = $createMentionNode(value);\n          return { node };\n        },\n        priority: 1,\n      }),\n    };\n  }\n\n  exportDOM(): DOMExportOutput {\n    const element = document.createElement(\"span\");\n    const value = this.getTextContent();\n    element.setAttribute(\"data-lexical-lb-mention\", btoa(value));\n    element.textContent = this.getTextContent();\n    return { element };\n  }\n\n  static importJSON(serializedNode: SerializedMentionNode): MentionNode {\n    const node = $createMentionNode(serializedNode.userId);\n    return node;\n  }\n\n  exportJSON(): SerializedMentionNode {\n    return {\n      userId: this.__userId,\n      type: \"lb-mention\",\n      version: 1,\n    };\n  }\n\n  getUserId(): string {\n    const self = this.getLatest();\n    return self.__userId;\n  }\n\n  getId(): string {\n    const self = this.getLatest();\n    return self.__id;\n  }\n\n  decorate(): JSX.Element {\n    return (\n      <Mention nodeKey={this.getKey()}>\n        {MENTION_CHARACTER}\n        <User userId={this.getUserId()} />\n      </Mention>\n    );\n  }\n}\n\nexport function $isMentionNode(\n  node: LexicalNode | null | undefined\n): node is MentionNode {\n  return node instanceof MentionNode;\n}\n\nexport function $createMentionNode(userId: string): MentionNode {\n  const id = `in_${nanoid()}`;\n  const node = new MentionNode(id, userId);\n  return $applyNodeReplacement(node);\n}\n"],"names":["DecoratorNode","React","Mention","User","nanoid","$applyNodeReplacement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,iBAAoB,GAAA,GAAA,CAAA;AAQnB,MAAM,oBAAoBA,qBAA2B,CAAA;AAAA,EAI1D,WAAA,CAAY,EAAY,EAAA,MAAA,EAAgB,GAAe,EAAA;AACrD,IAAA,KAAA,CAAM,GAAG,CAAA,CAAA;AACT,IAAA,IAAA,CAAK,IAAO,GAAA,EAAA,CAAA;AACZ,IAAA,IAAA,CAAK,QAAW,GAAA,MAAA,CAAA;AAAA,GAClB;AAAA,EAEA,OAAO,OAAkB,GAAA;AACvB,IAAO,OAAA,YAAA,CAAA;AAAA,GACT;AAAA,EAEA,OAAO,MAAM,IAAgC,EAAA;AAC3C,IAAA,OAAO,IAAI,WAAA,CAAY,IAAK,CAAA,IAAA,EAAM,KAAK,QAAQ,CAAA,CAAA;AAAA,GACjD;AAAA,EAEA,SAAyB,GAAA;AACvB,IAAM,MAAA,OAAA,GAAU,QAAS,CAAA,aAAA,CAAc,MAAM,CAAA,CAAA;AAC7C,IAAA,OAAA,CAAQ,MAAM,OAAU,GAAA,cAAA,CAAA;AACxB,IAAA,OAAA,CAAQ,MAAM,UAAa,GAAA,MAAA,CAAA;AAC3B,IAAO,OAAA,OAAA,CAAA;AAAA,GACT;AAAA,EAEA,SAAqB,GAAA;AACnB,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AAAA,EAEA,OAAO,SAAkD,GAAA;AACvD,IAAO,OAAA;AAAA,MACL,MAAM,OAAO;AAAA,QACX,UAAA,EAAY,CAAC,OAAY,KAAA;AACvB,UAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,OAAQ,CAAA,YAAA,CAAa,yBAAyB,CAAE,CAAA,CAAA;AACnE,UAAM,MAAA,IAAA,GAAO,mBAAmB,KAAK,CAAA,CAAA;AACrC,UAAA,OAAO,EAAE,IAAK,EAAA,CAAA;AAAA,SAChB;AAAA,QACA,QAAU,EAAA,CAAA;AAAA,OACZ,CAAA;AAAA,KACF,CAAA;AAAA,GACF;AAAA,EAEA,SAA6B,GAAA;AAC3B,IAAM,MAAA,OAAA,GAAU,QAAS,CAAA,aAAA,CAAc,MAAM,CAAA,CAAA;AAC7C,IAAM,MAAA,KAAA,GAAQ,KAAK,cAAe,EAAA,CAAA;AAClC,IAAA,OAAA,CAAQ,YAAa,CAAA,yBAAA,EAA2B,IAAK,CAAA,KAAK,CAAC,CAAA,CAAA;AAC3D,IAAQ,OAAA,CAAA,WAAA,GAAc,KAAK,cAAe,EAAA,CAAA;AAC1C,IAAA,OAAO,EAAE,OAAQ,EAAA,CAAA;AAAA,GACnB;AAAA,EAEA,OAAO,WAAW,cAAoD,EAAA;AACpE,IAAM,MAAA,IAAA,GAAO,kBAAmB,CAAA,cAAA,CAAe,MAAM,CAAA,CAAA;AACrD,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAAA,EAEA,UAAoC,GAAA;AAClC,IAAO,OAAA;AAAA,MACL,QAAQ,IAAK,CAAA,QAAA;AAAA,MACb,IAAM,EAAA,YAAA;AAAA,MACN,OAAS,EAAA,CAAA;AAAA,KACX,CAAA;AAAA,GACF;AAAA,EAEA,SAAoB,GAAA;AAClB,IAAM,MAAA,IAAA,GAAO,KAAK,SAAU,EAAA,CAAA;AAC5B,IAAA,OAAO,IAAK,CAAA,QAAA,CAAA;AAAA,GACd;AAAA,EAEA,KAAgB,GAAA;AACd,IAAM,MAAA,IAAA,GAAO,KAAK,SAAU,EAAA,CAAA;AAC5B,IAAA,OAAO,IAAK,CAAA,IAAA,CAAA;AAAA,GACd;AAAA,EAEA,QAAwB,GAAA;AACtB,IAAA,uBACGC,gBAAA,CAAA,aAAA,CAAAC,wBAAA,EAAA;AAAA,MAAQ,OAAA,EAAS,KAAK,MAAO,EAAA;AAAA,KAAA,EAC3B,mCACAD,gBAAA,CAAA,aAAA,CAAAE,SAAA,EAAA;AAAA,MAAK,MAAA,EAAQ,KAAK,SAAU,EAAA;AAAA,KAAG,CAClC,CAAA,CAAA;AAAA,GAEJ;AACF,CAAA;AAEO,SAAS,eACd,IACqB,EAAA;AACrB,EAAA,OAAO,IAAgB,YAAA,WAAA,CAAA;AACzB,CAAA;AAEO,SAAS,mBAAmB,MAA6B,EAAA;AAC9D,EAAM,MAAA,EAAA,GAAK,MAAMC,aAAO,EAAA,CAAA,CAAA,CAAA;AACxB,EAAA,MAAM,IAAO,GAAA,IAAI,WAAY,CAAA,EAAA,EAAI,MAAM,CAAA,CAAA;AACvC,EAAA,OAAOC,8BAAsB,IAAI,CAAA,CAAA;AACnC;;;;;;"}

package/dist/mentions/mention-node.mjs

@@ -1,91 +1,85 @@
 import { DecoratorNode, $applyNodeReplacement } from 'lexical';
 import { nanoid } from 'nanoid';
 import * as React from 'react';
-import { MentionWrapper } from './mention-component.mjs';
+import { Mention } from './mention-component.mjs';
+import { User } from './user.mjs';
 
-function createMentionNodeFactory(Component) {
-  class MentionNode extends DecoratorNode {
-    constructor(id, userId, key) {
-      super(key);
-      this.__id = id;
-      this.__userId = userId;
-    }
-    static getType() {
-      return "lb-mention";
-    }
-    static clone(node) {
-      return new MentionNode(node.__id, node.__userId);
-    }
-    createDOM() {
-      const element = document.createElement("span");
-      element.style.display = "inline-block";
-      return element;
-    }
-    updateDOM() {
-      return false;
-    }
-    static importDom() {
-      return {
-        span: () => ({
-          conversion: (element) => {
-            const value = atob(
-              element.getAttribute("data-lexical-lb-mention")
-            );
-            const node = $createMentionNode(value);
-            return { node };
-          },
-          priority: 1
-        })
-      };
-    }
-    exportDOM() {
-      const element = document.createElement("span");
-      const value = this.getTextContent();
-      element.setAttribute("data-lexical-lb-mention", btoa(value));
-      element.textContent = this.getTextContent();
-      return { element };
-    }
-    static importJSON(serializedNode) {
-      const node = $createMentionNode(serializedNode.userId);
-      return node;
-    }
-    exportJSON() {
-      return {
-        userId: this.__userId,
-        type: "lb-mention",
-        version: 1
-      };
-    }
-    getUserId() {
-      const self = this.getLatest();
-      return self.__userId;
-    }
-    getId() {
-      const self = this.getLatest();
-      return self.__id;
-    }
-    decorate() {
-      return /* @__PURE__ */ React.createElement(MentionWrapper, {
-        nodeKey: this.getKey()
-      }, /* @__PURE__ */ React.createElement(Component, {
-        userId: this.__userId
-      }));
-    }
+const MENTION_CHARACTER = "@";
+class MentionNode extends DecoratorNode {
+  constructor(id, userId, key) {
+    super(key);
+    this.__id = id;
+    this.__userId = userId;
   }
-  function $isMentionNode(node) {
-    return node instanceof MentionNode;
+  static getType() {
+    return "lb-mention";
   }
-  function $createMentionNode(userId) {
-    const id = `in_${nanoid()}`;
-    const node = new MentionNode(id, userId);
-    return $applyNodeReplacement(node);
+  static clone(node) {
+    return new MentionNode(node.__id, node.__userId);
   }
-  return {
-    MentionNode,
-    $isMentionNode,
-    $createMentionNode
-  };
+  createDOM() {
+    const element = document.createElement("span");
+    element.style.display = "inline-block";
+    element.style.userSelect = "none";
+    return element;
+  }
+  updateDOM() {
+    return false;
+  }
+  static importDom() {
+    return {
+      span: () => ({
+        conversion: (element) => {
+          const value = atob(element.getAttribute("data-lexical-lb-mention"));
+          const node = $createMentionNode(value);
+          return { node };
+        },
+        priority: 1
+      })
+    };
+  }
+  exportDOM() {
+    const element = document.createElement("span");
+    const value = this.getTextContent();
+    element.setAttribute("data-lexical-lb-mention", btoa(value));
+    element.textContent = this.getTextContent();
+    return { element };
+  }
+  static importJSON(serializedNode) {
+    const node = $createMentionNode(serializedNode.userId);
+    return node;
+  }
+  exportJSON() {
+    return {
+      userId: this.__userId,
+      type: "lb-mention",
+      version: 1
+    };
+  }
+  getUserId() {
+    const self = this.getLatest();
+    return self.__userId;
+  }
+  getId() {
+    const self = this.getLatest();
+    return self.__id;
+  }
+  decorate() {
+    return /* @__PURE__ */ React.createElement(Mention, {
+      nodeKey: this.getKey()
+    }, MENTION_CHARACTER, /* @__PURE__ */ React.createElement(User, {
+      userId: this.getUserId()
+    }));
+  }
+}
+function $isMentionNode(node) {
+  return node instanceof MentionNode;
+}
+function $createMentionNode(userId) {
+  const id = `in_${nanoid()}`;
+  const node = new MentionNode(id, userId);
+  return $applyNodeReplacement(node);
 }
 
-export { createMentionNodeFactory };
+export { $createMentionNode, $isMentionNode, MentionNode };
 //# sourceMappingURL=mention-node.mjs.map

package/dist/mentions/mention-node.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mention-node.mjs","sources":["../../src/mentions/mention-node.tsx"],"sourcesContent":["import type {\n  DOMConversionMap,\n  DOMExportOutput,\n  LexicalNode,\n  NodeKey,\n  SerializedLexicalNode,\n  Spread,\n} from \"lexical\";\nimport { $applyNodeReplacement, DecoratorNode } from \"lexical\";\nimport { nanoid } from \"nanoid\";\nimport type { ComponentType, JSX } from \"react\";\nimport * as React from \"react\";\n\nimport type { MentionProps } from \"../liveblocks-config\";\nimport { MentionWrapper } from \"./mention-component\";\n\nexport type SerializedMentionNode = Spread<\n  {\n    userId: string;\n  },\n  SerializedLexicalNode\n>;\n\nexport function createMentionNodeFactory(\n  Component: ComponentType<MentionProps>\n): any {\n  class MentionNode extends DecoratorNode<JSX.Element> {\n    __id: string;\n    __userId: string;\n\n    constructor(id: string, userId: string, key?: NodeKey) {\n      super(key);\n      this.__id = id;\n      this.__userId = userId;\n    }\n\n    static getType(): string {\n      return \"lb-mention\";\n    }\n\n    static clone(node: MentionNode): MentionNode {\n      return new MentionNode(node.__id, node.__userId);\n    }\n\n    createDOM(): HTMLElement {\n      const element = document.createElement(\"span\");\n      element.style.display = \"inline-block\";\n      return element;\n    }\n\n    updateDOM(): boolean {\n      return false;\n    }\n\n    static importDom(): DOMConversionMap<HTMLElement> | null {\n      return {\n        span: () => ({\n          conversion: (element) => {\n            const value = atob(\n              element.getAttribute(\"data-lexical-lb-mention\")!\n            );\n            const node = $createMentionNode(value);\n            return { node };\n          },\n          priority: 1,\n        }),\n      };\n    }\n\n    exportDOM(): DOMExportOutput {\n      const element = document.createElement(\"span\");\n      const value = this.getTextContent();\n      element.setAttribute(\"data-lexical-lb-mention\", btoa(value));\n      element.textContent = this.getTextContent();\n      return { element };\n    }\n\n    static importJSON(serializedNode: SerializedMentionNode): MentionNode {\n      const node = $createMentionNode(serializedNode.userId);\n      return node;\n    }\n\n    exportJSON(): SerializedMentionNode {\n      return {\n        userId: this.__userId,\n        type: \"lb-mention\",\n        version: 1,\n      };\n    }\n\n    getUserId(): string {\n      const self = this.getLatest();\n      return self.__userId;\n    }\n\n    getId(): string {\n      const self = this.getLatest();\n      return self.__id;\n    }\n\n    decorate(): JSX.Element {\n      return (\n        <MentionWrapper nodeKey={this.getKey()}>\n          <Component userId={this.__userId} />\n        </MentionWrapper>\n      );\n    }\n  }\n\n  function $isMentionNode(\n    node: LexicalNode | null | undefined\n  ): node is MentionNode {\n    return node instanceof MentionNode;\n  }\n\n  function $createMentionNode(userId: string): MentionNode {\n    const id = `in_${nanoid()}`;\n    const node = new MentionNode(id, userId);\n    return $applyNodeReplacement(node);\n  }\n\n  return {\n    MentionNode,\n    $isMentionNode,\n    $createMentionNode,\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"mention-node.mjs","sources":["../../src/mentions/mention-node.tsx"],"sourcesContent":["import type {\n  DOMConversionMap,\n  DOMExportOutput,\n  LexicalNode,\n  NodeKey,\n  SerializedLexicalNode,\n  Spread,\n} from \"lexical\";\nimport { $applyNodeReplacement, DecoratorNode } from \"lexical\";\nimport { nanoid } from \"nanoid\";\nimport type { JSX } from \"react\";\nimport * as React from \"react\";\n\nimport { Mention } from \"./mention-component\";\nimport { User } from \"./user\";\n\nconst MENTION_CHARACTER = \"@\";\n\nexport type SerializedMentionNode = Spread<\n  {\n    userId: string;\n  },\n  SerializedLexicalNode\n>;\nexport class MentionNode extends DecoratorNode<JSX.Element> {\n  __id: string;\n  __userId: string;\n\n  constructor(id: string, userId: string, key?: NodeKey) {\n    super(key);\n    this.__id = id;\n    this.__userId = userId;\n  }\n\n  static getType(): string {\n    return \"lb-mention\";\n  }\n\n  static clone(node: MentionNode): MentionNode {\n    return new MentionNode(node.__id, node.__userId);\n  }\n\n  createDOM(): HTMLElement {\n    const element = document.createElement(\"span\");\n    element.style.display = \"inline-block\";\n    element.style.userSelect = \"none\";\n    return element;\n  }\n\n  updateDOM(): boolean {\n    return false;\n  }\n\n  static importDom(): DOMConversionMap<HTMLElement> | null {\n    return {\n      span: () => ({\n        conversion: (element) => {\n          const value = atob(element.getAttribute(\"data-lexical-lb-mention\")!);\n          const node = $createMentionNode(value);\n          return { node };\n        },\n        priority: 1,\n      }),\n    };\n  }\n\n  exportDOM(): DOMExportOutput {\n    const element = document.createElement(\"span\");\n    const value = this.getTextContent();\n    element.setAttribute(\"data-lexical-lb-mention\", btoa(value));\n    element.textContent = this.getTextContent();\n    return { element };\n  }\n\n  static importJSON(serializedNode: SerializedMentionNode): MentionNode {\n    const node = $createMentionNode(serializedNode.userId);\n    return node;\n  }\n\n  exportJSON(): SerializedMentionNode {\n    return {\n      userId: this.__userId,\n      type: \"lb-mention\",\n      version: 1,\n    };\n  }\n\n  getUserId(): string {\n    const self = this.getLatest();\n    return self.__userId;\n  }\n\n  getId(): string {\n    const self = this.getLatest();\n    return self.__id;\n  }\n\n  decorate(): JSX.Element {\n    return (\n      <Mention nodeKey={this.getKey()}>\n        {MENTION_CHARACTER}\n        <User userId={this.getUserId()} />\n      </Mention>\n    );\n  }\n}\n\nexport function $isMentionNode(\n  node: LexicalNode | null | undefined\n): node is MentionNode {\n  return node instanceof MentionNode;\n}\n\nexport function $createMentionNode(userId: string): MentionNode {\n  const id = `in_${nanoid()}`;\n  const node = new MentionNode(id, userId);\n  return $applyNodeReplacement(node);\n}\n"],"names":[],"mappings":"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"}

package/dist/mentions/mention-plugin.js

@@ -1,14 +1,17 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
+var reactDom$1 = require('@floating-ui/react-dom');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var core = require('@liveblocks/core');
 var react = require('@liveblocks/react');
+var reactUi = require('@liveblocks/react-ui');
 var lexical = require('lexical');
 var React = require('react');
 var reactDom = require('react-dom');
-var liveblocksPluginProvider = require('../liveblocks-plugin-provider.js');
+var avatar = require('./avatar.js');
+var mentionNode = require('./mention-node.js');
+var suggestions = require('./suggestions.js');
+var user = require('./user.js');
 
 const MENTION_TRIGGER = "@";
 const PUNCTUATIONS = `\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'"~=<>_:;`;
@@ -31,8 +34,8 @@ function $getAnchorNodeTextContent() {
   const anchorOffset = anchor.offset;
   return anchorNode.getTextContent().slice(0, anchorOffset);
 }
-function getFullMatchOffset(documentText, entryText, offset) {
-  let triggerOffset = offset;
+function getFullMatchOffset(documentText, entryText, offset2) {
+  let triggerOffset = offset2;
   for (let i = triggerOffset; i <= entryText.length; i++) {
     if (documentText.substr(-i) === entryText.substr(0, i)) {
       triggerOffset = i;
@@ -40,8 +43,8 @@ function getFullMatchOffset(documentText, entryText, offset) {
   }
   return triggerOffset;
 }
-function $isCurrentSelectionAtBoundary(offset) {
-  if (offset !== 0)
+function $isCurrentSelectionAtBoundary(offset2) {
+  if (offset2 !== 0)
     return false;
   const selection = lexical.$getSelection();
   if (!lexical.$isRangeSelection(selection))
@@ -78,30 +81,17 @@ function $getRangeAtMatch(match) {
     return null;
   }
 }
-const SuggestionsContext = React.createContext(null);
-const OnValueSelectCallbackContext = React.createContext(null);
-const OnResetMatchCallbackContext = React.createContext(null);
 function MentionPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const {
-    mentions: {
-      factory: { $isMentionNode, $createMentionNode, MentionNode },
-      components: { MentionSuggestions }
-    }
-  } = liveblocksPluginProvider.useLiveblocksLexicalConfigContext();
-  if (!editor.hasNodes([MentionNode])) {
+  if (!editor.hasNodes([mentionNode.MentionNode])) {
     throw new Error("MentionPlugin: MentionNode not registered on editor");
   }
   const [match, setMatch] = React.useState(null);
   const matchingString = match?.[3];
-  const {
-    [core.kInternal]: { useMentionSuggestions }
-  } = react.useRoomContextBundle();
-  const suggestions = useMentionSuggestions(matchingString);
-  const { useRoom } = react.useRoomContextBundle();
-  const room = useRoom();
+  const suggestions$1 = reactUi.useMentionSuggestions(matchingString);
+  const room = react.useRoom();
   React.useEffect(() => {
-    async function $handleMutation(mutations, {
+    function $handleMutation(mutations, {
       prevEditorState
     }) {
       for (const [key, mutation] of mutations) {
@@ -110,7 +100,7 @@ function MentionPlugin() {
             const node = lexical.$getNodeByKey(key);
             if (node === null)
               return;
-            if (!$isMentionNode(node))
+            if (!mentionNode.$isMentionNode(node))
               return;
             room[core.kInternal].createTextMention(node.getUserId(), node.getId()).catch((err) => {
               console.error(err);
@@ -121,7 +111,7 @@ function MentionPlugin() {
             const node = lexical.$getNodeByKey(key);
             if (node === null)
               return;
-            if (!$isMentionNode(node))
+            if (!mentionNode.$isMentionNode(node))
               return;
             room[core.kInternal].deleteTextMention(node.getId()).catch((err) => {
               console.error(err);
@@ -131,14 +121,14 @@ function MentionPlugin() {
       }
     }
     return editor.registerMutationListener(
-      MentionNode,
+      mentionNode.MentionNode,
       (mutations, payload) => {
         if (payload.updateTags.has("collaboration"))
           return;
         $handleMutation(mutations, payload);
       }
     );
-  }, [editor, MentionNode, $isMentionNode, room]);
+  }, [editor, room]);
   React.useEffect(() => {
     function $onStateRead() {
       const text = $getAnchorNodeTextContent();
@@ -153,6 +143,15 @@ function MentionPlugin() {
       state.read($onStateRead);
     });
   }, [editor]);
+  React.useEffect(() => {
+    const root = editor.getRootElement();
+    if (root === null)
+      return;
+    root.classList.add("lb-root");
+    return () => {
+      root.classList.remove("lb-root");
+    };
+  }, [editor]);
   React.useEffect(() => {
     function $handleBackspace(event) {
       const selection = lexical.$getSelection();
@@ -163,7 +162,7 @@ function MentionPlugin() {
         if (nodes.length !== 1)
           return false;
         const node = nodes[0];
-        if (!$isMentionNode(node))
+        if (!mentionNode.$isMentionNode(node))
           return false;
         const text = lexical.$createTextNode("@");
         node.replace(text);
@@ -177,7 +176,7 @@ function MentionPlugin() {
           return false;
         const anchor = selection.anchor.getNode();
         const prevSibling = anchor.getPreviousSibling();
-        if (selection.anchor.offset === 0 && $isMentionNode(prevSibling)) {
+        if (selection.anchor.offset === 0 && mentionNode.$isMentionNode(prevSibling)) {
           const text = lexical.$createTextNode("@");
           prevSibling.replace(text);
           const newSelection = lexical.$createRangeSelection();
@@ -187,7 +186,7 @@ function MentionPlugin() {
           return true;
         } else if (lexical.$isElementNode(anchor)) {
           const child = anchor.getChildAtIndex(selection.anchor.offset - 1);
-          if (!$isMentionNode(child))
+          if (!mentionNode.$isMentionNode(child))
             return false;
           const text = lexical.$createTextNode("@");
           child.replace(text);
@@ -206,7 +205,7 @@ function MentionPlugin() {
       $handleBackspace,
       lexical.COMMAND_PRIORITY_LOW
     );
-  }, [editor, $isMentionNode]);
+  }, [editor]);
   const handleValueSelect = React.useCallback(
     (userId) => {
       function $onValueSelect() {
@@ -231,88 +230,101 @@ function MentionPlugin() {
         const startOffset = selectionOffset - queryOffset;
         if (startOffset < 0)
           return;
-        const mentionNode = $createMentionNode(userId);
+        const mentionNode$1 = mentionNode.$createMentionNode(userId);
         if (startOffset === 0) {
           const [node] = anchorNode.splitText(selectionOffset);
-          node.replace(mentionNode);
+          node.replace(mentionNode$1);
         } else {
           const [, node] = anchorNode.splitText(startOffset, selectionOffset);
-          node.replace(mentionNode);
+          node.replace(mentionNode$1);
         }
       }
       editor.update($onValueSelect);
     },
-    [editor, match, $createMentionNode]
+    [editor, match]
   );
   if (match === null || matchingString === void 0)
     return null;
-  if (suggestions === void 0 || suggestions.length === 0)
+  if (suggestions$1 === void 0 || suggestions$1.length === 0)
     return null;
   const range = editor.getEditorState().read(() => $getRangeAtMatch(match));
   if (range === null)
     return null;
-  const rect = range.getBoundingClientRect();
   return reactDom.createPortal(
-    /* @__PURE__ */ React.createElement(SuggestionsContext.Provider, {
-      value: suggestions
-    }, /* @__PURE__ */ React.createElement(OnValueSelectCallbackContext.Provider, {
+    /* @__PURE__ */ React.createElement(suggestions.SuggestionsContext.Provider, {
+      value: suggestions$1
+    }, /* @__PURE__ */ React.createElement(suggestions.OnValueSelectCallbackContext.Provider, {
       value: handleValueSelect
-    }, /* @__PURE__ */ React.createElement(OnResetMatchCallbackContext.Provider, {
+    }, /* @__PURE__ */ React.createElement(suggestions.OnResetMatchCallbackContext.Provider, {
       value: () => setMatch(null)
-    }, /* @__PURE__ */ React.createElement(SuggestionsRoot, {
-      rect,
+    }, /* @__PURE__ */ React.createElement(SuggestionsPortal, {
+      range,
+      container: document.body,
       key: matchingString
-    }, /* @__PURE__ */ React.createElement(MentionSuggestions, {
-      userIds: suggestions
-    }))))),
+    }, /* @__PURE__ */ React.createElement(suggestions.List, {
+      className: "lb-lexical-suggestions-list lb-lexical-mention-suggestions-list"
+    }, suggestions$1.map((userId) => /* @__PURE__ */ React.createElement(suggestions.Item, {
+      key: userId,
+      value: userId,
+      className: "lb-lexical-suggestions-list-item lb-lexical-mention-suggestion"
+    }, /* @__PURE__ */ React.createElement(avatar.Avatar, {
+      userId,
+      className: "lb-lexical-mention-suggestion-avatar"
+    }), /* @__PURE__ */ React.createElement(user.User, {
+      userId,
+      className: "lb-lexical-mention-suggestion-user"
+    })))))))),
     document.body
   );
 }
-function SuggestionsRoot({
-  rect,
-  children
+const SUGGESTIONS_COLLISION_PADDING = 10;
+function SuggestionsPortal({
+  children,
+  range,
+  container
 }) {
-  const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const divRef = React.useRef(null);
+  const {
+    refs: { setReference, setFloating },
+    strategy,
+    x,
+    y
+  } = reactDom$1.useFloating({
+    strategy: "fixed",
+    placement: "top-start",
+    middleware: [
+      reactDom$1.flip({ padding: SUGGESTIONS_COLLISION_PADDING, crossAxis: false }),
+      reactDom$1.offset(10),
+      reactDom$1.hide({ padding: SUGGESTIONS_COLLISION_PADDING }),
+      reactDom$1.shift({ padding: SUGGESTIONS_COLLISION_PADDING, limiter: reactDom$1.limitShift() }),
+      reactDom$1.size({ padding: SUGGESTIONS_COLLISION_PADDING })
+    ],
+    whileElementsMounted: (...args) => {
+      return reactDom$1.autoUpdate(...args, {
+        animationFrame: true
+      });
+    }
+  });
   React.useLayoutEffect(() => {
-    const root = editor.getRootElement();
-    if (root === null)
-      return;
-    const div = divRef.current;
-    if (div === null)
-      return;
-    div.style.left = `${rect.left + window.scrollX}px`;
-    div.style.top = `${rect.bottom + window.scrollY}px`;
-  }, [editor, rect]);
-  return /* @__PURE__ */ React.createElement("div", {
-    ref: divRef,
-    style: { position: "absolute" }
-  }, children);
-}
-function useSuggestions() {
-  const suggestions = React.useContext(SuggestionsContext);
-  if (suggestions === null) {
-    throw new Error("useSuggestions: SuggestionsContext not found");
-  }
-  return suggestions;
-}
-function useOnValueSelectCallback() {
-  const onValueSelect = React.useContext(OnValueSelectCallbackContext);
-  if (onValueSelect === null) {
-    throw new Error("useOnValueSelectCallback: OnValueSelectContext not found");
-  }
-  return onValueSelect;
-}
-function useOnResetMatchCallback() {
-  const onResetMatch = React.useContext(OnResetMatchCallbackContext);
-  if (onResetMatch === null) {
-    throw new Error("useOnResetMatchCallback: OnResetMatchContext not found");
-  }
-  return onResetMatch;
+    setReference({
+      getBoundingClientRect: () => range.getBoundingClientRect()
+    });
+  }, [setReference, range]);
+  return reactDom.createPortal(
+    /* @__PURE__ */ React.createElement("div", {
+      ref: setFloating,
+      style: {
+        position: strategy,
+        top: 0,
+        left: 0,
+        transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`,
+        minWidth: "max-content"
+      },
+      className: "lb-root lb-portal lb-elevation lb-lexical-suggestions lb-lexical-mention-suggestions"
+    }, children),
+    container
+  );
 }
 
-exports.default = MentionPlugin;
-exports.useOnResetMatchCallback = useOnResetMatchCallback;
-exports.useOnValueSelectCallback = useOnValueSelectCallback;
-exports.useSuggestions = useSuggestions;
+exports.MentionPlugin = MentionPlugin;
+exports.SUGGESTIONS_COLLISION_PADDING = SUGGESTIONS_COLLISION_PADDING;
 //# sourceMappingURL=mention-plugin.js.map