@liveblocks/react-lexical 3.4.0-alpha1 → 3.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/mentions/mention-component.cjs +1 -1
- package/dist/mentions/mention-component.cjs.map +1 -1
- package/dist/mentions/mention-component.js +1 -1
- package/dist/mentions/mention-component.js.map +1 -1
- package/dist/mentions/mention-node.cjs +4 -1
- package/dist/mentions/mention-node.cjs.map +1 -1
- package/dist/mentions/mention-node.js +4 -1
- package/dist/mentions/mention-node.js.map +1 -1
- package/dist/version.cjs +1 -1
- package/dist/version.cjs.map +1 -1
- package/dist/version.js +1 -1
- package/dist/version.js.map +1 -1
- package/package.json +6 -6
|
@@ -23,7 +23,7 @@ function Mention({
|
|
|
23
23
|
return /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
24
24
|
onClick: handleClick,
|
|
25
25
|
"data-selected": isSelected ? "" : void 0,
|
|
26
|
-
className: "lb-root lb-lexical-mention",
|
|
26
|
+
className: "lb-root lb-mention lb-lexical-mention",
|
|
27
27
|
children
|
|
28
28
|
});
|
|
29
29
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mention-component.cjs","sources":["../../src/mentions/mention-component.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { NodeKey } from \"lexical\";\nimport { $createNodeSelection, $getNodeByKey, $setSelection } from \"lexical\";\nimport type { MouseEvent, ReactNode } from \"react\";\nimport { useCallback, useSyncExternalStore } from \"react\";\n\nexport function Mention({\n nodeKey,\n children,\n}: {\n nodeKey: NodeKey;\n children: ReactNode;\n}) {\n const [editor] = useLexicalComposerContext();\n const isSelected = useIsNodeSelected(nodeKey);\n\n function handleClick(event: MouseEvent) {\n editor.update(() => {\n event.stopPropagation();\n event.preventDefault();\n\n const selection = $createNodeSelection();\n selection.add(nodeKey);\n $setSelection(selection);\n });\n }\n\n return (\n <span\n onClick={handleClick}\n data-selected={isSelected ? \"\" : undefined}\n className=\"lb-root lb-lexical-mention\"\n >\n {children}\n </span>\n );\n}\n\nfunction $isNodeSelected(key: NodeKey): boolean {\n const node = $getNodeByKey(key);\n if (node === null) return false;\n return node.isSelected();\n}\n\nfunction useIsNodeSelected(key: NodeKey) {\n const [editor] = useLexicalComposerContext();\n\n const subscribe = useCallback(\n (onStoreChange: () => void) => {\n return editor.registerUpdateListener(onStoreChange);\n },\n [editor]\n );\n\n const getSnapshot = useCallback(() => {\n return editor.getEditorState().read(() => $isNodeSelected(key));\n }, [editor, key]);\n\n return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"],"names":["useLexicalComposerContext","$createNodeSelection","$setSelection","jsx","$getNodeByKey","useCallback","useSyncExternalStore"],"mappings":";;;;;;;AAMO,SAAS,OAAQ,CAAA;AAAA,EACtB,OAAA;AAAA,EACA,QAAA;AACF,CAGG,EAAA;AACD,EAAM,MAAA,CAAC,MAAM,CAAA,GAAIA,gDAA0B,EAAA,CAAA;AAC3C,EAAM,MAAA,UAAA,GAAa,kBAAkB,OAAO,CAAA,CAAA;AAE5C,EAAA,SAAS,YAAY,KAAmB,EAAA;AACtC,IAAA,MAAA,CAAO,OAAO,MAAM;AAClB,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AAErB,MAAA,MAAM,YAAYC,4BAAqB,EAAA,CAAA;AACvC,MAAA,SAAA,CAAU,IAAI,OAAO,CAAA,CAAA;AACrB,MAAAC,qBAAA,CAAc,SAAS,CAAA,CAAA;AAAA,KACxB,CAAA,CAAA;AAAA,GACH;AAEA,EAAA,uBACGC,cAAA,CAAA,MAAA,EAAA;AAAA,IACC,OAAS,EAAA,WAAA;AAAA,IACT,eAAA,EAAe,aAAa,EAAK,GAAA,KAAA,CAAA;AAAA,IACjC,SAAU,EAAA,
|
|
1
|
+
{"version":3,"file":"mention-component.cjs","sources":["../../src/mentions/mention-component.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { NodeKey } from \"lexical\";\nimport { $createNodeSelection, $getNodeByKey, $setSelection } from \"lexical\";\nimport type { MouseEvent, ReactNode } from \"react\";\nimport { useCallback, useSyncExternalStore } from \"react\";\n\nexport function Mention({\n nodeKey,\n children,\n}: {\n nodeKey: NodeKey;\n children: ReactNode;\n}) {\n const [editor] = useLexicalComposerContext();\n const isSelected = useIsNodeSelected(nodeKey);\n\n function handleClick(event: MouseEvent) {\n editor.update(() => {\n event.stopPropagation();\n event.preventDefault();\n\n const selection = $createNodeSelection();\n selection.add(nodeKey);\n $setSelection(selection);\n });\n }\n\n return (\n <span\n onClick={handleClick}\n data-selected={isSelected ? \"\" : undefined}\n className=\"lb-root lb-mention lb-lexical-mention\"\n >\n {children}\n </span>\n );\n}\n\nfunction $isNodeSelected(key: NodeKey): boolean {\n const node = $getNodeByKey(key);\n if (node === null) return false;\n return node.isSelected();\n}\n\nfunction useIsNodeSelected(key: NodeKey) {\n const [editor] = useLexicalComposerContext();\n\n const subscribe = useCallback(\n (onStoreChange: () => void) => {\n return editor.registerUpdateListener(onStoreChange);\n },\n [editor]\n );\n\n const getSnapshot = useCallback(() => {\n return editor.getEditorState().read(() => $isNodeSelected(key));\n }, [editor, key]);\n\n return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"],"names":["useLexicalComposerContext","$createNodeSelection","$setSelection","jsx","$getNodeByKey","useCallback","useSyncExternalStore"],"mappings":";;;;;;;AAMO,SAAS,OAAQ,CAAA;AAAA,EACtB,OAAA;AAAA,EACA,QAAA;AACF,CAGG,EAAA;AACD,EAAM,MAAA,CAAC,MAAM,CAAA,GAAIA,gDAA0B,EAAA,CAAA;AAC3C,EAAM,MAAA,UAAA,GAAa,kBAAkB,OAAO,CAAA,CAAA;AAE5C,EAAA,SAAS,YAAY,KAAmB,EAAA;AACtC,IAAA,MAAA,CAAO,OAAO,MAAM;AAClB,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AAErB,MAAA,MAAM,YAAYC,4BAAqB,EAAA,CAAA;AACvC,MAAA,SAAA,CAAU,IAAI,OAAO,CAAA,CAAA;AACrB,MAAAC,qBAAA,CAAc,SAAS,CAAA,CAAA;AAAA,KACxB,CAAA,CAAA;AAAA,GACH;AAEA,EAAA,uBACGC,cAAA,CAAA,MAAA,EAAA;AAAA,IACC,OAAS,EAAA,WAAA;AAAA,IACT,eAAA,EAAe,aAAa,EAAK,GAAA,KAAA,CAAA;AAAA,IACjC,SAAU,EAAA,uCAAA;AAAA,IAET,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,gBAAgB,GAAuB,EAAA;AAC9C,EAAM,MAAA,IAAA,GAAOC,sBAAc,GAAG,CAAA,CAAA;AAC9B,EAAA,IAAI,IAAS,KAAA,IAAA;AAAM,IAAO,OAAA,KAAA,CAAA;AAC1B,EAAA,OAAO,KAAK,UAAW,EAAA,CAAA;AACzB,CAAA;AAEA,SAAS,kBAAkB,GAAc,EAAA;AACvC,EAAM,MAAA,CAAC,MAAM,CAAA,GAAIJ,gDAA0B,EAAA,CAAA;AAE3C,EAAA,MAAM,SAAY,GAAAK,iBAAA;AAAA,IAChB,CAAC,aAA8B,KAAA;AAC7B,MAAO,OAAA,MAAA,CAAO,uBAAuB,aAAa,CAAA,CAAA;AAAA,KACpD;AAAA,IACA,CAAC,MAAM,CAAA;AAAA,GACT,CAAA;AAEA,EAAM,MAAA,WAAA,GAAcA,kBAAY,MAAM;AACpC,IAAA,OAAO,OAAO,cAAe,EAAA,CAAE,KAAK,MAAM,eAAA,CAAgB,GAAG,CAAC,CAAA,CAAA;AAAA,GAC7D,EAAA,CAAC,MAAQ,EAAA,GAAG,CAAC,CAAA,CAAA;AAEhB,EAAO,OAAAC,0BAAA,CAAqB,SAAW,EAAA,WAAA,EAAa,WAAW,CAAA,CAAA;AACjE;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mention-component.js","sources":["../../src/mentions/mention-component.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { NodeKey } from \"lexical\";\nimport { $createNodeSelection, $getNodeByKey, $setSelection } from \"lexical\";\nimport type { MouseEvent, ReactNode } from \"react\";\nimport { useCallback, useSyncExternalStore } from \"react\";\n\nexport function Mention({\n nodeKey,\n children,\n}: {\n nodeKey: NodeKey;\n children: ReactNode;\n}) {\n const [editor] = useLexicalComposerContext();\n const isSelected = useIsNodeSelected(nodeKey);\n\n function handleClick(event: MouseEvent) {\n editor.update(() => {\n event.stopPropagation();\n event.preventDefault();\n\n const selection = $createNodeSelection();\n selection.add(nodeKey);\n $setSelection(selection);\n });\n }\n\n return (\n <span\n onClick={handleClick}\n data-selected={isSelected ? \"\" : undefined}\n className=\"lb-root lb-lexical-mention\"\n >\n {children}\n </span>\n );\n}\n\nfunction $isNodeSelected(key: NodeKey): boolean {\n const node = $getNodeByKey(key);\n if (node === null) return false;\n return node.isSelected();\n}\n\nfunction useIsNodeSelected(key: NodeKey) {\n const [editor] = useLexicalComposerContext();\n\n const subscribe = useCallback(\n (onStoreChange: () => void) => {\n return editor.registerUpdateListener(onStoreChange);\n },\n [editor]\n );\n\n const getSnapshot = useCallback(() => {\n return editor.getEditorState().read(() => $isNodeSelected(key));\n }, [editor, key]);\n\n return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"],"names":[],"mappings":";;;;;AAMO,SAAS,OAAQ,CAAA;AAAA,EACtB,OAAA;AAAA,EACA,QAAA;AACF,CAGG,EAAA;AACD,EAAM,MAAA,CAAC,MAAM,CAAA,GAAI,yBAA0B,EAAA,CAAA;AAC3C,EAAM,MAAA,UAAA,GAAa,kBAAkB,OAAO,CAAA,CAAA;AAE5C,EAAA,SAAS,YAAY,KAAmB,EAAA;AACtC,IAAA,MAAA,CAAO,OAAO,MAAM;AAClB,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AAErB,MAAA,MAAM,YAAY,oBAAqB,EAAA,CAAA;AACvC,MAAA,SAAA,CAAU,IAAI,OAAO,CAAA,CAAA;AACrB,MAAA,aAAA,CAAc,SAAS,CAAA,CAAA;AAAA,KACxB,CAAA,CAAA;AAAA,GACH;AAEA,EAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,IACC,OAAS,EAAA,WAAA;AAAA,IACT,eAAA,EAAe,aAAa,EAAK,GAAA,KAAA,CAAA;AAAA,IACjC,SAAU,EAAA,
|
|
1
|
+
{"version":3,"file":"mention-component.js","sources":["../../src/mentions/mention-component.tsx"],"sourcesContent":["import { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport type { NodeKey } from \"lexical\";\nimport { $createNodeSelection, $getNodeByKey, $setSelection } from \"lexical\";\nimport type { MouseEvent, ReactNode } from \"react\";\nimport { useCallback, useSyncExternalStore } from \"react\";\n\nexport function Mention({\n nodeKey,\n children,\n}: {\n nodeKey: NodeKey;\n children: ReactNode;\n}) {\n const [editor] = useLexicalComposerContext();\n const isSelected = useIsNodeSelected(nodeKey);\n\n function handleClick(event: MouseEvent) {\n editor.update(() => {\n event.stopPropagation();\n event.preventDefault();\n\n const selection = $createNodeSelection();\n selection.add(nodeKey);\n $setSelection(selection);\n });\n }\n\n return (\n <span\n onClick={handleClick}\n data-selected={isSelected ? \"\" : undefined}\n className=\"lb-root lb-mention lb-lexical-mention\"\n >\n {children}\n </span>\n );\n}\n\nfunction $isNodeSelected(key: NodeKey): boolean {\n const node = $getNodeByKey(key);\n if (node === null) return false;\n return node.isSelected();\n}\n\nfunction useIsNodeSelected(key: NodeKey) {\n const [editor] = useLexicalComposerContext();\n\n const subscribe = useCallback(\n (onStoreChange: () => void) => {\n return editor.registerUpdateListener(onStoreChange);\n },\n [editor]\n );\n\n const getSnapshot = useCallback(() => {\n return editor.getEditorState().read(() => $isNodeSelected(key));\n }, [editor, key]);\n\n return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);\n}\n"],"names":[],"mappings":";;;;;AAMO,SAAS,OAAQ,CAAA;AAAA,EACtB,OAAA;AAAA,EACA,QAAA;AACF,CAGG,EAAA;AACD,EAAM,MAAA,CAAC,MAAM,CAAA,GAAI,yBAA0B,EAAA,CAAA;AAC3C,EAAM,MAAA,UAAA,GAAa,kBAAkB,OAAO,CAAA,CAAA;AAE5C,EAAA,SAAS,YAAY,KAAmB,EAAA;AACtC,IAAA,MAAA,CAAO,OAAO,MAAM;AAClB,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AAErB,MAAA,MAAM,YAAY,oBAAqB,EAAA,CAAA;AACvC,MAAA,SAAA,CAAU,IAAI,OAAO,CAAA,CAAA;AACrB,MAAA,aAAA,CAAc,SAAS,CAAA,CAAA;AAAA,KACxB,CAAA,CAAA;AAAA,GACH;AAEA,EAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,IACC,OAAS,EAAA,WAAA;AAAA,IACT,eAAA,EAAe,aAAa,EAAK,GAAA,KAAA,CAAA;AAAA,IACjC,SAAU,EAAA,uCAAA;AAAA,IAET,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAA;AAEA,SAAS,gBAAgB,GAAuB,EAAA;AAC9C,EAAM,MAAA,IAAA,GAAO,cAAc,GAAG,CAAA,CAAA;AAC9B,EAAA,IAAI,IAAS,KAAA,IAAA;AAAM,IAAO,OAAA,KAAA,CAAA;AAC1B,EAAA,OAAO,KAAK,UAAW,EAAA,CAAA;AACzB,CAAA;AAEA,SAAS,kBAAkB,GAAc,EAAA;AACvC,EAAM,MAAA,CAAC,MAAM,CAAA,GAAI,yBAA0B,EAAA,CAAA;AAE3C,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IAChB,CAAC,aAA8B,KAAA;AAC7B,MAAO,OAAA,MAAA,CAAO,uBAAuB,aAAa,CAAA,CAAA;AAAA,KACpD;AAAA,IACA,CAAC,MAAM,CAAA;AAAA,GACT,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,OAAO,OAAO,cAAe,EAAA,CAAE,KAAK,MAAM,eAAA,CAAgB,GAAG,CAAC,CAAA,CAAA;AAAA,GAC7D,EAAA,CAAC,MAAQ,EAAA,GAAG,CAAC,CAAA,CAAA;AAEhB,EAAO,OAAA,oBAAA,CAAqB,SAAW,EAAA,WAAA,EAAa,WAAW,CAAA,CAAA;AACjE;;;;"}
|
|
@@ -74,7 +74,10 @@ class MentionNode extends lexical.DecoratorNode {
|
|
|
74
74
|
return /* @__PURE__ */ jsxRuntime.jsxs(mentionComponent.Mention, {
|
|
75
75
|
nodeKey: this.getKey(),
|
|
76
76
|
children: [
|
|
77
|
-
|
|
77
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
78
|
+
className: "lb-mention-symbol",
|
|
79
|
+
children: MENTION_CHARACTER
|
|
80
|
+
}),
|
|
78
81
|
/* @__PURE__ */ jsxRuntime.jsx(_private.User, {
|
|
79
82
|
userId: this.getUserId()
|
|
80
83
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mention-node.cjs","sources":["../../src/mentions/mention-node.tsx"],"sourcesContent":["import { createInboxNotificationId } from \"@liveblocks/core\";\nimport { User } from \"@liveblocks/react-ui/_private\";\nimport type {\n DOMConversionMap,\n DOMExportOutput,\n LexicalNode,\n NodeKey,\n SerializedLexicalNode,\n Spread,\n} from \"lexical\";\nimport { $applyNodeReplacement, DecoratorNode } from \"lexical\";\nimport type { JSX } from \"react\";\n\nimport { Mention } from \"./mention-component\";\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, node.__key);\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 userId = element.getAttribute(\"data-lexical-lb-mention\");\n\n if (!userId) {\n return null;\n }\n\n const node = $createMentionNode(userId);\n return { node };\n },\n priority: 1,\n }),\n };\n }\n\n exportDOM(): DOMExportOutput {\n const element = document.createElement(\"span\");\n element.setAttribute(\"data-lexical-lb-mention\", this.getUserId());\n element.textContent = this.getUserId();\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}
|
|
1
|
+
{"version":3,"file":"mention-node.cjs","sources":["../../src/mentions/mention-node.tsx"],"sourcesContent":["import { createInboxNotificationId } from \"@liveblocks/core\";\nimport { User } from \"@liveblocks/react-ui/_private\";\nimport type {\n DOMConversionMap,\n DOMExportOutput,\n LexicalNode,\n NodeKey,\n SerializedLexicalNode,\n Spread,\n} from \"lexical\";\nimport { $applyNodeReplacement, DecoratorNode } from \"lexical\";\nimport type { JSX } from \"react\";\n\nimport { Mention } from \"./mention-component\";\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, node.__key);\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 userId = element.getAttribute(\"data-lexical-lb-mention\");\n\n if (!userId) {\n return null;\n }\n\n const node = $createMentionNode(userId);\n return { node };\n },\n priority: 1,\n }),\n };\n }\n\n exportDOM(): DOMExportOutput {\n const element = document.createElement(\"span\");\n element.setAttribute(\"data-lexical-lb-mention\", this.getUserId());\n element.textContent = this.getUserId();\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 <span className=\"lb-mention-symbol\">{MENTION_CHARACTER}</span>\n <User userId={this.getUserId()} />\n </Mention>\n );\n }\n\n getTextContent(): string {\n return MENTION_CHARACTER + this.getUserId();\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 node = new MentionNode(createInboxNotificationId(), userId);\n return $applyNodeReplacement(node);\n}\n"],"names":["DecoratorNode","jsxs","Mention","jsx","User","createInboxNotificationId","$applyNodeReplacement"],"mappings":"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"}
|
|
@@ -72,7 +72,10 @@ class MentionNode extends DecoratorNode {
|
|
|
72
72
|
return /* @__PURE__ */ jsxs(Mention, {
|
|
73
73
|
nodeKey: this.getKey(),
|
|
74
74
|
children: [
|
|
75
|
-
|
|
75
|
+
/* @__PURE__ */ jsx("span", {
|
|
76
|
+
className: "lb-mention-symbol",
|
|
77
|
+
children: MENTION_CHARACTER
|
|
78
|
+
}),
|
|
76
79
|
/* @__PURE__ */ jsx(User, {
|
|
77
80
|
userId: this.getUserId()
|
|
78
81
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mention-node.js","sources":["../../src/mentions/mention-node.tsx"],"sourcesContent":["import { createInboxNotificationId } from \"@liveblocks/core\";\nimport { User } from \"@liveblocks/react-ui/_private\";\nimport type {\n DOMConversionMap,\n DOMExportOutput,\n LexicalNode,\n NodeKey,\n SerializedLexicalNode,\n Spread,\n} from \"lexical\";\nimport { $applyNodeReplacement, DecoratorNode } from \"lexical\";\nimport type { JSX } from \"react\";\n\nimport { Mention } from \"./mention-component\";\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, node.__key);\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 userId = element.getAttribute(\"data-lexical-lb-mention\");\n\n if (!userId) {\n return null;\n }\n\n const node = $createMentionNode(userId);\n return { node };\n },\n priority: 1,\n }),\n };\n }\n\n exportDOM(): DOMExportOutput {\n const element = document.createElement(\"span\");\n element.setAttribute(\"data-lexical-lb-mention\", this.getUserId());\n element.textContent = this.getUserId();\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}
|
|
1
|
+
{"version":3,"file":"mention-node.js","sources":["../../src/mentions/mention-node.tsx"],"sourcesContent":["import { createInboxNotificationId } from \"@liveblocks/core\";\nimport { User } from \"@liveblocks/react-ui/_private\";\nimport type {\n DOMConversionMap,\n DOMExportOutput,\n LexicalNode,\n NodeKey,\n SerializedLexicalNode,\n Spread,\n} from \"lexical\";\nimport { $applyNodeReplacement, DecoratorNode } from \"lexical\";\nimport type { JSX } from \"react\";\n\nimport { Mention } from \"./mention-component\";\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, node.__key);\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 userId = element.getAttribute(\"data-lexical-lb-mention\");\n\n if (!userId) {\n return null;\n }\n\n const node = $createMentionNode(userId);\n return { node };\n },\n priority: 1,\n }),\n };\n }\n\n exportDOM(): DOMExportOutput {\n const element = document.createElement(\"span\");\n element.setAttribute(\"data-lexical-lb-mention\", this.getUserId());\n element.textContent = this.getUserId();\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 <span className=\"lb-mention-symbol\">{MENTION_CHARACTER}</span>\n <User userId={this.getUserId()} />\n </Mention>\n );\n }\n\n getTextContent(): string {\n return MENTION_CHARACTER + this.getUserId();\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 node = new MentionNode(createInboxNotificationId(), userId);\n return $applyNodeReplacement(node);\n}\n"],"names":[],"mappings":"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"}
|
package/dist/version.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
const PKG_NAME = "@liveblocks/react-lexical";
|
|
4
|
-
const PKG_VERSION = typeof "3.4.0
|
|
4
|
+
const PKG_VERSION = typeof "3.4.0" === "string" && "3.4.0";
|
|
5
5
|
const PKG_FORMAT = typeof "cjs" === "string" && "cjs";
|
|
6
6
|
|
|
7
7
|
exports.PKG_FORMAT = PKG_FORMAT;
|
package/dist/version.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.cjs","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-lexical\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":";;AAGO,MAAM,QAAW,GAAA,4BAAA;AACX,MAAA,WAAA,GAAc,OAAO,
|
|
1
|
+
{"version":3,"file":"version.cjs","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-lexical\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":";;AAGO,MAAM,QAAW,GAAA,4BAAA;AACX,MAAA,WAAA,GAAc,OAAO,OAAA,KAAgB,QAAY,IAAA,QAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;;;"}
|
package/dist/version.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const PKG_NAME = "@liveblocks/react-lexical";
|
|
2
|
-
const PKG_VERSION = typeof "3.4.0
|
|
2
|
+
const PKG_VERSION = typeof "3.4.0" === "string" && "3.4.0";
|
|
3
3
|
const PKG_FORMAT = typeof "esm" === "string" && "esm";
|
|
4
4
|
|
|
5
5
|
export { PKG_FORMAT, PKG_NAME, PKG_VERSION };
|
package/dist/version.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-lexical\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":"AAGO,MAAM,QAAW,GAAA,4BAAA;AACX,MAAA,WAAA,GAAc,OAAO,
|
|
1
|
+
{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-lexical\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":"AAGO,MAAM,QAAW,GAAA,4BAAA;AACX,MAAA,WAAA,GAAc,OAAO,OAAA,KAAgB,QAAY,IAAA,QAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@liveblocks/react-lexical",
|
|
3
|
-
"version": "3.4.0
|
|
3
|
+
"version": "3.4.0",
|
|
4
4
|
"description": "An integration of Lexical + React to enable collaboration, comments, live cursors, and more with Liveblocks.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
@@ -43,11 +43,11 @@
|
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@floating-ui/react-dom": "^2.1.1",
|
|
46
|
-
"@liveblocks/client": "3.4.0
|
|
47
|
-
"@liveblocks/core": "3.4.0
|
|
48
|
-
"@liveblocks/react": "3.4.0
|
|
49
|
-
"@liveblocks/react-ui": "3.4.0
|
|
50
|
-
"@liveblocks/yjs": "3.4.0
|
|
46
|
+
"@liveblocks/client": "3.4.0",
|
|
47
|
+
"@liveblocks/core": "3.4.0",
|
|
48
|
+
"@liveblocks/react": "3.4.0",
|
|
49
|
+
"@liveblocks/react-ui": "3.4.0",
|
|
50
|
+
"@liveblocks/yjs": "3.4.0",
|
|
51
51
|
"@radix-ui/react-select": "^2.1.2",
|
|
52
52
|
"@radix-ui/react-toggle": "^1.1.0",
|
|
53
53
|
"yjs": "^13.6.18"
|