#2 - Feature: Auto save (#10)

* Decorate tab header

* Prevent re-render on saving the same file

`setViewData(data, false)` will be called by `save()` when we have more than one split/tab holding the same file.

If we only have one split/tab of the file, then `setViewData()` won't be called.

* Auto save

* Delete debug console log

* Revert "Delete debug console log"

This reverts commit b11304b.

* Revert "Auto save"

This reverts commit 17ecb34.

* Auto save through `onChange()` and `requestSave()`

* Unsubscribe when editor refresh or unmount

src/KetcherReact.tsx

@@ -7,19 +7,21 @@ const structServiceProvider = new StandaloneStructServiceProvider();
 
 type Props = {
 	data: string;
-	onInit: (ketcher: Ketcher) => void;
+	onInit: (ketcher: Ketcher, subscriber: any) => void;
+	onChange: () => void;
 };
 
-const KetcherReact = ({ data, onInit }: Props) => {
+const KetcherReact = ({ data, onInit, onChange }: Props) => {
 	return (
 		<div className="ketcher-container">
 			<Editor
-				errorHandler={(_message: string) => {}}
+				errorHandler={(_message: string) => { }}
 				staticResourcesUrl="./"
 				structServiceProvider={structServiceProvider}
 				onInit={(ketcher: Ketcher) => {
 					ketcher.setMolecule(data);
-					onInit(ketcher);
+					const subscriber = ketcher.editor.subscribe("change", operations => { onChange() })
+					onInit(ketcher, subscriber);
 				}}
 			/>
 		</div>

src/ketView.tsx

@@ -8,31 +8,45 @@ export const VIEW_TYPE_KET = "ket-view";
 
 export class KetView extends TextFileView {
 	ketcher: Ketcher;
+	subscriber: any;
 
 	getViewData() {
 		return this.data;
 	}
 
-	// If clear is set, then it means we're opening a completely different file.
 	setViewData(data: string, _clear: boolean) {
 		this.data = data;
 
-		ReactDOM.unmountComponentAtNode(this.containerEl.children[1]);
-		const container = this.containerEl.children[1];
-		ReactDOM.render(
-			<React.StrictMode>
-				<KetcherReact
-					data={this.data}
-					onInit={(ketcher: Ketcher) => {
-						this.ketcher = ketcher;
-						// https://github.com/epam/ketcher/issues/2250
-						// @ts-ignore
-						global.ketcher = ketcher;
-					}}
-				/>
-			</React.StrictMode>,
-			container
-		);
+		// If clear is set, then it means we're opening a completely different file.
+		if (_clear) {
+			this.ketcher?.editor.unsubscribe("change", this.subscriber);
+			ReactDOM.unmountComponentAtNode(this.containerEl.children[1]);
+			const container = this.containerEl.children[1];
+			ReactDOM.render(
+				<React.StrictMode>
+					<KetcherReact
+						data={this.data}
+						onInit={(ketcher: Ketcher, subscriber: any) => {
+							this.ketcher = ketcher;
+							// https://github.com/epam/ketcher/issues/2250
+							// @ts-ignore
+							global.ketcher = ketcher;
+							this.subscriber = subscriber;
+						}}
+						onChange={async () => {
+							this.data = await this.ketcher.getKet();
+							this.requestSave();
+						}}
+					/>
+				</React.StrictMode>,
+				container
+			);
+		}
+		// Updates the same file in other tabs/splits after `save()` is called
+		else {
+			this.ketcher.setMolecule(this.data);
+		}
+
 	}
 
 	clear() {}
@@ -41,6 +55,14 @@ export class KetView extends TextFileView {
 		return VIEW_TYPE_KET;
 	}
 
+	getIcon() {
+		return "ketcher";
+	}
+
+	getDisplayText() {
+		return this.file?.basename ?? "ketcher";
+	}
+
 	async onOpen() {
 		this.addAction("save", "Save", async (_eventType) => {
 			try {
@@ -54,6 +76,7 @@ export class KetView extends TextFileView {
 	}
 
 	async onClose() {
+		this.ketcher.editor.unsubscribe("change", this.subscriber);
 		ReactDOM.unmountComponentAtNode(this.containerEl.children[1]);
 	}
 }