fix: usage of draft title

fixes #29

package.json

@@ -47,7 +47,7 @@
     "requestidlecallback-polyfill": "^1.0.2",
     "rimraf": "^5.0.5",
     "ts-node": "^10.9.2",
-    "tw-react": "^0.6.2",
+    "tw-react": "^0.6.3",
     "tw5-typed": "^0.5.7",
     "typescript": "^5.4.3"
   },

src/tw-whiteboard/components/App.tsx

@@ -64,6 +64,7 @@ export function App(props: IAppProps & IDefaultWidgetProps): JSX.Element {
     parentWidget,
     isDarkMode,
     locale,
+    isDraft,
     onReady,
   } = props;
 
@@ -141,9 +142,10 @@ export function App(props: IAppProps & IDefaultWidgetProps): JSX.Element {
 
   // emergency save on close or switch to other editor (by changing the type field) or readonly
   // this only work as willUnMount
+  // useless since we have edit template
   useEffect(() => {
     return () => {
-      if (readonly) return;
+      if (readonly ?? isDraft) return;
       void (async () => {
         if (!editor) return;
         onSave(await serializeTldrawJson(editor.store));

src/tw-whiteboard/tiddlywiki-ui/EditTemplate/body/edit-whiteboard.tid

@@ -1,10 +1,8 @@
 title: $:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/EditTemplate/body/edit-whiteboard
 
-\define lingo-base() $:/language/EditTemplate/Body/
+\procedure lingo-base() $:/language/EditTemplate/Body/
 
 <div class="tw-whiteboard-edit-body-container">
-<!-- title is `"Draft of 'AAA'"` from <<currentTiddler>> when in draft mode. -->
-<$set name="tiddler" value={{!!title}} emptyValue=<<currentTiddler>>>
-<$edit-whiteboard tiddler=<<tiddler>> draftTitle={{!!draft.title}} height="500px" />
-</$set>
+  <!-- title is `"Draft of 'AAA'"` from <<currentTiddler>> when in draft mode. -->
+  <$edit-whiteboard tiddler=<<currentTiddler>> draftTitle={{!!draft.title}} height="500px" />
 </div>

src/tw-whiteboard/type.d.ts

@@ -1,13 +1,19 @@
+/* eslint-disable @typescript-eslint/triple-slash-reference */
+/// <reference path="widget-type.d.ts" />
+/* eslint-disable @typescript-eslint/no-explicit-any */
 declare module '$:/plugins/linonetwo/tw-react/widget.js' {
-  import type { FullReactDomType, IReactWidget, ITWReactProps, ITWReactPropsDefault } from 'tw-react';
-  import type { widget as Widget } from '$:/core/modules/widgets/widget.js';
+  import type { IReactWidget, ITWReactProps, ITWReactPropsDefault } from 'tw-react/widget-type';
+  import type { Widget } from 'tiddlywiki';
   import type * as ReactType from 'react';
+  // import type * as ReactDomType from 'react-dom';
+  import type * as ReactDomClientType from 'react-dom/client';
 
   export abstract class widget<
     IProps extends ITWReactProps = ITWReactPropsDefault,
   > extends Widget implements IReactWidget<IProps> {
-    root?: ReturnType<FullReactDomType['createRoot']> | undefined;
+    root?: ReturnType<typeof ReactDomClientType['createRoot']> | undefined;
     containerElement?: HTMLDivElement | undefined;
+    destroy(): void;
     getProps?: () => IProps;
     /**
      * User of tw-react need to assign his react component to this property.
@@ -21,5 +27,6 @@ declare module '$:/plugins/linonetwo/tw-react/widget.js' {
 }
 
 declare module '$:/plugins/linonetwo/tw-react/index.js' {
-  export * from 'tw-react';
+  export * from 'tw-react/dist/lib/hooks';
+  export * from 'tw-react/dist/lib/widget-type';
 }

src/tw-whiteboard/widget.ts

@@ -18,7 +18,7 @@ class TldrawWhiteBoardWidget extends Widget<IAppProps> {
       readonly: this.getAttribute('readonly') === 'yes' || this.getAttribute('readonly') === 'true',
       zoomToFit: this.getAttribute('zoomToFit') !== 'no' && this.getAttribute('zoomToFit') === 'false',
       zoom: this.getAttribute('zoom'),
-      isDraft: this.editTitle === undefined ? false : Boolean(this.getAttribute('draftTitle')),
+      isDraft: this.isDraft,
       locale: $tw.wiki.getTiddlerText('$:/language') === '$:/languages/zh-Hans' ? 'zh-cn' : 'en',
       isDarkMode: $tw.wiki.getTiddler($tw.wiki.getTiddlerText('$:/palette') ?? '')?.fields?.['color-scheme'] === 'dark',
       onReady: this.onReady,
@@ -36,6 +36,15 @@ class TldrawWhiteBoardWidget extends Widget<IAppProps> {
     this.ready = true;
   };
 
+  private get isDraft() {
+    return this.editTitle === undefined ? false : Boolean(this.getAttribute('draftTitle'));
+  }
+
+  destroy() {
+    super.destroy?.();
+    this.ready = false;
+  }
+
   public refresh(changedTiddlers: IChangedTiddlers): boolean {
     if (!this.ready) return false;
     if (changedTiddlers['$:/state/Whiteboard/PageLayout/focusedTiddler'] || changedTiddlers['$:/palette'] || changedTiddlers['$:/language']) {
@@ -74,14 +83,18 @@ class TldrawWhiteBoardWidget extends Widget<IAppProps> {
     if (this.editTitle === '' || this.editTitle === undefined) {
       return;
     }
+    // prevent save after destroy. On react unmount, emergency save in its willUnmount will try to call onSave. But when in story view and it is draft, this will cause save draft while tw is trying to delete draft. Cause draft not delete after end editing.
+    if (this.isDraft && !this.ready) return;
     // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
     const previousTiddler = $tw.wiki.getTiddler(this.editTitle);
     // prevent useless call to addTiddler
     if (previousTiddler?.fields.text !== newText) {
       // use setText for DraftTiddler, otherwise if use addTiddler we will make it a real tiddler immediately.
       $tw.wiki.setText(this.editTitle, 'text', undefined, newText);
       // set tiddler type
-      $tw.wiki.setText(this.editTitle, 'type', undefined, 'application/vnd.tldraw+json');
+      if (previousTiddler?.fields.type !== 'application/vnd.tldraw+json') {
+        $tw.wiki.setText(this.editTitle, 'type', undefined, 'application/vnd.tldraw+json');
+      }
     }
     this.unlock();
   };

tsconfig.json

@@ -4,7 +4,7 @@
     "declaration": false,
     "jsx": "react-jsx",
     "baseUrl": "./",
-    "typeRoots" : ["node_modules/@types", "node_modules/tw5-typed", "node_modules/tw-react/dist/lib"],
+    "typeRoots" : ["./node_modules/@types", "./node_modules/tw5-typed", "./node_modules/tw-react/dist/lib"],
     "lib": ["DOM", "ESNext"]
   },
   "include": ["src"],