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

package/src/core/class/viewer.js

@@ -3,9 +3,19 @@
  */
 
 import CoreInjector from '../../editorInjector/_core';
-import { domUtils, env, converter, numbers } from '../../helper';
+import { dom, env, converter, numbers } from '../../helper';
 
-const Viewer = function (editor) {
+/**
+ * @typedef {Omit<Viewer & Partial<__se__EditorInjector>, 'viewer'>} ViewerThis
+ */
+
+/**
+ * @constructor
+ * @this {ViewerThis}
+ * @description Viewer(codeView, fullScreen, showBlocks) class
+ * @param {__se__EditorCore} editor - The root editor instance
+ */
+function Viewer(editor) {
 	CoreInjector.call(this, editor);
 
 	// members
@@ -22,12 +32,13 @@ const Viewer = function (editor) {
 	this.fullScreenBalloon = false;
 	this.fullScreenInline = false;
 	this.toolbarParent = null;
-};
+}
 
 Viewer.prototype = {
 	/**
+	 * @this {ViewerThis}
 	 * @description Changes to code view or wysiwyg view
-	 * @param {boolean|undefined} value true/false, If undefined toggle the codeView mode.
+	 * @param {boolean=} value true/false, If undefined toggle the codeView mode.
 	 */
 	codeView(value) {
 		const fc = this.editor.frameContext;
@@ -35,12 +46,13 @@ Viewer.prototype = {
 		if (value === fc.get('isCodeView')) return;
 
 		fc.set('isCodeView', value);
-		this.editor._offCurrentController();
-		this.editor._offCurrentModal();
+		this.ui._offCurrentController();
+		this.ui._offCurrentModal();
 
 		const codeWrapper = fc.get('codeWrapper');
 		const codeFrame = fc.get('code');
 		const wysiwygFrame = fc.get('wysiwygFrame');
+		const wrapper = fc.get('wrapper');
 
 		if (value) {
 			this._setEditorDataToCodeView();
@@ -76,9 +88,10 @@ Viewer.prototype = {
 
 			this.status._range = null;
 			codeFrame.focus();
-			domUtils.addClass(this.editor.commandTargets.get('codeView'), 'active');
+			dom.utils.addClass(this.editor.commandTargets.get('codeView'), 'active');
+			dom.utils.addClass(wrapper, 'se-code-view-status');
 		} else {
-			if (!domUtils.isNonEditable(wysiwygFrame)) this._setCodeDataToEditor();
+			if (!dom.check.isNonEditable(wysiwygFrame)) this._setCodeDataToEditor();
 			wysiwygFrame.scrollTop = 0;
 			codeWrapper.style.setProperty('display', 'none', 'important');
 			wysiwygFrame.style.display = 'block';
@@ -96,24 +109,36 @@ Viewer.prototype = {
 			}
 
 			this.editor._nativeFocus();
-			domUtils.removeClass(this.editor.commandTargets.get('codeView'), 'active');
+			dom.utils.removeClass(this.editor.commandTargets.get('codeView'), 'active');
 
-			if (!domUtils.isNonEditable(wysiwygFrame)) {
+			if (!dom.check.isNonEditable(wysiwygFrame)) {
 				this.history.push(false);
 				this.history.resetButtons(fc.get('key'), null);
 			}
+			dom.utils.removeClass(wrapper, 'se-code-view-status');
 		}
 
-		this.editor._checkPlaceholder();
-		domUtils.setDisabled(this.editor._codeViewDisabledButtons, value);
+		this.editor._checkPlaceholder(fc);
+		dom.utils.setDisabled(this.editor._codeViewDisabledButtons, value);
+
+		// document type
+		if (fc.has('documentType-use-header')) {
+			if (value) {
+				fc.get('documentTypeInner').style.display = 'none';
+			} else {
+				fc.get('documentTypeInner').style.display = '';
+				fc.get('documentType').reHeader();
+			}
+		}
 
 		// user event
 		this.triggerEvent('onToggleCodeView', { frameContext: fc, is: fc.get('isCodeView') });
 	},
 
 	/**
+	 * @this {ViewerThis}
 	 * @description Changes to full screen or default screen
-	 * @param {boolean|undefined} value true/false, If undefined toggle the codeView mode.
+	 * @param {boolean=} value true/false, If undefined toggle the codeView mode.
 	 */
 	fullScreen(value) {
 		const fc = this.editor.frameContext;
@@ -131,7 +156,7 @@ Viewer.prototype = {
 		const isCodeView = this.editor.frameContext.get('isCodeView');
 		const arrow = this.context.get('toolbar._arrow');
 
-		this.editor._offCurrentController();
+		this.ui._offCurrentController();
 		const wasToolbarHidden = toolbar.style.display === 'none' || (this.editor.isInline && !this.editor.toolbar._inlineToolbarAttr.isShow);
 
 		if (value) {
@@ -168,7 +193,7 @@ Viewer.prototype = {
 			if (fc.get('_stickyDummy').style.display !== 'none' && fc.get('_stickyDummy').style.display !== '') {
 				this.fullScreenSticky = true;
 				fc.get('_stickyDummy').style.display = 'none';
-				domUtils.removeClass(toolbar, 'se-toolbar-sticky');
+				dom.utils.removeClass(toolbar, 'se-toolbar-sticky');
 			}
 
 			this.bodyOverflow = this._d.body.style.overflow;
@@ -203,8 +228,8 @@ Viewer.prototype = {
 
 			const reductionIcon = this.icons.reduction;
 			this.editor.applyCommandTargets('fullScreen', (e) => {
-				domUtils.changeElement(e.firstElementChild, reductionIcon);
-				domUtils.addClass(e, 'active');
+				dom.utils.changeElement(e.firstElementChild, reductionIcon);
+				dom.utils.addClass(e, 'active');
 			});
 		} else {
 			// frame
@@ -224,7 +249,7 @@ Viewer.prototype = {
 			if (arrow) arrow.style.cssText = this.arrowOriginCssText;
 			this._d.body.style.overflow = this.bodyOverflow;
 
-			if (this.editor.frameOptions.get('height') === 'auto' && !this.options.get('hasCodeMirror')) this._codeViewAutoHeight(fc);
+			if (this.editor.frameOptions.get('height') === 'auto' && !this.options.get('hasCodeMirror')) this._codeViewAutoHeight(fc.get('code'), fc.get('codeNumbers'), true);
 
 			if (this.toolbarParent) {
 				this.toolbarParent.appendChild(toolbar);
@@ -232,13 +257,13 @@ Viewer.prototype = {
 			}
 
 			if (this.options.get('toolbar_sticky') > -1) {
-				domUtils.removeClass(toolbar, 'se-toolbar-sticky');
+				dom.utils.removeClass(toolbar, 'se-toolbar-sticky');
 			}
 
 			if (this.fullScreenSticky && !this.options.get('toolbar_container')) {
 				this.fullScreenSticky = false;
 				fc.get('_stickyDummy').style.display = 'block';
-				domUtils.addClass(toolbar, 'se-toolbar-sticky');
+				dom.utils.addClass(toolbar, 'se-toolbar-sticky');
 			}
 
 			this.editor.isInline = this.toolbar._isInline = this.fullScreenInline;
@@ -253,8 +278,8 @@ Viewer.prototype = {
 
 			const expansionIcon = this.icons.expansion;
 			this.editor.applyCommandTargets('fullScreen', (e) => {
-				domUtils.changeElement(e.firstElementChild, expansionIcon);
-				domUtils.removeClass(e, 'active');
+				dom.utils.changeElement(e.firstElementChild, expansionIcon);
+				dom.utils.removeClass(e, 'active');
 			});
 		}
 
@@ -265,8 +290,9 @@ Viewer.prototype = {
 	},
 
 	/**
+	 * @this {ViewerThis}
 	 * @description Add or remove the class name of "body" so that the code block is visible
-	 * @param {boolean|undefined} value true/false, If undefined toggle the codeView mode.
+	 * @param {boolean=} value true/false, If undefined toggle the codeView mode.
 	 */
 	showBlocks(value) {
 		const fc = this.editor.frameContext;
@@ -274,68 +300,94 @@ Viewer.prototype = {
 		fc.set('isShowBlocks', !!value);
 
 		if (value) {
-			domUtils.addClass(fc.get('wysiwyg'), 'se-show-block');
-			domUtils.addClass(this.editor.commandTargets.get('showBlocks'), 'active');
+			dom.utils.addClass(fc.get('wysiwyg'), 'se-show-block');
+			dom.utils.addClass(this.editor.commandTargets.get('showBlocks'), 'active');
 		} else {
-			domUtils.removeClass(fc.get('wysiwyg'), 'se-show-block');
-			domUtils.removeClass(this.editor.commandTargets.get('showBlocks'), 'active');
+			dom.utils.removeClass(fc.get('wysiwyg'), 'se-show-block');
+			dom.utils.removeClass(this.editor.commandTargets.get('showBlocks'), 'active');
 		}
 
 		this.editor._resourcesStateChange(fc);
 	},
 
+	/**
+	 * @private
+	 * @this {ViewerThis}
+	 * @description Set the active class to the button of the toolbar
+	 */
 	_setButtonsActive() {
 		const fc = this.editor.frameContext;
 
 		// codeView
 		if (fc.get('isCodeView')) {
-			domUtils.addClass(this.editor.commandTargets.get('codeView'), 'active');
+			dom.utils.addClass(this.editor.commandTargets.get('codeView'), 'active');
 		} else {
-			domUtils.removeClass(this.editor.commandTargets.get('codeView'), 'active');
+			dom.utils.removeClass(this.editor.commandTargets.get('codeView'), 'active');
 		}
 
 		// fullScreen
 		if (fc.get('isFullScreen')) {
 			const reductionIcon = this.icons.reduction;
 			this.editor.applyCommandTargets('fullScreen', (e) => {
-				domUtils.changeElement(e.firstElementChild, reductionIcon);
-				domUtils.addClass(e, 'active');
+				dom.utils.changeElement(e.firstElementChild, reductionIcon);
+				dom.utils.addClass(e, 'active');
 			});
 		} else {
 			const expansionIcon = this.icons.expansion;
 			this.editor.applyCommandTargets('fullScreen', (e) => {
-				domUtils.changeElement(e.firstElementChild, expansionIcon);
-				domUtils.removeClass(e, 'active');
+				dom.utils.changeElement(e.firstElementChild, expansionIcon);
+				dom.utils.removeClass(e, 'active');
 			});
 		}
 
 		// showBlocks
 		if (fc.get('isShowBlocks')) {
-			domUtils.addClass(this.editor.commandTargets.get('showBlocks'), 'active');
+			dom.utils.addClass(this.editor.commandTargets.get('showBlocks'), 'active');
 		} else {
-			domUtils.removeClass(this.editor.commandTargets.get('showBlocks'), 'active');
+			dom.utils.removeClass(this.editor.commandTargets.get('showBlocks'), 'active');
 		}
 	},
 
 	/**
+	 * @this {ViewerThis}
 	 * @description Prints the current content of the editor.
 	 */
 	print() {
-		const iframe = domUtils.createElement('IFRAME', { style: 'display: none;' });
+		/** @type {HTMLIFrameElement} */
+		const iframe = dom.utils.createElement('IFRAME', { style: 'display: none;' });
 		this._d.body.appendChild(iframe);
 
-		const contentHTML = this.options.get('printTemplate') ? this.options.get('printTemplate').replace(/\{\{\s*contents\s*\}\}/i, this.html.get(true)) : this.html.get(true);
-		const printDocument = domUtils.getIframeDocument(iframe);
+		const innerPadding = this._w.getComputedStyle(this.editor.frameContext.get('wysiwyg')).padding;
+		const contentHTML = this.options.get('printTemplate') ? this.options.get('printTemplate').replace(/\{\{\s*contents\s*\}\}/i, this.html.get()) : this.html.get();
+		const printDocument = dom.query.getIframeDocument(iframe);
 		const wDoc = this.editor.frameContext.get('_wd');
+		const rtlClass = this.options.get('_rtl') ? ' se-rtl' : '';
+		const pageCSS = /*html*/ `
+			<style>
+				@page {
+					size: A4;
+					margin: ${innerPadding};
+				}
+			</style>`;
 
 		if (this.editor.frameOptions.get('iframe')) {
 			const arrts = this.options.get('printClass')
-				? 'class="' + this.options.get('printClass') + '"'
+				? 'class="' + this.options.get('printClass') + rtlClass + '"'
 				: this.editor.frameOptions.get('iframe_fullPage')
-				? domUtils.getAttributesToString(wDoc.body, ['contenteditable'])
-				: 'class="' + this.options.get('_editableClass') + '"';
+				? dom.utils.getAttributesToString(wDoc.body, ['contenteditable'])
+				: 'class="' + this.options.get('_editableClass') + rtlClass + '"';
 
-			printDocument.write('' + '<!DOCTYPE html><html>' + '<head>' + wDoc.head.innerHTML + '</head>' + '<body ' + arrts + '>' + contentHTML + '</body>' + '</html>');
+			printDocument.write(/*html*/ `
+				<!DOCTYPE html>
+				<html>
+					<head>
+						${wDoc.head.innerHTML}
+						${pageCSS}
+					</head>
+					<body ${arrts} style="padding: 0; padding-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0;">
+						${contentHTML}
+					</body>
+				</html>`);
 		} else {
 			const links = this._d.head.getElementsByTagName('link');
 			const styles = this._d.head.getElementsByTagName('style');
@@ -347,23 +399,25 @@ Viewer.prototype = {
 				linkHTML += styles[i].outerHTML;
 			}
 
-			printDocument.write(/*html*/ `<!DOCTYPE html>
+			printDocument.write(/*html*/ `
+				<!DOCTYPE html>
 				<html>
 					<head>
 						${linkHTML}
+						${pageCSS}
 					</head>
-					<body class="${this.options.get('printClass') ? this.options.get('printClass') : this.options.get('_editableClass')}">
-						${contentHTML} 
+					<body class="${(this.options.get('printClass') || this.options.get('_editableClass')) + rtlClass}" style="padding: 0; padding-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0;">
+						${contentHTML}
 					</body>
 				</html>`);
 		}
 
-		this.editor.showLoading();
+		this.ui.showLoading();
 		this._w.setTimeout(() => {
 			try {
 				iframe.focus();
 				// Edge, Chromium
-				if (env.isEdge || env.isChromium || this._d.documentMode || this._w.StyleMedia) {
+				if (env.isEdge || env.isChromium || 'StyleMedia' in env._w) {
 					try {
 						iframe.contentWindow.document.execCommand('print', false, null);
 					} catch (e) {
@@ -377,39 +431,40 @@ Viewer.prototype = {
 			} catch (error) {
 				throw Error(`[SUNEDITOR.print.fail] error: ${error.message}`);
 			} finally {
-				this.editor.hideLoading();
-				domUtils.removeItem(iframe);
+				this.ui.hideLoading();
+				dom.utils.removeItem(iframe);
 			}
 		}, 1000);
 	},
 
 	/**
+	 * @this {ViewerThis}
 	 * @description Open the preview window.
 	 */
 	preview() {
 		this.menu.dropdownOff();
 		this.menu.containerOff();
-		this.editor._offCurrentController();
-		this.editor._offCurrentModal();
+		this.ui._offCurrentController();
+		this.ui._offCurrentModal();
 
-		const contentHTML = this.options.get('previewTemplate') ? this.options.get('previewTemplate').replace(/\{\{\s*contents\s*\}\}/i, this.html.get(true)) : this.html.get(true);
+		const contentHTML = this.options.get('previewTemplate') ? this.options.get('previewTemplate').replace(/\{\{\s*contents\s*\}\}/i, this.html.get({ withFrame: true })) : this.html.get({ withFrame: true });
 		const windowObject = this._w.open('', '_blank');
-		windowObject.mimeType = 'text/html';
 		const wDoc = this.editor.frameContext.get('_wd');
+		const rtlClass = this.options.get('_rtl') ? ' se-rtl' : '';
 
 		if (this.editor.frameOptions.get('iframe')) {
 			const arrts = this.options.get('printClass')
-				? 'class="' + this.options.get('printClass') + '"'
+				? 'class="' + this.options.get('printClass') + rtlClass + '"'
 				: this.editor.frameOptions.get('iframe_fullPage')
-				? domUtils.getAttributesToString(wDoc.body, ['contenteditable'])
-				: 'class="' + this.options.get('_editableClass') + '"';
+				? dom.utils.getAttributesToString(wDoc.body, ['contenteditable'])
+				: 'class="' + this.options.get('_editableClass') + rtlClass + '"';
 
 			windowObject.document.write(/*html*/ `<!DOCTYPE html>
 				<html>
 					<head>
 						${wDoc.head.innerHTML}
 						<style>
-							body {overflow:auto !important; margin: 10px auto !important; height:auto !important; outline:1px dashed #ccc;}
+							body {overflow:auto !important; height:auto !important;}
 						</style>
 					</head>
 					<body ${arrts}>
@@ -435,13 +490,19 @@ Viewer.prototype = {
 						<title>${this.lang.preview}</title>
 						${linkHTML}
 					</head>
-					<body class="${this.options.get('printClass') ? this.options.get('printClass') : this.options.get('_editableClass')}" style="margin:10px auto !important; height:auto !important; outline:1px dashed #ccc;">
+					<body class="${(this.options.get('printClass') ? this.options.get('printClass') : this.options.get('_editableClass')) + rtlClass}" style="height:auto">
 						${contentHTML}
 					</body>
 				</html>`);
 		}
 	},
 
+	/**
+	 * @private
+	 * @this {ViewerThis}
+	 * @description Resets the full-screen height of the editor.
+	 * - Updates the editor's height dynamically when in full-screen mode.
+	 */
 	_resetFullScreenHeight() {
 		if (this.editor.frameContext.get('isFullScreen')) {
 			this.fullScreenInnerHeight +=
@@ -452,12 +513,12 @@ Viewer.prototype = {
 	},
 
 	/**
+	 * @private
+	 * @this {ViewerThis}
 	 * @description Run CodeMirror Editor
 	 * @param {"set"|"get"|"readonly"|"refresh"} key method key
-	 * @param {any} value params
+	 * @param {*} value CodeMirror params
 	 * @param {string|undefined} rootKey Root key
-	 * @returns
-	 * @private
 	 */
 	_codeMirrorEditor(key, value, rootKey) {
 		const fo = rootKey ? this.frameRoots.get(rootKey).get('options') : this.editor.frameOptions;
@@ -495,9 +556,10 @@ Viewer.prototype = {
 	},
 
 	/**
+	 * @private
+	 * @this {ViewerThis}
 	 * @description Set method in the code view area
 	 * @param {string} value HTML string
-	 * @private
 	 */
 	_setCodeView(value) {
 		if (this.options.get('hasCodeMirror')) {
@@ -508,8 +570,9 @@ Viewer.prototype = {
 	},
 
 	/**
-	 * @description Get method in the code view area
 	 * @private
+	 * @this {ViewerThis}
+	 * @description Get method in the code view area
 	 */
 	_getCodeView() {
 		if (this.options.get('hasCodeMirror')) {
@@ -520,8 +583,9 @@ Viewer.prototype = {
 	},
 
 	/**
-	 * @description Convert the data of the code view and put it in the WYSIWYG area.
 	 * @private
+	 * @this {ViewerThis}
+	 * @description Convert the data of the code view and put it in the WYSIWYG area.
 	 */
 	_setCodeDataToEditor() {
 		const code_html = this._getCodeView();
@@ -547,34 +611,38 @@ Viewer.prototype = {
 			}
 
 			wDoc.head.innerHTML = headers;
-			wDoc.body.innerHTML = this.html.clean(parseDocument.body.innerHTML, true, null, null);
+			wDoc.body.innerHTML = this.html.clean(parseDocument.body.innerHTML, { forceFormat: true, whitelist: null, blacklist: null, _freeCodeViewMode: this.options.get('freeCodeViewMode') });
 
 			const attrs = parseDocument.body.attributes;
 			for (let i = 0, len = attrs.length; i < len; i++) {
 				if (attrs[i].name === 'contenteditable') continue;
 				wDoc.body.setAttribute(attrs[i].name, attrs[i].value);
 			}
-			if (!domUtils.hasClass(wDoc.body, 'sun-editor-editable')) {
+			if (!dom.utils.hasClass(wDoc.body, 'sun-editor-editable')) {
 				const editableClasses = this.options.get('_editableClass').split(' ');
 				for (let i = 0; i < editableClasses.length; i++) {
-					domUtils.addClass(wDoc.body, this.options.get('_editableClass')[i]);
+					dom.utils.addClass(wDoc.body, this.options.get('_editableClass')[i]);
 				}
 			}
 		} else {
-			this.editor.frameContext.get('wysiwyg').innerHTML = code_html.length > 0 ? this.html.clean(code_html, true, null, null) : '<' + this.options.get('defaultLine') + '><br></' + this.options.get('defaultLine') + '>';
+			this.editor.frameContext.get('wysiwyg').innerHTML =
+				code_html.length > 0
+					? this.html.clean(code_html, { forceFormat: true, whitelist: null, blacklist: null, _freeCodeViewMode: this.options.get('freeCodeViewMode') })
+					: '<' + this.options.get('defaultLine') + '><br></' + this.options.get('defaultLine') + '>';
 		}
 	},
 
 	/**
-	 * @description Convert the data of the WYSIWYG area and put it in the code view area.
 	 * @private
+	 * @this {ViewerThis}
+	 * @description Convert the data of the WYSIWYG area and put it in the code view area.
 	 */
 	_setEditorDataToCodeView() {
 		const codeContent = this.html._convertToCode(this.editor.frameContext.get('wysiwyg'), false);
 		let codeValue = '';
 
 		if (this.editor.frameOptions.get('iframe_fullPage')) {
-			const attrs = domUtils.getAttributesToString(this.editor.frameContext.get('_wd').body, null);
+			const attrs = dom.utils.getAttributesToString(this.editor.frameContext.get('_wd').body, null);
 			codeValue = '<!DOCTYPE html>\n<html>\n' + this.editor.frameContext.get('_wd').head.outerHTML.replace(/>(?!\n)/g, '>\n') + '<body ' + attrs + '>\n' + codeContent + '</body>\n</html>';
 		} else {
 			codeValue = codeContent;
@@ -583,11 +651,28 @@ Viewer.prototype = {
 		this._setCodeView(codeValue);
 	},
 
+	/**
+	 * @private
+	 * @this {ViewerThis}
+	 * @description Adjusts the height of the code view area.
+	 * - Ensures the code block auto-resizes based on its content.
+	 * @param {HTMLElement} code - Code area
+	 * @param {HTMLTextAreaElement} codeNumbers - Code numbers area
+	 * @param {boolean} isAuto - Auto height option
+	 */
 	_codeViewAutoHeight(code, codeNumbers, isAuto) {
 		if (isAuto) code.style.height = code.scrollHeight + 'px';
 		this._updateLineNumbers(codeNumbers, code);
 	},
 
+	/**
+	 * @private
+	 * @this {ViewerThis}
+	 * @description Updates the line numbers for the code editor.
+	 * - Dynamically adjusts line numbers as content grows.
+	 * @param {HTMLTextAreaElement} lineNumbers - Code numbers area
+	 * @param {HTMLElement} code - Code area
+	 */
 	_updateLineNumbers(lineNumbers, code) {
 		if (!lineNumbers) return;
 
@@ -604,6 +689,13 @@ Viewer.prototype = {
 		}
 	},
 
+	/**
+	 * @private
+	 * @this {HTMLElement} Code numbers area
+	 * @description Synchronizes scrolling of line numbers with the code editor.
+	 * - Keeps the line numbers aligned with the text.
+	 * @param {HTMLTextAreaElement} codeNumbers - Code numbers textarea
+	 */
 	_scrollLineNumbers(codeNumbers) {
 		codeNumbers.scrollTop = this.scrollTop;
 		codeNumbers.scrollLeft = this.scrollLeft;
@@ -612,6 +704,11 @@ Viewer.prototype = {
 	constructor: Viewer
 };
 
+/**
+ * @private
+ * @description Create line numbers for the code view area
+ * @param {__se__FrameContext} fc - Frame context
+ */
 function CreateLineNumbers(fc) {
 	const codeNumbers = fc.get('codeNumbers');
 	if (!codeNumbers) return;
@@ -630,17 +727,24 @@ function CreateLineNumbers(fc) {
 	codeNumbers.style.margin = margin || '';
 }
 
+/**
+ * @private
+ * @description Get the line height of the textarea
+ * @param {HTMLTextAreaElement} textarea Textarea element
+ * @returns {number}
+ */
 function GetLineHeight(textarea) {
-	let lineHeight = env._w.getComputedStyle(textarea).lineHeight;
+	const lineHeight = env._w.getComputedStyle(textarea).lineHeight;
+	let lineHeightMatch;
 
 	if (!numbers.is(lineHeight)) {
 		const fontSize = env._w.getComputedStyle(textarea).fontSize;
-		lineHeight = numbers.get(fontSize) * 1.2;
+		lineHeightMatch = numbers.get(fontSize) * 1.2;
 	} else {
-		lineHeight = numbers.get(lineHeight);
+		lineHeightMatch = numbers.get(lineHeight);
 	}
 
-	return lineHeight;
+	return lineHeightMatch;
 }
 
 export default Viewer;