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.

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

feat: properly store post content on social media blocks #1753

Merged
merged 4 commits into from
Jun 10, 2024

Conversation

tim-evans
Copy link
Collaborator

As a follow-on to #1685, I'm properly setting the content property of social media embeds to the textual content included on them, which allows some basic understanding of what the post was at the time of embedding, which is useful for journalistic reasons.

For legibility reasons, I've separated conversions for the HTML source into separate files so there is individual files responsible for testing each annotation.

So for a TwitterEmbed (yes, sorry), we may get an embedded post (below), that was throwing away the textual contents.

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Respect the drip, twerp. <a href="https://t.co/f5OF4ikSFj">pic.twitter.com/f5OF4ikSFj</a></p>&mdash; Pokémon (@Pokemon) <a href="https://twitter.com/Pokemon/status/1227294189185949696?ref_src=twsrc%5Etfw">February 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Now this will be stored as text on the content property:

{
  "blocks": [
    {
      "attributes": {
        "content": "M00000000",
        "url": "https://twitter.com/Pokemon/status/1227294189185949696",
      },
      "id": "B00000000",
      "parents": [],
      "selfClosing": false,
      "type": "twitter-embed",
    },
    {
      "attributes": {},
      "id": "B00000001",
      "parents": [
        "twitter-embed",
      ],
      "selfClosing": false,
      "type": "text",
    }
  ],
  "marks": [
    {
      "attributes": {
        "refs": [
          "B00000000",
        ],
      },
      "id": "M00000000",
      "range": "(1..92]",
      "type": "slice",
    },
    {
      "attributes": {
        "url": "https://t.co/f5OF4ikSFj",
      },
      "id": "M00000001",
      "range": "(27..53)",
      "type": "link",
    },
    {
      "attributes": {
        "url": "https://twitter.com/Pokemon/status/1227294189185949696?ref_src=twsrc^tfw",
      },
      "id": "M00000002",
      "range": "(75..92)",
      "type": "link",
    },
  ],
  "text": "Respect the drip, twerp. pic.twitter.com/f5OF4ikSFj— Pokémon (@Pokemon) February 11, 2020",
}

@tim-evans tim-evans marked this pull request as draft May 14, 2024 18:30
@tim-evans tim-evans force-pushed the attribute-standardization branch from be28e1b to 91fbe8c Compare May 30, 2024 13:30
Base automatically changed from attribute-standardization to main May 30, 2024 13:37
@tim-evans tim-evans force-pushed the social-media-content branch from cfe433d to f88d980 Compare May 30, 2024 19:47
@tim-evans tim-evans marked this pull request as ready for review May 30, 2024 19:47
let content = slice
? this.render(slice)
: `<a target="_blank" title="@vogueitalia" href="https://www.tiktok.com/${username}">${username}</a>`;
: `<a target="_blank" title="${username}" href="https://www.tiktok.com/${username}">${username}</a>`;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lol

cite: embed.attributes.url,
}).join(" ")}>${this.render(slice)}</blockquote></div>`;
} else {
return `<iframe ${[
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it not make sense to still render the same structure as the above, just without the <blockquote> element (or with an empty <blockquote> element)?

this aligns with React PropTypes boolean naming conventions in
cases where the block is being rendered directly to React
@tim-evans tim-evans merged commit 8987f92 into main Jun 10, 2024
3 checks passed
@tim-evans tim-evans deleted the social-media-content branch June 10, 2024 14:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants