✨ Added context menu
This commit is contained in:
@@ -18,7 +18,7 @@ export default {
|
||||
blockLanguage: 'Block Language',
|
||||
searchLanguage: 'Search language...',
|
||||
noLanguageFound: 'No language found',
|
||||
formatHint: 'Current block supports formatting, use Ctrl+Shift+F shortcut for formatting',
|
||||
formatHint: 'Click Format Block (Ctrl+Shift+F)',
|
||||
// Document selector
|
||||
selectDocument: 'Select Document',
|
||||
searchOrCreateDocument: 'Search or enter new document name...',
|
||||
@@ -201,12 +201,10 @@ export default {
|
||||
name: 'Minimap',
|
||||
description: 'Display minimap overview of the document'
|
||||
},
|
||||
|
||||
search: {
|
||||
name: 'Search',
|
||||
description: 'Text search and replace functionality'
|
||||
},
|
||||
|
||||
fold: {
|
||||
name: 'Code Folding',
|
||||
description: 'Collapse and expand code sections for better readability'
|
||||
@@ -220,6 +218,10 @@ export default {
|
||||
checkbox: {
|
||||
name: 'Checkbox',
|
||||
description: 'Render [x] and [ ] as interactive checkboxes'
|
||||
},
|
||||
codeblock: {
|
||||
name: 'Code Block',
|
||||
description: 'Code block related functionality'
|
||||
}
|
||||
},
|
||||
monitor: {
|
||||
|
||||
@@ -18,7 +18,7 @@ export default {
|
||||
blockLanguage: '块语言',
|
||||
searchLanguage: '搜索语言...',
|
||||
noLanguageFound: '未找到匹配的语言',
|
||||
formatHint: '当前区块支持格式化，使用 Ctrl+Shift+F 进行格式化',
|
||||
formatHint: '点击格式化区块（Ctrl+Shift+F）',
|
||||
// 文档选择器
|
||||
selectDocument: '选择文档',
|
||||
searchOrCreateDocument: '搜索或输入新文档名...',
|
||||
@@ -202,12 +202,10 @@ export default {
|
||||
name: '小地图',
|
||||
description: '显示小地图视图'
|
||||
},
|
||||
|
||||
search: {
|
||||
name: '搜索功能',
|
||||
description: '文本搜索和替换功能'
|
||||
},
|
||||
|
||||
fold: {
|
||||
name: '代码折叠',
|
||||
description: '折叠和展开代码段以提高代码可读性'
|
||||
@@ -221,6 +219,10 @@ export default {
|
||||
checkbox: {
|
||||
name: '选择框',
|
||||
description: '将 [x] 和 [ ] 渲染为可交互的选择框'
|
||||
},
|
||||
codeblock: {
|
||||
name: '代码块',
|
||||
description: '代码块相关功能'
|
||||
}
|
||||
},
|
||||
monitor: {
|
||||
|
||||
@@ -21,6 +21,8 @@ import {
|
||||
import {history} from '@codemirror/commands';
|
||||
import {highlightSelectionMatches} from '@codemirror/search';
|
||||
import {autocompletion, closeBrackets, closeBracketsKeymap} from '@codemirror/autocomplete';
|
||||
import createEditorContextMenu from '../contextMenu';
|
||||
|
||||
// 基本编辑器设置
|
||||
export const createBasicSetup = (): Extension[] => {
|
||||
return [
|
||||
@@ -53,6 +55,9 @@ export const createBasicSetup = (): Extension[] => {
|
||||
// 自动完成
|
||||
autocompletion(),
|
||||
|
||||
// 上下文菜单
|
||||
createEditorContextMenu(),
|
||||
|
||||
// 键盘映射
|
||||
keymap.of([
|
||||
...closeBracketsKeymap,
|
||||
|
||||
156
frontend/src/views/editor/contextMenu/contextMenu.css
Normal file
156
frontend/src/views/editor/contextMenu/contextMenu.css
Normal file
@@ -0,0 +1,156 @@
|
||||
/**
|
||||
* 编辑器上下文菜单样式
|
||||
* 支持系统主题自动适配
|
||||
*/
|
||||
|
||||
.cm-context-menu {
|
||||
position: fixed;
|
||||
background-color: var(--settings-card-bg);
|
||||
color: var(--settings-text);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
padding: 4px 0;
|
||||
/* 优化阴影效果，只在右下角显示自然的阴影 */
|
||||
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12);
|
||||
min-width: 200px;
|
||||
max-width: 320px;
|
||||
z-index: 9999;
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
transition: opacity 0.15s ease-out, transform 0.15s ease-out;
|
||||
overflow: visible; /* 确保子菜单可以显示在外部 */
|
||||
}
|
||||
|
||||
.cm-context-menu-item {
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
transition: all 0.1s ease;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.cm-context-menu-item:hover {
|
||||
background-color: var(--toolbar-button-hover);
|
||||
color: var(--toolbar-text);
|
||||
}
|
||||
|
||||
.cm-context-menu-item-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.cm-context-menu-item-shortcut {
|
||||
opacity: 0.7;
|
||||
font-size: 12px;
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--settings-input-bg);
|
||||
color: var(--settings-text-secondary);
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.cm-context-menu-item-ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background-color: var(--selection-bg);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
opacity: 0.5;
|
||||
transform: scale(0);
|
||||
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* 菜单分组标题样式 */
|
||||
.cm-context-menu-group-title {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* 菜单分隔线样式 */
|
||||
.cm-context-menu-divider {
|
||||
height: 1px;
|
||||
background-color: var(--border-color);
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
/* 子菜单样式 */
|
||||
.cm-context-submenu-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cm-context-menu-item-with-submenu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cm-context-menu-item-with-submenu::after {
|
||||
content: "›";
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
font-size: 16px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.cm-context-submenu {
|
||||
position: fixed; /* 改为fixed定位，避免受父元素影响 */
|
||||
min-width: 180px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateX(10px);
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
z-index: 10000;
|
||||
border-radius: 6px;
|
||||
background-color: var(--settings-card-bg);
|
||||
color: var(--settings-text);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 4px 0;
|
||||
/* 子菜单也使用相同的阴影效果 */
|
||||
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.12);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.cm-context-menu-item-with-submenu:hover .cm-context-submenu {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* 深色主题下的特殊样式 */
|
||||
:root[data-theme="dark"] .cm-context-menu {
|
||||
/* 深色主题下阴影更深，但仍然只在右下角 */
|
||||
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .cm-context-submenu {
|
||||
/* 深色主题下子菜单阴影 */
|
||||
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .cm-context-menu-divider {
|
||||
background-color: var(--dark-border-color);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* 动画相关类 */
|
||||
.cm-context-menu.show {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.cm-context-menu.hide {
|
||||
opacity: 0;
|
||||
}
|
||||
426
frontend/src/views/editor/contextMenu/contextMenuView.ts
Normal file
426
frontend/src/views/editor/contextMenu/contextMenuView.ts
Normal file
@@ -0,0 +1,426 @@
|
||||
/**
|
||||
* 上下文菜单视图实现
|
||||
* 处理菜单的创建、定位和事件绑定
|
||||
* 优化为单例模式，避免频繁创建和销毁DOM元素
|
||||
*/
|
||||
|
||||
import { EditorView } from "@codemirror/view";
|
||||
import { MenuItem } from "../contextMenu";
|
||||
import "./contextMenu.css";
|
||||
|
||||
// 为Window对象添加cmSubmenus属性
|
||||
declare global {
|
||||
interface Window {
|
||||
cmSubmenus?: Map<string, HTMLElement>;
|
||||
}
|
||||
}
|
||||
|
||||
// 菜单DOM元素缓存
|
||||
let menuElement: HTMLElement | null = null;
|
||||
let clickOutsideHandler: ((e: MouseEvent) => void) | null = null;
|
||||
// 子菜单缓存池
|
||||
let submenuPool: Map<string, HTMLElement> = new Map();
|
||||
|
||||
/**
|
||||
* 获取或创建菜单DOM元素
|
||||
*/
|
||||
function getOrCreateMenuElement(): HTMLElement {
|
||||
if (!menuElement) {
|
||||
menuElement = document.createElement("div");
|
||||
menuElement.className = "cm-context-menu";
|
||||
menuElement.style.display = "none";
|
||||
document.body.appendChild(menuElement);
|
||||
|
||||
// 阻止菜单内右键点击冒泡
|
||||
menuElement.addEventListener('contextmenu', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return false;
|
||||
});
|
||||
}
|
||||
return menuElement;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建或获取子菜单元素
|
||||
* @param id 子菜单唯一标识
|
||||
*/
|
||||
function getOrCreateSubmenu(id: string): HTMLElement {
|
||||
if (!submenuPool.has(id)) {
|
||||
const submenu = document.createElement("div");
|
||||
submenu.className = "cm-context-menu cm-context-submenu";
|
||||
submenu.style.display = "none";
|
||||
document.body.appendChild(submenu);
|
||||
submenuPool.set(id, submenu);
|
||||
|
||||
// 阻止子菜单点击事件冒泡
|
||||
submenu.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
});
|
||||
}
|
||||
return submenuPool.get(id)!;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建菜单项DOM元素
|
||||
*/
|
||||
function createMenuItemElement(item: MenuItem, view: EditorView): HTMLElement {
|
||||
// 创建菜单项容器
|
||||
const menuItem = document.createElement("div");
|
||||
menuItem.className = "cm-context-menu-item";
|
||||
|
||||
// 如果有子菜单，添加相应类
|
||||
if (item.submenu && item.submenu.length > 0) {
|
||||
menuItem.classList.add("cm-context-menu-item-with-submenu");
|
||||
}
|
||||
|
||||
// 创建内容容器
|
||||
const contentContainer = document.createElement("div");
|
||||
contentContainer.className = "cm-context-menu-item-label";
|
||||
|
||||
// 标签文本
|
||||
const label = document.createElement("span");
|
||||
label.textContent = item.label;
|
||||
contentContainer.appendChild(label);
|
||||
menuItem.appendChild(contentContainer);
|
||||
|
||||
// 快捷键提示（如果有）
|
||||
if (item.shortcut) {
|
||||
const shortcut = document.createElement("span");
|
||||
shortcut.className = "cm-context-menu-item-shortcut";
|
||||
shortcut.textContent = item.shortcut;
|
||||
menuItem.appendChild(shortcut);
|
||||
}
|
||||
|
||||
// 如果有子菜单，创建或获取子菜单
|
||||
if (item.submenu && item.submenu.length > 0) {
|
||||
// 使用菜单项标签作为子菜单ID
|
||||
const submenuId = `submenu-${item.label.replace(/\s+/g, '-').toLowerCase()}`;
|
||||
const submenu = getOrCreateSubmenu(submenuId);
|
||||
|
||||
// 清空现有子菜单内容
|
||||
while (submenu.firstChild) {
|
||||
submenu.removeChild(submenu.firstChild);
|
||||
}
|
||||
|
||||
// 添加子菜单项
|
||||
item.submenu.forEach(subItem => {
|
||||
const subMenuItemElement = createMenuItemElement(subItem, view);
|
||||
submenu.appendChild(subMenuItemElement);
|
||||
});
|
||||
|
||||
// 初始状态设置为隐藏
|
||||
submenu.style.opacity = '0';
|
||||
submenu.style.pointerEvents = 'none';
|
||||
submenu.style.visibility = 'hidden';
|
||||
submenu.style.display = 'block';
|
||||
|
||||
// 当鼠标悬停在菜单项上时，显示子菜单
|
||||
menuItem.addEventListener('mouseenter', () => {
|
||||
const rect = menuItem.getBoundingClientRect();
|
||||
|
||||
// 计算子菜单位置
|
||||
submenu.style.left = `${rect.right}px`;
|
||||
submenu.style.top = `${rect.top}px`;
|
||||
|
||||
// 检查子菜单是否会超出屏幕右侧
|
||||
setTimeout(() => {
|
||||
const submenuRect = submenu.getBoundingClientRect();
|
||||
if (submenuRect.right > window.innerWidth) {
|
||||
// 如果会超出右侧，则显示在左侧
|
||||
submenu.style.left = `${rect.left - submenuRect.width}px`;
|
||||
}
|
||||
|
||||
// 检查子菜单是否会超出屏幕底部
|
||||
if (submenuRect.bottom > window.innerHeight) {
|
||||
// 如果会超出底部，则向上调整
|
||||
const newTop = rect.top - (submenuRect.bottom - window.innerHeight);
|
||||
submenu.style.top = `${Math.max(0, newTop)}px`;
|
||||
}
|
||||
}, 0);
|
||||
|
||||
// 显示子菜单
|
||||
submenu.style.opacity = '1';
|
||||
submenu.style.pointerEvents = 'auto';
|
||||
submenu.style.visibility = 'visible';
|
||||
submenu.style.transform = 'translateX(0)';
|
||||
});
|
||||
|
||||
// 当鼠标离开菜单项时，隐藏子菜单
|
||||
menuItem.addEventListener('mouseleave', (e) => {
|
||||
// 检查是否移动到子菜单上
|
||||
const toElement = e.relatedTarget as HTMLElement;
|
||||
if (submenu.contains(toElement)) {
|
||||
return; // 如果移动到子菜单上，不隐藏
|
||||
}
|
||||
|
||||
// 隐藏子菜单
|
||||
submenu.style.opacity = '0';
|
||||
submenu.style.pointerEvents = 'none';
|
||||
submenu.style.transform = 'translateX(10px)';
|
||||
|
||||
// 延迟设置visibility，以便过渡动画能够完成
|
||||
setTimeout(() => {
|
||||
if (submenu.style.opacity === '0') {
|
||||
submenu.style.visibility = 'hidden';
|
||||
}
|
||||
}, 200);
|
||||
});
|
||||
|
||||
// 当鼠标离开子菜单时，隐藏它
|
||||
submenu.addEventListener('mouseleave', (e) => {
|
||||
// 检查是否移动回父菜单项
|
||||
const toElement = e.relatedTarget as HTMLElement;
|
||||
if (menuItem.contains(toElement)) {
|
||||
return; // 如果移动回父菜单项，不隐藏
|
||||
}
|
||||
|
||||
// 隐藏子菜单
|
||||
submenu.style.opacity = '0';
|
||||
submenu.style.pointerEvents = 'none';
|
||||
submenu.style.transform = 'translateX(10px)';
|
||||
|
||||
// 延迟设置visibility，以便过渡动画能够完成
|
||||
setTimeout(() => {
|
||||
if (submenu.style.opacity === '0') {
|
||||
submenu.style.visibility = 'hidden';
|
||||
}
|
||||
}, 200);
|
||||
});
|
||||
|
||||
// 记录子菜单
|
||||
if (!window.cmSubmenus) {
|
||||
window.cmSubmenus = new Map();
|
||||
}
|
||||
window.cmSubmenus.set(submenuId, submenu);
|
||||
}
|
||||
|
||||
// 点击事件（仅当有command时添加）
|
||||
if (item.command) {
|
||||
menuItem.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
// 添加点击动画效果
|
||||
const ripple = document.createElement("div");
|
||||
ripple.className = "cm-context-menu-item-ripple";
|
||||
|
||||
// 计算相对位置
|
||||
const rect = menuItem.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
ripple.style.left = (x - 50) + "px";
|
||||
ripple.style.top = (y - 50) + "px";
|
||||
|
||||
menuItem.appendChild(ripple);
|
||||
|
||||
// 执行点击动画
|
||||
setTimeout(() => {
|
||||
ripple.style.transform = "scale(1)";
|
||||
ripple.style.opacity = "0";
|
||||
|
||||
// 动画完成后移除ripple元素
|
||||
setTimeout(() => {
|
||||
if (ripple.parentNode === menuItem) {
|
||||
menuItem.removeChild(ripple);
|
||||
}
|
||||
}, 300);
|
||||
}, 10);
|
||||
|
||||
// 执行命令
|
||||
item.command!(view);
|
||||
|
||||
// 隐藏菜单
|
||||
hideContextMenu();
|
||||
});
|
||||
}
|
||||
|
||||
return menuItem;
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建分隔线
|
||||
*/
|
||||
function createDivider(): HTMLElement {
|
||||
const divider = document.createElement("div");
|
||||
divider.className = "cm-context-menu-divider";
|
||||
return divider;
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加菜单组
|
||||
* @param menuElement 菜单元素
|
||||
* @param title 菜单组标题
|
||||
* @param items 菜单项
|
||||
* @param view 编辑器视图
|
||||
*/
|
||||
function addMenuGroup(menuElement: HTMLElement, title: string | null, items: MenuItem[], view: EditorView): void {
|
||||
// 如果有标题，添加组标题
|
||||
if (title) {
|
||||
const groupTitle = document.createElement("div");
|
||||
groupTitle.className = "cm-context-menu-group-title";
|
||||
groupTitle.textContent = title;
|
||||
menuElement.appendChild(groupTitle);
|
||||
}
|
||||
|
||||
// 添加菜单项
|
||||
items.forEach(item => {
|
||||
const menuItemElement = createMenuItemElement(item, view);
|
||||
menuElement.appendChild(menuItemElement);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示上下文菜单
|
||||
*/
|
||||
export function showContextMenu(view: EditorView, clientX: number, clientY: number, items: MenuItem[]): void {
|
||||
// 获取或创建菜单元素
|
||||
const menu = getOrCreateMenuElement();
|
||||
|
||||
// 如果已经有菜单显示，先隐藏所有子菜单
|
||||
hideAllSubmenus();
|
||||
|
||||
// 清空现有菜单项
|
||||
while (menu.firstChild) {
|
||||
menu.removeChild(menu.firstChild);
|
||||
}
|
||||
|
||||
// 添加主菜单项
|
||||
items.forEach(item => {
|
||||
const menuItemElement = createMenuItemElement(item, view);
|
||||
menu.appendChild(menuItemElement);
|
||||
});
|
||||
|
||||
// 显示菜单
|
||||
menu.style.display = "block";
|
||||
|
||||
// 定位菜单
|
||||
positionMenu(menu, clientX, clientY);
|
||||
|
||||
|
||||
// 添加点击外部关闭事件
|
||||
if (clickOutsideHandler) {
|
||||
document.removeEventListener("click", clickOutsideHandler, true);
|
||||
}
|
||||
|
||||
clickOutsideHandler = (e: MouseEvent) => {
|
||||
// 检查点击是否在菜单外
|
||||
if (menu && !menu.contains(e.target as Node)) {
|
||||
let isInSubmenu = false;
|
||||
|
||||
// 检查是否点击在子菜单内
|
||||
if (window.cmSubmenus) {
|
||||
window.cmSubmenus.forEach((submenu) => {
|
||||
if (submenu.contains(e.target as Node)) {
|
||||
isInSubmenu = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (!isInSubmenu) {
|
||||
hideContextMenu();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 使用捕获阶段确保事件被处理
|
||||
document.addEventListener("click", clickOutsideHandler, true);
|
||||
|
||||
// ESC键关闭
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
|
||||
// 触发显示动画
|
||||
setTimeout(() => {
|
||||
if (menu) {
|
||||
menu.classList.add("show");
|
||||
}
|
||||
}, 10);
|
||||
}
|
||||
|
||||
/**
|
||||
* 隐藏所有子菜单
|
||||
*/
|
||||
function hideAllSubmenus(): void {
|
||||
if (window.cmSubmenus) {
|
||||
window.cmSubmenus.forEach((submenu) => {
|
||||
submenu.style.opacity = '0';
|
||||
submenu.style.pointerEvents = 'none';
|
||||
submenu.style.visibility = 'hidden';
|
||||
submenu.style.transform = 'translateX(10px)';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理键盘事件
|
||||
*/
|
||||
function handleKeyDown(e: KeyboardEvent): void {
|
||||
if (e.key === "Escape") {
|
||||
hideContextMenu();
|
||||
document.removeEventListener("keydown", handleKeyDown);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 隐藏上下文菜单
|
||||
*/
|
||||
export function hideContextMenu(): void {
|
||||
// 隐藏所有子菜单
|
||||
hideAllSubmenus();
|
||||
|
||||
if (menuElement) {
|
||||
// 添加淡出动画
|
||||
menuElement.classList.remove("show");
|
||||
menuElement.classList.add("hide");
|
||||
|
||||
// 等待动画完成后隐藏（不移除DOM元素）
|
||||
setTimeout(() => {
|
||||
if (menuElement) {
|
||||
menuElement.style.display = "none";
|
||||
menuElement.classList.remove("hide");
|
||||
}
|
||||
}, 150);
|
||||
}
|
||||
|
||||
if (clickOutsideHandler) {
|
||||
document.removeEventListener("click", clickOutsideHandler, true);
|
||||
clickOutsideHandler = null;
|
||||
}
|
||||
|
||||
document.removeEventListener("keydown", handleKeyDown);
|
||||
}
|
||||
|
||||
/**
|
||||
* 定位菜单元素
|
||||
*/
|
||||
function positionMenu(menu: HTMLElement, clientX: number, clientY: number): void {
|
||||
// 获取窗口尺寸
|
||||
const windowWidth = window.innerWidth;
|
||||
const windowHeight = window.innerHeight;
|
||||
|
||||
// 初始位置设置
|
||||
let left = clientX;
|
||||
let top = clientY;
|
||||
|
||||
// 确保菜单在视窗内
|
||||
setTimeout(() => {
|
||||
// 计算菜单尺寸
|
||||
const menuWidth = menu.offsetWidth;
|
||||
const menuHeight = menu.offsetHeight;
|
||||
|
||||
// 确保菜单不会超出右侧边界
|
||||
if (left + menuWidth > windowWidth) {
|
||||
left = windowWidth - menuWidth - 5;
|
||||
}
|
||||
|
||||
// 确保菜单不会超出底部边界
|
||||
if (top + menuHeight > windowHeight) {
|
||||
top = windowHeight - menuHeight - 5;
|
||||
}
|
||||
|
||||
// 应用位置
|
||||
menu.style.left = `${left}px`;
|
||||
menu.style.top = `${top}px`;
|
||||
}, 0);
|
||||
}
|
||||
229
frontend/src/views/editor/contextMenu/index.ts
Normal file
229
frontend/src/views/editor/contextMenu/index.ts
Normal file
@@ -0,0 +1,229 @@
|
||||
/**
|
||||
* 编辑器上下文菜单实现
|
||||
* 提供基本的复制、剪切、粘贴等操作，支持动态快捷键显示
|
||||
*/
|
||||
|
||||
import { EditorView } from "@codemirror/view";
|
||||
import { Extension } from "@codemirror/state";
|
||||
import { copyCommand, cutCommand, pasteCommand } from "../extensions/codeblock/copyPaste";
|
||||
import { KeyBindingCommand } from "@/../bindings/voidraft/internal/models/models";
|
||||
import { useKeybindingStore } from "@/stores/keybindingStore";
|
||||
import {
|
||||
undo, redo
|
||||
} from "@codemirror/commands";
|
||||
import {
|
||||
deleteBlock, formatCurrentBlock,
|
||||
addNewBlockAfterCurrent, addNewBlockAfterLast, addNewBlockBeforeCurrent
|
||||
} from "../extensions/codeblock/commands";
|
||||
import { commandRegistry } from "@/views/editor/keymap";
|
||||
import i18n from "@/i18n";
|
||||
import {useSystemStore} from "@/stores/systemStore";
|
||||
|
||||
/**
|
||||
* 菜单项类型定义
|
||||
*/
|
||||
export interface MenuItem {
|
||||
/** 菜单项显示文本 */
|
||||
label: string;
|
||||
|
||||
/** 点击时执行的命令 (如果有子菜单，可以为null) */
|
||||
command?: (view: EditorView) => boolean;
|
||||
|
||||
/** 快捷键提示文本 (可选) */
|
||||
shortcut?: string;
|
||||
|
||||
/** 子菜单项 (可选) */
|
||||
submenu?: MenuItem[];
|
||||
}
|
||||
|
||||
// 导入相关功能
|
||||
import { showContextMenu } from "./contextMenuView";
|
||||
|
||||
/**
|
||||
* 获取翻译文本
|
||||
* @param key 翻译键
|
||||
* @returns 翻译后的文本
|
||||
*/
|
||||
function t(key: string): string {
|
||||
return i18n.global.t(key);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取快捷键显示文本
|
||||
* @param command 命令ID
|
||||
* @returns 快捷键显示文本
|
||||
*/
|
||||
function getShortcutText(command: KeyBindingCommand): string {
|
||||
try {
|
||||
const keybindingStore = useKeybindingStore();
|
||||
|
||||
// 如果找到该命令的快捷键配置
|
||||
const binding = keybindingStore.keyBindings.find(kb =>
|
||||
kb.command === command && kb.enabled
|
||||
);
|
||||
|
||||
if (binding && binding.key) {
|
||||
// 格式化快捷键显示
|
||||
return formatKeyBinding(binding.key);
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn("An error occurred while getting the shortcut:", error);
|
||||
}
|
||||
|
||||
return "";
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化快捷键显示
|
||||
* @param keyBinding 快捷键字符串
|
||||
* @returns 格式化后的显示文本
|
||||
*/
|
||||
function formatKeyBinding(keyBinding: string): string {
|
||||
// 获取系统信息
|
||||
const systemStore = useSystemStore();
|
||||
const isMac = systemStore.isMacOS;
|
||||
|
||||
// 替换修饰键名称为更友好的显示
|
||||
return keyBinding
|
||||
.replace("Mod", isMac ? "⌘" : "Ctrl")
|
||||
.replace("Shift", isMac ? "⇧" : "Shift")
|
||||
.replace("Alt", isMac ? "⌥" : "Alt")
|
||||
.replace("Ctrl", isMac ? "⌃" : "Ctrl")
|
||||
.replace(/-/g, " + ");
|
||||
}
|
||||
|
||||
/**
|
||||
* 从命令注册表获取命令处理程序和翻译键
|
||||
* @param command 命令ID
|
||||
* @returns 命令处理程序和翻译键
|
||||
*/
|
||||
function getCommandInfo(command: KeyBindingCommand): { handler: (view: EditorView) => boolean, descriptionKey: string } | undefined {
|
||||
return commandRegistry[command];
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建编辑菜单项
|
||||
*/
|
||||
function createEditItems(): MenuItem[] {
|
||||
return [
|
||||
{
|
||||
label: t("keybindings.commands.blockCopy"),
|
||||
command: copyCommand,
|
||||
shortcut: getShortcutText(KeyBindingCommand.BlockCopyCommand)
|
||||
},
|
||||
{
|
||||
label: t("keybindings.commands.blockCut"),
|
||||
command: cutCommand,
|
||||
shortcut: getShortcutText(KeyBindingCommand.BlockCutCommand)
|
||||
},
|
||||
{
|
||||
label: t("keybindings.commands.blockPaste"),
|
||||
command: pasteCommand,
|
||||
shortcut: getShortcutText(KeyBindingCommand.BlockPasteCommand)
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建历史操作菜单项
|
||||
*/
|
||||
function createHistoryItems(): MenuItem[] {
|
||||
return [
|
||||
{
|
||||
label: t("keybindings.commands.historyUndo"),
|
||||
command: undo,
|
||||
shortcut: getShortcutText(KeyBindingCommand.HistoryUndoCommand)
|
||||
},
|
||||
{
|
||||
label: t("keybindings.commands.historyRedo"),
|
||||
command: redo,
|
||||
shortcut: getShortcutText(KeyBindingCommand.HistoryRedoCommand)
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建代码块相关菜单项
|
||||
*/
|
||||
function createCodeBlockItems(): MenuItem[] {
|
||||
const defaultOptions = { defaultBlockToken: 'text', defaultBlockAutoDetect: true };
|
||||
return [
|
||||
// 格式化
|
||||
{
|
||||
label: t("keybindings.commands.blockFormat"),
|
||||
command: formatCurrentBlock,
|
||||
shortcut: getShortcutText(KeyBindingCommand.BlockFormatCommand)
|
||||
},
|
||||
// 删除
|
||||
{
|
||||
label: t("keybindings.commands.blockDelete"),
|
||||
command: deleteBlock(defaultOptions),
|
||||
shortcut: getShortcutText(KeyBindingCommand.BlockDeleteCommand)
|
||||
},
|
||||
// 在当前块后添加新块
|
||||
{
|
||||
label: t("keybindings.commands.blockAddAfterCurrent"),
|
||||
command: addNewBlockAfterCurrent(defaultOptions),
|
||||
shortcut: getShortcutText(KeyBindingCommand.BlockAddAfterCurrentCommand)
|
||||
},
|
||||
// 在当前块前添加新块
|
||||
{
|
||||
label: t("keybindings.commands.blockAddBeforeCurrent"),
|
||||
command: addNewBlockBeforeCurrent(defaultOptions),
|
||||
shortcut: getShortcutText(KeyBindingCommand.BlockAddBeforeCurrentCommand)
|
||||
},
|
||||
// 在最后添加新块
|
||||
{
|
||||
label: t("keybindings.commands.blockAddAfterLast"),
|
||||
command: addNewBlockAfterLast(defaultOptions),
|
||||
shortcut: getShortcutText(KeyBindingCommand.BlockAddAfterLastCommand)
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建主菜单项
|
||||
*/
|
||||
function createMainMenuItems(): MenuItem[] {
|
||||
// 基本编辑操作放在主菜单
|
||||
const basicItems = createEditItems();
|
||||
|
||||
// 历史操作放在主菜单
|
||||
const historyItems = createHistoryItems();
|
||||
|
||||
// 构建主菜单
|
||||
return [
|
||||
...basicItems,
|
||||
...historyItems,
|
||||
{
|
||||
label: t("extensions.codeblock.name"),
|
||||
submenu: createCodeBlockItems()
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建编辑器上下文菜单
|
||||
*/
|
||||
export function createEditorContextMenu(): Extension {
|
||||
// 为编辑器添加右键事件处理
|
||||
return EditorView.domEventHandlers({
|
||||
contextmenu: (event, view) => {
|
||||
// 阻止默认右键菜单
|
||||
event.preventDefault();
|
||||
|
||||
// 获取菜单项
|
||||
const menuItems = createMainMenuItems();
|
||||
|
||||
// 显示上下文菜单
|
||||
showContextMenu(view, event.clientX, event.clientY, menuItems);
|
||||
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 默认导出
|
||||
*/
|
||||
export default createEditorContextMenu;
|
||||
@@ -30,11 +30,15 @@ class HyperLinkIcon extends WidgetType {
|
||||
toDOM() {
|
||||
const wrapper = document.createElement('a');
|
||||
wrapper.href = this.state.url;
|
||||
wrapper.target = '_blank';
|
||||
wrapper.innerHTML = pathStr;
|
||||
wrapper.className = 'cm-hyper-link-icon';
|
||||
wrapper.rel = 'nofollow';
|
||||
wrapper.className = 'cm-hyper-link-icon cm-hyper-link-underline';
|
||||
wrapper.title = this.state.url;
|
||||
wrapper.setAttribute('data-url', this.state.url);
|
||||
wrapper.onclick = (e) => {
|
||||
e.preventDefault();
|
||||
runtime.Browser.OpenURL(this.state.url);
|
||||
return false;
|
||||
};
|
||||
const anchor = this.state.anchor && this.state.anchor(wrapper);
|
||||
return anchor || wrapper;
|
||||
}
|
||||
@@ -141,10 +145,12 @@ export const hyperLinkStyle = EditorView.baseTheme({
|
||||
color: '#0969da',
|
||||
cursor: 'pointer',
|
||||
transition: 'color 0.2s ease',
|
||||
textDecoration: 'none',
|
||||
textDecoration: 'underline',
|
||||
textDecorationColor: '#0969da',
|
||||
textDecorationThickness: '1px',
|
||||
textUnderlineOffset: '2px',
|
||||
'&:hover': {
|
||||
color: '#0550ae',
|
||||
textDecoration: 'underline',
|
||||
}
|
||||
},
|
||||
|
||||
@@ -160,9 +166,9 @@ export const hyperLinkStyle = EditorView.baseTheme({
|
||||
verticalAlign: 'middle',
|
||||
marginLeft: '0.2ch',
|
||||
color: '#656d76',
|
||||
textDecoration: 'none',
|
||||
opacity: 0.7,
|
||||
transition: 'opacity 0.2s ease, color 0.2s ease',
|
||||
cursor: 'pointer',
|
||||
'&:hover': {
|
||||
opacity: 1,
|
||||
color: '#0969da',
|
||||
@@ -197,12 +203,17 @@ export const hyperLinkStyle = EditorView.baseTheme({
|
||||
export const hyperLinkClickHandler = EditorView.domEventHandlers({
|
||||
click: (event, view) => {
|
||||
const target = event.target as HTMLElement;
|
||||
let urlElement = target;
|
||||
|
||||
if (target.classList.contains('cm-hyper-link-text')) {
|
||||
const url = target.getAttribute('data-url');
|
||||
while (urlElement && !urlElement.hasAttribute('data-url')) {
|
||||
urlElement = urlElement.parentElement as HTMLElement;
|
||||
if (!urlElement || urlElement === document.body) break;
|
||||
}
|
||||
|
||||
if (urlElement && urlElement.hasAttribute('data-url')) {
|
||||
const url = urlElement.getAttribute('data-url');
|
||||
if (url) {
|
||||
// window.open(url, '_blank', 'noopener,noreferrer');
|
||||
runtime.Browser.OpenURL(url).then()
|
||||
runtime.Browser.OpenURL(url)
|
||||
event.preventDefault();
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -97,6 +97,26 @@ const minimapClass = ViewPlugin.fromClass(
|
||||
}
|
||||
}
|
||||
|
||||
// 阻止小地图上的右键菜单
|
||||
this.dom.addEventListener('contextmenu', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return false;
|
||||
});
|
||||
|
||||
// 阻止小地图内部元素和画布上的右键菜单
|
||||
this.inner.addEventListener('contextmenu', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return false;
|
||||
});
|
||||
|
||||
this.canvas.addEventListener('contextmenu', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return false;
|
||||
});
|
||||
|
||||
if (config.autohide) {
|
||||
this.dom.classList.add('cm-minimap-autohide');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user