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

package/src/modules/{ModalAnchorEditor.js → ui/ModalAnchorEditor.js}

@@ -1,34 +1,22 @@
-import EditorInjector from '../editorInjector';
 import SelectMenu from './SelectMenu';
-import FileManager from './FileManager';
-import { dom, numbers, env, unicode } from '../helper';
-const { NO_EVENT } = env;
-
-/**
- * @typedef {{default?: string, check_new_window?: string, check_bookmark?: string}} RELAttr
- */
+import FileManager from '../manager/FileManager';
+import { dom, numbers, env, unicode } from '../../helper';
+const { _w, NO_EVENT } = env;
 
 /**
  * @typedef {Object} ModalAnchorEditorParams
  * @property {boolean} [title=false] - Modal title display.
  * @property {boolean} [textToDisplay=''] - Create Text to display input.
  * @property {boolean} [openNewWindow=false] - Default checked value of the "Open in new window" checkbox.
- * @property {boolean} [noAutoPrefix=false] - If true, disables the automatic prefixing of the host URL to the value of the link.
- * @property {Array<string>} [relList=[]] - The "rel" attribute list of anchor tag.
- * @property {RELAttr} [defaultRel={}] - Default "rel" attributes of anchor tag.
- * @property {string=} uploadUrl - File upload URL.
- * @property {Object<string, string>=} uploadHeaders - File upload headers.
- * @property {number=} uploadSizeLimit - File upload size limit.
- * @property {number=} uploadSingleSizeLimit - File upload single size limit.
- * @property {string=} acceptedFormats - File upload accepted formats.
- * @property {boolean=} enableFileUpload - If true, enables file upload.
- * @example "REL" structure
-	{
-		default: 'nofollow', // Default rel
-		check_new_window: 'noreferrer noopener', // When "open new window" is checked
-		check_bookmark: 'bookmark' // When "bookmark" is checked
-	}
-	If true, disables the automatic prefixing of the host URL to the value of the link.
+ * @property {boolean} [noAutoPrefix=false] - If `true`, disables the automatic prefixing of the host URL to the value of the link.
+ * @property {Array<string>} [relList=[]] - The `rel` attribute list of anchor tag.
+ * @property {{default?: string, check_new_window?: string, check_bookmark?: string}} [defaultRel={}] - Default `rel` attributes of anchor tag.
+ * @property {string} [uploadUrl] - File upload URL.
+ * @property {Object<string, string>} [uploadHeaders] - File upload headers.
+ * @property {number} [uploadSizeLimit] - File upload size limit.
+ * @property {number} [uploadSingleSizeLimit] - File upload single size limit.
+ * @property {string} [acceptedFormats] - File upload accepted formats.
+ * @property {boolean} [enableFileUpload] - If `true`, enables file upload.
  */
 
 /**
@@ -36,16 +24,22 @@ const { NO_EVENT } = env;
  * @description Modal form Anchor tag editor
  * - Use it by inserting it into Modal in a plugin that uses Modal.
  */
-class ModalAnchorEditor extends EditorInjector {
+class ModalAnchorEditor {
+	#$;
+
+	#modalForm;
+	#isRel;
+	#selectMenu_rel;
+	#selectMenu_bookmark;
+
 	/**
 	 * @constructor
-	 * @param {*} inst The instance object that called the constructor.
-	 * @param {Node} modalForm The modal form element
+	 * @param {SunEditor.Deps} $ Kernel dependencies
+	 * @param {HTMLElement} modalForm Modal <form>
 	 * @param {ModalAnchorEditorParams} params ModalAnchorEditor options
 	 */
-	constructor(inst, modalForm, params) {
-		// plugin bisic properties
-		super(inst.editor);
+	constructor($, modalForm, params) {
+		this.#$ = $;
 
 		// params
 		this.openNewWindow = !!params.openNewWindow;
@@ -59,23 +53,20 @@ class ModalAnchorEditor extends EditorInjector {
 			this.uploadSizeLimit = numbers.get(params.uploadSizeLimit, 0) || null;
 			this.uploadSingleSizeLimit = numbers.get(params.uploadSingleSizeLimit, 0) || null;
 			this.input = dom.utils.createElement('input', { type: 'file', accept: params.acceptedFormats || '*' });
-			this.eventManager.addEvent(this.input, 'change', this.#OnChangeFile.bind(this));
+			this.#$.eventManager.addEvent(this.input, 'change', this.#OnChangeFile.bind(this));
 			// file manager
-			this.fileManager = new FileManager(this, {
+			this.fileManager = new FileManager(this, $, {
 				query: 'a[download]:not([data-se-file-download])',
-				loadHandler: this.events.onFileLoad,
-				eventHandler: this.events.onFileAction
+				loadEventName: 'onFileLoad',
+				actionEventName: 'onFileAction',
 			});
 		}
 
 		// create HTML
-		const forms = CreatetModalForm(inst.editor, params, this.relList);
+		const forms = CreateModalForm($, params, this.relList);
 
 		// members
-		this.kink = inst.constructor.key || inst.constructor.name;
-		this.inst = inst;
-		this.modalForm = /** @type {HTMLElement} */ (modalForm);
-		this.host = (this._w.location.origin + this._w.location.pathname).replace(/\/$/, '');
+		this.host = (_w.location.origin + _w.location.pathname).replace(/\/$/, '');
 
 		/** @type {HTMLInputElement} */
 		this.urlInput = forms.querySelector('.se-input-url');
@@ -99,10 +90,10 @@ class ModalAnchorEditor extends EditorInjector {
 		this.currentRel = [];
 		this.currentTarget = null;
 		this.linkValue = '';
-		this._change = false;
-		this._isRel = this.relList.length > 0;
+
+		this.#isRel = this.relList.length > 0;
 		// members - rel
-		if (this._isRel) {
+		if (this.#isRel) {
 			/** @type {HTMLButtonElement} */
 			this.relButton = forms.querySelector('.se-anchor-rel-btn');
 			/** @type {HTMLElement} */
@@ -121,30 +112,31 @@ class ModalAnchorEditor extends EditorInjector {
 							class: 'se-btn-list' + (defaultRel.includes(rel) ? ' se-checked' : ''),
 							'data-command': rel,
 							title: rel,
-							'aria-label': rel
+							'aria-label': rel,
 						},
-						rel + '<span class="se-svg">' + this.icons.checked + '</span>'
-					)
+						rel + '<span class="se-svg">' + this.#$.icons.checked + '</span>',
+					),
 				);
 			}
-			this.selectMenu_rel = new SelectMenu(this, { checkList: true, position: 'right-middle', dir: 'ltr' });
-			this.selectMenu_rel.on(this.relButton, this.#SetRelItem.bind(this));
-			this.selectMenu_rel.create(list);
-			this.eventManager.addEvent(this.relButton, 'click', this.#OnClick_relbutton.bind(this));
+			this.#selectMenu_rel = new SelectMenu($, { checkList: true, position: 'right-middle', dir: 'ltr' });
+			this.#selectMenu_rel.on(this.relButton, this.#SetRelItem.bind(this));
+			this.#selectMenu_rel.create(list);
+			this.#$.eventManager.addEvent(this.relButton, 'click', this.#OnClick_relbutton.bind(this));
 		}
 
 		// init
-		this.modalForm.querySelector('.se-anchor-editor').appendChild(forms);
-		this.selectMenu_bookmark = new SelectMenu(this, { checkList: false, position: 'bottom-left', dir: 'ltr' });
-		this.selectMenu_bookmark.on(this.urlInput, this.#SetHeaderBookmark.bind(this));
-		this.eventManager.addEvent(this.newWindowCheck, 'change', this.#OnChange_newWindowCheck.bind(this));
-		this.eventManager.addEvent(this.downloadCheck, 'change', this.#OnChange_downloadCheck.bind(this));
-		this.eventManager.addEvent(this.displayInput, 'input', this.#OnChange_displayInput.bind(this));
-		this.eventManager.addEvent(this.urlInput, 'input', this.#OnChange_urlInput.bind(this));
-		this.eventManager.addEvent(this.urlInput, 'focus', this.#OnFocus_urlInput.bind(this));
-		this.eventManager.addEvent(this.bookmarkButton, 'click', this.#OnClick_bookmarkButton.bind(this));
-		this.eventManager.addEvent(forms.querySelector('._se_upload_button'), 'click', () => this.input.click());
+		this.#modalForm = /** @type {HTMLElement} */ (modalForm);
+		this.#modalForm.querySelector('.se-anchor-editor').appendChild(forms);
+		this.#selectMenu_bookmark = new SelectMenu($, { checkList: false, position: 'bottom-left', dir: 'ltr' });
+		this.#selectMenu_bookmark.on(this.urlInput, this.#SetHeaderBookmark.bind(this));
+		this.#$.eventManager.addEvent(this.newWindowCheck, 'change', this.#OnChange_newWindowCheck.bind(this));
+		this.#$.eventManager.addEvent(this.downloadCheck, 'change', this.#OnChange_downloadCheck.bind(this));
+		this.#$.eventManager.addEvent(this.urlInput, 'input', this.#OnChange_urlInput.bind(this));
+		this.#$.eventManager.addEvent(this.urlInput, 'focus', this.#OnFocus_urlInput.bind(this));
+		this.#$.eventManager.addEvent(this.bookmarkButton, 'click', this.#OnClick_bookmarkButton.bind(this));
+		this.#$.eventManager.addEvent(forms.querySelector('._se_upload_button'), 'click', () => this.input.click());
 	}
+
 	/**
 	 * @description Initialize.
 	 * - Sets the current anchor element to be edited.
@@ -161,20 +153,20 @@ class ModalAnchorEditor extends EditorInjector {
 	on(isUpdate) {
 		if (!isUpdate) {
 			this.init();
-			this.displayInput.value = this.selection.get().toString().trim();
+			this.displayInput.value = this.#$.selection.get().toString().trim();
 			this.newWindowCheck.checked = this.openNewWindow;
 			this.titleInput.value = '';
 		} else if (this.currentTarget) {
 			const href = this.currentTarget.href;
-			this.linkValue = this.preview.textContent = this.urlInput.value = this._selfPathBookmark(href) ? href.substring(href.lastIndexOf('#')) : href;
+			this.linkValue = this.preview.textContent = this.urlInput.value = this.#selfPathBookmark(href) ? href.substring(href.lastIndexOf('#')) : href;
 			this.displayInput.value = this.currentTarget.textContent;
 			this.titleInput.value = this.currentTarget.title;
 			this.newWindowCheck.checked = /_blank/i.test(this.currentTarget.target) ? true : false;
 			this.downloadCheck.checked = !!this.currentTarget.download;
 		}
 
-		this._setRel(isUpdate && this.currentTarget ? this.currentTarget.rel : this.defaultRel.default || '');
-		this._setLinkPreview(this.linkValue);
+		this.#setRel(isUpdate && this.currentTarget ? this.currentTarget.rel : this.defaultRel.default || '');
+		this.#setLinkPreview(this.linkValue);
 	}
 
 	/**
@@ -189,7 +181,7 @@ class ModalAnchorEditor extends EditorInjector {
 		const displayText = this.displayInput.value.length === 0 ? url : this.displayInput.value;
 
 		const oA = /** @type {HTMLAnchorElement} */ (this.currentTarget || dom.utils.createElement('A'));
-		this._updateAnchor(oA, url, displayText, this.titleInput.value, notText);
+		this.#updateAnchor(oA, url, displayText, this.titleInput.value, notText);
 		this.linkValue = this.preview.textContent = this.urlInput.value = this.displayInput.value = '';
 
 		return oA;
@@ -204,12 +196,10 @@ class ModalAnchorEditor extends EditorInjector {
 		this.displayInput.value = '';
 		this.newWindowCheck.checked = false;
 		this.downloadCheck.checked = false;
-		this._change = false;
-		this._setRel(this.defaultRel.default || '');
+		this.#setRel(this.defaultRel.default || '');
 	}
 
 	/**
-	 * @private
 	 * @description Updates the anchor element with new attributes.
 	 * @param {HTMLAnchorElement} anchor - The anchor (`<a>`) element to update.
 	 * @param {string} url - The URL for the anchor's `href` attribute.
@@ -217,9 +207,9 @@ class ModalAnchorEditor extends EditorInjector {
 	 * @param {string} title - The tooltip text (title attribute).
 	 * @param {boolean} notText - If `true`, the anchor will not contain text content.
 	 */
-	_updateAnchor(anchor, url, displayText, title, notText) {
+	#updateAnchor(anchor, url, displayText, title, notText) {
 		// download
-		if (!this._selfPathBookmark(url) && this.downloadCheck.checked) {
+		if (!this.#selfPathBookmark(url) && this.downloadCheck.checked) {
 			anchor.setAttribute('download', displayText || url);
 		} else {
 			anchor.removeAttribute('download');
@@ -247,26 +237,24 @@ class ModalAnchorEditor extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Checks if the given path is an internal bookmark.
 	 * @param {string} path - The URL or anchor link.
 	 * @returns {boolean} - `true` if the path is an internal bookmark, otherwise `false`.
 	 */
-	_selfPathBookmark(path) {
-		const href = this._w.location.href.replace(/\/$/, '');
+	#selfPathBookmark(path) {
+		const href = _w.location.href.replace(/\/$/, '');
 		return path.indexOf('#') === 0 || (path.indexOf(href) === 0 && path.indexOf('#') === (!href.includes('#') ? href.length : href.substring(0, href.indexOf('#')).length));
 	}
 
 	/**
-	 * @private
 	 * @description Updates the `rel` attribute list in the modal and preview.
 	 * @param {string} relAttr - The `rel` attribute string to set.
 	 */
-	_setRel(relAttr) {
-		if (!this._isRel) return;
+	#setRel(relAttr) {
+		if (!this.#isRel) return;
 
 		const rels = (this.currentRel = !relAttr ? [] : relAttr.split(' '));
-		const checkedRel = this.selectMenu_rel.form.querySelectorAll('button');
+		const checkedRel = this.#selectMenu_rel.form.querySelectorAll('button');
 		for (let i = 0, len = checkedRel.length, cmd; i < len; i++) {
 			cmd = checkedRel[i].getAttribute('data-command');
 			if (rels.includes(cmd)) {
@@ -285,12 +273,11 @@ class ModalAnchorEditor extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Generates a list of bookmark headers within the editor.
 	 * @param {string} urlValue - The current URL input value.
 	 */
-	_createBookmarkList(urlValue) {
-		const headers = dom.query.getListChildren(this.editor.frameContext.get('wysiwyg'), (current) => /h[1-6]/i.test(current.nodeName) || (dom.check.isAnchor(current) && !!current.id));
+	#createBookmarkList(urlValue) {
+		const headers = dom.query.getListChildren(this.#$.frameContext.get('wysiwyg'), (current) => /h[1-6]/i.test(current.nodeName) || (dom.check.isAnchor(current) && !!current.id), null);
 		if (headers.length === 0) return;
 
 		const valueRegExp = new RegExp(`^${urlValue.replace(/^#/, '')}`, 'i');
@@ -300,25 +287,24 @@ class ModalAnchorEditor extends EditorInjector {
 			v = headers[i];
 			if (!valueRegExp.test(v.textContent)) continue;
 			list.push(v);
-			menus.push(dom.check.isAnchor(v) ? `<div><span class="se-text-prefix-icon">${this.icons.bookmark_anchor}</span>${v.id}</div>` : `<div style="${v.style.cssText}">${v.textContent}</div>`);
+			menus.push(dom.check.isAnchor(v) ? `<div><span class="se-text-prefix-icon">${this.#$.icons.bookmark_anchor}</span>${v.id}</div>` : `<div style="${v.style.cssText}">${v.textContent}</div>`);
 		}
 
 		if (list.length === 0) {
-			this.selectMenu_bookmark.close();
+			this.#selectMenu_bookmark.close();
 		} else {
-			this.selectMenu_bookmark.create(list, menus);
-			this.selectMenu_bookmark.open(this.options.get('_rtl') ? 'bottom-right' : '');
+			this.#selectMenu_bookmark.create(list, menus);
+			this.#selectMenu_bookmark.open(this.#$.options.get('_rtl') ? 'bottom-right' : '');
 		}
 	}
 
 	/**
-	 * @private
 	 * @description Updates the preview of the anchor link.
 	 * @param {string} value - The current URL value.
 	 */
-	_setLinkPreview(value) {
+	#setLinkPreview(value) {
 		const preview = this.preview;
-		const protocol = this.options.get('defaultUrlProtocol');
+		const protocol = this.#$.options.get('defaultUrlProtocol');
 		const noPrefix = this.noAutoPrefix;
 		const reservedProtocol = /^(mailto:|tel:|sms:|https*:\/\/|#)/.test(value) || value.indexOf(protocol) === 0;
 		const sameProtocol = !protocol ? false : RegExp('^' + unicode.escapeStringRegexp(value.substring(0, protocol.length))).test(protocol);
@@ -328,7 +314,7 @@ class ModalAnchorEditor extends EditorInjector {
 			preview.textContent =
 				!value ? '' : noPrefix ? value : protocol && !reservedProtocol && !sameProtocol ? protocol + value : reservedProtocol ? value : /^www\./.test(value) ? 'http://' + value : this.host + (/^\//.test(value) ? '' : '/') + value;
 
-		if (this._selfPathBookmark(value)) {
+		if (this.#selfPathBookmark(value)) {
 			this.bookmark.style.display = 'block';
 			dom.utils.addClass(this.bookmarkButton, 'active');
 		} else {
@@ -336,7 +322,7 @@ class ModalAnchorEditor extends EditorInjector {
 			dom.utils.removeClass(this.bookmarkButton, 'active');
 		}
 
-		if (!this._selfPathBookmark(value) && this.downloadCheck.checked) {
+		if (!this.#selfPathBookmark(value) && this.downloadCheck.checked) {
 			this.download.style.display = 'block';
 		} else {
 			this.download.style.display = 'none';
@@ -344,12 +330,11 @@ class ModalAnchorEditor extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Merges the given `rel` attribute value with the current list.
 	 * @param {string} relAttr - The `rel` attribute to merge.
 	 * @returns {string} - The updated `rel` attribute string.
 	 */
-	_relMerge(relAttr) {
+	#relMerge(relAttr) {
 		const current = this.currentRel;
 		if (!relAttr) return current.join(' ');
 
@@ -368,12 +353,11 @@ class ModalAnchorEditor extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Removes the specified `rel` attribute from the current list.
 	 * @param {string} relAttr - The `rel` attribute to remove.
 	 * @returns {string} - The updated `rel` attribute string.
 	 */
-	_relDelete(relAttr) {
+	#relDelete(relAttr) {
 		if (!relAttr) return this.currentRel.join(' ');
 		if (/^only:/.test(relAttr)) relAttr = relAttr.replace(/^only:/, '').trim();
 
@@ -383,11 +367,10 @@ class ModalAnchorEditor extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Registers a newly uploaded file and sets its URL in the modal form.
 	 * @param {Object<string, *>} response - The response object from the file upload request.
 	 */
-	_register(response) {
+	#register(response) {
 		const file = response.result[0];
 		this.linkValue = this.preview.textContent = this.urlInput.value = file.url;
 		this.displayInput.value = file.name;
@@ -396,16 +379,15 @@ class ModalAnchorEditor extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Handles file upload errors.
 	 * @param {Object<string, *>} response - The error response object.
 	 * @returns {Promise<void>}
 	 */
-	async _error(response) {
-		const message = await this.triggerEvent('onFileUploadError', { error: response });
+	async #error(response) {
+		const message = await this.#$.eventManager.triggerEvent('onFileUploadError', { error: response });
 		if (message === false) return;
 		const err = message === NO_EVENT ? response.errorMessage : message || response.errorMessage;
-		this.ui.alertOpen(err, 'error');
+		this.#$.ui.alertOpen(err, 'error');
 		console.error('[SUNEDITOR.plugin.fileUpload.error]', err);
 	}
 
@@ -413,12 +395,12 @@ class ModalAnchorEditor extends EditorInjector {
 	 * @description Handles the callback after a file upload completes.
 	 * @param {XMLHttpRequest} xmlHttp - The XMLHttpRequest object containing the response.
 	 */
-	_uploadCallBack(xmlHttp) {
+	#uploadCallBack(xmlHttp) {
 		const response = JSON.parse(xmlHttp.responseText);
 		if (response.errorMessage) {
-			this._error(response);
+			this.#error(response);
 		} else {
-			this._register(response);
+			this.#register(response);
 		}
 	}
 
@@ -435,20 +417,18 @@ class ModalAnchorEditor extends EditorInjector {
 		const fileInfo = {
 			url: this.uploadUrl,
 			uploadHeaders: this.uploadHeaders,
-			files
+			files,
 		};
 
-		const handler = async function (infos, newInfos) {
+		const handler = async function (uploadCallback, infos, newInfos) {
 			infos = newInfos || infos;
 			const xmlHttp = await this.fileManager.asyncUpload(infos.url, infos.uploadHeaders, infos.files);
-			this._uploadCallBack(xmlHttp);
-		}.bind(this, fileInfo);
-		// se-ts-ignore
-		void this._uploadCallBack;
+			uploadCallback(xmlHttp);
+		}.bind(this, this.#uploadCallBack.bind(this), fileInfo);
 
-		const result = await this.triggerEvent('onFileUploadBefore', {
+		const result = await this.#$.eventManager.triggerEvent('onFileUploadBefore', {
 			info: fileInfo,
-			handler
+			handler,
 		});
 
 		if (result === undefined) return true;
@@ -462,7 +442,7 @@ class ModalAnchorEditor extends EditorInjector {
 	 * @description Opens the `rel` attribute selection menu.
 	 */
 	#OnClick_relbutton() {
-		this.selectMenu_rel.open(this.options.get('_rtl') ? 'left-middle' : '');
+		this.#selectMenu_rel.open(this.#$.options.get('_rtl') ? 'left-middle' : '');
 	}
 
 	/**
@@ -474,8 +454,8 @@ class ModalAnchorEditor extends EditorInjector {
 		item.id = id;
 		this.urlInput.value = '#' + id;
 
-		this._setLinkPreview(this.urlInput.value);
-		this.selectMenu_bookmark.close();
+		this.#setLinkPreview(this.urlInput.value);
+		this.#selectMenu_bookmark.close();
 		this.urlInput.focus();
 	}
 
@@ -494,15 +474,6 @@ class ModalAnchorEditor extends EditorInjector {
 		this.relPreview.title = this.relPreview.textContent = current.join(', ');
 	}
 
-	/**
-	 * @param {InputEvent} e - Event object
-	 */
-	#OnChange_displayInput(e) {
-		/** @type {HTMLInputElement} */
-		const eventTarget = dom.query.getEventTarget(e);
-		this._change = !!eventTarget.value.trim();
-	}
-
 	/**
 	 * @param {InputEvent} e - Event object
 	 */
@@ -510,19 +481,19 @@ class ModalAnchorEditor extends EditorInjector {
 		/** @type {HTMLInputElement} */
 		const eventTarget = dom.query.getEventTarget(e);
 		const value = eventTarget.value.trim();
-		this._setLinkPreview(value);
-		if (this._selfPathBookmark(value)) this._createBookmarkList(value);
-		else this.selectMenu_bookmark.close();
+		this.#setLinkPreview(value);
+		if (this.#selfPathBookmark(value)) this.#createBookmarkList(value);
+		else this.#selectMenu_bookmark.close();
 	}
 
 	#OnFocus_urlInput() {
 		const value = this.urlInput.value;
-		if (this._selfPathBookmark(value)) this._createBookmarkList(value);
+		if (this.#selfPathBookmark(value)) this.#createBookmarkList(value);
 	}
 
 	#OnClick_bookmarkButton() {
 		let url = this.urlInput.value;
-		if (this._selfPathBookmark(url)) {
+		if (this.#selfPathBookmark(url)) {
 			url = url.substring(1);
 			this.bookmark.style.display = 'none';
 			dom.utils.removeClass(this.bookmarkButton, 'active');
@@ -532,11 +503,11 @@ class ModalAnchorEditor extends EditorInjector {
 			dom.utils.addClass(this.bookmarkButton, 'active');
 			this.downloadCheck.checked = false;
 			this.download.style.display = 'none';
-			this._createBookmarkList(url);
+			this.#createBookmarkList(url);
 		}
 
 		this.urlInput.value = url;
-		this._setLinkPreview(url);
+		this.#setLinkPreview(url);
 		this.urlInput.focus();
 	}
 
@@ -548,9 +519,9 @@ class ModalAnchorEditor extends EditorInjector {
 		/** @type {HTMLInputElement} */
 		const eventTarget = dom.query.getEventTarget(e);
 		if (eventTarget.checked) {
-			this._setRel(this._relMerge(this.defaultRel.check_new_window));
+			this.#setRel(this.#relMerge(this.defaultRel.check_new_window));
 		} else {
-			this._setRel(this._relDelete(this.defaultRel.check_new_window));
+			this.#setRel(this.#relDelete(this.defaultRel.check_new_window));
 		}
 	}
 
@@ -566,27 +537,26 @@ class ModalAnchorEditor extends EditorInjector {
 			dom.utils.removeClass(this.bookmarkButton, 'active');
 			this.linkValue = this.preview.textContent = this.urlInput.value = this.urlInput.value.replace(/^#+/, '');
 			if (typeof this.defaultRel.check_bookmark === 'string') {
-				this._setRel(this._relMerge(this.defaultRel.check_bookmark));
+				this.#setRel(this.#relMerge(this.defaultRel.check_bookmark));
 			}
 		} else {
 			this.download.style.display = 'none';
 			if (typeof this.defaultRel.check_bookmark === 'string') {
-				this._setRel(this._relDelete(this.defaultRel.check_bookmark));
+				this.#setRel(this.#relDelete(this.defaultRel.check_bookmark));
 			}
 		}
 	}
 }
 
 /**
- * @private
- * @param {__se__EditorCore} editor - Editor instance
+ * @param {SunEditor.Deps} $ - Editor instance
  * @param {ModalAnchorEditorParams} params - ModalAnchorEditor options
  * @param {Array<string>} relList - REL attribute list
  * @returns {HTMLElement} - Modal form element
  */
-function CreatetModalForm(editor, params, relList) {
-	const lang = editor.lang;
-	const icons = editor.icons;
+function CreateModalForm($, params, relList) {
+	const lang = $.lang;
+	const icons = $.icons;
 	const textDisplayShow = params.textToDisplay ? '' : 'style="display: none;"';
 	const titleShow = params.title ? '' : 'style="display: none;"';
 
@@ -595,7 +565,7 @@ function CreatetModalForm(editor, params, relList) {
 			<div class="se-modal-form">
 				<label>${lang.link_modal_url}</label>
 				<div class="se-modal-form-files">
-					<input data-focus class="se-input-form se-input-url" type="text" placeholder="${editor.options.get('protocol') || ''}" />
+					<input data-focus class="se-input-form se-input-url" type="text" placeholder="${$.options.get('defaultUrlProtocol') || ''}" />
 					${
 						params.enableFileUpload
 							? `<button type="button" class="se-btn se-tooltip se-modal-files-edge-button _se_upload_button" aria-label="${lang.fileUpload}">