WiP on adding minimal editor after frontend file upload

Author: jrief

client/browser/BrowserEditor.tsx

@@ -0,0 +1,35 @@
+import React, {lazy, Suspense, useMemo} from 'react';
+import SelectLabels from '../finder/SelectLabels';
+
+
+export default function BrowserEditor(props) {
+	const {uploadedFile, mainContent} = props;
+	const DetailEditor = useMemo(() => {
+		if (uploadedFile.file_info.browser_component) {
+			const component = `./components/browser/${uploadedFile.file_info.browser_component}.js`;
+			const LazyItem = lazy(() => import(component));
+			return (props) => (
+				<div className="detail-editor">
+					<Suspense fallback={<span>{gettext("Loading...")}</span>}>
+						<LazyItem fileInfo={props.file_info} />
+					</Suspense>
+					<form>
+						<SelectLabels settings={{labels: uploadedFile.labels, mainContent: mainContent}} />
+						<div dangerouslySetInnerHTML={{__html: props.form_html}} />
+					</form>
+				</div>
+			);
+		}
+		return (props) => (
+			<div className="detail-editor">
+				<img src={props.file_info.thumbnail_url} />
+				<form>
+					<SelectLabels settings={{labels: uploadedFile.labels, mainContent: mainContent}} />
+					<div dangerouslySetInnerHTML={{__html: props.form_html}} />
+				</form>
+			</div>
+		);
+	}, [uploadedFile.file_info.browser_component]);
+
+	return <DetailEditor {...uploadedFile} />;
+}

client/browser/FileSelectDialog.tsx

@@ -9,6 +9,7 @@ import React, {
 } from 'react';
 import {Tooltip} from 'react-tooltip';
 import FigureLabels from '../finder/FigureLabels';
+import BrowserEditor from './BrowserEditor';
 import FileUploader	 from '../finder/FileUploader';
 import FolderStructure from './FolderStructure';
 import Menu from './Menu';
@@ -68,6 +69,8 @@ const FilesList = memo((props: any) => {
 export default function FileSelectDialog(props) {
 	const {baseUrl, csrfToken, realm, selectFile} = props;
 	const [structure, setStructure] = useState({root_folder: null, last_folder: null, files: null});
+	const [uploadedFile, setUploadedFile] = useState(null);
+	const ref = useRef(null);
 	const uploaderRef = useRef(null);
 
 	useEffect(() => {
@@ -107,13 +110,12 @@ export default function FileSelectDialog(props) {
 		setStructure({...structure});
 	}
 
-	function handleUpload(folderId, files) {
-		fetchFiles(folderId);
-		selectFile(files[0]);
+	function handleUpload(folderId, uploadedFiles) {
+		setUploadedFile(uploadedFiles[0]);
 	}
 
 	return structure.root_folder && (<>
-		<div className="wrapper">
+		<div className="wrapper" ref={ref}>
 			<Menu
 				lastFolderId={structure.last_folder}
 				fetchFiles={fetchFiles}
@@ -131,6 +133,8 @@ export default function FileSelectDialog(props) {
 						/>
 					</ul>
 				</nav>
+				{uploadedFile ?
+				<BrowserEditor uploadedFile={uploadedFile} mainContent={ref.current} /> :
 				<FileUploader
 					folderId={structure.last_folder}
 					handleUpload={handleUpload}
@@ -140,7 +144,7 @@ export default function FileSelectDialog(props) {
 					structure.files === null ?
 					<div className="status">{gettext("Loading files…")}</div> :
 					<FilesList files={structure.files} selectFile={selectFile} />
-				}</FileUploader>
+				}</FileUploader>}
 			</div>
 		</div>
 		<Tooltip id="django-finder-tooltip" place="bottom-start" />

client/components/browser/Image.tsx

@@ -0,0 +1,40 @@
+import React, {useRef, useState} from 'react';
+import ReactCrop, {Crop} from 'react-image-crop';
+
+
+export default function Image(props) {
+	const {fileInfo} = props;
+	const ref = useRef(null);
+	const [crop, setCrop] = useState<Crop>(null);
+
+	function handleChange(crop) {
+		const shadowRoot = ref.current?.getRootNode();
+		if (!shadowRoot)
+			return;
+		const cropFields = {
+			x: shadowRoot.getElementById('id_crop_x') as HTMLInputElement,
+			y: shadowRoot.getElementById('id_crop_y') as HTMLInputElement,
+			size: shadowRoot.getElementById('id_crop_size') as HTMLInputElement,
+			width: shadowRoot.getElementById('id_width') as HTMLInputElement,
+			height: shadowRoot.getElementById('id_height') as HTMLInputElement,
+		};
+
+		setCrop(crop);
+		if (crop) {
+			const rect = ref.current.getBoundingClientRect();
+			cropFields.x.value = String(crop.x / rect.width * parseInt(cropFields.width.value));
+			cropFields.y.value = String(crop.y / rect.height * parseInt(cropFields.height.value));
+			cropFields.size.value = String(crop.width / rect.width * parseInt(cropFields.width.value));
+		} else {
+			cropFields.x.value = '';
+			cropFields.y.value = '';
+			cropFields.size.value = '';
+		}
+	}
+
+	return (
+		<ReactCrop crop={crop} aspect={1} onChange={handleChange}>
+			<img className="editable" src={fileInfo.download_url} ref={ref} />
+		</ReactCrop>
+	);
+}

client/esbuild.config.mjs

@@ -11,6 +11,7 @@ await build({
     'client/finder-select.ts',
     'client/folder-admin.tsx',
     'client/file-admin.tsx',
+    'client/components/browser/*.tsx',
     'client/components/editor/*.tsx',
     'client/components/folderitem/*.tsx',
     'client/components/menuextension/*.tsx',