@sovann72-dev/lynqify-ui 1.0.0 → 1.0.2

package/src/components/RichTextEditor/Extension/batch-segment-images.extension.ts

@@ -1,486 +0,0 @@
-import * as React from 'react';
-import { CommandProps, Node } from '@tiptap/core';
-import { NodeSelection, Plugin, TextSelection } from '@tiptap/pm/state';
-import { createRoot } from 'react-dom/client';
-import BatchImageGalleryNodeView from 'src/components/NoteEditor/BatchImageGalleryNodeView';
-import { BatchImage, BatchSegmentImagesOptions } from './batch-segment-images.types';
-
-export type { BatchImage, BatchSegmentImagesOptions };
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    batchSegmentImages: {
-      insertBatchImages: ({
-        batchId,
-        images,
-      }: {
-        batchId: string;
-        images: BatchImage[];
-      }) => ReturnType;
-    };
-  }
-}
-
-// Tracks the last arrow key pressed — consumed by selectNode() to determine entry side.
-// Module-level is safe: key events are synchronous and selectNode fires in the same tick.
-let _pendingEntryDirection: 'left' | 'right' | null = null;
-
-export const BatchSegmentImagesExtension = Node.create<BatchSegmentImagesOptions>({
-  name: 'batchSegmentImages',
-
-  group: 'block',
-  inline: false,
-  atom: true,
-
-  addOptions() {
-    return {
-      maxImageAmount: undefined,
-      height: undefined,
-      onAdd: undefined,
-      onRemove: undefined,
-      onImageClick: undefined,
-      initialImageRegistry: undefined as unknown as Map<string, BatchImage[]> | undefined,
-    };
-  },
-
-  // Create a storage registry for this extension storage
-  addStorage() {
-    return {
-      imageRegistry: new Map<string, BatchImage[]>(this.options.initialImageRegistry),
-    };
-  },
-
-  addAttributes() {
-    return {
-      batchId: {
-        default: null,
-        parseHTML: (element: HTMLElement) => element.getAttribute('data-batch-id'),
-        renderHTML: (attrs) => ({ 'data-batch-id': attrs.batchId }),
-      },
-      id: {
-        default: null,
-        parseHTML: (element: HTMLElement) => element.getAttribute('data-id'),
-        renderHTML: (attrs) => ({
-          'data-id': attrs.id,
-        }),
-      },
-      images: {
-        default: [],
-        parseHTML: (element: HTMLElement) => {
-          const imgs = element.querySelectorAll('img');
-          const images: BatchImage[] = [];
-          imgs.forEach((img) => {
-            const id = img.getAttribute('data-id');
-            const src = img.getAttribute('src');
-            const alt = img.getAttribute('alt');
-            const title = img.getAttribute('title');
-            if (id && src) {
-              images.push({
-                id,
-                src,
-                alt: alt ?? undefined,
-                title: title ?? undefined,
-              });
-            }
-          });
-          return images;
-        },
-        renderHTML: () => ({}),
-      },
-      imageVersion: {
-        default: 0,
-        parseHTML: () => 0,
-        renderHTML: () => ({}),
-      },
-      // Ephemeral UI state — not persisted in HTML
-      focusedImageIndex: {
-        default: null,
-        parseHTML: () => null,
-        renderHTML: () => ({}),
-      },
-    };
-  },
-
-  addProseMirrorPlugins() {
-    return [
-      new Plugin({
-        props: {
-          handleKeyDown(_view, event) {
-            if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
-              _pendingEntryDirection = 'left';
-            } else if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
-              _pendingEntryDirection = 'right';
-            } else {
-              _pendingEntryDirection = null;
-            }
-            return false;
-          },
-        },
-      }),
-    ];
-  },
-
-  addKeyboardShortcuts() {
-    const exitLeft = (pos: number, node: ReturnType<typeof this.editor.state.doc.nodeAt>) => {
-      const tr = this.editor.state.tr
-        .setNodeMarkup(pos, undefined, { ...node!.attrs, focusedImageIndex: null })
-        .setMeta('addToHistory', false);
-      tr.setSelection(TextSelection.near(tr.doc.resolve(pos)));
-      this.editor.view.dispatch(tr);
-    };
-
-    const exitRight = (pos: number, node: ReturnType<typeof this.editor.state.doc.nodeAt>) => {
-      const afterPos = pos + node!.nodeSize;
-      const tr = this.editor.state.tr
-        .setNodeMarkup(pos, undefined, { ...node!.attrs, focusedImageIndex: null })
-        .setMeta('addToHistory', false);
-      tr.setSelection(TextSelection.near(tr.doc.resolve(afterPos)));
-      this.editor.view.dispatch(tr);
-    };
-
-    const navigate = (direction: 'left' | 'right'): boolean => {
-      const { selection } = this.editor.state;
-      if (!(selection instanceof NodeSelection)) return false;
-
-      const node = selection.node;
-      if (node.type.name !== 'batchSegmentImages') return false;
-
-      const images =
-        (
-          this.editor.storage['batchSegmentImages'] as
-            | { imageRegistry: Map<string, BatchImage[]> }
-            | undefined
-        )?.imageRegistry?.get(node.attrs.batchId) ?? (node.attrs.images as BatchImage[]);
-      if (!images.length) return false;
-
-      const pos = selection.from;
-      const currentIndex = node.attrs.focusedImageIndex as number | null;
-      const hasAdd = Boolean(this.options.onAdd);
-
-      let newIndex: number | null;
-
-      if (direction === 'right') {
-        if (currentIndex === null) {
-          // From add button, exit right
-          exitRight(pos, node);
-          return true;
-        } else if (currentIndex < images.length - 1) {
-          newIndex = currentIndex + 1;
-        } else if (currentIndex === images.length - 1 && hasAdd) {
-          // From last image to add button
-          newIndex = null;
-        } else {
-          exitRight(pos, node);
-          return true;
-        }
-      } else {
-        if (currentIndex === null) {
-          // From add button to last image
-          newIndex = images.length - 1;
-        } else if (currentIndex > 0) {
-          newIndex = currentIndex - 1;
-        } else {
-          exitLeft(pos, node);
-          return true;
-        }
-      }
-
-      this.editor.view.dispatch(
-        this.editor.state.tr
-          .setNodeMarkup(pos, undefined, { ...node.attrs, focusedImageIndex: newIndex })
-          .setMeta('addToHistory', false),
-      );
-
-      // Auto-scroll to focused image
-      if (newIndex !== null && newIndex >= 0 && newIndex < images.length) {
-        const domNode = this.editor.view.nodeDOM(pos);
-        if (domNode instanceof HTMLElement) {
-          requestAnimationFrame(() => {
-            const galleryImgs = domNode.querySelectorAll('img');
-            galleryImgs[newIndex]?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-          });
-        }
-      }
-
-      return true;
-    };
-
-    return {
-      ArrowLeft: () => navigate('left'),
-      ArrowRight: () => navigate('right'),
-      Space: () => {
-        const { selection } = this.editor.state;
-        if (!(selection instanceof NodeSelection)) return false;
-
-        const node = selection.node;
-        if (node.type.name !== 'batchSegmentImages') return false;
-
-        const images =
-          (
-            this.editor.storage['batchSegmentImages'] as
-              | { imageRegistry: Map<string, BatchImage[]> }
-              | undefined
-          )?.imageRegistry?.get(node.attrs.batchId) ?? (node.attrs.images as BatchImage[]);
-        const focusedIndex = node.attrs.focusedImageIndex as number | null;
-        const pos = selection.from;
-
-        if (focusedIndex === null) {
-          this.options.onAdd?.({
-            position: 'last',
-            batchId: node.attrs.batchId,
-            currentImages: images,
-            getPos: () => pos,
-            editor: this.editor,
-          });
-          return true;
-        }
-
-        if (focusedIndex >= 0 && focusedIndex < images.length) {
-          const image = images[focusedIndex];
-          this.options.onImageClick?.({
-            imageId: image.id,
-            batchId: node.attrs.batchId,
-            src: image.src,
-            getPos: () => pos,
-            editor: this.editor,
-          });
-          return true;
-        }
-
-        return false;
-      },
-    };
-  },
-
-  renderHTML({ node }) {
-    const images = (node.attrs.images as BatchImage[]) ?? [];
-
-    return [
-      'div',
-      {
-        'data-batch-id': node.attrs.batchId,
-        style: 'display: flex; overflow-x: auto; gap: 10px; white-space: nowrap; padding: 10px 0;',
-      },
-      ...images.map(
-        (image) =>
-          [
-            'img',
-            {
-              'data-id': image.id,
-              src: image.src,
-              alt: image.alt ?? '',
-              title: image.title ?? '',
-              style: 'width: 80px; height: 80px; object-fit: cover; flex-shrink: 0;',
-            },
-          ] as const,
-      ),
-    ];
-  },
-
-  addNodeView() {
-    return ({ node, getPos, editor }) => {
-      const options = this.options;
-      const storage = this.storage as { imageRegistry: Map<string, BatchImage[]> };
-      const container = document.createElement('div');
-      container.style.width = '100%';
-      container.classList.add('batch-segment-gallery');
-
-      if (!storage.imageRegistry.has(node.attrs.batchId)) {
-        storage.imageRegistry.set(node.attrs.batchId, (node.attrs.images as BatchImage[]) ?? []);
-      }
-
-      const root = createRoot(container);
-
-      type GalleryState = {
-        images: BatchImage[];
-        focusedImageIndex: number | null;
-        batchId: string;
-      };
-
-      // nodeRef always points to latest node — stable callbacks read from it without being recreated
-      const nodeRef = { current: node };
-      let triggerUpdate: ((state: GalleryState) => void) | null = null;
-
-      // Stable callbacks — created once, never recreated across TipTap transactions
-      const stableOnAdd = () => {
-        options.onAdd?.({
-          position: 'last',
-          batchId: nodeRef.current.attrs.batchId,
-          currentImages: storage.imageRegistry.get(nodeRef.current.attrs.batchId) ?? [],
-          getPos,
-          editor,
-        });
-      };
-      const stableOnDelete = (index: number) => {
-        options.onRemove?.({
-          index,
-          imageId: (storage.imageRegistry.get(nodeRef.current.attrs.batchId) ?? [])[index]?.id,
-          batchId: nodeRef.current.attrs.batchId,
-          getPos,
-          editor,
-        });
-      };
-      const stableOnImageClick = (image: BatchImage) => {
-        const pos = getPos();
-        if (pos !== undefined) {
-          const imageIndex = (
-            storage.imageRegistry.get(nodeRef.current.attrs.batchId) ?? []
-          ).findIndex((img) => img.id === image.id);
-          editor.view.dispatch(
-            editor.state.tr
-              .setNodeMarkup(pos, undefined, {
-                ...nodeRef.current.attrs,
-                focusedImageIndex: imageIndex,
-              })
-              .setMeta('addToHistory', false),
-          );
-        }
-        options.onImageClick?.({
-          imageId: image.id,
-          batchId: nodeRef.current.attrs.batchId,
-          src: image.src,
-          getPos,
-          editor,
-        });
-      };
-
-      // GalleryWrapper renders ONCE — exposes setState via triggerUpdate assignment
-      const GalleryWrapper = () => {
-        const [state, setState] = React.useState<GalleryState>({
-          images: storage.imageRegistry.get(node.attrs.batchId) ?? [],
-          focusedImageIndex: node.attrs.focusedImageIndex as number | null,
-          batchId: node.attrs.batchId,
-        });
-        // assigned during render so update() always gets the current setter
-        triggerUpdate = setState;
-        return React.createElement(BatchImageGalleryNodeView, {
-          batchId: state.batchId,
-          images: state.images,
-          maxImageAmount: options.maxImageAmount,
-          height: options.height,
-          focusedImageIndex: state.focusedImageIndex,
-          onAdd: stableOnAdd,
-          onDelete: stableOnDelete,
-          onImageClick: stableOnImageClick,
-        });
-      };
-
-      // Render ONCE — subsequent updates go through triggerUpdate (React state, not root.render)
-      root.render(React.createElement(GalleryWrapper));
-
-      let lastRenderedNode = node;
-
-      // Single transaction: NodeSelection + focusedImageIndex = null together (no double render)
-      container.addEventListener('click', () => {
-        const pos = getPos();
-        if (pos !== undefined) {
-          const { state, view } = editor;
-          const currentNode = state.doc.nodeAt(pos);
-          if (!currentNode) return;
-          const tr = state.tr
-            .setNodeMarkup(pos, undefined, { ...currentNode.attrs, focusedImageIndex: null })
-            .setMeta('addToHistory', false);
-          view.dispatch(tr.setSelection(NodeSelection.create(tr.doc, pos)));
-        }
-      });
-
-      return {
-        dom: container,
-        update: (updatedNode) => {
-          if (updatedNode.type !== node.type) return false;
-          // ProseMirror structural sharing: same reference = node unchanged, skip update
-          if (updatedNode === lastRenderedNode) return true;
-          lastRenderedNode = updatedNode;
-          nodeRef.current = updatedNode;
-          triggerUpdate?.({
-            images: storage.imageRegistry.get(updatedNode.attrs.batchId) ?? [],
-            focusedImageIndex: updatedNode.attrs.focusedImageIndex as number | null,
-            batchId: updatedNode.attrs.batchId,
-          });
-          return true;
-        },
-        // selectNode fires when node becomes selected (ArrowUp/Down/Left/Right from outside).
-        // Deferred via queueMicrotask — safe since selectNode is called during view.dispatch.
-        selectNode: () => {
-          const dir = _pendingEntryDirection;
-          _pendingEntryDirection = null;
-
-          const pos = getPos();
-          if (pos === undefined) return;
-
-          const currentNode = editor.state.doc.nodeAt(pos);
-          // Already focused (e.g. via click listener) — nothing to do
-          if (!currentNode || currentNode.attrs.focusedImageIndex !== null) return;
-
-          // Enter from right → start at add button (null), enter from left → start at first image (0)
-          const focusIdx = dir === 'left' ? null : 0;
-
-          queueMicrotask(() => {
-            const pos2 = getPos();
-            if (pos2 === undefined) return;
-            const node2 = editor.state.doc.nodeAt(pos2);
-            if (!node2 || node2.attrs.focusedImageIndex !== null) return;
-            if (!(editor.state.selection instanceof NodeSelection)) return;
-            editor.view.dispatch(
-              editor.state.tr
-                .setNodeMarkup(pos2, undefined, { ...node2.attrs, focusedImageIndex: focusIdx })
-                .setMeta('addToHistory', false),
-            );
-          });
-        },
-        deselectNode: () => {
-          // Reset focus ring when node loses selection
-          const pos = getPos();
-          if (pos === undefined) return;
-          const currentNode = editor.state.doc.nodeAt(pos);
-          if (!currentNode || currentNode.attrs.focusedImageIndex === null) return;
-          editor.view.dispatch(
-            editor.state.tr
-              .setNodeMarkup(pos, undefined, { ...currentNode.attrs, focusedImageIndex: null })
-              .setMeta('addToHistory', false),
-          );
-        },
-        destroy: () => {
-          storage.imageRegistry.delete(node.attrs.batchId);
-          queueMicrotask(() => root.unmount());
-        },
-      };
-    };
-  },
-
-  addCommands() {
-    return {
-      insertBatchImages:
-        ({ batchId, images }: { batchId: string; images: BatchImage[] }) =>
-        (commands: CommandProps) => {
-          const editor = commands.editor;
-          // 1. Seed registry immediately — before NodeView even mounts
-          const storage = editor.storage.batchSegmentImages as {
-            imageRegistry: Map<string, BatchImage[]>;
-          };
-          storage.imageRegistry.set(batchId, images);
-
-          // 2. Insert the node (attrs.images is just the serialization seed)
-          return commands
-            .chain()
-            .insertContent({
-              type: 'batchSegmentImages',
-              attrs: {
-                batchId,
-                images,
-                id: crypto.randomUUID(),
-              },
-            })
-            .run();
-        },
-    };
-  },
-
-  parseHTML() {
-    return [
-      {
-        tag: 'div[data-batch-id]',
-      },
-    ];
-  },
-});

package/src/components/RichTextEditor/Extension/batch-segment-images.types.ts

@@ -1,35 +0,0 @@
-import { Editor } from '@tiptap/react';
-
-export interface BatchImage {
-  id: string;
-  src: string;
-  alt?: string;
-  title?: string;
-}
-
-export interface BatchSegmentImagesOptions {
-  initialImageRegistry?: Map<string, BatchImage[]>;
-  maxImageAmount?: number;
-  height?: number;
-  onAdd?: (params: {
-    position: 'last';
-    batchId: string;
-    currentImages: BatchImage[];
-    getPos: () => number | undefined;
-    editor: Editor;
-  }) => void;
-  onRemove?: (params: {
-    index: number;
-    imageId: string;
-    batchId: string;
-    getPos: () => number | undefined;
-    editor: Editor;
-  }) => void;
-  onImageClick?: (params: {
-    imageId: string;
-    batchId: string;
-    src: string;
-    getPos: () => number | undefined;
-    editor: Editor;
-  }) => void;
-}

package/src/components/RichTextEditor/Extension/custom-image.extension.ts

@@ -1,18 +0,0 @@
-import Image from '@tiptap/extension-image';
-
-/** Image extension that persist `id` prop. */
-export const CustomImage = Image.extend({
-  addAttributes() {
-    return {
-      ...(this.parent?.() || {}),
-      id: {
-        default: null,
-        parseHTML: (element: HTMLElement) => element.getAttribute('data-id'),
-        renderHTML: (attributes: Record<string, any>) => {
-          if (!attributes.id) return {};
-          return { 'data-id': attributes.id };
-        },
-      },
-    };
-  },
-});

package/src/components/RichTextEditor/Extension/custom-link.extension.ts

@@ -1,58 +0,0 @@
-import Link from '@tiptap/extension-link';
-import { Plugin } from '@tiptap/pm/state';
-
-export const CustomLink = Link.extend({
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      'data-note-file-id': {
-        default: null,
-        parseHTML: (element) => element.getAttribute('data-note-file-id'),
-        renderHTML: (attributes) => {
-          if (!attributes['data-note-file-id']) return {};
-          return { 'data-note-file-id': attributes['data-note-file-id'] };
-        },
-      },
-    };
-  },
-
-  addProseMirrorPlugins() {
-    return [
-      new Plugin({
-        appendTransaction(transactions, oldState, newState) {
-          if (!transactions.some((tr) => tr.docChanged)) return null;
-
-          const { selection } = newState;
-          if (!selection.empty) return null;
-
-          const { $from } = selection;
-          if ($from.parent.type.name !== 'paragraph') return null;
-          if ($from.parent.content.size !== 0) return null;
-
-          const pos = $from.before($from.depth);
-          const oldFrom = oldState.selection.$from;
-          if (oldFrom.depth < 1) return null;
-          const oldPos = oldFrom.before(oldFrom.depth);
-          if (pos !== oldPos) return null;
-
-          const oldNode = oldState.doc.nodeAt(pos);
-          if (!oldNode || oldNode.type.name !== 'paragraph') return null;
-
-          let hadLink = false;
-          oldNode.forEach((child) => {
-            if (child.marks.some((m) => m.type.name === 'link')) hadLink = true;
-          });
-          if (!hadLink) return null;
-
-          const tr = newState.tr;
-          try {
-            tr.join(pos);
-          } catch {
-            // no previous node to join with — still clear stored marks below
-          }
-          return tr.setStoredMarks([]);
-        },
-      }),
-    ];
-  },
-});

package/src/components/RichTextEditor/Extension/custom-mention.extension.ts

@@ -1,29 +0,0 @@
-import { Mention } from '@tiptap/extension-mention';
-export const CustomMention = Mention.extend({
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      value: {
-        default: null,
-        parseHTML: (element) => element.getAttribute('data-value'),
-        renderHTML: (attributes) => {
-          if (!attributes.value) return {};
-          return { 'data-value': attributes.value };
-        },
-      },
-    };
-  },
-  addCommands() {
-    return {
-      ...this.parent?.(),
-      createMention:
-        ({ id, label, value }: any) =>
-        ({ commands }: any) => {
-          return commands.insertContent({
-            type: this.name,
-            attrs: { id, label, value },
-          });
-        },
-    };
-  },
-});

package/src/components/RichTextEditor/Extension/custom-paragraph.extension.ts

@@ -1,46 +0,0 @@
-/**
- * Custom Paragraph Extension: Selectable Indent Spacing
- */
-
-import Paragraph from '@tiptap/extension-paragraph';
-
-export const CustomParagraph = Paragraph.extend({
-  // Keep name as 'paragraph' for schema compatibility
-
-  addNodeView() {
-    return ({ node }) => {
-      const indentLevel = node.attrs.indent || 0;
-      const dom = document.createElement('p');
-      dom.setAttribute('data-indent', String(indentLevel));
-
-      // Apply padding based on indent level (20px per level)
-      if (indentLevel > 0) {
-        dom.style.paddingLeft = `${indentLevel * 20}px`;
-      }
-
-      // Content goes directly in the paragraph (no spacing span)
-      const contentDOM = dom;
-
-      return { dom, contentDOM };
-    };
-  },
-
-  // Placeholder positioning based on indent level
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      indent: {
-        default: 0,
-        parseHTML: (element) => parseInt(element.getAttribute('data-indent') || '0'),
-        renderHTML: (attributes) => {
-          if (!attributes.indent) return {};
-          return {
-            'data-indent': attributes.indent,
-            // CSS custom property for dynamic placeholder offset
-            style: `--indent-level: ${attributes.indent};`,
-          };
-        },
-      },
-    };
-  },
-});