@monolith-forensics/monolith-ui 1.9.1-dev.0 → 1.9.1-dev.10

package/dist/DropDownMenu/components/MenuItemList.js

@@ -56,11 +56,18 @@ const buildGroupedDisplayList = (items) => {
 const ListViewPort = styled.div.attrs({ className: "ListViewPort" }) `
   display: flex;
   flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
   width: 100%;
 `;
+const MenuItemListRoot = styled.div `
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+`;
 const ListScroller = styled.div `
   scrollbar-color: ${({ theme }) => `${theme.scrollbar.thumb} ${theme.scrollbar.track}`};
-  scrollbar-gutter: stable;
   scrollbar-width: thin;
 
   &::-webkit-scrollbar {
@@ -234,16 +241,6 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
         list.addEventListener("scroll", handleOnScroll);
         return () => list.removeEventListener("scroll", handleOnScroll);
     }, [dynamicOptionHeight, handleOnScroll, isLoading, renderOption]);
-    useLayoutEffect(() => {
-        var _a;
-        if (targetElm.current) {
-            const viewPortDimensions = (_a = targetElm.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            setViewPortDimensions({
-                width: viewPortDimensions.width,
-                height: viewPortDimensions.height,
-            });
-        }
-    }, [targetElm.current, isLoading]);
     const overscanCount = 10;
     const sizeTokens = getControlSizeTokens(size || "sm");
     const itemHeight = sizeTokens.menuRowHeight;
@@ -267,6 +264,29 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
             ? estimatedHeight
             : 200;
     const width = "100%";
+    useLayoutEffect(() => {
+        const target = targetElm.current;
+        if (!target)
+            return;
+        const updateDimensions = () => {
+            const nextDimensions = target.getBoundingClientRect();
+            setViewPortDimensions((currentDimensions) => {
+                const width = Math.ceil(nextDimensions.width);
+                const height = Math.floor(nextDimensions.height);
+                if (currentDimensions.width === width &&
+                    currentDimensions.height === height) {
+                    return currentDimensions;
+                }
+                return { width, height };
+            });
+        };
+        updateDimensions();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(updateDimensions);
+        observer.observe(target);
+        return () => observer.disconnect();
+    }, [displayItemsKey, isLoading]);
     const setItemSize = useCallback((index, measuredSize) => {
         var _a;
         if (itemSizeMap.current[index] === measuredSize)
@@ -335,7 +355,7 @@ export const MenuItemList = ({ menuItems, searchable, onSearch, manualSearch, dy
                 (item === null || item === void 0 ? void 0 : item.label) ||
                 (typeof item === "string" || typeof item === "number" ? item : null) }, index));
     };
-    return (_jsxs("div", { children: [searchable && (_jsx(SearchInput, { variant: "outlined", size: size, placeholder: "Search", defaultValue: searchValue, onChange: (e) => {
+    return (_jsxs(MenuItemListRoot, { children: [searchable && (_jsx(SearchInput, { variant: "outlined", size: size, placeholder: "Search", defaultValue: searchValue, onChange: (e) => {
                     if (!manualSearch) {
                         handleSearch(e);
                     }

package/dist/DropDownMenu/components/StyledInnerItemContainer.js

@@ -5,5 +5,6 @@ export const StyledInnerItemContainer = styled.div.attrs({
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
+  min-height: 0;
   overflow: hidden;
 `;

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

@@ -1,14 +1,11 @@
 import { Extensions } from "../Enums";
 import { DropDownItem, DropDownMenuProps } from "../../DropDownMenu";
-import { ReactElement } from "react";
+import { ReactElement, ReactNode } 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 {
@@ -20,7 +17,7 @@ export type BubbleItem = {
     name: Extensions | string;
     icon?: React.FC<any>;
     type: "menu";
-    label?: string | Element;
+    label?: ReactNode;
     items: BubbleMenuDropDownItem[];
     arrow?: boolean;
     isActive?: (editor: Editor) => boolean;
@@ -32,12 +29,15 @@ export type BubbleItem = {
     name: Extensions | string;
     icon?: React.FC<any>;
     type: "button";
-    label?: string | Element;
+    label?: ReactNode;
     arrow?: boolean;
     isActive?: (editor: Editor) => boolean;
     buttonRender?: (props: any) => ReactElement;
     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

@@ -1,14 +1,21 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 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 { BoldIcon, CodeIcon, ItalicIcon, UnderlineIcon, CaseSensitiveIcon, ListIcon, ListOrderedIcon, SquareCodeIcon, StrikethroughIcon, Heading1Icon, Heading2Icon, Heading3Icon, Heading4Icon, HighlighterIcon, LinkIcon, PaletteIcon, RemoveFormattingIcon, SquircleIcon, } from "lucide-react";
 import { DropDownMenu, } from "../../DropDownMenu";
-import { FloatingPortal, useFloating } from "@floating-ui/react";
-import { useEffect, useRef } from "react";
+import { useEffect, useState } from "react";
 import { Button } from "../../Button";
 import TextColors from "../Enums/TextColors";
-const getMenuItems = (editor, customMenuItems, theme) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+import HighlightColors from "../Enums/HighlightColors";
+import LinkEditor from "./LinkEditor";
+import { hasInlineCode, toggleInlineCode } from "../Utils/codeUtils";
+import CodeBlockLanguageSelect from "./CodeBlockLanguageSelect";
+import CodeBlockCopyButton from "./CodeBlockCopyButton";
+import CodeBlockWrapButton from "./CodeBlockWrapButton";
+import CodeBlockFormatButton from "./CodeBlockFormatButton";
+import { hasSyntaxHighlightedCodeBlock, toggleCodeBlock, } from "../Utils/codeBlockUtils";
+const getMenuItems = (editor, customMenuItems, theme, openLinkEditor) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     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;
@@ -24,6 +31,11 @@ const getMenuItems = (editor, customMenuItems, theme) => {
         }
     });
     const attrs = node === null || node === void 0 ? void 0 : node.attrs;
+    const supportsSyntaxCodeBlock = hasSyntaxHighlightedCodeBlock(editor);
+    const supportsInlineCode = hasInlineCode(editor);
+    const supportsColor = Boolean(editor.extensionManager.extensions.find((extension) => extension.name === "color"));
+    const supportsHighlight = Boolean(editor.extensionManager.extensions.find((extension) => extension.name === "highlight"));
+    const supportsLink = Boolean(editor.extensionManager.extensions.find((extension) => extension.name === "link"));
     let nodeTypeLabel = "Select Type";
     let nodeTypeIcon = null;
     if (withinOrderedList) {
@@ -38,7 +50,11 @@ const getMenuItems = (editor, customMenuItems, theme) => {
         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") {
+    else if (((_g = node === null || node === void 0 ? void 0 : node.type) === null || _g === void 0 ? void 0 : _g.name) === "codeBlock") {
+        nodeTypeLabel = "Code Block";
+        nodeTypeIcon = _jsx(SquareCodeIcon, { size: 16 });
+    }
+    else if (((_h = node === null || node === void 0 ? void 0 : node.type) === null || _h === void 0 ? void 0 : _h.name) === "heading") {
         const level = attrs === null || attrs === void 0 ? void 0 : attrs.level;
         nodeTypeLabel = `Heading ${level}`;
         nodeTypeIcon =
@@ -50,7 +66,6 @@ const getMenuItems = (editor, customMenuItems, theme) => {
             name: "node_type",
             label: nodeTypeLabel,
             type: "menu",
-            arrow: true,
             buttonProps: {
                 leftSection: nodeTypeIcon,
                 style: { fontSize: 11, padding: "4px" },
@@ -62,13 +77,16 @@ const getMenuItems = (editor, customMenuItems, theme) => {
                     data: {
                         Icon: CaseSensitiveIcon,
                         command: (editor) => {
-                            // remove ordered list
-                            editor
-                                .chain()
-                                .focus()
-                                .liftListItem("listItem")
-                                .setParagraph()
-                                .run();
+                            if (editor.isActive("bulletList") || editor.isActive("orderedList")) {
+                                editor
+                                    .chain()
+                                    .focus()
+                                    .liftListItem("listItem")
+                                    .setParagraph()
+                                    .run();
+                                return;
+                            }
+                            editor.chain().focus().setParagraph().run();
                         },
                     },
                 },
@@ -132,50 +150,120 @@ const getMenuItems = (editor, customMenuItems, theme) => {
                         },
                     },
                 },
+                ...(supportsSyntaxCodeBlock
+                    ? [
+                        {
+                            label: "Code Block",
+                            value: "code_block",
+                            data: {
+                                Icon: SquareCodeIcon,
+                                command: (editor) => {
+                                    toggleCodeBlock(editor);
+                                },
+                            },
+                        },
+                    ]
+                    : []),
             ],
             dropDownProps: {
                 renderOption: (item) => (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [_jsx(item.data.Icon, { size: 16 }), item.label] })),
             },
         },
-        {
-            name: "color",
-            label: "Color",
-            type: "menu",
-            arrow: true,
-            buttonProps: {
-                // leftSection: nodeTypeIcon,
-                style: { fontSize: 11, padding: "4px" },
-            },
-            items: [
+        ...(supportsColor
+            ? [
                 {
-                    label: "Default",
-                    value: "default",
-                    onClick: () => {
-                        editor === null || editor === void 0 ? void 0 : editor.chain().focus().unsetColor().run();
+                    name: "color",
+                    label: _jsx(PaletteIcon, { size: 14 }),
+                    type: "menu",
+                    buttonProps: {
+                        style: { fontSize: 11, padding: "4px" },
+                    },
+                    items: [
+                        {
+                            label: "Default",
+                            value: "default",
+                            onClick: () => {
+                                editor === null || editor === void 0 ? void 0 : editor.chain().focus().unsetColor().run();
+                            },
+                        },
+                        ...Object.keys(TextColors).map((color) => {
+                            const colorKey = color;
+                            return {
+                                label: color,
+                                value: TextColors[colorKey],
+                                onClick: () => {
+                                    editor === null || editor === void 0 ? void 0 : editor.chain().focus().setColor(TextColors[colorKey]).run();
+                                },
+                            };
+                        }),
+                    ],
+                    dropDownProps: {
+                        renderOption: (item) => (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [_jsx(SquircleIcon, { size: 12, color: item.value === "default"
+                                        ? theme.palette.text.primary
+                                        : item.value, style: {
+                                        backgroundColor: item.value === "default"
+                                            ? theme.palette.text.primary
+                                            : item.value,
+                                        borderRadius: "3px",
+                                    } }), item.label] })),
                     },
                 },
-                ...Object.keys(TextColors).map((color) => {
-                    const colorKey = color;
-                    return {
-                        label: color,
-                        value: TextColors[colorKey],
-                        onClick: () => {
-                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().setColor(TextColors[colorKey]).run();
+            ]
+            : []),
+        ...(supportsHighlight
+            ? [
+                {
+                    name: Extensions.Highlight,
+                    label: _jsx(HighlighterIcon, { size: 14 }),
+                    type: "menu",
+                    buttonProps: {
+                        style: { fontSize: 11, padding: "4px" },
+                    },
+                    items: [
+                        {
+                            label: "Default",
+                            value: "default",
+                            onClick: () => {
+                                editor === null || editor === void 0 ? void 0 : editor.chain().focus().unsetHighlight().run();
+                            },
                         },
-                    };
-                }),
-            ],
-            dropDownProps: {
-                renderOption: (item) => (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [_jsx(SquircleIcon, { size: 12, color: item.value === "default"
-                                ? theme.palette.text.primary
-                                : item.value, style: {
-                                backgroundColor: item.value === "default"
-                                    ? theme.palette.text.primary
-                                    : item.value,
-                                borderRadius: "3px",
-                            } }), item.label] })),
-            },
-        },
+                        ...Object.keys(HighlightColors).map((color) => {
+                            const colorKey = color;
+                            return {
+                                label: color,
+                                value: HighlightColors[colorKey],
+                                onClick: () => {
+                                    editor === null || editor === void 0 ? void 0 : editor.chain().focus().setHighlight({ color: HighlightColors[colorKey] }).run();
+                                },
+                            };
+                        }),
+                    ],
+                    dropDownProps: {
+                        renderOption: (item) => (_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 5 }, children: [_jsx(SquircleIcon, { size: 12, color: item.value === "default"
+                                        ? theme.palette.text.primary
+                                        : item.value, style: {
+                                        backgroundColor: item.value === "default"
+                                            ? "transparent"
+                                            : item.value,
+                                        borderRadius: "3px",
+                                    } }), item.label] })),
+                    },
+                },
+            ]
+            : []),
+        ...(supportsLink
+            ? [
+                {
+                    name: Extensions.Link,
+                    icon: LinkIcon,
+                    type: "button",
+                    isActive: (editor) => editor.isActive("link"),
+                    onClick: () => {
+                        openLinkEditor();
+                    },
+                },
+            ]
+            : []),
         {
             name: Extensions.Bold,
             icon: BoldIcon,
@@ -212,6 +300,32 @@ const getMenuItems = (editor, customMenuItems, theme) => {
                 editor.chain().focus().toggleStrike().run();
             },
         },
+        ...(supportsInlineCode
+            ? [
+                {
+                    name: Extensions.Code,
+                    icon: CodeIcon,
+                    type: "button",
+                    isActive: (editor) => editor.isActive("code"),
+                    onClick: (editor) => {
+                        toggleInlineCode(editor);
+                    },
+                },
+            ]
+            : []),
+        ...(supportsSyntaxCodeBlock
+            ? [
+                {
+                    name: Extensions.CodeBlock,
+                    icon: SquareCodeIcon,
+                    type: "button",
+                    isActive: (editor) => editor.isActive("codeBlock"),
+                    onClick: (editor) => {
+                        toggleCodeBlock(editor);
+                    },
+                },
+            ]
+            : []),
         {
             name: Extensions.ClearFormatting,
             icon: RemoveFormattingIcon,
@@ -224,12 +338,11 @@ const getMenuItems = (editor, customMenuItems, theme) => {
     ];
 };
 const BubbleMenuContent = styled.div `
-  position: fixed;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 2px;
-  gap: 2px;
+  gap: 4px;
 
   color: ${({ theme }) => theme.palette.text.primary};
   background-color: ${({ theme }) => theme.palette.input.background};
@@ -272,51 +385,43 @@ 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 CodeBlockBubbleTools = ({ editor, theme, }) => {
+    const nodeTypeMenu = getMenuItems(editor, [], theme, () => undefined).find((item) => item.name === "node_type");
+    return (_jsxs(_Fragment, { children: [(nodeTypeMenu === null || nodeTypeMenu === void 0 ? void 0 : nodeTypeMenu.type) === "menu" && (_jsx(DropDownMenu, Object.assign({ data: nodeTypeMenu.items, size: "xs", arrow: nodeTypeMenu.arrow, buttonProps: nodeTypeMenu.buttonProps, variant: "subtle", buttonRender: nodeTypeMenu.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, ""); }, dropDownProps: {
+                    style: { width: 135 },
+                } }, nodeTypeMenu.dropDownProps, { children: nodeTypeMenu.icon
+                    ? (_jsx(nodeTypeMenu.icon, { size: 14 }))
+                    : (nodeTypeMenu.label || nodeTypeMenu.name) }))), _jsx(CodeBlockLanguageSelect, { editor: editor }), _jsx(CodeBlockWrapButton, { editor: editor }), _jsx(CodeBlockFormatButton, { editor: editor }), _jsx(CodeBlockCopyButton, { editor: editor })] }));
+};
+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 [linkEditorOpen, setLinkEditorOpen] = useState(false);
     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
+    const isLinkSelection = editor.isActive("link");
+    const isCodeBlockSelection = editor.isActive("codeBlock") && hasSyntaxHighlightedCodeBlock(editor);
+    useEffect(() => {
+        setLinkEditorOpen(false);
+    }, [from, to]);
+    if (isLinkSelection || linkEditorOpen) {
+        return (_jsx(BubbleMenuContent, { className: className, children: _jsx(LinkEditor, { editor: editor, autoFocus: true, onClose: () => setLinkEditorOpen(false) }) }));
     }
-    // Check if the menu is overflowing on the right
-    const rightOverflow = left + elementWidth - window.innerWidth;
-    if (rightOverflow > -10) {
-        left -= rightOverflow + 10; // add some padding
+    if (isCodeBlockSelection) {
+        return (_jsx(BubbleMenuContent, { className: className, children: _jsx(CodeBlockBubbleTools, { editor: editor, theme: theme }) }));
     }
-    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, () => setLinkEditorOpen(true)).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/Components/CodeBlockCopyButton.d.ts

@@ -0,0 +1,9 @@
+import { Editor } from "@tiptap/react";
+type CodeBlockCopyButtonProps = {
+    className?: string;
+    editor?: Editor | null;
+    text?: string;
+    size?: "xs" | "sm";
+};
+declare const CodeBlockCopyButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<CodeBlockCopyButtonProps, never>> & string & Omit<({ className, editor, text, size }: CodeBlockCopyButtonProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export default CodeBlockCopyButton;

package/dist/RichTextEditor/Components/CodeBlockCopyButton.js

@@ -0,0 +1,45 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import styled from "styled-components";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { Button } from "../../Button";
+import { copyCodeBlockText, getActiveCodeBlockText, } from "../Utils/codeBlockUtils";
+const CodeBlockCopyButton = styled(({ className, editor, text, size = "xs" }) => {
+    const [copied, setCopied] = useState(false);
+    const [copyFailed, setCopyFailed] = useState(false);
+    const code = text !== null && text !== void 0 ? text : getActiveCodeBlockText(editor || null);
+    useEffect(() => {
+        if (!copied && !copyFailed)
+            return;
+        const timeout = window.setTimeout(() => {
+            setCopied(false);
+            setCopyFailed(false);
+        }, 1400);
+        return () => window.clearTimeout(timeout);
+    }, [copied, copyFailed]);
+    return (_jsx(Button, { className: className, size: size, variant: "outlined", title: copyFailed ? "Unable to copy" : copied ? "Copied" : "Copy code", "aria-label": copyFailed ? "Unable to copy code" : copied ? "Copied" : "Copy code", disabled: !code, onClick: (event) => __awaiter(void 0, void 0, void 0, function* () {
+            event.preventDefault();
+            event.stopPropagation();
+            try {
+                yield copyCodeBlockText(code);
+                setCopied(true);
+                setCopyFailed(false);
+            }
+            catch (_a) {
+                setCopied(false);
+                setCopyFailed(true);
+            }
+        }), children: copied ? _jsx(CheckIcon, { size: 14 }) : _jsx(CopyIcon, { size: 14 }) }));
+}) `
+  padding: 3px;
+`;
+export default CodeBlockCopyButton;

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

@@ -0,0 +1,10 @@
+import { Editor } from "@tiptap/react";
+type CodeBlockFormatButtonProps = {
+    className?: string;
+    editor?: Editor | null;
+    language?: string;
+    onFormat?: () => Promise<void>;
+    size?: "xs" | "sm";
+};
+declare const CodeBlockFormatButton: ({ className, editor, language, onFormat, size, }: CodeBlockFormatButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default CodeBlockFormatButton;

package/dist/RichTextEditor/Components/CodeBlockFormatButton.js

@@ -0,0 +1,60 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { CheckIcon, TriangleAlertIcon, WandSparklesIcon } from "lucide-react";
+import { Button } from "../../Button";
+import { canFormatCodeBlockLanguage, formatActiveCodeBlock, getCodeBlockLanguage, } from "../Utils/codeBlockUtils";
+const CodeBlockFormatButton = ({ className, editor, language, onFormat, size = "xs", }) => {
+    const [formatted, setFormatted] = useState(false);
+    const [formatFailed, setFormatFailed] = useState(false);
+    const codeLanguage = language !== null && language !== void 0 ? language : getCodeBlockLanguage(editor || null);
+    const canFormat = canFormatCodeBlockLanguage(codeLanguage);
+    useEffect(() => {
+        if (!formatted && !formatFailed)
+            return;
+        const timeout = window.setTimeout(() => {
+            setFormatted(false);
+            setFormatFailed(false);
+        }, 1400);
+        return () => window.clearTimeout(timeout);
+    }, [formatted, formatFailed]);
+    return (_jsx(Button, { className: className, size: size, variant: "outlined", title: !canFormat
+            ? "Formatting is not supported for this language"
+            : formatFailed
+                ? "Unable to format code"
+                : formatted
+                    ? "Formatted"
+                    : "Format code", "aria-label": !canFormat
+            ? "Formatting is not supported for this language"
+            : formatFailed
+                ? "Unable to format code"
+                : formatted
+                    ? "Formatted"
+                    : "Format code", disabled: !canFormat || (!onFormat && !(editor === null || editor === void 0 ? void 0 : editor.isActive("codeBlock"))), onClick: (event) => __awaiter(void 0, void 0, void 0, function* () {
+            event.preventDefault();
+            event.stopPropagation();
+            try {
+                if (onFormat) {
+                    yield onFormat();
+                }
+                else {
+                    yield formatActiveCodeBlock(editor || null);
+                }
+                setFormatted(true);
+                setFormatFailed(false);
+            }
+            catch (_a) {
+                setFormatted(false);
+                setFormatFailed(true);
+            }
+        }), children: formatted ? (_jsx(CheckIcon, { size: 14 })) : formatFailed ? (_jsx(TriangleAlertIcon, { size: 14 })) : (_jsx(WandSparklesIcon, { size: 14 })) }));
+};
+export default CodeBlockFormatButton;

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

@@ -0,0 +1,6 @@
+import { Editor } from "@tiptap/react";
+type CodeBlockLanguageSelectProps = {
+    editor: Editor | null;
+};
+declare const CodeBlockLanguageSelect: ({ editor }: CodeBlockLanguageSelectProps) => import("react/jsx-runtime").JSX.Element;
+export default CodeBlockLanguageSelect;