doocs/md

支持快捷添加内容

Chiusa

#398 aperta il 11 set 2024

Vedi su GitHubGuida contributor
 (3 commenti) (0 reazioni) (0 assegnatari)Vue (2142 fork)user submission
enhancementgood first issuehelp wanted

Metriche repository

Star
 (12.649 stelle)
Metriche merge PR
 (Merge medio 1g 11h) (99 PR mergiate in 30 g)

Descrizione

1. 想法

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

image

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

image

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

image

2. 参考

LeetCode 新版编辑器

image

Guida contributor

Direzione di ricerca
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.
Tech stack
vuejavascripthtmlcss
Dominio
frontend
Tipo issue
Funzionalità
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
3
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-2 giorni
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Nuova
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
Vue.jsMarkdown editor basics
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
65