I’d like to ask about an issue I’m encountering while implementing a feature to hide Markdown heading symbols (# ). After typing # followed by a space, the cursor incorrectly positions itself between these two characters and stops blinking. As a beginner, I’m unsure if this is caused by my code or if this approach isn’t feasible in the first place.
function smartHeaderDecorator(view) {
const decorations = [];
const cursorPos = view.state.selection.main.head;
let cursorInHeaderLine = false;
for (let { from, to } of view.visibleRanges) {
syntaxTree(view.state).iterate({
from, to,
enter(node) {
if (node.name === "HeaderMark") {
const doc = view.state.doc;
const line = doc.lineAt(node.from);
const lineEnd = line.to;
let hasSpaceAfter = false;
if (node.to < lineEnd) {
const nextChar = doc.sliceString(node.to, node.to + 1);
hasSpaceAfter = nextChar === " ";
}
if (hasSpaceAfter) {
decorations.push(Decoration.mark({
class: "cm-smart-hidden-header"
}).range(node.from, node.to));
decorations.push(Decoration.mark({
class: "cm-smart-hidden-space"
}).range(node.to, node.to + 1));
}
}
},
});
}
return Decoration.set(decorations);
}
.cm-smart-hidden-header {
float: left;
margin-left: -16px;
color: transparent;
background-color: transparent !important
}
.cm-smart-hidden-space {
float: left;
margin-left: -16px;
color: transparent;
background-color: transparent !important
}