@machidaさんが

「全てのテキストエリアはgithubみたいに画像のD&D・コピペができて欲しい。あとMarkdownで書きたい。」

と常々言っていて、僕もちょっとしたコメント欄でもMarkdownが使えたら嬉しいけどいちいち実装が面倒なので、

「確かにそうですよねー」

と言って流していました。

しかし流すのにも限界がきたので、TEXTAREを画像のD&DとコピペができるMarkdown Editorにするnpmモジュールを作りました。

komagata/textarea-markdown: Make textarea a markdown editor.

https://gyazo.com/5759ef553225cfa788adf3596b90e256

railsで使うなら下記のような感じです。

<textarea id="editor" data-preview="#preview"></textarea>
<div id="preview"></div>
import TextareaMarkdown from 'textarea-markdown'

document.addEventListener('DOMContentLoaded', () => {
  const token = document.querySelector("meta[name=\"csrf-token\"]").content;
  const textarea = document.querySelector('#editor');

  new TextareaMarkdown(textarea, {
    endPoint: '/api/image.json',
    paramName: 'file',
    responseKey: 'url',
    csrfToken: token,
    placeholder: '%filenameをアップロード中...'
  })
});

少し便利なところが、textareaのdata-previewにセレクターを入れておくとそこがpreview(HTMLが反映される場所)になるところです。

仕事で使いつつ、もうちょっとリッチな補完とか入れていく予定です。

rubyでいえばGemfileに

gem "foo", path: "~/foo"

みたいに書くヤツ。

npm linkを使う

いい感じにシンボリックリンクを貼ってくれるnpm linkを使うと良い。

npmモジュール側のディレクトリで下記。

$ npm link

利用側のディレクトリで下記。

$ npm link foo

モジュールが完成したら、下記で解除。

$ npm unlink foo

webpackerでrailsプロジェクトでもjsの再利用が進んだのでgemに負けじと活用したいです。

怖話でjsで文字幅を知る必要があったところ、こちらで神コード発見しました。

東アジアの文字幅 (East Asian Width) の判定 - 中途

コメント欄でお伺いを立ててますが、昔の記事なのでご覧になってないかも。余りにも神だったのでnpmのパッケージにしました。

東アジアの文字幅って何?とかは長くなるので下記参照。

東アジアの文字幅 - Wikipedia

類似のに比べてコードがコンパクト、そしてcharCodeAtではデフォルト対応してないサロゲートペアに対応しているのが素敵です。勝手にnpmにすんな!と言われたら直ぐ消します。すみません。

komagata/eastasianwidth · GitHub

結局、consoleとは違って等幅フォントにしても全角は半角の2倍の幅というわけじゃないのでWebでの用途(怖話)には使えませんでしたが・・・。

Install

$ npm install eastasianwidth

Usage

var eastasianwidth = require('eastasianwidth');
console.log(eastasianwidth.eastAsianWidth('₩')) // 'F'
console.log(eastasianwidth.eastAsianWidth('。')) // 'H'
console.log(eastasianwidth.eastAsianWidth('뀀')) // 'W'
console.log(eastasianwidth.eastAsianWidth('a')) // 'Na'
console.log(eastasianwidth.eastAsianWidth('①')) // 'A'
console.log(eastasianwidth.eastAsianWidth('ف')) // 'N'

coffee-scriptはnpmで入るからいいだろということでhomebrewからhomebrew-altに移動したらしいです。なのでnodeを入れてソースからnpmを入れる。

% brew install node
% curl http://npmjs.org/install.sh | sh
% npm install coffee-script -g

元のjsがある場合はjs2coffeeでcoffee化する。

% npm install js2coffee -g
% js2coffee foo.js > foo.coffee

guardやjitterで変更を検知してcoffeeをコンパイルする。titaniumで使われてるスクリプト言語はpythonなのでGuardfileがリポジトリにあると発狂する人がいる(?)のでjitterを使ってみました。(via @yagi_)

% npm install jitter -g
% jitter coffee Resources

coffeeディレクトリ以下のファイルに変更があると、同じ名前のjsがResources以下に出来る。