mirror of https://github.com/halo-dev/halo
refactor: post editor (halo-dev/console#670)
#### What type of PR is this?
/kind improvement
#### What this PR does / why we need it:
升级 `@halo-dev/richtext-editor`。重构编辑器的结构，目前可以在外部添加菜单项和指令，意味着可以被扩展。
添加 tiptap 拓展的方式：
```
pnpm install @tiptap/extension-character-count
```
然后在创建 Editor 实例的时候需要将拓展添加到 extensions 数组，如：
```ts
const editor = useEditor({
content: props.modelValue,
extensions: [
...
ExtensionCharacterCount,
],
});
```
最终如果要通过我们的插件机制来拓展编辑器，那么就需要对 extensions 提供可拓展点。
#### Special notes for your reviewer:
/cc @halo-dev/sig-halo-console
#### Does this PR introduce a user-facing change?
```release-note
None
```
pull/3445/head
Ryan Wang
GitHub
parent
7c621c8afa
commit
6bb7af1762
|
|
@ -36,7 +36,7 @@
|
|||
"@halo-dev/api-client": "^0.0.41",
|
||||
"@halo-dev/components": "workspace:*",
|
||||
"@halo-dev/console-shared": "workspace:*",
|
||||
"@halo-dev/richtext-editor": "^0.0.0-alpha.8",
|
||||
"@halo-dev/richtext-editor": "^0.0.0-alpha.11",
|
||||
"@tiptap/extension-character-count": "^2.0.0-beta.199",
|
||||
"@uppy/core": "^3.0.4",
|
||||
"@uppy/dashboard": "^3.1.0",
|
||||
|
|
|
|||
133
pnpm-lock.yaml
133
pnpm-lock.yaml
|
|
@ -16,7 +16,7 @@ importers:
|
|||
'@halo-dev/api-client': ^0.0.41
|
||||
'@halo-dev/components': workspace:*
|
||||
'@halo-dev/console-shared': workspace:*
|
||||
'@halo-dev/richtext-editor': ^0.0.0-alpha.8
|
||||
'@halo-dev/richtext-editor': ^0.0.0-alpha.11
|
||||
'@iconify-json/mdi': ^1.1.34
|
||||
'@iconify-json/vscode-icons': ^1.1.16
|
||||
'@rushstack/eslint-patch': ^1.2.0
|
||||
|
|
@ -111,7 +111,7 @@ importers:
|
|||
'@halo-dev/api-client': 0.0.41
|
||||
'@halo-dev/components': link:packages/components
|
||||
'@halo-dev/console-shared': link:packages/shared
|
||||
'@halo-dev/richtext-editor': 0.0.0-alpha.8_vue@3.2.41
|
||||
'@halo-dev/richtext-editor': 0.0.0-alpha.11_vue@3.2.41
|
||||
'@tiptap/extension-character-count': 2.0.0-beta.199
|
||||
'@uppy/core': 3.0.4
|
||||
'@uppy/dashboard': 3.1.0_@uppy+core@3.0.4
|
||||
|
|
@ -1957,33 +1957,33 @@ packages:
|
|||
resolution: {integrity: sha512-YpwoIyT+6BjNEfhQqZPSG7dewmC9AE7wxc/uaIRcVZdKr0C4GLmbiBKGOFFnVWIYr42islhMWjqYCGaiJSzkUg==}
|
||||
dev: false
|
||||
|
||||
/@halo-dev/richtext-editor/0.0.0-alpha.8_vue@3.2.41:
|
||||
resolution: {integrity: sha512-3lENKyg6UqXpxUWCfhefQ3xx2e1jOzj/2TUBpblaRToP2WZSAw8wpcG5m3gTqsp5+0lHLtfrpgTvSr3KYO+08w==}
|
||||
/@halo-dev/richtext-editor/0.0.0-alpha.11_vue@3.2.41:
|
||||
resolution: {integrity: sha512-JtUBwzTp57lrBi3HUvypQaMyZIU/g9KER34PRoYgtc+12Uhjq7XXosrtaOrEL1pHjYPqyjxawUyPUJuzXONuig==}
|
||||
peerDependencies:
|
||||
vue: ^3.2.37
|
||||
dependencies:
|
||||
'@tiptap/core': 2.0.0-beta.195
|
||||
'@tiptap/extension-blockquote': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-bold': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-bullet-list': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-code': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-code-block': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-code-block-lowlight': 2.0.0-beta.195_ndbd4h3iw4l6bgxmwshcxebdty
|
||||
'@tiptap/extension-document': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-dropcursor': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-gapcursor': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-hard-break': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-heading': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-history': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-horizontal-rule': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-blockquote': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-bold': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-bullet-list': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-code': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-code-block': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-code-block-lowlight': 2.0.0-beta.195_tmbwbnesgmzomdlloh7t4ntnfa
|
||||
'@tiptap/extension-document': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-dropcursor': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-gapcursor': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-hard-break': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-heading': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-history': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-horizontal-rule': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-image': 2.0.0-beta.195_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-italic': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-italic': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-link': 2.0.0-beta.195_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-list-item': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-ordered-list': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-paragraph': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-list-item': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-ordered-list': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-paragraph': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-placeholder': 2.0.0-beta.195_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-strike': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-strike': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-subscript': 2.0.0-beta.195_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-superscript': 2.0.0-beta.195_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-table': 2.0.0-beta.195_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
|
|
@ -1992,14 +1992,13 @@ packages:
|
|||
'@tiptap/extension-table-row': 2.0.0-beta.195_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-task-item': 2.0.0-beta.195_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-task-list': 2.0.0-beta.195_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-text': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-text': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-text-align': 2.0.0-beta.195_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-underline': 2.0.0-beta.195_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/suggestion': 2.0.0-beta.195_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/vue-3': 2.0.0-beta.195_halyxqfan7x4orbb3jo3vn6fii
|
||||
floating-vue: 2.0.0-beta.20_vue@3.2.41
|
||||
github-markdown-css: 5.1.0
|
||||
katex: 0.16.2
|
||||
katex: 0.16.3
|
||||
lowlight: 2.7.0
|
||||
tippy.js: 6.3.7
|
||||
vue: 3.2.41
|
||||
|
|
@ -2651,16 +2650,16 @@ packages:
|
|||
prosemirror-view: 1.26.2
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-blockquote/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-FWlSR4TwSbYj8Ukc82M9s4qx+yFNoDTBjvsM8rA+6JxBJikSIiwOD5ht71oylA2rojWMQx75IZlYe6IBqqko0A==}
|
||||
/@tiptap/extension-blockquote/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-BbHKaIkVYgJCV5giJC3/bdXMZWxFylLKiAbOGSGwIsnnS5/oL+V4XN6hqcIDBxlcj3MQ/d9zG0+mvFyjRssAkg==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.0.0-beta.1
|
||||
dependencies:
|
||||
'@tiptap/core': 2.0.0-beta.195
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-bold/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-yVXIH6ccTqiUe9c+7gMsYS77MxmgnP7mAcj59hPR9tSjSk9ymzrfFr9sXiWZ455HJmKuvkEBSPtMzqr8P7fWOA==}
|
||||
/@tiptap/extension-bold/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-l513jgGLmt8C69Yuh5Et7a46Tn8QpW4q1HhZK6ih0ajNT+L5Xk0CSxEK/K5EmHSACPhwqjsJztLpGjAdoOn0mA==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.0.0-beta.193
|
||||
dependencies:
|
||||
|
|
@ -2678,8 +2677,8 @@ packages:
|
|||
tippy.js: 6.3.7
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-bullet-list/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-T+/pWQNlCz6AsIlx/Aryy3+HUYxMAgS7bTa069GbRAxb0K7aS3+5j9CXfVxUhC+Q+pIqCNUx86MzcY6ea//MBQ==}
|
||||
/@tiptap/extension-bullet-list/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-gGRQRqdQqCZQstB3ztSy8yzIdm5/5IIYxhCuFNb3Z9c9p/CzyRmaNqa7XkRLrXSajp4lS0OH8RkFUJqL6U+/9w==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.0.0-beta.193
|
||||
dependencies:
|
||||
|
|
@ -2695,21 +2694,21 @@ packages:
|
|||
prosemirror-state: 1.4.1
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-code-block-lowlight/2.0.0-beta.195_ndbd4h3iw4l6bgxmwshcxebdty:
|
||||
/@tiptap/extension-code-block-lowlight/2.0.0-beta.195_tmbwbnesgmzomdlloh7t4ntnfa:
|
||||
resolution: {integrity: sha512-GolPGlT9wNu9eol7K3i5Oj8woeDE8KM8jaLZT/+Bos0WJGw++atzvlYq7g6SdPxHJl64Q2phWAlx9zvlM/yhXg==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.0.0-beta.193
|
||||
'@tiptap/extension-code-block': ^2.0.0-beta.193
|
||||
dependencies:
|
||||
'@tiptap/core': 2.0.0-beta.195
|
||||
'@tiptap/extension-code-block': 2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
'@tiptap/extension-code-block': 2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a
|
||||
prosemirror-model: 1.18.1
|
||||
prosemirror-state: 1.4.1
|
||||
prosemirror-view: 1.26.2
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-code-block/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-whDf00B7WkM8pA/f+zyuTa4660mht58DFokBAcWLwmdt8w1r+SDp1C3pZG2AD9pAXMXdfm6DcRNNNgbr4KZ03Q==}
|
||||
/@tiptap/extension-code-block/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-ZfftYE1kHA2pD46hXDkeYd1vuxp3bJLS854B2yHfw1cp3JVDjMXzm4Mzg7zLfr+YV1dT/N/fUfdCg38fqEUCyA==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.0.0-beta.193
|
||||
dependencies:
|
||||
|
|
@ -2717,24 +2716,24 @@ packages:
|
|||
prosemirror-state: 1.4.1
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-code/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-Azp7ohHCOSVCt48MEBGXiyjaCr50Iw1TCZg8R3uubuHviYbhXQo2vD1z9Njsp1yKYCkO5lc11rvr675U6V4aog==}
|
||||
/@tiptap/extension-code/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-P1U/xYD0MLT7JU2OHb3QoW7+JiPZXizFG/gTYmAHQV/gLH87cmflI7pPnloBdTkeIF0Q/cd6sSd75V9FxR4XJA==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.0.0-beta.193
|
||||
dependencies:
|
||||
'@tiptap/core': 2.0.0-beta.195
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-document/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-q6z+71hgqMKxmi0F+9G4IYarSAGzK99EwvSAcbKa2lld9KS7NEXc2vHPaqECdInnIIziTZfoyBjz/G6weyNXXw==}
|
||||
/@tiptap/extension-document/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-l/3k9N2O4wIMQoN/SM3aIBwOhZ2KRxQoqGJfsbAUUwBURBDiT4N2VZaNiJC/w3xCVQXIxHSIlqtm9ZBcZeiH/Q==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.0.0-beta.193
|
||||
dependencies:
|
||||
'@tiptap/core': 2.0.0-beta.195
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-dropcursor/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-8vIeOkPuonZuK0byEsX8R4c25GAGr6PW/h6+UND2eBhn2TNwiteknJQAawqY17hHVLkUlFcwGt+lt+hmo+zR2A==}
|
||||
/@tiptap/extension-dropcursor/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-RhdYm0yBJxVLECaHWsZcBIwRJUoUqZ79jvs+kUVodxHW4+IxRAgEA+lImr0GD+kk8aX5Mrk8YhWuUUeu5nzpTg==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.0.0-beta.193
|
||||
dependencies:
|
||||
|
|
@ -2753,8 +2752,8 @@ packages:
|
|||
tippy.js: 6.3.7
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-gapcursor/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-6N76xaMGXLjkQN7iSKRrzKICUqiVgARV0PYO9E6uX48/Q5LPXjk48T5fsUbUeT2u+XvJc1nT0m8CMPeRH+3dQA==}
|
||||
/@tiptap/extension-gapcursor/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-0TDpDfDyay+IbD+wJMsBJ2c0Cq0NtllUOxbi0NPjjWW94Jrvs1yqUSzX4Qp9m5MW8qP24IV6krgZBM1JyQc6ng==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.0.0-beta.193
|
||||
dependencies:
|
||||
|
|
@ -2762,24 +2761,24 @@ packages:
|
|||
prosemirror-gapcursor: 1.3.1
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-hard-break/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-f8BdsqQ4oxXxD5c63guaEz6P+Em7tVHwrc/VnVL79YYKzlzAdg+sIOLTFABuhuGaQHT+jn4dXrBT6rSUyjUcBw==}
|
||||
/@tiptap/extension-hard-break/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-DF2wDo/+gSYRhzGowCvZJk3/j/zYJ22BHxZpkAEmLJ69mWSIqZv3S2/brujnNmnji9c3/+JN7ppPSeVykz0b9Q==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.0.0-beta.193
|
||||
dependencies:
|
||||
'@tiptap/core': 2.0.0-beta.195
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-heading/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-WZOyDPqbdav3K/IKEhdgwIFXrC1eyikMHk4ulXNHhrroNnT9SNVvSBu5vFS2fAA9ynLRAIs0Ita5RX50Zo0qEw==}
|
||||
/@tiptap/extension-heading/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-WGQ7ET2TBpldrD8JX37OXHXq05LU3OWItIVBs9nKGh4otZTUwPtwfOyMlFfA+IMfQif+ilwLGvUC6EHOw/LwxQ==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.0.0-beta.193
|
||||
dependencies:
|
||||
'@tiptap/core': 2.0.0-beta.195
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-history/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-bBCP+Gk3T8kTBmgebRsPM8/w/m6R1FpkPp9n9SEIMxAKqNqBWShyJOaDaCTqmKvOKM+HqG3D7qdS/smqlN+u/w==}
|
||||
/@tiptap/extension-history/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-oZMjKHFqqZuUuf0+IG5+OoKw9DIGilG+v8cm2JK9XnxF5CxF6HIXNDWl3552wRIA+Ro7fBRJEJ//hfJzp0Uhjw==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.0.0-beta.193
|
||||
dependencies:
|
||||
|
|
@ -2787,8 +2786,8 @@ packages:
|
|||
prosemirror-history: 1.3.0
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-horizontal-rule/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-UFG+asi5cEsVBG1dETnAfC+iSKfegl2A5wKJmGRQk5tiEg8HBpOAcsI1C0W+9+NnwDhpbEHTn64MLs74PnPZHA==}
|
||||
/@tiptap/extension-horizontal-rule/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-ISQndGiC6Y3+Ds3OJHKa2iB7s4FkRQxn8US/Hhj4yK7DOifoykLOrgDghwLu0H0dSM8KNb9caYEtmj64vDogNg==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.0.0-beta.193
|
||||
dependencies:
|
||||
|
|
@ -2804,8 +2803,8 @@ packages:
|
|||
'@tiptap/core': 2.0.0-beta.195
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-italic/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-2IUI7iaXRX2PsnizfDjDhbJ84Ws8OKCb4N5H5ofXv4wPQN6vbt+8Vd0Wwa0FcgWHk7RB8Jk5YX8znwUUHeyUWA==}
|
||||
/@tiptap/extension-italic/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-jaYJr5ZMxU2swK6h1XJr6Wb1LlWOWbvsX/wo59iZ9KVv1AHiKZlCMcWGThy4aoAs/CUT11pB8qbzyOO163LHZg==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.0.0-beta.193
|
||||
dependencies:
|
||||
|
|
@ -2823,24 +2822,24 @@ packages:
|
|||
prosemirror-state: 1.4.1
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-list-item/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-2P7LeHGbsfSAjdEGinyk7jxSqWHDTF+E1R6Vd+FhpDGdcGoEwYD0QEVIXF3nMPzkYtCYXGfeqasvuf0+bEdyqQ==}
|
||||
/@tiptap/extension-list-item/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-rzcz5MJgoX1M9M9e1iruyRxcwYyYmdCXsl9gB8hhJYh4R+AW1peRmHJ3vVX5oPZXg/tXOMTv/or2x8v30c9tJw==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.0.0-beta.193
|
||||
dependencies:
|
||||
'@tiptap/core': 2.0.0-beta.195
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-ordered-list/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-k3DvzfVuZQYr5jcqVnrDT95lTcnuTW6YOcL4mtAWklnWWSVosZ0rDVlVqMuVA/MwTPr57sNTpzb5OM8WN6U/rA==}
|
||||
/@tiptap/extension-ordered-list/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-ciQhBRtNUudQyCgvQKRZ1WbV7Q9IZP82GHEsk+wScZgI0SsrGY8pnfJT7CyF8aPIjkQkccozKVTbyMrjBOqWSw==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.0.0-beta.193
|
||||
dependencies:
|
||||
'@tiptap/core': 2.0.0-beta.195
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-paragraph/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-skCdQdZYuWYUmY/4QI1zR8dA+Icu9gerghYv5zGQKJ0DTgGa/FtBelPX6ahEy9EP08/LcRvCuM68ysus6Ouo3g==}
|
||||
/@tiptap/extension-paragraph/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-+BoMCaxlsHqw065zTUNd+ywkvFJzNKbTY461/AlKX2dgHeaO8doXHDQK+9icOpibQvrKaMhOJmuBTgGlJlUUgw==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.0.0-beta.193
|
||||
dependencies:
|
||||
|
|
@ -2858,8 +2857,8 @@ packages:
|
|||
prosemirror-view: 1.26.2
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-strike/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-/Lr8UtOJpybeS2TmztPI0ggBOXkY/qy/9rafJLNZgiVAYguGNWD7BTVZxzJtBG3h4lzqSWvHV0mOANXp/vtOIQ==}
|
||||
/@tiptap/extension-strike/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-KyN5+d9o9FGvrSiSuh81oo4+XjMDsZVY4UHc9lBY0nAzaGAkJOwkCjk40RfyO5ZJ2GdEEQ6Nh/3YqVMcJTY+rA==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.0.0-beta.193
|
||||
dependencies:
|
||||
|
|
@ -2943,8 +2942,8 @@ packages:
|
|||
'@tiptap/core': 2.0.0-beta.195
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-text/2.0.0-beta.197_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-yNu5/YyEZfCmjAF/N/XbpU8DtRusu0gjQTbdhId1G8GgGpkECYUPS2VGNH4WxfFjJAdMOAUpLFqbmPAn0cXerw==}
|
||||
/@tiptap/extension-text/2.0.0-beta.199_ujyaqudhnf6lg6m3pea2tubg4a:
|
||||
resolution: {integrity: sha512-ntOqEhkBjDHrdzxvpPe4U1JB5GgE9/yyWqWdgzSL9lpSndRTJN1xQLOmyuv0qsLqOgBHn1YITHvaxPb3t8FrFw==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.0.0-beta.193
|
||||
dependencies:
|
||||
|
|
@ -5888,10 +5887,6 @@ packages:
|
|||
assert-plus: 1.0.0
|
||||
dev: true
|
||||
|
||||
/github-markdown-css/5.1.0:
|
||||
resolution: {integrity: sha512-QLtORwHHtUHhPMHu7i4GKfP6Vx5CWZn+NKQXe+cBhslY1HEt0CTEkP4d/vSROKV0iIJSpl4UtlQ16AD8C6lMug==}
|
||||
dev: false
|
||||
|
||||
/glob-parent/5.1.2:
|
||||
resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
|
||||
engines: {node: '>= 6'}
|
||||
|
|
@ -6681,8 +6676,8 @@ packages:
|
|||
resolution: {integrity: sha512-iLt/RPnrazs4D4IVaO1Hac2W/WH9SiCT3CuhX9hip0xWVnUe+28Lyse4w/OxjSwdZ0CzduimWPMZH/KwxnCAEw==}
|
||||
dev: true
|
||||
|
||||
/katex/0.16.2:
|
||||
resolution: {integrity: sha512-70DJdQAyh9EMsthw3AaQlDyFf54X7nWEUIa5W+rq8XOpEk//w5Th7/8SqFqpvi/KZ2t6MHUj4f9wLmztBmAYQA==}
|
||||
/katex/0.16.3:
|
||||
resolution: {integrity: sha512-3EykQddareoRmbtNiNEDgl3IGjryyrp2eg/25fHDEnlHymIDi33bptkMv6K4EOC2LZCybLW/ZkEo6Le+EM9pmA==}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
commander: 8.3.0
|
||||
|
|
|
|||
|
|
@ -0,0 +1,485 @@
|
|||
<script lang="ts" setup>
|
||||
import {
|
||||
Extension,
|
||||
RichTextEditor,
|
||||
useEditor,
|
||||
ExtensionBlockquote,
|
||||
ExtensionBold,
|
||||
ExtensionBulletList,
|
||||
ExtensionCode,
|
||||
ExtensionDocument,
|
||||
ExtensionDropcursor,
|
||||
ExtensionGapcursor,
|
||||
ExtensionHardBreak,
|
||||
ExtensionHeading,
|
||||
ExtensionHistory,
|
||||
ExtensionHorizontalRule,
|
||||
ExtensionItalic,
|
||||
ExtensionListItem,
|
||||
ExtensionOrderedList,
|
||||
ExtensionParagraph,
|
||||
ExtensionStrike,
|
||||
ExtensionText,
|
||||
ExtensionImage,
|
||||
ExtensionTaskList,
|
||||
ExtensionTaskItem,
|
||||
ExtensionLink,
|
||||
ExtensionTextAlign,
|
||||
ExtensionUnderline,
|
||||
ExtensionTable,
|
||||
ExtensionTableHeader,
|
||||
ExtensionTableCell,
|
||||
ExtensionTableRow,
|
||||
ExtensionSubscript,
|
||||
ExtensionSuperscript,
|
||||
ExtensionPlaceholder,
|
||||
ExtensionCommands,
|
||||
CommandsSuggestion,
|
||||
CommandHeader1,
|
||||
CommandHeader2,
|
||||
CommandHeader3,
|
||||
CommandHeader4,
|
||||
CommandHeader5,
|
||||
CommandHeader6,
|
||||
CommandCodeBlock,
|
||||
ExtensionCodeBlock,
|
||||
lowlight,
|
||||
UndoMenuItem,
|
||||
RedoMenuItem,
|
||||
BoldMenuItem,
|
||||
ItalicMenuItem,
|
||||
UnderlineMenuItem,
|
||||
StrikeMenuItem,
|
||||
QuoteMenuItem,
|
||||
CodeMenuItem,
|
||||
SuperScriptMenuItem,
|
||||
SubScriptMenuItem,
|
||||
CodeBlockMenuItem,
|
||||
HeadingMenuItem,
|
||||
AlignLeftMenuItem,
|
||||
AlignCenterMenuItem,
|
||||
AlignRightMenuItem,
|
||||
AlignJustifyMenuItem,
|
||||
} from "@halo-dev/richtext-editor";
|
||||
import {
|
||||
IconCalendar,
|
||||
IconCharacterRecognition,
|
||||
IconLink,
|
||||
IconUserFollow,
|
||||
VTabItem,
|
||||
VTabs,
|
||||
} from "@halo-dev/components";
|
||||
import AttachmentSelectorModal from "@/modules/contents/attachments/components/AttachmentSelectorModal.vue";
|
||||
import ExtensionCharacterCount from "@tiptap/extension-character-count";
|
||||
import MdiFileImageBox from "~icons/mdi/file-image-box";
|
||||
import MdiFormatHeader1 from "~icons/mdi/format-header-1";
|
||||
import MdiFormatHeader2 from "~icons/mdi/format-header-2";
|
||||
import MdiFormatHeader3 from "~icons/mdi/format-header-3";
|
||||
import MdiFormatHeader4 from "~icons/mdi/format-header-4";
|
||||
import MdiFormatHeader5 from "~icons/mdi/format-header-5";
|
||||
import MdiFormatHeader6 from "~icons/mdi/format-header-6";
|
||||
import { computed, markRaw, nextTick, ref, watch } from "vue";
|
||||
import { formatDatetime } from "@/utils/date";
|
||||
import { useAttachmentSelect } from "@/modules/contents/attachments/composables/use-attachment";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue?: string;
|
||||
owner?: string;
|
||||
permalink?: string;
|
||||
publishTime?: string | null;
|
||||
}>(),
|
||||
{
|
||||
modelValue: "",
|
||||
owner: undefined,
|
||||
permalink: undefined,
|
||||
publishTime: undefined,
|
||||
}
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: "update:modelValue", value: string): void;
|
||||
(event: "update", value: string): void;
|
||||
}>();
|
||||
|
||||
interface HeadingNode {
|
||||
id: string;
|
||||
level: number;
|
||||
text: string;
|
||||
}
|
||||
|
||||
const headingIcons = {
|
||||
1: markRaw(MdiFormatHeader1),
|
||||
2: markRaw(MdiFormatHeader2),
|
||||
3: markRaw(MdiFormatHeader3),
|
||||
4: markRaw(MdiFormatHeader4),
|
||||
5: markRaw(MdiFormatHeader5),
|
||||
6: markRaw(MdiFormatHeader6),
|
||||
};
|
||||
|
||||
const headingNodes = ref<HeadingNode[]>();
|
||||
const selectedHeadingNode = ref<HeadingNode>();
|
||||
const extraActiveId = ref("toc");
|
||||
const attachmentSelectorModal = ref(false);
|
||||
|
||||
const editor = useEditor({
|
||||
content: props.modelValue,
|
||||
extensions: [
|
||||
ExtensionBlockquote,
|
||||
ExtensionBold,
|
||||
ExtensionBulletList,
|
||||
ExtensionCode,
|
||||
ExtensionDocument,
|
||||
ExtensionDropcursor,
|
||||
ExtensionGapcursor,
|
||||
ExtensionHardBreak,
|
||||
ExtensionHeading,
|
||||
ExtensionHistory,
|
||||
ExtensionHorizontalRule,
|
||||
ExtensionItalic,
|
||||
ExtensionListItem,
|
||||
ExtensionOrderedList,
|
||||
ExtensionParagraph,
|
||||
ExtensionStrike,
|
||||
ExtensionText,
|
||||
ExtensionImage.configure({
|
||||
inline: true,
|
||||
HTMLAttributes: {
|
||||
loading: "lazy",
|
||||
},
|
||||
}),
|
||||
ExtensionTaskList,
|
||||
ExtensionTaskItem,
|
||||
ExtensionLink.configure({
|
||||
autolink: true,
|
||||
openOnClick: false,
|
||||
}),
|
||||
ExtensionTextAlign.configure({
|
||||
types: ["heading", "paragraph"],
|
||||
}),
|
||||
ExtensionUnderline,
|
||||
ExtensionTable.configure({
|
||||
resizable: true,
|
||||
}),
|
||||
ExtensionTableHeader,
|
||||
ExtensionTableCell,
|
||||
ExtensionTableRow,
|
||||
ExtensionSubscript,
|
||||
ExtensionSuperscript,
|
||||
ExtensionPlaceholder.configure({
|
||||
placeholder: "输入 / 以选择输入类型",
|
||||
}),
|
||||
ExtensionCommands.configure({
|
||||
suggestion: {
|
||||
...CommandsSuggestion,
|
||||
items: ({ query }: { query: string }) => {
|
||||
return [
|
||||
CommandHeader1,
|
||||
CommandHeader2,
|
||||
CommandHeader3,
|
||||
CommandHeader4,
|
||||
CommandHeader5,
|
||||
CommandHeader6,
|
||||
CommandCodeBlock,
|
||||
].filter((item) =>
|
||||
[...item.keywords, item.title].some((keyword) =>
|
||||
keyword.includes(query)
|
||||
)
|
||||
);
|
||||
},
|
||||
},
|
||||
}),
|
||||
ExtensionCodeBlock.configure({
|
||||
lowlight,
|
||||
}),
|
||||
ExtensionCharacterCount,
|
||||
Extension.create({
|
||||
addGlobalAttributes() {
|
||||
return [
|
||||
{
|
||||
types: ["heading"],
|
||||
attributes: {
|
||||
id: {
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
},
|
||||
}),
|
||||
],
|
||||
autofocus: "start",
|
||||
onUpdate: () => {
|
||||
emit("update:modelValue", editor.value?.getHTML() + "");
|
||||
emit("update", editor.value?.getHTML() + "");
|
||||
nextTick(() => {
|
||||
handleGenerateTableOfContent();
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const toolbarMenuItems = computed(() => {
|
||||
if (!editor.value) return [];
|
||||
return [
|
||||
UndoMenuItem(editor.value),
|
||||
RedoMenuItem(editor.value),
|
||||
BoldMenuItem(editor.value),
|
||||
ItalicMenuItem(editor.value),
|
||||
UnderlineMenuItem(editor.value),
|
||||
StrikeMenuItem(editor.value),
|
||||
QuoteMenuItem(editor.value),
|
||||
CodeMenuItem(editor.value),
|
||||
SuperScriptMenuItem(editor.value),
|
||||
SubScriptMenuItem(editor.value),
|
||||
CodeBlockMenuItem(editor.value),
|
||||
HeadingMenuItem(editor.value),
|
||||
AlignLeftMenuItem(editor.value),
|
||||
AlignCenterMenuItem(editor.value),
|
||||
AlignRightMenuItem(editor.value),
|
||||
AlignJustifyMenuItem(editor.value),
|
||||
{
|
||||
type: "button",
|
||||
icon: markRaw(MdiFileImageBox),
|
||||
title: "SuperScript",
|
||||
action: () => (attachmentSelectorModal.value = true),
|
||||
isActive: () => false,
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
const bubbleMenuItems = computed(() => {
|
||||
if (!editor.value) return [];
|
||||
return [
|
||||
BoldMenuItem(editor.value),
|
||||
ItalicMenuItem(editor.value),
|
||||
UnderlineMenuItem(editor.value),
|
||||
StrikeMenuItem(editor.value),
|
||||
QuoteMenuItem(editor.value),
|
||||
CodeMenuItem(editor.value),
|
||||
CodeBlockMenuItem(editor.value),
|
||||
SuperScriptMenuItem(editor.value),
|
||||
SubScriptMenuItem(editor.value),
|
||||
AlignLeftMenuItem(editor.value),
|
||||
AlignCenterMenuItem(editor.value),
|
||||
AlignRightMenuItem(editor.value),
|
||||
AlignJustifyMenuItem(editor.value),
|
||||
];
|
||||
});
|
||||
|
||||
const handleGenerateTableOfContent = () => {
|
||||
if (!editor.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const headings: HeadingNode[] = [];
|
||||
const transaction = editor.value.state.tr;
|
||||
|
||||
editor.value.state.doc.descendants((node, pos) => {
|
||||
if (node.type.name === "heading") {
|
||||
const id = `heading-${headings.length + 1}`;
|
||||
|
||||
if (node.attrs.id !== id) {
|
||||
transaction?.setNodeMarkup(pos, undefined, {
|
||||
...node.attrs,
|
||||
id,
|
||||
});
|
||||
}
|
||||
|
||||
headings.push({
|
||||
level: node.attrs.level,
|
||||
text: node.textContent,
|
||||
id,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
transaction.setMeta("addToHistory", false);
|
||||
transaction.setMeta("preventUpdate", true);
|
||||
|
||||
editor.value.view.dispatch(transaction);
|
||||
|
||||
headingNodes.value = headings;
|
||||
|
||||
if (!selectedHeadingNode.value) {
|
||||
selectedHeadingNode.value = headings[0];
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectHeadingNode = (node: HeadingNode) => {
|
||||
selectedHeadingNode.value = node;
|
||||
document.getElementById(node.id)?.scrollIntoView({ behavior: "smooth" });
|
||||
};
|
||||
|
||||
const { onAttachmentSelect } = useAttachmentSelect(editor);
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {
|
||||
if (props.modelValue !== editor.value?.getHTML()) {
|
||||
editor.value?.commands.setContent(props.modelValue);
|
||||
nextTick(() => {
|
||||
handleGenerateTableOfContent();
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AttachmentSelectorModal
|
||||
v-model:visible="attachmentSelectorModal"
|
||||
@select="onAttachmentSelect"
|
||||
/>
|
||||
<RichTextEditor
|
||||
v-if="editor"
|
||||
:editor="editor"
|
||||
:toolbar-menu-items="toolbarMenuItems"
|
||||
:bubble-menu-items="bubbleMenuItems"
|
||||
>
|
||||
<template #extra>
|
||||
<div class="h-full w-72 overflow-y-auto border-l bg-white">
|
||||
<VTabs v-model:active-id="extraActiveId" type="outline">
|
||||
<VTabItem id="toc" label="大纲">
|
||||
<div class="p-1 pt-0">
|
||||
<ul class="space-y-1">
|
||||
<li
|
||||
v-for="(node, index) in headingNodes"
|
||||
:key="index"
|
||||
:class="[
|
||||
{ 'bg-gray-100': node.id === selectedHeadingNode?.id },
|
||||
]"
|
||||
class="group cursor-pointer truncate rounded-base px-1.5 py-1 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
|
||||
@click="handleSelectHeadingNode(node)"
|
||||
>
|
||||
<div
|
||||
:style="{
|
||||
paddingLeft: `${(node.level - 1) * 0.8}rem`,
|
||||
}"
|
||||
class="flex items-center gap-2"
|
||||
>
|
||||
<component
|
||||
:is="headingIcons[node.level]"
|
||||
class="h-4 w-4 rounded-sm bg-gray-100 p-0.5 group-hover:bg-white"
|
||||
:class="[
|
||||
{ '!bg-white': node.id === selectedHeadingNode?.id },
|
||||
]"
|
||||
/>
|
||||
<span class="flex-1 truncate">{{ node.text }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</VTabItem>
|
||||
<VTabItem id="information" label="详情">
|
||||
<div class="flex flex-col gap-2 p-1 pt-0">
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div
|
||||
class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div
|
||||
class="text-sm text-gray-500 group-hover:text-gray-900"
|
||||
>
|
||||
字符数
|
||||
</div>
|
||||
<div class="rounded bg-gray-200 p-0.5">
|
||||
<IconCharacterRecognition
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-base font-medium text-gray-900">
|
||||
{{ editor.storage.characterCount.characters() }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div
|
||||
class="text-sm text-gray-500 group-hover:text-gray-900"
|
||||
>
|
||||
词数
|
||||
</div>
|
||||
<div class="rounded bg-gray-200 p-0.5">
|
||||
<IconCharacterRecognition
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-base font-medium text-gray-900">
|
||||
{{ editor.storage.characterCount.words() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="publishTime" class="grid grid-cols-1 gap-2">
|
||||
<div
|
||||
class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div
|
||||
class="text-sm text-gray-500 group-hover:text-gray-900"
|
||||
>
|
||||
发布时间
|
||||
</div>
|
||||
<div class="rounded bg-gray-200 p-0.5">
|
||||
<IconCalendar
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-base font-medium text-gray-900">
|
||||
{{ formatDatetime(publishTime) || "未发布" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="owner" class="grid grid-cols-1 gap-2">
|
||||
<div
|
||||
class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div
|
||||
class="text-sm text-gray-500 group-hover:text-gray-900"
|
||||
>
|
||||
创建者
|
||||
</div>
|
||||
<div class="rounded bg-gray-200 p-0.5">
|
||||
<IconUserFollow
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-base font-medium text-gray-900">
|
||||
{{ owner }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="permalink" class="grid grid-cols-1 gap-2">
|
||||
<div
|
||||
class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div
|
||||
class="text-sm text-gray-500 group-hover:text-gray-900"
|
||||
>
|
||||
访问链接
|
||||
</div>
|
||||
<div class="rounded bg-gray-200 p-0.5">
|
||||
<IconLink
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm text-gray-900 hover:text-blue-600">
|
||||
{{ permalink }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VTabItem>
|
||||
</VTabs>
|
||||
</div>
|
||||
</template>
|
||||
</RichTextEditor>
|
||||
</template>
|
||||
|
|
@ -62,6 +62,8 @@ const searchResults = computed((): SearchableItem[] => {
|
|||
});
|
||||
|
||||
const handleBuildSearchIndex = () => {
|
||||
fuse.remove(() => true);
|
||||
|
||||
const routes = router.getRoutes().filter((route) => {
|
||||
return !!route.meta?.title && route.meta?.searchable;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,22 +6,15 @@ import {
|
|||
VButton,
|
||||
IconSave,
|
||||
} from "@halo-dev/components";
|
||||
import DefaultEditor from "@/components/editor/DefaultEditor.vue";
|
||||
import SinglePageSettingModal from "./components/SinglePageSettingModal.vue";
|
||||
import PostPreviewModal from "../posts/components/PostPreviewModal.vue";
|
||||
import AttachmentSelectorModal from "../attachments/components/AttachmentSelectorModal.vue";
|
||||
import {
|
||||
allExtensions,
|
||||
RichTextEditor,
|
||||
useEditor,
|
||||
} from "@halo-dev/richtext-editor";
|
||||
import type { SinglePageRequest } from "@halo-dev/api-client";
|
||||
import { v4 as uuid } from "uuid";
|
||||
import { computed, onMounted, ref, watch } from "vue";
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { apiClient } from "@/utils/api-client";
|
||||
import { useRouteQuery } from "@vueuse/router";
|
||||
import cloneDeep from "lodash.clonedeep";
|
||||
import { useAttachmentSelect } from "../attachments/composables/use-attachment";
|
||||
import MdiFileImageBox from "~icons/mdi/file-image-box";
|
||||
|
||||
const initialFormState: SinglePageRequest = {
|
||||
page: {
|
||||
|
|
@ -61,37 +54,11 @@ const formState = ref<SinglePageRequest>(cloneDeep(initialFormState));
|
|||
const saving = ref(false);
|
||||
const settingModal = ref(false);
|
||||
const previewModal = ref(false);
|
||||
const attachmentSelectorModal = ref(false);
|
||||
|
||||
const isUpdateMode = computed(() => {
|
||||
return !!formState.value.page.metadata.creationTimestamp;
|
||||
});
|
||||
|
||||
// Editor
|
||||
const editor = useEditor({
|
||||
content: formState.value.content.raw,
|
||||
extensions: [...allExtensions],
|
||||
autofocus: "start",
|
||||
onUpdate: () => {
|
||||
formState.value.content.raw = editor.value?.getHTML() + "";
|
||||
},
|
||||
});
|
||||
|
||||
watch(
|
||||
() => formState.value.content.raw,
|
||||
(newValue) => {
|
||||
const isSame = editor.value?.getHTML() === newValue;
|
||||
|
||||
if (isSame) {
|
||||
return;
|
||||
}
|
||||
|
||||
editor.value?.commands.setContent(newValue as string, false);
|
||||
}
|
||||
);
|
||||
|
||||
const { onAttachmentSelect } = useAttachmentSelect(editor);
|
||||
|
||||
const routeQueryName = useRouteQuery<string>("name");
|
||||
|
||||
const handleSave = async () => {
|
||||
|
|
@ -172,10 +139,6 @@ onMounted(async () => {
|
|||
@saved="onSettingSaved"
|
||||
/>
|
||||
<PostPreviewModal v-model:visible="previewModal" />
|
||||
<AttachmentSelectorModal
|
||||
v-model:visible="attachmentSelectorModal"
|
||||
@select="onAttachmentSelect"
|
||||
/>
|
||||
<VPageHeader title="自定义页面">
|
||||
<template #icon>
|
||||
<IconPages class="mr-2 self-center" />
|
||||
|
|
@ -204,19 +167,11 @@ onMounted(async () => {
|
|||
</template>
|
||||
</VPageHeader>
|
||||
<div class="editor border-t" style="height: calc(100vh - 3.5rem)">
|
||||
<RichTextEditor
|
||||
v-if="editor"
|
||||
:editor="editor"
|
||||
:additional-menu-items="[
|
||||
{
|
||||
type: 'button',
|
||||
icon: MdiFileImageBox,
|
||||
title: 'SuperScript',
|
||||
action: () => (attachmentSelectorModal = true),
|
||||
isActive: () => false,
|
||||
},
|
||||
]"
|
||||
>
|
||||
</RichTextEditor>
|
||||
<DefaultEditor
|
||||
v-model="formState.content.raw"
|
||||
:owner="formState.page.spec.owner"
|
||||
:permalink="formState.page.status?.permalink"
|
||||
:publish-time="formState.page.spec.publishTime"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,42 +1,20 @@
|
|||
<script lang="ts" setup>
|
||||
import {
|
||||
IconBookRead,
|
||||
IconCalendar,
|
||||
IconCharacterRecognition,
|
||||
IconLink,
|
||||
IconSave,
|
||||
IconUserFollow,
|
||||
VButton,
|
||||
VPageHeader,
|
||||
VSpace,
|
||||
VTabItem,
|
||||
VTabs,
|
||||
} from "@halo-dev/components";
|
||||
import DefaultEditor from "@/components/editor/DefaultEditor.vue";
|
||||
import PostSettingModal from "./components/PostSettingModal.vue";
|
||||
import PostPreviewModal from "./components/PostPreviewModal.vue";
|
||||
import AttachmentSelectorModal from "../attachments/components/AttachmentSelectorModal.vue";
|
||||
import type { PostRequest } from "@halo-dev/api-client";
|
||||
import { computed, markRaw, nextTick, onMounted, ref, watch } from "vue";
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import cloneDeep from "lodash.clonedeep";
|
||||
import { apiClient } from "@/utils/api-client";
|
||||
import { useRouteQuery } from "@vueuse/router";
|
||||
import { v4 as uuid } from "uuid";
|
||||
import {
|
||||
allExtensions,
|
||||
Extension,
|
||||
RichTextEditor,
|
||||
useEditor,
|
||||
} from "@halo-dev/richtext-editor";
|
||||
import ExtensionCharacterCount from "@tiptap/extension-character-count";
|
||||
import { formatDatetime } from "@/utils/date";
|
||||
import { useAttachmentSelect } from "../attachments/composables/use-attachment";
|
||||
import MdiFileImageBox from "~icons/mdi/file-image-box";
|
||||
import MdiFormatHeader1 from "~icons/mdi/format-header-1";
|
||||
import MdiFormatHeader2 from "~icons/mdi/format-header-2";
|
||||
import MdiFormatHeader3 from "~icons/mdi/format-header-3";
|
||||
import MdiFormatHeader4 from "~icons/mdi/format-header-4";
|
||||
import MdiFormatHeader5 from "~icons/mdi/format-header-5";
|
||||
import MdiFormatHeader6 from "~icons/mdi/format-header-6";
|
||||
|
||||
const initialFormState: PostRequest = {
|
||||
post: {
|
||||
|
|
@ -78,118 +56,11 @@ const formState = ref<PostRequest>(cloneDeep(initialFormState));
|
|||
const settingModal = ref(false);
|
||||
const previewModal = ref(false);
|
||||
const saving = ref(false);
|
||||
const extraActiveId = ref("toc");
|
||||
const attachmentSelectorModal = ref(false);
|
||||
|
||||
const isUpdateMode = computed(() => {
|
||||
return !!formState.value.post.metadata.creationTimestamp;
|
||||
});
|
||||
|
||||
interface HeadingNode {
|
||||
id: string;
|
||||
level: number;
|
||||
text: string;
|
||||
}
|
||||
|
||||
const headingIcons = {
|
||||
1: markRaw(MdiFormatHeader1),
|
||||
2: markRaw(MdiFormatHeader2),
|
||||
3: markRaw(MdiFormatHeader3),
|
||||
4: markRaw(MdiFormatHeader4),
|
||||
5: markRaw(MdiFormatHeader5),
|
||||
6: markRaw(MdiFormatHeader6),
|
||||
};
|
||||
|
||||
const headingNodes = ref<HeadingNode[]>();
|
||||
const selectedHeadingNode = ref<HeadingNode>();
|
||||
const editor = useEditor({
|
||||
content: formState.value.content.raw,
|
||||
extensions: [
|
||||
...allExtensions,
|
||||
ExtensionCharacterCount,
|
||||
Extension.create({
|
||||
addGlobalAttributes() {
|
||||
return [
|
||||
{
|
||||
types: ["heading"],
|
||||
attributes: {
|
||||
id: {
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
},
|
||||
}),
|
||||
],
|
||||
autofocus: "start",
|
||||
onUpdate: () => {
|
||||
formState.value.content.raw = editor.value?.getHTML() + "";
|
||||
nextTick(() => {
|
||||
handleGenerateTableOfContent();
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
watch(
|
||||
() => formState.value.content.raw,
|
||||
(newValue) => {
|
||||
const isSame = editor.value?.getHTML() === newValue;
|
||||
|
||||
if (isSame) {
|
||||
return;
|
||||
}
|
||||
|
||||
editor.value?.commands.setContent(newValue as string, false);
|
||||
}
|
||||
);
|
||||
|
||||
const { onAttachmentSelect } = useAttachmentSelect(editor);
|
||||
|
||||
const handleGenerateTableOfContent = () => {
|
||||
if (!editor.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const headings: HeadingNode[] = [];
|
||||
const transaction = editor.value.state.tr;
|
||||
|
||||
editor.value.state.doc.descendants((node, pos) => {
|
||||
if (node.type.name === "heading") {
|
||||
const id = `heading-${headings.length + 1}`;
|
||||
|
||||
if (node.attrs.id !== id) {
|
||||
transaction?.setNodeMarkup(pos, undefined, {
|
||||
...node.attrs,
|
||||
id,
|
||||
});
|
||||
}
|
||||
|
||||
headings.push({
|
||||
level: node.attrs.level,
|
||||
text: node.textContent,
|
||||
id,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
transaction.setMeta("addToHistory", false);
|
||||
transaction.setMeta("preventUpdate", true);
|
||||
|
||||
editor.value.view.dispatch(transaction);
|
||||
|
||||
headingNodes.value = headings;
|
||||
|
||||
if (!selectedHeadingNode.value) {
|
||||
selectedHeadingNode.value = headings[0];
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectHeadingNode = (node: HeadingNode) => {
|
||||
selectedHeadingNode.value = node;
|
||||
document.getElementById(node.id)?.scrollIntoView({ behavior: "smooth" });
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
saving.value = true;
|
||||
|
|
@ -261,7 +132,6 @@ onMounted(async () => {
|
|||
|
||||
// fetch post content
|
||||
await handleFetchContent();
|
||||
handleGenerateTableOfContent();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -273,10 +143,6 @@ onMounted(async () => {
|
|||
@saved="onSettingSaved"
|
||||
/>
|
||||
<PostPreviewModal v-model:visible="previewModal" :post="formState.post" />
|
||||
<AttachmentSelectorModal
|
||||
v-model:visible="attachmentSelectorModal"
|
||||
@select="onAttachmentSelect"
|
||||
/>
|
||||
<VPageHeader title="文章">
|
||||
<template #icon>
|
||||
<IconBookRead class="mr-2 self-center" />
|
||||
|
|
@ -305,167 +171,11 @@ onMounted(async () => {
|
|||
</template>
|
||||
</VPageHeader>
|
||||
<div class="editor border-t" style="height: calc(100vh - 3.5rem)">
|
||||
<RichTextEditor
|
||||
v-if="editor"
|
||||
:editor="editor"
|
||||
:additional-menu-items="[
|
||||
{
|
||||
type: 'button',
|
||||
icon: MdiFileImageBox,
|
||||
title: 'SuperScript',
|
||||
action: () => (attachmentSelectorModal = true),
|
||||
isActive: () => false,
|
||||
},
|
||||
]"
|
||||
>
|
||||
<template #extra>
|
||||
<div class="h-full w-72 overflow-y-auto border-l bg-white">
|
||||
<VTabs v-model:active-id="extraActiveId" type="outline">
|
||||
<VTabItem id="toc" label="大纲">
|
||||
<div class="p-1 pt-0">
|
||||
<ul class="space-y-1">
|
||||
<li
|
||||
v-for="(node, index) in headingNodes"
|
||||
:key="index"
|
||||
:class="[
|
||||
{ 'bg-gray-100': node.id === selectedHeadingNode?.id },
|
||||
]"
|
||||
class="group cursor-pointer truncate rounded-base px-1.5 py-1 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900"
|
||||
@click="handleSelectHeadingNode(node)"
|
||||
>
|
||||
<div
|
||||
:style="{
|
||||
paddingLeft: `${(node.level - 1) * 0.8}rem`,
|
||||
}"
|
||||
class="flex items-center gap-2"
|
||||
>
|
||||
<component
|
||||
:is="headingIcons[node.level]"
|
||||
class="h-4 w-4 rounded-sm bg-gray-100 p-0.5 group-hover:bg-white"
|
||||
:class="[
|
||||
{ '!bg-white': node.id === selectedHeadingNode?.id },
|
||||
]"
|
||||
/>
|
||||
<span class="flex-1 truncate">{{ node.text }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</VTabItem>
|
||||
<VTabItem id="information" label="详情">
|
||||
<div class="flex flex-col gap-2 p-1 pt-0">
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div
|
||||
class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div
|
||||
class="text-sm text-gray-500 group-hover:text-gray-900"
|
||||
>
|
||||
字符数
|
||||
</div>
|
||||
<div class="rounded bg-gray-200 p-0.5">
|
||||
<IconCharacterRecognition
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-base font-medium text-gray-900">
|
||||
{{ editor.storage.characterCount.characters() }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div
|
||||
class="text-sm text-gray-500 group-hover:text-gray-900"
|
||||
>
|
||||
词数
|
||||
</div>
|
||||
<div class="rounded bg-gray-200 p-0.5">
|
||||
<IconCharacterRecognition
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-base font-medium text-gray-900">
|
||||
{{ editor.storage.characterCount.words() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-2">
|
||||
<div
|
||||
class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div
|
||||
class="text-sm text-gray-500 group-hover:text-gray-900"
|
||||
>
|
||||
发布时间
|
||||
</div>
|
||||
<div class="rounded bg-gray-200 p-0.5">
|
||||
<IconCalendar
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-base font-medium text-gray-900">
|
||||
{{
|
||||
formatDatetime(formState.post.spec.publishTime) ||
|
||||
"未发布"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-2">
|
||||
<div
|
||||
class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div
|
||||
class="text-sm text-gray-500 group-hover:text-gray-900"
|
||||
>
|
||||
创建者
|
||||
</div>
|
||||
<div class="rounded bg-gray-200 p-0.5">
|
||||
<IconUserFollow
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-base font-medium text-gray-900">
|
||||
{{ formState.post.spec.owner }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-2">
|
||||
<div
|
||||
class="group flex cursor-pointer flex-col gap-y-5 rounded-md bg-gray-100 px-1.5 py-1 transition-all"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div
|
||||
class="text-sm text-gray-500 group-hover:text-gray-900"
|
||||
>
|
||||
访问链接
|
||||
</div>
|
||||
<div class="rounded bg-gray-200 p-0.5">
|
||||
<IconLink
|
||||
class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm text-gray-900 hover:text-blue-600">
|
||||
{{ formState.post.status?.["permalink"] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VTabItem>
|
||||
</VTabs>
|
||||
</div>
|
||||
</template>
|
||||
</RichTextEditor>
|
||||
<DefaultEditor
|
||||
v-model="formState.content.raw"
|
||||
:owner="formState.post.spec.owner"
|
||||
:permalink="formState.post.status?.permalink"
|
||||
:publish-time="formState.post.spec.publishTime"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue