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

package/dist/RichTextEditor/RichTextEditor.js

@@ -14,14 +14,73 @@ 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 { TableRails } from "./Components/TableTools";
 import Fonts from "./Enums/Fonts";
 import RichTextEditorContext from "./Contexts/RichTextEditorContext";
+import { getLinkAttributesAtPosition, getLinkRangeAtPosition, openLink, } from "./Utils/linkUtils";
+import { TABLE_CELL_MIN_WIDTH } from "./Utils/tableUtils";
+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/"));
 };
@@ -275,25 +334,81 @@ const StyledContent = styled.div `
     word-break: break-word;
     text-rendering: optimizeLegibility;
 
+    .tableWrapper {
+      max-width: 100%;
+      overflow-x: auto;
+      padding: 5px 0px;
+    }
+
     table {
       border-collapse: collapse;
+      table-layout: fixed;
       width: 100%;
+      overflow: hidden;
 
       th,
       td {
         border: 1px solid ${({ theme }) => theme.palette.divider};
+        box-sizing: border-box;
         padding: 0.5rem;
-        min-width: 100px;
+        min-width: ${TABLE_CELL_MIN_WIDTH}px;
+        position: relative;
+        vertical-align: top;
       }
 
       // for table header
       th {
         border: 1px solid ${({ theme }) => theme.palette.divider};
         padding: 0.5rem;
-        min-width: 100px;
+        min-width: ${TABLE_CELL_MIN_WIDTH}px;
         background-color: ${({ theme }) => theme.palette.action.hover};
         font-weight: 500;
       }
+
+      [align="left"] {
+        text-align: left;
+      }
+
+      [align="center"] {
+        text-align: center;
+      }
+
+      [align="right"] {
+        text-align: right;
+      }
+    }
+
+    .column-resize-handle {
+      position: absolute;
+      top: 0;
+      right: -1px;
+      bottom: 0;
+      z-index: 20;
+      width: 2px;
+      background-color: ${({ theme }) => theme.palette.primary.main};
+      pointer-events: none;
+    }
+
+    &.resize-cursor {
+      cursor: col-resize;
+    }
+
+    .selectedCell::after {
+      position: absolute;
+      inset: 0;
+      z-index: 2;
+      background-color: ${({ theme }) => theme.palette.primary.main}22;
+      content: "";
+      pointer-events: none;
+    }
+
+    .monolith-table-rail-target::after {
+      position: absolute;
+      inset: 0;
+      z-index: 3;
+      background-color: ${({ theme }) => theme.palette.primary.main}18;
+      content: "";
+      pointer-events: none;
     }
 
     h1 {
@@ -320,6 +435,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;
     }
@@ -333,8 +600,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%;
@@ -352,6 +617,7 @@ const StyledContent = styled.div `
     color: #888;
     pointer-events: none;
     height: 0;
+    white-space: nowrap;
   }
   .ProseMirror .is-empty::before {
     content: attr(data-placeholder);
@@ -359,6 +625,7 @@ const StyledContent = styled.div `
     color: #888;
     pointer-events: none;
     height: 0;
+    white-space: nowrap;
   }
 
   .ProseMirror .monolith-image.uploading {
@@ -546,18 +813,69 @@ 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 = [], customSlashCommands = [], 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);
+        }
+        if (command === SlashCommands.Table) {
+            return resolvedExtensionSet.has(Extensions.Table);
+        }
+        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,
+            [Controls.TABLE]: Extensions.Table,
+        };
+        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 hasBubbleMenuExtension = extensions.includes(Extensions.BubbleMenu);
-    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 hasTableExtension = resolvedExtensionSet.has(Extensions.Table);
+    const hasImageSlashCommand = hasSlashCommandExtension &&
+        resolvedSlashCommands.includes(SlashCommands.Image);
     const onChangeRef = useRef(onChange);
+    const customSlashCommandsRef = useRef(customSlashCommands);
     const bubbleMenuPortalRef = useRef(null);
     const [fontState, setFontState] = useState(font || Fonts.DEFAULT);
+    customSlashCommandsRef.current = customSlashCommands;
     useEffect(() => {
         onChangeRef.current = onChange;
     }, [onChange]);
+    const getCustomSlashCommands = useCallback(() => customSlashCommandsRef.current, []);
     const getBubbleMenuPortalRoot = useCallback(() => {
         if (bubbleMenuPortalRef.current) {
             return bubbleMenuPortalRef.current;
@@ -609,11 +927,31 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
         editable: !readOnly,
         shouldRerenderOnTransaction: true,
         extensions: getTipTapExtensions({
-            extensions,
-            slashCommands,
+            disabledExtensions,
+            extensions: resolvedExtensions,
+            slashCommands: resolvedSlashCommands,
+            customSlashCommands,
+            getCustomSlashCommands,
             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;
@@ -674,5 +1012,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, {}), editor && hasBubbleMenuExtension && (_jsx(TiptapBubbleMenu, { editor: editor, pluginKey: "bubbleMenu", updateDelay: 150, appendTo: getBubbleMenuPortalRoot, shouldShow: shouldShowBubbleMenu, options: bubbleMenuPositionOptions, children: _jsx(BubbleMenuContent, { editor: editor, customMenuItems: bubbleMenuOptions === null || bubbleMenuOptions === void 0 ? void 0 : bubbleMenuOptions.customMenuItems }) })), _jsx(EditorContent, { className: "editor-content", editor: editor, "data-font": fontState || null, style: style })] }) }));
+            }, 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 }) })), editor && hasTableExtension && _jsx(TableRails, { editor: editor }), _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

@@ -4,10 +4,16 @@ interface ControlProps {
 }
 export declare const UndoControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const RedoControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FontControl: () => import("react/jsx-runtime").JSX.Element;
+export declare const TextColorControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HighlightControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ClearFormattingControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const BoldControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 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,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } 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, HighlighterIcon, PaletteIcon, RemoveFormattingIcon, SquircleIcon, TypeIcon, } from "lucide-react";
+import { SquareCodeIcon } from "lucide-react";
 import { Control } from "./Control";
+import { hasInlineCode, toggleInlineCode } from "../Utils/codeUtils";
+import { hasSyntaxHighlightedCodeBlock, toggleCodeBlock, } from "../Utils/codeBlockUtils";
+import { useContext } from "react";
+import { useTheme } from "styled-components";
+import { DropDownMenu } from "../../DropDownMenu";
+import RichTextEditorContext from "../Contexts/RichTextEditorContext";
+import Fonts from "../Enums/Fonts";
+import TextColors from "../Enums/TextColors";
+import HighlightColors from "../Enums/HighlightColors";
 export const UndoControl = ({ editor }) => {
     return (_jsx(Control, { editor: editor, label: "undoControlLabel", operation: {
             name: "undo",
@@ -11,6 +22,102 @@ export const RedoControl = ({ editor }) => {
             name: "redo",
         }, icon: IconCornerUpRight }));
 };
+export const FontControl = () => {
+    const { font, setFont } = useContext(RichTextEditorContext);
+    return (_jsx(DropDownMenu, { data: Object.values(Fonts).map((font) => ({
+            label: font,
+            value: font,
+            onClick: () => {
+                setFont(font);
+            },
+        })), size: "xs", variant: "outlined", dropDownProps: {
+            style: {
+                width: 135,
+            },
+        }, buttonProps: {
+            title: "Select Font",
+            leftSection: _jsx(TypeIcon, { size: 12 }),
+        }, children: (font || Fonts.DEFAULT) }));
+};
+export const TextColorControl = ({ editor }) => {
+    const theme = useTheme();
+    return (_jsx(DropDownMenu, { data: [
+            {
+                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();
+                    },
+                };
+            }),
+        ], 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] })), size: "xs", variant: "outlined", buttonProps: {
+            title: "Select Color",
+            style: { padding: "1px 6px" },
+        }, dropDownProps: {
+            style: {
+                width: 120,
+            },
+        }, children: _jsx(PaletteIcon, { size: 14 }) }));
+};
+export const HighlightControl = ({ editor }) => {
+    const theme = useTheme();
+    return (_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: _jsx(HighlighterIcon, { size: 14 }) }));
+};
+export const ClearFormattingControl = ({ editor }) => {
+    return (_jsx(Control, { editor: editor, label: "clearFormattingControlLabel", onClick: (editor) => {
+            editor === null || editor === void 0 ? void 0 : editor.chain().focus().setParagraph().run();
+            editor === null || editor === void 0 ? void 0 : editor.chain().focus().unsetAllMarks().run();
+        }, icon: RemoveFormattingIcon }));
+};
 export const BoldControl = ({ editor }) => {
     return (_jsx(Control, { editor: editor, label: "boldControlLabel", isActive: {
             name: "bold",
@@ -39,6 +146,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",