@monolith-forensics/monolith-ui 1.1.46 → 1.1.47

package/dist/RichTextEditor/Extensions/getTiptapExtensions.js

@@ -0,0 +1,178 @@
+import TiptapImage from "@tiptap/extension-image";
+import StarterKit from "@tiptap/starter-kit";
+import HorizontalRule from "@tiptap/extension-horizontal-rule";
+import Underline from "@tiptap/extension-underline";
+import TextAlign from "@tiptap/extension-text-align";
+import Table from "@tiptap/extension-table";
+import TableCell from "@tiptap/extension-table-cell";
+import TableHeader from "@tiptap/extension-table-header";
+import TableRow from "@tiptap/extension-table-row";
+import Placeholder from "@tiptap/extension-placeholder";
+import { InputRule, Extension } from "@tiptap/core";
+import Focus from "@tiptap/extension-focus";
+import UploadImagesPlugin from "../Plugins/UploadImagesPlugin";
+import getSlashCommand from "./getSlashCommand";
+import Extensions from "../Enums/Extensions";
+const CustomImage = TiptapImage.extend({
+    // Add data-uuid attribute to image
+    addAttributes() {
+        var _a;
+        return Object.assign(Object.assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { "data-uuid": {
+                default: null,
+            } });
+    },
+    addProseMirrorPlugins() {
+        return [UploadImagesPlugin()];
+    },
+});
+const CustomStorage = Extension.create({
+    name: "customStorage",
+    addStorage() {
+        const data = {}; // Add index signature to the data object
+        return {
+            get: (key) => {
+                return data[key];
+            },
+            set: (key, value) => {
+                data[key] = value;
+            },
+            delete: (key) => {
+                delete data[key];
+            },
+        };
+    },
+});
+const getTipTapExtensions = ({ extensions = [], slashCommands = [], handleImageUpload, }) => {
+    return [
+        {
+            name: "starterKit",
+            category: "default",
+            extension: StarterKit.configure({
+                bulletList: {
+                    HTMLAttributes: {
+                        class: "",
+                    },
+                },
+                orderedList: {
+                    HTMLAttributes: {
+                        class: "",
+                    },
+                },
+                listItem: {
+                    HTMLAttributes: {
+                        class: "",
+                    },
+                },
+                horizontalRule: false,
+                dropcursor: {
+                    color: "#DBEAFE",
+                    width: 4,
+                },
+                gapcursor: false,
+            }),
+        },
+        {
+            name: Extensions.Underline,
+            category: "default",
+            extension: Underline,
+        },
+        {
+            name: Extensions.TextAlign,
+            category: "default",
+            extension: TextAlign.configure({ types: ["heading", "paragraph"] }),
+        },
+        {
+            name: Extensions.Focus,
+            category: "default",
+            extension: Focus.configure({ className: "has-focus", mode: "all" }),
+        },
+        // patch to fix horizontal rule bug: https://github.com/ueberdosis/tiptap/pull/3859#issuecomment-1536799740
+        {
+            name: Extensions.HorizontalRule,
+            extension: HorizontalRule.extend({
+                addInputRules() {
+                    return [
+                        new InputRule({
+                            find: /^(?:---|—-|___\s|\*\*\*\s)$/,
+                            handler: ({ state, range }) => {
+                                const attributes = {};
+                                const { tr } = state;
+                                const start = range.from;
+                                let end = range.to;
+                                tr.insert(start - 1, this.type.create(attributes)).delete(tr.mapping.map(start), tr.mapping.map(end));
+                            },
+                        }),
+                    ];
+                },
+            }),
+        },
+        {
+            name: Extensions.Table,
+            extension: Table.configure({
+                resizable: true,
+            }),
+        },
+        {
+            name: Extensions.TableRow,
+            extension: TableRow,
+        },
+        {
+            name: Extensions.TableHeader,
+            extension: TableHeader,
+        },
+        {
+            name: Extensions.TableCell,
+            extension: TableCell,
+        },
+        {
+            name: Extensions.Image,
+            extension: CustomImage.configure({
+                allowBase64: true,
+                inline: true,
+                HTMLAttributes: {
+                    class: "monolith-image",
+                },
+            }),
+        },
+        {
+            name: Extensions.Placeholder,
+            extension: Placeholder.configure({
+                placeholder: ({ node }) => {
+                    // check if node type is tablcell
+                    // if it is, return empty string
+                    // table cells always contain a paragraph node, so no need to add placeholder to it
+                    // other it shows two placeholders wihtin the cell
+                    if (node.type.name === "tableCell") {
+                        return "";
+                    }
+                    if (!extensions.includes(Extensions.SlashCommand)) {
+                        return "Enter text...";
+                    }
+                    if (node.type.name === "heading") {
+                        return `Heading ${node.attrs.level}`;
+                    }
+                    return "Press '/' for commands...";
+                },
+                includeChildren: true,
+            }),
+        },
+        {
+            name: Extensions.CustomStorage,
+            category: "default",
+            extension: CustomStorage,
+        },
+        {
+            name: Extensions.SlashCommand,
+            extension: getSlashCommand({
+                commands: slashCommands,
+                handleImageUpload,
+            }),
+        },
+    ]
+        .filter((ext) => {
+        return (extensions.includes(ext.name) ||
+            ext.category === "default");
+    })
+        .map((ext) => ext.extension);
+};
+export default getTipTapExtensions;

package/dist/RichTextEditor/Plugins/UploadImagesPlugin.d.ts

@@ -0,0 +1,16 @@
+import { Plugin } from "@tiptap/pm/state";
+import { DecorationSet, EditorView } from "@tiptap/pm/view";
+interface HandleImageUploadProps {
+    file: File;
+    name: string;
+    id: string;
+    md5: string;
+    sha1: string;
+    sha256: string;
+}
+export interface HandleImageUpload {
+    (props: HandleImageUploadProps): Promise<string> | undefined;
+}
+export declare const startImageUpload: (file: File, view: EditorView, pos: number, handleImageUpload: HandleImageUpload | undefined) => void;
+declare const UploadImagesPlugin: () => Plugin<DecorationSet>;
+export default UploadImagesPlugin;

package/dist/RichTextEditor/Plugins/UploadImagesPlugin.js

@@ -0,0 +1,114 @@
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import { nanoid } from "nanoid";
+import calculateFileHash from "../../Utilities/calculateFileHash";
+const uploadKey = new PluginKey("upload-image");
+function findPlaceholder(state, id) {
+    const decos = uploadKey.getState(state);
+    const found = decos.find(null, null, (spec) => spec.id === id);
+    return found.length ? found[0].from : null;
+}
+export const startImageUpload = (file, view, pos, handleImageUpload) => {
+    // check if the file is an image
+    if (!file.type.includes("image/")) {
+        alert("File type not supported.");
+        return;
+        // check if the file size is less than 20MB
+    }
+    else if (file.size / 1024 / 1024 > 20) {
+        alert("File size too big (max 20MB).");
+        return;
+    }
+    // A fresh object to act as the ID for this upload
+    const id = nanoid(25);
+    // Replace the selection with a placeholder
+    const tr = view.state.tr;
+    if (!tr.selection.empty)
+        tr.deleteSelection();
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => {
+        tr.setMeta(uploadKey, {
+            add: {
+                id,
+                pos,
+                src: reader.result,
+            },
+        });
+        view.dispatch(tr);
+    };
+    calculateFileHash(file).then((hashes) => {
+        var _a;
+        const md5 = hashes.md5Hash;
+        const sha1 = hashes.sha1Hash;
+        const sha256 = hashes.sha256Hash;
+        (_a = handleImageUpload === null || handleImageUpload === void 0 ? void 0 : handleImageUpload({
+            file,
+            name: `${id}.png`,
+            id,
+            md5,
+            sha1,
+            sha256,
+        })) === null || _a === void 0 ? void 0 : _a.then((src) => {
+            if (!src)
+                return;
+            const { schema } = view.state;
+            let pos = findPlaceholder(view.state, id);
+            // If the content around the placeholder has been deleted, drop
+            // the image
+            if (pos == null)
+                return;
+            // Otherwise, insert it at the placeholder's position, and remove
+            // the placeholder
+            // When BLOB_READ_WRITE_TOKEN is not valid or unavailable, read
+            // the image locally
+            const imageSrc = typeof src === "object" ? reader.result : src;
+            const node = schema.nodes.image.create({
+                src: imageSrc,
+                alt: `${id}.png`,
+                "data-uuid": id,
+                title: `Filename: ${id}.png`,
+            });
+            const transaction = view.state.tr
+                .replaceWith(pos, pos, node)
+                .setMeta(uploadKey, { remove: { id } });
+            view.dispatch(transaction);
+        });
+    });
+};
+const UploadImagesPlugin = () => new Plugin({
+    key: uploadKey,
+    state: {
+        init() {
+            return DecorationSet.empty;
+        },
+        apply(tr, set) {
+            set = set.map(tr.mapping, tr.doc);
+            // See if the transaction adds or removes any placeholders
+            const action = tr.getMeta(this);
+            if (action && action.add) {
+                const { id, pos, src } = action.add;
+                const placeholder = document.createElement("div");
+                placeholder.setAttribute("class", "img-placeholder");
+                const image = document.createElement("img");
+                image.setAttribute("class", "monolith-image uploading");
+                image.src = src;
+                placeholder.appendChild(image);
+                const deco = Decoration.widget(pos + 1, placeholder, {
+                    id,
+                });
+                set = set.add(tr.doc, [deco]);
+            }
+            else if (action && action.remove) {
+                set = set.remove(set.find(undefined, undefined, (spec) => spec.id === action.remove.id));
+            }
+            return set;
+        },
+    },
+    props: {
+        decorations(state) {
+            return this.getState(state);
+        },
+    },
+});
+export default UploadImagesPlugin;

package/dist/RichTextEditor/RichTextEditor.d.ts

@@ -0,0 +1,22 @@
+import { Editor } from "@tiptap/react";
+import { ExtensionType } from "./Extensions/getTiptapExtensions";
+import { HandleImageUpload } from "./Plugins/UploadImagesPlugin";
+interface RichTextEditorProps {
+    className?: string;
+    editorInstanceRef?: React.RefObject<Editor>;
+    extensions?: ExtensionType[];
+    slashCommands?: any[];
+    defaultValue?: string;
+    readOnly?: boolean;
+    height?: string;
+    font?: string;
+    showToolbar?: boolean;
+    saving?: boolean;
+    onChange?: (value: string) => void;
+    handleImageUpload?: HandleImageUpload;
+    style?: React.CSSProperties;
+}
+declare const RichTextEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<RichTextEditorProps & import("react").RefAttributes<unknown>, "ref"> & {
+    ref?: ((instance: unknown) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<unknown> | null | undefined;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<RichTextEditorProps & import("react").RefAttributes<unknown>>, keyof import("react").Component<any, {}, any>>;
+export default RichTextEditor;

package/dist/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,302 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect } from "react";
+import styled from "styled-components";
+import { EditorContent, useEditor } from "@tiptap/react";
+import Toolbar from "./Toolbar";
+import getTipTapExtensions from "./Extensions/getTiptapExtensions";
+import Extensions from "./Enums/Extensions";
+const RichTextEditor = styled(forwardRef(({ className, editorInstanceRef, defaultValue = "", readOnly = false, font, showToolbar = true, saving = false, extensions = [], slashCommands = [], onChange, handleImageUpload, style, }, ref) => {
+    // check if image extension is included
+    if (extensions === null || extensions === void 0 ? void 0 : extensions.includes(Extensions.Image)) {
+        // Ensure that handleImageUpload is provided
+        if (!handleImageUpload) {
+            throw new Error("handleImageUpload is required when using the image extension.");
+        }
+    }
+    const editor = useEditor({
+        content: defaultValue,
+        editable: !readOnly,
+        extensions: getTipTapExtensions({
+            extensions,
+            slashCommands,
+            handleImageUpload,
+        }),
+        onUpdate: ({ editor }) => {
+            onChange === null || onChange === void 0 ? void 0 : onChange(editor.getHTML());
+        },
+    });
+    useEffect(() => {
+        const _ref = editorInstanceRef;
+        if (editorInstanceRef) {
+            _ref.current = editor;
+        }
+    }, [editor]);
+    return (_jsxs("div", { className: className, children: [showToolbar && _jsx(Toolbar, { editor: editor }), _jsx(EditorContent, { className: "editor-content", editor: editor, "data-font": font || null, style: style })] }));
+})) `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  overflow-y: auto;
+  justify-content: flex-start;
+  align-items: center;
+
+  .editor-content {
+    height: ${({ height }) => height || "100%"};
+    width: 100%;
+    overflow-y: auto;
+  }
+
+  .editor-content[data-font="Times New Roman"] {
+    font-family: "Times New Roman", Times, serif;
+  }
+
+  .editor-content[data-font="Courier New"] {
+    font-family: "Courier New", Courier, monospace;
+  }
+
+  .editor-content[data-font="Arial"] {
+    font-family: Arial, Helvetica, sans-serif;
+  }
+
+  .editor-content[data-font="Segoe UI"] {
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  }
+
+  .editor-content[data-font="Verdana"] {
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+  }
+
+  .editor-content[data-font="Roboto"] {
+    font-family: Roboto, sans-serif;
+  }
+
+  .ProseMirror {
+    font-weight: 400;
+    outline: none;
+    height: 100%;
+    padding: 1rem 4rem;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    white-space: break-spaces;
+    word-break: break-word;
+    text-rendering: optimizeLegibility;
+
+    table {
+      border-collapse: collapse;
+      width: 100%;
+
+      th,
+      td {
+        border: 1px solid ${({ theme }) => theme.palette.divider};
+        padding: 0.5rem;
+        min-width: 100px;
+      }
+
+      // for table header
+      th {
+        border: 1px solid ${({ theme }) => theme.palette.divider};
+        padding: 0.5rem;
+        min-width: 100px;
+        background-color: ${({ theme }) => theme.palette.action.hover};
+        font-weight: 500;
+      }
+    }
+
+    h1 {
+      font-size: 1.5rem;
+      line-height: 2rem;
+      margin: 0;
+    }
+    h2 {
+      font-size: 1.25rem;
+      line-height: 1.75rem;
+      margin: 0;
+    }
+    h3 {
+      font-size: 1.125rem;
+      line-height: 1.75rem;
+      margin: 0;
+    }
+    h4 {
+      font-size: 1rem;
+      line-height: 1.5rem;
+      margin: 0;
+    }
+    p {
+      margin: 0;
+      font-size: 0.8rem;
+      line-height: 1.5rem;
+    }
+    ul {
+      margin: 0;
+    }
+    ol {
+      margin: 0;
+    }
+    .editor-link {
+      color: ${({ theme }) => theme.palette.primary.main};
+    }
+    .editor-link:hover {
+      color: ${({ theme }) => theme.palette.text.primary};
+      text-decoration: underline;
+      cursor: pointer;
+      // Set title attribute
+      title: "Click to open link";
+    }
+    img {
+      max-width: 100%;
+      max-height: 25rem;
+      border: 1px solid ${({ theme }) => theme.palette.divider};
+    }
+    img.has-focus {
+      border: 1px solid ${({ theme }) => theme.palette.primary.main};
+    }
+  }
+
+  .ProseMirror .is-editor-empty:first-child::before {
+    content: attr(data-placeholder);
+    float: left;
+    color: #888;
+    pointer-events: none;
+    height: 0;
+  }
+  .ProseMirror .is-empty::before {
+    content: attr(data-placeholder);
+    float: left;
+    color: #888;
+    pointer-events: none;
+    height: 0;
+  }
+
+  .ProseMirror .monolith-image.uploading {
+    opacity: 0.25;
+  }
+
+  .ProseMirror .img-placeholder {
+    position: relative;
+    width: fit-content;
+
+    &:before {
+      content: "";
+      box-sizing: border-box;
+      position: absolute;
+      top: calc(50% - 18px);
+      left: calc(50% - 18px);
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      border: 3px solid ${({ theme }) => theme.palette.primary.main};
+      border-top-color: ${({ theme }) => theme.palette.divider};
+      animation: spinning 0.6s linear infinite;
+    }
+
+    @keyframes spinning {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  }
+
+  .floating-menu {
+    display: flex;
+    background-color: #0d0d0d10;
+    padding: 0.2rem;
+    border-radius: 0.5rem;
+
+    button {
+      border: none;
+      outline: none;
+      background: none;
+      font-size: 0.5rem;
+      font-weight: 500;
+      padding: 0 0.2rem;
+      color: ${({ theme }) => theme.palette.text.primary};
+
+      &:hover,
+      &:focus,
+      &.is-active {
+        opacity: 1;
+        color: ${({ theme }) => theme.palette.primary.main};
+      }
+    }
+  }
+
+  ul[data-type="taskList"] {
+    list-style: none;
+    padding: 0;
+
+    li {
+      display: flex;
+      align-items: center;
+      margin: 0.25rem 0;
+
+      > label {
+        flex: 0 0 auto;
+        margin-right: 0.5rem;
+        user-select: none;
+      }
+
+      > div {
+        flex: 1 1 auto;
+      }
+    }
+
+    input[type="checkbox"] {
+      cursor: pointer;
+      margin: 0;
+      -webkit-appearance: none;
+      appearance: none;
+      border: 2px solid ${({ theme }) => theme.palette.primary.main};
+      border-radius: 0.125rem;
+      background-color: ${({ theme }) => theme.palette.background.default};
+      width: 1.25rem;
+      height: 1.25rem;
+      display: grid;
+      place-content: center;
+
+      &:hover {
+        border-color: ${({ theme }) => theme.palette.primary.main};
+      }
+
+      &:active {
+        background-color: ${({ theme }) => theme.palette.divider};
+      }
+
+      &::before {
+        content: "";
+        width: 0.75em;
+        height: 0.75em;
+        transform: scale(0);
+        transition: 120ms transform ease-in-out;
+        box-shadow: inset 1em 1em;
+        transform-origin: center;
+        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+        color: ${({ theme }) => theme.palette.text.primary};
+      }
+
+      &:checked::before {
+        transform: scale(1);
+      }
+    }
+  }
+
+  ul[data-type="taskList"] li[data-checked="true"] > div > p {
+    color: ${({ theme }) => theme.palette.text.secondary};
+    opacity: 0.5;
+    text-decoration: line-through;
+    text-decoration-thickness: 1px;
+  }
+
+  .ProseMirror .note-tag {
+    border: 1px solid ${({ theme }) => theme.palette.divider};
+    border-radius: 0.25rem;
+    padding: 0.125rem 0.25rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: ${({ theme }) => theme.palette.text.secondary};
+    font-weight: 500;
+    margin: 0 0.125rem;
+  }
+`;
+export default RichTextEditor;

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

@@ -0,0 +1,14 @@
+import { Editor } from "@tiptap/react";
+interface ControlProps {
+    className?: string;
+    editor: Editor | null;
+    isActive?: any;
+    operation: {
+        name: string;
+        attributes?: any;
+    };
+    label: string;
+    icon: any;
+}
+declare const Control: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<ControlProps, never>> & string & Omit<({ className, editor, isActive, operation, label, icon: Icon, }: ControlProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export default Control;

package/dist/RichTextEditor/Toolbar/Control.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import Labels from "./Labels";
+const Control = styled(({ className, editor, isActive, operation, label, icon: Icon, }) => {
+    var _a;
+    const _label = Labels[label];
+    const active = (isActive === null || isActive === void 0 ? void 0 : isActive.name)
+        ? (_a = editor === null || editor === void 0 ? void 0 : editor.isActive) === null || _a === void 0 ? void 0 : _a.call(editor, isActive.name, isActive.attributes)
+        : false;
+    return (_jsx("button", { className: className + (active ? " active" : ""), "aria-label": _label, "data-active": active, title: _label, onClick: () => {
+            const focus = editor === null || editor === void 0 ? void 0 : editor.chain().focus();
+            focus[operation.name](operation.attributes).run();
+        }, children: _jsx(Icon, { size: "16px" }) }));
+}) `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0px;
+  background-color: transparent;
+  cursor: pointer;
+  color: ${({ theme }) => theme.palette.text.primary};
+  &:hover {
+    background-color: ${({ theme }) => theme.palette.action.hover};
+  }
+  &.active {
+    background-color: ${({ theme }) => theme.palette.action.hover};
+    color: ${({ theme }) => theme.palette.primary.main};
+  }
+`;
+Control.displayName = "Control";
+export default Control;