From fc65393dc762d87321eac053a0bb8b5ec22c0d8d Mon Sep 17 00:00:00 2001 From: Marco Crapts Date: Sat, 29 Apr 2023 23:47:34 +0200 Subject: [PATCH] list styling --- package-lock.json | 65 +++++++++++++++++++++++++++++++++++ package.json | 3 ++ src/components/NoteEditor.vue | 24 ++++++++++++- src/style.css | 8 +++++ tailwind.config.js | 1 + 5 files changed, 100 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 8084fcb..31f1ffd 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 260952e..a72a941 100644 --- a/package.json +++ b/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", diff --git a/src/components/NoteEditor.vue b/src/components/NoteEditor.vue index 1c3e009..2648e67 100644 --- a/src/components/NoteEditor.vue +++ b/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', + ], }, } diff --git a/src/style.css b/src/style.css index db6f84d..5a6bc04 100644 --- a/src/style.css +++ b/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; +} diff --git a/tailwind.config.js b/tailwind.config.js index 4189af8..713b69f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -44,5 +44,6 @@ export default { }, }, ], + logs: false, }, }