Function ElementEdit

data-browser/src/views/Element.tsx:49–219

({
  subject,
  deleteElement,
  index,
  setCurrent,
  setElementSubject: setElement,
  active,
  canDrag,
}: ElementEditProps)

/** An element is a section inside document, such as a Paragraph, Header or Image */
export function ElementEdit({
  subject,
  deleteElement,
  index,
  setCurrent,
  setElementSubject: setElement,
  active,
  canDrag,
}: ElementEditProps): JSX.Element {
  const resource = useResource(subject);
  const [err, setErr] = useState(null);
  const [text, setText] = useString(resource, properties.description, {
    commit: true,
    handleValidationError: setErr,
    validate: false,
  });
  const [klass] = useArray(resource, properties.isA);
  const ref = React.useRef(null);
  const [canWrite, canWriteErr] = useCanWrite(resource);

  /** If it is not a text element */
  const isAResource =
    klass.length > 0 && !klass.includes(classes.elements.paragraph);

  function handleOnChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
    handleResize();
    setErr(null);
    setText(e.target.value);
  }

  /** Let the textarea grow */
  function handleResize() {
    if (ref.current) {
      ref.current.style.height = '0';
      ref.current.style.height = ref.current.scrollHeight + 'px';
    }
  }

  /** Resize the text area when the text changes, or it is set to active */
  React.useEffect((): void => {
    handleResize();
  }, [ref, text, active]);

  /** Auto focus on select, move cursor to end */
  React.useEffect(() => {
    ref?.current?.focus();
    text && ref?.current?.setSelectionRange(text?.length, text?.length);
  }, [active]);

  useHotkeys(
    'backspace',
    e => {
      const isEmpty = text == '' || text == null;
      if ((active && isEmpty) || (active && isAResource)) {
        e.preventDefault();
        deleteElement(index);
      }
    },