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

package/src/plugins/browser/audioGallery.js

@@ -0,0 +1,83 @@
+import EditorInjector from '../../editorInjector';
+import { Browser } from '../../modules';
+
+/**
+ * @typedef {import('../../modules/Browser').BrowserFile} BrowserFile_audioGallery
+ */
+
+/**
+ * @class
+ * @extends EditorInjector
+ * @description Audio gallery plugin
+ */
+class AudioGallery extends EditorInjector {
+	static key = 'audioGallery';
+	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_audioGallery) => string)} pluginOptions.thumbnail - default thumbnail
+	 */
+	constructor(editor, pluginOptions) {
+		// plugin bisic properties
+		super(editor);
+		this.title = this.lang.audioGallery;
+		this.icon = 'audio_gallery';
+
+		// members
+		this.onSelectfunction = null;
+
+		// modules
+		const thumbnail = typeof pluginOptions.thumbnail === 'string' ? pluginOptions.thumbnail : this.icons.audio_thumbnail;
+		this.browser = new Browser(this, {
+			title: this.lang.audioGallery,
+			data: pluginOptions.data,
+			url: pluginOptions.url,
+			headers: pluginOptions.headers,
+			selectorHandler: this.#SetItem.bind(this),
+			columnSize: 4,
+			className: 'se-audio-gallery',
+			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
+	 */
+	open(onSelectfunction) {
+		this.onSelectfunction = onSelectfunction;
+		this.browser.open();
+	}
+
+	/**
+	 * @editorMethod Modules.Browser
+	 * @description Executes the method that is called when a "Browser" module's is closed.
+	 */
+	close() {
+		this.onSelectfunction = null;
+		this.browser.close();
+	}
+
+	/**
+	 * @description Set browser item
+	 * @param {HTMLElement} target - Target element
+	 */
+	#SetItem(target) {
+		if (this.onSelectfunction) {
+			this.onSelectfunction(target);
+		} else {
+			this.plugins.audio.init();
+			this.plugins.audio.submitURL(target.getAttribute('data-command'));
+		}
+	}
+}
+
+export default AudioGallery;

package/src/plugins/browser/fileBrowser.js

@@ -0,0 +1,103 @@
+import EditorInjector from '../../editorInjector';
+import { Browser } from '../../modules';
+
+/**
+ * @typedef {import('../../modules/Browser').BrowserFile} BrowserFile_fileBrowser
+ */
+
+/**
+ * @class
+ * @extends EditorInjector
+ * @description File browser plugin. Can contain any media type.
+ */
+class FileBrowser extends EditorInjector {
+	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
+	 */
+	constructor(editor, pluginOptions) {
+		// plugin bisic properties
+		super(editor);
+		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,
+			data: pluginOptions.data,
+			url: pluginOptions.url,
+			headers: pluginOptions.headers,
+			selectorHandler: this.#SetItem.bind(this),
+			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']))]
+		});
+	}
+
+	/**
+	 * @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
+	 */
+	open(onSelectfunction) {
+		this.onSelectfunction = onSelectfunction;
+		this.browser.open();
+	}
+
+	/**
+	 * @editorMethod Modules.Browser
+	 * @description Executes the method that is called when a "Browser" module's is closed.
+	 */
+	close() {
+		this.onSelectfunction = null;
+		this.browser.close();
+	}
+
+	/**
+	 * @description Set browser item
+	 * @param {HTMLElement} target - Target element
+	 */
+	#SetItem(target) {
+		if (this.onSelectfunction) {
+			this.onSelectfunction(target);
+		} else {
+			const type = target.getAttribute('data-type');
+			switch (type) {
+				case 'image': {
+					this.plugins.imageGallery.browser.selectorHandler(target);
+					break;
+				}
+				case 'video': {
+					this.plugins.videoGallery.browser.selectorHandler(target);
+					break;
+				}
+				case 'audio': {
+					this.plugins.audioGallery.browser.selectorHandler(target);
+					break;
+				}
+				case 'file': {
+					this.plugins.fileGallery.browser.selectorHandler(target);
+					break;
+				}
+			}
+		}
+	}
+}
+
+export default FileBrowser;

package/src/plugins/browser/fileGallery.js

@@ -0,0 +1,83 @@
+import EditorInjector from '../../editorInjector';
+import { Browser } from '../../modules';
+
+/**
+ * @typedef {import('../../modules/Browser').BrowserFile} BrowserFile_fileGallery
+ */
+
+/**
+ * @class
+ * @extends EditorInjector
+ * @description File gallery plugin
+ */
+class FileGallery extends EditorInjector {
+	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
+	 */
+	constructor(editor, pluginOptions) {
+		// plugin bisic properties
+		super(editor);
+		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,
+			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
+		});
+	}
+
+	/**
+	 * @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
+	 */
+	open(onSelectfunction) {
+		this.onSelectfunction = onSelectfunction;
+		this.browser.open();
+	}
+
+	/**
+	 * @editorMethod Modules.Browser
+	 * @description Executes the method that is called when a "Browser" module's is closed.
+	 */
+	close() {
+		this.onSelectfunction = null;
+		this.browser.close();
+	}
+
+	/**
+	 * @description Set browser item
+	 * @param {HTMLElement} target - Target element
+	 */
+	#SetItem(target) {
+		if (this.onSelectfunction) {
+			this.onSelectfunction(target);
+		} else {
+			const file = { name: target.getAttribute('data-name'), size: 0 };
+			this.plugins.fileUpload.create(target.getAttribute('data-command'), file, true);
+		}
+	}
+}
+
+export default FileGallery;

package/src/plugins/browser/imageGallery.js

@@ -0,0 +1,81 @@
+import EditorInjector from '../../editorInjector';
+import { Browser } from '../../modules';
+
+/**
+ * @class
+ * @extends EditorInjector
+ * @description Image gallery plugin
+ */
+class ImageGallery extends EditorInjector {
+	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
+	 */
+	constructor(editor, pluginOptions) {
+		// plugin bisic properties
+		super(editor);
+		this.title = this.lang.imageGallery;
+		this.icon = 'image_gallery';
+
+		// members
+		this.onSelectfunction = null;
+
+		// modules
+		this.browser = new Browser(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'
+		});
+
+		// 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;
+	}
+
+	/**
+	 * @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
+	 */
+	open(onSelectfunction) {
+		this.onSelectfunction = onSelectfunction;
+		this.browser.open();
+	}
+
+	/**
+	 * @editorMethod Modules.Browser
+	 * @description Executes the method that is called when a "Browser" module's is closed.
+	 */
+	close() {
+		this.onSelectfunction = null;
+		this.browser.close();
+	}
+
+	/**
+	 * @description Set browser item
+	 * @param {HTMLImageElement} target - Target element
+	 */
+	#SetItem(target) {
+		if (this.onSelectfunction) {
+			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);
+		}
+	}
+}
+
+export default ImageGallery;

package/src/plugins/browser/videoGallery.js

@@ -0,0 +1,103 @@
+import EditorInjector from '../../editorInjector';
+import { Browser } from '../../modules';
+
+/**
+ * @typedef {import('../../modules/Browser').BrowserFile} BrowserFile_videoGallery
+ */
+
+/**
+ * @class
+ * @extends EditorInjector
+ * @description Video gallery plugin
+ */
+class VideoGallery extends EditorInjector {
+	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
+	 */
+	constructor(editor, pluginOptions) {
+		// plugin bisic properties
+		super(editor);
+		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,
+			data: pluginOptions.data,
+			url: pluginOptions.url,
+			headers: pluginOptions.headers,
+			selectorHandler: this.#SetItem.bind(this),
+			columnSize: 4,
+			className: 'se-video-gallery',
+			thumbnail: typeof pluginOptions.thumbnail === 'function' ? pluginOptions.thumbnail : () => thumbnail,
+			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;
+	}
+
+	/**
+	 * @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
+	 */
+	open(onSelectfunction) {
+		this.onSelectfunction = onSelectfunction;
+		this.browser.open();
+	}
+
+	/**
+	 * @editorMethod Modules.Browser
+	 * @description Executes the method that is called when a "Browser" module's is closed.
+	 */
+	close() {
+		this.onSelectfunction = null;
+		this.browser.close();
+	}
+
+	/**
+	 * @description Set browser item
+	 * @param {HTMLElement} target - Target element
+	 */
+	#SetItem(target) {
+		if (this.onSelectfunction) {
+			this.onSelectfunction(target);
+		} else {
+			let url = target.getAttribute('data-command');
+			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') }),
+				url,
+				null,
+				this.width,
+				this.height,
+				false,
+				file
+			);
+		}
+	}
+}
+
+export default VideoGallery;

package/src/plugins/command/blockquote.js

@@ -1,47 +1,60 @@
 import EditorInjector from '../../editorInjector';
-import { domUtils } from '../../helper';
-
-const Blockquote = function (editor) {
-	EditorInjector.call(this, editor);
-	// plugin basic properties
-	this.title = this.lang.tag_blockquote;
-	this.icon = 'blockquote';
-
-	// members
-	this.quoteTag = domUtils.createElement('BLOCKQUOTE');
-};
-
-Blockquote.key = 'blockquote';
-Blockquote.type = 'command';
-Blockquote.className = '';
-Blockquote.prototype = {
+import { dom } from '../../helper';
+
+/**
+ * @class
+ * @description Blockquote plugin
+ */
+class Blockquote extends EditorInjector {
+	static key = 'blockquote';
+	static type = 'command';
+	static className = '';
+
 	/**
-	 * @override core
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 */
+	constructor(editor) {
+		super(editor);
+		// plugin basic properties
+		this.title = this.lang.tag_blockquote;
+		this.icon = 'blockquote';
+
+		// members
+		this.quoteTag = dom.utils.createElement('BLOCKQUOTE');
+	}
+
+	/**
+	 * @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
 	 */
 	active(element, target) {
 		if (/blockquote/i.test(element?.nodeName)) {
-			domUtils.addClass(target, 'active');
+			dom.utils.addClass(target, 'active');
 			return true;
 		}
 
-		domUtils.removeClass(target, 'active');
+		dom.utils.removeClass(target, 'active');
 		return false;
-	},
+	}
 
 	/**
-	 * @override core
+	 * @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.
 	 */
 	action() {
-		const currentBlockquote = domUtils.getParentElement(this.selection.getNode(), 'blockquote');
+		const currentBlockquote = dom.query.getParentElement(this.selection.getNode(), 'blockquote');
 
 		if (currentBlockquote) {
-			this.format.removeBlock(currentBlockquote, null, null, false, false);
+			this.format.removeBlock(currentBlockquote, { selectedFormats: null, newBlockElement: null, shouldDelete: false, skipHistory: false });
 		} else {
 			this.format.applyBlock(this.quoteTag.cloneNode(false));
 		}
-	},
-
-	constructor: Blockquote
-};
+	}
+}
 
 export default Blockquote;

package/src/plugins/command/exportPDF.js

@@ -0,0 +1,134 @@
+import EditorInjector from '../../editorInjector';
+import { dom, env } from '../../helper';
+import { ApiManager } from '../../modules';
+
+const { _w, _d } = env;
+
+/**
+ * @class
+ * @description Export PDF plugin
+ */
+class ExportPDF extends EditorInjector {
+	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
+	 */
+	constructor(editor, pluginOptions) {
+		super(editor);
+		// plugin basic properties
+		this.title = this.lang.exportPDF;
+		this.icon = 'PDF';
+
+		// plugin options
+		this.apiUrl = pluginOptions.apiUrl;
+		this.fileName = pluginOptions.fileName || 'suneditor-pdf';
+
+		// option check
+		if (!this.apiUrl) {
+			console.warn('[SUNEDITOR.plugins.exportPDF.error] Requires exportPDF."apiUrl" options.');
+		} else {
+			this.apiManager = new ApiManager(this, {
+				method: 'POST',
+				url: this.apiUrl,
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				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>}
+	 */
+	async action() {
+		if (!this.apiUrl) {
+			console.warn('[SUNEDITOR.plugins.exportPDF.error] Requires exportPDF."apiUrl" options.');
+			return;
+		}
+
+		this.ui.showLoading();
+		let ww = null;
+
+		try {
+			const standardWW = this.editor.frameContext.get('documentTypePageMirror') || this.editor.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'));
+			inlineWW.style.padding = inlineWW.style.paddingTop = inlineWW.style.paddingBottom = inlineWW.style.paddingLeft = inlineWW.style.paddingRight = '0';
+			ww.innerHTML = `
+				<style>
+					@page {
+						size: A4;
+						margin: ${innerPadding};
+					}
+				</style>
+				${inlineWW.outerHTML}`;
+
+			_d.body.appendChild(ww);
+
+			// before event
+			if ((await this.triggerEvent('onExportPDFBefore', { target: ww })) === false) return;
+
+			// at server
+			await this._createByServer(ww);
+			return;
+		} catch (error) {
+			console.error('[SUNEDITOR.plugins.exportPDF.error]', error.message);
+		} finally {
+			dom.utils.removeItem(ww);
+			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) {
+		const data = {
+			fileName: this.fileName,
+			htmlContent: ww.innerHTML
+		};
+
+		const xhr = await this.apiManager.asyncCall({ data: JSON.stringify(data) });
+
+		if (xhr.status !== 200) {
+			const res = !xhr.responseText ? xhr : JSON.parse(xhr.responseText);
+			throw Error(`[SUNEDITOR.plugins.exportPDF.error] ${res.errorMessage}`);
+		}
+
+		const blob = new Blob([xhr.response], { type: 'application/pdf' });
+		const contentDisposition = xhr.getResponseHeader('Content-Disposition');
+		const downloadUrl = URL.createObjectURL(blob);
+		const filename = (contentDisposition.match(/filename="([^"]+)/) || [])[1] || this.fileName + '.pdf';
+		const a = dom.utils.createElement('A', { href: downloadUrl, download: filename, style: 'display: none;' }, null);
+
+		try {
+			_d.body.appendChild(a);
+			a.click();
+		} finally {
+			_w.setTimeout(() => {
+				dom.utils.removeItem(a);
+				URL.revokeObjectURL(downloadUrl);
+			}, 100);
+		}
+	}
+}
+
+export default ExportPDF;