@monolith-forensics/monolith-ui 1.9.1-dev.9 → 1.9.3-dev.1

package/dist/FileViewer/FileViewer.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import styled from "styled-components";
 import { CodeViewer, ImageViewer, OfficeViewer, PdfViewer, VideoViewer, } from "./viewers";
 import { FloatingPortal } from "@floating-ui/react";
-import { DownloadIcon, XIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react";
+import { DownloadIcon, RotateCwIcon, XIcon, ZoomInIcon, ZoomOutIcon, } from "lucide-react";
 import { Button } from "../Button";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Loader from "../Loader";
 var ViewerTypes;
 (function (ViewerTypes) {
@@ -24,7 +24,18 @@ const ZoomableViewerTypes = [
 ];
 const RotatableViewerTypes = [ViewerTypes.Image];
 const OfficeExtensions = ["doc", "docx", "xls", "xlsx", "ppt", "pptx"];
-const ImageExtensions = ["jpg", "jpeg", "png", "gif"];
+const ImageExtensions = [
+    "jpg",
+    "jpeg",
+    "png",
+    "gif",
+    "webp",
+    "bmp",
+    "svg",
+    "avif",
+    "tif",
+    "tiff",
+];
 const VideoExtensions = ["mp4", "webm", "mov"];
 const AudioExtensions = ["mp3", "wav"];
 const PDFExtensions = ["pdf"];
@@ -125,10 +136,14 @@ const StyledInnerContainer = styled.div.attrs({
   }
 `;
 const resolveViewerType = (file) => {
-    var _a, _b;
+    var _a, _b, _c;
     let ext = (_a = file === null || file === void 0 ? void 0 : file.ext) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    const type = (_b = file === null || file === void 0 ? void 0 : file.type) === null || _b === void 0 ? void 0 : _b.toLowerCase();
     if (!ext) {
-        ext = (_b = file.name.split(".").pop()) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+        ext = (_c = file.name.split(".").pop()) === null || _c === void 0 ? void 0 : _c.toLowerCase();
+    }
+    if (type === null || type === void 0 ? void 0 : type.startsWith("image/")) {
+        return ViewerTypes.Image;
     }
     if (!ext) {
         return ViewerTypes.Code;
@@ -158,19 +173,28 @@ const resolveViewerType = (file) => {
 };
 export const FileViewer = ({ file, open, isPending, onClose }) => {
     const [zoomFactor, setZoomFactor] = useState(1);
+    const [rotation, setRotation] = useState(0);
+    useEffect(() => {
+        setZoomFactor(1);
+        setRotation(0);
+    }, [file === null || file === void 0 ? void 0 : file.url, file === null || file === void 0 ? void 0 : file.name, open]);
     if (!open)
         return null;
     if (!file)
         return null;
     const viewerType = resolveViewerType(file);
+    const resetViewerState = () => {
+        setZoomFactor(1);
+        setRotation(0);
+    };
     const handleBackgroundClick = (e) => {
         onClose === null || onClose === void 0 ? void 0 : onClose();
-        setZoomFactor(1);
+        resetViewerState();
     };
     return (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsxs(StyledContainer, { className: "mfui-FileViewer", children: [_jsxs(StyledMenu, { className: "FileViewer-menu", children: [_jsx(Button, { variant: "text", onClick: () => {
                                 onClose === null || onClose === void 0 ? void 0 : onClose();
-                                setZoomFactor(1);
-                            }, children: _jsx(XIcon, { size: 18 }) }), _jsx("div", { children: file.name }), _jsxs(StyledActionsMenu, { children: [ZoomableViewerTypes.includes(viewerType) && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "text", disabled: !file.url, children: _jsx(ZoomInIcon, { size: 18, onClick: () => setZoomFactor((prev) => prev * 1.1) }) }), _jsx(Button, { variant: "text", disabled: !file.url, children: _jsx(ZoomOutIcon, { size: 18, onClick: () => setZoomFactor((prev) => prev * 0.9) }) })] })), _jsx("a", { href: file.url, download: file.name, style: { pointerEvents: !file.url ? "none" : "auto" }, children: _jsx(Button, { variant: "text", disabled: !file.url, children: _jsx(DownloadIcon, { size: 18 }) }) })] })] }), file.url ? (_jsxs(StyledInnerContainer, { onClick: handleBackgroundClick, "data-type": viewerType, children: [viewerType === ViewerTypes.PDF && (_jsx(PdfViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending })), viewerType === ViewerTypes.Image && (_jsx(ImageViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending })), viewerType === ViewerTypes.Video && (_jsx(VideoViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending })), viewerType === ViewerTypes.Audio && (_jsx(VideoViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending })), viewerType === ViewerTypes.Office && (_jsx(OfficeViewer, { file: file, isPending: isPending })), viewerType === ViewerTypes.Text && (_jsx(CodeViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending })), viewerType === ViewerTypes.Code && (_jsx(CodeViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending }))] })) : (_jsx(StyledInnerContainer, { children: _jsxs("div", { style: {
+                                resetViewerState();
+                            }, children: _jsx(XIcon, { size: 18 }) }), _jsx("div", { children: file.name }), _jsxs(StyledActionsMenu, { children: [ZoomableViewerTypes.includes(viewerType) && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "text", disabled: !file.url, "aria-label": "Zoom in", title: "Zoom in", onClick: () => setZoomFactor((prev) => prev * 1.1), children: _jsx(ZoomInIcon, { size: 18 }) }), _jsx(Button, { variant: "text", disabled: !file.url, "aria-label": "Zoom out", title: "Zoom out", onClick: () => setZoomFactor((prev) => prev * 0.9), children: _jsx(ZoomOutIcon, { size: 18 }) })] })), RotatableViewerTypes.includes(viewerType) && (_jsx(Button, { variant: "text", disabled: !file.url, "aria-label": "Rotate image", title: "Rotate image", onClick: () => setRotation((prev) => (prev + 90) % 360), children: _jsx(RotateCwIcon, { size: 18 }) })), _jsx("a", { href: file.url, download: file.name, style: { pointerEvents: !file.url ? "none" : "auto" }, children: _jsx(Button, { variant: "text", disabled: !file.url, children: _jsx(DownloadIcon, { size: 18 }) }) })] })] }), file.url ? (_jsxs(StyledInnerContainer, { onClick: handleBackgroundClick, "data-type": viewerType, children: [viewerType === ViewerTypes.PDF && (_jsx(PdfViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending })), viewerType === ViewerTypes.Image && (_jsx(ImageViewer, { file: file, zoomFactor: zoomFactor, rotation: rotation, isPending: isPending })), viewerType === ViewerTypes.Video && (_jsx(VideoViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending })), viewerType === ViewerTypes.Audio && (_jsx(VideoViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending })), viewerType === ViewerTypes.Office && (_jsx(OfficeViewer, { file: file, isPending: isPending })), viewerType === ViewerTypes.Text && (_jsx(CodeViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending })), viewerType === ViewerTypes.Code && (_jsx(CodeViewer, { file: file, zoomFactor: zoomFactor, isPending: isPending }))] })) : (_jsx(StyledInnerContainer, { children: _jsxs("div", { style: {
                             margin: "auto",
                             display: "flex",
                             gap: "10px",

package/dist/FileViewer/viewers/ImageViewer.d.ts

@@ -2,5 +2,6 @@ import { File } from "../FileViewer";
 export declare const ImageViewer: React.FC<{
     file: File;
     zoomFactor?: number;
+    rotation?: number;
     isPending?: boolean;
 }>;

package/dist/FileViewer/viewers/ImageViewer.js

@@ -10,9 +10,7 @@ const ImageViewerContainer = styled.div `
   overflow: auto;
 `;
 const ImageCanvas = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  position: relative;
   flex: 0 0 auto;
   min-width: 100%;
   min-height: 100%;
@@ -20,8 +18,11 @@ const ImageCanvas = styled.div `
 const Image = styled.img `
   box-sizing: border-box;
   display: block;
-  flex: 0 0 auto;
+  position: absolute;
+  top: 50%;
+  left: 50%;
   object-fit: contain;
+  transform-origin: center;
 
   // set orientation
   image-orientation: from-image;
@@ -36,7 +37,7 @@ const StyledLoader = styled.div `
   gap: 10px;
   height: 100%;
 `;
-export const ImageViewer = ({ file, zoomFactor = 1, isPending }) => {
+export const ImageViewer = ({ file, zoomFactor = 1, rotation = 0, isPending }) => {
     const containerRef = useRef(null);
     const [imageLoaded, setImageLoaded] = useState(false);
     const [containerSize, setContainerSize] = useState({
@@ -47,6 +48,8 @@ export const ImageViewer = ({ file, zoomFactor = 1, isPending }) => {
         naturalWidth: 0,
         naturalHeight: 0,
     });
+    const normalizedRotation = ((rotation % 360) + 360) % 360;
+    const isRotatedSideways = normalizedRotation % 180 !== 0;
     const fittedDimensions = useMemo(() => {
         const { naturalWidth, naturalHeight } = originalDimensions;
         if (naturalWidth === 0 ||
@@ -54,16 +57,33 @@ export const ImageViewer = ({ file, zoomFactor = 1, isPending }) => {
             containerSize.width === 0 ||
             containerSize.height === 0) {
             return {
-                width: naturalWidth,
-                height: naturalHeight,
+                canvasWidth: isRotatedSideways ? naturalHeight : naturalWidth,
+                canvasHeight: isRotatedSideways ? naturalWidth : naturalHeight,
+                imageWidth: naturalWidth,
+                imageHeight: naturalHeight,
             };
         }
-        const fitScale = Math.min(containerSize.width / naturalWidth, containerSize.height / naturalHeight);
+        const rotatedNaturalWidth = isRotatedSideways
+            ? naturalHeight
+            : naturalWidth;
+        const rotatedNaturalHeight = isRotatedSideways
+            ? naturalWidth
+            : naturalHeight;
+        const fitScale = Math.min(containerSize.width / rotatedNaturalWidth, containerSize.height / rotatedNaturalHeight);
+        const imageWidth = naturalWidth * fitScale * zoomFactor;
+        const imageHeight = naturalHeight * fitScale * zoomFactor;
         return {
-            width: naturalWidth * fitScale * zoomFactor,
-            height: naturalHeight * fitScale * zoomFactor,
+            canvasWidth: isRotatedSideways ? imageHeight : imageWidth,
+            canvasHeight: isRotatedSideways ? imageWidth : imageHeight,
+            imageWidth,
+            imageHeight,
         };
-    }, [containerSize, originalDimensions, zoomFactor]);
+    }, [
+        containerSize,
+        isRotatedSideways,
+        originalDimensions,
+        zoomFactor,
+    ]);
     useEffect(() => {
         if (!file.url)
             return;
@@ -104,11 +124,12 @@ export const ImageViewer = ({ file, zoomFactor = 1, isPending }) => {
         return (_jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading Image..." })] }));
     }
     return (_jsxs(ImageViewerContainer, { ref: containerRef, className: "mfui-ImageViewer", children: [!showImage && (_jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading Image..." })] })), showImage && (_jsx(ImageCanvas, { style: {
-                    width: fittedDimensions.width,
-                    height: fittedDimensions.height,
+                    width: fittedDimensions.canvasWidth,
+                    height: fittedDimensions.canvasHeight,
                 }, children: _jsx(Image, { src: file.url, alt: file.name ? file.name : "Image", style: {
-                        width: fittedDimensions.width,
-                        height: fittedDimensions.height,
+                        width: fittedDimensions.imageWidth,
+                        height: fittedDimensions.imageHeight,
+                        transform: `translate(-50%, -50%) rotate(${normalizedRotation}deg)`,
                     }, onClick: (e) => {
                         e.stopPropagation();
                     } }) }))] }));

package/dist/MonolithUIProvider/MonolithUIProvider.d.ts

@@ -81,6 +81,29 @@ export interface MonolithDefaultTheme {
         action: {
             hover: string;
         };
+        codeBlock?: {
+            background: string;
+            text: string;
+            border: string;
+            selection: string;
+            syntax: {
+                comment: string;
+                punctuation: string;
+                property: string;
+                selector: string;
+                operator: string;
+                keyword: string;
+                string: string;
+                number: string;
+                function: string;
+                variable: string;
+                tag: string;
+                attribute: string;
+                literal: string;
+                deleted: string;
+                inserted: string;
+            };
+        };
         divider: string;
     };
     header: {

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

@@ -1,6 +1,6 @@
 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 BubbleMenuContentProps {
@@ -17,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;
@@ -29,7 +29,7 @@ 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;

package/dist/RichTextEditor/Components/BubbleMenu.js

@@ -1,12 +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 { 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;
@@ -22,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) {
@@ -36,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 =
@@ -48,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" },
@@ -60,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();
                         },
                     },
                 },
@@ -130,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,
@@ -210,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,
@@ -226,7 +339,7 @@ const BubbleMenuContent = styled.div `
   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};
@@ -242,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% {
@@ -258,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;
@@ -269,11 +388,31 @@ const BubbleItemButton = styled(Button) `
     background-color: ${({ theme }) => theme.palette.action.hover};
   }
 `;
+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();
+    const [linkEditorOpen, setLinkEditorOpen] = useState(false);
     const { from, to } = editor.state.selection;
     const selectedText = editor.state.doc.textBetween(from, to, "\n", "\n");
-    return (_jsx(BubbleMenuContent, { className: className, children: getMenuItems(editor, customMenuItems, theme).map((item) => {
+    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) }) }));
+    }
+    if (isCodeBlockSelection) {
+        return (_jsx(BubbleMenuContent, { className: className, children: _jsx(CodeBlockBubbleTools, { editor: editor, theme: theme }) }));
+    }
+    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);

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;