@monolith-forensics/monolith-ui 1.2.19 → 1.2.21

package/dist/FileViewer/FileViewer.d.ts

@@ -0,0 +1,12 @@
+export type File = {
+    name: string;
+    ext: string;
+    size: number;
+    type?: string;
+    url: string;
+};
+export declare const FileViewer: React.FC<{
+    file: File;
+    open: boolean;
+    onClose: () => void;
+}>;

package/dist/FileViewer/FileViewer.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { CodeViewer, ImageViewer, OfficeViewer, PdfViewer, VideoViewer, } from "./viewers";
+import { FloatingPortal } from "@floating-ui/react";
+import { DownloadIcon, XIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react";
+import Button from "../Button";
+import { useState } from "react";
+var ViewerTypes;
+(function (ViewerTypes) {
+    ViewerTypes["Office"] = "office";
+    ViewerTypes["Image"] = "image";
+    ViewerTypes["Video"] = "video";
+    ViewerTypes["Audio"] = "audio";
+    ViewerTypes["PDF"] = "pdf";
+    ViewerTypes["Text"] = "text";
+    ViewerTypes["Code"] = "code";
+})(ViewerTypes || (ViewerTypes = {}));
+const ZoomableViewerTypes = [
+    ViewerTypes.Image,
+    ViewerTypes.PDF,
+    ViewerTypes.Code,
+    ViewerTypes.Text,
+];
+const RotatableViewerTypes = [ViewerTypes.Image];
+const OfficeExtensions = ["doc", "docx", "xls", "xlsx", "ppt", "pptx"];
+const ImageExtensions = ["jpg", "jpeg", "png", "gif"];
+const VideoExtensions = ["mp4", "webm", "mov"];
+const AudioExtensions = ["mp3", "wav"];
+const PDFExtensions = ["pdf"];
+const PlainTextExtensions = ["txt", "log", "csv"];
+const CodeExtensions = [
+    "js",
+    "ts",
+    "jsx",
+    "tsx",
+    "json",
+    "html",
+    "css",
+    "xml",
+    "py",
+    "py3",
+    "dymo",
+];
+const StyledMenu = styled.div `
+  height: 50px;
+  min-height: 50px;
+  width: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  font-size: 14px;
+
+  padding: 0 10px;
+
+  background-color: ${(props) => props.theme.palette.background.alt};
+`;
+const StyledActionsMenu = styled.div `
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+`;
+const StyledContainer = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+  width: 100%;
+
+  background-color: rgba(0, 0, 0, 0.5);
+
+  // blur
+  backdrop-filter: blur(3px);
+
+  // scroll bar
+  ::-webkit-scrollbar {
+    width: 14px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.075);
+    border-radius: 10px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 10px;
+    border: 4px solid rgba(0, 0, 0, 0);
+    background-clip: padding-box;
+  }
+`;
+const StyledInnerContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+
+  height: 0px;
+  width: 100%;
+
+  overflow-y: auto;
+
+  &[data-type="office"] {
+    margin-bottom: 10px;
+  }
+`;
+const resolveViewerType = (file) => {
+    let ext = file.ext;
+    if (!ext) {
+        ext = file.name.split(".").pop();
+    }
+    if (!ext) {
+        return ViewerTypes.Code;
+    }
+    if (OfficeExtensions.includes(ext)) {
+        return ViewerTypes.Office;
+    }
+    if (ImageExtensions.includes(ext)) {
+        return ViewerTypes.Image;
+    }
+    if (VideoExtensions.includes(ext)) {
+        return ViewerTypes.Video;
+    }
+    if (AudioExtensions.includes(ext)) {
+        return ViewerTypes.Audio;
+    }
+    if (PDFExtensions.includes(ext)) {
+        return ViewerTypes.PDF;
+    }
+    if (PlainTextExtensions.includes(ext)) {
+        return ViewerTypes.Text;
+    }
+    if (CodeExtensions.includes(ext)) {
+        return ViewerTypes.Code;
+    }
+    return ViewerTypes.Code;
+};
+export const FileViewer = ({ file, open, onClose }) => {
+    const [zoomFactor, setZoomFactor] = useState(1);
+    if (!open)
+        return null;
+    const viewerType = resolveViewerType(file);
+    const handleBackgroundClick = (e) => {
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+        setZoomFactor(1);
+    };
+    return (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsxs(StyledContainer, { className: "mfui-FileViewer", children: [_jsxs(StyledMenu, { className: "FileViewer-menu", children: [_jsx(Button, { variant: "text", onClick: () => {
+                                onClose === null || onClose === void 0 ? void 0 : onClose();
+                                setZoomFactor(1);
+                            }, children: _jsx(XIcon, { size: 18 }) }), _jsx("div", { children: file.name }), _jsxs(StyledActionsMenu, { children: [ZoomableViewerTypes.includes(viewerType) && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "text", children: _jsx(ZoomInIcon, { size: 18, onClick: () => setZoomFactor((prev) => prev * 1.1) }) }), _jsx(Button, { variant: "text", children: _jsx(ZoomOutIcon, { size: 18, onClick: () => setZoomFactor((prev) => prev * 0.9) }) })] })), _jsx("a", { href: file.url, download: file.name, children: _jsx(Button, { variant: "text", children: _jsx(DownloadIcon, { size: 18 }) }) })] })] }), _jsxs(StyledInnerContainer, { onClick: handleBackgroundClick, "data-type": viewerType, children: [viewerType === ViewerTypes.PDF && (_jsx(PdfViewer, { file: file, zoomFactor: zoomFactor })), viewerType === ViewerTypes.Image && (_jsx(ImageViewer, { file: file, zoomFactor: zoomFactor })), viewerType === ViewerTypes.Video && (_jsx(VideoViewer, { file: file, zoomFactor: zoomFactor })), viewerType === ViewerTypes.Audio && (_jsx(VideoViewer, { file: file, zoomFactor: zoomFactor })), viewerType === ViewerTypes.Office && _jsx(OfficeViewer, { file: file }), viewerType === ViewerTypes.Text && (_jsx(CodeViewer, { file: file, zoomFactor: zoomFactor })), viewerType === ViewerTypes.Code && (_jsx(CodeViewer, { file: file, zoomFactor: zoomFactor }))] })] }) }));
+};

package/dist/FileViewer/index.d.ts

@@ -0,0 +1 @@
+export * from "./FileViewer";

package/dist/FileViewer/index.js

@@ -0,0 +1 @@
+export * from "./FileViewer";

package/dist/FileViewer/viewers/CodeViewer.d.ts

@@ -0,0 +1,5 @@
+import { File } from "../FileViewer";
+export declare const CodeViewer: React.FC<{
+    file: File;
+    zoomFactor?: number;
+}>;

package/dist/FileViewer/viewers/CodeViewer.js

@@ -0,0 +1,99 @@
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import styled from "styled-components";
+import Loader from "../../Loader";
+const resolveLanguage = (file) => __awaiter(void 0, void 0, void 0, function* () {
+    const { languages } = yield import("@codemirror/language-data");
+    let ext = file.ext;
+    if (!ext) {
+        ext = file.name.split(".").pop();
+    }
+    if (!ext) {
+        return null;
+    }
+    const l = languages.find((lang) => lang.extensions.includes(ext));
+    if (l) {
+        return yield l.load();
+    }
+    return null;
+});
+const getFileData = (file) => __awaiter(void 0, void 0, void 0, function* () {
+    const response = yield fetch(file.url);
+    const text = yield response.text();
+    return text;
+});
+const loadCodemirror = (file) => __awaiter(void 0, void 0, void 0, function* () {
+    const language = yield resolveLanguage(file);
+    const CodeMirror = yield import("@uiw/react-codemirror");
+    const { vscodeDark } = yield import("@uiw/codemirror-theme-vscode");
+    return { language, CodeMirror, theme: vscodeDark };
+});
+const StyledContainer = styled.div `
+  display: flex;
+  justify-content: center;
+
+  flex: 1 1 auto;
+  height: 0px;
+  width: 100%;
+
+  .cm-theme {
+    font-size: ${(props) => props.zoomFactor ? `${props.zoomFactor * 12}px` : "12px"};
+    width: 100%;
+  }
+
+  .cm-editor {
+    border: 1px solid ${(props) => props.theme.palette.divider};
+    width: 100%;
+  }
+`;
+const StyledLoader = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+`;
+export const CodeViewer = ({ file, zoomFactor }) => {
+    const [CodeMirror, setCodeMirror] = useState(null);
+    const [language, setLanguage] = useState(null);
+    const [theme, setTheme] = useState(null);
+    const [query, setQuery] = useState({
+        data: null,
+        isLoading: false,
+    });
+    if (!query.data) {
+        if (!query.isLoading) {
+            setQuery({ data: null, isLoading: true });
+            getFileData(file).then((text) => {
+                setQuery({ data: text, isLoading: false });
+            });
+        }
+    }
+    if (!CodeMirror) {
+        loadCodemirror(file).then((cm) => {
+            setCodeMirror(cm.CodeMirror);
+            setLanguage(cm.language);
+            setTheme(cm.theme);
+        });
+    }
+    const loading = query.isLoading || !CodeMirror;
+    const extensions = [];
+    if (language) {
+        extensions.push(language);
+    }
+    if (CodeMirror) {
+        extensions.push(CodeMirror.EditorView.lineWrapping);
+    }
+    return (_jsxs(StyledContainer, { zoomFactor: zoomFactor, children: [loading && (_jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading File..." })] })), !loading && (_jsx(CodeMirror.default, { value: query.data || "", theme: theme, extensions: extensions, readOnly: true, editable: false, onClick: (event) => {
+                    event.stopPropagation();
+                } }))] }));
+};

package/dist/FileViewer/viewers/ImageViewer.d.ts

@@ -0,0 +1,5 @@
+import { File } from "../FileViewer";
+export declare const ImageViewer: React.FC<{
+    file: File;
+    zoomFactor?: number;
+}>;

package/dist/FileViewer/viewers/ImageViewer.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import styled from "styled-components";
+import Loader from "../../Loader";
+const ImageViewerContainer = styled.div `
+  display: flex;
+  justify-content: center;
+
+  flex: 1 1 auto;
+  height: 0px;
+`;
+// Updated Image styled-component to remove max-width and max-height
+const Image = styled.img `
+  object-fit: contain;
+
+  // set orientation
+  image-orientation: from-image;
+
+  border: 1px solid ${(props) => props.theme.palette.divider};
+`;
+const StyledLoader = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+`;
+export const ImageViewer = ({ file, zoomFactor = 1, }) => {
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const [originalDimensions, setOriginalDimensions] = useState({
+        naturalWidth: 0,
+        naturalHeight: 0,
+        width: 0,
+        height: 0,
+    });
+    const handleImageLoad = (e) => {
+        setOriginalDimensions((prev) => (Object.assign(Object.assign({}, prev), { width: e.target.clientWidth, height: e.target.offsetHeight })));
+    };
+    const loadImage = () => {
+        const img = document.createElement("img");
+        img.src = file.url;
+        img.onload = () => {
+            setOriginalDimensions((prev) => (Object.assign(Object.assign({}, prev), { naturalWidth: img.naturalWidth, naturalHeight: img.naturalHeight })));
+            setImageLoaded(true);
+        };
+    };
+    useEffect(() => {
+        loadImage();
+    }, [file.url]);
+    return (_jsxs(ImageViewerContainer, { className: "mfui-ImageViewer", children: [!imageLoaded && (_jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading Image..." })] })), imageLoaded && (_jsx(Image, { src: file.url, alt: file.name ? file.name : "Image", zoomFactor: zoomFactor, onLoad: handleImageLoad, height: zoomFactor === 1 ? "100%" : originalDimensions.height * zoomFactor, onClick: (e) => {
+                    e.stopPropagation();
+                } }))] }));
+};

package/dist/FileViewer/viewers/OfficeViewer.d.ts

@@ -0,0 +1,4 @@
+import { File } from "../FileViewer";
+export declare const OfficeViewer: React.FC<{
+    file: File;
+}>;

package/dist/FileViewer/viewers/OfficeViewer.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import Loader from "../../Loader";
+const StyledContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  flex: 1 1 auto;
+  height: 0px;
+  width: 100%;
+`;
+const StyledInnerContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  justify-content: center;
+  align-items: center;
+
+  width: 100%;
+  max-width: 100%;
+
+  #office-iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+`;
+const StyledIframe = styled.iframe `
+  width: 100%;
+  height: 100%;
+  border: none;
+`;
+const resolveOfficeType = (file) => {
+    let ext = file.ext;
+    if (!ext) {
+        ext = file.name.split(".").pop();
+    }
+    if (!ext) {
+        return null;
+    }
+    switch (ext) {
+        case "doc":
+        case "docx":
+            return "word";
+        case "xls":
+        case "xlsx":
+            return "excel";
+        case "ppt":
+        case "pptx":
+            return "powerpoint";
+        default:
+            return null;
+    }
+};
+export const OfficeViewer = ({ file }) => {
+    const type = resolveOfficeType(file);
+    return (_jsx(StyledContainer, { children: _jsx(StyledInnerContainer, { "data-type": type, children: !(file === null || file === void 0 ? void 0 : file.url) ? (_jsx(Loader, {})) : (_jsx(StyledIframe, { id: "office-iframe", title: "office-iframe", src: `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(file.url)}` })) }) }));
+};

package/dist/FileViewer/viewers/PdfViewer.d.ts

@@ -0,0 +1,7 @@
+import "react-pdf/dist/esm/Page/AnnotationLayer.css";
+import "react-pdf/dist/esm/Page/TextLayer.css";
+import { File } from "../FileViewer";
+export declare const PdfViewer: React.FC<{
+    file: File;
+    zoomFactor?: number;
+}>;

package/dist/FileViewer/viewers/PdfViewer.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Document, Page,
+// pdfjs
+ } from "react-pdf";
+import "react-pdf/dist/esm/Page/AnnotationLayer.css";
+import "react-pdf/dist/esm/Page/TextLayer.css";
+import styled from "styled-components";
+import Loader from "../../Loader";
+// pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+//   "pdfjs-dist/build/pdf.worker.min.mjs",
+//   import.meta.url
+// ).toString();
+const StyledContainer = styled.div `
+  display: flex;
+  justify-content: center;
+
+  flex: 1 1 auto;
+  height: 0px;
+
+  &[data-loading="true"] > * {
+    justify-content: center;
+  }
+`;
+const StyledDocument = styled(Document) `
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  background-color: transparent;
+
+  // width: 100%;
+`;
+const StyledPage = styled(Page) `
+  width: fit-content;
+  background-color: transparent;
+`;
+const StyledLoader = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+`;
+export const PdfViewer = ({ file, zoomFactor = 1, }) => {
+    const [loading, setLoading] = useState(true);
+    const [numPages, setNumPages] = useState();
+    const [pageNumber, setPageNumber] = useState(1);
+    function onDocumentLoadSuccess({ numPages }) {
+        setLoading(false);
+        setNumPages(numPages);
+    }
+    // viewport width
+    const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0) - 20;
+    return (_jsx(StyledContainer, { className: "PdfViewer", "data-loading": loading, children: _jsx(StyledDocument, { file: file.url, onLoadSuccess: onDocumentLoadSuccess, loading: _jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading PDF..." })] }), onClick: (e) => {
+                e.stopPropagation();
+            }, children: Array.from(new Array(numPages), (el, index) => (_jsx(StyledPage, { pageNumber: index + 1, scale: zoomFactor, width: vw }, `page_${index + 1}`))) }) }));
+};

package/dist/FileViewer/viewers/PlainTextViewer.d.ts

@@ -0,0 +1,4 @@
+import { File } from "../FileViewer";
+export declare const PlainTextViewer: React.FC<{
+    file: File;
+}>;

package/dist/FileViewer/viewers/PlainTextViewer.js

@@ -0,0 +1,60 @@
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { useState } from "react";
+import Loader from "../../Loader";
+const getFileData = (file) => __awaiter(void 0, void 0, void 0, function* () {
+    const response = yield fetch(file.url);
+    const text = yield response.text();
+    return text;
+});
+const StyledContainer = styled.div `
+  display: flex;
+  justify-content: center;
+
+  flex: 1 1 auto;
+  height: 0px;
+`;
+const StyledTextData = styled.div `
+  width: 100%;
+  height: fit-content;
+  max-width: 8.5in;
+  padding: 25px;
+
+  background-color: ${(props) => props.theme.palette.background.alt};
+  white-space: pre-wrap !important;
+  word-wrap: break-word !important;
+
+  font-family: monospace;
+  font-size: 10px;
+`;
+const StyledLoader = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+`;
+export const PlainTextViewer = ({ file }) => {
+    const [query, setQuery] = useState({
+        data: null,
+        isLoading: false,
+    });
+    if (!query.data) {
+        if (!query.isLoading) {
+            setQuery({ data: null, isLoading: true });
+            getFileData(file).then((text) => {
+                setQuery({ data: text, isLoading: false });
+            });
+        }
+    }
+    return (_jsxs(StyledContainer, { className: "mfui-PlainTextViewer", children: [!query.data && (_jsxs(StyledLoader, { children: [_jsx(Loader, { size: 50 }), _jsx("div", { children: "Loading File..." })] })), query.data && (_jsx(StyledTextData, { className: "text-doc", children: query.data }))] }));
+};

package/dist/FileViewer/viewers/VideoViewer.d.ts

@@ -0,0 +1,5 @@
+import { File } from "../FileViewer";
+export declare const VideoViewer: React.FC<{
+    file: File;
+    zoomFactor?: number;
+}>;

package/dist/FileViewer/viewers/VideoViewer.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+const StyledContainer = styled.div `
+  display: flex;
+  justify-content: center;
+
+  flex: 1 1 auto;
+  height: 0px;
+`;
+const StyledVideo = styled.video `
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+`;
+export const VideoViewer = ({ file }) => {
+    return (_jsx(StyledContainer, { className: "mfui-VideoViewer", children: _jsx(StyledVideo, { src: file.url, controls: true, autoPlay: true, onClick: (e) => {
+                e.stopPropagation();
+            } }) }));
+};

package/dist/FileViewer/viewers/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./ImageViewer";
+export * from "./VideoViewer";
+export * from "./PdfViewer";
+export * from "./OfficeViewer";
+export * from "./PlainTextViewer";
+export * from "./CodeViewer";

package/dist/FileViewer/viewers/index.js

@@ -0,0 +1,6 @@
+export * from "./ImageViewer";
+export * from "./VideoViewer";
+export * from "./PdfViewer";
+export * from "./OfficeViewer";
+export * from "./PlainTextViewer";
+export * from "./CodeViewer";

package/dist/RichTextEditor/RichTextEditor.d.ts

@@ -9,6 +9,7 @@ interface RichTextEditorProps {
     extensions?: ExtensionType[];
     slashCommands?: any[];
     defaultValue?: string;
+    value?: string;
     readOnly?: boolean;
     height?: string;
     font?: string;
@@ -21,7 +22,5 @@ interface RichTextEditorProps {
     autoFocus?: boolean;
     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>>;
+declare const RichTextEditor: import("react").ForwardRefExoticComponent<RichTextEditorProps & import("react").RefAttributes<unknown>>;
 export default RichTextEditor;

package/dist/RichTextEditor/RichTextEditor.js

@@ -9,88 +9,7 @@ import { startImageUpload, } from "./Plugins/UploadImagesPlugin";
 import SaveBadge from "./Components/SaveBadge";
 import Fonts from "./Enums/Fonts";
 import RichTextEditorContext from "./Contexts/RichTextEditorContext";
-const RichTextEditor = styled(forwardRef(({ className, editorInstanceRef, defaultValue = "", readOnly = false, font, showToolbar = true, saving = false, extensions = [], slashCommands = [], bubbleMenuOptions, toolbarOptions, autoFocus, onChange, handleImageUpload, style, }, ref) => {
-    const [fontState, setFontState] = useState(font || Fonts.DEFAULT);
-    // 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,
-            bubbleMenuOptions,
-            handleImageUpload,
-        }),
-        editorProps: {
-            handlePaste: (view, event) => {
-                if (!handleImageUpload)
-                    return false;
-                if (!(event === null || event === void 0 ? void 0 : event.clipboardData))
-                    return false;
-                if (event.clipboardData.types.includes("text/html") ||
-                    event.clipboardData.types.includes("text/plain") ||
-                    event.clipboardData.types.includes("text/rtf"))
-                    return false;
-                if (event.clipboardData &&
-                    event.clipboardData.files &&
-                    event.clipboardData.files[0]) {
-                    event.preventDefault();
-                    const file = event.clipboardData.files[0];
-                    const pos = view.state.selection.from;
-                    startImageUpload(file, view, pos, handleImageUpload);
-                    return true;
-                }
-                return false;
-            },
-            handleDrop: (view, event, _slice, moved) => {
-                if (!handleImageUpload)
-                    return false;
-                if (!moved &&
-                    event.dataTransfer &&
-                    event.dataTransfer.files &&
-                    event.dataTransfer.files[0]) {
-                    event.preventDefault();
-                    const file = event.dataTransfer.files[0];
-                    const coordinates = view.posAtCoords({
-                        left: event.clientX,
-                        top: event.clientY,
-                    });
-                    if (!coordinates)
-                        return false;
-                    // here we deduct 1 from the pos or else the image will create an extra node
-                    startImageUpload(file, view, coordinates.pos - 1, handleImageUpload);
-                    return true;
-                }
-                return false;
-            },
-        },
-        onUpdate: ({ editor }) => {
-            onChange === null || onChange === void 0 ? void 0 : onChange(editor.getHTML());
-        },
-    });
-    useEffect(() => {
-        const _ref = editorInstanceRef;
-        if (editorInstanceRef) {
-            _ref.current = editor;
-        }
-    }, [editor]);
-    // AutoFocus on the editor
-    useEffect(() => {
-        if (autoFocus && editor) {
-            editor.view.focus();
-        }
-    }, [autoFocus, editor]);
-    return (_jsx("div", { className: className, children: _jsxs(RichTextEditorContext.Provider, { value: {
-                font: fontState,
-                setFont: setFontState,
-            }, children: [showToolbar && (_jsx(Toolbar, { editor: editor, toolbarOptions: toolbarOptions })), saving && _jsx(SaveBadge, {}), _jsx(EditorContent, { className: "editor-content", editor: editor, "data-font": fontState || null, style: style })] }) }));
-})) `
+const StyledContent = styled.div `
   position: relative;
   display: flex;
   flex-direction: column;
@@ -363,4 +282,89 @@ const RichTextEditor = styled(forwardRef(({ className, editorInstanceRef, defaul
     margin: 0 0.125rem;
   }
 `;
+const RichTextEditor = forwardRef(({ className, editorInstanceRef, defaultValue = "", value = "", readOnly = false, font, showToolbar = true, saving = false, extensions = [], slashCommands = [], bubbleMenuOptions, toolbarOptions, autoFocus, onChange, handleImageUpload, style, }, ref) => {
+    const [fontState, setFontState] = useState(font || Fonts.DEFAULT);
+    // 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,
+            bubbleMenuOptions,
+            handleImageUpload,
+        }),
+        editorProps: {
+            handlePaste: (view, event) => {
+                if (!handleImageUpload)
+                    return false;
+                if (!(event === null || event === void 0 ? void 0 : event.clipboardData))
+                    return false;
+                if (event.clipboardData.types.includes("text/html") ||
+                    event.clipboardData.types.includes("text/plain") ||
+                    event.clipboardData.types.includes("text/rtf"))
+                    return false;
+                if (event.clipboardData &&
+                    event.clipboardData.files &&
+                    event.clipboardData.files[0]) {
+                    event.preventDefault();
+                    const file = event.clipboardData.files[0];
+                    const pos = view.state.selection.from;
+                    startImageUpload(file, view, pos, handleImageUpload);
+                    return true;
+                }
+                return false;
+            },
+            handleDrop: (view, event, _slice, moved) => {
+                if (!handleImageUpload)
+                    return false;
+                if (!moved &&
+                    event.dataTransfer &&
+                    event.dataTransfer.files &&
+                    event.dataTransfer.files[0]) {
+                    event.preventDefault();
+                    const file = event.dataTransfer.files[0];
+                    const coordinates = view.posAtCoords({
+                        left: event.clientX,
+                        top: event.clientY,
+                    });
+                    if (!coordinates)
+                        return false;
+                    // here we deduct 1 from the pos or else the image will create an extra node
+                    startImageUpload(file, view, coordinates.pos - 1, handleImageUpload);
+                    return true;
+                }
+                return false;
+            },
+        },
+        onUpdate: ({ editor }) => {
+            onChange === null || onChange === void 0 ? void 0 : onChange(editor.getHTML());
+        },
+    });
+    useEffect(() => {
+        const _ref = editorInstanceRef;
+        if (editorInstanceRef) {
+            _ref.current = editor;
+        }
+    }, [editor]);
+    // AutoFocus on the editor
+    useEffect(() => {
+        if (autoFocus && editor) {
+            editor.view.focus();
+        }
+    }, [autoFocus, editor]);
+    useEffect(() => {
+        editor === null || editor === void 0 ? void 0 : editor.commands.setContent(defaultValue);
+    }, [defaultValue]);
+    return (_jsx(StyledContent, { className: className, children: _jsxs(RichTextEditorContext.Provider, { value: {
+                font: fontState,
+                setFont: setFontState,
+            }, children: [showToolbar && (_jsx(Toolbar, { editor: editor, toolbarOptions: toolbarOptions })), saving && _jsx(SaveBadge, {}), _jsx(EditorContent, { className: "editor-content", editor: editor, "data-font": fontState || null, style: style })] }) }));
+});
 export default RichTextEditor;

package/dist/index.d.ts

@@ -35,3 +35,4 @@ export * from "./hooks";
 export { QueryFilter, useQueryFilter } from "./QueryFilter";
 export { Table } from "./Table";
 export type { ColumnProps, TableProps } from "./Table";
+export * from "./FileViewer";

package/dist/index.js

@@ -28,3 +28,4 @@ export { default as Loader } from "./Loader";
 export * from "./hooks";
 export { QueryFilter, useQueryFilter } from "./QueryFilter";
 export { Table } from "./Table";
+export * from "./FileViewer";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.2.19",
+  "version": "1.2.21",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",
@@ -25,6 +25,7 @@
     "release-major": "yarn version --major --deferred && yarn build && npm publish && yarn clean"
   },
   "dependencies": {
+    "@codemirror/language-data": "^6.5.1",
     "@floating-ui/react": "^0.26.16",
     "@mantine/hooks": "^7.13.0",
     "@radix-ui/react-switch": "^1.0.7",
@@ -46,6 +47,8 @@
     "@tiptap/react": "^2.5.8",
     "@tiptap/starter-kit": "^2.5.8",
     "@tiptap/suggestion": "^2.5.9",
+    "@uiw/codemirror-theme-vscode": "^4.23.6",
+    "@uiw/react-codemirror": "^4.23.6",
     "deepmerge": "^4.3.1",
     "lucide-react": "^0.378.0",
     "moment": "^2.29.1",
@@ -54,6 +57,7 @@
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
     "react-icons": "^5.2.1",
+    "react-pdf": "^9.1.1",
     "react-textarea-autosize": "^8.5.3",
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
@@ -72,6 +76,5 @@
     "@types/react-window": "^1.8.8",
     "@types/spark-md5": "^3.0.4",
     "typescript": "^5.5.4"
-  },
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  }
 }