@tellescope/react-components 1.168.0 → 1.170.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellescope/react-components",
-  "version": "1.168.0",
+  "version": "1.170.0",
   "description": "",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
@@ -47,23 +47,27 @@
     "@reduxjs/toolkit": "^1.6.2",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^1.52.1",
-    "@tellescope/constants": "^1.168.0",
-    "@tellescope/sdk": "^1.168.0",
-    "@tellescope/types-client": "^1.168.0",
-    "@tellescope/types-models": "^1.168.0",
-    "@tellescope/types-utilities": "^1.168.0",
-    "@tellescope/utilities": "^1.168.0",
-    "@tellescope/validation": "^1.168.0",
+    "@tellescope/constants": "^1.170.0",
+    "@tellescope/sdk": "^1.170.0",
+    "@tellescope/types-client": "^1.170.0",
+    "@tellescope/types-models": "^1.170.0",
+    "@tellescope/types-utilities": "^1.170.0",
+    "@tellescope/utilities": "^1.170.0",
+    "@tellescope/validation": "^1.170.0",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "css-to-react-native": "^3.0.0",
+    "draft-js": "^0.11.7",
+    "draftjs-to-html": "^0.9.1",
     "eslint": "^7.32.0",
     "eslint-plugin-react": "^7.26.1",
     "formik": "^2.2.9",
     "heic2any": "^0.0.4",
+    "html-to-draftjs": "^1.5.0",
     "nodemon": "^2.0.13",
     "react-beautiful-dnd": "^13.1.1",
     "react-datepicker": "^3.4.1",
+    "react-draft-wysiwyg": "^1.15.0",
     "react-draggable": "^4.4.6",
     "react-dropzone": "^11.4.2",
     "react-ga4": "^1.4.1",
@@ -80,7 +84,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-native": "^0.65.0 || ^0.66.0 || ^0.67.0 || ^0.68.0 || ^0.71.0"
   },
-  "gitHead": "2a92eab06c67bafc1445136c8e81dab4a94d260e",
+  "gitHead": "d9bbecc704e9ecd06d59ffbdaa155879a109c925",
   "publishConfig": {
     "access": "public"
   }

package/src/Forms/form_responses.tsx

@@ -31,7 +31,7 @@ export const ResponseAnswer = ({ formResponse, fieldId, isHTML, answer: a, print
   onImageClick?: (args: { src: string }) => void,
   isHTML?: boolean,
 }) => (
-(isHTML && typeof a.value === 'string') 
+((isHTML || a.type === 'Rich Text') && typeof a.value === 'string') 
   ? <div dangerouslySetInnerHTML={{ __html: remove_script_tags(a.value) }} />
   : a.value 
     ? (

package/src/Forms/forms.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
-import { Button, CircularProgress, Flex, LinearProgress, LoadingButton, Modal, Paper, Styled, Typography, form_display_text_for_language, useFileUpload, useFormResponses, useSession } from "../index"
+import { Button, CircularProgress, FileBlob, FileUploadHandler, Flex, LinearProgress, LoadingButton, Modal, Paper, Styled, Typography, form_display_text_for_language, useFileUpload, useFormResponses, useSession } from "../index"
 import { useListForFormFields, useOrganizationTheme, useTellescopeForm, WithOrganizationTheme, Response, FileResponse, NextFieldLogicOptions } from "./hooks"
 import { ChangeHandler, FormInputs } from "./types"
-import { AddressInput, AllergiesInput, AppointmentBookingInput, ConditionsInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, defaultButtonStyles } from "./inputs"
+import { AddressInput, AllergiesInput, AppointmentBookingInput, ConditionsInput, DatabaseSelectInput, DateInput, DateStringInput, DropdownInput, EmailInput, EmotiiInput, FileInput, FilesInput, HeightInput, HiddenValueInput, InsuranceInput, LanguageSelect, MedicationsInput, MultipleChoiceInput, NumberInput, PhoneInput, Progress, RankingInput, RatingInput, RedirectInput, RelatedContactsInput, RichTextInput, SignatureInput, StringInput, StringLongInput, StripeInput, TableInput, TimeInput, defaultButtonStyles } from "./inputs"
 import { PRIMARY_HEX } from "@tellescope/constants"
 import { FormResponse, FormField, Form, Enduser } from "@tellescope/types-client"
 import { FormResponseAnswerFileValue, OrganizationTheme } from "@tellescope/types-models"
@@ -135,6 +135,7 @@ export const QuestionForField = ({
   rootResponseId,
   isInQuestionGroup,
   logicOptions,
+  uploadingFiles, setUploadingFiles, handleFileUpload,
 } : {
   spacing?: number,
   form?: Form,
@@ -147,6 +148,9 @@ export const QuestionForField = ({
   isSinglePage?: boolean,
   isInQuestionGroup?: boolean,
   logicOptions?: NextFieldLogicOptions,
+  handleFileUpload: (blob: FileBlob, fieldId: string) => Promise<any>,
+  uploadingFiles: { fieldId: string }[]
+  setUploadingFiles: React.Dispatch<React.SetStateAction<{ fieldId: string }[]>>,
 } & Pick<TellescopeFormProps, "rootResponseId" | "goToNextField" | "groupId" | "groupInstance" | "submit" | "formResponseId" | 'enduserId' | 'isPreviousDisabled' | 'goToPreviousField' | 'enduser' | 'handleDatabaseSelect' | 'onAddFile' | 'onFieldChange' | 'fields' | 'customInputs' | 'responses' | 'selectedFiles' | 'validateField'>) => {
   const String = customInputs?.['string'] ?? StringInput
   const StringLong = customInputs?.['stringLong'] ?? StringLongInput
@@ -175,6 +179,7 @@ export const QuestionForField = ({
   const Emotii = customInputs?.['Emotii'] ?? EmotiiInput
   const Allergies = customInputs?.['Allergies'] ?? AllergiesInput
   const Conditions = customInputs?.['Conditions'] ?? ConditionsInput
+  const RichText = customInputs?.['Rich Text'] ?? RichTextInput
 
   const validationMessage = validateField(field)
 
@@ -233,6 +238,7 @@ export const QuestionForField = ({
                 ? value.answer.value?.name
                 : ''
             } 
+            handleFileUpload={handleFileUpload} uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
           />
         )
         : field.type === 'files' ? (
@@ -242,6 +248,7 @@ export const QuestionForField = ({
             //     ? value.answer.value?.name
             //     : ''
             // } 
+            handleFileUpload={handleFileUpload} uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
           />
         )
         : field.type === 'dateString' ? (
@@ -283,6 +290,9 @@ export const QuestionForField = ({
         : field.type === 'stringLong' ? (
           <StringLong field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'string' | 'stringLong'>} form={form} />
         )
+        : field.type === 'Rich Text' ? (
+          <RichText field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'Rich Text'>} form={form} />
+        )
         : field.type === 'email' ? (
           <Email field={field} disabled={value.disabled} value={value.answer.value as string} onChange={onFieldChange as ChangeHandler<'email'>} form={form} />
         )
@@ -358,6 +368,8 @@ export const QuestionForField = ({
                   spacing={field.options?.groupPadding}
                   logicOptions={logicOptions}
                   isInQuestionGroup
+                  uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
+                  handleFileUpload={handleFileUpload}
                 />
               </Flex>
             )
@@ -443,6 +455,7 @@ export const TellescopeSingleQuestionFlow: typeof TellescopeForm = ({
   groupId,
   groupInstance,
   logicOptions,
+  uploadingFiles, setUploadingFiles, handleFileUpload,
 }) => {
   const beforeunloadHandler = React.useCallback((e: BeforeUnloadEvent) => {
     try {
@@ -541,6 +554,8 @@ export const TellescopeSingleQuestionFlow: typeof TellescopeForm = ({
                 validateField={validateField}
                 groupId={groupId} groupInstance={groupInstance}
                 logicOptions={logicOptions}
+                uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
+                handleFileUpload={handleFileUpload}
               />
             </Flex>
         </Flex>
@@ -942,6 +957,7 @@ export const TellescopeSinglePageForm: React.JSXElementConstructor<TellescopeFor
   enduser,
   groupId,
   groupInstance,
+  uploadingFiles, setUploadingFiles, handleFileUpload,
   ...props 
 }) => {
   const list = useListForFormFields(fields, responses, { form: props.form, gender: enduser?.gender })
@@ -1019,6 +1035,8 @@ export const TellescopeSinglePageForm: React.JSXElementConstructor<TellescopeFor
                   responses={responses} selectedFiles={selectedFiles}
                   validateField={validateField}
                   groupId={groupId} groupInstance={groupInstance}
+                  uploadingFiles={uploadingFiles} setUploadingFiles={setUploadingFiles}
+                  handleFileUpload={handleFileUpload}
                 />
               </Flex>
             </Flex>

package/src/Forms/hooks.tsx

@@ -531,6 +531,7 @@ export const useTellescopeForm = ({ isPublicForm, form, urlLogicValue, customiza
   const [submittingStatus, setSubmittingStatus] = useState<SubmitStatus>(undefined)
   const [submitErrorMessage, setSubmitErrorMessage] = useState('')
   const [currentPageIndex, setCurrentPageIndex] = useState(0)
+  const [uploadingFiles, setUploadingFiles] = useState<{ fieldId: string }[]>([]) 
   const prevFieldStackRef = useRef<typeof root[]>([])
 
   const [repeats, setRepeats] = useState({} as Record<string, string | number>)
@@ -815,6 +816,10 @@ export const useTellescopeForm = ({ isPublicForm, form, urlLogicValue, customiza
       return null
     }
 
+    if (value.answer?.type === 'Rich Text' && value.answer?.value?.trim() === '<p></p>' && !field.isOptional) {
+      return "Answer is required"
+    }
+
     if (value.answer.type === 'Insurance') {
       if (value.answer.value?.relationshipDetails?.dateOfBirth && !isDateString(value.answer.value.relationshipDetails.dateOfBirth)) {
         return "Enter date of birth in MM-DD-YYYY format"
@@ -1102,6 +1107,31 @@ export const useTellescopeForm = ({ isPublicForm, form, urlLogicValue, customiza
     return responsesToSubmit
   }, [responses])
 
+  const handleFileUpload = useCallback(async (blob: FileBlob, fieldId: string) => {
+    const responseIndex = responses.findIndex(f => f.fieldId === fieldId)
+    const result: FormResponseAnswerFileValue = { name: blob.name, secureName: '' }
+    const { secureName } = await handleUpload(
+      {
+        name: blob.name,
+        size: blob.size,
+        type: blob.type,
+        enduserId,
+      }, 
+      blob
+    )
+
+    if (responses[responseIndex].answer.type === 'files') {
+      if (!responses[responseIndex].answer.value) {
+        responses[responseIndex].answer.value = []
+      }
+      (responses[responseIndex].answer.value as any[]).push({ 
+        ...result, type: blob.type, secureName, name: result.name ?? ''
+      })
+    } else {
+      responses[responseIndex].answer.value = { ...result, type: blob.type, secureName, name: result.name ?? '' } 
+    }
+  }, [responses, handleUpload])
+
   const submit = useCallback(async (options?: { onPreRedirect?: () => void, onFileUploadsDone?: () => void, onSuccess?: (r: FormResponse) => void, includedFieldIds?: string[], otherEnduserIds?: string[], onBulkErrors?: (errors: { enduserId: string, message: string }[]) => void }) => {
     setSubmitErrorMessage('')
     const hasFile = selectedFiles.find(f => !!f.blobs?.length) !== undefined
@@ -1113,31 +1143,14 @@ export const useTellescopeForm = ({ isPublicForm, form, urlLogicValue, customiza
         for (const blobInfo of selectedFiles) {
           const { blobs, fieldId } = blobInfo
           if (!blobs) continue
-  
+
+          const responseIndex = responses.findIndex(f => f.fieldId === fieldId)
+
+          const response = responses[responseIndex]
+          if (response.field?.options?.autoUploadFiles) { continue } // must have uploaded prior to submission
+
           for (const blob of blobs) {
-            const result: FormResponseAnswerFileValue = { name: blob.name, secureName: '' }
-            const { secureName } = await handleUpload(
-              {
-                name: blob.name,
-                size: blob.size,
-                type: blob.type,
-                enduserId,
-              }, 
-              blob
-            )
-
-            const responseIndex = responses.findIndex(f => f.fieldId === fieldId)
-
-            if (responses[responseIndex].answer.type === 'files') {
-              if (!responses[responseIndex].answer.value) {
-                responses[responseIndex].answer.value = []
-              }
-              (responses[responseIndex].answer.value as any[]).push({ 
-                ...result, type: blob.type, secureName, name: result.name ?? ''
-              })
-            } else {
-              responses[responseIndex].answer.value = { ...result, type: blob.type, secureName, name: result.name ?? '' } 
-            }
+            await handleFileUpload(blob, fieldId)
           }          
         }
 
@@ -1260,9 +1273,11 @@ export const useTellescopeForm = ({ isPublicForm, form, urlLogicValue, customiza
     } finally {
       setSubmittingStatus(undefined)
     }
-  }, [accessCode, automationStepId, enduserId, responses, selectedFiles, session, handleUpload, existingResponses, ga4measurementId, rootResponseId, parentResponseId, calendarEventId, goBackURL, logicOptions])
+  }, [accessCode, automationStepId, enduserId, responses, selectedFiles, session, handleUpload, existingResponses, ga4measurementId, rootResponseId, parentResponseId, calendarEventId, goBackURL, logicOptions, handleFileUpload])
 
   const isNextDisabled = useCallback(() => {
+    if (uploadingFiles.length) { return true }
+
     if (activeField.children.length === 0) {
       return true
     }
@@ -1272,7 +1287,7 @@ export const useTellescopeForm = ({ isPublicForm, form, urlLogicValue, customiza
     }
 
     return false
-  }, [activeField, validateField])
+  }, [activeField, validateField, uploadingFiles])
 
   const autoAdvanceRef = useRef(false)
   const goToNextField = useCallback(() => {
@@ -1445,5 +1460,7 @@ export const useTellescopeForm = ({ isPublicForm, form, urlLogicValue, customiza
     customization,
     handleDatabaseSelect,
     logicOptions,
+    uploadingFiles, setUploadingFiles,
+    handleFileUpload,
   }
 }

package/src/Forms/inputs.tsx

@@ -13,7 +13,7 @@ import LinearProgress from '@mui/material/LinearProgress';
 import DatePicker from "react-datepicker";
 import { datepickerCSS } from "./css/react-datepicker" // avoids build issue with RN
 import { CancelIcon, FileBlob, IconButton, LabeledIconButton, LoadingButton, Styled, form_display_text_for_language, isDateString, useProducts, useResolvedSession } from ".."
-import { AllergyCode, CalendarEvent, DatabaseRecord, FormField } from "@tellescope/types-client"
+import { CalendarEvent, DatabaseRecord, FormField } from "@tellescope/types-client"
 import { css } from '@emotion/css'
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
@@ -24,6 +24,7 @@ import LanguageIcon from '@mui/icons-material/Language';
 import { Elements, PaymentElement, useStripe, useElements, EmbeddedCheckout, EmbeddedCheckoutProvider } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js'; 
 import { CheckCircleOutline, Delete, Edit } from "@mui/icons-material"
+import { WYSIWYG } from "./wysiwyg"
 
 export const LanguageSelect = ({ value, ...props }: { value: string, onChange: (s: string) => void}) => (
   <Grid container alignItems="center" justifyContent={"center"} wrap="nowrap" spacing={1}>
@@ -579,7 +580,8 @@ export const InsuranceInput = ({ field, value, onChange, form, responses, enduse
           }
         renderInput={(params) => (
           <TextField {...params} InputProps={{ ...params.InputProps, sx: defaultInputProps.sx }}
-            required={!field.isOptional} size="small"  label="Insurer"
+            required={!field.isOptional} size="small" label={"Insurer"}
+            placeholder={field.options?.dataSource === CANVAS_TITLE ? "Search insurer..." : "Insurer"}
           />
         )}
       />
@@ -1185,7 +1187,7 @@ export async function convertHEIC (file: FileBlob | string){
 };
 
 const value_is_image = (f?: { type?: string })=> f?.type?.includes('image')
-export const FileInput = ({ value, onChange, field, existingFileName }: FormInputProps<'file'> & { existingFileName?: string }) => {
+export const FileInput = ({ value, onChange, field, existingFileName, uploadingFiles, handleFileUpload, setUploadingFiles }: FormInputProps<'file'> & { existingFileName?: string }) => {
   const [error, setError] = useState('')
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ 
     onDrop: useCallback(
@@ -1202,7 +1204,16 @@ export const FileInput = ({ value, onChange, field, existingFileName }: FormInpu
 
         setError('')
         onChange(file, field.id)
-      }, [onChange, field.options?.validFileTypes]
+
+        if (field.options?.autoUploadFiles && handleFileUpload) {
+          setUploadingFiles?.(fs => [...fs, { fieldId: field.id }])
+          
+          handleFileUpload(file, field.id)
+          .finally(
+            () => setUploadingFiles?.(fs => fs.filter(f => f.fieldId !== field.id))
+          )
+        }
+      }, [onChange, field.options?.validFileTypes, handleFileUpload, setUploadingFiles]
     ),
   })
 
@@ -1221,7 +1232,9 @@ export const FileInput = ({ value, onChange, field, existingFileName }: FormInpu
     }
   }, [value])
 
-  // console.log(document.createElement('input').capture )
+  if (uploadingFiles?.find(f => f.fieldId === field.id)) {
+    return <LinearProgress />
+  }
   return (
     <Grid container direction="column">
     <Grid container {...getRootProps()} sx={{
@@ -1287,11 +1300,12 @@ export const safe_create_url = (file: any) => {
   }
 }
 
-export const FilesInput = ({ value, onChange, field, existingFileName }: FormInputProps<'files'> & { existingFileName?: string }) => {
+export const FilesInput = ({ value, onChange, field, existingFileName, uploadingFiles, handleFileUpload, setUploadingFiles }: FormInputProps<'files'> & { existingFileName?: string }) => {
   const [error, setError] = useState('')
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ 
     onDrop: useCallback(
-      acceptedFiles => {
+      async acceptedFiles => {
+        setUploadingFiles?.(fs => [...fs, { fieldId: field.id }])
         for (const file of acceptedFiles) {
           if (field.options?.validFileTypes?.length) {
             const match = field.options.validFileTypes.find(t => file.type.includes(t.toLowerCase()))
@@ -1299,11 +1313,16 @@ export const FilesInput = ({ value, onChange, field, existingFileName }: FormInp
               return setError(`File must have type: ${field.options.validFileTypes.join(', ')}`)
             }
           }  
+
+          if (field.options?.autoUploadFiles && handleFileUpload) {
+            await handleFileUpload(file, field.id).catch(console.error)
+          }
         }
+        setUploadingFiles?.(fs => fs.filter(f => f.fieldId !== field.id))
 
         setError('')
         onChange([...(value ?? []), ...acceptedFiles], field.id)
-      }, [onChange, value, field.options?.validFileTypes]
+      }, [onChange, value, field.options?.validFileTypes, handleFileUpload, setUploadingFiles]
     ),
   })
 
@@ -1313,6 +1332,9 @@ export const FilesInput = ({ value, onChange, field, existingFileName }: FormInp
     })
   ), [value])
 
+  if (uploadingFiles?.find(f => f.fieldId === field.id)) {
+    return <LinearProgress />
+  }
   return (
     <Grid container direction="column">
     <Grid container {...getRootProps()} sx={{
@@ -2828,6 +2850,9 @@ export const AppointmentBookingInput = ({ formResponseId, field, value, onChange
       field.options.userTags
       .flatMap(t => {
         // set dynamic tags if found
+        if (t === '{{logic}}') {
+          return new URL(window.location.href).searchParams.get('logic') || '{{logic}}'
+        }
         if (t.startsWith("{{field.") && t.endsWith(".value}}")) {
           const fieldId = t.replace('{{field.', '').replace(".value}}", '')
 
@@ -2852,6 +2877,9 @@ export const AppointmentBookingInput = ({ formResponseId, field, value, onChange
       field.options.userFilterTags
       .flatMap(t => {
         // set dynamic tags if found
+        if (t === '{{logic}}') {
+          return new URL(window.location.href).searchParams.get('logic') || '{{logic}}'
+        }
         if (t.startsWith("{{field.") && t.endsWith(".value}}")) {
           const fieldId = t.replace('{{field.', '').replace(".value}}", '')
 
@@ -3277,4 +3305,8 @@ export const ConditionsInput = ({ goToNextField, goToPreviousField, field, value
       }
     /> 
   )
-}
+}
+
+export const RichTextInput = ({ field, value, onChange }: FormInputProps<'Rich Text'>) => (
+  <WYSIWYG initialHTML={value} onChange={v => onChange(v, field.id)} style={{ width: '100%' }} editorStyle={{ width: '100%' }} />
+)

package/src/Forms/types.ts

@@ -3,6 +3,7 @@ import { DatabaseRecord, Enduser, Form, FormField } from "@tellescope/types-clie
 import { FileBlob, TreeNode } from "@tellescope/types-utilities";
 import { JSXElementConstructor } from "react";
 import { Response } from "./hooks";
+import { FileUploadHandler } from "../inputs";
 
 export type FormFieldNode = TreeNode<FormField>
 
@@ -32,6 +33,9 @@ export interface FormInputProps<K extends keyof AnswerForType> {
   groupInsance?: string,
   disabled?: boolean,
   isSinglePage?: boolean,
+  handleFileUpload?: (blob: FileBlob, fieldId: string) => Promise<any>,
+  uploadingFiles?: { fieldId: string }[]
+  setUploadingFiles?: React.Dispatch<React.SetStateAction<{ fieldId: string }[]>>,
 }
 
 export type FormInputs = { 

package/src/Forms/wysiwyg.tsx

@@ -0,0 +1,234 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Editor } from 'react-draft-wysiwyg';
+import draftToHtml from 'draftjs-to-html';
+import htmlToDraft from 'html-to-draftjs';
+import { EditorState, ContentState, convertToRaw } from 'draft-js';
+import { Paper } from '@mui/material';
+import { Styled } from '../mui';
+import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
+
+const getToolbar = ({ hideEmoji } : { hideEmoji?: boolean }) => ({
+  // hide image and embedded in favor of custom sections
+  options: [
+    // 'inline', 
+    // 'blockType', 
+    'fontSize', 
+    // 'fontFamily', 
+    'list', 
+    'textAlign', 
+    // 'colorPicker', 
+    'link', 
+    ...(hideEmoji ? [] : ['emoji']), 
+    // 'remove', 
+    // 'history',
+    // 'image', 
+    // 'embedded', 
+  ],
+  inline: {
+    inDropdown: false,
+    className: undefined,
+    component: undefined,
+    dropdownClassName: undefined,
+    options: ['bold', 'italic', 'underline', 'strikethrough', 'monospace', 'superscript', 'subscript'],
+    // bold: { icon: bold, className: undefined },
+    // italic: { icon: italic, className: undefined },
+    // underline: { icon: underline, className: undefined },
+    // strikethrough: { icon: strikethrough, className: undefined },
+    // monospace: { icon: monospace, className: undefined },
+    // superscript: { icon: superscript, className: undefined },
+    // subscript: { icon: subscript, className: undefined },
+  },
+  blockType: {
+    inDropdown: true,
+    options: ['Normal', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'Blockquote', 'Code'],
+    className: undefined,
+    component: undefined,
+    dropdownClassName: undefined,
+  },
+  fontSize: {
+    // icon: fontSize,
+    options: [8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72, 96],
+    className: undefined,
+    component: undefined,
+    dropdownClassName: undefined,
+  },
+  fontFamily: {
+    options: ['Arial', 'Georgia', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana'],
+    className: undefined,
+    component: undefined,
+    dropdownClassName: undefined,
+  },
+  list: {
+    inDropdown: false,
+    className: undefined,
+    component: undefined,
+    dropdownClassName: undefined,
+    options: ['unordered', 'ordered', 'indent', 'outdent'],
+    // unordered: { icon: unordered, className: undefined },
+    // ordered: { icon: ordered, className: undefined },
+    // indent: { icon: indent, className: undefined },
+    // outdent: { icon: outdent, className: undefined },
+  },
+  textAlign: {
+    inDropdown: false,
+    className: undefined,
+    component: undefined,
+    dropdownClassName: undefined,
+    options: ['left', 'center', 'right', 'justify'],
+    // left: { icon: left, className: undefined },
+    // center: { icon: center, className: undefined },
+    // right: { icon: right, className: undefined },
+    // justify: { icon: justify, className: undefined },
+  },
+  colorPicker: {
+    // icon: color,
+    className: undefined,
+    component: undefined,
+    popupClassName: undefined,
+    colors: ['rgb(97,189,109)', 'rgb(26,188,156)', 'rgb(84,172,210)', 'rgb(44,130,201)',
+      'rgb(147,101,184)', 'rgb(71,85,119)', 'rgb(204,204,204)', 'rgb(65,168,95)', 'rgb(0,168,133)',
+      'rgb(61,142,185)', 'rgb(41,105,176)', 'rgb(85,57,130)', 'rgb(40,50,78)', 'rgb(0,0,0)',
+      'rgb(247,218,100)', 'rgb(251,160,38)', 'rgb(235,107,86)', 'rgb(226,80,65)', 'rgb(163,143,132)',
+      'rgb(239,239,239)', 'rgb(255,255,255)', 'rgb(250,197,28)', 'rgb(243,121,52)', 'rgb(209,72,65)',
+      'rgb(184,49,47)', 'rgb(124,112,107)', 'rgb(209,213,216)'],
+  },
+  link: {
+    inDropdown: false,
+    className: undefined,
+    component: undefined,
+    popupClassName: undefined,
+    dropdownClassName: undefined,
+    showOpenOptionOnHover: true,
+    defaultTargetOption: '_blank',
+    options: ['link', 'unlink'],
+    // link: { icon: link, className: undefined },
+    // unlink: { icon: unlink, className: undefined },
+    linkCallback: undefined
+  },
+  emoji: {
+    // icon: emoji,
+    className: undefined,
+    component: undefined,
+    popupClassName: undefined,
+    emojis: [
+      '😀', '😁', '😂', '😃', '😉', '😋', '😎', '😍', '😗', '🤗', '🤔', '😣', '😫', '😴', '😌', '🤓',
+      '😛', '😜', '😠', '😇', '😷', '😈', '👻', '😺', '😸', '😹', '😻', '😼', '😽', '🙀', '🙈',
+      '🙉', '🙊', '👼', '👮', '🕵', '💂', '👳', '🎅', '👸', '👰', '👲', '🙍', '🙇', '🚶', '🏃', '💃',
+      '⛷', '🏂', '🏌', '🏄', '🚣', '🏊', '⛹', '🏋', '🚴', '👫', '💪', '👈', '👉', '👉', '👆', '🖕',
+      '👇', '🖖', '🤘', '🖐', '👌', '👍', '👎', '✊', '👊', '👏', '🙌', '🙏', '🐵', '🐶', '🐇', '🐥',
+      '🐸', '🐌', '🐛', '🐜', '🐝', '🍉', '🍄', '🍔', '🍤', '🍨', '🍪', '🎂', '🍰', '🍾', '🍷', '🍸',
+      '🍺', '🌍', '🚑', '⏰', '🌙', '🌝', '🌞', '⭐', '🌟', '🌠', '🌨', '🌩', '⛄', '🔥', '🎄', '🎈',
+      '🎉', '🎊', '🎁', '🎗', '🏀', '🏈', '🎲', '🔇', '🔈', '📣', '🔔', '🎵', '🎷', '💰', '🖊', '📅',
+      '✅', '❎', '💯',
+    ],
+  },
+  embedded: {
+    // icon: embedded,
+    className: undefined,
+    component: undefined,
+    popupClassName: undefined,
+    embedCallback: undefined,
+    defaultSize: {
+      height: 'auto',
+      width: 'auto',
+    },
+  },
+  image: {
+    // icon: image,
+    className: undefined,
+    component: undefined,
+    popupClassName: undefined,
+    urlEnabled: true,
+    uploadEnabled: true,
+    alignmentEnabled: true,
+    // uploadCallback,
+    previewImage: true,
+    inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',
+    alt: { present: false, mandatory: false },
+    defaultSize: {
+      height: 'auto',
+      width: 'auto',
+    },
+  },
+  remove: { 
+    // icon: eraser, 
+    className: undefined, component: undefined 
+  },
+  history: {
+    inDropdown: false,
+    className: undefined,
+    component: undefined,
+    dropdownClassName: undefined,
+    options: ['undo', 'redo'],
+    // undo: { icon: undo, className: undefined },
+    // redo: { icon: redo, className: undefined },
+  },
+})
+
+
+
+export const WYSIWYG = ({ updateHtml, initialHTML: _initialHTML='', autoFocus, onChange, style, editorStyle, hideEmoji } : { 
+  initialHTML?: string, onChange: (html: string) => void, autoFocus?: boolean,
+  editorStyle?: React.CSSProperties,
+  hideEmoji?: boolean,
+  updateHtml?: string,
+} & Styled) => {
+  const trimmed = _initialHTML.trim()
+  const initialHTML = (
+    trimmed.startsWith('<p>') && trimmed.endsWith('</p>')
+      ? trimmed
+      : `<p>${trimmed}</p>`
+  )
+
+  const [editorState, setEditorState] = useState(EditorState.createWithContent(
+    ContentState.createFromBlockArray(htmlToDraft(initialHTML).contentBlocks)
+  ))
+  const editorStateRef = useRef(editorState)
+
+  const editorRef: React.MutableRefObject<Editor | null> = useRef(null)
+
+  useEffect(() => {
+    if (!updateHtml) return
+
+    setEditorState(
+      EditorState.createWithContent(
+        ContentState.createFromBlockArray(htmlToDraft(updateHtml).contentBlocks)
+      )
+    )
+  }, [updateHtml])
+
+  useEffect(() => {
+    if (!autoFocus) return
+
+    if (editorRef.current) {
+      editorRef.current?.focusEditor?.()
+      setEditorState(es => EditorState.moveFocusToEnd(es))
+    }
+  }, [editorRef, autoFocus])
+
+  useEffect(() => {
+    if (editorStateRef.current === editorState) return
+    editorStateRef.current = editorState
+
+    // unbounce a bit for perf
+    const t = setTimeout(() => (
+      onChange(draftToHtml(convertToRaw(editorState.getCurrentContent())))
+    ), 99)
+
+    return () => { clearTimeout(t) }
+  }, [onChange, editorState])
+
+  const toolbar = useMemo(() => getToolbar({ hideEmoji }), [hideEmoji])
+
+  return (
+    <Paper sx={{ padding: 1 }} style={style}>
+      <Editor spellCheck ref={editorRef} editorStyle={editorStyle}
+        editorState={editorState}
+        wrapperClassName="demo-wrapper"
+        editorClassName="demo-editor"
+        onEditorStateChange={setEditorState}
+        toolbar={toolbar} 
+      />
+    </Paper>
+  )  
+}