Feature Request: Decoration API #5434
Replies: 3 comments 3 replies
-
Really appreciate your thoughts on this, we have been considering an API quite similar to what you've described we just haven't gotten around to the details of it yet. But it is on our list for a v3. I am interested in collecting use cases for the decoration api, so it would be particularly helpful to know what you might be trying to use the decoration api for? |
Beta Was this translation helpful? Give feedback.
-
Yep - I've been thinking about official Decoration support in Tiptap directly. My idea was to have something like this on an extension level: // This creates decorations for all nodes inside a document
// showing their node type names
addDecorations({ editor }) {
const decorations = []
const { doc } = editor.state
doc.descendants((node, pos) => {
const name = node.type.name
const $pos = doc.resolve(pos)
const after = $pos.after($pos.depth)
decorations.push(Decoration.widget(after, () => {
const el = document.createElement('span')
el.innerText = name
el.classList.add('node-name-widget')
return el
}))
})
return decorations
} The returned decorations could be collected by the ExtensionManager and passed to a DecorationManager / decoration prosemirror plugin which handles the PM state & |
Beta Was this translation helpful? Give feedback.
-
I started working on the Decoration API last night (see #5437) I added a new Decorations can be created like this: WidgetDecoration.create({
pos: 0,
toDOM: () => {
const el = document.createElement('div')
el.innerHTML = '<p>I am a widget decoration acting as a document header</p>'
return el
},
}) NodeDecoration.create({
pos: pos,
to: pos + node.size,
attributes: {
style: 'background-color: red;'
}
}) // marks the first 10 characters of a document red
InlineDecoration.create({
pos: 0,
to: 10,
attributes: {
style: 'color: red;'
}
}) could look like this: addDecorations() {
return [
WidgetDecoration.create({
pos: 0,
toDOM: () => {
const el = document.createElement('div')
el.innerHTML = '<p>I am a widget decoration acting as a document header</p>'
return el
},
}),
NodeDecoration.create({
pos: pos,
to: pos + node.size,
attributes: {
style: 'background-color: red;'
}
}),
InlineDecoration.create({
pos: 0,
to: 10,
attributes: {
style: 'color: red;'
}
}),
]
} These decoration creations run on document changes (by checking if a transaction had document relevant changes). |
Beta Was this translation helpful? Give feedback.
-
Description
It's reported at several locations in the doc (for example on the linting example experiment page ) that Tiptap has no API to interact with prosemirror's decoration with extension, requiring the use of prosemirror plugins.
Is there any plan for adding one in tiptap v2 ?
Suggestion
maybe it could look like this ?
Use Case
There is plenty of extensions (official or not) that uses decorations to work (InvisibleCharacters and Placeholder are official examples), unfortunately they require using prosemirror plugins to add those decorations.
Type
New feature
Beta Was this translation helpful? Give feedback.
All reactions