creating extra content to the model

[cherifmagdy]

good morning, i do have a problem in adding multiple elements to mathjax pop-up as it doesn't have enough space and i can't really understand the work flow and i cannot debug as well as me not being good in java script I cloned the package and add it locally to my ckeditor file and imported it i also changed few things in mainformview.js and here's my mainformview.js right now
`import View from '@ckeditor/ckeditor5-ui/src/view';
import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
import SwitchButtonView from '@ckeditor/ckeditor5-ui/src/button/switchbuttonview';
import LabeledInputView from '@ckeditor/ckeditor5-ui/src/labeledinput/labeledinputview';
import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview';
import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
import multiply from './math-svg/multiply.svg';
import root from './math-svg/root.svg';
import submitHandler from '@ckeditor/ckeditor5-ui/src/bindings/submithandler';

import { extractDelimiters, hasDelimiters } from '../utils';
import MathView from './mathview';
import '../../theme/mathform.css';

export default class MainFormView extends View {
constructor( locale, engine, lazyLoad, previewEnabled, previewUid, previewClassName, popupClassName ) {
super( locale );

	const t = locale.t;

	// Create key event & focus trackers
	this._createKeyAndFocusTrackers();

	// Submit button
	this.saveButtonView = this._createButton( t( 'Save' ), checkIcon, 'ck-button-save', null );
	this.saveButtonView.type = 'submit';
	this.rootButtonView = this._createButton( t( 'root' ), root, 'mathjaxbuttons', null );
	this.rootButtonView.type = 'root';
	//this.multiplyButtonView = this._createButton( t( 'multiply' ), multiply, 'mathjaxbuttons', null );
	//this.mutliplyButtonView.type = 'multiply';
	// Math buttons
	this.bigmathButtonView = this._createFlatButton( t( 'Maths' ), 'mathjaxbuttons button button 1', null );
	this.bigmathButtonView.type = 'maths';
	this.gkButtonView = this._createFlatButton( t( 'GK&Fun' ), 'mathjaxbuttons button button 1', null );
	this.gkButtonView.type = 'Gk@Fun';
	this.logicButtonView = this._createFlatButton( t( 'Logic' ), 'mathjaxbuttons button button 1', null );
	this.logicButtonView.type = 'logic';
	this.arrowButtonView = this._createFlatButton( t( 'Arrow' ), 'mathjaxbuttons button button 1', null );
	this.arrowButtonView.type = 'arrow';
	this.symbolButtonView = this._createFlatButton( t( 'Symbol' ), 'mathjaxbuttons button button 1', null );
	this.symbolButtonView.type = 'sybmol';
	this.formatButtonView = this._createFlatButton( t( 'Format' ), 'mathjaxbuttons button button 1', null );
	this.formatButtonView.type = 'format';
	// Equation input
	this.mathInputView = this._createMathInput();

	// Display button
	this.displayButtonView = this._createDisplayButton();

	// Cancel button
	this.cancelButtonView = this._createButton( t( 'Cancel' ), cancelIcon, 'ck-button-cancel', 'cancel' );
	this.previewEnabled = previewEnabled;

	let children = [];
	if ( this.previewEnabled ) {
		// Preview label
		this.previewLabel = new LabelView( locale );
		this.previewLabel.text = t( 'Equation preview' );

		// Math element
		this.mathView = new MathView( engine, lazyLoad, locale, previewUid, previewClassName );
		children = [
			this.mathInputView,
			this.bigmathButtonView,
			this.gkButtonView,
			this.logicButtonView,
			this.arrowButtonView,
			this.symbolButtonView,
			this.formatButtonView,
			this.rootButtonView,
		//	this.multiplyButtonView,
		//	this.displayButtonView,
			this.previewLabel,
			this.mathView
		];
	} else {
		children = [
			this.mathInputView,
			this.bigmathButtonView,
			this.gkButtonView,
			this.logicButtonView,
			this.arrowButtonView,
			this.symbolButtonView,
			this.formatButtonView,
			this.rootButtonView,
		//	this.multiplyButtonView
		//	this.displayButtonView
		];
	}

	// Add UI elements to template
	this.setTemplate( {
		tag: 'form',
		attributes: {
			class: [
				'ck',
				'ck-math-form',
				...popupClassName
			],
			tabindex: '-1',
			spellcheck: 'false'
		},
		children: [
			{
				tag: 'div',
				attributes: {
					class: [
						'ck-math-view'
					]
				},
				children
			},
			this.saveButtonView,
			this.cancelButtonView
		]
	} );
}

render() {
	super.render();

	// Prevent default form submit event & trigger custom 'submit'
	submitHandler( {
		view: this
	} );

	// Register form elements to focusable elements
	const childViews = [
		this.mathInputView,
		this.saveButtonView,
		this.cancelButtonView
	];

	childViews.forEach( v => {
		this._focusables.add( v );
		this.focusTracker.add( v.element );
	} );

	// Listen to keypresses inside form element
	this.keystrokes.listenTo( this.element );
}

focus() {
	this._focusCycler.focusFirst();
}

get equation() {
	return this.mathInputView.inputView.element.value;
}

set equation( equation ) {
	this.mathInputView.inputView.element.value = equation;
	if ( this.previewEnabled ) {
		this.mathView.value = equation;
	}
}

_createKeyAndFocusTrackers() {
	this.focusTracker = new FocusTracker();
	this.keystrokes = new KeystrokeHandler();
	this._focusables = new ViewCollection();

	this._focusCycler = new FocusCycler( {
		focusables: this._focusables,
		focusTracker: this.focusTracker,
		keystrokeHandler: this.keystrokes,
		actions: {
			focusPrevious: 'shift + tab',
			focusNext: 'tab'
		}
	} );
}

_createMathInput() {
	const t = this.locale.t;

	// Create equation input
	const mathInput = new LabeledInputView( this.locale, InputTextView );
	const inputView = mathInput.inputView;
	mathInput.infoText = t( 'Insert equation in TeX format.' );

	const onInput = () => {
		if ( inputView.element != null ) {
			let equationInput = inputView.element.value.trim();

			// If input has delimiters
			if ( hasDelimiters( equationInput ) ) {
				// Get equation without delimiters
				const params = extractDelimiters( equationInput );

				// Remove delimiters from input field
				inputView.element.value = params.equation;

				equationInput = params.equation;

				// update display button and preview
				this.displayButtonView.isOn = params.display;
			}
			if ( this.previewEnabled ) {
				// Update preview view
				this.mathView.value = equationInput;
			}

			this.saveButtonView.isEnabled = !!equationInput;
		}
	};

	inputView.on( 'render', onInput );
	inputView.on( 'input', onInput );

	return mathInput;
}

_createButton( label, icon, className, eventName ) {
	const button = new ButtonView( this.locale );

	button.set( {
		label,
		icon,
		tooltip: true
	} );

	button.extendTemplate( {
		attributes: {
			class: className
		}
	} );

	if ( eventName ) {
		button.delegate( 'execute' ).to( this, eventName );
	}

	return button;
}
_createformulaButton( label, icon, className, eventName ) {
	const button = new ButtonView(this.locale );

	button.set( {
		label,
		icon,
		tooltip: true
	} );

	button.extendTemplate( {
		attributes: {
			class: className
		}
	} );

	if ( eventName ) {
		button.delegate( 'execute' ).to( this, eventName );
	}
	if ( eventName ) {
		button.delegate( 'execute' ).to( this, eventName );
	}
	button.on( 'execute', () => {
	
		//this.mathInputView.equationInput='\\sqrt{ab}';
	} );

	return button;
}
_createFlatButton( label, className, eventName) {
	const button = new ButtonView( this.locale );

	button.set( {
		label,
		withText: true,
		tooltip: true,
		
	} );

	button.extendTemplate( {
		attributes: {
			class: className
		}
	} );

	if ( eventName ) {
		button.delegate( 'execute' ).to( this, eventName );
	}
	button.on( 'execute', () => {
	
		console.log('button pressed!');
	} );
	return button;
}


_createDisplayButton() {
	const t = this.locale.t;

	const switchButton = new SwitchButtonView( this.locale );

	switchButton.set( {
		label: t( 'Display mode' ),
		withText: true
	} );

	switchButton.extendTemplate( {
		attributes: {
			class: 'ck-button-display-toggle'
		}
	} );

	switchButton.on( 'execute', () => {
		// Toggle state
		switchButton.isOn = !switchButton.isOn;

		if ( this.previewEnabled ) {
			// Update preview view
			this.mathView.display = switchButton.isOn;
		}
	} );

	return switchButton;
}

}
`
and here's the existing UI

and here's the UI that I want to achieve

can someone help me to do so here's my questions
how can i exactly put the category buttons (maths, gk&fun, logic, arrows, symbols, format) in a standalone div to work as one pressing anyone should display those icon buttons in which each category button should display different icon buttons group ?
and on pressing any of the icon buttons it should concatenate the added string into the textfield ?
i'm really confused it might be a trevial issue but i'd appreciate anyone's help
thank you so much.