fix: Drawio not available with GROWI slides #8725
Conversation
There was a problem hiding this comment.
RevisionRenderer は Comment や CustomSidebar からも使われているので、このコンポーネントに SlideViewer との切り替え機能を持たせるのは不適切
There was a problem hiding this comment.
こちらの対応として現在次の方法を考えています。
- RevisionRenderer 内で切り替える
- RendererOptions に新たに isEnableSlide: boolean 等のスライドを使用できるか判別する key を導入して、今回同様 RevisionRenderer で判別、切り替えを行う。
- RevisionRenderer を使用するコンポーネントで切り替える。
- 例えば
PageEditor, PageView 等は RevisionRenderer を使用しているが、スライドを使用できるため、これらに切り替えの機能をもたせる。Comment 等はそのまま SlideViewer を用いる。
- 例えば
どちらの方が良い or それ以外の方法の方が良い等教えていただければ幸いです。
There was a problem hiding this comment.
2 で実装しました。
もともとスライドが使用可能だった rendererOptions は useViewOpitons と usePreviewOptions が返すものであり、前者は PageView.tsx と ShareLinkPageView.tsx が使用、後者は最終的に Preview.tsx のみにおいて使用されていました。よってこれら３つのファイルで切り替えをするようにしました。
ですが、PageView.tsx と ShareLinkPageView.tsx についてはこれらから直接 @growi/presentation を使用するとサーバーサイドからの import になるのかエラーが起こるので、dynamic import するコンポーネント ViewRenderer を噛ます形にしています。
| @@ -40,6 +38,7 @@ const Comments = dynamic<CommentsProps>(() => import('../Comments').then(mod => | |||
| const UsersHomepageFooter = dynamic<UsersHomepageFooterProps>(() => import('../UsersHomepageFooter') | |||
| .then(mod => mod.UsersHomepageFooter), { ssr: false }); | |||
| const IdenticalPathPage = dynamic(() => import('../IdenticalPathPage').then(mod => mod.IdenticalPathPage), { ssr: false }); | |||
| const ViewRenderer = dynamic(() => import('./ViewRenderer').then(mod => mod.ViewRenderer), { ssr: false }); | |||
There was a problem hiding this comment.
ここで dynamic import してしまうと本文が SSR されなくなるので NG
There was a problem hiding this comment.
確かに RevisionRenderer は SSR したかったので、SlideRenderer という dynamic import するコンポーネントを新たに作成し、それの children として RevisionRenderer を渡すようにしました。SlideRenderer 内ではスライドにするかどうかの判定を行いスライドにするなら SlideViewer を使用し、そうでなければ children (この場合 RevisionRenderer )を返すようにしています。
apps/app/src/components/ReactMarkdownComponents/SlideViewer.tsx
Outdated
Show resolved
Hide resolved
| @@ -23,7 +22,7 @@ const logger = loggerFactory('growi:Page'); | |||
|
|
|||
| const PageSideContents = dynamic<PageSideContentsProps>(() => import('./PageSideContents').then(mod => mod.PageSideContents), { ssr: false }); | |||
| const ForbiddenPage = dynamic(() => import('./ForbiddenPage'), { ssr: false }); | |||
|
|
|||
| const ViewRenderer = dynamic(() => import('./Page/ViewRenderer').then(mod => mod.ViewRenderer), { ssr: false }); | |||
There was a problem hiding this comment.
ここで dynamic import してしまうと本文が SSR されなくなるので NG
There was a problem hiding this comment.
確かに RevisionRenderer は SSR したかったので、SlideRenderer という dynamic import するコンポーネントを新たに作成し、それの children として RevisionRenderer を渡すようにしました。SlideRenderer 内ではスライドにするかどうかの判定を行いスライドにするなら SlideViewer を使用し、そうでなければ children (この場合 RevisionRenderer )を返すようにしています。
|
|
||
| <SlideRenderer markdown={markdown}> | ||
| <RevisionRenderer rendererOptions={rendererOptions} markdown={markdown} /> | ||
| </SlideRenderer> |
There was a problem hiding this comment.
これでは SSR されないのでだめです
ブラウザのネットワークタブで、レスポンス中に RevisionRenderer でレンダリングされるべき HTML が入っているかどうかを確認してください。
| rendererOptions={rendererOptions} | ||
| markdown={markdown} | ||
| /> | ||
| </SlideRenderer> |
There was a problem hiding this comment.
こちらも PageView.tsx と同様 SSR されないので NG
This reverts commit d6eff20.
|
reg-suit detected visual differences. Check this report, and review them. 🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴 What do the circles mean?The number of circles represent the number of changed images.🔴 : Changed items, ⚪ : New items, ⚫ : Deleted items, and 🔵 Passed items How can I change the check status?If reviewers approve this PR, the reg context status will be green automatically. |
Summary
slide: trueを使用した際に drawio が図として表示されない問題の修正Task
Issue
#8662