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

package/dist/RichTextEditor/Extensions/getTiptapExtensions.js

@@ -1,22 +1,45 @@
 import TiptapImage from "@tiptap/extension-image";
 import StarterKit from "@tiptap/starter-kit";
+import { CodeBlockLowlight } from "@tiptap/extension-code-block-lowlight";
 import HorizontalRule from "@tiptap/extension-horizontal-rule";
 import TextAlign from "@tiptap/extension-text-align";
-import { Table, TableCell, TableHeader, TableRow } from "@tiptap/extension-table";
+import { Table, TableCell, TableHeader, TableRow, } from "@tiptap/extension-table";
 import { Focus, Placeholder } from "@tiptap/extensions";
 import { Color } from "@tiptap/extension-color";
+import { Highlight } from "@tiptap/extension-highlight";
+import { Link } from "@tiptap/extension-link";
 import { TextStyle } from "@tiptap/extension-text-style";
 import { InputRule, Extension } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { common, createLowlight } from "lowlight";
 import { ImageActionsPlugin, UploadImagesPlugin, } from "../Plugins";
 import getSlashCommand from "./getSlashCommand";
 import { Extensions } from "../Enums";
-import BubbleMenu from "./BubbleMenuExtension";
+import { LINK_REL, LINK_TARGET, normalizeLinkUrl } from "../Utils/linkUtils";
+import CodeBlockNodeView from "../Components/CodeBlockNodeView";
+import { DEFAULT_CODE_BLOCK_LANGUAGE } from "../Utils/codeBlockUtils";
+const lowlight = createLowlight(common);
+const CustomCodeBlockLowlight = CodeBlockLowlight.extend({
+    addAttributes() {
+        var _a;
+        return Object.assign(Object.assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { wrap: {
+                default: false,
+                parseHTML: (element) => element.getAttribute("data-wrap") === "true",
+                renderHTML: (attributes) => attributes.wrap ? { "data-wrap": "true" } : {},
+            } });
+    },
+    addNodeView() {
+        return ReactNodeViewRenderer(CodeBlockNodeView);
+    },
+});
 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,
+            }, crossorigin: {
+                default: "anonymous",
             } });
     },
     addProseMirrorPlugins() {
@@ -40,27 +63,107 @@ const CustomStorage = Extension.create({
         };
     },
 });
-const getTipTapExtensions = ({ extensions = [], slashCommands = [], bubbleMenuOptions, handleImageUpload, }) => {
+export const BASIC_EXTENSIONS = [
+    Extensions.Bold,
+    Extensions.Italic,
+    Extensions.Underline,
+    Extensions.Strike,
+    Extensions.Code,
+    Extensions.BulletList,
+    Extensions.OrderedList,
+    Extensions.TextStyle,
+    Extensions.Color,
+    Extensions.Highlight,
+    Extensions.Link,
+    Extensions.TextAlign,
+    Extensions.Focus,
+    Extensions.CustomStorage,
+];
+export const MINIMAL_EXTENSIONS = [
+    Extensions.Focus,
+    Extensions.CustomStorage,
+];
+export const FULL_EXTENSIONS = [
+    ...BASIC_EXTENSIONS,
+    Extensions.CodeBlock,
+    Extensions.HorizontalRule,
+    Extensions.Table,
+    Extensions.TableCell,
+    Extensions.TableHeader,
+    Extensions.TableRow,
+    Extensions.Placeholder,
+    Extensions.SlashCommand,
+    Extensions.BubbleMenu,
+];
+const EXTENSION_PRESETS = {
+    minimal: MINIMAL_EXTENSIONS,
+    basic: BASIC_EXTENSIONS,
+    full: FULL_EXTENSIONS,
+};
+export const resolveExtensions = ({ disabledExtensions = [], extensionPreset = "basic", extensions = [], }) => {
+    const disabled = new Set(disabledExtensions);
+    const resolved = new Set([
+        ...(EXTENSION_PRESETS[extensionPreset] || BASIC_EXTENSIONS),
+        ...extensions,
+    ]);
+    if (resolved.has(Extensions.Color)) {
+        resolved.add(Extensions.TextStyle);
+    }
+    if (resolved.has(Extensions.Table)) {
+        resolved.add(Extensions.TableRow);
+        resolved.add(Extensions.TableCell);
+        resolved.add(Extensions.TableHeader);
+    }
+    disabled.forEach((extension) => resolved.delete(extension));
+    return Array.from(resolved);
+};
+const getTipTapExtensions = ({ disabledExtensions = [], extensions = [], slashCommands = [], handleImageUpload, }) => {
+    const disabled = new Set(disabledExtensions);
+    const enabled = new Set(extensions);
+    const isEnabled = (extension) => enabled.has(extension) && !disabled.has(extension);
     return [
         {
             name: "starterKit",
-            category: "default",
             extension: StarterKit.configure({
-                bulletList: {
-                    HTMLAttributes: {
-                        class: "",
-                    },
-                },
-                orderedList: {
-                    HTMLAttributes: {
-                        class: "",
-                    },
-                },
-                listItem: {
-                    HTMLAttributes: {
-                        class: "",
-                    },
-                },
+                bold: isEnabled(Extensions.Bold) ? {} : false,
+                italic: isEnabled(Extensions.Italic) ? {} : false,
+                underline: isEnabled(Extensions.Underline) ? {} : false,
+                strike: isEnabled(Extensions.Strike) ? {} : false,
+                bulletList: isEnabled(Extensions.BulletList)
+                    ? {
+                        HTMLAttributes: {
+                            class: "",
+                        },
+                    }
+                    : false,
+                orderedList: isEnabled(Extensions.OrderedList)
+                    ? {
+                        HTMLAttributes: {
+                            class: "",
+                        },
+                    }
+                    : false,
+                listItem: isEnabled(Extensions.BulletList) ||
+                    isEnabled(Extensions.OrderedList)
+                    ? {
+                        HTMLAttributes: {
+                            class: "",
+                        },
+                    }
+                    : false,
+                listKeymap: isEnabled(Extensions.BulletList) ||
+                    isEnabled(Extensions.OrderedList)
+                    ? {}
+                    : false,
+                link: false,
+                code: isEnabled(Extensions.Code)
+                    ? {
+                        HTMLAttributes: {
+                            class: "editor-inline-code",
+                        },
+                    }
+                    : false,
+                codeBlock: false,
                 horizontalRule: false,
                 dropcursor: {
                     color: "#DBEAFE",
@@ -69,24 +172,53 @@ const getTipTapExtensions = ({ extensions = [], slashCommands = [], bubbleMenuOp
                 gapcursor: false,
             }),
         },
+        {
+            name: Extensions.CodeBlock,
+            extension: CustomCodeBlockLowlight.configure({
+                lowlight,
+                defaultLanguage: DEFAULT_CODE_BLOCK_LANGUAGE,
+                enableTabIndentation: true,
+                HTMLAttributes: {
+                    class: "editor-code-block",
+                },
+            }),
+        },
         {
             name: Extensions.TextStyle,
-            category: "default",
             extension: TextStyle,
         },
         {
             name: Extensions.Color,
-            category: "default",
             extension: Color,
         },
+        {
+            name: Extensions.Highlight,
+            extension: Highlight.configure({ multicolor: true }),
+        },
+        {
+            name: Extensions.Link,
+            extension: Link.configure({
+                autolink: true,
+                linkOnPaste: true,
+                openOnClick: false,
+                enableClickSelection: false,
+                defaultProtocol: "https",
+                protocols: ["http", "https"],
+                isAllowedUri: (url) => normalizeLinkUrl(url).isValid,
+                shouldAutoLink: (url) => normalizeLinkUrl(url).isValid,
+                HTMLAttributes: {
+                    class: "editor-link",
+                    target: LINK_TARGET,
+                    rel: LINK_REL,
+                },
+            }),
+        },
         {
             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
@@ -157,14 +289,8 @@ const getTipTapExtensions = ({ extensions = [], slashCommands = [], bubbleMenuOp
         },
         {
             name: Extensions.CustomStorage,
-            category: "default",
             extension: CustomStorage,
         },
-        {
-            name: Extensions.BubbleMenu,
-            category: "default",
-            extension: BubbleMenu.configure(bubbleMenuOptions),
-        },
         {
             name: Extensions.SlashCommand,
             extension: getSlashCommand({
@@ -174,8 +300,9 @@ const getTipTapExtensions = ({ extensions = [], slashCommands = [], bubbleMenuOp
         },
     ]
         .filter((ext) => {
-        return (extensions.includes(ext.name) ||
-            ext.category === "default");
+        if (ext.name === "starterKit")
+            return true;
+        return isEnabled(ext.name);
     })
         .map((ext) => ext.extension);
 };

package/dist/RichTextEditor/Plugins/ImageActionsPlugin.js

@@ -60,123 +60,20 @@ const getImageFilename = (image) => {
     return "image.png";
 };
 const getImageBlob = (src) => __awaiter(void 0, void 0, void 0, function* () {
-    const response = yield fetch(src, {
-        mode: "cors",
-        credentials: "omit",
-    });
+    const response = yield fetch(src);
     if (!response.ok) {
         throw new Error("Unable to load image.");
     }
-    return {
-        blob: yield response.blob(),
-        contentType: response.headers.get("content-type") || "",
-    };
-});
-const clipboardPngType = "image/png";
-const imageMimeTypesByExtension = {
-    gif: "image/gif",
-    jpg: "image/jpeg",
-    jpeg: "image/jpeg",
-    png: clipboardPngType,
-    svg: "image/svg+xml",
-    webp: "image/webp",
-};
-const normalizeMimeType = (type) => type.toLowerCase().split(";")[0].trim();
-const getImageMimeTypeFromSource = (src) => {
-    var _a;
-    try {
-        const url = new URL(src);
-        const filename = url.pathname.split("/").filter(Boolean).pop();
-        const extension = (_a = filename === null || filename === void 0 ? void 0 : filename.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-        return extension ? imageMimeTypesByExtension[extension] || "" : "";
-    }
-    catch (_b) {
-        const dataUrlMatch = src.match(/^data:([^;,]+)/);
-        return (dataUrlMatch === null || dataUrlMatch === void 0 ? void 0 : dataUrlMatch[1]) || "";
-    }
-};
-const canWriteClipboardType = (ClipboardItemCtor, type) => {
-    if (!type)
-        return false;
-    if (typeof ClipboardItemCtor.supports === "function") {
-        return ClipboardItemCtor.supports(type);
-    }
-    return type === clipboardPngType;
-};
-const loadImageSource = (src) => new Promise((resolve, reject) => {
-    const image = new Image();
-    image.crossOrigin = "anonymous";
-    image.onload = () => resolve(image);
-    image.onerror = () => {
-        reject(new Error("Unable to prepare image for clipboard."));
-    };
-    image.src = src;
-});
-const renderImageSourceToPngBlob = (src) => __awaiter(void 0, void 0, void 0, function* () {
-    const image = yield loadImageSource(src);
-    const width = image.naturalWidth || image.width;
-    const height = image.naturalHeight || image.height;
-    if (!width || !height) {
-        throw new Error("Unable to prepare image for clipboard.");
-    }
-    const canvas = document.createElement("canvas");
-    canvas.width = width;
-    canvas.height = height;
-    const context = canvas.getContext("2d");
-    if (!context) {
-        throw new Error("Unable to prepare image for clipboard.");
-    }
-    context.drawImage(image, 0, 0, width, height);
-    return new Promise((resolve, reject) => {
-        canvas.toBlob((blob) => {
-            if (blob) {
-                resolve(blob);
-            }
-            else {
-                reject(new Error("Unable to prepare image for clipboard."));
-            }
-        }, clipboardPngType);
-    });
-});
-const convertBlobToClipboardPng = (blob, fallbackSrc) => __awaiter(void 0, void 0, void 0, function* () {
-    const objectUrl = URL.createObjectURL(blob);
-    try {
-        return yield renderImageSourceToPngBlob(objectUrl);
-    }
-    catch (error) {
-        if (!fallbackSrc || fallbackSrc === objectUrl)
-            throw error;
-        return renderImageSourceToPngBlob(fallbackSrc);
-    }
-    finally {
-        URL.revokeObjectURL(objectUrl);
-    }
-});
-const getClipboardImageBlob = (image, ClipboardItemCtor) => __awaiter(void 0, void 0, void 0, function* () {
-    const src = image.currentSrc || image.src;
-    const { blob, contentType } = yield getImageBlob(src);
-    const type = normalizeMimeType(blob.type) ||
-        normalizeMimeType(contentType) ||
-        getImageMimeTypeFromSource(src);
-    if (canWriteClipboardType(ClipboardItemCtor, type)) {
-        return {
-            blob: blob.type === type ? blob : new Blob([blob], { type }),
-            type,
-        };
-    }
-    return {
-        blob: yield convertBlobToClipboardPng(blob, src),
-        type: clipboardPngType,
-    };
+    return response.blob();
 });
 const copyImage = (image) => __awaiter(void 0, void 0, void 0, function* () {
     var _a;
-    const ClipboardItemCtor = window
-        .ClipboardItem;
+    const ClipboardItemCtor = window.ClipboardItem;
     if (!((_a = navigator.clipboard) === null || _a === void 0 ? void 0 : _a.write) || !ClipboardItemCtor) {
         throw new Error("Image copying is not supported by this browser.");
     }
-    const { blob, type } = yield getClipboardImageBlob(image, ClipboardItemCtor);
+    const blob = yield getImageBlob(image.src);
+    const type = blob.type || "image/png";
     yield navigator.clipboard.write([
         new ClipboardItemCtor({
             [type]: blob,
@@ -188,7 +85,7 @@ const downloadImage = (image) => __awaiter(void 0, void 0, void 0, function* ()
     let href = image.src;
     let objectUrl = null;
     try {
-        const { blob } = yield getImageBlob(image.src);
+        const blob = yield getImageBlob(image.src);
         objectUrl = URL.createObjectURL(blob);
         href = objectUrl;
     }

package/dist/RichTextEditor/Plugins/UploadImagesPlugin.js

@@ -113,6 +113,7 @@ export const startImageUpload = (file, view, pos, handleImageUpload) => {
                 src: imageSrc,
                 alt: `${id}.png`,
                 "data-uuid": id,
+                crossorigin: "anonymous",
                 title: `Filename: ${id}.png`,
             });
             const insertTransaction = view.state.tr

package/dist/RichTextEditor/RichTextEditor.d.ts

@@ -1,12 +1,14 @@
 import { Editor } from "@tiptap/react";
-import { ExtensionType } from "./Extensions/getTiptapExtensions";
+import { ExtensionPreset, ExtensionType } from "./Extensions/getTiptapExtensions";
 import { HandleImageUrlUpload, HandleImageUpload } from "./Plugins/UploadImagesPlugin";
-import { BubbleMenuOptions } from "./Extensions/BubbleMenuExtension";
+import { BubbleMenuOptions } from "./Components/BubbleMenu";
 import { ToolbarOptions } from "./Toolbar/Toolbar";
 type RichTextEditorProps = {
     className?: string;
     editorInstanceRef?: React.RefObject<Editor | null>;
     extensions?: ExtensionType[];
+    disabledExtensions?: ExtensionType[];
+    extensionPreset?: ExtensionPreset;
     slashCommands?: any[];
     defaultValue?: string;
     value?: string;