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

#9338 Add link toolbar action #9445

Merged
merged 31 commits into from
Nov 12, 2024
Merged

Conversation

mnholtz
Copy link
Collaborator

@mnholtz mnholtz commented Nov 8, 2024

What does this PR do?

Discussion

  • I initially attempted to implement the editing menu as a floating popover that opens over the selected text (see BubbleMenu commit). There were some gotchas with TipTap's built-in BubbleMenu component to be able to do this easily and without complexity, so I decided to go with the Bootstrap Popover approach due to time constraint and minimal UX tradeoff

Demo

image

https://www.loom.com/share/38a87c6024544d57bb7f879df4dae6cb

This comment has been minimized.

Copy link

github-actions bot commented Nov 11, 2024

Playwright test results

passed  150 passed
flaky  4 flaky
skipped  2 skipped

Details

report  Open report ↗︎
stats  156 tests across 51 suites
duration  11 minutes, 14 seconds
commit  9bddae7
info  For more information on how to debug and view this report, see our readme

Flaky tests

msedge › tests/modLifecycle.spec.ts › create, run, package, and update mod
chrome › tests/regressions/formFlicker.spec.ts › forms flickering due to components unexpectedly unmounting/remounting › #8320: Search field loses focus while typing on snippet mod
chrome › tests/telemetry/errors.spec.ts › can report an indexdb error to telemetry service
msedge › tests/telemetry/errors.spec.ts › can report a service worker error to telemetry service

Skipped tests

chrome › tests/runtime/googleSheetsIntegration.spec.ts › can activate a google spreadsheet mod with config options
msedge › tests/runtime/googleSheetsIntegration.spec.ts › can activate a google spreadsheet mod with config options

Copy link

codecov bot commented Nov 11, 2024

Codecov Report

Attention: Patch coverage is 63.70968% with 45 lines in your changes missing coverage. Please review.

Project coverage is 75.79%. Comparing base (8318d74) to head (9bddae7).
Report is 493 commits behind head on main.

Files with missing lines Patch % Lines
...onents/richTextEditor/toolbar/LinkButton/index.tsx 60.00% 16 Missing ⚠️
...hTextEditor/toolbar/LinkButton/UrlInputPopover.tsx 36.36% 14 Missing ⚠️
...richTextEditor/toolbar/LinkButton/LinkEditForm.tsx 38.09% 13 Missing ⚠️
...xtEditor/toolbar/LinkButton/LinkPreviewActions.tsx 83.33% 1 Missing ⚠️
...ponents/richTextEditor/toolbar/ToolbarOverflow.tsx 96.29% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #9445      +/-   ##
==========================================
+ Coverage   74.24%   75.79%   +1.54%     
==========================================
  Files        1332     1421      +89     
  Lines       40817    42907    +2090     
  Branches     7634     7899     +265     
==========================================
+ Hits        30306    32522    +2216     
+ Misses      10511    10385     -126     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@twschiller twschiller added this to the 2.2.0 milestone Nov 12, 2024
@grahamlangford grahamlangford marked this pull request as ready for review November 12, 2024 16:21
}, []);

const handleHide = useCallback((event: Event) => {
// Check if the click path includes our button
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

huge nit: an isButtonClick variable name would satisfy the the need to comment

}, [editor]);

const handleHide = useCallback((event: Event) => {
// Check if the click path includes our button
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

nit: see other comment about the need to comment here. If we find ourselves using this pattern one more time I'm inclined to extract it since it's handling a non-intuitive corner case

popoverView: PopoverState["popoverView"];
}) => {
const { editor } = useCurrentEditor();
assertNotNullish(editor, "Tiptap editor must be in scope");
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

❤️ I was able to confirm btw by digging into the implementation that this seems to be the only reason why editor would be null; we can probably replace our other checks with this

@grahamlangford grahamlangford enabled auto-merge (squash) November 12, 2024 19:46
Copy link

When the PR is merged, the first loom link found on this PR will be posted to #sprint-demo on Slack. Do not edit this comment manually.

@grahamlangford grahamlangford merged commit 0571b08 into main Nov 12, 2024
25 checks passed
@grahamlangford grahamlangford deleted the feature/9338_add_link_toolbar_action branch November 12, 2024 20:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request form builder
Development

Successfully merging this pull request may close these issues.

3 participants