wip: tiptap editor
continuous-integration/drone/pr Build is failing Details

This commit is contained in:
Dominik Pschenitschni 2022-08-04 22:05:41 +02:00
parent 244c436202
commit dfde732bf8
Signed by: dpschen
GPG Key ID: B257AC0149F43A77
7 changed files with 1529 additions and 1 deletions

View File

@ -27,6 +27,21 @@
"@kyvg/vue3-notification": "2.6.1",
"@sentry/tracing": "7.19.0",
"@sentry/vue": "7.19.0",
"@tiptap/extension-character-count": "2.0.0-beta.202",
"@tiptap/extension-code-block-lowlight": "2.0.0-beta.202",
"@tiptap/extension-document": "2.0.0-beta.202",
"@tiptap/extension-highlight": "2.0.0-beta.202",
"@tiptap/extension-image": "2.0.0-beta.202",
"@tiptap/extension-link": "2.0.0-beta.202",
"@tiptap/extension-table": "2.0.0-beta.202",
"@tiptap/extension-table-cell": "2.0.0-beta.202",
"@tiptap/extension-table-header": "2.0.0-beta.202",
"@tiptap/extension-table-row": "2.0.0-beta.202",
"@tiptap/extension-task-item": "2.0.0-beta.202",
"@tiptap/extension-task-list": "2.0.0-beta.202",
"@tiptap/extension-typography": "2.0.0-beta.202",
"@tiptap/starter-kit": "2.0.0-beta.202",
"@tiptap/vue-3": "2.0.0-beta.202",
"@types/is-touch-device": "1.0.0",
"@types/lodash.clonedeep": "4.5.7",
"@types/sortablejs": "1.15.0",
@ -49,6 +64,7 @@
"is-touch-device": "1.0.1",
"lodash.clonedeep": "4.5.0",
"lodash.debounce": "4.0.8",
"lowlight": "2.7.0",
"marked": "4.2.2",
"minimist": "1.2.7",
"pinia": "2.0.24",

View File

@ -15,6 +15,21 @@ specifiers:
'@rushstack/eslint-patch': 1.2.0
'@sentry/tracing': 7.19.0
'@sentry/vue': 7.19.0
'@tiptap/extension-character-count': 2.0.0-beta.202
'@tiptap/extension-code-block-lowlight': 2.0.0-beta.202
'@tiptap/extension-document': 2.0.0-beta.202
'@tiptap/extension-highlight': 2.0.0-beta.202
'@tiptap/extension-image': 2.0.0-beta.202
'@tiptap/extension-link': 2.0.0-beta.202
'@tiptap/extension-table': 2.0.0-beta.202
'@tiptap/extension-table-cell': 2.0.0-beta.202
'@tiptap/extension-table-header': 2.0.0-beta.202
'@tiptap/extension-table-row': 2.0.0-beta.202
'@tiptap/extension-task-item': 2.0.0-beta.202
'@tiptap/extension-task-list': 2.0.0-beta.202
'@tiptap/extension-typography': 2.0.0-beta.202
'@tiptap/starter-kit': 2.0.0-beta.202
'@tiptap/vue-3': 2.0.0-beta.202
'@types/codemirror': 5.60.5
'@types/dompurify': 2.4.0
'@types/flexsearch': 0.7.3
@ -61,6 +76,7 @@ specifiers:
is-touch-device: 1.0.1
lodash.clonedeep: 4.5.0
lodash.debounce: 4.0.8
lowlight: 2.7.0
marked: 4.2.2
minimist: 1.2.7
netlify-cli: 12.1.1
@ -100,6 +116,21 @@ dependencies:
'@kyvg/vue3-notification': 2.6.1_vue@3.2.45
'@sentry/tracing': 7.19.0
'@sentry/vue': 7.19.0_vue@3.2.45
'@tiptap/extension-character-count': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-code-block-lowlight': 2.0.0-beta.202_wiwlrtctbu32iu2iz2dns6n2dq
'@tiptap/extension-document': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-highlight': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-image': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-link': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-table': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-table-cell': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-table-header': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-table-row': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-task-item': 2.0.0-beta.202_szpawxyhofo6dbqrvzvs6rsvva
'@tiptap/extension-task-list': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-typography': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/starter-kit': 2.0.0-beta.202
'@tiptap/vue-3': 2.0.0-beta.202_jtnhdqyx7clarsezcvtuxgjsq4
'@types/is-touch-device': 1.0.0
'@types/lodash.clonedeep': 4.5.7
'@types/sortablejs': 1.15.0
@ -122,6 +153,7 @@ dependencies:
is-touch-device: 1.0.1
lodash.clonedeep: 4.5.0
lodash.debounce: 4.0.8
lowlight: 2.7.0
marked: 4.2.2
minimist: 1.2.7
pinia: 2.0.24_mgnvym7yiazkylwwogi5r767ue
@ -192,6 +224,16 @@ packages:
cypress: 11.1.0
dev: true
/@_ueberdosis/prosemirror-tables/1.1.3:
resolution: {integrity: sha512-su3pbFi1DT89g6Cuh72TE0MWWKHmWgHcQJ3ODRkm6XfIppWaGpU49t02ur3sgJc7hUhfQXjB93aSkDgOmIii2w==}
dependencies:
prosemirror-keymap: 1.2.0
prosemirror-model: 1.18.2
prosemirror-state: 1.4.2
prosemirror-transform: 1.7.0
prosemirror-view: 1.29.1
dev: false
/@ampproject/remapping/2.1.1:
resolution: {integrity: sha512-Aolwjd7HSC2PyY0fDj/wA/EimQT4HfEnFYNp5s9CQlrdhyvWTtvZ5YzrUPu6R6/1jKiUlxu8bUhkdSnKHNAHMA==}
engines: {node: '>=6.0.0'}
@ -2711,6 +2753,10 @@ packages:
config-chain: 1.1.13
dev: true
/@popperjs/core/2.11.6:
resolution: {integrity: sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==}
dev: false
/@rollup/plugin-babel/5.3.0_pf2mys4p2khuj2gysypj3zzjia:
resolution: {integrity: sha512-9uIC8HZOnVLrLHxayq/PTzw+uS25E14KPUBh5ktF+18Mjo5yK0ToMMx6epY0uEgkjwJw0aBW4x2horYXh8juWw==}
engines: {node: '>= 10.0.0'}
@ -2933,6 +2979,339 @@ packages:
defer-to-connect: 2.0.1
dev: true
/@tiptap/core/2.0.0-beta.202:
resolution: {integrity: sha512-KnOcZBtkWoDT7EsVLiJr9DyBnQcKJQHI8kOhNIL0snUrksr25q8xBW05iYqw6cGAF7iu1cFM80VikfgefsZUpw==}
dependencies:
prosemirror-commands: 1.3.1
prosemirror-keymap: 1.2.0
prosemirror-model: 1.18.2
prosemirror-schema-list: 1.2.2
prosemirror-state: 1.4.2
prosemirror-transform: 1.7.0
prosemirror-view: 1.29.1
dev: false
/@tiptap/extension-blockquote/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-weLbMxM7VfI4hJsThw1+mB4jbQnVFizmzRlGU40LKMzEU5yIgIhuaomQ02Z7V0cRgfXsoKX9oc0BYGiO0Ra6/g==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.1
dependencies:
'@tiptap/core': 2.0.0-beta.202
dev: false
/@tiptap/extension-bold/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-AsfoChIleoSbY9gAuhbLF8BAEhHPrRKofmU09xJ62SBkL1rtgci8YzJYhL9leQCM4n1MQZEDeVf0ho75HeTPMA==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
dev: false
/@tiptap/extension-bubble-menu/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-Xa0BO5liIHitaxj70JbbmiC70Yg9+EcF9airfI32uOFNHwgEKyXVb5MRyQadRSmXnwPMPLVGWgf3Kg/5rnDqeg==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
prosemirror-state: 1.4.2
prosemirror-view: 1.29.1
tippy.js: 6.3.7
dev: false
/@tiptap/extension-bullet-list/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-Su+GvRGyW9FTBtcFjvNkkYwzDRo+1O2YTNOZi1Z/OkDqbg3g89kRue78avs0nHW7HEgdhCap+z8KtAPrie4eBg==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
dev: false
/@tiptap/extension-character-count/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-pKlksYfN/eAzIL819z/KU1yAFXxgNiioLWq8osJvHggFzmp2LEhp7erilnaeAfo5TbQ2P2KVwMPcRtt5939Fhw==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
prosemirror-model: 1.18.2
prosemirror-state: 1.4.2
dev: false
/@tiptap/extension-code-block-lowlight/2.0.0-beta.202_wiwlrtctbu32iu2iz2dns6n2dq:
resolution: {integrity: sha512-FnYBl0Bgir+KkSScK4bUKVfvmEb2Q0aeDQh53umCeCGpVIzyO6JqggNqtBh0RqnJDptCSoP72fq7lu8uhQtYhw==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
'@tiptap/extension-code-block': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
'@tiptap/extension-code-block': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
prosemirror-model: 1.18.2
prosemirror-state: 1.4.2
prosemirror-view: 1.29.1
dev: false
/@tiptap/extension-code-block/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-tfK9khIroGjsXQvk2K/9z1/UyQrB4+zghkjyK1xikzRmhgfOeqQzA0TDrFrz7ywFXmSFQ7GnnYAp+RW6r6wyUg==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
prosemirror-state: 1.4.2
dev: false
/@tiptap/extension-code/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-XwAr7ysSWJVZWHNXDaNBTPH1CTyVxHnPv/PiCWTGhf8Fkx7R7xW2QCUKx4ablwxFlTY7H8xGmCujaewUQBdO5w==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
dev: false
/@tiptap/extension-document/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-UsDSe93QtnuDrUo11wYCMtp7XlTIBvL5HNhx+enLRY7B8nUhX+d78u1BzspTpCkMYKcdwDmAGfIYMqqPViPEvA==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
dev: false
/@tiptap/extension-dropcursor/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-4Q3LnqvMnxP0KdX7tIgCoTCKg949rg351m0wguVb1bo4v9lA0zfJpSgqjQ1Xs2vaYVBwkFjLoqrfhTRn5mnopQ==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
prosemirror-dropcursor: 1.5.0
dev: false
/@tiptap/extension-floating-menu/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-09liirOFsPDFRLS2FiFdnfzyyOQwwyVXLzI6MzUOw5RZbOsGJ5kB8jZdkXvsAIiOs0YYsH3fyOyWirIwSRhBTQ==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
prosemirror-state: 1.4.2
prosemirror-view: 1.29.1
tippy.js: 6.3.7
dev: false
/@tiptap/extension-gapcursor/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-jOPMPPnTfVuc5YpFTcQM42/cg1J3+OeHitYb1/vBMpaNinVijuafsK14xDoVP8+sydKVgtBzYkfP/faN82I9iA==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
prosemirror-gapcursor: 1.3.1
dev: false
/@tiptap/extension-hard-break/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-Nr9BXeP+dXS5vLP/C2voTrhl+4YkDHBtPlc+5xm5NPBn04slTGSPO2lgV3YrMsfUOMNXHqeob1lq4qiLF4pybQ==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
dev: false
/@tiptap/extension-heading/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-sF271jSWHgtoJLDNFLS7eyUcUStl7mBDQNJIENWVI+lFu2Ax8GmO7AoB74Q6L5Zaw4h73L6TAvaafHIXurz7tA==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
dev: false
/@tiptap/extension-highlight/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-lRsXseZxOz/gATpqMZKIJk61+KeV35cr7UPoRrX4eoImSS0EJEYjjlfnBKeFxju9b1qUv3ui4oq4nvrZ/MDwnw==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
dev: false
/@tiptap/extension-history/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-BLwaOWmFHBQjOonojYHl1Po27IHxgjSAPw+ijMKtKzqa2msJRJevjC4tBaX5s/YrB7PQ2tFE7rfJED4HLjBm6w==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
prosemirror-history: 1.3.0
dev: false
/@tiptap/extension-horizontal-rule/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-ut2Im/TNQynnuqdoY9yOjMDUKmxn97ERVEpqcQSaIgqBuF6bjk60Wa13ob6oS2g6vqXxwWFrnQVz48A9TcF5FQ==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
prosemirror-state: 1.4.2
dev: false
/@tiptap/extension-image/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-aHPJMXuoMgToTYkGZsz2ue8gKzes+B92qb9lVRYlY9f+r/tC2K4q3HMtx6qvh8l4Dei5/yeV9TqliY79E9A5dg==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
dev: false
/@tiptap/extension-italic/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-vgSLy4KDp6AmnAHLHXe/nWeNbLnyUXxmf4U4+esebAV5Hu2F7LgceknFt9D8AGEtYUU+/fYKSeE2NGJgTQG9lA==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
dev: false
/@tiptap/extension-link/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-/9bZd43dMkzmo7SCCDtEscgdFKCat9yZAyAyg+PHYdhI8Lbqv5GfjxzBbx58v7jEP1eDKFnwTDFVwAsxCE9f0w==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
linkifyjs: 3.0.5
prosemirror-model: 1.18.2
prosemirror-state: 1.4.2
dev: false
/@tiptap/extension-list-item/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-15yAsO+CCM8ievdX4oxg8kMBVFqhzVAw7pU6E8KL76kIwWCIIyVW6hU3VZdglyBVnAG0ws5/DaZ4VRFtVPRDvg==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
dev: false
/@tiptap/extension-ordered-list/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-PpJn8EtS8MLZ4NN9R3crmrivbjTMHjuSE2Ab3Y9TdeR9x9DIF23O/EkunnkPUiBUx6sNADprEWJIQesgpakrtw==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
dev: false
/@tiptap/extension-paragraph/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-QI86DMUAz5froDJJXpbFV0I+iSFikjhQ8W5clYDbnrP/clRI/FYxklQ3oxSk4VzGBGB5EaBJf+jD7htLKb39UA==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
dev: false
/@tiptap/extension-strike/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-cs87UI/VTkmSfIwlHpm7nAPXok2bAQvxmNJ1y7UPzTATVl+ixP1F4aIkwiYk+X7rE/Sys+09PGg1Pr1shwUUkQ==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
dev: false
/@tiptap/extension-table-cell/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-Ypmcq7zaMSZ0VNKwDPINOsSzyuH+gSIw+FrXy6O1dzVHAo1gNFJ2pEG/ZhQ2RqpDTpGfJFD8tNDx8wjCCAVlxA==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
dev: false
/@tiptap/extension-table-header/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-/l0lz3Hmc+hikj+RfSW7F6B/jYV2dROGQnK1/EYjgbvOK0158ml1mB6/Dhm+BhldV73MI7eU8+3YLB9uhsPR4w==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
dev: false
/@tiptap/extension-table-row/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-IsHBT3lp//XSqcAWPIGWjPIKQ4okVaDJbwcElehlOo/rcRBeK0orT+c10T08PoOsozi4BeMYRo0nfA5tvrJMEw==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
dev: false
/@tiptap/extension-table/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-WMfXtDfx45FgU81WnfxGOSJbVoaDpe8hjuBJSGbwJj+Qj4HGhbK7/RbTtDrM8oqseHRzHuGWgNX+EfOUQppjdA==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@_ueberdosis/prosemirror-tables': 1.1.3
'@tiptap/core': 2.0.0-beta.202
prosemirror-model: 1.18.2
prosemirror-state: 1.4.2
prosemirror-view: 1.29.1
dev: false
/@tiptap/extension-task-item/2.0.0-beta.202_szpawxyhofo6dbqrvzvs6rsvva:
resolution: {integrity: sha512-yOd72ELIr/NK3wb4SjetFCsTW/YU66LMjUCv6RFxgbcPtTN3auoaCelyo1l7EZSZmWbovR7G2QOiG1fQmfNgMg==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
prosemirror-model: ^1.18.1
dependencies:
'@tiptap/core': 2.0.0-beta.202
prosemirror-model: 1.18.2
dev: false
/@tiptap/extension-task-list/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-0E7hL2+vVeBm1khONomqk4Lac/LcQfKYesLvzLhjHOEuC7t8wTt7sZxI407b87YnQ+l8dsZey0vrcmV2/Wi4YQ==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
dev: false
/@tiptap/extension-text/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-6UsfU9xvKTxHfZYxVJy5DSQ0ibnhC403KLRQ4ePwpJql0TotBx93/CBfPCVLFEwF86HNhf1fFUCx+j2wuwVxmA==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
dev: false
/@tiptap/extension-typography/2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu:
resolution: {integrity: sha512-aEw1BGei5tVUMw0ta2mqsSlrargZQrHb9sbUvy4SsHX/3VShZU1TPMBbdn9LYDblc6cdf4gGRPv6Lp/zgigFHQ==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
dependencies:
'@tiptap/core': 2.0.0-beta.202
dev: false
/@tiptap/starter-kit/2.0.0-beta.202:
resolution: {integrity: sha512-hmtHgSKMAYtPNA12pa6kPortaKtsz4D6a18KncP26cWkuIwSBZLANls8L7vBISAcbIKRrSizsmqDBoDrFqtQcg==}
dependencies:
'@tiptap/core': 2.0.0-beta.202
'@tiptap/extension-blockquote': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-bold': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-bullet-list': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-code': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-code-block': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-document': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-dropcursor': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-gapcursor': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-hard-break': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-heading': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-history': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-horizontal-rule': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-italic': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-list-item': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-ordered-list': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-paragraph': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-strike': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-text': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
dev: false
/@tiptap/vue-3/2.0.0-beta.202_jtnhdqyx7clarsezcvtuxgjsq4:
resolution: {integrity: sha512-2XGQO/cLxQSCC1HaJ6yhCe50Nj6NUmQ9mxG5Uk2GKgbIkaZ8uR/S0NzyEETqvXn7zoW1BxUdU2xniKBOTl++fw==}
peerDependencies:
'@tiptap/core': ^2.0.0-beta.193
vue: ^3.0.0
dependencies:
'@tiptap/core': 2.0.0-beta.202
'@tiptap/extension-bubble-menu': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
'@tiptap/extension-floating-menu': 2.0.0-beta.202_fosglmwb3u6jhi6bbjmnlbdsbu
prosemirror-state: 1.4.2
prosemirror-view: 1.29.1
vue: 3.2.45
dev: false
/@trysound/sax/0.2.0:
resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
engines: {node: '>=10.13.0'}
@ -3034,6 +3413,12 @@ packages:
'@types/node': 18.11.9
dev: true
/@types/hast/2.3.4:
resolution: {integrity: sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==}
dependencies:
'@types/unist': 2.0.6
dev: false
/@types/http-cache-semantics/4.0.1:
resolution: {integrity: sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==}
dev: true
@ -3186,6 +3571,10 @@ packages:
resolution: {integrity: sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==}
dev: true
/@types/unist/2.0.6:
resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
dev: false
/@types/web-bluetooth/0.0.16:
resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
dev: false
@ -6829,6 +7218,12 @@ packages:
reusify: 1.0.4
dev: true
/fault/2.0.1:
resolution: {integrity: sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==}
dependencies:
format: 0.2.2
dev: false
/fd-slicer/1.1.0:
resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
dependencies:
@ -7126,6 +7521,11 @@ packages:
mime-types: 2.1.34
dev: false
/format/0.2.2:
resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
engines: {node: '>=0.4.x'}
dev: false
/formdata-polyfill/4.0.10:
resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
engines: {node: '>=12.20.0'}
@ -8849,6 +9249,10 @@ packages:
resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
dev: true
/linkifyjs/3.0.5:
resolution: {integrity: sha512-1Y9XQH65eQKA9p2xtk+zxvnTeQBG7rdAXSkUG97DmuI/Xhji9uaUzaWxRj6rf9YC0v8KKHkxav7tnLX82Sz5Fg==}
dev: false
/listr-silent-renderer/1.1.1:
resolution: {integrity: sha512-L26cIFm7/oZeSNVhWB6faeorXhMg4HNlb/dS/7jHhr708jxlXrtrBWo4YUxZQkc6dGoxEAe6J/D3juTRBUzjtA==}
engines: {node: '>=4'}
@ -9123,6 +9527,14 @@ packages:
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
dev: true
/lowlight/2.7.0:
resolution: {integrity: sha512-RRdrHalFfjpxL91ITTX7KhJYH3QmX5bW9Uie2D2E5GPIR3XBYDYhScBjE291ewFZkStz/k2PN9KC+8deNLiI3Q==}
dependencies:
'@types/hast': 2.3.4
fault: 2.0.1
highlight.js: 11.6.0
dev: false
/lru-cache/6.0.0:
resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
engines: {node: '>=10'}
@ -10099,6 +10511,10 @@ packages:
wcwidth: 1.0.1
dev: true
/orderedmap/2.1.0:
resolution: {integrity: sha512-/pIFexOm6S70EPdznemIz3BQZoJ4VTFrhqzu0ACBqBgeLsLxq8e6Jim63ImIfwW/zAD1AlXpRMlOv3aghmo4dA==}
dev: false
/os-name/5.0.1:
resolution: {integrity: sha512-0EQpaHUHq7olp2/YFUr+0vZi9tMpDTblHGz+Ch5RntKxiRXOAY0JOz1UlxhSjMSksHvkm13eD6elJj3M8Ht/kw==}
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@ -11011,6 +11427,82 @@ packages:
asap: 2.0.6
dev: true
/prosemirror-commands/1.3.1:
resolution: {integrity: sha512-XTporPgoECkOQACVw0JTe3RZGi+fls3/byqt+tXwGTkD7qLuB4KdVrJamDMJf4kfKga3uB8hZ+kUUyZ5oWpnfg==}
dependencies:
prosemirror-model: 1.18.2
prosemirror-state: 1.4.2
prosemirror-transform: 1.7.0
dev: false
/prosemirror-dropcursor/1.5.0:
resolution: {integrity: sha512-vy7i77ddKyXlu8kKBB3nlxLBnsWyKUmQIPB5x8RkYNh01QNp/qqGmdd5yZefJs0s3rtv5r7Izfu2qbtr+tYAMQ==}
dependencies:
prosemirror-state: 1.4.2
prosemirror-transform: 1.7.0
prosemirror-view: 1.29.1
dev: false
/prosemirror-gapcursor/1.3.1:
resolution: {integrity: sha512-GKTeE7ZoMsx5uVfc51/ouwMFPq0o8YrZ7Hx4jTF4EeGbXxBveUV8CGv46mSHuBBeXGmvu50guoV2kSnOeZZnUA==}
dependencies:
prosemirror-keymap: 1.2.0
prosemirror-model: 1.18.2
prosemirror-state: 1.4.2
prosemirror-view: 1.29.1
dev: false
/prosemirror-history/1.3.0:
resolution: {integrity: sha512-qo/9Wn4B/Bq89/YD+eNWFbAytu6dmIM85EhID+fz9Jcl9+DfGEo8TTSrRhP15+fFEoaPqpHSxlvSzSEbmlxlUA==}
dependencies:
prosemirror-state: 1.4.2
prosemirror-transform: 1.7.0
rope-sequence: 1.3.3
dev: false
/prosemirror-keymap/1.2.0:
resolution: {integrity: sha512-TdSfu+YyLDd54ufN/ZeD1VtBRYpgZnTPnnbY+4R08DDgs84KrIPEPbJL8t1Lm2dkljFx6xeBE26YWH3aIzkPKg==}
dependencies:
prosemirror-state: 1.4.2
w3c-keyname: 2.2.6
dev: false
/prosemirror-model/1.18.2:
resolution: {integrity: sha512-uOQorJr20qVvqp2hs2RdWtWoidQxJ1ceE11bSmkf57XS989mdg1zKPJIp5HOHfY8/KjXPn3cLZqUYYwRrfBBPw==}
dependencies:
orderedmap: 2.1.0
dev: false
/prosemirror-schema-list/1.2.2:
resolution: {integrity: sha512-rd0pqSDp86p0MUMKG903g3I9VmElFkQpkZ2iOd3EOVg1vo5Cst51rAsoE+5IPy0LPXq64eGcCYlW1+JPNxOj2w==}
dependencies:
prosemirror-model: 1.18.2
prosemirror-state: 1.4.2
prosemirror-transform: 1.7.0
dev: false
/prosemirror-state/1.4.2:
resolution: {integrity: sha512-puuzLD2mz/oTdfgd8msFbe0A42j5eNudKAAPDB0+QJRw8cO1ygjLmhLrg9RvDpf87Dkd6D4t93qdef00KKNacQ==}
dependencies:
prosemirror-model: 1.18.2
prosemirror-transform: 1.7.0
prosemirror-view: 1.29.1
dev: false
/prosemirror-transform/1.7.0:
resolution: {integrity: sha512-O4T697Cqilw06Zvc3Wm+e237R6eZtJL/xGMliCi+Uo8VL6qHk6afz1qq0zNjT3eZMuYwnP8ZS0+YxX/tfcE9TQ==}
dependencies:
prosemirror-model: 1.18.2
dev: false
/prosemirror-view/1.29.1:
resolution: {integrity: sha512-OhujVZSDsh0l0PyHNdfaBj6DBkbhYaCfbaxmTeFrMKd/eWS+G6IC+OAbmR9IsLC8Se1HSbphMaXnsXjupHL3UQ==}
dependencies:
prosemirror-model: 1.18.2
prosemirror-state: 1.4.2
prosemirror-transform: 1.7.0
dev: false
/proto-list/1.2.4:
resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
dev: true
@ -11552,6 +12044,10 @@ packages:
fsevents: 2.3.2
dev: true
/rope-sequence/1.3.3:
resolution: {integrity: sha512-85aZYCxweiD5J8yTEbw+E6A27zSnLPNDL0WfPdw3YYodq7WjnTKo0q4dtyQ2gz23iPT8Q9CUyJtAaUNcTxRf5Q==}
dev: false
/run-async/2.4.1:
resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
engines: {node: '>=0.12.0'}
@ -12494,6 +12990,12 @@ packages:
engines: {node: '>=14.0.0'}
dev: true
/tippy.js/6.3.7:
resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
dependencies:
'@popperjs/core': 2.11.6
dev: false
/tmp-promise/3.0.3:
resolution: {integrity: sha512-RwM7MoPojPxsOBYnyd2hy0bxtIlVrihNs9pj5SUvY8Zz1sQcQG2tG1hSr8PDxfgEB8RNKDhqbIlroIarSNDNsQ==}
dependencies:
@ -13253,6 +13755,10 @@ packages:
'@vue/server-renderer': 3.2.45_vue@3.2.45
'@vue/shared': 3.2.45
/w3c-keyname/2.2.6:
resolution: {integrity: sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg==}
dev: false
/wait-on/6.0.1:
resolution: {integrity: sha512-zht+KASY3usTY5u2LgaNqn/Cd8MukxLGjdcZxT2ns5QzDmTFc4XoWBgC+C/na+sMRZTuVygQoMYwdcVjHnYIVw==}
engines: {node: '>=10.0.0'}

View File

@ -0,0 +1,46 @@
<template>
<node-view-wrapper class="code-block">
<select contenteditable="false" v-model="selectedLanguage">
<option :value="null">
auto
</option>
<option disabled>
</option>
<option v-for="(language, index) in languages" :value="language" :key="index">
{{ language }}
</option>
</select>
<pre><code><node-view-content /></code></pre>
</node-view-wrapper>
</template>
<script setup lang="ts">
import {ref, computed} from 'vue'
import {NodeViewContent, nodeViewProps, NodeViewWrapper} from '@tiptap/vue-3'
const props = defineProps(nodeViewProps)
const languages = ref(props.extension.options.lowlight.listLanguages())
const selectedLanguage = computed({
get() {
return props.node.attrs.language
},
set(language) {
props.updateAttributes({ language })
},
})
</script>
<style lang="scss">
.code-block {
position: relative;
select {
position: absolute;
top: 0.5rem;
right: 0.5rem;
}
}
</style>

View File

@ -0,0 +1,495 @@
<template>
<div class="editor-toolbar">
<div class="editor-toolbar__segment">
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
title="h1"
>
<span class="icon"> <icon :icon="['fa', 'fa-header']" /> </span>1
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
title="h2"
>
<span class="icon"> <icon :icon="['fa', 'fa-header']" /> </span>2
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
:class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
title="h3"
>
<span class="icon"> <icon :icon="['fa', 'fa-header']" /> </span>3
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
:class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
title="h4"
>
<span class="icon"> <icon :icon="['fa', 'fa-header']" /> </span>4
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
:class="{ 'is-active': editor.isActive('heading', { level: 5 }) }"
title="h5"
>
<span class="icon"> <icon :icon="['fa', 'fa-header']" /> </span>5
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
:class="{ 'is-active': editor.isActive('heading', { level: 6 }) }"
title="h6"
>
<span class="icon"> <icon :icon="['fa', 'fa-header']" /> </span>6
</BaseButton>
</div>
<div class="editor-toolbar__segment">
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().toggleBold().run()"
:class="{ 'is-active': editor.isActive('bold') }"
title="bold"
>
<span class="icon">
<icon :icon="['fa', 'fa-bold']" />
</span>
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().toggleItalic().run()"
:class="{ 'is-active': editor.isActive('italic') }"
title="italic"
>
<span class="icon">
<icon :icon="['fa', 'fa-italic']" />
</span>
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().toggleStrike().run()"
:class="{ 'is-active': editor.isActive('strike') }"
title="strike"
>
<span class="icon">
<icon :icon="['fa', 'fa-strikethrough']" />
</span>
</BaseButton>
</div>
<div class="editor-toolbar__segment">
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().toggleCode().run()"
:class="{ 'is-active': editor.isActive('code') }"
title="code"
>
<span class="icon">
<icon :icon="['fa', 'fa-code']" />
</span>
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().toggleCodeBlock().run()"
:class="{ 'is-active': editor.isActive('codeBlock') }"
title="code block"
>
<span class="icon">
<icon :icon="['fa', 'fa-code']" />
</span>
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().toggleBlockquote().run()"
:class="{ 'is-active': editor.isActive('blockquote') }"
title="quote"
>
<span class="icon">
<icon :icon="['fa', 'fa-quote-right']" />
</span>
</BaseButton>
</div>
<div class="editor-toolbar__segment">
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().toggleBulletList().run()"
:class="{ 'is-active': editor.isActive('bulletList') }"
title="bullet list"
>
<span class="icon">
<icon :icon="['fa', 'fa-list-ol']" />
</span>
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().toggleOrderedList().run()"
:class="{ 'is-active': editor.isActive('orderedList') }"
title="ordered list"
>
<span class="icon">
<icon :icon="['fa', 'fa-list-ul']" />
</span>
</BaseButton>
</div>
<div class="editor-toolbar__segment">
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().unsetAllMarks().run()"
>
clear marks
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().clearNodes().run()"
>
clear nodes
</BaseButton>
</div>
<div class="editor-toolbar__segment">
<BaseButton
class="editor-toolbar__button"
@click="setLink"
:class="{ 'is-active': editor.isActive('link') }"
title="set link"
>
<span class="icon">
<icon :icon="['fa', 'fa-link']" />
</span>
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().unsetLink().run()"
:disabled="!editor.isActive('link')"
title="unset link"
>
<span class="icon">
<icon :icon="['fa', 'fa-unlink']" />
</span>
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().toggleTaskList().run()"
:class="{ 'is-active': editor.isActive('taskList') }"
title="task list"
>
<span class="icon">
<icon :icon="['fa', ' fa-list-check']" />
</span>
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().setParagraph().run()"
:class="{ 'is-active': editor.isActive('paragraph') }"
title="paragraph"
>
<span class="icon">
<icon :icon="['fa', 'fa-paragraph']" />
</span>
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().setHorizontalRule().run()"
>
horizontal rule
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().setHardBreak().run()"
>
hard break
</BaseButton>
</div>
<div class="editor-toolbar__segment">
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().undo().run()"
title="undo"
>
<span class="icon">
<icon :icon="['fa', 'fa-undo']" />
</span>
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().redo().run()"
title="redo"
>
<span class="icon">
<icon :icon="['fa', 'fa-redo']" />
</span>
</BaseButton>
</div>
<div class="editor-toolbar__segment">
<!-- table -->
<BaseButton
class="editor-toolbar__button"
@click="toggleTableMode"
:class="{ 'is-active': editor.isActive('table') }"
title="table"
>
<span class="icon">
<icon :icon="['fa', 'fa-table']" />
</span>
</BaseButton>
<div v-if="tableMode">
<BaseButton
class="editor-toolbar__button"
@click="
editor
.chain()
.focus()
.insertTable({ rows: 3, cols: 3, withHeaderRow: true })
.run()
"
>
insertTable
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().addColumnBefore().run()"
:disabled="!editor.can().addColumnBefore()"
>
addColumnBefore
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().addColumnAfter().run()"
:disabled="!editor.can().addColumnAfter()"
>
addColumnAfter
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().deleteColumn().run()"
:disabled="!editor.can().deleteColumn()"
>
deleteColumn
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().addRowBefore().run()"
:disabled="!editor.can().addRowBefore()"
>
addRowBefore
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().addRowAfter().run()"
:disabled="!editor.can().addRowAfter()"
>
addRowAfter
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().deleteRow().run()"
:disabled="!editor.can().deleteRow()"
>
deleteRow
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().deleteTable().run()"
:disabled="!editor.can().deleteTable()"
>
deleteTable
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().mergeCells().run()"
:disabled="!editor.can().mergeCells()"
>
mergeCells
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().splitCell().run()"
:disabled="!editor.can().splitCell()"
>
splitCell
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().toggleHeaderColumn().run()"
:disabled="!editor.can().toggleHeaderColumn()"
>
toggleHeaderColumn
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().toggleHeaderRow().run()"
:disabled="!editor.can().toggleHeaderRow()"
>
toggleHeaderRow
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().toggleHeaderCell().run()"
:disabled="!editor.can().toggleHeaderCell()"
>
toggleHeaderCell
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().mergeOrSplit().run()"
:disabled="!editor.can().mergeOrSplit()"
>
mergeOrSplit
</BaseButton>
<!-- <BaseButton
class="editor-toolbar__button"
@click="
editor
.chain()
.focus()
.setCellAttribute('backgroundColor', '#FAF594')
.run()
"
:disabled="
!editor.can().setCellAttribute('backgroundColor', '#FAF594')
"
>
setCellAttribute
</BaseButton> -->
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().fixTables().run()"
:disabled="!editor.can().fixTables()"
>
fixTables
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().goToNextCell().run()"
:disabled="!editor.can().goToNextCell()"
>
goToNextCell
</BaseButton>
<BaseButton
class="editor-toolbar__button"
@click="editor.chain().focus().goToPreviousCell().run()"
:disabled="!editor.can().goToPreviousCell()"
>
goToPreviousCell
</BaseButton>
</div>
</div>
<div class="editor-toolbar__segment">
<BaseButton class="editor-toolbar__button" @click="addImage" title="Add image from URL">
<span class="icon">
<icon :icon="['fa', 'fa-file-image']" />
</span>
</BaseButton>
</div>
</div>
</template>
<script setup lang="ts">
import {ref, type PropType} from 'vue'
import {Editor} from '@tiptap/vue-3'
import BaseButton from '@/components/base/BaseButton.vue'
const props = defineProps({
editor: {
default: null,
type: Editor as PropType<Editor>,
},
})
const tableMode = ref(false)
function toggleTableMode() {
tableMode.value = !tableMode.value
}
function addImage() {
const url = window.prompt('URL')
if (url) {
props.editor?.chain().focus().setImage({ src: url }).run()
}
}
function setLink() {
const previousUrl = props.editor.getAttributes('link').href
const url = window.prompt('URL', previousUrl)
// cancelled
if (url === null) {
return
}
// empty
if (url === '') {
props.editor.chain().focus().extendMarkRange('link').unsetLink().run()
return
}
// update link
props.editor
.chain()
.focus()
.extendMarkRange('link')
.setLink({ href: url, target: '_blank' })
.run()
}
</script>
<style lang="scss" scoped>
.editor-toolbar {
background: var(--grey-50);
border: 1px solid var(--grey-200);
border-bottom: none;
// position: relative;
user-select: none;
padding: 9px 10px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
display: flex;
flex-wrap: wrap;
> * + * {
// .editor-toolbar i.separator {
border--left-color: var(--grey-200) !important;
// }
// .editor-toolbar i.separator {
// display: inline-block;
// width: 0;
border-left: 1px solid var(--grey-200);
// border-right: 1px solid #fff;
// color: transparent;
// text-indent: -10px;
margin-left: 6px;
padding-left: 6px;
// }
}
}
.editor-toolbar__button {
color: var(--grey-700);
// width: 30px;
height: 30px;
border-radius: 3px;
border: 1px solid transparent;
&:hover {
background: var(--grey-200);
border-color: var(--grey-300);
}
}
</style>

View File

@ -0,0 +1,430 @@
<template>
<div class="tiptap">
<EditorToolbar v-if="editor" :editor="editor" />
<editor-content class="tiptap__editor" :editor="editor" />
</div>
</template>
<script lang="ts">
export const TIPTAP_TEXT_VALUE_PREFIX = '<!-- VIKUNJA TIPTAP -->\n'
const tiptapRegex = new RegExp(`${TIPTAP_TEXT_VALUE_PREFIX}`, 's')
</script>
<script setup lang="ts">
import {ref, watch, computed, onBeforeUnmount, type PropType} from 'vue'
import {marked} from 'marked'
import {refDebounced} from '@vueuse/core'
import EditorToolbar from './EditorToolbar.vue'
import Link from '@tiptap/extension-link'
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
import Table from '@tiptap/extension-table'
import TableCell from '@tiptap/extension-table-cell'
import TableHeader from '@tiptap/extension-table-header'
import TableRow from '@tiptap/extension-table-row'
import Highlight from '@tiptap/extension-highlight'
import Typography from '@tiptap/extension-typography'
import Document from '@tiptap/extension-document'
import Image from '@tiptap/extension-image'
// import Text from '@tiptap/extension-text'
import TaskItem from '@tiptap/extension-task-item'
import TaskList from '@tiptap/extension-task-list'
import CharacterCount from '@tiptap/extension-character-count'
import StarterKit from '@tiptap/starter-kit'
import {EditorContent, useEditor, VueNodeViewRenderer} from '@tiptap/vue-3'
// load all highlight.js languages
import {lowlight} from 'lowlight'
import CodeBlock from './CodeBlock.vue'
// const CustomDocument = Document.extend({
// content: 'taskList',
// })
const CustomTaskItem = TaskItem.extend({
content: 'inline*',
})
const CustomTableCell = TableCell.extend({
addAttributes() {
return {
// extend the existing attributes
...this.parent?.(),
// and add a new one
backgroundColor: {
default: null,
parseHTML: (element: HTMLElement) => element.getAttribute('data-background-color'),
renderHTML: (attributes) => {
return {
'data-background-color': attributes.backgroundColor,
style: `background-color: ${attributes.backgroundColor}`,
}
},
},
}
},
})
const props = defineProps({
modelValue: {
type: String as PropType<string>,
default: '',
},
})
const emit = defineEmits(['update:modelValue', 'change'])
const inputHTML = ref('')
watch(
() => props.modelValue,
() => {
if (!props.modelValue.startsWith(TIPTAP_TEXT_VALUE_PREFIX)) {
// convert Markdown to HTML
return TIPTAP_TEXT_VALUE_PREFIX + marked.parse(props.modelValue)
}
return props.modelValue.replace(tiptapRegex, '')
},
{ immediate: true },
)
const debouncedInputHTML = refDebounced(inputHTML, 1000)
watch(debouncedInputHTML, (value) => {
emit('update:modelValue', TIPTAP_TEXT_VALUE_PREFIX + value)
emit('change', TIPTAP_TEXT_VALUE_PREFIX + value) // FIXME: remove this
})
const editor = useEditor({
content: inputHTML.value,
extensions: [
StarterKit,
Highlight,
Typography,
Link.configure({
openOnClick: false,
validate: (href: string) => /^https?:\/\//.test(href),
}),
// Table.configure({
// resizable: true,
// }),
// TableRow,
// TableHeader,
// // Default TableCell
// // TableCell,
// // Custom TableCell with backgroundColor attribute
// CustomTableCell,
// // start
// Document,
// // Text,
// Image,
// // Tasks
// CustomDocument,
TaskList,
CustomTaskItem,
// // character count
// CharacterCount,
// CodeBlockLowlight.extend({
// addNodeView() {
// return VueNodeViewRenderer(CodeBlock)
// },
// }).configure({ lowlight }),
],
onUpdate: () => {
// HTML
inputHTML.value = editor.value!.getHTML()
// JSON
// this.$emit('update:modelValue', this.editor.getJSON())
},
})
watch(inputHTML, (value) => {
if (!editor.value) return
// HTML
const isSame = editor.value.getHTML() === value
// JSON
// const isSame = JSON.stringify(editor.value.getJSON()) === JSON.stringify(value)
if (isSame) {
return
}
editor.value.commands.setContent(value, false)
})
onBeforeUnmount(() => editor.value?.destroy())
</script>
<style lang="scss">
.tiptap__editor {
// box-sizing: border-box;
// height: auto;
min-height: 150px;
border: 1px solid #ddd;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
padding: 10px;
// font: inherit;
// z-index: 0;
// word-wrap: break-word;
border: 1px solid var(--grey-200) !important;
background: var(--white);
}
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
ul,
ol {
padding: 0 1rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
}
a {
color: #68cef8;
}
code {
background-color: rgba(#616161, 0.1);
color: #616161;
}
pre {
background: #0d0d0d;
color: #fff;
font-family: "JetBrainsMono", monospace;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
code {
color: inherit;
padding: 0;
background: none;
font-size: 0.8rem;
}
}
pre {
background: #0d0d0d;
color: #fff;
font-family: "JetBrainsMono", monospace;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
code {
color: inherit;
padding: 0;
background: none;
font-size: 0.8rem;
}
.hljs-comment,
.hljs-quote {
color: #616161;
}
.hljs-variable,
.hljs-template-variable,
.hljs-attribute,
.hljs-tag,
.hljs-name,
.hljs-regexp,
.hljs-link,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
color: #f98181;
}
.hljs-number,
.hljs-meta,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params {
color: #fbbc88;
}
.hljs-string,
.hljs-symbol,
.hljs-bullet {
color: #b9f18d;
}
.hljs-title,
.hljs-section {
color: #faf594;
}
.hljs-keyword,
.hljs-selector-tag {
color: #70cff8;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: 700;
}
}
img {
max-width: 100%;
height: auto;
&.ProseMirror-selectednode {
outline: 3px solid #68cef8;
}
}
blockquote {
padding-left: 1rem;
border-left: 2px solid rgba(#0d0d0d, 0.1);
}
hr {
border: none;
border-top: 2px solid rgba(#0d0d0d, 0.1);
margin: 2rem 0;
}
}
/* Table-specific styling */
.ProseMirror {
table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
margin: 0;
overflow: hidden;
td,
th {
min-width: 1em;
border: 2px solid #ced4da;
padding: 3px 5px;
vertical-align: top;
box-sizing: border-box;
position: relative;
> * {
margin-bottom: 0;
}
}
th {
font-weight: bold;
text-align: left;
background-color: #f1f3f5;
}
.selectedCell:after {
z-index: 2;
position: absolute;
content: "";
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(200, 200, 255, 0.4);
pointer-events: none;
}
.column-resize-handle {
position: absolute;
right: -2px;
top: 0;
bottom: -2px;
width: 4px;
background-color: #adf;
pointer-events: none;
}
p {
margin: 0;
}
}
}
.tableWrapper {
overflow-x: auto;
}
.resize-cursor {
cursor: ew-resize;
cursor: col-resize;
}
// tasklist
ul[data-type="taskList"] {
list-style: none;
padding: 0;
li {
display: flex;
align-items: center;
> label {
flex: 0 0 auto;
margin-right: 0.5rem;
user-select: none;
}
> div {
flex: 1 1 auto;
}
}
input[type="checkbox"] {
cursor: pointer;
}
}
// character count
.character-count {
margin-top: 1rem;
display: flex;
align-items: center;
color: #68cef8;
&--warning {
color: #fb5151;
}
&__graph {
margin-right: 0.5rem;
}
&__text {
color: #868e96;
}
}
</style>

View File

@ -1,3 +1,6 @@
import {createAsyncComponent} from '@/helpers/createAsyncComponent'
export default createAsyncComponent(() => import('@/components/input/editor.vue'))
// const Editor = createAsyncComponent(() => import('@/components/input/editor.vue'))
const TipTap = createAsyncComponent(() => import('@/components/base/TipTap.vue'))
export default TipTap

View File

@ -4,6 +4,10 @@ import {
faAngleRight,
faArchive,
faArrowLeft,
faBold,
faItalic,
faStrikethrough,
faCode,
faBars,
faBell,
faCalendar,
@ -26,6 +30,7 @@ import {
faFilter,
faForward,
faGripLines,
faHeader,
faHistory,
faImage,
faKeyboard,
@ -57,13 +62,24 @@ import {
faTrashAlt,
faUser,
faUsers,
faQuoteRight,
faListUl,
faLink,
faUndo,
faRedo,
faUnlink,
faParagraph,
faTable,
} from '@fortawesome/free-solid-svg-icons'
import {
faBellSlash,
faCalendarAlt,
faCheckSquare,
faClock,
faComments,
faFileImage,
faSave,
faSquareCheck,
faStar,
faSun,
faTimesCircle,
@ -72,6 +88,21 @@ import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
import type { FontAwesomeIcon as FontAwesomeIconFixedTypes } from '@/types/vue-fontawesome'
library.add(faBold)
library.add(faUndo)
library.add(faRedo)
library.add(faItalic)
library.add(faLink)
library.add(faUnlink)
library.add(faParagraph)
library.add(faSquareCheck)
library.add(faTable)
library.add(faFileImage)
library.add(faCheckSquare)
library.add(faStrikethrough)
library.add(faCode)
library.add(faQuoteRight)
library.add(faListUl)
library.add(faAlignLeft)
library.add(faAngleRight)
library.add(faArchive)
@ -102,6 +133,7 @@ library.add(faFillDrip)
library.add(faFilter)
library.add(faForward)
library.add(faGripLines)
library.add(faHeader)
library.add(faHistory)
library.add(faImage)
library.add(faKeyboard)