Function EditableThing

src/ui-react-dom/common/components.tsx:142–330

({
  thing,
  onThingChange,
  className,
  hasSchema,
  showType = true,
}: {
  readonly thing: Cell | Value | undefined;
  readonly onThingChange: (thing: Cell | Value) => void;
  readonly className: string;
  readonly hasSchema: (() => boolean) | undefined;
  readonly showType?: boolean;
})

);

export const EditableThing = ({
  thing,
  onThingChange,
  className,
  hasSchema,
  showType = true,
}: {
  readonly thing: Cell | Value | undefined;
  readonly onThingChange: (thing: Cell | Value) => void;
  readonly className: string;
  readonly hasSchema: (() => boolean) | undefined;
  readonly showType?: boolean;
}) => {
  const [thingType, setThingType] = useState<CellOrValueType>();
  const [currentThing, setCurrentThing] = useState<Cell | Value>();
  const [stringThing, setStringThing] = useState<string>();
  const [numberThing, setNumberThing] = useState<number>();
  const [booleanThing, setBooleanThing] = useState<boolean>();
  const [objectThing, setObjectThing] = useState<string>('{}');
  const [arrayThing, setArrayThing] = useState<string>('[]');

  const [objectClassName, setObjectClassName] = useState<string>('');
  const [arrayClassName, setArrayClassName] = useState<string>('');

  if (currentThing !== thing) {
    setThingType(getCellOrValueType(thing));
    setCurrentThing(thing);
    if (isObject(thing)) {
      setObjectThing(jsonString(thing));
    } else if (isArray(thing)) {
      setArrayThing(jsonString(thing));
    } else {
      setStringThing(string(thing));
      setNumberThing(number(thing) || 0);
      setBooleanThing(boolean(thing));
    }
  }

  const handleThingChange = useCallback(
    <T extends Cell | Value>(thing: T, setTypedThing: (thing: T) => void) => {
      setTypedThing(thing);
      setCurrentThing(thing);
      onThingChange(thing);
    },
    [onThingChange],
  );

  const handleJsonThingChange = useCallback(
    (
      value: string,
      setTypedThing: (value: string) => void,
      isThing: (thing: any) => boolean,
      setTypedClassName: (className: string) => void,
    ) => {
      setTypedThing(value);
      try {
        const object = jsonParse(value);
        if (isThing(object)) {