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

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

@@ -0,0 +1,131 @@
+import { dom } from '../../../../helper';
+import { Modal } from '../../../../modules/contract';
+
+/**
+ * @typedef {object} ModalReturns_video
+ * @property {HTMLElement} html
+ * @property {HTMLElement} alignForm
+ * @property {HTMLElement} fileModalWrapper
+ * @property {HTMLInputElement} videoInputFile
+ * @property {HTMLInputElement} videoUrlFile
+ * @property {HTMLElement} previewSrc
+ * @property {HTMLButtonElement} galleryButton
+ * @property {HTMLInputElement} proportion
+ * @property {HTMLSelectElement} frameRatioOption
+ * @property {HTMLInputElement} inputX
+ * @property {HTMLInputElement} inputY
+ * @property {HTMLButtonElement} revertBtn
+ * @property {HTMLButtonElement} fileRemoveBtn
+ *
+ * @param {SunEditor.Deps} $
+ * @param {*} pluginOptions
+ * @returns {ModalReturns_video}
+ */
+export function CreateHTML_modal({ lang, icons, plugins }, pluginOptions) {
+	let html = /*html*/ `
+	<form method="post" enctype="multipart/form-data">
+		<div class="se-modal-header">
+			<button type="button" data-command="close" class="se-btn se-close-btn" title="${lang.close}" aria-label="${lang.close}">
+			${icons.cancel}
+			</button>
+			<span class="se-modal-title">${lang.video_modal_title}</span>
+		</div>
+		<div class="se-modal-body">`;
+
+	if (pluginOptions.createFileInput) {
+		html += /*html*/ `
+			<div class="se-modal-form">
+				<label>${lang.video_modal_file}</label>
+				${Modal.CreateFileInput({ lang, icons }, pluginOptions)}
+			</div>`;
+	}
+
+	if (pluginOptions.createUrlInput) {
+		html += /*html*/ `
+			<div class="se-modal-form">
+				<label>${lang.video_modal_url}</label>
+				<div class="se-modal-form-files">
+					<input class="se-input-form se-input-url" type="text" data-focus />
+					${
+						plugins.videoGallery
+							? `<button type="button" class="se-btn se-tooltip se-modal-files-edge-button __se__gallery" aria-label="${lang.videoGallery}">
+								${icons.video_gallery}
+								${dom.utils.createTooltipInner(lang.videoGallery)}
+								</button>`
+							: ''
+					}
+				</div>
+				<pre class="se-link-preview"></pre>
+			</div>`;
+	}
+
+	if (pluginOptions.canResize) {
+		const ratioList = pluginOptions.ratioOptions || [
+			{ name: '16:9', value: 0.5625 },
+			{ name: '4:3', value: 0.75 },
+			{ name: '21:9', value: 0.4285 },
+			{ name: '9:16', value: 1.78 },
+		];
+		const ratio = pluginOptions.defaultRatio;
+		const onlyPercentage = pluginOptions.percentageOnlySize;
+		const onlyPercentDisplay = onlyPercentage ? ' style="display: none !important;"' : '';
+		const heightDisplay = !pluginOptions.showHeightInput ? ' style="display: none !important;"' : '';
+		const ratioDisplay = !pluginOptions.showRatioOption ? ' style="display: none !important;"' : '';
+		const onlyWidthDisplay = !onlyPercentage && !pluginOptions.showHeightInput && !pluginOptions.showRatioOption ? ' style="display: none !important;"' : '';
+		html += /*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"${heightDisplay}>${lang.height}</label>
+					<label class="size-h"${ratioDisplay}>(${lang.ratio})</label>
+				</div>
+				<input class="se-input-control _se_size_x" placeholder="100%"${onlyPercentage ? ' type="number" min="1"' : 'type="text"'}${onlyPercentage ? ' max="100"' : ''}/>
+				<label class="se-modal-size-x"${onlyWidthDisplay}>${onlyPercentage ? '%' : 'x'}</label>
+				<input class="se-input-control _se_size_y" placeholder="${pluginOptions.defaultRatio * 100}%"
+				${onlyPercentage ? ' type="number" min="1"' : 'type="text"'}${onlyPercentage ? ' max="100"' : ''}${heightDisplay}/>
+				<select class="se-input-select se-modal-ratio" title="${lang.ratio}" aria-label="${lang.ratio}"${ratioDisplay}>
+					${!heightDisplay ? '<option value=""> - </option>' : ''} 
+					${ratioList.map((ratioOption) => `<option value="${ratioOption.value}"${ratio.toString() === ratioOption.value.toString() ? ' selected' : ''}>${ratioOption.name}</option>`).join('')}
+				</select>
+				<button type="button" title="${lang.revert}" aria-label="${lang.revert}" class="se-btn se-modal-btn-revert">${icons.revert}</button>
+			</div>
+			<div class="se-modal-form se-modal-form-footer"${onlyPercentDisplay}${onlyWidthDisplay}>
+				<label>
+					<input type="checkbox" class="se-modal-btn-check _se_check_proportion" />&nbsp;
+					<span>${lang.proportion}</span>
+				</label>
+			</div>`;
+	}
+
+	html += /*html*/ `
+		</div>
+		<div class="se-modal-footer">
+			<div class="se-figure-align">
+				<label><input type="radio" name="suneditor_video_radio" class="se-modal-btn-radio" value="none" checked>${lang.basic}</label>
+				<label><input type="radio" name="suneditor_video_radio" class="se-modal-btn-radio" value="left">${lang.left}</label>
+				<label><input type="radio" name="suneditor_video_radio" class="se-modal-btn-radio" value="center">${lang.center}</label>
+				<label><input type="radio" name="suneditor_video_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'),
+		videoInputFile: content.querySelector('.__se__file_input'),
+		videoUrlFile: content.querySelector('.se-input-url'),
+		previewSrc: content.querySelector('.se-link-preview'),
+		galleryButton: content.querySelector('.__se__gallery'),
+		proportion: content.querySelector('._se_check_proportion'),
+		frameRatioOption: content.querySelector('.se-modal-ratio'),
+		inputX: content.querySelector('._se_size_x'),
+		inputY: content.querySelector('._se_size_y'),
+		revertBtn: content.querySelector('.se-modal-btn-revert'),
+		fileRemoveBtn: content.querySelector('.se-file-remove'),
+	};
+}

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

@@ -0,0 +1,281 @@
+import { keyCodeMap, numbers, dom } from '../../../../helper';
+import { Figure } from '../../../../modules/contract';
+
+/**
+ * @class VideoSizeService
+ * @description Handles video size operations including ratio management and size input controls.
+ */
+export class VideoSizeService {
+	#main;
+	#$;
+	#state;
+	#pluginOptions;
+	#resizing;
+
+	#frameRatio;
+	#defaultSizeX;
+	#defaultSizeY;
+	#origin_w;
+	#origin_h;
+
+	#ratio = { w: 0, h: 0 };
+	#proportion = null;
+	#inputX = null;
+	#inputY = null;
+	#initRatioValue = null;
+
+	/**
+	 * @param {import('../index').default} main - The main Video plugin instance.
+	 * @param {import('../render/video.html').ModalReturns_video} 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.#frameRatio = this.#state.defaultRatio;
+		this.#defaultSizeX = '100%';
+		this.#defaultSizeY = this.#pluginOptions.defaultRatio * 100 + '%';
+		this.#origin_w = this.#pluginOptions.defaultWidth === '100%' ? '' : this.#pluginOptions.defaultWidth;
+		this.#origin_h = this.#pluginOptions.defaultHeight === this.#state.defaultRatio ? '' : this.#pluginOptions.defaultHeight;
+
+		if (this.#resizing) {
+			this.#proportion = modalEl.proportion;
+			this.frameRatioOption = modalEl.frameRatioOption;
+			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(this.frameRatioOption, 'change', this.#SetRatio.bind(this));
+			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 === this.#defaultSizeX ? '' : w;
+
+		if (this.#state.onlyPercentage) return;
+		this.#inputY.value = h === this.#defaultSizeY ? '' : 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 video.
+	 * @param {string} w - Original width
+	 * @param {string} h - Original height
+	 */
+	setOriginSize(w, h) {
+		this.#origin_w = w;
+		this.#origin_h = h;
+	}
+
+	/**
+	 * @description Sets the size of the video element.
+	 * @param {string|number} w - The width of the video.
+	 * @param {string|number} h - The height of the video.
+	 */
+	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 += '%';
+		}
+		this.#main.figure.setSize(w, h);
+	}
+
+	/**
+	 * @description Resolves the final size of the video element, checking if it has changed from the current size.
+	 * @param {string} width - Desired width
+	 * @param {string} height - Desired height
+	 * @param {HTMLElement} oFrame - The video/iframe element
+	 * @param {boolean} isUpdate - Whether we are updating an existing component
+	 * @returns {{width: string, height: string, isChanged: boolean}} Resolved size info
+	 */
+
+	resolveSize(width, height, oFrame, isUpdate) {
+		width ||= this.#defaultSizeX;
+		height ||= this.#frameRatio;
+
+		const size = this.#main.figure.getSize(oFrame);
+		const inputUpdate = size.w !== width || size.h !== height;
+		const isChanged = !isUpdate || inputUpdate;
+
+		// set size
+		if (isChanged) {
+			if (this.#initRatioValue !== this.frameRatioOption?.value) this.#main.figure.deleteTransform();
+			this.applySize(width, height);
+		}
+
+		return { width, height, isChanged };
+	}
+
+	/**
+	 * @description Called when the modal is opened. Initializes inputs and ratio options.
+	 * @param {boolean} isUpdate - Indicates whether the modal is for editing an existing component (`true`) or registering a new one (`false`).
+	 */
+	on(isUpdate) {
+		if (!this.#resizing) return;
+
+		if (!isUpdate) {
+			const x = this.#pluginOptions.defaultWidth;
+			const y = this.#pluginOptions.defaultHeight;
+			this.setInputSize(x, y);
+			this.setOriginSize(x, y);
+			this.#proportion.disabled = true;
+		}
+
+		this.#setRatioSelect(this.#main.figure.isVertical ? '' : this.#origin_h || this.#state.defaultRatio);
+		this.#initRatioValue = this.frameRatioOption?.value;
+	}
+
+	/**
+	 * @description Prepares the size inputs and options when a video component is selected.
+	 * @param {import('../../../../modules/contract/Figure').FigureTargetInfo} figureInfo - Figure size information
+	 * @param {HTMLElement} target - The selected video/iframe element
+	 */
+	ready(figureInfo, target) {
+		const { dw, dh } = this.#main.figure.getSize(target);
+		this.setInputSize(dw, dh);
+
+		const h = figureInfo.height || figureInfo.h || this.#origin_h || '';
+		if (!this.#setRatioSelect(h)) this.#inputY.value = String(this.#state.onlyPercentage ? numbers.get(h, 2) : h);
+
+		const percentageRotation = this.#state.onlyPercentage && this.#main.figure.isVertical;
+		this.#inputX.disabled = percentageRotation;
+		this.#inputY.disabled = percentageRotation;
+		this.#proportion.checked = !figureInfo.isVertical;
+		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) return;
+
+		this.setInputSize(this.#pluginOptions.defaultWidth, this.#pluginOptions.defaultHeight);
+		this.#proportion.checked = false;
+		this.#proportion.disabled = true;
+		this.#setRatioSelect(this.#state.defaultRatio);
+	}
+
+	/**
+	 * @description Reverts the size inputs to the original video 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;
+		}
+	}
+
+	/**
+	 * @description Selects a ratio option in the ratio dropdown.
+	 * @param {string|number} value - The selected ratio value.
+	 * @returns {boolean} Returns `true` if a ratio was selected.
+	 */
+	#setRatioSelect(value) {
+		if (!this.frameRatioOption) return;
+
+		let ratioSelected = false;
+		const ratioOption = this.frameRatioOption.options;
+
+		if (/%$/.test(value + '') || this.#state.onlyPercentage) value = numbers.get(value, 2) / 100 + '';
+		else if (!numbers.is(value) || Number(value) >= 1) value = '';
+
+		this.#inputY.placeholder = '';
+		for (let i = 0, len = ratioOption.length; i < len; i++) {
+			if (ratioOption[i].value === value) {
+				ratioSelected = ratioOption[i].selected = true;
+				this.#inputY.placeholder = !value ? '' : Number(value) * 100 + '%';
+			} else {
+				ratioOption[i].selected = false;
+			}
+		}
+
+		return ratioSelected;
+	}
+
+	/**
+	 * @description Handles the ratio selection change event.
+	 * @param {InputEvent} e - Event object
+	 */
+	#SetRatio(e) {
+		/** @type {HTMLSelectElement} */
+		const eventTarget = dom.query.getEventTarget(e);
+		const value = eventTarget.options[eventTarget.selectedIndex].value;
+		this.#defaultSizeY = this.#main.figure.autoRatio.current = this.#frameRatio = !value ? this.#defaultSizeY : Number(value) * 100 + '%';
+		this.#inputY.placeholder = !value ? '' : Number(value) * 100 + '%';
+		this.#inputY.value = '';
+	}
+
+	/**
+	 * @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 Handles keyup events on size inputs to calculate proportion or update ratio selection.
+	 * @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;
+		}
+
+		/** @type {HTMLInputElement} */
+		const eventTarget = dom.query.getEventTarget(e);
+		if (xy === 'x' && this.#state.onlyPercentage && Number(eventTarget.value) > 100) {
+			eventTarget.value = '100';
+		} else if (this.#proportion.checked && !this.frameRatioOption?.value) {
+			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);
+			}
+		}
+
+		if (xy === 'y') {
+			this.#setRatioSelect(eventTarget.value || this.#state.defaultRatio);
+		}
+	}
+}
+
+export default VideoSizeService;

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

@@ -0,0 +1,92 @@
+import { env } from '../../../../helper';
+const { NO_EVENT } = env;
+
+/**
+ * @class VideoUploadService
+ * @description Handles video upload operations including server upload and registration.
+ */
+export class VideoUploadService {
+	#main;
+	#$;
+	#pluginOptions;
+
+	/**
+	 * @param {import('../index').default} main - The main Video plugin instance.
+	 */
+	constructor(main) {
+		this.#main = main;
+		this.#$ = main.$;
+		this.#pluginOptions = main.pluginOptions;
+	}
+
+	/**
+	 * @description Uploads a video to the server using an external upload handler.
+	 * @param {SunEditor.EventParams.VideoInfo} info - Video information object.
+	 * @param {FileList} files - The video files to upload.
+	 */
+	serverUpload(info, files) {
+		if (!files) return;
+
+		const videoUploadUrl = this.#pluginOptions.uploadUrl;
+		if (typeof videoUploadUrl === 'string' && videoUploadUrl.length > 0) {
+			this.#main.fileManager.upload(videoUploadUrl, this.#pluginOptions.uploadHeaders, files, this.#UploadCallBack.bind(this, info), this.#error.bind(this));
+		}
+	}
+
+	/**
+	 * @description Registers the uploaded video in the editor.
+	 * @param {SunEditor.EventParams.VideoInfo} info - Video information object.
+	 * @param {Object<string, *>} response - Server response containing video data.
+	 */
+	#register(info, response) {
+		const fileList = response.result;
+		const videoTag = this.#main.createVideoTag();
+
+		for (let i = 0, len = fileList.length; i < len; i++) {
+			const ctag = info.isUpdate ? info.element : /** @type {HTMLIFrameElement|HTMLVideoElement} */ (videoTag.cloneNode(false));
+			this.#main.create(
+				ctag,
+				fileList[i].url,
+				info.inputWidth,
+				info.inputHeight,
+				info.align,
+				info.isUpdate,
+				{
+					name: fileList[i].name,
+					size: fileList[i].size,
+				},
+				i === len - 1,
+			);
+		}
+	}
+
+	/**
+	 * @description Handles video upload errors.
+	 * @param {Object<string, *>} response - The error response object.
+	 * @returns {Promise<void>}
+	 */
+	async #error(response) {
+		const message = await this.#$.eventManager.triggerEvent('onVideoUploadError', { error: response });
+		const err = message === NO_EVENT ? response.errorMessage : message || response.errorMessage;
+		this.#$.ui.alertOpen(err, 'error');
+		console.error('[SUNEDITOR.plugin.video.error]', message);
+	}
+
+	/**
+	 * @description Handles the callback function for video upload completion.
+	 * @param {SunEditor.EventParams.VideoInfo} info - Video information.
+	 * @param {XMLHttpRequest} xmlHttp - The XMLHttpRequest object.
+	 */
+	async #UploadCallBack(info, xmlHttp) {
+		if ((await this.#$.eventManager.triggerEvent('videoUploadHandler', { xmlHttp, info })) === NO_EVENT) {
+			const response = JSON.parse(xmlHttp.responseText);
+			if (response.errorMessage) {
+				this.#error(response);
+			} else {
+				this.#register(info, response);
+			}
+		}
+	}
+}
+
+export default VideoUploadService;