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

package/src/plugins/dropdown/{formatBlock.js → blockStyle.js}

@@ -1,53 +1,56 @@
-import EditorInjector from '../../editorInjector';
+import { PluginDropdown } from '../../interfaces';
 import { dom } from '../../helper';
 
+/**
+ * @typedef {{tag: string, command: "line"|"br-line"|"block", name?: string, class?: string}} BlockStyleItem
+ */
+
+/**
+ * @typedef {Object} BlockStylePluginOptions
+ * @property {Array<"p"|"div"|"blockquote"|"pre"|"h1"|"h2"|"h3"|"h4"|"h5"|"h6"|string|BlockStyleItem>} [items] - Format list
+ */
+
 /**
  * @class
- * @description FormatBlock Plugin (P, BLOCKQUOTE, PRE, H1, H2...)
+ * @description BlockStyle Plugin (`P`, `BLOCKQUOTE`, `PRE`, `H1`, `H2`...)
  */
-class FormatBlock extends EditorInjector {
-	static key = 'formatBlock';
-	static type = 'dropdown';
+class BlockStyle extends PluginDropdown {
+	static key = 'blockStyle';
 	static className = 'se-btn-select se-btn-tool-format';
 
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<string>} pluginOptions.items - Format list
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {BlockStylePluginOptions} pluginOptions - Plugin options
 	 */
 	constructor(editor, pluginOptions) {
 		super(editor);
 		// plugin basic properties
-		this.title = this.lang.formats;
-		this.inner = '<span class="se-txt">' + this.lang.formats + '</span>' + this.icons.arrow_down;
+		this.title = this.$.lang.formats;
+		this.inner = '<span class="se-txt">' + this.$.lang.formats + '</span>' + this.$.icons.arrow_down;
 
 		// create HTML
-		const menu = CreateHTML(editor, pluginOptions.items);
+		const menu = CreateHTML(this.$, pluginOptions.items);
 
 		// members
 		this.formatList = menu.querySelectorAll('li button');
 		this.currentFormat = '';
 
 		// init
-		this.menu.initDropdownTarget(FormatBlock, menu);
+		this.$.menu.initDropdownTarget(BlockStyle, menu);
 	}
 
 	/**
-	 * @editorMethod Editor.EventManager
-	 * @description Executes the method that is called whenever the cursor position changes.
-	 * @param {?HTMLElement=} element - Node element where the cursor is currently located
-	 * @param {?HTMLElement=} target - The plugin's toolbar button element
-	 * @returns {boolean} - Whether the plugin is active
-	 * - If it returns "undefined", it will no longer be called in this scope.
+	 * @hook Editor.EventManager
+	 * @type {SunEditor.Hook.Event.Active}
 	 */
 	active(element, target) {
-		let formatTitle = this.lang.formats;
+		let formatTitle = this.$.lang.formats;
 		const targetText = target.querySelector('.se-txt');
 
 		if (!element) {
 			dom.utils.changeTxt(targetText, formatTitle);
-		} else if (this.format.isLine(element)) {
+		} else if (this.$.format.isLine(element)) {
 			const formatList = this.formatList;
 			const nodeName = element.nodeName.toLowerCase();
 			const className = (element.className.match(/(\s|^)__se__format__[^\s]+/) || [''])[0].trim();
@@ -71,9 +74,8 @@ class FormatBlock extends EditorInjector {
 	}
 
 	/**
-	 * @editorMethod Modules.Dropdown
-	 * @description Executes the method that is called when a plugin's dropdown menu is opened.
-	 * @param {HTMLElement} target Line element at the current cursor position
+	 * @override
+	 * @type {PluginDropdown['on']}
 	 */
 	on(target) {
 		const formatList = this.formatList;
@@ -95,38 +97,41 @@ class FormatBlock extends EditorInjector {
 	}
 
 	/**
-	 * @editorMethod Editor.core
-	 * @description Executes the main execution method of the plugin.
-	 * - Called when an item in the "dropdown" menu is clicked.
-	 * @param {HTMLElement} target - The plugin's toolbar button element
+	 * @override
+	 * @type {PluginDropdown['action']}
 	 */
 	action(target) {
 		// "line"|"br-line"|"block"
 		const command = target.getAttribute('data-command');
 		const tag = target.firstElementChild;
 		if (command === 'block') {
-			this.format.applyBlock(tag);
+			this.$.format.applyBlock(tag);
 		} else if (command === 'br-line') {
-			this.format.setBrLine(tag);
+			this.$.format.setBrLine(tag);
 		} else {
-			this.format.setLine(tag);
+			this.$.format.setLine(tag);
 		}
 
-		this.menu.dropdownOff();
+		this.$.menu.dropdownOff();
 	}
 
 	/**
-	 * @description Create a header tag, call by "shortcut" class
-	 * - (e.g. shortcuts._h1: ['c+s+49+$~formatBlock.applyHeaderByShortcut', ''])
-	 * @param {__se__PluginShortcutInfo} params - Information of the "shortcut" plugin
+	 * @description Create a header tag, call by `shortcut` class
+	 * - (e.g. shortcuts._h1: ['c+s+49+$~blockStyle.applyHeaderByShortcut', ''])
+	 * @param {SunEditor.HookParams.Shortcut} params - Information of the `shortcut` plugin
 	 */
 	applyHeaderByShortcut({ keyCode }) {
 		const headerNum = keyCode.match(/\d+$/)?.[0];
 		const tag = dom.utils.createElement(`H${headerNum}`);
-		this.format.setLine(tag);
+		this.$.format.setLine(tag);
 	}
 }
 
+/**
+ * @param {SunEditor.Deps} $ - Kernel dependencies
+ * @param {Array<string|BlockStyleItem>} [items] - Block style items
+ * @returns {HTMLElement}
+ */
 function CreateHTML({ lang }, items) {
 	const defaultFormats = ['p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 	const formatList = !items || items.length === 0 ? defaultFormats : items;
@@ -138,7 +143,8 @@ function CreateHTML({ lang }, items) {
 	for (let i = 0, len = formatList.length, format, tagName, command, name, h, attrs, className; i < len; i++) {
 		format = formatList[i];
 
-		if (typeof format === 'string' && defaultFormats.includes(format)) {
+		if (typeof format === 'string') {
+			if (!defaultFormats.includes(format)) continue;
 			tagName = format.toLowerCase();
 			command = tagName === 'blockquote' ? 'block' : tagName === 'pre' ? 'br-line' : 'line';
 			h = /^h/.test(tagName) ? tagName.match(/\d+/)[0] : '';
@@ -167,4 +173,4 @@ function CreateHTML({ lang }, items) {
 	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer se-list-format' }, list);
 }
 
-export default FormatBlock;
+export default BlockStyle;

package/src/plugins/dropdown/font.js

@@ -1,49 +1,50 @@
-import EditorInjector from '../../editorInjector';
+import { PluginDropdown } from '../../interfaces';
 import { dom } from '../../helper';
 
+/**
+ * @typedef {Object} FontPluginOptions
+ * @property {Array<string>} [items] - Font list
+ */
+
 /**
  * @class
  * @description Text font plugin
  */
-class Font extends EditorInjector {
+class Font extends PluginDropdown {
 	static key = 'font';
-	static type = 'dropdown';
 	static className = 'se-btn-select se-btn-tool-font';
 
+	#defaultValue;
+
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<string>} pluginOptions.items - Font list
-	 * @param {number} pluginOptions.splitNum - Number of colors per line
-	 * @param {boolean} pluginOptions.disableHEXInput - Disable HEX input
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {FontPluginOptions} pluginOptions - plugin options
 	 */
 	constructor(editor, pluginOptions) {
 		super(editor);
 		// plugin basic properties
-		this.title = this.lang.font;
-		this.inner = '<span class="se-txt">' + this.lang.font + '</span>' + this.icons.arrow_down;
+		this.title = this.$.lang.font;
+		this.inner = '<span class="se-txt">' + this.$.lang.font + '</span>' + this.$.icons.arrow_down;
 
 		// create HTML
 		const fontList = pluginOptions.items || ['Arial', 'Comic Sans MS', 'Courier New', 'Impact', 'Georgia', 'tahoma', 'Trebuchet MS', 'Verdana'];
-		const menu = CreateHTML(editor, fontList);
+		const menu = CreateHTML(this.$, fontList);
 
 		// members
 		this.currentFont = '';
 		this.fontList = menu.querySelectorAll('ul li button');
 		this.fontArray = fontList;
 
+		this.#defaultValue = /** @type {HTMLSpanElement} */ (menu.querySelector('.se-sub-list span'));
+
 		// init
-		this.menu.initDropdownTarget(Font, menu);
+		this.$.menu.initDropdownTarget(Font, menu);
 	}
 
 	/**
-	 * @editorMethod Editor.EventManager
-	 * @description Executes the method that is called whenever the cursor position changes.
-	 * @param {?HTMLElement=} element - Node element where the cursor is currently located
-	 * @param {?HTMLElement=} target - The plugin's toolbar button element
-	 * @returns {boolean} - Whether the plugin is active
-	 * - If it returns "undefined", it will no longer be called in this scope.
+	 * @hook Editor.EventManager
+	 * @type {SunEditor.Hook.Event.Active}
 	 */
 	active(element, target) {
 		const targetText = target.querySelector('.se-txt');
@@ -51,15 +52,15 @@ class Font extends EditorInjector {
 
 		let fontFamily = '';
 		if (!element) {
-			const font = this.status.hasFocus ? this.editor.frameContext.get('wwComputedStyle').fontFamily : this.lang.font;
+			const font = this.$.store.get('hasFocus') ? this.$.frameContext.get('wwComputedStyle').fontFamily : this.$.lang.font;
 			dom.utils.changeTxt(targetText, font);
-			dom.utils.changeTxt(tooltip, this.status.hasFocus ? this.lang.font + (font ? ' (' + font + ')' : '') : font);
-		} else if (this.format.isLine(element)) {
+			dom.utils.changeTxt(tooltip, this.$.store.get('hasFocus') ? this.$.lang.font + (font ? ' (' + font + ')' : '') : font);
+		} else if (this.$.format.isLine(element)) {
 			return undefined;
 		} else if ((fontFamily = dom.utils.getStyle(element, 'fontFamily'))) {
 			const selectFont = fontFamily.replace(/["']/g, '');
 			dom.utils.changeTxt(targetText, selectFont);
-			dom.utils.changeTxt(tooltip, this.lang.font + ' (' + selectFont + ')');
+			dom.utils.changeTxt(tooltip, this.$.lang.font + ' (' + selectFont + ')');
 			return true;
 		}
 
@@ -67,33 +68,38 @@ class Font extends EditorInjector {
 	}
 
 	/**
-	 * @editorMethod Modules.Dropdown
-	 * @description Executes the method that is called when a plugin's dropdown menu is opened.
-	 * @param {HTMLElement} target Line element at the current cursor position
+	 * @override
+	 * @type {PluginDropdown['on']}
 	 */
 	on(target) {
 		const fontList = this.fontList;
 		const currentFont = target.querySelector('.se-txt').textContent;
 
 		if (currentFont !== this.currentFont) {
+			let found = false;
 			for (let i = 0, len = fontList.length; i < len; i++) {
 				if (currentFont === (fontList[i].getAttribute('data-command') || '').replace(/'|"/g, '')) {
 					dom.utils.addClass(fontList[i], 'active');
+					found = true;
 				} else {
 					dom.utils.removeClass(fontList[i], 'active');
 				}
 			}
 
 			this.currentFont = currentFont;
+
+			if (!found) {
+				this.#defaultValue.textContent = currentFont;
+				this.#defaultValue.style.display = 'block';
+			} else {
+				this.#defaultValue.style.display = 'none';
+			}
 		}
 	}
 
 	/**
-	 * @editorMethod Editor.core
-	 * @description Executes the main execution method of the plugin.
-	 * - Called when an item in the "dropdown" menu is clicked.
-	 * @param {HTMLElement} target - The plugin's toolbar button element
-	 * @returns {Promise<void>}
+	 * @override
+	 * @type {PluginDropdown['action']}
 	 */
 	async action(target) {
 		let value = target.getAttribute('data-command');
@@ -103,25 +109,33 @@ class Font extends EditorInjector {
 			}
 
 			// before event
-			if ((await this.triggerEvent('onFontActionBefore', { value })) === false) return;
+			if ((await this.$.eventManager.triggerEvent('onFontActionBefore', { value })) === false) return;
 
 			const newNode = dom.utils.createElement('SPAN', { style: 'font-family: ' + value + ';' });
-			this.format.applyInlineElement(newNode, { stylesToModify: ['font-family'], nodesToRemove: null, strictRemove: null });
+			this.$.inline.apply(newNode, { stylesToModify: ['font-family'], nodesToRemove: null, strictRemove: null });
 		} else {
-			this.format.applyInlineElement(null, { stylesToModify: ['font-family'], nodesToRemove: ['span'], strictRemove: true });
+			this.$.inline.apply(null, { stylesToModify: ['font-family'], nodesToRemove: ['span'], strictRemove: true });
 		}
 
-		this.menu.dropdownOff();
+		this.$.menu.dropdownOff();
 	}
 }
 
+/**
+ * @param {SunEditor.Deps} $ - Kernel dependencies
+ * @param {string[]} fontList - Font name list
+ * @returns {HTMLElement}
+ */
 function CreateHTML({ lang }, fontList) {
 	let list = /*html*/ `
 	<div class="se-list-inner">
 		<ul class="se-list-basic">
 			<li>
-				<button type="button" class="se-btn se-btn-list default_value" data-command="" title="${lang.default}" aria-label="${lang.default}">(${lang.default})</button>
-			</li>`;
+				<button type="button" class="se-btn se-btn-list default_value" data-command="" title="${lang.default}" aria-label="${lang.default}">
+					${lang.default}
+				</button>
+			</li>
+			<li class="se-btn-list se-sub-list"><span></span></li>`;
 
 	for (let i = 0, len = fontList.length, font, text; i < len; i++) {
 		font = fontList[i];

package/src/plugins/dropdown/fontColor.js

@@ -1,53 +1,52 @@
-import EditorInjector from '../../editorInjector';
-import ColorPicker from '../../modules/ColorPicker';
+import { PluginDropdownFree } from '../../interfaces';
+import { ColorPicker } from '../../modules/contract';
 import { dom } from '../../helper';
 
+/**
+ * @typedef {Object} FontColorPluginOptions
+ * @property {Array<string|{value: string, name: string}>} [items] - Color list
+ * @property {number} [splitNum] - Number of colors per line
+ * @property {boolean} [disableHEXInput] - Disable HEX input
+ */
+
 /**
  * @class
  * @description Font color plugin
  */
-class FontColor extends EditorInjector {
+class FontColor extends PluginDropdownFree {
 	static key = 'fontColor';
-	static type = 'dropdown-free';
 	static className = '';
 
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<string|{value: string, name: string}>} pluginOptions.items - Color list
-	 * @param {number} pluginOptions.splitNum - Number of colors per line
-	 * @param {boolean} pluginOptions.disableHEXInput - Disable HEX input
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {FontColorPluginOptions} pluginOptions - Plugin options
 	 */
 	constructor(editor, pluginOptions) {
 		super(editor);
 		// plugin basic properties
-		this.title = this.lang.fontColor;
+		this.title = this.$.lang.fontColor;
 		this.icon = 'font_color';
 
 		// create HTML
 		const menu = CreateHTML();
 
 		// members
-		this.colorPicker = new ColorPicker(this, 'color', {
+		this.colorPicker = new ColorPicker(this, this.$, 'color', {
+			form: menu,
 			colorList: pluginOptions.items,
 			splitNum: pluginOptions.splitNum,
 			disableHEXInput: pluginOptions.disableHEXInput,
-			hueSliderOptions: { controllerOptions: { parents: [menu], isOutsideForm: true } }
+			hueSliderOptions: { controllerOptions: { isOutsideForm: true } },
 		});
 
-		// itit
-		menu.appendChild(this.colorPicker.target);
-		this.menu.initDropdownTarget(FontColor, menu);
+		// init
+		this.$.menu.initDropdownTarget(FontColor, menu);
 	}
 
 	/**
-	 * @editorMethod Editor.EventManager
-	 * @description Executes the method that is called whenever the cursor position changes.
-	 * @param {?HTMLElement=} element - Node element where the cursor is currently located
-	 * @param {?HTMLElement=} target - The plugin's toolbar button element
-	 * @returns {boolean} - Whether the plugin is active
-	 * - If it returns "undefined", it will no longer be called in this scope.
+	 * @hook Editor.EventManager
+	 * @type {SunEditor.Hook.Event.Active}
 	 */
 	active(element, target) {
 		/** @type {HTMLElement} */
@@ -57,7 +56,7 @@ class FontColor extends EditorInjector {
 		let color = '';
 		if (!element) {
 			colorHelper.style.color = color;
-		} else if (this.format.isLine(element)) {
+		} else if (this.$.format.isLine(element)) {
 			return undefined;
 		} else if ((color = dom.utils.getStyle(element, 'color'))) {
 			colorHelper.style.color = color;
@@ -68,40 +67,40 @@ class FontColor extends EditorInjector {
 	}
 
 	/**
-	 * @editorMethod Modules.Dropdown
-	 * @description Executes the method that is called when a plugin's dropdown menu is opened.
-	 * @param {HTMLElement} target Line element at the current cursor position
+	 * @override
+	 * @type {PluginDropdownFree['on']}
 	 */
 	on(target) {
-		this.colorPicker.init(this.selection.getNode(), target, (current) => this.format.isLine(current));
+		this.colorPicker.init(this.$.selection.getNode(), target, (current) => this.$.format.isLine(current));
 	}
 
 	/**
-	 * @editorMethod Modules.Dropdown
-	 * @Override Executes the method that is called when a plugin's dropdown menu is closed.
+	 * @override
+	 * @type {PluginDropdownFree['off']}
 	 */
 	off() {
 		this.colorPicker.hueSliderClose();
 	}
 
 	/**
-	 * @editorMethod Modules.ColorPicker
-	 * @description Executes the method called when a button of "ColorPicker" module is clicked.
-	 * - This plugin is by applying the "ColorPicker" module globally to the "dropdown" menu, the default "action" method is not called.
-	 * @param {string} color - Color code (hex)
+	 * @hook Modules.ColorPicker
+	 * @type {SunEditor.Hook.ColorPicker.Action}
 	 */
 	colorPickerAction(color) {
 		if (color) {
 			const newNode = dom.utils.createElement('SPAN', { style: 'color: ' + color + ';' });
-			this.format.applyInlineElement(newNode, { stylesToModify: ['color'], nodesToRemove: null, strictRemove: null });
+			this.$.inline.apply(newNode, { stylesToModify: ['color'], nodesToRemove: null, strictRemove: null });
 		} else {
-			this.format.applyInlineElement(null, { stylesToModify: ['color'], nodesToRemove: ['span'], strictRemove: true });
+			this.$.inline.apply(null, { stylesToModify: ['color'], nodesToRemove: ['span'], strictRemove: true });
 		}
 
-		this.menu.dropdownOff();
+		this.$.menu.dropdownOff();
 	}
 }
 
+/**
+ * @returns {HTMLElement}
+ */
 function CreateHTML() {
 	return dom.utils.createElement('DIV', { class: 'se-dropdown se-list-layer' }, null);
 }

package/src/plugins/dropdown/hr.js

@@ -1,16 +1,20 @@
-import EditorInjector from '../../editorInjector';
+import { PluginDropdown } from '../../interfaces';
 import { dom } from '../../helper';
 
+/**
+ * @typedef {Object} HRPluginOptions
+ * @property {Array<{name: string, class: string, style?: string}>} [items] - HR list
+ */
+
 /**
  * @class
  * @description HR Plugin
  */
-class HR extends EditorInjector {
+class HR extends PluginDropdown {
 	static key = 'hr';
-	static type = 'dropdown';
 	static className = '';
+
 	/**
-	 * @this {HR}
 	 * @param {HTMLElement} node - The node to check.
 	 * @returns {HTMLElement|null} Returns a node if the node is a valid component.
 	 */
@@ -20,111 +24,112 @@ class HR extends EditorInjector {
 
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<{name: string, class: string}>} pluginOptions.items - HR list
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {HRPluginOptions} pluginOptions - Plugin options
 	 */
 	constructor(editor, pluginOptions) {
 		// plugin bisic properties
 		super(editor);
-		this.title = this.lang.horizontalLine;
+		this.title = this.$.lang.horizontalLine;
 		this.icon = 'horizontal_line';
 
 		// create HTML
-		const HRMenus = CreateHTML(editor, pluginOptions.items);
+		const HRMenus = CreateHTML(this.$, pluginOptions.items);
 
 		// members
 		this.list = HRMenus.querySelectorAll('button');
 
 		// init
-		this.menu.initDropdownTarget(HR, HRMenus);
+		this.$.menu.initDropdownTarget(HR, HRMenus);
 	}
 
 	/**
-	 * @editorMethod Editor.Component
-	 * @description Executes the method that is called when a component of a plugin is selected.
-	 * @param {HTMLElement} target Target component element
+	 * @hook Editor.Component
+	 * @type {SunEditor.Hook.Component.Select}
 	 */
-	select(target) {
+	componentSelect(target) {
 		dom.utils.addClass(target, 'on');
 	}
 
 	/**
-	 * @editorMethod Editor.Component
-	 * @description Called when a container is deselected.
-	 * @param {HTMLElement} element Target element
+	 * @hook Editor.Component
+	 * @type {SunEditor.Hook.Component.Deselect}
 	 */
-	deselect(element) {
+	componentDeselect(element) {
 		dom.utils.removeClass(element, 'on');
 	}
 
 	/**
-	 * @editorMethod Editor.Component
-	 * @description Method to delete a component of a plugin, called by the "FileManager", "Controller" module.
-	 * @param {HTMLElement} target Target element
+	 * @hook Editor.Component
+	 * @type {SunEditor.Hook.Component.Destroy}
 	 */
-	destroy(target) {
+	componentDestroy(target) {
 		if (!target) return;
 
 		const focusEl = target.previousElementSibling || target.nextElementSibling;
 		dom.utils.removeItem(target);
 
 		// focus
-		this.editor.focusEdge(focusEl);
-		this.history.push(false);
+		this.$.focusManager.focusEdge(focusEl);
+		this.$.history.push(false);
 	}
 
 	/**
-	 * @editorMethod Editor.core
-	 * @description Executes the main execution method of the plugin.
-	 * - Called when an item in the "dropdown" menu is clicked.
-	 * @param {HTMLElement} target - The plugin's toolbar button element
+	 * @hook Editor.Core
+	 * @type {SunEditor.Hook.Core.Shortcut}
 	 */
-	action(target) {
-		const hr = this.submit(target.firstElementChild.className);
-		const line = this.format.addLine(hr);
-		this.selection.setRange(line, 1, line, 1);
-		this.menu.dropdownOff();
+	shortcut({ line, range }) {
+		const newLine = this.$.nodeTransform.split(range.endContainer, range.endOffset, 0);
+		this.submit('__se__solid');
+		dom.utils.removeItem(line);
+		this.$.selection.setRange(newLine, 0, newLine, 0);
 	}
 
 	/**
-	 * @editorMethod Editor.core
-	 * @description Executes methods called by shortcut keys.
-	 * @param {__se__PluginShortcutInfo} params - Information of the "shortcut" plugin
+	 * @override
+	 * @type {PluginDropdown['action']}
 	 */
-	shortcut({ line, range }) {
-		const newLine = this.nodeTransform.split(range.endContainer, range.endOffset, 0);
-		this.submit('__se__solid');
-		dom.utils.removeItem(line);
-		this.selection.setRange(newLine, 0, newLine, 0);
+	action(target) {
+		const hr = this.submit(target.firstElementChild.className);
+		const line = this.$.format.addLine(hr);
+		this.$.selection.setRange(line, 1, line, 1);
+		this.$.menu.dropdownOff();
 	}
 
 	/**
-	 * @description Add a hr element
+	 * @description Add a `hr` element
 	 * @param {string} className HR class name
 	 */
 	submit(className) {
 		const hr = dom.utils.createElement('hr', { class: className });
-		this.editor.focus();
-		this.component.insert(hr, { skipCharCount: false, skipSelection: true, skipHistory: false });
+		this.$.focusManager.focus();
+		this.$.component.insert(hr, { insertBehavior: 'line' });
 		return hr;
 	}
 }
 
+/**
+ * @param {SunEditor.Deps} $ - Kernel dependencies
+ * @param {Array<{name: string, class: string, style?: string}>} [HRItems] - HR style items
+ * @returns {HTMLElement}
+ */
 function CreateHTML({ lang }, HRItems) {
 	const items = HRItems || [
 		{
 			name: lang.hr_solid,
-			class: '__se__solid'
+			class: '__se__solid',
+			style: null,
 		},
 		{
 			name: lang.hr_dashed,
-			class: '__se__dashed'
+			class: '__se__dashed',
+			style: null,
 		},
 		{
 			name: lang.hr_dotted,
-			class: '__se__dotted'
-		}
+			class: '__se__dotted',
+			style: null,
+		},
 	];
 
 	let list = '';
@@ -140,12 +145,12 @@ function CreateHTML({ lang }, HRItems) {
 	return dom.utils.createElement(
 		'DIV',
 		{
-			class: 'se-dropdown se-list-layer se-list-line'
+			class: 'se-dropdown se-list-layer se-list-line',
 		},
 		/*html*/ `
 		<div class="se-list-inner">
 			<ul class="se-list-basic">${list}</ul>
-		</div>`
+		</div>`,
 	);
 }