Web:Components:Adding Comment Highlights to the Versions Menu.

packages/asc-web-components/textarea/index.js

@@ -1,62 +1,67 @@
-import React from "react";
+import React, { useRef } from "react";
 import PropTypes from "prop-types";
 import { StyledTextarea, StyledScrollbar } from "./styled-textarea";
 
 // eslint-disable-next-line react/prop-types, no-unused-vars
 
-class Textarea extends React.PureComponent {
-  render() {
-    // console.log('Textarea render');
-    const {
-      className,
-      id,
-      isDisabled,
-      isReadOnly,
-      hasError,
-      heightScale,
-      maxLength,
-      name,
-      onChange,
-      placeholder,
-      style,
-      tabIndex,
-      value,
-      fontSize,
-      heightTextArea,
-      color,
-      theme,
-      autoFocus,
-    } = this.props;
+const Textarea = ({
+  className,
+  id,
+  isDisabled,
+  isReadOnly,
+  hasError,
+  heightScale,
+  maxLength,
+  name,
+  onChange,
+  placeholder,
+  style,
+  tabIndex,
+  value,
+  fontSize,
+  heightTextArea,
+  color,
+  theme,
+  autoFocus,
+  areaSelect,
+}) => {
+  const areaRef = useRef(null);
 
-    return (
-      <StyledScrollbar
-        className={className}
-        style={style}
-        stype="preMediumBlack"
+  React.useEffect(() => {
+    if (areaSelect && areaRef.current) {
+      areaRef.current.select();
+    }
+  }, [areaRef.current]);
+
+  return (
+    <StyledScrollbar
+      className={className}
+      style={style}
+      stype="preMediumBlack"
+      isDisabled={isDisabled}
+      hasError={hasError}
+      heightScale={heightScale}
+      heighttextarea={heightTextArea}
+    >
+      <StyledTextarea
+        id={id}
+        placeholder={placeholder}
+        onChange={(e) => onChange && onChange(e)}
+        maxLength={maxLength}
+        name={name}
+        tabIndex={tabIndex}
         isDisabled={isDisabled}
-        hasError={hasError}
-        heightScale={heightScale}
-        heighttextarea={heightTextArea}
-      >
-        <StyledTextarea
-          id={id}
-          placeholder={placeholder}
-          onChange={(e) => onChange && onChange(e)}
-          maxLength={maxLength}
-          name={name}
-          tabIndex={tabIndex}
-          isDisabled={isDisabled}
-          disabled={isDisabled}
-          readOnly={isReadOnly}
-          value={value}
-          fontSize={fontSize}
-          color={color}
-          autoFocus={autoFocus}
-        />
-      </StyledScrollbar>
-    );
-  }
-}
+        disabled={isDisabled}
+        readOnly={isReadOnly}
+        value={value}
+        fontSize={fontSize}
+        color={color}
+        autoFocus={autoFocus}
+        ref={areaRef}
+      />
+    </StyledScrollbar>
+  );
+};
 
 Textarea.propTypes = {
   /** Class name */
@@ -92,6 +97,7 @@ Textarea.propTypes = {
   /** Specifies the text color */
   color: PropTypes.string,
   autoFocus: PropTypes.bool,
+  areaSelect: PropTypes.bool,
 };
 
 Textarea.defaultProps = {
@@ -105,6 +111,7 @@ Textarea.defaultProps = {
   value: "",
   fontSize: 13,
   isAutoFocussed: false,
+  areaSelect: false,
 };
 
 export default Textarea;

packages/asc-web-components/textarea/styled-textarea.js

@@ -40,13 +40,11 @@ StyledScrollbar.defaultProps = {
 };
 
 // eslint-disable-next-line react/prop-types, no-unused-vars
-const ClearTextareaAutosize = ({
-  isDisabled,
-  heightScale,
-  hasError,
-  color,
-  ...props
-}) => <TextareaAutosize {...props} />;
+const ClearTextareaAutosize = React.forwardRef(
+  ({ isDisabled, heightScale, hasError, color, ...props }, ref) => (
+    <TextareaAutosize {...props} ref={ref} />
+  )
+);
 
 const StyledTextarea = styled(ClearTextareaAutosize).attrs((props) => ({
   autoFocus: props.autoFocus,