Componente unForm com QuillEditor

EditorQuill.tsx

// Styles.ts
import styled, { css } from 'styled-components';
import ToolTip from '../Tooltip';

interface ContainerProps {
  isFocused: boolean;
  isFilled: boolean;
  isErrored: boolean;
}
export const Container = styled.div<ContainerProps>`
  color: #666360;
  border-radius: 4px;
  /* border: 2px solid #233129; */
  border: 1px solid hsl(0,0%,80%);
  padding: 10px;
  width: 80%;
  flex-direction:row;

  display: flex;
  align-items: center;

  & + div {
    margin-top: 8px;
  }

  ${(props) =>
    props.isErrored &&
    css`
      border-color: #c53030;
    `}

  ${(props) =>
    props.isFocused &&
    css`
      //color: #ff9900;
      border-color: #ff9000;
    `}

  ${(props) =>
    props.isFilled &&
    css`
      border-color: #ff9000;
    `}

  input {
    flex: 1;
    background: transparent;
    border: 0;
    color: #000;

    &::placeholder {
      color: #666360;
    }
  }

  > svg {
    margin-right: 16px;
  }
`;

export const Error = styled(ToolTip)`
  height: 20px;
  margin-left: 12px;

  svg {
    margin: 0;
  }

  span {
    background: #c53030;
    color: #fff;
    &::before {
      border-color: #c53030 transparent;
    }
  }
`;

// end styles.ts

// begin editorquil.tsx

import React, { useEffect, useRef, useState, useCallback } from 'react';
import { FiAlertCircle } from 'react-icons/fi';
import { useField } from '@unform/core';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import { Container, Error } from './styles';

interface InputProps {
  name: string;
}

const EditorQuill: React.FC<InputProps> = ({ name }) => {
  const modules = {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      [{ align: [] }],

      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ indent: '-1' }, { indent: '+1' }],

      [{ size: ['small', false, 'large', 'huge'] }],
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      ['link'],
      [{ color: [] }, { background: [] }],

      ['clean'],
    ],
    clipboard: {
      matchVisual: false,
    },
  };

  const placeholder = 'Compose an epic...';

  const formats = [
    'bold',
    'italic',
    'underline',
    'strike',
    'align',
    'list',
    'indent',
    'size',
    'header',
    'link',
    /*  'image', */
    /* 'video', */
    'color',
    'background',
    'clean',
  ];

  const editorRef = useRef<ReactQuill>(null);
  const [texthtml, setTexthtml] = useState('')
  const [isFocused, setIsFocused] = useState(false);
  const [isFilled, setIsFilled] = useState(false);
  const { fieldName, defaultValue, error, registerField } = useField(name);
  const [texthtml, setTexthtml] = useState('');

  const handleInputBlur = useCallback(() => {
    setIsFocused(false);
    setIsFilled(!!editorRef.current?.value);
    console.log(editorRef);
  }, []);

  useEffect(() => {
    registerField({
      name: fieldName,
      ref: editorRef.current,
      // path: '_input.value',
      getValue: (ref) => ref.value,
      setValue(ref: any, value: string) {
      //  ref.value = value;
        setTexthtml(value);
      },
    });
  }, [fieldName, registerField, defaultValue]);

  return (
    <Container isErrored={!!error} isFilled={isFilled} isFocused={isFocused}>
      <ReactQuill
        onFocus={() => setIsFocused(true)}
        onBlur={handleInputBlur}
        defaultValue={defaultValue}
        modules={modules}
        formats={formats}
        value={texthtml}
        onChange={setTexthtml}
        placeholder={placeholder}
        ref={editorRef}
        theme="snow"
      />

      {error && (
        <Error title={error}>
          <FiAlertCircle color="#c53030" size={16} />
        </Error>
      )}
    </Container>
  );
};

export default EditorQuill;