SevicheCC/Seigwai
1
0
Fork 0
mirror of https://codeberg.org/Sevichecc/Seigwai.git synced 2025-04-30 07:49:30 +08:00
Code Issues Projects Releases Packages Wiki Activity

feat: add placeholder to headings

Browse source
This commit is contained in:
Seviche CC 2023-04-01 02:33:33 +08:00
parent fc0a2394b6
commit 91c9d8c22a
Signed by: SevicheCC
GPG key ID: C577000000000000
3 changed files with 59 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -20,6 +20,7 @@
"@tiptap/extension-code-block-lowlight": "^2.0.1",
"@tiptap/extension-highlight": "^2.0.0",
"@tiptap/extension-link": "2.0.0-beta.220",
"@tiptap/extension-placeholder": "^2.0.1",
"@tiptap/extension-typography": "2.0.0-beta.220",
"@tiptap/pm": "2.0.0-beta.220",
"@tiptap/starter-kit": "2.0.0-beta.220",

13
pnpm-lock.yaml
View file

@ -28,6 +28,9 @@ dependencies:
'@tiptap/extension-link':
specifier: 2.0.0-beta.220
version: 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220)
'@tiptap/extension-placeholder':
specifier: ^2.0.1
version: 2.0.1(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220)
'@tiptap/extension-typography':
specifier: 2.0.0-beta.220
version: 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)
@ -858,6 +861,16 @@ packages:
'@tiptap/core': 2.0.0-beta.220(@tiptap/pm@2.0.0-beta.220)
dev: false
/@tiptap/extension-placeholder@2.0.1(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220):
resolution: {integrity: sha512-Jc0SrZw6HQ6Ddxr58SAAw5QPYh2pgjc1OSfrKn7+zBzcZDMFLWWgx9lTRwlR5L5VqTEuWqatJCfDrgjbnE4hLw==}
peerDependencies:
'@tiptap/core': ^2.0.0
'@tiptap/pm': ^2.0.0
dependencies:
'@tiptap/core': 2.0.0-beta.220(@tiptap/pm@2.0.0-beta.220)
'@tiptap/pm': 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)
dev: false
/@tiptap/extension-strike@2.0.0-beta.220(@tiptap/core@2.0.0-beta.220):
resolution: {integrity: sha512-cIM2ma6mzk08pijOn+KS3ZoHWaUVsVT+OF3m6xewjwJdC0ILg9nApEOhPFrhbeDcxcPmJMlgBl/xeUrEu1HQMg==}
peerDependencies:

45
src/components/Tiptap/Editor.vue
View file

@ -6,6 +6,7 @@ import Link from '@tiptap/extension-link'
import Highlight from '@tiptap/extension-highlight'
import { lowlight } from 'lowlight/lib/core'
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
import Placeholder from '@tiptap/extension-placeholder'
import html from 'highlight.js/lib/languages/xml'
import css from 'highlight.js/lib/languages/css'
@ -73,6 +74,23 @@ const editor = useEditor({
class: 'hljs not-prose',
},
}),
Placeholder.configure({
// Use different placeholders depending on the node type:
// placeholder: 'Write something …'
placeholder: ({ node }) => {
if (node.type.name === 'heading') {
switch (node.attrs.level) {
case 1:
return 'Heading 1'
case 2:
return 'Heading 2'
case 3:
return 'Heading 3'
}
}
return 'Can you add some further context?'
},
}),
],
editable: true,
autofocus: true,
@ -88,3 +106,30 @@ const editor = useEditor({
<BubbleMenu v-if="editor" :editor="editor" />
<EditorContent :editor="editor" />
</template>
<style lang="scss">
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
}
/* Placeholder (at the top) */
.ProseMirror p.is-editor-empty:first-child::before {
content: attr(data-placeholder);
float: left;
color: #adb5bd;
pointer-events: none;
height: 0;
}
/* Placeholder (on every new line) */
.ProseMirror :where(p.is-empty,h1.is-empty,h2.is-empty,h3.is-empty)::before {
content: attr(data-placeholder);
float: left;
color: #adb5bd;
pointer-events: none;
height: 0;
}
</style>