@monolith-forensics/monolith-ui 1.9.1-dev.8 → 1.9.1-dev.9

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

@@ -3,12 +3,9 @@ import { DropDownItem, DropDownMenuProps } from "../../DropDownMenu";
 import { ReactElement } from "react";
 import { ButtonProps } from "../../Button";
 import { Editor } from "@tiptap/react";
-export interface BubbleMenuProps {
+export interface BubbleMenuContentProps {
     className?: string;
     editor: Editor;
-    rect: DOMRect;
-    open: boolean;
-    onOpen?: (element: HTMLElement) => void;
     customMenuItems?: BubbleItem[];
 }
 interface BubbleMenuDropDownItem extends DropDownItem {
@@ -39,5 +36,8 @@ export type BubbleItem = {
     buttonProps?: Partial<ButtonProps>;
     onClick?: (editor: Editor) => void;
 };
-declare const BubbleMenu: React.FC<BubbleMenuProps>;
+export type BubbleMenuOptions = {
+    customMenuItems?: BubbleItem[];
+};
+declare const BubbleMenu: React.FC<BubbleMenuContentProps>;
 export default BubbleMenu;

package/dist/RichTextEditor/Components/BubbleMenu.js

@@ -3,8 +3,6 @@ import styled, { useTheme } from "styled-components";
 import { Extensions } from "../Enums";
 import { BoldIcon, ItalicIcon, UnderlineIcon, CaseSensitiveIcon, ListIcon, ListOrderedIcon, StrikethroughIcon, Heading1Icon, Heading2Icon, Heading3Icon, Heading4Icon, RemoveFormattingIcon, SquircleIcon, } from "lucide-react";
 import { DropDownMenu, } from "../../DropDownMenu";
-import { FloatingPortal, useFloating } from "@floating-ui/react";
-import { useEffect, useRef } from "react";
 import { Button } from "../../Button";
 import TextColors from "../Enums/TextColors";
 const getMenuItems = (editor, customMenuItems, theme) => {
@@ -224,7 +222,6 @@ const getMenuItems = (editor, customMenuItems, theme) => {
     ];
 };
 const BubbleMenuContent = styled.div `
-  position: fixed;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -272,51 +269,23 @@ const BubbleItemButton = styled(Button) `
     background-color: ${({ theme }) => theme.palette.action.hover};
   }
 `;
-const BubbleMenu = ({ editor, rect, open, onOpen, customMenuItems = [], }) => {
-    var _a;
-    const menuRef = useRef(null);
-    const { refs, elements } = useFloating();
+const BubbleMenu = ({ className, editor, customMenuItems = [], }) => {
     const theme = useTheme();
-    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, "\n", "\n");
-    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, theme).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); }, dropDownProps: {
-                            style: { width: 135 },
-                        } }, item.dropDownProps, { children: item.icon
-                            ? (_jsx(item.icon, { size: 14 }))
-                            : (item.label || item.name) }), item.name));
-                }
-            }) })) }));
+    return (_jsx(BubbleMenuContent, { className: className, children: getMenuItems(editor, customMenuItems, theme).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); }, dropDownProps: {
+                        style: { width: 135 },
+                    } }, item.dropDownProps, { children: item.icon
+                        ? (_jsx(item.icon, { size: 14 }))
+                        : (item.label || item.name) }), item.name));
+            }
+        }) }));
 };
 export default BubbleMenu;

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

@@ -1,12 +1,10 @@
 import { Extension } from "@tiptap/core";
 import { HandleImageUpload } from "../Plugins";
 import { Extensions } from "../Enums";
-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

@@ -10,7 +10,6 @@ import { InputRule, Extension } from "@tiptap/core";
 import { ImageActionsPlugin, UploadImagesPlugin, } from "../Plugins";
 import getSlashCommand from "./getSlashCommand";
 import { Extensions } from "../Enums";
-import BubbleMenu from "./BubbleMenuExtension";
 const CustomImage = TiptapImage.extend({
     // Add data-uuid attribute to image
     addAttributes() {
@@ -42,7 +41,7 @@ const CustomStorage = Extension.create({
         };
     },
 });
-const getTipTapExtensions = ({ extensions = [], slashCommands = [], bubbleMenuOptions, handleImageUpload, }) => {
+const getTipTapExtensions = ({ extensions = [], slashCommands = [], handleImageUpload, }) => {
     return [
         {
             name: "starterKit",
@@ -162,11 +161,6 @@ const getTipTapExtensions = ({ extensions = [], slashCommands = [], bubbleMenuOp
             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,7 +1,7 @@
 import { Editor } from "@tiptap/react";
 import { ExtensionType } from "./Extensions/getTiptapExtensions";
 import { HandleImageUrlUpload, HandleImageUpload } from "./Plugins/UploadImagesPlugin";
-import { BubbleMenuOptions } from "./Extensions/BubbleMenuExtension";
+import { BubbleMenuOptions } from "./Components/BubbleMenu";
 import { ToolbarOptions } from "./Toolbar/Toolbar";
 type RichTextEditorProps = {
     className?: string;

package/dist/RichTextEditor/RichTextEditor.js

@@ -8,15 +8,18 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 import { EditorContent, useEditor } from "@tiptap/react";
+import { BubbleMenu as TiptapBubbleMenu, } from "@tiptap/react/menus";
+import { isTextSelection } from "@tiptap/core";
 import { DOMParser as ProseMirrorDOMParser } from "@tiptap/pm/model";
 import { Toolbar } from "./Toolbar";
 import getTipTapExtensions from "./Extensions/getTiptapExtensions";
 import { Extensions, SlashCommands } from "./Enums";
 import { addImagePlaceholder, removeImagePlaceholder, startImageUpload, } from "./Plugins/UploadImagesPlugin";
 import SaveBadge from "./Components/SaveBadge";
+import BubbleMenuContent from "./Components/BubbleMenu";
 import Fonts from "./Enums/Fonts";
 import RichTextEditorContext from "./Contexts/RichTextEditorContext";
 const getImageFilesFromClipboard = (clipboardData) => {
@@ -547,12 +550,52 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
     const isControlled = value !== undefined;
     const hasImageExtension = extensions.includes(Extensions.Image);
     const hasSlashCommandExtension = extensions.includes(Extensions.SlashCommand);
+    const hasBubbleMenuExtension = extensions.includes(Extensions.BubbleMenu);
     const hasImageSlashCommand = hasSlashCommandExtension && slashCommands.includes(SlashCommands.Image);
     const onChangeRef = useRef(onChange);
+    const bubbleMenuPortalRef = useRef(null);
     const [fontState, setFontState] = useState(font || Fonts.DEFAULT);
     useEffect(() => {
         onChangeRef.current = onChange;
     }, [onChange]);
+    const getBubbleMenuPortalRoot = useCallback(() => {
+        if (bubbleMenuPortalRef.current) {
+            return bubbleMenuPortalRef.current;
+        }
+        const portal = document.createElement("div");
+        portal.setAttribute("data-monolith-bubble-menu-portal", "");
+        document.body.appendChild(portal);
+        bubbleMenuPortalRef.current = portal;
+        return portal;
+    }, []);
+    useEffect(() => {
+        return () => {
+            var _a;
+            (_a = bubbleMenuPortalRef.current) === null || _a === void 0 ? void 0 : _a.remove();
+            bubbleMenuPortalRef.current = null;
+        };
+    }, []);
+    const shouldShowBubbleMenu = useCallback(({ editor, element, view, state, from, to }) => {
+        const { selection } = state;
+        const isChildOfMenu = element.contains(document.activeElement);
+        const hasEditorFocus = view.hasFocus() || isChildOfMenu;
+        const selectedText = state.doc.textBetween(from, to).trim();
+        const isEmptyTextBlock = !selectedText && isTextSelection(state.selection);
+        if (!hasEditorFocus ||
+            selection.empty ||
+            isEmptyTextBlock ||
+            !editor.isEditable) {
+            return false;
+        }
+        return true;
+    }, []);
+    const bubbleMenuPositionOptions = useMemo(() => ({
+        strategy: "fixed",
+        placement: "top",
+        offset: 8,
+        flip: false,
+        shift: { padding: 10 },
+    }), []);
     if (hasImageSlashCommand && !hasImageExtension) {
         throw new Error("Extensions.Image is required when using the Image slash command.");
     }
@@ -568,7 +611,6 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
         extensions: getTipTapExtensions({
             extensions,
             slashCommands,
-            bubbleMenuOptions,
             handleImageUpload,
         }),
         editorProps: {
@@ -632,5 +674,5 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
     return (_jsx(StyledContent, { className: className, children: _jsxs(RichTextEditorContext.Provider, { value: {
                 font: fontState,
                 setFont: setFontState,
-            }, children: [showToolbar && (_jsx(Toolbar, { editor: editor, toolbarOptions: toolbarOptions })), saving && _jsx(SaveBadge, {}), _jsx(EditorContent, { className: "editor-content", editor: editor, "data-font": fontState || null, style: style })] }) }));
+            }, children: [showToolbar && (_jsx(Toolbar, { editor: editor, toolbarOptions: toolbarOptions })), saving && _jsx(SaveBadge, {}), editor && hasBubbleMenuExtension && (_jsx(TiptapBubbleMenu, { editor: editor, pluginKey: "bubbleMenu", updateDelay: 150, appendTo: getBubbleMenuPortalRoot, shouldShow: shouldShowBubbleMenu, options: bubbleMenuPositionOptions, children: _jsx(BubbleMenuContent, { editor: editor, customMenuItems: bubbleMenuOptions === null || bubbleMenuOptions === void 0 ? void 0 : bubbleMenuOptions.customMenuItems }) })), _jsx(EditorContent, { className: "editor-content", editor: editor, "data-font": fontState || null, style: style })] }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.9.1-dev.8",
+  "version": "1.9.1-dev.9",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",

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

@@ -1,7 +0,0 @@
-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

@@ -1,157 +0,0 @@
-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;