Fix issues for server side rendering in Next.js

[mohdsayed]

Context

See #11219

Summary

Relevant Technical Choices

To-do

User-facing changes

Testing Instructions

• [x] This is a non-user-facing change and requires no QA

This PR can be tested by following these steps:

In web-stories-wp

1. Bundle and publish all packages locally.

In Next.js setup

1. npx create-next-app@latest
2. npm i react@17 react-dom@17 as next.js is using v18
3. Use snippet from getting-started to use the editor and dashboard
4. Install all the local dependencies ( or the ones which are updated in this PR )

npm --registry http://localhost:4873/ install --save \
@googleforcreators/media \
@googleforcreators/animation \
@googleforcreators/dashboard \
@googleforcreators/date \
@googleforcreators/design-system \
@googleforcreators/dom \
@googleforcreators/element-library \
@googleforcreators/fonts \
@googleforcreators/i18n \
@googleforcreators/masks \
@googleforcreators/migration \
@googleforcreators/moveable \
@googleforcreators/output \
@googleforcreators/react \
@googleforcreators/rich-text \
@googleforcreators/stickers \
@googleforcreators/story-editor \
@googleforcreators/templates \
@googleforcreators/text-sets \
@googleforcreators/tracking \
@googleforcreators/units \
@googleforcreators/url
@googleforcreators/elements

6. npm run dev

Reviews

Does this PR have a security-related impact?

Does this PR change what data or activity we track or use?

Does this PR have a legal-related impact?

Checklist

• [ ] This PR addresses an existing issue and I have linked this PR to it in ZenHub
• [x] I have tested this code to the best of my abilities
• [ ] I have verified accessibility to the best of my abilities (docs)
• [ ] I have verified i18n and l10n (translation, right-to-left layout) to the best of my abilities
• [ ] This code is covered by automated tests (unit, integration, and/or e2e) to verify it works as intended (docs)
• [x] I have added documentation where necessary
• [x] I have added a matching Type: XYZ label to the PR

---

Fixes #11219

[mohdsayed]

With these many updates, the editor and dashboard both are working in Next.js 🥳 .

[github-actions[bot]]

Size Change: +370 B (0%)

Total Size: 2.65 MB

Filename	Size	Change
assets/js/1814.js	0 B	-7.46 kB (removed)	🏆
assets/js/7.js	0 B	-1.14 MB (removed)	🏆
assets/js/wp-story-editor.js	324 kB	+252 B (0%)
assets/js/4550.js	7.38 kB	+7.38 kB (new file)	🆕
assets/js/6468.js	1.14 MB	+1.14 MB (new file)	🆕

ℹ️ View Unchanged

Filename	Size	Change
assets/css/carousel-view-rtl.css	702 B	0 B
assets/css/carousel-view.css	701 B	0 B
assets/css/web-stories-block-rtl.css	4.52 kB	0 B
assets/css/web-stories-block.css	4.56 kB	0 B
assets/css/web-stories-embed-rtl.css	318 B	0 B
assets/css/web-stories-embed.css	317 B	0 B
assets/css/web-stories-list-styles-rtl.css	2.36 kB	0 B
assets/css/web-stories-list-styles.css	2.39 kB	0 B
assets/css/web-stories-theme-style-twentyeleven-rtl.css	102 B	0 B
assets/css/web-stories-theme-style-twentyeleven.css	102 B	0 B
assets/css/web-stories-theme-style-twentyfifteen-rtl.css	251 B	0 B
assets/css/web-stories-theme-style-twentyfifteen.css	251 B	0 B
assets/css/web-stories-theme-style-twentyfourteen-rtl.css	287 B	0 B
assets/css/web-stories-theme-style-twentyfourteen.css	287 B	0 B
assets/css/web-stories-theme-style-twentyseventeen-rtl.css	288 B	0 B
assets/css/web-stories-theme-style-twentyseventeen.css	288 B	0 B
assets/css/web-stories-theme-style-twentysixteen-rtl.css	224 B	0 B
assets/css/web-stories-theme-style-twentysixteen.css	224 B	0 B
assets/css/web-stories-theme-style-twentyten-rtl.css	143 B	0 B
assets/css/web-stories-theme-style-twentyten.css	143 B	0 B
assets/css/web-stories-theme-style-twentytwelve-rtl.css	256 B	0 B
assets/css/web-stories-theme-style-twentytwelve.css	256 B	0 B
assets/css/web-stories-theme-style-twentytwenty-rtl.css	86 B	0 B
assets/css/web-stories-theme-style-twentytwenty.css	86 B	0 B
assets/css/web-stories-theme-style-twentytwentyone-rtl.css	326 B	0 B
assets/css/web-stories-theme-style-twentytwentyone.css	326 B	0 B
assets/css/web-stories-widget-rtl.css	482 B	0 B
assets/css/web-stories-widget.css	482 B	0 B
assets/css/wp-dashboard-rtl.css	657 B	0 B
assets/css/wp-dashboard.css	659 B	0 B
assets/css/wp-story-editor-rtl.css	737 B	0 B
assets/css/wp-story-editor.css	738 B	0 B
assets/js/2505.js	34.8 kB	0 B
assets/js/3617.js	224 kB	0 B
assets/js/4422.js	49.3 kB	0 B
assets/js/5980.js	5.48 kB	0 B
assets/js/carousel-view.js	3.41 kB	0 B
assets/js/chunk-colorthief.js	2.64 kB	0 B
assets/js/chunk-ffmpeg.js	5.64 kB	0 B
assets/js/chunk-focus-visible.js	1.01 kB	0 B
assets/js/chunk-getStoryMarkup.js	5.81 kB	-12 B (0%)
assets/js/chunk-html-to-image.js	4.6 kB	0 B
assets/js/chunk-opentype.js	96 B	0 B
assets/js/chunk-react-calendar.js	12.4 kB	0 B
assets/js/chunk-react-color.js	44.3 kB	-3 B (0%)
assets/js/chunk-resize-observer-polyfill.js	2.57 kB	0 B
assets/js/chunk-web-animations-js.js	14.6 kB	0 B
assets/js/chunk-web-stories-template-0-metaData.js	545 B	-1 B (0%)
assets/js/chunk-web-stories-template-0.js	10.6 kB	0 B
assets/js/chunk-web-stories-template-1-metaData.js	540 B	0 B
assets/js/chunk-web-stories-template-1.js	9.01 kB	0 B
assets/js/chunk-web-stories-template-10-metaData.js	532 B	-1 B (0%)
assets/js/chunk-web-stories-template-10.js	6.91 kB	0 B
assets/js/chunk-web-stories-template-11-metaData.js	540 B	0 B
assets/js/chunk-web-stories-template-11.js	8.51 kB	0 B
assets/js/chunk-web-stories-template-12-metaData.js	496 B	0 B
assets/js/chunk-web-stories-template-12.js	9.48 kB	+1 B (0%)
assets/js/chunk-web-stories-template-13-metaData.js	525 B	0 B
assets/js/chunk-web-stories-template-13.js	7.3 kB	+1 B (0%)
assets/js/chunk-web-stories-template-14-metaData.js	580 B	-2 B (0%)
assets/js/chunk-web-stories-template-14.js	7.58 kB	-3 B (0%)
assets/js/chunk-web-stories-template-15-metaData.js	545 B	+1 B (0%)
assets/js/chunk-web-stories-template-15.js	8.21 kB	0 B
assets/js/chunk-web-stories-template-16-metaData.js	588 B	0 B
assets/js/chunk-web-stories-template-16.js	10.3 kB	+1 B (0%)
assets/js/chunk-web-stories-template-17-metaData.js	539 B	0 B
assets/js/chunk-web-stories-template-17.js	8.52 kB	-1 B (0%)
assets/js/chunk-web-stories-template-18-metaData.js	586 B	+1 B (0%)
assets/js/chunk-web-stories-template-18.js	9.05 kB	+2 B (0%)
assets/js/chunk-web-stories-template-19-metaData.js	501 B	0 B
assets/js/chunk-web-stories-template-19.js	10 kB	+1 B (0%)
assets/js/chunk-web-stories-template-2-metaData.js	587 B	+1 B (0%)
assets/js/chunk-web-stories-template-2.js	9.16 kB	-1 B (0%)
assets/js/chunk-web-stories-template-20-metaData.js	546 B	-2 B (0%)
assets/js/chunk-web-stories-template-20.js	8.59 kB	-2 B (0%)
assets/js/chunk-web-stories-template-21-metaData.js	534 B	0 B
assets/js/chunk-web-stories-template-21.js	9.16 kB	0 B
assets/js/chunk-web-stories-template-22-metaData.js	526 B	+1 B (0%)
assets/js/chunk-web-stories-template-22.js	7.37 kB	-1 B (0%)
assets/js/chunk-web-stories-template-23-metaData.js	605 B	0 B
assets/js/chunk-web-stories-template-23.js	6.99 kB	0 B
assets/js/chunk-web-stories-template-24-metaData.js	518 B	0 B
assets/js/chunk-web-stories-template-24.js	10.8 kB	0 B
assets/js/chunk-web-stories-template-25-metaData.js	543 B	-1 B (0%)
assets/js/chunk-web-stories-template-25.js	7.07 kB	+1 B (0%)
assets/js/chunk-web-stories-template-26-metaData.js	600 B	-1 B (0%)
assets/js/chunk-web-stories-template-26.js	6.85 kB	0 B
assets/js/chunk-web-stories-template-27-metaData.js	543 B	0 B
assets/js/chunk-web-stories-template-27.js	7.36 kB	0 B
assets/js/chunk-web-stories-template-28-metaData.js	532 B	0 B
assets/js/chunk-web-stories-template-28.js	8.49 kB	-1 B (0%)
assets/js/chunk-web-stories-template-29-metaData.js	562 B	+1 B (0%)
assets/js/chunk-web-stories-template-29.js	8.49 kB	+1 B (0%)
assets/js/chunk-web-stories-template-3-metaData.js	540 B	0 B
assets/js/chunk-web-stories-template-3.js	8.22 kB	0 B
assets/js/chunk-web-stories-template-30-metaData.js	576 B	0 B
assets/js/chunk-web-stories-template-30.js	7.67 kB	0 B
assets/js/chunk-web-stories-template-31-metaData.js	503 B	0 B
assets/js/chunk-web-stories-template-31.js	9.61 kB	0 B
assets/js/chunk-web-stories-template-32-metaData.js	551 B	0 B
assets/js/chunk-web-stories-template-32.js	12.2 kB	0 B
assets/js/chunk-web-stories-template-33-metaData.js	492 B	0 B
assets/js/chunk-web-stories-template-33.js	8.86 kB	0 B
assets/js/chunk-web-stories-template-34-metaData.js	570 B	-1 B (0%)
assets/js/chunk-web-stories-template-34.js	7.57 kB	0 B
assets/js/chunk-web-stories-template-35-metaData.js	566 B	+1 B (0%)
assets/js/chunk-web-stories-template-35.js	8.81 kB	0 B
assets/js/chunk-web-stories-template-36-metaData.js	577 B	+1 B (0%)
assets/js/chunk-web-stories-template-36.js	11.6 kB	0 B
assets/js/chunk-web-stories-template-37-metaData.js	529 B	+1 B (0%)
assets/js/chunk-web-stories-template-37.js	6.47 kB	0 B
assets/js/chunk-web-stories-template-38-metaData.js	572 B	0 B
assets/js/chunk-web-stories-template-38.js	7.96 kB	0 B
assets/js/chunk-web-stories-template-39-metaData.js	589 B	0 B
assets/js/chunk-web-stories-template-39.js	7.67 kB	0 B
assets/js/chunk-web-stories-template-4-metaData.js	564 B	-1 B (0%)
assets/js/chunk-web-stories-template-4.js	11.5 kB	0 B
assets/js/chunk-web-stories-template-40-metaData.js	555 B	-1 B (0%)
assets/js/chunk-web-stories-template-40.js	9.13 kB	-1 B (0%)
assets/js/chunk-web-stories-template-41-metaData.js	572 B	0 B
assets/js/chunk-web-stories-template-41.js	7.75 kB	+1 B (0%)
assets/js/chunk-web-stories-template-42-metaData.js	521 B	-1 B (0%)
assets/js/chunk-web-stories-template-42.js	7 kB	+1 B (0%)
assets/js/chunk-web-stories-template-43-metaData.js	558 B	0 B
assets/js/chunk-web-stories-template-43.js	8.37 kB	-2 B (0%)
assets/js/chunk-web-stories-template-44-metaData.js	582 B	0 B
assets/js/chunk-web-stories-template-44.js	10.1 kB	0 B
assets/js/chunk-web-stories-template-45-metaData.js	564 B	0 B
assets/js/chunk-web-stories-template-45.js	7.12 kB	0 B
assets/js/chunk-web-stories-template-46-metaData.js	531 B	0 B
assets/js/chunk-web-stories-template-46.js	5.01 kB	-1 B (0%)
assets/js/chunk-web-stories-template-47-metaData.js	592 B	0 B
assets/js/chunk-web-stories-template-47.js	8.46 kB	0 B
assets/js/chunk-web-stories-template-48-metaData.js	555 B	-1 B (0%)
assets/js/chunk-web-stories-template-48.js	8.31 kB	0 B
assets/js/chunk-web-stories-template-49-metaData.js	518 B	0 B
assets/js/chunk-web-stories-template-49.js	9.7 kB	0 B
assets/js/chunk-web-stories-template-5-metaData.js	556 B	+1 B (0%)
assets/js/chunk-web-stories-template-5.js	9.38 kB	+1 B (0%)
assets/js/chunk-web-stories-template-50-metaData.js	504 B	0 B
assets/js/chunk-web-stories-template-50.js	8.26 kB	0 B
assets/js/chunk-web-stories-template-51-metaData.js	526 B	-1 B (0%)
assets/js/chunk-web-stories-template-51.js	9.89 kB	-2 B (0%)
assets/js/chunk-web-stories-template-52-metaData.js	603 B	+1 B (0%)
assets/js/chunk-web-stories-template-52.js	10.1 kB	0 B
assets/js/chunk-web-stories-template-53-metaData.js	552 B	-1 B (0%)
assets/js/chunk-web-stories-template-53.js	5.79 kB	+1 B (0%)
assets/js/chunk-web-stories-template-54-metaData.js	546 B	-1 B (0%)
assets/js/chunk-web-stories-template-54.js	7.52 kB	0 B
assets/js/chunk-web-stories-template-55-metaData.js	574 B	0 B
assets/js/chunk-web-stories-template-55.js	6.56 kB	+1 B (0%)
assets/js/chunk-web-stories-template-56-metaData.js	543 B	0 B
assets/js/chunk-web-stories-template-56.js	9.5 kB	0 B
assets/js/chunk-web-stories-template-57-metaData.js	528 B	0 B
assets/js/chunk-web-stories-template-57.js	14.1 kB	0 B
assets/js/chunk-web-stories-template-58-metaData.js	554 B	-2 B (0%)
assets/js/chunk-web-stories-template-58.js	5.61 kB	-1 B (0%)
assets/js/chunk-web-stories-template-59-metaData.js	589 B	+1 B (0%)
assets/js/chunk-web-stories-template-59.js	8.52 kB	0 B
assets/js/chunk-web-stories-template-6-metaData.js	569 B	0 B
assets/js/chunk-web-stories-template-6.js	7.04 kB	-1 B (0%)
assets/js/chunk-web-stories-template-60-metaData.js	509 B	0 B
assets/js/chunk-web-stories-template-60.js	8.89 kB	+1 B (0%)
assets/js/chunk-web-stories-template-7-metaData.js	569 B	0 B
assets/js/chunk-web-stories-template-7.js	7.21 kB	0 B
assets/js/chunk-web-stories-template-8-metaData.js	569 B	0 B
assets/js/chunk-web-stories-template-8.js	8.4 kB	+1 B (0%)
assets/js/chunk-web-stories-template-9-metaData.js	580 B	-1 B (0%)
assets/js/chunk-web-stories-template-9.js	8.49 kB	0 B
assets/js/chunk-web-stories-templates.js	443 B	0 B
assets/js/chunk-web-stories-textset-0.js	5.08 kB	0 B
assets/js/chunk-web-stories-textset-1.js	6.64 kB	0 B
assets/js/chunk-web-stories-textset-2.js	7.67 kB	0 B
assets/js/chunk-web-stories-textset-3.js	15.1 kB	0 B
assets/js/chunk-web-stories-textset-4.js	4.16 kB	0 B
assets/js/chunk-web-stories-textset-5.js	5.49 kB	0 B
assets/js/chunk-web-stories-textset-6.js	5.3 kB	0 B
assets/js/chunk-web-stories-textset-7.js	10.2 kB	0 B
assets/js/generateBlurhash.worker.worker.js	1.12 kB	+16 B (+1%)
assets/js/imgareaselect.js	3.77 kB	0 B
assets/js/lightbox.js	550 B	0 B
assets/js/tinymce-button.js	2.84 kB	0 B
assets/js/web-stories-activation-notice.js	26.9 kB	+4 B (0%)
assets/js/web-stories-block.js	22.8 kB	+7 B (0%)
assets/js/web-stories-embed.js	20 B	0 B
assets/js/web-stories-widget.js	587 B	0 B
assets/js/wp-dashboard.js	72 kB	+74 B (0%)

_{compressed-size-action}

[googleforcreators-bot]

Plugin builds for 2c405d24127fa199f62f385eac3116627047fdb1 are ready :bellhop_bell:!

• Download development build
• Download production build

[swissspidy]

@sayedtaqui I've been thinking how we can best implement these changes and prevent regressions in the future, perhaps you have some thoughts on that too.

It looks like there are some ESLint plugins that we could potentially use:

• https://www.npmjs.com/package/eslint-plugin-ssr-friendly
• https://www.npmjs.com/package/eslint-plugin-react-hooks-ssr

Don't know how good they are though.

I was also thinking that some end-to-end testing flow might be beneficial, e.g.

1. Publish packages to local registry
2. Create a new Next.js app using npm init @googleforcreators/web-stories (see #11093)
3. Open app in browser, verify that it runs and most important actions work

This will test the integrity of our packages, the @googleforcreators/web-stories package and the SSR functionality all at once

[mohdsayed]

@sayedtaqui I've been thinking how we can best implement these changes and prevent regressions in the future, perhaps you have some thoughts on that too.

It looks like there are some ESLint plugins that we could potentially use:

• https://www.npmjs.com/package/eslint-plugin-ssr-friendly
• https://www.npmjs.com/package/eslint-plugin-react-hooks-ssr

Don't know how good they are though.

Tried https://www.npmjs.com/package/eslint-plugin-ssr-friendly and its working however the only problem is that its not able to detect if window/document has been used conditionally. Which is also mentioned on their doc

Please note that we can't detect if you're still calling this function without properly checking upfront if typeof window !== "undefined".

I see there are total 13 such errors.

/Users/sayedtaqui/Local Sites/ws/app/public/wp-content/plugins/web-stories-wp/packages/design-system/src/components/tooltip/index.js
  377:13  error  Use of DOM global 'document' is forbidden in the render-cycle of a React FC, consider moving this inside useEffect()  ssr-friendly/no-dom-globals-in-react-fc

/Users/sayedtaqui/Local Sites/ws/app/public/wp-content/plugins/web-stories-wp/packages/react/src/useResizeEffect.js
  22:38  error  Use of DOM global 'window' is forbidden in module scope  ssr-friendly/no-dom-globals-in-module-scope
  22:70  error  Use of DOM global 'window' is forbidden in module scope  ssr-friendly/no-dom-globals-in-module-scope

/Users/sayedtaqui/Local Sites/ws/app/public/wp-content/plugins/web-stories-wp/packages/story-editor/src/app/rightClickMenu/menus/shared.js
  43:32  error  Use of DOM global 'Element' is forbidden in module scope  ssr-friendly/no-dom-globals-in-module-scope

/Users/sayedtaqui/Local Sites/ws/app/public/wp-content/plugins/web-stories-wp/packages/story-editor/src/components/canvas/editLayerFocusManager/keyBindings.js
  95:30  error  Use of DOM global 'Element' is forbidden in module scope  ssr-friendly/no-dom-globals-in-module-scope

/Users/sayedtaqui/Local Sites/ws/app/public/wp-content/plugins/web-stories-wp/packages/story-editor/src/components/colorPicker/colorPicker.js
  172:32  error  Use of DOM global 'document' is forbidden in the render-cycle of a React FC, consider moving this inside useEffect()  ssr-friendly/no-dom-globals-in-react-fc

/Users/sayedtaqui/Local Sites/ws/app/public/wp-content/plugins/web-stories-wp/packages/story-editor/src/components/library/panes/shared/libraryMoveable.js
  141:18  error  Use of DOM global 'document' is forbidden in the render-cycle of a React FC, consider moving this inside useEffect()  ssr-friendly/no-dom-globals-in-react-fc

/Users/sayedtaqui/Local Sites/ws/app/public/wp-content/plugins/web-stories-wp/packages/story-editor/src/components/library/panes/text/textSets/stories/textSet.js
  246:22  error  Use of DOM global 'document' is forbidden in the render-cycle of a React FC, consider moving this inside useEffect()  ssr-friendly/no-dom-globals-in-react-fc
  247:24  error  Use of DOM global 'document' is forbidden in the render-cycle of a React FC, consider moving this inside useEffect()  ssr-friendly/no-dom-globals-in-react-fc

/Users/sayedtaqui/Local Sites/ws/app/public/wp-content/plugins/web-stories-wp/packages/story-editor/src/components/mediaRecording/errorDialog.js
  52:8  error  Use of DOM global 'window' is forbidden in the render-cycle of a React FC, consider moving this inside useEffect()  ssr-friendly/no-dom-globals-in-react-fc

/Users/sayedtaqui/Local Sites/ws/app/public/wp-content/plugins/web-stories-wp/packages/story-editor/src/components/styleManager/styleManager.js
  90:32  error  Use of DOM global 'document' is forbidden in the render-cycle of a React FC, consider moving this inside useEffect()  ssr-friendly/no-dom-globals-in-react-fc

/Users/sayedtaqui/Local Sites/ws/app/public/wp-content/plugins/web-stories-wp/packages/story-editor/src/components/tabview/index.js
  322:32  error  Use of DOM global 'Element' is forbidden in module scope  ssr-friendly/no-dom-globals-in-module-scope

/Users/sayedtaqui/Local Sites/ws/app/public/wp-content/plugins/web-stories-wp/packages/tracking/README.md
  46:12  error  Use of DOM global 'event' is forbidden in module scope  ssr-friendly/no-dom-globals-in-module-scope

✖ 13 problems (13 errors, 0 warnings)

I think we can use globalThis for these instances which will suppress the errors, or silence them by adding // eslint-disable comments.

Tried eslint-plugin-react-hooks-ssr, that didn't seem to work.

---

I was also thinking that some end-to-end testing flow might be beneficial, e.g.

1. Publish packages to local registry
2. Create a new Next.js app using npm init @googleforcreators/web-stories (see Introduce create-web-stories package #11093)
3. Open app in browser, verify that it runs and most important actions work

This will test the integrity of our packages, the @googleforcreators/web-stories package and the SSR functionality all at once

Yes, end-to-end testing is a good idea!

[santoshgistto]

Would be good, we get to know when its going to get merged :)

[swissspidy]

I see there are total 13 such errors. [...]

Going through them one by one:

https://github.com/GoogleForCreators/web-stories-wp/blob/079afb26848da38dd40b465424128c1516d06661/packages/design-system/src/components/tooltip/index.js#L304

Can probably just use document?.body there and then suppress warnings.

https://github.com/GoogleForCreators/web-stories-wp/blob/079afb26848da38dd40b465424128c1516d06661/packages/react/src/useResizeEffect.js#L22-L28

Can suppress the warnings since it's used conditionally.

https://github.com/GoogleForCreators/web-stories-wp/blob/e579a5715a89da4f77290cad01a5993b4455dcf2/packages/story-editor/src/app/rightClickMenu/menus/shared.js#L42-L45

Ditto

https://github.com/GoogleForCreators/web-stories-wp/blob/e579a5715a89da4f77290cad01a5993b4455dcf2/packages/story-editor/src/components/canvas/editLayerFocusManager/keyBindings.js#L93-L96

Ditto

https://github.com/GoogleForCreators/web-stories-wp/blob/e579a5715a89da4f77290cad01a5993b4455dcf2/packages/story-editor/src/components/colorPicker/colorPicker.js#L171-L185

Could move setting the ref inside an effect

https://github.com/GoogleForCreators/web-stories-wp/blob/e579a5715a89da4f77290cad01a5993b4455dcf2/packages/story-editor/src/components/library/panes/shared/libraryMoveable.js#L140-L148

Can suppress this since useKeyDownEffect uses this in an effect and isDragging is only true on the client-side. Could still use optional chaining if we want to though, just in case.

https://github.com/GoogleForCreators/web-stories-wp/blob/e579a5715a89da4f77290cad01a5993b4455dcf2/packages/story-editor/src/components/library/panes/text/textSets/stories/textSet.js#L242-L251

Can probably just use document?.body there and then suppress warnings.

https://github.com/GoogleForCreators/web-stories-wp/blob/e579a5715a89da4f77290cad01a5993b4455dcf2/packages/story-editor/src/components/mediaRecording/errorDialog.js#L52-L56

Can use globalThis I think

https://github.com/GoogleForCreators/web-stories-wp/blob/e579a5715a89da4f77290cad01a5993b4455dcf2/packages/story-editor/src/components/styleManager/styleManager.js#L89-L103

Could move setting the ref inside an effect

https://github.com/GoogleForCreators/web-stories-wp/blob/e579a5715a89da4f77290cad01a5993b4455dcf2/packages/story-editor/src/components/tabview/index.js#L319-L325

Can suppress the warnings since it's used conditionally.

/Users/sayedtaqui/Local Sites/ws/app/public/wp-content/plugins/web-stories-wp/packages/tracking/README.md

We should disable the rule for .md files 😄

[santoshgistto]

Looks like needs to increase code coverage still @sayedtaqui any help here :)

[swissspidy]

Closing for now, best to review this with a fresh PR at some point.