Hi, I just learned about Prosemirror after I came across this article from Times on medium https://open.nytimes.com/building-a-text-editor-for-a-digital-first-newsroom-f1cb8367fc21
I’d like to create similar features in the article and I’m stuck with creating the lede_media nodetype which consist of an image and a text description with inline editing experience. Here is the approach i took, define a nodetype with content of an image and a text node.
imageWrapper: {
group: 'block',
content: 'image p',
marks: '',
draggable: true,
attrs: {
displayMode: {default: 'medium'}
},
toDOM: (node) => {
return ['div', node.attrs]
}
},
when the menu is clicked, create the imagewrapper node with a image and a paragraph and insert to the document.
const image = schema.nodes.image.create({src: url})
const title = schema.nodes.p.createAndFill()
const imageWrapper = schema.nodes.imageWrapper.create(null, [image, title])
const newTransaction = editor.state.tr
newTransaction.replaceWith(pos, pos, imageWrapper)
I’m getting following error message, can’t someone explain to me why the schema is invalid?
Uncaught SyntaxError: Only non-generatable nodes (image) in a required position (in content expression 'image p')
at TokenStream.err (index.js?b0cf:1646)
at checkForDeadEnds (index.js?b0cf:1862)
at Function.parse (index.js?b0cf:1475)
at new Schema (index.js?b0cf:2354)
Maybe something like Embedded code editor is way to go but managing all the state changes with customized code seems overkill to me for a simple feature like this. I would appreciate any pointer on how to implement this feature. thanks in advance