import { Plugin } from "prosemirror-state";
import colorDataDefaults from "./../ricos-schema/legacy/statics/color.defaults.json.js";
import { Mark_Type } from "./../ricos-types/index.js";
import { resolveDocumentColorToCss } from "./../_shared/theme-color-token.js";
import { PluginKey } from "./../tiptap/pm/state.js";
import { Decoration, DecorationSet } from "./../tiptap/pm/view.js";
import { createRicosMarkExtension } from "./../plugin-commons/index.js";
import { FOREGROUND_COLOR, FOREGROUND_COLOR_VALUE_ATTR } from "./data-hooks.js";
import { OrderedSet } from "./ordered-set.js";
import { createThemeColorClipboardPlugin } from "./tiptap-theme-color-clipboard.js";
const COLOR_PREVIEW_PLUGIN_KEY = new PluginKey("colorPreview");
const tiptapColorForegroundExtension = createRicosMarkExtension({
  type: "mark",
  name: Mark_Type.COLOR_FOREGROUND,
  groups: [],
  reconfigure: (config, _extensions, _props, settings) => ({
    ...config,
    addOptions() {
      return {
        HTMLAttributes: {},
        ...settings
      };
    }
  }),
  createExtensionConfig() {
    return {
      name: this.name,
      addAttributes() {
        return {
          color: { default: colorDataDefaults.foreground }
        };
      },
      parseHTML() {
        return [
          {
            tag: `span[${FOREGROUND_COLOR_VALUE_ATTR}]`,
            getAttrs: (node) => {
              const color = node.getAttribute(FOREGROUND_COLOR_VALUE_ATTR);
              return color ? { color } : false;
            }
          },
          {
            style: "color",
            getAttrs: (color) => ({ color })
          }
        ];
      },
      renderHTML({ HTMLAttributes: { color } }) {
        const styleColor = this.options.styleSelectionPredicate?.(color) ? this.options.customStyleFn?.(OrderedSet.of(color)).color : color;
        const resolved = resolveDocumentColorToCss(styleColor) ?? styleColor;
        return [
          "span",
          {
            "data-hook": FOREGROUND_COLOR,
            ...color ? { [FOREGROUND_COLOR_VALUE_ATTR]: color } : {},
            style: `color: ${resolved}; text-decoration: inherit;`
          }
        ];
      },
      addCommands() {
        return {
          previewColor: (color) => ({ tr, dispatch }) => {
            tr.setMeta(COLOR_PREVIEW_PLUGIN_KEY, color);
            dispatch?.(tr);
            return true;
          },
          setColor: (color) => ({ tr, dispatch, commands }) => {
            commands.setMark(this.name, { color });
            tr.setMeta(COLOR_PREVIEW_PLUGIN_KEY, null);
            dispatch?.(tr);
            return true;
          },
          unsetColor: () => ({ commands }) => commands.setMark(this.name, { color: null })
        };
      },
      addProseMirrorPlugins() {
        return [
          createThemeColorClipboardPlugin(),
          new Plugin({
            key: COLOR_PREVIEW_PLUGIN_KEY,
            state: {
              init() {
                return { color: null };
              },
              apply(tr) {
                const newColor = tr.getMeta(COLOR_PREVIEW_PLUGIN_KEY);
                return { color: newColor };
              }
            },
            props: {
              decorations(state) {
                const { color } = COLOR_PREVIEW_PLUGIN_KEY.getState(state);
                const { from, to } = state.selection;
                if (!color || from === to) {
                  return null;
                }
                const resolved = resolveDocumentColorToCss(color) ?? color;
                return DecorationSet.create(state.doc, [
                  Decoration.inline(from, to, {
                    style: `color: ${resolved}; text-decoration: inherit;`
                  })
                ]);
              }
            }
          })
        ];
      }
    };
  }
});
export {
  tiptapColorForegroundExtension
};
//# sourceMappingURL=tiptap-foreground.js.map
