Hi. I’m new to ProseMirror and I trying to make an editor to inline markdown highlighting.
I’m currently implementing the following actions, but I have a problem.
- I want to apply the style of markdown without hiding the mark. like CodeMirror 5 markdown mode. For example, in the text below, the entire ‘This text should be bold’ should be bold style. but I don’t know what to do about this. Can you give me some advice?
**This text should be bold** and *This should be italic*
- I’m thinking of a different approach. If there is text
<Mark Start>Some Text<Mark End>
and when a caret enters the text wrap text with**
, and if caret is outside the text, I want to hide wrapper**
. I implemented the part to check if there is a carat between Marks with the decorator, but I don’t know how to wrap it in text. This is my plugin code
new Plugin({
state: {
init() {
return DecorationSet.empty;
},
apply(tr, _, prevState, newState) {
const decorations: Decoration[] = [];
for (const mark of Object.values(newState.schema.marks)) {
const isActive = isMarkActive(mark)(prevState);
if (isActive) {
tr.doc.nodesBetween(0, tr.doc.nodeSize - 2, (node, pos) => {
if (mark.isInSet(node.marks)) {
const start = pos + 1;
const end = start + node.nodeSize - 2;
decorations.push(Decoration.inline(start, end, {}, mark));
}
});
}
}
return DecorationSet.create(tr.doc, decorations);
}
},
props: {
decorations(editorState) {
return this.getState(editorState);
}
},
}),
Thanks,
Kuzan