fix: readOnly editor thing and folds, cursor , scroll thing

- dynamic readonly through compartment
- cursor and selection
- folds saving and restore
- scroll related stuff(for editor state)

Author: bajrangCoder

src/codemirror/editorUtils.js

@@ -0,0 +1,141 @@
+import { foldEffect, foldedRanges } from "@codemirror/language";
+import { EditorSelection, EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+/**
+ * Interface for fold span objects
+ * @typedef {Object} FoldSpan
+ * @property {number} fromLine - Starting line number (1-based)
+ * @property {number} fromCol - Starting column (0-based)
+ * @property {number} toLine - Ending line number (1-based)
+ * @property {number} toCol - Ending column (0-based)
+ */
+
+/**
+ * Get all folded ranges from CodeMirror editor state
+ * @param {EditorState} state - CodeMirror editor state
+ * @returns {FoldSpan[]} Array of fold span objects
+ */
+export function getAllFolds(state) {
+	const doc = state.doc;
+	const folds = [];
+
+	foldedRanges(state).between(0, doc.length, (from, to) => {
+		const fromPos = doc.lineAt(from);
+		const toPos = doc.lineAt(to);
+		folds.push({
+			fromLine: fromPos.number,
+			fromCol: from - fromPos.from,
+			toLine: toPos.number,
+			toCol: to - toPos.from,
+		});
+	});
+
+	return folds;
+}
+
+/**
+ * @param {EditorView} view - CodeMirror editor state
+ */
+export function getSelection(view) {
+	const sel = view.state.selection;
+	return {
+		ranges: sel.ranges.map((r) => ({ from: r.from, to: r.to })),
+		mainIndex: sel.mainIndex,
+	};
+}
+
+/**
+ * Get scroll
+ * @param {EditorView} view - CodeMirror editor view
+ */
+export function getScrollPosition(view) {
+	const { scrollTop, scrollLeft } = view.scrollDOM;
+	return { scrollTop, scrollLeft };
+}
+
+/**
+ * Set scroll position in CodeMirror editor view
+ * @param {EditorView} view - CodeMirror editor view
+ * @param {number} scrollTop - Vertical scroll position
+ * @param {number} scrollLeft - Horizontal scroll position
+ */
+export function setScrollPosition(view, scrollTop, scrollLeft) {
+	const scroller = view.scrollDOM;
+
+	if (typeof scrollTop === "number") {
+		scroller.scrollTop = scrollTop;
+	}
+
+	if (typeof scrollLeft === "number") {
+		scroller.scrollLeft = scrollLeft;
+	}
+}
+
+export function restoreSelection(view, sel) {
+	if (!sel || !sel.ranges || !sel.ranges.length) return;
+	const len = view.state.doc.length;
+
+	const ranges = sel.ranges
+		.map((r) => {
+			const from = Math.max(0, Math.min(len, r.from | 0));
+			const to = Math.max(0, Math.min(len, r.to | 0));
+			return EditorSelection.range(from, to);
+		})
+		.filter(Boolean);
+
+	if (!ranges.length) return;
+
+	const mainIndex =
+		sel.mainIndex >= 0 && sel.mainIndex < ranges.length ? sel.mainIndex : 0;
+
+	view.dispatch({
+		selection: EditorSelection.create(ranges, mainIndex),
+		scrollIntoView: true,
+	});
+}
+
+/**
+ * Restore folds to CodeMirror editor
+ * @param {EditorView} view - CodeMirror editor view
+ * @param {FoldSpan[]} folds - Array of fold spans to restore
+ */
+export function restoreFolds(view, folds) {
+	if (!Array.isArray(folds) || folds.length === 0) return;
+
+	function lineColToOffset(doc, line, col) {
+		const ln = doc.line(line);
+		return Math.min(ln.from + col, ln.to);
+	}
+
+	function loadFolds(state, saved) {
+		const doc = state.doc;
+		const effects = [];
+
+		for (const f of saved) {
+			// Validate line numbers
+			if (f.fromLine < 1 || f.fromLine > doc.lines) continue;
+			if (f.toLine < 1 || f.toLine > doc.lines) continue;
+
+			const from = lineColToOffset(doc, f.fromLine, f.fromCol);
+			const to = lineColToOffset(doc, f.toLine, f.toCol);
+			if (to > from) {
+				effects.push(foldEffect.of({ from, to }));
+			}
+		}
+		return effects;
+	}
+
+	const restoreEffects = loadFolds(view.state, folds);
+	if (restoreEffects.length) {
+		view.dispatch({ effects: restoreEffects });
+	}
+}
+
+export default {
+	getAllFolds,
+	getSelection,
+	getScrollPosition,
+	setScrollPosition,
+	restoreSelection,
+	restoreFolds,
+};

src/lib/editorFile.js

@@ -11,6 +11,11 @@ import mimeTypes from "mime-types";
 import helpers from "utils/helpers";
 import Path from "utils/Path";
 import Url from "utils/Url";
+import {
+	restoreFolds,
+	restoreSelection,
+	setScrollPosition,
+} from "../codemirror/editorUtils";
 import { getModeForPath } from "../codemirror/modelist";
 import constants from "./constants";
 import openFolder from "./openFolder";
@@ -528,7 +533,7 @@ export default class EditorFile {
 	 */
 	set editable(value) {
 		if (this.#editable === value) return;
-		editorManager.editor.setReadOnly(!value);
+		this.setReadOnly(!value);
 		editorManager.onupdate("read-only");
 		editorManager.emit("update", "read-only");
 		this.#editable = value;
@@ -743,6 +748,19 @@ export default class EditorFile {
 		return this.#save(true);
 	}
 
+	setReadOnly(value) {
+		try {
+			const { editor, readOnlyCompartment } = editorManager;
+			if (!editor) return;
+			if (!readOnlyCompartment) return;
+			editor.dispatch({
+				effects: readOnlyCompartment.reconfigure(
+					EditorState.readOnly.of(!!value),
+				),
+			});
+		} catch (_) {}
+	}
+
 	/**
 	 * Sets syntax highlighting of the file.
 	 * @param {string} [mode]
@@ -1022,14 +1040,17 @@ export default class EditorFile {
 
 		this.#loadOptions = null;
 
-		editor.state.readOnly = true;
+		this.setReadOnly(true);
 		this.loading = true;
 		this.markChanged = false;
 		this.#emit("loadstart", createFileEvent(this));
-		this.session = EditorState.create({
-			doc: strings["loading..."],
-			extensions: this.session.extensions,
-		});
+		this.session = this.session.update({
+			changes: {
+				from: 0,
+				to: this.session.doc.length,
+				insert: strings["loading..."],
+			},
+		}).state;
 
 		try {
 			const cacheFs = fsOperation(this.cacheFile);
@@ -1054,33 +1075,28 @@ export default class EditorFile {
 			}
 
 			this.markChanged = false;
-			this.session = EditorState.create({
-				doc: value,
-				extensions: this.session.extensions,
-			});
+			this.session = this.session.update({
+				changes: { from: 0, to: this.session.doc.length, insert: value },
+			}).state;
 			this.loaded = true;
 			this.loading = false;
 
 			const { activeFile, emit } = editorManager;
 			if (activeFile.id === this.id) {
-				editor.state.readOnly = false;
+				this.setReadOnly(false);
 			}
 
 			setTimeout(() => {
 				this.#emit("load", createFileEvent(this));
 				emit("file-loaded", this);
-				// TODO: Implement cursor positioning and scrolling for CodeMirror
-				// if (cursorPos)
-				// 	this.session.selection.moveCursorTo(cursorPos.row, cursorPos.column);
-				// if (scrollTop) this.session.setScrollTop(scrollTop);
-				// if (scrollLeft) this.session.setScrollLeft(scrollLeft);
+				if (cursorPos) {
+					restoreSelection(editor, cursorPos);
+				}
+				if (scrollTop || scrollLeft) {
+					setScrollPosition(editor, scrollTop, scrollLeft);
+				}
 				if (editable !== undefined) this.editable = editable;
-
-				// TODO: Implement folding for CodeMirror
-				// if (Array.isArray(folds)) {
-				// 	const parsedFolds = EditorFile.#parseFolds(folds);
-				// 	this.session?.addFolds(parsedFolds);
-				// }
+				restoreFolds(editor, folds);
 			}, 0);
 		} catch (error) {
 			this.#emit("loaderror", createFileEvent(this));
@@ -1106,16 +1122,6 @@ export default class EditorFile {
 	// 	editorManager.editor._emit("scrollleft", e);
 	// }
 
-	/**
-	 * Parse folds - TODO: Update for CodeMirror folding system
-	 * @param {Array} folds
-	 */
-	static #parseFolds(folds) {
-		if (!Array.isArray(folds)) return [];
-		// TODO: Implement CodeMirror fold parsing
-		return [];
-	}
-
 	#save(as) {
 		const event = createFileEvent(this);
 		this.#emit("save", event);

src/lib/editorManager.js

@@ -134,6 +134,8 @@ async function EditorManager($header, $body) {
 	const completionCompartment = new Compartment();
 	// Compartment for rainbow bracket colorizer
 	const rainbowCompartment = new Compartment();
+	// Compartment for read-only toggling
+	const readOnlyCompartment = new Compartment();
 
 	function getEditorFontFamily() {
 		const font = appSettings?.value?.editorFont || "Roboto Mono";
@@ -340,6 +342,8 @@ async function EditorManager($header, $body) {
 			// Default theme
 			themeCompartment.of(oneDark),
 			fixedHeightTheme,
+			// Ensure read-only can be toggled later via compartment
+			readOnlyCompartment.of(EditorState.readOnly.of(false)),
 			// Editor options driven by settings via compartments
 			...getBaseExtensionsFromOptions(),
 			// Emmet abbreviation tracker and common keybindings
@@ -705,9 +709,10 @@ async function EditorManager($header, $body) {
 			exts.push(colorView(true));
 		}
 
-		// Apply read-only state based on file.editable/loading
+		// Apply read-only state based on file.editable/loading using Compartment
 		try {
-			exts.push(EditorState.readOnly.of(!file.editable || !!file.loading));
+			const ro = !file.editable || !!file.loading;
+			exts.push(readOnlyCompartment.of(EditorState.readOnly.of(ro)));
 		} catch (e) {
 			// safe to ignore; editor will remain editable by default
 		}
@@ -765,6 +770,7 @@ async function EditorManager($header, $body) {
 		activeFile: null,
 		addFile,
 		editor,
+		readOnlyCompartment,
 		getFile,
 		switchFile,
 		hasUnsavedFiles,
@@ -1421,7 +1427,16 @@ async function EditorManager($header, $body) {
 	// Re-apply state when read-only toggles on the active file
 	manager.on(["update:read-only"], () => {
 		const file = manager.activeFile;
-		if (file?.type === "editor") applyFileToEditor(file);
+		if (file?.type !== "editor") return;
+		try {
+			const ro = !file.editable || !!file.loading;
+			editor.dispatch({
+				effects: readOnlyCompartment.reconfigure(EditorState.readOnly.of(ro)),
+			});
+		} catch (_) {
+			// Fallback: re-apply full state if something goes wrong
+			applyFileToEditor(file);
+		}
 	});
 
 	/**

src/lib/saveState.js

@@ -1,3 +1,8 @@
+import {
+	getAllFolds,
+	getScrollPosition,
+	getSelection,
+} from "../codemirror/editorUtils";
 import constants from "./constants";
 import { addedFolder } from "./openFolder";
 import appSettings from "./settings";
@@ -24,13 +29,13 @@ export default () => {
 			readOnly: file.readOnly,
 			SAFMode: file.SAFMode,
 			deletedFile: file.deletedFile,
-			cursorPos: editor.getCursorPosition(),
-			scrollTop: editor.session.getScrollTop(),
-			scrollLeft: editor.session.getScrollLeft(),
+			cursorPos: getSelection(editor),
+			scrollTop: getScrollPosition(editor).scrollTop,
+			scrollLeft: getScrollPosition(editor).scrollLeft,
 			editable: file.editable,
 			encoding: file.encoding,
 			render: activeFile.id === file.id,
-			folds: parseFolds(file.session.getAllFolds()),
+			folds: getAllFolds(file.session),
 		};
 
 		if (settings.rememberFiles || fileJson.isUnsaved)
@@ -55,20 +60,3 @@ export default () => {
 	localStorage.files = JSON.stringify(filesToSave);
 	localStorage.folders = JSON.stringify(folders);
 };
-
-function parseFolds(folds) {
-	if (!Array.isArray(folds)) return [];
-
-	return folds
-		.map((fold) => {
-			if (!fold || !fold.range) return null;
-
-			const { range, ranges, placeholder } = fold;
-			return {
-				range,
-				ranges: parseFolds(ranges || []),
-				placeholder,
-			};
-		})
-		.filter(Boolean);
-}