Searching the web I found an example to work with react/typescript components within prosemirror. The idea caught me - and would be a perfect solution to me, but I have some issues with editing.
Here is a codesandbox with the running example:
If You click on the space within “Heading two” and press return after Heading, so two will go into a new line - it simply looses its style. Checking the JSON view of the document on the right side seems to be correct:
HTML:
Heading one Heading two [[[ <= ‘two’ with a newline in front has no heading at all, seems to be paragraph only, even shown as heading node in the JSON ]]] Heading three Heading four
JSON:
{
"type": "heading",
"attrs": {
"level": 1
},
"content": [
{
"type": "text",
"text": "Heading one"
}
]
},
{
"type": "heading",
"attrs": {
"level": 2
},
"content": [
{
"type": "text",
"text": "Heading"
}
]
},
{
"type": "heading",
"attrs": {
"level": 2
},
"content": [
{
"type": "text",
"text": " two"
}
]
},
{
"type": "heading",
"attrs": {
"level": 3
},
"content": [
{
"type": "text",
"text": "Heading three"
}
]
},
The weird behavior continues - cursor keys wont work, the EditorView flashes - and typing is in arabic order - new letters show up in front of the line (letters are ordered backwards).
Checking the state I dont see an error - the nodes seem to be correct.
The problems exists also on other nodes with different styling. Leaving out the css-lib does not improve the situation.
Anybody has an idea of what I am doing wrong?
Second question - how would I use the ToggleMark Command from an onClick Event in the surrounding React-App (that embeds the Editor) - also here the behavior is odd.
Thank You
Andi