Topcoder Admin App - Add Terms Management: fix html editor in edit form

Author: suppermancool

package.json

@@ -28,6 +28,7 @@
     "@storybook/react": "7.6.10",
     "@stripe/react-stripe-js": "1.13.0",
     "@stripe/stripe-js": "1.41.0",
+    "@tinymce/tinymce-react": "^6.2.1",
     "@types/codemirror": "5.60.15",
     "apexcharts": "^3.36.0",
     "axios": "^1.7.9",
@@ -103,6 +104,7 @@
     "styled-components": "^5.3.6",
     "swr": "^1.3.0",
     "tc-auth-lib": "topcoder-platform/tc-auth-lib#1.0.27",
+    "tinymce": "^7.9.1",
     "typescript": "^4.8.4",
     "universal-navigation": "https://github.com/topcoder-platform/universal-navigation#9fc50d938be7182",
     "uuid": "^11.1.0",

src/apps/admin/src/lib/components/TermsAddForm/TermsAddForm.module.scss

@@ -42,7 +42,9 @@
     flex-direction: column;
     align-items: flex-start;
     gap: 10px;
+}
 
+.fieldAreaContainer {
     textarea {
         height: 200px;
         resize: none;

src/apps/admin/src/lib/components/TermsAddForm/TermsAddForm.tsx

@@ -365,7 +365,10 @@ export const TermsAddForm: FC<Props> = (props: Props) => {
                         inputControl={register('text')}
                         dirty
                         disabled={isLoading}
-                        classNameWrapper={styles.fieldText}
+                        classNameWrapper={classNames(
+                            styles.fieldText,
+                            styles.fieldAreaContainer,
+                        )}
                     />
                 )}
             </div>

src/apps/admin/src/lib/components/common/FieldHtmlEditor/BundledEditor/BundledEditor.module.scss

@@ -0,0 +1,8 @@
+.container {
+    :global {
+        .tox-tinymce {
+            border-radius: 0;
+            border: none;
+        }
+    }
+}

src/apps/admin/src/lib/components/common/FieldHtmlEditor/BundledEditor/BundledEditor.tsx

@@ -0,0 +1,54 @@
+/**
+ * Bundled Editor.
+ */
+import { FC } from 'react'
+import classNames from 'classnames'
+import 'tinymce/tinymce' // TinyMCE so the global var exists
+import 'tinymce/models/dom/model.min.js' // DOM model
+import 'tinymce/themes/silver/theme.min.js' // Theme
+import 'tinymce/icons/default/icons.min.js' // Toolbar icons
+import 'tinymce/skins/ui/oxide/skin' // Editor styles
+import 'tinymce/plugins/advlist/plugin.min.js' // importing the plugin js.
+import 'tinymce/plugins/anchor/plugin.min.js'
+import 'tinymce/plugins/autolink/plugin.min.js'
+import 'tinymce/plugins/autoresize/plugin.min.js'
+import 'tinymce/plugins/autosave/plugin.min.js'
+import 'tinymce/plugins/charmap/plugin.min.js'
+import 'tinymce/plugins/code/plugin.min.js'
+import 'tinymce/plugins/codesample/plugin.min.js'
+import 'tinymce/plugins/directionality/plugin.min.js'
+import 'tinymce/plugins/emoticons/plugin.min.js'
+import 'tinymce/plugins/fullscreen/plugin.min.js'
+import 'tinymce/plugins/help/plugin.min.js'
+import 'tinymce/plugins/image/plugin.min.js'
+import 'tinymce/plugins/importcss/plugin.min.js'
+import 'tinymce/plugins/insertdatetime/plugin.min.js'
+import 'tinymce/plugins/link/plugin.min.js'
+import 'tinymce/plugins/lists/plugin.min.js'
+import 'tinymce/plugins/media/plugin.min.js'
+import 'tinymce/plugins/nonbreaking/plugin.min.js'
+import 'tinymce/plugins/pagebreak/plugin.min.js'
+import 'tinymce/plugins/preview/plugin.min.js'
+import 'tinymce/plugins/quickbars/plugin.min.js'
+import 'tinymce/plugins/save/plugin.min.js'
+import 'tinymce/plugins/searchreplace/plugin.min.js'
+import 'tinymce/plugins/table/plugin.min.js'
+import 'tinymce/plugins/visualblocks/plugin.min.js'
+import 'tinymce/plugins/visualchars/plugin.min.js'
+import 'tinymce/plugins/wordcount/plugin.min.js'
+import 'tinymce/plugins/emoticons/js/emojis' // importing plugin resources
+import 'tinymce/skins/content/default/content' // Content styles, including inline UI like fake cursors
+import 'tinymce/skins/ui/oxide/content'
+/** if you use a plugin that is not listed here the editor will fail to load */
+
+import { Editor } from '@tinymce/tinymce-react'
+
+import styles from './BundledEditor.module.scss'
+
+export const BundledEditor: FC<any> = (props: any) => (
+    <div className={classNames(styles.container, props.className)}>
+        <Editor {...props} />
+    </div>
+)
+
+export default BundledEditor

src/apps/admin/src/lib/components/common/FieldHtmlEditor/BundledEditor/index.ts

@@ -0,0 +1 @@
+export { default as BundledEditor } from './BundledEditor'