Variable FileConst

File extension — renders images and generic files inline.

Extends TipTap's Image extension to support both image and non-image files.

Note that displaying non-image files requires injecting a custom file viewing component. The default can only handle images.

Both have an id property always (to be used with the FileInsert extension).

The FileNodeOptions.renderHTMLAsImage option controls HTML output format (this is only used for exporting). The default always renders as <img>.

• Returns true → renders as <img> tag using the src attribute if available.
• Returns false → renders as <div type="file" data-id="...">
  • Note no data is outputted. If you need more advanced output, either wrap the html generation and modify it (you will need to do it this way if any data you need is async) or override renderHTML on the extension.

Custom File Viewing Component

To properly take advantage and use non-image files, you must provide a custom file viewing component.

import { provide } from "vue"
import { fileViewInjectionKey, type FileViewProps } from "@witchcraft/editor/pm/features/File/types"
import MyFilePreview from "./MyFilePreview.vue"

provide(fileViewInjectionKey, MyFilePreview)
Copy

The injected component receives FileViewProps as direct props.

The suggested usage is to have the component aware of how to fetch/display the file based on it's id, and avoid relying on prosemirror node attributes.

The view can then be whatever you need (thumbnail, image, etc.) It could even be async.

The component is wrapped in a container div with resize handles, so it does not need to implement resize logic itself.