Can't insert image using replaceSelectionWith


#1

Hi all. I’m trying to reproduce code from example. I have plugin that creates button and this button should insert image in the cursor position. Here is click handler

btn.addEventListener('click', e => {
        e.preventDefault();
        this.view.focus();

        const {state, dispatch} = this.view,
            node = schema.nodes.image.createAndFill({
                src: 'http://prose/storage/1/2/130/0dbaf545385f5e4e67b4cf157a719ede.png'
            });

        dispatch(state.tr.replaceSelectionWith(node));
    });

I’m trying to insert image but there is no result.

Here is configuration:

export default class ContentEditor {

create() {
    const el = document.getElementById('editor'),
        content = document.getElementById('content');

    if (this.view !== undefined) {
        this.view.destroy()
    }

    const AppSchema = new Schema({
        nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
        marks: schema.spec.marks
    });

    this.view = new EditorView(el, {
        state: EditorState.create({
            doc: DOMParser.fromSchema(AppSchema).parse(content),
            schema: AppSchema,
            plugins: [
                buildInputRules(AppSchema),
                keymap(buildKeymap(AppSchema)),
                keymap(baseKeymap),
                dropCursor(),
                gapCursor(),
                textFormatter(),
                startHelper(),
                tagCreator(),
            ]
        })
    })
}

}

Can anyone give me any ideas?

Thank you.


#2

Are the schemas that you use in both code snippets (schema and AppSchema) the same object?


#3

Thanks. It was the problem.