import type { Extensions } from '@tiptap/core';
import { Image } from '@tiptap/extension-image';
import { createDefaultExtensions } from '@platform-modules/ui-editor';

// Round-trip width/height so a saved <img> renders at its intrinsic size (no layout shift).
// Stock Image drops these; only src/alt/title survive without this extension.
export const ImageWithDimensions = Image.extend({
  addAttributes() {
    return {
      ...this.parent?.(),
      width: {
        default: null,
        parseHTML: (el) => el.getAttribute('width'),
        renderHTML: (attrs) => (attrs.width ? { width: attrs.width } : {}),
      },
      height: {
        default: null,
        parseHTML: (el) => el.getAttribute('height'),
        renderHTML: (attrs) => (attrs.height ? { height: attrs.height } : {}),
      },
    };
  },
});

// Default editor vocabulary + the host Image node. Passed to RichTextEditor's `extensions` prop.
export const editorExtensions: Extensions = [...createDefaultExtensions(), ImageWithDimensions];