EASI-4634 MentionTextArea Tiptap

[adamodd]

EASI-4634

Description

• New DiscussionBoard view folder

• Pulling in from MINT

  • MentionTextArea + support utils
  • DiscussionModalWrapper
  • Sidepanel

• Adds Tiptap lib

• i18n text is on hold until Add new discussions i18n file #2886 is in

Test

There is a stubbed button under the GRB Review section to open the panel preview

PR Author Checklist

• I have provided a detailed description of the changes in this PR.
• I have provided clear instructions on how to test the changes in this PR.
• I have updated tests or written new tests as appropriate in this PR.

PR Reviewer Guidelines

• It's best to pull the branch locally and test it, rather than just looking at the code online!
• When approving a PR, provide a reason why you're approving it
  • e.g. "Approving because I tested it locally and all functionality works as expected"
  • e.g. "Approving because the change is simple and matches the Figma design"
• Don't be afraid to leave comments or ask questions, especially if you don't understand why something was done! (This is often a great time to suggest code comments or documentation updates)
• Check that all code is adequately covered by tests - if it isn't feel free to suggest the addition of tests.

[adamodd]

Static stub of suggestions until grb participants are passed in

[ClayBenson94]

I'm good with these changes! Feel free to merge or hold if you're waiting for a review from @aterstriep!

[aterstriep]

I'm still working on reviewing this, so please hold off on merging!

[aterstriep]

It doesn't look like this component currently works with React Hook Forms since it was created to work with Formik.

• Bugs when used within a RHF form:
  • The component rerenders with every character typed so the cursor disappears and I have to re-click into the field.
  • If I enter a value and then delete it, the component saves <p></p> as the field value. This prevents field validation from working correctly if the field is required.
  • When I type "@" into the field, I get an error: TypeError: Cannot read properties of undefined (reading '0'). Not sure if that's because tagging isn't fully working yet.
  • RHF fields need a ref for built-in functionality like focus on error to work.
• If you update the props to use the RHF built-in ControllerRenderProps type, we can just spread the field object like we normally do within a form Controller component. That would replace the existing setFieldValue prop with onChange and initialContent with value.

I also noticed that the editor font needs to be updated to match the rest of the app. Adding usa-textarea height-auto classes to the editor would cover this as well as add the top margin that the rest of our text areas have.

[aterstriep]

From our sync about GRB discussions - I'm going to approve this so we can merge as-is, and Adam will address the RHF changes in a follow up PR.