Fix bugs (#94)

* Fix 'maxLength' check when pasting text * Set 'id' to 'Toolbar' components
niuware · Mar 22, 2020 · b201d2e · b201d2e
1 parent a2f49a4
commit b201d2e
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-rte",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "Material-UI Rich Text Editor and Viewer",
   "keywords": [
     "material-ui",

diff --git a/src/MUIRichTextEditor.tsx b/src/MUIRichTextEditor.tsx
@@ -16,7 +16,7 @@ import Media from './components/Media'
 import Blockquote from './components/Blockquote'
 import CodeBlock from './components/CodeBlock'
 import UrlPopover, { TAlignment, TUrlData, TMediaType } from './components/UrlPopover'
-import { getSelectionInfo, getCompatibleSpacing, removeBlockFromMap, atomicBlockExists } from './utils'
+import { getSelectionInfo, getCompatibleSpacing, removeBlockFromMap, atomicBlockExists, isGte } from './utils'
 
 const styles = ({ spacing, typography, palette }: Theme) => createStyles({
     root: {
@@ -216,6 +216,8 @@ const MUIRichTextEditor: RefForwardingComponent<any, IMUIRichTextEditorProps> =
     const toolbarPositionRef = useRef<TToolbarPosition | undefined>(undefined)
     const editorStateRef = useRef<EditorState | null>(editorState)
 
+    const editorId = props.id || "mui-rte"
+
     /**
      * Expose methods
      */
@@ -319,13 +321,8 @@ const MUIRichTextEditor: RefForwardingComponent<any, IMUIRichTextEditorProps> =
     }
 
     const handleBeforeInput = (): DraftHandleValue => {
-        if (props.maxLength) {
-            const length = editorState.getCurrentContent().getPlainText('').length
-            if (length >= props.maxLength) {
-                return "handled"
-            }
-        }
-        return "not-handled"
+        const currentLength = editorState.getCurrentContent().getPlainText('').length
+        return isGte(currentLength, props.maxLength) ? "handled" : "not-handled"
     }
 
     const handleFocus = () => {
@@ -440,8 +437,8 @@ const MUIRichTextEditor: RefForwardingComponent<any, IMUIRichTextEditorProps> =
             urlData: data,
             urlKey: linkKey,
             toolbarPosition: !inlineMode ? undefined : state.toolbarPosition,
-            anchorUrlPopover: !inlineMode ? document.getElementById(`mui-rte-${type}-control-button`)!
-                                            : document.getElementById(`mui-rte-${type}-control-button-toolbar`)!,
+            anchorUrlPopover: !inlineMode ? document.getElementById(`${editorId}-${type}-control-button`)!
+                                            : document.getElementById(`${editorId}-${type}-control-button-toolbar`)!,
             urlIsMedia: type === "media" ? true : undefined
         })
     }
@@ -498,6 +495,11 @@ const MUIRichTextEditor: RefForwardingComponent<any, IMUIRichTextEditorProps> =
         }
     }
 
+    const handlePastedText = (text: string, _html: string|undefined, editorState: EditorState): DraftHandleValue => {
+        const currentLength = editorState.getCurrentContent().getPlainText('').length
+        return isGte(currentLength + text.length, props.maxLength) ? "handled" : "not-handled"
+    }
+
     const toggleMouseUpListener = (addAfter = false) => {
         const editor: HTMLElement = (editorRef.current as any).editor
         if (!editor) {
@@ -695,7 +697,6 @@ const MUIRichTextEditor: RefForwardingComponent<any, IMUIRichTextEditorProps> =
     const renderToolbar = props.toolbar === undefined || props.toolbar
     const inlineToolbarControls = props.inlineToolbarControls || ["bold", "italic", "underline", "clear"]
     const editable = props.readOnly === undefined || !props.readOnly
-    const id = props.id || "mui-rte"
     let className = ""
     let placeholder: React.ReactElement | null = null
     if (!focus) {
@@ -716,8 +717,8 @@ const MUIRichTextEditor: RefForwardingComponent<any, IMUIRichTextEditorProps> =
     }
 
     return (
-        <div id={`${id}-root`} className={classes.root}>
-            <div id={`${id}-container`} className={classNames(classes.container, {
+        <div id={`${editorId}-root`} className={classes.root}>
+            <div id={`${editorId}-container`} className={classNames(classes.container, {
                 [classes.inheritFontSize]: props.inheritFontSize
             })}>
                 {props.inlineToolbar && editable && state.toolbarPosition ?
@@ -726,7 +727,7 @@ const MUIRichTextEditor: RefForwardingComponent<any, IMUIRichTextEditorProps> =
                         left: state.toolbarPosition.left
                     }}>
                         <Toolbar
-                            id={id}
+                            id={editorId}
                             editorState={editorState}
                             onClick={handleToolbarClick}
                             controls={inlineToolbarControls}
@@ -737,7 +738,7 @@ const MUIRichTextEditor: RefForwardingComponent<any, IMUIRichTextEditorProps> =
                     : null}
                 {renderToolbar ?
                     <Toolbar
-                        id={id}
+                        id={editorId}
                         editorState={editorState}
                         onClick={handleToolbarClick}
                         controls={controls}
@@ -748,8 +749,8 @@ const MUIRichTextEditor: RefForwardingComponent<any, IMUIRichTextEditorProps> =
                     />
                     : null}
                 {placeholder}
-                <div id={`${id}-editor`} className={classes.editor}>
-                    <div id={`${id}-editor-container`} className={classNames(className, classes.editorContainer, {
+                <div id={`${editorId}-editor`} className={classes.editor}>
+                    <div id={`${editorId}-editor-container`} className={classNames(className, classes.editorContainer, {
                         [classes.editorReadOnly]: !editable,
                         [classes.error]: props.error
                     })} onClick={handleFocus} onBlur={handleBlur}>
@@ -762,6 +763,7 @@ const MUIRichTextEditor: RefForwardingComponent<any, IMUIRichTextEditorProps> =
                             readOnly={props.readOnly}
                             handleKeyCommand={handleKeyCommand}
                             handleBeforeInput={handleBeforeInput}
+                            handlePastedText={handlePastedText}
                             keyBindingFn={keyBindingFn}
                             ref={editorRef}
                             {...props.draftEditorProps}

diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
@@ -122,15 +122,15 @@ const STYLE_TYPES: TStyleType[] = [
         style: 'LINK',
         icon: <InsertLinkIcon />,
         type: "callback",
-        id: "mui-rte-link-control"
+        id: "link-control"
     },
     {
         label: 'Media',
         name: "media",
         style: 'IMAGE',
         icon: <PhotoLibraryIcon />,
         type: "callback",
-        id: "mui-rte-media-control"
+        id: "media-control"
     },
     {
         label: 'OL',
@@ -252,6 +252,7 @@ const Toolbar: FunctionComponent<TToolbarProps> = (props) => {
                 return (
                     <ToolbarButton
                         id={style.id}
+                        editorId={props.id}
                         key={`key-${style.label}`}
                         active={active}
                         label={style.label}

diff --git a/src/components/ToolbarButton.tsx b/src/components/ToolbarButton.tsx
@@ -4,6 +4,7 @@ import { TToolbarComponentProps, TToolbarButtonSize } from './Toolbar'
 
 interface IToolbarButtonProps {
     id?: string
+    editorId?: string
     label: string
     style: string
     type: string
@@ -19,7 +20,8 @@ interface IToolbarButtonProps {
 const ToolbarButton: FunctionComponent<IToolbarButtonProps> = (props: IToolbarButtonProps) => {
     const size = !props.inlineMode ? (props.size || "medium") : "small"
     const toolbarId = props.inlineMode ? "-toolbar" : ""
-    const elemId = (props.id || props.label) + "-button" + toolbarId
+    const editorId = props.editorId || "mui-rte"
+    const elemId = editorId + "-" + (props.id || props.label) + "-button" + toolbarId
     const sharedProps = {
         id: elemId,
         onMouseDown: (e: React.MouseEvent) => {

diff --git a/src/utils.ts b/src/utils.ts
@@ -82,4 +82,11 @@ const atomicBlockExists = (name: string, controls?: TCustomControl[]) => {
         control.atomicComponent !== undefined)
 }
 
-export { getSelectionInfo, getCompatibleSpacing, removeBlockFromMap, atomicBlockExists }
+const isGte = (value: number, maxValue?: number): boolean => {
+    if (!maxValue) {
+        return false
+    }
+    return value >= maxValue
+}
+
+export { getSelectionInfo, getCompatibleSpacing, removeBlockFromMap, atomicBlockExists, isGte }