mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2024-12-14 18:49:02 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

improve placeholder

Browse Source
This commit is contained in:
Philipp Kühn 2019-12-02 23:05:03 +01:00
parent a0141d3720
commit 1472254913
2 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/Components/Routes/Placeholder/index.vue
View File

@ -24,9 +24,11 @@ export default {
new BulletList(),
new ListItem(),
new Placeholder({
emptyEditorClass: 'is-editor-empty',
emptyNodeClass: 'is-empty',
emptyNodeText: 'Write something …',
showOnlyWhenEditable: true,
showOnlyCurrent: true,
}),
],
}),
@ -39,7 +41,7 @@ export default {
</script>
<style lang="scss">
.editor p.is-empty:first-child::before {
.editor p.is-editor-empty:first-child::before {
content: attr(data-empty-text);
float: left;
color: #aaa;

14
packages/tiptap-extensions/src/extensions/Placeholder.js
View File

@ -9,6 +9,7 @@ export default class Placeholder extends Extension {
get defaultOptions() {
return {
emptyEditorClass: 'is-editor-empty',
emptyNodeClass: 'is-empty',
emptyNodeText: 'Write something …',
showOnlyWhenEditable: true,
@ -32,6 +33,7 @@ export default class Placeholder extends Extension {
const active = editable || !this.options.showOnlyWhenEditable
const { anchor } = selection
const decorations = []
const isEditorEmpty = doc.textContent.length === 0
if (!active) {
return false
@ -39,11 +41,17 @@ export default class Placeholder extends Extension {
doc.descendants((node, pos) => {
const hasAnchor = anchor >= pos && anchor <= (pos + node.nodeSize)
const isEmpty = node.content.size === 0
const isNodeEmpty = node.content.size === 0
if ((hasAnchor || !this.options.showOnlyCurrent) && isNodeEmpty) {
const classes = [this.options.emptyNodeClass]
if (isEditorEmpty) {
classes.push(this.options.emptyEditorClass)
}
if ((hasAnchor || !this.options.showOnlyCurrent) && isEmpty) {
const decoration = Decoration.node(pos, pos + node.nodeSize, {
class: this.options.emptyNodeClass,
class: classes.join(' '),
'data-empty-text': typeof this.options.emptyNodeText === 'function'
? this.options.emptyNodeText(node)
: this.options.emptyNodeText,