@monolith-forensics/monolith-ui 1.9.1-dev.8 → 1.9.3-dev.0

package/dist/RichTextEditor/Components/BubbleMenu.js

@@ -1,14 +1,17 @@
-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 { 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 +27,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 +46,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 +62,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 +73,17 @@ 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 +147,107 @@ 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: { padding: "1px 6px" },
+                    },
+                    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: { padding: "1px 6px" },
+                    },
+                    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] })),
+                    },
+                },
+            ]
+            : []),
         {
             name: Extensions.Bold,
             icon: BoldIcon,
@@ -212,6 +284,45 @@ const getMenuItems = (editor, customMenuItems, theme) => {
                 editor.chain().focus().toggleStrike().run();
             },
         },
+        ...(supportsLink
+            ? [
+                {
+                    name: Extensions.Link,
+                    icon: LinkIcon,
+                    type: "button",
+                    isActive: (editor) => editor.isActive("link"),
+                    onClick: () => {
+                        openLinkEditor();
+                    },
+                },
+            ]
+            : []),
+        ...(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 +335,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};
@@ -245,6 +355,11 @@ const BubbleMenuContent = styled.div `
   transform: scale(0.25); /* Start at half size */
   animation: fadeInEffect 90ms forwards;
 
+  button {
+    min-width: 28px;
+    min-height: 28px;
+  }
+
   /* Animation to handle the fade in */
   @keyframes fadeInEffect {
     0% {
@@ -261,7 +376,8 @@ const BubbleItemButton = styled(Button) `
   font-size: 0.5rem;
   font-weight: 500;
   padding: 4px;
-  height: auto;
+  height: 28px;
+  width: 28px;
 
   &.is-active {
     opacity: 1;
@@ -272,51 +388,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 (_jsx(_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) }))) }));
+};
+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/CodeBlockBaseButton.d.ts

@@ -0,0 +1,18 @@
+export declare const CodeBlockBaseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    ref?: import("react").RefObject<HTMLButtonElement>;
+    children?: import("react").ReactNode | string;
+    className?: string;
+    loading?: boolean;
+    leftSection?: import("react").ReactNode;
+    rightSection?: import("react").ReactNode;
+    href?: string | null;
+    download?: string | null;
+    fullWidth?: boolean;
+    size?: import("../../core").Size;
+    variant?: import("../../core").Variant;
+    color?: import("../../Button").ButtonColor;
+    disabled?: boolean;
+    selected?: boolean;
+    justify?: "start" | "center" | "end";
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}, never>> & string & Omit<import("react").FC<import("../../Button").ButtonProps>, keyof import("react").Component<any, {}, any>>;

package/dist/RichTextEditor/Components/CodeBlockBaseButton.js

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+import { Button } from "../../Button";
+export const CodeBlockBaseButton = styled(Button) `
+  padding: 5px;
+  background-color: ${({ theme }) => theme.palette.background.paper};
+`;

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: ({ className, editor, text, size, }: CodeBlockCopyButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default CodeBlockCopyButton;

package/dist/RichTextEditor/Components/CodeBlockCopyButton.js

@@ -0,0 +1,42 @@
+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, CopyIcon } from "lucide-react";
+import { copyCodeBlockText, getActiveCodeBlockText, } from "../Utils/codeBlockUtils";
+import { CodeBlockBaseButton } from "./CodeBlockBaseButton";
+const CodeBlockCopyButton = ({ 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(CodeBlockBaseButton, { 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 }) }));
+};
+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 { canFormatCodeBlockLanguage, formatActiveCodeBlock, getCodeBlockLanguage, } from "../Utils/codeBlockUtils";
+import { CodeBlockBaseButton } from "./CodeBlockBaseButton";
+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(CodeBlockBaseButton, { 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,9 @@
+import { Editor } from "@tiptap/react";
+type CodeBlockLanguageSelectProps = {
+    className?: string;
+    editor?: Editor | null;
+    language?: string;
+    onLanguageChange?: (language: string) => void;
+};
+declare const CodeBlockLanguageSelect: ({ className, editor, language, onLanguageChange, }: CodeBlockLanguageSelectProps) => import("react/jsx-runtime").JSX.Element;
+export default CodeBlockLanguageSelect;

package/dist/RichTextEditor/Components/CodeBlockLanguageSelect.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CodeXmlIcon } from "lucide-react";
+import { DropDownMenu } from "../../DropDownMenu";
+import { CODE_BLOCK_LANGUAGES, getCodeBlockLanguage, getCodeBlockLanguageOption, setCodeBlockLanguage, } from "../Utils/codeBlockUtils";
+import { useTheme } from "styled-components";
+const CodeBlockLanguageSelect = ({ className, editor, language, onLanguageChange, }) => {
+    const theme = useTheme();
+    const codeLanguage = language !== null && language !== void 0 ? language : getCodeBlockLanguage(editor || null);
+    const selectedLanguage = getCodeBlockLanguageOption(codeLanguage);
+    return (_jsx(DropDownMenu, { className: className, data: CODE_BLOCK_LANGUAGES, value: [selectedLanguage], enableSelectedOptionStyling: true, size: "xs", variant: "outlined", disabled: !onLanguageChange && !(editor === null || editor === void 0 ? void 0 : editor.isActive("codeBlock")), onItemSelect: (item) => {
+            if (onLanguageChange) {
+                onLanguageChange(item.value);
+                return;
+            }
+            setCodeBlockLanguage(editor || null, item.value);
+        }, buttonProps: {
+            title: "Select code language",
+            leftSection: _jsx(CodeXmlIcon, { size: 12 }),
+            style: {
+                padding: "1px 6px",
+                backgroundColor: theme.palette.background.paper,
+            },
+        }, dropDownProps: {
+            style: {
+                width: 150,
+                height: 250,
+            },
+        }, children: selectedLanguage.label }));
+};
+export default CodeBlockLanguageSelect;

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

@@ -0,0 +1,3 @@
+import { ReactNodeViewProps } from "@tiptap/react";
+declare const CodeBlockNodeView: ({ editor, getPos, node, updateAttributes, }: ReactNodeViewProps) => import("react/jsx-runtime").JSX.Element;
+export default CodeBlockNodeView;

package/dist/RichTextEditor/Components/CodeBlockNodeView.js

@@ -0,0 +1,28 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { NodeViewContent, NodeViewWrapper, } from "@tiptap/react";
+import CodeBlockCopyButton from "./CodeBlockCopyButton";
+import CodeBlockWrapButton from "./CodeBlockWrapButton";
+import CodeBlockFormatButton from "./CodeBlockFormatButton";
+import CodeBlockLanguageSelect from "./CodeBlockLanguageSelect";
+import { formatCodeBlockText, replaceCodeBlockContent, } from "../Utils/codeBlockUtils";
+const CodeBlockNodeView = ({ editor, getPos, node, updateAttributes, }) => {
+    const language = node.attrs.language;
+    const wrap = Boolean(node.attrs.wrap);
+    return (_jsxs(NodeViewWrapper, { as: "pre", className: "editor-code-block", "data-language": language || "plaintext", "data-wrap": wrap ? "true" : "false", children: [_jsxs("div", { className: "editor-code-block-actions", contentEditable: false, children: [_jsx(CodeBlockLanguageSelect, { language: language, onLanguageChange: (language) => updateAttributes({ language }) }), _jsx(CodeBlockWrapButton, { active: wrap, onToggle: () => updateAttributes({ wrap: !wrap }) }), _jsx(CodeBlockFormatButton, { className: "editor-code-block-action", language: language, onFormat: () => __awaiter(void 0, void 0, void 0, function* () {
+                            const pos = getPos();
+                            if (typeof pos !== "number")
+                                return;
+                            const formatted = yield formatCodeBlockText(node.textContent, language);
+                            replaceCodeBlockContent(editor, pos + 1, pos + node.nodeSize - 1, formatted);
+                        }) }), _jsx(CodeBlockCopyButton, { className: "editor-code-block-action", text: node.textContent })] }), _jsx(NodeViewContent, { as: "code", className: `hljs language-${language || "plaintext"}`, spellCheck: false })] }));
+};
+export default CodeBlockNodeView;

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

@@ -0,0 +1,10 @@
+import { Editor } from "@tiptap/react";
+type CodeBlockWrapButtonProps = {
+    className?: string;
+    editor?: Editor | null;
+    active?: boolean;
+    onToggle?: () => void;
+    size?: "xs" | "sm";
+};
+declare const CodeBlockWrapButton: ({ className, editor, active, onToggle, size, }: CodeBlockWrapButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default CodeBlockWrapButton;