Hello again, my last issue got ignored, but I found the solution. Anyways this issue is different, I have created a plugin which creates a mark decoration which increases the size of text, in my case header1 in the markdown format. This works well, but I found the cursor up and down moves depending on the actual offset(the length) from the left side of the document / textarea, I don’t want this functionality rather I want the movement to be done depending on how many chars is it from the the left side of the document / textarea, this would be the case normally if all the text was the same size, but because of my mark decoration it is not.
The other thing is that I have implemented is a replace decoration, which replaces the hashtag at the start a header1, the way I have implemented this is that within the same function I create my mark decoration I also create my replace decoration, and in another function I delete my replace decoration when the cursor or selection is in the same line, allowing for editing the document. The problem here is that when the cursor is moving up and down using the up and down arrow I noticed the cursor always goes 2 chars ahead of it should be at, which I am uncertain why is the case.
How could I solve these problems? And what is causing my cursor to go 2 chars ahead when the cursor is moved up using the up arrows? Is there a better way to implement this whole code?
import {
EditorView,
Decoration,
ViewPlugin,
} from "@codemirror/view";
import { syntaxTree } from "@codemirror/language";
// Add headers & remove hastags
function headers(view) {
let headersList = [];
for (let { from, to } of view.visibleRanges) {
syntaxTree(view.state).iterate({
from,
to,
enter: (type, from, to) => {
if (type.name == "ATXHeading1") {
let deco1 = header1.range(from, to);
let deco2 = headerhastagremove.range(from, from + 2);
headersList.push(deco1);
headersList.push(deco2);
}
},
});
}
return Decoration.set(headersList, true);
}
// Show hastags when the cursor is in line
function removehastag(view, decorations) {
if (view.state.selection.ranges == undefined) return decorations;
console.log(view.state.selection.ranges[0])
for (let { from, to } of view.state.selection.ranges) {
syntaxTree(view.state).iterate({
from,
to,
enter: (type, from, to) => { // goes through each line
if (type.name == "ATXHeading1") {
decorations = decorations.update({
filter: (f, t, value) => {
if (value.spec.class == "remove-hashtag") {
return false; // remove hastag
} else return true; // skip other wise
},
filterFrom: from,
filterTo: to, // each lines froms and tos.
});
}
},
});
console.log(view.state.selection.ranges[0])
return decorations;
}
}
// Deco
const header1 = Decoration.mark({ class: "cm-header1" });
const headerhastagremove = Decoration.replace({ class: "remove-hashtag" });
// Theme
export const header1StyleTheme = EditorView.baseTheme({
".cm-header1": {
fontSize: "1.75em",
},
});
// Plugin / Extention
export const header1Plugin = ViewPlugin.fromClass(
class {
constructor(view) {
this.decorations = headers(view);
}
update(update) {
if (update.docChanged || update.viewportChanged || update.selectionSet) {
this.decorations = headers(update.view);
this.decorations = removehastag(update.view, this.decorations);
}
}
},
{
decorations: (v) => v.decorations,
}
);
This is pretty much drag and drop code other than a need for creation EditorState with markdown(), adding the extensions with export at the start, and EditorView.