UIkitのMarkdownエディタの設定を変更する

以前、UIkitのMarkdown EditorをReactコンポーネントとして利用する方法を紹介させていただいました。

今回はそのエディタの設定を変更して少し使いやすくしてみたいと思います。

デフォルトの設定のままでは、Markdownエディタ HTMLのタグを直接入力して記述することも可能です。
便利な反面、<script>タグも記載できてしまうため、そこに記述したJavaScriptを実行させることもできてしまいます。

個人的に利用するメモアプリなら「どうぞご自由に」と言いたいところですが、グループウェアで利用する場合には他人の作成したドキュメントを見ることがありますのでそこでJavaScriptが実行されるのはセキュリティの観点からも避けたいところです。

UIkitが採用しているMarkdownのパーサーはmarkedですが、基本的にはごく一般的なシンタックスのみ対応しています。

例えば、GitHubで利用できるようなタスクリストは解釈してくれません。ですが、ドキュメントを見るといくつかオプションが用意されております。

markedにデフォルトで用意されているオプション

markedのWebサイトにオプションの設定例が掲載されています。

var marked = require('marked');
marked.setOptions({
  renderer: new marked.Renderer(),
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: true,
  smartLists: true,
  smartypants: false
});

gfm

これはGitHub flavored markdownということで、GitHub風に記述できるということかな。
と期待させるのですが、対応しているのはごく一部だけのような・・・

この設定をtrueとすることで、次に指定されているtables（表）やbreaks（改行）のオプションが有効になるようです。

tables

日本のドキュメントは表のような枠組みをつかったドキュメントを作成する機会が多いので、 tablesオプションは利用できたほうが便利です。

breaks

一般的にはHTMLドキュメントで改行したい場合には行末に半角スペースを2つ入力する必要があります。
この半角スペースを行末に入力しなくても改行できるようになります。
GitHubのMarkdownエディタを利用したことがある方ならわかりますよね。

sanitize

このオプションはgfmとは関係ありませんが、冒頭に記述したとおりHTMLを直接解釈するのではなく、 HTMLで記載された文字をエスケープして、HTMLの文字として表示されるようにしてくれます。

今回は上記のオプションを設定してみます。

さて、問題は上記のオプションをどのように指定するかです。

UIkitのドキュメントには次の様にJavaScriptで利用できるとの記述があります。

var htmleditor = UIkit.htmleditor(textarea, { /* option */ });

しかし、上記のコードのoptionsに指定しても反映されません。このoptionsはmarkedのオプションではなく、 Markdownエディタのオプションだからですね。

では、どこで指定するのかですが、UIkitのHtmlEditorのソースコードを見ると、Markdownパーサーを動的に設定している箇所があります。

UI.plugin('htmleditor', 'markdown', {

    init: function(editor) {

        var parser = editor.options.mdparser || window.marked || null;

        if (!parser) return;

        if (editor.options.markdown) {
            enableMarkdown();
        }
        :

上記のコードの中央付近にwindow.markedがあります。
先ずはオプションの mdparserを取得しようとしますが、なければwindow.markedが適用されるようです。

ですので、直接htmleditorにオプションを設定するのではなく、予めmarkedにオプションを設定しておき、 markedをパーサーとして利用できるように指定すればよいことがわかります。

最終的には・・・

markedのドキュメントの通り、gfm、tablesの2つのオプションはデフォルトでtrueとなっていました。
依って、以下のように指定することで、改行の方法の変更とHTMLのサニタイジングを行うことができました。

    :
  window.marked.setOptions({breaks: true, sanitize: true});
  var htmleditor = UIkit.htmleditor(el, { mode: 'split', maxsplitsize: 600, markdown:true });
    :

この機会にmarkedのソースコードも少し眺めてみましたが、自分でパーサーのルールを拡張することができるように思えました。
もし試すことがあれば、拡張方法についてご紹介できればと思います。

UIkitのMarkdownエディタの設定を変更する

UIkitのMarkdownエディタの設定を変更する

markedにデフォルトで用意されているオプション

gfm

tables

breaks

sanitize