Add link to coaching notes editor #98
Conversation
jhodapp
added
enhancement
| : new URL(`https://${url}`); | ||
|
|
||
| // only auto-link if the domain is not in the disallowed list | ||
| const disallowedDomains = [ |
There was a problem hiding this comment.
@zgavin1 I think a good central place for this list right now is to place this in site.config.ts under siteConfig { tiptap { links { } } }
There was a problem hiding this comment.
I can also just comment this out.. Do we even want these?
There was a problem hiding this comment.
I think so, it's probably better to have it than not. No immediate use but I'm guessing it's a pattern for TipTap for a good reason.
| <DialogHeader> | ||
| <DialogTitle>Insert Link</DialogTitle> | ||
| <DialogDescription> | ||
| Insert a url for a link in your document. |
There was a problem hiding this comment.
| Insert a url for a link in your document. | |
| Insert URL for your link. |
src/styles/styles.scss
Outdated
| a { | ||
| color: #0000EE; | ||
| text-decoration: underline; | ||
| } |
| onClick={() => setIsLinkDialogOpen(true)} | ||
| isActive={editor.isActive("link")} | ||
| icon={<Link className="h-4 w-4" />} | ||
| title="Link" |
There was a problem hiding this comment.
@zgavin1 Can you dynamically have this text change like so:
- "Insert Link (Ctrl+K)" for when inserting a link
- "Update Link (Ctrl+K)" when one has highlighted a link?
There was a problem hiding this comment.
A few suggestions inline, looking great Zach.
Right click to open link doesn't work for me, but perhaps you can learn from this solution to give SHIFT + left click another try.
| ? "Update link (Ctrl + k)" | ||
| : "Insert link (Ctrl + k)" |
There was a problem hiding this comment.
| ? "Update link (Ctrl + k)" | |
| : "Insert link (Ctrl + k)" | |
| ? "Update Link (Ctrl + k)" | |
| : "Insert Link (Ctrl + k)" |
This makes it consistent with the other buttons' tooltip capitalization.
| // Add keyboard shortcut handler | ||
| useEffect(() => { | ||
| const handleKeyDown = (e: KeyboardEvent) => { | ||
| if ((e.metaKey || e.ctrlKey) && e.key === "k") { |
There was a problem hiding this comment.
This isn't working today because of our command menu at the top, it listens for CMD + k as well which is in conflict. We do want to hide/remove that search for the beta anyway, so if you do that, this should work.
I changed the key combination to listen for 'l' and then CTRL + l worked for me.
| // Placeholder for future disallowed domains if we want to add any | ||
| // const disallowedProtocols = ["ftp", "file", "mailto"]; | ||
| // const protocol = parsedUrl.protocol.replace(":", ""); | ||
|
|
||
| // if (disallowedProtocols.includes(protocol)) { | ||
| // return false; | ||
| // } | ||
|
|
||
| // // only allow protocols specified in ctx.protocols | ||
| // const allowedProtocols = ctx.protocols.map((p) => | ||
| // typeof p === "string" ? p : p.scheme | ||
| // ); | ||
|
|
||
| // if (!allowedProtocols.includes(protocol)) { | ||
| // return false; | ||
| // } | ||
|
|
||
| // Placeholder for future disallowed domains if we want to add any | ||
| // const disallowedDomains = [ | ||
| // "example-phishing.com", | ||
| // "malicious-site.net", | ||
| // ]; | ||
| // const domain = parsedUrl.hostname; | ||
|
|
||
| // if (disallowedDomains.includes(domain)) { | ||
| // return false; | ||
| // } |
There was a problem hiding this comment.
Is this still needed? You have implemented some or all of this already from what I can tell.
Description
Editor feature for adding/removing links.
A user may now in the coaching notes editor incorporate hyperlink(s) into the editor content.
The toolbar button should open a dialog box with a field for the url.
Large part of this logic borrowed from TipTap's example
Link text should be highlighted a standard blue.
Addresses: https://docs.google.com/document/d/10gTCL0uNu1VHEFQl_PzPmnn07QOcDw89ta5C-UVh9vQ/edit?tab=t.0#heading=h.r4v5w0aeykos
Changes
Screenshots / Videos Showing UI Changes (if applicable)
Testing Strategy
Concerns
@jhodapp We may want to review some specifics with how you want this to work - validating links, disallowing some domains, etc. Will leave this in draft until we chat about that