How to create inline menu buttons

In order to make some tasks for the user as intuitive as possible, it might be interesting to add buttons with certain functionality directly to the element they would perform an action on. Those inline buttons, placed directly within the document view, might look like this:

First of all, a display only (see frame only nodes for more details) needs to be created, which displays the menu when clicked. To do this, add the following in the file types_overrides.js:

// in types_overrides.js dummy element erstellen
types.YOURELEMENT.finalizeForFrame = function(editor, element) {
	// replace YOURELEMENT with your element
	var div = editor.contentFrame.iframeDoc.createElement('div');
	div.setAttribute('data-frameonly', 'true');
	div.className = 'xe-custom-menu-1';
	element.insertBefore(div, element.dom.firstChild);
};

Now a click-listener must be registered so that we can intercept the corresponding event. In order to do this, add the following snippet in the init.js file:

editor.contentFrame.iframeDoc.onmousedown = Ext.bind(editor.configObj.configData.onMouseDownReplacement, editor);

Now the corresponding listener must be implemented. To do this, add the following lines to the listeners.js file:

onMouseDownReplacement: function(e) {
	// check editor mode
	if (this.editorMode !== 'edit') {
		// no lookup
		return;
	}

	if (['xe-custom-menu-1'].indexOf(e.target.className) !== -1) {
		// prevent default
		e.preventDefault();
		// create and open menu
		this.configObj.configData.openCustomMenu(this, e);
		return;
	}
}

Now the actual logic that creates and displays the menu can be implemented. Insert the following sample code:

// build and show menu
openCustomMenu: function(editor, e) {
	// get matching node
	var node = editor.document.getNode(e.target.parentNode);
  // check if document node is an Element
	if (!(node instanceof Ext.ux.xeditor.Element)) {
		return;
	}

	// get document node
	var documentNode = node.getDocumentNode();
	// create menu
	var menu= editor.configObj.configData.buildContainerElementMenu(editor, documentNode);
	// get mouse position
	var iframeY = editor.contentFrame.iframeEl.dom.getBoundingClientRect().top;
	// show menu
	menu.showAt(e.clientX, e.clientY + iframeY);
},

buildContainerElementMenu: function(editor, element) {
	var elementType = element.getType();

	// sample item for removing element
	var removeItem = {
		iconCls: 'fa-trash',
		text: global_phrases['global.remove'],
		editorElement: element,
		listeners: {
			scope: editor,
			click: function(item, e, eOpts) {
				// select element before remove in order to have it selected if action is undone
				editor.selectionManager.selectElement(item.editorElement, true);
				// remove element
				if (item.editorElement.removeDeep().selectionCorrected) {
					// update editor state and sync selection
					editor.updateState();
					editor.selectionManager.sync();
					// scroll to selection
					var scrollResult = editor.contentFrame.scrollToSelection('middle', true);
					if (scrollResult.selectionCorrected) {
						// update editor state and sync selection
						editor.updateState();
						editor.selectionManager.sync();
					}
				}
			}
		}
	};

  // store menu items
	var menuItems = [removeItem];

	// create menu
	var menu = Ext.create('Ext.menu.Menu', {
		items: menuItems,
		listeners: {
			show: function(menu, eOpts) {
				// add to active menus
				editor.activeMenus.push(menu);
			},
			hide: function(menu, eOpts) {
				// remove from active menus
				Ext.Array.remove(editor.activeMenus, menu);
			}
		}
	});

	return menu;
},

Please note that the div element created in the first step with the class xe-custom-menu-1 still needs to be adapted using CSS so that it becomes visible (content, desired styling). This is done in the file editor.css.