@monolith-forensics/monolith-ui 1.1.47 → 1.1.49

package/dist/Button/Button.d.ts

@@ -13,6 +13,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: Variant;
     color?: string;
     disabled?: boolean;
+    selected?: boolean;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
 declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/Button/Button.js

@@ -117,7 +117,7 @@ const StyledButton = styled.button `
     }
 }};
 
-  background-color: ${({ theme, variant, color }) => {
+  background-color: ${({ theme, variant, color, selected }) => {
     var _a, _b, _c, _d, _e, _f;
     if (variant === "default")
         return "transparent";
@@ -144,6 +144,8 @@ const StyledButton = styled.button `
             return "transparent";
         case "text":
             return "transparent";
+        case "subtle":
+            return selected ? theme.palette.action.hover : "transparent";
         default:
             return "transparent";
     }

package/dist/DropDownMenu/DropDownMenu.d.ts

@@ -1,20 +1,15 @@
-import { ComponentPropsWithoutRef, ComponentType, ReactNode, UIEvent } from "react";
+import { ComponentPropsWithoutRef, ComponentType, ReactElement, ReactNode, UIEvent } from "react";
 import { ButtonProps } from "../Button";
 import { Size, Variant } from "../core";
+import { DropDownItem } from "./types";
 interface StyledContentProps {
     maxDropdownHeight?: number | string;
     variant?: Variant;
 }
 declare const StyledContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledContentProps>> & string;
-interface DropDownItem {
-    toLowerCase?: () => string;
-    label: string;
-    value: string;
-    data?: any;
-}
-interface DropDownMenuProps {
+export interface DropDownMenuProps {
     className?: string;
-    children?: ReactNode;
+    children?: ReactNode | string;
     data?: DropDownItem[];
     variant?: Variant;
     defaultValue?: DropDownItem[];
@@ -30,7 +25,8 @@ interface DropDownMenuProps {
     arrow?: boolean;
     searchable?: boolean;
     dropDownProps?: ComponentPropsWithoutRef<typeof StyledContent>;
+    buttonRender?: (props: any) => ReactElement;
     buttonProps?: ButtonProps;
 }
-declare const DropDownMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<DropDownMenuProps, never>> & string & Omit<({ className, children, data, variant, defaultValue, multiselect, size, TooltipContent, renderOption, onChange, onItemSelect, onScroll, loading, arrow, searchable, dropDownProps, buttonProps, }: DropDownMenuProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+declare const DropDownMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<DropDownMenuProps, never>> & string & Omit<({ className, children, data, variant, defaultValue, multiselect, size, TooltipContent, renderOption, onChange, onItemSelect, onScroll, loading, arrow, searchable, dropDownProps, buttonRender, buttonProps, }: DropDownMenuProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export default DropDownMenu;

package/dist/DropDownMenu/DropDownMenu.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { FloatingFocusManager, FloatingPortal, flip, useFloating, } from "@floating-ui/react";
+import { FloatingFocusManager, FloatingPortal, flip, offset, useFloating, } from "@floating-ui/react";
 import { forwardRef, useEffect, useRef, useState, } from "react";
 import styled from "styled-components";
 import { Button, Tooltip, CheckBox, Input } from "..";
 import { useDebouncedCallback } from "use-debounce";
+import { ChevronDownIcon } from "lucide-react";
 const StyledFloatContainer = styled.div `
   z-index: 1500;
 `;
@@ -107,7 +108,7 @@ const StyledContent = styled.div `
     display: none;
   }
 `;
-const DropDownMenu = styled(({ className, children, data = [], variant = "outlined", defaultValue, multiselect = false, size = "xs", TooltipContent, renderOption, onChange, onItemSelect, onScroll, loading, arrow, searchable, dropDownProps, buttonProps, }) => {
+const DropDownMenu = styled(({ className, children, data = [], variant = "outlined", defaultValue, multiselect = false, size = "xs", TooltipContent, renderOption, onChange, onItemSelect, onScroll, loading, arrow, searchable, dropDownProps, buttonRender, buttonProps, }) => {
     var _a, _b, _c;
     const isObjectArray = (_a = Object.keys((data === null || data === void 0 ? void 0 : data[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
     const [isOpen, setIsOpen] = useState(false);
@@ -121,7 +122,7 @@ const DropDownMenu = styled(({ className, children, data = [], variant = "outlin
         placement: "bottom-start",
         strategy: "absolute",
         // Handle collisions with the viewport
-        middleware: [flip()],
+        middleware: [flip(), offset(3)],
     });
     const handleAddItem = (item) => {
         setSelected((prev) => {
@@ -171,9 +172,13 @@ const DropDownMenu = styled(({ className, children, data = [], variant = "outlin
     }, [isOpen, searchable]);
     const scrollActive = (((_b = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight) || 0) >
         (((_c = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight) || 0);
-    return (_jsxs("div", { className: className + " mfDropDownMenu", children: [_jsx(Button, Object.assign({ ref: (ref) => {
+    return (_jsxs("div", { className: className + " mfDropDownMenu", children: [buttonRender ? (buttonRender({
+                onClick: () => setIsOpen(!isOpen),
+                buttonRef: refs.setReference,
+                isOpen,
+            })) : (_jsx(Button, Object.assign({ ref: (ref) => {
                     refs.setReference(ref);
-                }, onMouseDown: () => setIsOpen(!isOpen), rightSection: arrow ? _jsx("span", { children: "\u25BC" }) : null, size: size }, buttonProps, { children: children })), isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(FloatingFocusManager, { context: context, modal: false, children: _jsx(StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, className: "mfFloating", children: _jsx(StyledContent, Object.assign({ className: "mfFloatingContent", style: { width: 150, maxWidth: 400 }, variant: variant }, dropDownProps, { children: _jsxs(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: [loading && _jsx("div", { children: "Loading..." }), searchable && (_jsx(SearchInput, { ref: searchInputRef, variant: "outlined", placeholder: "Search", onChange: handleSearch })), !loading &&
+                }, onClick: () => setIsOpen(!isOpen), rightSection: arrow ? _jsx(ChevronDownIcon, { size: 12 }) : null, size: size, variant: variant, selected: isOpen }, buttonProps, { children: children }))), isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(FloatingFocusManager, { context: context, modal: false, children: _jsx(StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, className: "mfFloating", children: _jsx(StyledContent, Object.assign({ className: "mfFloatingContent", style: { width: 150, maxWidth: 400 } }, dropDownProps, { children: _jsxs(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: [loading && _jsx("div", { children: "Loading..." }), searchable && (_jsx(SearchInput, { ref: searchInputRef, variant: "outlined", size: size, placeholder: "Search", onChange: handleSearch })), !loading &&
                                         data
                                             .filter((item) => {
                                             var _a, _b, _c;
@@ -191,6 +196,7 @@ const DropDownMenu = styled(({ className, children, data = [], variant = "outlin
                                                 ? (s === null || s === void 0 ? void 0 : s.value) === (item === null || item === void 0 ? void 0 : item.value)
                                                 : s === item));
                                             return (_jsx(Tooltip, { content: TooltipContent ? (_jsx(TooltipContent, { data: item.data })) : null, side: "left", children: _jsxs(StyledItem, { className: "mfFloatingItem", onClick: (e) => {
+                                                        var _a;
                                                         e.preventDefault();
                                                         e.stopPropagation();
                                                         if (multiselect) {
@@ -202,7 +208,8 @@ const DropDownMenu = styled(({ className, children, data = [], variant = "outlin
                                                             setIsOpen(false);
                                                         }
                                                         onItemSelect === null || onItemSelect === void 0 ? void 0 : onItemSelect(item);
-                                                    }, "data-selected": isSelected, size: size, children: [multiselect && _jsx(CheckBox, { value: isSelected }), _jsx(_Fragment, { children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (item === null || item === void 0 ? void 0 : item.label) || item })] }) }, index));
+                                                        (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, item);
+                                                    }, "data-selected": isSelected, size: size, children: [multiselect && _jsx(CheckBox, { value: isSelected }), (item === null || item === void 0 ? void 0 : item.leftSection) || null, _jsx(_Fragment, { children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (item === null || item === void 0 ? void 0 : item.label) || item }), (item === null || item === void 0 ? void 0 : item.rightSection) || null] }) }, index));
                                         })] }) })) }) }) }))] }));
 }) ``;
 export default DropDownMenu;

package/dist/DropDownMenu/index.d.ts

@@ -1 +1,2 @@
 export { default } from "./DropDownMenu";
+export type { DropDownItem } from "./types";

package/dist/DropDownMenu/types.d.ts

@@ -0,0 +1,9 @@
+export type DropDownItem = {
+    toLowerCase?: () => string;
+    label: string;
+    value: string;
+    onClick?: (args: any) => void;
+    data?: any;
+    leftSection?: React.ReactNode;
+    rightSection?: React.ReactNode;
+};

package/dist/DropDownMenu/types.js

@@ -0,0 +1 @@
+export {};

package/dist/Grid/Grid.js

@@ -5,7 +5,8 @@ const Grid = styled(({ className, children }) => {
 }) `
   display: grid;
   grid-template-columns: repeat(${({ col }) => col || 1}, minmax(0, 1fr));
-  gap: 20px;
+  column-gap: 20px;
+  row-gap: 15px;
 
   width: ${({ width }) => Number.isInteger(width) ? `${width}px` : width || "100%"};
   height: auto;

package/dist/Modal/Modal.d.ts

@@ -10,5 +10,6 @@ declare const Modal: {
     ({ children, open, onClose, style, showCloseButton, FocusProps, }: ModalProps): import("react/jsx-runtime").JSX.Element;
     Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
     SubTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+    Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 };
 export default Modal;

package/dist/Modal/Modal.js

@@ -70,11 +70,20 @@ const StyledClose = styled.div `
   color: ${(props) => props.theme.palette.text.secondary};
 `;
 const StyledButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${(props) => props.theme.palette.text.secondary};
   background-color: transparent;
+  border-radius: 4px;
   border: none;
   outline: none;
   cursor: pointer;
-  padding: 0;
+  padding: 2px;
+
+  &:hover {
+    background-color: ${(props) => props.theme.palette.action.hover};
+  }
 `;
 const Title = styled.h1 `
   font-size: 20px;
@@ -87,6 +96,11 @@ const SubTitle = styled.h2 `
   margin: 0px;
   color: ${(props) => props.theme.palette.text.secondary};
 `;
+const ModalContent = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
 const Modal = ({ children, open = false, onClose, style = {}, showCloseButton = false, FocusProps = {}, }) => {
     const { refs, floatingStyles, context } = useFloating({
         open,
@@ -103,4 +117,5 @@ const Modal = ({ children, open = false, onClose, style = {}, showCloseButton =
 };
 Modal.Title = Title;
 Modal.SubTitle = SubTitle;
+Modal.Content = ModalContent;
 export default Modal;

package/dist/RichTextEditor/Components/BubbleMenu.d.ts

@@ -0,0 +1,34 @@
+import Extensions from "../Enums/Extensions";
+import { DropDownItem } from "../../DropDownMenu";
+import { ReactElement } from "react";
+import { ButtonProps } from "../../Button";
+import { Editor } from "@tiptap/react";
+import { DropDownMenuProps } from "../../DropDownMenu/DropDownMenu";
+export interface BubbleMenuProps {
+    className?: string;
+    editor: Editor;
+    rect: DOMRect;
+    open: boolean;
+    onOpen?: (element: HTMLElement) => void;
+    customMenuItems?: BubbleItem[];
+}
+interface BubbleMenuDropDownItem extends DropDownItem {
+    data?: {
+        command?: (editor: Editor, selectedText: string) => void;
+    };
+}
+export type BubbleItem = {
+    name: Extensions | string;
+    icon?: React.FC<any>;
+    type?: "button" | "menu";
+    label?: string | Element;
+    items?: BubbleMenuDropDownItem[];
+    arrow?: boolean;
+    isActive?: (editor: Editor) => boolean;
+    buttonRender?: (props: any) => ReactElement;
+    buttonProps?: ButtonProps;
+    dropDownProps?: DropDownMenuProps;
+    onClick?: (editor: Editor) => void;
+};
+declare const BubbleMenu: React.FC<BubbleMenuProps>;
+export default BubbleMenu;

package/dist/RichTextEditor/Components/BubbleMenu.js

@@ -0,0 +1,276 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import Extensions from "../Enums/Extensions";
+import { BoldIcon, ItalicIcon, UnderlineIcon, CaseSensitiveIcon, ListIcon, ListOrderedIcon, StrikethroughIcon, Heading1Icon, Heading2Icon, Heading3Icon, Heading4Icon, RemoveFormattingIcon, } from "lucide-react";
+import DropDownMenu from "../../DropDownMenu";
+import { FloatingPortal, useFloating } from "@floating-ui/react";
+import { useEffect, useRef } from "react";
+import Button from "../../Button";
+const getMenuItems = (editor, customMenuItems) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const node = (_c = (_b = (_a = editor === null || editor === void 0 ? void 0 : editor.state) === null || _a === void 0 ? void 0 : _a.selection) === null || _b === void 0 ? void 0 : _b.$from) === null || _c === void 0 ? void 0 : _c.parent;
+    const pos = (_e = (_d = editor === null || editor === void 0 ? void 0 : editor.state) === null || _d === void 0 ? void 0 : _d.selection) === null || _e === void 0 ? void 0 : _e.$from;
+    let withinUnorderedList = false;
+    let withinOrderedList = false;
+    // Traverse the node ancestors
+    pos.path.forEach((node) => {
+        var _a, _b;
+        if (((_a = node === null || node === void 0 ? void 0 : node.type) === null || _a === void 0 ? void 0 : _a.name) === "bulletList") {
+            withinUnorderedList = true;
+        }
+        else if (((_b = node === null || node === void 0 ? void 0 : node.type) === null || _b === void 0 ? void 0 : _b.name) === "orderedList") {
+            withinOrderedList = true;
+        }
+    });
+    const attrs = node === null || node === void 0 ? void 0 : node.attrs;
+    let nodeTypeLabel = "Select Type";
+    let nodeTypeIcon = null;
+    if (withinOrderedList) {
+        nodeTypeLabel = "Ordered List";
+        nodeTypeIcon = _jsx(ListOrderedIcon, { size: 16 });
+    }
+    else if (withinUnorderedList) {
+        nodeTypeLabel = "Bullet List";
+        nodeTypeIcon = _jsx(ListIcon, { size: 16 });
+    }
+    else if (((_f = node === null || node === void 0 ? void 0 : node.type) === null || _f === void 0 ? void 0 : _f.name) === "paragraph") {
+        nodeTypeLabel = "Text";
+        nodeTypeIcon = _jsx(CaseSensitiveIcon, { size: 16 });
+    }
+    else if (((_g = node === null || node === void 0 ? void 0 : node.type) === null || _g === void 0 ? void 0 : _g.name) === "heading") {
+        const level = attrs === null || attrs === void 0 ? void 0 : attrs.level;
+        nodeTypeLabel = `Heading ${level}`;
+        nodeTypeIcon =
+            level === 1 ? (_jsx(Heading1Icon, { size: 16 })) : level === 2 ? (_jsx(Heading2Icon, { size: 16 })) : level === 3 ? (_jsx(Heading3Icon, { size: 16 })) : (_jsx(Heading4Icon, { size: 16 }));
+    }
+    return [
+        ...customMenuItems,
+        {
+            name: "node_type",
+            label: nodeTypeLabel,
+            type: "menu",
+            arrow: true,
+            buttonProps: {
+                leftSection: nodeTypeIcon,
+                style: { fontSize: 11, padding: "4px" },
+            },
+            items: [
+                {
+                    label: "Text",
+                    value: "text",
+                    leftSection: _jsx(CaseSensitiveIcon, { size: 16 }),
+                    data: {
+                        command: (editor) => {
+                            // remove ordered list
+                            editor
+                                .chain()
+                                .focus()
+                                .liftListItem("listItem")
+                                .setParagraph()
+                                .run();
+                        },
+                    },
+                },
+                {
+                    label: "Heading 1",
+                    value: "heading_1",
+                    leftSection: _jsx(Heading1Icon, { size: 16 }),
+                    data: {
+                        command: (editor) => {
+                            editor.chain().focus().setHeading({ level: 1 }).run();
+                        },
+                    },
+                },
+                {
+                    label: "Heading 2",
+                    value: "heading_2",
+                    leftSection: _jsx(Heading2Icon, { size: 16 }),
+                    data: {
+                        command: (editor) => {
+                            editor.chain().focus().setHeading({ level: 2 }).run();
+                        },
+                    },
+                },
+                {
+                    label: "Heading 3",
+                    value: "heading_3",
+                    leftSection: _jsx(Heading3Icon, { size: 16 }),
+                    data: {
+                        command: (editor) => {
+                            editor.chain().focus().setHeading({ level: 3 }).run();
+                        },
+                    },
+                },
+                {
+                    label: "Heading 4",
+                    value: "heading_4",
+                    leftSection: _jsx(Heading4Icon, { size: 16 }),
+                    data: {
+                        command: (editor) => {
+                            editor.chain().focus().setHeading({ level: 4 }).run();
+                        },
+                    },
+                },
+                {
+                    label: "Bullet List",
+                    value: "bullet_list",
+                    leftSection: _jsx(ListIcon, { size: 16 }),
+                    data: {
+                        command: (editor) => {
+                            editor.chain().focus().toggleBulletList().run();
+                        },
+                    },
+                },
+                {
+                    label: "Ordered List",
+                    value: "ordered_list",
+                    leftSection: _jsx(ListOrderedIcon, { size: 16 }),
+                    data: {
+                        command: (editor) => {
+                            editor.chain().focus().toggleOrderedList().run();
+                        },
+                    },
+                },
+            ],
+        },
+        {
+            name: Extensions.Bold,
+            icon: BoldIcon,
+            type: "button",
+            isActive: (editor) => editor.isActive("bold"),
+            onClick: (editor) => {
+                editor.chain().focus().toggleBold().run();
+            },
+        },
+        {
+            name: Extensions.Italic,
+            icon: ItalicIcon,
+            type: "button",
+            isActive: (editor) => editor.isActive("italic"),
+            onClick: (editor) => {
+                editor.chain().focus().toggleItalic().run();
+            },
+        },
+        {
+            name: Extensions.Underline,
+            icon: UnderlineIcon,
+            type: "button",
+            isActive: (editor) => editor.isActive("underline"),
+            onClick: (editor) => {
+                editor.chain().focus().toggleUnderline().run();
+            },
+        },
+        {
+            name: Extensions.Strike,
+            icon: StrikethroughIcon,
+            type: "button",
+            isActive: (editor) => editor.isActive("strike"),
+            onClick: (editor) => {
+                editor.chain().focus().toggleStrike().run();
+            },
+        },
+        {
+            name: Extensions.ClearFormatting,
+            icon: RemoveFormattingIcon,
+            type: "button",
+            onClick: (editor) => {
+                editor.chain().focus().setParagraph().run();
+                editor.chain().focus().unsetAllMarks().run();
+            },
+        },
+    ];
+};
+const BubbleMenuContent = styled.div `
+  position: fixed;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 2px;
+  gap: 2px;
+
+  color: ${({ theme }) => theme.palette.text.primary};
+  background-color: ${({ theme }) => theme.palette.input.background};
+
+  border-radius: 5px;
+  border: 1px solid ${(props) => props.theme.palette.divider};
+
+  font-size: 0.8rem;
+
+  min-height: 30px;
+
+  opacity: 0;
+  transform: scale(0.25); /* Start at half size */
+  animation: fadeInEffect 90ms forwards;
+
+  /* Animation to handle the fade in */
+  @keyframes fadeInEffect {
+    0% {
+      opacity: 0;
+      transform: scale(0.25);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+`;
+const BubbleItemButton = styled(Button) `
+  font-size: 0.5rem;
+  font-weight: 500;
+  padding: 4px;
+  height: auto;
+
+  &.is-active {
+    opacity: 1;
+    color: ${({ theme }) => theme.palette.primary.main};
+  }
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.action.hover};
+  }
+`;
+const BubbleMenu = ({ editor, rect, open, onOpen, customMenuItems = [], }) => {
+    var _a;
+    const menuRef = useRef(null);
+    const { refs, elements } = useFloating();
+    useEffect(() => {
+        if (open && onOpen) {
+            onOpen(elements.floating);
+        }
+    }, [open, onOpen, elements.floating]);
+    const elementWidth = ((_a = elements.floating) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
+    const { from, to } = editor.state.selection;
+    const selectedText = editor.state.doc.textBetween(from, to);
+    let top = (rect === null || rect === void 0 ? void 0 : rect.top) ? rect.top - 50 : 0;
+    if (top < 10) {
+        top = 10; // add some padding
+    }
+    let left = (rect === null || rect === void 0 ? void 0 : rect.left) ? rect.left + rect.width / 2 - elementWidth / 2 : 0;
+    if (left < 10) {
+        left = 10; // add some padding
+    }
+    // Check if the menu is overflowing on the right
+    const rightOverflow = left + elementWidth - window.innerWidth;
+    if (rightOverflow > -10) {
+        left -= rightOverflow + 10; // add some padding
+    }
+    return (_jsx(FloatingPortal, { preserveTabOrder: true, children: open && (_jsx(BubbleMenuContent, { ref: (ref) => {
+                refs.setFloating(ref);
+                menuRef.current = ref;
+            }, style: {
+                top,
+                left,
+            }, children: getMenuItems(editor, customMenuItems).map((item) => {
+                var _a;
+                if (item.type === "button") {
+                    const isActive = (_a = item.isActive) === null || _a === void 0 ? void 0 : _a.call(item, editor);
+                    return (_jsx(BubbleItemButton, { variant: "subtle", onClick: () => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, editor); }, color: isActive ? "primary" : undefined, selected: isActive, children: item.icon && _jsx(item.icon, { size: 14 }) }, item.name));
+                }
+                if (item.type === "menu") {
+                    return (_jsx(DropDownMenu, Object.assign({ data: item.items, size: "xs", arrow: item.arrow, buttonProps: item.buttonProps, variant: "subtle", buttonRender: item.buttonRender, onItemSelect: (item) => { var _a, _b; return (_b = (_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.command) === null || _b === void 0 ? void 0 : _b.call(_a, editor, selectedText); } }, item.dropDownProps, { children: item.icon
+                            ? (_jsx(item.icon, { size: 14 }))
+                            : (item.label || item.name) }), item.name));
+                }
+            }) })) }));
+};
+export default BubbleMenu;

package/dist/RichTextEditor/Components/SaveBadge.d.ts

@@ -0,0 +1,6 @@
+declare const SavingBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<{
+    className?: string;
+}, never>> & string & Omit<({ className }: {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export default SavingBadge;

package/dist/RichTextEditor/Components/SaveBadge.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+const SavingBadge = styled(({ className }) => {
+    return (_jsx("div", { className: className, children: _jsx("div", { className: "saving-badge", children: _jsx("span", { children: "Saving..." }) }) }));
+}) `
+  position: absolute;
+  top: 0px;
+  left: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: ${({ theme }) => theme.palette.text.secondary};
+`;
+export default SavingBadge;

package/dist/RichTextEditor/Enums/Extensions.d.ts

@@ -1,6 +1,16 @@
 declare enum Extensions {
+    ClearFormatting = "clearFormatting",
     HorizontalRule = "horizontalRule",
     Underline = "underline",
+    Bold = "bold",
+    Italic = "italic",
+    Strike = "strike",
+    BulletList = "bulletList",
+    OrderedList = "orderedList",
+    AlignLeft = "alignLeft",
+    AlignCenter = "alignCenter",
+    AlignRight = "alignRight",
+    AlignJustify = "alignJustify",
     TextAlign = "textAlign",
     Table = "table",
     TableCell = "tableCell",
@@ -10,6 +20,7 @@ declare enum Extensions {
     Focus = "focus",
     Image = "image",
     CustomStorage = "storage",
-    SlashCommand = "slashCommand"
+    SlashCommand = "slashCommand",
+    BubbleMenu = "bubbleMenu"
 }
 export default Extensions;

package/dist/RichTextEditor/Enums/Extensions.js

@@ -1,7 +1,17 @@
 var Extensions;
 (function (Extensions) {
+    Extensions["ClearFormatting"] = "clearFormatting";
     Extensions["HorizontalRule"] = "horizontalRule";
     Extensions["Underline"] = "underline";
+    Extensions["Bold"] = "bold";
+    Extensions["Italic"] = "italic";
+    Extensions["Strike"] = "strike";
+    Extensions["BulletList"] = "bulletList";
+    Extensions["OrderedList"] = "orderedList";
+    Extensions["AlignLeft"] = "alignLeft";
+    Extensions["AlignCenter"] = "alignCenter";
+    Extensions["AlignRight"] = "alignRight";
+    Extensions["AlignJustify"] = "alignJustify";
     Extensions["TextAlign"] = "textAlign";
     Extensions["Table"] = "table";
     Extensions["TableCell"] = "tableCell";
@@ -12,5 +22,6 @@ var Extensions;
     Extensions["Image"] = "image";
     Extensions["CustomStorage"] = "storage";
     Extensions["SlashCommand"] = "slashCommand";
+    Extensions["BubbleMenu"] = "bubbleMenu";
 })(Extensions || (Extensions = {}));
 export default Extensions;

package/dist/RichTextEditor/Extensions/BubbleMenuExtension.d.ts

@@ -0,0 +1,7 @@
+import { Extension } from "@tiptap/core";
+import { BubbleItem } from "../Components/BubbleMenu";
+export type BubbleMenuOptions = {
+    customMenuItems?: BubbleItem[];
+};
+declare const BubbleMenu: Extension<any, any>;
+export default BubbleMenu;

package/dist/RichTextEditor/Extensions/BubbleMenuExtension.js

@@ -0,0 +1,157 @@
+import { Extension, isNodeSelection, isTextSelection, posToDOMRect, } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { ReactRenderer } from "@tiptap/react";
+import BubbleMenuComponent from "../Components/BubbleMenu";
+class Menu {
+    constructor({ view, editor, customMenuItems, }) {
+        this.mousedownHandler = (event) => {
+            this.preventShow = true;
+        };
+        this.mouseUpHandler = (event) => {
+            this.preventShow = false;
+            this.update(this.editor.view);
+        };
+        this.focusHandler = () => {
+            // this.editor.commands.setTextSelection({ from: 0, to: 0 });
+            // we use `setTimeout` to make sure `selection` is already updated
+            setTimeout(() => this.update(this.editor.view));
+        };
+        this.blurHandler = ({ event }) => {
+            var _a;
+            if (this.preventShow) {
+                this.preventShow = false;
+                return;
+            }
+            if ((event === null || event === void 0 ? void 0 : event.relatedTarget) &&
+                ((_a = this.floating) === null || _a === void 0 ? void 0 : _a.contains(event === null || event === void 0 ? void 0 : event.relatedTarget))) {
+                return;
+            }
+            // clear text selection
+            // this.editor.commands.setTextSelection({ from: 0, to: 0 });
+            this.hide();
+        };
+        this.editor = editor;
+        this.view = view;
+        this.rect = null;
+        this.preventShow = false;
+        this.floating = null;
+        this.isOpen = false;
+        // create and mount react component
+        if (!this.component) {
+            this.component = new ReactRenderer(BubbleMenuComponent, {
+                props: {
+                    editor: this.editor,
+                    open: false,
+                    onOpen: (ref) => {
+                        this.floating = ref;
+                    },
+                    customMenuItems,
+                },
+                editor: this.editor,
+            });
+            document.body.appendChild(this.component.element);
+        }
+        // don't show the bubble during selection of text
+        this.view.dom.addEventListener("mousedown", this.mousedownHandler, {
+            capture: true,
+        });
+        this.view.dom.addEventListener("mouseup", this.mouseUpHandler);
+        this.editor.on("blur", this.blurHandler);
+        this.editor.on("focus", this.focusHandler);
+    }
+    update(view, oldState) {
+        var _a;
+        const { state, composing } = view;
+        const { doc, selection } = state;
+        const { empty, ranges } = selection;
+        const from = Math.min(...ranges.map((range) => range.$from.pos));
+        const to = Math.max(...ranges.map((range) => range.$to.pos));
+        const selectionChanged = !(oldState === null || oldState === void 0 ? void 0 : oldState.selection.eq(view.state.selection));
+        const docChanged = !(oldState === null || oldState === void 0 ? void 0 : oldState.doc.eq(view.state.doc));
+        const isSame = !selectionChanged && !docChanged;
+        if (composing || isSame) {
+            return;
+        }
+        // Sometime check for `empty` is not enough.
+        // Doubleclick an empty paragraph returns a node size of 2.
+        // So we check also for an empty text size.
+        const isEmptyTextBlock = !doc.textBetween(from, to).length && isTextSelection(state.selection);
+        // When clicking on a element inside the bubble menu the editor "blur" event
+        // is called and the bubble menu item is focussed. In this case we should
+        // consider the menu as part of the editor and keep showing the menu
+        const isChildOfMenu = (_a = this === null || this === void 0 ? void 0 : this.floating) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement);
+        const hasEditorFocus = view.hasFocus() || isChildOfMenu;
+        if (!hasEditorFocus ||
+            empty ||
+            isEmptyTextBlock ||
+            !this.editor.isEditable ||
+            this.preventShow) {
+            this.hide();
+        }
+        else {
+            // only set position when it is not already open
+            // otherwise the menu will jump around when the selection changes or text formatting is applied
+            if (!this.isOpen) {
+                if (isNodeSelection(state.selection)) {
+                    let node = view.nodeDOM(from);
+                    const nodeViewWrapper = node.dataset.nodeViewWrapper
+                        ? node
+                        : node.querySelector("[data-node-view-wrapper]");
+                    if (nodeViewWrapper) {
+                        node = nodeViewWrapper.firstChild;
+                    }
+                    if (node) {
+                        this.rect = node.getBoundingClientRect();
+                    }
+                }
+                else {
+                    this.rect = posToDOMRect(view, from, to);
+                }
+            }
+            this.show();
+        }
+    }
+    show() {
+        if (this.component) {
+            this.component.updateProps({ open: true, rect: this.rect });
+            this.isOpen = true;
+        }
+    }
+    hide() {
+        if (this.component) {
+            this.component.updateProps({ open: false, rect: null });
+            this.isOpen = false;
+        }
+    }
+    destroy() {
+        if (this.component) {
+            this.view.dom.removeEventListener("mousedown", this.mousedownHandler);
+            this.view.dom.removeEventListener("mouseup", this.mouseUpHandler);
+            this.component.destroy();
+        }
+    }
+}
+const BubbleMenu = Extension.create({
+    name: "bubbleMenu",
+    addOptions() {
+        return {
+            bubbleMenuOptions: {},
+        };
+    },
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                key: new PluginKey("bubbleMenu"),
+                view: (view) => {
+                    var _a;
+                    return new Menu({
+                        view,
+                        editor: this.editor,
+                        customMenuItems: ((_a = this === null || this === void 0 ? void 0 : this.options) === null || _a === void 0 ? void 0 : _a.customMenuItems) || [],
+                    });
+                },
+            }),
+        ];
+    },
+});
+export default BubbleMenu;

package/dist/RichTextEditor/Extensions/SlashCommandList.d.ts

@@ -5,5 +5,5 @@ interface SlashCommandListProps {
     editor: any;
     range: any;
 }
-declare const SlashCommandList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<SlashCommandListProps, never>> & string & Omit<({ className, items, command, editor, range }: SlashCommandListProps) => import("react/jsx-runtime").JSX.Element | null, keyof import("react").Component<any, {}, any>>;
+declare const SlashCommandList: ({ items, command, editor, range, }: SlashCommandListProps) => import("react/jsx-runtime").JSX.Element | null;
 export default SlashCommandList;

package/dist/RichTextEditor/Extensions/SlashCommandList.js

@@ -1,6 +1,69 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react";
 import styled from "styled-components";
+const SlashCommandListContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  z-index: 16001;
+  height: auto;
+  max-height: 330px;
+  width: 18rem;
+  overflow-y: auto;
+  border: 1px solid ${({ theme }) => theme.palette.divider};
+  border-radius: 0.375rem;
+  background-color: ${({ theme }) => theme.palette.background.default};
+  padding: 0.5rem;
+  transition: all 0.2s ease-in-out;
+`;
+const SlashCommandItem = styled.button `
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-start;
+  border-radius: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  text-align: left;
+  font-size: 0.875rem;
+  color: ${({ theme }) => theme.palette.text.primary};
+  background-color: ${({ theme }) => theme.palette.background.default};
+  outline: none;
+  border: none;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.action.hover};
+    cursor: pointer;
+  }
+
+  &.selected {
+    background-color: ${({ theme }) => theme.palette.action.hover};
+  }
+`;
+const CommandIcon = styled.div `
+  display: flex;
+  width: 2.5rem;
+  height: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  border: 1px solid ${({ theme }) => theme.palette.divider};
+  margin-right: 0.5rem;
+`;
+const CommandTitle = styled.div `
+  font-weight: 500;
+  font-size: 0.8rem;
+  margin-bottom: 0.125rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
+const CommandDescription = styled.div `
+  font-size: 0.75rem;
+  color: ${({ theme }) => theme.palette.text.secondary};
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
 const updateScrollView = (container, item) => {
     const containerHeight = container.offsetHeight;
     const itemHeight = item ? item.offsetHeight : 0;
@@ -13,7 +76,7 @@ const updateScrollView = (container, item) => {
         container.scrollTop += bottom - containerHeight - container.scrollTop + 5;
     }
 };
-const SlashCommandList = styled(({ className, items, command, editor, range }) => {
+const SlashCommandList = ({ items, command, editor, range, }) => {
     const [selectedIndex, setSelectedIndex] = useState(0);
     const selectItem = useCallback((index) => {
         const item = items[index];
@@ -63,76 +126,8 @@ const SlashCommandList = styled(({ className, items, command, editor, range }) =
         if (item && container)
             updateScrollView(container, item);
     }, [selectedIndex]);
-    return items.length > 0 ? (_jsx("div", { id: "slash-command", ref: commandListContainer, className: className + " slash-command", children: items.map((item, index) => {
-            return (_jsxs("button", { className: `slash-command-item ${index === selectedIndex ? "selected" : ""}`, onClick: () => selectItem(index), children: [_jsx("div", { className: "item-icon", children: _jsx(item.icon, { size: 18 }) }), _jsxs("div", { children: [_jsx("div", { className: "item-title", children: item.title }), _jsx("div", { className: "item-description", children: item.description })] })] }, index));
+    return items.length > 0 ? (_jsx(SlashCommandListContainer, { ref: commandListContainer, className: "slash-command", children: items.map((item, index) => {
+            return (_jsxs(SlashCommandItem, { className: `slash-command-item ${index === selectedIndex ? "selected" : ""}`, onClick: () => selectItem(index), children: [_jsx(CommandIcon, { className: "item-icon", children: _jsx(item.icon, { size: 18 }) }), _jsxs("div", { children: [_jsx(CommandTitle, { className: "item-title", children: item.title }), _jsx(CommandDescription, { className: "item-description", children: item.description })] })] }, index));
         }) })) : null;
-}) `
-  &.slash-command {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-    z-index: 16001;
-    height: auto;
-    max-height: 330px;
-    width: 18rem;
-    overflow-y: auto;
-    border: 1px solid ${({ theme }) => theme.palette.divider};
-    border-radius: 0.375rem;
-    background-color: ${({ theme }) => theme.palette.background.default};
-    padding: 0.5rem;
-    transition: all 0.2s ease-in-out;
-  }
-
-  .slash-command-item {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    justify-content: flex-start;
-    border-radius: 0.375rem;
-    padding: 0.25rem 0.5rem;
-    text-align: left;
-    font-size: 0.875rem;
-    color: ${({ theme }) => theme.palette.text.primary};
-    background-color: ${({ theme }) => theme.palette.background.default};
-    outline: none;
-    border: none;
-
-    &:hover {
-      background-color: ${({ theme }) => theme.palette.action.hover};
-      cursor: pointer;
-    }
-  }
-
-  .slash-command-item.selected {
-    background-color: ${({ theme }) => theme.palette.action.hover};
-  }
-
-  .item-icon {
-    display: flex;
-    width: 2.5rem;
-    height: 2.5rem;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.375rem;
-    border: 1px solid ${({ theme }) => theme.palette.divider};
-    margin-right: 0.5rem;
-  }
-
-  .item-title {
-    font-weight: 600;
-    font-size: 0.8rem;
-    margin-bottom: 0.125rem;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  .item-description {
-    font-size: 0.75rem;
-    color: ${({ theme }) => theme.palette.text.secondary};
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-`;
+};
 export default SlashCommandList;

package/dist/RichTextEditor/Extensions/getSlashCommand.js

@@ -18,55 +18,6 @@ import SlashCommandList from "./SlashCommandList";
 import SlashCommands from "../Enums/SlashCommands";
 import moment from "moment/moment.js";
 const SlashCommandPluginKey = new PluginKey("slash-command");
-const Command = Extension.create({
-    name: "slash-command",
-    priority: 1000,
-    addKeyboardShortcuts() {
-        return {
-            Enter: ({ editor }) => {
-                // Prevent Enter key when slash command is active
-                const slashCommandState = SlashCommandPluginKey.getState(editor.state);
-                if (slashCommandState && slashCommandState.active) {
-                    return true; // Returning true prevents default behavior.
-                }
-                return false; // Returning false allows default behavior.
-            },
-            ArrowUp: ({ editor }) => {
-                // Prevent ArrowUp key when slash command is active
-                const slashCommandState = SlashCommandPluginKey.getState(editor.state);
-                if (slashCommandState && slashCommandState.active) {
-                    return true; // Returning true prevents default behavior.
-                }
-                return false; // Returning false allows default behavior.
-            },
-            ArrowDown: ({ editor }) => {
-                // Prevent ArrowDown key when slash command is active
-                const slashCommandState = SlashCommandPluginKey.getState(editor.state);
-                if (slashCommandState && slashCommandState.active) {
-                    return true; // Returning true prevents default behavior.
-                }
-                return false; // Returning false allows default behavior.
-            },
-            // Add more keys here as needed
-        };
-    },
-    addOptions() {
-        return {
-            suggestion: {
-                char: "/",
-                pluginKey: SlashCommandPluginKey,
-                command: ({ editor, range, props }) => {
-                    props.command({ editor, range });
-                },
-            },
-        };
-    },
-    addProseMirrorPlugins() {
-        return [
-            Suggestion(Object.assign({ editor: this.editor }, this.options.suggestion)),
-        ];
-    },
-});
 const getCommandItems = (values, options) => {
     var _a;
     if ((_a = options === null || options === void 0 ? void 0 : options.commands) === null || _a === void 0 ? void 0 : _a.includes(SlashCommands.Image)) {
@@ -285,8 +236,57 @@ const renderItems = () => {
         },
     };
 };
+const SlashCommand = Extension.create({
+    name: "slash-command",
+    priority: 1000,
+    addKeyboardShortcuts() {
+        return {
+            Enter: ({ editor }) => {
+                // Prevent Enter key when slash command is active
+                const slashCommandState = SlashCommandPluginKey.getState(editor.state);
+                if (slashCommandState && slashCommandState.active) {
+                    return true; // Returning true prevents default behavior.
+                }
+                return false; // Returning false allows default behavior.
+            },
+            ArrowUp: ({ editor }) => {
+                // Prevent ArrowUp key when slash command is active
+                const slashCommandState = SlashCommandPluginKey.getState(editor.state);
+                if (slashCommandState && slashCommandState.active) {
+                    return true; // Returning true prevents default behavior.
+                }
+                return false; // Returning false allows default behavior.
+            },
+            ArrowDown: ({ editor }) => {
+                // Prevent ArrowDown key when slash command is active
+                const slashCommandState = SlashCommandPluginKey.getState(editor.state);
+                if (slashCommandState && slashCommandState.active) {
+                    return true; // Returning true prevents default behavior.
+                }
+                return false; // Returning false allows default behavior.
+            },
+            // Add more keys here as needed
+        };
+    },
+    addOptions() {
+        return {
+            suggestion: {
+                char: "/",
+                pluginKey: SlashCommandPluginKey,
+                command: ({ editor, range, props }) => {
+                    props.command({ editor, range });
+                },
+            },
+        };
+    },
+    addProseMirrorPlugins() {
+        return [
+            Suggestion(Object.assign({ editor: this.editor }, this.options.suggestion)),
+        ];
+    },
+});
 const getSlashCommand = (options) => {
-    return Command.configure({
+    return SlashCommand.configure({
         suggestion: {
             items: (e) => getCommandItems(e, options),
             render: renderItems,

package/dist/RichTextEditor/Extensions/getTiptapExtensions.d.ts

@@ -1,10 +1,12 @@
 import { Extension } from "@tiptap/core";
 import { HandleImageUpload } from "../Plugins/UploadImagesPlugin";
 import Extensions from "../Enums/Extensions";
+import { BubbleMenuOptions } from "./BubbleMenuExtension";
 export type ExtensionType = (typeof Extensions)[keyof typeof Extensions];
 interface GetTipTapExtensionsProps {
     extensions?: ExtensionType[];
     slashCommands?: any[];
+    bubbleMenuOptions?: BubbleMenuOptions;
     handleImageUpload?: HandleImageUpload;
 }
 declare const getTipTapExtensions: (props: GetTipTapExtensionsProps) => Extension[];

package/dist/RichTextEditor/Extensions/getTiptapExtensions.js

@@ -13,6 +13,7 @@ import Focus from "@tiptap/extension-focus";
 import UploadImagesPlugin from "../Plugins/UploadImagesPlugin";
 import getSlashCommand from "./getSlashCommand";
 import Extensions from "../Enums/Extensions";
+import BubbleMenu from "./BubbleMenuExtension";
 const CustomImage = TiptapImage.extend({
     // Add data-uuid attribute to image
     addAttributes() {
@@ -42,7 +43,7 @@ const CustomStorage = Extension.create({
         };
     },
 });
-const getTipTapExtensions = ({ extensions = [], slashCommands = [], handleImageUpload, }) => {
+const getTipTapExtensions = ({ extensions = [], slashCommands = [], bubbleMenuOptions, handleImageUpload, }) => {
     return [
         {
             name: "starterKit",
@@ -138,20 +139,16 @@ const getTipTapExtensions = ({ extensions = [], slashCommands = [], handleImageU
             name: Extensions.Placeholder,
             extension: Placeholder.configure({
                 placeholder: ({ node }) => {
-                    // check if node type is tablcell
-                    // if it is, return empty string
-                    // table cells always contain a paragraph node, so no need to add placeholder to it
-                    // other it shows two placeholders wihtin the cell
-                    if (node.type.name === "tableCell") {
-                        return "";
-                    }
-                    if (!extensions.includes(Extensions.SlashCommand)) {
-                        return "Enter text...";
-                    }
+                    const text = !extensions.includes(Extensions.SlashCommand)
+                        ? "Enter text..."
+                        : "Press '/' for commands...";
                     if (node.type.name === "heading") {
                         return `Heading ${node.attrs.level}`;
                     }
-                    return "Press '/' for commands...";
+                    if (node.type.name === "paragraph") {
+                        return text;
+                    }
+                    return "";
                 },
                 includeChildren: true,
             }),
@@ -161,6 +158,11 @@ const getTipTapExtensions = ({ extensions = [], slashCommands = [], handleImageU
             category: "default",
             extension: CustomStorage,
         },
+        {
+            name: Extensions.BubbleMenu,
+            category: "default",
+            extension: BubbleMenu.configure(bubbleMenuOptions),
+        },
         {
             name: Extensions.SlashCommand,
             extension: getSlashCommand({

package/dist/RichTextEditor/RichTextEditor.d.ts

@@ -1,6 +1,7 @@
 import { Editor } from "@tiptap/react";
 import { ExtensionType } from "./Extensions/getTiptapExtensions";
 import { HandleImageUpload } from "./Plugins/UploadImagesPlugin";
+import { BubbleMenuOptions } from "./Extensions/BubbleMenuExtension";
 interface RichTextEditorProps {
     className?: string;
     editorInstanceRef?: React.RefObject<Editor>;
@@ -14,6 +15,7 @@ interface RichTextEditorProps {
     saving?: boolean;
     onChange?: (value: string) => void;
     handleImageUpload?: HandleImageUpload;
+    bubbleMenuOptions?: BubbleMenuOptions;
     style?: React.CSSProperties;
 }
 declare const RichTextEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<RichTextEditorProps & import("react").RefAttributes<unknown>, "ref"> & {

package/dist/RichTextEditor/RichTextEditor.js

@@ -5,7 +5,8 @@ import { EditorContent, useEditor } from "@tiptap/react";
 import Toolbar from "./Toolbar";
 import getTipTapExtensions from "./Extensions/getTiptapExtensions";
 import Extensions from "./Enums/Extensions";
-const RichTextEditor = styled(forwardRef(({ className, editorInstanceRef, defaultValue = "", readOnly = false, font, showToolbar = true, saving = false, extensions = [], slashCommands = [], onChange, handleImageUpload, style, }, ref) => {
+import SaveBadge from "./Components/SaveBadge";
+const RichTextEditor = styled(forwardRef(({ className, editorInstanceRef, defaultValue = "", readOnly = false, font, showToolbar = true, saving = false, extensions = [], slashCommands = [], bubbleMenuOptions, onChange, handleImageUpload, style, }, ref) => {
     // check if image extension is included
     if (extensions === null || extensions === void 0 ? void 0 : extensions.includes(Extensions.Image)) {
         // Ensure that handleImageUpload is provided
@@ -19,6 +20,7 @@ const RichTextEditor = styled(forwardRef(({ className, editorInstanceRef, defaul
         extensions: getTipTapExtensions({
             extensions,
             slashCommands,
+            bubbleMenuOptions,
             handleImageUpload,
         }),
         onUpdate: ({ editor }) => {
@@ -31,7 +33,7 @@ const RichTextEditor = styled(forwardRef(({ className, editorInstanceRef, defaul
             _ref.current = editor;
         }
     }, [editor]);
-    return (_jsxs("div", { className: className, children: [showToolbar && _jsx(Toolbar, { editor: editor }), _jsx(EditorContent, { className: "editor-content", editor: editor, "data-font": font || null, style: style })] }));
+    return (_jsxs("div", { className: className, children: [showToolbar && _jsx(Toolbar, { editor: editor }), saving && _jsx(SaveBadge, {}), _jsx(EditorContent, { className: "editor-content", editor: editor, "data-font": font || null, style: style })] }));
 })) `
   position: relative;
   display: flex;
@@ -41,6 +43,10 @@ const RichTextEditor = styled(forwardRef(({ className, editorInstanceRef, defaul
   justify-content: flex-start;
   align-items: center;
 
+  ::selection {
+    background-color: #705324;
+  }
+
   .editor-content {
     height: ${({ height }) => height || "100%"};
     width: 100%;

package/dist/SelectBox/SelectBox.js

@@ -166,7 +166,7 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
         .concat(customItems) // Add custom items to the list
         .filter((item) => {
         const itemValue = (isObjectArray ? item.label : item);
-        return itemValue.toLowerCase().includes(searchValue.toLowerCase());
+        return itemValue === null || itemValue === void 0 ? void 0 : itemValue.toLowerCase().includes(searchValue.toLowerCase());
     })
         .sort((a, b) => {
         if (grouped) {
@@ -219,9 +219,9 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
     };
     const handleClear = (e) => {
         e.preventDefault();
-        e.stopPropagation();
         if (inputRef.current)
             inputRef.current.value = "";
+        setIsOpen(false);
         handleChangeSelection(null);
         setSelected(null);
         setSearchValue("");
@@ -434,7 +434,10 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
             setDropDownHeight(bottomHeight);
         };
     }, [topHeight, bottomHeight, isOpen]);
-    return (_jsxs("div", { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: refs.setReference, onMouseDown: () => setIsOpen(true), width: width, onKeyDown: handleKeyDown, "data-open": isOpen, children: [_jsx(Input, { ref: inputRef, onChange: debouncedHandleOnChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable, "data-button-right": arrow || clearable }), clearable && (selected || !!((_h = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _h === void 0 ? void 0 : _h.value)) ? (_jsx(ClearButton, { className: "input-btn", onClick: handleClear })) : arrow ? (_jsx(ArrowButton, { onClick: (e) => {
+    return (_jsxs("div", { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: refs.setReference, onMouseDown: () => setIsOpen(true), width: width, onKeyDown: handleKeyDown, "data-open": isOpen, children: [_jsx(Input, { ref: inputRef, onChange: debouncedHandleOnChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable, "data-button-right": arrow || clearable }), clearable && (selected || !!((_h = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _h === void 0 ? void 0 : _h.value)) ? (_jsx(ClearButton, { className: "input-btn", onClick: handleClear, onMouseDown: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        } })) : arrow ? (_jsx(ArrowButton, { onClick: (e) => {
                             e.preventDefault();
                             // e.stopPropagation();
                         }, onMouseDown: (e) => {

package/dist/TagBox/TagBox.js

@@ -359,7 +359,6 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
     };
     const handleClear = (e) => {
         e.preventDefault();
-        e.stopPropagation();
         if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)
             inputRef.current.value = "";
         onChange === null || onChange === void 0 ? void 0 : onChange([]);
@@ -551,7 +550,10 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
                                         }
                                         update();
                                     }, placeholder: placeholder, size: size, readOnly: !(searchable || allowCustomValue) }))] }) }), clearable &&
-                        (selectedItems.length > 0 || !!((_f = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _f === void 0 ? void 0 : _f.value)) ? (_jsx(ClearButton, { onClick: handleClear })) : arrow ? (_jsx(ArrowButton, { onClick: (e) => {
+                        (selectedItems.length > 0 || !!((_f = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _f === void 0 ? void 0 : _f.value)) ? (_jsx(ClearButton, { onClick: handleClear, onMouseDown: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        } })) : arrow ? (_jsx(ArrowButton, { onClick: (e) => {
                             e.preventDefault();
                         }, onMouseDown: (e) => {
                             e.preventDefault();

package/dist/index.d.ts

@@ -3,8 +3,10 @@ export { default as Grid } from "./Grid";
 export { default as TextInput } from "./TextInput";
 export { default as SelectBox } from "./SelectBox";
 export { default as Button } from "./Button";
+export type { ButtonProps } from "./Button";
 export { default as IconButton } from "./IconButton";
 export { default as DropDownMenu } from "./DropDownMenu";
+export type { DropDownItem } from "./DropDownMenu";
 export { default as DateInput } from "./DateInput";
 export { default as TextArea } from "./TextArea";
 export { default as TextAreaInput } from "./TextAreaInput";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.1.47",
+  "version": "1.1.49",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",
@@ -44,6 +44,7 @@
     "moment": "^2.29.1",
     "overlayscrollbars": "^2.6.0",
     "overlayscrollbars-react": "^0.5.6",
+    "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
     "react-icons": "^5.2.1",
     "react-textarea-autosize": "^8.5.3",
@@ -60,6 +61,7 @@
   },
   "devDependencies": {
     "@types/overlayscrollbars": "^1.12.5",
+    "@types/react-dom": "^18.3.0",
     "@types/react-window": "^1.8.8",
     "@types/spark-md5": "^3.0.4",
     "typescript": "^5.5.4"