search

facebook / lexical

Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
https://lexical.dev
MIT License
17.5k stars 1.45k forks source link

feat: Add support for Giphy API's in lexical #2179

Closed rimildeyjsr closed 1 year ago

rimildeyjsr commented 2 years ago

Changelog:

  1. Added @giphy/react-components, @giphy/js-fetch-api, @giphy/js-types, react-use to the lexical-playground package
  2. Remove the hard-coded cat gif
  3. Added a component to display the giphy plugin in the modal
  4. Insert a gif on select

Relates to #1820

Screen recording

https://user-images.githubusercontent.com/10229595/176993308-a619ceaa-c237-4f52-9f4f-b8e7f6a9ad24.mp4

vercel[bot] commented 2 years ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
lexical ✅ Ready (Inspect) Visit Preview Jul 11, 2022 at 7:22PM (UTC)
lexical-playground ❌ Failed (Inspect) Jul 11, 2022 at 7:22PM (UTC)
rimildeyjsr commented 2 years ago

@trueadm @zurfyx - While testing locally, I noticed that the GIF is not getting seen on the editor, but the node has been added. Since the GIF is using an image node, I tried to insert an image using an Unplash URL, which has the same result. I don't know if this is a bug or not.

The pre-commit hooks were not running as well!

Let me know if I should make any changes to fix the issue!

Attached is a screen recording for reference -

https://user-images.githubusercontent.com/10229595/168484624-ee8c8b91-3adb-4595-8044-77a4e0d87d51.mov

zurfyx commented 2 years ago

That's looking awesome! Thank you for working on this.

While testing locally, I noticed that the GIF is not getting seen on the editor, but the node has been added.

The page URL itself won't work, it's not a renderable image, just a page link. You have to point it to a specific image. For example:

onSelect({
          altText: item.title,
          src: item.images.original.url,
        })

You may want to read over the item payload, there's quite a lot of interesting data in there!

im-adithya commented 1 year ago

Hey @rimildeyjsr are you working on this?

rimildeyjsr commented 1 year ago

@im-adithya - I am!

rimildeyjsr commented 1 year ago

@zurfyx - Hey I am still working on this, sorry for the delay! Hit a snag with the giphy react components, I will try to resolve and get this to a close! :) Sorry for the delay!

rimildeyjsr commented 1 year ago

Opened an issue here for giphy react components, once I get pointers I will resume work here https://github.com/Giphy/giphy-js/issues/301

rimildeyjsr commented 1 year ago

@zurfyx @trueadm - I am done with the integration, let me know what you think!

acywatson commented 1 year ago

Thanks for this PR! Looks like we have some issues with the tests. Can you try rebasing and resolving the conflicts? In the meantime, I will look at the code :)

acywatson commented 1 year ago

Nice, looks like the last thing to be fixed is just resolving the package-lock.json conflicts. You should be able to rebase, then just delete the package-lock and run npm install to create a new one, then commit that one on top. Let me know if you have any issues there.

rimildeyjsr commented 1 year ago

@acywatson - I have made the changes to package-lock.json, should be fine now!

acywatson commented 1 year ago

@acywatson - I have made the changes to package-lock.json, should be fine now!

Thanks - I think the package lock is still causing issues in the vercel deployment. Can you please try:

delete package-lock.json locally run npm install commit the new generated package-lock.json

That should fix it.

rimildeyjsr commented 1 year ago

@acywatson - I deleted the package-lock JSON again in local and ran npm install and committed after rebasing, but still, the vercel deployment is failing. Is there any issue on the deployment side? The PR is rebased against main as well

acywatson commented 1 year ago

Oh can you try moving these dependencies to the package.json in packages/lexical-playground? Make sure to regenerate the package-lock again after. Sorry for all the back and forth.

rimildeyjsr commented 1 year ago

@acywatson - followed the steps and moved dependencies to packages/lexical-playground and regenerated the package-lock.json but I can see that the lexical playground deployment is still failing. Anything else I need to do here? The branch is rebased against main

thegreatercurve commented 1 year ago

Closing this as the diff as it is pretty stale now. On reflection, I think we should close the related issue as well. Since it was created, we've added a lot of additional functionality to the playground, and I'm concern that the UX is becoming unwieldy and overwhelming for newcomers. Adding in Giphy doesn't necessarily show how to do anything new that isn't in another rich text media example, like image, Excalidraw, YoutTube or Twitter nodes.