feat: rich text and user mention components (DHIS2-15522) (#1525)

* feat: add rich text editor/parser components

"Moved" from d2-ui-rich-text.

* feat: moved RichText and UserMention out of Intepretation components

RichText has the Jest tests from the old d2-ui implementation.

* feat: add inputHeight prop to control textarea rows

This allows for customization of the textarea height.

* fix: respect new lines in preview mode DHIS2-15536

* fix: use same styles for text in edit and preview mode DHIS2-15537

* fix: add prop for controlling autofocus DHIS2-15541

* fix: keep toolbar fixed in edit/preview mode DHIS2-15539

* fix: add prop for controlling resizable textarea DHIS2-15540

* fix: make textarea resize according to parent DHIS2-15535

* fix: show search results for the same query (DHIS2-15542)

When the same query is run multiple times, data does not change and the
useEffect does not trigger.
By looking at fetching instead, we can set data every time the query is
completed.

* fix: port help text in the rich text editor fix (DHIS2-15781)

* fix: position caret between bold/italic markers DHIS2-17344

* feat(rich-text): enable heading and lists (DHIS2-17357)

* fix: fix user list positioning with wrapping text (DHIS2-17347)

* fix: close user list when clicking outside of it (DHIS2-17345)

* fix: add a space and put caret after smileys

* fix: close user list when clicking outside (DHIS2-17345)

This fix is to solve the issue of a click on a list item not selecting
the user.
Also, a fix for the list positioning when there are newlines in the
text.

* fix: position the caret between bold/italic markers (DHIS2-17344)

This fix is for when using Ctrl + B/I, now the same callback used when
clicking the B/I buttons in the toolbar is used.

* fix: avoid sending \n in the user search (DHIS2-17523)

They cause the user search request to fail with a 400 error.

---------

Co-authored-by: Jen Jones Arnesen <[email protected]>

i18n/en.pot

@@ -427,39 +427,6 @@ msgstr "Could not update interpretation"
 msgid "Enter interpretation text"
 msgstr "Enter interpretation text"
 
-msgid "Bold text"
-msgstr "Bold text"
-
-msgid "Italic text"
-msgstr "Italic text"
-
-msgid "Link to a URL"
-msgstr "Link to a URL"
-
-msgid "Mention a user"
-msgstr "Mention a user"
-
-msgid "Add emoji"
-msgstr "Add emoji"
-
-msgid "Preview"
-msgstr "Preview"
-
-msgid "Back to write mode"
-msgstr "Back to write mode"
-
-msgid "Too many results. Try refining the search."
-msgstr "Too many results. Try refining the search."
-
-msgid "Search for a user"
-msgstr "Search for a user"
-
-msgid "Searching for \"{{- searchText}}\""
-msgstr "Searching for \"{{- searchText}}\""
-
-msgid "No results found"
-msgstr "No results found"
-
 msgid "Not available offline"
 msgstr "Not available offline"
 
@@ -882,6 +849,27 @@ msgstr "Financial Years"
 msgid "Years"
 msgstr "Years"
 
+msgid "Bold text"
+msgstr "Bold text"
+
+msgid "Italic text"
+msgstr "Italic text"
+
+msgid "Link to a URL"
+msgstr "Link to a URL"
+
+msgid "Mention a user"
+msgstr "Mention a user"
+
+msgid "Add emoji"
+msgstr "Add emoji"
+
+msgid "Preview"
+msgstr "Preview"
+
+msgid "Back to write mode"
+msgstr "Back to write mode"
+
 msgid "Interpretations and details"
 msgstr "Interpretations and details"
 
@@ -912,6 +900,18 @@ msgstr "Could not load translations"
 msgid "Retry"
 msgstr "Retry"
 
+msgid "Too many results. Try refining the search."
+msgstr "Too many results. Try refining the search."
+
+msgid "Search for a user"
+msgstr "Search for a user"
+
+msgid "Searching for \"{{- searchText}}\""
+msgstr "Searching for \"{{- searchText}}\""
+
+msgid "No results found"
+msgstr "No results found"
+
 msgid "Series"
 msgstr "Series"
 

package.json

@@ -59,7 +59,6 @@
         "styled-jsx": "^4.0.1"
     },
     "dependencies": {
-        "@dhis2/d2-ui-rich-text": "^7.4.1",
         "@dhis2/multi-calendar-dates": "1.0.0",
         "@dnd-kit/core": "^6.0.7",
         "@dnd-kit/sortable": "^7.0.2",
@@ -71,6 +70,7 @@
         "d3-color": "^1.2.3",
         "highcharts": "^10.3.3",
         "lodash": "^4.17.21",
+        "markdown-it": "^13.0.1",
         "mathjs": "^9.4.2",
         "react-beautiful-dnd": "^10.1.1",
         "resize-observer-polyfill": "^1.5.1"

src/components/AboutAOUnit/AboutAOUnit.js

@@ -4,7 +4,6 @@ import {
     useTimeZoneConversion,
 } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { Parser as RichTextParser } from '@dhis2/d2-ui-rich-text'
 import {
     Button,
     CircularLoader,
@@ -29,6 +28,7 @@ import React, {
     useImperativeHandle,
 } from 'react'
 import { formatList } from '../../modules/list.js'
+import { RichTextParser } from '../RichText/index.js'
 import styles from './styles/AboutAOUnit.style.js'
 import { getTranslatedString, AOTypeMap } from './utils.js'
 
@@ -191,7 +191,7 @@ const AboutAOUnit = forwardRef(({ type, id, renderId }, ref) => {
                     )}
                     {data && (
                         <div className="content">
-                            <p
+                            <div
                                 className={cx('detailLine', {
                                     description: true,
                                     noDescription: !data.ao.displayDescription,
@@ -202,9 +202,9 @@ const AboutAOUnit = forwardRef(({ type, id, renderId }, ref) => {
                                         {data.ao.displayDescription}
                                     </RichTextParser>
                                 ) : (
-                                    i18n.t('No description')
+                                    <p>{i18n.t('No description')}</p>
                                 )}
-                            </p>
+                            </div>
                             <div>
                                 <p className="detailLine">
                                     <IconShare16 color={colors.grey700} />

src/components/Interpretations/InterpretationModal/CommentAddForm.js

@@ -3,8 +3,8 @@ import i18n from '@dhis2/d2-i18n'
 import { Button } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useRef, useState } from 'react'
+import { RichTextEditor } from '../../RichText/index.js'
 import {
-    RichTextEditor,
     MessageEditorContainer,
     MessageButtonStrip,
     MessageInput,

src/components/Interpretations/InterpretationModal/CommentUpdateForm.js

@@ -3,11 +3,8 @@ import i18n from '@dhis2/d2-i18n'
 import { Button, spacers, colors } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useState, useRef } from 'react'
-import {
-    MessageEditorContainer,
-    RichTextEditor,
-    MessageButtonStrip,
-} from '../common/index.js'
+import { RichTextEditor } from '../../RichText/index.js'
+import { MessageEditorContainer, MessageButtonStrip } from '../common/index.js'
 
 export const CommentUpdateForm = ({
     interpretationId,

src/components/Interpretations/InterpretationsUnit/InterpretationForm.js

@@ -3,11 +3,8 @@ import i18n from '@dhis2/d2-i18n'
 import { Button, Input } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useRef, useState } from 'react'
-import {
-    RichTextEditor,
-    MessageEditorContainer,
-    MessageButtonStrip,
-} from '../common/index.js'
+import { RichTextEditor } from '../../RichText/index.js'
+import { MessageEditorContainer, MessageButtonStrip } from '../common/index.js'
 
 export const InterpretationForm = ({
     type,
@@ -46,7 +43,7 @@ export const InterpretationForm = ({
             dataTest="interpretation-form"
         >
             {showRichTextEditor ? (
-                <div>
+                <>
                     <RichTextEditor
                         disabled={saveMutationInProgress}
                         inputPlaceholder={inputPlaceholder}
@@ -81,7 +78,7 @@ export const InterpretationForm = ({
                             {i18n.t('Cancel')}
                         </Button>
                     </MessageButtonStrip>
-                </div>
+                </>
             ) : (
                 <Input
                     onFocus={() => setShowRichTextEditor(true)}

src/components/Interpretations/common/Interpretation/InterpretationUpdateForm.js

@@ -3,9 +3,9 @@ import i18n from '@dhis2/d2-i18n'
 import { Button, spacers, colors } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
+import { RichTextEditor } from '../../../RichText/index.js'
 import {
     MessageEditorContainer,
-    RichTextEditor,
     MessageButtonStrip,
     InterpretationSharingLink,
 } from '../index.js'

src/components/Interpretations/common/Message/Message.js

@@ -1,9 +1,9 @@
 import { useTimeZoneConversion } from '@dhis2/app-runtime'
-import { Parser as RichTextParser } from '@dhis2/d2-ui-rich-text'
 import { UserAvatar, spacers, colors } from '@dhis2/ui'
 import moment from 'moment'
 import PropTypes from 'prop-types'
 import React from 'react'
+import { RichTextParser } from '../../../RichText/index.js'
 
 const Message = ({ children, text, created, username }) => {
     const { fromServerDate } = useTimeZoneConversion()

src/components/Interpretations/common/Message/MessageEditorContainer.js

@@ -19,6 +19,7 @@ const MessageEditorContainer = ({ children, currentUser, dataTest }) => (
             }
             .editor {
                 flex-grow: 1;
+                height: 100%;
             }
         `}</style>
     </div>

src/components/Interpretations/common/index.js

@@ -1,4 +1,3 @@
 export * from './Interpretation/index.js'
 export * from './Message/index.js'
-export * from './RichTextEditor/index.js'
 export * from './getInterpretationAccess.js'