@heyramzi/ui 1.54.2 → 2.0.0

package/src/editor/block-ops.ts

@@ -0,0 +1,157 @@
+// WHY: pure, server-safe block edits. No DB, HTTP or DOM, and every op returns
+// a new doc without touching the input.
+
+// Top-level blocks must carry `id` attrs. An unknown id throws.
+
+import { markdownToTiptap } from "./markdown.js";
+
+// =========================
+// TYPES
+// =========================
+
+type TiptapNode = {
+  type: string;
+  attrs?: Record<string, unknown>;
+  content?: TiptapNode[];
+  marks?: { type: string; attrs?: Record<string, unknown> }[];
+  text?: string;
+};
+
+export type TiptapDoc = {
+  type: "doc";
+  content: TiptapNode[];
+};
+
+export type BlockSummary = {
+  id: string;
+  type: string;
+  text: string;
+};
+
+// =========================
+// HELPERS
+// =========================
+
+function extractText(nodes: TiptapNode[] | undefined): string {
+  if (!nodes?.length) return "";
+  return nodes
+    .map((n) => {
+      if (n.type === "text") return n.text ?? "";
+      if (n.type === "hardBreak") return " ";
+      return extractText(n.content);
+    })
+    .join("");
+}
+
+function blockText(node: TiptapNode): string {
+  // For list nodes, join item texts separated by spaces.
+  const raw = extractText(node.content).trim();
+  // Truncate for preview.
+  return raw.length > 120 ? raw.slice(0, 117) + "..." : raw;
+}
+
+function getId(node: TiptapNode): string | null {
+  const id = node.attrs?.id;
+  return typeof id === "string" && id.length > 0 ? id : null;
+}
+
+function requireDoc(doc: unknown): TiptapDoc {
+  const d = doc as TiptapDoc;
+  if (!d || d.type !== "doc" || !Array.isArray(d.content)) {
+    throw new Error("Invalid doc: expected { type: 'doc', content: [...] }");
+  }
+  return d;
+}
+
+function requireBlockById(doc: TiptapDoc, id: string): number {
+  const idx = doc.content.findIndex((n) => getId(n) === id);
+  if (idx === -1) {
+    throw new Error(`Block id "${id}" not found in doc`);
+  }
+  return idx;
+}
+
+function newBlocksFromMd(markdown: string): TiptapNode[] {
+  const parsed = markdownToTiptap(markdown);
+  return parsed.content;
+}
+
+// =========================
+// PUBLIC OPS
+// =========================
+
+/**
+ * Return a flat list of top-level blocks with id, type, and plain-text preview.
+ */
+export function listBlocks(doc: unknown): BlockSummary[] {
+  const d = requireDoc(doc);
+  return d.content.map((node) => ({
+    id: getId(node) ?? "",
+    type: node.type,
+    text: blockText(node),
+  }));
+}
+
+/**
+ * Append blocks parsed from `markdown` after the last block.
+ * Returns a new doc.
+ */
+export function appendBlocks(doc: unknown, markdown: string): TiptapDoc {
+  const d = requireDoc(doc);
+  const added = newBlocksFromMd(markdown);
+  return {
+    type: "doc",
+    content: [...d.content, ...added],
+  };
+}
+
+/**
+ * Prepend blocks parsed from `markdown` before the first block.
+ * Returns a new doc.
+ */
+export function prependBlocks(doc: unknown, markdown: string): TiptapDoc {
+  const d = requireDoc(doc);
+  const added = newBlocksFromMd(markdown);
+  return {
+    type: "doc",
+    content: [...added, ...d.content],
+  };
+}
+
+/**
+ * Insert blocks parsed from `markdown` immediately after the block with `afterId`.
+ * Throws if `afterId` does not exist.
+ * Returns a new doc.
+ */
+export function insertBlocksAfter(doc: unknown, afterId: string, markdown: string): TiptapDoc {
+  const d = requireDoc(doc);
+  const idx = requireBlockById(d, afterId);
+  const added = newBlocksFromMd(markdown);
+  const content = [...d.content.slice(0, idx + 1), ...added, ...d.content.slice(idx + 1)];
+  return { type: "doc", content };
+}
+
+/**
+ * Replace the block with `id` with blocks parsed from `markdown`.
+ * Throws if `id` does not exist.
+ * Returns a new doc.
+ */
+export function replaceBlock(doc: unknown, id: string, markdown: string): TiptapDoc {
+  const d = requireDoc(doc);
+  const idx = requireBlockById(d, id);
+  const added = newBlocksFromMd(markdown);
+  const content = [...d.content.slice(0, idx), ...added, ...d.content.slice(idx + 1)];
+  return { type: "doc", content };
+}
+
+/**
+ * Delete the block with `id`.
+ * Throws if `id` does not exist.
+ * Returns a new doc.
+ */
+export function deleteBlock(doc: unknown, id: string): TiptapDoc {
+  const d = requireDoc(doc);
+  const idx = requireBlockById(d, id);
+  const content = [...d.content.slice(0, idx), ...d.content.slice(idx + 1)];
+  return { type: "doc", content };
+}

package/src/editor/content.css

@@ -0,0 +1,418 @@
+/* Shared Tiptap node styles for editor and renderer.
+   Applied via a `.tiptap-content` wrapper and :global() selectors in the
+   consuming Svelte components. */
+
+.tiptap-content {
+  line-height: 1.75;
+  font-size: 1rem;
+  color: var(--color-foreground);
+}
+
+/* WHY: anchor jumps must clear the fixed top navigation (h-16 → h-12 when scrolled). */
+.tiptap-content :is(h1, h2, h3, h4, h5, h6) {
+  scroll-margin-top: 6rem;
+}
+
+.tiptap-content h1 {
+  font-family: var(--font-heading);
+  font-size: 2.25rem;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  margin-top: 3rem;
+  margin-bottom: 0.75rem;
+  line-height: 1.15;
+  color: var(--color-foreground);
+}
+
+/* WHY: heading top-margin collapses through nothing when wrapped in a
+   padded container, leaving an extra gap at the top of the article. */
+.tiptap-content > :first-child {
+  margin-top: 0;
+}
+
+.tiptap-content h2 {
+  font-family: var(--font-heading);
+  font-size: 1.75rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  margin-top: 2.5rem;
+  margin-bottom: 0.625rem;
+  line-height: 1.2;
+  color: var(--color-foreground);
+}
+
+.tiptap-content h3 {
+  font-family: var(--font-heading);
+  font-size: 1.375rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  margin-top: 2rem;
+  margin-bottom: 0.5rem;
+  line-height: 1.3;
+  color: var(--color-foreground);
+}
+
+.tiptap-content h4 {
+  font-family: var(--font-heading);
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin-top: 1.5rem;
+  margin-bottom: 0.375rem;
+  line-height: 1.35;
+  color: var(--color-foreground);
+}
+
+.tiptap-content p {
+  margin-bottom: 1rem;
+  text-wrap: pretty;
+  overflow-wrap: break-word;
+}
+
+.tiptap-content ul,
+.tiptap-content ol {
+  margin-bottom: 1rem;
+  padding-left: 1.75rem;
+}
+
+.tiptap-content ul {
+  list-style-type: disc;
+}
+
+.tiptap-content ol {
+  list-style-type: decimal;
+}
+
+.tiptap-content li {
+  margin-bottom: 0.25rem;
+}
+
+.tiptap-content li p {
+  margin-bottom: 0.25rem;
+}
+
+.tiptap-content blockquote {
+  padding-left: 1.25rem;
+  margin: 1.5rem 0;
+  color: var(--color-muted-foreground);
+  font-style: italic;
+  position: relative;
+}
+
+.tiptap-content blockquote::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0.25rem;
+  bottom: 0.25rem;
+  width: 3px;
+  background: var(--color-border);
+  border-radius: 2px;
+}
+
+.tiptap-content code {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  padding: 0.15em 0.4em;
+  border-radius: 0.25rem;
+  background: var(--color-muted);
+}
+
+.tiptap-content pre {
+  background: var(--color-muted);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  overflow-x: auto;
+  margin: 1.25rem 0;
+}
+
+.tiptap-content pre code {
+  padding: 0;
+  background: none;
+  font-size: 0.875em;
+}
+
+.tiptap-content a {
+  color: var(--color-brand, var(--color-primary));
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .tiptap-content a:hover {
+    opacity: 0.85;
+  }
+}
+
+.tiptap-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+  margin: 1.5rem auto;
+  display: block;
+}
+
+.tiptap-content img[data-align="left"] {
+  float: left;
+  margin: 0.5rem 1.5rem 1rem 0;
+}
+
+.tiptap-content img[data-align="right"] {
+  float: right;
+  margin: 0.5rem 0 1rem 1.5rem;
+}
+
+.tiptap-content img[data-align="center"] {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.tiptap-content .cms-block {
+  margin: 1.5rem 0;
+  padding: 1rem 1.1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.75rem;
+  background: var(--color-muted);
+  color: var(--color-muted-foreground);
+}
+
+.tiptap-content .cms-block p {
+  margin-bottom: 0;
+}
+
+.tiptap-content .cms-block-node {
+  margin: 1.25rem 0;
+  padding: 0.9rem 1rem;
+  border: 1px dashed var(--color-border);
+  border-radius: 0.75rem;
+  background: color-mix(in srgb, var(--color-muted) 75%, transparent);
+  color: var(--color-muted-foreground);
+}
+
+.tiptap-content .cms-block strong {
+  display: inline-block;
+  margin-right: 0.35rem;
+  color: var(--color-foreground);
+}
+
+.tiptap-content hr {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: 2rem 0;
+}
+
+.tiptap-content strong {
+  font-weight: 600;
+}
+
+/* WHY: <strong> inside a heading must inherit the heading's weight, not
+   downgrade it to 600 (which reads as a font change to the eye). */
+.tiptap-content :is(h1, h2, h3, h4, h5, h6) :is(strong, b) {
+  font-weight: inherit;
+}
+
+/* Outer chrome: rounded container, mobile horizontal scroll. */
+.tiptap-content .tiptap-table-wrap {
+  margin: 1.75rem 0;
+  overflow-x: auto;
+  border: 1px solid var(--color-border);
+  border-radius: 0.75rem;
+  background: var(--color-card);
+}
+
+.tiptap-content .tiptap-table-wrap > table {
+  margin: 0;
+}
+
+.tiptap-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.75rem 0;
+  font-size: 0.9375rem;
+}
+
+.tiptap-content th,
+.tiptap-content td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  vertical-align: top;
+  border: 0;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.tiptap-content tr:last-child td,
+.tiptap-content tr:last-child th {
+  border-bottom: 0;
+}
+
+/* Header row: explicit <th> or first row when all cells are <td>. */
+.tiptap-content th,
+.tiptap-content tr:first-child td {
+  background: color-mix(in srgb, var(--color-muted) 55%, transparent);
+  color: var(--color-foreground);
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* First column emphasis on body rows. */
+.tiptap-content tr:not(:first-child) td:first-child {
+  font-weight: 600;
+  color: var(--color-foreground);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .tiptap-content tr:not(:first-child):hover td {
+    background: color-mix(in srgb, var(--color-muted) 25%, transparent);
+  }
+}
+
+.tiptap-content td p,
+.tiptap-content th p {
+  margin-bottom: 0;
+}
+
+/* Comparison table: winner column rendered as colored pills. */
+.tiptap-content table.comparison-table .winner-cell {
+  white-space: nowrap;
+  width: 1%;
+}
+
+.tiptap-content table.comparison-table .winner-cell p {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.2rem 0.7rem;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  font-weight: 600;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  letter-spacing: 0.01em;
+  /* Any winner reads as an indigo pill. A host colours one product with
+     [data-winner="name"], and tie and other below are the two states every
+     comparison has. */
+  background: color-mix(in srgb, var(--color-brand) 14%, transparent);
+  color: var(--color-brand);
+  border-color: color-mix(in srgb, var(--color-brand) 30%, transparent);
+}
+
+.tiptap-content table.comparison-table .winner-cell[data-winner="tie"] p {
+  background: transparent;
+  color: var(--color-muted-foreground);
+  border-color: var(--color-border);
+  border-style: dashed;
+}
+
+.tiptap-content table.comparison-table .winner-cell[data-winner="other"] p {
+  background: color-mix(in srgb, var(--color-muted) 60%, transparent);
+  color: var(--color-foreground);
+  border-color: var(--color-border);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .tiptap-content table.comparison-table tr:hover .winner-cell p {
+    background: color-mix(in srgb, var(--color-brand) 18%, var(--color-card));
+  }
+
+  .tiptap-content table.comparison-table tr:hover .winner-cell[data-winner="tie"] p {
+    background: transparent;
+  }
+
+  .tiptap-content table.comparison-table tr:hover .winner-cell[data-winner="other"] p {
+    background: color-mix(in srgb, var(--color-muted) 75%, transparent);
+  }
+}
+
+/* YouTube facade: aspect-ratio reserves the box so the click-to-load swap
+   (renderer.svelte) contributes zero CLS. Never render a bare <iframe> here. */
+.tiptap-content .tiptap-youtube {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  margin: 1.75rem 0;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  background: var(--color-muted);
+}
+
+.tiptap-content .tiptap-youtube-trigger {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+}
+
+.tiptap-content .tiptap-youtube-trigger:focus-visible {
+  outline: 3px solid var(--color-ring);
+  outline-offset: -3px;
+}
+
+.tiptap-content .tiptap-youtube-poster {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  margin: 0;
+  border-radius: 0;
+}
+
+.tiptap-content .tiptap-youtube-play {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 4rem;
+  height: 4rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, black 55%, transparent);
+  transition:
+    background-color 0.15s ease,
+    transform 0.15s ease;
+}
+
+.tiptap-content .tiptap-youtube-play::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 54%;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0.7rem 0 0.7rem 1.15rem;
+  border-color: transparent transparent transparent white;
+  transform: translate(-50%, -50%);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .tiptap-content .tiptap-youtube-trigger:hover .tiptap-youtube-play {
+    background: color-mix(in srgb, var(--color-brand) 85%, black);
+    transform: translate(-50%, -50%) scale(1.06);
+  }
+}
+
+.tiptap-content .tiptap-youtube-title {
+  position: absolute;
+  inset: auto 0 0 0;
+  padding: 2rem 1rem 0.875rem;
+  background: linear-gradient(to top, color-mix(in srgb, black 70%, transparent), transparent);
+  color: white;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-align: left;
+}
+
+.tiptap-content .tiptap-youtube iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tiptap-content .tiptap-youtube-play {
+    transition: none;
+  }
+}