@tldraw/mentions 5.6.0-next.65a0c658db13 → 5.6.0-next.9984746dba04
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-cjs/index.js
CHANGED
|
@@ -35,7 +35,7 @@ var import_mention_extension = require("./mention-extension");
|
|
|
35
35
|
var import_mention_suggestion = require("./mention-suggestion");
|
|
36
36
|
(0, import_utils.registerTldrawLibraryVersion)(
|
|
37
37
|
"@tldraw/mentions",
|
|
38
|
-
"5.6.0-next.
|
|
38
|
+
"5.6.0-next.9984746dba04",
|
|
39
39
|
"cjs"
|
|
40
40
|
);
|
|
41
41
|
//# sourceMappingURL=index.js.map
|
package/dist-cjs/mention-list.js
CHANGED
|
@@ -25,6 +25,10 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
25
25
|
var import_react = require("react");
|
|
26
26
|
var import_tldraw = require("tldraw");
|
|
27
27
|
var import_avatar = require("./avatar");
|
|
28
|
+
const messages = (0, import_tldraw.defineMessages)({
|
|
29
|
+
commentsMentionNoMatches: { id: "comments.mention-no-matches", defaultMessage: "No matches" },
|
|
30
|
+
commentsMentionYou: { id: "comments.mention-you", defaultMessage: "You" }
|
|
31
|
+
});
|
|
28
32
|
function DefaultMemberRow({ member }) {
|
|
29
33
|
const msg = (0, import_tldraw.useTranslation)();
|
|
30
34
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
@@ -32,7 +36,7 @@ function DefaultMemberRow({ member }) {
|
|
|
32
36
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "tlui-cmt-mention-list__text", children: [
|
|
33
37
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "tlui-cmt-mention-list__name", children: [
|
|
34
38
|
member.name,
|
|
35
|
-
member.you && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tlui-cmt-mention-list__you", children: `(${msg(
|
|
39
|
+
member.you && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tlui-cmt-mention-list__you", children: `(${msg(messages.commentsMentionYou)})` })
|
|
36
40
|
] }),
|
|
37
41
|
member.secondary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tlui-cmt-mention-list__secondary", children: member.secondary })
|
|
38
42
|
] })
|
|
@@ -41,7 +45,7 @@ function DefaultMemberRow({ member }) {
|
|
|
41
45
|
const MentionList = (0, import_react.forwardRef)(function MentionList2({ members, activeIndex = 0, onSelect, emptyLabel, renderMember }, ref) {
|
|
42
46
|
const msg = (0, import_tldraw.useTranslation)();
|
|
43
47
|
if (members.length === 0) {
|
|
44
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: "tlui-cmt-mention-list tlui-cmt-mention-list--empty", children: emptyLabel ?? msg(
|
|
48
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: "tlui-cmt-mention-list tlui-cmt-mention-list--empty", children: emptyLabel ?? msg(messages.commentsMentionNoMatches) });
|
|
45
49
|
}
|
|
46
50
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: "tlui-cmt-mention-list", role: "listbox", children: members.map((member, i) => {
|
|
47
51
|
const active = i === activeIndex;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/mention-list.tsx"],
|
|
4
|
-
"sourcesContent": ["import { ReactNode, forwardRef } from 'react'\nimport { useTranslation } from 'tldraw'\nimport { Avatar } from './avatar'\nimport { CommentAuthor } from './comment-author'\n\n/** A person the composer's \\@-mention picker can offer: a {@link CommentAuthor} plus its id and\n * picker-only display fields. @public */\nexport interface MentionMember extends CommentAuthor {\n\tid: string\n\t/** A secondary line under the name \u2014 e.g. an email or handle. Omit for a single-line row. */\n\tsecondary?: string\n\t/** Marks the current user; shown as a \"(You)\" suffix after the name. */\n\tyou?: boolean\n\t/** Hosts may carry extra fields; a custom `renderMember` can read them. */\n\t[key: string]: unknown\n}\n\n/** @public */\nexport interface MentionListProps {\n\t/** Members to choose from \u2014 already resolved for the current query by the host. */\n\tmembers: MentionMember[]\n\t/** Index of the highlighted row, driven by the composer's keyboard navigation. */\n\tactiveIndex?: number\n\t/** Called when a member is chosen (click, or Enter on the active row). */\n\tonSelect?(member: MentionMember): void\n\t/** Shown when no member matches the query. Defaults to a translated \"No matches\". */\n\temptyLabel?: string\n\t/** Override a row's content (inside the selectable button). Defaults to avatar + name (+ secondary). */\n\trenderMember?(member: MentionMember): ReactNode\n}\n\n/** The default row content: avatar, name (with a \"(You)\" marker), and an optional secondary line. */\nfunction DefaultMemberRow({ member }: { member: MentionMember }) {\n\tconst msg = useTranslation()\n\treturn (\n\t\t<>\n\t\t\t<Avatar author={member} />\n\t\t\t<span className=\"tlui-cmt-mention-list__text\">\n\t\t\t\t<span className=\"tlui-cmt-mention-list__name\">\n\t\t\t\t\t{member.name}\n\t\t\t\t\t{member.you && (\n\t\t\t\t\t\t<span className=\"tlui-cmt-mention-list__you\">{`(${msg(
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { ReactNode, forwardRef } from 'react'\nimport { defineMessages, useTranslation } from 'tldraw'\nimport { Avatar } from './avatar'\nimport { CommentAuthor } from './comment-author'\n\nconst messages = defineMessages({\n\tcommentsMentionNoMatches: { id: 'comments.mention-no-matches', defaultMessage: 'No matches' },\n\tcommentsMentionYou: { id: 'comments.mention-you', defaultMessage: 'You' },\n})\n\n/** A person the composer's \\@-mention picker can offer: a {@link CommentAuthor} plus its id and\n * picker-only display fields. @public */\nexport interface MentionMember extends CommentAuthor {\n\tid: string\n\t/** A secondary line under the name \u2014 e.g. an email or handle. Omit for a single-line row. */\n\tsecondary?: string\n\t/** Marks the current user; shown as a \"(You)\" suffix after the name. */\n\tyou?: boolean\n\t/** Hosts may carry extra fields; a custom `renderMember` can read them. */\n\t[key: string]: unknown\n}\n\n/** @public */\nexport interface MentionListProps {\n\t/** Members to choose from \u2014 already resolved for the current query by the host. */\n\tmembers: MentionMember[]\n\t/** Index of the highlighted row, driven by the composer's keyboard navigation. */\n\tactiveIndex?: number\n\t/** Called when a member is chosen (click, or Enter on the active row). */\n\tonSelect?(member: MentionMember): void\n\t/** Shown when no member matches the query. Defaults to a translated \"No matches\". */\n\temptyLabel?: string\n\t/** Override a row's content (inside the selectable button). Defaults to avatar + name (+ secondary). */\n\trenderMember?(member: MentionMember): ReactNode\n}\n\n/** The default row content: avatar, name (with a \"(You)\" marker), and an optional secondary line. */\nfunction DefaultMemberRow({ member }: { member: MentionMember }) {\n\tconst msg = useTranslation()\n\treturn (\n\t\t<>\n\t\t\t<Avatar author={member} />\n\t\t\t<span className=\"tlui-cmt-mention-list__text\">\n\t\t\t\t<span className=\"tlui-cmt-mention-list__name\">\n\t\t\t\t\t{member.name}\n\t\t\t\t\t{member.you && (\n\t\t\t\t\t\t<span className=\"tlui-cmt-mention-list__you\">{`(${msg(messages.commentsMentionYou)})`}</span>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t\t{member.secondary && (\n\t\t\t\t\t<span className=\"tlui-cmt-mention-list__secondary\">{member.secondary}</span>\n\t\t\t\t)}\n\t\t\t</span>\n\t\t</>\n\t)\n}\n\n/**\n * The \\@-mention member picker: a popover list of people to mention, shown as the user types after\n * `@`. Presentational \u2014 the composer's suggestion plugin owns resolution, keyboard navigation, and\n * placement, and drives this with the host-resolved `members` and the highlighted `activeIndex`.\n * @public @react\n */\nexport const MentionList = forwardRef<HTMLDivElement, MentionListProps>(function MentionList(\n\t{ members, activeIndex = 0, onSelect, emptyLabel, renderMember },\n\tref\n) {\n\tconst msg = useTranslation()\n\tif (members.length === 0) {\n\t\treturn (\n\t\t\t<div ref={ref} className=\"tlui-cmt-mention-list tlui-cmt-mention-list--empty\">\n\t\t\t\t{emptyLabel ?? msg(messages.commentsMentionNoMatches)}\n\t\t\t</div>\n\t\t)\n\t}\n\treturn (\n\t\t<div ref={ref} className=\"tlui-cmt-mention-list\" role=\"listbox\">\n\t\t\t{members.map((member, i) => {\n\t\t\t\tconst active = i === activeIndex\n\t\t\t\treturn (\n\t\t\t\t\t<button\n\t\t\t\t\t\tkey={member.id}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\taria-selected={active}\n\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\tactive\n\t\t\t\t\t\t\t\t? 'tlui-cmt-mention-list__item tlui-cmt-mention-list__item--active'\n\t\t\t\t\t\t\t\t: 'tlui-cmt-mention-list__item'\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// Keep the composer focused on a row press: it's portaled outside the editor, so a\n\t\t\t\t\t\t// bare mousedown would blur the composer \u2014 which now dismisses the picker \u2014 before\n\t\t\t\t\t\t// the click could select. Selection runs on click; focus stays put.\n\t\t\t\t\t\tonMouseDown={(e) => e.preventDefault()}\n\t\t\t\t\t\tonClick={() => onSelect?.(member)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderMember ? renderMember(member) : <DefaultMemberRow member={member} />}\n\t\t\t\t\t</button>\n\t\t\t\t)\n\t\t\t})}\n\t\t</div>\n\t)\n})\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCE;AAxCF,mBAAsC;AACtC,oBAA+C;AAC/C,oBAAuB;AAGvB,MAAM,eAAW,8BAAe;AAAA,EAC/B,0BAA0B,EAAE,IAAI,+BAA+B,gBAAgB,aAAa;AAAA,EAC5F,oBAAoB,EAAE,IAAI,wBAAwB,gBAAgB,MAAM;AACzE,CAAC;AA6BD,SAAS,iBAAiB,EAAE,OAAO,GAA8B;AAChE,QAAM,UAAM,8BAAe;AAC3B,SACC,4EACC;AAAA,gDAAC,wBAAO,QAAQ,QAAQ;AAAA,IACxB,6CAAC,UAAK,WAAU,+BACf;AAAA,mDAAC,UAAK,WAAU,+BACd;AAAA,eAAO;AAAA,QACP,OAAO,OACP,4CAAC,UAAK,WAAU,8BAA8B,cAAI,IAAI,SAAS,kBAAkB,CAAC,KAAI;AAAA,SAExF;AAAA,MACC,OAAO,aACP,4CAAC,UAAK,WAAU,oCAAoC,iBAAO,WAAU;AAAA,OAEvE;AAAA,KACD;AAEF;AAQO,MAAM,kBAAc,yBAA6C,SAASA,aAChF,EAAE,SAAS,cAAc,GAAG,UAAU,YAAY,aAAa,GAC/D,KACC;AACD,QAAM,UAAM,8BAAe;AAC3B,MAAI,QAAQ,WAAW,GAAG;AACzB,WACC,4CAAC,SAAI,KAAU,WAAU,sDACvB,wBAAc,IAAI,SAAS,wBAAwB,GACrD;AAAA,EAEF;AACA,SACC,4CAAC,SAAI,KAAU,WAAU,yBAAwB,MAAK,WACpD,kBAAQ,IAAI,CAAC,QAAQ,MAAM;AAC3B,UAAM,SAAS,MAAM;AACrB,WACC;AAAA,MAAC;AAAA;AAAA,QAEA,MAAK;AAAA,QACL,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,WACC,SACG,oEACA;AAAA,QAKJ,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,QACrC,SAAS,MAAM,WAAW,MAAM;AAAA,QAE/B,yBAAe,aAAa,MAAM,IAAI,4CAAC,oBAAiB,QAAgB;AAAA;AAAA,MAfpE,OAAO;AAAA,IAgBb;AAAA,EAEF,CAAC,GACF;AAEF,CAAC;",
|
|
6
6
|
"names": ["MentionList"]
|
|
7
7
|
}
|
package/dist-esm/index.mjs
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
|
-
import { useTranslation } from "tldraw";
|
|
3
|
+
import { defineMessages, useTranslation } from "tldraw";
|
|
4
4
|
import { Avatar } from "./avatar.mjs";
|
|
5
|
+
const messages = defineMessages({
|
|
6
|
+
commentsMentionNoMatches: { id: "comments.mention-no-matches", defaultMessage: "No matches" },
|
|
7
|
+
commentsMentionYou: { id: "comments.mention-you", defaultMessage: "You" }
|
|
8
|
+
});
|
|
5
9
|
function DefaultMemberRow({ member }) {
|
|
6
10
|
const msg = useTranslation();
|
|
7
11
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -9,7 +13,7 @@ function DefaultMemberRow({ member }) {
|
|
|
9
13
|
/* @__PURE__ */ jsxs("span", { className: "tlui-cmt-mention-list__text", children: [
|
|
10
14
|
/* @__PURE__ */ jsxs("span", { className: "tlui-cmt-mention-list__name", children: [
|
|
11
15
|
member.name,
|
|
12
|
-
member.you && /* @__PURE__ */ jsx("span", { className: "tlui-cmt-mention-list__you", children: `(${msg(
|
|
16
|
+
member.you && /* @__PURE__ */ jsx("span", { className: "tlui-cmt-mention-list__you", children: `(${msg(messages.commentsMentionYou)})` })
|
|
13
17
|
] }),
|
|
14
18
|
member.secondary && /* @__PURE__ */ jsx("span", { className: "tlui-cmt-mention-list__secondary", children: member.secondary })
|
|
15
19
|
] })
|
|
@@ -18,7 +22,7 @@ function DefaultMemberRow({ member }) {
|
|
|
18
22
|
const MentionList = forwardRef(function MentionList2({ members, activeIndex = 0, onSelect, emptyLabel, renderMember }, ref) {
|
|
19
23
|
const msg = useTranslation();
|
|
20
24
|
if (members.length === 0) {
|
|
21
|
-
return /* @__PURE__ */ jsx("div", { ref, className: "tlui-cmt-mention-list tlui-cmt-mention-list--empty", children: emptyLabel ?? msg(
|
|
25
|
+
return /* @__PURE__ */ jsx("div", { ref, className: "tlui-cmt-mention-list tlui-cmt-mention-list--empty", children: emptyLabel ?? msg(messages.commentsMentionNoMatches) });
|
|
22
26
|
}
|
|
23
27
|
return /* @__PURE__ */ jsx("div", { ref, className: "tlui-cmt-mention-list", role: "listbox", children: members.map((member, i) => {
|
|
24
28
|
const active = i === activeIndex;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/mention-list.tsx"],
|
|
4
|
-
"sourcesContent": ["import { ReactNode, forwardRef } from 'react'\nimport { useTranslation } from 'tldraw'\nimport { Avatar } from './avatar'\nimport { CommentAuthor } from './comment-author'\n\n/** A person the composer's \\@-mention picker can offer: a {@link CommentAuthor} plus its id and\n * picker-only display fields. @public */\nexport interface MentionMember extends CommentAuthor {\n\tid: string\n\t/** A secondary line under the name \u2014 e.g. an email or handle. Omit for a single-line row. */\n\tsecondary?: string\n\t/** Marks the current user; shown as a \"(You)\" suffix after the name. */\n\tyou?: boolean\n\t/** Hosts may carry extra fields; a custom `renderMember` can read them. */\n\t[key: string]: unknown\n}\n\n/** @public */\nexport interface MentionListProps {\n\t/** Members to choose from \u2014 already resolved for the current query by the host. */\n\tmembers: MentionMember[]\n\t/** Index of the highlighted row, driven by the composer's keyboard navigation. */\n\tactiveIndex?: number\n\t/** Called when a member is chosen (click, or Enter on the active row). */\n\tonSelect?(member: MentionMember): void\n\t/** Shown when no member matches the query. Defaults to a translated \"No matches\". */\n\temptyLabel?: string\n\t/** Override a row's content (inside the selectable button). Defaults to avatar + name (+ secondary). */\n\trenderMember?(member: MentionMember): ReactNode\n}\n\n/** The default row content: avatar, name (with a \"(You)\" marker), and an optional secondary line. */\nfunction DefaultMemberRow({ member }: { member: MentionMember }) {\n\tconst msg = useTranslation()\n\treturn (\n\t\t<>\n\t\t\t<Avatar author={member} />\n\t\t\t<span className=\"tlui-cmt-mention-list__text\">\n\t\t\t\t<span className=\"tlui-cmt-mention-list__name\">\n\t\t\t\t\t{member.name}\n\t\t\t\t\t{member.you && (\n\t\t\t\t\t\t<span className=\"tlui-cmt-mention-list__you\">{`(${msg(
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { ReactNode, forwardRef } from 'react'\nimport { defineMessages, useTranslation } from 'tldraw'\nimport { Avatar } from './avatar'\nimport { CommentAuthor } from './comment-author'\n\nconst messages = defineMessages({\n\tcommentsMentionNoMatches: { id: 'comments.mention-no-matches', defaultMessage: 'No matches' },\n\tcommentsMentionYou: { id: 'comments.mention-you', defaultMessage: 'You' },\n})\n\n/** A person the composer's \\@-mention picker can offer: a {@link CommentAuthor} plus its id and\n * picker-only display fields. @public */\nexport interface MentionMember extends CommentAuthor {\n\tid: string\n\t/** A secondary line under the name \u2014 e.g. an email or handle. Omit for a single-line row. */\n\tsecondary?: string\n\t/** Marks the current user; shown as a \"(You)\" suffix after the name. */\n\tyou?: boolean\n\t/** Hosts may carry extra fields; a custom `renderMember` can read them. */\n\t[key: string]: unknown\n}\n\n/** @public */\nexport interface MentionListProps {\n\t/** Members to choose from \u2014 already resolved for the current query by the host. */\n\tmembers: MentionMember[]\n\t/** Index of the highlighted row, driven by the composer's keyboard navigation. */\n\tactiveIndex?: number\n\t/** Called when a member is chosen (click, or Enter on the active row). */\n\tonSelect?(member: MentionMember): void\n\t/** Shown when no member matches the query. Defaults to a translated \"No matches\". */\n\temptyLabel?: string\n\t/** Override a row's content (inside the selectable button). Defaults to avatar + name (+ secondary). */\n\trenderMember?(member: MentionMember): ReactNode\n}\n\n/** The default row content: avatar, name (with a \"(You)\" marker), and an optional secondary line. */\nfunction DefaultMemberRow({ member }: { member: MentionMember }) {\n\tconst msg = useTranslation()\n\treturn (\n\t\t<>\n\t\t\t<Avatar author={member} />\n\t\t\t<span className=\"tlui-cmt-mention-list__text\">\n\t\t\t\t<span className=\"tlui-cmt-mention-list__name\">\n\t\t\t\t\t{member.name}\n\t\t\t\t\t{member.you && (\n\t\t\t\t\t\t<span className=\"tlui-cmt-mention-list__you\">{`(${msg(messages.commentsMentionYou)})`}</span>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t\t{member.secondary && (\n\t\t\t\t\t<span className=\"tlui-cmt-mention-list__secondary\">{member.secondary}</span>\n\t\t\t\t)}\n\t\t\t</span>\n\t\t</>\n\t)\n}\n\n/**\n * The \\@-mention member picker: a popover list of people to mention, shown as the user types after\n * `@`. Presentational \u2014 the composer's suggestion plugin owns resolution, keyboard navigation, and\n * placement, and drives this with the host-resolved `members` and the highlighted `activeIndex`.\n * @public @react\n */\nexport const MentionList = forwardRef<HTMLDivElement, MentionListProps>(function MentionList(\n\t{ members, activeIndex = 0, onSelect, emptyLabel, renderMember },\n\tref\n) {\n\tconst msg = useTranslation()\n\tif (members.length === 0) {\n\t\treturn (\n\t\t\t<div ref={ref} className=\"tlui-cmt-mention-list tlui-cmt-mention-list--empty\">\n\t\t\t\t{emptyLabel ?? msg(messages.commentsMentionNoMatches)}\n\t\t\t</div>\n\t\t)\n\t}\n\treturn (\n\t\t<div ref={ref} className=\"tlui-cmt-mention-list\" role=\"listbox\">\n\t\t\t{members.map((member, i) => {\n\t\t\t\tconst active = i === activeIndex\n\t\t\t\treturn (\n\t\t\t\t\t<button\n\t\t\t\t\t\tkey={member.id}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\taria-selected={active}\n\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\tactive\n\t\t\t\t\t\t\t\t? 'tlui-cmt-mention-list__item tlui-cmt-mention-list__item--active'\n\t\t\t\t\t\t\t\t: 'tlui-cmt-mention-list__item'\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// Keep the composer focused on a row press: it's portaled outside the editor, so a\n\t\t\t\t\t\t// bare mousedown would blur the composer \u2014 which now dismisses the picker \u2014 before\n\t\t\t\t\t\t// the click could select. Selection runs on click; focus stays put.\n\t\t\t\t\t\tonMouseDown={(e) => e.preventDefault()}\n\t\t\t\t\t\tonClick={() => onSelect?.(member)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderMember ? renderMember(member) : <DefaultMemberRow member={member} />}\n\t\t\t\t\t</button>\n\t\t\t\t)\n\t\t\t})}\n\t\t</div>\n\t)\n})\n"],
|
|
5
|
+
"mappings": "AAwCE,mBACC,KAEC,YAHF;AAxCF,SAAoB,kBAAkB;AACtC,SAAS,gBAAgB,sBAAsB;AAC/C,SAAS,cAAc;AAGvB,MAAM,WAAW,eAAe;AAAA,EAC/B,0BAA0B,EAAE,IAAI,+BAA+B,gBAAgB,aAAa;AAAA,EAC5F,oBAAoB,EAAE,IAAI,wBAAwB,gBAAgB,MAAM;AACzE,CAAC;AA6BD,SAAS,iBAAiB,EAAE,OAAO,GAA8B;AAChE,QAAM,MAAM,eAAe;AAC3B,SACC,iCACC;AAAA,wBAAC,UAAO,QAAQ,QAAQ;AAAA,IACxB,qBAAC,UAAK,WAAU,+BACf;AAAA,2BAAC,UAAK,WAAU,+BACd;AAAA,eAAO;AAAA,QACP,OAAO,OACP,oBAAC,UAAK,WAAU,8BAA8B,cAAI,IAAI,SAAS,kBAAkB,CAAC,KAAI;AAAA,SAExF;AAAA,MACC,OAAO,aACP,oBAAC,UAAK,WAAU,oCAAoC,iBAAO,WAAU;AAAA,OAEvE;AAAA,KACD;AAEF;AAQO,MAAM,cAAc,WAA6C,SAASA,aAChF,EAAE,SAAS,cAAc,GAAG,UAAU,YAAY,aAAa,GAC/D,KACC;AACD,QAAM,MAAM,eAAe;AAC3B,MAAI,QAAQ,WAAW,GAAG;AACzB,WACC,oBAAC,SAAI,KAAU,WAAU,sDACvB,wBAAc,IAAI,SAAS,wBAAwB,GACrD;AAAA,EAEF;AACA,SACC,oBAAC,SAAI,KAAU,WAAU,yBAAwB,MAAK,WACpD,kBAAQ,IAAI,CAAC,QAAQ,MAAM;AAC3B,UAAM,SAAS,MAAM;AACrB,WACC;AAAA,MAAC;AAAA;AAAA,QAEA,MAAK;AAAA,QACL,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,WACC,SACG,oEACA;AAAA,QAKJ,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,QACrC,SAAS,MAAM,WAAW,MAAM;AAAA,QAE/B,yBAAe,aAAa,MAAM,IAAI,oBAAC,oBAAiB,QAAgB;AAAA;AAAA,MAfpE,OAAO;AAAA,IAgBb;AAAA,EAEF,CAAC,GACF;AAEF,CAAC;",
|
|
6
6
|
"names": ["MentionList"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tldraw/mentions",
|
|
3
3
|
"description": "tldraw @-mention picker and TipTap node, shared by commenting and shape rich text.",
|
|
4
|
-
"version": "5.6.0-next.
|
|
4
|
+
"version": "5.6.0-next.9984746dba04",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "tldraw Inc.",
|
|
7
7
|
"email": "hello@tldraw.com"
|
|
@@ -51,8 +51,8 @@
|
|
|
51
51
|
"@tiptap/pm": "^3.12.1",
|
|
52
52
|
"@tiptap/react": "^3.12.1",
|
|
53
53
|
"@tiptap/suggestion": "3.13.0",
|
|
54
|
-
"@tldraw/utils": "5.6.0-next.
|
|
55
|
-
"tldraw": "5.6.0-next.
|
|
54
|
+
"@tldraw/utils": "5.6.0-next.9984746dba04",
|
|
55
|
+
"tldraw": "5.6.0-next.9984746dba04"
|
|
56
56
|
},
|
|
57
57
|
"module": "dist-esm/index.mjs",
|
|
58
58
|
"source": "src/index.ts",
|
package/src/mention-list.tsx
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import { ReactNode, forwardRef } from 'react'
|
|
2
|
-
import { useTranslation } from 'tldraw'
|
|
2
|
+
import { defineMessages, useTranslation } from 'tldraw'
|
|
3
3
|
import { Avatar } from './avatar'
|
|
4
4
|
import { CommentAuthor } from './comment-author'
|
|
5
5
|
|
|
6
|
+
const messages = defineMessages({
|
|
7
|
+
commentsMentionNoMatches: { id: 'comments.mention-no-matches', defaultMessage: 'No matches' },
|
|
8
|
+
commentsMentionYou: { id: 'comments.mention-you', defaultMessage: 'You' },
|
|
9
|
+
})
|
|
10
|
+
|
|
6
11
|
/** A person the composer's \@-mention picker can offer: a {@link CommentAuthor} plus its id and
|
|
7
12
|
* picker-only display fields. @public */
|
|
8
13
|
export interface MentionMember extends CommentAuthor {
|
|
@@ -39,7 +44,7 @@ function DefaultMemberRow({ member }: { member: MentionMember }) {
|
|
|
39
44
|
<span className="tlui-cmt-mention-list__name">
|
|
40
45
|
{member.name}
|
|
41
46
|
{member.you && (
|
|
42
|
-
<span className="tlui-cmt-mention-list__you">{`(${msg(
|
|
47
|
+
<span className="tlui-cmt-mention-list__you">{`(${msg(messages.commentsMentionYou)})`}</span>
|
|
43
48
|
)}
|
|
44
49
|
</span>
|
|
45
50
|
{member.secondary && (
|
|
@@ -64,7 +69,7 @@ export const MentionList = forwardRef<HTMLDivElement, MentionListProps>(function
|
|
|
64
69
|
if (members.length === 0) {
|
|
65
70
|
return (
|
|
66
71
|
<div ref={ref} className="tlui-cmt-mention-list tlui-cmt-mention-list--empty">
|
|
67
|
-
{emptyLabel ?? msg(
|
|
72
|
+
{emptyLabel ?? msg(messages.commentsMentionNoMatches)}
|
|
68
73
|
</div>
|
|
69
74
|
)
|
|
70
75
|
}
|