[Spike] Explore replacing react-quill by July 23, 2024

[mddilley]

Our current version of the react-quill library which is used in the project Notes tab relies on a mutation event that will be removed in July 2024 from Chrome . We need to update (or not use?) react-quill to avoid this component breaking down on us. A brief look into this shows that there isn't a fix for this made by the maintainers, and our options are a fork or a separate published package that uses that fork.

Since AMD is utilizing the rich text capabilities to copy/paste the content of emails into notes, we should explore other libraries to retain the rich text capture. @tillyw identified https://github.com/ueberdosis/tiptap as a replacement, and we should explore it. We can use the react-quill fork mentioned above as a fallback if we get close to the deadline.

https://developer.chrome.com/blog/mutation-events-deprecation

Chromium has officially deprecated mutation events, and has a plan to remove support starting with version 127, which goes to stable release on July 23, 2024. This post explains why we are removing mutation events, and provides a path for migrating before they are removed from the browser.

Browser warning

Examples of use:

• Copy/paste from emails. This looks like an important use case for AMD. See:
  • https://mobility.austin.gov/moped/projects/387?tab=notes
  • https://mobility.austin.gov/moped/projects/3463?tab=notes

Query that is helpful to explore HTML tags captured in notes and who added them and when

SELECT
    mpn.project_note_id,
    mpn.project_note,
    mpn.created_at,
    mpn.updated_at,
    mu.first_name,
    mu.last_name,
    mw.workgroup_name
FROM
    moped_proj_notes mpn
    LEFT JOIN moped_users mu ON mpn.created_by_user_id = mu.user_id
    LEFT JOIN moped_workgroup mw ON mu.workgroup_id = mw.workgroup_id
WHERE
    mpn.project_note LIKE '%<a%'
ORDER BY
    mpn.project_id;

Questions from refinement:

• what does it look like when someone edits a note captured in rich text in a plain text editor?
• how do we capture new notes?
  • markdown?
• also, what about downstream dependencies?
  • can they even render markup?
• make a generated column to render as needed?
• how do other teams handle this kind of thing?

[mddilley]

Adding some details from 2.10 and 2.11 QA spreadsheet.

the link has to be well formed, austintexas.gov wont work, but https://austintexas.gov will. MD: Confirmed that austintexas.gov links to https://moped.austinmobility.io/moped/austintexas.gov which is not what we want. Will create an issue. MD 05/30/24: holding off on issue since this is affected by https://github.com/cityofaustin/atd-data-tech/issues/17450

If we decide to remove this library and stick to plain text, the bug described above will go away.

[mddilley]

To see project notes with links (<a> tag) in them:

SELECT * FROM "public"."moped_proj_notes" WHERE "project_note" LIKE '%<a%' ORDER BY "project_note_id";

As of 6/3/2024, 22 out of 10,273 (0.2%) notes in production include links captured by the react-quill component. This does not seem to be a commonly used feature. Will check in on this in MUG next Tuesday (6/11).

As of 6/5/2024, 41 out of 10,314 notes use bold text.

[mddilley]

Targeting sprint June 26th. @mddilley - scope out what it would look like to edit an old note or status update that uses rich text

[mddilley]

Noting that I looked into the specific uses for the rich text captured earlier today, and I found that AMD is using it to copy/paste email content. We refined this issue in planning this afternoon, and we decided to find a replacement library to explore in a spike. If that doesn't work out, we can use the react-quill fork package linked above if it comes down to the wire. The issue description was updated too.