feat: added option to keep styling of criticmarkup node when editing it

Fevol · Mar 9, 2023 · 40f0319 · 40f0319
1 parent 71d2fb1
commit 40f0319
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 42 deletions.
diff --git a/src/assets/main.scss b/src/assets/main.scss
@@ -133,10 +133,23 @@ span.cm-highlight:has(.criticmarkup-editing) {
 }
 
 .criticmarkup-addition img {
-	border: 4px solid var(--addition-color) !important;
+	border: 4px solid var(--addition-color);
 	border-radius: 12px;
 }
 
+//.HyperMD-codeblock:has(.criticmarkup-addition) {
+//	border-left: 2px solid var(--addition-color);
+//	border-right: 2px solid var(--addition-color);
+//
+//	&.HyperMD-codeblock-begin {
+//		border-top: 4px solid var(--addition-color);
+//	}
+//
+//	&.HyperMD-codeblock-end {
+//		border-bottom: 4px solid var(--addition-color);
+//	}
+//}
+
 .criticmarkup-deletion img {
 	border: 4px solid var(--deletion-color) !important;
 	border-radius: 12px;

diff --git a/src/editor/live-preview.ts b/src/editor/live-preview.ts
@@ -6,20 +6,16 @@ import {
 	ViewPlugin,
 	ViewUpdate,
 } from '@codemirror/view';
-import type { EditorSelection, Extension, Range } from '@codemirror/state';
+import type { Extension, Range } from '@codemirror/state';
 import type { Tree } from '@lezer/common';
 
 import { criticmarkupLanguage } from './parser';
 import { TreeFragment } from '@lezer/common';
 
 import { RangeSet } from '@codemirror/state';
 import { buildMarkers, CriticMarkupMarker, gutterExtension } from './criticmarkup-gutter';
-import type {PluginSettings} from "../types";
-
-function selectionRangeOverlap(selection: EditorSelection, rangeFrom: number, rangeTo: number) {
-	return selection.ranges.some(range => range.from <= rangeTo && range.to >= rangeFrom);
-}
-
+import type { PluginSettings } from '../types';
+import { selectionRangeOverlap } from './util';
 
 export function inlinePlugin(settings: PluginSettings): Extension[] {
 	const view_plugin = ViewPlugin.fromClass(
@@ -38,9 +34,9 @@ export function inlinePlugin(settings: PluginSettings): Extension[] {
 				// @ts-ignore
 				this.fragments = TreeFragment.addTree(this.tree);
 
-				this.decorations = this.buildDecorations(view) ?? Decoration.none;
+				this.decorations = (this.settings.live_preview ? this.buildDecorations(view) : null) ?? Decoration.none;
 
-				this.markers = buildMarkers(view, this);
+				this.markers = (this.settings.editor_gutter ? buildMarkers(view, this) : RangeSet.empty);
 			}
 
 			removeBrackets(widgets: Range<Decoration>[], from: number, to: number) {
@@ -135,13 +131,45 @@ export function inlinePlugin(settings: PluginSettings): Extension[] {
 						}
 					} else {
 						if (selectionRangeOverlap(selection, start, end)) {
-							// Mark CriticMarkup as being edited, disables strikethrough/highlight styling
-							widgets.push(
-								Decoration.mark({
-									attributes: { 'data-contents': 'string' },
-									class: 'criticmarkup-editing',
-								}).range(start, end),
-							);
+							if (!this.settings.editor_styling) {
+								widgets.push(
+									Decoration.mark({
+										attributes: { 'data-contents': 'string' },
+										class: 'criticmarkup-editing',
+									}).range(start, end),
+								);
+								continue;
+							} else {
+								if (name === 'Substitution') {
+									cursor.firstChild();
+									if (cursor.name !== 'MSub')
+										continue;
+									if (start + 3 !== cursor.from) {
+										widgets.push(
+											Decoration.mark({
+												attributes: { 'data-contents': 'string' },
+												class: 'criticmarkup-editing criticmarkup-inline criticmarkup-substitution criticmarkup-deletion',
+											}).range(start + 3, cursor.from),
+										);
+									}
+
+									if (cursor.to !== end - 3) {
+										widgets.push(
+											Decoration.mark({
+												attributes: { 'data-contents': 'string' },
+												class: 'criticmarkup-editing criticmarkup-inline criticmarkup-substitution criticmarkup-addition',
+											}).range(cursor.from + 2, end - 3),
+										);
+									}
+								} else {
+									widgets.push(
+										Decoration.mark({
+											attributes: { 'data-contents': 'string' },
+											class: `criticmarkup-editing criticmarkup-inline criticmarkup-${name.toLowerCase()}`,
+										}).range(start, end),
+									);
+								}
+							}
 							continue;
 						}
 

diff --git a/src/editor/parser b/src/editor/parser
diff --git a/src/editor/util.ts b/src/editor/util.ts
@@ -38,6 +38,11 @@ export function selectionToRange(editor: Editor): number[] {
 }
 
 
+export function selectionRangeOverlap(selection: EditorSelection, rangeFrom: number, rangeTo: number) {
+	return selection.ranges.some(range => range.from <= rangeTo && range.to >= rangeFrom);
+}
+
+
 export function nodeAtCursor(tree: Tree, pos: number) {
 	const node = tree.resolve(pos, -1);
 	if (node.type.name === '⚠' || node.type.name === 'CriticMarkup')

diff --git a/src/main.ts b/src/main.ts
@@ -36,6 +36,28 @@ export default class CommentatorPlugin extends Plugin {
 	}>();
 
 
+	loadEditorExtensions() {
+		this.editorExtensions.length = 0;
+		if (this.settings.live_preview || this.settings.editor_gutter)
+			this.editorExtensions.push(inlinePlugin(this.settings));
+
+		if (this.settings.tag_completion)
+			this.editorExtensions.push(bracketMatcher);
+		if (this.settings.node_correcter)
+			this.editorExtensions.push(nodeCorrecter);
+	}
+
+	async updateEditorExtension() {
+		if (Object.keys(this.changed_settings).some(key =>
+			["suggestion_status", "editor_styling", "live_preview", "editor_gutter", "tag_completion", "node_correcter"].includes(key))) {
+			this.loadEditorExtensions();
+			this.app.workspace.updateOptions();
+		}
+
+		if (this.settings.post_processor)
+			postProcessorUpdate();
+
+	}
 
 
 	async onload() {
@@ -69,30 +91,6 @@ export default class CommentatorPlugin extends Plugin {
 			this.addCommand(command);
 		}
 	}
-
-	loadEditorExtensions() {
-		this.editorExtensions.length = 0;
-		this.editorExtensions.push(inlinePlugin(this.settings));
-
-		if (this.settings.tag_completion)
-			this.editorExtensions.push(bracketMatcher);
-		if (this.settings.node_correcter)
-			this.editorExtensions.push(nodeCorrecter);
-	}
-
-	async updateEditorExtension() {
-		if (Object.keys(this.changed_settings).some(key =>
-			["suggestion_status", "editor_styling", "live_preview", "editor_gutter", "tag_completion", "node_correcter"].includes(key))) {
-			this.loadEditorExtensions();
-			this.app.workspace.updateOptions();
-		}
-
-		if (this.settings.post_processor)
-			postProcessorUpdate();
-
-	}
-
-
 
 	async onunload() {
 		if (this.settings.editor_preview_button)

diff --git a/src/ui/settings.ts b/src/ui/settings.ts
@@ -14,6 +14,17 @@ export class CommentatorSettings extends PluginSettingTab {
 
         containerEl.empty();
 
+        new Setting(containerEl)
+            .setName("Show style when editing")
+            .setDesc("Keep styling of CriticMarkup when editing the markup")
+            .addToggle(toggle => toggle.setValue(this.plugin.settings.editor_styling)
+                .onChange(async (value) => {
+                    this.plugin.settings.editor_styling = value;
+                    await this.plugin.saveSettings();
+                }
+            ));
+
+
         new Setting(containerEl)
             .setName("Automatic tag completion")
             .setDesc("Automatically complete CriticMarkup tags")