Plugin that creates medium style popup toolbar

bbalban · June 2, 2018, 4:54am

Hello,

I merged the example Menu Plugin and the Selection Plugin to create one that works as a toolbar menu that pops up upon selecting text. Sharing it in case anyone finds useful.

github.com

buzz-software/toolbar-plugin/blob/master/toolboxPlugin.js


import {toggleMark, setBlockType, wrapIn} from "prosemirror-commands"
import {schema} from "prosemirror-schema-basic"
import {Plugin} from "prosemirror-state"

export const toolboxPlugin = new Plugin({
		view(editorView) {
			// Create new class to hold editor and internal state such as editorView, HTML Dom elements, commands
			let toolboxView = new ToolboxView(toolboxButtons, editorView)

			// Append DOM portion of toolbox to current editor.
			editorView.dom.parentNode.appendChild(toolboxView.dom);

			// Return toolbox class. Caller will call its update method in every editor update.
			return toolboxView;
		}
})

class ToolboxView {
	constructor(toolboxButtons, editorView) {

This file has been truncated. show original

Thanks, Bahadir

marijn · June 2, 2018, 4:33pm

Nice! Thanks for sharing.

gwit · November 2, 2019, 6:46am

very nice.

i used the css from the tooltip example to show the toolbox on top of the selected area but clicking the buttons does not work because i am guessing it de-selects the text instead of firing the mousedown listener.

is there a way to fix that?