@meta-1/editor 0.0.29 → 1.0.1

package/src/components/tiptap-node/image-upload-node/image-upload-node-extension.ts

@@ -0,0 +1,155 @@
+import type { NodeType } from "@tiptap/pm/model";
+import { mergeAttributes, Node, ReactNodeViewRenderer } from "@tiptap/react";
+
+import { ImageUploadNode as ImageUploadNodeComponent } from "./image-upload-node";
+
+export type UploadFunction = (
+  file: File,
+  onProgress?: (event: { progress: number }) => void,
+  abortSignal?: AbortSignal,
+) => Promise<string>;
+
+export interface ImageUploadNodeOptions {
+  /**
+   * The type of the node.
+   * @default 'image'
+   */
+  type?: string | NodeType | undefined;
+  /**
+   * Acceptable file types for upload.
+   * @default 'image/*'
+   */
+  accept?: string;
+  /**
+   * Maximum number of files that can be uploaded.
+   * @default 1
+   */
+  limit?: number;
+  /**
+   * Maximum file size in bytes (0 for unlimited).
+   * @default 0
+   */
+  maxSize?: number;
+  /**
+   * Function to handle the upload process.
+   */
+  upload?: UploadFunction;
+  /**
+   * Callback for upload errors.
+   */
+  onError?: (error: Error) => void;
+  /**
+   * Callback for successful uploads.
+   */
+  onSuccess?: (url: string) => void;
+  /**
+   * HTML attributes to add to the image element.
+   * @default {}
+   * @example { class: 'foo' }
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  HTMLAttributes: Record<string, any>;
+}
+
+declare module "@tiptap/react" {
+  interface Commands<ReturnType> {
+    imageUpload: {
+      setImageUploadNode: (options?: ImageUploadNodeOptions) => ReturnType;
+    };
+  }
+}
+
+/**
+ * A Tiptap node extension that creates an image upload component.
+ * @see registry/tiptap-node/image-upload-node/image-upload-node
+ */
+export const ImageUploadNode = Node.create<ImageUploadNodeOptions>({
+  name: "imageUpload",
+
+  group: "block",
+
+  draggable: true,
+
+  selectable: true,
+
+  atom: true,
+
+  addOptions() {
+    return {
+      type: "image",
+      accept: "image/*",
+      limit: 1,
+      maxSize: 0,
+      upload: undefined,
+      onError: undefined,
+      onSuccess: undefined,
+      HTMLAttributes: {},
+    };
+  },
+
+  addAttributes() {
+    return {
+      accept: {
+        default: this.options.accept,
+      },
+      limit: {
+        default: this.options.limit,
+      },
+      maxSize: {
+        default: this.options.maxSize,
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: 'div[data-type="image-upload"]' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes({ "data-type": "image-upload" }, HTMLAttributes)];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(ImageUploadNodeComponent);
+  },
+
+  addCommands() {
+    return {
+      setImageUploadNode:
+        (options) =>
+        ({ commands }) => {
+          return commands.insertContent({
+            type: this.name,
+            attrs: options,
+          });
+        },
+    };
+  },
+
+  /**
+   * Adds Enter key handler to trigger the upload component when it's selected.
+   */
+  addKeyboardShortcuts() {
+    return {
+      Enter: ({ editor }) => {
+        const { selection } = editor.state;
+        const { nodeAfter } = selection.$from;
+
+        if (nodeAfter && nodeAfter.type.name === "imageUpload" && editor.isActive("imageUpload")) {
+          const nodeEl = editor.view.nodeDOM(selection.$from.pos);
+          if (nodeEl && nodeEl instanceof HTMLElement) {
+            // Since NodeViewWrapper is wrapped with a div, we need to click the first child
+            const firstChild = nodeEl.firstChild;
+            if (firstChild && firstChild instanceof HTMLElement) {
+              firstChild.click();
+              return true;
+            }
+          }
+        }
+        return false;
+      },
+    };
+  },
+});
+
+export default ImageUploadNode;

package/src/components/tiptap-node/image-upload-node/image-upload-node.css

@@ -0,0 +1,141 @@
+@import "tailwindcss";
+
+.tiptap-image-upload input[type="file"] {
+  @apply hidden;
+}
+
+.tiptap-image-upload .tiptap-image-upload-dropzone {
+  @apply relative inline-flex items-start justify-center select-none;
+  width: 3.125rem;
+  height: 3.75rem;
+}
+
+.tiptap-image-upload .tiptap-image-upload-icon-container {
+  @apply absolute bottom-0 right-0 bg-indigo-500 dark:bg-indigo-400 rounded-lg flex items-center justify-center;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+.tiptap-image-upload .tiptap-image-upload-icon {
+  @apply text-white dark:text-black;
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.tiptap-image-upload .tiptap-image-upload-dropzone-rect-primary {
+  @apply absolute text-gray-200 dark:text-gray-700;
+}
+
+.tiptap-image-upload .tiptap-image-upload-dropzone-rect-secondary {
+  @apply absolute top-0 right-1 bottom-0 text-gray-300 dark:text-gray-600;
+}
+
+.tiptap-image-upload .tiptap-image-upload-text {
+  @apply text-gray-700 dark:text-gray-300 font-medium text-sm;
+  line-height: normal;
+}
+
+.tiptap-image-upload .tiptap-image-upload-text em {
+  @apply not-italic underline;
+}
+
+.tiptap-image-upload .tiptap-image-upload-subtext {
+  @apply text-gray-400 dark:text-gray-600 font-semibold text-xs;
+  line-height: normal;
+}
+
+.tiptap-image-upload .tiptap-image-upload-drag-area {
+  @apply py-8 px-6 border-dashed rounded-md text-center cursor-pointer relative overflow-hidden transition-all duration-200;
+  border: 1.5px dashed theme("colors.gray.300");
+}
+
+.dark .tiptap-image-upload .tiptap-image-upload-drag-area {
+  border-color: theme("colors.gray.700");
+}
+
+.tiptap-image-upload .tiptap-image-upload-drag-area:hover {
+  @apply border-gray-400 dark:border-gray-600;
+}
+
+.tiptap-image-upload .tiptap-image-upload-drag-area.drag-active {
+  @apply border-indigo-500 dark:border-indigo-400;
+  background-color: rgba(79, 70, 229, 0.05);
+}
+
+.tiptap-image-upload .tiptap-image-upload-drag-area.drag-over {
+  @apply border-indigo-500 dark:border-indigo-400;
+  background-color: rgba(79, 70, 229, 0.1);
+}
+
+.tiptap-image-upload .tiptap-image-upload-content {
+  @apply flex items-center justify-center flex-col gap-1 select-none;
+}
+
+.tiptap-image-upload .tiptap-image-upload-previews {
+  @apply flex flex-col gap-3;
+}
+
+.tiptap-image-upload .tiptap-image-upload-header {
+  @apply flex items-center justify-between py-2 border-b border-gray-300 dark:border-gray-700 mb-2;
+}
+
+.tiptap-image-upload .tiptap-image-upload-header span {
+  @apply text-sm font-medium text-gray-700 dark:text-gray-300;
+}
+
+/* === Individual File Preview Styles === */
+.tiptap-image-upload .tiptap-image-upload-preview {
+  @apply relative rounded-md overflow-hidden;
+}
+
+.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-progress {
+  @apply absolute inset-0 bg-indigo-50 dark:bg-indigo-900 transition-all duration-300;
+}
+
+.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-preview-content {
+  @apply relative border border-gray-300 dark:border-gray-700 rounded-md p-4 flex items-center justify-between;
+}
+
+.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-file-info {
+  @apply flex items-center gap-3 h-8;
+}
+
+.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-file-info .tiptap-image-upload-file-icon {
+  @apply p-2 bg-indigo-500 dark:bg-indigo-400 rounded-lg;
+}
+
+.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-file-info .tiptap-image-upload-file-icon svg {
+  @apply text-white dark:text-black;
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-details {
+  @apply flex flex-col;
+}
+
+.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-actions {
+  @apply flex items-center gap-2;
+}
+
+.tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-actions .tiptap-image-upload-progress-text {
+  @apply text-xs text-indigo-500 dark:text-indigo-400 font-semibold;
+}
+
+.tiptap.ProseMirror.ProseMirror-focused .ProseMirror-selectednode .tiptap-image-upload-drag-area {
+  @apply border-indigo-500 dark:border-indigo-400;
+}
+
+@media (max-width: 480px) {
+  .tiptap-image-upload .tiptap-image-upload-drag-area {
+    @apply py-6 px-4;
+  }
+
+  .tiptap-image-upload .tiptap-image-upload-header {
+    @apply flex-col items-start gap-2;
+  }
+
+  .tiptap-image-upload .tiptap-image-upload-preview-content {
+    @apply p-3;
+  }
+}