coexistence with CodeMirror #2

CodeMirror 上で wasavi を起動できるようにした。また、ace でも同じように特別な対応を施すようにした。

ただ、若干もったいない話ではある。CodeMirror も ace も、それ自体が高機能なエディタなのだ。また、両者とも vi っぽいキーバインドにすることができる(ex コマンドっぽいものはない)。

coexistence with CodeMirror

github 上の issue についていくつか。

#18
sqlfiddle というサイトで wasavi がうまく起動しないというもの。このサイトでは、ページ上に CodeMirror を置いている。

CodeMirror 自体が javascript と DOM と css からなる複雑な要素で構築されたテキストエディタである。一方で wasavi はシンプルな textarea に対して起動する。したがって両者の相性はそもそも良くない。CodeMirror の実行中に ctrl+enter を押すと一応 wasavi が起動するが、これはたまたま現在の CodeMirror がキーボード入力を受け付けるために隠された textarea 要素を抱えているだけの話だ。起動しても、編集中のテキストが正しく wasavi に転送されるわけでもあるいは逆に書き出せるわけでもない。

なので、単にサポート外ですと言ってもいいのだけど、なんとかならないものなのだろうか?

CodeMirror を構成するオブジェクトとしては、

  • 置き換え先の textarea 要素: CodeMirror がアクティブな間は display:none されている
  • CodeMirror の DOM 上の表現: “CodeMirror” をクラス名に含んだ div 要素
  • javascript 上の CodeMirror インスタンス

がある。wasavi の content script/injected script から、最後の CodeMirror インスタンスにアクセスできればなんとかなる。

実はこのインスタンスは div.CodeMirror 要素から参照できる。なのでページ上の javascript からは、

document.querySelector("div.CodeMirror").CodeMirror.getValue()

などとすれば CodeMirror が保持するテキスト全体を得ることはできる。しかし content script からは、参照している window が別だったりラップされていたりするのでこの方法は使えない(Opera ではできるが、inject script のコンテキストからページ上のスクリプトが生成したオブジェクトを直接呼び出すのは怖いのでやりたくない)。

wasavi が置き換える対象となる要素に対して内容を読み出したり書き込んだりする機構を汎用化してページのスクリプトのコンテキストを通すようにすればいいかもしれない。