✨ Added tab indentation
This commit is contained in:
@@ -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;
|
||||
|
@@ -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(() => {
|
||||
|
@@ -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']
|
||||
}
|
||||
});
|
Reference in New Issue
Block a user