Add footnotes feature to markup type

Author: lehni

.yarn/cache/tiptap-footnotes-npm-2.0.1-15e3d2d277-85735b10dd.zip

@@ -76,6 +76,7 @@
     "sortablejs": "^1.15.3",
     "tinycolor2": "^1.6.0",
     "tippy.js": "^6.3.7",
+    "tiptap-footnotes": "^2.0.1",
     "type-fest": "^4.26.1",
     "vue": "^3.5.12",
     "vue-multiselect": "^3.1.0",

packages/admin/package.json

@@ -52,6 +52,8 @@ import { HorizontalRule } from '@tiptap/extension-horizontal-rule'
 import { OrderedList } from '@tiptap/extension-ordered-list'
 import { BulletList } from '@tiptap/extension-bullet-list'
 import { ListItem } from '@tiptap/extension-list-item'
+// Footnotes:
+import { Footnotes, FootnoteReference, Footnote } from 'tiptap-footnotes'
 // TODO:
 // import { Image } from '@tiptap/extension-image'
 // import { Mention } from '@tiptap/extension-mention'
@@ -139,7 +141,10 @@ export default DitoTypeComponent.register('markup', {
     toolButtons() {
       return this.getButtons('tools', {
         undo: true,
-        redo: true
+        redo: true,
+        footnotes: {
+          command: 'addFootnote'
+        }
       })
     },
 
@@ -341,7 +346,10 @@ export default DitoTypeComponent.register('markup', {
       } = this.schema
       return [
         // Essentials:
-        Document,
+        tools.footnotes
+          ? Document.extend({ content: 'block+ footnotes?' })
+          : Document,
+
         Text,
         Paragraph, // button can be controlled, but node needs to be on.
 
@@ -364,6 +372,10 @@ export default DitoTypeComponent.register('markup', {
         (nodes.orderedList || nodes.bulletList) && ListItem,
         nodes.bulletList && BulletList,
         nodes.orderedList && OrderedList,
+
+        // Footnotes:
+        ...(tools.footnotes ? [Footnotes, Footnote, FootnoteReference] : []),
+
         // TODO:
         // nodes.todoList && TodoItem,
         // nodes.todoList && TodoList,
@@ -625,12 +637,23 @@ const LinkWithTitle = Link.extend({
 
   blockquote {
     border-left: 3px solid $color-lighter;
-    padding-left: 1rem;
+    padding-left: 1em;
     font-style: italic;
 
     p {
       margin: 0;
     }
   }
+
+  ol.footnotes {
+    margin-top: 1em;
+    padding: 1em 0;
+    list-style-type: decimal;
+    padding-left: 2em;
+
+    &:has(li) {
+      border-top: 1px solid $color-light;
+    }
+  }
 }
 </style>

packages/admin/src/types/DitoTypeMarkup.vue

@@ -1087,6 +1087,7 @@ __metadata:
     sortablejs: "npm:^1.15.3"
     tinycolor2: "npm:^1.6.0"
     tippy.js: "npm:^6.3.7"
+    tiptap-footnotes: "npm:^2.0.1"
     type-fest: "npm:^4.26.1"
     typescript: "npm:^5.6.3"
     vite: "npm:^5.4.10"
@@ -13390,6 +13391,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tiptap-footnotes@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "tiptap-footnotes@npm:2.0.1"
+  dependencies:
+    uuid: "npm:^9.0.1"
+  peerDependencies:
+    "@tiptap/core": ^2.4.0
+    "@tiptap/extension-list-item": ^2.4.0
+    "@tiptap/extension-ordered-list": ^2.4.0
+    "@tiptap/pm": ^2.4.0
+  checksum: 10/85735b10dd9b9827213eae8d4913ba36ef32d0c4d87d2efe548d44825fb20a1a3f9512cebdee87702d7b6b0908536de3bd4a0aaba84930adc425e72610e457c6
+  languageName: node
+  linkType: hard
+
 "tmp@npm:^0.0.33":
   version: 0.0.33
   resolution: "tmp@npm:0.0.33"