fix: file upload and move status bar count enum to advance

Author: gjulivan

packages/pluggableWidgets/rich-text-web/src/RichText.xml

@@ -21,16 +21,6 @@
                     <caption>Enable status bar</caption>
                     <description />
                 </property>
-                <property key="statusBarContent" type="enumeration" defaultValue="wordCount">
-                    <caption>Status bar content</caption>
-                    <description>Choose what to display in the status bar</description>
-                    <enumerationValues>
-                        <enumerationValue key="wordCount">Word count</enumerationValue>
-                        <enumerationValue key="characterCount">Character count (text only)</enumerationValue>
-                        <enumerationValue key="characterCountHtml">Character count (including HTML)</enumerationValue>
-                        <enumerationValue key="both">Both word and character count</enumerationValue>
-                    </enumerationValues>
-                </property>
             </propertyGroup>
             <propertyGroup caption="Toolbar">
                 <property key="preset" type="enumeration" defaultValue="basic">
@@ -209,6 +199,15 @@
                     <caption>Enable default upload</caption>
                     <description />
                 </property>
+                <property key="statusBarContent" type="enumeration" defaultValue="wordCount">
+                    <caption>Status bar content</caption>
+                    <description>Choose what to display in the status bar</description>
+                    <enumerationValues>
+                        <enumerationValue key="wordCount">Word count</enumerationValue>
+                        <enumerationValue key="characterCount">Character count (text only)</enumerationValue>
+                        <enumerationValue key="characterCountHtml">Character count (including HTML)</enumerationValue>
+                    </enumerationValues>
+                </property>
             </propertyGroup>
         </propertyGroup>
         <propertyGroup caption="Custom toolbar">

packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/useEmbedModal.ts

@@ -26,10 +26,7 @@ type ModalReturnType = {
 
 export function useEmbedModal(
     ref: MutableRefObject<Quill | null>,
-    props: Pick<
-        RichTextContainerProps,
-        "imageSource" | "imageSourceContent" | "enableDefaultUpload" | "formOrientation"
-    >
+    props: Pick<RichTextContainerProps, "formOrientation">
 ): ModalReturnType {
     const [showDialog, setShowDialog] = useState<boolean>(false);
     const [dialogConfig, setDialogConfig] = useState<ChildDialogProps>({});
@@ -197,10 +194,7 @@ export function useEmbedModal(
                 },
                 onClose: closeDialog,
                 defaultValue: { ...value },
-                formOrientation: props.formOrientation,
-                imageSource: props.imageSource,
-                imageSourceContent: props.imageSourceContent,
-                enableDefaultUpload: props.enableDefaultUpload
+                formOrientation: props.formOrientation
             }
         });
         openDialog();

packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx

@@ -214,6 +214,9 @@ const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | nul
                 isOpen={showDialog}
                 onOpenChange={open => setShowDialog(open)}
                 parentNode={modalRef.current?.ownerDocument.body}
+                imageSource={props.imageSource}
+                imageSourceContent={props.imageSourceContent}
+                enableDefaultUpload={props.enableDefaultUpload}
                 {...dialogConfig}
             ></Dialog>
         </Fragment>

packages/pluggableWidgets/rich-text-web/src/components/EditorWrapper.tsx

@@ -65,8 +65,6 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
     const editorValueRef = useRef<string>("");
     const toolbarRef = useRef<HTMLDivElement>(null);
     const [wordCount, setWordCount] = useState(0);
-    const [characterCount, setCharacterCount] = useState(0);
-    const [characterCountHtml, setCharacterCountHtml] = useState(0);
 
     const { isFullscreen } = globalState;
 
@@ -83,45 +81,24 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
         [stringAttribute, onChange, onChangeType]
     );
 
-    const calculateWordCount = useCallback(
+    const calculateCounts = useCallback(
         (quill: Quill | null): void => {
             if (enableStatusBar) {
-                const text = quill?.getText().trim();
-                setWordCount(text && text.length > 0 ? text.split(/\s+/).length : 0);
-            }
-        },
-        [enableStatusBar]
-    );
-
-    const calculateCharacterCount = useCallback(
-        (quill: Quill | null): void => {
-            if (enableStatusBar && (statusBarContent === "characterCount" || statusBarContent === "both")) {
-                const text = quill?.getText() || "";
-                setCharacterCount(text.length);
-            }
-        },
-        [enableStatusBar, statusBarContent]
-    );
-
-    const calculateCharacterCountHtml = useCallback(
-        (quill: Quill | null): void => {
-            if (enableStatusBar && (statusBarContent === "characterCountHtml" || statusBarContent === "both")) {
-                const html = quill?.getSemanticHTML() || "";
-                setCharacterCountHtml(html.length);
+                if (statusBarContent === "wordCount") {
+                    const text = quill?.getText().trim();
+                    setWordCount(text && text.length > 0 ? text.split(/\s+/).length : 0);
+                } else if (statusBarContent === "characterCount") {
+                    const text = quill?.getText() || "";
+                    setWordCount(text.length);
+                } else if (statusBarContent === "characterCountHtml") {
+                    const html = quill?.getSemanticHTML() || "";
+                    setWordCount(html.length);
+                }
             }
         },
         [enableStatusBar, statusBarContent]
     );
 
-    const calculateCounts = useCallback(
-        (quill: Quill | null): void => {
-            calculateWordCount(quill);
-            calculateCharacterCount(quill);
-            calculateCharacterCountHtml(quill);
-        },
-        [calculateWordCount, calculateCharacterCount, calculateCharacterCountHtml]
-    );
-
     useEffect(() => {
         if (quillRef.current) {
             calculateCounts(quillRef.current);
@@ -207,7 +184,9 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
             spellCheck={props.spellCheck}
             tabIndex={tabIndex}
         >
-            {toolbarLocation === "auto" && <StickySentinel />}
+            <If condition={toolbarLocation === "auto"}>
+                <StickySentinel />
+            </If>
             <div
                 className={classNames(
                     "flexcontainer",
@@ -252,24 +231,15 @@ function EditorWrapperInner(props: EditorWrapperProps): ReactElement {
                     formOrientation={formOrientation}
                 />
             </div>
-            {enableStatusBar && (
+            <If condition={enableStatusBar}>
                 <div className="widget-rich-text-footer" tabIndex={-1}>
-                    {statusBarContent === "wordCount" && (
-                        <span>{wordCount} word{wordCount === 1 ? "" : "s"}</span>
-                    )}
-                    {statusBarContent === "characterCount" && (
-                        <span>{characterCount} character{characterCount === 1 ? "" : "s"}</span>
-                    )}
-                    {statusBarContent === "characterCountHtml" && (
-                        <span>{characterCountHtml} character{characterCountHtml === 1 ? "" : "s"} (with HTML)</span>
-                    )}
-                    {statusBarContent === "both" && (
-                        <span>
-                            {wordCount} word{wordCount === 1 ? "" : "s"} • {characterCount} character{characterCount === 1 ? "" : "s"}
-                        </span>
-                    )}
+                    <span>
+                        <span>{wordCount}</span>
+                        <span>{` ${statusBarContent === "wordCount" ? "word" : "character"}`}</span>
+                        <span>{wordCount === 1 ? "" : "s"}</span>
+                    </span>
                 </div>
-            )}
+            </If>
         </div>
     );
 }

packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/Dialog.tsx

@@ -16,6 +16,7 @@ import VideoDialog, { VideoDialogProps } from "./VideoDialog";
 import ViewCodeDialog, { ViewCodeDialogProps } from "./ViewCodeDialog";
 import ImageDialog, { ImageDialogProps } from "./ImageDialog";
 import "./Dialog.scss";
+import { RichTextContainerProps } from "../../../typings/RichTextProps";
 
 interface BaseDialogProps {
     isOpen: boolean;
@@ -49,13 +50,15 @@ export type ChildDialogProps =
     | ViewCodeDialogBaseProps
     | ImageDialogBaseProps;
 
-export type DialogProps = BaseDialogProps & ChildDialogProps;
+export type DialogProps = BaseDialogProps &
+    ChildDialogProps &
+    Pick<RichTextContainerProps, "imageSource" | "imageSourceContent" | "enableDefaultUpload">;
 
 /**
  * Dialog components that will be shown on toolbar's button
  */
 export default function Dialog(props: DialogProps): ReactElement {
-    const { isOpen, onOpenChange, dialogType, config } = props;
+    const { isOpen, onOpenChange, dialogType, config, imageSource, imageSourceContent, enableDefaultUpload } = props;
     const { refs, context } = useFloating({
         open: isOpen,
         onOpenChange
@@ -97,7 +100,12 @@ export default function Dialog(props: DialogProps): ReactElement {
                                 <ViewCodeDialog {...(config as ViewCodeDialogProps)}></ViewCodeDialog>
                             </If>
                             <If condition={dialogType === "image"}>
-                                <ImageDialog {...(config as ImageDialogProps)}></ImageDialog>
+                                <ImageDialog
+                                    imageSource={imageSource}
+                                    imageSourceContent={imageSourceContent}
+                                    enableDefaultUpload={enableDefaultUpload}
+                                    {...(config as ImageDialogProps)}
+                                ></ImageDialog>
                             </If>
                         </div>
                     </FloatingFocusManager>

packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/ImageDialog.tsx

@@ -21,13 +21,11 @@ interface CustomEvent<T = any> extends Event {
 }
 
 export interface ImageDialogProps
-    extends Pick<
-        RichTextContainerProps,
-        "imageSource" | "imageSourceContent" | "enableDefaultUpload" | "formOrientation"
-    > {
+    extends Pick<RichTextContainerProps, "imageSource" | "imageSourceContent" | "formOrientation"> {
     onSubmit(value: imageConfigType): void;
     onClose(): void;
     defaultValue?: imageConfigType;
+    enableDefaultUpload?: boolean;
 }
 
 export default function ImageDialog(props: ImageDialogProps): ReactElement {

packages/pluggableWidgets/rich-text-web/typings/RichTextProps.d.ts

@@ -12,7 +12,7 @@ export type ToolbarLocationEnum = "auto" | "top" | "bottom" | "hide";
 
 export type ReadOnlyStyleEnum = "text" | "bordered" | "readPanel";
 
-export type StatusBarContentEnum = "wordCount" | "characterCount" | "characterCountHtml" | "both";
+export type FormOrientationEnum = "horizontal" | "vertical";
 
 export type WidthUnitEnum = "pixels" | "percentage";
 
@@ -31,6 +31,8 @@ export interface CustomFontsType {
     fontStyle: string;
 }
 
+export type StatusBarContentEnum = "wordCount" | "characterCount" | "characterCountHtml";
+
 export type ToolbarConfigEnum = "basic" | "advanced";
 
 export type CtItemTypeEnum = "separator" | "undo" | "redo" | "bold" | "italic" | "underline" | "strike" | "superScript" | "subScript" | "orderedList" | "bulletList" | "lowerAlphaList" | "checkList" | "minIndent" | "plusIndent" | "direction" | "link" | "image" | "video" | "formula" | "blockquote" | "code" | "codeBlock" | "viewCode" | "align" | "centerAlign" | "rightAlign" | "font" | "size" | "color" | "background" | "header" | "fullscreen" | "clean" | "tableBetter";
@@ -54,7 +56,6 @@ export interface RichTextContainerProps {
     id: string;
     stringAttribute: EditableValue<string>;
     enableStatusBar: boolean;
-    statusBarContent: StatusBarContentEnum;
     preset: PresetEnum;
     toolbarLocation: ToolbarLocationEnum;
     readOnlyStyle: ReadOnlyStyleEnum;
@@ -78,6 +79,7 @@ export interface RichTextContainerProps {
     imageSource?: ListValue;
     imageSourceContent?: ReactNode;
     enableDefaultUpload: boolean;
+    statusBarContent: StatusBarContentEnum;
     toolbarConfig: ToolbarConfigEnum;
     history: boolean;
     fontStyle: boolean;
@@ -101,7 +103,6 @@ export interface RichTextPreviewProps {
     translate: (text: string) => string;
     stringAttribute: string;
     enableStatusBar: boolean;
-    statusBarContent: StatusBarContentEnum;
     preset: PresetEnum;
     toolbarLocation: ToolbarLocationEnum;
     readOnlyStyle: ReadOnlyStyleEnum;
@@ -125,6 +126,7 @@ export interface RichTextPreviewProps {
     imageSource: {} | { caption: string } | { type: string } | null;
     imageSourceContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
     enableDefaultUpload: boolean;
+    statusBarContent: StatusBarContentEnum;
     toolbarConfig: ToolbarConfigEnum;
     history: boolean;
     fontStyle: boolean;