feat(editor): task list

Author: codewec

app/components/editoro/MainContent.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { ListKeymap, TaskItem, TaskList } from '@tiptap/extension-list'
 import type { DirectoryTreeNode, EditorSuggestionItems, EditorToolbarItems, EditorViewMode, TreeNode, TreeNodeType } from '~/types/editoro'
 import { useEditoroMainContentMedia } from '~/composables/editor/useEditoroMainContentMedia'
 
@@ -69,6 +70,9 @@ const richEditorHandlers = computed(() => ({
     isActive: () => false
   }
 }))
+
+// Enable markdown task list (`- [ ]`) support in Nuxt UI editor.
+const editorExtensions = [TaskList, TaskItem, ListKeymap]
 </script>
 
 <template>
@@ -187,6 +191,7 @@ const richEditorHandlers = computed(() => ({
         :model-value="props.editorContent"
         class="editoro-editor"
         content-type="markdown"
+        :extensions="editorExtensions"
         :handlers="richEditorHandlers"
         :placeholder="t('main.editorPlaceholder')"
         @update:model-value="emit('updateEditorContent', String($event || ''))"
@@ -316,6 +321,42 @@ const richEditorHandlers = computed(() => ({
   padding-top: 1rem;
 }
 
+/* Force TaskList layout: checkbox and text must stay on the same row. */
+.editoro-editor :deep(.tiptap ul[data-type='taskList']) {
+  list-style: none;
+  padding-left: 0;
+}
+
+.editoro-editor :deep(.tiptap ul[data-type='taskList'] li),
+.editoro-editor :deep(.tiptap li[data-type='taskItem']) {
+  display: flex !important;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.editoro-editor :deep(.tiptap li[data-type='taskItem'] > label) {
+  margin: 0;
+  display: inline-flex !important;
+  align-items: center;
+  line-height: 1;
+  flex: 0 0 auto;
+}
+
+.editoro-editor :deep(.tiptap li[data-type='taskItem'] > label > input[type='checkbox']) {
+  margin: 0;
+}
+
+.editoro-editor :deep(.tiptap li[data-type='taskItem'] > div) {
+  display: block !important;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.editoro-editor :deep(.tiptap li[data-type='taskItem'] > div > p) {
+  margin: 0;
+  line-height: 1.5;
+}
+
 .editoro-raw {
   height: 100%;
   width: 100%;

app/constants/editoro.ts

@@ -22,6 +22,7 @@ export function createEditorToolbarItems(t: Translator) {
     [
       { kind: 'bulletList', icon: 'i-lucide-list', tooltip: { text: t('toolbar.bulletList') } },
       { kind: 'orderedList', icon: 'i-lucide-list-ordered', tooltip: { text: t('toolbar.orderedList') } },
+      { kind: 'taskList', icon: 'i-lucide-list-todo', tooltip: { text: t('toolbar.taskList') } },
       { kind: 'blockquote', icon: 'i-lucide-text-quote', tooltip: { text: t('toolbar.quote') } },
       { kind: 'codeBlock', icon: 'i-lucide-square-code', tooltip: { text: t('toolbar.codeBlock') } },
       { kind: 'horizontalRule', icon: 'i-lucide-minus', tooltip: { text: t('toolbar.divider') } }
@@ -47,7 +48,8 @@ export function createEditorSuggestionItems(t: Translator) {
     [
       { type: 'label', label: t('suggestion.lists') },
       { kind: 'bulletList', label: t('toolbar.bulletList'), icon: 'i-lucide-list' },
-      { kind: 'orderedList', label: t('toolbar.orderedList'), icon: 'i-lucide-list-ordered' }
+      { kind: 'orderedList', label: t('toolbar.orderedList'), icon: 'i-lucide-list-ordered' },
+      { kind: 'taskList', label: t('toolbar.taskList'), icon: 'i-lucide-list-todo' }
     ],
     [
       { type: 'label', label: t('suggestion.insert') },

i18n/locales/en.json

@@ -79,6 +79,7 @@
     "paragraph": "Paragraph",
     "bulletList": "Bullet list",
     "orderedList": "Ordered list",
+    "taskList": "Task list",
     "quote": "Quote",
     "codeBlock": "Code block",
     "divider": "Divider",
@@ -131,4 +132,4 @@
     "emptyFileName": "File name cannot be empty",
     "specifyFileOrFolder": "Specify file or folder name"
   }
-}
+}

i18n/locales/ru.json

@@ -79,6 +79,7 @@
     "paragraph": "Параграф",
     "bulletList": "Маркированный список",
     "orderedList": "Нумерованный список",
+    "taskList": "Список задач",
     "quote": "Цитата",
     "codeBlock": "Блок кода",
     "divider": "Разделитель",
@@ -131,4 +132,4 @@
     "emptyFileName": "Имя файла не может быть пустым",
     "specifyFileOrFolder": "Укажите имя файла или папки"
   }
-}
+}

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@iconify-json/lucide": "^1.2.87",
     "@pinia/nuxt": "^0.11.2",
+    "@tiptap/extension-list": "^3.17.1",
     "@tiptap/vue-3": "^3.17.1",
     "@nuxtjs/i18n": "^10.2.0",
     "@nuxt/ui": "^4.4.0",
@@ -32,4 +33,4 @@
     "vue-tsc": "^3.2.4"
   },
   "packageManager": "pnpm@10.28.2"
-}
+}