@tulip-systems/core 0.8.2 → 0.9.0

package/dist/src/components/editor/components/menu.client.mjs

@@ -0,0 +1,168 @@
+import { cn } from "../../../lib/utils/cn.mjs";
+import { Button } from "../../ui/button.mjs";
+import { EditorContext } from "./editor.client.mjs";
+import { ColorPicker } from "../../ui/color-picker.client.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.client.mjs";
+import { EditorMenuNodes } from "./menu-nodes.client.mjs";
+import { BaselineIcon, BoldIcon, EraserIcon, ItalicIcon, PaintBucketIcon, RedoIcon, StrikethroughIcon, UnderlineIcon, UndoIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { BubbleMenu } from "@tiptap/react/menus";
+
+//#region src/components/editor/components/menu.client.tsx
+function EditorMenuFixed(props) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("z-10 overflow-auto border-input border-b bg-muted/30 p-2", props.className),
+		children: /* @__PURE__ */ jsxs(EditorMenuContent, { children: [
+			/* @__PURE__ */ jsx(EditorMenuUndoRedo, {}),
+			/* @__PURE__ */ jsx(EditorMenuNodes, {}),
+			/* @__PURE__ */ jsx(EditorMenuMarks, {}),
+			/* @__PURE__ */ jsx(EditorMenuColor, {})
+		] })
+	});
+}
+function EditorMenuBubble(props) {
+	const { editor } = useContext(EditorContext);
+	return /* @__PURE__ */ jsx(BubbleMenu, {
+		...props,
+		editor,
+		options: {
+			...props.options,
+			strategy: "fixed"
+		},
+		className: cn("z-10 rounded-lg border border-input bg-muted p-2", props.className),
+		children: /* @__PURE__ */ jsx(EditorMenuContent, { children: /* @__PURE__ */ jsx(EditorMenuMarks, {}) })
+	});
+}
+function EditorMenuContent(props) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center gap-6",
+		children: props.children
+	});
+}
+/**
+* Editor menu undo/redo
+*/
+function EditorMenuUndoRedo() {
+	const { editor, extensions } = useContext(EditorContext);
+	if (!extensions.undoRedo) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1",
+		children: [/* @__PURE__ */ jsx(Button, {
+			onClick: () => editor.commands.undo(),
+			disabled: !editor?.can().undo(),
+			type: "button",
+			"aria-label": "Undo",
+			size: "icon",
+			className: "p-2",
+			variant: "outline",
+			children: /* @__PURE__ */ jsx(UndoIcon, { className: "size-3.5" })
+		}), /* @__PURE__ */ jsx(Button, {
+			onClick: () => editor.commands.redo(),
+			disabled: !editor?.can().redo(),
+			type: "button",
+			"aria-label": "Redo",
+			size: "icon",
+			className: "p-2",
+			variant: "outline",
+			children: /* @__PURE__ */ jsx(RedoIcon, { className: "size-3.5" })
+		})]
+	});
+}
+/**
+* Editor menu marks
+*/
+function EditorMenuMarks() {
+	const { editor, extensions } = useContext(EditorContext);
+	if (!extensions.bold && !extensions.italic && !extensions.underline && !extensions.strike) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1",
+		children: [
+			extensions.bold && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "icon",
+				variant: editor?.isActive("bold") ? "secondary" : "outline",
+				onClick: () => editor.chain().focus().toggleBold().run(),
+				className: "border",
+				children: /* @__PURE__ */ jsx(BoldIcon, { className: "h-3.5 w-3.5" })
+			}),
+			extensions.italic && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "icon",
+				variant: editor?.isActive("italic") ? "secondary" : "outline",
+				onClick: () => editor.chain().focus().toggleItalic().run(),
+				className: "border",
+				children: /* @__PURE__ */ jsx(ItalicIcon, { className: "size-3.5" })
+			}),
+			extensions.underline && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "icon",
+				variant: editor?.isActive("underline") ? "secondary" : "outline",
+				onClick: () => editor.chain().focus().toggleUnderline().run(),
+				className: "border",
+				children: /* @__PURE__ */ jsx(UnderlineIcon, { className: "size-3.5" })
+			}),
+			extensions.strike && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "icon",
+				variant: editor?.isActive("strike") ? "secondary" : "outline",
+				onClick: () => editor.chain().focus().toggleStrike().run(),
+				className: "border",
+				children: /* @__PURE__ */ jsx(StrikethroughIcon, { className: "size-3.5" })
+			})
+		]
+	});
+}
+/**
+* Editor menu alignment
+*/
+function EditorMenuColor() {
+	const { editor, extensions } = useContext(EditorContext);
+	if (!extensions.color && !extensions.highlight) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1",
+		children: [
+			extensions.color && /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Button, {
+					size: "icon",
+					variant: "outline",
+					children: /* @__PURE__ */ jsx(BaselineIcon, { className: "size-3.5" })
+				})
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				className: "w-fit p-0",
+				children: /* @__PURE__ */ jsx(ColorPicker, { onValueChange: (color) => editor.chain().focus().setColor(color).run() })
+			})] }),
+			extensions.highlight && /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Button, {
+					size: "icon",
+					variant: "outline",
+					disabled: !editor?.can().setHighlight(),
+					children: /* @__PURE__ */ jsx(PaintBucketIcon, { className: "size-3.5" })
+				})
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				className: "w-fit p-0",
+				children: /* @__PURE__ */ jsx(ColorPicker, { onValueChange: (color) => editor.chain().focus().setHighlight({ color }).run() })
+			})] }),
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "icon",
+				variant: "outline",
+				className: "border",
+				onClick: () => {
+					editor.commands.unsetColor();
+					editor.commands.unsetHighlight();
+				},
+				children: /* @__PURE__ */ jsx(EraserIcon, { className: "h-4 w-4" })
+			})
+		]
+	});
+}
+/**
+* Editor menu image
+*/
+
+//#endregion
+export { EditorMenuBubble, EditorMenuFixed };

package/dist/src/components/editor/extensions/file-handler/extension.d.mts

@@ -0,0 +1,20 @@
+import { FileHandlerOptions } from "@tiptap/extension-file-handler";
+import "@tiptap/core";
+
+//#region src/components/editor/extensions/file-handler/extension.d.ts
+interface FileHandlerOptions$1 extends FileHandlerOptions {
+  /**
+   * Callback function invoked when a image reference is removed from the editor. Receives the node ID of the removed node.
+   * @type {(assetId: string) => void}
+   * @default undefined
+   **/
+  onReferenceRemoved?: (assetId: string) => void;
+  /**
+   * Callback function invoked when a image reference is added to the editor. Receives the node ID of the added node.
+   * @type {(assetId: string) => void}
+   * @default undefined
+   **/
+  onReferenceAdded?: (assetId: string) => void;
+}
+//#endregion
+export { FileHandlerOptions$1 as FileHandlerOptions };

package/dist/src/components/editor/extensions/file-handler/extension.mjs

@@ -0,0 +1,39 @@
+"use client";
+
+import { collectImageIds, diffIds } from "./utils.mjs";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { FileHandler } from "@tiptap/extension-file-handler";
+
+//#region src/components/editor/extensions/file-handler/extension.ts
+/**
+* File Handler extension for Tiptap Editor
+*/
+const FileHandler$1 = FileHandler.extend({
+	addOptions() {
+		return {
+			...this.parent?.(),
+			onReferenceRemoved: void 0,
+			onReferenceAdded: void 0
+		};
+	},
+	addProseMirrorPlugins() {
+		const parent = this.parent?.() ?? [];
+		const key = new PluginKey("fileHandlerItemTracker");
+		return [...parent, new Plugin({
+			key,
+			appendTransaction: (trs, oldState, newState) => {
+				if (!trs.some((tr) => tr.docChanged)) return null;
+				const onReferenceRemoved = this.options.onReferenceRemoved;
+				const onReferenceAdded = this.options.onReferenceAdded;
+				if (!onReferenceRemoved && !onReferenceAdded) return null;
+				const { removed, added } = diffIds(collectImageIds(oldState.doc), collectImageIds(newState.doc));
+				for (const id of removed) onReferenceRemoved?.(id);
+				for (const id of added) onReferenceAdded?.(id);
+				return null;
+			}
+		})];
+	}
+});
+
+//#endregion
+export { FileHandler$1 as FileHandler };

package/dist/src/components/editor/extensions/file-handler/strategy.d.mts

@@ -0,0 +1,26 @@
+import { FileHandlerOptions } from "./extension.mjs";
+import { PresignUploadInput, StorageAsset } from "../../../../modules/storage/lib/validators.mjs";
+import { UploadClient, UploadHooks } from "../../../../modules/storage/lib/upload.client.mjs";
+
+//#region src/components/editor/extensions/file-handler/strategy.d.ts
+/**
+ * Handle File Handler props
+ */
+type CreateFileHandlerUploadStrategyProps = {
+  variables: Pick<PresignUploadInput, "visibility" | "metadata">;
+  uploadClient: UploadClient;
+  uploadHooks?: UploadHooks;
+  allowedMimeTypes?: string[];
+  onUploadCompleted?: (asset: StorageAsset) => Promise<void> | void;
+  onUploadFailed?: (error: unknown) => Promise<void> | void;
+};
+declare function createFileHandlerUploadStrategy({
+  variables,
+  uploadClient,
+  uploadHooks,
+  onUploadCompleted,
+  onUploadFailed,
+  allowedMimeTypes
+}: CreateFileHandlerUploadStrategyProps): FileHandlerOptions;
+//#endregion
+export { createFileHandlerUploadStrategy };

package/dist/src/components/editor/extensions/file-handler/strategy.mjs

@@ -0,0 +1,110 @@
+import { TextSelection } from "@tiptap/pm/state";
+
+//#region src/components/editor/extensions/file-handler/strategy.ts
+function createFileHandlerUploadStrategy({ variables, uploadClient, uploadHooks, onUploadCompleted, onUploadFailed, allowedMimeTypes }) {
+	const handleUpload = async (editor, files, startPos) => {
+		const insertPos = startPos;
+		for (const file of files) {
+			/**
+			* Prepare upload
+			*/
+			const input = uploadClient.prepareUpload({
+				file,
+				...variables
+			});
+			const imageType = editor.schema.nodes.image;
+			if (!imageType) {
+				console.error("Image type not found");
+				return;
+			}
+			try {
+				/**
+				* Create skeleton node
+				*/
+				const skeletonNode = editor.schema.nodes.skeleton?.create({
+					imageNodeId: input.uploadId,
+					width: 500,
+					height: 500
+				});
+				/**
+				* Insert skeleton node into the document
+				*/
+				if (skeletonNode) {
+					const tr = editor.state.tr.insert(insertPos, skeletonNode);
+					tr.setSelection(TextSelection.create(tr.doc, insertPos + skeletonNode.nodeSize));
+					tr.setMeta("addToHistory", false);
+					editor.view.dispatch(tr);
+				}
+				/**
+				* Upload the file
+				*/
+				const asset = await uploadClient.upload(input, uploadHooks);
+				/**
+				* Replace skeleton with image node
+				*/
+				const replacedTr = editor.state.tr;
+				let replaced = false;
+				replacedTr.doc.descendants((node, pos) => {
+					if (node.type.name === "skeleton" && node.attrs?.imageNodeId === input.uploadId) {
+						const imageNode = imageType.create({
+							assetId: asset.id,
+							alt: file.name,
+							fileName: file.name,
+							width: node.attrs.width ?? 500
+						});
+						replacedTr.replaceWith(pos, pos + node.nodeSize, imageNode);
+						replaced = true;
+						return false;
+					}
+				});
+				if (replaced) editor.view.dispatch(replacedTr);
+				else {
+					const tr = editor.state.tr;
+					const imageNode = imageType.create({
+						assetId: asset.id,
+						alt: file.name,
+						fileName: file.name,
+						width: 500
+					});
+					tr.insert(insertPos, imageNode);
+					editor.view.dispatch(tr);
+				}
+				await onUploadCompleted?.(asset);
+			} catch (err) {
+				console.error("Upload error:", err);
+				/**
+				* Remove the pending image node from the document
+				*/
+				const tr = editor.state.tr;
+				tr.doc.descendants((node, pos) => {
+					if (node.type.name === "skeleton" && node.attrs?.imageNodeId === input.uploadId) {
+						tr.delete(pos, pos + node.nodeSize);
+						return false;
+					}
+				});
+				editor.view.dispatch(tr);
+				await onUploadFailed?.(err);
+			}
+		}
+	};
+	return {
+		allowedMimeTypes,
+		onDrop: async (editor, files, pos) => {
+			await handleUpload(editor, files, pos);
+		},
+		onPaste: async (editor, files, htmlContent) => {
+			if (htmlContent?.length) return;
+			const startPos = editor.state.selection.anchor;
+			await handleUpload(editor, files, startPos);
+		},
+		onReferenceRemoved: async (assetId) => {
+			await uploadClient.deleteAsset(assetId);
+		},
+		onReferenceAdded: async (assetId) => {
+			await uploadClient.restoreAsset(assetId);
+		}
+	};
+}
+
+//#endregion
+export { createFileHandlerUploadStrategy };

package/dist/src/components/editor/extensions/file-handler/utils.mjs

@@ -0,0 +1,49 @@
+//#region src/components/editor/extensions/file-handler/utils.ts
+/**
+* Collects and counts all image node IDs from a document.
+*
+* @param doc - The document node to traverse and analyze
+* @returns A Map where keys are image node IDs and values are their occurrence counts
+*
+* @example
+* const imageCounts = collectImageIds(editorDoc);
+* imageCounts.forEach((count, imageId) => {
+*   console.info(`Image ${imageId} appears ${count} times`);
+* });
+*/
+function collectImageIds(doc) {
+	const counts = /* @__PURE__ */ new Map();
+	doc.descendants((node) => {
+		if (node.type.name !== "image") return;
+		const id = node.attrs?.assetId;
+		if (!id) return;
+		counts.set(id, (counts.get(id) ?? 0) + 1);
+	});
+	return counts;
+}
+/**
+* Compares two maps of string keys to numeric values and identifies which keys have been removed or restored.
+* @param before - A Map containing the previous state of string keys with their associated numeric values
+* @param after - A Map containing the current state of string keys with their associated numeric values
+* @returns An object containing two arrays:
+*   - `removed`: Array of keys where the numeric value decreased (or was deleted)
+*   - `restored`: Array of keys where the numeric value increased
+*/
+function diffIds(before, after) {
+	const removed = [];
+	const added = [];
+	const keys = new Set([...before.keys(), ...after.keys()]);
+	for (const key of keys) {
+		const b = before.get(key) ?? 0;
+		const a = after.get(key) ?? 0;
+		if (a < b) removed.push(key);
+		if (a > b) added.push(key);
+	}
+	return {
+		removed,
+		added
+	};
+}
+
+//#endregion
+export { collectImageIds, diffIds };

package/dist/src/components/editor/extensions/image/extension.d.mts

@@ -0,0 +1,7 @@
+import { ImageOptions } from "@tiptap/extension-image";
+import "@tiptap/core";
+
+//#region src/components/editor/extensions/image/extension.d.ts
+interface ImageOptions$1 extends ImageOptions {}
+//#endregion
+export { ImageOptions$1 as ImageOptions };

package/dist/src/components/editor/extensions/image/extension.mjs

@@ -0,0 +1,50 @@
+"use client";
+
+import { getAssetURL } from "../../../../modules/storage/lib/helpers.mjs";
+import { Image } from "@tiptap/extension-image";
+
+//#region src/components/editor/extensions/image/extension.ts
+const Image$1 = Image.extend({
+	atom: true,
+	addAttributes() {
+		return {
+			...this.parent?.(),
+			assetId: {
+				default: null,
+				parseHTML: (el) => el.getAttribute("data-asset-id"),
+				renderHTML: (attrs) => {
+					if (!attrs.assetId) return {};
+					return {
+						"data-asset-id": attrs.assetId,
+						...attrs.assetId && !attrs.isPending ? { src: getAssetURL(attrs.assetId) } : {}
+					};
+				}
+			},
+			alt: { default: null },
+			title: { default: null },
+			width: { default: null },
+			height: { default: null },
+			isPending: {
+				default: false,
+				renderHTML: (attrs) => attrs.isPending ? { "data-pending": "true" } : {}
+			},
+			fileName: { default: null }
+		};
+	},
+	parseHTML() {
+		return [{ tag: "img[data-asset-id]" }];
+	},
+	renderHTML({ HTMLAttributes }) {
+		const { src: _, ...attrs } = HTMLAttributes;
+		const assetId = attrs.assetId;
+		const isPending = Boolean(attrs.isPending);
+		const src = assetId && !isPending ? getAssetURL(assetId) : null;
+		return ["img", {
+			...attrs,
+			...src ? { src } : {}
+		}];
+	}
+});
+
+//#endregion
+export { Image$1 as Image };

package/dist/src/components/editor/extensions/skeleton/extension.mjs

@@ -0,0 +1,40 @@
+"use client";
+
+import { SkeletonNodeRenderer } from "./renderer.mjs";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { Node } from "@tiptap/core";
+
+//#region src/components/editor/extensions/skeleton/extension.ts
+const Skeleton = Node.create({
+	name: "skeleton",
+	atom: true,
+	inline: true,
+	group: "inline",
+	selectable: false,
+	draggable: false,
+	addAttributes() {
+		return {
+			imageNodeId: { default: null },
+			width: { default: null },
+			height: { default: null }
+		};
+	},
+	addOptions() {
+		return { addToHistory: false };
+	},
+	parseHTML() {
+		return [{ tag: "span[data-skeleton]" }];
+	},
+	renderHTML({ HTMLAttributes }) {
+		return ["span", {
+			...HTMLAttributes,
+			"data-skeleton": "true"
+		}];
+	},
+	addNodeView() {
+		return ReactNodeViewRenderer(SkeletonNodeRenderer);
+	}
+});
+
+//#endregion
+export { Skeleton };

package/dist/src/components/editor/extensions/skeleton/renderer.mjs

@@ -0,0 +1,24 @@
+"use client";
+
+import { Skeleton } from "../../../ui/skeleton.mjs";
+import { jsx } from "react/jsx-runtime";
+import { NodeViewWrapper } from "@tiptap/react";
+
+//#region src/components/editor/extensions/skeleton/renderer.tsx
+function SkeletonNodeRenderer(props) {
+	const { width, height } = props.node.attrs;
+	return /* @__PURE__ */ jsx(NodeViewWrapper, {
+		as: "span",
+		"data-skeleton": "true",
+		children: /* @__PURE__ */ jsx(Skeleton, {
+			className: "min-h-125 w-full",
+			style: {
+				width,
+				height
+			}
+		})
+	});
+}
+
+//#endregion
+export { SkeletonNodeRenderer };

package/dist/src/components/editor/lib/constants.d.mts

@@ -0,0 +1,62 @@
+import { FileHandlerOptions } from "../extensions/file-handler/extension.mjs";
+import { ImageOptions } from "../extensions/image/extension.mjs";
+import * as _tiptap_extension_blockquote0 from "@tiptap/extension-blockquote";
+import * as _tiptap_extension_bold0 from "@tiptap/extension-bold";
+import * as _tiptap_extension_hard_break0 from "@tiptap/extension-hard-break";
+import * as _tiptap_extension_heading0 from "@tiptap/extension-heading";
+import * as _tiptap_extension_horizontal_rule0 from "@tiptap/extension-horizontal-rule";
+import * as _tiptap_extension_italic0 from "@tiptap/extension-italic";
+import * as _tiptap_extension_link0 from "@tiptap/extension-link";
+import * as _tiptap_extension_list0 from "@tiptap/extension-list";
+import * as _tiptap_extension_paragraph0 from "@tiptap/extension-paragraph";
+import * as _tiptap_extension_strike0 from "@tiptap/extension-strike";
+import * as _tiptap_extension_underline0 from "@tiptap/extension-underline";
+import * as _tiptap_extension_highlight0 from "@tiptap/extension-highlight";
+import * as _tiptap_extension_text_style0 from "@tiptap/extension-text-style";
+import * as _tiptap_extensions0 from "@tiptap/extensions";
+import * as _tiptap_core0 from "@tiptap/core";
+
+//#region src/components/editor/lib/constants.d.ts
+/**
+ * Editor extensions map
+ */
+declare const EDITOR_EXTENSIONS: {
+  /**
+   * Nodes
+   */
+  blockquote: _tiptap_core0.Node<_tiptap_extension_blockquote0.BlockquoteOptions, any>;
+  document: _tiptap_core0.Node<any, any>;
+  hardBreak: _tiptap_core0.Node<_tiptap_extension_hard_break0.HardBreakOptions, any>;
+  heading: _tiptap_core0.Node<_tiptap_extension_heading0.HeadingOptions, any>;
+  horizontalRule: _tiptap_core0.Node<_tiptap_extension_horizontal_rule0.HorizontalRuleOptions, any>;
+  listItem: _tiptap_core0.Node<_tiptap_extension_list0.ListItemOptions, any>;
+  orderedList: _tiptap_core0.Node<_tiptap_extension_list0.OrderedListOptions, any>;
+  bulletList: _tiptap_core0.Node<_tiptap_extension_list0.BulletListOptions, any>;
+  paragraph: _tiptap_core0.Node<_tiptap_extension_paragraph0.ParagraphOptions, any>;
+  text: _tiptap_core0.Node<any, any>;
+  image: _tiptap_core0.Node<ImageOptions, any>;
+  fileHandler: _tiptap_core0.Extension<FileHandlerOptions, any>;
+  skeleton: _tiptap_core0.Node<any, any>;
+  /**
+   * Marks
+   */
+  bold: _tiptap_core0.Mark<_tiptap_extension_bold0.BoldOptions, any>;
+  italic: _tiptap_core0.Mark<_tiptap_extension_italic0.ItalicOptions, any>;
+  link: _tiptap_core0.Mark<_tiptap_extension_link0.LinkOptions, any>;
+  strike: _tiptap_core0.Mark<_tiptap_extension_strike0.StrikeOptions, any>;
+  underline: _tiptap_core0.Mark<_tiptap_extension_underline0.UnderlineOptions, any>;
+  highlight: _tiptap_core0.Mark<_tiptap_extension_highlight0.HighlightOptions, any>;
+  /**
+   * Extensions
+   */
+  dropcursor: _tiptap_core0.Extension<_tiptap_extensions0.DropcursorOptions, any>;
+  gapcursor: _tiptap_core0.Extension<any, any>;
+  undoRedo: _tiptap_core0.Extension<_tiptap_extensions0.UndoRedoOptions, any>;
+  listKeymap: _tiptap_core0.Extension<_tiptap_extension_list0.ListKeymapOptions, any>;
+  trailingNode: _tiptap_core0.Extension<_tiptap_extensions0.TrailingNodeOptions, any>;
+  textStyle: _tiptap_core0.Mark<_tiptap_extension_text_style0.TextStyleOptions, any>;
+  color: _tiptap_core0.Extension<_tiptap_extension_text_style0.ColorOptions, any>;
+};
+type EditorExtensions = typeof EDITOR_EXTENSIONS;
+//#endregion
+export { EditorExtensions };