doocs/md

支持快捷添加内容

Open

#398 创建于 2024年9月11日

在 GitHub 查看
 (3 评论) (0 反应) (0 负责人)Vue (12,649 star) (2,142 fork)user submission
enhancementgood first issuehelp wanted

描述

1. 想法

在编辑框内容为空时，展示 placeholder：输入 "/" 快捷添加内容

image

用户输入 / 时，唤起选项弹窗，示例：

image

  • 用户选中 "H1" 时，移除编辑框中的 /，并自动添加 '# ' 到目前光标所在位置
  • 用户选中 ”代码块“时，自动添加 ```\n\n```
  • 用户选中”公式块“时，弹出公式编辑窗

image

2. 参考

LeetCode 新版编辑器

image

贡献者指南

技术栈
vuejavascripthtmlcss
领域
frontend
议题类型
feature
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
3
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
1-2 days
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
fresh
清晰度议题是否清楚说明期望改动、验收标准和下一步。
clear
前置要求
Vue.jsMarkdown editor basics
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
65
研究方向
First, understand the current editor implementation. Look at the editor component in src/ directory and identify how keyboard events are handled. Then, design a slash command plugin that intercepts '/' keypress when editor is empty, displays a popup with options like H1, code block, math block, and inserts appropriate markdown syntax. Reference the LeetCode editor for UX inspiration. Check if there is an existing popup or dropdown component to reuse.
支持快捷添加内容 · doocs/md#398 | Good First Issue