Heading text sets throwing error

[c0b41]

Select any heading text set, drop to story editor canvas, editor crash

Error Stack

t.startsWith is not a function
    at l (https://4216o9.csb.app/node_modules/
[googleforcreators/story-editor/dist-module/components/richText/styleManipulation.js:34:23]()
    at l (https://4216o9.csb.app/node_modules/
[googleforcreators/story-editor/dist-module/components/richText/styleManipulation.js:35:12]()
    at eval (https://4216o9.csb.app/node_modules/
[googleforcreators/story-editor/dist-module/components/richText/styleManipulation.js:41:32]()
    at o (https://4216o9.csb.app/node_modules/
[googleforcreators/story-editor/dist-module/components/richText/styleManipulation.js:41:13]()
    at isBold (https://4216o9.csb.app/node_modules/
[googleforcreators/story-editor/dist-module/components/richText/formatters/weight.js:51:69]()
    at eval (https://4216o9.csb.app/node_modules/
[googleforcreators/story-editor/dist-module/components/richText/getStateInfo.js:22:20]()
    at eval (https://4216o9.csb.app/node_modules/
[googleforcreators/story-editor/dist-module/components/richText/getStateInfo.js:20:47]()
    at t (https://4216o9.csb.app/node_modules/
[googleforcreators/story-editor/dist-module/components/richText/getStateInfo.js:16:25]()
    at u (https://4216o9.csb.app/node_modules/
[googleforcreators/story-editor/dist-module/components/richText/htmlManipulation.js:60:24]()
    at eval (https://4216o9.csb.app/node_modules/
[googleforcreators/story-editor/dist-module/components/panels/design/textStyle/useRichTextFormatting.js:74:6]()

Steps to Reproduce

https://codesandbox.io/s/fervent-dawn-4216o9

Screenshots

Additional Context

• Plugin Version:
• WordPress Version:
• Operating System:
• Browser:

[swissspidy]

Thanks a lot for reporting this, the stack trace and the CodeSandbox are super useful too!

We'll get to the bottom of this.

[mohdsayed]

It's happening because we had patched draft-js in our setup here https://github.com/GoogleForCreators/web-stories-wp/blob/main/patches/draft-js-import-element%2B1.4.0.patch however it doesn't get applied in the consumer package.

[mohdsayed]

Looks like the fix is pending for years sstur/draft-js-utils#155

[mohdsayed]

@swissspidy I think we are going to have the same issue for react-photo-gallery patch as well. I can only think of two options, one is to find some replacement packages or fork and publish the patched package as Gutenberg has done for wp-prettier. Any other suggestions?

[swissspidy]

Ah, good find! Totally forgot about our custom patches when thinking about decoupling.

We definitely need to handle these somehow.

For react-photo-gallery there might be a replacement package, see #10444

For the draft-js-import-element package — which the other patch is for — I can't find a good alternative right now. So I'lll probably just go ahead and fork it for our use case.
There might be no need to publish that on npm, we could just reference it from GitHub.

Tangent: unfortunately just like the draft-js-import-element package, draft-js itself isn't really maintained anymore. Facebook is even working on a new rich text editor instead (see https://twitter.com/trueadm/status/1472377356044099587). Long term we need to look for a replacement. For example Slate.

[swissspidy]

Ticket created for Draft.js: #10684

[c0b41]

Any progress?

[swissspidy]

We've replaced react-photo-gallery last week and we should be able to replace draft-js-import-element this week.

Afterwards we'll publish new versions of our packages.