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

package/dist/RichTextEditor/Toolbar/Toolbar.js

@@ -1,33 +1,42 @@
-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 CodeBlockLanguageSelect from "../Components/CodeBlockLanguageSelect";
+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 +44,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 +76,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(CodeBlockLanguageSelect, { editor: editor }), _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>;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.9.1-dev.1",
+  "version": "1.9.1-dev.10",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",
@@ -41,9 +41,13 @@
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tabler/icons-react": "^3.11.0",
     "@tiptap/core": "3.22.4",
+    "@tiptap/extension-code-block": "3.22.4",
+    "@tiptap/extension-code-block-lowlight": "3.22.4",
     "@tiptap/extension-color": "3.22.4",
+    "@tiptap/extension-highlight": "3.22.4",
     "@tiptap/extension-horizontal-rule": "3.22.4",
     "@tiptap/extension-image": "3.22.4",
+    "@tiptap/extension-link": "3.22.4",
     "@tiptap/extension-table": "3.22.4",
     "@tiptap/extension-text-align": "3.22.4",
     "@tiptap/extension-text-style": "3.22.4",
@@ -58,10 +62,13 @@
     "d3-shape": "^3.2.0",
     "deepmerge": "^4.3.1",
     "exceljs": "^4.4.0",
+    "highlight.js": "^11.11.1",
+    "lowlight": "^3.3.0",
     "lucide-react": "^0.469.0",
     "moment": "^2.29.1",
     "overlayscrollbars": "^2.6.0",
     "overlayscrollbars-react": "^0.5.6",
+    "prettier": "^3.8.3",
     "react-dropzone": "^14.2.3",
     "react-icons": "^5.2.1",
     "react-pdf": "^9.1.1",

package/dist/RichTextEditor/Extensions/BubbleMenuExtension.d.ts

@@ -1,7 +0,0 @@
-import { Extension } from "@tiptap/core";
-import { BubbleItem } from "../Components/BubbleMenu";
-export type BubbleMenuOptions = {
-    customMenuItems?: BubbleItem[];
-};
-declare const BubbleMenu: Extension<any, any>;
-export default BubbleMenu;

package/dist/RichTextEditor/Extensions/BubbleMenuExtension.js

@@ -1,157 +0,0 @@
-import { Extension, isNodeSelection, isTextSelection, posToDOMRect, } from "@tiptap/core";
-import { Plugin, PluginKey } from "@tiptap/pm/state";
-import { ReactRenderer } from "@tiptap/react";
-import BubbleMenuComponent from "../Components/BubbleMenu";
-class Menu {
-    constructor({ view, editor, customMenuItems, }) {
-        this.mousedownHandler = (event) => {
-            this.preventShow = true;
-        };
-        this.mouseUpHandler = (event) => {
-            this.preventShow = false;
-            this.update(this.editor.view);
-        };
-        this.focusHandler = () => {
-            // this.editor.commands.setTextSelection({ from: 0, to: 0 });
-            // we use `setTimeout` to make sure `selection` is already updated
-            setTimeout(() => this.update(this.editor.view));
-        };
-        this.blurHandler = ({ event }) => {
-            var _a;
-            if (this.preventShow) {
-                this.preventShow = false;
-                return;
-            }
-            if ((event === null || event === void 0 ? void 0 : event.relatedTarget) &&
-                ((_a = this.floating) === null || _a === void 0 ? void 0 : _a.contains(event === null || event === void 0 ? void 0 : event.relatedTarget))) {
-                return;
-            }
-            // clear text selection
-            // this.editor.commands.setTextSelection({ from: 0, to: 0 });
-            this.hide();
-        };
-        this.editor = editor;
-        this.view = view;
-        this.rect = null;
-        this.preventShow = false;
-        this.floating = null;
-        this.isOpen = false;
-        // create and mount react component
-        if (!this.component) {
-            this.component = new ReactRenderer(BubbleMenuComponent, {
-                props: {
-                    editor: this.editor,
-                    open: false,
-                    onOpen: (ref) => {
-                        this.floating = ref;
-                    },
-                    customMenuItems,
-                },
-                editor: this.editor,
-            });
-            document.body.appendChild(this.component.element);
-        }
-        // don't show the bubble during selection of text
-        this.view.dom.addEventListener("mousedown", this.mousedownHandler, {
-            capture: true,
-        });
-        this.view.dom.addEventListener("mouseup", this.mouseUpHandler);
-        this.editor.on("blur", this.blurHandler);
-        this.editor.on("focus", this.focusHandler);
-    }
-    update(view, oldState) {
-        var _a;
-        const { state, composing } = view;
-        const { doc, selection } = state;
-        const { empty, ranges } = selection;
-        const from = Math.min(...ranges.map((range) => range.$from.pos));
-        const to = Math.max(...ranges.map((range) => range.$to.pos));
-        const selectionChanged = !(oldState === null || oldState === void 0 ? void 0 : oldState.selection.eq(view.state.selection));
-        const docChanged = !(oldState === null || oldState === void 0 ? void 0 : oldState.doc.eq(view.state.doc));
-        const isSame = !selectionChanged && !docChanged;
-        if (composing || isSame) {
-            return;
-        }
-        // Sometime check for `empty` is not enough.
-        // Doubleclick an empty paragraph returns a node size of 2.
-        // So we check also for an empty text size.
-        const isEmptyTextBlock = !doc.textBetween(from, to).length && isTextSelection(state.selection);
-        // When clicking on a element inside the bubble menu the editor "blur" event
-        // is called and the bubble menu item is focussed. In this case we should
-        // consider the menu as part of the editor and keep showing the menu
-        const isChildOfMenu = (_a = this === null || this === void 0 ? void 0 : this.floating) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement);
-        const hasEditorFocus = view.hasFocus() || isChildOfMenu;
-        if (!hasEditorFocus ||
-            empty ||
-            isEmptyTextBlock ||
-            !this.editor.isEditable ||
-            this.preventShow) {
-            this.hide();
-        }
-        else {
-            // only set position when it is not already open
-            // otherwise the menu will jump around when the selection changes or text formatting is applied
-            if (!this.isOpen) {
-                if (isNodeSelection(state.selection)) {
-                    let node = view.nodeDOM(from);
-                    const nodeViewWrapper = node.dataset.nodeViewWrapper
-                        ? node
-                        : node.querySelector("[data-node-view-wrapper]");
-                    if (nodeViewWrapper) {
-                        node = nodeViewWrapper.firstChild;
-                    }
-                    if (node) {
-                        this.rect = node.getBoundingClientRect();
-                    }
-                }
-                else {
-                    this.rect = posToDOMRect(view, from, to);
-                }
-            }
-            this.show();
-        }
-    }
-    show() {
-        if (this.component) {
-            this.component.updateProps({ open: true, rect: this.rect });
-            this.isOpen = true;
-        }
-    }
-    hide() {
-        if (this.component) {
-            this.component.updateProps({ open: false, rect: null });
-            this.isOpen = false;
-        }
-    }
-    destroy() {
-        if (this.component) {
-            this.view.dom.removeEventListener("mousedown", this.mousedownHandler);
-            this.view.dom.removeEventListener("mouseup", this.mouseUpHandler);
-            this.component.destroy();
-        }
-    }
-}
-const BubbleMenu = Extension.create({
-    name: "bubbleMenu",
-    addOptions() {
-        return {
-            bubbleMenuOptions: {},
-        };
-    },
-    addProseMirrorPlugins() {
-        return [
-            new Plugin({
-                key: new PluginKey("bubbleMenu"),
-                view: (view) => {
-                    var _a;
-                    return new Menu({
-                        view,
-                        editor: this.editor,
-                        customMenuItems: ((_a = this === null || this === void 0 ? void 0 : this.options) === null || _a === void 0 ? void 0 : _a.customMenuItems) || [],
-                    });
-                },
-            }),
-        ];
-    },
-});
-export default BubbleMenu;