Where possible, stay away from Pseudo Elements

[imaginarytools]

Wow, Pseudo Elements are miserable to override! I had no idea how hard it would be to alter them, till I wanted to add some extra space between button groups. Anyway, what I did was slightly alter the function that adds the buttons to allow it to be extremely dynamic per button, or button group. Take a look:

buildBtnPane: function () {
	var t = this,
		prefix = t.o.prefix;
	var $btnPane = t.$btnPane = $('<div/>', {
		class: prefix + 'button-pane'
	});
//Add this function:
	function AddStyles(incomingObject, htmlElement) {
		for (var key in incomingObject) {
			try{
				htmlElement[0].style.setProperty( key,incomingObject[key],"important" );
			}catch(e){
			}
		}
   //make it recursive to handle applying fill colors and such to SVGs
		if($(htmlElement)[0].children.length>0){
			for (var i = 0; i <$(htmlElement)[0].children.length; i++) {
				$(htmlElement)[0]= AddStyles(incomingObject, $($(htmlElement)[0].children[i]));
			}
		}
		return htmlElement;
	}
	$.each(t.o.btns, function (i, btnGrp) {
//check if incoming info is array or object, if it is an object, extract info, then replace with the regular data
		if (!$.isArray(btnGrp) && btnGrp.constructor.name!="Object") {
			btnGrp = [btnGrp];
		}
		var containerStyle=null;
		var buttonStyle=null;
		if (btnGrp.constructor.name=="Object") {
			containerStyle=btnGrp.containerStyle;
			buttonStyle=btnGrp.buttonStyle;
			btnGrp = btnGrp.styledGroup;
		}


		var $btnGroup = $('<div/>', {
			class: prefix + 'button-group ' + ((btnGrp.indexOf('fullscreen') >= 0) ? prefix + 'right' : '')
		});
// if we extracted any info, apply it to the container
		if (containerStyle) {
			AddStyles(containerStyle, $btnGroup);
		}
		$.each(btnGrp, function (i, btn) {
			try { // Prevent buildBtn error
				if (t.isSupportedBtn(btn)) { // It's a supported button
					var btnHTML=t.buildBtn(btn);
// if we extracted any info for the button, apply it 
					if (buttonStyle) {
						AddStyles(buttonStyle, btnHTML);
					}
					$btnGroup.append(btnHTML);

				}
			} catch (c) {
			}
		});

		if ($btnGroup.html().trim().length > 0) {
			$btnPane.append($btnGroup);
		}
	});

	t.$box.prepend($btnPane);
}

That is pretty much it. Then to use it, just modify your button options to include whatever you want it to be. Should be able to use just about any CSS property. Notice I use the fill property, which won't have any effect on the div, but it does on the SVG. So it will use what it can, where it can.

 btns: [
		{
			containerStyle:{
				"margin-right":"20px",
				"background-color":"#9c7e81"
			},
			buttonStyle:{
				"font-size":"20px",
				"fill":"#30464d",
				"color":"#30464d"
			},
			styledGroup:['fontsize','lineheight']
		},['strong', 'em'],
		['justifyLeft', 'justifyCenter'],['indent', 'outdent'],
		['insertImage', 'link']
]

In this case, everything works, except for the margin-right. Ok, so it technically is working, but the issue is that while it is resizing the container, the ::after vertical line still gets generated and rendered in the same spot. I tried assigning the element an id and creating an overriding ::after which didn't work. My guess is that it was actually rendering both pseudo elements, but since all I was doing was adjusting the margin and not recreating the vertical line, I couldn't see it.

Anyway, I removed the ::after definitions from the css and added a border-right definition. Same end result, less code, more dynamic.

  .trumbowyg-button-pane .trumbowyg-button-group {
    border-right: 3px solid #e3e9eb;
    display: inline-block; 
  }

[imaginarytools]

Incidently, I also ran into the Pseudo ::after problem on the button pane when doing this:
$(".trumbowyg-button-pane")[0].style.setProperty("min-height","15px" ,"important");
The position of that line is unalterable using javascript.

For context, I am building an online form builder. When editing the label for a checkbox for instance, I may not need a whole toolbar. I may just need italics and bold. If the toolbar is too large, it will stretch the content area, which is possibly just the size of a single word.

While I could use something like the CKEditor balloon editor, or MediumEditor, which create a hovering div to hold the toolbar, I really prefer this. It feels more customizable and extendable. In fact, maybe we can get the toolbar for this to hover, but either way, I like this :)

I was seriously going to start from scratch and build my own after looking at QuillJS and all the others. Trumbowyg is in a league of it's own with the ability to dynamically create, destroy, handle blur events, as well as an actual font size selection! So many others only have Header sizes, frustrating. Thank you again :)