@appquality/unguess-design-system 3.1.66 → 3.1.67

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# v3.1.67 (Wed Jan 24 2024)
+
+#### 🐛 Bug Fix
+
+- Minor changes [#305](https://github.com/AppQuality/unguess-design-system/pull/305) ([@cannarocks](https://github.com/cannarocks) [@iDome89](https://github.com/iDome89) [@marcbon](https://github.com/marcbon))
+- fixed behaviour when editor is empty [#304](https://github.com/AppQuality/unguess-design-system/pull/304) ([@iDome89](https://github.com/iDome89))
+- 🔧 fix(chat): fix typo in mentionList.tsx [#303](https://github.com/AppQuality/unguess-design-system/pull/303) ([@marcbon](https://github.com/marcbon))
+- Comments design refinement [#302](https://github.com/AppQuality/unguess-design-system/pull/302) ([@iDome89](https://github.com/iDome89) [@marcbon](https://github.com/marcbon))
+- chore(storybook): add extension [#301](https://github.com/AppQuality/unguess-design-system/pull/301) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 3
+
+- [@iDome89](https://github.com/iDome89)
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v3.1.66 (Fri Jan 19 2024)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -2283,8 +2283,9 @@ const SentimentChart = ({ data, width, height, margin, tooltip, i18n, }) => {
 const ShortcutContainer = styled__default["default"].div `
   display: flex;
   flex-direction: row;
-  padding: ${({ theme }) => `${theme.space.sm} ${theme.space.base * 4}px`};
+  padding: ${({ theme }) => `0 ${theme.space.base * 4}px`};
   background-color: ${({ theme }) => theme.palette.grey[100]};
+  font-size: ${({ theme }) => theme.fontSizes.sm};
 `;
 const Text$1 = styled__default["default"](reactTypography.SM) `
   line-height: 1.7;
@@ -2296,7 +2297,7 @@ const SendShortcut = ({ saveText }) => {
 const Footer$4 = styled__default["default"].div `
   display: flex;
   flex-direction: row;
-  padding: ${({ theme }) => `${theme.space.sm} 0px`};
+  padding: ${({ theme }) => `${theme.space.xs} 0px ${theme.space.sm}`};
   align-items: center;
   margin: ${({ theme }) => `0 -${theme.space.base * 4}px`};
   justify-content: ${({ showShortcut }) => showShortcut ? "space-between" : "flex-end"};
@@ -2318,7 +2319,8 @@ const ChatContextProvider = ({ onSave, setMentionableUsers, children, }) => {
                 if (!result.some((r) => r.id === node.attrs.id))
                     result.push({
                         id: node.attrs.id,
-                        name: node.attrs.name
+                        name: node.attrs.name,
+                        email: node.attrs.email
                     });
             }
         });
@@ -2328,7 +2330,7 @@ const ChatContextProvider = ({ onSave, setMentionableUsers, children, }) => {
         editor,
         setEditor,
         triggerSave: () => {
-            if (editor && onSave) {
+            if (editor && onSave && !editor.isEmpty) {
                 onSave(editor, getMentions(editor));
                 editor.commands.clearContent();
             }
@@ -2861,9 +2863,25 @@ const SvgAtFill = props => /*#__PURE__*/React__namespace.createElement("svg", _e
   d: "M11 5v3h0a3 3 0 01-3 3h0a3 3 0 01-3-3h0a3 3 0 013-3h0a3 3 0 013 3h0v1a2 2 0 002 2h0a2 2 0 002-2V8h0a7 7 0 00-7-7h0a7 7 0 00-7 7h0a7 7 0 007 7h2.8"
 })));
 
-const EditorButton = ({ editor, type, }) => {
-    const isActive = editor.isActive(type);
-    const getIcon = () => {
+const MenuContainer = styled__default["default"].div `
+  padding: ${({ theme }) => theme.space.xs} 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: ${({ theme }) => theme.space.xxs};
+`;
+const VerticalDivider = styled__default["default"].div `
+  width: 2px;
+  height: 24px;
+  background-color: ${({ theme }) => theme.palette.grey[300]};
+  margin: 0 ${({ theme }) => theme.space.xs};
+`;
+const CommentBar = ({ editor, i18n, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    if (!editor)
+        return null;
+    const getIcon = (type) => {
         switch (type) {
             case "bold":
                 return jsxRuntime.jsx(SvgBoldFill, {});
@@ -2871,9 +2889,11 @@ const EditorButton = ({ editor, type, }) => {
                 return jsxRuntime.jsx(SvgItalicFill, {});
             case "mention":
                 return jsxRuntime.jsx(SvgAtFill, {});
+            default:
+                return null;
         }
     };
-    const handleClick = () => {
+    const handleClick = (type) => {
         switch (type) {
             case "bold":
                 return editor.chain().focus().toggleBold().run();
@@ -2883,29 +2903,11 @@ const EditorButton = ({ editor, type, }) => {
                 const { from } = editor.state.selection;
                 const char = from > 1 ? " @" : "@";
                 return editor.commands.insertContent(char);
+            default:
+                return;
         }
     };
-    return (jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !isActive, isPrimary: isActive, onClick: handleClick }, { children: getIcon() })));
-};
-
-const MenuContainer = styled__default["default"].div `
-  padding: ${({ theme }) => theme.space.xxs} 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-`;
-const VerticalDivider = styled__default["default"].div `
-  width: 2px;
-  height: 24px;
-  background-color: ${({ theme }) => theme.palette.grey[300]};
-  margin: 0 ${({ theme }) => theme.space.xs};
-`;
-const CommentBar = ({ editor, i18n, }) => {
-    var _a, _b, _c, _d, _e, _f;
-    if (!editor)
-        return null;
-    return (jsxRuntime.jsxs(MenuContainer, { children: [jsxRuntime.jsx(Tooltip, Object.assign({ content: (_b = (_a = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _a === void 0 ? void 0 : _a.bold) !== null && _b !== void 0 ? _b : "Bold text", placement: "top", type: "light", size: "small" }, { children: jsxRuntime.jsx(EditorButton, { editor: editor, type: "bold" }) })), jsxRuntime.jsx(Tooltip, Object.assign({ content: (_d = (_c = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _c === void 0 ? void 0 : _c.italic) !== null && _d !== void 0 ? _d : "Italic text", placement: "top", type: "light", size: "small" }, { children: jsxRuntime.jsx(EditorButton, { editor: editor, type: "italic" }) })), jsxRuntime.jsx(VerticalDivider, {}), jsxRuntime.jsx(Tooltip, Object.assign({ content: (_f = (_e = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _e === void 0 ? void 0 : _e.mention) !== null && _f !== void 0 ? _f : "Add a mention", placement: "top", type: "light", size: "small" }, { children: jsxRuntime.jsx(EditorButton, { editor: editor, type: "mention" }) }))] }));
+    return (jsxRuntime.jsxs(MenuContainer, Object.assign({ id: "menu-container" }, { children: [jsxRuntime.jsx(Tooltip, Object.assign({ content: `${(_b = (_a = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _a === void 0 ? void 0 : _a.bold) !== null && _b !== void 0 ? _b : "Bold text"} ${isMac() ? "Cmd" : "Ctrl"} + B`, placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("bold"), isPrimary: editor.isActive("bold"), isPill: false, onClick: () => handleClick("bold") }, { children: getIcon("bold") })) })), jsxRuntime.jsx(Tooltip, Object.assign({ content: `${(_d = (_c = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _c === void 0 ? void 0 : _c.italic) !== null && _d !== void 0 ? _d : "Italic text"} ${isMac() ? "Cmd" : "Ctrl"} + I`, placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("italic"), isPrimary: editor.isActive("italic"), isPill: false, onClick: () => handleClick("italic") }, { children: getIcon("italic") })) })), jsxRuntime.jsx(VerticalDivider, {}), jsxRuntime.jsx(Tooltip, Object.assign({ content: (_f = (_e = i18n === null || i18n === void 0 ? void 0 : i18n.menu) === null || _e === void 0 ? void 0 : _e.mention) !== null && _f !== void 0 ? _f : "Add a mention", placement: "top", type: "light", size: "small", hasArrow: false }, { children: jsxRuntime.jsx(IconButton, Object.assign({ size: "small", isBasic: !editor.isActive("mention"), isPrimary: editor.isActive("mention"), isPill: false, onClick: () => handleClick("mention") }, { children: getIcon("mention") })) }))] })));
 };
 
 const CustomMention = Mention__default["default"].extend({
@@ -2985,9 +2987,27 @@ const Item$2 = styled.styled(Button) `
   align-items: flex-start;
   justify-content: center;
   flex-direction: column;
+
+  ${({ isActive }) => isActive &&
+    `
+    background-color: ${getColor(theme.colors.primaryHue, 600, undefined, 0.08)};
+  `}
+`;
+const EmptyList = styled.styled.div `
+  max-height: 100px;
+  max-width:280px;
+  padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.md}`};
 `;
+const EmptyMention = ({ content }) => {
+    return (jsxRuntime.jsx(EmptyList, { children: jsxRuntime.jsx(MD, Object.assign({ style: { color: theme.palette.grey[600] } }, { children: content })) }));
+};
 const MentionList = React.forwardRef((props, ref) => {
+    var _a, _b;
+    const { editor } = props;
+    const { options } = editor;
+    const { i18n } = options;
     const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const selectedRef = React.useRef(null);
     const selectItem = (index) => {
         const item = props.items[index];
         if (item) {
@@ -3004,6 +3024,11 @@ const MentionList = React.forwardRef((props, ref) => {
         selectItem(selectedIndex);
     };
     React.useEffect(() => setSelectedIndex(0), [props.items]);
+    React.useEffect(() => {
+        if (selectedRef.current) {
+            selectedRef.current.scrollIntoView({ behavior: "smooth" });
+        }
+    }, [selectedIndex]);
     React.useImperativeHandle(ref, () => ({
         onKeyDown: ({ event }) => {
             if (event.key === "ArrowUp") {
@@ -3021,7 +3046,7 @@ const MentionList = React.forwardRef((props, ref) => {
             return false;
         },
     }));
-    return (jsxRuntime.jsx("div", Object.assign({ className: "items" }, { children: jsxRuntime.jsx(StyledCard$1, { children: jsxRuntime.jsx(List, { children: props.items.length ? (props.items.map((item, index) => (jsxRuntime.jsx("div", Object.assign({ className: index === selectedIndex ? 'selected' : '' }, { children: jsxRuntime.jsx(Item$2, Object.assign({ isBasic: true, isStretched: true, isAccent: true, isPill: false, onClick: () => selectItem(index) }, { children: jsxRuntime.jsx(MD, Object.assign({ isBold: true, style: { color: theme.palette.black } }, { children: item.name })) }), index) }))))) : (jsxRuntime.jsx("div", Object.assign({ className: "item" }, { children: "No result" }))) }) }) })));
+    return (jsxRuntime.jsx("div", Object.assign({ className: "items" }, { children: jsxRuntime.jsx(StyledCard$1, { children: jsxRuntime.jsx(List, { children: props.items.length ? (props.items.map((item, index) => (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Item$2, Object.assign({ ref: index === selectedIndex ? selectedRef : undefined, isBasic: true, isStretched: true, isAccent: true, isPill: false, isActive: index === selectedIndex, onClick: () => selectItem(index) }, { children: jsxRuntime.jsx(MD, Object.assign({ isBold: true, style: { color: theme.palette.black } }, { children: item.name })) }), index) })))) : (jsxRuntime.jsx(EmptyMention, { content: (_b = (_a = i18n === null || i18n === void 0 ? void 0 : i18n.mention) === null || _a === void 0 ? void 0 : _a.noResults) !== null && _b !== void 0 ? _b : "No results" })) }) }) })));
 });
 
 /**

package/build/stories/buttons/button/index.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonArgs } from "./_types";
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonArgs>;
 export declare const Basic: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonArgs>;

package/build/stories/buttons/utils.d.ts

@@ -8,18 +8,18 @@ export declare const variants: readonly [{}, {
     readonly disabled: true;
 }];
 export declare const Row: import("styled-components").IStyledComponent<"web", {
-    alignItems?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsXs?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsSm?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsMd?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsLg?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsXl?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
-    justifyContent?: "center" | "start" | "end" | "between" | "around" | undefined;
-    justifyContentXs?: "center" | "start" | "end" | "between" | "around" | undefined;
-    justifyContentSm?: "center" | "start" | "end" | "between" | "around" | undefined;
-    justifyContentMd?: "center" | "start" | "end" | "between" | "around" | undefined;
-    justifyContentLg?: "center" | "start" | "end" | "between" | "around" | undefined;
-    justifyContentXl?: "center" | "start" | "end" | "between" | "around" | undefined;
+    alignItems?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsXs?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsSm?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsMd?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsLg?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsXl?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
+    justifyContent?: "start" | "center" | "end" | "between" | "around" | undefined;
+    justifyContentXs?: "start" | "center" | "end" | "between" | "around" | undefined;
+    justifyContentSm?: "start" | "center" | "end" | "between" | "around" | undefined;
+    justifyContentMd?: "start" | "center" | "end" | "between" | "around" | undefined;
+    justifyContentLg?: "start" | "center" | "end" | "between" | "around" | undefined;
+    justifyContentXl?: "start" | "center" | "end" | "between" | "around" | undefined;
     wrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
     wrapXs?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
     wrapSm?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
@@ -73,7 +73,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -299,18 +299,18 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     md?: string | number | boolean | undefined;
     lg?: string | number | boolean | undefined;
     xl?: string | number | boolean | undefined;
-    alignSelf?: "center" | "start" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfXs?: "center" | "start" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfSm?: "center" | "start" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfMd?: "center" | "start" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfLg?: "center" | "start" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfXl?: "center" | "start" | "end" | "baseline" | "stretch" | "auto" | undefined;
-    textAlign?: "center" | "start" | "end" | "justify" | undefined;
-    textAlignXs?: "center" | "start" | "end" | "justify" | undefined;
-    textAlignSm?: "center" | "start" | "end" | "justify" | undefined;
-    textAlignMd?: "center" | "start" | "end" | "justify" | undefined;
-    textAlignLg?: "center" | "start" | "end" | "justify" | undefined;
-    textAlignXl?: "center" | "start" | "end" | "justify" | undefined;
+    alignSelf?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfXs?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfSm?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfMd?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfLg?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfXl?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    textAlign?: "start" | "center" | "end" | "justify" | undefined;
+    textAlignXs?: "start" | "center" | "end" | "justify" | undefined;
+    textAlignSm?: "start" | "center" | "end" | "justify" | undefined;
+    textAlignMd?: "start" | "center" | "end" | "justify" | undefined;
+    textAlignLg?: "start" | "center" | "end" | "justify" | undefined;
+    textAlignXl?: "start" | "center" | "end" | "justify" | undefined;
     offset?: string | number | undefined;
     offsetXs?: string | number | undefined;
     offsetSm?: string | number | undefined;
@@ -370,7 +370,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -640,7 +640,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;

package/build/stories/chat/_types.d.ts

@@ -4,6 +4,7 @@ type validationStatus = "success" | "warning" | "error";
 export type SuggestedUser = {
     id: number;
     name: string;
+    email: string;
 };
 export interface ChatEditorArgs extends Partial<EditorOptions> {
     placeholderOptions?: Partial<PlaceholderOptions>;
@@ -17,6 +18,9 @@ export interface ChatEditorArgs extends Partial<EditorOptions> {
             italic?: string;
             mention?: string;
         };
+        mention?: {
+            noResults?: string;
+        };
     };
 }
 export interface Author {

package/build/stories/chat/context/chatContext.d.ts

@@ -7,7 +7,7 @@ export type ChatContextType = {
     setEditor: React.Dispatch<React.SetStateAction<Editor | undefined>>;
     mentionableUsers: (props: {
         query: string;
-    }) => Promise<SuggestedUser[]>;
+    }) => SuggestedUser[];
 };
 export declare const ChatContext: React.Context<ChatContextType | null>;
 export declare const ChatContextProvider: ({ onSave, setMentionableUsers, children, }: {
@@ -15,6 +15,6 @@ export declare const ChatContextProvider: ({ onSave, setMentionableUsers, childr
     children: React.ReactNode;
     setMentionableUsers: (props: {
         query: string;
-    }) => Promise<SuggestedUser[]>;
+    }) => SuggestedUser[];
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const useChatContext: () => ChatContextType;

package/build/stories/chat/index.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PlaceholderOptions } from "@tiptap/extension-placeholder";
 import { Editor as TipTapEditor } from "@tiptap/react";
 import { ChatEditorArgs, SuggestedUser } from "./_types";

package/build/stories/chat/parts/extensions.d.ts

@@ -3,6 +3,6 @@ import { SuggestedUser } from "../_types";
 export declare const editorExtensions: ({ placeholderOptions, mentionableUsers, }: {
     mentionableUsers: (props: {
         query: string;
-    }) => Promise<SuggestedUser[]>;
+    }) => SuggestedUser[];
     placeholderOptions?: Partial<PlaceholderOptions> | undefined;
 }) => (import("@tiptap/react").Extension<import("@tiptap/extension-typography").TypographyOptions, any> | import("@tiptap/react").Mark<import("@tiptap/extension-link").LinkOptions, any> | import("@tiptap/react").Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | import("@tiptap/react").Extension<PlaceholderOptions, any> | import("@tiptap/react").Extension<import("@tiptap/extension-character-count").CharacterCountOptions, import("@tiptap/extension-character-count").CharacterCountStorage> | import("@tiptap/react").Node<import("@tiptap/extension-mention").MentionOptions, any>)[];

package/build/stories/dropdowns/select/index.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DropdownArgs, SelectArgs } from "./_types";
 import { MenuArgs } from "../menu/_types";
 interface IItem {

package/build/stories/editor/index.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { EditorArgs } from "./_types";
 interface EditorStoryArgs extends EditorArgs {
     children?: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.66",
+  "version": "3.1.67",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -73,6 +73,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
     "@rollup/plugin-image": "^3.0.2",
+    "@storybook/addon-a11y": "^7.6.10",
     "@storybook/addon-essentials": "^7.0.9",
     "@storybook/addon-interactions": "^7.0.9",
     "@storybook/addon-links": "^7.0.9",

package/build/stories/chat/parts/editorButton.d.ts

@@ -1,5 +0,0 @@
-import { Editor } from "@tiptap/react";
-export declare const EditorButton: ({ editor, type, }: {
-    editor: Editor;
-    type: "bold" | "italic" | "mention";
-}) => import("react/jsx-runtime").JSX.Element;