@mantine/tiptap/cjs/RichTextEditorControl/RichTextEditorColorPickerControl.cjs

Rich text editor based on tiptap

'use client';
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var core = require('@mantine/core');
var hooks = require('@mantine/hooks');
var Icons = require('../icons/Icons.cjs');
var RichTextEditor_context = require('../RichTextEditor.context.cjs');
var RichTextEditorControl = require('./RichTextEditorControl.cjs');

const RichTextEditorColorPickerControl = react.forwardRef((props, ref) => {
  const { popoverProps, colors, colorPickerProps, ...others } = core.useProps(
    "RichTextEditorColorPickerControl",
    null,
    props
  );
  const { editor, labels, getStyles, variant } = RichTextEditor_context.useRichTextEditorContext();
  const [opened, { toggle, close }] = hooks.useDisclosure(false);
  const [state, setState] = react.useState("palette");
  const currentColor = editor?.getAttributes("textStyle").color || "var(--mantine-color-text)";
  const handleChange = (value, shouldClose = true) => {
    (editor?.chain()).focus().setColor(value).run();
    shouldClose && close();
  };
  const handleClear = () => {
    (editor?.chain()).focus().unsetColor().run();
    close();
  };
  const controls = colors.map((color, index) => /* @__PURE__ */ jsxRuntime.jsx(
    core.ColorSwatch,
    {
      component: "button",
      color,
      onClick: () => handleChange(color),
      size: 26,
      radius: "xs",
      style: { cursor: "pointer" },
      title: labels.colorPickerColorLabel(color),
      "aria-label": labels.colorPickerColorLabel(color)
    },
    index
  ));
  return /* @__PURE__ */ jsxRuntime.jsxs(
    core.Popover,
    {
      opened,
      withinPortal: true,
      trapFocus: true,
      onChange: (_opened) => !_opened && close(),
      ...popoverProps,
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(core.Popover.Target, { children: /* @__PURE__ */ jsxRuntime.jsx(
          RichTextEditorControl.RichTextEditorControl,
          {
            ...others,
            variant,
            "aria-label": labels.colorPickerControlLabel,
            title: labels.colorPickerControlLabel,
            ref,
            onClick: toggle,
            children: /* @__PURE__ */ jsxRuntime.jsx(core.ColorSwatch, { color: currentColor, size: 14 })
          }
        ) }),
        /* @__PURE__ */ jsxRuntime.jsxs(core.Popover.Dropdown, { ...getStyles("linkEditorDropdown"), children: [
          state === "palette" && /* @__PURE__ */ jsxRuntime.jsx(core.SimpleGrid, { cols: 7, spacing: 2, children: controls }),
          state === "colorPicker" && /* @__PURE__ */ jsxRuntime.jsx(
            core.ColorPicker,
            {
              defaultValue: currentColor,
              onChange: (value) => handleChange(value, false),
              ...colorPickerProps
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip.Group, { closeDelay: 200, children: /* @__PURE__ */ jsxRuntime.jsxs(core.Group, { justify: "flex-end", gap: "xs", mt: "sm", children: [
            state === "palette" && /* @__PURE__ */ jsxRuntime.jsx(
              core.ActionIcon,
              {
                variant: "default",
                onClick: close,
                title: labels.colorPickerCancel,
                "aria-label": labels.colorPickerCancel,
                children: /* @__PURE__ */ jsxRuntime.jsx(Icons.IconX, { style: { width: core.rem(16), height: core.rem(16) } })
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsx(
              core.ActionIcon,
              {
                variant: "default",
                onClick: handleClear,
                title: labels.colorPickerClear,
                "aria-label": labels.colorPickerClear,
                children: /* @__PURE__ */ jsxRuntime.jsx(Icons.IconCircleOff, { style: { width: core.rem(16), height: core.rem(16) } })
              }
            ),
            state === "palette" ? /* @__PURE__ */ jsxRuntime.jsx(
              core.ActionIcon,
              {
                variant: "default",
                onClick: () => setState("colorPicker"),
                title: labels.colorPickerColorPicker,
                "aria-label": labels.colorPickerColorPicker,
                children: /* @__PURE__ */ jsxRuntime.jsx(Icons.IconColorPicker, { style: { width: core.rem(16), height: core.rem(16) } })
              }
            ) : /* @__PURE__ */ jsxRuntime.jsx(
              core.ActionIcon,
              {
                variant: "default",
                onClick: () => setState("palette"),
                "aria-label": labels.colorPickerPalette,
                title: labels.colorPickerPalette,
                children: /* @__PURE__ */ jsxRuntime.jsx(Icons.IconPalette, { style: { width: core.rem(16), height: core.rem(16) } })
              }
            ),
            state === "colorPicker" && /* @__PURE__ */ jsxRuntime.jsx(
              core.ActionIcon,
              {
                variant: "default",
                onClick: close,
                title: labels.colorPickerSave,
                "aria-label": labels.colorPickerSave,
                children: /* @__PURE__ */ jsxRuntime.jsx(Icons.IconCheck, { style: { width: core.rem(16), height: core.rem(16) } })
              }
            )
          ] }) })
        ] })
      ]
    }
  );
});
RichTextEditorColorPickerControl.displayName = "@mantine/tiptap/ColorPickerControl";

exports.RichTextEditorColorPickerControl = RichTextEditorColorPickerControl;
//# sourceMappingURL=RichTextEditorColorPickerControl.cjs.map