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

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/theme/variants.js

@@ -122,6 +122,29 @@ const lightVariant = {
         action: {
             hover: "rgba(0, 0, 0, 0.1)",
         },
+        codeBlock: {
+            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",
+            },
+        },
         divider: "rgba(0, 0, 0, 0.3)",
     },
     header: {
@@ -282,6 +305,29 @@ const darkVariant = merge(lightVariant, {
         dataGrid: {
             hover: "#2f2f2f",
         },
+        codeBlock: {
+            background: "#191919",
+            text: "#c9d1d9",
+            border: "rgba(255, 255, 255, 0.15)",
+            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",
+            },
+        },
     },
     header: {
         color: grey[300],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.9.1-dev.1",
+  "version": "1.9.1-dev.11",
   "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;