@heyramzi/ui 1.54.1 → 2.0.0

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;
+  }
+}

package/src/editor/editor-toolbar.svelte

@@ -0,0 +1,303 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import type { Editor } from "@tiptap/core";
+import { Button } from "../shadcn/button/index.js";
+import { Input } from "../shadcn/input/index.js";
+import {
+	TextB,
+	TextItalic,
+	TextStrikethrough,
+	LinkSimple,
+	LinkBreak,
+	ListBullets,
+	ListNumbers,
+	Quotes,
+	VideoCamera,
+} from "phosphor-svelte";
+
+// =========================
+// TYPES
+// =========================
+interface Props {
+	editor: Editor | null;
+	/** Bumped by the parent on every transaction, so active states re-read. */
+	tick: number;
+	preset: "full" | "notes";
+	onInsertYoutube: () => void;
+}
+
+// =========================
+// PROPS
+// =========================
+let { editor: editorProp, tick, preset, onInsertYoutube }: Props = $props();
+
+// =========================
+// STATE
+// =========================
+let linkUrl = $state("");
+let showLinkPopover = $state(false);
+let linkInputEl: HTMLInputElement | undefined = $state();
+
+// =========================
+// DERIVED
+// =========================
+let editor: Editor | null = $derived(tick >= 0 ? editorProp : null);
+
+// =========================
+// EFFECTS
+// =========================
+$effect(() => {
+	if (showLinkPopover && linkInputEl) {
+		linkInputEl.focus();
+	}
+});
+
+// =========================
+// FUNCTIONS
+// =========================
+function toggleLink() {
+	if (!editor) return;
+	if (editor.isActive("link")) {
+		editor.chain().focus().unsetLink().run();
+		return;
+	}
+	const previousUrl = editor.getAttributes("link").href;
+	linkUrl = previousUrl || "";
+	showLinkPopover = true;
+}
+
+function applyLink() {
+	if (!editor) return;
+	if (linkUrl.trim()) {
+		editor.chain().focus().setLink({ href: linkUrl.trim() }).run();
+	}
+	linkUrl = "";
+	showLinkPopover = false;
+}
+
+function cancelLink() {
+	linkUrl = "";
+	showLinkPopover = false;
+	editor?.chain().focus().run();
+}
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<div class="editor-toolbar" role="toolbar">
+	{#if editor}
+		{#if showLinkPopover}
+			<div class="link-popover">
+				<Input
+					bind:ref={linkInputEl}
+					type="url"
+					bind:value={linkUrl}
+					placeholder="Paste link..."
+					class="h-7 w-52 text-[0.8125rem]"
+					onkeydown={(e) => {
+						if (e.key === "Enter") { e.preventDefault(); applyLink(); }
+						if (e.key === "Escape") cancelLink();
+					}}
+				/>
+				<Button size="sm" icon onclick={applyLink} aria-label="Apply link">
+					<LinkSimple size={14} />
+				</Button>
+				<Button
+				variant="ghost"
+				size="sm"
+				icon
+				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
+				onclick={cancelLink}
+				title="Cancel"
+				>
+					&times;
+				</Button>
+			</div>
+		{:else}
+			<Button
+				variant="ghost"
+				size="sm"
+				icon
+				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand font-heading text-xs font-bold"
+				aria-pressed={editor.isActive("heading", { level: 1 })}
+				onclick={() => editor?.chain().focus().toggleHeading({ level: 1 }).run()}
+				title="Heading 1"
+			>
+				H1
+			</Button>
+			<Button
+				variant="ghost"
+				size="sm"
+				icon
+				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand font-heading text-xs font-bold"
+				aria-pressed={editor.isActive("heading", { level: 2 })}
+				onclick={() => editor?.chain().focus().toggleHeading({ level: 2 }).run()}
+				title="Heading 2"
+			>
+				H2
+			</Button>
+			<Button
+				variant="ghost"
+				size="sm"
+				icon
+				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand font-heading text-xs font-bold"
+				aria-pressed={editor.isActive("heading", { level: 3 })}
+				onclick={() => editor?.chain().focus().toggleHeading({ level: 3 }).run()}
+				title="Heading 3"
+			>
+				H3
+			</Button>
+
+			<div class="toolbar-divider"></div>
+
+			<Button
+				variant="ghost"
+				size="sm"
+				icon
+				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
+				aria-pressed={editor.isActive("bold")}
+				onclick={() => editor?.chain().focus().toggleBold().run()}
+				title="Bold (Cmd+B)"
+			>
+				<TextB size={15} weight="bold" />
+			</Button>
+			<Button
+				variant="ghost"
+				size="sm"
+				icon
+				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
+				aria-pressed={editor.isActive("italic")}
+				onclick={() => editor?.chain().focus().toggleItalic().run()}
+				title="Italic (Cmd+I)"
+			>
+				<TextItalic size={15} />
+			</Button>
+			<Button
+				variant="ghost"
+				size="sm"
+				icon
+				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
+				aria-pressed={editor.isActive("strike")}
+				onclick={() => editor?.chain().focus().toggleStrike().run()}
+				title="Strikethrough"
+			>
+				<TextStrikethrough size={15} />
+			</Button>
+
+			<div class="toolbar-divider"></div>
+
+			{#if editor.isActive("link")}
+				<Button
+				variant="ghost"
+				size="sm"
+				icon
+				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
+				aria-pressed={true}
+				onclick={() => editor?.chain().focus().unsetLink().run()}
+					title="Remove link"
+				>
+					<LinkBreak size={15} />
+				</Button>
+			{:else}
+				<Button
+				variant="ghost"
+				size="sm"
+				icon
+				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
+				onclick={toggleLink}
+					title="Add link (Cmd+K)">
+					<LinkSimple size={15} />
+				</Button>
+			{/if}
+
+			<div class="toolbar-divider"></div>
+
+			<Button
+				variant="ghost"
+				size="sm"
+				icon
+				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
+				aria-pressed={editor.isActive("bulletList")}
+				onclick={() => editor?.chain().focus().toggleBulletList().run()}
+				title="Bullet list"
+			>
+				<ListBullets size={15} />
+			</Button>
+			<Button
+				variant="ghost"
+				size="sm"
+				icon
+				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
+				aria-pressed={editor.isActive("orderedList")}
+				onclick={() => editor?.chain().focus().toggleOrderedList().run()}
+				title="Ordered list"
+			>
+				<ListNumbers size={15} />
+			</Button>
+			<Button
+				variant="ghost"
+				size="sm"
+				icon
+				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
+				aria-pressed={editor.isActive("blockquote")}
+				onclick={() => editor?.chain().focus().toggleBlockquote().run()}
+				title="Quote"
+			>
+				<Quotes size={15} />
+			</Button>
+
+			{#if preset === "full"}
+				<div class="toolbar-divider"></div>
+
+				<Button
+				variant="ghost"
+				size="sm"
+				icon
+				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
+				aria-pressed={editor.isActive("youtube")}
+				onclick={onInsertYoutube}
+					title="Insert YouTube video">
+					<VideoCamera size={15} />
+				</Button>
+			{/if}
+		{/if}
+	{/if}
+</div>
+
+<!-- =========================== -->
+<!-- STYLE -->
+<!-- =========================== -->
+<style>
+	/* ---- PERSISTENT TOOLBAR ---- */
+	.editor-toolbar {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 1px;
+		padding: 6px 8px;
+		border-bottom: 1px solid var(--color-border);
+		background: oklch(from var(--color-muted) l c h / 0.35);
+		border-top-left-radius: var(--radius-xl);
+		border-top-right-radius: var(--radius-xl);
+		min-height: 2.375rem;
+	}
+
+	.toolbar-divider {
+		width: 1px;
+		height: 1rem;
+		background: var(--color-border);
+		margin: 0 4px;
+		opacity: 0.6;
+	}
+
+	/* ---- LINK POPOVER ---- */
+	.link-popover {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		padding: 1px;
+	}
+</style>