import React from "react";
import { Decoration_Type } from "./../../ricos-schema/legacy/wix/rich_content/v1/index.js";
import colorDataDefaults from "./../../ricos-schema/legacy/statics/color.defaults.json.js";
import { NodeSelection } from "./../../tiptap/pm/state.js";
import {
  createRicosFunctionalExtension,
  createRicosMarkExtension
} from "./../../plugin-commons/index.js";
import { BlockSpoilerComponent } from "../Components/block-spoiler-component.js";
const SPOILER_STYLE = "blur(0.25em)";
const SpoilerHoc = (Component) => {
  const Spoiler = (props) => {
    const { context, updateAttributes, node, editor, getPos, selected } = props;
    const { isMobile, t } = context;
    if (node.attrs.containerData?.spoiler?.enabled) {
      const { spoiler } = node.attrs.containerData;
      const componentData = {
        config: {
          spoiler: {
            ...spoiler,
            buttonContent: spoiler.buttonText
          }
        }
      };
      const updateComponentData = (data) => {
        const containerData = { ...node.attrs.containerData, spoiler: { ...spoiler, ...data } };
        updateAttributes({ containerData });
      };
      const handleDescriptionChange = (description) => updateComponentData({ description });
      const handleButtonContentChange = (buttonText) => updateComponentData({ buttonText });
      const setFocusToBlock = () => {
        if (!selected) {
          const selection = NodeSelection.create(editor.view.state.doc, getPos());
          const transaction = editor.view.state.tr.setSelection(selection);
          editor.view.dispatch(transaction);
        }
      };
      const pluginType = node.type.name[0] + node.type.name.toLowerCase().slice(1);
      return /* @__PURE__ */ React.createElement(
        BlockSpoilerComponent,
        {
          componentData,
          isMobile,
          isEditableText: true,
          t,
          pluginType,
          handleDescriptionChange,
          handleButtonContentChange,
          setFocusToBlock,
          setInPluginEditingMode: () => {
          },
          disabledRevealSpoilerBtn: true
        },
        /* @__PURE__ */ React.createElement(Component, { ...props })
      );
    } else {
      return /* @__PURE__ */ React.createElement(Component, { ...props });
    }
  };
  Spoiler.displayName = "SpoilerHoc";
  return Spoiler;
};
const tiptapExtensions = [
  createRicosFunctionalExtension({
    type: "extension",
    name: "node-spoiler",
    groups: [],
    reconfigure: (config, extensions, _props, settings) => ({
      ...config,
      addOptions: () => settings,
      addNodeHoc: () => ({
        nodeTypes: extensions.filter((extension) => extension.groups.includes("spoilerable")).map(({ name }) => name),
        priority: 10,
        getNodeHoc: () => SpoilerHoc
      })
    }),
    createExtensionConfig() {
      return {
        name: this.name,
        priority: 10
      };
    }
  }),
  createRicosMarkExtension({
    type: "mark",
    groups: [],
    name: Decoration_Type.SPOILER,
    createExtensionConfig() {
      return {
        name: this.name,
        addOptions: () => ({
          HTMLAttributes: {}
        }),
        addAttributes() {
          return colorDataDefaults;
        },
        parseHTML() {
          return [
            {
              tag: "span",
              getAttrs: (element) => {
                const { filter } = element.style || {};
                return filter === SPOILER_STYLE ? {} : false;
              }
            }
          ];
        },
        renderHTML() {
          return [
            "span",
            { class: "spoiler-text-blur", style: `filter: ${SPOILER_STYLE}` },
            0
          ];
        },
        addCommands() {
          return {
            toggleSpoiler: () => ({ commands }) => {
              return commands.toggleMark(this.name);
            }
          };
        }
      };
    }
  })
];
export {
  tiptapExtensions
};
//# sourceMappingURL=tiptap.js.map
