feat: add bullet and ordered list support

CHANGELOG.md

@@ -21,9 +21,9 @@
 - ODT export via `tiptapToOdt()` from odf-kit
   - Filename derived from first H1/H2/H3 heading, fallback `document.odt`
 - Favicon (hand-coded SVG, no external assets)
+- Lists (ordered / unordered)
 
 ### Not yet implemented
-- Lists (ordered / unordered)
 - light/dark and auto appearance mode in a settings menu
 - ODT import / open existing file
 - font size

package-lock.json

@@ -10,10 +10,13 @@
       "dependencies": {
         "@tiptap/core": "^3.23.6",
         "@tiptap/extension-bold": "^3.23.6",
+        "@tiptap/extension-bullet-list": "^3.23.6",
         "@tiptap/extension-document": "^3.23.6",
         "@tiptap/extension-heading": "^3.23.6",
         "@tiptap/extension-history": "^3.23.6",
         "@tiptap/extension-italic": "^3.23.6",
+        "@tiptap/extension-list-item": "^3.23.6",
+        "@tiptap/extension-ordered-list": "^3.23.6",
         "@tiptap/extension-paragraph": "^3.23.6",
         "@tiptap/extension-placeholder": "^3.23.6",
         "@tiptap/extension-text": "^3.23.6",
@@ -480,6 +483,19 @@
         "@tiptap/core": "3.23.6"
       }
     },
+    "node_modules/@tiptap/extension-bullet-list": {
+      "version": "3.23.6",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-3.23.6.tgz",
+      "integrity": "sha512-RMRgfXZykr/13X8UBOwvpgysVOo9KchwqMoEbvqQSj4YFfU56iIn59C8sbxiQ1sKfeltUf0wH4fPc0I4iwKqAA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-list": "3.23.6"
+      }
+    },
     "node_modules/@tiptap/extension-document": {
       "version": "3.23.6",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-3.23.6.tgz",
@@ -532,6 +548,47 @@
         "@tiptap/core": "3.23.6"
       }
     },
+    "node_modules/@tiptap/extension-list": {
+      "version": "3.23.6",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list/-/extension-list-3.23.6.tgz",
+      "integrity": "sha512-z6vj9+Qht2sjdQkyyHcUpsC/yCIZqTrQiyHDhs/HGKrfvoANyAZGpqdNeKf1wSyjIso+27tQuIH5NDfk8ygyNw==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "3.23.6",
+        "@tiptap/pm": "3.23.6"
+      }
+    },
+    "node_modules/@tiptap/extension-list-item": {
+      "version": "3.23.6",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-3.23.6.tgz",
+      "integrity": "sha512-3zzyhdkUWcHVpXuvy6KiIwjh29rbH6gEDEqPQqHLrl1XGnO9pnShC7pSHctlCDjmcx3O4n9cd4QMtVBlUerbiA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-list": "3.23.6"
+      }
+    },
+    "node_modules/@tiptap/extension-ordered-list": {
+      "version": "3.23.6",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-3.23.6.tgz",
+      "integrity": "sha512-1m/wWB/ZtXcmG2vNdiUkCqsOgqv5vBjCv/mVaHhF9OvV+zQS8YDjoWE7zEuT/GgELdT77Xq8lHrn4nCDudB3/A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/extension-list": "3.23.6"
+      }
+    },
     "node_modules/@tiptap/extension-paragraph": {
       "version": "3.23.6",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-3.23.6.tgz",

package.json

@@ -18,10 +18,13 @@
   "dependencies": {
     "@tiptap/core": "^3.23.6",
     "@tiptap/extension-bold": "^3.23.6",
+    "@tiptap/extension-bullet-list": "^3.23.6",
     "@tiptap/extension-document": "^3.23.6",
     "@tiptap/extension-heading": "^3.23.6",
     "@tiptap/extension-history": "^3.23.6",
     "@tiptap/extension-italic": "^3.23.6",
+    "@tiptap/extension-list-item": "^3.23.6",
+    "@tiptap/extension-ordered-list": "^3.23.6",
     "@tiptap/extension-paragraph": "^3.23.6",
     "@tiptap/extension-placeholder": "^3.23.6",
     "@tiptap/extension-text": "^3.23.6",

src/lib/editor/Toolbar.svelte

@@ -10,6 +10,8 @@
   let isH1         = $derived(tick >= 0 && !!editor?.isActive('heading', { level: 1 }));
   let isH2         = $derived(tick >= 0 && !!editor?.isActive('heading', { level: 2 }));
   let isH3         = $derived(tick >= 0 && !!editor?.isActive('heading', { level: 3 }));
+  let isBulletList = $derived(tick >= 0 && !!editor?.isActive('bulletList'));
+  let isOrderedList= $derived(tick >= 0 && !!editor?.isActive('orderedList'));
   let canUndo      = $derived(tick >= 0 && !!editor?.can().undo());
   let canRedo      = $derived(tick >= 0 && !!editor?.can().redo());
 </script>
@@ -68,6 +70,25 @@
 
     <div class="toolbar-separator"></div>
 
+    <div class="toolbar-group">
+      <button
+        class:active={isBulletList}
+        onclick={() => editor?.chain().focus().toggleBulletList().run()}
+        title="Bullet list"
+      >
+        UL
+      </button>
+      <button
+        class:active={isOrderedList}
+        onclick={() => editor?.chain().focus().toggleOrderedList().run()}
+        title="Ordered list"
+      >
+        OL
+      </button>
+    </div>
+
+    <div class="toolbar-separator"></div>
+
     <div class="toolbar-group">
       <button
         onclick={() => editor?.chain().focus().undo().run()}

src/lib/editor/extensions.ts

@@ -5,6 +5,9 @@ import Bold from '@tiptap/extension-bold';
 import Italic from '@tiptap/extension-italic';
 import Underline from '@tiptap/extension-underline';
 import Heading from '@tiptap/extension-heading';
+import BulletList from '@tiptap/extension-bullet-list';
+import OrderedList from '@tiptap/extension-ordered-list';
+import ListItem from '@tiptap/extension-list-item';
 import History from '@tiptap/extension-history';
 import Placeholder from '@tiptap/extension-placeholder';
 
@@ -16,6 +19,9 @@ export const extensions = [
   Italic,
   Underline,
   Heading.configure({ levels: [1, 2, 3] }),
+  BulletList,
+  OrderedList,
+  ListItem,
   History,
   Placeholder.configure({ placeholder: 'Start typing…' }),
 ];

src/styles/editor.css

@@ -53,6 +53,16 @@
   font-size: 1.15rem;
 }
 
+.paper .tiptap ul,
+.paper .tiptap ol {
+  padding-left: 1.5rem;
+  margin-bottom: 0.75em;
+}
+
+.paper .tiptap li {
+  margin-bottom: 0.25em;
+}
+
 .paper .tiptap p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;