feat(editor): add configurable word wrap indentation (#2886)

* feat(editor): add configurable word wrap indentation

* chore: translation strings

* fix

Author: bajrangCoder

src/cm/indentedLineWrapping.ts

@@ -1,6 +1,7 @@
 import {
 	EditorState,
 	type Extension,
+	Facet,
 	RangeSetBuilder,
 	StateEffect,
 } from "@codemirror/state";
@@ -13,15 +14,26 @@ import {
 } from "@codemirror/view";
 
 const wrapWidth = StateEffect.define<number>();
+export type WrappingIndent = "none" | "same" | "indent" | "deepIndent";
+const wrappingIndent = Facet.define<WrappingIndent, WrappingIndent>({
+	combine: (values) => values[0] ?? "same",
+});
 
 /** Keep tab stops on the first visual row unchanged by the negative indent. */
 export function wrappedIndentColumns(
 	text: string,
 	tabSize: number,
 	limit: number,
+	mode: WrappingIndent = "same",
 ): number {
-	// Unindented/minified lines need no tab scan, even when they are megabytes long.
-	if (limit <= 0 || (text[0] !== " " && text[0] !== "\t")) return 0;
+	const extra =
+		mode === "indent" ? tabSize : mode === "deepIndent" ? 2 * tabSize : 0;
+	if (mode === "none" || limit <= 0) return 0;
+	if (text[0] !== " " && text[0] !== "\t") {
+		// Extra levels are whole tab stops, so content tabs cannot affect them.
+		// Keep the width cap tab-aligned too, avoiding a scan even in narrow panes.
+		return Math.min(extra, Math.floor(limit / tabSize) * tabSize);
+	}
 	// Include content tabs deliberately: negative text-indent changes the origin
 	// of every tab stop on the first visual row. For "  key\tvalue", using 2ch
 	// shifts "value" left by two columns in Chromium; 4ch preserves its position.
@@ -36,7 +48,7 @@ export function wrappedIndentColumns(
 		else break;
 		if (columns >= cap) return cap;
 	}
-	return Math.min(cap, Math.ceil(columns / step) * step);
+	return Math.min(cap, Math.ceil((columns + extra) / step) * step);
 }
 
 interface CachedIndent {
@@ -51,6 +63,7 @@ function decorate(
 ): { decorations: DecorationSet; cache: Map<number, CachedIndent> } {
 	const builder = new RangeSetBuilder<Decoration>();
 	const tabSize = view.state.facet(EditorState.tabSize);
+	const mode = view.state.facet(wrappingIndent);
 	const cache = new Map<number, CachedIndent>();
 	const styles = new Map<number, Decoration>();
 	let lastLine = -1;
@@ -60,7 +73,7 @@ function decorate(
 			if (line.from > lastLine) {
 				let entry = previous.get(line.from);
 				if (!entry || entry.text !== line.text) {
-					const columns = wrappedIndentColumns(line.text, tabSize, limit);
+					const columns = wrappedIndentColumns(line.text, tabSize, limit, mode);
 					let decoration = columns ? styles.get(columns) : null;
 					if (columns && !decoration) {
 						decoration = Decoration.line({
@@ -133,7 +146,10 @@ const plugin = ViewPlugin.fromClass(
 			const tabSizeChanged =
 				update.startState.facet(EditorState.tabSize) !==
 				update.state.facet(EditorState.tabSize);
-			if (changed || tabSizeChanged) {
+			const modeChanged =
+				update.startState.facet(wrappingIndent) !==
+				update.state.facet(wrappingIndent);
+			if (changed || tabSizeChanged || modeChanged) {
 				this.cache.clear();
 			} else if (update.docChanged) {
 				// Keep unchanged visible lines cached when earlier edits shift them.
@@ -148,7 +164,8 @@ const plugin = ViewPlugin.fromClass(
 				changed ||
 				update.docChanged ||
 				update.viewportChanged ||
-				tabSizeChanged
+				tabSizeChanged ||
+				modeChanged
 			) {
 				const result = decorate(update.view, this.limit, this.cache);
 				this.decorations = result.decorations;
@@ -168,9 +185,13 @@ const plugin = ViewPlugin.fromClass(
  * tabs occur after the leading whitespace. Oversized indents are capped
  * at half the available columns so narrow panes still have room for content.
  */
-export function indentedLineWrapping(): Extension {
+export function indentedLineWrapping(mode: WrappingIndent = "same"): Extension {
+	if (mode === "none") return EditorView.lineWrapping;
+	// Settings imported from older or manually edited files may be invalid.
+	if (mode !== "indent" && mode !== "deepIndent") mode = "same";
 	return [
 		EditorView.lineWrapping,
+		wrappingIndent.of(mode),
 		plugin,
 		EditorView.baseTheme({
 			".cm-line.cm-wrap-indent": {

src/lang/ar-ye.json

@@ -876,5 +876,10 @@
 	"plugin-review:error-max-length": "يجب ألا يتجاوز التقييم {max} حرفًا.",
 	"plugin-review:error-downvote-comment": "أخبر المطوّر بما يمكن تحسينه.",
 	"plugin-review:error-empty": "أضف تعليقًا أو اختر «أعجبني».",
-	"plugin-review:unrated": "غير مقيّم"
+	"plugin-review:unrated": "غير مقيّم",
+	"wrapped line indent": "Word wrap indentation",
+	"wrap-indent-same": "Same",
+	"wrap-indent-indent": "Indent (+1 level)",
+	"wrap-indent-deep": "Deep indent (+2 levels)",
+	"settings-info-editor-wrapping-indent": "Choose whether wrapped text starts at the left edge, matches the original line's indentation, or is indented further. Each extra level uses your tab size."
 }

src/lang/be-by.json

@@ -876,5 +876,10 @@
 	"plugin-review:error-max-length": "Водгук павінен змяшчаць не больш за {max} сімвалаў.",
 	"plugin-review:error-downvote-comment": "Раскажыце распрацоўшчыку, што можна палепшыць.",
 	"plugin-review:error-empty": "Дадайце каментарый або выберыце «Падабаецца».",
-	"plugin-review:unrated": "Без ацэнкі"
+	"plugin-review:unrated": "Без ацэнкі",
+	"wrapped line indent": "Word wrap indentation",
+	"wrap-indent-same": "Same",
+	"wrap-indent-indent": "Indent (+1 level)",
+	"wrap-indent-deep": "Deep indent (+2 levels)",
+	"settings-info-editor-wrapping-indent": "Choose whether wrapped text starts at the left edge, matches the original line's indentation, or is indented further. Each extra level uses your tab size."
 }

src/lang/bn-bd.json

@@ -876,5 +876,10 @@
 	"plugin-review:error-max-length": "পর্যালোচনা {max} অক্ষর বা তার কম হতে হবে।",
 	"plugin-review:error-downvote-comment": "কী উন্নত করা যায় তা ডেভেলপারকে জানান।",
 	"plugin-review:error-empty": "একটি মন্তব্য যোগ করুন বা পছন্দ নির্বাচন করুন।",
-	"plugin-review:unrated": "এখনও মূল্যায়ন নেই"
+	"plugin-review:unrated": "এখনও মূল্যায়ন নেই",
+	"wrapped line indent": "Word wrap indentation",
+	"wrap-indent-same": "Same",
+	"wrap-indent-indent": "Indent (+1 level)",
+	"wrap-indent-deep": "Deep indent (+2 levels)",
+	"settings-info-editor-wrapping-indent": "Choose whether wrapped text starts at the left edge, matches the original line's indentation, or is indented further. Each extra level uses your tab size."
 }

src/lang/cs-cz.json

@@ -876,5 +876,10 @@
 	"plugin-review:error-max-length": "Recenze může mít nejvýše {max} znaků.",
 	"plugin-review:error-downvote-comment": "Sdělte vývojáři, co by se dalo zlepšit.",
 	"plugin-review:error-empty": "Přidejte komentář nebo zvolte Líbí se mi.",
-	"plugin-review:unrated": "Nehodnoceno"
+	"plugin-review:unrated": "Nehodnoceno",
+	"wrapped line indent": "Word wrap indentation",
+	"wrap-indent-same": "Same",
+	"wrap-indent-indent": "Indent (+1 level)",
+	"wrap-indent-deep": "Deep indent (+2 levels)",
+	"settings-info-editor-wrapping-indent": "Choose whether wrapped text starts at the left edge, matches the original line's indentation, or is indented further. Each extra level uses your tab size."
 }

src/lang/de-de.json

@@ -876,5 +876,10 @@
 	"plugin-review:error-max-length": "Die Bewertung darf höchstens {max} Zeichen lang sein.",
 	"plugin-review:error-downvote-comment": "Sage dem Entwickler, was verbessert werden könnte.",
 	"plugin-review:error-empty": "Füge einen Kommentar hinzu oder wähle „Gefällt mir“.",
-	"plugin-review:unrated": "Nicht bewertet"
+	"plugin-review:unrated": "Nicht bewertet",
+	"wrapped line indent": "Word wrap indentation",
+	"wrap-indent-same": "Same",
+	"wrap-indent-indent": "Indent (+1 level)",
+	"wrap-indent-deep": "Deep indent (+2 levels)",
+	"settings-info-editor-wrapping-indent": "Choose whether wrapped text starts at the left edge, matches the original line's indentation, or is indented further. Each extra level uses your tab size."
 }

src/lang/en-us.json

@@ -92,6 +92,11 @@
 	"success": "Success",
 	"tab size": "Tab size",
 	"text wrap": "Text wrap / Word wrap",
+	"wrapped line indent": "Word wrap indentation",
+	"wrap-indent-same": "Same",
+	"wrap-indent-indent": "Indent (+1 level)",
+	"wrap-indent-deep": "Deep indent (+2 levels)",
+	"settings-info-editor-wrapping-indent": "Choose whether wrapped text starts at the left edge, matches the original line's indentation, or is indented further. Each extra level uses your tab size.",
 	"theme": "Theme",
 	"title-listfiles": "List files",
 	"ui zoom": "UI zoom",

src/lang/es-sv.json

@@ -876,5 +876,10 @@
 	"plugin-review:error-max-length": "La reseña debe tener {max} caracteres o menos.",
 	"plugin-review:error-downvote-comment": "Dile al desarrollador qué podría mejorar.",
 	"plugin-review:error-empty": "Agrega un comentario o elige Me gusta.",
-	"plugin-review:unrated": "Sin calificar"
+	"plugin-review:unrated": "Sin calificar",
+	"wrapped line indent": "Word wrap indentation",
+	"wrap-indent-same": "Same",
+	"wrap-indent-indent": "Indent (+1 level)",
+	"wrap-indent-deep": "Deep indent (+2 levels)",
+	"settings-info-editor-wrapping-indent": "Choose whether wrapped text starts at the left edge, matches the original line's indentation, or is indented further. Each extra level uses your tab size."
 }

src/lang/fr-fr.json

@@ -876,5 +876,10 @@
 	"plugin-review:error-max-length": "L’avis doit contenir au maximum {max} caractères.",
 	"plugin-review:error-downvote-comment": "Indiquez au développeur ce qui pourrait être amélioré.",
 	"plugin-review:error-empty": "Ajoutez un commentaire ou choisissez J’aime.",
-	"plugin-review:unrated": "Non évalué"
+	"plugin-review:unrated": "Non évalué",
+	"wrapped line indent": "Word wrap indentation",
+	"wrap-indent-same": "Same",
+	"wrap-indent-indent": "Indent (+1 level)",
+	"wrap-indent-deep": "Deep indent (+2 levels)",
+	"settings-info-editor-wrapping-indent": "Choose whether wrapped text starts at the left edge, matches the original line's indentation, or is indented further. Each extra level uses your tab size."
 }

src/lang/he-il.json

@@ -876,5 +876,10 @@
 	"plugin-review:error-max-length": "הביקורת צריכה להכיל עד {max} תווים.",
 	"plugin-review:error-downvote-comment": "ספר למפתח מה אפשר לשפר.",
 	"plugin-review:error-empty": "הוסף תגובה או בחר באהבתי.",
-	"plugin-review:unrated": "ללא דירוג"
+	"plugin-review:unrated": "ללא דירוג",
+	"wrapped line indent": "Word wrap indentation",
+	"wrap-indent-same": "Same",
+	"wrap-indent-indent": "Indent (+1 level)",
+	"wrap-indent-deep": "Deep indent (+2 levels)",
+	"settings-info-editor-wrapping-indent": "Choose whether wrapped text starts at the left edge, matches the original line's indentation, or is indented further. Each extra level uses your tab size."
 }