@meta-1/editor 0.0.29 → 1.0.0

package/src/components/tiptap-node/paragraph-node/paragraph-node.css

@@ -0,0 +1,198 @@
+@import "tailwindcss";
+
+/* Ensure each top-level node has relative positioning 
+   so absolutely positioned placeholders work correctly */
+.tiptap.ProseMirror > * {
+  @apply relative;
+}
+
+/* =====================
+    CORE EDITOR STYLES
+    ===================== */
+.tiptap.ProseMirror {
+  @apply whitespace-pre-wrap outline-none;
+  caret-color: currentColor;
+}
+
+/* Paragraph spacing */
+.tiptap.ProseMirror p:not(:first-child):not(td p):not(th p) {
+  @apply text-base font-normal;
+  line-height: 1.6;
+}
+
+/* Selection styles */
+.tiptap.ProseMirror:not(.readonly):not(.ProseMirror-hideselection) ::selection {
+  @apply bg-indigo-100 dark:bg-indigo-900;
+}
+
+.tiptap.ProseMirror:not(.readonly):not(.ProseMirror-hideselection) .selection::selection {
+  @apply bg-transparent;
+}
+
+.tiptap.ProseMirror .selection {
+  @apply inline bg-indigo-100 dark:bg-indigo-900;
+}
+
+/* Selected node styles */
+.tiptap.ProseMirror .ProseMirror-selectednode:not(img):not(pre):not(.react-renderer) {
+  @apply rounded-md bg-indigo-100 dark:bg-indigo-900;
+}
+
+.tiptap.ProseMirror .ProseMirror-hideselection {
+  caret-color: transparent;
+}
+
+/* Resize cursor */
+.tiptap.ProseMirror.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+
+/* =====================
+    TEXT DECORATION
+    ===================== */
+/* Text decoration inheritance for spans */
+.tiptap.ProseMirror a span {
+  @apply underline;
+}
+
+.tiptap.ProseMirror s span {
+  @apply line-through;
+}
+
+.tiptap.ProseMirror u span {
+  @apply underline;
+}
+
+.tiptap.ProseMirror .tiptap-ai-insertion {
+  @apply text-indigo-600 dark:text-indigo-400;
+}
+
+/* =====================
+    COLLABORATION
+    ===================== */
+.tiptap.ProseMirror .collaboration-carets__caret {
+  @apply border-r border-l border-transparent pointer-events-none -mx-px relative;
+  word-break: normal;
+}
+
+.tiptap.ProseMirror .collaboration-carets__label {
+  @apply text-gray-900 dark:text-gray-100 rounded rounded-bl-none text-xs font-semibold -left-px absolute select-none whitespace-nowrap;
+  line-height: 1;
+  padding: 0.125rem 0.375rem;
+  top: -1.3em;
+}
+
+/* =====================
+    EMOJI
+    ===================== */
+.tiptap.ProseMirror [data-type="emoji"] img {
+  @apply inline-block cursor-text;
+  width: 1.25em;
+  height: 1.25em;
+}
+
+/* =====================
+    LINKS
+    ===================== */
+.tiptap.ProseMirror a {
+  @apply text-indigo-500 dark:text-indigo-400 underline;
+}
+
+/* =====================
+    MENTION
+    ===================== */
+.tiptap.ProseMirror [data-type="mention"] {
+  @apply inline-block text-indigo-500;
+}
+
+/* =====================
+    THREADS
+    ===================== */
+/* Base styles for inline threads */
+.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--inline {
+  @apply text-gray-900 dark:text-gray-900 font-semibold transition-colors duration-200 border-b-2 border-dashed border-yellow-500;
+}
+
+.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--inline.tiptap-thread--selected,
+.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--inline.tiptap-thread--hovered {
+  @apply bg-yellow-100 border-b-transparent;
+}
+
+.dark .tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--inline.tiptap-thread--selected,
+.dark .tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--inline.tiptap-thread--hovered {
+  @apply bg-yellow-800;
+}
+
+/* Block thread styles with images */
+.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:has(img) {
+  @apply rounded-sm overflow-hidden w-fit;
+  outline: 0.125rem solid theme("colors.yellow.500");
+}
+
+.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:has(img).tiptap-thread--selected {
+  outline-width: 0.25rem;
+  outline-color: theme("colors.yellow.500");
+}
+
+.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:has(img).tiptap-thread--hovered {
+  outline-width: 0.25rem;
+}
+
+/* Block thread styles without images */
+.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:not(:has(img)) {
+  @apply rounded outline-transparent;
+  border-bottom: 0.125rem dashed theme("colors.yellow.500");
+  border-top: 0.125rem dashed theme("colors.yellow.500");
+  outline-width: 0.25rem;
+}
+
+.tiptap.ProseMirror .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:not(:has(img)).tiptap-thread--hovered,
+.tiptap.ProseMirror
+  .tiptap-thread.tiptap-thread--unresolved.tiptap-thread--block:not(:has(img)).tiptap-thread--selected {
+  background-color: theme("colors.yellow.500");
+  outline-color: theme("colors.yellow.500");
+}
+
+/* Resolved thread styles */
+.tiptap.ProseMirror .tiptap-thread.tiptap-thread--resolved.tiptap-thread--inline.tiptap-thread--selected {
+  @apply border-transparent opacity-50;
+  background-color: theme("colors.yellow.500");
+}
+
+/* React renderer specific styles */
+.tiptap.ProseMirror .tiptap-thread.tiptap-thread--block:has(.react-renderer) {
+  @apply my-12;
+}
+
+/* =====================
+    PLACEHOLDER
+    ===================== */
+.is-empty:not(.with-slash)[data-placeholder]:has(> .ProseMirror-trailingBreak:only-child)::before {
+  content: attr(data-placeholder);
+}
+
+.is-empty.with-slash[data-placeholder]:has(> .ProseMirror-trailingBreak:only-child)::before {
+  content: attr(data-placeholder);
+  @apply italic;
+}
+
+.is-empty[data-placeholder]:has(> .ProseMirror-trailingBreak:only-child):before {
+  @apply pointer-events-none h-0 absolute w-full left-0 right-0;
+  text-align: inherit;
+}
+
+.is-empty[data-placeholder]:has(> .ProseMirror-trailingBreak):before {
+  @apply text-gray-400 dark:text-gray-600;
+}
+
+/* =====================
+    DROPCURSOR
+    ===================== */
+.prosemirror-dropcursor-block,
+.prosemirror-dropcursor-inline {
+  @apply rounded w-full cursor-grabbing bg-indigo-400;
+  margin-left: -1px;
+  margin-right: -1px;
+  height: 0.188rem;
+}

package/src/components/tiptap-node/table-node/extensions/table-handle/helpers/create-image.ts

@@ -0,0 +1,273 @@
+import type { Editor } from "@tiptap/core";
+
+const STYLE_PROPS: (keyof CSSStyleDeclaration | string)[] = [
+  // Box & border
+  "boxSizing",
+  "backgroundColor",
+  "borderTopColor",
+  "borderRightColor",
+  "borderBottomColor",
+  "borderLeftColor",
+  "borderTopStyle",
+  "borderRightStyle",
+  "borderBottomStyle",
+  "borderLeftStyle",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "borderRadius",
+  // Spacing
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  // Typography
+  "color",
+  "font",
+  "fontFamily",
+  "fontSize",
+  "fontWeight",
+  "fontStyle",
+  "lineHeight",
+  "letterSpacing",
+  "textTransform",
+  "textDecoration",
+  "textAlign",
+  "verticalAlign",
+  "whiteSpace",
+  // Sizing
+  "width",
+  "minWidth",
+  "maxWidth",
+  "height",
+  "minHeight",
+  "maxHeight",
+  // Table specifics
+  "backgroundClip",
+];
+
+const toDash = (p: string) => p.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
+
+/**
+ * Copy a curated list of computed styles from source -> target
+ * (Works for TD/TH and most inline content you'd expect inside.)
+ */
+function copyComputedStyles(source: HTMLElement, target: HTMLElement) {
+  const cs = getComputedStyle(source);
+
+  for (const p of STYLE_PROPS) {
+    const prop = String(p);
+    const val = cs.getPropertyValue(toDash(prop));
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if (val) (target.style as any)[prop] = val;
+  }
+
+  // Ensure long content doesn't overflow the drag image
+  target.style.overflow = "hidden";
+  target.style.textOverflow = "ellipsis";
+  // Respect existing wrapping if set on the source; otherwise prefer single line
+  if (cs.whiteSpace === "" || cs.whiteSpace === "normal") {
+    target.style.whiteSpace = "nowrap";
+  }
+}
+
+/**
+ * Deep clone a node and copy computed styles element-by-element.
+ * Avoids the browser's default cloning which loses computed styles.
+ */
+function cloneWithStyles(root: HTMLElement): HTMLElement {
+  const clone = root.cloneNode(true) as HTMLElement;
+
+  // Iterative walk to avoid recursion limits
+  const q: Array<{ src: Element; dst: Element }> = [{ src: root, dst: clone }];
+  while (q.length) {
+    const { src, dst } = q.shift()!;
+    if (src instanceof HTMLElement && dst instanceof HTMLElement) {
+      copyComputedStyles(src, dst);
+    }
+    const srcChildren = Array.from(src.children);
+    const dstChildren = Array.from(dst.children);
+    const len = Math.min(srcChildren.length, dstChildren.length);
+    for (let i = 0; i < len; i++) {
+      const srcChild = srcChildren[i];
+      const dstChild = dstChildren[i];
+      if (srcChild && dstChild) {
+        q.push({ src: srcChild, dst: dstChild });
+      }
+    }
+  }
+
+  return clone;
+}
+
+/**
+ * Apply crisp, rounded, off-screen wrapper styling for drag image.
+ */
+function styleDragWrapper(el: HTMLElement, maxWidth: number) {
+  Object.assign(el.style, {
+    position: "fixed",
+    top: "-10000px",
+    left: "-10000px",
+    pointerEvents: "none",
+    zIndex: "2147483647",
+    maxWidth: `${maxWidth}px`,
+    borderRadius: "12px",
+    background: "transparent",
+    filter: "drop-shadow(0 8px 24px rgba(0,0,0,0.18)) drop-shadow(0 2px 8px rgba(0,0,0,0.10))",
+    overflow: "hidden",
+  } as CSSStyleDeclaration);
+}
+
+/**
+ * Scale an element down if it exceeds the max width, keeping crisp layout.
+ * Assumes the element is already positioned off-screen (so attaching to body is safe).
+ */
+function scaleToFit(el: HTMLElement, maxWidth: number): void {
+  // Attach once (if not already) so measurements are correct.
+  if (!el.isConnected) document.body.appendChild(el);
+  const rect = el.getBoundingClientRect();
+  if (rect.width > maxWidth && rect.width > 0) {
+    const scale = maxWidth / rect.width;
+    el.style.transformOrigin = "top left";
+    el.style.transform = `scale(${scale})`;
+  }
+}
+
+/**
+ * Copy table-level styles that affect layout.
+ */
+function applyTableBoxStyles(srcTable: HTMLTableElement, dstTable: HTMLTableElement) {
+  const tcs = getComputedStyle(srcTable);
+  dstTable.style.borderCollapse = tcs.borderCollapse;
+  dstTable.style.borderSpacing = tcs.borderSpacing;
+  dstTable.style.tableLayout = "fixed"; // consistent drag image
+  dstTable.className = srcTable.className;
+}
+
+/**
+ * Lock a cell's width to its rendered width.
+ */
+function lockCellWidth(fromCell: HTMLElement, toCell: HTMLElement) {
+  const rect = fromCell.getBoundingClientRect();
+  if (rect.width > 0) {
+    toCell.style.width = `${rect.width}px`;
+    toCell.style.maxWidth = `${rect.width}px`;
+  }
+}
+
+/**
+ * Build a 1-row preview table.
+ */
+function buildRowPreview(tableEl: HTMLTableElement, rowIndex: number): HTMLTableElement | null {
+  const body = tableEl.tBodies?.[0] ?? tableEl.querySelector("tbody");
+  if (!body) return null;
+
+  const row = body.rows?.[rowIndex] as HTMLTableRowElement | undefined;
+  if (!row) return null;
+
+  const tableClone = document.createElement("table");
+  const tbodyClone = document.createElement("tbody");
+  const rowClone = cloneWithStyles(row) as HTMLTableRowElement;
+
+  applyTableBoxStyles(tableEl, tableClone);
+
+  // Lock each cell width
+  for (let i = 0; i < row.cells.length; i++) {
+    const src = row.cells[i] as HTMLElement;
+    const dst = rowClone.cells[i] as HTMLElement | undefined;
+    if (dst) lockCellWidth(src, dst);
+  }
+
+  tbodyClone.appendChild(rowClone);
+  tableClone.appendChild(tbodyClone);
+  return tableClone;
+}
+
+/**
+ * Build a 1-column preview table (one cell per row).
+ */
+function buildColumnPreview(tableEl: HTMLTableElement, colIndex: number): HTMLTableElement | null {
+  const body = tableEl.tBodies?.[0] ?? tableEl.querySelector("tbody");
+  if (!body) return null;
+
+  const tableClone = document.createElement("table");
+  const tbodyClone = document.createElement("tbody");
+  applyTableBoxStyles(tableEl, tableClone);
+
+  let firstCellWidth = 0;
+
+  for (let r = 0; r < body.rows.length; r++) {
+    const srcRow = body.rows[r];
+    if (!srcRow) continue;
+    const srcCell = srcRow.cells?.[colIndex] as HTMLElement | undefined;
+    if (!srcCell) continue;
+
+    const tr = document.createElement("tr");
+    const cellClone = cloneWithStyles(srcCell);
+
+    const rect = srcCell.getBoundingClientRect();
+    if (!firstCellWidth && rect.width > 0) firstCellWidth = rect.width;
+    lockCellWidth(srcCell, cellClone);
+
+    tr.appendChild(cellClone);
+    tbodyClone.appendChild(tr);
+  }
+
+  if (firstCellWidth > 0) {
+    tableClone.style.width = `${firstCellWidth}px`;
+    tableClone.style.maxWidth = `${firstCellWidth}px`;
+  }
+
+  tableClone.appendChild(tbodyClone);
+  return tableClone;
+}
+
+/**
+ * Public API
+ * Creates a polished drag image for a row/column from a TipTap/ProseMirror table.
+ * - Subtle rounded corners & shadow
+ * - Scales down if it exceeds editor width
+ * - Preserves computed styles to look 1:1 with the table
+ */
+export function createTableDragImage(
+  editor: Editor,
+  orientation: "row" | "col",
+  index: number,
+  tablePos: number,
+): HTMLElement {
+  const editorRect = editor.view.dom.getBoundingClientRect();
+  const maxWidth = Math.max(0, editorRect.width);
+
+  const wrapper = document.createElement("div");
+  styleDragWrapper(wrapper, maxWidth);
+
+  const tableEl = editor.view.nodeDOM(tablePos) as HTMLTableElement | null;
+  if (!tableEl) {
+    document.body.appendChild(wrapper);
+    return wrapper;
+  }
+
+  const tableRect = tableEl.getBoundingClientRect();
+  const dragWidth = Math.min(tableRect.width, editorRect.width);
+  wrapper.style.width = `${dragWidth}px`;
+
+  const preview = orientation === "row" ? buildRowPreview(tableEl, index) : buildColumnPreview(tableEl, index);
+
+  if (preview) {
+    const card = document.createElement("div");
+    Object.assign(card.style, {
+      background: "var(--drag-image-bg, transparent)",
+      overflow: "hidden",
+    } as CSSStyleDeclaration);
+
+    card.appendChild(preview);
+    wrapper.appendChild(card);
+  }
+
+  // Measure & scale after attaching
+  scaleToFit(wrapper, maxWidth);
+
+  return wrapper;
+}
+// === END UTILS ===

package/src/components/tiptap-node/table-node/extensions/table-handle/index.ts

@@ -0,0 +1,2 @@
+export * from "./table-handle"
+export * from "./table-handle-plugin"