[Feature] Remove Image

[RebZJ]

Initial checklist

• I agree to follow the code of conduct
• I searched issues and discussions and couldn’t find anything (or linked relevant results below)

Problem

Clean up/removal of image.

Solution

Similar to how there is functionality to add an image. Would it be possible to have a clean up process? Or is there someway of accessing the URLs of all the image such that we can remove (delete from server) when an image is removed.

Alternatives

Unsure.

[shenzhongkang]

You can get current Markdown AST and use visit (import { visit } from 'unist-util-visit') to get marks by mark type.

import { visit } from 'unist-util-visit'
import { directive } from 'micromark-extension-directive'
import {gfm} from 'micromark-extension-gfm'
import { directiveFromMarkdown, directiveToMarkdown } from 'mdast-util-directive'
import {gfmFromMarkdown, gfmToMarkdown} from 'mdast-util-gfm'

export const parseMarkdownToAST = (markdown: string) => {
  const mdast = fromMarkdown(markdown, {
      extensions: [directive(), gfm()],
      mdastExtensions: [
        directiveFromMarkdown(),
        gfmFromMarkdown()
      ]
  })

  visit(mdast, 'image', (node: any, ...rest: any) => {
    console.log(node) // all image nodes in the markdown content. Parent node and current node's index under its parent can get through rest props.
  })
}

@RebZJ

[shenzhongkang]

And if you don't want import much more packages for getting abstract markdown tree, you can also use Milkdown $command to get all nodes. Like:

// command use for traversal.
export const getAllNodes = $command('getAllNodes', (ctx) => (params?: any) => (state, dispatch) => {
  state.doc.descendants(node => {
    console.log(node.type, node.attrs)
  })
  return true;
})

Call customized command to get specified nodes, and add logic you want:

import { callCommand } from '@milkdown/utils'

 editorInstance.action((ctx) => {
     return callCommand(getAllNodes.key)(ctx)
 })

@RebZJ