@monolith-forensics/monolith-ui 1.9.1-dev.1 → 1.9.1-dev.11

package/dist/RichTextEditor/RichTextEditor.js

@@ -8,17 +8,77 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 import { EditorContent, useEditor } from "@tiptap/react";
+import { BubbleMenu as TiptapBubbleMenu, } from "@tiptap/react/menus";
+import { isTextSelection } from "@tiptap/core";
 import { DOMParser as ProseMirrorDOMParser } from "@tiptap/pm/model";
+import { TextSelection } from "@tiptap/pm/state";
 import { Toolbar } from "./Toolbar";
-import getTipTapExtensions from "./Extensions/getTiptapExtensions";
-import { Extensions, SlashCommands } from "./Enums";
+import getTipTapExtensions, { resolveExtensions, } from "./Extensions/getTiptapExtensions";
+import { Controls, Extensions, SlashCommands } from "./Enums";
 import { addImagePlaceholder, removeImagePlaceholder, startImageUpload, } from "./Plugins/UploadImagesPlugin";
 import SaveBadge from "./Components/SaveBadge";
+import BubbleMenuContent from "./Components/BubbleMenu";
 import Fonts from "./Enums/Fonts";
 import RichTextEditorContext from "./Contexts/RichTextEditorContext";
+import { getLinkAttributesAtPosition, getLinkRangeAtPosition, openLink, } from "./Utils/linkUtils";
+const codeBlockFallbacks = {
+    light: {
+        background: "#f6f8fa",
+        text: "#24292f",
+        border: "#d0d7de",
+        selection: "#0969da2e",
+        syntax: {
+            comment: "#6e7781",
+            punctuation: "#24292f",
+            property: "#0550ae",
+            selector: "#116329",
+            operator: "#cf222e",
+            keyword: "#cf222e",
+            string: "#0a3069",
+            number: "#0550ae",
+            function: "#8250df",
+            variable: "#953800",
+            tag: "#116329",
+            attribute: "#0550ae",
+            literal: "#0550ae",
+            deleted: "#82071e",
+            inserted: "#116329",
+        },
+    },
+    dark: {
+        background: "#0d1117",
+        text: "#c9d1d9",
+        border: "#30363d",
+        selection: "#1f6feb40",
+        syntax: {
+            comment: "#8b949e",
+            punctuation: "#c9d1d9",
+            property: "#79c0ff",
+            selector: "#7ee787",
+            operator: "#ff7b72",
+            keyword: "#ff7b72",
+            string: "#a5d6ff",
+            number: "#79c0ff",
+            function: "#d2a8ff",
+            variable: "#ffa657",
+            tag: "#7ee787",
+            attribute: "#79c0ff",
+            literal: "#79c0ff",
+            deleted: "#ffa198",
+            inserted: "#aff5b4",
+        },
+    },
+};
+const getCodeBlockTheme = (theme) => {
+    if (theme.palette.codeBlock)
+        return theme.palette.codeBlock;
+    return theme.palette.mode === "DARK"
+        ? codeBlockFallbacks.dark
+        : codeBlockFallbacks.light;
+};
 const getImageFilesFromClipboard = (clipboardData) => {
     return Array.from(clipboardData.files).filter((file) => file.type.includes("image/"));
 };
@@ -317,6 +377,158 @@ const StyledContent = styled.div `
       margin: 0;
       line-height: 1.5rem;
     }
+    .editor-inline-code,
+    :not(pre) > code {
+      padding: 0.1rem 0.25rem;
+      border: 1px solid ${({ theme }) => theme.palette.divider};
+      border-radius: 4px;
+      background-color: ${({ theme }) => theme.palette.action.hover};
+      color: ${({ theme }) => theme.palette.text.secondary};
+      font-family:
+        ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas,
+        "Liberation Mono", "Courier New", monospace;
+      font-size: 0.9em;
+      box-decoration-break: clone;
+    }
+    .editor-code-block {
+      position: relative;
+      margin: 0.5rem 0;
+      padding: 1rem 0.875rem;
+      overflow-x: auto;
+      border: 1px solid ${({ theme }) => getCodeBlockTheme(theme).border};
+      border-radius: 6px;
+      background-color: ${({ theme }) => getCodeBlockTheme(theme).background};
+      color: ${({ theme }) => getCodeBlockTheme(theme).text};
+      font-family:
+        ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas,
+        "Liberation Mono", "Courier New", monospace;
+      font-size: 0.85rem;
+      line-height: 1.45rem;
+      white-space: pre;
+
+      ::selection {
+        background-color: ${({ theme }) => getCodeBlockTheme(theme).selection};
+      }
+
+      &[data-wrap="true"] {
+        white-space: pre-wrap;
+        word-break: break-word;
+        overflow-wrap: anywhere;
+      }
+
+      code {
+        display: block;
+        min-width: max-content;
+        padding: 0;
+        border: 0;
+        background-color: transparent;
+        color: inherit;
+        font: inherit;
+      }
+
+      &[data-wrap="true"] code {
+        min-width: 0;
+        white-space: inherit;
+      }
+
+      .editor-code-block-actions {
+        display: flex;
+        align-items: center;
+        position: absolute;
+        top: 0.4rem;
+        right: 0.4rem;
+        z-index: 1;
+        gap: 0.25rem;
+        opacity: 0;
+        transition: opacity 120ms ease-in-out;
+      }
+
+      &:hover .editor-code-block-actions,
+      &:focus-within .editor-code-block-actions {
+        opacity: 1;
+      }
+
+      .hljs-comment,
+      .hljs-quote {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.comment};
+      }
+
+      .hljs-punctuation {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.punctuation};
+      }
+
+      .hljs-property,
+      .hljs-attr,
+      .hljs-attribute,
+      .hljs-doctag {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.property};
+      }
+
+      .hljs-selector-tag,
+      .hljs-selector-id,
+      .hljs-selector-class,
+      .hljs-selector-attr,
+      .hljs-selector-pseudo {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.selector};
+      }
+
+      .hljs-operator,
+      .hljs-params {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.operator};
+      }
+
+      .hljs-keyword,
+      .hljs-meta .hljs-keyword,
+      .hljs-template-tag,
+      .hljs-template-variable {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.keyword};
+      }
+
+      .hljs-string,
+      .hljs-regexp {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.string};
+      }
+
+      .hljs-number {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.number};
+      }
+
+      .hljs-title,
+      .hljs-title.function_,
+      .hljs-title.class_ {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.function};
+      }
+
+      .hljs-variable,
+      .hljs-name,
+      .hljs-section,
+      .hljs-symbol {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.variable};
+      }
+
+      .hljs-tag {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.tag};
+      }
+
+      .hljs-built_in,
+      .hljs-type,
+      .hljs-literal {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.literal};
+      }
+
+      .hljs-meta,
+      .hljs-link {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.attribute};
+      }
+
+      .hljs-deletion {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.deleted};
+      }
+
+      .hljs-addition {
+        color: ${({ theme }) => getCodeBlockTheme(theme).syntax.inserted};
+      }
+    }
     ul {
       margin: 0;
     }
@@ -330,8 +542,6 @@ const StyledContent = styled.div `
       color: ${({ theme }) => theme.palette.text.primary};
       text-decoration: underline;
       cursor: pointer;
-      // Set title attribute
-      title: "Click to open link";
     }
     img {
       max-width: 100%;
@@ -543,16 +753,99 @@ const StyledContent = styled.div `
     margin: 0 0.125rem;
   }
 `;
-export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = "", value, readOnly = false, font, showToolbar = true, saving = false, extensions = [], slashCommands = [], bubbleMenuOptions, toolbarOptions, autoFocus, onChange, handleImageUpload, handleImageUrlUpload, style, }) => {
+export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = "", value, readOnly = false, font, showToolbar = true, saving = false, disabledExtensions = [], extensionPreset = "basic", extensions = [], slashCommands = [], bubbleMenuOptions, toolbarOptions, autoFocus, onChange, handleImageUpload, handleImageUrlUpload, style, }) => {
+    const resolvedExtensions = useMemo(() => resolveExtensions({
+        disabledExtensions,
+        extensionPreset,
+        extensions,
+    }), [disabledExtensions, extensionPreset, extensions]);
+    const resolvedExtensionSet = useMemo(() => new Set(resolvedExtensions), [resolvedExtensions]);
+    const resolvedSlashCommands = useMemo(() => slashCommands.filter((command) => {
+        if (command === SlashCommands.Code) {
+            return resolvedExtensionSet.has(Extensions.Code);
+        }
+        if (command === SlashCommands.CodeBlock) {
+            return resolvedExtensionSet.has(Extensions.CodeBlock);
+        }
+        return true;
+    }), [resolvedExtensionSet, slashCommands]);
+    const resolvedToolbarOptions = useMemo(() => {
+        if (!(toolbarOptions === null || toolbarOptions === void 0 ? void 0 : toolbarOptions.controls))
+            return toolbarOptions;
+        const controlExtensionMap = {
+            [Controls.BOLD]: Extensions.Bold,
+            [Controls.ITALIC]: Extensions.Italic,
+            [Controls.UNDERLINE]: Extensions.Underline,
+            [Controls.STRIKE]: Extensions.Strike,
+            [Controls.CODE]: Extensions.Code,
+            [Controls.CODE_BLOCK]: Extensions.CodeBlock,
+            [Controls.BULLET_LIST]: Extensions.BulletList,
+            [Controls.ORDERED_LIST]: Extensions.OrderedList,
+            [Controls.COLOR]: Extensions.Color,
+            [Controls.HIGHLIGHT]: Extensions.Highlight,
+            [Controls.LINK]: Extensions.Link,
+            [Controls.TEXT_ALIGN_LEFT]: Extensions.TextAlign,
+            [Controls.TEXT_ALIGN_CENTER]: Extensions.TextAlign,
+            [Controls.TEXT_ALIGN_RIGHT]: Extensions.TextAlign,
+            [Controls.TEXT_ALIGN_JUSTIFIED]: Extensions.TextAlign,
+        };
+        return Object.assign(Object.assign({}, toolbarOptions), { controls: toolbarOptions.controls.filter((control) => {
+                if (typeof control !== "string")
+                    return true;
+                const extension = controlExtensionMap[control];
+                return !extension || resolvedExtensionSet.has(extension);
+            }) });
+    }, [resolvedExtensionSet, toolbarOptions]);
     const isControlled = value !== undefined;
-    const hasImageExtension = extensions.includes(Extensions.Image);
-    const hasSlashCommandExtension = extensions.includes(Extensions.SlashCommand);
-    const hasImageSlashCommand = hasSlashCommandExtension && slashCommands.includes(SlashCommands.Image);
+    const hasImageExtension = resolvedExtensionSet.has(Extensions.Image);
+    const hasSlashCommandExtension = resolvedExtensionSet.has(Extensions.SlashCommand);
+    const hasBubbleMenuExtension = resolvedExtensionSet.has(Extensions.BubbleMenu);
+    const hasImageSlashCommand = hasSlashCommandExtension &&
+        resolvedSlashCommands.includes(SlashCommands.Image);
     const onChangeRef = useRef(onChange);
+    const bubbleMenuPortalRef = useRef(null);
     const [fontState, setFontState] = useState(font || Fonts.DEFAULT);
     useEffect(() => {
         onChangeRef.current = onChange;
     }, [onChange]);
+    const getBubbleMenuPortalRoot = useCallback(() => {
+        if (bubbleMenuPortalRef.current) {
+            return bubbleMenuPortalRef.current;
+        }
+        const portal = document.createElement("div");
+        portal.setAttribute("data-monolith-bubble-menu-portal", "");
+        document.body.appendChild(portal);
+        bubbleMenuPortalRef.current = portal;
+        return portal;
+    }, []);
+    useEffect(() => {
+        return () => {
+            var _a;
+            (_a = bubbleMenuPortalRef.current) === null || _a === void 0 ? void 0 : _a.remove();
+            bubbleMenuPortalRef.current = null;
+        };
+    }, []);
+    const shouldShowBubbleMenu = useCallback(({ editor, element, view, state, from, to }) => {
+        const { selection } = state;
+        const isChildOfMenu = element.contains(document.activeElement);
+        const hasEditorFocus = view.hasFocus() || isChildOfMenu;
+        const selectedText = state.doc.textBetween(from, to).trim();
+        const isEmptyTextBlock = !selectedText && isTextSelection(state.selection);
+        if (!hasEditorFocus ||
+            selection.empty ||
+            isEmptyTextBlock ||
+            !editor.isEditable) {
+            return false;
+        }
+        return true;
+    }, []);
+    const bubbleMenuPositionOptions = useMemo(() => ({
+        strategy: "fixed",
+        placement: "top",
+        offset: 8,
+        flip: false,
+        shift: { padding: 10 },
+    }), []);
     if (hasImageSlashCommand && !hasImageExtension) {
         throw new Error("Extensions.Image is required when using the Image slash command.");
     }
@@ -566,12 +859,29 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
         editable: !readOnly,
         shouldRerenderOnTransaction: true,
         extensions: getTipTapExtensions({
-            extensions,
-            slashCommands,
-            bubbleMenuOptions,
+            disabledExtensions,
+            extensions: resolvedExtensions,
+            slashCommands: resolvedSlashCommands,
             handleImageUpload,
         }),
         editorProps: {
+            handleClick: (view, pos, event) => {
+                const linkRange = getLinkRangeAtPosition(view.state, pos);
+                const linkAttributes = getLinkAttributesAtPosition(view.state, pos);
+                if (!linkRange || !(linkAttributes === null || linkAttributes === void 0 ? void 0 : linkAttributes.href))
+                    return false;
+                const mouseEvent = event;
+                mouseEvent.preventDefault();
+                mouseEvent.stopPropagation();
+                const shouldOpenLink = mouseEvent.metaKey || mouseEvent.ctrlKey || !view.editable;
+                if (shouldOpenLink) {
+                    openLink(linkAttributes.href);
+                    return true;
+                }
+                view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, linkRange.from, linkRange.to)));
+                view.focus();
+                return true;
+            },
             handlePaste: (view, event) => {
                 if (!hasImageExtension || !handleImageUpload)
                     return false;
@@ -632,5 +942,5 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
     return (_jsx(StyledContent, { className: className, children: _jsxs(RichTextEditorContext.Provider, { value: {
                 font: fontState,
                 setFont: setFontState,
-            }, children: [showToolbar && (_jsx(Toolbar, { editor: editor, toolbarOptions: toolbarOptions })), saving && _jsx(SaveBadge, {}), _jsx(EditorContent, { className: "editor-content", editor: editor, "data-font": fontState || null, style: style })] }) }));
+            }, children: [showToolbar && (_jsx(Toolbar, { editor: editor, toolbarOptions: resolvedToolbarOptions })), saving && _jsx(SaveBadge, {}), editor && hasBubbleMenuExtension && (_jsx(TiptapBubbleMenu, { editor: editor, pluginKey: "bubbleMenu", updateDelay: 200, appendTo: getBubbleMenuPortalRoot, shouldShow: shouldShowBubbleMenu, options: bubbleMenuPositionOptions, children: _jsx(BubbleMenuContent, { editor: editor, customMenuItems: bubbleMenuOptions === null || bubbleMenuOptions === void 0 ? void 0 : bubbleMenuOptions.customMenuItems }) })), _jsx(EditorContent, { className: "editor-content", editor: editor, "data-font": fontState || null, style: style })] }) }));
 };

package/dist/RichTextEditor/Toolbar/Control.d.ts

@@ -1,13 +1,17 @@
 import { Editor } from "@tiptap/react";
+import { ButtonProps } from "../../Button";
 export type ControlProps = {
     className?: string;
     editor: Editor | null;
     isActive?: any;
-    operation: {
+    operation?: {
         name: string;
         attributes?: any;
     };
+    onClick?: (editor: Editor | null) => void;
+    disabled?: boolean;
     label: string;
     icon: any;
+    size?: ButtonProps["size"];
 };
-export declare const Control: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ControlProps, never>> & string & Omit<({ className, editor, isActive, operation, label, icon: Icon, }: ControlProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const Control: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ControlProps, never>> & string & Omit<({ className, editor, isActive, operation, onClick, disabled, label, icon: Icon, size, }: ControlProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/dist/RichTextEditor/Toolbar/Control.js

@@ -1,23 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import Labels from "./Labels";
-export const Control = styled(({ className, editor, isActive, operation, label, icon: Icon, }) => {
+import { Button } from "../../Button";
+export const Control = styled(({ className, editor, isActive, operation, onClick, disabled, label, icon: Icon, size = "xs", }) => {
     var _a;
     const _label = Labels[label];
     const active = (isActive === null || isActive === void 0 ? void 0 : isActive.name)
         ? (_a = editor === null || editor === void 0 ? void 0 : editor.isActive) === null || _a === void 0 ? void 0 : _a.call(editor, isActive.name, isActive.attributes)
         : false;
-    return (_jsx("button", { className: className + (active ? " active" : ""), "aria-label": _label, "data-active": active, title: _label, onClick: () => {
+    return (_jsx(Button, { className: className + (active ? " active" : ""), "aria-label": _label, "data-active": active, title: _label, disabled: disabled, onClick: () => {
+            if (onClick) {
+                onClick(editor);
+                return;
+            }
+            if (!operation)
+                return;
             const focus = editor === null || editor === void 0 ? void 0 : editor.chain().focus();
             focus[operation.name](operation.attributes).run();
-        }, children: _jsx(Icon, { size: "16px" }) }));
+        }, size: size, children: _jsx(Icon, { size: "16px" }) }));
 }) `
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  padding: 0px;
+
+  padding: 5px;
+
   background-color: transparent;
   cursor: pointer;
   color: ${({ theme }) => theme.palette.text.primary};

package/dist/RichTextEditor/Toolbar/Controls.d.ts

@@ -8,6 +8,8 @@ export declare const BoldControl: ({ editor }: ControlProps) => import("react/js
 export declare const ItalicControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const UnderlineControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const StrikeThroughControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CodeControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CodeBlockControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Heading1Control: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Heading2Control: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Heading3Control: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;

package/dist/RichTextEditor/Toolbar/Controls.js

@@ -1,6 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { IconBold, IconItalic, IconUnderline, IconStrikethrough, IconH1, IconH2, IconH3, IconH4, IconList, IconListNumbers, IconAlignLeft, IconAlignRight, IconAlignCenter, IconAlignJustified, IconCornerUpLeft, IconCornerUpRight, } from "@tabler/icons-react";
+import { CodeIcon } from "lucide-react";
+import { SquareCodeIcon } from "lucide-react";
 import { Control } from "./Control";
+import { hasInlineCode, toggleInlineCode } from "../Utils/codeUtils";
+import { hasSyntaxHighlightedCodeBlock, toggleCodeBlock, } from "../Utils/codeBlockUtils";
 export const UndoControl = ({ editor }) => {
     return (_jsx(Control, { editor: editor, label: "undoControlLabel", operation: {
             name: "undo",
@@ -39,6 +43,16 @@ export const StrikeThroughControl = ({ editor }) => {
             name: "toggleStrike",
         }, icon: IconStrikethrough }));
 };
+export const CodeControl = ({ editor }) => {
+    return (_jsx(Control, { editor: editor, label: "codeControlLabel", isActive: {
+            name: "code",
+        }, onClick: toggleInlineCode, disabled: !hasInlineCode(editor), icon: CodeIcon }));
+};
+export const CodeBlockControl = ({ editor }) => {
+    return (_jsx(Control, { editor: editor, label: "codeBlockControlLabel", isActive: {
+            name: "codeBlock",
+        }, onClick: toggleCodeBlock, disabled: !hasSyntaxHighlightedCodeBlock(editor), icon: SquareCodeIcon }));
+};
 export const Heading1Control = ({ editor }) => {
     return (_jsx(Control, { editor: editor, label: "h1ControlLabel", isActive: {
             name: "heading",

package/dist/RichTextEditor/Toolbar/ControlsGroup.js

@@ -9,6 +9,7 @@ const ControlsGroup = styled(forwardRef(({ className, children }, ref) => {
 })) `
   & {
     display: flex;
+    flex: 0 0 auto;
     justify-content: flex-start;
     align-items: center;
   }

package/dist/RichTextEditor/Toolbar/Toolbar.js

@@ -1,33 +1,41 @@
-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 ControlsGroup from "./ControlsGroup";
-import { UndoControl, RedoControl, BoldControl, ItalicControl, UnderlineControl, StrikeThroughControl, Heading1Control, Heading2Control, Heading3Control, Heading4Control, BulletListControl, OrderedListControl, AlignLeftControl, AlignCenterControl, AlignRightControl, AlignJustifiedControl, } from "./Controls";
+import { UndoControl, RedoControl, BoldControl, ItalicControl, UnderlineControl, StrikeThroughControl, CodeControl, CodeBlockControl, Heading1Control, Heading2Control, Heading3Control, Heading4Control, BulletListControl, OrderedListControl, AlignLeftControl, AlignCenterControl, AlignRightControl, AlignJustifiedControl, } from "./Controls";
 import { Controls } from "../Enums";
 import { DropDownMenu } from "../../DropDownMenu";
 import Fonts from "../Enums/Fonts";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import RichTextEditorContext from "../Contexts/RichTextEditorContext";
 import { Button } from "../../Button";
+import { Popover } from "../../Popover";
 import TextColors from "../Enums/TextColors";
-import { SquircleIcon } from "lucide-react";
+import HighlightColors from "../Enums/HighlightColors";
+import LinkEditor from "../Components/LinkEditor";
+import CodeBlockWrapButton from "../Components/CodeBlockWrapButton";
+import CodeBlockFormatButton from "../Components/CodeBlockFormatButton";
+import { hasSyntaxHighlightedCodeBlock } from "../Utils/codeBlockUtils";
+import { HighlighterIcon, LinkIcon, PaletteIcon, SquircleIcon, TypeIcon, } from "lucide-react";
 export const Toolbar = styled(({ className, editor, toolbarOptions }) => {
     var _a;
     const theme = useTheme();
     const { controls } = toolbarOptions || {};
+    const [linkPopoverOpen, setLinkPopoverOpen] = useState(false);
     const customItems = controls === null || controls === void 0 ? void 0 : controls.filter((control) => typeof control !== "string" &&
         (control.type === "menu" || control.type === "button"));
     const { font, setFont } = useContext(RichTextEditorContext);
+    const showCodeBlockLanguageSelect = (editor === null || editor === void 0 ? void 0 : editor.isActive("codeBlock")) && hasSyntaxHighlightedCodeBlock(editor);
     return (_jsxs("div", { className: className, children: [(_a = customItems === null || customItems === void 0 ? void 0 : customItems.map) === null || _a === void 0 ? void 0 : _a.call(customItems, (item, index) => {
                 var _a, _b;
                 if (item.type === "button") {
-                    return (_jsx(Button, Object.assign({}, item.options, { children: (_a = item === null || item === void 0 ? void 0 : item.options) === null || _a === void 0 ? void 0 : _a.label }), index));
+                    return (_jsx(Button, Object.assign({ size: "xs" }, item.options, { children: (_a = item === null || item === void 0 ? void 0 : item.options) === null || _a === void 0 ? void 0 : _a.label }), index));
                 }
                 else if (item.type === "menu") {
                     return (_jsx(DropDownMenu, Object.assign({ dropDownProps: {
                             style: {
                                 width: 135,
                             },
-                        } }, item.options, { children: (_b = item === null || item === void 0 ? void 0 : item.options) === null || _b === void 0 ? void 0 : _b.label }), index));
+                        } }, item.options, { size: "xs", children: (_b = item === null || item === void 0 ? void 0 : item.options) === null || _b === void 0 ? void 0 : _b.label }), index));
                 }
             }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.FONT)) && (_jsx(DropDownMenu, { data: Object.values(Fonts).map((font) => ({
                     label: font,
@@ -35,12 +43,13 @@ export const Toolbar = styled(({ className, editor, toolbarOptions }) => {
                     onClick: () => {
                         setFont(font);
                     },
-                })), size: "xxs", variant: "outlined", arrow: true, dropDownProps: {
+                })), size: "xs", variant: "outlined", dropDownProps: {
                     style: {
                         width: 135,
                     },
                 }, buttonProps: {
                     title: "Select Font",
+                    leftSection: _jsx(TypeIcon, { size: 12 }),
                 }, children: (font || Fonts.DEFAULT) })), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.UNDO)) && _jsx(UndoControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.REDO)) && _jsx(RedoControl, { editor: editor })] }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.COLOR)) && (_jsx(DropDownMenu, { data: [
                     {
                         label: "Default",
@@ -66,20 +75,63 @@ export const Toolbar = styled(({ className, editor, toolbarOptions }) => {
                                     ? theme.palette.text.primary
                                     : item.value,
                                 borderRadius: "3px",
-                            } }), item.label] })), size: "xxs", variant: "outlined", arrow: true, buttonProps: {
+                            } }), item.label] })), size: "xs", variant: "outlined", buttonProps: {
                     title: "Select Color",
+                    style: { padding: "1px 6px" },
+                }, dropDownProps: {
+                    style: {
+                        width: 120,
+                    },
+                }, children: _jsx(PaletteIcon, { size: 14 }) })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HIGHLIGHT)) && (_jsx(DropDownMenu, { data: [
+                    {
+                        label: "Default",
+                        value: "default",
+                        onClick: () => {
+                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().unsetHighlight().run();
+                        },
+                    },
+                    ...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();
+                            },
+                        };
+                    }),
+                ], 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] })), size: "xs", variant: "outlined", buttonProps: {
+                    title: "Select Highlight",
+                    style: { padding: "1px 6px" },
                 }, dropDownProps: {
                     style: {
                         width: 100,
+                        height: 210,
                     },
-                }, children: "Color" })), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BOLD)) && _jsx(BoldControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.ITALIC)) && (_jsx(ItalicControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.UNDERLINE)) && (_jsx(UnderlineControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.STRIKE)) && (_jsx(StrikeThroughControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_1)) && (_jsx(Heading1Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_2)) && (_jsx(Heading2Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_3)) && (_jsx(Heading3Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_4)) && (_jsx(Heading4Control, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BULLET_LIST)) && (_jsx(BulletListControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.ORDERED_LIST)) && (_jsx(OrderedListControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_LEFT)) && (_jsx(AlignLeftControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_CENTER)) && (_jsx(AlignCenterControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_RIGHT)) && (_jsx(AlignRightControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_JUSTIFIED)) && (_jsx(AlignJustifiedControl, { editor: editor }))] })] }));
+                }, children: _jsx(HighlighterIcon, { size: 14 }) })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.LINK)) && (_jsxs(Popover, { opened: linkPopoverOpen, onChange: setLinkPopoverOpen, position: "bottom", width: 330, trapFocus: true, children: [_jsx(Popover.Target, { children: _jsx(Button, { size: "xs", variant: "outlined", title: "Link", "aria-label": "Link", selected: linkPopoverOpen || Boolean(editor === null || editor === void 0 ? void 0 : editor.isActive("link")), disabled: !editor, style: { padding: "1px 6px" }, children: _jsx(LinkIcon, { size: 14 }) }) }), _jsx(Popover.Dropdown, { children: editor && (_jsx(LinkEditor, { editor: editor, autoFocus: linkPopoverOpen, onClose: () => setLinkPopoverOpen(false) })) })] })), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BOLD)) && _jsx(BoldControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.ITALIC)) && (_jsx(ItalicControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.UNDERLINE)) && (_jsx(UnderlineControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.STRIKE)) && (_jsx(StrikeThroughControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.CODE)) && _jsx(CodeControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.CODE_BLOCK)) && (_jsx(CodeBlockControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.CODE_BLOCK)) &&
+                        showCodeBlockLanguageSelect && (_jsxs(_Fragment, { children: [_jsx(CodeBlockWrapButton, { editor: editor }), _jsx(CodeBlockFormatButton, { editor: editor })] }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_1)) && (_jsx(Heading1Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_2)) && (_jsx(Heading2Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_3)) && (_jsx(Heading3Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_4)) && (_jsx(Heading4Control, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BULLET_LIST)) && (_jsx(BulletListControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.ORDERED_LIST)) && (_jsx(OrderedListControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_LEFT)) && (_jsx(AlignLeftControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_CENTER)) && (_jsx(AlignCenterControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_RIGHT)) && (_jsx(AlignRightControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_JUSTIFIED)) && (_jsx(AlignJustifiedControl, { editor: editor }))] })] }));
 }) `
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: 5px;
+  row-gap: 6px;
+  width: 100%;
   margin-bottom: 10px;
   border-radius: 5px 5px 0 0;
   border: 1px solid transparent;
+
+  > button,
+  > .mfui-DropDownMenu {
+    flex: 0 0 auto;
+  }
 `;

package/dist/RichTextEditor/Utils/codeBlockUtils.d.ts

@@ -0,0 +1,20 @@
+import { Editor } from "@tiptap/react";
+export type CodeBlockLanguage = {
+    label: string;
+    value: string;
+};
+export declare const DEFAULT_CODE_BLOCK_LANGUAGE = "plaintext";
+export declare const CODE_BLOCK_LANGUAGES: CodeBlockLanguage[];
+export declare const getCodeBlockLanguage: (editor: Editor | null) => string;
+export declare const getCodeBlockLanguageOption: (language?: string) => CodeBlockLanguage;
+export declare const canFormatCodeBlockLanguage: (language?: string) => boolean;
+export declare const formatCodeBlockText: (text: string, language?: string) => Promise<string>;
+export declare const hasSyntaxHighlightedCodeBlock: (editor: Editor | null) => boolean;
+export declare const setCodeBlockLanguage: (editor: Editor | null, language: string) => void;
+export declare const getCodeBlockWrap: (editor: Editor | null) => boolean;
+export declare const toggleCodeBlockWrap: (editor: Editor | null) => void;
+export declare const toggleCodeBlock: (editor: Editor | null) => void;
+export declare const getActiveCodeBlockText: (editor: Editor | null) => string;
+export declare const replaceCodeBlockContent: (editor: Editor, from: number, to: number, text: string) => boolean;
+export declare const formatActiveCodeBlock: (editor: Editor | null) => Promise<void>;
+export declare const copyCodeBlockText: (text: string) => Promise<void>;