Detecting images in Editor

Developers: Plugin & API
1

Hi, I started writing my plugin to support style local images. I’ve read that it’s a feature that has been requested for many years. The thing is, it’s absolutely necessary for publishing on GitHub, as nothing else supports the resizing for both Obsidian and GitHub.

I’ve written this so far, based on an existing plugin (GitHub - talengu/obsidian-local-img-plugin: show local image):

import { Plugin } from 'obsidian'

export default class GitHubImagePlugin extends Plugin {
    async onload() {
        this.registerMarkdownPostProcessor((element, ctx) => {
            this.processImages(element)
        })
    }

    processImages(element: HTMLElement) {
        const activeFile = this.app.workspace.getActiveFile()
        if (!activeFile) return

        // @ts-ignore
        const activeFileDir = this.app.vault.getResourcePath(activeFile.parent).split('?')[0]

        const imgs = Array.from(element.getElementsByTagName('img'))

        for (const img of imgs) {
            if (img.src.startsWith('http')) continue

            const cleanSrc = this.getCleanSrc(img.src)
            const fixedSrc = activeFileDir + cleanSrc
            img.src = fixedSrc
        }
    }

    getCleanSrc(src: string) {
        const parts = src.split('/')
        const prefix = parts.slice(0, 3).join('/') + '/'
        return src.replace(prefix, '')
    }

    onunload() {}
}

This works in Reader view. Can you guide me to how to do the same transformation in CodeMirror? For a first step, I’d love to detect all the images being rendered.

Can you recommend me a simple reference plugin I can look at?