import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { Component, useEntity, QueryLanguage, useMutationState, Field } from "@contember/react-binding";
import { FieldContainer, EditorCanvas } from "@contember/ui";
import { useMemo, useState, useCallback } from "react";
import { Node } from "slate";
import { Slate, Editable } from "slate-react";
import { useAccessorErrors } from "@contember/react-binding-ui";
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 { 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__ */ jsx(
      FieldContainer,
      {
        label: props.label,
        size: props.size,
        labelDescription: props.labelDescription,
        labelPosition: props.labelPosition,
        description: props.description,
        useLabelElement: props.useLabelElement,
        errors: useAccessorErrors(fieldAccessor.errors?.errors),
        children: /* @__PURE__ */ jsx(Slate, { editor, value: valueNodes, onChange, children: /* @__PURE__ */ jsx(
          EditorCanvas,
          {
            underlyingComponent: Editable,
            componentProps: {
              readOnly: isMutating,
              renderElement: editor.renderElement,
              renderLeaf: editor.renderLeaf,
              onKeyDown: editor.onKeyDown,
              onFocusCapture: editor.onFocus,
              onBlurCapture: editor.onBlur,
              onDOMBeforeInput: editor.onDOMBeforeInput
            },
            children: /* @__PURE__ */ jsx(
              HoveringToolbars,
              {
                blockButtons: props.blockButtons,
                inlineButtons: props.inlineButtons ?? defaultInlineButtons
              }
            )
          }
        ) })
      }
    );
  },
  (props) => /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(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
