ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

improve placeholder

Browse Source
This commit is contained in:
Philipp Kühn
2021-03-24 22:23:21 +01:00
parent 43320e51c7
commit 99d1bd2076
2 changed files with 7 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
docs/src/demos/Experiments/Placeholder/extension/placeholder.ts
View File

@@ -1,4 +1,4 @@
import { Extension } from '@tiptap/core' import { Extension, isNodeEmpty } from '@tiptap/core'
import { Decoration, DecorationSet } from 'prosemirror-view' import { Decoration, DecorationSet } from 'prosemirror-view'
import { Plugin } from 'prosemirror-state' import { Plugin } from 'prosemirror-state'
@@ -29,7 +29,6 @@ export default Extension.create({
const active = this.editor.isEditable || !this.options.showOnlyWhenEditable const active = this.editor.isEditable || !this.options.showOnlyWhenEditable
const { anchor } = selection const { anchor } = selection
const decorations: Decoration[] = [] const decorations: Decoration[] = []
const isEditorEmpty = doc.textContent.length === 0
if (!active) { if (!active) {
return return
@@ -37,13 +36,12 @@ export default Extension.create({
doc.descendants((node, pos) => { doc.descendants((node, pos) => {
const hasAnchor = anchor >= pos && anchor <= (pos + node.nodeSize) const hasAnchor = anchor >= pos && anchor <= (pos + node.nodeSize)
// TODO: should be false for image nodes (without text content), is true though const isEmpty = !node.isLeaf && isNodeEmpty(node)
const isNodeEmpty = node.content.size === 0
if ((hasAnchor || !this.options.showOnlyCurrent) && isNodeEmpty) { if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
const classes = [this.options.emptyNodeClass] const classes = [this.options.emptyNodeClass]
if (isEditorEmpty) { if (this.editor.isEmpty) {
classes.push(this.options.emptyEditorClass) classes.push(this.options.emptyEditorClass)
} }
@@ -53,6 +51,7 @@ export default Extension.create({
? this.options.placeholder(node) ? this.options.placeholder(node)
: this.options.placeholder, : this.options.placeholder,
}) })
decorations.push(decoration) decorations.push(decoration)
} }

8
docs/src/demos/Experiments/Placeholder/index.vue
View File

@@ -4,9 +4,7 @@
<script> <script>
import { Editor, EditorContent } from '@tiptap/vue-2' import { Editor, EditorContent } from '@tiptap/vue-2'
import Document from '@tiptap/extension-document' import { defaultExtensions } from '@tiptap/starter-kit'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import Placeholder from './extension/placeholder' import Placeholder from './extension/placeholder'
export default { export default {
@@ -23,9 +21,7 @@ export default {
mounted() { mounted() {
this.editor = new Editor({ this.editor = new Editor({
extensions: [ extensions: [
Document, ...defaultExtensions(),
Paragraph,
Text,
Placeholder, Placeholder,
], ],
}) })