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

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",

package/dist/RichTextEditor/Toolbar/ControlsGroup.js

@@ -1,29 +1,40 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { Children, forwardRef } from "react";
 import styled from "styled-components";
 const ControlsGroup = styled(forwardRef(({ className, children }, ref) => {
-    if (!children) {
+    if (Children.toArray(children).length === 0) {
         return null;
     }
     return (_jsx("div", { className: className + " controls-group", ref: ref, children: children }));
 })) `
   & {
     display: flex;
+    flex: 0 0 auto;
     justify-content: flex-start;
     align-items: center;
   }
-  & button {
+
+  & > button {
     border-radius: 0;
     border: 1px solid ${({ theme }) => theme.palette.divider};
-    border-right: none;
   }
-  & button:first-child {
+
+  & > button:not(:last-of-type) {
+    border-right: 1px solid transparent;
+  }
+
+  & > button:first-child {
     border-radius: 5px 0 0 5px;
   }
-  & button:last-child {
+
+  & > button:last-of-type {
     border-radius: 0 5px 5px 0;
     border-right: 1px solid ${({ theme }) => theme.palette.divider};
   }
+
+  & > button:active {
+    translate: none;
+  }
 `;
 ControlsGroup.displayName = "ControlsGroup";
 export default ControlsGroup;

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

@@ -27,6 +27,7 @@ declare const Labels: {
     superscriptControlLabel: string;
     unsetColorControlLabel: string;
     hrControlLabel: string;
+    tableControlLabel: string;
     linkEditorInputLabel: string;
     linkEditorInputPlaceholder: string;
     linkEditorExternalLink: string;

package/dist/RichTextEditor/Toolbar/Labels.js

@@ -29,6 +29,7 @@ const Labels = {
     superscriptControlLabel: "Superscript",
     unsetColorControlLabel: "Unset color",
     hrControlLabel: "Horizontal line",
+    tableControlLabel: "Table",
     // Link editor
     linkEditorInputLabel: "Enter URL",
     linkEditorInputPlaceholder: "https://example.com/",

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

@@ -17,8 +17,7 @@ export type ToolbarOptions = {
     customItems?: CustomItem[];
 };
 export type ToolbarProps = {
-    className?: string;
     editor: Editor | null;
     toolbarOptions?: ToolbarOptions;
 };
-export declare const Toolbar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ToolbarProps, never>> & string & Omit<({ className, editor, toolbarOptions }: ToolbarProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const Toolbar: ({ editor, toolbarOptions }: ToolbarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/RichTextEditor/Toolbar/Toolbar.js

@@ -1,85 +1,50 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled, { useTheme } from "styled-components";
+import styled 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, FontControl, TextColorControl, HighlightControl, BoldControl, ItalicControl, UnderlineControl, StrikeThroughControl, ClearFormattingControl, 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 RichTextEditorContext from "../Contexts/RichTextEditorContext";
+import { useState } from "react";
 import { Button } from "../../Button";
-import TextColors from "../Enums/TextColors";
-import { SquircleIcon } from "lucide-react";
-export const Toolbar = styled(({ className, editor, toolbarOptions }) => {
+import { Popover } from "../../Popover";
+import LinkEditor from "../Components/LinkEditor";
+import { TableToolsPopover } from "../Components/TableTools";
+import { LinkIcon } from "lucide-react";
+const ToolbarContainer = styled.div `
+  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;
+  }
+`;
+export const Toolbar = ({ 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);
-    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) => {
+    return (_jsxs(ToolbarContainer, { 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,
-                    value: font,
-                    onClick: () => {
-                        setFont(font);
-                    },
-                })), size: "xxs", variant: "outlined", arrow: true, dropDownProps: {
-                    style: {
-                        width: 135,
-                    },
-                }, buttonProps: {
-                    title: "Select Font",
-                }, 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",
-                        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: "xxs", variant: "outlined", arrow: true, buttonProps: {
-                    title: "Select Color",
-                }, dropDownProps: {
-                    style: {
-                        width: 100,
-                    },
-                }, 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 }))] })] }));
-}) `
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 5px;
-  margin-bottom: 10px;
-  border-radius: 5px 5px 0 0;
-  border: 1px solid transparent;
-`;
+            }), _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 })] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.FONT)) && _jsx(FontControl, {}), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.COLOR)) && (_jsx(TextColorControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HIGHLIGHT)) && (_jsx(HighlightControl, { editor: editor }))] }), _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 }))] }), (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.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.TABLE)) && (_jsx(TableToolsPopover, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.CLEAR_FORMATTING)) && (_jsx(ClearFormattingControl, { editor: editor }))] }));
+};

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>;

package/dist/RichTextEditor/Utils/codeBlockUtils.js

@@ -0,0 +1,137 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import prettier from "prettier/standalone";
+import * as prettierBabelPlugin from "prettier/plugins/babel";
+import * as prettierEstreePlugin from "prettier/plugins/estree";
+import * as prettierHtmlPlugin from "prettier/plugins/html";
+import * as prettierMarkdownPlugin from "prettier/plugins/markdown";
+import * as prettierPostcssPlugin from "prettier/plugins/postcss";
+import * as prettierTypescriptPlugin from "prettier/plugins/typescript";
+import * as prettierYamlPlugin from "prettier/plugins/yaml";
+export const DEFAULT_CODE_BLOCK_LANGUAGE = "plaintext";
+export const CODE_BLOCK_LANGUAGES = [
+    { label: "Plain Text", value: DEFAULT_CODE_BLOCK_LANGUAGE },
+    { label: "JavaScript", value: "javascript" },
+    { label: "TypeScript", value: "typescript" },
+    { label: "JSX", value: "jsx" },
+    { label: "TSX", value: "tsx" },
+    { label: "HTML", value: "html" },
+    { label: "CSS", value: "css" },
+    { label: "JSON", value: "json" },
+    { label: "Markdown", value: "markdown" },
+    { label: "Bash", value: "bash" },
+    { label: "Python", value: "python" },
+    { label: "SQL", value: "sql" },
+    { label: "YAML", value: "yaml" },
+    { label: "XML", value: "xml" },
+];
+const PRETTIER_PARSERS = {
+    javascript: "babel",
+    jsx: "babel",
+    typescript: "typescript",
+    tsx: "typescript",
+    html: "html",
+    css: "css",
+    json: "json",
+    markdown: "markdown",
+    yaml: "yaml",
+};
+const PRETTIER_PLUGINS = [
+    prettierBabelPlugin,
+    prettierEstreePlugin,
+    prettierHtmlPlugin,
+    prettierMarkdownPlugin,
+    prettierPostcssPlugin,
+    prettierTypescriptPlugin,
+    prettierYamlPlugin,
+];
+export const getCodeBlockLanguage = (editor) => {
+    var _a;
+    return (((_a = editor === null || editor === void 0 ? void 0 : editor.getAttributes("codeBlock")) === null || _a === void 0 ? void 0 : _a.language) ||
+        DEFAULT_CODE_BLOCK_LANGUAGE);
+};
+export const getCodeBlockLanguageOption = (language) => {
+    return (CODE_BLOCK_LANGUAGES.find((item) => item.value === language) ||
+        CODE_BLOCK_LANGUAGES[0]);
+};
+export const canFormatCodeBlockLanguage = (language) => {
+    return Boolean(language && PRETTIER_PARSERS[language]);
+};
+export const formatCodeBlockText = (text, language) => __awaiter(void 0, void 0, void 0, function* () {
+    const parser = language ? PRETTIER_PARSERS[language] : undefined;
+    if (!parser) {
+        throw new Error("Code formatting is not supported for this language.");
+    }
+    const formatted = yield prettier.format(text, {
+        parser,
+        plugins: PRETTIER_PLUGINS,
+    });
+    return formatted.replace(/\n$/, "");
+});
+export const hasSyntaxHighlightedCodeBlock = (editor) => {
+    return Boolean(editor === null || editor === void 0 ? void 0 : editor.extensionManager.extensions.find((extension) => { var _a; return extension.name === "codeBlock" && ((_a = extension.options) === null || _a === void 0 ? void 0 : _a.lowlight); }));
+};
+export const setCodeBlockLanguage = (editor, language) => {
+    if (!(editor === null || editor === void 0 ? void 0 : editor.isActive("codeBlock")))
+        return;
+    editor.chain().focus().updateAttributes("codeBlock", { language }).run();
+};
+export const getCodeBlockWrap = (editor) => {
+    var _a;
+    return Boolean((_a = editor === null || editor === void 0 ? void 0 : editor.getAttributes("codeBlock")) === null || _a === void 0 ? void 0 : _a.wrap);
+};
+export const toggleCodeBlockWrap = (editor) => {
+    if (!(editor === null || editor === void 0 ? void 0 : editor.isActive("codeBlock")))
+        return;
+    editor
+        .chain()
+        .focus()
+        .updateAttributes("codeBlock", { wrap: !getCodeBlockWrap(editor) })
+        .run();
+};
+export const toggleCodeBlock = (editor) => {
+    if (!editor)
+        return;
+    editor
+        .chain()
+        .focus()
+        .toggleCodeBlock({ language: DEFAULT_CODE_BLOCK_LANGUAGE })
+        .run();
+};
+export const getActiveCodeBlockText = (editor) => {
+    if (!(editor === null || editor === void 0 ? void 0 : editor.isActive("codeBlock")))
+        return "";
+    return editor.state.selection.$from.parent.textContent;
+};
+export const replaceCodeBlockContent = (editor, from, to, text) => {
+    return editor.commands.command(({ state, tr }) => {
+        if (text.length) {
+            tr.replaceWith(from, to, state.schema.text(text));
+        }
+        else {
+            tr.delete(from, to);
+        }
+        return true;
+    });
+};
+export const formatActiveCodeBlock = (editor) => __awaiter(void 0, void 0, void 0, function* () {
+    if (!(editor === null || editor === void 0 ? void 0 : editor.isActive("codeBlock")))
+        return;
+    const language = getCodeBlockLanguage(editor);
+    const formatted = yield formatCodeBlockText(getActiveCodeBlockText(editor), language);
+    replaceCodeBlockContent(editor, editor.state.selection.$from.start(), editor.state.selection.$from.end(), formatted);
+});
+export const copyCodeBlockText = (text) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    if (!((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.writeText)) {
+        throw new Error("Clipboard copying is not supported by this browser.");
+    }
+    yield navigator.clipboard.writeText(text);
+});

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

@@ -0,0 +1,3 @@
+import { Editor } from "@tiptap/react";
+export declare const hasInlineCode: (editor: Editor | null) => boolean;
+export declare const toggleInlineCode: (editor: Editor | null) => void;

package/dist/RichTextEditor/Utils/codeUtils.js

@@ -0,0 +1,12 @@
+export const hasInlineCode = (editor) => {
+    return Boolean(editor === null || editor === void 0 ? void 0 : editor.extensionManager.extensions.find((extension) => extension.name === "code"));
+};
+export const toggleInlineCode = (editor) => {
+    if (!editor || !hasInlineCode(editor))
+        return;
+    if (editor.isActive("code")) {
+        editor.chain().focus().unsetCode().run();
+        return;
+    }
+    editor.chain().focus().unsetAllMarks().setCode().run();
+};

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

@@ -0,0 +1,19 @@
+import { EditorState } from "@tiptap/pm/state";
+export declare const LINK_TARGET = "_blank";
+export declare const LINK_REL = "noopener noreferrer nofollow";
+export type NormalizedLink = {
+    href: string;
+    isValid: boolean;
+};
+export declare const normalizeLinkUrl: (value?: string | null) => NormalizedLink;
+export declare const getLinkAttributes: (href: string) => {
+    href: string;
+    target: string;
+    rel: string;
+    class: string;
+};
+export declare const openLink: (href?: string | null) => void;
+export declare const getLinkRangeAtPosition: (state: EditorState, pos: number) => void | import("@tiptap/core").Range;
+export declare const getLinkAttributesAtPosition: (state: EditorState, pos: number) => {
+    href?: string;
+} | undefined;

package/dist/RichTextEditor/Utils/linkUtils.js

@@ -0,0 +1,57 @@
+import { getMarkRange } from "@tiptap/core";
+export const LINK_TARGET = "_blank";
+export const LINK_REL = "noopener noreferrer nofollow";
+export const normalizeLinkUrl = (value) => {
+    const trimmedValue = (value === null || value === void 0 ? void 0 : value.trim()) || "";
+    if (!trimmedValue) {
+        return { href: "", isValid: false };
+    }
+    const href = /^[a-z][a-z0-9+.-]*:/i.test(trimmedValue)
+        ? trimmedValue
+        : `https://${trimmedValue}`;
+    try {
+        const url = new URL(href);
+        const isValid = url.protocol === "http:" || url.protocol === "https:";
+        return {
+            href,
+            isValid,
+        };
+    }
+    catch (_a) {
+        return {
+            href,
+            isValid: false,
+        };
+    }
+};
+export const getLinkAttributes = (href) => ({
+    href,
+    target: LINK_TARGET,
+    rel: LINK_REL,
+    class: "editor-link",
+});
+export const openLink = (href) => {
+    if (!href)
+        return;
+    const normalizedLink = normalizeLinkUrl(href);
+    if (!normalizedLink.isValid)
+        return;
+    window.open(normalizedLink.href, "_blank", "noopener,noreferrer");
+};
+export const getLinkRangeAtPosition = (state, pos) => {
+    const linkMark = state.schema.marks.link;
+    if (!linkMark)
+        return;
+    return getMarkRange(state.doc.resolve(pos), linkMark);
+};
+export const getLinkAttributesAtPosition = (state, pos) => {
+    const linkMark = state.schema.marks.link;
+    if (!linkMark)
+        return;
+    const $pos = state.doc.resolve(pos);
+    const nextNode = $pos.parent.childAfter($pos.parentOffset).node;
+    const previousNode = $pos.parent.childBefore($pos.parentOffset).node;
+    const mark = (nextNode === null || nextNode === void 0 ? void 0 : nextNode.marks.find((mark) => mark.type === linkMark)) ||
+        (previousNode === null || previousNode === void 0 ? void 0 : previousNode.marks.find((mark) => mark.type === linkMark));
+    return mark === null || mark === void 0 ? void 0 : mark.attrs;
+};

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

@@ -0,0 +1 @@
+export declare const TABLE_CELL_MIN_WIDTH = 120;

package/dist/RichTextEditor/Utils/tableUtils.js

@@ -0,0 +1 @@
+export const TABLE_CELL_MIN_WIDTH = 120;