@pega/dx-component-builder-sdk 0.23.6 → 0.23.7

package/tests/assets/components/SDK-React/create/override-sdk/template/TwoColumnPage/TwoColumnPage.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-
-import TwoColumn from '@pega/react-sdk-components/lib/components/template/TwoColumn/TwoColumn';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
 // TwoColumnPage does NOT have getPConnect. So, no need to extend from PConnProps
 interface TwoColumnPageProps{
@@ -14,6 +13,8 @@ interface TwoColumnPageProps{
  *  and mapping to the TwoColumn template.
  */
 export default function TwoColumnPage(props: TwoColumnPageProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const TwoColumn = getComponentFromMap('TwoColumn');
 
   return (
     <TwoColumn

package/tests/assets/components/SDK-React/create/override-sdk/template/WideNarrowDetails/WideNarrowDetails.tsx

@@ -2,10 +2,11 @@ import React, { createElement } from 'react';
 import Grid from '@material-ui/core/Grid';
 import { GridSize } from '@material-ui/core/Grid';
 import createPConnectComponent from '@pega/react-sdk-components/lib/bridge/react_pconnect';
-import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
 // import type { PConnProps } from '../../../../types/PConnProps';
 
-// Can't use PConnProps until createComponent types are ok
+// Can't use PConnProps until PConnect.getChildren() type is ok
 // interface WideNarrowDetailsProps extends PConnProps {
 //   // If any, enter additional props that only exist on this component
 //   showLabel?: boolean,
@@ -16,6 +17,9 @@ import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemEx
 const COLUMN_WIDTHS = [8, 4];
 
 export default function WideNarrowDetails(props /* : WideNarrowDetailsProps */) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const FieldGroup = getComponentFromMap('FieldGroup');
+
   const { label, showLabel = true, getPConnect, showHighlightedData = false } = props;
 
   // Get the inherited props from the parent to determine label settings
@@ -53,7 +57,8 @@ export default function WideNarrowDetails(props /* : WideNarrowDetailsProps */)
         field.config.displayAsStatus = true;
       }
 
-      return getPConnect().createComponent(field);
+      return getPConnect().createComponent(field,
+        '', '', {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
     });
   }
 

package/tests/assets/components/SDK-React/create/override-sdk/template/WideNarrowPage/WideNarrowPage.tsx

@@ -1,7 +1,5 @@
 import React, { Children } from "react";
-
-// import { TwoColumnPage as TwoColumn } from "@pega/cosmos-react-core";
-import WideNarrow from '@pega/react-sdk-components/lib/components/template/WideNarrow/WideNarrow';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
 // WideNarrowPage does NOT have getPConnect. So, no need to extend from PConnProps
 interface WideNarrowPageProps {
@@ -18,6 +16,9 @@ interface WideNarrowPageProps {
  * to the Cosmos template.
  */
 export default function WideNarrowPage(props: WideNarrowPageProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const WideNarrow = getComponentFromMap('WideNarrow');
+
   const { children, title, templateCol = '1fr 1fr', icon = '' } = props;
   const childArray = Children.toArray(children);
 

package/tests/assets/components/SDK-React/create/override-sdk/widget/Attachment/Attachment.tsx

@@ -4,9 +4,10 @@ import { Button } from '@material-ui/core';
 import React, { useState, useEffect } from 'react';
 import { buildFilePropsFromResponse, getIconFromFileType, validateMaxSize, getIconForAttachment } from '@pega/react-sdk-components/lib/components/helpers/attachmentHelpers';
 import './Attachment.css';
-import SummaryList from '@pega/react-sdk-components/lib/components/widget/SummaryList'
 import { CircularProgress } from "@material-ui/core";
 import download from "downloadjs";
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
 // import type { PConnProps } from '../../../types/PConnProps';
 
 // Remove this and use "real" PCore type once .d.ts is fixed (currently shows 2 errors)
@@ -27,6 +28,9 @@ function getCurrentAttachmentsList(key, context) {
 }
 
 export default function Attachment(props /* :AttachmentProps */) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const SummaryList = getComponentFromMap('SummaryList');
+
   const PCoreVersion = PCore.getPCoreVersion();
   const {value, getPConnect, label, validatemessage} = props;
   /* this is a temporary fix because required is supposed to be passed as a boolean and NOT as a string */

package/tests/assets/components/SDK-React/create/override-sdk/widget/FileUtility/FileUtility.tsx

@@ -2,14 +2,16 @@ import React, { useEffect, useState } from "react";
 import TextField from '@material-ui/core/TextField';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 import download from "downloadjs";
-import SummaryList from '@pega/react-sdk-components/lib/components/widget/SummaryList';
-import ActionButtonsForFileUtil from '@pega/react-sdk-components/lib/components/widget/FileUtility/ActionButtonsForFileUtil';
+// import SummaryList from '../../SummaryList';
+// import ActionButtonsForFileUtil from '../ActionButtonsForFileUtil';
 import './FileUtility.css';
 import  { IconButton, Menu, MenuItem } from '@material-ui/core';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import { Button } from '@material-ui/core';
 import { validateMaxSize } from '@pega/react-sdk-components/lib/components/helpers/attachmentHelpers';
 import { CircularProgress } from "@material-ui/core";
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+
 import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 
@@ -23,6 +25,10 @@ declare const PCore: any;
 
 
 export default function FileUtility(props:FileUtilityProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const SummaryList = getComponentFromMap('SummaryList');
+  const ActionButtonsForFileUtil = getComponentFromMap('ActionButtonsForFileUtil');
+
   const { getPConnect } = props;
   const thePConn = getPConnect();
   const required = true;

package/tests/assets/components/SDK-React/create/override-sdk/widget/QuickCreate/QuickCreate.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import WssQuickCreate from '@pega/react-sdk-components/lib/components/designSystemExtension/WssQuickCreate';
 import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 // import type { PConnProps } from '../../../types/PConnProps';
 
 // Can't add PConnTypes until we can resolve type problems with
@@ -11,6 +11,9 @@ import { Utils } from '@pega/react-sdk-components/lib/components/helpers/utils';
 
 
 export default function QuickCreate(props /* : QuickCreateProps */) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const WssQuickCreate = getComponentFromMap('WssQuickCreate');
+
   const { getPConnect, heading, showCaseIcons, classFilter } = props;
   const pConn = getPConnect();
   const createCase = (className) => {

package/tests/assets/components/SDK-React/create/override-sdk/widget/SummaryList/SummaryList.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import SummaryItem from '@pega/react-sdk-components/lib/components/widget/SummaryItem/index'
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
 // SummaryList does NOT have getPConnect. So, no need to extend from PConnProps
 
@@ -12,6 +12,9 @@ interface SummaryListProps {
 
 
 export default function SummaryList(props: SummaryListProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const SummaryItem = getComponentFromMap('SummaryItem');
+
   const { menuIconOverride$: menuOverride = ""} = props;
   return (
     <div>

package/tests/assets/components/SDK-React/create/override-sdk/widget/ToDo/ToDo.tsx

@@ -31,22 +31,21 @@ import type { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps
 
 interface ToDoProps extends PConnProps {
   // If any, enter additional props that only exist on this component
-  datasource?: any,
-  myWorkList?: any,
+  datasource?: any;
+  myWorkList?: any;
   // eslint-disable-next-line react/no-unused-prop-types
-  caseInfoID?: string,
-  headerText?: string,
+  caseInfoID?: string;
+  headerText?: string;
   // eslint-disable-next-line react/no-unused-prop-types
-  itemKey?: string,
-  showTodoList?: boolean,
-  type?: string,
+  itemKey?: string;
+  showTodoList?: boolean;
+  type?: string;
   // eslint-disable-next-line react/no-unused-prop-types
-  context?: string,
-  isConfirm?: boolean
+  context?: string;
+  isConfirm?: boolean;
 }
 
-
-const isChildCase = assignment => {
+const isChildCase = (assignment) => {
   return assignment.isChild;
 };
 
@@ -65,7 +64,7 @@ function getID(assignment: any) {
   }
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
   root: {
     marginTop: theme.spacing(1),
     marginBottom: theme.spacing(1),
@@ -86,15 +85,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export default function ToDo(props: ToDoProps) {
-  const {
-    getPConnect,
-    datasource = [],
-    headerText = 'To do',
-    showTodoList = true,
-    myWorkList = {},
-    type = 'worklist',
-    isConfirm = false
-  } = props;
+  const { getPConnect, datasource = [], headerText = 'To do', showTodoList = true, myWorkList = {}, type = 'worklist', isConfirm = false } = props;
 
   const CONSTS = PCore.getConstants();
 
@@ -130,15 +121,15 @@ export default function ToDo(props: ToDoProps) {
     }
   }
 
-  const getAssignmentId = assignment => {
+  const getAssignmentId = (assignment) => {
     return type === CONSTS.TODO ? assignment.ID : assignment.id;
   };
 
-  const getPriority = assignment => {
+  const getPriority = (assignment) => {
     return type === CONSTS.TODO ? assignment.urgency : assignment.priority;
   };
 
-  const getAssignmentName = assignment => {
+  const getAssignmentName = (assignment) => {
     return type === CONSTS.TODO ? assignment.name : assignment.stepName;
   };
 
@@ -173,7 +164,7 @@ export default function ToDo(props: ToDoProps) {
     const sTarget = thePConn.getContainerName();
     const sTargetContainerName = sTarget;
 
-    const options = { containerName: sTargetContainerName, channelName: "" };
+    const options = { containerName: sTargetContainerName, channelName: '' };
 
     if (classname === null || classname === '') {
       classname = thePConn.getCaseInfo().getClassName();
@@ -208,30 +199,26 @@ export default function ToDo(props: ToDoProps) {
 
     if ((showTodoList && type !== CONSTS.TODO) || assignment.isChild === true) {
       /* Supress link for todo inside flow step */
-      return (
-        <Button size='small' color='primary'>{`${assignment.name} ${getID(assignment)}`}</Button>
-      );
+      return <Button size="small" color="primary">{`${assignment.name} ${getID(assignment)}`}</Button>;
     }
     return displayID;
   };
 
-  const getListItemComponent = assignment => {
+  const getListItemComponent = (assignment) => {
     if (isDesktop) {
       return (
         <>
           {localizedVal('Task in', localeCategory)}
           {renderTaskId(type, getPConnect, showTodoList, assignment)}
           {type === CONSTS.WORKLIST && assignment.status ? `\u2022 ` : undefined}
-          {type === CONSTS.WORKLIST && assignment.status ? (
-            <span className='psdk-todo-assignment-status'>{assignment.status}</span>
-          ) : undefined}
+          {type === CONSTS.WORKLIST && assignment.status ? <span className="psdk-todo-assignment-status">{assignment.status}</span> : undefined}
           {` \u2022  ${localizedVal('Urgency', localeCategory)}  ${getPriority(assignment)}`}
         </>
       );
     }
     return (
       <>
-        <Button size='small' color='primary'>{`${assignment.name} ${getID(assignment)}`}</Button>
+        <Button size="small" color="primary">{`${assignment.name} ${getID(assignment)}`}</Button>
         {` \u2022 ${localizedVal('Urgency', localeCategory)}  ${getPriority(assignment)}`}
       </>
     );
@@ -242,37 +229,33 @@ export default function ToDo(props: ToDoProps) {
       {showTodoList && (
         <CardHeader
           title={
-            <Badge badgeContent={assignmentCount} color='primary'>
-              <Typography variant='h6'>{headerText}&nbsp;&nbsp;&nbsp;</Typography>
+            <Badge badgeContent={assignmentCount} overlap="rectangular" color="primary">
+              <Typography variant="h6">{headerText}&nbsp;&nbsp;&nbsp;</Typography>
             </Badge>
           }
         ></CardHeader>
       )}
       <List>
-        {assignments.map(assignment => (
-          <>
-            <div className='psdk-todo-avatar-header' key={getAssignmentId(assignment)}>
-              <Avatar className={classes.avatar} style={{ marginRight: '16px' }}>
-                {currentUserInitials}
-              </Avatar>
-              <div style={{ display: 'block' }}>
-                <Typography variant='h6'>{assignment?.name}</Typography>
-                {`${localizedVal('Task in', localeCategory)} ${renderTaskId(
-                  type,
-                  getPConnect,
-                  showTodoList,
-                  assignment
-                )} \u2022  ${localizedVal('Urgency', localeCategory)}  ${getPriority(assignment)}`}
-              </div>
-              {!isConfirm && (
-                <div style={{ marginLeft: 'auto' }}>
-                  <IconButton onClick={() => clickGo(assignment)}>
-                    <ArrowForwardIosOutlinedIcon />
-                  </IconButton>
-                </div>
-              )}
+        {assignments.map((assignment) => (
+          <div className="psdk-todo-avatar-header" key={getAssignmentId(assignment)}>
+            <Avatar className={classes.avatar} style={{ marginRight: '16px' }}>
+              {currentUserInitials}
+            </Avatar>
+            <div style={{ display: 'block' }}>
+              <Typography variant="h6">{assignment?.name}</Typography>
+              {`${localizedVal('Task in', localeCategory)} ${renderTaskId(type, getPConnect, showTodoList, assignment)} \u2022  ${localizedVal(
+                'Urgency',
+                localeCategory
+              )}  ${getPriority(assignment)}`}
             </div>
-          </>
+            {!isConfirm && (
+              <div style={{ marginLeft: 'auto' }}>
+                <IconButton onClick={() => clickGo(assignment)}>
+                  <ArrowForwardIosOutlinedIcon />
+                </IconButton>
+              </div>
+            )}
+          </div>
         ))}
       </List>
     </>
@@ -285,8 +268,8 @@ export default function ToDo(props: ToDoProps) {
           {showTodoList && (
             <CardHeader
               title={
-                <Badge badgeContent={assignmentCount} color='primary'>
-                  <Typography variant='h6'>{headerText}&nbsp;&nbsp;&nbsp;</Typography>
+                <Badge badgeContent={assignmentCount} overlap="rectangular" color="primary">
+                  <Typography variant="h6">{headerText}&nbsp;&nbsp;&nbsp;</Typography>
                 </Badge>
               }
               avatar={<Avatar className={classes.avatar}>{currentUserInitials}</Avatar>}
@@ -294,17 +277,9 @@ export default function ToDo(props: ToDoProps) {
           )}
           <CardContent>
             <List>
-              {assignments.map(assignment => (
-                <ListItem
-                  key={getAssignmentId(assignment)}
-                  dense
-                  divider
-                  onClick={() => clickGo(assignment)}
-                >
-                  <ListItemText
-                    primary={getAssignmentName(assignment)}
-                    secondary={getListItemComponent(assignment)}
-                  />
+              {assignments.map((assignment) => (
+                <ListItem key={getAssignmentId(assignment)} dense divider onClick={() => clickGo(assignment)}>
+                  <ListItemText primary={getAssignmentName(assignment)} secondary={getListItemComponent(assignment)} />
                   <ListItemSecondaryAction>
                     <IconButton onClick={() => clickGo(assignment)}>
                       <ArrowForwardIosOutlinedIcon />
@@ -317,21 +292,17 @@ export default function ToDo(props: ToDoProps) {
         </Card>
       )}
 
-      {type === CONSTS.TODO && !isConfirm && (
-        <Card className={classes.todoWrapper}>{toDoContent}</Card>
-      )}
+      {type === CONSTS.TODO && !isConfirm && <Card className={classes.todoWrapper}>{toDoContent}</Card>}
       {type === CONSTS.TODO && isConfirm && <Fragment>{toDoContent}</Fragment>}
 
       {assignmentCount > 3 && (
-        <Box display='flex' justifyContent='center'>
+        <Box display="flex" justifyContent="center">
           {bShowMore ? (
-            <Button color='primary' onClick={_showMore}>
-              {showMoreLocalizedValue ===  'show_more' ? 'Show more': showMoreLocalizedValue}
+            <Button color="primary" onClick={_showMore}>
+              {showMoreLocalizedValue === 'show_more' ? 'Show more' : showMoreLocalizedValue}
             </Button>
           ) : (
-            <Button onClick={_showLess}>
-              {showlessLocalizedValue ===  'show_less' ? 'Show less': showlessLocalizedValue}
-            </Button>
+            <Button onClick={_showLess}>{showlessLocalizedValue === 'show_less' ? 'Show less' : showlessLocalizedValue}</Button>
           )}
         </Box>
       )}
@@ -342,8 +313,8 @@ export default function ToDo(props: ToDoProps) {
         onClose={handleSnackbarClose}
         message={snackbarMessage}
         action={
-          <IconButton size='small' aria-label='close' color='inherit' onClick={handleSnackbarClose}>
-            <CloseIcon fontSize='small' />
+          <IconButton size="small" aria-label="close" color="inherit" onClick={handleSnackbarClose}>
+            <CloseIcon fontSize="small" />
           </IconButton>
         }
       />

package/tests/assets/components/SDK-React/createAll/custom-constellation/field/Pega_DXIL_MyTextInput/index.jsx

@@ -102,7 +102,7 @@ const PegaDxilMyTextInput = props => {
     } else if (!hasSuggestions && status !== 'success') {
       setStatus(validatemessage !== '' ? 'error' : undefined);
     }
-  }, [validatemessage, hasSuggestions]);
+  }, [validatemessage, hasSuggestions, status]);
 
   const onResolveSuggestionHandler = (accepted) => {
     suggestionsHandler(accepted, pConn, setStatus);

package/tests/assets/components/SDK-React/createAll/override-sdk/designSystemExtension/AlertBanner/AlertBanner.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Alert } from '@material-ui/lab';
+
+
+// AlertBanner is one of the few components that does NOT have getPConnect.
+//  So, no need to extend PConnProps
+interface AlertBannerProps {
+  // If any, enter additional props that only exist on Date here
+  id: string,
+  variant: string,
+  messages: Array<string>,
+  onDismiss?: any
+}
+
+
+const SEVERITY_MAP = {
+  urgent: 'error',
+  warning: 'warning',
+  success: 'success',
+  info: 'info'
+};
+
+export default function AlertBanner(props:AlertBannerProps) {
+  const { id, variant, messages, onDismiss } = props;
+  let additionalProps = {};
+
+  if (onDismiss) {
+    additionalProps = {
+      onClose: onDismiss
+    };
+  }
+
+  return (
+    <div id={id}>
+      {messages.map(message => (
+        <Alert
+          key={message}
+          variant='outlined'
+          severity={SEVERITY_MAP[variant]}
+          {...additionalProps}
+        >
+          {message}
+        </Alert>
+      ))}
+    </div>
+  );
+}

package/tests/assets/components/SDK-React/createAll/override-sdk/designSystemExtension/AlertBanner/index.tsx

@@ -0,0 +1 @@
+export { default } from './AlertBanner';

package/tests/assets/components/SDK-React/createAll/override-sdk/designSystemExtension/CaseSummaryFields/CaseSummaryFields.tsx

@@ -1,11 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import isDeepEqual from 'fast-deep-equal/react';
-
 import Grid from '@material-ui/core/Grid';
 import TextField from '@material-ui/core/TextField';
-import Operator from '@pega/react-sdk-components/lib/components/designSystemExtension/Operator';
 import { getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
 import { getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 
 import './CaseSummaryFields.css';
 
@@ -21,7 +20,10 @@ interface CaseSummaryFieldsProps{
 }
 
 
-export default function CaseSummaryFields(props:CaseSummaryFieldsProps) {
+export default function CaseSummaryFields(props: CaseSummaryFieldsProps) {
+  // Get emitted components from map (so we can get any override that may exist)
+  const Operator = getComponentFromMap("Operator");
+
   const { status, showStatus, theFields } = props;
 
   const [theFieldsToRender, setFieldsToRender] = useState([]);

package/tests/assets/components/SDK-React/createAll/override-sdk/designSystemExtension/RichTextEditor/RichTextEditor.tsx

@@ -0,0 +1,121 @@
+import React, { forwardRef } from 'react';
+import { Editor } from '@tinymce/tinymce-react';
+import { FormControl, FormHelperText, InputLabel, makeStyles } from '@material-ui/core';
+import { useAfterInitialEffect, useConsolidatedRef, useUID } from '@pega/react-sdk-components/lib/hooks';
+
+const useStyles = makeStyles((theme) => ({
+  fieldLabel: {
+    position: 'relative',
+    transform: 'translate(0, 0px) scale(1)',
+    marginBottom: '5px',
+    color: theme.palette.text.secondary
+  }
+}));
+
+interface RichTextEditorProps {
+  id?: string;
+  defaultValue: string;
+  label: string;
+  labelHidden: boolean;
+  info: string;
+  testId: string;
+  placeholder: string;
+  disabled: boolean;
+  required: boolean;
+  readOnly: boolean;
+  error: boolean;
+  onBlur: React.EventHandler<any>;
+  onChange: React.EventHandler<any>;
+}
+
+const RichTextEditor = forwardRef(function RichTextEditor(props: RichTextEditorProps, ref) {
+  const classes = useStyles();
+  const uid = useUID();
+  const { id = uid, defaultValue, label, labelHidden, info, testId, placeholder, disabled, required, readOnly, error, onBlur, onChange } = props;
+
+  const editorRef: any = useConsolidatedRef(ref);
+  let richTextComponent: any = null;
+
+  useAfterInitialEffect(() => {
+    editorRef?.current.mode.set(readOnly || disabled ? 'readonly' : 'design');
+  }, [readOnly, disabled]);
+
+  const filePickerCallback = (cb) => {
+    const input = document.createElement('input');
+    input.setAttribute('type', 'file');
+    input.setAttribute('accept', 'image/*');
+
+    input.addEventListener('change', (e: any) => {
+      const file = e.target.files[0];
+
+      const reader: any = new FileReader();
+      reader.addEventListener('load', () => {
+        /*
+          Note: Now we need to register the blob in TinyMCEs image blob
+          registry. In the next release this part hopefully won't be
+          necessary, as we are looking to handle it internally.
+        */
+        const blobId = `blobid${new Date().getTime()}`;
+        const blobCache = editorRef.current.editorUpload.blobCache;
+        const base64 = reader.result.split(',')[1];
+        const blobInfo = blobCache.create(blobId, file, base64);
+        blobCache.add(blobInfo);
+
+        /* call the callback and populate the Title field with the file name */
+        cb(blobInfo.blobUri(), { title: file.name });
+      });
+      reader.readAsDataURL(file);
+    });
+
+    input.click();
+  };
+
+  if (readOnly) {
+    const value = defaultValue || '--';
+    // eslint-disable-next-line react/no-danger
+    richTextComponent = <div key={id} id={id} className="readonly-richtext-editor" dangerouslySetInnerHTML={{ __html: value }} />;
+  } else {
+    richTextComponent = (
+      <Editor
+        tinymceScriptSrc="tinymce/tinymce.min.js"
+        onInit={(_evt, editor) => {
+          editorRef.current = editor;
+        }}
+        id={id}
+        initialValue={defaultValue}
+        disabled={disabled}
+        init={{
+          placeholder,
+          menubar: false,
+          statusbar: false,
+          min_height: 130,
+          plugins: ['lists', 'advlist', 'autolink', 'image', 'link', 'autoresize'],
+          autoresize_bottom_margin: 0,
+          toolbar: disabled ? false : 'blocks | bold italic strikethrough | bullist numlist outdent indent | link image',
+          toolbar_location: 'bottom',
+          content_style: 'body { font-family:Helvetica, Arial,sans-serif; font-size:14px }',
+          branding: false,
+          paste_data_images: true,
+          file_picker_types: 'image',
+          file_picker_callback: filePickerCallback
+        }}
+        onBlur={onBlur}
+        onEditorChange={onChange}
+      />
+    );
+  }
+
+  return (
+    <FormControl data-test-id={testId} error={error} required={required}>
+      {!labelHidden && (
+        <InputLabel id="demo-simple-select-error-label" className={classes.fieldLabel}>
+          {label}
+        </InputLabel>
+      )}
+      {richTextComponent}
+      {info && <FormHelperText>{info}</FormHelperText>}
+    </FormControl>
+  );
+});
+
+export default RichTextEditor;

package/tests/assets/components/SDK-React/createAll/override-sdk/designSystemExtension/RichTextEditor/index.tsx

@@ -0,0 +1 @@
+export { default } from './RichTextEditor';