import React, { useContext, useState } from "react";
import { EditorContext, RicosContext } from "./../../../ricos-context/index.js";
import { ToolbarType } from "./../../../ricos-types/index.js";
import { MaxWidthCalculationWrapper } from "../../components/MaxWidthCalculationWrapper/max-width-calculation-wrapper.js";
import { Toolbar } from "../../components/Toolbar/toolbar.js";
import { useIsToolbarEmpty } from "../use-is-toolbar-empty.js";
import { FORMATTING_TOOLBAR } from "./data-hooks.js";
import { formattingItemsRenderers } from "./formatting-renderers.js";
import { useToolbarsItemsConfig } from "./use-toolbars-items-config.js";
const FormattingToolbar = ({ maxWidth }) => {
  const {
    adapter: { tiptapEditor }
  } = useContext(EditorContext);
  const { isMobile, t } = useContext(RicosContext);
  const toolbarItemsConfig = useToolbarsItemsConfig(ToolbarType.INLINE);
  const [toolbarMaxWidth, setToolbarMaxWidth] = useState(
    typeof maxWidth === "number" ? maxWidth : tiptapEditor.view.dom.clientWidth
  );
  const isFormattingToolbarEmpty = useIsToolbarEmpty(ToolbarType.INLINE);
  if (isFormattingToolbarEmpty) {
    return null;
  }
  return /* @__PURE__ */ React.createElement(
    MaxWidthCalculationWrapper,
    {
      setMaxWidth: setToolbarMaxWidth,
      style: { maxWidth: "fit-content" },
      "data-hook": FORMATTING_TOOLBAR
    },
    /* @__PURE__ */ React.createElement(
      Toolbar,
      {
        type: "floating",
        isMobile,
        toolbarItemsConfig,
        toolbarItemsRenderers: formattingItemsRenderers,
        maxWidth: toolbarMaxWidth,
        ariaLabel: t("FormattingToolbar_AriaLabel")
      }
    )
  );
};
export {
  FormattingToolbar
};
//# sourceMappingURL=formatting-toolbar.js.map
