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

package/src/plugins/browser/fileBrowser.js

@@ -1,44 +1,42 @@
-import EditorInjector from '../../editorInjector';
-import { Browser } from '../../modules';
+import { PluginBrowser } from '../../interfaces';
+import { Browser } from '../../modules/contract';
 
 /**
- * @typedef {import('../../modules/Browser').BrowserFile} BrowserFile_fileBrowser
+ * @typedef {Object} FileBrowserPluginOptions
+ * @property {Object<string, *>|Array<*>} [data] - Direct data without server calls
+ * @property {string} [url] - Server request URL
+ * @property {Object<string, string>} [headers] - Server request headers
+ * @property {string|((item: SunEditor.Module.Browser.File) => string)} [thumbnail] - Default thumbnail
+ * @property {Array<string>} [props] - Additional tag names
  */
 
 /**
  * @class
- * @extends EditorInjector
  * @description File browser plugin. Can contain any media type.
  */
-class FileBrowser extends EditorInjector {
+class FileBrowser extends PluginBrowser {
 	static key = 'fileBrowser';
-	static type = 'browser';
 	static className = '';
 
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Object<string, *>|Array<*>=} pluginOptions.data - direct data without server calls
-	 * @param {string} pluginOptions.url - server request url
-	 * @param {Object<string, string>=} pluginOptions.headers - server request headers
-	 * @param {string|((item: BrowserFile_fileBrowser) => string)} pluginOptions.thumbnail - default thumbnail
-	 * @param {Array<string>} pluginOptions.props - additional tag names
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {FileBrowserPluginOptions} pluginOptions
 	 */
 	constructor(editor, pluginOptions) {
 		// plugin bisic properties
 		super(editor);
-		this.title = this.lang.fileBrowser;
+		this.title = this.$.lang.fileBrowser;
 		this.icon = 'file_browser';
 
 		// members
 		this.onSelectfunction = null;
 
 		// modules
-		const thumbnail = { video: this.icons.video_thumbnail, audio: this.icons.audio_thumbnail, file: this.icons.file_thumbnail };
-		const defaultThumbnail = this.icons.file_thumbnail;
-		this.browser = new Browser(this, {
-			title: this.lang.fileBrowser,
+		const thumbnail = { video: this.$.icons.video_thumbnail, audio: this.$.icons.audio_thumbnail, file: this.$.icons.file_thumbnail };
+		const defaultThumbnail = this.$.icons.file_thumbnail;
+		this.browser = new Browser(this, this.$, {
+			title: this.$.lang.fileBrowser,
 			data: pluginOptions.data,
 			url: pluginOptions.url,
 			headers: pluginOptions.headers,
@@ -46,14 +44,13 @@ class FileBrowser extends EditorInjector {
 			columnSize: 4,
 			className: 'se-file-browser',
 			thumbnail: typeof pluginOptions.thumbnail === 'function' ? pluginOptions.thumbnail : (item) => thumbnail[item.type] || defaultThumbnail,
-			props: [...new Set((pluginOptions.props ?? []).concat(['frame']))]
+			props: [...new Set((pluginOptions.props ?? []).concat(['frame']))],
 		});
 	}
 
 	/**
-	 * @editorMethod Modules.Browser
-	 * @description Executes the method that is called when a "Browser" module's is opened.
-	 * @param {?(targe: Node) => *=} onSelectfunction method to be executed after selecting an item in the gallery
+	 * @override
+	 * @type {PluginBrowser['open']}
 	 */
 	open(onSelectfunction) {
 		this.onSelectfunction = onSelectfunction;
@@ -61,8 +58,8 @@ class FileBrowser extends EditorInjector {
 	}
 
 	/**
-	 * @editorMethod Modules.Browser
-	 * @description Executes the method that is called when a "Browser" module's is closed.
+	 * @override
+	 * @type {PluginBrowser['close']}
 	 */
 	close() {
 		this.onSelectfunction = null;
@@ -80,19 +77,19 @@ class FileBrowser extends EditorInjector {
 			const type = target.getAttribute('data-type');
 			switch (type) {
 				case 'image': {
-					this.plugins.imageGallery.browser.selectorHandler(target);
+					this.$.plugins.imageGallery.browser.selectorHandler(target);
 					break;
 				}
 				case 'video': {
-					this.plugins.videoGallery.browser.selectorHandler(target);
+					this.$.plugins.videoGallery.browser.selectorHandler(target);
 					break;
 				}
 				case 'audio': {
-					this.plugins.audioGallery.browser.selectorHandler(target);
+					this.$.plugins.audioGallery.browser.selectorHandler(target);
 					break;
 				}
 				case 'file': {
-					this.plugins.fileGallery.browser.selectorHandler(target);
+					this.$.plugins.fileGallery.browser.selectorHandler(target);
 					break;
 				}
 			}

package/src/plugins/browser/fileGallery.js

@@ -1,56 +1,53 @@
-import EditorInjector from '../../editorInjector';
-import { Browser } from '../../modules';
+import { PluginBrowser } from '../../interfaces';
+import { Browser } from '../../modules/contract';
 
 /**
- * @typedef {import('../../modules/Browser').BrowserFile} BrowserFile_fileGallery
+ * @typedef {Object} FileGalleryPluginOptions
+ * @property {Array<SunEditor.Module.Browser.File>} [data] - Direct data without server calls
+ * @property {string} [url] - Server request URL
+ * @property {Object<string, string>} [headers] - Server request headers
+ * @property {string|((item: SunEditor.Module.Browser.File) => string)} [thumbnail] - Default thumbnail
  */
 
 /**
  * @class
- * @extends EditorInjector
  * @description File gallery plugin
  */
-class FileGallery extends EditorInjector {
+class FileGallery extends PluginBrowser {
 	static key = 'fileGallery';
-	static type = 'browser';
 	static className = '';
 
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<*>=} pluginOptions.data - direct data without server calls
-	 * @param {string} pluginOptions.url - server request url
-	 * @param {Object<string, string>=} pluginOptions.headers - server request headers
-	 * @param {string|((item: BrowserFile_fileGallery) => string)} pluginOptions.thumbnail - default thumbnail
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {FileGalleryPluginOptions} pluginOptions
 	 */
 	constructor(editor, pluginOptions) {
 		// plugin bisic properties
 		super(editor);
-		this.title = this.lang.fileGallery;
+		this.title = this.$.lang.fileGallery;
 		this.icon = 'file_gallery';
 
 		// members
 		this.onSelectfunction = null;
 
 		// modules
-		const thumbnail = typeof pluginOptions.thumbnail === 'string' ? pluginOptions.thumbnail : this.icons.file_thumbnail;
-		this.browser = new Browser(this, {
-			title: this.lang.fileGallery,
+		const thumbnail = typeof pluginOptions.thumbnail === 'string' ? pluginOptions.thumbnail : this.$.icons.file_thumbnail;
+		this.browser = new Browser(this, this.$, {
+			title: this.$.lang.fileGallery,
 			data: pluginOptions.data,
 			url: pluginOptions.url,
 			headers: pluginOptions.headers,
 			selectorHandler: this.#SetItem.bind(this),
 			columnSize: 4,
 			className: 'se-file-gallery',
-			thumbnail: typeof pluginOptions.thumbnail === 'function' ? pluginOptions.thumbnail : () => thumbnail
+			thumbnail: typeof pluginOptions.thumbnail === 'function' ? pluginOptions.thumbnail : () => thumbnail,
 		});
 	}
 
 	/**
-	 * @editorMethod Modules.Browser
-	 * @description Executes the method that is called when a "Browser" module's is opened.
-	 * @param {?(targe: Node) => *=} onSelectfunction method to be executed after selecting an item in the gallery
+	 * @override
+	 * @type {PluginBrowser['open']}
 	 */
 	open(onSelectfunction) {
 		this.onSelectfunction = onSelectfunction;
@@ -58,8 +55,8 @@ class FileGallery extends EditorInjector {
 	}
 
 	/**
-	 * @editorMethod Modules.Browser
-	 * @description Executes the method that is called when a "Browser" module's is closed.
+	 * @override
+	 * @type {PluginBrowser['close']}
 	 */
 	close() {
 		this.onSelectfunction = null;
@@ -75,7 +72,7 @@ class FileGallery extends EditorInjector {
 			this.onSelectfunction(target);
 		} else {
 			const file = { name: target.getAttribute('data-name'), size: 0 };
-			this.plugins.fileUpload.create(target.getAttribute('data-command'), file, true);
+			this.$.plugins.fileUpload.create(target.getAttribute('data-command'), file, true);
 		}
 	}
 }

package/src/plugins/browser/imageGallery.js

@@ -1,53 +1,54 @@
-import EditorInjector from '../../editorInjector';
-import { Browser } from '../../modules';
+import { PluginBrowser } from '../../interfaces';
+import { Browser } from '../../modules/contract';
+
+/**
+ * @typedef ImageGalleryPluginOptions
+ * @property {Array<*>} [data] - Direct data without server calls
+ * @property {string} [url] - Server request URL
+ * @property {Object<string, string>} [headers] - Server request headers
+ */
 
 /**
  * @class
- * @extends EditorInjector
  * @description Image gallery plugin
  */
-class ImageGallery extends EditorInjector {
+class ImageGallery extends PluginBrowser {
 	static key = 'imageGallery';
-	static type = 'browser';
 	static className = '';
 
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<*>=} pluginOptions.data - direct data without server calls
-	 * @param {string=} pluginOptions.url - server request url
-	 * @param {Object<string, string>=} pluginOptions.headers - server request headers
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {ImageGalleryPluginOptions} pluginOptions
 	 */
 	constructor(editor, pluginOptions) {
 		// plugin bisic properties
 		super(editor);
-		this.title = this.lang.imageGallery;
+		this.title = this.$.lang.imageGallery;
 		this.icon = 'image_gallery';
 
 		// members
 		this.onSelectfunction = null;
 
 		// modules
-		this.browser = new Browser(this, {
-			title: this.lang.imageGallery,
+		this.browser = new Browser(this, this.$, {
+			title: this.$.lang.imageGallery,
 			data: pluginOptions.data,
 			url: pluginOptions.url,
 			headers: pluginOptions.headers,
 			selectorHandler: this.#SetItem.bind(this),
 			columnSize: 4,
-			className: 'se-image-gallery'
+			className: 'se-image-gallery',
 		});
 
 		// members
-		this.width = this.plugins.image.pluginOptions.defaultWidth === 'auto' ? '' : this.plugins.image.pluginOptions.defaultWidth;
-		this.height = this.plugins.image.pluginOptions.defaultHeight === 'auto' ? '' : this.plugins.image.pluginOptions.defaultHeight;
+		this.width = this.$.plugins.image.pluginOptions.defaultWidth === 'auto' ? '' : this.$.plugins.image.pluginOptions.defaultWidth;
+		this.height = this.$.plugins.image.pluginOptions.defaultHeight === 'auto' ? '' : this.$.plugins.image.pluginOptions.defaultHeight;
 	}
 
 	/**
-	 * @editorMethod Modules.Browser
-	 * @description Executes the method that is called when a "Browser" module's is opened.
-	 * @param {?(targe: Node) => *=} onSelectfunction method to be executed after selecting an item in the gallery
+	 * @override
+	 * @type {PluginBrowser['open']}
 	 */
 	open(onSelectfunction) {
 		this.onSelectfunction = onSelectfunction;
@@ -55,8 +56,8 @@ class ImageGallery extends EditorInjector {
 	}
 
 	/**
-	 * @editorMethod Modules.Browser
-	 * @description Executes the method that is called when a "Browser" module's is closed.
+	 * @override
+	 * @type {PluginBrowser['close']}
 	 */
 	close() {
 		this.onSelectfunction = null;
@@ -72,8 +73,8 @@ class ImageGallery extends EditorInjector {
 			this.onSelectfunction(target);
 		} else {
 			const file = { name: target.getAttribute('data-name'), size: 0 };
-			this.plugins.image.init();
-			this.plugins.image.create(target.getAttribute('data-command'), null, this.width, this.height, 'none', file, target.alt);
+			this.$.plugins.image.modalInit();
+			this.$.plugins.image.create(target.getAttribute('data-command'), null, this.width, this.height, 'none', file, target.alt, true);
 		}
 	}
 }

package/src/plugins/browser/videoGallery.js

@@ -1,42 +1,40 @@
-import EditorInjector from '../../editorInjector';
-import { Browser } from '../../modules';
+import { PluginBrowser } from '../../interfaces';
+import { Browser } from '../../modules/contract';
 
 /**
- * @typedef {import('../../modules/Browser').BrowserFile} BrowserFile_videoGallery
+ * @typedef {Object} VideoGalleryPluginOptions
+ * @property {Array<SunEditor.Module.Browser.File>} [data] - Direct data without server calls
+ * @property {string} [url] - Server request URL
+ * @property {Object<string, string>} [headers] - Server request headers
+ * @property {string|((item: SunEditor.Module.Browser.File) => string)} [thumbnail] - Default thumbnail
  */
 
 /**
  * @class
- * @extends EditorInjector
  * @description Video gallery plugin
  */
-class VideoGallery extends EditorInjector {
+class VideoGallery extends PluginBrowser {
 	static key = 'videoGallery';
-	static type = 'browser';
 	static className = '';
 
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions
-	 * @param {Array<*>=} pluginOptions.data - direct data without server calls
-	 * @param {string=} pluginOptions.url - server request url
-	 * @param {Object<string, string>=} pluginOptions.headers - server request headers
-	 * @param {string|((item: BrowserFile_videoGallery) => string)} pluginOptions.thumbnail - default thumbnail
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {VideoGalleryPluginOptions} pluginOptions
 	 */
 	constructor(editor, pluginOptions) {
 		// plugin bisic properties
 		super(editor);
-		this.title = this.lang.videoGallery;
+		this.title = this.$.lang.videoGallery;
 		this.icon = 'video_gallery';
 
 		// members
 		this.onSelectfunction = null;
 
 		// modules
-		const thumbnail = typeof pluginOptions.thumbnail === 'string' ? pluginOptions.thumbnail : this.icons.video_thumbnail;
-		this.browser = new Browser(this, {
-			title: this.lang.videoGallery,
+		const thumbnail = typeof pluginOptions.thumbnail === 'string' ? pluginOptions.thumbnail : this.$.icons.video_thumbnail;
+		this.browser = new Browser(this, this.$, {
+			title: this.$.lang.videoGallery,
 			data: pluginOptions.data,
 			url: pluginOptions.url,
 			headers: pluginOptions.headers,
@@ -44,18 +42,17 @@ class VideoGallery extends EditorInjector {
 			columnSize: 4,
 			className: 'se-video-gallery',
 			thumbnail: typeof pluginOptions.thumbnail === 'function' ? pluginOptions.thumbnail : () => thumbnail,
-			props: ['frame']
+			props: ['frame'],
 		});
 
 		// members
-		this.width = this.plugins.video.pluginOptions.defaultWidth === 'auto' ? '' : this.plugins.video.pluginOptions.defaultWidth;
-		this.height = this.plugins.video.pluginOptions.defaultHeight === 'auto' ? '' : this.plugins.video.pluginOptions.defaultHeight;
+		this.width = this.$.plugins.video.pluginOptions.defaultWidth === 'auto' ? '' : this.$.plugins.video.pluginOptions.defaultWidth;
+		this.height = this.$.plugins.video.pluginOptions.defaultHeight === 'auto' ? '' : this.$.plugins.video.pluginOptions.defaultHeight;
 	}
 
 	/**
-	 * @editorMethod Modules.Browser
-	 * @description Executes the method that is called when a "Browser" module's is opened.
-	 * @param {?(targe: Node) => *=} onSelectfunction method to be executed after selecting an item in the gallery
+	 * @override
+	 * @type {PluginBrowser['open']}
 	 */
 	open(onSelectfunction) {
 		this.onSelectfunction = onSelectfunction;
@@ -63,8 +60,8 @@ class VideoGallery extends EditorInjector {
 	}
 
 	/**
-	 * @editorMethod Modules.Browser
-	 * @description Executes the method that is called when a "Browser" module's is closed.
+	 * @override
+	 * @type {PluginBrowser['close']}
 	 */
 	close() {
 		this.onSelectfunction = null;
@@ -80,21 +77,22 @@ class VideoGallery extends EditorInjector {
 			this.onSelectfunction(target);
 		} else {
 			let url = target.getAttribute('data-command');
-			const processUrl = this.plugins.video.findProcessUrl(url);
+			const processUrl = this.$.plugins.video.findProcessUrl(url);
 			if (processUrl) {
 				url = processUrl.url;
 			}
 
 			const file = { name: target.getAttribute('data-name'), size: 0 };
-			this.plugins.video.init();
-			this.plugins.video.create(
-				this.plugins.video[target.getAttribute('data-frame') === 'iframe' ? 'createIframeTag' : 'createVideoTag']({ poster: target.getAttribute('data-thumbnail') }),
+			this.$.plugins.video.modalInit();
+			this.$.plugins.video.create(
+				this.$.plugins.video[target.getAttribute('data-frame') === 'iframe' ? 'createIframeTag' : 'createVideoTag']({ poster: target.getAttribute('data-thumbnail') }),
 				url,
 				null,
 				this.width,
 				this.height,
 				false,
-				file
+				file,
+				true,
 			);
 		}
 	}

package/src/plugins/command/blockquote.js

@@ -1,23 +1,22 @@
-import EditorInjector from '../../editorInjector';
+import { PluginCommand } from '../../interfaces';
 import { dom } from '../../helper';
 
 /**
  * @class
  * @description Blockquote plugin
  */
-class Blockquote extends EditorInjector {
+class Blockquote extends PluginCommand {
 	static key = 'blockquote';
-	static type = 'command';
 	static className = '';
 
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {SunEditor.Kernel} editor - The core kernel
 	 */
 	constructor(editor) {
 		super(editor);
 		// plugin basic properties
-		this.title = this.lang.tag_blockquote;
+		this.title = this.$.lang.tag_blockquote;
 		this.icon = 'blockquote';
 
 		// members
@@ -25,12 +24,8 @@ class Blockquote extends EditorInjector {
 	}
 
 	/**
-	 * @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) {
 		if (/blockquote/i.test(element?.nodeName)) {
@@ -43,17 +38,16 @@ class Blockquote extends EditorInjector {
 	}
 
 	/**
-	 * @editorMethod Editor.core
-	 * @description Executes the main execution method of the plugin.
-	 * - It is executed by clicking a toolbar "command" button or calling an API.
+	 * @override
+	 * @type {PluginCommand['action']}
 	 */
 	action() {
-		const currentBlockquote = dom.query.getParentElement(this.selection.getNode(), 'blockquote');
+		const currentBlockquote = dom.query.getParentElement(this.$.selection.getNode(), 'blockquote');
 
 		if (currentBlockquote) {
-			this.format.removeBlock(currentBlockquote, { selectedFormats: null, newBlockElement: null, shouldDelete: false, skipHistory: false });
+			this.$.format.removeBlock(currentBlockquote, { selectedFormats: null, newBlockElement: null, shouldDelete: false, skipHistory: false });
 		} else {
-			this.format.applyBlock(this.quoteTag.cloneNode(false));
+			this.$.format.applyBlock(this.quoteTag.cloneNode(false));
 		}
 	}
 }

package/src/plugins/command/exportPDF.js

@@ -1,29 +1,32 @@
-import EditorInjector from '../../editorInjector';
+import { PluginCommand } from '../../interfaces';
 import { dom, env } from '../../helper';
-import { ApiManager } from '../../modules';
+import { ApiManager } from '../../modules/manager';
 
 const { _w, _d } = env;
 
+/**
+ * @typedef ExportPDFPluginOptions
+ * @property {string} apiUrl - Server request URL for PDF generation
+ * @property {string} [fileName="suneditor-pdf"] - Name of the generated PDF file
+ */
+
 /**
  * @class
  * @description Export PDF plugin
  */
-class ExportPDF extends EditorInjector {
+class ExportPDF extends PluginCommand {
 	static key = 'exportPDF';
-	static type = 'command';
 	static className = 'se-component-enabled';
 
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
-	 * @param {Object} pluginOptions - plugin options
-	 * @param {string} pluginOptions.apiUrl - server request url
-	 * @param {string} pluginOptions.fileName - file name
+	 * @param {SunEditor.Kernel} editor - The core kernel
+	 * @param {ExportPDFPluginOptions} pluginOptions - plugin options
 	 */
 	constructor(editor, pluginOptions) {
 		super(editor);
 		// plugin basic properties
-		this.title = this.lang.exportPDF;
+		this.title = this.$.lang.exportPDF;
 		this.icon = 'PDF';
 
 		// plugin options
@@ -34,22 +37,20 @@ class ExportPDF extends EditorInjector {
 		if (!this.apiUrl) {
 			console.warn('[SUNEDITOR.plugins.exportPDF.error] Requires exportPDF."apiUrl" options.');
 		} else {
-			this.apiManager = new ApiManager(this, {
+			this.apiManager = new ApiManager(this, this.$, {
 				method: 'POST',
 				url: this.apiUrl,
 				headers: {
-					'Content-Type': 'application/json'
+					'Content-Type': 'application/json',
 				},
-				responseType: 'blob'
+				responseType: 'blob',
 			});
 		}
 	}
 
 	/**
-	 * @editorMethod Editor.core
-	 * @description Executes the main execution method of the plugin.
-	 * - It is executed by clicking a toolbar "command" button or calling an API.
-	 * @returns {Promise<void>}
+	 * @override
+	 * @type {PluginCommand['action']}
 	 */
 	async action() {
 		if (!this.apiUrl) {
@@ -57,16 +58,16 @@ class ExportPDF extends EditorInjector {
 			return;
 		}
 
-		this.ui.showLoading();
+		this.$.ui.showLoading();
 		let ww = null;
 
 		try {
-			const standardWW = this.editor.frameContext.get('documentTypePageMirror') || this.editor.frameContext.get('wysiwygFrame');
+			const standardWW = this.$.frameContext.get('documentTypePageMirror') || this.$.frameContext.get('wysiwygFrame');
 			const editableDiv = dom.utils.createElement('div', { class: standardWW.className }, standardWW.innerHTML);
 			ww = dom.utils.createElement('div', { style: `position: absolute; top: -10000px; left: -10000px; width: 21cm; columns: 21cm; height: auto;` }, editableDiv);
 
-			const innerPadding = this._w.getComputedStyle(standardWW).padding;
-			const inlineWW = dom.utils.applyInlineStylesAll(editableDiv, true, this.options.get('allUsedStyles'));
+			const innerPadding = _w.getComputedStyle(standardWW).padding;
+			const inlineWW = dom.utils.applyInlineStylesAll(editableDiv, true, this.$.options.get('allUsedStyles'));
 			inlineWW.style.padding = inlineWW.style.paddingTop = inlineWW.style.paddingBottom = inlineWW.style.paddingLeft = inlineWW.style.paddingRight = '0';
 			ww.innerHTML = `
 				<style>
@@ -80,30 +81,29 @@ class ExportPDF extends EditorInjector {
 			_d.body.appendChild(ww);
 
 			// before event
-			if ((await this.triggerEvent('onExportPDFBefore', { target: ww })) === false) return;
+			if ((await this.$.eventManager.triggerEvent('onExportPDFBefore', { target: ww })) === false) return;
 
 			// at server
-			await this._createByServer(ww);
+			await this.#createByServer(ww);
 			return;
 		} catch (error) {
 			console.error('[SUNEDITOR.plugins.exportPDF.error]', error.message);
 		} finally {
 			dom.utils.removeItem(ww);
-			this.ui.hideLoading();
+			this.$.ui.hideLoading();
 		}
 	}
 
 	/**
-	 * @private
 	 * @description Sends the editor content to the server for PDF generation.
 	 * @param {HTMLElement} ww - A temporary container holding the formatted editor content.
 	 * @returns {Promise<void>} Resolves when the PDF file is successfully downloaded.
 	 * @throws {Error} Throws an error if the server response indicates a failure.
 	 */
-	async _createByServer(ww) {
+	async #createByServer(ww) {
 		const data = {
 			fileName: this.fileName,
-			htmlContent: ww.innerHTML
+			htmlContent: ww.innerHTML,
 		};
 
 		const xhr = await this.apiManager.asyncCall({ data: JSON.stringify(data) });