-
Notifications
You must be signed in to change notification settings - Fork 217
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: Drawio not available with GROWI slides #8725
fix: Drawio not available with GROWI slides #8725
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
RevisionRenderer は Comment や CustomSidebar からも使われているので、このコンポーネントに SlideViewer との切り替え機能を持たせるのは不適切
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
こちらの対応として現在次の方法を考えています。
- RevisionRenderer 内で切り替える
- RendererOptions に新たに isEnableSlide: boolean 等のスライドを使用できるか判別する key を導入して、今回同様 RevisionRenderer で判別、切り替えを行う。
- RevisionRenderer を使用するコンポーネントで切り替える。
- 例えば
PageEditor, PageView 等は RevisionRenderer を使用しているが、スライドを使用できるため、これらに切り替えの機能をもたせる。Comment 等はそのまま SlideViewer を用いる。
- 例えば
どちらの方が良い or それ以外の方法の方が良い等教えていただければ幸いです。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
2がよいです
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
2 で実装しました。
もともとスライドが使用可能だった rendererOptions は useViewOpitons と usePreviewOptions が返すものであり、前者は PageView.tsx と ShareLinkPageView.tsx が使用、後者は最終的に Preview.tsx のみにおいて使用されていました。よってこれら3つのファイルで切り替えをするようにしました。
ですが、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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ここで dynamic import してしまうと本文が SSR されなくなるので NG
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
確かに 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ここで dynamic import してしまうと本文が SSR されなくなるので NG
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
確かに 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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
これでは SSR されないのでだめです
ブラウザのネットワークタブで、レスポンス中に RevisionRenderer でレンダリングされるべき HTML が入っているかどうかを確認してください。
rendererOptions={rendererOptions} | ||
markdown={markdown} | ||
/> | ||
</SlideRenderer> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
こちらも 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