Added tab indentation

This commit is contained in:
2025-04-24 21:43:07 +08:00
parent ab0255a775
commit f41a13c217
3 changed files with 337 additions and 142 deletions

View File

@@ -21,6 +21,17 @@ const editorStore = useEditorStore();
<span class="font-size" title="字体大小 (Ctrl+滚轮调整)">
{{ editorStore.fontSize }}px
</span>
<span class="tab-settings">
<label title="启用Tab键缩进" class="tab-toggle">
<input type="checkbox" :checked="editorStore.enableTabIndent" @change="editorStore.toggleTabIndent"/>
<span>Tab</span>
</label>
<span class="tab-size" title="Tab大小">
<button class="tab-btn" @click="editorStore.decreaseTabSize" :disabled="editorStore.tabSize <= 2">-</button>
<span>{{ editorStore.tabSize }}</span>
<button class="tab-btn" @click="editorStore.increaseTabSize" :disabled="editorStore.tabSize >= 8">+</button>
</span>
</span>
<span class="encoding">{{ editorStore.encoding }}</span>
<button class="settings-btn" @click="editorStore.openSettings">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
@@ -70,6 +81,47 @@ const editorStore = useEditorStore();
cursor: help;
}
.tab-settings {
display: flex;
align-items: center;
gap: 6px;
color: var(--text-muted);
font-size: 11px;
.tab-toggle {
display: flex;
align-items: center;
gap: 3px;
cursor: pointer;
input {
cursor: pointer;
}
}
.tab-size {
display: flex;
align-items: center;
gap: 2px;
.tab-btn {
background: none;
border: none;
color: var(--text-primary);
cursor: pointer;
padding: 0 3px;
font-size: 12px;
line-height: 1;
&:disabled {
color: var(--text-muted);
opacity: 0.5;
cursor: not-allowed;
}
}
}
}
.encoding {
color: var(--text-muted);
font-size: 11px;

View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import {onBeforeUnmount, onMounted, ref} from 'vue';
import {onBeforeUnmount, onMounted, ref, watch} from 'vue';
import {
crosshairCursor,
drawSelection,
@@ -11,7 +11,7 @@ import {
lineNumbers,
rectangularSelection,
} from '@codemirror/view';
import {EditorState} from '@codemirror/state';
import {Compartment, EditorState, Extension} from '@codemirror/state';
import {baseDark} from "@/editor/theme/base-dark";
import {
bracketMatching,
@@ -19,16 +19,21 @@ import {
foldGutter,
foldKeymap,
indentOnInput,
syntaxHighlighting
syntaxHighlighting,
indentUnit
} from '@codemirror/language';
import {defaultKeymap, history, historyKeymap} from '@codemirror/commands';
import {
defaultKeymap,
history,
historyKeymap,
indentSelection,
} from '@codemirror/commands';
import {highlightSelectionMatches, searchKeymap} from '@codemirror/search';
import {autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap} from '@codemirror/autocomplete';
import {lintKeymap} from '@codemirror/lint';
import {fontTheme} from "@/editor/font/font";
import { useEditorStore } from '@/stores/editor';
import {useEditorStore} from '@/stores/editor';
// 使用Pinia store
const editorStore = useEditorStore();
const props = defineProps({
@@ -38,6 +43,10 @@ const props = defineProps({
}
});
// 使用Compartment可以动态更新特定的配置而不重建整个编辑器
const tabSizeCompartment = new Compartment();
const tabKeyCompartment = new Compartment();
const editorElement = ref<HTMLElement | null>(null);
// 处理滚轮缩放字体
@@ -58,6 +67,106 @@ const handleWheel = (event: WheelEvent) => {
}
};
// 自定义Tab键处理函数
const tabHandler = (view: EditorView): boolean => {
// 如果有选中文本使用indentSelection
if (!view.state.selection.main.empty) {
return indentSelection(view);
}
// 获取当前的tabSize值
const currentTabSize = editorStore.tabSize;
// 创建相应数量的空格
const spaces = ' '.repeat(currentTabSize);
// 在光标位置插入空格
const { state, dispatch } = view;
dispatch(state.update(state.replaceSelection(spaces), { scrollIntoView: true }));
return true;
};
// 获取Tab相关的扩展
const getTabExtensions = (): Extension[] => {
const extensions: Extension[] = [];
// 设置缩进单位
const tabSize = editorStore.tabSize;
extensions.push(tabSizeCompartment.of(indentUnit.of(' '.repeat(tabSize))));
// 如果启用了Tab缩进添加自定义Tab键映射
if (editorStore.enableTabIndent) {
extensions.push(tabKeyCompartment.of(keymap.of([{
key: "Tab",
run: tabHandler
}])));
} else {
extensions.push(tabKeyCompartment.of([]));
}
return extensions;
};
// 创建编辑器
const createEditor = () => {
if (!editorElement.value) return;
const extensions = [
baseDark,
fontTheme,
lineNumbers(),
highlightActiveLineGutter(),
highlightSpecialChars(),
history(),
foldGutter(),
drawSelection(),
dropCursor(),
EditorView.lineWrapping,
EditorState.allowMultipleSelections.of(true),
indentOnInput(),
syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
bracketMatching(),
closeBrackets(),
autocompletion(),
rectangularSelection(),
crosshairCursor(),
highlightSelectionMatches(),
keymap.of([
...closeBracketsKeymap,
...defaultKeymap,
...searchKeymap,
...historyKeymap,
...foldKeymap,
...completionKeymap,
...lintKeymap
]),
EditorView.updateListener.of(update => {
if (update.docChanged || update.selectionSet) {
updateStats();
}
}),
...getTabExtensions()
];
const state = EditorState.create({
doc: props.initialDoc,
extensions
});
const view = new EditorView({
state,
parent: editorElement.value
});
// 将编辑器实例保存到store
editorStore.setEditorView(view);
// 初始化统计
updateStats();
// 应用初始字体大小
editorStore.applyFontSize();
};
// 更新统计信息
const updateStats = () => {
if (!editorStore.editorView) return;
@@ -84,64 +193,55 @@ const updateStats = () => {
});
};
// 动态更新Tab配置不需要重建编辑器
const updateTabConfig = () => {
if (!editorStore.editorView) return;
// 更新Tab大小配置
const tabSize = editorStore.tabSize;
const view = editorStore.editorView;
// 更新indentUnit配置
view.dispatch({
effects: tabSizeCompartment.reconfigure(indentUnit.of(' '.repeat(tabSize)))
});
// 更新Tab键映射
const tabKeymap = editorStore.enableTabIndent
? keymap.of([{ key: "Tab", run: tabHandler }])
: [];
view.dispatch({
effects: tabKeyCompartment.reconfigure(tabKeymap)
});
};
// 重新配置编辑器(仅在必要时完全重建)
const reconfigureEditor = () => {
if (!editorStore.editorView) return;
// 尝试动态更新配置
updateTabConfig();
};
// 监听Tab设置变化
watch(() => editorStore.tabSize, () => {
reconfigureEditor();
});
// 监听Tab缩进设置变化
watch(() => editorStore.enableTabIndent, () => {
reconfigureEditor();
});
onMounted(() => {
if (!editorElement.value) return;
const state = EditorState.create({
doc: props.initialDoc,
extensions: [
baseDark,
fontTheme,
lineNumbers(),
highlightActiveLineGutter(),
highlightSpecialChars(),
history(),
foldGutter(),
drawSelection(),
dropCursor(),
EditorView.lineWrapping,
EditorState.allowMultipleSelections.of(true),
indentOnInput(),
syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
bracketMatching(),
closeBrackets(),
autocompletion(),
rectangularSelection(),
crosshairCursor(),
highlightSelectionMatches(),
keymap.of([
...closeBracketsKeymap,
...defaultKeymap,
...searchKeymap,
...historyKeymap,
...foldKeymap,
...completionKeymap,
...lintKeymap
]),
EditorView.updateListener.of(update => {
if (update.docChanged || update.selectionSet) {
updateStats();
}
})
]
});
const view = new EditorView({
state,
parent: editorElement.value
});
// 将编辑器实例保存到store
editorStore.setEditorView(view);
// 初始化统计
updateStats();
// 应用初始字体大小
editorStore.applyFontSize();
// 创建编辑器
createEditor();
// 添加滚轮事件监听
editorElement.value.addEventListener('wheel', handleWheel, { passive: false });
if (editorElement.value) {
editorElement.value.addEventListener('wheel', handleWheel, { passive: false });
}
});
onBeforeUnmount(() => {

View File

@@ -1,89 +1,132 @@
import { defineStore } from 'pinia';
import { ref } from 'vue';
import { DocumentStats } from '@/types/editor';
import { EditorView } from '@codemirror/view';
import {defineStore} from 'pinia';
import {ref} from 'vue';
import {DocumentStats} from '@/types/editor';
import {EditorView} from '@codemirror/view';
// 字体大小范围
const MIN_FONT_SIZE = 12;
const MAX_FONT_SIZE = 28;
const DEFAULT_FONT_SIZE = 12;
const DEFAULT_FONT_SIZE = 13;
// Tab设置
const DEFAULT_TAB_SIZE = 4;
const MIN_TAB_SIZE = 2;
const MAX_TAB_SIZE = 8;
export const useEditorStore = defineStore('editor', () => {
// 状态
const documentStats = ref<DocumentStats>({
lines: 0,
characters: 0,
selectedCharacters: 0
});
const encoding = ref('UTF-8');
const editorView = ref<EditorView | null>(null);
const fontSize = ref(DEFAULT_FONT_SIZE);
// 方法
function setEditorView(view: EditorView | null) {
editorView.value = view;
}
function updateDocumentStats(stats: DocumentStats) {
documentStats.value = stats;
}
function setEncoding(newEncoding: string) {
encoding.value = newEncoding;
}
// 字体缩放
function increaseFontSize() {
if (fontSize.value < MAX_FONT_SIZE) {
fontSize.value += 1;
applyFontSize();
}
}
function decreaseFontSize() {
if (fontSize.value > MIN_FONT_SIZE) {
fontSize.value -= 1;
applyFontSize();
}
}
function resetFontSize() {
fontSize.value = DEFAULT_FONT_SIZE;
applyFontSize();
}
function applyFontSize() {
if (!editorView.value) return;
// 更新编辑器的字体大小
const editorDOM = editorView.value.dom;
if (editorDOM) {
editorDOM.style.fontSize = `${fontSize.value}px`;
}
}
// 设置按钮操作
function openSettings() {
console.log('打开设置面板');
// 此处可以实现设置面板的逻辑
}
return {
// 状态
documentStats,
encoding,
editorView,
fontSize,
const documentStats = ref<DocumentStats>({
lines: 0,
characters: 0,
selectedCharacters: 0
});
// 编码
const encoding = ref('UTF-8');
// 编辑器视图
const editorView = ref<EditorView | null>(null);
// 字体大小
const fontSize = ref(DEFAULT_FONT_SIZE);
// Tab键设置
const enableTabIndent = ref(true);
// Tab键大小
const tabSize = ref(DEFAULT_TAB_SIZE);
// 方法
setEditorView,
updateDocumentStats,
setEncoding,
openSettings,
increaseFontSize,
decreaseFontSize,
resetFontSize,
applyFontSize
};
});
function setEditorView(view: EditorView | null) {
editorView.value = view;
}
// 更新文档统计信息
function updateDocumentStats(stats: DocumentStats) {
documentStats.value = stats;
}
// 设置编码
function setEncoding(newEncoding: string) {
encoding.value = newEncoding;
}
// 字体缩放
function increaseFontSize() {
if (fontSize.value < MAX_FONT_SIZE) {
fontSize.value += 1;
applyFontSize();
}
}
// 字体缩放
function decreaseFontSize() {
if (fontSize.value > MIN_FONT_SIZE) {
fontSize.value -= 1;
applyFontSize();
}
}
// 重置字体大小
function resetFontSize() {
fontSize.value = DEFAULT_FONT_SIZE;
applyFontSize();
}
// 应用字体大小
function applyFontSize() {
if (!editorView.value) return;
// 更新编辑器的字体大小
const editorDOM = editorView.value.dom;
if (editorDOM) {
editorDOM.style.fontSize = `${fontSize.value}px`;
}
}
// Tab相关方法
function toggleTabIndent() {
enableTabIndent.value = !enableTabIndent.value;
}
// 增加Tab大小
function increaseTabSize() {
if (tabSize.value < MAX_TAB_SIZE) {
tabSize.value += 1;
}
}
// 减少Tab大小
function decreaseTabSize() {
if (tabSize.value > MIN_TAB_SIZE) {
tabSize.value -= 1;
}
}
// 设置按钮操作
function openSettings() {
console.log('打开设置面板');
// 此处可以实现设置面板的逻辑
}
return {
// 状态
documentStats,
encoding,
editorView,
fontSize,
enableTabIndent,
tabSize,
// 方法
setEditorView,
updateDocumentStats,
setEncoding,
openSettings,
increaseFontSize,
decreaseFontSize,
resetFontSize,
applyFontSize,
toggleTabIndent,
increaseTabSize,
decreaseTabSize
};
}, {
persist: {
key: 'editor',
storage: localStorage,
pick: ['fontSize', 'encoding', 'enableTabIndent', 'tabSize']
}
});