@box/threaded-annotations 4.8.18 → 4.9.1

package/dist/chunks/message-editor-bubble-menu.js

@@ -1 +1 @@
-import{THREADED_ANNOTATIONS_PORTAL}from"../esm/lib/v2/constants.js";import messages from"../esm/lib/components/v2/message-editor/messages.js";import{Toolbar}from"@box/blueprint-web";import{memo,useCallback}from"react";import{useIntl}from"react-intl";import{jsx,jsxs}from"react/jsx-runtime";import{Bold,BulletList,Italic,NumberList,Underline}from"@box/blueprint-web-assets/icons/Medium";import{useEditorState}from"@tiptap/react";import{BubbleMenu}from"@tiptap/react/menus";import '../styles/message-editor-bubble-menu.css';var message_editor_bubble_menu_module_default={bubbleMenu:`_bubbleMenu_lm6yy_1`},shouldShowBubbleMenu=({editor,state,from,to})=>{let{doc,selection}=state,{empty}=selection;return!editor.isEditable||empty||!(doc.textBetween(from,to).length>0)?!1:editor.isFocused},BUBBLE_MENU_OPTIONS={placement:`top`},toggleCommands={bold:editor=>editor.chain().focus().toggleBold().run(),bulletList:editor=>editor.chain().focus().toggleBulletList().run(),italic:editor=>editor.chain().focus().toggleItalic().run(),orderedList:editor=>editor.chain().focus().toggleOrderedList().run(),underline:editor=>editor.chain().focus().toggleUnderline().run()},MARK_ITEMS=[{format:`bold`,icon:Bold,message:messages.formatBold},{format:`italic`,icon:Italic,message:messages.formatItalic},{format:`underline`,icon:Underline,message:messages.formatUnderline}],LIST_ITEMS=[{format:`bulletList`,icon:BulletList,message:messages.formatBulletList},{format:`orderedList`,icon:NumberList,message:messages.formatNumberedList}],MessageEditorBubbleMenuComponent=({editor,menuAnchorRef,onFormatToggle})=>{let intl=useIntl(),activeFormats=useEditorState({editor,selector:({editor:editorInstance})=>({bold:editorInstance.isActive(`bold`),bulletList:editorInstance.isActive(`bulletList`),italic:editorInstance.isActive(`italic`),orderedList:editorInstance.isActive(`orderedList`),underline:editorInstance.isActive(`underline`)})}),appendToAnchor=useCallback(()=>menuAnchorRef.current??document.body,[menuAnchorRef]),handleToggle=useCallback(format=>{toggleCommands[format](editor),onFormatToggle?.(format,editor.isActive(format))},[editor,onFormatToggle]),handleToolbarKeyDown=useCallback(event=>{event.key===`Escape`&&(event.preventDefault(),event.stopPropagation(),editor.chain().focus().setTextSelection(editor.state.selection.to).run())},[editor]),renderToggleItem=({format,icon,message})=>jsx(Toolbar.ToggleItem,{"aria-label":intl.formatMessage(message),icon,onClick:()=>handleToggle(format),onMouseDown:event=>{event.preventDefault()},value:format},format);return jsx(BubbleMenu,{appendTo:appendToAnchor,className:message_editor_bubble_menu_module_default.bubbleMenu,editor,options:BUBBLE_MENU_OPTIONS,shouldShow:shouldShowBubbleMenu,updateDelay:0,...THREADED_ANNOTATIONS_PORTAL,children:jsxs(Toolbar.Root,{onKeyDown:handleToolbarKeyDown,children:[jsx(Toolbar.ToggleGroup,{type:`multiple`,value:MARK_ITEMS.filter(({format})=>activeFormats[format]).map(({format})=>format),children:MARK_ITEMS.map(renderToggleItem)}),jsx(Toolbar.Separator,{}),jsx(Toolbar.ToggleGroup,{type:`multiple`,value:LIST_ITEMS.filter(({format})=>activeFormats[format]).map(({format})=>format),children:LIST_ITEMS.map(renderToggleItem)})]})})},MessageEditorBubbleMenu=memo(({editor,menuAnchorRef,onFormatToggle})=>editor?jsx(MessageEditorBubbleMenuComponent,{editor,menuAnchorRef,onFormatToggle}):null);MessageEditorBubbleMenu.displayName=`MessageEditorBubbleMenu`;export{MessageEditorBubbleMenu as t};
+import{THREADED_ANNOTATIONS_PORTAL}from"../esm/lib/v2/constants.js";import{BUBBLE_MENU_PLUGIN_KEY,formattingBarDismissedPluginKey}from"../esm/lib/components/v2/message-editor/editor-extensions/dismiss-bar-on-escape.js";import messages from"../esm/lib/components/v2/message-editor/messages.js";import{Toolbar}from"@box/blueprint-web";import{memo,useCallback}from"react";import{useIntl}from"react-intl";import{jsx,jsxs}from"react/jsx-runtime";import{Bold,BulletList,Italic,NumberList,Underline}from"@box/blueprint-web-assets/icons/Medium";import{useEditorState}from"@tiptap/react";import{BubbleMenu}from"@tiptap/react/menus";import '../styles/message-editor-bubble-menu.css';var message_editor_bubble_menu_module_default={bubbleMenu:`_bubbleMenu_lm6yy_1`},shouldShowBubbleMenu=({editor,state,from,to})=>{let{doc,selection}=state,{empty}=selection;return!editor.isEditable||empty||formattingBarDismissedPluginKey.getState(state)?.dismissed||!(doc.textBetween(from,to).length>0)?!1:editor.isFocused},BUBBLE_MENU_OPTIONS={placement:`top`},toggleCommands={bold:editor=>editor.chain().focus().toggleBold().run(),bulletList:editor=>editor.chain().focus().toggleBulletList().run(),italic:editor=>editor.chain().focus().toggleItalic().run(),orderedList:editor=>editor.chain().focus().toggleOrderedList().run(),underline:editor=>editor.chain().focus().toggleUnderline().run()},MARK_ITEMS=[{format:`bold`,icon:Bold,message:messages.formatBold},{format:`italic`,icon:Italic,message:messages.formatItalic},{format:`underline`,icon:Underline,message:messages.formatUnderline}],LIST_ITEMS=[{format:`bulletList`,icon:BulletList,message:messages.formatBulletList},{format:`orderedList`,icon:NumberList,message:messages.formatNumberedList}],MessageEditorBubbleMenuComponent=({editor,menuAnchorRef,onFormatToggle})=>{let intl=useIntl(),activeFormats=useEditorState({editor,selector:({editor:editorInstance})=>({bold:editorInstance.isActive(`bold`),bulletList:editorInstance.isActive(`bulletList`),italic:editorInstance.isActive(`italic`),orderedList:editorInstance.isActive(`orderedList`),underline:editorInstance.isActive(`underline`)})}),appendToAnchor=useCallback(()=>menuAnchorRef.current??document.body,[menuAnchorRef]),handleToggle=useCallback(format=>{toggleCommands[format](editor),onFormatToggle?.(format,editor.isActive(format))},[editor,onFormatToggle]),handleToolbarKeyDown=useCallback(event=>{event.key===`Escape`&&(event.preventDefault(),event.stopPropagation(),editor.chain().focus().dismissFormattingBar().run())},[editor]),renderToggleItem=({format,icon,message})=>jsx(Toolbar.ToggleItem,{"aria-label":intl.formatMessage(message),icon,onClick:()=>handleToggle(format),onMouseDown:event=>{event.preventDefault()},value:format},format);return jsx(BubbleMenu,{appendTo:appendToAnchor,className:message_editor_bubble_menu_module_default.bubbleMenu,editor,options:BUBBLE_MENU_OPTIONS,pluginKey:BUBBLE_MENU_PLUGIN_KEY,shouldShow:shouldShowBubbleMenu,updateDelay:0,...THREADED_ANNOTATIONS_PORTAL,children:jsxs(Toolbar.Root,{onKeyDown:handleToolbarKeyDown,children:[jsx(Toolbar.ToggleGroup,{type:`multiple`,value:MARK_ITEMS.filter(({format})=>activeFormats[format]).map(({format})=>format),children:MARK_ITEMS.map(renderToggleItem)}),jsx(Toolbar.Separator,{}),jsx(Toolbar.ToggleGroup,{type:`multiple`,value:LIST_ITEMS.filter(({format})=>activeFormats[format]).map(({format})=>format),children:LIST_ITEMS.map(renderToggleItem)})]})})},MessageEditorBubbleMenu=memo(({editor,menuAnchorRef,onFormatToggle})=>editor?jsx(MessageEditorBubbleMenuComponent,{editor,menuAnchorRef,onFormatToggle}):null);MessageEditorBubbleMenu.displayName=`MessageEditorBubbleMenu`;export{MessageEditorBubbleMenu as t};

package/dist/esm/lib/components/v2/message-editor/editor-extensions/create-message-editor-extensions.js

@@ -1 +1 @@
-import{CustomMention}from"./custom-mention/custom-mention.js";import{CustomParagraph}from"./custom-paragraph.js";import{DismissSelectionOnEscape}from"./dismiss-selection-on-escape.js";import{NormalizeEmptyNodeSelection}from"./normalize-empty-node-selection.js";import Document from"@tiptap/extension-document";import Text from"@tiptap/extension-text";import Bold from"@tiptap/extension-bold";import Italic from"@tiptap/extension-italic";import{BulletList,ListItem,OrderedList}from"@tiptap/extension-list";import Underline from"@tiptap/extension-underline";import{Placeholder,UndoRedo}from"@tiptap/extensions";var createMessageEditorExtensions=({isRichTextEnabled,mentionSuggestion,placeholder})=>{let baseExtensions=[Document,CustomParagraph,Placeholder.configure({placeholder,showOnlyWhenEditable:!1}),Text,CustomMention.configure({suggestion:mentionSuggestion})];return isRichTextEnabled?[...baseExtensions,UndoRedo,Bold,Italic,Underline,BulletList.configure({keepMarks:!0}),OrderedList.configure({keepMarks:!0}),ListItem,NormalizeEmptyNodeSelection,DismissSelectionOnEscape]:baseExtensions};export{createMessageEditorExtensions};
+import{CustomMention}from"./custom-mention/custom-mention.js";import{CustomParagraph}from"./custom-paragraph.js";import{DismissBarOnEscape}from"./dismiss-bar-on-escape.js";import{NormalizeEmptyNodeSelection}from"./normalize-empty-node-selection.js";import Document from"@tiptap/extension-document";import Text from"@tiptap/extension-text";import Bold from"@tiptap/extension-bold";import Italic from"@tiptap/extension-italic";import{BulletList,ListItem,OrderedList}from"@tiptap/extension-list";import Underline from"@tiptap/extension-underline";import{Placeholder,UndoRedo}from"@tiptap/extensions";var createMessageEditorExtensions=({isRichTextEnabled,mentionSuggestion,placeholder})=>{let baseExtensions=[Document,CustomParagraph,Placeholder.configure({placeholder,showOnlyWhenEditable:!1}),Text,CustomMention.configure({suggestion:mentionSuggestion})];return isRichTextEnabled?[...baseExtensions,UndoRedo,Bold,Italic,Underline,BulletList.configure({keepMarks:!0}),OrderedList.configure({keepMarks:!0}),ListItem,NormalizeEmptyNodeSelection,DismissBarOnEscape]:baseExtensions};export{createMessageEditorExtensions};

package/dist/esm/lib/components/v2/message-editor/editor-extensions/dismiss-bar-on-escape.js

@@ -0,0 +1 @@
+import{Extension}from"@tiptap/core";import{Plugin,PluginKey}from"@tiptap/pm/state";var BUBBLE_MENU_PLUGIN_KEY=`messageEditorBubbleMenu`,formattingBarDismissedPluginKey=new PluginKey(`formattingBarDismissed`),DismissBarOnEscape=Extension.create({name:`dismissBarOnEscape`,addProseMirrorPlugins(){return[new Plugin({key:formattingBarDismissedPluginKey,state:{init(){return{dismissed:!1}},apply(tr,value,oldState,newState){return tr.getMeta(formattingBarDismissedPluginKey)?{dismissed:!0}:oldState.selection.eq(newState.selection)?value:{dismissed:!1}}}})]},addCommands(){return{dismissFormattingBar:()=>({tr})=>(tr.setMeta(formattingBarDismissedPluginKey,!0),tr.setMeta(BUBBLE_MENU_PLUGIN_KEY,`hide`),!0)}},addKeyboardShortcuts(){return{Escape:({editor})=>{let{empty}=editor.state.selection;return empty||formattingBarDismissedPluginKey.getState(editor.state)?.dismissed?!1:editor.commands.dismissFormattingBar()}}}});export{BUBBLE_MENU_PLUGIN_KEY,DismissBarOnEscape,formattingBarDismissedPluginKey};

package/dist/types/lib/components/v2/message-editor/editor-extensions/dismiss-bar-on-escape.d.ts

@@ -0,0 +1,21 @@
+import { Extension } from '@tiptap/core';
+import { PluginKey } from '@tiptap/pm/state';
+export declare const BUBBLE_MENU_PLUGIN_KEY = "messageEditorBubbleMenu";
+export declare const formattingBarDismissedPluginKey: PluginKey<{
+    dismissed: boolean;
+}>;
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        dismissBarOnEscape: {
+            dismissFormattingBar: () => ReturnType;
+        };
+    }
+}
+/**
+ * Escape dismisses the selection-driven formatting bar without collapsing
+ * the selection. A plugin-state flag plus the bubble-menu `hide` meta hide
+ * the bar immediately; the flag resets when the selection actually moves.
+ * Escape presses while focus is inside the bar are handled by the bar itself
+ * (editor keymaps cannot see them).
+ */
+export declare const DismissBarOnEscape: Extension<any, any>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/threaded-annotations",
-    "version": "4.8.18",
+    "version": "4.9.1",
     "license": "SEE LICENSE IN LICENSE",
     "dependencies": {
         "@floating-ui/dom": "^1.6.0",
@@ -21,23 +21,23 @@
         "uuid": "^9.0.1"
     },
     "peerDependencies": {
-        "@box/blueprint-web": "^17.2.4",
-        "@box/blueprint-web-assets": "^5.9.0",
-        "@box/collaboration-popover": "^2.2.31",
-        "@box/readable-time": "^2.2.31",
-        "@box/user-selector": "^3.0.10",
+        "@box/blueprint-web": "^17.3.1",
+        "@box/blueprint-web-assets": "^5.9.2",
+        "@box/collaboration-popover": "^2.2.33",
+        "@box/readable-time": "^2.2.33",
+        "@box/user-selector": "^3.0.12",
         "clsx": "^1.2.1",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
         "react-intl": "^6.4.2"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^17.2.4",
-        "@box/blueprint-web-assets": "^5.9.0",
-        "@box/eslint-plugin-blueprint": "2.2.9",
-        "@box/readable-time": "^2.2.31",
-        "@box/storybook-utils": "^1.2.31",
-        "@box/user-selector": "^3.0.10",
+        "@box/blueprint-web": "^17.3.1",
+        "@box/blueprint-web-assets": "^5.9.2",
+        "@box/eslint-plugin-blueprint": "2.2.10",
+        "@box/readable-time": "^2.2.33",
+        "@box/storybook-utils": "^1.2.33",
+        "@box/user-selector": "^3.0.12",
         "react": "^18.0.0",
         "react-dom": "^18.0.0"
     },

package/dist/esm/lib/components/v2/message-editor/editor-extensions/dismiss-selection-on-escape.js

@@ -1 +0,0 @@
-import{Extension}from"@tiptap/core";var DismissSelectionOnEscape=Extension.create({name:`dismissSelectionOnEscape`,addKeyboardShortcuts(){return{Escape:({editor})=>{let{empty,to}=editor.state.selection;return empty?!1:editor.commands.setTextSelection(to)}}}});export{DismissSelectionOnEscape};

package/dist/types/lib/components/v2/message-editor/editor-extensions/dismiss-selection-on-escape.d.ts

@@ -1,8 +0,0 @@
-import { Extension } from '@tiptap/core';
-/**
- * Escape dismisses the selection-driven formatting bar by collapsing the
- * selection to a caret — the bar only shows for selections containing text.
- * Escape presses while focus is inside the bar are handled by the bar itself
- * (editor keymaps cannot see them).
- */
-export declare const DismissSelectionOnEscape: Extension<any, any>;