@tulip-systems/core 0.5.1 → 0.5.3

package/src/components/editor/components/editor.client.tsx

@@ -11,7 +11,7 @@ import {
   flattenEditorExtensionsConfig,
 } from "../lib/extensions";
 import { EditorJSONContent } from "../lib/types";
-import { editorProseVariants } from "../lib/variants";
+import { editorImageVariants, editorProseVariants } from "../lib/variants";
 
 /**
  * Editor context
@@ -75,7 +75,12 @@ export function Editor({
     editorProps: {
       transformPastedHTML: (html) => html.replace(/<img.*?>/g, ""),
       attributes: {
-        class: cn("editor-content text-sm max-w-full focus:outline-none", editorProseVariants(), className),
+        class: cn(
+          "editor-content text-sm max-w-full focus:outline-none",
+          editorProseVariants(),
+          editorImageVariants(),
+          className,
+        ),
       },
     },
   });

package/src/components/editor/components/menu.client.tsx

@@ -212,3 +212,29 @@ function EditorMenuColor() {
     </div>
   );
 }
+
+/**
+ * Editor menu image
+ */
+// function EditorMenuImage() {
+//   const { editor, extensions } = useContext(EditorContext);
+
+//   if (!extensions.image) return null;
+
+//   return (
+//     <div className="flex items-center gap-1">
+//       {extensions.image && (
+//         <Button
+//           type="button"
+//           size="icon"
+//           variant="outline"
+//           onClick={() => editor.chain().focus().downloadImage().run()}
+//           disabled={!editor?.can().downloadImage()}
+//           className="border"
+//         >
+//           <DownloadIcon className="size-3.5" />
+//         </Button>
+//       )}
+//     </div>
+//   );
+// }

package/src/components/editor/extensions/file-handler/extension.ts

@@ -0,0 +1,69 @@
+"use client";
+
+import {
+  FileHandler as TiptapFileHandler,
+  FileHandlerOptions as TiptapFileHandlerOptions,
+} from "@tiptap/extension-file-handler";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { collectImageIds, diffIds } from "./utils";
+
+export interface FileHandlerOptions extends TiptapFileHandlerOptions {
+  /**
+   * Callback function invoked when a image reference is removed from the editor. Receives the node ID of the removed node.
+   * @type {(nodeId: string) => void}
+   * @default undefined
+   **/
+  onReferenceRemoved?: (nodeId: string) => void;
+
+  /**
+   * Callback function invoked when a image reference is added to the editor. Receives the node ID of the added node.
+   * @type {(nodeId: string) => void}
+   * @default undefined
+   **/
+  onReferenceAdded?: (nodeId: string) => void;
+}
+
+/**
+ * File Handler extension for Tiptap Editor
+ */
+export const FileHandler = TiptapFileHandler.extend<FileHandlerOptions>({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      onReferenceRemoved: undefined,
+      onReferenceAdded: undefined,
+    };
+  },
+  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 before = collectImageIds(oldState.doc);
+          const after = collectImageIds(newState.doc);
+          const { removed, added } = diffIds(before, after);
+
+          for (const id of removed) {
+            onReferenceRemoved?.(id);
+          }
+
+          for (const id of added) {
+            onReferenceAdded?.(id);
+          }
+
+          return null;
+        },
+      }),
+    ];
+  },
+});

package/src/components/editor/extensions/file-handler/strategy.ts

@@ -0,0 +1,167 @@
+import { SelectNodeSchema, UploadFileSchema } from "@/modules/storage/entry";
+import { UploadClient, UploadHooks } from "@/modules/storage/entry.client";
+import { Editor } from "@tiptap/core";
+import { TextSelection } from "@tiptap/pm/state";
+import { FileHandlerOptions } from "./extension";
+
+/**
+ * Handle File Handler props
+ */
+type CreateFileHandlerUploadStrategyProps = {
+  variables: Pick<UploadFileSchema, "namespace" | "parentId" | "mode" | "hidden" | "readonly">;
+  uploadClient: UploadClient;
+  uploadHooks?: UploadHooks;
+  allowedMimeTypes?: string[];
+  onUploadCompleted?: (node: SelectNodeSchema) => Promise<void> | void;
+  onUploadFailed?: (error: unknown) => Promise<void> | void;
+};
+
+export function createFileHandlerUploadStrategy({
+  variables,
+  uploadClient,
+  uploadHooks,
+  onUploadCompleted,
+  onUploadFailed,
+  allowedMimeTypes,
+}: CreateFileHandlerUploadStrategyProps): FileHandlerOptions {
+  const handleUpload = async (editor: Editor, files: File[], startPos: number) => {
+    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.id,
+          width: 500,
+          height: 500,
+        });
+
+        /**
+         * Insert skeleton node into the document
+         */
+        if (skeletonNode) {
+          // editor.chain().insertContentAt(insertPos, skeletonNode).focus().run();
+          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 fileNode = 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.id) {
+            const imageNode = imageType.create({
+              nodeId: fileNode.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 {
+          // In case skeleton is not found, insert the image node at the original position
+          const tr = editor.state.tr;
+          const imageNode = imageType.create({
+            nodeId: fileNode.id,
+            alt: file.name,
+            fileName: file.name,
+            width: 500,
+          });
+          tr.insert(insertPos, imageNode);
+          editor.view.dispatch(tr);
+        }
+
+        // /**
+        //  * Remove skeleton node from the document
+        //  */
+        // const tr = editor.state.tr;
+        // tr.doc.descendants((node, pos) => {
+        //   if (node.type.name === "skeleton" && node.attrs?.imageNodeId === input.id) {
+        //     tr.delete(pos, pos + node.nodeSize);
+        //     return false;
+        //   }
+        // });
+        // editor.view.dispatch(tr);
+
+        // /**
+        //  * Add image node to the document
+        //  */
+        // const imageNode = imageType.create({
+        //   nodeId: fileNode.id,
+        //   alt: file.name,
+        //   fileName: file.name,
+        //   width: 500,
+        // });
+        // editor.commands.insertContentAt(insertPos, imageNode);
+        // // insertPos += imageNode.nodeSize - skeletonNode.nodeSize;
+
+        await onUploadCompleted?.(fileNode);
+      } 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 === "image" && node.attrs?.nodeId === input.id) {
+            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 (nodeId) => {
+      await uploadClient.updateNode(nodeId, { orphanedAt: new Date() });
+    },
+    onReferenceAdded: async (nodeId) => {
+      await uploadClient.updateNode(nodeId, { orphanedAt: null });
+    },
+  };
+}

package/src/components/editor/extensions/file-handler/utils.ts

@@ -0,0 +1,51 @@
+/**
+ * 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.log(`Image ${imageId} appears ${count} times`);
+ * });
+ */
+export function collectImageIds(doc: any): Map<string, number> {
+  const counts = new Map<string, number>();
+
+  doc.descendants((node: any) => {
+    if (node.type.name !== "image") return;
+
+    const id = node.attrs?.nodeId;
+    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
+ */
+export function diffIds(before: Map<string, number>, after: Map<string, number>) {
+  const removed: string[] = [];
+  const added: string[] = [];
+
+  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 };
+}

package/src/components/editor/extensions/image/extension.ts

@@ -0,0 +1,57 @@
+"use client";
+
+import { getFileUrl } from "@/modules/storage/lib/helpers";
+import { Image as TiptapImage, ImageOptions as TiptapImageOptions } from "@tiptap/extension-image";
+
+export interface ImageOptions extends TiptapImageOptions {}
+
+export const Image = TiptapImage.extend<ImageOptions>({
+  atom: true,
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      // node id
+      nodeId: {
+        default: null,
+        parseHTML: (el) => el.getAttribute("data-node-id"),
+        renderHTML: (attrs) => {
+          if (!attrs.nodeId) return {};
+          return {
+            "data-node-id": attrs.nodeId,
+            ...(attrs.nodeId && !attrs.isPending ? { src: getFileUrl(attrs.nodeId) } : {}),
+          };
+        },
+      },
+
+      // semantics
+      alt: { default: null },
+      title: { default: null },
+
+      // layout stability
+      width: { default: null },
+      height: { default: null },
+
+      // upload UX
+      isPending: {
+        default: false,
+        renderHTML: (attrs) => (attrs.isPending ? { "data-pending": "true" } : {}),
+      },
+      fileName: { default: null },
+    };
+  },
+  parseHTML() {
+    return [{ tag: "img[data-node-id]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    const { src: _, ...attrs } = HTMLAttributes;
+
+    console.log("attrs", attrs);
+
+    const nodeId = attrs.nodeId as string | null;
+    const isPending = Boolean(attrs.isPending);
+
+    const src = nodeId && !isPending ? getFileUrl(nodeId) : null;
+
+    return ["img", { ...attrs, ...(src ? { src } : {}) }];
+  },
+});

package/src/components/editor/extensions/skeleton/extension.ts

@@ -0,0 +1,35 @@
+"use client";
+
+import { Node } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { SkeletonNodeRenderer } from "./renderer";
+
+export 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);
+  },
+});

package/src/components/editor/extensions/skeleton/renderer.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { Skeleton } from "@/components/ui/skeleton";
+import { NodeViewWrapper } from "@tiptap/react";
+
+export function SkeletonNodeRenderer(props: { node: any }) {
+  const { width, height } = props.node.attrs;
+
+  return (
+    <NodeViewWrapper as="span" data-skeleton="true">
+      <Skeleton className="min-h-[500px] w-full" style={{ width, height }} />
+    </NodeViewWrapper>
+  );
+}

package/src/components/editor/lib/constants.ts

@@ -5,7 +5,6 @@ import HardBreak from "@tiptap/extension-hard-break";
 import Heading from "@tiptap/extension-heading";
 import Highlight from "@tiptap/extension-highlight";
 import HorizontalRule from "@tiptap/extension-horizontal-rule";
-import Image from "@tiptap/extension-image";
 import Italic from "@tiptap/extension-italic";
 import Link from "@tiptap/extension-link";
 import { BulletList, ListItem, ListKeymap, OrderedList } from "@tiptap/extension-list";
@@ -15,6 +14,9 @@ import Text from "@tiptap/extension-text";
 import { Color, TextStyle } from "@tiptap/extension-text-style";
 import Underline from "@tiptap/extension-underline";
 import { Dropcursor, Gapcursor, TrailingNode, UndoRedo } from "@tiptap/extensions";
+import { FileHandler } from "../extensions/file-handler/extension";
+import { Image } from "../extensions/image/extension";
+import { Skeleton } from "../extensions/skeleton/extension";
 import { createExtensionConfig } from "./extensions";
 
 /**
@@ -35,6 +37,8 @@ export const EDITOR_EXTENSIONS = {
   paragraph: Paragraph,
   text: Text,
   image: Image,
+  fileHandler: FileHandler,
+  skeleton: Skeleton,
   /**
    * Marks
    */
@@ -86,7 +90,17 @@ export const EDITOR_EXTENSIONS_CONFIG = [
   createExtensionConfig("bulletList"),
   createExtensionConfig("paragraph"),
   createExtensionConfig("text"),
-  createExtensionConfig("image", { allowBase64: false }),
+  createExtensionConfig("image", {
+    resize: {
+      enabled: true,
+      directions: ["left", "right"],
+      minHeight: 50,
+      minWidth: 50,
+      alwaysPreserveAspectRatio: true,
+    },
+  }),
+  createExtensionConfig("fileHandler"),
+  createExtensionConfig("skeleton"),
   /**
    * Marks
    */

package/src/components/editor/lib/extensions.ts

@@ -4,7 +4,6 @@ import { HardBreakOptions } from "@tiptap/extension-hard-break";
 import { HeadingOptions } from "@tiptap/extension-heading";
 import { HighlightOptions } from "@tiptap/extension-highlight";
 import { HorizontalRuleOptions } from "@tiptap/extension-horizontal-rule";
-import { ImageOptions } from "@tiptap/extension-image";
 import { ItalicOptions } from "@tiptap/extension-italic";
 import { LinkOptions } from "@tiptap/extension-link";
 import {
@@ -20,6 +19,8 @@ import { UnderlineOptions } from "@tiptap/extension-underline";
 import { DropcursorOptions, TrailingNodeOptions, UndoRedoOptions } from "@tiptap/extensions";
 import { Extension } from "@tiptap/react";
 import deepmerge from "deepmerge";
+import { FileHandlerOptions } from "../extensions/file-handler/extension";
+import { ImageOptions } from "../extensions/image/extension";
 import {
   EDITOR_EXTENSIONS,
   EDITOR_EXTENSIONS_CONFIG,
@@ -48,6 +49,8 @@ export type EditorExtensionsConfig = {
   paragraph: Partial<ParagraphOptions> | boolean;
   text: Partial<TextStyleOptions> | boolean;
   image: Partial<ImageOptions> | boolean;
+  fileHandler: Partial<FileHandlerOptions> | boolean;
+  skeleton: boolean;
   /**
    * Marks
    */

package/src/components/editor/lib/utils.ts

@@ -1,3 +1,5 @@
+import type { Node as PMNode } from "@tiptap/pm/model";
+
 type ShortcutKeyResult = {
   symbol: string;
   readable: string;
@@ -199,3 +201,33 @@ export const filterFiles = <T extends FileInput>(
 
   return [validFiles, errors];
 };
+
+/**
+ * Helper for iterating through the nodes in a document that changed compared
+ * to the given previous document. Useful for avoiding duplicate work on each transaction.
+ * Source: https://github.com/ProseMirror/prosemirror-tables/blob/master/src/fixtables.js
+ */
+export function changedDescendants(
+  old: PMNode,
+  cur: PMNode,
+  offset: number,
+  f: (node: PMNode, pos: number) => void,
+) {
+  const oldSize = old.childCount,
+    curSize = cur.childCount;
+  outer: for (let i = 0, j = 0; i < curSize; i++) {
+    const child = cur.child(i);
+    for (let scan = j, e = Math.min(oldSize, i + 3); scan < e; scan++) {
+      if (old.child(scan) == child) {
+        j = scan + 1;
+        offset += child.nodeSize;
+        continue outer;
+      }
+    }
+    f(child, offset);
+    if (j < oldSize && old.child(j).sameMarkup(child))
+      changedDescendants(old.child(j), child, offset + 1, f);
+    else child.nodesBetween(0, child.content.size, f, offset + 1);
+    offset += child.nodeSize;
+  }
+}

package/src/components/editor/lib/variants.ts

@@ -1,5 +1,76 @@
+import { cn } from "@/lib/utils/cn";
 import { cva } from "class-variance-authority";
 
+/**
+ * Prose variants
+ */
 export const editorProseVariants = cva(
-  "prose dark:prose-invert prose-a:text-primary prose-li:marker:text-primary",
+  cn(
+    "prose dark:prose-invert",
+    "prose-a:text-primary",
+    "prose-headings:scroll-mt-20",
+    "prose-h1:mt-6 prose-h1:mb-3",
+    "prose-h2:mt-6 prose-h2:mb-3",
+    "prose-h3:mt-5 prose-h3:mb-2",
+    "prose-h4:mt-4 prose-h4:mb-2",
+    "prose-ul:my-3 prose-ol:my-3",
+    "prose-ul:pl-6 prose-ol:pl-6",
+    "prose-li:my-1",
+    "prose-li:marker:text-primary",
+    "prose-li:p-0",
+    "prose-img:my-0 prose-img:rounded-lg",
+    "prose-blockquote:my-4 prose-blockquote:py-1",
+    "prose-hr:my-6",
+    "prose-pre:my-4",
+  ),
+);
+
+/**
+ * Image variants
+ */
+export const editorImageVariants = cva(
+  cn(
+    // wrapper (TipTap sets display:block inline → override with !)
+    "[&_[data-resize-wrapper]]:!inline-block",
+    "[&_[data-resize-wrapper]]:!relative",
+    "[&_[data-resize-wrapper]]:max-w-full",
+    "[&_[data-resize-wrapper]]:overflow-hidden",
+
+    // handle base
+    "[&_[data-resize-handle]]:absolute",
+    "[&_[data-resize-handle]]:z-10",
+    "[&_[data-resize-handle]]:rounded-full",
+    "[&_[data-resize-handle]]:bg-muted/40",
+    "[&_[data-resize-handle]]:w-1.5",
+    "[&_[data-resize-handle]]:cursor-ew-resize",
+    "[&_[data-resize-handle]]:opacity-0",
+    "[&_[data-resize-handle]]:transition-opacity",
+
+    // show on hover / active
+    "[&:hover_[data-resize-handle]]:opacity-100",
+    "[&_[data-resize-state='true']_[data-resize-handle]]:opacity-100",
+
+    // ✅ override TipTap inline: top:0; bottom:0;
+    "[&_[data-resize-handle]]:!top-1/2",
+    "[&_[data-resize-handle]]:!bottom-auto",
+    "[&_[data-resize-handle]]:!-translate-y-1/2",
+
+    // ✅ half height (also must beat inline)
+    "[&_[data-resize-handle]]:!h-1/2",
+
+    // ✅ spacing from edge (beat inline left:0 / right:0)
+    "[&_[data-resize-handle='left']]:!left-2",
+    "[&_[data-resize-handle='right']]:!right-2",
+
+    // ✅ override inline visibility:hidden on the resize container while pending
+    "[&_[data-resize-container]:has(img[data-pending='true'])]:[visibility:visible!important]",
+    "[&_[data-resize-container]:has(img[data-pending='true'])]:[pointer-events:auto!important]",
+
+    // Pending img should behave like a skeleton block (even before wrapper exists)
+    "[&_img[data-pending='true']]:bg-primary/10",
+    "[&_img[data-pending='true']]:animate-pulse",
+    "[&_img[data-pending='true']]:rounded-md",
+    "[&_img[data-pending='true']]:opacity-0",
+    "[&_img[data-pending='true']]:min-h-[500px]",
+  ),
 );

package/src/components/entry.ts

@@ -3,8 +3,9 @@
  */
 export * from "./common/icons";
 export * from "./common/status";
-export * from "./editor/lib/types";
+export * from "./editor/extensions/file-handler/strategy";
 export * from "./editor/lib/helpers";
+export * from "./editor/lib/types";
 
 /**
  * Components Layouts