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

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.8",
+  "version": "1.9.3-dev.0",
   "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;