Image extension

Insert and manage images with perfect Word compatibility.

Supports URLs, base64 data, and maintains positioning for Word export.

OOXML Structure

<w:drawing>
  <wp:inline distT="0" distB="0" distL="0" distR="0">
    <wp:extent cx="5715000" cy="3810000"/>
    <wp:docPr id="1" name="Picture 1"/>
    <a:graphic>
      <a:graphicData>
        <pic:pic>
          <pic:blipFill>
            <a:blip r:embed="rId7"/>
          </pic:blipFill>
        </pic:pic>
      </a:graphicData>
    </a:graphic>
  </wp:inline>
</w:drawing>

Use case

• Document illustrations - Add diagrams, charts, and screenshots
• Product documentation - Include product images and UI screenshots
• Reports - Embed data visualizations and infographics
• Branding - Insert logos and company graphics
• Base64 support - Embed images directly without external files

Options

Configure the extension behavior:

allowBase64 · boolean · default: "true"

Allow base64 encoded images

htmlAttributes · Object

Default HTML attributes for image elements

Attributes

Node attributes that can be set and retrieved:

src · string

Image source URL or path

alt · string · default: "Uploaded picture"

Alternative text for accessibility

title · string

Image title/tooltip text

size · Object

Image dimensions

size.width · number

Width in pixels

size.height · number

Height in pixels

padding · Object

Image padding/margins

padding.left · number

Left padding in pixels

padding.top · number

Top padding in pixels

padding.bottom · number

Bottom padding in pixels

padding.right · number

Right padding in pixels

marginOffset · Object

Margin offset for anchored images

marginOffset.horizontal · number

Left/right margin offset

marginOffset.top · number

Top margin offset

style · string

Custom inline CSS styles

wrap · Object · default: "{ type: 'Inline' }"

Text wrapping configuration. The type property controls wrapping mode (e.g., 'Inline', 'Square', 'Tight', 'TopAndBottom', 'None').

transformData · Object · default: "{}"

Transform data for rotation, flips, and size extension. Supports rotation (degrees), flipH (horizontal flip), flipV (vertical flip), and sizeExtension properties.

Commands

setImage

Insert an image at the current position

Supports URLs, relative paths, and base64 data URIs

Example:

Usage

editor.commands.setImage({ src: 'https://example.com/image.jpg' })
editor.commands.setImage({
  src: 'data:image/png;base64,...',
  alt: 'Company logo',
  size: { width: 200 }
})

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    editor.commands.setImage({ src: 'https://example.com/image.jpg' })
    editor.commands.setImage({
      src: 'data:image/png;base64,...',
      alt: 'Company logo',
      size: { width: 200 }
    })
  },
});

Parameters:

options · ImageInsertOptions · required

Image insertion options

setWrapping

Set the wrapping mode and attributes for the selected image

Example:

Usage

// No wrapping, behind document
editor.commands.setWrapping({ type: 'None', attrs: {behindDoc: true} })

// Square wrapping on both sides with distances
editor.commands.setWrapping({
  type: 'Square',
  attrs: {
    wrapText: 'bothSides',
    distTop: 10,
    distBottom: 10,
    distLeft: 10,
    distRight: 10
  }
})

// Tight wrapping with polygon
editor.commands.setWrapping({
  type: 'Tight',
  attrs: {
    polygon: [[0, 0], [100, 0], [100, 100], [0, 100]]
  }
})

// Top and bottom wrapping
editor.commands.setWrapping({
  type: 'TopAndBottom',
  attrs: {
    distTop: 15,
    distBottom: 15
  }
})

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const editor = superdoc.activeEditor;
    // No wrapping, behind document
    editor.commands.setWrapping({ type: 'None', attrs: {behindDoc: true} })

    // Square wrapping on both sides with distances
    editor.commands.setWrapping({
      type: 'Square',
      attrs: {
        wrapText: 'bothSides',
        distTop: 10,
        distBottom: 10,
        distLeft: 10,
        distRight: 10
      }
    })

    // Tight wrapping with polygon
    editor.commands.setWrapping({
      type: 'Tight',
      attrs: {
        polygon: [[0, 0], [100, 0], [100, 100], [0, 100]]
      }
    })

    // Top and bottom wrapping
    editor.commands.setWrapping({
      type: 'TopAndBottom',
      attrs: {
        distTop: 15,
        distBottom: 15
      }
    })
  },
});

Parameters:

options · Object · required

Wrapping options

Types

ImageInsertOptions

Options for inserting an image

Show Properties

src · string · required

Image source URL or data URI

alt · string

Alternative text

title · string

Image title

size · Object

Image dimensions

size.width · number

Width in pixels

size.height · number

Height in pixels

Source code