@examplary/ui 1.76.0 → 1.77.1

package/dist/components/rich-text/index.d.ts

@@ -2,6 +2,7 @@ export { RichTextDisplay } from "./rich-text-display";
 export { RichTextField } from "./rich-text-field";
 export { RichTextToolbar } from "./rich-text-toolbar";
 export { MinimalRichTextField, getEditorById } from "./minimal-rich-text-field";
+export type { GraphEditorProps } from "./tiptap/rich-text-formatting-menu";
 export { processFilesAsString } from "./tiptap/file-handler";
 export { bubbleMenuVirtualElement } from "./tiptap/bubble-menu-virtual-element";
 export * from "./tiptap/extensions";

package/dist/components/rich-text/minimal-rich-text-field.d.ts

@@ -1,6 +1,8 @@
+import { ComponentType } from "react";
 import { Editor, EditorContentProps } from "@tiptap/react";
 import { CommentAuthor } from "tiptap-inline-comments";
 import { XmlFragment } from "yjs";
+import { GraphEditorProps } from "./tiptap/rich-text-formatting-menu";
 export declare const getEditorById: (id: string) => Editor | undefined;
 export type MinimalRichTextFieldProps = {
     className?: string;
@@ -20,7 +22,8 @@ export type MinimalRichTextFieldProps = {
         url: string;
         name: string;
     }>;
+    GraphEditor?: ComponentType<GraphEditorProps>;
     fragment?: XmlFragment;
     awareness?: any;
 } & Omit<EditorContentProps, "editor">;
-export declare const MinimalRichTextField: ({ className, value, defaultValue, placeholder, onChange, onBlur, slotBefore, style, singleLine, autoFocus, showFormattingMenu, commentAuthor, uploadFile, fragment, awareness, id, ...props }: MinimalRichTextFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MinimalRichTextField: ({ className, value, defaultValue, placeholder, onChange, onBlur, slotBefore, style, singleLine, autoFocus, showFormattingMenu, commentAuthor, uploadFile, GraphEditor, fragment, awareness, id, ...props }: MinimalRichTextFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/rich-text/minimal-rich-text-field.js

@@ -14,7 +14,7 @@ import { CommentBubble } from "./tiptap/comments/comment-bubble";
 import { defaultRichTextExtensions } from "./tiptap/extensions";
 import { fileHandler } from "./tiptap/file-handler";
 import Image from "./tiptap/image";
-import { RichTextFormattingMenu } from "./tiptap/rich-text-formatting-menu";
+import { RichTextFormattingMenu, } from "./tiptap/rich-text-formatting-menu";
 registerWebComponents();
 const textEditors = new Map();
 export const getEditorById = (id) => {
@@ -50,7 +50,7 @@ const isEmpty = (value) => {
     }
     return false;
 };
-export const MinimalRichTextField = ({ className = "", value = "", defaultValue, placeholder = "", onChange, onBlur, slotBefore, style, singleLine = false, autoFocus = false, showFormattingMenu = false, commentAuthor, uploadFile = undefined, fragment, awareness, id, ...props }) => {
+export const MinimalRichTextField = ({ className = "", value = "", defaultValue, placeholder = "", onChange, onBlur, slotBefore, style, singleLine = false, autoFocus = false, showFormattingMenu = false, commentAuthor, uploadFile = undefined, GraphEditor, fragment, awareness, id, ...props }) => {
     const [content, setContent] = useState(value);
     const extensions = useMemo(() => [
         ...defaultRichTextExtensions,
@@ -132,5 +132,5 @@ export const MinimalRichTextField = ({ className = "", value = "", defaultValue,
             }
         };
     }, [editor, id]);
-    return (_jsxs(_Fragment, { children: [slotBefore ? slotBefore(editor) : null, showFormattingMenu && (_jsx(RichTextFormattingMenu, { allowComments: !!commentAuthor, editor: editor })), !!commentAuthor && (_jsx(CommentBubble, { editor: editor, commentAuthor: commentAuthor })), _jsx(EditorContent, { editor: editor, ...props })] }));
+    return (_jsxs(_Fragment, { children: [slotBefore ? slotBefore(editor) : null, showFormattingMenu && (_jsx(RichTextFormattingMenu, { allowComments: !!commentAuthor, editor: editor, GraphEditor: GraphEditor })), !!commentAuthor && (_jsx(CommentBubble, { editor: editor, commentAuthor: commentAuthor })), _jsx(EditorContent, { editor: editor, ...props })] }));
 };

package/dist/components/rich-text/tiptap/extensions.d.ts

@@ -1,2 +1,2 @@
 export declare const defaultRichTextExtensions: (import("@tiptap/core").Mark<any, any> | import("@tiptap/core").Node<any, any> | import("@tiptap/core").Mark<import("@tiptap/extension-bold").BoldOptions, any> | import("@tiptap/core").Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | import("@tiptap/core").Mark<import("@tiptap/extension-link").LinkOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extension-typography").TypographyOptions, any> | import("@tiptap/core").Mark<import("@tiptap/extension-highlight").HighlightOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extension-table").TableKitOptions, any>)[];
-export declare const htmlRenderingRichTextExtensions: (import("@tiptap/core").Mark<any, any> | import("@tiptap/core").Node<any, any> | import("@tiptap/core").Mark<import("@tiptap/extension-bold").BoldOptions, any> | import("@tiptap/core").Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | import("@tiptap/core").Mark<import("@tiptap/extension-link").LinkOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extension-typography").TypographyOptions, any> | import("@tiptap/core").Mark<import("@tiptap/extension-highlight").HighlightOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extension-table").TableKitOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-image").ImageOptions, any> | import("@tiptap/core").Extension<import("tiptap-inline-comments").CommentOptions, any>)[];
+export declare const htmlRenderingRichTextExtensions: (import("@tiptap/core").Mark<any, any> | import("@tiptap/core").Node<any, any> | import("@tiptap/core").Node<import("./image.js").ImageOptions, any> | import("@tiptap/core").Mark<import("@tiptap/extension-bold").BoldOptions, any> | import("@tiptap/core").Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | import("@tiptap/core").Mark<import("@tiptap/extension-link").LinkOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extension-typography").TypographyOptions, any> | import("@tiptap/core").Mark<import("@tiptap/extension-highlight").HighlightOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extension-table").TableKitOptions, any> | import("@tiptap/core").Extension<import("tiptap-inline-comments").CommentOptions, any>)[];

package/dist/components/rich-text/tiptap/extensions.js

@@ -1,7 +1,6 @@
 import Bold from "@tiptap/extension-bold";
 import Document from "@tiptap/extension-document";
 import Highlight from "@tiptap/extension-highlight";
-import Image from "@tiptap/extension-image";
 import Italic from "@tiptap/extension-italic";
 import Link from "@tiptap/extension-link";
 import { TableKit } from "@tiptap/extension-table";
@@ -10,6 +9,7 @@ import StarterKit from "@tiptap/starter-kit";
 import { InlineComments } from "tiptap-inline-comments";
 import ContentReference from "./content-reference.js";
 import FileAttachment from "./file-attachment.js";
+import Image from "./image.js";
 import { Mathematics } from "./mathematics.js";
 import PageClipping from "./page-clipping.js";
 // Disable the markdown shortcuts (**bold**, __bold__, *italic*, _italic_):

package/dist/components/rich-text/tiptap/image.d.ts

@@ -20,6 +20,20 @@ export interface ImageOptions {
      */
     HTMLAttributes: Record<string, any>;
 }
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        image: {
+            setImage: (options: {
+                src: string;
+                alt?: string;
+                title?: string;
+                width?: number;
+                height?: number;
+                "data-graph"?: string;
+            }) => ReturnType;
+        };
+    }
+}
 /**
  * Matches an image to a ![image](src "title") on input.
  */

package/dist/components/rich-text/tiptap/rich-text-formatting-menu.d.ts

@@ -1,7 +1,18 @@
+import { ComponentType } from "react";
 import { Editor } from "@tiptap/core";
+export type GraphEditorProps = {
+    graph: unknown;
+    onClose: () => void;
+    onSave: (image: {
+        src: string;
+        alt: string;
+        graph: unknown;
+    }) => void;
+};
 type RichTextFormattingMenuProps = {
     editor: Editor;
     allowComments?: boolean;
+    GraphEditor?: ComponentType<GraphEditorProps>;
 };
-export declare const RichTextFormattingMenu: ({ allowComments, editor, }: RichTextFormattingMenuProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const RichTextFormattingMenu: ({ allowComments, editor, GraphEditor, }: RichTextFormattingMenuProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/rich-text/tiptap/rich-text-formatting-menu.js

@@ -3,14 +3,15 @@ import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useEditorState } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
-import { BoldIcon, CropIcon, HighlighterIcon, ItalicIcon, LinkIcon, ListIcon, MessageCircleIcon, SquareFunctionIcon, TextQuoteIcon, TrashIcon, } from "lucide-react";
+import { BoldIcon, ChartLineIcon, CropIcon, HighlighterIcon, ItalicIcon, LinkIcon, ListIcon, MessageCircleIcon, SquareFunctionIcon, TextQuoteIcon, TrashIcon, } from "lucide-react";
 import { bubbleMenuVirtualElement } from "./bubble-menu-virtual-element";
 import { CropPageClippingModal } from "./crop-page-clipping-modal";
 import { cn } from "../../../utils";
 import { FloatingMenu } from "../../ui/floating-menu";
 import { showPromptDialog } from "../../ui/prompt";
-export const RichTextFormattingMenu = ({ allowComments, editor, }) => {
+export const RichTextFormattingMenu = ({ allowComments, editor, GraphEditor, }) => {
     const [pageClipping, setPageClipping] = useState(null);
+    const [graph, setGraph] = useState(null);
     const { t } = useTranslation();
     const setLink = useCallback(async () => {
         if (editor.isActive("link")) {
@@ -55,6 +56,7 @@ export const RichTextFormattingMenu = ({ allowComments, editor, }) => {
             isPageClipping: ctx.editor.isActive("page-clipping"),
             isFileAttachment: ctx.editor.isActive("file-attachment"),
             isImage: ctx.editor.isActive("image"),
+            isGraph: !!ctx.editor.getAttributes("image")?.["data-graph"],
             isComment: allowComments ? ctx.editor.isActive("comment") : false,
         }),
     });
@@ -77,6 +79,13 @@ export const RichTextFormattingMenu = ({ allowComments, editor, }) => {
             });
         }
         else if (state.isImage || state.isFileAttachment) {
+            if (state.isGraph && GraphEditor) {
+                items.push({
+                    icon: ChartLineIcon,
+                    label: t("formatting.graph.edit"),
+                    action: () => setGraph(JSON.parse(editor.getAttributes("image")["data-graph"])),
+                });
+            }
             items.push({
                 icon: TrashIcon,
                 label: t("formatting.delete"),
@@ -129,7 +138,7 @@ export const RichTextFormattingMenu = ({ allowComments, editor, }) => {
             });
         }
         return items;
-    }, [state, setLink, t, allowComments, editor]);
+    }, [state, setLink, t, allowComments, editor, GraphEditor]);
     if (!editor) {
         return null;
     }
@@ -140,5 +149,16 @@ export const RichTextFormattingMenu = ({ allowComments, editor, }) => {
                         .focus()
                         .updateAttributes("page-clipping", newParameters)
                         .run();
+                } })), GraphEditor && !!graph && (_jsx(GraphEditor, { graph: graph, onClose: () => setGraph(null), onSave: ({ src, alt, graph }) => {
+                    setGraph(null);
+                    editor
+                        .chain()
+                        .focus()
+                        .updateAttributes("image", {
+                        src,
+                        alt,
+                        "data-graph": JSON.stringify(graph),
+                    })
+                        .run();
                 } })), _jsx(BubbleMenu, { editor: editor, getReferencedVirtualElement: bubbleMenuVirtualElement(editor), children: _jsx(FloatingMenu, { className: "ml-2 flex items-center gap-0.5", children: actions.map((item, index) => (_jsx("button", { onClick: item.action, type: "button", title: item.label, "aria-label": item.label, className: cn("p-1 cursor-pointer flex items-center gap-1 hover:bg-zinc-100 rounded-md", item.active ? "bg-zinc-200" : ""), children: _jsx(item.icon, { className: "size-3.5 m-0.5" }) }, index))) }) })] }));
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@examplary/ui",
   "description": "UI components for the Examplary testing platform.",
   "packageManager": "yarn@4.5.3",
-  "version": "1.76.0",
+  "version": "1.77.1",
   "type": "module",
   "main": "dist/index.js",
   "files": [