suneditor/src/plugins/dropdown/lineHeight.js

Vanilla JavaScript based WYSIWYG web editor

import { PluginDropdown } from '../../interfaces';
import { dom } from '../../helper';

/**
 * @typedef {Object} LineHeightPluginOptions
 * @property {Array<{text: string, value: string}>} [items] - Line height list
 * ```js
 * [{ text: 'Single', value: '1' }, { text: '1.5', value: '1.5' }, { text: 'Double', value: '2' }]
 * ```
 */

/**
 * @class
 * @description Line height Plugin
 */
class LineHeight extends PluginDropdown {
	static key = 'lineHeight';
	static className = '';

	#defaultValue;

	/**
	 * @constructor
	 * @param {SunEditor.Kernel} kernel - The Kernel instance
	 * @param {LineHeightPluginOptions} pluginOptions - Plugin options
	 */
	constructor(kernel, pluginOptions) {
		// plugin bisic properties
		super(kernel);
		this.title = this.$.lang.lineHeight;
		this.icon = 'line_height';

		// create menu from items
		const prependHTML = `<li><button type="button" class="se-btn se-btn-list default_value" data-command="" title="${this.$.lang.default}" aria-label="${this.$.lang.default}">${this.$.lang.default}</button></li><li class="se-btn-list se-sub-list"><span></span></li>`;
		const menu = this.$.menu.initDropdownTarget(LineHeight, CreateItems(pluginOptions.items), { prependHTML });

		// members
		this.sizeList = menu.querySelectorAll('li button');
		this.currentSize = null;

		this.#defaultValue = /** @type {HTMLSpanElement} */ (menu.querySelector('.se-sub-list span'));
	}

	/**
	 * @hook Editor.EventManager
	 * @type {SunEditor.Hook.Event.Active}
	 */
	active(element, target) {
		if (this.$.format.isLine(element) && element.style.lineHeight.length > 0) {
			dom.utils.addClass(target, 'active');
			return true;
		}

		dom.utils.removeClass(target, 'active');
		return false;
	}

	/**
	 * @override
	 * @type {PluginDropdown['on']}
	 */
	on() {
		const format = this.$.format.getLine(this.$.selection.getNode());
		const currentSize = !format ? '' : format.style.lineHeight + '';

		if (currentSize !== this.currentSize) {
			let found = false;
			const sizeList = this.sizeList;
			for (let i = 0, len = sizeList.length; i < len; i++) {
				if (currentSize === sizeList[i].getAttribute('data-command')) {
					dom.utils.addClass(sizeList[i], 'active');
					found = true;
				} else {
					dom.utils.removeClass(sizeList[i], 'active');
				}
			}

			this.currentSize = currentSize;

			if (!found) {
				this.#defaultValue.textContent = currentSize;
				this.#defaultValue.style.display = 'block';
			} else {
				this.#defaultValue.style.display = 'none';
			}
		}
	}

	/**
	 * @override
	 * @type {PluginDropdown['action']}
	 */
	action(target) {
		const value = target.getAttribute('data-command') || '';
		const formats = this.$.format.getLines();

		for (let i = 0, len = formats.length; i < len; i++) {
			formats[i].style.lineHeight = value;
		}

		this.$.menu.dropdownOff();

		this.$.store.set('_lastSelectionNode', null);
		this.$.history.push(false);
	}
}

/**
 * @param {Array<{text: string, value: string}>} [items] - Line height items
 * @returns {Array<import('../../core/logic/panel/menu').DropdownItem>}
 */
function CreateItems(items) {
	const sizeList = items || [
		{ text: '1', value: '1em' },
		{ text: '1.2', value: '1.2em' },
		{ text: '1.7', value: '1.7em' },
		{ text: '2', value: '2em' },
	];

	return sizeList.map((size) => ({
		command: size.value,
		title: size.text,
		innerHTML: size.text,
	}));
}

export default LineHeight;