Support twitter previews in Draftail embeds
See original GitHub issueIssue Summary
Draftail’s EmbedBlock have troubles displaying tweets’ informations (thumb / title)
Steps to Reproduce
- Start a new project with
wagtail start myproject
- Add a RichTextField to an example model
- Add a new content for this example model
- Click embed block in draftail toolbar
- Add a tweet
https://twitter.com/libe/status/1110520362930974721?s=20
Expectations: get a sumary (title, description, thumbnail or any other relevant information) displaying in the textarea Result: Nothing except the generic look of embeds in the editor.
As discussed on slack with @thibaudcolas , this comes from here: https://github.com/wagtail/wagtail/blob/b1fab7084719ddbb88b9581567660930a6c082b4/client/src/components/Draftail/blocks/EmbedBlock.js#L13-L27
Also, as said on slack, on good generic workaround to this case (and other future cases like this one) could be to display embed source in the preview.
- I have confirmed that this issue can be reproduced as described on a fresh Wagtail project: yes
Technical details
- Python version: 3.7.2
- Django version: 2.1.7
- Wagtail version: 2.4
Issue Analytics
- State:
- Created 4 years ago
- Comments:8 (8 by maintainers)
Top Results From Across the Web
Formatting options - Draftail
There is good support for custom block-level and inline formatting. Custom entities or decorators require knowledge of the Draft.js API, which ...
Read more >Draftail · A configurable rich text editor built with Draft.js
No Preview · Easy to use. Draftail is easy to use regardless of skill level. All rich text formatting is available via the...
Read more >Getting started with extensions - Draftail
Anchor links come to mind. Enhanced links with embedded content, or inline previews. The official "stock" example is one of those. Here is...
Read more >Entities - Draftail
Entities annotate content with data to represent rich content beyond text. They can be inline (e.g. a link on a word), or block-based...
Read more >Examples - Draftail
Draftail also supports the #plugins architecture of draft-js-plugins. .media .img {. margin-inline-end: 10px;. } Debug. Version: 2.0.0-rc.2; Saves: 1.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
If anyone wants to finish this off, the only thing missing for #5545 to be merged is tests. There is guidance on the PR on what to write tests for exactly.
Done in #8167 😃