suneditor 3.0.0-alpha.9 → 3.0.0-beta.2

package/src/plugins/modal/math.js

@@ -1,102 +1,205 @@
 import EditorInjector from '../../editorInjector';
 import { Modal, Controller } from '../../modules';
-import { domUtils, env, converter } from '../../helper';
+import { dom, env, converter } from '../../helper';
+
+const { _w } = env;
+
+/**
+ * @typedef {Object} MathPluginOptions
+ * @property {boolean} [canResize=true] - Whether the math modal can be resized.
+ * @property {boolean} [autoHeight=false] - Whether to automatically adjust the height of the modal.
+ * @property {Array<object>} [fontSizeList] - A list of font size options for rendering math expressions.
+ * @property {(...args: *) => *} [onPaste] - A callback function to handle paste events in the math input area.
+ * @property {Object} [formSize={}] - An object specifying the dimensions for the math modal.
+ * @property {string} [formSize.width="460px"] - The default width of the math modal.
+ * @property {string} [formSize.height="14em"] - The default height of the math modal.
+ * @property {string} [formSize.maxWidth] - The maximum width of the math modal.
+ * @property {string} [formSize.maxHeight] - The maximum height of the math modal.
+ * @property {string} [formSize.minWidth="400px"] - The minimum width of the math modal.
+ * @property {string} [formSize.minHeight="40px"] - The minimum height of the math modal.
+ */
+
+/**
+ * @class
+ * @description Math plugin.
+ * - This plugin provides support for rendering mathematical expressions using either the KaTeX or MathJax libraries.
+ * - If external library is provided, a warning is issued.
+ */
+class Math_ extends EditorInjector {
+	static key = 'math';
+	static type = 'modal';
+	static className = '';
+	/**
+	 * @this {Math_}
+	 * @param {HTMLElement} node - The node to check.
+	 * @returns {HTMLElement|null} Returns a node if the node is a valid component.
+	 */
+	static component(node) {
+		return dom.utils.hasClass(node, 'se-math|katex') && dom.utils.hasClass(node, 'se-component') ? node : null;
+	}
+
+	/**
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {MathPluginOptions} pluginOptions
+	 */
+	constructor(editor, pluginOptions) {
+		// plugin basic properties
+		super(editor);
+		this.title = this.lang.math;
+		this.icon = 'math';
+
+		// external library
+		this.katex = null;
+		this.mathjax = null;
+
+		// exception
+		if (!(this.katex = this.#CheckKatex(editor.options.get('externalLibs').katex)) && !(this.mathjax = this.#CheckMathJax(editor.options.get('externalLibs').mathjax, editor))) {
+			console.warn('[SUNEDITOR.plugins.math.warn] The math plugin must need either "KaTeX" or "MathJax" library. Please add the katex or mathjax option.');
+		}
+
+		this.pluginOptions = {
+			formSize: {
+				width: '460px',
+				height: '14em',
+				maxWidth: '',
+				maxHeight: '',
+				minWidth: '400px',
+				minHeight: '40px',
+				...pluginOptions.formSize
+			},
+			canResize: pluginOptions.canResize ?? true,
+			autoHeight: !!pluginOptions.autoHeight,
+			fontSizeList: pluginOptions.fontSizeList || [
+				{
+					text: '1',
+					value: '1em'
+				},
+				{
+					text: '1.5',
+					value: '1.5em'
+				},
+				{
+					text: '2',
+					value: '2em'
+				},
+				{
+					text: '2.5',
+					value: '2.5em'
+				}
+			],
+			onPaste: typeof pluginOptions.onPaste === 'function' ? pluginOptions.onPaste : null
+		};
+		if (this.pluginOptions.autoHeight) {
+			this.pluginOptions.formSize.height = this.pluginOptions.formSize.minHeight;
+		}
 
-const Math_ = function (editor, pluginOptions) {
-	// exception
-	if (!(this.katex = CheckKatex(editor.options.get('externalLibs').katex))) {
-		console.warn('[SUNEDITOR.plugins.math.warn] The math plugin must need the "KaTeX" library, Please add the katex option.');
+		// create HTML
+		this.defaultFontSize = null;
+		const modalEl = CreateHTML_modal(this);
+		const controllerEl = CreateHTML_controller(editor);
+
+		// modules
+		this.modal = new Modal(this, modalEl);
+		this.controller = new Controller(this, controllerEl, { position: 'bottom', disabled: true });
+
+		// members
+		/** @type {HTMLTextAreaElement} */
+		this.textArea = modalEl.querySelector('.se-math-exp');
+		/** @type {HTMLPreElement} */
+		this.previewElement = modalEl.querySelector('.se-math-preview');
+		/** @type {HTMLSelectElement} */
+		this.fontSizeElement = modalEl.querySelector('.se-math-size');
+
+		this.isUpdateState = false;
+		this._element = null;
+
+		// init
+		this.previewElement.style.fontSize = this.defaultFontSize;
+		this.eventManager.addEvent(this.textArea, 'input', this.#RenderMathExp.bind(this));
+		this.eventManager.addEvent(
+			this.fontSizeElement,
+			'change',
+			function (e) {
+				this.fontSize = e.target.value;
+			}.bind(this.previewElement.style)
+		);
+		if (this.pluginOptions.onPaste) {
+			this.eventManager.addEvent(this.textArea, 'paste', this.pluginOptions.onPaste.bind(this));
+		}
 	}
 
-	// plugin bisic properties
-	EditorInjector.call(this, editor);
-	this.title = this.lang.math;
-	this.icon = 'math';
-
-	// create HTML
-	const modalEl = CreateHTML_modal(editor, this, pluginOptions.fontSizeList);
-	const controllerEl = CreateHTML_controller(editor);
-
-	// modules
-	this.modal = new Modal(this, modalEl);
-	this.controller = new Controller(this, controllerEl, { position: 'bottom', disabled: true });
-
-	// members
-	this.textArea = modalEl.querySelector('.se-math-exp');
-	this.previewElement = modalEl.querySelector('.se-math-preview');
-	this.fontSizeElement = modalEl.querySelector('.se-math-size');
-	this.isUpdateState = false;
-	this._element = null;
-
-	// init
-	this.previewElement.style.fontSize = this.defaultFontSize;
-	this.eventManager.addEvent(this.textArea, 'input', RenderMathExp.bind(this));
-	this.eventManager.addEvent(
-		this.fontSizeElement,
-		'change',
-		function (e) {
-			this.fontSize = e.target.value;
-		}.bind(this.previewElement.style)
-	);
-};
-
-Math_.key = 'math';
-Math_.type = 'modal';
-Math_.className = '';
-Math_.component = function (node) {
-	return domUtils.hasClass(node, 'katex|se-component') ? node : null;
-};
-Math_.prototype = {
 	/**
-	 * @override component, fileManager
-	 * @description Called when a container is selected.
-	 * @param {Element} element Target element
+	 * @editorMethod Editor.component
+	 * @description Executes the method that is called when a component of a plugin is selected.
+	 * @param {HTMLElement} target Target component element
 	 */
-	select(element) {
-		if (domUtils.hasClass(element, 'katex') && getValue(element)) {
-			this._element = element;
-			this.controller.open(element, null, { isWWTarget: false, initMethod: null, addOffset: null });
+	select(target) {
+		if (dom.utils.hasClass(target, 'se-math|katex') && getValue(target)) {
+			this._element = target;
+			this.controller.open(target, null, { isWWTarget: false, initMethod: null, addOffset: null });
 			return;
 		}
-	},
+	}
 
 	/**
-	 * @override controller
+	 * @editorMethod Modules.Controller
+	 * @description This function is called before the "controller" before it is closed.
 	 */
 	close() {
 		this._element = null;
-	},
+	}
 
 	/**
-	 * @override core
+	 * @editorMethod Editor.core
+	 * @description This method is used to validate and preserve the format of the component within the editor.
+	 * - It ensures that the structure and attributes of the element are maintained and secure.
+	 * - The method checks if the element is already wrapped in a valid container and updates its attributes if necessary.
+	 * - If the element isn't properly contained, a new container is created to retain the format.
+	 * @returns {{query: string, method: (element: HTMLElement) => void}} The format retention object containing the query and method to process the element.
+	 * - query: The selector query to identify the relevant elements (in this case, 'audio').
+	 * - method:The function to execute on the element to validate and preserve its format.
+	 * - The function takes the element as an argument, checks if it is contained correctly, and applies necessary adjustments.
 	 */
 	retainFormat() {
 		return {
-			query: '.katex',
+			query: '.se-math, .katex, .MathJax',
 			method: (element) => {
-				if (!this.katex) return;
+				if (!this.katex && !this.mathjax) return;
 
 				const value = getValue(element);
 				if (!value) return;
 
-				const dom = this._d.createRange().createContextualFragment(this._renderer(converter.entityToHTML(this._escapeBackslashes(value, true))));
-				element.innerHTML = dom.querySelector('.katex').innerHTML;
-				element.setAttribute('contenteditable', false);
-				domUtils.addClass(element, 'se-component|se-inline-component|se-disable-pointer');
+				const domParser = this._d.createRange().createContextualFragment(this._renderer(converter.entityToHTML(this._escapeBackslashes(value, true))));
+				element.innerHTML = domParser.querySelector('.se-math, .katex').innerHTML;
+				element.setAttribute('contenteditable', 'false');
+				dom.utils.addClass(element, 'se-component|se-inline-component|se-disable-pointer|se-math');
+
+				if (this.katex) {
+					dom.utils.addClass(element, 'katex');
+				} else {
+					dom.utils.removeClass(element, 'katex');
+				}
+
+				if (this.mathjax) {
+					this.#renderMathJax(this.mathjax);
+				}
 			}
 		};
-	},
+	}
 
 	/**
-	 * @override type = "modal"
+	 * @editorMethod Modules.Modal
+	 * @description Executes the method that is called when a "Modal" module's is opened.
 	 */
 	open() {
 		this.modal.open();
-	},
+	}
 
 	/**
-	 * @override modal
-	 * @param {boolean} isUpdate open state is update
+	 * @editorMethod Modules.Modal
+	 * @description Executes the method that is called when a plugin's modal is opened.
+	 * @param {boolean} isUpdate "Indicates whether the modal is for editing an existing component (true) or registering a new one (false)."
 	 */
 	on(isUpdate) {
 		this.isUpdateState = isUpdate;
@@ -111,56 +214,83 @@ Math_.prototype = {
 			this.previewElement.innerHTML = this._renderer(exp);
 			this.previewElement.style.fontSize = fontSize;
 		}
-	},
+	}
 
 	/**
-	 * @override modal
-	 * @returns {boolean | undefined}
+	 * @editorMethod Modules.Modal
+	 * @description This function is called when a form within a modal window is "submit".
+	 * @returns {boolean} Success or failure
 	 */
 	modalAction() {
-		if (this.textArea.value.trim().length === 0) return false;
+		if (this.textArea.value.trim().length === 0 || dom.utils.hasClass(this.textArea, 'se-error')) {
+			this.textArea.focus();
+			return false;
+		}
 
 		const mathExp = this.textArea.value;
-		const katexEl = this.previewElement.querySelector('.katex');
 
-		if (!katexEl) return false;
-		katexEl.className = 'se-component se-inline-component __se__katex ' + katexEl.className;
-		katexEl.setAttribute('contenteditable', false);
-		katexEl.setAttribute('data-se-value', converter.htmlToEntity(this._escapeBackslashes(mathExp, false)));
-		katexEl.setAttribute('data-se-type', this.fontSizeElement.value);
-		katexEl.style.fontSize = this.fontSizeElement.value;
+		/** @type {HTMLSpanElement} */
+		const mathEl = this.previewElement.querySelector('.se-math, .katex');
+
+		if (!mathEl) return false;
+		dom.utils.addClass(mathEl, 'se-component|se-inline-component|se-disable-pointer|se-math');
+		mathEl.setAttribute('contenteditable', 'false');
+		mathEl.setAttribute('data-se-value', converter.htmlToEntity(this._escapeBackslashes(mathExp, false)));
+		mathEl.setAttribute('data-se-type', this.fontSizeElement.value);
+		mathEl.style.fontSize = this.fontSizeElement.value;
+
+		if (this.katex) {
+			dom.utils.addClass(mathEl, 'katex');
+			dom.utils.removeClass(mathEl, 'MathJax');
+		} else {
+			dom.utils.removeClass(mathEl, 'katex');
+		}
 
 		if (!this.isUpdateState) {
 			const selectedFormats = this.format.getLines();
 
 			if (selectedFormats.length > 1) {
-				const oFormat = domUtils.createElement(selectedFormats[0].nodeName, null, katexEl);
-				this.component.insert(oFormat, false, false);
+				const oFormat = dom.utils.createElement(selectedFormats[0].nodeName, null, mathEl);
+				this.component.insert(oFormat, { skipCharCount: false, skipSelection: true, skipHistory: false });
 			} else {
-				this.component.insert(katexEl, false, false);
+				this.component.insert(mathEl, { skipCharCount: false, skipSelection: true, skipHistory: false });
 			}
 		} else {
-			const containerEl = domUtils.getParentElement(this.controller.currentTarget, '.katex');
-			containerEl.parentNode.replaceChild(katexEl, containerEl);
-			const compInfo = this.component.get(katexEl);
-			this.component.select(compInfo.target, compInfo.pluginName, false);
+			const containerEl = dom.query.getParentElement(this.controller.currentTarget, '.se-component');
+			containerEl.replaceWith(mathEl);
+			const compInfo = this.component.get(mathEl);
+			this.component.select(compInfo.target, compInfo.pluginName);
+			return true;
+		}
+
+		if (this.mathjax) {
+			this.#renderMathJax(this.mathjax);
+		}
+
+		const r = this.selection.getNearRange(mathEl);
+		if (r) {
+			this.selection.setRange(r.container, r.offset, r.container, r.offset);
+		} else {
+			this.component.select(mathEl, Math_.key);
 		}
 
 		return true;
-	},
+	}
 
 	/**
-	 * @override modal
+	 * @editorMethod Modules.Modal
+	 * @description This function is called before the modal window is opened, but before it is closed.
 	 */
 	init() {
 		this.textArea.value = '';
 		this.previewElement.innerHTML = '';
-	},
+		dom.utils.removeClass(this.textArea, 'se-error');
+	}
 
 	/**
-	 * @override controller
-	 * @param {Element} target Target button element
-	 * @returns
+	 * @editorMethod Modules.Controller
+	 * @description Executes the method that is called when a button is clicked in the "controller".
+	 * @param {HTMLButtonElement} target Target button element
 	 */
 	controllerAction(target) {
 		const command = target.getAttribute('data-command');
@@ -169,103 +299,173 @@ Math_.prototype = {
 				this.modal.open();
 				break;
 			case 'copy':
-				copyTextToClipboard(this._element);
+				this.#copyTextToClipboard(this._element);
 				break;
 			case 'delete':
 				this.destroy(this.controller.currentTarget);
 		}
-	},
+	}
 
-	destroy(element) {
-		domUtils.removeItem(element);
+	/**
+	 * @editorMethod Editor.Component
+	 * @description Method to delete a component of a plugin, called by the "FileManager", "Controller" module.
+	 * @param {Node} target Target element
+	 */
+	destroy(target) {
+		dom.utils.removeItem(target);
 		this.controller.close();
 		this.editor.focus();
 		this.history.push(false);
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Renders the given math expression using KaTeX or MathJax.
+	 * @param {string} exp - The math expression to render.
+	 * @returns {string} - The rendered math expression as HTML.
+	 */
 	_renderer(exp) {
 		let result = '';
 		try {
-			domUtils.removeClass(this.textArea, 'se-error');
-			result = this.katex.src.renderToString(exp, { throwOnError: true, displayMode: true });
+			dom.utils.removeClass(this.textArea, 'se-error');
+			if (this.katex) {
+				result = this.katex.src.renderToString(exp, { throwOnError: true, displayMode: true });
+			} else if (this.mathjax) {
+				result = this.mathjax.convert(exp).outerHTML;
+				if (/<mjx-merror/.test(result)) {
+					dom.utils.addClass(this.textArea, 'se-error');
+					result = `<span class="se-math-error">${result}</span>`;
+				} else {
+					result = `<span class="se-math">${result}</span>`;
+				}
+			}
 		} catch (error) {
-			domUtils.addClass(this.textArea, 'se-error');
-			result = '<span class="se-math-katex-error">Katex syntax error. (Refer <a href="' + env.KATEX_WEBSITE + '" target="_blank">KaTeX</a>)</span>';
-			console.warn('[SUNEDITOR.math.Katex.error] ', error.message);
+			dom.utils.addClass(this.textArea, 'se-error');
+			result = `<span class="se-math-error">Math syntax error. (Refer ${this.katex ? `<a href="${env.KATEX_WEBSITE}" target="_blank">KaTeX</a>` : `<a href="${env.MATHJAX_WEBSITE}" target="_blank">MathJax</a>`})</span>`;
+			console.warn('[SUNEDITOR.math.error] ', error.message);
 		}
 		return result;
-	},
+	}
 
+	/**
+	 * @private
+	 * @description Escapes or unescapes backslashes in a given string.
+	 * @param {string} str - The input string.
+	 * @param {boolean} decode - If true, decodes escaped backslashes; otherwise, encodes them.
+	 * @returns {string} - The processed string.
+	 */
 	_escapeBackslashes(str, decode) {
 		return str.replace(/\\{2}/g, decode ? '\\' : '\\\\');
-	},
-
-	constructor: Math_
-};
-
-async function copyTextToClipboard(element) {
-	if (!navigator.clipboard || !element) return;
-
-	try {
-		const text = getValue(element);
-		await navigator.clipboard.writeText(text);
-		domUtils.addClass(element, 'se-copy');
-		// copy effect
-		env._w.setTimeout(() => {
-			domUtils.removeClass(element, 'se-copy');
-		}, 120);
-	} catch (err) {
-		console.error('[SUNEDITOR.math.copy.fail]', err);
 	}
-}
 
-function RenderMathExp(e) {
-	this.previewElement.innerHTML = this._renderer(e.target.value);
-}
+	/**
+	 * @description Copies the math expression text to clipboard.
+	 * @param {Node} element - The math expression element.
+	 * @returns {Promise<void>}
+	 */
+	async #copyTextToClipboard(element) {
+		if (!navigator.clipboard || !element) return;
 
-function CheckKatex(katex) {
-	if (!katex) return null;
-	if (!katex.src) {
-		console.warn('[SUNEDITOR.math.katex.fail] The katex option is set incorrectly.');
-		return null;
+		try {
+			const text = getValue(element);
+			await this.html.copy(text);
+			dom.utils.addClass(element, 'se-copy');
+			// copy effect
+			_w.setTimeout(() => {
+				dom.utils.removeClass(element, 'se-copy');
+			}, 120);
+		} catch (err) {
+			console.error('[SUNEDITOR.math.copy.fail]', err);
+		}
 	}
 
-	const katexOptions = [
-		{
-			throwOnError: false
-		},
-		katex.options || {}
-	].reduce((init, option) => {
-		for (const key in option) {
-			init[key] = option[key];
+	/**
+	 * @description Handles rendering of math expressions in the preview.
+	 * @param {InputEvent} e - The input event.
+	 */
+	#RenderMathExp(e) {
+		/** @type {HTMLInputElement} */
+		const eventTarget = dom.query.getEventTarget(e);
+		if (this.pluginOptions.autoHeight) {
+			eventTarget.style.height = '5px';
+			eventTarget.style.height = eventTarget.scrollHeight + 5 + 'px';
 		}
-		return init;
-	}, {});
 
-	katex.options = katexOptions;
-	return katex;
-}
+		this.previewElement.innerHTML = this._renderer(eventTarget.value);
+		if (this.mathjax) this.#renderMathJax(this.mathjax);
+	}
 
-function CreateHTML_modal({ lang, icons }, math, fontSizeList) {
-	const fontSize = fontSizeList || [
-		{
-			text: '1',
-			value: '1em'
-		},
-		{
-			text: '1.5',
-			value: '1.5em'
-		},
-		{
-			text: '2',
-			value: '2em'
-		},
-		{
-			text: '2.5',
-			value: '2.5em'
+	/**
+	 * @param {*} mathjax - The MathJax instance.
+	 */
+	#renderMathJax(mathjax) {
+		mathjax.clear();
+		mathjax.updateDocument();
+	}
+
+	/**
+	 * @param {*} katex - The KaTeX instance.
+	 * @returns {*} - The KaTeX instance or null if the instance is invalid.
+	 */
+	#CheckKatex(katex) {
+		if (!katex) return null;
+		if (!katex.src) {
+			console.warn('[SUNEDITOR.math.katex.fail] The katex option is set incorrectly.');
+			return null;
+		}
+
+		const katexOptions = [
+			{
+				throwOnError: false
+			},
+			katex.options || {}
+		].reduce((init, option) => {
+			for (const key in option) {
+				init[key] = option[key];
+			}
+			return init;
+		}, {});
+
+		katex.options = katexOptions;
+		return katex;
+	}
+
+	/**
+	 * @param {*} mathjax - The MathJax instance.
+	 * @param {__se__EditorCore} editor - The root editor instance.
+	 * @returns {*}
+	 */
+	#CheckMathJax(mathjax, editor) {
+		if (!mathjax) return null;
+		if (editor.frameOptions.get('iframe')) {
+			console.warn('[SUNEDITOR.math.mathjax.fail] The MathJax option is not supported in the iframe.');
 		}
-	];
-	let defaultFontSize = fontSize[0].value;
+
+		try {
+			const adaptor = mathjax.browserAdaptor();
+			mathjax.RegisterHTMLHandler(adaptor);
+
+			const tex = new mathjax.TeX();
+			const chtml = new mathjax.CHTML();
+
+			return mathjax.src.document(document, {
+				InputJax: tex,
+				OutputJax: chtml
+			});
+		} catch (error) {
+			console.warn('[SUNEDITOR.math.mathjax.fail] The MathJax option is set incorrectly.', error);
+			return null;
+		}
+	}
+}
+
+function CreateHTML_modal(inst) {
+	const { lang, icons, pluginOptions, katex } = inst;
+	const { formSize, fontSizeList, canResize, autoHeight } = pluginOptions;
+	const { width, height, maxWidth, maxHeight, minWidth, minHeight } = formSize;
+	const resizeType = !canResize ? 'none' : autoHeight ? 'horizontal' : 'auto';
+
+	let defaultFontSize = fontSizeList[0].value;
 	let html = /*html*/ `
     <form>
         <div class="se-modal-header">
@@ -276,15 +476,15 @@ function CreateHTML_modal({ lang, icons }, math, fontSizeList) {
         </div>
         <div class="se-modal-body">
             <div class="se-modal-form">
-                <label>${lang.math_modal_inputLabel} (<a href="${env.KATEX_WEBSITE}" target="_blank">KaTeX</a>)</label>
-                <textarea class="se-input-form se-math-exp" type="text" data-focus></textarea>
+                <label>${lang.math_modal_inputLabel} ${katex ? `(<a href="${env.KATEX_WEBSITE}" target="_blank">KaTeX</a>)` : `(<a href="${env.MATHJAX_WEBSITE}" target="_blank">MathJax</a>)`}</label>
+                <textarea class="se-input-form se-math-exp se-modal-resize-form" type="text" data-focus style="width: ${width}; height: ${height}; min-width: ${minWidth}; min-height: ${minHeight}; resize: ${resizeType};"></textarea>
             </div>
             <div class="se-modal-form">
                 <label>${lang.math_modal_fontSizeLabel}</label>
                 <select class="se-input-select se-math-size">`;
 
-	for (let i = 0, len = fontSize.length, f; i < len; i++) {
-		f = fontSize[i];
+	for (let i = 0, len = fontSizeList.length, f; i < len; i++) {
+		f = fontSizeList[i];
 		if (f.default) defaultFontSize = f.value;
 		html += /*html*/ `<option value="${f.value}"${f.default ? ' selected' : ''}>${f.text}</option>`;
 	}
@@ -303,8 +503,8 @@ function CreateHTML_modal({ lang, icons }, math, fontSizeList) {
         </div>
     </form>`;
 
-	math.defaultFontSize = defaultFontSize;
-	return domUtils.createElement('DIV', { class: 'se-modal-content' }, html);
+	inst.defaultFontSize = defaultFontSize;
+	return dom.utils.createElement('DIV', { class: 'se-modal-content se-modal-responsive', style: `max-width: ${maxWidth}; max-height: ${maxHeight};` }, html);
 }
 
 function CreateHTML_controller({ lang, icons }) {
@@ -333,7 +533,7 @@ function CreateHTML_controller({ lang, icons }) {
         </div>
     </div>`;
 
-	return domUtils.createElement('DIV', { class: 'se-controller se-controller-link' }, html);
+	return dom.utils.createElement('DIV', { class: 'se-controller se-controller-link' }, html);
 }
 
 function getValue(element) {