feat: 마크다운 편집기 사용성 개선

[Kyujenius]

작업 계기

외부 마크다운 편집기 혹은 대다수의 IDE 에서는 특정 텍스트들을 드래깅 후에, 특정 키를 누르면, 자주 사용하는 경우에는 감싸주게끔 설계되어있습니다. 따라서 다음과 같은 키들을 누를 때, 텍스트를 감싸줄 수 있게끔 도와줍니다. 현재는 드래그 후에 해당 키를 누를 시에 기존의 텍스트가 바로 덮어씌워지며 사용자 경험에 좋지 않습니다.

1. ` 키
2. < 키
3. [ 키
4. ( 키
5. { 키
6. Cmd/Ctrl + B - 볼드체
7. Cmd/Ctrl + I - 이탈릭체
8. Cmd/Ctrl + Shift + S - 취소선

    this.codemirror.on('keydown', (cm, e) => {
      const { key, ctrlKey, metaKey, shiftKey } = e;
      const doc = cm.getDoc();
      const selection = doc.getSelection();

      if (!selection) return;

      if (key === '`' && !ctrlKey && !metaKey) {
        if (selection.length > 0) {
          e.preventDefault();
          doc.replaceSelection(`\`${selection}\``);
          return;
        }
      }

      if ((ctrlKey || metaKey) && key === 'b') {
        e.preventDefault();
        doc.replaceSelection(`**${selection}**`);
        return;
      }

      if ((ctrlKey || metaKey) && key === 'i') {
        e.preventDefault();
        doc.replaceSelection(`_${selection}_`);
        return;
      }

      if ((ctrlKey || metaKey) && shiftKey && key === 's') {
        e.preventDefault();
        doc.replaceSelection(`~~${selection}~~`);
        return;
      }

      if (key === '[') {
        e.preventDefault();
        doc.replaceSelection(`[${selection}]`);
        return;
      }

      if (key === '(') {
        e.preventDefault();
        doc.replaceSelection(`(${selection})`);
        return;
      }

      if (key === '{') {
        e.preventDefault();
        doc.replaceSelection(`{${selection}}`);
        return;
      }

      if (key === '<') {
        e.preventDefault();
        doc.replaceSelection(`<${selection}>`);
        return;
      }
    });

Velog 시작한 지 얼마 안 됐는데...! PR이 반려되더라도 해당 기능 추가되면 너무 좋을 거 같아요 감사합니다