contenteditable div

[stevemk14ebr]

Please allow the user to replace the textarea element with a user-given html element. This is required for drag and drop interfaces that want to drop into the mdeditor. Since textarea's cannot have children html elements other than text, the necessary hacky logic of putting spans between words to find the drop cursor location cannot be performed. With a contenteditable div the text can be mixed with html elements who's client position can be known (completing drag and drop logic).

[jaywcjlove]

@stevemk14ebr

<MDEditor
  highlightEnable={false}
  renderTextarea={(props, { dispatch, onChange }) => {
    return (
      <textarea {...props} onChange={(e) => {
        dispatch && dispatch({ markdown: e.target.value });
        onChange && onChange(e.target.value);
      }}/>
    )
  }}
/>

[jaywcjlove]

.w-md-editor-text-input {
  ....
  /* overflow: hidden; */
  /* -webkit-text-fill-color: transparent; */
}

[jaywcjlove]

@stevemk14ebr Upgrade @uiw/react-md-editor v3.4.0

[stevemk14ebr]

That was fast thanks! I have issues when using a div instead of a textarea though:

react-md-editor/src/components/TextArea/handleKeyDown.tsx

Line 18 in 9bb6985

const target = e.target as HTMLTextAreaElement;

throws with error 'can't access property "substr", target.value is undefined'

renderTextarea={(props, { dispatch, onChange }) => {
                    return (
                        <div {...props} spellcheck={true} contentEditable={true} onChange={(e) => {
                            dispatch && dispatch({ markdown: e.target.value });
                            onChange && onChange(e.target.value);
                        }}
                        />
                    )
                }}

I also think that the textareaProps may not be being passed down to the renderTextarea component correctly. I had to put my props directly on the div here to get them to be there. Maybe the cloneElement loses them?

[jaywcjlove]

@stevemk14ebr Change to handle it yourself?

[stevemk14ebr]

It going to take me some time to figure this out, the new version doesn't throw but typing is broken entirely and the content never changes, im not sure how the MDEditor, onChange, and onKeyDown all interact at the moment.

[jaywcjlove]

react-md-editor/src/components/TextArea/index.tsx

Lines 49 to 66 in 7003b75

	{renderTextarea ? (
	renderTextarea(
	{
	...otherProps,
	value: markdown,
	autoComplete: 'off',
	autoCorrect: 'off',
	spellCheck: 'false',
	autoCapitalize: 'off',
	className: `${prefixCls}-text-input`,
	style: {
	WebkitTextFillColor: 'inherit',
	overflow: 'auto',
	},
	},
	{ dispatch, onChange },
	)
	) : (

<MDEditor
  renderTextarea={(props, { dispatch, onChange}) => {
    return (
      <textarea {...props} onChange={(e) => {
        dispatch && dispatch({ markdown: e.target.value });
        onChange && onChange(e.target.value);
      }}/>
    )
  }}
/>

Add a new API, to be forward compatible.
@stevemk14ebr