From 912a81d99fba0ec6002beb92a825c0254841ac7f Mon Sep 17 00:00:00 2001 From: Tymen Steur Date: Fri, 5 Jun 2020 17:17:34 +0200 Subject: [PATCH 1/4] Add an example of Material UI TextField integration --- examples/main.tsx | 2 + .../RichTextField.tsx | 89 +++++++++++++++++++ examples/mui-textfield-integration/index.tsx | 32 +++++++ 3 files changed, 123 insertions(+) create mode 100644 examples/mui-textfield-integration/RichTextField.tsx create mode 100644 examples/mui-textfield-integration/index.tsx diff --git a/examples/main.tsx b/examples/main.tsx index 3c3262e..332b107 100644 --- a/examples/main.tsx +++ b/examples/main.tsx @@ -14,6 +14,7 @@ import ResetValue from './reset-value' import AtomicCustomBlock from './atomic-custom-block' import KeyBindings from './key-bindings' import MaxLength from './max-length' +import MUITextFieldIntegration from './mui-textfield-integration' import Autocomplete from './autocomplete' import AutocompleteAtomic from './autocomplete-atomic' import AsyncImageUpload from './async-image-upload' @@ -46,6 +47,7 @@ const App = () => { +
{ + inputRef?: Ref + doFocus?: boolean + onStateChange?: (state: EditorState) => void +} + +export const RichTextInput = ({ + inputRef, + doFocus, + onStateChange, + controls, + ...richTextProps +}: RichTextInputProps) => { + const acquireFocus = doFocus ?? false + + // Setup ref for the rich text editor + const richTextRef = useRef(null) + + // Attempts to focus the rich text editor reference + const focusRichText = () => richTextRef.current?.focus() + + // Pass on the focus event of the input ref to the rich text ref + useImperativeHandle(inputRef, () => ({ focus: () => focusRichText })) + + // If the `acquireFocus` is changed and its value is `true`, focus the editor + useEffect(() => { + if (acquireFocus) { + focusRichText() + } + }, [acquireFocus]) + + return ( + + ) +} + +export interface RichTextFieldProps extends Omit { + defaultValue?: string + onChange?: (state: EditorState) => void +} + +const RichTextField = ({ + id, + placeholder, + defaultValue, + onChange, + InputLabelProps, + variant, + ...textFieldProps +}: RichTextFieldProps) => { + // Manually handle the TextField's focused state based on the editor's focused state + const [isFocused, setIsFocused] = useState(false) + + const inputProps: RichTextInputProps = { + id: id, + defaultValue: defaultValue, + label: placeholder, + inlineToolbar: true, + onStateChange: onChange, + doFocus: isFocused, + onFocus: () => setIsFocused(true), + onBlur: () => setIsFocused(false), + } + + return ( + setIsFocused(true)} + InputLabelProps={{ ...InputLabelProps, shrink: true }} + InputProps={{ inputComponent: RichTextInput, inputProps: inputProps }} + /> + ) +} + +export default RichTextField diff --git a/examples/mui-textfield-integration/index.tsx b/examples/mui-textfield-integration/index.tsx new file mode 100644 index 0000000..68b32fd --- /dev/null +++ b/examples/mui-textfield-integration/index.tsx @@ -0,0 +1,32 @@ +import React from 'react' +import { makeStyles } from '@material-ui/core/styles' +import RichTextField from './RichTextField' +import { EditorState } from 'draft-js' + +const useStyles = makeStyles({ + richTextField: { + '& #mui-rte-root': { + minHeight: 192, + padding: '0 16px', + }, + }, +}) + +const change = (state: EditorState) => { + console.log(state) +} + +const MUITextFieldIntegration = () => { + const classes = useStyles() + return ( + + ) +} + +export default MUITextFieldIntegration From 2a7f2abe3b2d8cee11412acf2bccbc65eef8170a Mon Sep 17 00:00:00 2001 From: Tymen Steur Date: Sun, 7 Jun 2020 08:23:12 +0200 Subject: [PATCH 2/4] Add missing useEffect dependency --- examples/mui-textfield-integration/RichTextField.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/mui-textfield-integration/RichTextField.tsx b/examples/mui-textfield-integration/RichTextField.tsx index f36485e..dc1f758 100644 --- a/examples/mui-textfield-integration/RichTextField.tsx +++ b/examples/mui-textfield-integration/RichTextField.tsx @@ -1,4 +1,4 @@ -import React, { Ref, useRef, useImperativeHandle, useEffect, useState } from 'react' +import React, { Ref, useRef, useImperativeHandle, useCallback, useEffect, useState } from 'react' import TextField, { TextFieldProps } from '@material-ui/core/TextField' import { InputBaseComponentProps } from '@material-ui/core/InputBase' import { EditorState } from 'draft-js' @@ -24,7 +24,7 @@ export const RichTextInput = ({ const richTextRef = useRef(null) // Attempts to focus the rich text editor reference - const focusRichText = () => richTextRef.current?.focus() + const focusRichText = useCallback(() => richTextRef.current?.focus(), [richTextRef]) // Pass on the focus event of the input ref to the rich text ref useImperativeHandle(inputRef, () => ({ focus: () => focusRichText })) @@ -34,7 +34,7 @@ export const RichTextInput = ({ if (acquireFocus) { focusRichText() } - }, [acquireFocus]) + }, [acquireFocus, focusRichText]) return ( Date: Sun, 8 Nov 2020 14:55:34 +0100 Subject: [PATCH 3/4] Update RichTextField.tsx Removed the `defaultValue` prop, since it is already a part of the `TextFieldProps`. --- examples/mui-textfield-integration/RichTextField.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/examples/mui-textfield-integration/RichTextField.tsx b/examples/mui-textfield-integration/RichTextField.tsx index dc1f758..5737d80 100644 --- a/examples/mui-textfield-integration/RichTextField.tsx +++ b/examples/mui-textfield-integration/RichTextField.tsx @@ -46,7 +46,6 @@ export const RichTextInput = ({ } export interface RichTextFieldProps extends Omit { - defaultValue?: string onChange?: (state: EditorState) => void } From 79e36fe67030e2f34fbf7213d080a06421dc3171 Mon Sep 17 00:00:00 2001 From: Tymen Steur Date: Mon, 9 Nov 2020 15:13:01 +0100 Subject: [PATCH 4/4] Actually add the controls prop and pass it on to the editor --- examples/mui-textfield-integration/RichTextField.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/examples/mui-textfield-integration/RichTextField.tsx b/examples/mui-textfield-integration/RichTextField.tsx index 5737d80..25103e8 100644 --- a/examples/mui-textfield-integration/RichTextField.tsx +++ b/examples/mui-textfield-integration/RichTextField.tsx @@ -4,11 +4,13 @@ import { InputBaseComponentProps } from '@material-ui/core/InputBase' import { EditorState } from 'draft-js' import MUIRichTextEditor from '../../' import { TMUIRichTextEditorRef } from '../../src/MUIRichTextEditor' +import { TToolbarControl } from '../../src/components/Toolbar' export interface RichTextInputProps extends Omit { inputRef?: Ref doFocus?: boolean onStateChange?: (state: EditorState) => void + controls?: Array } export const RichTextInput = ({ @@ -41,6 +43,7 @@ export const RichTextInput = ({ {...richTextProps} ref={richTextRef} onChange={onStateChange} + controls={controls} /> ) }