Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[Bug]: Cannot parse generated html from YouTube extension #4089

Open
1 of 2 tasks
ben-bourdin451 opened this issue May 29, 2023 · 6 comments · May be fixed by #5257
Open
1 of 2 tasks

[Bug]: Cannot parse generated html from YouTube extension #4089

ben-bourdin451 opened this issue May 29, 2023 · 6 comments · May be fixed by #5257
Labels
Category: Open Source The issue or pull reuqest is related to the open source packages of Tiptap. Triage: Open A new issue or pullrequest that requires triage (added by default) Type: Bug The issue or pullrequest is related to a bug

Comments

@ben-bourdin451
Copy link

Which packages did you experience the bug in?

extension-youtube, html

What Tiptap version are you using?

^2.0.0

What’s the bug you are facing?

Using generateHTML & generateJSON utilities from @tiptap/html doesn't work with the YouTube extension. Sample easily replicable test case:

import { generateJSON, generateHTML } from '@tiptap/html';
import Document from '@tiptap/extension-document';
import Text from '@tiptap/extension-text';

it('can convert from & to html', async () => {
    const extensions = [Document, Text, Youtube];
    const html = `<p>Tiptap now supports YouTube embeds! Awesome!</p>
      <div data-youtube-video>
        <iframe src="https://www.youtube.com/watch?v=cqHqLQgVCgY"></iframe>
      </div>`;
    const json = generateJSON(html, extensions);
    expect(generateHTML(json, extensions)).to.equal(html);
});

Test fails with:

Unknown CSS selector type descendant div[data-youtube-video] iframe [
  { type: 'tag', name: 'div', namespace: null },
  {
    type: 'attribute',
    name: 'data-youtube-video',
    action: 'exists',
    value: '',
    namespace: null,
    ignoreCase: null
  },
  { type: 'descendant' },
  { type: 'tag', name: 'iframe', namespace: null }
]

TypeError: Cannot read properties of null (reading 'includes')
❯ getEmbedUrlFromYoutubeUrl ../../node_modules/@tiptap/extension-youtube/src/utils.ts:56:11
❯ Object.renderHTML ../../node_modules/@tiptap/extension-youtube/src/youtube.ts:138:22
❯ Object.schema.toDOM [as youtube] ../../node_modules/@tiptap/core/src/helpers/getSchemaByResolvedExtensions.ts:100:32
❯ DOMSerializer.serializeNodeInner ../../node_modules/prosemirror-model/dist/index.js:3280:100
❯ ../../node_modules/prosemirror-model/dist/index.js:3272:34
❯ Fragment.forEach ../../node_modules/prosemirror-model/dist/index.js:255:13
❯ DOMSerializer.serializeFragment ../../node_modules/prosemirror-model/dist/index.js:3246:18
❯ getHTMLFromFragment ../../node_modules/@tiptap/html/src/getHTMLFromFragment.ts:5:53
❯ Module.generateHTML ../../node_modules/@tiptap/html/src/generateHTML.ts:10:10
❯ src/index.spec.ts:47:12

What browser are you using?

Chrome

Code example

No response

What did you expect to happen?

I would expect the above test to pass.

Anything to add? (optional)

Looks like this could be an issue with zeed-dom and how it parses the html. I would happily open an issue there however since I couldn't find much information relating to a similar issue (only this seems close) it's hard to tell exactly what the issue is.

Did you update your dependencies?

  • Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

  • Yes, I’m a sponsor. 💖
@ben-bourdin451 ben-bourdin451 added Category: Open Source The issue or pull reuqest is related to the open source packages of Tiptap. Triage: Open A new issue or pullrequest that requires triage (added by default) Type: Bug The issue or pullrequest is related to a bug labels May 29, 2023
@dahalaamosh
Copy link

Facing same issue in

"@tiptap/extension-youtube": "^2.1.16",
"@tiptap/html": "^2.2.2",

After running generateJSON() using @tiptap/html in the generated html when trying to use TiptapTransformer.toYDoc() getting this error -

Unknown CSS selector type descendant div[data-youtube-video] iframe [ { type: 'tag', name: 'div', namespace: null }, { type: 'attribute', name: 'data-youtube-video', action: 'exists', value: '', namespace: null, ignoreCase: null }, { type: 'descendant' }, { type: 'tag', name: 'iframe', namespace: null }

@ben-bourdin451
Copy link
Author

Quick follow up on this issue, it seems like it is due to the underlying HTML parsing library used, so not an issue with TipTap or Prosemirror.

Switching to a different library than zeed-dom in the following snippet fixed the issue

export function generateJSON(html: string, extensions: Extensions): Record<string, any> {
  const schema = getSchema(extensions)
  const dom = parseHTML(html) as unknown as Node

  return DOMParser.fromSchema(schema).parse(dom).toJSON()
}

@haydenbleasel
Copy link

@ben-bourdin451 What library did you end up using instead of zeed-dom?

@haydenbleasel
Copy link

haydenbleasel commented Apr 5, 2024 •
edited
Loading

Still digging into it, opened an issue in zeed-dom: holtwick/zeed-dom#10

Update: I re-implemented the latest version of zeed-dom locally and it looks like it works, despite throwing a warning. dom returns a _VDocumentFragment containing the iframe, leading me to think the problem is in the prosemirror-model DOMParser.

@haydenbleasel haydenbleasel mentioned this issue Apr 5, 2024
Open
@ben-bourdin451
Copy link
Author

@ben-bourdin451 What library did you end up using instead of zeed-dom?

we ended up using linkedom

@vekunz
Copy link

vekunz commented Jun 20, 2024

Is there any recommendation on what to do, until this bug is fixed? I want to use YouTube Videos in my documents and need to store them as HTML files. I tried linkedom as a drop-in replacement, but then no content at all was loaded from the HTML file.

@bdbch bdbch linked a pull request Jun 20, 2024 that will close this issue
Open
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Category: Open Source The issue or pull reuqest is related to the open source packages of Tiptap. Triage: Open A new issue or pullrequest that requires triage (added by default) Type: Bug The issue or pullrequest is related to a bug
Projects
Tiptap
Status: Triage open
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: streamline html package generation functions to work as expected ueberdosis/tiptap
6 participants
@ben-bourdin451 @haydenbleasel @vekunz @bdbch @svenadlung @dahalaamosh