Image caption

Add image caption

You can add caption to the image by setting withCaption to true.

import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { ResizableImage } from 'tiptap-extension-resizable-image';

const Demo = () => {
  const editor = useEditor({
    extensions: [
      StarterKit,
      ResizableImage.configure({
        defaultWidth: 200,
        defaultHeight: 200,
        withCaption: true,
      }),
    ],
    content: /* html */ `
      <p>
        <span>
          <img
            src="/example.jpg"
            alt="image alt"
            title="image title"
            width="300"
            data-keep-ratio="true"
          >
          <span>Image caption</span>
        </span>
      </p>
      <p>
        <img
          src="/example.jpg"
          alt="image alt"
          title="image title"
          width="300"
          data-keep-ratio="true"
        >
      </p>
    `,
    immediatelyRender: false,
  });

  return (
    <div>
      <EditorContent editor={editor} className='editor' />
    </div>
  );
};

export default Demo;

Caption props

You can customize the caption by passing captionProps to the extension options.

import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { CSSProperties } from 'react';
import { ResizableImage } from 'tiptap-extension-resizable-image';

const Demo = () => {
  const editor = useEditor({
    extensions: [
      StarterKit,
      ResizableImage.configure({
        defaultWidth: 200,
        defaultHeight: 200,
        withCaption: true,
        captionProps: {
          style: {
            color: 'yellow',
            fontStyle: 'italic',
            '--caption-placeholder': '"Caption placeholder..."',
          } as CSSProperties,
        },
      }),
    ],
    content: /* html */ `
      <p>
        <img
          src="/example.jpg"
          alt="image alt"
          title="image title"
          width="300"
          data-keep-ratio="true"
        >
      </p>
    `,
    immediatelyRender: false,
  });

  return (
    <div>
      <EditorContent editor={editor} className='editor' />
    </div>
  );
};

export default Demo;

Manually adding caption

You can also add a caption manually by calling updateAttributes and setting caption to a string. To remove it, simply set caption to undefined.

This only works when withCaption is false.

import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { ResizableImage } from 'tiptap-extension-resizable-image';

const Demo = () => {
  const editor = useEditor({
    extensions: [
      StarterKit,
      ResizableImage.configure({
        defaultWidth: 200,
        defaultHeight: 200,
      }),
    ],
    content: /* html */ `
      <p>
        <img
          src="/example.jpg"
          alt="image alt"
          title="image title"
          width="300"
          data-keep-ratio="true"
        >
      </p>
    `,
    immediatelyRender: false,
  });

  const addCaption = () => {
    editor?.commands.updateAttributes('image', {
      caption: '',
    });
  };

  const removeCaption = () => {
    editor?.commands.updateAttributes('image', {
      caption: undefined,
    });
  };

  return (
    <div>
      <button
        onClick={addCaption}
        disabled={
          !editor?.isActive('image') ||
          typeof editor?.getAttributes('image').caption === 'string'
        }
      >
        Add caption
      </button>
      <button
        onClick={removeCaption}
        disabled={
          !editor?.isActive('image') ||
          typeof editor?.getAttributes('image').caption !== 'string'
        }
      >
        Remove caption
      </button>
      <EditorContent editor={editor} className='editor' />
    </div>
  );
};

export default Demo;