@liveblocks/react-tiptap 2.18.3 → 2.18.4-uns2
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/{LiveblocksExtension.mjs → LiveblocksExtension.cjs} +41 -38
- package/dist/{LiveblocksExtension.mjs.map → LiveblocksExtension.cjs.map} +1 -1
- package/dist/LiveblocksExtension.js +37 -40
- package/dist/LiveblocksExtension.js.map +1 -1
- package/dist/ai/{AiExtension.mjs → AiExtension.cjs} +36 -32
- package/dist/ai/AiExtension.cjs.map +1 -0
- package/dist/ai/AiExtension.js +31 -35
- package/dist/ai/AiExtension.js.map +1 -1
- package/dist/ai/{AiToolbar.mjs → AiToolbar.cjs} +145 -142
- package/dist/ai/{AiToolbar.mjs.map → AiToolbar.cjs.map} +1 -1
- package/dist/ai/AiToolbar.js +141 -144
- package/dist/ai/AiToolbar.js.map +1 -1
- package/dist/{classnames.mjs → classnames.cjs} +4 -2
- package/dist/{classnames.mjs.map → classnames.cjs.map} +1 -1
- package/dist/classnames.js +1 -3
- package/dist/classnames.js.map +1 -1
- package/dist/comments/{AnchoredThreads.mjs → AnchoredThreads.cjs} +38 -36
- package/dist/comments/{AnchoredThreads.mjs.map → AnchoredThreads.cjs.map} +1 -1
- package/dist/comments/AnchoredThreads.js +35 -37
- package/dist/comments/AnchoredThreads.js.map +1 -1
- package/dist/comments/{CommentsExtension.mjs → CommentsExtension.cjs} +34 -32
- package/dist/comments/{CommentsExtension.mjs.map → CommentsExtension.cjs.map} +1 -1
- package/dist/comments/CommentsExtension.js +31 -33
- package/dist/comments/CommentsExtension.js.map +1 -1
- package/dist/comments/{FloatingComposer.mjs → FloatingComposer.cjs} +34 -31
- package/dist/comments/{FloatingComposer.mjs.map → FloatingComposer.cjs.map} +1 -1
- package/dist/comments/FloatingComposer.js +30 -33
- package/dist/comments/FloatingComposer.js.map +1 -1
- package/dist/comments/{FloatingThreads.mjs → FloatingThreads.cjs} +39 -36
- package/dist/comments/{FloatingThreads.mjs.map → FloatingThreads.cjs.map} +1 -1
- package/dist/comments/FloatingThreads.js +35 -38
- package/dist/comments/FloatingThreads.js.map +1 -1
- package/dist/context.cjs +24 -0
- package/dist/{context.mjs.map → context.cjs.map} +1 -1
- package/dist/context.js +8 -11
- package/dist/context.js.map +1 -1
- package/dist/index.cjs +29 -0
- package/dist/{index.mjs.map → index.cjs.map} +1 -1
- package/dist/index.js +13 -27
- package/dist/index.js.map +1 -1
- package/dist/mentions/{Avatar.mjs → Avatar.cjs} +16 -14
- package/dist/mentions/Avatar.cjs.map +1 -0
- package/dist/mentions/Avatar.js +13 -15
- package/dist/mentions/Avatar.js.map +1 -1
- package/dist/mentions/Mention.cjs +31 -0
- package/dist/mentions/Mention.cjs.map +1 -0
- package/dist/mentions/Mention.js +25 -25
- package/dist/mentions/Mention.js.map +1 -1
- package/dist/mentions/{MentionExtension.mjs → MentionExtension.cjs} +35 -33
- package/dist/mentions/{MentionExtension.mjs.map → MentionExtension.cjs.map} +1 -1
- package/dist/mentions/MentionExtension.js +32 -34
- package/dist/mentions/MentionExtension.js.map +1 -1
- package/dist/mentions/{MentionNode.mjs → MentionNode.cjs} +12 -10
- package/dist/mentions/{MentionNode.mjs.map → MentionNode.cjs.map} +1 -1
- package/dist/mentions/MentionNode.js +9 -11
- package/dist/mentions/MentionNode.js.map +1 -1
- package/dist/mentions/{MentionsList.mjs → MentionsList.cjs} +39 -35
- package/dist/mentions/{MentionsList.mjs.map → MentionsList.cjs.map} +1 -1
- package/dist/mentions/MentionsList.js +34 -38
- package/dist/mentions/MentionsList.js.map +1 -1
- package/dist/toolbar/{FloatingToolbar.mjs → FloatingToolbar.cjs} +67 -64
- package/dist/toolbar/{FloatingToolbar.mjs.map → FloatingToolbar.cjs.map} +1 -1
- package/dist/toolbar/FloatingToolbar.js +63 -66
- package/dist/toolbar/FloatingToolbar.js.map +1 -1
- package/dist/toolbar/{Toolbar.mjs → Toolbar.cjs} +116 -91
- package/dist/toolbar/{Toolbar.mjs.map → Toolbar.cjs.map} +1 -1
- package/dist/toolbar/Toolbar.js +90 -115
- package/dist/toolbar/Toolbar.js.map +1 -1
- package/dist/toolbar/shared.cjs +36 -0
- package/dist/toolbar/{shared.mjs.map → shared.cjs.map} +1 -1
- package/dist/toolbar/shared.js +12 -15
- package/dist/toolbar/shared.js.map +1 -1
- package/dist/types.cjs +39 -0
- package/dist/{types.mjs.map → types.cjs.map} +1 -1
- package/dist/types.js +8 -19
- package/dist/types.js.map +1 -1
- package/dist/{utils.mjs → utils.cjs} +23 -14
- package/dist/{utils.mjs.map → utils.cjs.map} +1 -1
- package/dist/utils.js +13 -22
- package/dist/utils.js.map +1 -1
- package/dist/version-history/{HistoryVersionPreview.mjs → HistoryVersionPreview.cjs} +36 -34
- package/dist/version-history/{HistoryVersionPreview.mjs.map → HistoryVersionPreview.cjs.map} +1 -1
- package/dist/version-history/HistoryVersionPreview.js +33 -35
- package/dist/version-history/HistoryVersionPreview.js.map +1 -1
- package/dist/version.cjs +10 -0
- package/dist/{version.mjs.map → version.cjs.map} +1 -1
- package/dist/version.js +3 -7
- package/dist/version.js.map +1 -1
- package/package.json +18 -17
- package/styles.css.d.cts +1 -0
- package/dist/ai/AiExtension.mjs.map +0 -1
- package/dist/context.mjs +0 -21
- package/dist/index.mjs +0 -15
- package/dist/mentions/Avatar.mjs.map +0 -1
- package/dist/mentions/Mention.mjs +0 -27
- package/dist/mentions/Mention.mjs.map +0 -1
- package/dist/toolbar/shared.mjs +0 -33
- package/dist/types.mjs +0 -28
- package/dist/version.mjs +0 -6
- /package/dist/{index.d.mts → index.d.cts} +0 -0
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport type { AiCommands, CommentsCommands } from \"./types\";\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport type { AiToolbarProps } from \"./ai/AiToolbar\";\nexport { AiToolbar } from \"./ai/AiToolbar\";\nexport type { AnchoredThreadsProps } from \"./comments/AnchoredThreads\";\nexport { AnchoredThreads } from \"./comments/AnchoredThreads\";\nexport type { FloatingComposerProps } from \"./comments/FloatingComposer\";\nexport { FloatingComposer } from \"./comments/FloatingComposer\";\nexport type { FloatingThreadsProps } from \"./comments/FloatingThreads\";\nexport { FloatingThreads } from \"./comments/FloatingThreads\";\nexport { useLiveblocksExtension } from \"./LiveblocksExtension\";\nexport { useIsEditorReady } from \"./LiveblocksExtension\";\nexport { MentionExtension } from \"./mentions/MentionExtension\";\nexport { MentionNode } from \"./mentions/MentionNode\";\nexport type { FloatingToolbarProps } from \"./toolbar/FloatingToolbar\";\nexport { FloatingToolbar } from \"./toolbar/FloatingToolbar\";\nexport type {\n ToolbarBlockSelectorItem,\n ToolbarBlockSelectorProps,\n ToolbarButtonProps,\n ToolbarProps,\n ToolbarSeparatorProps,\n ToolbarToggleProps,\n} from \"./toolbar/Toolbar\";\nexport { Toolbar } from \"./toolbar/Toolbar\";\nexport type {\n AiConfiguration,\n ResolveContextualPromptArgs,\n ResolveContextualPromptResponse,\n} from \"./types\";\nexport type { HistoryVersionPreviewProps } from \"./version-history/HistoryVersionPreview\";\nexport { HistoryVersionPreview } from \"./version-history/HistoryVersionPreview\";\n\ndeclare module \"@tiptap/core\" {\n interface Commands<ReturnType> {\n liveblocksComments: CommentsCommands<ReturnType>;\n liveblocksAi: AiCommands<ReturnType>;\n }\n}\n"],"names":[
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport type { AiCommands, CommentsCommands } from \"./types\";\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport type { AiToolbarProps } from \"./ai/AiToolbar\";\nexport { AiToolbar } from \"./ai/AiToolbar\";\nexport type { AnchoredThreadsProps } from \"./comments/AnchoredThreads\";\nexport { AnchoredThreads } from \"./comments/AnchoredThreads\";\nexport type { FloatingComposerProps } from \"./comments/FloatingComposer\";\nexport { FloatingComposer } from \"./comments/FloatingComposer\";\nexport type { FloatingThreadsProps } from \"./comments/FloatingThreads\";\nexport { FloatingThreads } from \"./comments/FloatingThreads\";\nexport { useLiveblocksExtension } from \"./LiveblocksExtension\";\nexport { useIsEditorReady } from \"./LiveblocksExtension\";\nexport { MentionExtension } from \"./mentions/MentionExtension\";\nexport { MentionNode } from \"./mentions/MentionNode\";\nexport type { FloatingToolbarProps } from \"./toolbar/FloatingToolbar\";\nexport { FloatingToolbar } from \"./toolbar/FloatingToolbar\";\nexport type {\n ToolbarBlockSelectorItem,\n ToolbarBlockSelectorProps,\n ToolbarButtonProps,\n ToolbarProps,\n ToolbarSeparatorProps,\n ToolbarToggleProps,\n} from \"./toolbar/Toolbar\";\nexport { Toolbar } from \"./toolbar/Toolbar\";\nexport type {\n AiConfiguration,\n ResolveContextualPromptArgs,\n ResolveContextualPromptResponse,\n} from \"./types\";\nexport type { HistoryVersionPreviewProps } from \"./version-history/HistoryVersionPreview\";\nexport { HistoryVersionPreview } from \"./version-history/HistoryVersionPreview\";\n\ndeclare module \"@tiptap/core\" {\n interface Commands<ReturnType> {\n liveblocksComments: CommentsCommands<ReturnType>;\n liveblocksAi: AiCommands<ReturnType>;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAKA,WAAY,CAAA,QAAA,EAAU,aAAa,UAAU,CAAA"}
|
|
@@ -1,18 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
import { useUser } from '@liveblocks/react';
|
|
3
|
-
import { forwardRef } from 'react';
|
|
4
|
-
import { classNames } from '../classnames.mjs';
|
|
1
|
+
'use strict';
|
|
5
2
|
|
|
6
|
-
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var react$1 = require('@liveblocks/react');
|
|
5
|
+
var react = require('react');
|
|
6
|
+
var classnames = require('../classnames.cjs');
|
|
7
|
+
|
|
8
|
+
const Avatar = react.forwardRef(
|
|
7
9
|
function Avatar2(props, forwardedRef) {
|
|
8
10
|
const { userId, className, ...spanProps } = props;
|
|
9
|
-
const { user, isLoading } = useUser(userId);
|
|
11
|
+
const { user, isLoading } = react$1.useUser(userId);
|
|
10
12
|
const avatar = user ? user.avatar : void 0;
|
|
11
13
|
const name = user ? user.name : void 0;
|
|
12
14
|
function Initials() {
|
|
13
15
|
const initials = name ? getInitials(name) : void 0;
|
|
14
16
|
if (initials) {
|
|
15
|
-
return /* @__PURE__ */ jsx("span", {
|
|
17
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
16
18
|
"aria-hidden": true,
|
|
17
19
|
className: "lb-avatar-fallback",
|
|
18
20
|
children: initials
|
|
@@ -22,25 +24,25 @@ const Avatar = forwardRef(
|
|
|
22
24
|
return null;
|
|
23
25
|
if (user === void 0)
|
|
24
26
|
return null;
|
|
25
|
-
return /* @__PURE__ */ jsx("span", {
|
|
27
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
26
28
|
"aria-label": userId,
|
|
27
29
|
title: userId,
|
|
28
30
|
className: "lb-avatar-fallback",
|
|
29
31
|
children: getInitials(userId)
|
|
30
32
|
});
|
|
31
33
|
}
|
|
32
|
-
return /* @__PURE__ */ jsxs("span", {
|
|
34
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("span", {
|
|
33
35
|
"data-loading": isLoading ? "" : void 0,
|
|
34
36
|
...spanProps,
|
|
35
|
-
className: classNames("lb-avatar", className),
|
|
37
|
+
className: classnames.classNames("lb-avatar", className),
|
|
36
38
|
ref: forwardedRef,
|
|
37
39
|
children: [
|
|
38
|
-
avatar && /* @__PURE__ */ jsx("img", {
|
|
40
|
+
avatar && /* @__PURE__ */ jsxRuntime.jsx("img", {
|
|
39
41
|
src: avatar,
|
|
40
42
|
alt: name,
|
|
41
43
|
className: "lb-avatar-image"
|
|
42
44
|
}),
|
|
43
|
-
/* @__PURE__ */ jsx(Initials, {})
|
|
45
|
+
/* @__PURE__ */ jsxRuntime.jsx(Initials, {})
|
|
44
46
|
]
|
|
45
47
|
});
|
|
46
48
|
}
|
|
@@ -54,5 +56,5 @@ function getInitials(name) {
|
|
|
54
56
|
}, "");
|
|
55
57
|
}
|
|
56
58
|
|
|
57
|
-
|
|
58
|
-
//# sourceMappingURL=Avatar.
|
|
59
|
+
exports.Avatar = Avatar;
|
|
60
|
+
//# sourceMappingURL=Avatar.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Avatar.cjs","sources":["../../src/mentions/Avatar.tsx"],"sourcesContent":["import { useUser } from \"@liveblocks/react\";\nimport type { HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { classNames } from \"../classnames\";\n\nexport interface AvatarProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n userId: string;\n}\n\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n function Avatar(props, forwardedRef) {\n const { userId, className, ...spanProps } = props;\n\n const { user, isLoading } = useUser(userId);\n\n const avatar = user ? user.avatar : undefined;\n\n const name = user ? user.name : undefined;\n\n function Initials() {\n const initials = name ? getInitials(name) : undefined;\n if (initials) {\n return (\n <span aria-hidden className=\"lb-avatar-fallback\">\n {initials}\n </span>\n );\n }\n\n if (isLoading) return null;\n\n if (user === undefined) return null;\n\n return (\n <span aria-label={userId} title={userId} className=\"lb-avatar-fallback\">\n {getInitials(userId)}\n </span>\n );\n }\n\n return (\n <span\n data-loading={isLoading ? \"\" : undefined}\n {...spanProps}\n className={classNames(\"lb-avatar\", className)}\n ref={forwardedRef}\n >\n {avatar && <img src={avatar} alt={name} className=\"lb-avatar-image\" />}\n\n <Initials />\n </span>\n );\n }\n);\n\nfunction getInitials(name: string) {\n return name\n .trim()\n .split(\" \")\n .reduce((initials, name, index, array) => {\n if (index === 0 || index === array.length - 1) {\n initials += name.charAt(0).toLocaleUpperCase();\n }\n\n return initials;\n }, \"\");\n}\n"],"names":["forwardRef","Avatar","useUser","jsx","jsxs","classNames","name"],"mappings":";;;;;;;AAWO,MAAM,MAAS,GAAAA,gBAAA;AAAA,EACpB,SAASC,OAAO,CAAA,KAAA,EAAO,YAAc,EAAA;AACnC,IAAA,MAAM,EAAE,MAAA,EAAQ,SAAc,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAE5C,IAAA,MAAM,EAAE,IAAA,EAAM,SAAU,EAAA,GAAIC,gBAAQ,MAAM,CAAA,CAAA;AAE1C,IAAM,MAAA,MAAA,GAAS,IAAO,GAAA,IAAA,CAAK,MAAS,GAAA,KAAA,CAAA,CAAA;AAEpC,IAAM,MAAA,IAAA,GAAO,IAAO,GAAA,IAAA,CAAK,IAAO,GAAA,KAAA,CAAA,CAAA;AAEhC,IAAA,SAAS,QAAW,GAAA;AAClB,MAAA,MAAM,QAAW,GAAA,IAAA,GAAO,WAAY,CAAA,IAAI,CAAI,GAAA,KAAA,CAAA,CAAA;AAC5C,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,uBACGC,cAAA,CAAA,MAAA,EAAA;AAAA,UAAK,aAAW,EAAA,IAAA;AAAA,UAAC,SAAU,EAAA,oBAAA;AAAA,UACzB,QAAA,EAAA,QAAA;AAAA,SACH,CAAA,CAAA;AAAA,OAEJ;AAEA,MAAI,IAAA,SAAA;AAAW,QAAO,OAAA,IAAA,CAAA;AAEtB,MAAA,IAAI,IAAS,KAAA,KAAA,CAAA;AAAW,QAAO,OAAA,IAAA,CAAA;AAE/B,MAAA,uBACGA,cAAA,CAAA,MAAA,EAAA;AAAA,QAAK,YAAY,EAAA,MAAA;AAAA,QAAQ,KAAO,EAAA,MAAA;AAAA,QAAQ,SAAU,EAAA,oBAAA;AAAA,QAChD,sBAAY,MAAM,CAAA;AAAA,OACrB,CAAA,CAAA;AAAA,KAEJ;AAEA,IAAA,uBACGC,eAAA,CAAA,MAAA,EAAA;AAAA,MACC,cAAA,EAAc,YAAY,EAAK,GAAA,KAAA,CAAA;AAAA,MAC9B,GAAG,SAAA;AAAA,MACJ,SAAA,EAAWC,qBAAW,CAAA,WAAA,EAAa,SAAS,CAAA;AAAA,MAC5C,GAAK,EAAA,YAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,QAAA,MAAA,oBAAWF,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,GAAK,EAAA,MAAA;AAAA,UAAQ,GAAK,EAAA,IAAA;AAAA,UAAM,SAAU,EAAA,iBAAA;AAAA,SAAkB,CAAA;AAAA,uCAEnE,QAAS,EAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KACZ,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,SAAS,YAAY,IAAc,EAAA;AACjC,EAAO,OAAA,IAAA,CACJ,IAAK,EAAA,CACL,KAAM,CAAA,GAAG,CACT,CAAA,MAAA,CAAO,CAAC,QAAA,EAAUG,KAAM,EAAA,KAAA,EAAO,KAAU,KAAA;AACxC,IAAA,IAAI,KAAU,KAAA,CAAA,IAAK,KAAU,KAAA,KAAA,CAAM,SAAS,CAAG,EAAA;AAC7C,MAAA,QAAA,IAAYA,KAAK,CAAA,MAAA,CAAO,CAAC,CAAA,CAAE,iBAAkB,EAAA,CAAA;AAAA,KAC/C;AAEA,IAAO,OAAA,QAAA,CAAA;AAAA,KACN,EAAE,CAAA,CAAA;AACT;;;;"}
|
package/dist/mentions/Avatar.js
CHANGED
|
@@ -1,20 +1,18 @@
|
|
|
1
|
-
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { useUser } from '@liveblocks/react';
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
|
+
import { classNames } from '../classnames.js';
|
|
2
5
|
|
|
3
|
-
|
|
4
|
-
var react$1 = require('@liveblocks/react');
|
|
5
|
-
var react = require('react');
|
|
6
|
-
var classnames = require('../classnames.js');
|
|
7
|
-
|
|
8
|
-
const Avatar = react.forwardRef(
|
|
6
|
+
const Avatar = forwardRef(
|
|
9
7
|
function Avatar2(props, forwardedRef) {
|
|
10
8
|
const { userId, className, ...spanProps } = props;
|
|
11
|
-
const { user, isLoading } =
|
|
9
|
+
const { user, isLoading } = useUser(userId);
|
|
12
10
|
const avatar = user ? user.avatar : void 0;
|
|
13
11
|
const name = user ? user.name : void 0;
|
|
14
12
|
function Initials() {
|
|
15
13
|
const initials = name ? getInitials(name) : void 0;
|
|
16
14
|
if (initials) {
|
|
17
|
-
return /* @__PURE__ */
|
|
15
|
+
return /* @__PURE__ */ jsx("span", {
|
|
18
16
|
"aria-hidden": true,
|
|
19
17
|
className: "lb-avatar-fallback",
|
|
20
18
|
children: initials
|
|
@@ -24,25 +22,25 @@ const Avatar = react.forwardRef(
|
|
|
24
22
|
return null;
|
|
25
23
|
if (user === void 0)
|
|
26
24
|
return null;
|
|
27
|
-
return /* @__PURE__ */
|
|
25
|
+
return /* @__PURE__ */ jsx("span", {
|
|
28
26
|
"aria-label": userId,
|
|
29
27
|
title: userId,
|
|
30
28
|
className: "lb-avatar-fallback",
|
|
31
29
|
children: getInitials(userId)
|
|
32
30
|
});
|
|
33
31
|
}
|
|
34
|
-
return /* @__PURE__ */
|
|
32
|
+
return /* @__PURE__ */ jsxs("span", {
|
|
35
33
|
"data-loading": isLoading ? "" : void 0,
|
|
36
34
|
...spanProps,
|
|
37
|
-
className:
|
|
35
|
+
className: classNames("lb-avatar", className),
|
|
38
36
|
ref: forwardedRef,
|
|
39
37
|
children: [
|
|
40
|
-
avatar && /* @__PURE__ */
|
|
38
|
+
avatar && /* @__PURE__ */ jsx("img", {
|
|
41
39
|
src: avatar,
|
|
42
40
|
alt: name,
|
|
43
41
|
className: "lb-avatar-image"
|
|
44
42
|
}),
|
|
45
|
-
/* @__PURE__ */
|
|
43
|
+
/* @__PURE__ */ jsx(Initials, {})
|
|
46
44
|
]
|
|
47
45
|
});
|
|
48
46
|
}
|
|
@@ -56,5 +54,5 @@ function getInitials(name) {
|
|
|
56
54
|
}, "");
|
|
57
55
|
}
|
|
58
56
|
|
|
59
|
-
|
|
57
|
+
export { Avatar };
|
|
60
58
|
//# sourceMappingURL=Avatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../../src/mentions/Avatar.tsx"],"sourcesContent":["import { useUser } from \"@liveblocks/react\";\nimport type { HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { classNames } from \"../classnames\";\n\nexport interface AvatarProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n userId: string;\n}\n\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n function Avatar(props, forwardedRef) {\n const { userId, className, ...spanProps } = props;\n\n const { user, isLoading } = useUser(userId);\n\n const avatar = user ? user.avatar : undefined;\n\n const name = user ? user.name : undefined;\n\n function Initials() {\n const initials = name ? getInitials(name) : undefined;\n if (initials) {\n return (\n <span aria-hidden className=\"lb-avatar-fallback\">\n {initials}\n </span>\n );\n }\n\n if (isLoading) return null;\n\n if (user === undefined) return null;\n\n return (\n <span aria-label={userId} title={userId} className=\"lb-avatar-fallback\">\n {getInitials(userId)}\n </span>\n );\n }\n\n return (\n <span\n data-loading={isLoading ? \"\" : undefined}\n {...spanProps}\n className={classNames(\"lb-avatar\", className)}\n ref={forwardedRef}\n >\n {avatar && <img src={avatar} alt={name} className=\"lb-avatar-image\" />}\n\n <Initials />\n </span>\n );\n }\n);\n\nfunction getInitials(name: string) {\n return name\n .trim()\n .split(\" \")\n .reduce((initials, name, index, array) => {\n if (index === 0 || index === array.length - 1) {\n initials += name.charAt(0).toLocaleUpperCase();\n }\n\n return initials;\n }, \"\");\n}\n"],"names":["
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../../src/mentions/Avatar.tsx"],"sourcesContent":["import { useUser } from \"@liveblocks/react\";\nimport type { HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { classNames } from \"../classnames\";\n\nexport interface AvatarProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n userId: string;\n}\n\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n function Avatar(props, forwardedRef) {\n const { userId, className, ...spanProps } = props;\n\n const { user, isLoading } = useUser(userId);\n\n const avatar = user ? user.avatar : undefined;\n\n const name = user ? user.name : undefined;\n\n function Initials() {\n const initials = name ? getInitials(name) : undefined;\n if (initials) {\n return (\n <span aria-hidden className=\"lb-avatar-fallback\">\n {initials}\n </span>\n );\n }\n\n if (isLoading) return null;\n\n if (user === undefined) return null;\n\n return (\n <span aria-label={userId} title={userId} className=\"lb-avatar-fallback\">\n {getInitials(userId)}\n </span>\n );\n }\n\n return (\n <span\n data-loading={isLoading ? \"\" : undefined}\n {...spanProps}\n className={classNames(\"lb-avatar\", className)}\n ref={forwardedRef}\n >\n {avatar && <img src={avatar} alt={name} className=\"lb-avatar-image\" />}\n\n <Initials />\n </span>\n );\n }\n);\n\nfunction getInitials(name: string) {\n return name\n .trim()\n .split(\" \")\n .reduce((initials, name, index, array) => {\n if (index === 0 || index === array.length - 1) {\n initials += name.charAt(0).toLocaleUpperCase();\n }\n\n return initials;\n }, \"\");\n}\n"],"names":["Avatar","name"],"mappings":";;;;;AAWO,MAAM,MAAS,GAAA,UAAA;AAAA,EACpB,SAASA,OAAO,CAAA,KAAA,EAAO,YAAc,EAAA;AACnC,IAAA,MAAM,EAAE,MAAA,EAAQ,SAAc,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAE5C,IAAA,MAAM,EAAE,IAAA,EAAM,SAAU,EAAA,GAAI,QAAQ,MAAM,CAAA,CAAA;AAE1C,IAAM,MAAA,MAAA,GAAS,IAAO,GAAA,IAAA,CAAK,MAAS,GAAA,KAAA,CAAA,CAAA;AAEpC,IAAM,MAAA,IAAA,GAAO,IAAO,GAAA,IAAA,CAAK,IAAO,GAAA,KAAA,CAAA,CAAA;AAEhC,IAAA,SAAS,QAAW,GAAA;AAClB,MAAA,MAAM,QAAW,GAAA,IAAA,GAAO,WAAY,CAAA,IAAI,CAAI,GAAA,KAAA,CAAA,CAAA;AAC5C,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,aAAW,EAAA,IAAA;AAAA,UAAC,SAAU,EAAA,oBAAA;AAAA,UACzB,QAAA,EAAA,QAAA;AAAA,SACH,CAAA,CAAA;AAAA,OAEJ;AAEA,MAAI,IAAA,SAAA;AAAW,QAAO,OAAA,IAAA,CAAA;AAEtB,MAAA,IAAI,IAAS,KAAA,KAAA,CAAA;AAAW,QAAO,OAAA,IAAA,CAAA;AAE/B,MAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,YAAY,EAAA,MAAA;AAAA,QAAQ,KAAO,EAAA,MAAA;AAAA,QAAQ,SAAU,EAAA,oBAAA;AAAA,QAChD,sBAAY,MAAM,CAAA;AAAA,OACrB,CAAA,CAAA;AAAA,KAEJ;AAEA,IAAA,uBACG,IAAA,CAAA,MAAA,EAAA;AAAA,MACC,cAAA,EAAc,YAAY,EAAK,GAAA,KAAA,CAAA;AAAA,MAC9B,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,UAAW,CAAA,WAAA,EAAa,SAAS,CAAA;AAAA,MAC5C,GAAK,EAAA,YAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,QAAA,MAAA,oBAAW,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,GAAK,EAAA,MAAA;AAAA,UAAQ,GAAK,EAAA,IAAA;AAAA,UAAM,SAAU,EAAA,iBAAA;AAAA,SAAkB,CAAA;AAAA,4BAEnE,QAAS,EAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KACZ,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,SAAS,YAAY,IAAc,EAAA;AACjC,EAAO,OAAA,IAAA,CACJ,IAAK,EAAA,CACL,KAAM,CAAA,GAAG,CACT,CAAA,MAAA,CAAO,CAAC,QAAA,EAAUC,KAAM,EAAA,KAAA,EAAO,KAAU,KAAA;AACxC,IAAA,IAAI,KAAU,KAAA,CAAA,IAAK,KAAU,KAAA,KAAA,CAAM,SAAS,CAAG,EAAA;AAC7C,MAAA,QAAA,IAAYA,KAAK,CAAA,MAAA,CAAO,CAAC,CAAA,CAAE,iBAAkB,EAAA,CAAA;AAAA,KAC/C;AAEA,IAAO,OAAA,QAAA,CAAA;AAAA,KACN,EAAE,CAAA,CAAA;AACT;;;;"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var react$1 = require('@tiptap/react');
|
|
5
|
+
var react = require('react');
|
|
6
|
+
var classnames = require('../classnames.cjs');
|
|
7
|
+
var MentionsList = require('./MentionsList.cjs');
|
|
8
|
+
|
|
9
|
+
const MENTION_CHARACTER = "@";
|
|
10
|
+
const Mention = react.forwardRef((props, forwardedRef) => {
|
|
11
|
+
const id = props.node.attrs.id;
|
|
12
|
+
const classnames$1 = classnames.classNames(
|
|
13
|
+
"lb-root",
|
|
14
|
+
"lb-tiptap-mention",
|
|
15
|
+
props.selected ? "lb-mention-selected" : null
|
|
16
|
+
);
|
|
17
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(react$1.NodeViewWrapper, {
|
|
18
|
+
className: classnames$1,
|
|
19
|
+
as: "span",
|
|
20
|
+
ref: forwardedRef,
|
|
21
|
+
children: [
|
|
22
|
+
MENTION_CHARACTER,
|
|
23
|
+
/* @__PURE__ */ jsxRuntime.jsx(MentionsList.User, {
|
|
24
|
+
userId: id
|
|
25
|
+
})
|
|
26
|
+
]
|
|
27
|
+
});
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
exports.Mention = Mention;
|
|
31
|
+
//# sourceMappingURL=Mention.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Mention.cjs","sources":["../../src/mentions/Mention.tsx"],"sourcesContent":["import type { Node } from \"@tiptap/pm/model\";\nimport { NodeViewWrapper } from \"@tiptap/react\";\nimport { forwardRef } from \"react\";\n\nimport { classNames } from \"../classnames\";\nimport { User } from \"./MentionsList\";\n\nconst MENTION_CHARACTER = \"@\";\n\nexport const Mention = forwardRef<\n HTMLSpanElement,\n { node: Node; selected: boolean }\n>((props, forwardedRef) => {\n const id = (props.node.attrs as { id: string }).id;\n const classnames = classNames(\n \"lb-root\",\n \"lb-tiptap-mention\",\n props.selected ? \"lb-mention-selected\" : null\n );\n return (\n <NodeViewWrapper className={classnames} as=\"span\" ref={forwardedRef}>\n {MENTION_CHARACTER}\n <User userId={id} />\n </NodeViewWrapper>\n );\n});\n"],"names":["forwardRef","classnames","classNames","jsxs","NodeViewWrapper","jsx","User"],"mappings":";;;;;;;;AAOA,MAAM,iBAAoB,GAAA,GAAA,CAAA;AAEnB,MAAM,OAAU,GAAAA,gBAAA,CAGrB,CAAC,KAAA,EAAO,YAAiB,KAAA;AACzB,EAAM,MAAA,EAAA,GAAM,KAAM,CAAA,IAAA,CAAK,KAAyB,CAAA,EAAA,CAAA;AAChD,EAAA,MAAMC,YAAa,GAAAC,qBAAA;AAAA,IACjB,SAAA;AAAA,IACA,mBAAA;AAAA,IACA,KAAA,CAAM,WAAW,qBAAwB,GAAA,IAAA;AAAA,GAC3C,CAAA;AACA,EAAA,uBACGC,eAAA,CAAAC,uBAAA,EAAA;AAAA,IAAgB,SAAW,EAAAH,YAAA;AAAA,IAAY,EAAG,EAAA,MAAA;AAAA,IAAO,GAAK,EAAA,YAAA;AAAA,IACpD,QAAA,EAAA;AAAA,MAAA,iBAAA;AAAA,sBACAI,cAAA,CAAAC,iBAAA,EAAA;AAAA,QAAK,MAAQ,EAAA,EAAA;AAAA,OAAI,CAAA;AAAA,KAAA;AAAA,GACpB,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
package/dist/mentions/Mention.js
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
var classnames = require('../classnames.js');
|
|
7
|
-
var MentionsList = require('./MentionsList.js');
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { NodeViewWrapper } from '@tiptap/react';
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
|
+
import { classNames } from '../classnames.js';
|
|
5
|
+
import { User } from './MentionsList.js';
|
|
8
6
|
|
|
9
7
|
const MENTION_CHARACTER = "@";
|
|
10
|
-
const Mention =
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
8
|
+
const Mention = forwardRef((props, forwardedRef) => {
|
|
9
|
+
const id = props.node.attrs.id;
|
|
10
|
+
const classnames = classNames(
|
|
11
|
+
"lb-root",
|
|
12
|
+
"lb-tiptap-mention",
|
|
13
|
+
props.selected ? "lb-mention-selected" : null
|
|
14
|
+
);
|
|
15
|
+
return /* @__PURE__ */ jsxs(NodeViewWrapper, {
|
|
16
|
+
className: classnames,
|
|
17
|
+
as: "span",
|
|
18
|
+
ref: forwardedRef,
|
|
19
|
+
children: [
|
|
20
|
+
MENTION_CHARACTER,
|
|
21
|
+
/* @__PURE__ */ jsx(User, {
|
|
22
|
+
userId: id
|
|
23
|
+
})
|
|
24
|
+
]
|
|
25
|
+
});
|
|
26
|
+
});
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
export { Mention };
|
|
29
29
|
//# sourceMappingURL=Mention.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Mention.js","sources":["../../src/mentions/Mention.tsx"],"sourcesContent":["import type { Node } from \"@tiptap/pm/model\";\nimport { NodeViewWrapper } from \"@tiptap/react\";\nimport { forwardRef } from \"react\";\n\nimport { classNames } from \"../classnames\";\nimport { User } from \"./MentionsList\";\n\nconst MENTION_CHARACTER = \"@\";\n\nexport const Mention = forwardRef
|
|
1
|
+
{"version":3,"file":"Mention.js","sources":["../../src/mentions/Mention.tsx"],"sourcesContent":["import type { Node } from \"@tiptap/pm/model\";\nimport { NodeViewWrapper } from \"@tiptap/react\";\nimport { forwardRef } from \"react\";\n\nimport { classNames } from \"../classnames\";\nimport { User } from \"./MentionsList\";\n\nconst MENTION_CHARACTER = \"@\";\n\nexport const Mention = forwardRef<\n HTMLSpanElement,\n { node: Node; selected: boolean }\n>((props, forwardedRef) => {\n const id = (props.node.attrs as { id: string }).id;\n const classnames = classNames(\n \"lb-root\",\n \"lb-tiptap-mention\",\n props.selected ? \"lb-mention-selected\" : null\n );\n return (\n <NodeViewWrapper className={classnames} as=\"span\" ref={forwardedRef}>\n {MENTION_CHARACTER}\n <User userId={id} />\n </NodeViewWrapper>\n );\n});\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,iBAAoB,GAAA,GAAA,CAAA;AAEnB,MAAM,OAAU,GAAA,UAAA,CAGrB,CAAC,KAAA,EAAO,YAAiB,KAAA;AACzB,EAAM,MAAA,EAAA,GAAM,KAAM,CAAA,IAAA,CAAK,KAAyB,CAAA,EAAA,CAAA;AAChD,EAAA,MAAM,UAAa,GAAA,UAAA;AAAA,IACjB,SAAA;AAAA,IACA,mBAAA;AAAA,IACA,KAAA,CAAM,WAAW,qBAAwB,GAAA,IAAA;AAAA,GAC3C,CAAA;AACA,EAAA,uBACG,IAAA,CAAA,eAAA,EAAA;AAAA,IAAgB,SAAW,EAAA,UAAA;AAAA,IAAY,EAAG,EAAA,MAAA;AAAA,IAAO,GAAK,EAAA,YAAA;AAAA,IACpD,QAAA,EAAA;AAAA,MAAA,iBAAA;AAAA,sBACA,GAAA,CAAA,IAAA,EAAA;AAAA,QAAK,MAAQ,EAAA,EAAA;AAAA,OAAI,CAAA;AAAA,KAAA;AAAA,GACpB,CAAA,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1,31 +1,33 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var core = require('@liveblocks/core');
|
|
4
|
+
var core$1 = require('@tiptap/core');
|
|
5
|
+
var model = require('@tiptap/pm/model');
|
|
6
|
+
var state = require('@tiptap/pm/state');
|
|
7
|
+
var react = require('@tiptap/react');
|
|
8
|
+
var Suggestion = require('@tiptap/suggestion');
|
|
9
|
+
var yProsemirror = require('y-prosemirror');
|
|
10
|
+
var types = require('../types.cjs');
|
|
11
|
+
var utils = require('../utils.cjs');
|
|
12
|
+
var MentionNode = require('./MentionNode.cjs');
|
|
13
|
+
var MentionsList = require('./MentionsList.cjs');
|
|
12
14
|
|
|
13
15
|
const mentionPasteHandler = () => {
|
|
14
|
-
return new Plugin({
|
|
15
|
-
key: LIVEBLOCKS_MENTION_PASTE_KEY,
|
|
16
|
+
return new state.Plugin({
|
|
17
|
+
key: types.LIVEBLOCKS_MENTION_PASTE_KEY,
|
|
16
18
|
props: {
|
|
17
19
|
transformPasted: (slice) => {
|
|
18
20
|
const getNewNotificationIds = (node) => {
|
|
19
|
-
if (node.type.name === LIVEBLOCKS_MENTION_TYPE) {
|
|
21
|
+
if (node.type.name === types.LIVEBLOCKS_MENTION_TYPE) {
|
|
20
22
|
return node.type.create(
|
|
21
|
-
{ ...node.attrs, notificationId: createInboxNotificationId() },
|
|
23
|
+
{ ...node.attrs, notificationId: core.createInboxNotificationId() },
|
|
22
24
|
node.content
|
|
23
25
|
);
|
|
24
26
|
}
|
|
25
27
|
return node.copy(node.content);
|
|
26
28
|
};
|
|
27
|
-
const fragment = mapFragment(slice.content, getNewNotificationIds);
|
|
28
|
-
return new Slice(fragment, slice.openStart, slice.openEnd);
|
|
29
|
+
const fragment = utils.mapFragment(slice.content, getNewNotificationIds);
|
|
30
|
+
return new model.Slice(fragment, slice.openStart, slice.openEnd);
|
|
29
31
|
}
|
|
30
32
|
}
|
|
31
33
|
});
|
|
@@ -34,23 +36,23 @@ const notifier = ({
|
|
|
34
36
|
onCreateMention,
|
|
35
37
|
onDeleteMention
|
|
36
38
|
}) => {
|
|
37
|
-
return new Plugin({
|
|
38
|
-
key: LIVEBLOCKS_MENTION_NOTIFIER_KEY,
|
|
39
|
+
return new state.Plugin({
|
|
40
|
+
key: types.LIVEBLOCKS_MENTION_NOTIFIER_KEY,
|
|
39
41
|
appendTransaction: (transactions, oldState, newState) => {
|
|
40
42
|
const docChanges = transactions.some((transaction) => transaction.docChanged) && !oldState.doc.eq(newState.doc);
|
|
41
43
|
if (!docChanges) {
|
|
42
44
|
return;
|
|
43
45
|
}
|
|
44
|
-
if (transactions.some((transaction) => transaction.getMeta(ySyncPluginKey))) {
|
|
46
|
+
if (transactions.some((transaction) => transaction.getMeta(yProsemirror.ySyncPluginKey))) {
|
|
45
47
|
return;
|
|
46
48
|
}
|
|
47
|
-
const transform = combineTransactionSteps(oldState.doc, [
|
|
49
|
+
const transform = core$1.combineTransactionSteps(oldState.doc, [
|
|
48
50
|
...transactions
|
|
49
51
|
]);
|
|
50
|
-
const changes = getChangedRanges(transform);
|
|
52
|
+
const changes = core$1.getChangedRanges(transform);
|
|
51
53
|
changes.forEach(({ newRange, oldRange }) => {
|
|
52
|
-
const newMentions = getMentionsFromNode(newState.doc, newRange);
|
|
53
|
-
const oldMentions = getMentionsFromNode(oldState.doc, oldRange);
|
|
54
|
+
const newMentions = utils.getMentionsFromNode(newState.doc, newRange);
|
|
55
|
+
const oldMentions = utils.getMentionsFromNode(oldState.doc, oldRange);
|
|
54
56
|
if (oldMentions.length || newMentions.length) {
|
|
55
57
|
newMentions.forEach((mention) => {
|
|
56
58
|
if (!oldMentions.includes(mention)) {
|
|
@@ -68,8 +70,8 @@ const notifier = ({
|
|
|
68
70
|
}
|
|
69
71
|
});
|
|
70
72
|
};
|
|
71
|
-
const MentionExtension = Extension.create({
|
|
72
|
-
name: LIVEBLOCKS_MENTION_EXTENSION,
|
|
73
|
+
const MentionExtension = core$1.Extension.create({
|
|
74
|
+
name: types.LIVEBLOCKS_MENTION_EXTENSION,
|
|
73
75
|
priority: 101,
|
|
74
76
|
addOptions() {
|
|
75
77
|
return {
|
|
@@ -80,14 +82,14 @@ const MentionExtension = Extension.create({
|
|
|
80
82
|
};
|
|
81
83
|
},
|
|
82
84
|
addExtensions() {
|
|
83
|
-
return [MentionNode];
|
|
85
|
+
return [MentionNode.MentionNode];
|
|
84
86
|
},
|
|
85
87
|
addProseMirrorPlugins() {
|
|
86
88
|
return [
|
|
87
89
|
Suggestion({
|
|
88
90
|
editor: this.editor,
|
|
89
91
|
char: "@",
|
|
90
|
-
pluginKey: LIVEBLOCKS_MENTION_KEY,
|
|
92
|
+
pluginKey: types.LIVEBLOCKS_MENTION_KEY,
|
|
91
93
|
command: ({ editor, range, props }) => {
|
|
92
94
|
const nodeAfter = editor.view.state.selection.$to.nodeAfter;
|
|
93
95
|
const overrideSpace = nodeAfter?.text?.startsWith(" ");
|
|
@@ -96,7 +98,7 @@ const MentionExtension = Extension.create({
|
|
|
96
98
|
}
|
|
97
99
|
editor.chain().focus().insertContentAt(range, [
|
|
98
100
|
{
|
|
99
|
-
type: LIVEBLOCKS_MENTION_TYPE,
|
|
101
|
+
type: types.LIVEBLOCKS_MENTION_TYPE,
|
|
100
102
|
attrs: props
|
|
101
103
|
},
|
|
102
104
|
{
|
|
@@ -108,7 +110,7 @@ const MentionExtension = Extension.create({
|
|
|
108
110
|
},
|
|
109
111
|
allow: ({ state, range }) => {
|
|
110
112
|
const $from = state.doc.resolve(range.from);
|
|
111
|
-
const type = state.schema.nodes[LIVEBLOCKS_MENTION_TYPE];
|
|
113
|
+
const type = state.schema.nodes[types.LIVEBLOCKS_MENTION_TYPE];
|
|
112
114
|
const allow = !!$from.parent.type.contentMatch.matchType(type);
|
|
113
115
|
return allow;
|
|
114
116
|
},
|
|
@@ -118,7 +120,7 @@ const MentionExtension = Extension.create({
|
|
|
118
120
|
let component;
|
|
119
121
|
return {
|
|
120
122
|
onStart: (props) => {
|
|
121
|
-
component = new ReactRenderer(MentionsList, {
|
|
123
|
+
component = new react.ReactRenderer(MentionsList.MentionsList, {
|
|
122
124
|
props,
|
|
123
125
|
editor: props.editor
|
|
124
126
|
});
|
|
@@ -153,5 +155,5 @@ const MentionExtension = Extension.create({
|
|
|
153
155
|
}
|
|
154
156
|
});
|
|
155
157
|
|
|
156
|
-
|
|
157
|
-
//# sourceMappingURL=MentionExtension.
|
|
158
|
+
exports.MentionExtension = MentionExtension;
|
|
159
|
+
//# sourceMappingURL=MentionExtension.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MentionExtension.mjs","sources":["../../src/mentions/MentionExtension.ts"],"sourcesContent":["import { createInboxNotificationId } from \"@liveblocks/core\";\nimport {\n combineTransactionSteps,\n Extension,\n getChangedRanges,\n} from \"@tiptap/core\";\nimport type { Node as ProseMirrorNode } from \"@tiptap/pm/model\";\nimport { Slice } from \"@tiptap/pm/model\";\nimport { Plugin } from \"@tiptap/pm/state\";\nimport { ReactRenderer } from \"@tiptap/react\";\nimport Suggestion from \"@tiptap/suggestion\";\nimport { ySyncPluginKey } from \"y-prosemirror\";\n\nimport {\n LIVEBLOCKS_MENTION_EXTENSION,\n LIVEBLOCKS_MENTION_KEY,\n LIVEBLOCKS_MENTION_NOTIFIER_KEY,\n LIVEBLOCKS_MENTION_PASTE_KEY,\n LIVEBLOCKS_MENTION_TYPE,\n} from \"../types\";\nimport { getMentionsFromNode, mapFragment } from \"../utils\";\nimport { MentionNode } from \"./MentionNode\";\nimport type { MentionsListHandle, MentionsListProps } from \"./MentionsList\";\nimport { MentionsList } from \"./MentionsList\";\n\n/**\n *\n * Handles creating new notificationIds when notifications are pasted\n *\n * @returns Plugin\n */\nconst mentionPasteHandler = (): Plugin => {\n return new Plugin({\n key: LIVEBLOCKS_MENTION_PASTE_KEY,\n props: {\n transformPasted: (slice) => {\n const getNewNotificationIds = (node: ProseMirrorNode) => {\n // If this is a mention node, we need to get a new notificatio id\n if (node.type.name === LIVEBLOCKS_MENTION_TYPE) {\n return node.type.create(\n { ...node.attrs, notificationId: createInboxNotificationId() },\n node.content\n );\n }\n return node.copy(node.content);\n };\n const fragment = mapFragment(slice.content, getNewNotificationIds);\n return new Slice(fragment, slice.openStart, slice.openEnd);\n },\n },\n });\n};\n\nexport type MentionExtensionOptions = {\n onCreateMention: (userId: string, notificationId: string) => void;\n onDeleteMention: (notificationId: string) => void;\n};\n/**\n *\n * The purpose of this plugin is to create inbox notifications when a mention is\n *\n * @returns Plugin (from @tiptap/core)\n */\nconst notifier = ({\n onCreateMention,\n onDeleteMention,\n}: MentionExtensionOptions): Plugin => {\n return new Plugin({\n key: LIVEBLOCKS_MENTION_NOTIFIER_KEY,\n appendTransaction: (transactions, oldState, newState) => {\n const docChanges =\n transactions.some((transaction) => transaction.docChanged) &&\n !oldState.doc.eq(newState.doc);\n // don't run if there was no change\n if (!docChanges) {\n return;\n }\n // don't run if from collab\n if (\n transactions.some((transaction) => transaction.getMeta(ySyncPluginKey))\n ) {\n return;\n }\n const transform = combineTransactionSteps(oldState.doc, [\n ...transactions,\n ]);\n const changes = getChangedRanges(transform);\n\n changes.forEach(({ newRange, oldRange }) => {\n const newMentions = getMentionsFromNode(newState.doc, newRange);\n const oldMentions = getMentionsFromNode(oldState.doc, oldRange);\n if (oldMentions.length || newMentions.length) {\n // create new mentions\n newMentions.forEach((mention) => {\n if (!oldMentions.includes(mention)) {\n onCreateMention(mention.userId, mention.notificationId);\n }\n });\n // delete old mentions\n oldMentions.forEach((mention) => {\n if (!newMentions.includes(mention)) {\n onDeleteMention(mention.notificationId);\n }\n });\n }\n });\n\n return undefined;\n },\n });\n};\n\nexport const MentionExtension = Extension.create<MentionExtensionOptions>({\n name: LIVEBLOCKS_MENTION_EXTENSION,\n\n priority: 101,\n addOptions() {\n return {\n onCreateMention: () => {},\n onDeleteMention: () => {},\n };\n },\n\n addExtensions() {\n return [MentionNode];\n },\n\n addProseMirrorPlugins() {\n return [\n Suggestion({\n editor: this.editor,\n char: \"@\",\n pluginKey: LIVEBLOCKS_MENTION_KEY,\n command: ({ editor, range, props }) => {\n // increase range.to by one when the next node is of type \"text\"\n // and starts with a space character\n const nodeAfter = editor.view.state.selection.$to.nodeAfter;\n const overrideSpace = nodeAfter?.text?.startsWith(\" \");\n\n if (overrideSpace) {\n range.to += 1;\n }\n\n editor\n .chain()\n .focus()\n .insertContentAt(range, [\n {\n type: LIVEBLOCKS_MENTION_TYPE,\n attrs: props as Record<string, string>,\n },\n {\n type: \"text\",\n text: \" \",\n },\n ])\n .run();\n\n // get reference to `window` object from editor element, to support cross-frame JS usage\n editor.view.dom.ownerDocument.defaultView\n ?.getSelection()\n ?.collapseToEnd();\n },\n allow: ({ state, range }) => {\n const $from = state.doc.resolve(range.from);\n const type = state.schema.nodes[LIVEBLOCKS_MENTION_TYPE];\n const allow = !!$from.parent.type.contentMatch.matchType(type);\n\n return allow;\n },\n allowSpaces: true,\n items: () => [], // we'll let the mentions list component do this\n render: () => {\n let component: ReactRenderer<MentionsListHandle, MentionsListProps>;\n return {\n onStart: (props) => {\n component = new ReactRenderer<\n MentionsListHandle,\n MentionsListProps\n >(MentionsList, {\n props,\n editor: props.editor,\n });\n\n if (!props.clientRect) {\n return;\n }\n\n document.body.appendChild(component.element);\n },\n\n onUpdate(props) {\n component.updateProps(props);\n },\n\n onKeyDown(props) {\n if (props.event.key === \"Escape\") {\n component.updateProps({\n ...props,\n hide: true,\n });\n return true;\n }\n return component.ref?.onKeyDown(props) ?? false;\n },\n\n onExit() {\n document.body.removeChild(component.element);\n component.destroy();\n },\n };\n },\n }),\n notifier(this.options),\n mentionPasteHandler(),\n ];\n },\n});\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MentionExtension.cjs","sources":["../../src/mentions/MentionExtension.ts"],"sourcesContent":["import { createInboxNotificationId } from \"@liveblocks/core\";\nimport {\n combineTransactionSteps,\n Extension,\n getChangedRanges,\n} from \"@tiptap/core\";\nimport type { Node as ProseMirrorNode } from \"@tiptap/pm/model\";\nimport { Slice } from \"@tiptap/pm/model\";\nimport { Plugin } from \"@tiptap/pm/state\";\nimport { ReactRenderer } from \"@tiptap/react\";\nimport Suggestion from \"@tiptap/suggestion\";\nimport { ySyncPluginKey } from \"y-prosemirror\";\n\nimport {\n LIVEBLOCKS_MENTION_EXTENSION,\n LIVEBLOCKS_MENTION_KEY,\n LIVEBLOCKS_MENTION_NOTIFIER_KEY,\n LIVEBLOCKS_MENTION_PASTE_KEY,\n LIVEBLOCKS_MENTION_TYPE,\n} from \"../types\";\nimport { getMentionsFromNode, mapFragment } from \"../utils\";\nimport { MentionNode } from \"./MentionNode\";\nimport type { MentionsListHandle, MentionsListProps } from \"./MentionsList\";\nimport { MentionsList } from \"./MentionsList\";\n\n/**\n *\n * Handles creating new notificationIds when notifications are pasted\n *\n * @returns Plugin\n */\nconst mentionPasteHandler = (): Plugin => {\n return new Plugin({\n key: LIVEBLOCKS_MENTION_PASTE_KEY,\n props: {\n transformPasted: (slice) => {\n const getNewNotificationIds = (node: ProseMirrorNode) => {\n // If this is a mention node, we need to get a new notificatio id\n if (node.type.name === LIVEBLOCKS_MENTION_TYPE) {\n return node.type.create(\n { ...node.attrs, notificationId: createInboxNotificationId() },\n node.content\n );\n }\n return node.copy(node.content);\n };\n const fragment = mapFragment(slice.content, getNewNotificationIds);\n return new Slice(fragment, slice.openStart, slice.openEnd);\n },\n },\n });\n};\n\nexport type MentionExtensionOptions = {\n onCreateMention: (userId: string, notificationId: string) => void;\n onDeleteMention: (notificationId: string) => void;\n};\n/**\n *\n * The purpose of this plugin is to create inbox notifications when a mention is\n *\n * @returns Plugin (from @tiptap/core)\n */\nconst notifier = ({\n onCreateMention,\n onDeleteMention,\n}: MentionExtensionOptions): Plugin => {\n return new Plugin({\n key: LIVEBLOCKS_MENTION_NOTIFIER_KEY,\n appendTransaction: (transactions, oldState, newState) => {\n const docChanges =\n transactions.some((transaction) => transaction.docChanged) &&\n !oldState.doc.eq(newState.doc);\n // don't run if there was no change\n if (!docChanges) {\n return;\n }\n // don't run if from collab\n if (\n transactions.some((transaction) => transaction.getMeta(ySyncPluginKey))\n ) {\n return;\n }\n const transform = combineTransactionSteps(oldState.doc, [\n ...transactions,\n ]);\n const changes = getChangedRanges(transform);\n\n changes.forEach(({ newRange, oldRange }) => {\n const newMentions = getMentionsFromNode(newState.doc, newRange);\n const oldMentions = getMentionsFromNode(oldState.doc, oldRange);\n if (oldMentions.length || newMentions.length) {\n // create new mentions\n newMentions.forEach((mention) => {\n if (!oldMentions.includes(mention)) {\n onCreateMention(mention.userId, mention.notificationId);\n }\n });\n // delete old mentions\n oldMentions.forEach((mention) => {\n if (!newMentions.includes(mention)) {\n onDeleteMention(mention.notificationId);\n }\n });\n }\n });\n\n return undefined;\n },\n });\n};\n\nexport const MentionExtension = Extension.create<MentionExtensionOptions>({\n name: LIVEBLOCKS_MENTION_EXTENSION,\n\n priority: 101,\n addOptions() {\n return {\n onCreateMention: () => {},\n onDeleteMention: () => {},\n };\n },\n\n addExtensions() {\n return [MentionNode];\n },\n\n addProseMirrorPlugins() {\n return [\n Suggestion({\n editor: this.editor,\n char: \"@\",\n pluginKey: LIVEBLOCKS_MENTION_KEY,\n command: ({ editor, range, props }) => {\n // increase range.to by one when the next node is of type \"text\"\n // and starts with a space character\n const nodeAfter = editor.view.state.selection.$to.nodeAfter;\n const overrideSpace = nodeAfter?.text?.startsWith(\" \");\n\n if (overrideSpace) {\n range.to += 1;\n }\n\n editor\n .chain()\n .focus()\n .insertContentAt(range, [\n {\n type: LIVEBLOCKS_MENTION_TYPE,\n attrs: props as Record<string, string>,\n },\n {\n type: \"text\",\n text: \" \",\n },\n ])\n .run();\n\n // get reference to `window` object from editor element, to support cross-frame JS usage\n editor.view.dom.ownerDocument.defaultView\n ?.getSelection()\n ?.collapseToEnd();\n },\n allow: ({ state, range }) => {\n const $from = state.doc.resolve(range.from);\n const type = state.schema.nodes[LIVEBLOCKS_MENTION_TYPE];\n const allow = !!$from.parent.type.contentMatch.matchType(type);\n\n return allow;\n },\n allowSpaces: true,\n items: () => [], // we'll let the mentions list component do this\n render: () => {\n let component: ReactRenderer<MentionsListHandle, MentionsListProps>;\n return {\n onStart: (props) => {\n component = new ReactRenderer<\n MentionsListHandle,\n MentionsListProps\n >(MentionsList, {\n props,\n editor: props.editor,\n });\n\n if (!props.clientRect) {\n return;\n }\n\n document.body.appendChild(component.element);\n },\n\n onUpdate(props) {\n component.updateProps(props);\n },\n\n onKeyDown(props) {\n if (props.event.key === \"Escape\") {\n component.updateProps({\n ...props,\n hide: true,\n });\n return true;\n }\n return component.ref?.onKeyDown(props) ?? false;\n },\n\n onExit() {\n document.body.removeChild(component.element);\n component.destroy();\n },\n };\n },\n }),\n notifier(this.options),\n mentionPasteHandler(),\n ];\n },\n});\n"],"names":["Plugin","LIVEBLOCKS_MENTION_PASTE_KEY","LIVEBLOCKS_MENTION_TYPE","createInboxNotificationId","mapFragment","Slice","LIVEBLOCKS_MENTION_NOTIFIER_KEY","ySyncPluginKey","combineTransactionSteps","getChangedRanges","getMentionsFromNode","Extension","LIVEBLOCKS_MENTION_EXTENSION","MentionNode","LIVEBLOCKS_MENTION_KEY","ReactRenderer","MentionsList"],"mappings":"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"}
|
|
@@ -1,33 +1,31 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var MentionNode = require('./MentionNode.js');
|
|
13
|
-
var MentionsList = require('./MentionsList.js');
|
|
1
|
+
import { createInboxNotificationId } from '@liveblocks/core';
|
|
2
|
+
import { combineTransactionSteps, getChangedRanges, Extension } from '@tiptap/core';
|
|
3
|
+
import { Slice } from '@tiptap/pm/model';
|
|
4
|
+
import { Plugin } from '@tiptap/pm/state';
|
|
5
|
+
import { ReactRenderer } from '@tiptap/react';
|
|
6
|
+
import Suggestion from '@tiptap/suggestion';
|
|
7
|
+
import { ySyncPluginKey } from 'y-prosemirror';
|
|
8
|
+
import { LIVEBLOCKS_MENTION_PASTE_KEY, LIVEBLOCKS_MENTION_TYPE, LIVEBLOCKS_MENTION_NOTIFIER_KEY, LIVEBLOCKS_MENTION_EXTENSION, LIVEBLOCKS_MENTION_KEY } from '../types.js';
|
|
9
|
+
import { mapFragment, getMentionsFromNode } from '../utils.js';
|
|
10
|
+
import { MentionNode } from './MentionNode.js';
|
|
11
|
+
import { MentionsList } from './MentionsList.js';
|
|
14
12
|
|
|
15
13
|
const mentionPasteHandler = () => {
|
|
16
|
-
return new
|
|
17
|
-
key:
|
|
14
|
+
return new Plugin({
|
|
15
|
+
key: LIVEBLOCKS_MENTION_PASTE_KEY,
|
|
18
16
|
props: {
|
|
19
17
|
transformPasted: (slice) => {
|
|
20
18
|
const getNewNotificationIds = (node) => {
|
|
21
|
-
if (node.type.name ===
|
|
19
|
+
if (node.type.name === LIVEBLOCKS_MENTION_TYPE) {
|
|
22
20
|
return node.type.create(
|
|
23
|
-
{ ...node.attrs, notificationId:
|
|
21
|
+
{ ...node.attrs, notificationId: createInboxNotificationId() },
|
|
24
22
|
node.content
|
|
25
23
|
);
|
|
26
24
|
}
|
|
27
25
|
return node.copy(node.content);
|
|
28
26
|
};
|
|
29
|
-
const fragment =
|
|
30
|
-
return new
|
|
27
|
+
const fragment = mapFragment(slice.content, getNewNotificationIds);
|
|
28
|
+
return new Slice(fragment, slice.openStart, slice.openEnd);
|
|
31
29
|
}
|
|
32
30
|
}
|
|
33
31
|
});
|
|
@@ -36,23 +34,23 @@ const notifier = ({
|
|
|
36
34
|
onCreateMention,
|
|
37
35
|
onDeleteMention
|
|
38
36
|
}) => {
|
|
39
|
-
return new
|
|
40
|
-
key:
|
|
37
|
+
return new Plugin({
|
|
38
|
+
key: LIVEBLOCKS_MENTION_NOTIFIER_KEY,
|
|
41
39
|
appendTransaction: (transactions, oldState, newState) => {
|
|
42
40
|
const docChanges = transactions.some((transaction) => transaction.docChanged) && !oldState.doc.eq(newState.doc);
|
|
43
41
|
if (!docChanges) {
|
|
44
42
|
return;
|
|
45
43
|
}
|
|
46
|
-
if (transactions.some((transaction) => transaction.getMeta(
|
|
44
|
+
if (transactions.some((transaction) => transaction.getMeta(ySyncPluginKey))) {
|
|
47
45
|
return;
|
|
48
46
|
}
|
|
49
|
-
const transform =
|
|
47
|
+
const transform = combineTransactionSteps(oldState.doc, [
|
|
50
48
|
...transactions
|
|
51
49
|
]);
|
|
52
|
-
const changes =
|
|
50
|
+
const changes = getChangedRanges(transform);
|
|
53
51
|
changes.forEach(({ newRange, oldRange }) => {
|
|
54
|
-
const newMentions =
|
|
55
|
-
const oldMentions =
|
|
52
|
+
const newMentions = getMentionsFromNode(newState.doc, newRange);
|
|
53
|
+
const oldMentions = getMentionsFromNode(oldState.doc, oldRange);
|
|
56
54
|
if (oldMentions.length || newMentions.length) {
|
|
57
55
|
newMentions.forEach((mention) => {
|
|
58
56
|
if (!oldMentions.includes(mention)) {
|
|
@@ -70,8 +68,8 @@ const notifier = ({
|
|
|
70
68
|
}
|
|
71
69
|
});
|
|
72
70
|
};
|
|
73
|
-
const MentionExtension =
|
|
74
|
-
name:
|
|
71
|
+
const MentionExtension = Extension.create({
|
|
72
|
+
name: LIVEBLOCKS_MENTION_EXTENSION,
|
|
75
73
|
priority: 101,
|
|
76
74
|
addOptions() {
|
|
77
75
|
return {
|
|
@@ -82,14 +80,14 @@ const MentionExtension = core$1.Extension.create({
|
|
|
82
80
|
};
|
|
83
81
|
},
|
|
84
82
|
addExtensions() {
|
|
85
|
-
return [MentionNode
|
|
83
|
+
return [MentionNode];
|
|
86
84
|
},
|
|
87
85
|
addProseMirrorPlugins() {
|
|
88
86
|
return [
|
|
89
87
|
Suggestion({
|
|
90
88
|
editor: this.editor,
|
|
91
89
|
char: "@",
|
|
92
|
-
pluginKey:
|
|
90
|
+
pluginKey: LIVEBLOCKS_MENTION_KEY,
|
|
93
91
|
command: ({ editor, range, props }) => {
|
|
94
92
|
const nodeAfter = editor.view.state.selection.$to.nodeAfter;
|
|
95
93
|
const overrideSpace = nodeAfter?.text?.startsWith(" ");
|
|
@@ -98,7 +96,7 @@ const MentionExtension = core$1.Extension.create({
|
|
|
98
96
|
}
|
|
99
97
|
editor.chain().focus().insertContentAt(range, [
|
|
100
98
|
{
|
|
101
|
-
type:
|
|
99
|
+
type: LIVEBLOCKS_MENTION_TYPE,
|
|
102
100
|
attrs: props
|
|
103
101
|
},
|
|
104
102
|
{
|
|
@@ -110,7 +108,7 @@ const MentionExtension = core$1.Extension.create({
|
|
|
110
108
|
},
|
|
111
109
|
allow: ({ state, range }) => {
|
|
112
110
|
const $from = state.doc.resolve(range.from);
|
|
113
|
-
const type = state.schema.nodes[
|
|
111
|
+
const type = state.schema.nodes[LIVEBLOCKS_MENTION_TYPE];
|
|
114
112
|
const allow = !!$from.parent.type.contentMatch.matchType(type);
|
|
115
113
|
return allow;
|
|
116
114
|
},
|
|
@@ -120,7 +118,7 @@ const MentionExtension = core$1.Extension.create({
|
|
|
120
118
|
let component;
|
|
121
119
|
return {
|
|
122
120
|
onStart: (props) => {
|
|
123
|
-
component = new
|
|
121
|
+
component = new ReactRenderer(MentionsList, {
|
|
124
122
|
props,
|
|
125
123
|
editor: props.editor
|
|
126
124
|
});
|
|
@@ -155,5 +153,5 @@ const MentionExtension = core$1.Extension.create({
|
|
|
155
153
|
}
|
|
156
154
|
});
|
|
157
155
|
|
|
158
|
-
|
|
156
|
+
export { MentionExtension };
|
|
159
157
|
//# sourceMappingURL=MentionExtension.js.map
|