GROWIでコードの折り畳み表示をサポートするプラグインを作りました

オープンソースのWikiであるGROWIにはプラグイン機能が用意されています。自社のデータを表示したり、表示をカスタマイズするのに利用できます。

今回は、GROWIプラグインとしてコードの折り畳みを行えるプラグインを作りました。設定なしで、すぐに利用できます。

プラグインの動作

Markdownのコードブロック（インライン除く）を <details /> でラップするだけのシンプルな動作です。デフォルトはオープンです。

クリックすれば、折りたたまれます。

プラグインを追加する

利用する際には、GROWIの管理画面の プラグイン にて追加してください。URLは https://github.com/goofmint/growi-plugin-folding です。

コードについて

コードはgoofmint/growi-plugin-foldingにて公開しています。ライセンスはMIT Licenseになります。

見ての通り、 <details /> で囲んでいるだけです。 ignore というフラグを追加しているのは、 code ブロックが2回呼ばれる（<details /> で囲んでいるので、ネストが1つ深くなる）ので、すでに処理済みであることを判別するためです。

export const foldingCode = (Tag: React.FunctionComponent<any>): React.FunctionComponent<any> => {
  return ({ children, ...props }) => {
    try {
      if (!props.inline && !props.ignore) {
        props.ignore = true;
        return (<details open={true}>
          <Tag {...props}>{children}</Tag>
        </details>);
      }
    }
    catch (err) {
      // console.error(err);
    }
    // Return the original component if an error occurs
    return (
      <Tag {...props}>{children}</Tag>
    );
  };
};

growi-foldingの動作

特別な記載なく動作します。本プラグインを入れると、すべてのコードブロックが折り畳み対象になります。

GROWIコミュニティについて

プラグインの使い方や要望などがあれば、ぜひGROWIコミュニティにお寄せください。実現できそうなものがあれば、なるべく対応します。他にもヘルプチャンネルなどもありますので、ぜひ参加してください！

GROWI Slackへの参加はこちらから

まとめ

GROWIプラグインを使うと、表示を自由に拡張できます。足りない機能があれば、どんどん追加できます。ぜひ、自分のWikiをカスタマイズしましょう。

OSS開発wikiツールのGROWI | 快適な情報共有を、全ての人へ