import * as monaco from "monaco-editor";

// 只导入核心部分。
import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";

// 挑选一些功能进行加载……
import "monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution.js";
import "monaco-editor/esm/vs/base/browser/ui/codicons/codiconStyles.js";
import "monaco-editor/esm/vs/editor/contrib/wordOperations/browser/wordOperations.js";
import "monaco-editor/esm/vs/editor/contrib/linesOperations/browser/linesOperations.js";
import "monaco-editor/esm/vs/editor/contrib/dnd/browser/dnd.js";
import "monaco-editor/esm/vs/editor/contrib/multicursor/browser/multicursor.js";

import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
// 还导入了几个差不多的……

self.MonacoEnvironment = {
	getWorker(_: any, label: string) {
		// 几个 if 然后 return new xxxWorker()。
	}
};

<template>
	<div ref='editorEl' class='editor'/>
	<div class='preview' v-html='html'/>
</template>

<style>
body {
	display: flex;
	margin: 0;
}

/* 编辑器的容器需要确定大小 */
.editor {
	width: 50vw;
	height: 100vh;
}

.preview {
	width: 50vw;
	height: 100vh;
	overflow-y: auto;
}
</style>

<script setup lang='ts'>
import { onMounted, onUnmounted, shallowRef } from "vue";
import MarkdownIt from "markdown-it";
// Monaco editor 的导入省略了，见上面。

const WORD_SEPARATORS =
	'`~!@#$%^&*()-=+[{]}\\|;:\'",.<>/?'   // USUAL_WORD_SEPARATORS
	+ "·！￥…*（）—【】：；‘’“”、《》，。？" // 中文符号。
	+ "「」｛｝＜＞・～＠＃＄％＾＆＊＝『』"; // 日韩符号。

const md = new MarkdownIt();

let editor: monaco.editor.IStandaloneCodeEditor = undefined!;

const editorEl = shallowRef<HTMLElement>();
const html = shallowRef("初始内容");

onUnmounted(() => editor.dispose());

onMounted(() => {
	editor = monaco.editor.create(editorEl.value!, {
		value: "初始内容",
		language: "markdown",
		lineHeight: 22,
		fontSize: 16,
		scrollbar: {
			useShadows: false,
		},
		wordWrap: "on",
		wordSeparators: WORD_SEPARATORS,
	});

	editor.onDidChangeModelContent(() => {
		html.value = md.render(editor.getModel()!.getValue(1));
	});
});
</script>

import { Selection } from "monaco-editor/esm/vs/editor/editor.api.js";

const info = shallowRef({ start: 0, count: 0, sl: 0, sc: 0, el: 0, ec: 0 });

editor.onDidChangeCursorSelection(e => {
	const { startLineNumber, startColumn } = e.selection;
	const model = editor.getModel()!;

	// 选区之前的部分，注意行号和列号从 1 开始。
	const offset = Selection.createWithDirection(1, 1, startLineNumber, startColumn, 0);
	info.value = {
		sl: startLineNumber,                                // 起始行
		sc: startColumn,                                    // 起始列
		el: e.selection.endLineNumber,                      // 结束行
		ec: e.selection.endColumn,                          // 结束列
		start: model.getCharacterCountInRange(offset),      // 起始位置（第几个字）
		count: model.getCharacterCountInRange(e.selection), // 选中多少字
	};
});

<template>
	<button @click='toggleWrap'>切换自动换行</button>
	<button @click='toggleMinimap'>切换小地图</button>
</template>

<script setup lang='ts'>
import { reactive, watch } from "vue";

const options = reactive<monaco.editor.IEditorOptions>({
	wordWrap: "on",
	minimap: { enabled: false },
});

function toggleWrap() {
	options.wordWrap = options.wordWrap === "on" ? "off" : "on";
}

function toggleMinimap() {
	const { enabled } = options.minimap!;
	options.minimap!.enabled = !enabled;
}

watch(options, o => editor.updateOptions(o), { deep: true });
</script>

<template>
	<!-- 添加 ref 和 滚动事件 -->
	<div
		ref='previewEl' 
		class='preview' 
		v-html='html' 
		@scroll='scrollEditorToPreview'
	/>
	<!-- 其它元素省略了…… -->
</template>

<script setup lang='ts'>
const previewEl = shallowRef<HTMLElement>();

let ignoreScroll = false;

function runScrollAction(callback: () => void) {
	if (ignoreScroll) {
		return; // 防止循环触发。
	}
	ignoreScroll = true;

	// 延迟到下一帧，解决浏览器的平滑滚动问题。
	requestAnimationFrame(() => {
		callback();
		requestAnimationFrame(() => ignoreScroll = false);
	});
}

function scrollEditorToPreview() {
	runScrollAction(() => {
		const { offsetHeight } = editorEl.value!;
		const $el = previewEl.value!;
		const p = $el.scrollTop / ($el.scrollHeight - offsetHeight);

		// Monaco-editor 在末尾有一屏的空白，所以要多减去一个 offsetHeight。
		const max = editor.getScrollHeight() - offsetHeight * 2;

		/*
		 * 当右侧滚到底时，如果左侧位置超过了内容（即在空白区），就不滚动。
		 * 这样做是为了避免删除最后一页的行时，编辑区滚动位置抖动的问题。
		 */
		if (p < 0.999) {
			editor.setScrollTop(p * max);
		} else if (editor.getScrollTop() < max) {
			editor.setScrollTop(max);
		}
	});
}

function scrollPreviewToEditor() {
	runScrollAction(() => {
		const scrollHeight = editor.getScrollHeight();
		const { offsetHeight } = editorEl.value!;
		const $el = previewEl.value!;

		/*
		 * 没超过一屏就不滚动，因为结果可能长于 Markdown（反之好像不会），
		 * 此时换行会让 HTML 视图滚到顶而不是保持在当前位置。
		 */
		if (scrollHeight < offsetHeight * 2) {
			return;
		}
		const p = editor.getScrollTop() / (scrollHeight - offsetHeight * 2);
		$el.scrollTop = p * ($el.scrollHeight - offsetHeight);
	});
}

onMounted(() => {
	// 创建 Editor 部分省略了……
	editor.onDidScrollChange(scrollPreviewToEditor);
});
</script>

import { Range, Selection, editor } from "monaco-editor/esm/vs/editor/editor.api.js";

class PrefixCommand implements editor.ICommand {

	private readonly range: Selection;
	private readonly prefix: string;

	overlap = false;

	constructor(selection: Selection, prefix: string) {
		this.range = selection;
		this.prefix = prefix;
	}

	computeCursorState() {
		const { range, prefix } = this;
		return new Selection(
			range.startLineNumber,
			range.startColumn + prefix.length,
			range.endLineNumber,
			range.endColumn + prefix.length,
		);
	}

	getEditOperations(_: unknown, builder: editor.IEditOperationBuilder) {
		const { range, prefix, overlap } = this;
		let i = range.startLineNumber;
		if (overlap) {
			i += 1; // 第一行跟其它选区重了，跳过。
		}
		for (; i <= range.endLineNumber; i++) {
			builder.addEditOperation(new Range(i, 0, i, 0), prefix);
		}
	}
}

// 使用`addPrefix("> ")`即可将选中的每行变成引用块。
function addPrefix(prefix: string) {
	const selections = editor.getSelections()!;

	selections.sort(Range.compareRangesUsingStarts);
	const commands = selections.map(s => new PrefixCommand(s, prefix));

	// 检查两个选区是否都包含了同一行，有则给后一个添加 overlap 标记。
	for (let i = 1; i < selections.length; i++) {
		const prev = selections[i - 1];
		const curr = selections[i];
		commands[i].overlap = curr.startLineNumber === prev.endLineNumber;
	}

	editor.focus();
	editor.executeCommands(null, commands);
}