Replace some symbol/text on typing/paste to custom NodeView

1

Hi! I need to replace pasted or typed emoji to some custom NodeView and don’t understand how to do it -_- What i tryed: create NodeView class EmojiView { this.dom = 'some HTML' } then declare it in nodeViews

new EditorView(htmlEl, {
	state: EditorState.create(proseMirrorEditorConfig),
	nodeViews: {
		emoji: new EmojiView ()
	},
});

In schema declare node with type ‘emoji’

new Schema({
	nodes: { emoji: { ... } }
}

declare InputRule with emojiRegex

new InputRule(emojiRegex(), function emojiHandler(state, match, start, end) {
	return state.tr.replaceWith(start, enf, proseMirrorSchema.nodes.emoji.createChecked());
}),

In this case, when i type emoji symbol in editor, emoji disapearse, but new node not rendered (just empty editor)

If i move node to mark in scheme (new Schema({ marks: { emoji: {} } ) and change return of InputRule to return state.tr.addMark(start, end, proseMirrorSchema.marks.emoji.create());, then my EmojiView is rendred, but inside it inserted content (emoji symbol) and i need to prevent this

Maybe someone cann help with this?

2

The NodeView is a bit orgthogonal to your issue. If the emoji node exsist in a doc and you have a NodeView that displays it then you’re good.

First check if the emoji node exists in your state.doc. If it doesn’t then start digging in emojiHandler.

If it does then check EmojiView, take a look at what it renders / logs etc.

Node is okay, you don’t want a Mark for this.

3

Thank you for answer!

I allready find a mistake.

I just not mark my node as inline, when i did this - all starts to work like a charm

So my final node looks like this

emoji: {
	attrs: { emoji: {} },
	inline: true,
	group: 'inline',
	draggable: false,
	atom: false,
	selectable: false,

	toDOM: (node): DOMOutputSpec => {
		const dom = document.createElement('span');
		dom.textContent = node.attrs['emoji'];
		return {
			dom,
		};
	},
	parseDOM: [
		{
			tag: 'emoji-ui',
			getAttrs: (dom): false | Attrs | null => {
				const emoji = dom.getAttribute('data-emoji');
				return emoji ? { emoji } : false;
			},
		},
	],
	leafText: (node): string => node.attrs['emoji'],
},
1 Like