@monolith-forensics/monolith-ui 1.1.46 → 1.1.47

package/dist/MonolithUIProvider/GlobalStyle.js

@@ -47,5 +47,23 @@ const GlobalStyle = createGlobalStyle `
         text-decoration: none;
         color: unset;
     }
+
+    ::-webkit-scrollbar {
+	    width: 6px;
+	    height: 5px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: ${(props) => props.theme.scrollbar.track};
+    }
+
+    ::-webkit-scrollbar-thumb {
+
+        background: ${(props) => props.theme.scrollbar.thumb}
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        background: ${(props) => props.theme.scrollbar.thumbHover}; 
+    }
 `;
 export default GlobalStyle;

package/dist/MonolithUIProvider/MonolithUIProvider.d.ts

@@ -11,7 +11,7 @@ export interface MonolithUIContextType {
 }
 export declare const MonolithUIContext: React.Context<MonolithUIContextType | undefined>;
 interface MonolithUIProviderProps {
-    children: React.ReactNode | React.ReactNode[];
+    children?: React.ReactNode | React.ReactNode[];
     theme?: DefaultTheme;
     defaultColorScheme?: ColorScheme;
     colorScheme?: ColorScheme;

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

@@ -0,0 +1,15 @@
+declare enum Extensions {
+    HorizontalRule = "horizontalRule",
+    Underline = "underline",
+    TextAlign = "textAlign",
+    Table = "table",
+    TableCell = "tableCell",
+    TableHeader = "tableHeader",
+    TableRow = "tableRow",
+    Placeholder = "placeholder",
+    Focus = "focus",
+    Image = "image",
+    CustomStorage = "storage",
+    SlashCommand = "slashCommand"
+}
+export default Extensions;

package/dist/RichTextEditor/Enums/Extensions.js

@@ -0,0 +1,16 @@
+var Extensions;
+(function (Extensions) {
+    Extensions["HorizontalRule"] = "horizontalRule";
+    Extensions["Underline"] = "underline";
+    Extensions["TextAlign"] = "textAlign";
+    Extensions["Table"] = "table";
+    Extensions["TableCell"] = "tableCell";
+    Extensions["TableHeader"] = "tableHeader";
+    Extensions["TableRow"] = "tableRow";
+    Extensions["Placeholder"] = "placeholder";
+    Extensions["Focus"] = "focus";
+    Extensions["Image"] = "image";
+    Extensions["CustomStorage"] = "storage";
+    Extensions["SlashCommand"] = "slashCommand";
+})(Extensions || (Extensions = {}));
+export default Extensions;

package/dist/RichTextEditor/Enums/SlashCommands.d.ts

@@ -0,0 +1,13 @@
+declare enum SlashCommands {
+    Text = "Text",
+    Heading1 = "Heading 1",
+    Heading2 = "Heading 2",
+    Heading3 = "Heading 3",
+    Heading4 = "Heading 4",
+    BulletList = "Bullet List",
+    NumberedList = "Numbered List",
+    CurrentDate = "Current Date",
+    CurrentTimestamp = "Current Timestamp",
+    Image = "Image"
+}
+export default SlashCommands;

package/dist/RichTextEditor/Enums/SlashCommands.js

@@ -0,0 +1,14 @@
+var SlashCommands;
+(function (SlashCommands) {
+    SlashCommands["Text"] = "Text";
+    SlashCommands["Heading1"] = "Heading 1";
+    SlashCommands["Heading2"] = "Heading 2";
+    SlashCommands["Heading3"] = "Heading 3";
+    SlashCommands["Heading4"] = "Heading 4";
+    SlashCommands["BulletList"] = "Bullet List";
+    SlashCommands["NumberedList"] = "Numbered List";
+    SlashCommands["CurrentDate"] = "Current Date";
+    SlashCommands["CurrentTimestamp"] = "Current Timestamp";
+    SlashCommands["Image"] = "Image";
+})(SlashCommands || (SlashCommands = {}));
+export default SlashCommands;

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

@@ -0,0 +1,9 @@
+interface SlashCommandListProps {
+    className?: string;
+    items: any[];
+    command: (item: any) => void;
+    editor: any;
+    range: any;
+}
+declare const SlashCommandList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<SlashCommandListProps, never>> & string & Omit<({ className, items, command, editor, range }: SlashCommandListProps) => import("react/jsx-runtime").JSX.Element | null, keyof import("react").Component<any, {}, any>>;
+export default SlashCommandList;

package/dist/RichTextEditor/Extensions/SlashCommandList.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react";
+import styled from "styled-components";
+const updateScrollView = (container, item) => {
+    const containerHeight = container.offsetHeight;
+    const itemHeight = item ? item.offsetHeight : 0;
+    const top = item.offsetTop;
+    const bottom = top + itemHeight;
+    if (top < container.scrollTop) {
+        container.scrollTop -= container.scrollTop - top + 5;
+    }
+    else if (bottom > containerHeight + container.scrollTop) {
+        container.scrollTop += bottom - containerHeight - container.scrollTop + 5;
+    }
+};
+const SlashCommandList = styled(({ className, items, command, editor, range }) => {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const selectItem = useCallback((index) => {
+        const item = items[index];
+        if (item) {
+            command(item);
+        }
+    }, [
+        //   complete,
+        range,
+        command,
+        editor,
+        items,
+    ]);
+    useEffect(() => {
+        const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
+        const onKeyDown = (e) => {
+            if (navigationKeys.includes(e.key)) {
+                e.preventDefault();
+                e.stopPropagation();
+                if (e.key === "ArrowUp") {
+                    setSelectedIndex((selectedIndex + items.length - 1) % items.length);
+                    return true;
+                }
+                if (e.key === "ArrowDown") {
+                    setSelectedIndex((selectedIndex + 1) % items.length);
+                    return true;
+                }
+                if (e.key === "Enter") {
+                    selectItem(selectedIndex);
+                    return true;
+                }
+                return false;
+            }
+        };
+        document === null || document === void 0 ? void 0 : document.addEventListener("keydown", onKeyDown);
+        return () => {
+            document === null || document === void 0 ? void 0 : document.removeEventListener("keydown", onKeyDown);
+        };
+    }, [items, selectedIndex, selectItem, setSelectedIndex]);
+    useEffect(() => {
+        setSelectedIndex(0);
+    }, [items]);
+    const commandListContainer = useRef(null);
+    useLayoutEffect(() => {
+        const container = commandListContainer === null || commandListContainer === void 0 ? void 0 : commandListContainer.current;
+        const item = container === null || container === void 0 ? void 0 : container.children[selectedIndex];
+        if (item && container)
+            updateScrollView(container, item);
+    }, [selectedIndex]);
+    return items.length > 0 ? (_jsx("div", { id: "slash-command", ref: commandListContainer, className: className + " slash-command", children: items.map((item, index) => {
+            return (_jsxs("button", { className: `slash-command-item ${index === selectedIndex ? "selected" : ""}`, onClick: () => selectItem(index), children: [_jsx("div", { className: "item-icon", children: _jsx(item.icon, { size: 18 }) }), _jsxs("div", { children: [_jsx("div", { className: "item-title", children: item.title }), _jsx("div", { className: "item-description", children: item.description })] })] }, index));
+        }) })) : null;
+}) `
+  &.slash-command {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    z-index: 16001;
+    height: auto;
+    max-height: 330px;
+    width: 18rem;
+    overflow-y: auto;
+    border: 1px solid ${({ theme }) => theme.palette.divider};
+    border-radius: 0.375rem;
+    background-color: ${({ theme }) => theme.palette.background.default};
+    padding: 0.5rem;
+    transition: all 0.2s ease-in-out;
+  }
+
+  .slash-command-item {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: flex-start;
+    border-radius: 0.375rem;
+    padding: 0.25rem 0.5rem;
+    text-align: left;
+    font-size: 0.875rem;
+    color: ${({ theme }) => theme.palette.text.primary};
+    background-color: ${({ theme }) => theme.palette.background.default};
+    outline: none;
+    border: none;
+
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.action.hover};
+      cursor: pointer;
+    }
+  }
+
+  .slash-command-item.selected {
+    background-color: ${({ theme }) => theme.palette.action.hover};
+  }
+
+  .item-icon {
+    display: flex;
+    width: 2.5rem;
+    height: 2.5rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.375rem;
+    border: 1px solid ${({ theme }) => theme.palette.divider};
+    margin-right: 0.5rem;
+  }
+
+  .item-title {
+    font-weight: 600;
+    font-size: 0.8rem;
+    margin-bottom: 0.125rem;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .item-description {
+    font-size: 0.75rem;
+    color: ${({ theme }) => theme.palette.text.secondary};
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+`;
+export default SlashCommandList;

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

@@ -0,0 +1,10 @@
+import { Extension } from "@tiptap/core";
+import { HandleImageUpload } from "../Plugins/UploadImagesPlugin.js";
+import SlashCommands from "../Enums/SlashCommands";
+type CommandName = keyof typeof SlashCommands;
+interface SlashCommandOptions {
+    handleImageUpload?: HandleImageUpload;
+    commands?: CommandName[];
+}
+declare const getSlashCommand: (options?: SlashCommandOptions) => Extension;
+export default getSlashCommand;

package/dist/RichTextEditor/Extensions/getSlashCommand.js

@@ -0,0 +1,296 @@
+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 { Extension } from "@tiptap/core";
+import Suggestion from "@tiptap/suggestion";
+import { ReactRenderer } from "@tiptap/react";
+import tippy from "tippy.js";
+import { Heading1, Heading2, Heading3, Heading4, List, ListOrdered, Text, Image as ImageIcon, Calendar, ClockIcon, } from "lucide-react";
+import { startImageUpload, } from "../Plugins/UploadImagesPlugin.js";
+import { PluginKey } from "@tiptap/pm/state";
+import SlashCommandList from "./SlashCommandList";
+import SlashCommands from "../Enums/SlashCommands";
+import moment from "moment/moment.js";
+const SlashCommandPluginKey = new PluginKey("slash-command");
+const Command = Extension.create({
+    name: "slash-command",
+    priority: 1000,
+    addKeyboardShortcuts() {
+        return {
+            Enter: ({ editor }) => {
+                // Prevent Enter key when slash command is active
+                const slashCommandState = SlashCommandPluginKey.getState(editor.state);
+                if (slashCommandState && slashCommandState.active) {
+                    return true; // Returning true prevents default behavior.
+                }
+                return false; // Returning false allows default behavior.
+            },
+            ArrowUp: ({ editor }) => {
+                // Prevent ArrowUp key when slash command is active
+                const slashCommandState = SlashCommandPluginKey.getState(editor.state);
+                if (slashCommandState && slashCommandState.active) {
+                    return true; // Returning true prevents default behavior.
+                }
+                return false; // Returning false allows default behavior.
+            },
+            ArrowDown: ({ editor }) => {
+                // Prevent ArrowDown key when slash command is active
+                const slashCommandState = SlashCommandPluginKey.getState(editor.state);
+                if (slashCommandState && slashCommandState.active) {
+                    return true; // Returning true prevents default behavior.
+                }
+                return false; // Returning false allows default behavior.
+            },
+            // Add more keys here as needed
+        };
+    },
+    addOptions() {
+        return {
+            suggestion: {
+                char: "/",
+                pluginKey: SlashCommandPluginKey,
+                command: ({ editor, range, props }) => {
+                    props.command({ editor, range });
+                },
+            },
+        };
+    },
+    addProseMirrorPlugins() {
+        return [
+            Suggestion(Object.assign({ editor: this.editor }, this.options.suggestion)),
+        ];
+    },
+});
+const getCommandItems = (values, options) => {
+    var _a;
+    if ((_a = options === null || options === void 0 ? void 0 : options.commands) === null || _a === void 0 ? void 0 : _a.includes(SlashCommands.Image)) {
+        // Assert that options.handleImageUpload is defined
+        if (!options.handleImageUpload) {
+            throw new Error("options.handleImageUpload is required when using the Image command.");
+        }
+    }
+    return [
+        {
+            title: SlashCommands.Text,
+            description: "Just start typing with plain text.",
+            searchTerms: ["p", "paragraph"],
+            icon: Text,
+            command: ({ editor, range }) => {
+                editor
+                    .chain()
+                    .focus()
+                    .deleteRange(range)
+                    .toggleNode("paragraph", "paragraph")
+                    .run();
+            },
+        },
+        {
+            title: SlashCommands.Heading1,
+            description: "Large section heading.",
+            searchTerms: ["title", "big", "large"],
+            icon: Heading1,
+            command: ({ editor, range }) => {
+                editor
+                    .chain()
+                    .focus()
+                    .deleteRange(range)
+                    .setNode("heading", { level: 1 })
+                    .run();
+            },
+        },
+        {
+            title: SlashCommands.Heading2,
+            description: "Medium section heading.",
+            searchTerms: ["subtitle", "medium"],
+            icon: Heading2,
+            command: ({ editor, range }) => {
+                editor
+                    .chain()
+                    .focus()
+                    .deleteRange(range)
+                    .setNode("heading", { level: 2 })
+                    .run();
+            },
+        },
+        {
+            title: SlashCommands.Heading3,
+            description: "Small section heading.",
+            searchTerms: ["subtitle", "small"],
+            icon: Heading3,
+            command: ({ editor, range }) => {
+                editor
+                    .chain()
+                    .focus()
+                    .deleteRange(range)
+                    .setNode("heading", { level: 3 })
+                    .run();
+            },
+        },
+        {
+            title: SlashCommands.Heading4,
+            description: "Smaller section heading.",
+            searchTerms: ["subtitle", "small"],
+            icon: Heading4,
+            command: ({ editor, range }) => {
+                editor
+                    .chain()
+                    .focus()
+                    .deleteRange(range)
+                    .setNode("heading", { level: 4 })
+                    .run();
+            },
+        },
+        {
+            title: SlashCommands.BulletList,
+            description: "Create a simple bullet list.",
+            searchTerms: ["unordered", "point", "bullet"],
+            icon: List,
+            command: ({ editor, range }) => {
+                editor.chain().focus().deleteRange(range).toggleBulletList().run();
+            },
+        },
+        {
+            title: SlashCommands.NumberedList,
+            description: "Create a list with numbering.",
+            searchTerms: ["ordered", "numbered"],
+            icon: ListOrdered,
+            command: ({ editor, range }) => {
+                editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+            },
+        },
+        {
+            title: SlashCommands.CurrentDate,
+            description: "Insert the current date.",
+            searchTerms: ["date"],
+            icon: Calendar,
+            command: ({ editor, range }) => {
+                const currentDate = moment().format("YYYY-MM-DD");
+                editor
+                    .chain()
+                    .focus()
+                    .deleteRange(range)
+                    .insertContent(currentDate)
+                    .run();
+            },
+        },
+        {
+            title: SlashCommands.CurrentTimestamp,
+            description: "Insert the current timestamp.",
+            searchTerms: ["timestamp"],
+            icon: ClockIcon,
+            command: ({ editor, range }) => {
+                const currentDate = moment().format("YYYY-MM-DD HH:mm:ss Z");
+                editor
+                    .chain()
+                    .focus()
+                    .deleteRange(range)
+                    .insertContent(currentDate)
+                    .run();
+            },
+        },
+        {
+            title: SlashCommands.Image,
+            description: "Upload an image from your computer.",
+            searchTerms: ["photo", "picture", "media"],
+            icon: ImageIcon,
+            command: ({ editor, range }) => {
+                editor.chain().focus().deleteRange(range).run();
+                // upload image
+                const input = document.createElement("input");
+                input.type = "file";
+                input.accept = "image/*";
+                input.onchange = () => __awaiter(void 0, void 0, void 0, function* () {
+                    var _a;
+                    if ((_a = input.files) === null || _a === void 0 ? void 0 : _a.length) {
+                        const file = input.files[0];
+                        // places the image before the cursor, otherwise the image is placed after the cursor on a new line
+                        const pos = editor.view.state.selection.from - 1;
+                        if (options === null || options === void 0 ? void 0 : options.handleImageUpload) {
+                            startImageUpload(file, editor.view, pos, options === null || options === void 0 ? void 0 : options.handleImageUpload);
+                        }
+                    }
+                });
+                input.click();
+            },
+        },
+    ]
+        .filter((item) => {
+        if (options === null || options === void 0 ? void 0 : options.commands) {
+            return options.commands.includes(item.title);
+        }
+        return true;
+    })
+        .filter((item) => {
+        var _a, _b;
+        if (typeof (values === null || values === void 0 ? void 0 : values.query) === "string" && ((_a = values === null || values === void 0 ? void 0 : values.query) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            const search = (_b = values === null || values === void 0 ? void 0 : values.query) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+            return (item.title.toLowerCase().includes(search) ||
+                item.description.toLowerCase().includes(search) ||
+                (item.searchTerms &&
+                    item.searchTerms.some((term) => term.includes(search))));
+        }
+        return true;
+    });
+};
+const renderItems = () => {
+    let component = null;
+    let popup = null;
+    return {
+        onStart: (props) => {
+            component = new ReactRenderer(SlashCommandList, {
+                props,
+                editor: props.editor,
+            });
+            // @ts-ignore
+            popup = tippy("body", {
+                getReferenceClientRect: props.clientRect,
+                appendTo: () => document.body,
+                content: component.element,
+                showOnCreate: true,
+                interactive: true,
+                trigger: "manual",
+                placement: "bottom-start",
+                zIndex: 16000,
+            });
+        },
+        onUpdate: (props) => {
+            component === null || component === void 0 ? void 0 : component.updateProps(props);
+            popup &&
+                popup[0].setProps({
+                    getReferenceClientRect: props.clientRect,
+                });
+        },
+        onKeyDown: ({ event }) => {
+            var _a;
+            if (event.key === "Escape") {
+                popup === null || popup === void 0 ? void 0 : popup[0].hide();
+                return true;
+            }
+            // @ts-ignore
+            return (_a = component === null || component === void 0 ? void 0 : component.ref) === null || _a === void 0 ? void 0 : _a.onKeyDown({ event });
+        },
+        onExit: (e) => {
+            // process close of popup on next tick
+            // to avoid conflict with the keyboard "enter" event
+            setTimeout(() => {
+                popup === null || popup === void 0 ? void 0 : popup[0].destroy();
+                component === null || component === void 0 ? void 0 : component.destroy();
+            }, 0);
+        },
+    };
+};
+const getSlashCommand = (options) => {
+    return Command.configure({
+        suggestion: {
+            items: (e) => getCommandItems(e, options),
+            render: renderItems,
+        },
+    });
+};
+export default getSlashCommand;

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

@@ -0,0 +1,11 @@
+import { Extension } from "@tiptap/core";
+import { HandleImageUpload } from "../Plugins/UploadImagesPlugin";
+import Extensions from "../Enums/Extensions";
+export type ExtensionType = (typeof Extensions)[keyof typeof Extensions];
+interface GetTipTapExtensionsProps {
+    extensions?: ExtensionType[];
+    slashCommands?: any[];
+    handleImageUpload?: HandleImageUpload;
+}
+declare const getTipTapExtensions: (props: GetTipTapExtensionsProps) => Extension[];
+export default getTipTapExtensions;