Un-revert commit from @vitorqb

andrerpena · Apr 27, 2020 · 9caab66 · 9caab66
1 parent 11ae7fc
commit 9caab66
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 4 deletions.
diff --git a/demo/App.tsx b/demo/App.tsx
@@ -75,8 +75,14 @@ export class App extends React.Component<{}, AppState> {
           classes={{
             suggestionsDropdown: "bbbb"
           }}
+          textAreaComponent={CustomTextArea}
         />
       </div>
     );
   }
 }
+
+const CustomTextArea = React.forwardRef((props: any, ref: any) => {
+  const style = { ...props.style, backgroundColor: "blue" };
+  return <textarea {...props} style={style} ref={ref} />;
+});
diff --git a/src/components/ReactMde.tsx b/src/components/ReactMde.tsx
@@ -16,6 +16,7 @@ import { classNames } from "../util/ClassNames";
 import { ChildProps } from "../child-props";
 import { CommandOrchestrator } from "../commandOrchestrator";
 import { Refs } from "../refs";
+import { DetailedHTMLFactory, TextareaHTMLAttributes } from "react";
 
 export interface ReactMdeProps {
   value: string;
@@ -37,6 +38,20 @@ export interface ReactMdeProps {
   loadSuggestions?: (text: string) => Promise<Suggestion[]>;
   childProps?: ChildProps;
   l18n?: L18n;
+  /**
+   * Custom textarea component. "textAreaComponent" can be any React component which
+   * props are a subset of the props of an HTMLTextAreaElement
+   */
+  textAreaComponent?: React.ClassType<
+    Partial<
+      DetailedHTMLFactory<
+        TextareaHTMLAttributes<HTMLTextAreaElement>,
+        HTMLTextAreaElement
+      >
+    >,
+    any,
+    any
+  >;
 }
 
 export interface ReactMdeState {
@@ -155,7 +170,8 @@ export class ReactMde extends React.Component<ReactMdeProps, ReactMdeState> {
       selectedTab,
       generateMarkdownPreview,
       loadSuggestions,
-      suggestionTriggerCharacters
+      suggestionTriggerCharacters,
+      textAreaComponent
     } = this.props;
 
     const finalChildProps = childProps || {};
@@ -189,6 +205,7 @@ export class ReactMde extends React.Component<ReactMdeProps, ReactMdeState> {
             refObject={this.finalRefs.textarea}
             onChange={this.handleTextChange}
             readOnly={readOnly}
+            textAreaComponent={textAreaComponent}
             textAreaProps={childProps && childProps.textArea}
             height={this.state.editorHeight}
             value={value}

diff --git a/src/components/TextArea.tsx b/src/components/TextArea.tsx
@@ -8,6 +8,7 @@ import { Suggestion } from "../types";
 import { insertText } from "../util/InsertTextAtPosition";
 import { mod } from "../util/Math";
 import { SuggestionsDropdown } from "./SuggestionsDropdown";
+import { DetailedHTMLFactory, TextareaHTMLAttributes } from "react";
 
 export interface MentionState {
   status: "active" | "inactive" | "loading";
@@ -41,13 +42,26 @@ export interface TextAreaProps {
     text: string,
     triggeredBy: string
   ) => Promise<Suggestion[]>;
+  /**
+   * Custom textarea component. "textAreaComponent" can be any React component which
+   * props are a subset of the props of an HTMLTextAreaElement
+   */
+  textAreaComponent?: React.ClassType<
+    Partial<
+      DetailedHTMLFactory<
+        TextareaHTMLAttributes<HTMLTextAreaElement>,
+        HTMLTextAreaElement
+      >
+    >,
+    any,
+    any
+  >;
   textAreaProps?: Partial<
     React.DetailedHTMLProps<
       React.TextareaHTMLAttributes<HTMLTextAreaElement>,
       HTMLTextAreaElement
     >
   >;
-
   /**
    * On keydown, the TextArea will trigger "onPossibleKeyCommand" as an opportunity for React-Mde to
    * execute a command. If a command is executed, React-Mde should return true, otherwise, false.
@@ -344,7 +358,8 @@ export class TextArea extends React.Component<TextAreaProps, TextAreaState> {
       value,
       suggestionTriggerCharacters,
       loadSuggestions,
-      suggestionsDropdownClasses
+      suggestionsDropdownClasses,
+      textAreaComponent
     } = this.props;
 
     const suggestionsEnabled =
@@ -353,9 +368,16 @@ export class TextArea extends React.Component<TextAreaProps, TextAreaState> {
       loadSuggestions;
 
     const { mention } = this.state;
+
+    const TextAreaComponent = (textAreaComponent ||
+      "textarea") as DetailedHTMLFactory<
+      TextareaHTMLAttributes<HTMLTextAreaElement>,
+      HTMLTextAreaElement
+    >;
+
     return (
       <div className="mde-textarea-wrapper">
-        <textarea
+        <TextAreaComponent
           className={classNames("mde-text", classes)}
           style={{ height }}
           ref={this.props.refObject}