@tldraw/commenting 0.0.0-bootstrap → 5.3.0-canary.04044ed9e96d

package/dist-cjs/index.js

@@ -18,109 +18,133 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var index_exports = {};
 __export(index_exports, {
-  Avatar: () => import_avatar.Avatar,
+  Avatar: () => import_mentions.Avatar,
   Byline: () => import_byline.Byline,
   CanvasComments: () => import_comments_overlay.CanvasComments,
   CanvasCommentsSidebar: () => import_comments_sidebar.CanvasCommentsSidebar,
   CommentBody: () => import_comment_body.CommentBody,
   CommentCard: () => import_comment_card.CommentCard,
   CommentComposer: () => import_comment_composer.CommentComposer,
+  CommentListItem: () => import_comments_list.CommentListItem,
   CommentPin: () => import_comment_pin.CommentPin,
-  CommentText: () => import_comment_text.CommentText,
+  CommentReactionPicker: () => import_comment_reactions.CommentReactionPicker,
+  CommentReactions: () => import_comment_reactions.CommentReactions,
   CommentThread: () => import_comment_thread.CommentThread,
   CommentTool: () => import_comment_tool.CommentTool,
   CommentsFilterMenu: () => import_comments_filter_menu.CommentsFilterMenu,
   CommentsList: () => import_comments_list.CommentsList,
   CommentsMenuItem: () => import_comments_menu_item.CommentsMenuItem,
   CommentsOverflowMenu: () => import_comments_overflow_menu.CommentsOverflowMenu,
+  CommentsVisibilityToggle: () => import_comments_visibility_toggle.CommentsVisibilityToggle,
   CountBadge: () => import_count_badge.CountBadge,
-  DEFAULT_IMPRECISE_SHAPE_ANCHOR: () => import_thread_state.DEFAULT_IMPRECISE_SHAPE_ANCHOR,
-  DEFAULT_REGION_COMMENT_OPTIONS: () => import_region_options.DEFAULT_REGION_COMMENT_OPTIONS,
+  DEFAULT_REACTION_EMOJI: () => import_emoji_picker.DEFAULT_REACTION_EMOJI,
   DEFAULT_SIDEBAR_FILTERS: () => import_sidebar_filters.DEFAULT_SIDEBAR_FILTERS,
+  DefaultReactionTooltip: () => import_reaction.DefaultReactionTooltip,
+  DefaultReactionTooltipContent: () => import_reaction.DefaultReactionTooltipContent,
+  EmojiPicker: () => import_emoji_picker.EmojiPicker,
   EmptyState: () => import_empty_state.EmptyState,
-  Mention: () => import_mention.Mention,
-  MentionList: () => import_mention_list.MentionList,
+  Mention: () => import_mentions.Mention,
+  MentionList: () => import_mentions.MentionList,
   Reaction: () => import_reaction.Reaction,
+  ReactionPicker: () => import_reaction_picker.ReactionPicker,
   Reactions: () => import_reactions.Reactions,
   SendButton: () => import_send_button.SendButton,
   anchorPagePoint: () => import_thread_state.anchorPagePoint,
-  collectClusterLeaves: () => import_cluster_input.collectClusterLeaves,
   commentToolOverrides: () => import_comment_tool.commentToolOverrides,
   commentTools: () => import_comment_tool.commentTools,
   commentsHidden: () => import_state.commentsHidden,
-  commitCommentMutation: () => import_state.commitCommentMutation,
-  computeClusterTable: () => import_computeClusterTable.computeClusterTable,
-  createClusterRuntime: () => import_runtime.createClusterRuntime,
-  createMentionSuggestion: () => import_mention_suggestion.createMentionSuggestion,
+  commentsSidebarOpen: () => import_state.commentsSidebarOpen,
+  createMentionSuggestion: () => import_mentions.createMentionSuggestion,
+  defaultCanModifyComment: () => import_options.defaultCanModifyComment,
   defaultCommentingOptions: () => import_options.defaultCommentingOptions,
-  filterMentionMembers: () => import_mention_suggestion.filterMentionMembers,
+  defaultRenderReaction: () => import_reaction.defaultRenderReaction,
+  deleteComment: () => import_comment_mutations.deleteComment,
+  deleteThread: () => import_comment_mutations.deleteThread,
+  editComment: () => import_comment_mutations.editComment,
+  filterMentionMembers: () => import_mentions.filterMentionMembers,
   focusThread: () => import_thread_state.focusThread,
+  formatFullDateTime: () => import_format_time.formatFullDateTime,
   formatRelativeTime: () => import_format_time.formatRelativeTime,
+  getCanComment: () => import_options.getCanComment,
+  getCanModifyComment: () => import_options.getCanModifyComment,
+  getCommentReactions: () => import_comment_store.getCommentReactions,
   getCommentRecord: () => import_comment_store.getCommentRecord,
   getCommentThreads: () => import_comment_store.getCommentThreads,
   getCommentingOptions: () => import_options.getCommentingOptions,
   getComments: () => import_comment_store.getComments,
+  getLiveCommentThreads: () => import_comment_store.getLiveCommentThreads,
+  getLiveComments: () => import_comment_store.getLiveComments,
+  getRevealThreadPending: () => import_state.getRevealThreadPending,
+  isAllowedReactionEmoji: () => import_emoji_picker.isAllowedReactionEmoji,
+  isOpenInNewTabClick: () => import_comments_list.isOpenInNewTabClick,
   openThreadId: () => import_state.openThreadId,
-  pendingComment: () => import_state.pendingComment,
-  putCommentRecords: () => import_comment_store.putCommentRecords,
-  removeCommentRecords: () => import_comment_store.removeCommentRecords,
-  renderMarkdown: () => import_render_markdown.renderMarkdown,
+  putCommentRecords: () => import_comment_mutations.putCommentRecords,
+  registerCommentAnchorLifecycle: () => import_anchor_lifecycle.registerCommentAnchorLifecycle,
+  removeCommentRecords: () => import_comment_mutations.removeCommentRecords,
+  reopenThread: () => import_comment_mutations.reopenThread,
+  resolveThread: () => import_comment_mutations.resolveThread,
+  revealThread: () => import_state.revealThread,
   richTextToPlaintext: () => import_rich_text.richTextToPlaintext,
   shapeAnchorAt: () => import_thread_state.shapeAnchorAt,
   sidebarFilters: () => import_state.sidebarFilters,
+  sortSidebarRows: () => import_comments_sidebar.sortSidebarRows,
+  summarizeReactions: () => import_comment_reactions.summarizeReactions,
+  toggleCommentReaction: () => import_comment_reactions.toggleCommentReaction,
   toggleCommentsHidden: () => import_state.toggleCommentsHidden,
+  toggleCommentsSidebar: () => import_state.toggleCommentsSidebar,
+  useCanComment: () => import_options.useCanComment,
+  useCanModifyComment: () => import_options.useCanModifyComment,
+  useCommentReactions: () => import_comment_reactions.useCommentReactions,
   useCommentThreads: () => import_hooks.useCommentThreads,
   useCommentingEnabled: () => import_license.useCommentingEnabled,
   useCommentingOptions: () => import_options.useCommentingOptions,
   useComments: () => import_hooks.useComments,
   useCommentsHidden: () => import_state.useCommentsHidden,
+  useCommentsSidebarOpen: () => import_state.useCommentsSidebarOpen,
   useOpenThreadId: () => import_state.useOpenThreadId,
-  usePendingComment: () => import_state.usePendingComment,
+  useRevealThreadPending: () => import_state.useRevealThreadPending,
   useSidebarFilters: () => import_state.useSidebarFilters,
   useThreadComments: () => import_hooks.useThreadComments
 });
 module.exports = __toCommonJS(index_exports);
 var import_utils = require("@tldraw/utils");
-var import_avatar = require("./ui/avatar");
+var import_mentions = require("@tldraw/mentions");
 var import_byline = require("./ui/byline");
 var import_comment_card = require("./ui/comment-card");
 var import_comment_composer = require("./ui/comment-composer");
 var import_count_badge = require("./ui/count-badge");
 var import_comment_pin = require("./ui/comment-pin");
-var import_comment_text = require("./ui/comment-text");
 var import_comment_thread = require("./ui/comment-thread");
 var import_comments_list = require("./ui/comments-list");
 var import_empty_state = require("./ui/empty-state");
 var import_format_time = require("./ui/format-time");
-var import_mention = require("./ui/mention");
-var import_mention_list = require("./ui/mention-list");
-var import_mention_suggestion = require("./ui/mention-suggestion");
+var import_emoji_picker = require("./ui/emoji-picker");
 var import_reaction = require("./ui/reaction");
+var import_reaction_picker = require("./ui/reaction-picker");
 var import_reactions = require("./ui/reactions");
-var import_render_markdown = require("./ui/render-markdown");
 var import_send_button = require("./ui/send-button");
+var import_anchor_lifecycle = require("./canvas/anchor-lifecycle");
 var import_comment_body = require("./canvas/comment-body");
+var import_comment_mutations = require("./canvas/comment-mutations");
+var import_comment_reactions = require("./canvas/comment-reactions");
 var import_comment_tool = require("./canvas/comment-tool");
-var import_cluster_input = require("./canvas/cluster-input");
-var import_computeClusterTable = require("./clustering/computeClusterTable");
 var import_comment_store = require("./canvas/comment-store");
-var import_runtime = require("./clustering/runtime");
 var import_comments_filter_menu = require("./canvas/comments-filter-menu");
 var import_comments_menu_item = require("./canvas/comments-menu-item");
 var import_comments_overlay = require("./canvas/comments-overlay");
 var import_options = require("./canvas/options");
 var import_comments_overflow_menu = require("./canvas/comments-overflow-menu");
+var import_comments_visibility_toggle = require("./canvas/comments-visibility-toggle");
 var import_comments_sidebar = require("./canvas/comments-sidebar");
 var import_hooks = require("./canvas/hooks");
 var import_license = require("./canvas/license");
-var import_region_options = require("./canvas/region-options");
 var import_rich_text = require("./canvas/rich-text");
 var import_sidebar_filters = require("./canvas/sidebar-filters");
 var import_state = require("./canvas/state");
 var import_thread_state = require("./canvas/thread-state");
 (0, import_utils.registerTldrawLibraryVersion)(
   "@tldraw/commenting",
-  "0.0.0-bootstrap",
+  "5.3.0-canary.04044ed9e96d",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

package/dist-cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["import { registerTldrawLibraryVersion } from '@tldraw/utils'\n\n// Presentational commenting components. These are tldraw-independent and can be used to build\n// custom commenting UI.\nexport { Avatar, type AvatarProps } from './ui/avatar'\nexport { Byline, type BylineProps } from './ui/byline'\nexport { CommentCard, type CommentCardProps } from './ui/comment-card'\nexport { CommentComposer, type CommentComposerProps } from './ui/comment-composer'\nexport { CountBadge, type CountBadgeProps } from './ui/count-badge'\nexport { CommentPin, type CommentPinProps } from './ui/comment-pin'\nexport { CommentText, type CommentTextProps } from './ui/comment-text'\nexport { CommentThread, type CommentThreadProps } from './ui/comment-thread'\nexport { CommentsList, type CommentListItemProps, type CommentsListProps } from './ui/comments-list'\nexport { EmptyState, type EmptyStateProps } from './ui/empty-state'\nexport { formatRelativeTime } from './ui/format-time'\nexport { Mention, type MentionProps } from './ui/mention'\nexport { MentionList, type MentionListProps, type MentionMember } from './ui/mention-list'\nexport {\n\tcreateMentionSuggestion,\n\tfilterMentionMembers,\n\ttype MentionSuggestionOptions,\n} from './ui/mention-suggestion'\nexport { Reaction, type ReactionProps } from './ui/reaction'\nexport { Reactions } from './ui/reactions'\nexport { renderMarkdown } from './ui/render-markdown'\nexport { SendButton, type SendButtonProps } from './ui/send-button'\n\n// The tldraw-coupled commenting layer: the comment tool, reactive hooks over the comment\n// records, a rich-text body renderer, and a batteries-included <CanvasComments> overlay. Pairs\n// with the presentational components above.\nexport { CommentBody, type CommentBodyProps } from './canvas/comment-body'\nexport {\n\tCommentTool,\n\tcommentToolOverrides,\n\tcommentTools,\n\ttype PendingComment,\n} from './canvas/comment-tool'\nexport { collectClusterLeaves } from './canvas/cluster-input'\nexport { computeClusterTable } from './clustering/computeClusterTable'\nexport {\n\tgetCommentRecord,\n\tgetComments,\n\tgetCommentThreads,\n\tputCommentRecords,\n\tremoveCommentRecords,\n\ttype TLCommentRecord,\n} from './canvas/comment-store'\nexport { createClusterRuntime, type ClusterRuntime } from './clustering/runtime'\nexport type {\n\tClusterNode,\n\tClusterOptions,\n\tClusterTable,\n\tLeafInput,\n\tMergeEvent,\n} from './clustering/types'\nexport { CommentsFilterMenu, type CommentsFilterMenuProps } from './canvas/comments-filter-menu'\nexport { CommentsMenuItem } from './canvas/comments-menu-item'\nexport { CanvasComments, type CanvasCommentsProps } from './canvas/comments-overlay'\nexport {\n\ttype CommentingComponents,\n\ttype CommentingOptions,\n\tdefaultCommentingOptions,\n\tgetCommentingOptions,\n\tuseCommentingOptions,\n} from './canvas/options'\nexport { CommentsOverflowMenu } from './canvas/comments-overflow-menu'\nexport { CanvasCommentsSidebar, type CanvasCommentsSidebarProps } from './canvas/comments-sidebar'\nexport { useComments, useCommentThreads, useThreadComments } from './canvas/hooks'\nexport { useCommentingEnabled } from './canvas/license'\nexport { DEFAULT_REGION_COMMENT_OPTIONS, type RegionCommentOptions } from './canvas/region-options'\nexport { richTextToPlaintext } from './canvas/rich-text'\nexport { DEFAULT_SIDEBAR_FILTERS, type SidebarFilters } from './canvas/sidebar-filters'\nexport {\n\tcommentsHidden,\n\tcommitCommentMutation,\n\topenThreadId,\n\tpendingComment,\n\tsidebarFilters,\n\ttoggleCommentsHidden,\n\tuseCommentsHidden,\n\tuseOpenThreadId,\n\tusePendingComment,\n\tuseSidebarFilters,\n} from './canvas/state'\nexport {\n\tanchorPagePoint,\n\tDEFAULT_IMPRECISE_SHAPE_ANCHOR,\n\tfocusThread,\n\tshapeAnchorAt,\n} from './canvas/thread-state'\n\nregisterTldrawLibraryVersion(\n\t(globalThis as any).TLDRAW_LIBRARY_NAME,\n\t(globalThis as any).TLDRAW_LIBRARY_VERSION,\n\t(globalThis as any).TLDRAW_LIBRARY_MODULES\n)\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6C;AAI7C,oBAAyC;AACzC,oBAAyC;AACzC,0BAAmD;AACnD,8BAA2D;AAC3D,yBAAiD;AACjD,yBAAiD;AACjD,0BAAmD;AACnD,4BAAuD;AACvD,2BAAgF;AAChF,yBAAiD;AACjD,yBAAmC;AACnC,qBAA2C;AAC3C,0BAAuE;AACvE,gCAIO;AACP,sBAA6C;AAC7C,uBAA0B;AAC1B,6BAA+B;AAC/B,yBAAiD;AAKjD,0BAAmD;AACnD,0BAKO;AACP,2BAAqC;AACrC,iCAAoC;AACpC,2BAOO;AACP,qBAA0D;AAQ1D,kCAAiE;AACjE,gCAAiC;AACjC,8BAAyD;AACzD,qBAMO;AACP,oCAAqC;AACrC,8BAAuE;AACvE,mBAAkE;AAClE,qBAAqC;AACrC,4BAA0E;AAC1E,uBAAoC;AACpC,6BAA6D;AAC7D,mBAWO;AACP,0BAKO;AAAA,IAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AACF;",
+  "sourcesContent": ["import { registerTldrawLibraryVersion } from '@tldraw/utils'\n\n// Presentational commenting components. These are tldraw-independent and can be used to build\n// custom commenting UI. The mention picker, pill, and avatar are re-exported from @tldraw/mentions\n// so the commenting public API is unchanged.\nexport {\n\tAvatar,\n\ttype AvatarProps,\n\ttype CommentAuthor,\n\tcreateMentionSuggestion,\n\tfilterMentionMembers,\n\tMention,\n\tMentionList,\n\ttype MentionListProps,\n\ttype MentionMember,\n\ttype MentionProps,\n\ttype MentionSuggestionOptions,\n} from '@tldraw/mentions'\nexport { Byline, type BylineProps } from './ui/byline'\nexport { CommentCard, type CommentCardProps } from './ui/comment-card'\nexport { CommentComposer, type CommentComposerProps } from './ui/comment-composer'\nexport { CountBadge, type CountBadgeProps } from './ui/count-badge'\nexport { CommentPin, type CommentPinProps } from './ui/comment-pin'\nexport { CommentThread, type CommentThreadProps } from './ui/comment-thread'\nexport {\n\tCommentListItem,\n\tCommentsList,\n\tisOpenInNewTabClick,\n\ttype CommentListItemProps,\n\ttype CommentListItemRenderProps,\n\ttype CommentsListProps,\n} from './ui/comments-list'\nexport { EmptyState, type EmptyStateProps } from './ui/empty-state'\nexport { formatFullDateTime, formatRelativeTime } from './ui/format-time'\nexport {\n\tDEFAULT_REACTION_EMOJI,\n\tEmojiPicker,\n\ttype EmojiPickerProps,\n\tisAllowedReactionEmoji,\n} from './ui/emoji-picker'\nexport {\n\tReaction,\n\ttype ReactionProps,\n\ttype RenderReaction,\n\tdefaultRenderReaction,\n\tDefaultReactionTooltip,\n\tDefaultReactionTooltipContent,\n\ttype ReactionTooltipProps,\n} from './ui/reaction'\nexport { ReactionPicker, type ReactionPickerProps } from './ui/reaction-picker'\nexport {\n\tReactions,\n\ttype ReactionReactor,\n\ttype ReactionsProps,\n\ttype ReactionSummary,\n} from './ui/reactions'\nexport { SendButton, type SendButtonProps } from './ui/send-button'\n\n// The tldraw-coupled commenting layer: the comment tool, reactive hooks over the comment\n// records, a rich-text body renderer, and a batteries-included <CanvasComments> overlay. Pairs\n// with the presentational components above.\nexport { registerCommentAnchorLifecycle } from './canvas/anchor-lifecycle'\nexport { CommentBody, type CommentBodyProps } from './canvas/comment-body'\nexport {\n\tdeleteComment,\n\tdeleteThread,\n\teditComment,\n\tputCommentRecords,\n\tremoveCommentRecords,\n\treopenThread,\n\tresolveThread,\n} from './canvas/comment-mutations'\nexport {\n\tCommentReactionPicker,\n\ttype CommentReactionPickerProps,\n\tCommentReactions,\n\ttype CommentReactionsProps,\n\ttype ReactionSummaryInput,\n\tsummarizeReactions,\n\ttoggleCommentReaction,\n\tuseCommentReactions,\n} from './canvas/comment-reactions'\nexport { CommentTool, commentToolOverrides, commentTools } from './canvas/comment-tool'\nexport {\n\tgetCommentReactions,\n\tgetCommentRecord,\n\tgetComments,\n\tgetCommentThreads,\n\tgetLiveComments,\n\tgetLiveCommentThreads,\n\ttype TLCommentRecord,\n} from './canvas/comment-store'\nexport { type CommentingContext } from './canvas/context'\nexport { CommentsFilterMenu, type CommentsFilterMenuProps } from './canvas/comments-filter-menu'\nexport { CommentsMenuItem } from './canvas/comments-menu-item'\nexport { CanvasComments, type CanvasCommentsProps } from './canvas/comments-overlay'\nexport {\n\ttype CommentingComponents,\n\ttype CommentingOptions,\n\ttype CommentModification,\n\ttype CommentModificationContext,\n\tdefaultCanModifyComment,\n\tdefaultCommentingOptions,\n\tgetCanComment,\n\tgetCanModifyComment,\n\tgetCommentingOptions,\n\ttype ShapeCommentPrecisionContext,\n\tuseCanComment,\n\tuseCanModifyComment,\n\tuseCommentingOptions,\n} from './canvas/options'\nexport { CommentsOverflowMenu } from './canvas/comments-overflow-menu'\nexport { CommentsVisibilityToggle } from './canvas/comments-visibility-toggle'\nexport {\n\tCanvasCommentsSidebar,\n\tsortSidebarRows,\n\ttype CanvasCommentsSidebarProps,\n\ttype SidebarRow,\n} from './canvas/comments-sidebar'\nexport { useComments, useCommentThreads, useThreadComments } from './canvas/hooks'\nexport { useCommentingEnabled } from './canvas/license'\nexport { richTextToPlaintext } from './canvas/rich-text'\nexport { DEFAULT_SIDEBAR_FILTERS, type SidebarFilters } from './canvas/sidebar-filters'\nexport {\n\tcommentsHidden,\n\tcommentsSidebarOpen,\n\tgetRevealThreadPending,\n\topenThreadId,\n\trevealThread,\n\tsidebarFilters,\n\ttoggleCommentsHidden,\n\ttoggleCommentsSidebar,\n\tuseCommentsHidden,\n\tuseCommentsSidebarOpen,\n\tuseOpenThreadId,\n\tuseRevealThreadPending,\n\tuseSidebarFilters,\n} from './canvas/state'\nexport { anchorPagePoint, focusThread, shapeAnchorAt } from './canvas/thread-state'\n\nregisterTldrawLibraryVersion(\n\t(globalThis as any).TLDRAW_LIBRARY_NAME,\n\t(globalThis as any).TLDRAW_LIBRARY_VERSION,\n\t(globalThis as any).TLDRAW_LIBRARY_MODULES\n)\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6C;AAK7C,sBAYO;AACP,oBAAyC;AACzC,0BAAmD;AACnD,8BAA2D;AAC3D,yBAAiD;AACjD,yBAAiD;AACjD,4BAAuD;AACvD,2BAOO;AACP,yBAAiD;AACjD,yBAAuD;AACvD,0BAKO;AACP,sBAQO;AACP,6BAAyD;AACzD,uBAKO;AACP,yBAAiD;AAKjD,8BAA+C;AAC/C,0BAAmD;AACnD,+BAQO;AACP,+BASO;AACP,0BAAgE;AAChE,2BAQO;AAEP,kCAAiE;AACjE,gCAAiC;AACjC,8BAAyD;AACzD,qBAcO;AACP,oCAAqC;AACrC,wCAAyC;AACzC,8BAKO;AACP,mBAAkE;AAClE,qBAAqC;AACrC,uBAAoC;AACpC,6BAA6D;AAC7D,mBAcO;AACP,0BAA4D;AAAA,IAE5D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AACF;",
   "names": []
 }

package/dist-cjs/ui/byline.js

@@ -22,14 +22,18 @@ __export(byline_exports, {
 });
 module.exports = __toCommonJS(byline_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_mentions = require("@tldraw/mentions");
+var import_tldraw = require("tldraw");
 var import_format_time = require("./format-time");
 function Byline({ author, date, edited }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-head", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmt-author", children: author }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "cmt-time", children: [
-      (0, import_format_time.formatRelativeTime)(date),
-      edited && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmt-edited", children: " \xB7 edited" })
-    ] })
+  const { locale } = (0, import_tldraw.useCurrentTranslation)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-cmt-head", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mentions.Avatar, { author }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tlui-cmt-author", children: author.name }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tldraw.TldrawUiTooltip, { content: (0, import_format_time.formatFullDateTime)(date, locale), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "tlui-cmt-time", children: [
+      (0, import_format_time.formatRelativeTime)(date, locale),
+      edited && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tlui-cmt-edited", children: " \xB7 edited" })
+    ] }) })
   ] });
 }
 //# sourceMappingURL=byline.js.map

package/dist-cjs/ui/byline.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ui/byline.tsx"],
-  "sourcesContent": ["import { formatRelativeTime } from './format-time'\n\n/** @public */\nexport interface BylineProps {\n\tauthor: string\n\t/** ISO datetime; formatted to relative time by the component. */\n\tdate: string\n\t/** Shows an \"edited\" marker when the comment has been edited. */\n\tedited?: boolean\n}\n\n/** A comment's metadata line: author name, relative time, and an edited marker. @public @react */\nexport function Byline({ author, date, edited }: BylineProps) {\n\treturn (\n\t\t<div className=\"cmt-head\">\n\t\t\t<span className=\"cmt-author\">{author}</span>\n\t\t\t<span className=\"cmt-time\">\n\t\t\t\t{formatRelativeTime(date)}\n\t\t\t\t{edited && <span className=\"cmt-edited\"> \u00B7 edited</span>}\n\t\t\t</span>\n\t\t</div>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAeG;AAfH,yBAAmC;AAY5B,SAAS,OAAO,EAAE,QAAQ,MAAM,OAAO,GAAgB;AAC7D,SACC,6CAAC,SAAI,WAAU,YACd;AAAA,gDAAC,UAAK,WAAU,cAAc,kBAAO;AAAA,IACrC,6CAAC,UAAK,WAAU,YACd;AAAA,iDAAmB,IAAI;AAAA,MACvB,UAAU,4CAAC,UAAK,WAAU,cAAa,0BAAS;AAAA,OAClD;AAAA,KACD;AAEF;",
+  "sourcesContent": ["import { Avatar, type CommentAuthor } from '@tldraw/mentions'\nimport { TldrawUiTooltip, useCurrentTranslation } from 'tldraw'\nimport { formatFullDateTime, formatRelativeTime } from './format-time'\n\n/** @public */\nexport interface BylineProps {\n\tauthor: CommentAuthor\n\t/** ISO datetime; formatted to relative time by the component. */\n\tdate: string\n\t/** Shows an \"edited\" marker when the comment has been edited. */\n\tedited?: boolean\n}\n\n/**\n * A comment's metadata line: author name, relative time, and an edited marker. Hovering the time\n * shows the full date and time in a tooltip.\n * @public @react\n */\nexport function Byline({ author, date, edited }: BylineProps) {\n\t// The relative time is the one piece of a byline that isn't the host's data, so it follows the\n\t// same translation context as every other string in the UI rather than a prop of its own.\n\tconst { locale } = useCurrentTranslation()\n\treturn (\n\t\t<div className=\"tlui-cmt-head\">\n\t\t\t<Avatar author={author} />\n\t\t\t<span className=\"tlui-cmt-author\">{author.name}</span>\n\t\t\t<TldrawUiTooltip content={formatFullDateTime(date, locale)}>\n\t\t\t\t<span className=\"tlui-cmt-time\">\n\t\t\t\t\t{formatRelativeTime(date, locale)}\n\t\t\t\t\t{edited && <span className=\"tlui-cmt-edited\"> \u00B7 edited</span>}\n\t\t\t\t</span>\n\t\t\t</TldrawUiTooltip>\n\t\t</div>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBG;AAxBH,sBAA2C;AAC3C,oBAAuD;AACvD,yBAAuD;AAgBhD,SAAS,OAAO,EAAE,QAAQ,MAAM,OAAO,GAAgB;AAG7D,QAAM,EAAE,OAAO,QAAI,qCAAsB;AACzC,SACC,6CAAC,SAAI,WAAU,iBACd;AAAA,gDAAC,0BAAO,QAAgB;AAAA,IACxB,4CAAC,UAAK,WAAU,mBAAmB,iBAAO,MAAK;AAAA,IAC/C,4CAAC,iCAAgB,aAAS,uCAAmB,MAAM,MAAM,GACxD,uDAAC,UAAK,WAAU,iBACd;AAAA,iDAAmB,MAAM,MAAM;AAAA,MAC/B,UAAU,4CAAC,UAAK,WAAU,mBAAkB,0BAAS;AAAA,OACvD,GACD;AAAA,KACD;AAEF;",
   "names": []
 }

package/dist-cjs/ui/comment-card.js

@@ -22,16 +22,23 @@ __export(comment_card_exports, {
 });
 module.exports = __toCommonJS(comment_card_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_avatar = require("./avatar");
 var import_byline = require("./byline");
-function CommentCard({ author, body, date, you, edited, actions }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: you ? "cmt-card cmt-card--you" : "cmt-card", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatar.Avatar, { name: author }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-body", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_byline.Byline, { author, date, edited }),
-      body
+function CommentCard({
+  author,
+  body,
+  date,
+  you,
+  edited,
+  actions,
+  footer
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: you ? "tlui-cmt-card tlui-cmt-card--you" : "tlui-cmt-card", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_byline.Byline, { author, date, edited }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-cmt-body", children: [
+      body,
+      footer
     ] }),
-    actions !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-card__actions", children: actions })
+    actions !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-cmt-card__actions", children: actions })
   ] });
 }
 //# sourceMappingURL=comment-card.js.map

package/dist-cjs/ui/comment-card.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ui/comment-card.tsx"],
-  "sourcesContent": ["import { ReactNode } from 'react'\nimport { Avatar } from './avatar'\nimport { Byline } from './byline'\n\n/** @public */\nexport interface CommentCardProps {\n\tauthor: string\n\t/** The rendered comment body. The card doesn't dictate a format \u2014 pass a `<CommentText>`\n\t *  for markdown, a rich-text render, or any node. */\n\tbody: ReactNode\n\t/** ISO datetime; formatted to relative time by the component. */\n\tdate: string\n\tyou: boolean\n\t/** Whether the comment has been edited (shows an \"edited\" marker). */\n\tedited?: boolean\n\t/** Hover-revealed controls at the card's top-right (e.g. an edit affordance). */\n\tactions?: ReactNode\n}\n\n/** A single comment: Avatar, Byline, and a body slot the consumer renders. @public @react */\nexport function CommentCard({ author, body, date, you, edited, actions }: CommentCardProps) {\n\treturn (\n\t\t<div className={you ? 'cmt-card cmt-card--you' : 'cmt-card'}>\n\t\t\t<Avatar name={author} />\n\t\t\t<div className=\"cmt-body\">\n\t\t\t\t<Byline author={author} date={date} edited={edited} />\n\t\t\t\t{body}\n\t\t\t</div>\n\t\t\t{actions !== undefined && <div className=\"cmt-card__actions\">{actions}</div>}\n\t\t</div>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBG;AAtBH,oBAAuB;AACvB,oBAAuB;AAkBhB,SAAS,YAAY,EAAE,QAAQ,MAAM,MAAM,KAAK,QAAQ,QAAQ,GAAqB;AAC3F,SACC,6CAAC,SAAI,WAAW,MAAM,2BAA2B,YAChD;AAAA,gDAAC,wBAAO,MAAM,QAAQ;AAAA,IACtB,6CAAC,SAAI,WAAU,YACd;AAAA,kDAAC,wBAAO,QAAgB,MAAY,QAAgB;AAAA,MACnD;AAAA,OACF;AAAA,IACC,YAAY,UAAa,4CAAC,SAAI,WAAU,qBAAqB,mBAAQ;AAAA,KACvE;AAEF;",
+  "sourcesContent": ["import { type CommentAuthor } from '@tldraw/mentions'\nimport { ReactNode } from 'react'\nimport { Byline } from './byline'\n\n/** @public */\nexport interface CommentCardProps {\n\tauthor: CommentAuthor\n\t/** The rendered comment body. The card doesn't dictate a format \u2014 pass a `<CommentBody>`\n\t *  for a comment's rich text, or any node of your own. */\n\tbody: ReactNode\n\t/** ISO datetime; formatted to relative time by the component. */\n\tdate: string\n\tyou: boolean\n\t/** Whether the comment has been edited (shows an \"edited\" marker). */\n\tedited?: boolean\n\t/** Hover-revealed controls at the card's top-right (e.g. an edit affordance). */\n\tactions?: ReactNode\n\t/** Content under the body, aligned with it rather than the avatar (e.g. a `<Reactions>` row). */\n\tfooter?: ReactNode\n}\n\n/** A single comment: Avatar, Byline, and a body slot the consumer renders. @public @react */\nexport function CommentCard({\n\tauthor,\n\tbody,\n\tdate,\n\tyou,\n\tedited,\n\tactions,\n\tfooter,\n}: CommentCardProps) {\n\treturn (\n\t\t<div className={you ? 'tlui-cmt-card tlui-cmt-card--you' : 'tlui-cmt-card'}>\n\t\t\t<Byline author={author} date={date} edited={edited} />\n\t\t\t<div className=\"tlui-cmt-body\">\n\t\t\t\t{body}\n\t\t\t\t{footer}\n\t\t\t</div>\n\t\t\t{actions !== undefined && <div className=\"tlui-cmt-card__actions\">{actions}</div>}\n\t\t</div>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCG;AA/BH,oBAAuB;AAoBhB,SAAS,YAAY;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAqB;AACpB,SACC,6CAAC,SAAI,WAAW,MAAM,qCAAqC,iBAC1D;AAAA,gDAAC,wBAAO,QAAgB,MAAY,QAAgB;AAAA,IACpD,6CAAC,SAAI,WAAU,iBACb;AAAA;AAAA,MACA;AAAA,OACF;AAAA,IACC,YAAY,UAAa,4CAAC,SAAI,WAAU,0BAA0B,mBAAQ;AAAA,KAC5E;AAEF;",
   "names": []
 }

package/dist-cjs/ui/comment-composer.js

@@ -22,14 +22,11 @@ __export(comment_composer_exports, {
 });
 module.exports = __toCommonJS(comment_composer_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_core = require("@tiptap/core");
 var import_react = require("@tiptap/react");
+var import_mentions = require("@tldraw/mentions");
 var import_react2 = require("react");
 var import_tldraw = require("tldraw");
-var import_avatar = require("./avatar");
 var import_comment_extensions = require("./comment-extensions");
-var import_comment_mention = require("./comment-mention");
-var import_mention_suggestion = require("./mention-suggestion");
 var import_send_button = require("./send-button");
 function CommentComposer({
   author,
@@ -38,6 +35,7 @@ function CommentComposer({
   onChange,
   onSubmit,
   sendLabel = "Send",
+  onArrowUpWhenEmpty,
   disabled,
   autoFocus,
   leading,
@@ -50,6 +48,8 @@ function CommentComposer({
   onChangeRef.current = onChange;
   const onSubmitRef = (0, import_react2.useRef)(onSubmit);
   onSubmitRef.current = onSubmit;
+  const onArrowUpWhenEmptyRef = (0, import_react2.useRef)(onArrowUpWhenEmpty);
+  onArrowUpWhenEmptyRef.current = onArrowUpWhenEmpty;
   const disabledRef = (0, import_react2.useRef)(disabled);
   disabledRef.current = disabled;
   const getMentionSuggestionsRef = (0, import_react2.useRef)(getMentionSuggestions);
@@ -57,80 +57,165 @@ function CommentComposer({
   const renderMentionSuggestionRef = (0, import_react2.useRef)(renderMentionSuggestion);
   renderMentionSuggestionRef.current = renderMentionSuggestion;
   const [isEmpty, setIsEmpty] = (0, import_react2.useState)(() => !value || (0, import_comment_extensions.isCommentEmpty)(value));
-  const submitExtension = (0, import_react2.useMemo)(
-    () => import_core.Extension.create({
-      name: "commentComposerSubmit",
-      priority: 1e3,
-      addKeyboardShortcuts() {
-        return {
-          Enter: () => {
-            if ((0, import_mention_suggestion.isMentionPickerOpen)()) return false;
-            if (!disabledRef.current) onSubmitRef.current?.();
-            return true;
-          }
-        };
-      }
-    }),
-    []
-  );
+  const [expanded, setExpanded] = (0, import_react2.useState)(false);
+  const expandedRef = (0, import_react2.useRef)(expanded);
+  expandedRef.current = expanded;
+  const inputWrapRef = (0, import_react2.useRef)(null);
+  const mirrorRef = (0, import_react2.useRef)(null);
+  const remeasure = () => {
+    const wrap = inputWrapRef.current;
+    const mirror = mirrorRef.current;
+    const editor2 = editorRef.current;
+    if (!wrap || !mirror || !editor2) return;
+    if (editor2.isEmpty) {
+      if (expandedRef.current) setExpanded(false);
+      return;
+    }
+    if (wrap.clientWidth === 0) return;
+    const doc = editor2.state.doc;
+    const multiBlock = doc.childCount > 1 || doc.firstChild !== null && doc.firstChild.type.name !== "paragraph";
+    if (multiBlock) {
+      if (!expandedRef.current) setExpanded(true);
+      return;
+    }
+    const field = wrap.parentElement;
+    const send = field ? field.querySelector(".tlui-cmt-send") : null;
+    const input = wrap.querySelector(".tlui-cmt-input");
+    if (!send || !input) return;
+    mirror.innerHTML = input.innerHTML;
+    const textWidth = mirror.offsetWidth;
+    const wrapStyle = getComputedStyle(wrap);
+    const wrapPadX = parseFloat(wrapStyle.paddingLeft) + parseFloat(wrapStyle.paddingRight);
+    const collapsedAvailable = wrap.clientWidth - wrapPadX - (expandedRef.current ? send.offsetWidth + 6 : 0);
+    if (!expandedRef.current && textWidth > collapsedAvailable - 8) {
+      setExpanded(true);
+    } else if (expandedRef.current && textWidth < collapsedAvailable - 24) {
+      setExpanded(false);
+    }
+  };
+  const remeasureRef = (0, import_react2.useRef)(remeasure);
+  remeasureRef.current = remeasure;
+  const editorRef = (0, import_react2.useRef)(null);
+  const replayingEnter = (0, import_react2.useRef)(false);
   const mentionsEnabled = !!getMentionSuggestions;
   const hasCustomRow = !!renderMentionSuggestion;
   const extensions = (0, import_react2.useMemo)(() => {
-    const list = [...import_comment_extensions.commentTipTapExtensions, submitExtension];
+    const list = [...import_comment_extensions.commentTipTapExtensions];
     if (mentionsEnabled) {
       const resolveSuggestions = (query) => getMentionSuggestionsRef.current?.(query) ?? [];
       const renderRow = hasCustomRow ? (member) => renderMentionSuggestionRef.current?.(member) : void 0;
       list.push(
-        (0, import_comment_mention.commentMention)({
-          suggestion: (0, import_mention_suggestion.createMentionSuggestion)(resolveSuggestions, {
+        (0, import_mentions.createMentionExtension)({
+          suggestion: (0, import_mentions.createMentionSuggestion)(resolveSuggestions, {
             renderMember: renderRow,
             editor: tlEditor
           })
         })
       );
     } else {
-      list.push((0, import_comment_mention.commentMention)({ suggestion: { char: "@", allow: () => false } }));
+      list.push((0, import_mentions.createMentionExtension)({ suggestion: { char: "@", allow: () => false } }));
     }
     return list;
-  }, [submitExtension, mentionsEnabled, hasCustomRow, tlEditor]);
+  }, [mentionsEnabled, hasCustomRow, tlEditor]);
   const editor = (0, import_react.useEditor)(
     {
       extensions,
       content: value ?? import_comment_extensions.EMPTY_COMMENT,
       editable: interactive,
-      // tldraw's default extensions add their own TextDirection extension (so it can be
-      // overridden), so disable TipTap's core one to avoid a duplicate-extension warning —
-      // mirrors RichTextArea's setup.
+      // tldraw ships its own TextDirection extension, so TipTap's core one would warn about a
+      // duplicate. Mirrors RichTextArea's setup.
       enableCoreExtensions: { textDirection: false },
       textDirection: "auto",
-      editorProps: { attributes: { class: "cmt-input" } },
+      editorProps: {
+        attributes: {
+          class: "tlui-cmt-input",
+          "aria-label": placeholder,
+          role: "textbox",
+          "aria-multiline": "true"
+        },
+        // Runs before every keymap plugin, so it can distinguish Shift+Enter from Enter — an
+        // `Enter` keymap binding also fires on Shift+Enter and would otherwise swallow it.
+        handleKeyDown: (_view, event) => {
+          if (replayingEnter.current) return false;
+          if (event.key === "ArrowUp" && !event.isComposing) {
+            if (onArrowUpWhenEmptyRef.current && editorRef.current?.isEmpty && !(0, import_mentions.isMentionPickerOpen)()) {
+              onArrowUpWhenEmptyRef.current();
+              return true;
+            }
+            return false;
+          }
+          if (event.key !== "Enter" || event.isComposing) return false;
+          if ((0, import_mentions.isMentionPickerOpen)()) return false;
+          if (event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey) {
+            if (editorRef.current?.isEmpty) return true;
+            replayingEnter.current = true;
+            try {
+              editorRef.current?.commands.enter();
+            } finally {
+              replayingEnter.current = false;
+            }
+            return true;
+          }
+          if (!disabledRef.current) onSubmitRef.current?.();
+          return true;
+        }
+      },
       onUpdate: ({ editor: editor2 }) => {
         setIsEmpty(editor2.isEmpty);
+        remeasureRef.current();
         onChangeRef.current?.(editor2.getJSON());
       }
     },
-    [interactive]
+    [interactive, placeholder]
   );
+  editorRef.current = editor;
   (0, import_react2.useEffect)(() => {
     if (!editor || value === void 0) return;
     if ((0, import_tldraw.isEqual)(editor.getJSON(), value)) return;
     editor.commands.setContent(value);
     setIsEmpty(editor.isEmpty);
   }, [editor, value]);
+  (0, import_react2.useLayoutEffect)(() => {
+    remeasureRef.current();
+  }, [editor, value]);
   (0, import_react2.useEffect)(() => {
     if (!autoFocus || !editor) return;
     const raf = requestAnimationFrame(() => editor.commands.focus("end"));
     return () => cancelAnimationFrame(raf);
   }, [autoFocus, editor]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-composer", children: [
-    leading ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatar.Avatar, { name: author }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-composer__field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-composer__input-wrap", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.EditorContent, { editor }),
-        isEmpty && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-input__placeholder", "aria-hidden": "true", children: placeholder })
-      ] }),
-      interactive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_send_button.SendButton, { label: sendLabel, onClick: onSubmit, disabled })
-    ] })
+  const focusEditorFromField = (e) => {
+    const target = e.target;
+    if (target.closest(".tlui-cmt-input") || target.closest(".tlui-cmt-send")) return;
+    e.preventDefault();
+    editor?.commands.focus("end");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-cmt-composer", children: [
+    leading ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mentions.Avatar, { author }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: [
+          "tlui-cmt-composer__field",
+          interactive && expanded && "tlui-cmt-composer__field--expanded"
+        ].filter(Boolean).join(" "),
+        onMouseDown: interactive ? focusEditorFromField : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-cmt-composer__input-wrap", ref: inputWrapRef, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.EditorContent, { editor }),
+            isEmpty && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-cmt-input__placeholder", "aria-hidden": "true", children: placeholder }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: "tlui-cmt-composer__mirror tlui-cmt-input",
+                ref: mirrorRef,
+                "aria-hidden": "true"
+              }
+            )
+          ] }),
+          interactive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_send_button.SendButton, { label: sendLabel, onClick: onSubmit, disabled })
+        ]
+      }
+    )
   ] });
 }
 //# sourceMappingURL=comment-composer.js.map

package/dist-cjs/ui/comment-composer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ui/comment-composer.tsx"],
-  "sourcesContent": ["import { Extension, JSONContent } from '@tiptap/core'\nimport { EditorContent, useEditor } from '@tiptap/react'\nimport { ReactNode, useEffect, useMemo, useRef, useState } from 'react'\nimport { isEqual, TLRichText, useMaybeEditor } from 'tldraw'\nimport { Avatar } from './avatar'\nimport { commentTipTapExtensions, EMPTY_COMMENT, isCommentEmpty } from './comment-extensions'\nimport { commentMention } from './comment-mention'\nimport { MentionMember } from './mention-list'\nimport { createMentionSuggestion, isMentionPickerOpen } from './mention-suggestion'\nimport { SendButton } from './send-button'\n\n/** @public */\nexport interface CommentComposerProps {\n\tauthor: string\n\tplaceholder: string\n\t/** Controlled rich-text value. Omit for the presentational (display-only) composer. */\n\tvalue?: TLRichText\n\tonChange?(value: TLRichText): void\n\t/** Called on Send click or Enter. When set, the composer is interactive. */\n\tonSubmit?(): void\n\tsendLabel?: string\n\tdisabled?: boolean\n\tautoFocus?: boolean\n\t/** The leading element before the field. Defaults to the author's avatar. */\n\tleading?: ReactNode\n\t/** Resolve the members matching an `@`-query (sync or async). Provide to enable mentions. */\n\tgetMentionSuggestions?(query: string): MentionMember[] | Promise<MentionMember[]>\n\t/** Override a picker row's content. Defaults to avatar + name (+ secondary). */\n\trenderMentionSuggestion?(member: MentionMember): ReactNode\n}\n\n/**\n * The input for writing a comment: a TipTap rich-text editor restricted to the comment extension\n * set (bold, italic, lists, links, code, highlight \u2014 no headings), with a Send button. Formatting\n * is applied through markdown and keyboard shortcuts (e.g. `**bold**`, `- `, Cmd+B); there's no\n * floating toolbar. Presentational by default; pass value/onChange/onSubmit to drive it as a form.\n * @public @react\n */\nexport function CommentComposer({\n\tauthor,\n\tplaceholder,\n\tvalue,\n\tonChange,\n\tonSubmit,\n\tsendLabel = 'Send',\n\tdisabled,\n\tautoFocus,\n\tleading,\n\tgetMentionSuggestions,\n\trenderMentionSuggestion,\n}: CommentComposerProps) {\n\tconst interactive = !!onChange || !!onSubmit\n\t// The canvas editor the composer lives in, if any \u2014 lets the mention popup track the camera. Null\n\t// when the composer is used outside a tldraw editor (e.g. an isolated demo).\n\tconst tlEditor = useMaybeEditor()\n\n\t// Callbacks are read through refs so the editor instance doesn't need to be recreated when they\n\t// change identity between renders.\n\tconst onChangeRef = useRef(onChange)\n\tonChangeRef.current = onChange\n\tconst onSubmitRef = useRef(onSubmit)\n\tonSubmitRef.current = onSubmit\n\tconst disabledRef = useRef(disabled)\n\tdisabledRef.current = disabled\n\tconst getMentionSuggestionsRef = useRef(getMentionSuggestions)\n\tgetMentionSuggestionsRef.current = getMentionSuggestions\n\tconst renderMentionSuggestionRef = useRef(renderMentionSuggestion)\n\trenderMentionSuggestionRef.current = renderMentionSuggestion\n\n\tconst [isEmpty, setIsEmpty] = useState(() => !value || isCommentEmpty(value))\n\n\t// Enter submits the comment. Shift+Enter (and Cmd/Ctrl+Enter) keep their default behavior \u2014 a\n\t// new line \u2014 for the occasional multi-line comment.\n\tconst submitExtension = useMemo(\n\t\t() =>\n\t\t\tExtension.create({\n\t\t\t\tname: 'commentComposerSubmit',\n\t\t\t\tpriority: 1000,\n\t\t\t\taddKeyboardShortcuts() {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tEnter: () => {\n\t\t\t\t\t\t\t// While the @-mention picker is open, Enter selects the highlighted member.\n\t\t\t\t\t\t\t// This extension outranks the mention plugin (priority 1000), so defer to the\n\t\t\t\t\t\t\t// picker here or Enter would submit before the member could be inserted.\n\t\t\t\t\t\t\tif (isMentionPickerOpen()) return false\n\t\t\t\t\t\t\tif (!disabledRef.current) onSubmitRef.current?.()\n\t\t\t\t\t\t\treturn true\n\t\t\t\t\t\t},\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t}),\n\t\t[]\n\t)\n\n\t// The suggestion plugin is built once (the editor is recreated only on `interactive`) and runs\n\t// outside React, so it must read the mention callbacks through refs \u2014 like onChange/onSubmit \u2014\n\t// or it queries the roster present at mount forever, never seeing a member who loads or joins\n\t// later. Whether mentions (and a custom picker row) are wired at all is fixed at mount; only the\n\t// callbacks themselves are live.\n\tconst mentionsEnabled = !!getMentionSuggestions\n\tconst hasCustomRow = !!renderMentionSuggestion\n\tconst extensions = useMemo(() => {\n\t\tconst list = [...commentTipTapExtensions, submitExtension]\n\t\t// Always register the mention node so an existing body that contains a mention keeps it on\n\t\t// edit (an unregistered node would be stripped by ProseMirror when the content loads). The `@`\n\t\t// picker itself only turns on when the host provides a resolver; otherwise the node is present\n\t\t// but its trigger is disabled.\n\t\tif (mentionsEnabled) {\n\t\t\tconst resolveSuggestions = (query: string) => getMentionSuggestionsRef.current?.(query) ?? []\n\t\t\tconst renderRow = hasCustomRow\n\t\t\t\t? (member: MentionMember) => renderMentionSuggestionRef.current?.(member)\n\t\t\t\t: undefined\n\t\t\tlist.push(\n\t\t\t\tcommentMention({\n\t\t\t\t\tsuggestion: createMentionSuggestion(resolveSuggestions, {\n\t\t\t\t\t\trenderMember: renderRow,\n\t\t\t\t\t\teditor: tlEditor,\n\t\t\t\t\t}),\n\t\t\t\t})\n\t\t\t)\n\t\t} else {\n\t\t\tlist.push(commentMention({ suggestion: { char: '@', allow: () => false } }))\n\t\t}\n\t\treturn list\n\t}, [submitExtension, mentionsEnabled, hasCustomRow, tlEditor])\n\n\tconst editor = useEditor(\n\t\t{\n\t\t\textensions,\n\t\t\tcontent: (value ?? EMPTY_COMMENT) as JSONContent,\n\t\t\teditable: interactive,\n\t\t\t// tldraw's default extensions add their own TextDirection extension (so it can be\n\t\t\t// overridden), so disable TipTap's core one to avoid a duplicate-extension warning \u2014\n\t\t\t// mirrors RichTextArea's setup.\n\t\t\tenableCoreExtensions: { textDirection: false },\n\t\t\ttextDirection: 'auto',\n\t\t\teditorProps: { attributes: { class: 'cmt-input' } },\n\t\t\tonUpdate: ({ editor }) => {\n\t\t\t\tsetIsEmpty(editor.isEmpty)\n\t\t\t\tonChangeRef.current?.(editor.getJSON() as TLRichText)\n\t\t\t},\n\t\t},\n\t\t[interactive]\n\t)\n\n\t// Sync controlled resets (e.g. the parent clearing to EMPTY_COMMENT after posting) into the\n\t// editor without echoing back the value the editor itself just emitted.\n\tuseEffect(() => {\n\t\tif (!editor || value === undefined) return\n\t\tif (isEqual(editor.getJSON(), value)) return\n\t\teditor.commands.setContent(value as JSONContent)\n\t\tsetIsEmpty(editor.isEmpty)\n\t}, [editor, value])\n\n\t// Focus on the next frame rather than via TipTap's autofocus: the composer often mounts from a\n\t// canvas pointer event whose default focus handling would otherwise steal it back.\n\tuseEffect(() => {\n\t\tif (!autoFocus || !editor) return\n\t\tconst raf = requestAnimationFrame(() => editor.commands.focus('end'))\n\t\treturn () => cancelAnimationFrame(raf)\n\t}, [autoFocus, editor])\n\n\treturn (\n\t\t<div className=\"cmt-composer\">\n\t\t\t{leading ?? <Avatar name={author} />}\n\t\t\t<div className=\"cmt-composer__field\">\n\t\t\t\t<div className=\"cmt-composer__input-wrap\">\n\t\t\t\t\t<EditorContent editor={editor} />\n\t\t\t\t\t{isEmpty && (\n\t\t\t\t\t\t<div className=\"cmt-input__placeholder\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{interactive && <SendButton label={sendLabel} onClick={onSubmit} disabled={disabled} />}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { JSONContent } from '@tiptap/core'\nimport { EditorContent, useEditor } from '@tiptap/react'\nimport {\n\tAvatar,\n\ttype CommentAuthor,\n\tcreateMentionExtension,\n\tcreateMentionSuggestion,\n\tisMentionPickerOpen,\n\tMentionMember,\n} from '@tldraw/mentions'\nimport {\n\ttype MouseEvent as ReactMouseEvent,\n\tReactNode,\n\tuseEffect,\n\tuseLayoutEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'react'\nimport { isEqual, TLRichText, useMaybeEditor } from 'tldraw'\nimport { commentTipTapExtensions, EMPTY_COMMENT, isCommentEmpty } from './comment-extensions'\nimport { SendButton } from './send-button'\n\n/** @public */\nexport interface CommentComposerProps {\n\tauthor: CommentAuthor\n\tplaceholder: string\n\t/** Controlled rich-text value. Omit for the presentational (display-only) composer. */\n\tvalue?: TLRichText\n\tonChange?(value: TLRichText): void\n\t/** Called on Send click or Enter. When set, the composer is interactive. */\n\tonSubmit?(): void\n\tsendLabel?: string\n\t/** Called when Up is pressed in an empty composer \u2014 e.g. to start editing the comment above,\n\t *  the way chat apps edit your last message. With content in the field, Up moves the cursor. */\n\tonArrowUpWhenEmpty?(): void\n\tdisabled?: boolean\n\tautoFocus?: boolean\n\t/** The leading element before the field. Defaults to the author's avatar. */\n\tleading?: ReactNode\n\t/** Resolve the members matching an `@`-query (sync or async). Provide to enable mentions. */\n\tgetMentionSuggestions?(query: string): MentionMember[] | Promise<MentionMember[]>\n\t/** Override a picker row's content. Defaults to avatar + name (+ secondary). */\n\trenderMentionSuggestion?(member: MentionMember): ReactNode\n}\n\n/**\n * The input for writing a comment: a TipTap rich-text editor restricted to the comment extension\n * set (bold, italic, lists, links, code, highlight \u2014 no headings), with a Send button. Formatting\n * is applied through markdown and keyboard shortcuts (e.g. `**bold**`, `- `, Cmd+B); there's no\n * floating toolbar. Presentational by default; pass value/onChange/onSubmit to drive it as a form.\n * @public @react\n */\nexport function CommentComposer({\n\tauthor,\n\tplaceholder,\n\tvalue,\n\tonChange,\n\tonSubmit,\n\tsendLabel = 'Send',\n\tonArrowUpWhenEmpty,\n\tdisabled,\n\tautoFocus,\n\tleading,\n\tgetMentionSuggestions,\n\trenderMentionSuggestion,\n}: CommentComposerProps) {\n\tconst interactive = !!onChange || !!onSubmit\n\t// Lets the mention popup track the camera. Null outside a tldraw editor.\n\tconst tlEditor = useMaybeEditor()\n\n\t// Read through refs so the editor isn't recreated when callback identity changes.\n\tconst onChangeRef = useRef(onChange)\n\tonChangeRef.current = onChange\n\tconst onSubmitRef = useRef(onSubmit)\n\tonSubmitRef.current = onSubmit\n\tconst onArrowUpWhenEmptyRef = useRef(onArrowUpWhenEmpty)\n\tonArrowUpWhenEmptyRef.current = onArrowUpWhenEmpty\n\tconst disabledRef = useRef(disabled)\n\tdisabledRef.current = disabled\n\tconst getMentionSuggestionsRef = useRef(getMentionSuggestions)\n\tgetMentionSuggestionsRef.current = getMentionSuggestions\n\tconst renderMentionSuggestionRef = useRef(renderMentionSuggestion)\n\trenderMentionSuggestionRef.current = renderMentionSuggestion\n\n\tconst [isEmpty, setIsEmpty] = useState(() => !value || isCommentEmpty(value))\n\t// Whether the field has grown to two rows: input across the full width, send button below.\n\t// Flips when the (single-line) content width reaches the space left beside the send button.\n\tconst [expanded, setExpanded] = useState(false)\n\tconst expandedRef = useRef(expanded)\n\texpandedRef.current = expanded\n\tconst inputWrapRef = useRef<HTMLDivElement>(null)\n\tconst mirrorRef = useRef<HTMLDivElement>(null)\n\n\t// Measure whether the content still fits on one line beside the send button, against a hidden\n\t// nowrap clone so marks and mention chips measure at their true width. The gap between the\n\t// expand and collapse thresholds is a dead zone, so the layout can't flap at the boundary.\n\tconst remeasure = () => {\n\t\tconst wrap = inputWrapRef.current\n\t\tconst mirror = mirrorRef.current\n\t\tconst editor = editorRef.current\n\t\tif (!wrap || !mirror || !editor) return\n\t\t// Empty always fits \u2014 and measuring before TipTap has laid out reads zero widths, flashing\n\t\t// the expanded layout for a frame on mount.\n\t\tif (editor.isEmpty) {\n\t\t\tif (expandedRef.current) setExpanded(false)\n\t\t\treturn\n\t\t}\n\t\tif (wrap.clientWidth === 0) return\n\t\tconst doc = editor.state.doc\n\t\tconst multiBlock =\n\t\t\tdoc.childCount > 1 || (doc.firstChild !== null && doc.firstChild.type.name !== 'paragraph')\n\t\tif (multiBlock) {\n\t\t\tif (!expandedRef.current) setExpanded(true)\n\t\t\treturn\n\t\t}\n\t\tconst field = wrap.parentElement\n\t\tconst send = field ? field.querySelector<HTMLElement>('.tlui-cmt-send') : null\n\t\tconst input = wrap.querySelector('.tlui-cmt-input')\n\t\tif (!send || !input) return\n\t\tmirror.innerHTML = input.innerHTML\n\t\tconst textWidth = mirror.offsetWidth\n\t\t// Measured against the wrap's *content* box: text wraps at clientWidth minus padding, so\n\t\t// without subtracting it the input grows a line before expansion fires and then snaps.\n\t\tconst wrapStyle = getComputedStyle(wrap)\n\t\tconst wrapPadX = parseFloat(wrapStyle.paddingLeft) + parseFloat(wrapStyle.paddingRight)\n\t\tconst collapsedAvailable =\n\t\t\twrap.clientWidth - wrapPadX - (expandedRef.current ? send.offsetWidth + 6 : 0)\n\t\tif (!expandedRef.current && textWidth > collapsedAvailable - 8) {\n\t\t\tsetExpanded(true)\n\t\t} else if (expandedRef.current && textWidth < collapsedAvailable - 24) {\n\t\t\tsetExpanded(false)\n\t\t}\n\t}\n\tconst remeasureRef = useRef(remeasure)\n\tremeasureRef.current = remeasure\n\n\t// Reachable from `handleKeyDown`, which is created before `useEditor` returns.\n\tconst editorRef = useRef<ReturnType<typeof useEditor>>(null)\n\n\t// `commands.enter()` re-dispatches through `handleKeyDown`; without this guard our own handler\n\t// would catch the synthetic Enter and submit.\n\tconst replayingEnter = useRef(false)\n\n\t// The suggestion plugin is built once and runs outside React, so it reads the mention callbacks\n\t// through refs \u2014 otherwise it queries the roster present at mount forever, never seeing a member\n\t// who joins later. Whether mentions are wired at all is fixed at mount; the callbacks are live.\n\tconst mentionsEnabled = !!getMentionSuggestions\n\tconst hasCustomRow = !!renderMentionSuggestion\n\tconst extensions = useMemo(() => {\n\t\tconst list = [...commentTipTapExtensions]\n\t\t// The mention node is always registered, or ProseMirror strips existing mentions when an\n\t\t// edited body loads. Only the `@` trigger is gated on the host providing a resolver.\n\t\tif (mentionsEnabled) {\n\t\t\tconst resolveSuggestions = (query: string) => getMentionSuggestionsRef.current?.(query) ?? []\n\t\t\tconst renderRow = hasCustomRow\n\t\t\t\t? (member: MentionMember) => renderMentionSuggestionRef.current?.(member)\n\t\t\t\t: undefined\n\t\t\tlist.push(\n\t\t\t\tcreateMentionExtension({\n\t\t\t\t\tsuggestion: createMentionSuggestion(resolveSuggestions, {\n\t\t\t\t\t\trenderMember: renderRow,\n\t\t\t\t\t\teditor: tlEditor,\n\t\t\t\t\t}),\n\t\t\t\t})\n\t\t\t)\n\t\t} else {\n\t\t\tlist.push(createMentionExtension({ suggestion: { char: '@', allow: () => false } }))\n\t\t}\n\t\treturn list\n\t}, [mentionsEnabled, hasCustomRow, tlEditor])\n\n\tconst editor = useEditor(\n\t\t{\n\t\t\textensions,\n\t\t\tcontent: (value ?? EMPTY_COMMENT) as JSONContent,\n\t\t\teditable: interactive,\n\t\t\t// tldraw ships its own TextDirection extension, so TipTap's core one would warn about a\n\t\t\t// duplicate. Mirrors RichTextArea's setup.\n\t\t\tenableCoreExtensions: { textDirection: false },\n\t\t\ttextDirection: 'auto',\n\t\t\teditorProps: {\n\t\t\t\tattributes: {\n\t\t\t\t\tclass: 'tlui-cmt-input',\n\t\t\t\t\t'aria-label': placeholder,\n\t\t\t\t\trole: 'textbox',\n\t\t\t\t\t'aria-multiline': 'true',\n\t\t\t\t},\n\t\t\t\t// Runs before every keymap plugin, so it can distinguish Shift+Enter from Enter \u2014 an\n\t\t\t\t// `Enter` keymap binding also fires on Shift+Enter and would otherwise swallow it.\n\t\t\t\thandleKeyDown: (_view, event) => {\n\t\t\t\t\t// Let the keymaps handle the synthetic Enter we replay for a Shift+Enter newline.\n\t\t\t\t\tif (replayingEnter.current) return false\n\t\t\t\t\t// Up in an empty composer hands off to the host. With content it stays cursor\n\t\t\t\t\t// movement, and with the picker open it navigates the roster.\n\t\t\t\t\tif (event.key === 'ArrowUp' && !event.isComposing) {\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tonArrowUpWhenEmptyRef.current &&\n\t\t\t\t\t\t\teditorRef.current?.isEmpty &&\n\t\t\t\t\t\t\t!isMentionPickerOpen()\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tonArrowUpWhenEmptyRef.current()\n\t\t\t\t\t\t\treturn true\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn false\n\t\t\t\t\t}\n\t\t\t\t\tif (event.key !== 'Enter' || event.isComposing) return false\n\t\t\t\t\t// While the @-mention picker is open, Enter selects the highlighted member \u2014 defer.\n\t\t\t\t\tif (isMentionPickerOpen()) return false\n\t\t\t\t\t// Shift+Enter inserts a new line by replaying a plain Enter through the keymaps, reusing\n\t\t\t\t\t// the editor's list-aware handling. tldraw doesn't do soft breaks.\n\t\t\t\t\tif (event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey) {\n\t\t\t\t\t\t// An empty field would open the comment with a stray leading blank line.\n\t\t\t\t\t\tif (editorRef.current?.isEmpty) return true\n\t\t\t\t\t\treplayingEnter.current = true\n\t\t\t\t\t\ttry {\n\t\t\t\t\t\t\teditorRef.current?.commands.enter()\n\t\t\t\t\t\t} finally {\n\t\t\t\t\t\t\treplayingEnter.current = false\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn true\n\t\t\t\t\t}\n\t\t\t\t\t// Enter, Cmd+Enter, and Ctrl+Enter submit.\n\t\t\t\t\tif (!disabledRef.current) onSubmitRef.current?.()\n\t\t\t\t\treturn true\n\t\t\t\t},\n\t\t\t},\n\t\t\tonUpdate: ({ editor }) => {\n\t\t\t\tsetIsEmpty(editor.isEmpty)\n\t\t\t\t// Same-value state sets don't re-render, and the DOM is already updated here.\n\t\t\t\tremeasureRef.current()\n\t\t\t\tonChangeRef.current?.(editor.getJSON() as TLRichText)\n\t\t\t},\n\t\t},\n\t\t[interactive, placeholder]\n\t)\n\teditorRef.current = editor\n\n\t// Sync controlled resets (e.g. the parent clearing to EMPTY_COMMENT after posting) into the\n\t// editor without echoing back the value the editor itself just emitted.\n\tuseEffect(() => {\n\t\tif (!editor || value === undefined) return\n\t\tif (isEqual(editor.getJSON(), value)) return\n\t\teditor.commands.setContent(value as JSONContent)\n\t\tsetIsEmpty(editor.isEmpty)\n\t}, [editor, value])\n\n\t// Measure once the editor's content is in the DOM, so a composer that mounts pre-filled (the\n\t// edit-in-place composer) starts in the right layout.\n\tuseLayoutEffect(() => {\n\t\tremeasureRef.current()\n\t}, [editor, value])\n\n\t// Focus on the next frame rather than via TipTap's autofocus: the composer often mounts from a\n\t// canvas pointer event whose default focus handling would otherwise steal it back.\n\tuseEffect(() => {\n\t\tif (!autoFocus || !editor) return\n\t\tconst raf = requestAnimationFrame(() => editor.commands.focus('end'))\n\t\treturn () => cancelAnimationFrame(raf)\n\t}, [autoFocus, editor])\n\n\t// The whole field behaves like the text input: clicking its empty area (the padding, or the\n\t// space beside/below a short line) focuses the editor rather than only the text glyphs being\n\t// clickable. The input (caret placement) and the send button keep their own click handling.\n\tconst focusEditorFromField = (e: ReactMouseEvent<HTMLDivElement>) => {\n\t\tconst target = e.target as HTMLElement\n\t\tif (target.closest('.tlui-cmt-input') || target.closest('.tlui-cmt-send')) return\n\t\te.preventDefault()\n\t\teditor?.commands.focus('end')\n\t}\n\n\treturn (\n\t\t<div className=\"tlui-cmt-composer\">\n\t\t\t{leading ?? <Avatar author={author} />}\n\t\t\t<div\n\t\t\t\tclassName={[\n\t\t\t\t\t'tlui-cmt-composer__field',\n\t\t\t\t\tinteractive && expanded && 'tlui-cmt-composer__field--expanded',\n\t\t\t\t]\n\t\t\t\t\t.filter(Boolean)\n\t\t\t\t\t.join(' ')}\n\t\t\t\tonMouseDown={interactive ? focusEditorFromField : undefined}\n\t\t\t>\n\t\t\t\t<div className=\"tlui-cmt-composer__input-wrap\" ref={inputWrapRef}>\n\t\t\t\t\t<EditorContent editor={editor} />\n\t\t\t\t\t{isEmpty && (\n\t\t\t\t\t\t<div className=\"tlui-cmt-input__placeholder\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"tlui-cmt-composer__mirror tlui-cmt-input\"\n\t\t\t\t\t\tref={mirrorRef}\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t{interactive && <SendButton label={sendLabel} onClick={onSubmit} disabled={disabled} />}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],
+  "mappings": "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",
   "names": ["import_react", "editor"]
 }