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

package/src/plugins/modal/image/render/image.html.js

@@ -0,0 +1,150 @@
+import { dom } from '../../../../helper';
+import { Modal } from '../../../../modules/contract';
+
+/**
+ * @typedef {Object} ModalReturns_image
+ * @property {HTMLElement} html
+ * @property {HTMLElement} alignForm
+ * @property {HTMLElement} fileModalWrapper
+ * @property {HTMLInputElement} imgInputFile
+ * @property {HTMLInputElement} imgUrlFile
+ * @property {HTMLInputElement} altText
+ * @property {HTMLInputElement} captionCheckEl
+ * @property {HTMLElement} previewSrc
+ * @property {HTMLElement} tabs
+ * @property {HTMLButtonElement} galleryButton
+ * @property {HTMLInputElement} proportion
+ * @property {HTMLInputElement} inputX
+ * @property {HTMLInputElement} inputY
+ * @property {HTMLButtonElement} revertBtn
+ * @property {HTMLButtonElement} asBlock
+ * @property {HTMLButtonElement} asInline
+ * @property {HTMLButtonElement} fileRemoveBtn
+ *
+ * @param {SunEditor.Deps} $
+ * @param {*} pluginOptions
+ * @returns {ModalReturns_image}
+ */
+export function CreateHTML_modal({ lang, icons, plugins }, pluginOptions) {
+	const createFileInputHtml = !pluginOptions.createFileInput
+		? ''
+		: /*html*/ `
+		<div class="se-modal-form">
+			<label>${lang.image_modal_file}</label>
+			${Modal.CreateFileInput({ icons, lang }, pluginOptions)}
+		</div>`;
+
+	const createUrlInputHtml = !pluginOptions.createUrlInput
+		? ''
+		: /*html*/ `
+		<div class="se-modal-form">
+			<label>${lang.image_modal_url}</label>
+			<div class="se-modal-form-files">
+				<input class="se-input-form se-input-url" data-focus type="text" />
+				${
+					plugins.imageGallery
+						? `<button type="button" class="se-btn se-tooltip se-modal-files-edge-button __se__gallery" aria-label="${lang.imageGallery}">
+							${icons.image_gallery}
+							${dom.utils.createTooltipInner(lang.imageGallery)}
+							</button>`
+						: ''
+				}
+			</div>
+			<pre class="se-link-preview"></pre>
+		</div>`;
+
+	const canResizeHtml = !pluginOptions.canResize
+		? ''
+		: /*html*/ `
+		<div class="se-modal-form">
+			<div class="se-modal-size-text">
+				<label class="size-w">${lang.width}</label>
+				<label class="se-modal-size-x">&nbsp;</label>
+				<label class="size-h">${lang.height}</label>
+			</div>
+			<input class="se-input-control _se_size_x" placeholder="auto" type="text" />
+			<label class="se-modal-size-x">x</label>
+			<input type="text" class="se-input-control _se_size_y" placeholder="auto" />
+			<label><input type="checkbox" class="se-modal-btn-check _se_check_proportion" checked/>&nbsp;${lang.proportion}</label>
+			<button type="button" aria-label="${lang.revert}" class="se-btn se-tooltip se-modal-btn-revert">
+				${icons.revert}
+				${dom.utils.createTooltipInner(lang.revert)}
+			</button>
+		</div>`;
+
+	const useFormatTypeHtml = !pluginOptions.useFormatType
+		? ''
+		: /*html*/ `
+		<div class="se-modal-form">
+			<div class="se-modal-flex-form">
+				<button type="button" data-command="asBlock" class="se-btn se-tooltip" aria-label="${lang.inlineStyle}">
+					${icons.as_block}
+					${dom.utils.createTooltipInner(lang.blockStyle)}
+				</button>
+				<button type="button" data-command="asInline" class="se-btn se-tooltip" aria-label="${lang.inlineStyle}">
+					${icons.as_inline}
+					${dom.utils.createTooltipInner(lang.inlineStyle)}
+				</button>
+			</div>
+		</div>`;
+
+	const html = /*html*/ `
+		<div class="se-modal-header">
+			<button type="button" data-command="close" class="se-btn se-close-btn close" title="${lang.close}" aria-label="${lang.close}">${icons.cancel}</button>
+			<span class="se-modal-title">${lang.image_modal_title}</span>
+		</div>
+		<div class="se-modal-tabs">
+			<button type="button" class="_se_tab_link active" data-tab-link="image">${lang.image}</button>
+			<button type="button" class="_se_tab_link" data-tab-link="url">${lang.link}</button>
+		</div>
+		<form method="post" enctype="multipart/form-data">
+			<div class="_se_tab_content _se_tab_content_image">
+				<div class="se-modal-body">
+					${createFileInputHtml}
+					${createUrlInputHtml}
+					<div class="se-modal-hr"></div>
+					<div class="se-modal-form">
+						<label>${lang.image_modal_altText}</label><input class="se-input-form _se_image_alt" type="text" />
+					</div>
+					${canResizeHtml}
+					${useFormatTypeHtml}
+					<div class="se-modal-form se-modal-form-footer">
+						<label><input type="checkbox" class="se-modal-btn-check _se_image_check_caption" />&nbsp;${lang.caption}</label>
+					</div>
+				</div>
+			</div>
+			<div class="se-anchor-editor _se_tab_content _se_tab_content_url" style="display: none;">
+			</div>
+			<div class="se-modal-footer">
+				<div class="se-figure-align">
+					<label><input type="radio" name="suneditor_image_radio" class="se-modal-btn-radio" value="none" checked>${lang.basic}</label>
+					<label><input type="radio" name="suneditor_image_radio" class="se-modal-btn-radio" value="left">${lang.left}</label>
+					<label><input type="radio" name="suneditor_image_radio" class="se-modal-btn-radio" value="center">${lang.center}</label>
+					<label><input type="radio" name="suneditor_image_radio" class="se-modal-btn-radio" value="right">${lang.right}</label>
+				</div>
+				<button type="submit" class="se-btn-primary" title="${lang.submitButton}" aria-label="${lang.submitButton}"><span>${lang.submitButton}</span></button>
+			</div>
+		</form>`;
+
+	const content = dom.utils.createElement('DIV', { class: 'se-modal-content' }, html);
+
+	return {
+		html: content,
+		alignForm: content.querySelector('.se-figure-align'),
+		fileModalWrapper: content.querySelector('.se-flex-input-wrapper'),
+		imgInputFile: content.querySelector('.__se__file_input'),
+		imgUrlFile: content.querySelector('.se-input-url'),
+		altText: content.querySelector('._se_image_alt'),
+		captionCheckEl: content.querySelector('._se_image_check_caption'),
+		previewSrc: content.querySelector('._se_tab_content_image .se-link-preview'),
+		tabs: content.querySelector('.se-modal-tabs'),
+		galleryButton: content.querySelector('.__se__gallery'),
+		proportion: content.querySelector('._se_check_proportion'),
+		inputX: content.querySelector('._se_size_x'),
+		inputY: content.querySelector('._se_size_y'),
+		revertBtn: content.querySelector('.se-modal-btn-revert'),
+		asBlock: content.querySelector('[data-command="asBlock"]'),
+		asInline: content.querySelector('[data-command="asInline"]'),
+		fileRemoveBtn: content.querySelector('.se-file-remove'),
+	};
+}

package/src/plugins/modal/image/services/image.size.js

@@ -0,0 +1,198 @@
+import { keyCodeMap } from '../../../../helper';
+import { Figure } from '../../../../modules/contract';
+import { SIZE_UNIT } from '../shared/image.constants';
+
+/**
+ * @class ImageSizeService
+ * @description Handles image resizing, proportion calculations, and size input management.
+ */
+export class ImageSizeService {
+	#main;
+	#$;
+	#state;
+	#pluginOptions;
+
+	#resizing;
+	#origin_w;
+	#origin_h;
+
+	#ratio = { w: 0, h: 0 };
+	#proportion = null;
+	#inputX = null;
+	#inputY = null;
+
+	/**
+	 * @param {import('../index').default} main - The main Image_ plugin instance.
+	 * @param {import('../render/image.html').ModalReturns_image} modalEl - Modal element
+	 */
+	constructor(main, modalEl) {
+		this.#main = main;
+		this.#$ = main.$;
+		this.#state = main.state;
+		this.#pluginOptions = main.pluginOptions;
+
+		this.#resizing = this.#pluginOptions.canResize;
+		this.#origin_w = this.#pluginOptions.defaultWidth === 'auto' ? '' : this.#pluginOptions.defaultWidth;
+		this.#origin_h = this.#pluginOptions.defaultHeight === 'auto' ? '' : this.#pluginOptions.defaultHeight;
+
+		if (this.#resizing) {
+			this.#proportion = modalEl.proportion;
+			this.#inputX = modalEl.inputX;
+			this.#inputY = modalEl.inputY;
+			this.#inputX.value = this.#pluginOptions.defaultWidth;
+			this.#inputY.value = this.#pluginOptions.defaultHeight;
+
+			const ratioChange = this.#OnChangeRatio.bind(this);
+			this.#$.eventManager.addEvent(this.#inputX, 'keyup', this.#OnInputSize.bind(this, 'x'));
+			this.#$.eventManager.addEvent(this.#inputY, 'keyup', this.#OnInputSize.bind(this, 'y'));
+			this.#$.eventManager.addEvent(this.#inputX, 'change', ratioChange);
+			this.#$.eventManager.addEvent(this.#inputY, 'change', ratioChange);
+			this.#$.eventManager.addEvent(this.#proportion, 'change', ratioChange);
+			this.#$.eventManager.addEvent(modalEl.revertBtn, 'click', this.#OnClickRevert.bind(this));
+		}
+	}
+
+	/**
+	 * @description Sets the width and height input values.
+	 * @param {string} w - Width value
+	 * @param {string} h - Height value
+	 */
+	setInputSize(w, h) {
+		this.#inputX.value = w === 'auto' ? '' : w;
+
+		if (this.#state.onlyPercentage) return;
+		this.#inputY.value = h === 'auto' ? '' : h;
+	}
+
+	/**
+	 * @description Gets the current width and height input values.
+	 * @returns {{w: string, h: string}}
+	 */
+	getInputSize() {
+		return {
+			w: this.#inputX?.value || '',
+			h: this.#inputY?.value || '',
+		};
+	}
+
+	/**
+	 * @description Sets the original width and height of the image.
+	 * @param {string} w - Original width
+	 * @param {string} h - Original height
+	 */
+	setOriginSize(w, h) {
+		this.#origin_w = w;
+		this.#origin_h = h;
+	}
+
+	/**
+	 * @description Applies the specified width and height to the image.
+	 * @param {string} w - Image width.
+	 * @param {string} h - Image height.
+	 */
+	applySize(w, h) {
+		w ||= this.#inputX?.value || this.#pluginOptions.defaultWidth;
+		h ||= this.#inputY?.value || this.#pluginOptions.defaultHeight;
+
+		if (this.#state.onlyPercentage) {
+			if (!w) w = '100%';
+			else if (!/%$/.test(w)) w += SIZE_UNIT.PERCENTAGE;
+		}
+		this.#main.figure.setSize(w, h);
+	}
+
+	/**
+	 * @description Called when the modal is opened. Resets size inputs to default.
+	 */
+	on() {
+		if (!this.#resizing) return;
+
+		const x = this.#pluginOptions.defaultWidth;
+		const y = this.#pluginOptions.defaultHeight;
+		this.setInputSize(x, y);
+		this.setOriginSize(x, y);
+	}
+
+	/**
+	 * @description Prepares the size inputs and proportion state when an image is selected.
+	 * @param {SunEditor.Module.Figure.TargetInfo} figureInfo - Figure size information
+	 * @param {string} w - Current width
+	 * @param {string} h - Current height
+	 */
+	ready(figureInfo, w, h) {
+		this.setInputSize(w, h);
+
+		const percentageRotation = this.#state.onlyPercentage && this.#main.figure.isVertical;
+		this.#proportion.checked = true;
+		this.#inputX.disabled = percentageRotation;
+		this.#inputY.disabled = percentageRotation;
+		this.#proportion.disabled = percentageRotation;
+
+		this.#ratio = this.#proportion.checked
+			? figureInfo.ratio
+			: {
+					w: 0,
+					h: 0,
+				};
+	}
+
+	/**
+	 * @description Initializes the size service state.
+	 */
+	init() {
+		this.#ratio = {
+			w: 0,
+			h: 0,
+		};
+
+		if (this.#resizing) {
+			this.setInputSize(this.#pluginOptions.defaultWidth, this.#pluginOptions.defaultHeight);
+			this.#proportion.checked = true;
+		}
+	}
+
+	/**
+	 * @description Handles keyup events on size inputs to calculate proportion.
+	 * @param {'x'|'y'} xy - Axis (`'x'` for width, `'y'` for height)
+	 * @param {KeyboardEvent} e - Event object
+	 */
+	#OnInputSize(xy, e) {
+		if (keyCodeMap.isSpace(e.code)) {
+			e.preventDefault();
+			return;
+		}
+
+		const target = /** @type {HTMLInputElement} */ (e.target);
+		if (xy === 'x' && this.#state.onlyPercentage && Number(target.value) > 100) {
+			target.value = '100';
+		} else if (this.#proportion.checked) {
+			const ratioSize = Figure.CalcRatio(this.#inputX.value, this.#inputY.value, this.#state.sizeUnit, this.#ratio);
+			if (xy === 'x') {
+				this.#inputY.value = String(ratioSize.h);
+			} else {
+				this.#inputX.value = String(ratioSize.w);
+			}
+		}
+	}
+
+	/**
+	 * @description Updates the ratio based on current input values.
+	 */
+	#OnChangeRatio() {
+		this.#ratio = this.#proportion.checked ? Figure.GetRatio(this.#inputX.value, this.#inputY.value, this.#state.sizeUnit) : { w: 0, h: 0 };
+	}
+
+	/**
+	 * @description Reverts the size inputs to the original image size.
+	 */
+	#OnClickRevert() {
+		if (this.#state.onlyPercentage) {
+			this.#inputX.value = Number(this.#origin_w) > 100 ? '100' : this.#origin_w;
+		} else {
+			this.#inputX.value = this.#origin_w;
+			this.#inputY.value = this.#origin_h;
+		}
+	}
+}
+
+export default ImageSizeService;

package/src/plugins/modal/image/services/image.upload.js

@@ -0,0 +1,216 @@
+import { env } from '../../../../helper';
+import { FORMAT_TYPE } from '../shared/image.constants';
+const { NO_EVENT } = env;
+
+/**
+ * @class ImageUploadService
+ * @description Handles image upload operations including file upload, URL upload, and `Base64` conversion.
+ */
+export class ImageUploadService {
+	#main;
+	#$;
+	#pluginOptions;
+
+	#resizing;
+
+	/**
+	 * @param {import('../index').default} main - The main Image_ plugin instance.
+	 */
+	constructor(main) {
+		this.#main = main;
+		this.#$ = main.$;
+		this.#pluginOptions = main.pluginOptions;
+
+		this.#resizing = this.#pluginOptions.canResize;
+
+		this._base64RenderIndex = 0;
+	}
+
+	get #sizeService() {
+		return this.#main.sizeService;
+	}
+
+	/**
+	 * @description Uploads the image to the server.
+	 * @param {SunEditor.EventParams.ImageInfo} info - Image upload info.
+	 */
+	serverUpload(info) {
+		if (!info.files) return;
+
+		// server upload
+		const imageUploadUrl = this.#pluginOptions.uploadUrl;
+		if (typeof imageUploadUrl === 'string' && imageUploadUrl.length > 0) {
+			this.#main.fileManager.upload(imageUploadUrl, this.#pluginOptions.uploadHeaders, info.files, this.#UploadCallBack.bind(this, info), this.#error.bind(this));
+		} else {
+			this.#setBase64(info);
+		}
+	}
+
+	/**
+	 * @description Handles image upload via URL.
+	 * @param {*} info - Image information.
+	 */
+	urlUpload(info) {
+		this.#main.setState('produceIndex', 0);
+		const infoUrl = info.url;
+
+		if (this.#main.modal.isUpdate) this.#updateSrc(infoUrl, info.element, info.files);
+		else this.#produce(infoUrl, info.anchor, info.inputWidth, info.inputHeight, info.align, info.files, info.alt, true);
+	}
+
+	/**
+	 * @description Creates a new image component based on provided parameters.
+	 * @param {string} src - The image source URL.
+	 * @param {?Node} anchor - Optional anchor wrapping the image.
+	 * @param {string} width - Image width.
+	 * @param {string} height - Image height.
+	 * @param {string} align - Image alignment.
+	 * @param {{name: string, size: number}} file - File metadata.
+	 * @param {string} alt - Alternative text.
+	 * @param {boolean} isLast - Indicates if this is the last image in a batch (for scroll and insert behavior).
+	 */
+	#produce(src, anchor, width, height, align, file, alt, isLast) {
+		if (this.#main.as !== FORMAT_TYPE.INLINE) {
+			this.#main.create(src, anchor, width, height, align, file, alt, isLast);
+		} else {
+			this.#main.createInline(src, anchor, width, height, file, alt, isLast);
+		}
+	}
+
+	/**
+	 * @description Updates the image source URL.
+	 * @param {string} src - The new image source.
+	 * @param {HTMLImageElement} element - The image element.
+	 * @param {{ name: string, size: number }} file - File metadata.
+	 */
+	#updateSrc(src, element, file) {
+		element.src = src;
+		this.#main.fileManager.setFileData(element, file);
+		this.#$.component.select(element, this.#main.constructor['key']);
+	}
+
+	/**
+	 * @description Registers the uploaded image and inserts it into the editor.
+	 * @param {SunEditor.EventParams.ImageInfo} info - Image info.
+	 * @param {Object<string, *>} response - Server response data.
+	 */
+	#register(info, response) {
+		this.#main.setState('produceIndex', 0);
+		const fileList = response.result;
+
+		for (let i = 0, len = fileList.length, file; i < len; i++) {
+			file = {
+				name: fileList[i].name,
+				size: fileList[i].size,
+			};
+			if (info.isUpdate) {
+				this.#updateSrc(fileList[i].url, info.element, file);
+				break;
+			} else {
+				this.#produce(fileList[i].url, info.anchor, info.inputWidth, info.inputHeight, info.align, file, info.alt, i === len - 1);
+			}
+		}
+	}
+
+	/**
+	 * @description Converts an image file to `Base64` and inserts it into the editor.
+	 * @param {SunEditor.EventParams.ImageInfo} info - Image upload info.
+	 * @throws {Error} Throws error if `Base64` conversion fails.
+	 */
+	#setBase64(info) {
+		try {
+			const { files, element, anchor, inputWidth, inputHeight, align, alt, isUpdate } = info;
+			const filesLen = this.#main.modal.isUpdate ? 1 : files.length;
+
+			if (filesLen === 0) {
+				this.#$.ui.hideLoading();
+				console.warn('[SUNEDITOR.image.base64.fail] cause : No applicable files');
+				return;
+			}
+
+			this._base64RenderIndex = filesLen;
+			const filesStack = new Array(filesLen);
+
+			if (this.#resizing) {
+				this.#sizeService.setInputSize(inputWidth, inputHeight);
+			}
+
+			for (let i = 0, renderFunc = this.#onRenderBase64.bind(this), reader, file; i < filesLen; i++) {
+				reader = new FileReader();
+				file = files[i];
+
+				reader.onload = function (loadCallback, on_reader, update, updateElement, on_file, index) {
+					filesStack[index] = {
+						result: on_reader.result,
+						file: on_file,
+					};
+
+					if (--this._base64RenderIndex === 0) {
+						loadCallback(update, filesStack, updateElement, anchor, inputWidth, inputHeight, align, alt);
+						this.#$.ui.hideLoading();
+					}
+				}.bind(this, renderFunc, reader, isUpdate, element, file, i);
+
+				reader.readAsDataURL(file);
+			}
+		} catch (error) {
+			this.#$.ui.hideLoading();
+			throw Error(`[SUNEDITOR.plugins.image._setBase64.fail] ${error.message}`);
+		}
+	}
+
+	/**
+	 * @description Inserts an image using a `Base64`-encoded string.
+	 * @param {boolean} update - Whether the image is being updated.
+	 * @param {Array<{result: string, file: { name: string, size: number }}>} filesStack - Stack of `Base64`-encoded files.
+	 * - result: Image url or `Base64`-encoded string
+	 * - file: File metadata ({ name: string, size: number })
+	 * @param {HTMLImageElement} updateElement - The image element being updated.
+	 * @param {?HTMLAnchorElement} anchor - Optional anchor wrapping the image.
+	 * @param {string} width - Image width.
+	 * @param {string} height - Image height.
+	 * @param {string} align - Image alignment.
+	 * @param {string} alt - Alternative text.
+	 */
+	#onRenderBase64(update, filesStack, updateElement, anchor, width, height, align, alt) {
+		this.#main.setState('produceIndex', 0);
+
+		for (let i = 0, len = filesStack.length; i < len; i++) {
+			if (update) {
+				this.#updateSrc(filesStack[i].result, updateElement, filesStack[i].file);
+			} else {
+				this.#produce(filesStack[i].result, anchor, width, height, align, filesStack[i].file, alt, i === len - 1);
+			}
+		}
+	}
+
+	/**
+	 * @description Handles errors during image upload and displays appropriate messages.
+	 * @param {Object<string, *>} response - The error response from the server.
+	 * @returns {Promise<void>}
+	 */
+	async #error(response) {
+		const message = await this.#$.eventManager.triggerEvent('onImageUploadError', { error: response });
+		const err = message === NO_EVENT ? response.errorMessage : message || response.errorMessage;
+		this.#$.ui.alertOpen(err, 'error');
+		console.error('[SUNEDITOR.plugin.image.error]', err);
+	}
+
+	/**
+	 * @description Handles the callback function for image upload completion.
+	 * @param {SunEditor.EventParams.ImageInfo} info - Image information.
+	 * @param {XMLHttpRequest} xmlHttp - The XMLHttpRequest object.
+	 */
+	async #UploadCallBack(info, xmlHttp) {
+		if ((await this.#$.eventManager.triggerEvent('imageUploadHandler', { xmlHttp, info })) === NO_EVENT) {
+			const response = JSON.parse(xmlHttp.responseText);
+			if (response.errorMessage) {
+				this.#error(response);
+			} else {
+				this.#register(info, response);
+			}
+		}
+	}
+}
+
+export default ImageUploadService;

package/src/plugins/modal/image/shared/image.constants.js

@@ -0,0 +1,20 @@
+/**
+ * @description Image plugin constants
+ */
+
+export const DEFAULT_SVG_SIZE = '30%';
+
+export const SIZE_UNIT = {
+	PERCENTAGE: '%',
+	PIXEL: 'px',
+};
+
+/**
+ * @type {{ BLOCK: 'block', INLINE: 'inline' }}
+ */
+export const FORMAT_TYPE = {
+	BLOCK: 'block',
+	INLINE: 'inline',
+};
+
+export const DEFAULT_ACCEPTED_FORMATS = 'image/*';