list styling

package-lock.json

@@ -8,10 +8,13 @@
       "name": "contexted-v3",
       "version": "0.0.0",
       "dependencies": {
+        "@ckeditor/ckeditor5-autoformat": "^37.1.0",
         "@ckeditor/ckeditor5-basic-styles": "^37.1.0",
         "@ckeditor/ckeditor5-editor-balloon": "^37.1.0",
         "@ckeditor/ckeditor5-essentials": "^37.1.0",
+        "@ckeditor/ckeditor5-heading": "^37.1.0",
         "@ckeditor/ckeditor5-link": "^37.1.0",
+        "@ckeditor/ckeditor5-list": "^37.1.0",
         "@ckeditor/ckeditor5-paragraph": "^37.1.0",
         "@ckeditor/ckeditor5-theme-lark": "^37.1.0",
         "@ckeditor/vite-plugin-ckeditor5": "^0.1.1",
@@ -67,6 +70,18 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@ckeditor/ckeditor5-autoformat": {
+      "version": "37.1.0",
+      "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-autoformat/-/ckeditor5-autoformat-37.1.0.tgz",
+      "integrity": "sha512-wZSuqsD6oz06fbE2zCn8PUDyax5YUDWFnB/26piLBu0HteRYFXJtIq6s2vA+zBbFfR3FL7362t+DP9VEHGigtw==",
+      "dependencies": {
+        "ckeditor5": "^37.1.0"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=5.7.1"
+      }
+    },
     "node_modules/@ckeditor/ckeditor5-basic-styles": {
       "version": "37.1.0",
       "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-basic-styles/-/ckeditor5-basic-styles-37.1.0.tgz",
@@ -161,6 +176,18 @@
         "npm": ">=5.7.1"
       }
     },
+    "node_modules/@ckeditor/ckeditor5-heading": {
+      "version": "37.1.0",
+      "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-heading/-/ckeditor5-heading-37.1.0.tgz",
+      "integrity": "sha512-fr2gOkiitJJKtJvunbitKEVwQoh26oBO7mbp/1BNSydtsOoP+B9Tl5S15WiPRAnc5pjIAT8MOJO5PQY/GDXs5Q==",
+      "dependencies": {
+        "ckeditor5": "^37.1.0"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=5.7.1"
+      }
+    },
     "node_modules/@ckeditor/ckeditor5-link": {
       "version": "37.1.0",
       "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-link/-/ckeditor5-link-37.1.0.tgz",
@@ -175,6 +202,19 @@
         "npm": ">=5.7.1"
       }
     },
+    "node_modules/@ckeditor/ckeditor5-list": {
+      "version": "37.1.0",
+      "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-list/-/ckeditor5-list-37.1.0.tgz",
+      "integrity": "sha512-hV1fNhpMkivlVuwRx0TVSEzPgciQa14uV/lbnhCmjT33WDrh8hAcYFK+kJx+9dB1OzNtyTlsMA/DxUJPdNr9TA==",
+      "dependencies": {
+        "@ckeditor/ckeditor5-ui": "^37.1.0",
+        "ckeditor5": "^37.1.0"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=5.7.1"
+      }
+    },
     "node_modules/@ckeditor/ckeditor5-paragraph": {
       "version": "37.1.0",
       "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-paragraph/-/ckeditor5-paragraph-37.1.0.tgz",
@@ -3610,6 +3650,14 @@
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.4.tgz",
       "integrity": "sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw=="
     },
+    "@ckeditor/ckeditor5-autoformat": {
+      "version": "37.1.0",
+      "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-autoformat/-/ckeditor5-autoformat-37.1.0.tgz",
+      "integrity": "sha512-wZSuqsD6oz06fbE2zCn8PUDyax5YUDWFnB/26piLBu0HteRYFXJtIq6s2vA+zBbFfR3FL7362t+DP9VEHGigtw==",
+      "requires": {
+        "ckeditor5": "^37.1.0"
+      }
+    },
     "@ckeditor/ckeditor5-basic-styles": {
       "version": "37.1.0",
       "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-basic-styles/-/ckeditor5-basic-styles-37.1.0.tgz",
@@ -3676,6 +3724,14 @@
         "ckeditor5": "^37.1.0"
       }
     },
+    "@ckeditor/ckeditor5-heading": {
+      "version": "37.1.0",
+      "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-heading/-/ckeditor5-heading-37.1.0.tgz",
+      "integrity": "sha512-fr2gOkiitJJKtJvunbitKEVwQoh26oBO7mbp/1BNSydtsOoP+B9Tl5S15WiPRAnc5pjIAT8MOJO5PQY/GDXs5Q==",
+      "requires": {
+        "ckeditor5": "^37.1.0"
+      }
+    },
     "@ckeditor/ckeditor5-link": {
       "version": "37.1.0",
       "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-link/-/ckeditor5-link-37.1.0.tgz",
@@ -3686,6 +3742,15 @@
         "lodash-es": "^4.17.15"
       }
     },
+    "@ckeditor/ckeditor5-list": {
+      "version": "37.1.0",
+      "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-list/-/ckeditor5-list-37.1.0.tgz",
+      "integrity": "sha512-hV1fNhpMkivlVuwRx0TVSEzPgciQa14uV/lbnhCmjT33WDrh8hAcYFK+kJx+9dB1OzNtyTlsMA/DxUJPdNr9TA==",
+      "requires": {
+        "@ckeditor/ckeditor5-ui": "^37.1.0",
+        "ckeditor5": "^37.1.0"
+      }
+    },
     "@ckeditor/ckeditor5-paragraph": {
       "version": "37.1.0",
       "resolved": "https://registry.npmjs.org/@ckeditor/ckeditor5-paragraph/-/ckeditor5-paragraph-37.1.0.tgz",

package.json

@@ -9,10 +9,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@ckeditor/ckeditor5-autoformat": "^37.1.0",
     "@ckeditor/ckeditor5-basic-styles": "^37.1.0",
     "@ckeditor/ckeditor5-editor-balloon": "^37.1.0",
     "@ckeditor/ckeditor5-essentials": "^37.1.0",
+    "@ckeditor/ckeditor5-heading": "^37.1.0",
     "@ckeditor/ckeditor5-link": "^37.1.0",
+    "@ckeditor/ckeditor5-list": "^37.1.0",
     "@ckeditor/ckeditor5-paragraph": "^37.1.0",
     "@ckeditor/ckeditor5-theme-lark": "^37.1.0",
     "@ckeditor/vite-plugin-ckeditor5": "^0.1.1",

src/components/NoteEditor.vue

@@ -4,8 +4,14 @@ import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor'
 import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials'
 import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold'
 import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic'
+import UnderlinePlugin from '@ckeditor/ckeditor5-basic-styles/src/underline'
+import StrikethroughPlugin from '@ckeditor/ckeditor5-basic-styles/src/strikethrough'
 import LinkPlugin from '@ckeditor/ckeditor5-link/src/link'
+import HeadingPlugin from '@ckeditor/ckeditor5-heading/src/heading'
 import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph'
+import ListPlugin from '@ckeditor/ckeditor5-list/src/list'
+import AutoformatPlugin from '@ckeditor/ckeditor5-autoformat/src/autoformat'
+
 import { mdToHtml } from '@/utils/markdown'
 import { getNoteById } from '@/composables/useNotes'
 
@@ -20,12 +26,28 @@ const editorConfig = {
     EssentialsPlugin,
     BoldPlugin,
     ItalicPlugin,
+    UnderlinePlugin,
+    StrikethroughPlugin,
     LinkPlugin,
+    HeadingPlugin,
     ParagraphPlugin,
+    ListPlugin,
+    AutoformatPlugin,
   ],
 
   toolbar: {
-    items: ['bold', 'italic', 'link', 'undo', 'redo'],
+    items: [
+      'bold',
+      'italic',
+      'underline',
+      'strikethrough',
+      'link',
+      'undo',
+      'redo',
+      'heading',
+      'bulletedList',
+      'numberedList',
+    ],
   },
 }
 </script>

src/style.css

@@ -15,3 +15,11 @@ body {
 .ck-body-wrapper {
   height: 0;
 }
+
+.ck-content ol {
+  @apply list-inside list-decimal;
+}
+
+.ck-content ul {
+  @apply list-inside list-disc;
+}

tailwind.config.js

@@ -44,5 +44,6 @@ export default {
         },
       },
     ],
+    logs: false,
   },
 }