import { useMemo, useState, useCallback, createElement, Fragment } from "react";
import { Component, useEntity, QueryLanguage, useMutationState, Field } from "@contember/binding";
import { FieldContainer, EditorCanvas } from "@contember/ui";
import { Node } from "slate";
import { Slate, Editable } from "slate-react";
import { RichEditor } from "../RichEditor.js";
import { useRichTextFieldNodes } from "./useRichTextFieldNodes.js";
import { createEditor } from "../editorFactory/createEditor.js";
import { paragraphElementType } from "../plugins/element/paragraphs/ParagraphElement.js";
import { useAccessorErrors } from "../../errors/useAccessorErrors.js";
import { HoveringToolbars } from "../toolbars/HoveringToolbars.js";
const LegacyDeprecatedEditorFormerlyKnownAsRichTextField = Component((props) => {
  const entity = useEntity();
  const environment = entity.environment;
  const getParent = entity.getAccessor;
  const desugaredField = useMemo(() => QueryLanguage.desugarRelativeSingleField(props, environment), [environment, props]);
  const fieldAccessor = useMemo(() => entity.getRelativeSingleField(desugaredField), [entity, desugaredField]);
  const [contemberFieldElementCache] = useState(() => /* @__PURE__ */ new WeakMap());
  const isMutating = useMutationState();
  const [editor] = useState(() => {
    return createEditor({
      plugins: props.plugins,
      augmentEditor: props.augmentEditor,
      augmentEditorBuiltins: props.augmentEditorBuiltins,
      defaultElementType: paragraphElementType,
      addEditorBuiltins: (editor2) => editor2
    });
  });
  const valueNodes = useRichTextFieldNodes({
    editor,
    fieldAccessor,
    contemberFieldElementCache
  });
  const serialize = editor.serializeNodes;
  const onChange = useCallback((value) => {
    getParent().batchUpdates((getAccessor) => {
      const fieldAccessor2 = getAccessor().getRelativeSingleField(desugaredField);
      if (Node.string({ type: "dummy", children: value }) === "") {
        fieldAccessor2.updateValue(fieldAccessor2.valueOnServer === null ? null : "");
        return;
      }
      fieldAccessor2.updateValue(serialize(value));
      contemberFieldElementCache.set(getAccessor().getRelativeSingleField(desugaredField), value);
    });
  }, [getParent, contemberFieldElementCache, desugaredField, serialize]);
  return /* @__PURE__ */ createElement(FieldContainer, {
    label: props.label,
    size: props.size,
    labelDescription: props.labelDescription,
    labelPosition: props.labelPosition,
    description: props.description,
    useLabelElement: props.useLabelElement,
    errors: useAccessorErrors(fieldAccessor)
  }, /* @__PURE__ */ createElement(Slate, {
    editor,
    value: valueNodes,
    onChange
  }, /* @__PURE__ */ createElement(EditorCanvas, {
    underlyingComponent: Editable,
    componentProps: {
      readOnly: isMutating,
      renderElement: editor.renderElement,
      renderLeaf: editor.renderLeaf,
      onKeyDown: editor.onKeyDown,
      onFocusCapture: editor.onFocus,
      onBlurCapture: editor.onBlur,
      onDOMBeforeInput: editor.onDOMBeforeInput
    }
  }, /* @__PURE__ */ createElement(HoveringToolbars, {
    blockButtons: props.blockButtons,
    inlineButtons: props.inlineButtons ?? defaultInlineButtons
  }))));
}, (props) => /* @__PURE__ */ createElement(Fragment, null, /* @__PURE__ */ createElement(Field, {
  defaultValue: props.defaultValue,
  field: props.field,
  isNonbearing: props.isNonbearing
}), props.label, props.labelDescription, props.description), "LegacyDeprecatedEditorFormerlyKnownAsRichTextField");
const RB = RichEditor.buttons;
const defaultInlineButtons = [
  [RB.bold, RB.italic, RB.underline, RB.anchor],
  [RB.strikeThrough, RB.code]
];
export { LegacyDeprecatedEditorFormerlyKnownAsRichTextField };
//# sourceMappingURL=LegacyDeprecatedEditorFormerlyKnownAsRichTextField.js.map
