キーバインドを無効化したい

tadayosi commented 3 years ago

提案・要望

Web画面で記事執筆時にCtrl+Aなどいくつかのキーバインドがエディタに設定されているが、それを無効化する設定がほしい。

背景

技術記事を執筆しているプログラマの中にはEmacsキーバインドなどを愛用している人も多いと思う。Ctrl+Aで行頭に戻る、Ctrl+Eで行末に進む、など、特定のキーバインドが干渉されると記事執筆時に非常にストレスが貯まる。

関連

N/A

cm-wada-yusuke commented 3 years ago

@tadayosi コメントありがとうございます。まずは認識を合わさせてください。 MacOS だとしたら「Ctrl+Aで行頭に戻る、Ctrl+Eで行末に進む」はOSの挙動だったと思います。たとえばこのGitHubのコメント編集欄でも同様に行頭と行末になります。

MacOSだとして、OSデフォルトの挙動を無効化してほしいということでしょうか？
または、OSデフォルトの挙動として使いたいので、Zennでバインドしている Ctrl+A と Ctrl+E を無効化してほしいということでしょうか？

上記の話とは別に、たしかにZenn側のエディタでキーバインドを設定しています。

https://codemirror.net/doc/manual.html#commands

ON/OFFは検討させていただきますが、急ぎの対応が必要であれば、Zenn CLIをご利用いただくことで、任意のエディタ、任意のキーバインドでの執筆が可能です。ご検討ください。

tadayosi commented 3 years ago

@cm-wada-yusuke MacではなくLinux（CentOS 7）になります。

MacOSだとして、OSデフォルトの挙動を無効化してほしいということでしょうか？

または、OSデフォルトの挙動として使いたいので、Zennでバインドしている Ctrl+A と Ctrl+E を無効化してほしいということでしょうか？

後者です。ブラウザ上でもCtrl+Aで行頭に行くのを期待していますが、全選択になってしまいます。この全選択になるのを無効にして、OSの挙動を有効にしたい、という要望です。（Ctrl+Eは、いま確認しましたら期待通りOSの挙動で動作しました。）

提示いただいたCodeMirrorのURLを見ると、確かにCtrl+AにselectAllが割り当てられているようです。

selectAll Ctrl-A (PC), Cmd-A (Mac) Select the whole content of the editor.

このCodeMirror独自のキーバインドを、すべて無効にするオプションを提供いただけないでしょうか。

cm-igarashi-ryosuke commented 1 year ago

[memo]

Linuxの場合、Ctrl-A (PC) のように PC のキーバインドが効いてしまう。

CodeMirrorは easy-markdown-editor の依存。 EasyMDE側でCodeMirrorのCommandをカスタマイズするオプションは用意されていない。

cm-igarashi-ryosuke commented 1 year ago

@tadayosi お時間が長く開いてしまいすみません。

こちら検討したのですが、Zennが利用しているEasyMDEからCodeMirrorのCommand機能（キーバインド）をカスタマイズする方法が見当たりませんでした。申し訳ないですがキーバインドを無効化することは難しいです。他のエディタをご利用いただくことをご検討ください。

tadayosi commented 1 year ago

@cm-igarashi-ryosuke ここを見る限り、EasyMDEはキーバインドのカスタマイズ方法を提供しているように見えますが、この方法ではCodeMirrorのキーバインドまで変更できないということでしょうか。

https://github.com/Ionaru/easy-markdown-editor#keyboard-shortcuts

EasyMDE comes with an array of predefined keyboard shortcuts, but they can be altered with a configuration option.

もしそういうことであれば、EasyMDEのバグか、少なくとも有効なRFEにはなると思うので、まずはEasyMDEのIssueに報告してはいかがでしょうか？　もしそちらで難しいなら、事実が確認できれば私の方でIssueを立ててもいいですよ。 https://github.com/Ionaru/easy-markdown-editor/issues

cm-igarashi-ryosuke commented 1 year ago

@tadayosi そちらのリンク先に

The list of actions that can be bound is the same as the list of built-in actions available for toolbar buttons.

とあります通り、EasyMDE独自の機能に対するキーバインドであると認識していました。

実際に以下のように試してみましたが、 selectAll を無効化することはできませんでした。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>EasyMDE demo</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
  </head>

  <body>
    <textarea id="my-text-area">
# Welcome to EasyMDE!

Type some **markdown** here to get started.
    </textarea>
    <script>
      const easymde = new EasyMDE({
        element: document.getElementById('my-text-area'),
        shortcuts: {
          "selectAll": null // 👈ここを追加
        }
      });
    </script>
  </body>
</html>

CodeMirrorのキーバインドをカスタマイズするには、CodeMirrorのkeymapsを編集する必要があると思いますが、そのインターフェイスはEasyMDEからは提供されていないように見えます。

https://codemirror.net/5/doc/manual.html#keymaps

tadayosi commented 1 year ago

確認ありがとうございます。記録のためにEasyMDEにIssueを立てました。 https://github.com/Ionaru/easy-markdown-editor/issues/556

CodeMirrorのキーバインドをカスタマイズするには、CodeMirrorのkeymapsを編集する必要があると思いますが、そのインターフェイスはEasyMDEからは提供されていないように見えます。

なお、関連するIssueではCodeMirrorインスタンスはeasyMDE.codemirrorで公開されているので、そこからCodeMirror固有のショートカットは設定できるのでは、というコメントが付いています。 https://github.com/Ionaru/easy-markdown-editor/issues/124#issuecomment-596619936

cm-igarashi-ryosuke commented 1 year ago

@tadayosi

なお、関連するIssueではCodeMirrorインスタンスはeasyMDE.codemirrorで公開されているので、そこからCodeMirror固有のショートカットは設定できるのでは、というコメントが付いています。

ありがとうございます。試してみたところMacですがキーバインドを上書きすることができました。

    <script>
      const easymde = new EasyMDE({
        element: document.getElementById('my-text-area'),
      });
      easymde.codemirror.setOption('extraKeys', {
        "Cmd-A": function (cm) { } // 👈ここを追加
      });
    </script>

ただ、Issueの本題にあります「キーバインドを無効化したい」というご要望につきましては、チームでも話し合いましたがzenn.dev本体のエディタに組み込むのは控えたいという結論になりました。エディタは現状でもかなり多機能になっていまして、オプションが増えるとメンテナンスコストが増えることが避けられないということが理由です。

tadayosi commented 1 year ago

@cm-igarashi-ryosuke 了解です。ご検討ありがとうございました。

zenn-dev / zenn-community

キーバインドを無効化したい #313

提案・要望

背景

関連