Script カテゴリー「動的補完 in textarea」以前の3件

動的補完 in textarea

script javascript | 03:47 |

textarea で動く劣化コピー xml-mode 続き。

TAB 入力時動的補完リストを表示させてみる。たいして意味がない気がする。xyzzy の dabbrev に相当。

デフォルトの内容で j[TAB] とすると ja, javascript, js が候補にあがる。Down/Up で選択してもう一度 TAB を押すと補完される。

「動的」なので、適当に vfsgergfherkgr とか入力したあと、vfs[TAB] とかやれば補完される。

似非 xml-mode じゃホント意味ないなぁ。っていうかほんとはタグの予測補完をやろうと思ったんだけどめんどくてやめたんです。動的補完のが簡単だけどソレなりの面白さはあるかなと。

関係ないところでは C-x h を入力したときキーバインド一覧をだすようにしてみた。微妙。

直前に動的補完できそうな文字がない場合は、親要素に合わせて開始タグ候補をリストするようにしてみた。

xml.complementList = {
"head" : ['<meta name="" content=""/>', '<link rel="" href=""/>'],
"body" : ['<div class="section"', "<p>", "<address>"],
"div"  : ['<div class="section"', "<p>"],
"p"    : ['<abbr title', "<span class"],
"ul"   : ["<li>"],
"ol"   : ["<li>"],
"dl"   : ["<dt>", "<dd>"]
"pre"  : ["<![CDATA["]
};

キーバインドの実装

script javascript web | 11:38 |

textarea で動く劣化コピー xml-mode の入力まわりを整理して分離してみた。C-x i とかいうツーストローク以上のキーバインドも可能に。ただ、やっぱり文字入力をキャンセルさせる方法がわからないため、入力された文字をあとから削除する方法になってる。チラつく。

これである程度自由にキーバインドが変えられるようになった。

function xmlText_initialize() {
var xml = new xmlText(document.getElementById("xmltext"));
var kb = new keyBinding(document.getElementById("xmltext"), {
"C-x i" : function () { xml.indentLine() },
"TAB"   : function () { xml.indentLine() },
"C-q"   : function () { xml.indentBuffer() },
"C-."   : function () { xml.wellClose() },
"/"     : function () { xml.slash() },
"="     : function () { xml.equal() },
"RET"   : function () { xml.newLineAndIndent() }
});
}
window.addEventListener("load", xmlText_initialize, true);

劣化コピー xml-mode と一緒に使うとき、キャレット位置が若干混乱するのが微妙。なんで混乱するのかよくわからないのだけれど。

textarea のスクロール位置をセットしなおす方法が分からん。使えないって！

event.preventDefault() を使えばキャンセルできるみたいだ。書き換えよう。

あー、しかもブラウザのキーバインド横取りできる。

スクロール問題解決？

Ctrl+記号を入力すると文字が誤認される。

xml-mode in textarea

script js web | 19:03 |

textarea で動く劣化コピー xml-mode

まだまだバグがあるんだけど、ぶっちゃけ微妙に飽きてきたので公開 (してモチベーションあげる作戦)。Firefox でしか確認してない。IE では絶対動かないだろう。Opera でもたぶん動かないだろう。問題なのは setSelectionRange, selectionStart。綺麗にクロスブラウザ化するスクリプトをどっかで見たけどまぁいいや。

keydown/keyup は shift とかを単体で押しても反応しやがるので困った。keypress はイベント発生時点で、まだ textarea.value に文字が入力されないのが困った。かなりキモイ方法で解決したけど、スマートなのは keypress 単体を使って、文字入力をキャンセルする方法かなぁ。できなかったけど。

キャレット位置がおかしいバグがなおせたらそこそこ実用になるかな。

dump() しまくってるので Fx のコンソール表示させてると楽しいですよ。なにがだよ？

TAB 以外の文字でのインデントは一切考えていません。必要性を感じませんから。

属性に / を書こうとすると空要素タグ補完されてうざい。文字列の中にいるか外にいるか調べられればいいんだけどうまくいかない。タグの中の "[^"]*" をスキャンするとかなんとか。
~~たまに補完後のキャレットの位置がおかしい。原因・再現性不明~~
CDATA を見事に無視してインデントする。そんなに難しくないと思うけど、面倒くさいと思う。大して使わないのでどうでもいいちゃどうでもいい。
<empty-tag /></close-tag> みたいなときインデント崩れる。原因は空要素タグを最初から無視しているせいなんだけど、これ修正するのはめんどい。

一通り実装終わり。CDATA のインデント無視も動いてるっぽい。俺的に汚いソースを書くとインデントが崩れる素晴らしい仕様に（わらい