chore: bump version to 0.14.0

All isActive() and getAttributes() calls in the template were not
reading the tick prop, so Svelte 5 never re-evaluated them when the
editor state changed. Extracted isActive() and getAttrs() helpers
that consume tick to establish the reactive dependency.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   crumbs:
-    image: ghcr.io/bretzel-app/crumbs:0.11.1
+    image: ghcr.io/bretzel-app/crumbs:0.13.1
     container_name: crumbs
     ports:
       - "3000:3000"

docs/FEATURES.md

@@ -25,8 +25,8 @@
 - Ordered lists (`1. item`)
 - Code blocks (triple backtick)
 - Inline code (single backtick)
-- Tables
 - Links — insert, edit, and remove with URL input
+- Tables (insert, add/delete rows and columns)
 - Dividers (horizontal rules)
 - Text alignment (left, center, right, justify)
 - Line breaks

package.json

@@ -1,7 +1,7 @@
 {
   "name": "crumbs",
   "private": true,
-  "version": "0.12.0",
+  "version": "0.14.0",
   "type": "module",
   "license": "MIT",
   "author": "Bretzel (https://bretzel.app)",
@@ -34,6 +34,10 @@
     "@tiptap/core": "^3.20.1",
     "@tiptap/extension-link": "^3.20.1",
     "@tiptap/extension-placeholder": "^3.20.1",
+    "@tiptap/extension-table": "^3.20.1",
+    "@tiptap/extension-table-cell": "^3.20.1",
+    "@tiptap/extension-table-header": "^3.20.1",
+    "@tiptap/extension-table-row": "^3.20.1",
     "@tiptap/extension-task-item": "^3.20.1",
     "@tiptap/extension-task-list": "^3.20.1",
     "@tiptap/extension-text-align": "^3.20.1",

pnpm-lock.yaml

@@ -28,6 +28,18 @@ importers:
       '@tiptap/extension-placeholder':
         specifier: ^3.20.1
         version: 3.20.1(@tiptap/extensions@3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1))
+      '@tiptap/extension-table':
+        specifier: ^3.20.1
+        version: 3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1)
+      '@tiptap/extension-table-cell':
+        specifier: ^3.20.1
+        version: 3.20.1(@tiptap/extension-table@3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1))
+      '@tiptap/extension-table-header':
+        specifier: ^3.20.1
+        version: 3.20.1(@tiptap/extension-table@3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1))
+      '@tiptap/extension-table-row':
+        specifier: ^3.20.1
+        version: 3.20.1(@tiptap/extension-table@3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1))
       '@tiptap/extension-task-item':
         specifier: ^3.20.1
         version: 3.20.1(@tiptap/extension-list@3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1))
@@ -1508,6 +1520,27 @@ packages:
     peerDependencies:
       '@tiptap/core': ^3.20.1
 
+  '@tiptap/extension-table-cell@3.20.1':
+    resolution: {integrity: sha512-nSeboFey+MJqZuCQSbVUajQVaGiypeoUPiGd0CJdyfc0oPsBGGqp7XFJtw5HHEbDqEvSHvGNDoZDFsUTAxUyIg==}
+    peerDependencies:
+      '@tiptap/extension-table': ^3.20.1
+
+  '@tiptap/extension-table-header@3.20.1':
+    resolution: {integrity: sha512-Xsdgik3Bh5xWSkLaPR/6NDLZR5lgUDIN/yiZ7bLtfTsyGxqEvuW2Y9/j/XP3AfsZzGy2/SuA9bM9zxPcFQxwFA==}
+    peerDependencies:
+      '@tiptap/extension-table': ^3.20.1
+
+  '@tiptap/extension-table-row@3.20.1':
+    resolution: {integrity: sha512-uYE0SdY4J81wn/fg8Gum0TVSTTBekQhRGeSwDnRfBBd9JILBsLotBTt4ucM7JOUjrP9BjS+QFCT9EstAchPHfQ==}
+    peerDependencies:
+      '@tiptap/extension-table': ^3.20.1
+
+  '@tiptap/extension-table@3.20.1':
+    resolution: {integrity: sha512-y2o1De3P/FH80nst1D9pYSwtRvxF87WkNAYGurqCkZ6SjwFq1Ifeh9eY+o79R6SCwcfpvQRytCYd+Yw9o5XAtA==}
+    peerDependencies:
+      '@tiptap/core': ^3.20.1
+      '@tiptap/pm': ^3.20.1
+
   '@tiptap/extension-task-item@3.20.1':
     resolution: {integrity: sha512-ZdQld5Jzw/b/zl9TSA3KNkucmQhW5lHS/0YEKb+eFvxMwdHTKSpsTQzrfzbJixcdSqsuKJB+uUCwDDB+l0CRlA==}
     peerDependencies:
@@ -4811,6 +4844,23 @@ snapshots:
     dependencies:
       '@tiptap/core': 3.20.1(@tiptap/pm@3.20.1)
 
+  '@tiptap/extension-table-cell@3.20.1(@tiptap/extension-table@3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1))':
+    dependencies:
+      '@tiptap/extension-table': 3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1)
+
+  '@tiptap/extension-table-header@3.20.1(@tiptap/extension-table@3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1))':
+    dependencies:
+      '@tiptap/extension-table': 3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1)
+
+  '@tiptap/extension-table-row@3.20.1(@tiptap/extension-table@3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1))':
+    dependencies:
+      '@tiptap/extension-table': 3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1)
+
+  '@tiptap/extension-table@3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1)':
+    dependencies:
+      '@tiptap/core': 3.20.1(@tiptap/pm@3.20.1)
+      '@tiptap/pm': 3.20.1
+
   '@tiptap/extension-task-item@3.20.1(@tiptap/extension-list@3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1))':
     dependencies:
       '@tiptap/extension-list': 3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1)

src/app.css

@@ -72,3 +72,33 @@ body::before {
 .prose :where(a):not(:where([class~="not-prose"] *)):hover {
 	color: var(--primary-hover);
 }
+
+/* Table styles for TipTap editor */
+.tiptap table {
+	border-collapse: collapse;
+	width: 100%;
+	margin: 0.5rem 0;
+}
+
+.tiptap th,
+.tiptap td {
+	border: 1px solid var(--border-subtle);
+	padding: 0.375rem 0.625rem;
+	text-align: left;
+	vertical-align: top;
+	min-width: 4rem;
+}
+
+.tiptap th {
+	font-weight: 600;
+	background-color: color-mix(in srgb, var(--bg-base) 60%, transparent);
+}
+
+.tiptap td p,
+.tiptap th p {
+	margin: 0;
+}
+
+.tiptap .selectedCell {
+	background-color: color-mix(in srgb, var(--primary) 12%, transparent);
+}

src/lib/components/CollaboratorPopover.svelte

@@ -47,7 +47,7 @@
 
 	{#if showPopover}
 		<div
-			class="absolute left-0 bottom-full z-20 mb-1 min-w-[160px] rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-2 shadow-[var(--card-shadow)] animate-[fade-in_150ms_ease-out]"
+			class="absolute right-0 bottom-full z-20 mb-1 min-w-[160px] rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] p-2 shadow-[var(--card-shadow)] animate-[fade-in_150ms_ease-out]"
 			data-testid="collaborator-popover"
 		>
 			<p class="mb-1 text-xs font-semibold text-[var(--text-muted)]">Shared with</p>

src/lib/components/FormattingToolbar.svelte

@@ -23,7 +23,10 @@
 		AlignJustify,
 		Minus,
 		ChevronDown,
-		Ellipsis
+		Table2,
+		BetweenHorizontalEnd,
+		BetweenVerticalEnd,
+		RemoveFormatting
 	} from 'lucide-svelte';
 
 	interface Props {
@@ -35,6 +38,9 @@
 
 	function canUndo() { void tick; return editor?.can().chain().focus().undo().run() ?? false; }
 	function canRedo() { void tick; return editor?.can().chain().focus().redo().run() ?? false; }
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	function isActive(nameOrAttrs: any, attrs?: Record<string, any>): boolean { void tick; return editor?.isActive(nameOrAttrs, attrs) ?? false; }
+	function getAttrs(type: string) { void tick; return editor?.getAttributes(type) ?? {}; }
 
 	let openDropdown: string | null = $state(null);
 	let linkUrl: string = $state('');
@@ -110,13 +116,35 @@
 <svelte:document onpointerdown={handlePointerDown} onkeydown={handleKeydown} />
 
 <div
-	class="flex items-center gap-0.5 border-b border-[var(--border-subtle)] px-2 py-1"
+	class="flex flex-wrap items-center gap-0.5 border-b border-[var(--border-subtle)] px-2 py-1"
 	data-testid="formatting-toolbar"
 >
+	<!-- Undo/Redo -->
+	<button
+		onclick={() => editor?.chain().focus().undo().run()}
+		disabled={!canUndo()}
+		class={btnClass(false, !canUndo())}
+		title="Undo"
+		data-testid="format-undo"
+	>
+		<Undo2 size={iconSize} />
+	</button>
+	<button
+		onclick={() => editor?.chain().focus().redo().run()}
+		disabled={!canRedo()}
+		class={btnClass(false, !canRedo())}
+		title="Redo"
+		data-testid="format-redo"
+	>
+		<Redo2 size={iconSize} />
+	</button>
+
+	<div class="mx-1 h-4 w-px shrink-0 bg-[var(--border-subtle)]"></div>
+
 	<!-- Inline -->
 	<button
 		onclick={() => editor?.chain().focus().toggleBold().run()}
-		class={btnClass(editor?.isActive('bold') ?? false)}
+		class={btnClass(isActive('bold'))}
 		title="Bold (Ctrl+B)"
 		data-testid="format-bold"
 	>
@@ -124,7 +152,7 @@
 	</button>
 	<button
 		onclick={() => editor?.chain().focus().toggleItalic().run()}
-		class={btnClass(editor?.isActive('italic') ?? false)}
+		class={btnClass(isActive('italic'))}
 		title="Italic (Ctrl+I)"
 		data-testid="format-italic"
 	>
@@ -132,7 +160,7 @@
 	</button>
 	<button
 		onclick={() => editor?.chain().focus().toggleStrike().run()}
-		class={btnClass(editor?.isActive('strike') ?? false)}
+		class={btnClass(isActive('strike'))}
 		title="Strikethrough (Ctrl+Shift+X)"
 		data-testid="format-strikethrough"
 	>
@@ -140,7 +168,7 @@
 	</button>
 	<button
 		onclick={() => editor?.chain().focus().toggleUnderline().run()}
-		class={btnClass(editor?.isActive('underline') ?? false)}
+		class={btnClass(isActive('underline'))}
 		title="Underline (Ctrl+U)"
 		data-testid="format-underline"
 	>
@@ -153,7 +181,7 @@
 	<div class="relative" data-dropdown="heading">
 		<button
 			onclick={() => toggleDropdown('heading')}
-			class={dropdownBtnClass(editor?.isActive('heading') ?? false)}
+			class={dropdownBtnClass(isActive('heading'))}
 			title="Heading"
 			data-testid="format-heading"
 		>
@@ -164,7 +192,7 @@
 			<div class="absolute left-0 bottom-full z-50 mb-1 min-w-[150px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
 				<button
 					onclick={() => { editor?.chain().focus().toggleHeading({ level: 1 }).run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('heading', { level: 1 }) ?? false)}
+					class={dropdownItemClass(isActive('heading', { level: 1 }))}
 					data-testid="format-h1"
 				>
 					<span class="w-6 text-xs font-semibold text-[var(--text-muted)]">H1</span>
@@ -172,7 +200,7 @@
 				</button>
 				<button
 					onclick={() => { editor?.chain().focus().toggleHeading({ level: 2 }).run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('heading', { level: 2 }) ?? false)}
+					class={dropdownItemClass(isActive('heading', { level: 2 }))}
 					data-testid="format-h2"
 				>
 					<span class="w-6 text-xs font-semibold text-[var(--text-muted)]">H2</span>
@@ -180,7 +208,7 @@
 				</button>
 				<button
 					onclick={() => { editor?.chain().focus().toggleHeading({ level: 3 }).run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('heading', { level: 3 }) ?? false)}
+					class={dropdownItemClass(isActive('heading', { level: 3 }))}
 					data-testid="format-h3"
 				>
 					<span class="w-6 text-xs font-semibold text-[var(--text-muted)]">H3</span>
@@ -194,7 +222,7 @@
 	<div class="relative" data-dropdown="list">
 		<button
 			onclick={() => toggleDropdown('list')}
-			class={dropdownBtnClass((editor?.isActive('bulletList') || editor?.isActive('orderedList')) ?? false)}
+			class={dropdownBtnClass(isActive('bulletList') || isActive('orderedList'))}
 			title="Lists"
 			data-testid="format-list"
 		>
@@ -205,7 +233,7 @@
 			<div class="absolute left-0 bottom-full z-50 mb-1 min-w-[170px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
 				<button
 					onclick={() => { editor?.chain().focus().toggleBulletList().run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('bulletList') ?? false)}
+					class={dropdownItemClass(isActive('bulletList'))}
 					data-testid="format-bullet-list"
 				>
 					<List size={iconSize} />
@@ -213,7 +241,7 @@
 				</button>
 				<button
 					onclick={() => { editor?.chain().focus().toggleOrderedList().run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('orderedList') ?? false)}
+					class={dropdownItemClass(isActive('orderedList'))}
 					data-testid="format-ordered-list"
 				>
 					<ListOrdered size={iconSize} />
@@ -227,7 +255,7 @@
 	<div class="relative" data-dropdown="link">
 		<button
 			onclick={() => toggleDropdown('link')}
-			class={btnClass(editor?.isActive('link') ?? false)}
+			class={btnClass(isActive('link'))}
 			title="Insert link (Ctrl+K)"
 			data-testid="format-link"
 		>
@@ -259,7 +287,7 @@
 					<button
 						type="button"
 						onclick={openLink}
-						disabled={!editor?.getAttributes('link').href}
+						disabled={!getAttrs('link').href}
 						class="rounded p-1 text-[var(--text-muted)] hover:bg-[var(--border)]/5 hover:text-[var(--text)] disabled:opacity-30"
 						title="Open link"
 						data-testid="format-link-open"
@@ -269,7 +297,7 @@
 					<button
 						type="button"
 						onclick={removeLink}
-						disabled={!editor?.isActive('link')}
+						disabled={!isActive('link')}
 						class="rounded p-1 text-[var(--text-muted)] hover:bg-[var(--border)]/5 hover:text-red-500 disabled:opacity-30"
 						title="Remove link"
 						data-testid="format-unlink"
@@ -281,99 +309,123 @@
 		{/if}
 	</div>
 
-	<div class="mx-1 h-4 w-px shrink-0 bg-[var(--border-subtle)]"></div>
-
-	<!-- More dropdown -->
-	<div class="relative" data-dropdown="more">
+	<!-- Table dropdown -->
+	<div class="relative" data-dropdown="table">
 		<button
-			onclick={() => toggleDropdown('more')}
-			class={dropdownBtnClass(false)}
-			title="More options"
-			data-testid="format-more"
+			onclick={() => toggleDropdown('table')}
+			class={dropdownBtnClass(isActive('table'))}
+			title="Table"
+			data-testid="format-table"
 		>
-			<Ellipsis size={iconSize} />
+			<Table2 size={iconSize} />
+			<ChevronDown size={chevronSize} />
 		</button>
-		{#if openDropdown === 'more'}
-			<div class="absolute right-0 bottom-full z-50 mb-1 min-w-[170px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
+		{#if openDropdown === 'table'}
+			<div class="absolute left-0 bottom-full z-50 mb-1 min-w-[190px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
 				<button
-					onclick={() => { editor?.chain().focus().undo().run(); closeDropdowns(); }}
-					disabled={!canUndo()}
+					onclick={() => { editor?.chain().focus().insertTable({ rows: 3, cols: 3 }).run(); closeDropdowns(); }}
 					class={dropdownItemClass()}
-					data-testid="format-undo"
+					data-testid="format-table-insert"
 				>
-					<Undo2 size={iconSize} />
-					<span>Undo</span>
+					<Table2 size={iconSize} />
+					<span>Insert table</span>
 				</button>
-				<button
-					onclick={() => { editor?.chain().focus().redo().run(); closeDropdowns(); }}
-					disabled={!canRedo()}
-					class={dropdownItemClass()}
-					data-testid="format-redo"
-				>
-					<Redo2 size={iconSize} />
-					<span>Redo</span>
-				</button>
-				<div class="my-1 h-px bg-[var(--border-subtle)]"></div>
-				<button
-					onclick={() => { editor?.chain().focus().toggleCode().run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('code') ?? false)}
-					data-testid="format-code"
-				>
-					<Code size={iconSize} />
-					<span>Inline code</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().toggleBlockquote().run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('blockquote') ?? false)}
-					data-testid="format-blockquote"
-				>
-					<TextQuote size={iconSize} />
-					<span>Blockquote</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().toggleCodeBlock().run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive('codeBlock') ?? false)}
-					data-testid="format-code-block"
-				>
-					<CodeXml size={iconSize} />
-					<span>Code block</span>
-				</button>
-				<button
-					onclick={() => { editor?.chain().focus().setHorizontalRule().run(); closeDropdowns(); }}
-					class={dropdownItemClass()}
-					data-testid="format-hr"
-				>
-					<Minus size={iconSize} />
-					<span>Divider</span>
-				</button>
-				<div class="my-1 h-px bg-[var(--border-subtle)]"></div>
+				{#if isActive('table')}
+					<div class="my-1 h-px bg-[var(--border-subtle)]"></div>
+					<button
+						onclick={() => { editor?.chain().focus().addRowAfter().run(); closeDropdowns(); }}
+						class={dropdownItemClass()}
+						data-testid="format-table-add-row"
+					>
+						<BetweenHorizontalEnd size={iconSize} />
+						<span>Add row</span>
+					</button>
+					<button
+						onclick={() => { editor?.chain().focus().addColumnAfter().run(); closeDropdowns(); }}
+						class={dropdownItemClass()}
+						data-testid="format-table-add-col"
+					>
+						<BetweenVerticalEnd size={iconSize} />
+						<span>Add column</span>
+					</button>
+					<div class="my-1 h-px bg-[var(--border-subtle)]"></div>
+					<button
+						onclick={() => { editor?.chain().focus().deleteRow().run(); closeDropdowns(); }}
+						class={dropdownItemClass()}
+						data-testid="format-table-delete-row"
+					>
+						<Minus size={iconSize} />
+						<span>Delete row</span>
+					</button>
+					<button
+						onclick={() => { editor?.chain().focus().deleteColumn().run(); closeDropdowns(); }}
+						class={dropdownItemClass()}
+						data-testid="format-table-delete-col"
+					>
+						<Minus size={iconSize} />
+						<span>Delete column</span>
+					</button>
+					<button
+						onclick={() => { editor?.chain().focus().deleteTable().run(); closeDropdowns(); }}
+						class={`${dropdownItemClass()} text-[var(--destructive)]`}
+						data-testid="format-table-delete"
+					>
+						<RemoveFormatting size={iconSize} />
+						<span>Delete table</span>
+					</button>
+				{/if}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Alignment dropdown -->
+	<div class="relative" data-dropdown="align">
+		<button
+			onclick={() => toggleDropdown('align')}
+			class={dropdownBtnClass(isActive({ textAlign: 'center' }) || isActive({ textAlign: 'right' }) || isActive({ textAlign: 'justify' }))}
+			title="Text alignment"
+			data-testid="format-align"
+		>
+			{#if isActive({ textAlign: 'center' })}
+				<AlignCenter size={iconSize} />
+			{:else if isActive({ textAlign: 'right' })}
+				<AlignRight size={iconSize} />
+			{:else if isActive({ textAlign: 'justify' })}
+				<AlignJustify size={iconSize} />
+			{:else}
+				<AlignLeft size={iconSize} />
+			{/if}
+			<ChevronDown size={chevronSize} />
+		</button>
+		{#if openDropdown === 'align'}
+			<div class="absolute right-0 bottom-full z-50 mb-1 min-w-[160px] rounded-sm border border-[var(--border)] bg-[var(--bg-surface)] py-1">
 				<button
 					onclick={() => { editor?.chain().focus().setTextAlign('left').run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive({ textAlign: 'left' }) ?? false)}
+					class={dropdownItemClass(isActive({ textAlign: 'left' }))}
 					data-testid="format-align-left"
 				>
 					<AlignLeft size={iconSize} />
-					<span>Align left</span>
+					<span>Left</span>
 				</button>
 				<button
 					onclick={() => { editor?.chain().focus().setTextAlign('center').run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive({ textAlign: 'center' }) ?? false)}
+					class={dropdownItemClass(isActive({ textAlign: 'center' }))}
 					data-testid="format-align-center"
 				>
 					<AlignCenter size={iconSize} />
-					<span>Align center</span>
+					<span>Center</span>
 				</button>
 				<button
 					onclick={() => { editor?.chain().focus().setTextAlign('right').run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive({ textAlign: 'right' }) ?? false)}
+					class={dropdownItemClass(isActive({ textAlign: 'right' }))}
 					data-testid="format-align-right"
 				>
 					<AlignRight size={iconSize} />
-					<span>Align right</span>
+					<span>Right</span>
 				</button>
 				<button
 					onclick={() => { editor?.chain().focus().setTextAlign('justify').run(); closeDropdowns(); }}
-					class={dropdownItemClass(editor?.isActive({ textAlign: 'justify' }) ?? false)}
+					class={dropdownItemClass(isActive({ textAlign: 'justify' }))}
 					data-testid="format-align-justify"
 				>
 					<AlignJustify size={iconSize} />
@@ -382,4 +434,40 @@
 			</div>
 		{/if}
 	</div>
+
+	<div class="mx-1 h-4 w-px shrink-0 bg-[var(--border-subtle)]"></div>
+
+	<!-- Block-level formatting -->
+	<button
+		onclick={() => editor?.chain().focus().toggleCode().run()}
+		class={btnClass(isActive('code'))}
+		title="Inline code"
+		data-testid="format-code"
+	>
+		<Code size={iconSize} />
+	</button>
+	<button
+		onclick={() => editor?.chain().focus().toggleBlockquote().run()}
+		class={btnClass(isActive('blockquote'))}
+		title="Blockquote"
+		data-testid="format-blockquote"
+	>
+		<TextQuote size={iconSize} />
+	</button>
+	<button
+		onclick={() => editor?.chain().focus().toggleCodeBlock().run()}
+		class={btnClass(isActive('codeBlock'))}
+		title="Code block"
+		data-testid="format-code-block"
+	>
+		<CodeXml size={iconSize} />
+	</button>
+	<button
+		onclick={() => editor?.chain().focus().setHorizontalRule().run()}
+		class={btnClass()}
+		title="Divider"
+		data-testid="format-hr"
+	>
+		<Minus size={iconSize} />
+	</button>
 </div>

src/lib/components/NoteCard.svelte

@@ -2,7 +2,6 @@
 	import { NOTE_COLORS } from '$lib/utils/colors.js';
 	import { renderMarkdown } from '$lib/utils/markdown.js';
 	import { togglePin, trashNote, archiveNote, unarchiveNote, restoreNote, deleteNote, updateNote, leaveNote, currentFilter } from '$lib/stores/notes.js';
-	import TagChip from './TagChip.svelte';
 	import ImageLightbox from './ImageLightbox.svelte';
 	import CollaboratorPopover from './CollaboratorPopover.svelte';
 	import type { Note } from '$lib/types/index.js';
@@ -162,14 +161,6 @@
 		</div>
 	{/if}
 
-	{#if note.tags && note.tags.length > 0}
-		<div class="mt-2 flex flex-wrap gap-1">
-			{#each note.tags as tag}
-				<TagChip {tag} />
-			{/each}
-		</div>
-	{/if}
-
 	<!-- Action buttons - show on hover -->
 	<div class="absolute bottom-1 right-1 flex gap-1 max-md:opacity-100 md:opacity-0 transition-opacity md:group-hover:opacity-100">
 		{#if $currentFilter === 'trashed'}

src/lib/components/NoteEditor.svelte

@@ -201,7 +201,7 @@
 >
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
-		class="mx-4 flex w-full max-w-xl flex-col rounded-sm border border-[var(--border)] shadow-[var(--card-shadow)] animate-[pop-in_150ms_ease-out]"
+		class="mx-4 flex w-full max-w-xl md:max-w-2xl flex-col overflow-hidden rounded-sm border border-[var(--border)] shadow-[var(--card-shadow)] animate-[pop-in_150ms_ease-out]"
 		style={bgStyle}
 		onclick={(e) => e.stopPropagation()}
 		onkeydown={(e) => { e.stopPropagation(); handleKeydown(e); }}
@@ -214,6 +214,13 @@
 			bind:value={title}
 			class="w-full bg-transparent px-4 pt-4 text-lg font-semibold text-[var(--text)] outline-none placeholder:text-[var(--text-muted)]"
 			data-testid="note-title-input"
+			onkeydown={(e) => {
+				if (e.key === 'Enter') {
+					e.preventDefault();
+					if (textareaEl) textareaEl.focus();
+					else if (tiptapEditor) tiptapEditor.commands.focus('start');
+				}
+			}}
 		/>
 
 		<!-- Content -->

src/lib/components/NoteGrid.svelte

@@ -43,7 +43,7 @@
 		<div
 			class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
 			data-testid="note-grid"
-			use:dndzone={{ items: localItems, flipDurationMs, type: dndType, dropTargetStyle: {} }}
+			use:dndzone={{ items: localItems, flipDurationMs, type: dndType, dropTargetStyle: {}, delayTouchStart: 400 }}
 			onconsider={handleConsider}
 			onfinalize={handleFinalize}
 		>

src/lib/components/TiptapEditor.svelte

@@ -6,6 +6,10 @@
 	import Underline from '@tiptap/extension-underline';
 	import TextAlign from '@tiptap/extension-text-align';
 	import Placeholder from '@tiptap/extension-placeholder';
+	import { Table } from '@tiptap/extension-table';
+	import { TableRow } from '@tiptap/extension-table-row';
+	import { TableHeader } from '@tiptap/extension-table-header';
+	import { TableCell } from '@tiptap/extension-table-cell';
 	import { Markdown } from 'tiptap-markdown';
 
 	interface Props {
@@ -30,6 +34,10 @@
 				Underline,
 				TextAlign.configure({ types: ['heading', 'paragraph'] }),
 				Placeholder.configure({ placeholder }),
+				Table.configure({ resizable: false }),
+				TableRow,
+				TableHeader,
+				TableCell,
 				Markdown
 			],
 			content,

tests/e2e/organization.spec.ts

@@ -70,7 +70,7 @@ test.describe('Organization Features', () => {
 });
 
 test.describe('Note Sorting', () => {
-	test('Scenario: Notes can be sorted by last updated', async ({ authenticatedPage: page }) => {
+	test('Scenario: Most recently updated note appears first', async ({ authenticatedPage: page }) => {
 		// Given two notes exist with different update times
 		await page.getByTestId('new-note-btn').click();
 		await page.getByTestId('note-title-input').fill('Sort-First');
@@ -82,9 +82,6 @@ test.describe('Note Sorting', () => {
 		await page.getByTestId('close-editor-btn').click();
 		await expect(noteCard(page, 'Sort-Second')).toBeVisible();
 
-		// When the user selects "Updated" sort mode
-		await page.getByTestId('sort-updated').click();
-
 		// Then Sort-Second (most recently updated) appears before Sort-First
 		const sortFirst = noteCard(page, 'Sort-First');
 		const sortSecond = noteCard(page, 'Sort-Second');
@@ -92,40 +89,4 @@ test.describe('Note Sorting', () => {
 		const secondBox = await sortFirst.boundingBox();
 		expect(firstBox!.y).toBeLessThanOrEqual(secondBox!.y);
 	});
-
-	test('Scenario: Notes can be sorted by creation date', async ({ authenticatedPage: page }) => {
-		// Given two notes exist
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Created-Older');
-		await page.getByTestId('close-editor-btn').click();
-		await expect(noteCard(page, 'Created-Older')).toBeVisible();
-
-		await page.getByTestId('new-note-btn').click();
-		await page.getByTestId('note-title-input').fill('Created-Newer');
-		await page.getByTestId('close-editor-btn').click();
-		await expect(noteCard(page, 'Created-Newer')).toBeVisible();
-
-		// When the user selects "Created" sort mode
-		await page.getByTestId('sort-created').click();
-
-		// Then Created-Newer appears before Created-Older
-		const newer = noteCard(page, 'Created-Newer');
-		const older = noteCard(page, 'Created-Older');
-		const newerBox = await newer.boundingBox();
-		const olderBox = await older.boundingBox();
-		expect(newerBox!.y).toBeLessThanOrEqual(olderBox!.y);
-	});
-
-	test('Scenario: Sort preference persists across page reload', async ({ authenticatedPage: page }) => {
-		// Given the user selects "Created" sort mode
-		await page.getByTestId('sort-created').click();
-
-		// When the page is reloaded
-		await page.reload();
-		await page.waitForLoadState('networkidle');
-
-		// Then the "Created" sort mode is still active
-		const createdBtn = page.getByTestId('sort-created');
-		await expect(createdBtn).toHaveClass(/bg-\[var\(--primary\)\]/);
-	});
 });

website/index.html

@@ -253,7 +253,7 @@
 				<li><a href="https://github.com/bretzel-app/crumbs/blob/main/docs/DEPLOYMENT.md" target="_blank" rel="noopener">Docs</a></li>
 				<li><a href="https://github.com/bretzel-app/crumbs/blob/main/LICENSE" target="_blank" rel="noopener">License</a></li>
 			</ul>
-			<span class="footer-version">v0.12.0</span>
+			<span class="footer-version">v0.14.0</span>
 		</div>
 	</footer>