GROWI Developers Wiki

{{pagename}} - {{sitename}}

Yuki Takei

# パッケージ概要

- `@growi/presentation`
    - スライドを出力するコンポーネント または プレゼンテーション表示コンポーネントを提供する
- `@growi/app`
    - @growi/presentation が提供するコンポーネントをモーダル表示させるコンポーネントを実装している


# スライドの出力

## コンポーネント概要
`@growi/presentation` の Slides コンポーネント

- markdown をインプットとして、複数の `<section>` をレンダリングする
- 通常モード
    - react-markdown (remark/rehype) を使ってレンダリングを行う
        - lsx や katex, drawio など、全ての機能をスライド化できる
    - **スタイルのみ Marp 出力の css を適用している**
    - GROWI 本体の light/dark mode に合わせてスタイル (`invert` クラスの付与) を自動で変更する
- (TBD) Marp モード -- 2023.02.13 時点では未実装
    - HTML 出力にも本物の Marp を使う
        - markdown-it で処理される

## ページ分割について
- 通常モードでは区切り線文字列(`thematicBreak` type)で区切って section タグでラップする extract-sections.ts を自前実装している
- (TBD) Marp モードでは Marp に処理が委譲される


# プレゼンテーションの出力

`@growi/presentation` の Presentation コンポーネント

- markdown をインプットとして、reveal.js で制御されたコンポーネントをレンダリングする
    - 前提として reveal.js は `.reveal > .slides > section` という構造の DOM を要求するので、  
      section エレメント群を Slides で出力し、Presentation はそれを `.reveal > .slides` でラップする

## アニメーションについて

**完全ではない**

- reveal.js で初期化すると section に必ず `[hidden]` が付いてしまうが、これのせいで bootstrap が `display: none !important` を適用してしまう
- ワークアラウンドとして、ready, slidechanged イベントが発火する度に hidden attribute を消して回っている
    - しかし `section.past` のアニメーションを再生できない問題は解決できていない

## スタイルについて

一部、reveal.js によるスタイルが適用されてしまうため、それをキャンセルし Marp のデフォルトテーマに馴染むようなスタイルをあてている  



# プレゼンテーションの起動

`@growi/app` の PagePresentationModal 参照
