feat(tiptap): Loom embed extension #8612
Conversation
jmtaber129
force-pushed
the
jmtaber129/tiptap-loom-embeds
branch
2 times, most recently
from
1e5bdb6
to
d6364a4
Compare
jmtaber129
force-pushed
the
jmtaber129/tiptap-loom-embeds
branch
from
d6364a4
to
8a9a48e
Compare
jmtaber129
force-pushed
the
jmtaber129/tiptap-loom-embeds
branch
from
9cf6f42
to
093b0b4
Compare
jmtaber129
force-pushed
the
jmtaber129/tiptap-loom-embeds
branch
from
093b0b4
to
7073156
Compare
jmtaber129
changed the title
| } | ||
|
|
||
| const getLoomNodesForParagraph = (content: JSONContent) => { | ||
| const distinctLoomLinks: Record<string, string> = {} |
There was a problem hiding this comment.
+1 since this is a local var, if i hit enter to create a new paragraph & paste the same link again, it's going to unfurl the video again. is this intended?
fwiw i saw that slack messages will do a big unfurl for 1 link, 2 small unfurls for 2 links, and they won't unfurl for 3 links. thought that was kinda cool to prevent it from getting too long! (e.g. thumbnail + title for 1, just thumbnail for 2, just links for 3+). i saw loom has the /oembed path for metadata like title/description if you feel like playing with it
There was a problem hiding this comment.
This is intended, at least for now - I'd like to get some usage before implementing a more complex unfurling strategy, especially since we don't have a good since for what users might like/dislike for our specific editor. The open question to me is "why might a user include a link to the same loom twice in different paragraphs?" - the answer to this would influence whether we should/shouldn't include a distinct loom embed more than once.
Loom's chrome extension (which embeds loom recordings in GH PR descriptions) also has this duplicate embed behavior, so I don't foresee any significant UX frustrations as a result of this. See screenshot:
| import {Node} from '@tiptap/core' | ||
| import {JSONContent, mergeAttributes} from '@tiptap/react' | ||
|
|
||
| const LOOM_REGEX = /^(?:https:\/\/)?(?:www\.)?loom\.com\/share\/[a-zA-Z0-9]*\?.*$/g |
There was a problem hiding this comment.
-1 i don't know how i managed to get an insecure http link while copying & pasting across task cards, but somehow i lost the s & it didn't unfurl. can we use https? instead?
Alternatively, I found the loom official regex, which includes their staging URLs 🤣 . Could use that instead https://www.unpkg.com/browse/@loomhq/loom-embed@1.2.4/dist/esm/common.js
There was a problem hiding this comment.
Ooo yes, nice catch!
Including the staging URLs doesn't feel quite right to me 😂 but I made some minor modifications to our regex based on this, so nice find!
Description
Fixes #8659
Implement a read-only Loom extension - when loom links are present in a standup response, add a Loom TipTap node immediately after the paragraph containing the link.
Because this is read-only, other users will always see the expanded Loom embeds, while the author will only see them in closed meetings and the discussion drawer.
Do nothing for summaries, though we could leverage Loom gif thumbnails if we wanted to.
Demo
What the author sees:
What the reader sees:
Discussion drawer (both author and readers see this):
Testing scenarios
Final checklist
One Review Requiredif the PR introduces only minor changes, does not contain any architectural changes or does not introduce any new patterns and I think one review is sufficient'