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

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'