Custom html DOM changes does reflected when saving changes to database

I created new toolbar option called text-align using following code

const rteStudio = studio.RichTextEditor;
rteStudio.add('text-align', {
	icon: "<select id=\"textAlignSelector\" class=\"gjs-field lm select\">" +
	"<option value=''>Select alignment</option>" +
	 "<option value=\"left\">Left</option> " +
	 "<option value=\"center\">Center</option> " +
	 "<option value=\"right\">Right</option> " +
	"</select>",
	attributes: { title: 'Text Align'},
	event: 'change',
	result: (rteStudio, action) => {
		var val = action.btn.firstChild.value;
		var fontTag = "";
		if(action.btn.className && (action.btn.className.indexOf("gjs-rte-active") < 0)) {
			action.btn.className += " ".concat("gjs-rte-active");
		}
		var el = rteStudio.getCurrentEl();
		if (el && val != "" ) {
			debugger;
			if(el.tagName == "SPAN") {
				el = el.parentNode;
			}
			el.style.textAlign = val;
			rteStudio.syncActions();
		}
		//rteStudio.insertHTML(fontTag)
	}
});

In order to make above code work, I added following function into grapes.js file :

{
	key: "getCurrentEl",
	value: function getCurrentEl(value) {
		var lastNode;
		var doc = this.doc;
		var sel = doc.getSelection();

		if (sel && sel.rangeCount) {
			var node = doc.createElement('div');
			var range = sel.getRangeAt(0);
			return range.commonAncestorContainer.parentNode;
		}
		else {
			return null;
		}
	}
}

Due to above code, my changes working in the editor in UI refer:

I am getting html of editor using following code :

studio.runCommand('gjs-get-inlined-html')

Now, the issue is, in the HTML got using above command, I don't see my formatting changes done using above code.

Please help me to fix this issue. Due to this, I can't save changes done using text-align feature into database