import cx from "classnames";
import React, { useContext, useMemo, useReducer, useState } from "react";
import { or } from "./../../../ricos-content/index.js";
import { EditorQueryContext, RicosContext, useTrackRender } from "./../../../ricos-context/index.js";
import { getToolbarSettings, useToolbarSettings } from "./../../../ricos-context/toolbar-context.js";
import { StylesContext } from "./../../../ricos-styles/index.js";
import { ToolbarType } from "./../../../ricos-types/index.js";
import { getPluginIdByInsertPlugin } from "./../../../_shared/get-plugin-id-by-insert-plugin.js";
import { EditorContent } from "./../../../tiptap/react/index.js";
import { getLangDir } from "./../../../wix-rich-content-common/index.js";
import { RICOS_TIPTAP_EDITOR_DATA_HOOK } from "./../../../editor-common/index.js";
import { FloatingAddPluginMenu } from "./../../../toolbars-v3/index.js";
import { useIsToolbarEmpty } from "./../../../toolbars-v3/ricos-toolbars/use-is-toolbar-empty.js";
import { RicosTiptapContext } from "../../context.js";
import styles from "../../statics/styles/tiptap-editor-styles-scss.js";
import { focusReducer } from "./focus-reducer.js";
import { useEditorSideEffects } from "./use-editor-side-effects.js";
import { useJsdomWidthFix } from "./use-jsdom-width-fix.js";
import { useKeydownListener } from "./use-keydown-listener.js";
const editorFocusDescriptionId = "editor-container-tooltip";
const RicosTiptapEditor = (props) => {
  const { editor, onUpdate, onSelectionUpdate, editorStyleClasses, htmlAttributes, ...context } = props;
  const { localeContent, lastInteraction, t, tabFocusBehavior } = useContext(RicosContext);
  const { stylePreset } = useContext(StylesContext);
  const [ref, setRef] = useState(null);
  const [state, dispatch] = useReducer(focusReducer, "not-focused");
  useTrackRender("RicosTiptapEditor");
  useJsdomWidthFix(ref, editor);
  useEditorSideEffects({ editor, onUpdate, onSelectionUpdate });
  const handleKeyDown = (event) => {
    if (event.key !== "Escape") {
      dispatch({ type: "keydown", event });
      return;
    }
    const currentSelection = editor.state.selection;
    setTimeout(() => {
      if (!currentSelection.eq(editor.state.selection)) {
        return;
      }
      dispatch({ type: "keydown", event });
    }, 0);
  };
  const handleMouseDown = () => {
    dispatch({ type: "pointer-focus" });
  };
  useKeydownListener(ref, handleKeyDown);
  const ricosTiptapContextValue = useMemo(() => {
    return {
      context: {
        t: context.t,
        theme: context.theme,
        onLoad: context.onLoad,
        devToolsElement: context.devToolsElement
      }
    };
  }, [context.t, context.theme, context.onLoad, context.devToolsElement]);
  return /* @__PURE__ */ React.createElement(RicosTiptapContext.Provider, { value: ricosTiptapContextValue }, /* @__PURE__ */ React.createElement(
    "div",
    {
      "data-hook": RICOS_TIPTAP_EDITOR_DATA_HOOK,
      dir: getLangDir(localeContent),
      className: cx(
        editorStyleClasses?.containerClassName,
        styles.ricosTiptapEditor,
        {
          [styles.focusRing]: state === "editor-focused-outlined" || state === "container-focused" || state === "awaiting-keyboard-input"
        },
        stylePreset
      ),
      style: state === "container-focused" || state === "awaiting-keyboard-input" ? { caretColor: "transparent" } : {},
      onMouseDown: handleMouseDown,
      onBlur: () => {
        dispatch({ type: "blur" });
      },
      onFocus: () => {
        const getKeyboardFocusType = () => {
          if (tabFocusBehavior === "container") {
            return "keyboard-focus-awaiting";
          }
          return "keyboard-focus";
        };
        dispatch({
          type: lastInteraction === "keyboard" ? getKeyboardFocusType() : "pointer-focus"
        });
      },
      ...htmlAttributes,
      tabIndex: -1,
      ref: setRef
    },
    /* @__PURE__ */ React.createElement(FloatingPluginMenu, { isMobile: context.isMobile }),
    /* @__PURE__ */ React.createElement(EditorContent, { editor, className: editorStyleClasses?.editorClassName }),
    props.devToolsElement
  ), (state === "container-focused" || state === "awaiting-keyboard-input") && /* @__PURE__ */ React.createElement("span", { "aria-live": "assertive", role: "alert", className: styles.srOnly }, t("Editor_Blur_Description")), /* @__PURE__ */ React.createElement("span", { id: editorFocusDescriptionId, className: styles.srOnly }, t("Editor_Focus_Description")));
};
const FloatingPluginMenu = ({ isMobile }) => {
  const editorQuery = useContext(EditorQueryContext);
  const { isMultipleSelection, isSingleRootTextBlock } = editorQuery.query;
  const shouldShowPlusButton = or([isMultipleSelection, isSingleRootTextBlock]);
  const sideToolbarSettings = useToolbarSettings(getToolbarSettings(ToolbarType.SIDE));
  const insertPluginToolbarSettings = useToolbarSettings(
    getToolbarSettings(ToolbarType.INSERT_PLUGIN)
  );
  const supportedButtonIds = insertPluginToolbarSettings?.getButtons?.()?.desktop?.map(getPluginIdByInsertPlugin);
  const isToolbarEmpty = useIsToolbarEmpty(ToolbarType.SIDE);
  if (isMobile || isToolbarEmpty) {
    return null;
  }
  return /* @__PURE__ */ React.createElement(
    FloatingAddPluginMenu,
    {
      onClick: sideToolbarSettings?.onClick,
      isVisible: shouldShowPlusButton,
      supportedButtonIds
    }
  );
};
export {
  RicosTiptapEditor,
  editorFocusDescriptionId
};
//# sourceMappingURL=ricos-tiptap-editor.js.map
