Skip to content

Conversation

BenjaminCharmes
Copy link
Contributor

@BenjaminCharmes BenjaminCharmes commented Sep 17, 2025

Closes #1232

Duplicate of the PR #1343 , but this one uses Tiptap and supports all the basic features of TinyMCE.
Perhaps it would be easier to merge the two to compare Quill and Tiptap? After trying both, TipTap seems more robust for the long term.

This PR already support:

  • All old features of TinyMCEInline.vue
  • Markdown
  • Mermaid
  • Cross-referencing

Copy link

codecov bot commented Sep 17, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 80.10%. Comparing base (b121182) to head (8fb22c3).

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #1349   +/-   ##
=======================================
  Coverage   80.10%   80.10%           
=======================================
  Files          70       70           
  Lines        4755     4755           
=======================================
  Hits         3809     3809           
  Misses        946      946           
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copy link

cypress bot commented Sep 17, 2025

datalab    Run #3918

Run Properties:  status check passed Passed #3918  •  git commit 312f19bc46 ℹ️: Merge 8fb22c36b165353786bebb577689a83e6a7a1b7e into b121182e7a2c4ca1eebd268ed0b8...
Project datalab
Branch Review bc/migrate-to-tiptap
Run status status check passed Passed #3918
Run duration 07m 33s
Commit git commit 312f19bc46 ℹ️: Merge 8fb22c36b165353786bebb577689a83e6a7a1b7e into b121182e7a2c4ca1eebd268ed0b8...
Committer Ben Charmes
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 0
Tests that did not run due to a developer annotating a test with .skip  Pending 0
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 358
View all changes introduced in this branch ↗︎

@BenjaminCharmes
Copy link
Contributor Author

Hey @jdbocarsly, as discussed last week in the PR using QuillJS, cross-referencing (should) work in this PR if you want to test it. I think I'm going to abandon QuillJS in favour of Tiptap to replace TinyMCE.

@jdbocarsly
Copy link
Member

jdbocarsly commented Sep 25, 2025

This is really slick! Thanks for doing this. The @ tagging is really smooth, and I really like the mermaid editor!

A few notes:

  • Is this on tiptap v2? Seems like v3 was released this summer...
  • When a tag is in the text and you are not in edit mode, clicking on the tag opens edit mode-- is there a way we could get this click to go straight to the tagged link (potentially in a new tab), instead of opening edit mode?
  • Is there a way to directly input images into tiptap? TinyMCE had a feature for that, which I think broke at some point on our deployment. That's really helpful for adding in photos, etc. to describe a procedure. I think tinymce would b64 encode it and put it directly in the text, which could cause an issue with the database since MongoDB documents are limited to 16 gb. We could think about an alternate workflow where the image is automatically uploaded to the sample and then embedded by link...
  • How is the markdown support here? Is it possible to have a toggle between "markdown" and "preview", like on Github?

@ml-evs ml-evs force-pushed the bc/migrate-to-tiptap branch from 75b87c4 to 015ce86 Compare September 25, 2025 15:13
@ml-evs
Copy link
Member

ml-evs commented Sep 25, 2025

Copy link
Member

@ml-evs ml-evs left a comment

Choose a reason for hiding this comment

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

Looking really nice @BenjaminCharmes! As discussed, let's get this merged with some final tweaks and things to think about:

  • Either write a formal test or just check what an old complex (e.g., colours, tables, images) TinyMCE description looks like when rendered here
  • Make sure the cross-ref item search can also search for equipment (may need future API change)
  • Investigate image plugin for tiptap for uploading images
  • Tweak button for equations to say f(x) (or whatever)
  • Enable markdown preview/toggle either in this PR or future

@BenjaminCharmes BenjaminCharmes marked this pull request as ready for review September 30, 2025 16:47
Add padding

Handle clickoutside while select text

Add prosemirror-view to resolutions

Re-add data-testid to Tiptap editor

Update cypress

run pre-commit local

Update cypress

Update cypress

manual pre-commit modif

manual pre-commit modif

Update MarkdownToggle.js

Update MarkdownToggle.js

Remove 'blur' causing issue with toggle markdown
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.

Migrate away from TinyMCE
3 participants