@mvc-works/codearea NPM

Codearea Script

Make <textarea/>s a bit like <codearea/>.

Usage

npm.io

yarn add @mvc-works/codearea

Put the textareaEditor.js file in the <script> tag of your page. Suppose there's tag <textarea id='area'> here, use this in your .js file:

import { codearea } from "@mvc-works/codearea"

codearea(textareaElement)

# remove events
teardownCodearea(textareaElement)

Try here: http://repo.mvc-works.org/codearea/

Details

influenced shortcuts:

enter
tab
esc
backspace
quote
brackets

shift enter
shift tab

ctrl l
ctrl u
ctrl k
ctrl enter

ctrl shift enter
ctrl shift k
ctrl shift d
ctrl shift up
ctrl shift down

Use in Respo

It can be used in Respo Effects:

(defeffect
 effect-codearea
 ()
 (action el)
 (when (= action :mount) (let [target (.querySelector el ".codearea")] (codearea target))))

Notice: a bug that codearea does not emit enough input events.

Chinese Docs

上面JS的目标是给<textarea>标签增加基本的编程功能支持, 主要是一些快捷键, 模仿Sublime Text的功能, 还有自动补全括号和缩进, 具体可以到链接尝试, 在Chrome中运行测试运行正常, 主要是获取光标位置的API和绑定键盘事件的API有差别. 大致思路是用wrap_text函数将文本框内容包装成按列处理的对象, 之后通过事件触发map_keys选取对应的key_*函数处理对象的内容, 最后write_text将对象转化回到文本写入.