refactor: use rich text component from analytics

i18n/en.pot

@@ -56,8 +56,8 @@ msgstr "Spacer"
 msgid "Use a spacer to create empty vertical space between other dashboard items."
 msgstr "Use a spacer to create empty vertical space between other dashboard items."
 
-msgid "Text item"
-msgstr "Text item"
+msgid "Text box"
+msgstr "Text box"
 
 msgid "Add text here"
 msgstr "Add text here"
@@ -337,9 +337,6 @@ msgstr "Cannot search for dashboard items while offline"
 msgid "Additional items"
 msgstr "Additional items"
 
-msgid "Text box"
-msgstr "Text box"
-
 msgid "Dashboard layout"
 msgstr "Dashboard layout"
 

package.json

@@ -5,11 +5,10 @@
     "private": true,
     "license": "BSD-3-Clause",
     "dependencies": {
-        "@dhis2/analytics": "^26.6.10",
+        "@dhis2/analytics": "^26.7.0",
         "@dhis2/app-runtime": "^3.10.2",
         "@dhis2/app-runtime-adapter-d2": "^1.1.0",
         "@dhis2/d2-i18n": "^1.1.3",
-        "@dhis2/d2-ui-rich-text": "^7.4.3",
         "@dhis2/ui": "^9.2.0",
         "@krakenjs/post-robot": "^11.0.0",
         "classnames": "^2.3.2",

src/components/Item/TextItem/Item.js

@@ -1,9 +1,6 @@
+import { RichTextParser, RichTextEditor } from '@dhis2/analytics'
 import i18n from '@dhis2/d2-i18n'
-import {
-    Parser as RichTextParser,
-    Editor as RichTextEditor,
-} from '@dhis2/d2-ui-rich-text'
-import { Divider, TextArea, spacers } from '@dhis2/ui'
+import { Divider, spacers } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { connect } from 'react-redux'
@@ -21,13 +18,11 @@ import PrintItemInfo from '../ItemHeader/PrintItemInfo.js'
 const style = {
     textDiv: {
         padding: '10px',
-        whiteSpace: 'pre-line',
-        lineHeight: '20px',
+        lineHeight: '16px',
     },
     textField: {
         fontSize: '14px',
         fontStretch: 'normal',
-        width: '90%',
         margin: '0 auto',
         display: 'block',
         lineHeight: '24px',
@@ -63,22 +58,19 @@ const TextItem = (props) => {
         return (
             <>
                 <ItemHeader
-                    title={i18n.t('Text item')}
+                    title={i18n.t('Text box')}
                     itemId={item.id}
                     dashboardMode={dashboardMode}
                 />
                 <Divider margin={`0 0 ${spacers.dp4} 0`} />
                 <div className="dashboard-item-content">
                     <RichTextEditor
-                        onEdit={(event) => onChangeText(event.target.value)}
-                    >
-                        <TextArea
-                            rows={30}
-                            value={text}
-                            placeholder={i18n.t('Add text here')}
-                            onChange={({ value }) => onChangeText(value)}
-                        />
-                    </RichTextEditor>
+                        onChange={onChangeText}
+                        inputPlaceholder={i18n.t('Add text here')}
+                        value={text}
+                        initialFocus={false}
+                        resizable={false}
+                    />
                 </div>
             </>
         )

src/components/styles/ItemGrid.css

@@ -65,6 +65,10 @@
     overflow: auto;
 }
 
+.TEXT .dashboard-item-content {
+    padding-bottom: var(--item-content-padding);
+}
+
 .EVENT_REPORT .dashboard-item-content {
     position: relative;
 }

src/pages/edit/ItemGrid.js

@@ -103,7 +103,7 @@ const EditItemGrid = ({
             onWidthChange={onWidthChanged}
             isDraggable={!hasLayout}
             isResizable={!hasLayout}
-            draggableCancel="input,textarea"
+            draggableCancel="button,input,textarea"
         >
             {getItemComponents(dashboardItems)}
         </ResponsiveReactGridLayout>