Text = ({
  text,
  block,
  inline,
  isFormula,
  textStyle,
  icon,
  font,
  style,
  customClass,
}) => {
  const {
    connectors: { connect, drag },
    selected,
    actions: { setProp },
  } = useNode((state) => ({
    selected: state.events.selected,
    dragged: state.events.dragged,
  }));
  const [editable, setEditable] = useState(false);

  useEffect(() => {
    !selected && setEditable(false);
  }, [selected]);
  return (
    <div
      className={`${
        isBlock(block, inline, textStyle) ? "d-block" : "d-inline-block"
      } ${customClass || ""} ${Array.isArray(textStyle) ? textStyle.join(" ") : textStyle} is-text ${
        isFormula.text ? "font-monospace" : ""
      } ${selected ? "selected-node" : ""}`}
      ref={(dom) => connect(drag(dom))}
      onClick={(e) => selected && setEditable(true)}
      style={{
        ...(font ? { fontFamily: font } : {}),
        ...reactifyStyles(style || {}),
      }}
    >
      <DynamicFontAwesomeIcon icon={icon} className="me-1" />
      {isFormula.text ? (
        <Fragment>
          =
          <ContentEditable
            html={text}
            style={{ display: "inline" }}
            disabled={!editable}
            onChange={(e) =>
              e?.target && setProp((props) => (props.text = e.target.value))
            }
          />
        </Fragment>
      ) : editable ? (
        <ErrorBoundary>
          <CKEditor
            data={text}
            style={{ display: "inline" }}
            onChange={(e) =>
              setProp((props) => (props.text = e.editor.getData()))
            }
            config={ckConfig}
            type="inline"
          />
        </ErrorBoundary>
      ) : (
        <div className="d-inline" dangerouslySetInnerHTML={{ __html: text }} />
      )}
    </div>
  );
}
@param {object} props
@param {string} props.text
@param {boolean} props.block
@param {object} props.isFormula
@param {string} props.textStyle
@param {string} [props.icon]
@param {string} [props.font]
@returns {div}
@namespace
@category saltcorn-builder
@subcategory components