From 6527bae7e46a14a6f4bc253e712e8917a4b977cd Mon Sep 17 00:00:00 2001
From: lin onetwo <linonetwo012@gmail.com>
Date: Sat, 30 Mar 2024 14:59:28 +0800
Subject: [PATCH 1/9] refactor: Transclusion -> Transclude

---
 .../language/en-GB/Translations.multids          |  8 ++++----
 .../language/zh-Hans/Translations.multids        |  8 ++++----
 .../tldraw/shapes/transclude/component.tsx       | 16 ++++++++--------
 .../tldraw/shapes/transclude/style.css           |  8 ++++----
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/tw-whiteboard/language/en-GB/Translations.multids b/src/tw-whiteboard/language/en-GB/Translations.multids
index 99c2444..bfe601d 100644
--- a/src/tw-whiteboard/language/en-GB/Translations.multids
+++ b/src/tw-whiteboard/language/en-GB/Translations.multids
@@ -3,7 +3,7 @@ title: $:/plugins/linonetwo/tw-whiteboard/language/en-GB/
 Name: Whiteboard
 Description: Tiny little drawing app in TW, based on tldraw. Providing diagram widget and whiteboard view.
 Configs/Description: These settings let you customise the behaviour of "Whiteboard" plugin.
-Tools/Transclusion/PlaceHolder: Tiddler title transclude
-Tools/Transclusion/NoTiddlerTitle: Tiddler title not filled
-Tools/Transclusion/TiddlerMissing: Tiddler missing
-Tools/Transclusion/NoTextOnField: No text on field
\ No newline at end of file
+Tools/Transclude/PlaceHolder: Tiddler title transclude
+Tools/Transclude/NoTiddlerTitle: Tiddler title not filled
+Tools/Transclude/TiddlerMissing: Tiddler missing
+Tools/Transclude/NoTextOnField: No text on field
\ No newline at end of file
diff --git a/src/tw-whiteboard/language/zh-Hans/Translations.multids b/src/tw-whiteboard/language/zh-Hans/Translations.multids
index ff33046..c74afd2 100644
--- a/src/tw-whiteboard/language/zh-Hans/Translations.multids
+++ b/src/tw-whiteboard/language/zh-Hans/Translations.multids
@@ -3,7 +3,7 @@ title: $:/plugins/linonetwo/tw-whiteboard/language/zh-Hans/
 Name: 白板
 Description: 太微白板应用，提供图表微件和白板视图，基于开源白板「TlDraw」
 Configs/Description: 通过这些设置，您可以自定义「白板」插件的行为。
-Tools/Transclusion/PlaceHolder: 条目标题去嵌入
-Tools/Transclusion/NoTiddlerTitle: 未填条目标题
-Tools/Transclusion/TiddlerMissing: 条目不存在
-Tools/Transclusion/NoTextOnField: 条目此字段无文本内容
\ No newline at end of file
+Tools/Transclude/PlaceHolder: 条目标题去嵌入
+Tools/Transclude/NoTiddlerTitle: 未填条目标题
+Tools/Transclude/TiddlerMissing: 条目不存在
+Tools/Transclude/NoTextOnField: 条目此字段无文本内容
\ No newline at end of file
diff --git a/src/tw-whiteboard/tldraw/shapes/transclude/component.tsx b/src/tw-whiteboard/tldraw/shapes/transclude/component.tsx
index a349fcf..259a682 100644
--- a/src/tw-whiteboard/tldraw/shapes/transclude/component.tsx
+++ b/src/tw-whiteboard/tldraw/shapes/transclude/component.tsx
@@ -19,11 +19,11 @@ export function TranscludeComponent({ shape, isDarkMode }: { isDarkMode: boolean
   const adjustedColor = shape.props.color === 'black' ? 'grey' : shape.props.color;
 
   const astNode = useMemo<IParseTreeNode>(() => {
-    if (!tiddlerTitle) return wrapTiddlerAst({ type: 'text', text: `${lingo('Tools/Transclusion/NoTiddlerTitle')}` });
+    if (!tiddlerTitle) return wrapTiddlerAst({ type: 'text', text: `${lingo('Tools/Transclude/NoTiddlerTitle')}` });
     const fields = $tw.wiki.getTiddler(tiddlerTitle)?.fields;
-    if (fields === undefined) return wrapTiddlerAst({ type: 'text', text: `${tiddlerTitle} ${lingo('Tools/Transclusion/TiddlerMissing')}` });
+    if (fields === undefined) return wrapTiddlerAst({ type: 'text', text: `${tiddlerTitle} ${lingo('Tools/Transclude/TiddlerMissing')}` });
     const text = fields?.[tiddlerField];
-    if (!text) return wrapTiddlerAst({ type: 'text', text: `${tiddlerTitle} ${lingo('Tools/Transclusion/NoTextOnField')} ${tiddlerField}` });
+    if (!text) return wrapTiddlerAst({ type: 'text', text: `${tiddlerTitle} ${lingo('Tools/Transclude/NoTextOnField')} ${tiddlerField}` });
     const childTree = $tw.wiki.parseText(fields.type || 'text/vnd.tiddlywiki', String(text)).tree;
     return { type: 'tiddler', children: childTree };
   }, [tiddlerField, tiddlerTitle]);
@@ -50,9 +50,9 @@ export function TranscludeComponent({ shape, isDarkMode }: { isDarkMode: boolean
   };
 
   return (
-    <div className='transclusion-shape-component-outer'>
+    <div className='transclude-shape-component-outer'>
       <div
-        className='transclusion-shape-component-inner transclusion-shape-edit-mode'
+        className='transclude-shape-component-inner transclude-shape-edit-mode'
         key='edit-title'
         style={{ display: isEditing ? undefined : 'none', ...sharedStyle }}
         onClick={editTitleContainerOnClick}
@@ -61,15 +61,15 @@ export function TranscludeComponent({ shape, isDarkMode }: { isDarkMode: boolean
           tabIndex={1}
           autoFocus
           type='text'
-          placeholder={lingo('Tools/Transclusion/PlaceHolder')}
+          placeholder={lingo('Tools/Transclude/PlaceHolder')}
           defaultValue={tiddlerTitle}
           ref={editTitleInputContainerReference}
           onChange={onTitleInputChange}
         />
       </div>
-      <div className='transclusion-shape-component-inner' key='render' style={{ display: isEditing ? 'none' : undefined, ...sharedStyle }}>
+      <div className='transclude-shape-component-inner' key='render' style={{ display: isEditing ? 'none' : undefined, ...sharedStyle }}>
         <h2>{tiddlerTitle}</h2>
-        <div ref={transcludeRenderContainerReference}>Transclusion loading...</div>
+        <div ref={transcludeRenderContainerReference}>Transclude loading...</div>
       </div>
     </div>
   );
diff --git a/src/tw-whiteboard/tldraw/shapes/transclude/style.css b/src/tw-whiteboard/tldraw/shapes/transclude/style.css
index 9a70c01..dad85cf 100644
--- a/src/tw-whiteboard/tldraw/shapes/transclude/style.css
+++ b/src/tw-whiteboard/tldraw/shapes/transclude/style.css
@@ -1,8 +1,8 @@
-.transclusion-shape-component-outer {
+.transclude-shape-component-outer {
   width: 100%;
   height: 100%;
 }
-.transclusion-shape-component-inner {
+.transclude-shape-component-inner {
   width: 100%;
   height: 100%;
   border: 1px solid rgba(0, 0, 0, 0.1);
@@ -12,12 +12,12 @@
   padding: 1em;
   overflow-y: auto;
 }
-.transclusion-shape-component-inner.transclusion-shape-edit-mode {
+.transclude-shape-component-inner.transclude-shape-edit-mode {
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.transclusion-shape-component-inner.transclusion-shape-edit-mode > input {
+.transclude-shape-component-inner.transclude-shape-edit-mode > input {
   background: transparent;
   border: none;
   overflow-wrap: break-word;

From 16e4a871bf4ea485573d657004c3e1abf6f36db7 Mon Sep 17 00:00:00 2001
From: lin onetwo <linonetwo012@gmail.com>
Date: Sat, 30 Mar 2024 15:32:18 +0800
Subject: [PATCH 2/9] feat: simple wikitext note tool

---
 src/tw-whiteboard/components/App.tsx          |  6 +-
 .../language/en-GB/Translations.multids       |  4 +-
 .../language/zh-Hans/Translations.multids     |  4 +-
 src/tw-whiteboard/tldraw/overrides.tsx        | 13 +++-
 .../tldraw/shapes/note/component.tsx          | 68 +++++++++++++++++++
 .../tldraw/shapes/note/style.css              | 27 ++++++++
 src/tw-whiteboard/tldraw/shapes/note/tool.ts  |  7 ++
 src/tw-whiteboard/tldraw/shapes/note/type.ts  |  3 +
 src/tw-whiteboard/tldraw/shapes/note/util.tsx | 46 +++++++++++++
 .../tldraw/shapes/transclude/component.tsx    |  6 +-
 .../tldraw/shapes/transclude/style.css        |  1 +
 src/tw-whiteboard/utils/wrapTiddlerAst.ts     |  5 +-
 12 files changed, 181 insertions(+), 9 deletions(-)
 create mode 100644 src/tw-whiteboard/tldraw/shapes/note/component.tsx
 create mode 100644 src/tw-whiteboard/tldraw/shapes/note/style.css
 create mode 100644 src/tw-whiteboard/tldraw/shapes/note/tool.ts
 create mode 100644 src/tw-whiteboard/tldraw/shapes/note/type.ts
 create mode 100644 src/tw-whiteboard/tldraw/shapes/note/util.tsx

diff --git a/src/tw-whiteboard/components/App.tsx b/src/tw-whiteboard/components/App.tsx
index 81c211a..3427934 100644
--- a/src/tw-whiteboard/components/App.tsx
+++ b/src/tw-whiteboard/components/App.tsx
@@ -12,6 +12,8 @@ import './App.css';
 import '@tldraw/tldraw/tldraw.css';
 import { assetUrls } from '../tldraw/assets/formatedAssets';
 import { overrides } from '../tldraw/overrides';
+import { NoteTool } from '../tldraw/shapes/note/tool';
+import { NoteShapeUtil } from '../tldraw/shapes/note/util';
 import { TranscludeTool } from '../tldraw/shapes/transclude/tool';
 import { TranscludeShapeUtil } from '../tldraw/shapes/transclude/util';
 
@@ -46,8 +48,8 @@ export interface TDExportJSON {
   updatedCount?: number;
 }
 
-const extraShapeUtils: TLAnyShapeUtilConstructor[] = [TranscludeShapeUtil];
-const extraTools: TLStateNodeConstructor[] = [TranscludeTool];
+const extraTools: TLStateNodeConstructor[] = [NoteTool, TranscludeTool];
+const extraShapeUtils: TLAnyShapeUtilConstructor[] = [NoteShapeUtil, TranscludeShapeUtil];
 
 export function App(props: IAppProps & IDefaultWidgetProps): JSX.Element {
   const {
diff --git a/src/tw-whiteboard/language/en-GB/Translations.multids b/src/tw-whiteboard/language/en-GB/Translations.multids
index bfe601d..26f101a 100644
--- a/src/tw-whiteboard/language/en-GB/Translations.multids
+++ b/src/tw-whiteboard/language/en-GB/Translations.multids
@@ -6,4 +6,6 @@ Configs/Description: These settings let you customise the behaviour of "Whiteboa
 Tools/Transclude/PlaceHolder: Tiddler title transclude
 Tools/Transclude/NoTiddlerTitle: Tiddler title not filled
 Tools/Transclude/TiddlerMissing: Tiddler missing
-Tools/Transclude/NoTextOnField: No text on field
\ No newline at end of file
+Tools/Transclude/NoTextOnField: No text on field
+Tools/Note/DbClickEdit: Double click to edit
+Tools/Note/PlaceHolder: Input wikitext here...
\ No newline at end of file
diff --git a/src/tw-whiteboard/language/zh-Hans/Translations.multids b/src/tw-whiteboard/language/zh-Hans/Translations.multids
index c74afd2..22ec4f6 100644
--- a/src/tw-whiteboard/language/zh-Hans/Translations.multids
+++ b/src/tw-whiteboard/language/zh-Hans/Translations.multids
@@ -6,4 +6,6 @@ Configs/Description: 通过这些设置，您可以自定义「白板」插件
 Tools/Transclude/PlaceHolder: 条目标题去嵌入
 Tools/Transclude/NoTiddlerTitle: 未填条目标题
 Tools/Transclude/TiddlerMissing: 条目不存在
-Tools/Transclude/NoTextOnField: 条目此字段无文本内容
\ No newline at end of file
+Tools/Transclude/NoTextOnField: 条目此字段无文本内容
+Tools/Note/DbClickEdit: 双击以编辑
+Tools/Note/PlaceHolder: 输入维基文本…
\ No newline at end of file
diff --git a/src/tw-whiteboard/tldraw/overrides.tsx b/src/tw-whiteboard/tldraw/overrides.tsx
index 7fa831f..b5778a2 100644
--- a/src/tw-whiteboard/tldraw/overrides.tsx
+++ b/src/tw-whiteboard/tldraw/overrides.tsx
@@ -1,4 +1,5 @@
 import { DefaultKeyboardShortcutsDialog, DefaultKeyboardShortcutsDialogContent, TLComponents, TldrawUiMenuItem, TLUiOverrides, toolbarItem, useTools } from '@tldraw/tldraw';
+import { NoteTool } from './shapes/note/tool';
 import { TranscludeTool } from './shapes/transclude/tool';
 
 // There's a guide at the bottom of this file!
@@ -15,10 +16,20 @@ export const overrides: TLUiOverrides = {
         editor.setCurrentTool(TranscludeTool.id);
       },
     };
+    tools.note = {
+      id: NoteTool.id,
+      label: 'tool.note',
+      readonlyOk: false,
+      icon: 'tool-note',
+      kbd: 'n',
+      onSelect(_source) {
+        editor.setCurrentTool(NoteTool.id);
+      },
+    };
     return tools;
   },
   toolbar(_app, toolbar, { tools }) {
-    toolbar.splice(4, 0, toolbarItem(tools[TranscludeTool.id]));
+    toolbar.splice(6, 0, toolbarItem(tools[TranscludeTool.id]));
     return toolbar;
   },
   translations: {
diff --git a/src/tw-whiteboard/tldraw/shapes/note/component.tsx b/src/tw-whiteboard/tldraw/shapes/note/component.tsx
new file mode 100644
index 0000000..f988ec4
--- /dev/null
+++ b/src/tw-whiteboard/tldraw/shapes/note/component.tsx
@@ -0,0 +1,68 @@
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+import { useWidget } from '$:/plugins/linonetwo/tw-react/index.js';
+import { getDefaultColorTheme, useEditor, useIsEditing } from '@tldraw/editor';
+import useDebouncedCallback from 'beautiful-react-hooks/useDebouncedCallback';
+import { ChangeEvent, CSSProperties, useCallback, useMemo, useRef } from 'react';
+import { IParseTreeNode } from 'tiddlywiki';
+
+import { NoteShape } from './type';
+import './style.css';
+import { lingo } from 'src/tw-whiteboard/utils/lingo';
+import { wrapTiddlerAst } from 'src/tw-whiteboard/utils/wrapTiddlerAst';
+
+export function NoteComponent({ shape, isDarkMode }: { isDarkMode: boolean; shape: NoteShape }) {
+  const editor = useEditor();
+  const theme = getDefaultColorTheme({ isDarkMode });
+  const isEditing = useIsEditing(shape.id);
+  const tiddlerText = shape.props.text ?? '';
+  const adjustedColor = shape.props.color === 'black' ? 'yellow' : shape.props.color;
+
+  const astNode = useMemo<IParseTreeNode>(() => {
+    if (!tiddlerText) return wrapTiddlerAst({ type: 'text', text: `${lingo('Tools/Note/DbClickEdit')}` });
+    return wrapTiddlerAst($tw.wiki.parseText('text/vnd.tiddlywiki', tiddlerText).tree);
+  }, [tiddlerText]);
+  const noteRenderContainerReference = useRef<HTMLDivElement>(null);
+  useWidget(astNode, noteRenderContainerReference, { skip: isEditing });
+
+  const editTitleInputReference = useRef<HTMLTextAreaElement>(null);
+  const onTextInputChange = useDebouncedCallback((event: ChangeEvent<HTMLTextAreaElement>) => {
+    editor?.store.update(shape.id, (record) => ({
+      ...record,
+      props: {
+        ...record.props,
+        text: event.target.value,
+      },
+    }));
+  }, []);
+  const editTitleContainerOnClick = useCallback(() => {
+    editTitleInputReference.current?.focus?.();
+  }, []);
+
+  const sharedStyle: CSSProperties = {
+    backgroundColor: theme[adjustedColor].solid,
+    color: theme.black.solid,
+  };
+
+  return (
+    <div className='note-shape-component-outer'>
+      <div
+        className='note-shape-component-inner note-shape-edit-mode'
+        key='edit-title'
+        style={{ display: isEditing ? undefined : 'none', ...sharedStyle }}
+        onClick={editTitleContainerOnClick}
+      >
+        <textarea
+          tabIndex={1}
+          autoFocus
+          placeholder={lingo('Tools/Note/PlaceHolder')}
+          defaultValue={tiddlerText}
+          ref={editTitleInputReference}
+          onChange={onTextInputChange}
+        />
+      </div>
+      <div className='note-shape-component-inner' key='render' style={{ display: isEditing ? 'none' : undefined, ...sharedStyle }}>
+        <div ref={noteRenderContainerReference}>Note loading...</div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/tw-whiteboard/tldraw/shapes/note/style.css b/src/tw-whiteboard/tldraw/shapes/note/style.css
new file mode 100644
index 0000000..defc287
--- /dev/null
+++ b/src/tw-whiteboard/tldraw/shapes/note/style.css
@@ -0,0 +1,27 @@
+.note-shape-component-outer {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+.note-shape-component-inner {
+  width: 100%;
+  height: 100%;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.04);
+  pointer-events: all;
+  position: relative;
+  padding: 1em;
+  overflow-y: auto;
+  border-radius: var(--radius-2);
+}
+.note-shape-component-inner.note-shape-edit-mode {
+  padding: 0.5em;
+}
+.note-shape-component-inner.note-shape-edit-mode > textarea {
+  background: transparent;
+  border: none;
+  overflow-wrap: break-word;
+  font-size: 2em;
+  width: 100%;
+  height: 100%;
+}
\ No newline at end of file
diff --git a/src/tw-whiteboard/tldraw/shapes/note/tool.ts b/src/tw-whiteboard/tldraw/shapes/note/tool.ts
new file mode 100644
index 0000000..b19ecd7
--- /dev/null
+++ b/src/tw-whiteboard/tldraw/shapes/note/tool.ts
@@ -0,0 +1,7 @@
+import { BaseBoxShapeTool } from '@tldraw/tldraw';
+
+export class NoteTool extends BaseBoxShapeTool {
+  static override id = 'wikitext-note';
+  static override initial = 'idle';
+  override shapeType = 'wikitext-note';
+}
diff --git a/src/tw-whiteboard/tldraw/shapes/note/type.ts b/src/tw-whiteboard/tldraw/shapes/note/type.ts
new file mode 100644
index 0000000..8650c7e
--- /dev/null
+++ b/src/tw-whiteboard/tldraw/shapes/note/type.ts
@@ -0,0 +1,3 @@
+import { TLBaseShape, TLDefaultColorStyle } from '@tldraw/tldraw';
+
+export type NoteShape = TLBaseShape<'wikitext-note', { color: TLDefaultColorStyle; h: number; text?: string; w: number }>;
diff --git a/src/tw-whiteboard/tldraw/shapes/note/util.tsx b/src/tw-whiteboard/tldraw/shapes/note/util.tsx
new file mode 100644
index 0000000..a50c3e5
--- /dev/null
+++ b/src/tw-whiteboard/tldraw/shapes/note/util.tsx
@@ -0,0 +1,46 @@
+import { DefaultColorStyle, Rectangle2d, resizeBox, ShapeProps, ShapeUtil, T, TLOnResizeHandler } from '@tldraw/tldraw';
+import { NoteComponent } from './component';
+import { NoteShape } from './type';
+
+export class NoteShapeUtil extends ShapeUtil<NoteShape> {
+  static override type = 'wikitext-note' as const;
+  override isAspectRatioLocked = (_shape: NoteShape) => false;
+  override canResize = (_shape: NoteShape) => true;
+  override canBind = (_shape: NoteShape) => true;
+  override canEdit = () => true;
+
+  static override props: ShapeProps<NoteShape> = {
+    color: DefaultColorStyle,
+    text: T.optional(T.string),
+    h: T.number,
+    w: T.number,
+  };
+
+  getDefaultProps(): NoteShape['props'] {
+    return {
+      w: 100,
+      h: 100,
+      color: 'yellow',
+    };
+  }
+
+  getGeometry(shape: NoteShape) {
+    return new Rectangle2d({
+      width: shape.props.w,
+      height: shape.props.h,
+      isFilled: true,
+    });
+  }
+
+  component(shape: NoteShape) {
+    return <NoteComponent shape={shape} isDarkMode={this.editor.user.getIsDarkMode()} />;
+  }
+
+  indicator(shape: NoteShape) {
+    return <rect width={shape.props.w} height={shape.props.h} />;
+  }
+
+  override onResize: TLOnResizeHandler<NoteShape> = (shape, info) => {
+    return resizeBox(shape, info);
+  };
+}
diff --git a/src/tw-whiteboard/tldraw/shapes/transclude/component.tsx b/src/tw-whiteboard/tldraw/shapes/transclude/component.tsx
index 259a682..be6fa49 100644
--- a/src/tw-whiteboard/tldraw/shapes/transclude/component.tsx
+++ b/src/tw-whiteboard/tldraw/shapes/transclude/component.tsx
@@ -30,7 +30,7 @@ export function TranscludeComponent({ shape, isDarkMode }: { isDarkMode: boolean
   const transcludeRenderContainerReference = useRef<HTMLDivElement>(null);
   useWidget(astNode, transcludeRenderContainerReference, { skip: isEditing });
 
-  const editTitleInputContainerReference = useRef<HTMLInputElement>(null);
+  const editTitleInputReference = useRef<HTMLInputElement>(null);
   const onTitleInputChange = useDebouncedCallback((event: ChangeEvent<HTMLInputElement>) => {
     editor?.store.update(shape.id, (record) => ({
       ...record,
@@ -41,7 +41,7 @@ export function TranscludeComponent({ shape, isDarkMode }: { isDarkMode: boolean
     }));
   }, []);
   const editTitleContainerOnClick = useCallback(() => {
-    editTitleInputContainerReference.current?.focus?.();
+    editTitleInputReference.current?.focus?.();
   }, []);
 
   const sharedStyle: CSSProperties = {
@@ -63,7 +63,7 @@ export function TranscludeComponent({ shape, isDarkMode }: { isDarkMode: boolean
           type='text'
           placeholder={lingo('Tools/Transclude/PlaceHolder')}
           defaultValue={tiddlerTitle}
-          ref={editTitleInputContainerReference}
+          ref={editTitleInputReference}
           onChange={onTitleInputChange}
         />
       </div>
diff --git a/src/tw-whiteboard/tldraw/shapes/transclude/style.css b/src/tw-whiteboard/tldraw/shapes/transclude/style.css
index dad85cf..43ec532 100644
--- a/src/tw-whiteboard/tldraw/shapes/transclude/style.css
+++ b/src/tw-whiteboard/tldraw/shapes/transclude/style.css
@@ -1,6 +1,7 @@
 .transclude-shape-component-outer {
   width: 100%;
   height: 100%;
+  position: absolute;
 }
 .transclude-shape-component-inner {
   width: 100%;
diff --git a/src/tw-whiteboard/utils/wrapTiddlerAst.ts b/src/tw-whiteboard/utils/wrapTiddlerAst.ts
index 1bf093f..6aee6b5 100644
--- a/src/tw-whiteboard/utils/wrapTiddlerAst.ts
+++ b/src/tw-whiteboard/utils/wrapTiddlerAst.ts
@@ -1,3 +1,6 @@
 import { IParseTreeNode } from 'tiddlywiki';
 
-export const wrapTiddlerAst = (node: IParseTreeNode): IParseTreeNode => ({ type: 'tiddler', children: [{ type: 'element', tag: 'p', children: [node] }] });
+export const wrapTiddlerAst = (node: IParseTreeNode | IParseTreeNode[]): IParseTreeNode => ({
+  type: 'tiddler',
+  children: [{ type: 'element', tag: 'p', children: Array.isArray(node) ? node : [node] }],
+});

From 3840ac613f2f6e5299fdce3669ec60511ad08154 Mon Sep 17 00:00:00 2001
From: lin onetwo <linonetwo012@gmail.com>
Date: Sat, 30 Mar 2024 15:59:39 +0800
Subject: [PATCH 3/9] fix: icon and i18n for toolbar icon & site title

---
 .../language/en-GB/Translations.multids       |  1 +
 .../language/zh-Hans/Translations.multids     |  1 +
 .../OpenInFullScreenWhiteBoardButton.tid      | 36 ++++++++++---------
 .../OpenInFullScreenWhiteBoardButtonImage.tid | 13 -------
 wiki/tiddlers/$__SiteSubtitle.tid             |  2 +-
 wiki/tiddlers/$__SiteTitle.tid                |  2 +-
 6 files changed, 24 insertions(+), 31 deletions(-)
 delete mode 100755 src/tw-whiteboard/tiddlywiki-ui/ViewToolbar/OpenInFullScreenWhiteBoardButtonImage.tid

diff --git a/src/tw-whiteboard/language/en-GB/Translations.multids b/src/tw-whiteboard/language/en-GB/Translations.multids
index 26f101a..5d0a6d8 100644
--- a/src/tw-whiteboard/language/en-GB/Translations.multids
+++ b/src/tw-whiteboard/language/en-GB/Translations.multids
@@ -3,6 +3,7 @@ title: $:/plugins/linonetwo/tw-whiteboard/language/en-GB/
 Name: Whiteboard
 Description: Tiny little drawing app in TW, based on tldraw. Providing diagram widget and whiteboard view.
 Configs/Description: These settings let you customise the behaviour of "Whiteboard" plugin.
+OpenInLayout: Open In Whiteboard Layout
 Tools/Transclude/PlaceHolder: Tiddler title transclude
 Tools/Transclude/NoTiddlerTitle: Tiddler title not filled
 Tools/Transclude/TiddlerMissing: Tiddler missing
diff --git a/src/tw-whiteboard/language/zh-Hans/Translations.multids b/src/tw-whiteboard/language/zh-Hans/Translations.multids
index 22ec4f6..931ad38 100644
--- a/src/tw-whiteboard/language/zh-Hans/Translations.multids
+++ b/src/tw-whiteboard/language/zh-Hans/Translations.multids
@@ -3,6 +3,7 @@ title: $:/plugins/linonetwo/tw-whiteboard/language/zh-Hans/
 Name: 白板
 Description: 太微白板应用，提供图表微件和白板视图，基于开源白板「TlDraw」
 Configs/Description: 通过这些设置，您可以自定义「白板」插件的行为。
+OpenInLayout: 在白板布局中打开
 Tools/Transclude/PlaceHolder: 条目标题去嵌入
 Tools/Transclude/NoTiddlerTitle: 未填条目标题
 Tools/Transclude/TiddlerMissing: 条目不存在
diff --git a/src/tw-whiteboard/tiddlywiki-ui/ViewToolbar/OpenInFullScreenWhiteBoardButton.tid b/src/tw-whiteboard/tiddlywiki-ui/ViewToolbar/OpenInFullScreenWhiteBoardButton.tid
index 6fe1b4c..6a05305 100644
--- a/src/tw-whiteboard/tiddlywiki-ui/ViewToolbar/OpenInFullScreenWhiteBoardButton.tid
+++ b/src/tw-whiteboard/tiddlywiki-ui/ViewToolbar/OpenInFullScreenWhiteBoardButton.tid
@@ -1,21 +1,25 @@
 title: $:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/ViewToolbar/Buttons/OpenInFullScreenWhiteBoardButton
 tags: $:/tags/ViewToolbar
-caption: {{$:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/ViewToolbar/images/OpenInFullScreenWhiteBoardButtonImage}} {{$:/language/Buttons/Edit/Caption}}
-description: {{$:/language/Buttons/Edit/Hint}}
+caption: {{$:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/PageLayout/whiteboard-icon}} <<lingo OpenInLayout $:/plugins/linonetwo/tw-whiteboard/language/>>
+description: <<lingo OpenInLayout $:/plugins/linonetwo/tw-whiteboard/language/>>
 
 \whitespace trim
-<$list filter="[<currentTiddler>field:type[application/vnd.tldraw+json]]" variable="ignore">
-  <$button tooltip={{$:/language/Buttons/Edit/Hint}} aria-label={{$:/language/Buttons/Edit/Caption}} class=<<tv-config-toolbar-class>> >
-    <$action-setfield $tiddler="$:/layout" text="$:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoard"/>
-    <$action-setfield $tiddler="$:/state/Whiteboard/PageLayout/tiddler" text=<<currentTiddler>> />
+\define lingo-base() $:/plugins/linonetwo/tw-whiteboard/language/
 
-    <$list filter="[<tv-config-toolbar-icons>match[yes]]">
-      {{$:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/ViewToolbar/images/OpenInFullScreenWhiteBoardButtonImage}}
-    </$list>
-    <$list filter="[<tv-config-toolbar-text>match[yes]]">
-      <span class="tc-btn-text">
-        <$text text={{$:/language/Buttons/Edit/Caption}}/>
-      </span>
-    </$list>
-  </$button>
-</$list>
\ No newline at end of file
+<$wikify name="OpenInLayout" text="<<lingo OpenInLayout>>">
+  <$list filter="[<currentTiddler>field:type[application/vnd.tldraw+json]]" variable="ignore">
+    <$button tooltip=<<OpenInLayout>> aria-label=<<OpenInLayout>> class=<<tv-config-toolbar-class>> >
+      <$action-setfield $tiddler="$:/layout" text="$:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoard"/>
+      <$action-setfield $tiddler="$:/state/Whiteboard/PageLayout/tiddler" text=<<currentTiddler>> />
+
+      <$list filter="[<tv-config-toolbar-icons>match[yes]]">
+        {{$:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/PageLayout/whiteboard-icon}}
+      </$list>
+      <$list filter="[<tv-config-toolbar-text>match[yes]]">
+        <span class="tc-btn-text">
+          <$text text=<<OpenInLayout>>/>
+        </span>
+      </$list>
+    </$button>
+  </$list>
+</$wikify>
\ No newline at end of file
diff --git a/src/tw-whiteboard/tiddlywiki-ui/ViewToolbar/OpenInFullScreenWhiteBoardButtonImage.tid b/src/tw-whiteboard/tiddlywiki-ui/ViewToolbar/OpenInFullScreenWhiteBoardButtonImage.tid
deleted file mode 100755
index bab57a4..0000000
--- a/src/tw-whiteboard/tiddlywiki-ui/ViewToolbar/OpenInFullScreenWhiteBoardButtonImage.tid
+++ /dev/null
@@ -1,13 +0,0 @@
-title: $:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/ViewToolbar/images/OpenInFullScreenWhiteBoardButtonImage
-tags: $:/tags/Image
-
-<svg width="22pt" height="22pt" class="tc-image-edit-button tc-image-whiteboard-edit-button tc-image-button" viewBox="0 0 128 128">
-  <g fill-rule="evenodd">
-    <g id="svg_1" fill-rule="evenodd">
-      <path id="svg_2"
-        d="m95.627,10.059l-5.656,5.657l11.313,11.313l5.657,-5.656l-11.314,-11.314zm5.657,-5.657l1.966,-1.966c3.123,-3.122 8.194,-3.129 11.319,-0.005c3.117,3.118 3.122,8.192 -0.005,11.32l-1.966,1.965l-11.314,-11.314zm-16.97,16.97l-60.25,60.25a8.12,8.12 0 0 0 -0.322,0.342c-0.1,0.087 -0.198,0.179 -0.295,0.275c-5.735,5.735 -10.702,22.016 -10.702,22.016s16.405,-5.09 22.016,-10.702c0.095,-0.096 0.186,-0.193 0.272,-0.292a8.12,8.12 0 0 0 0.345,-0.325l60.25,-60.25l-11.314,-11.313l0,-0.001zm-49.143,102.818c6.788,-0.577 13.898,-2.272 23.689,-5.348c1.825,-0.573 3.57,-1.136 6.336,-2.04c16,-5.226 21.877,-6.807 28.745,-7.146c8.358,-0.413 13.854,2.13 17.58,8.699a4,4 0 0 0 6.959,-3.946c-5.334,-9.406 -13.745,-13.296 -24.933,-12.744c-7.875,0.39 -14.057,2.052 -30.835,7.533c-2.739,0.894 -4.46,1.45 -6.25,2.012c-19.46,6.112 -30.77,7.072 -39.597,1.747a4,4 0 1 0 -4.132,6.85c6.333,3.82 13.754,5.12 22.438,4.383z" />
-    </g>
-    <text xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="108" id="svg_11" y="89" x="2"
-      stroke-width="0">Bo</text>
-  </g>
-</svg>
\ No newline at end of file
diff --git a/wiki/tiddlers/$__SiteSubtitle.tid b/wiki/tiddlers/$__SiteSubtitle.tid
index db15fb5..d39fab2 100644
--- a/wiki/tiddlers/$__SiteSubtitle.tid
+++ b/wiki/tiddlers/$__SiteSubtitle.tid
@@ -1,4 +1,4 @@
 title: $:/SiteSubtitle
 type: text/vnd.tiddlywiki
 
-Demo of TiddlyWiki Whiteboard Plugin, based on Tldraw and React plugin.
\ No newline at end of file
+<<lingo Description $:/plugins/linonetwo/tw-whiteboard/language/>>
\ No newline at end of file
diff --git a/wiki/tiddlers/$__SiteTitle.tid b/wiki/tiddlers/$__SiteTitle.tid
index f94aaa7..297763e 100644
--- a/wiki/tiddlers/$__SiteTitle.tid
+++ b/wiki/tiddlers/$__SiteTitle.tid
@@ -1,4 +1,4 @@
 title: $:/SiteTitle
 type: text/vnd.tiddlywiki
 
-TW Whiteboard
\ No newline at end of file
+<<lingo Name $:/plugins/linonetwo/tw-whiteboard/language/>>
\ No newline at end of file

From 37685b1e9dabca508f278b9db86bd5a0cddf8002 Mon Sep 17 00:00:00 2001
From: lin onetwo <linonetwo012@gmail.com>
Date: Sat, 30 Mar 2024 16:00:01 +0800
Subject: [PATCH 4/9] refactor: renderSVGTiddler fn

---
 src/tw-whiteboard/tldraw/assets/formatedAssets.ts | 6 ++----
 src/tw-whiteboard/utils/renderSVGTiddler.ts       | 7 +++++++
 2 files changed, 9 insertions(+), 4 deletions(-)
 create mode 100644 src/tw-whiteboard/utils/renderSVGTiddler.ts

diff --git a/src/tw-whiteboard/tldraw/assets/formatedAssets.ts b/src/tw-whiteboard/tldraw/assets/formatedAssets.ts
index ce0b6e2..b40c10c 100644
--- a/src/tw-whiteboard/tldraw/assets/formatedAssets.ts
+++ b/src/tw-whiteboard/tldraw/assets/formatedAssets.ts
@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/strict-boolean-expressions */
+import { renderSVGTiddler } from 'src/tw-whiteboard/utils/renderSVGTiddler';
 import { getAssetUrlsByMetaUrl } from './getAssetUrlsByMetaUrl';
 
 export const assetUrls = getAssetUrlsByMetaUrl((assetUrl: string) => {
@@ -18,10 +19,7 @@ export const assetUrls = getAssetUrlsByMetaUrl((assetUrl: string) => {
     const encoding = $tw.config.contentTypeInfo[contentType]?.encoding ?? 'utf8';
     let text = assetData.fields.text;
     if (needRender) {
-      text = $tw.wiki.renderTiddler('text/html', assetData.fields.title).replace('<p>', '').replace('</p>', '');
-      if (!text.includes('xmlns')) {
-        text = text.replace('<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
-      }
+      text = renderSVGTiddler(assetData.fields.title);
     }
     // https://github.com/tldraw/tldraw/issues/1941
     // data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 5H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6M19 5h6m0 0v6m0-6L13 17'/%3E%3C/svg%3E
diff --git a/src/tw-whiteboard/utils/renderSVGTiddler.ts b/src/tw-whiteboard/utils/renderSVGTiddler.ts
new file mode 100644
index 0000000..36e6cb6
--- /dev/null
+++ b/src/tw-whiteboard/utils/renderSVGTiddler.ts
@@ -0,0 +1,7 @@
+export function renderSVGTiddler(title: string): string {
+  let text = $tw.wiki.renderTiddler('text/html', title).replace('<p>', '').replace('</p>', '');
+  if (!text.includes('xmlns')) {
+    text = text.replace('<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
+  }
+  return text;
+}

From 7da9d1ab1ef040edac5106427c517a05f0f00ab9 Mon Sep 17 00:00:00 2001
From: lin onetwo <linonetwo012@gmail.com>
Date: Sat, 30 Mar 2024 16:31:22 +0800
Subject: [PATCH 5/9] feat: tool button to open in layout

fixes #28
---
 src/tw-whiteboard/components/App.tsx          | 10 +++----
 .../PageLayout/WhiteBoardLayout.tid           | 14 ++++-----
 .../OpenInFullScreenWhiteBoardButton.tid      |  2 +-
 .../tldraw/assets/customAssets.ts             |  1 +
 src/tw-whiteboard/tldraw/overrides.tsx        | 30 +++++++++++++++----
 src/tw-whiteboard/widget.ts                   |  4 +--
 6 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/src/tw-whiteboard/components/App.tsx b/src/tw-whiteboard/components/App.tsx
index 3427934..498360e 100644
--- a/src/tw-whiteboard/components/App.tsx
+++ b/src/tw-whiteboard/components/App.tsx
@@ -11,7 +11,7 @@ import { partition, TLStateNodeConstructor } from '@tldraw/editor';
 import './App.css';
 import '@tldraw/tldraw/tldraw.css';
 import { assetUrls } from '../tldraw/assets/formatedAssets';
-import { overrides } from '../tldraw/overrides';
+import { getOverrides } from '../tldraw/overrides';
 import { NoteTool } from '../tldraw/shapes/note/tool';
 import { NoteShapeUtil } from '../tldraw/shapes/note/util';
 import { TranscludeTool } from '../tldraw/shapes/transclude/tool';
@@ -23,7 +23,7 @@ export interface IAppProps {
   /**
    * Tiddler to contain the serialized JSON component state
    */
-  currentTiddler: string;
+  currentTiddler?: string;
   height?: string;
   initialTiddlerText?: string;
   isDarkMode: boolean;
@@ -137,7 +137,7 @@ export function App(props: IAppProps & IDefaultWidgetProps): JSX.Element {
         newEditor.zoomToBounds(bounds, { targetZoom: Math.min(1, Number(zoom)), duration: 220 });
       }
     }
-  }, [initialTiddlerText, readonly, zoomToFit, zoom, currentTiddler]);
+  }, [onReady, initialTiddlerText, readonly, zoomToFit, zoom, currentTiddler]);
 
   // emergency save on close or switch to other editor (by changing the type field) or readonly
   // this only work as willUnMount
@@ -189,14 +189,14 @@ export function App(props: IAppProps & IDefaultWidgetProps): JSX.Element {
       <ParentWidgetContext.Provider value={parentWidget}>
         <div className='tw-whiteboard-tldraw-container' style={{ height, width }}>
           <Tldraw
-            persistenceKey={currentTiddler}
+            persistenceKey={currentTiddler ?? 'temp-without-title'}
             onMount={onMount}
             shapeUtils={extraShapeUtils}
             tools={extraTools}
             autoFocus={false}
             inferDarkMode
             assetUrls={assetUrls}
-            overrides={overrides}
+            overrides={getOverrides(props)}
           />
         </div>
       </ParentWidgetContext.Provider>
diff --git a/src/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoardLayout.tid b/src/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoardLayout.tid
index 889b3e3..1eaf1ab 100644
--- a/src/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoardLayout.tid
+++ b/src/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoardLayout.tid
@@ -23,11 +23,11 @@ tc-page-container tc-page-view-$(storyviewTitle)$ tc-language-$(languageTitle)$
 <$navigator story="$:/StoryList" history="$:/HistoryList" openLinkFromInsideRiver={{$:/config/Navigation/openLinkFromInsideRiver}} openLinkFromOutsideRiver={{$:/config/Navigation/openLinkFromOutsideRiver}} relinkOnRename={{$:/config/RelinkOnRename}}>
 
 <main class="tw-whiteboard-layout-main-area">
-	<$reveal state="$:/state/Whiteboard/PageLayout/tiddler" type="nomatch" text="">
-		<$whiteboard tiddler={{$:/state/Whiteboard/PageLayout/tiddler}} height="calc(100vh - 35px)" />
+	<$reveal state="$:/state/Whiteboard/PageLayout/focusedTiddler" type="nomatch" text="">
+		<$whiteboard tiddler={{$:/state/Whiteboard/PageLayout/focusedTiddler}} height="calc(100vh - 35px)" />
 	</$reveal>
 	<!-- default value, when first opened, select widget's state tiddler is empty, but default value filter gives a value, we show that tiddler -->
-	<$reveal state="$:/state/Whiteboard/PageLayout/tiddler" type="match" text="">
+	<$reveal state="$:/state/Whiteboard/PageLayout/focusedTiddler" type="match" text="">
 		<$list filter='[all[shadows+tiddlers]field:type[application/vnd.tldraw+json]sort[modified]first[]]'>
 			<$whiteboard tiddler={{{[all[shadows+tiddlers]field:type[application/vnd.tldraw+json]sort[modified]first[]]}}} height="calc(100vh - 35px)" />
 		</$list>
@@ -38,7 +38,7 @@ tc-page-container tc-page-view-$(storyviewTitle)$ tc-language-$(languageTitle)$
 <nav class="tw-whiteboard-layout-top-bar">
 	Select board: 
 	<!-- default to recently used whiteboard tiddler -->
-	<$select tiddler="$:/state/Whiteboard/PageLayout/tiddler" default={{{[all[shadows+tiddlers]field:type[application/vnd.tldraw+json]sort[modified]first[]]}}}>
+	<$select tiddler="$:/state/Whiteboard/PageLayout/focusedTiddler" default={{{[all[shadows+tiddlers]field:type[application/vnd.tldraw+json]sort[modified]first[]]}}}>
 		<$list filter='[all[shadows+tiddlers]field:type[application/vnd.tldraw+json]sort[modified]]'>
 			<option value=<<currentTiddler>>><$view field='title'/></option>
 		</$list>
@@ -49,15 +49,15 @@ tc-page-container tc-page-view-$(storyviewTitle)$ tc-language-$(languageTitle)$
 		{{$:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/PageLayout/CreateNewTiddlerPopup}}
 	</$reveal>
 
-	<$reveal state="$:/state/Whiteboard/PageLayout/tiddler" type="nomatch" text="">
+	<$reveal state="$:/state/Whiteboard/PageLayout/focusedTiddler" type="nomatch" text="">
 		<$button tooltip="Open In StoryView">
 			{{$:/core/images/home-button}}
 			<$action-setfield $tiddler="$:/layout" text="$:/core/ui/PageTemplate"/>
-			<$action-navigate $to={{$:/state/Whiteboard/PageLayout/tiddler}}/>
+			<$action-navigate $to={{$:/state/Whiteboard/PageLayout/focusedTiddler}}/>
 		</$button>
 	</$reveal>
 	<!-- default value, when first opened, select widget's state tiddler is empty, but default value filter gives a value, we show that tiddler -->
-	<$reveal state="$:/state/Whiteboard/PageLayout/tiddler" type="match" text="">
+	<$reveal state="$:/state/Whiteboard/PageLayout/focusedTiddler" type="match" text="">
 		<$list filter='[all[shadows+tiddlers]field:type[application/vnd.tldraw+json]sort[modified]first[]]'>
 			<$button tooltip="Open In StoryView">
 				{{$:/core/images/home-button}}
diff --git a/src/tw-whiteboard/tiddlywiki-ui/ViewToolbar/OpenInFullScreenWhiteBoardButton.tid b/src/tw-whiteboard/tiddlywiki-ui/ViewToolbar/OpenInFullScreenWhiteBoardButton.tid
index 6a05305..ff50f26 100644
--- a/src/tw-whiteboard/tiddlywiki-ui/ViewToolbar/OpenInFullScreenWhiteBoardButton.tid
+++ b/src/tw-whiteboard/tiddlywiki-ui/ViewToolbar/OpenInFullScreenWhiteBoardButton.tid
@@ -10,7 +10,7 @@ description: <<lingo OpenInLayout $:/plugins/linonetwo/tw-whiteboard/language/>>
   <$list filter="[<currentTiddler>field:type[application/vnd.tldraw+json]]" variable="ignore">
     <$button tooltip=<<OpenInLayout>> aria-label=<<OpenInLayout>> class=<<tv-config-toolbar-class>> >
       <$action-setfield $tiddler="$:/layout" text="$:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoard"/>
-      <$action-setfield $tiddler="$:/state/Whiteboard/PageLayout/tiddler" text=<<currentTiddler>> />
+      <$action-setfield $tiddler="$:/state/Whiteboard/PageLayout/focusedTiddler" text=<<currentTiddler>> />
 
       <$list filter="[<tv-config-toolbar-icons>match[yes]]">
         {{$:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/PageLayout/whiteboard-icon}}
diff --git a/src/tw-whiteboard/tldraw/assets/customAssets.ts b/src/tw-whiteboard/tldraw/assets/customAssets.ts
index 1f90be5..0c0595f 100644
--- a/src/tw-whiteboard/tldraw/assets/customAssets.ts
+++ b/src/tw-whiteboard/tldraw/assets/customAssets.ts
@@ -2,5 +2,6 @@
 export function getCustomIcons(fn: (item: string) => string) {
   return {
     transcludify: fn('$:/core/images/transcludify'),
+    'whiteboard.layout': fn('$:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/PageLayout/whiteboard-icon'),
   };
 }
diff --git a/src/tw-whiteboard/tldraw/overrides.tsx b/src/tw-whiteboard/tldraw/overrides.tsx
index b5778a2..2e2ad20 100644
--- a/src/tw-whiteboard/tldraw/overrides.tsx
+++ b/src/tw-whiteboard/tldraw/overrides.tsx
@@ -1,10 +1,12 @@
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
 import { DefaultKeyboardShortcutsDialog, DefaultKeyboardShortcutsDialogContent, TLComponents, TldrawUiMenuItem, TLUiOverrides, toolbarItem, useTools } from '@tldraw/tldraw';
+import type { IAppProps } from '../components/App';
 import { NoteTool } from './shapes/note/tool';
 import { TranscludeTool } from './shapes/transclude/tool';
 
 // There's a guide at the bottom of this file!
 
-export const overrides: TLUiOverrides = {
+export const getOverrides = (props: IAppProps): TLUiOverrides => ({
   tools(editor, tools) {
     tools.transclude = {
       id: TranscludeTool.id,
@@ -26,21 +28,39 @@ export const overrides: TLUiOverrides = {
         editor.setCurrentTool(NoteTool.id);
       },
     };
+    tools['whiteboard.layout'] = {
+      id: 'whiteboard.layout',
+      label: 'tool.openInLayout',
+      readonlyOk: true,
+      icon: 'whiteboard.layout',
+      kbd: 'l',
+      onSelect(_source) {
+        $tw.wiki.setText(props.currentTiddler, 'text', undefined, '$:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoard');
+        $tw.wiki.setText('$:/layout', 'text', undefined, '$:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoard');
+      },
+    };
     return tools;
   },
-  toolbar(_app, toolbar, { tools }) {
+  toolbar(app, toolbar, { tools }) {
     toolbar.splice(6, 0, toolbarItem(tools[TranscludeTool.id]));
+    // DEBUG: console props.currentTiddler
+    console.log(`props.currentTiddler`, props.currentTiddler);
+    if (props.currentTiddler) {
+      toolbar.splice(10, 0, toolbarItem(tools['whiteboard.layout']));
+    }
     return toolbar;
   },
   translations: {
     'zh-cn': {
-      'tool.transclude': '嵌入',
+      'tool.transclude': $tw.wiki.getTiddlerText('$:/language/Buttons/Transcludify/Caption') ?? '',
+      'tool.openInLayout': $tw.wiki.getTiddlerText('$:/plugins/linonetwo/tw-whiteboard/language/zh-Hans/OpenInLayout') ?? '',
     },
     en: {
-      'tool.transclude': 'Transclude',
+      'tool.transclude': $tw.wiki.getTiddlerText('$:/language/Buttons/Transcludify/Caption') ?? '',
+      'tool.openInLayout': $tw.wiki.getTiddlerText('$:/plugins/linonetwo/tw-whiteboard/language/en-GB/OpenInLayout') ?? '',
     },
   },
-};
+});
 
 export const components: TLComponents = {
   KeyboardShortcutsDialog: (props) => {
diff --git a/src/tw-whiteboard/widget.ts b/src/tw-whiteboard/widget.ts
index 58da201..71045d1 100644
--- a/src/tw-whiteboard/widget.ts
+++ b/src/tw-whiteboard/widget.ts
@@ -11,7 +11,7 @@ class TldrawWhiteBoardWidget extends Widget<IAppProps> {
   public reactComponent = App;
   public getProps = () => {
     return {
-      currentTiddler: this.editTitle ?? this.getVariable('currentTiddler'),
+      currentTiddler: this.editTitle,
       initialTiddlerText: this.editTitle === undefined ? '' : $tw.wiki.getTiddlerText(this.editTitle),
       height: this.getAttribute('height'),
       width: this.getAttribute('width'),
@@ -38,7 +38,7 @@ class TldrawWhiteBoardWidget extends Widget<IAppProps> {
 
   public refresh(changedTiddlers: IChangedTiddlers): boolean {
     if (!this.ready) return false;
-    if (changedTiddlers['$:/state/Whiteboard/PageLayout/tiddler'] || changedTiddlers['$:/palette'] || changedTiddlers['$:/language']) {
+    if (changedTiddlers['$:/state/Whiteboard/PageLayout/focusedTiddler'] || changedTiddlers['$:/palette'] || changedTiddlers['$:/language']) {
       this.refreshSelf();
       return true;
     }

From b8b58e08398e35c97b75350173c3dd2c29573b4b Mon Sep 17 00:00:00 2001
From: lin onetwo <linonetwo012@gmail.com>
Date: Sat, 30 Mar 2024 16:34:22 +0800
Subject: [PATCH 6/9] fix: set wront text

---
 src/tw-whiteboard/tldraw/overrides.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/tw-whiteboard/tldraw/overrides.tsx b/src/tw-whiteboard/tldraw/overrides.tsx
index 2e2ad20..dec4611 100644
--- a/src/tw-whiteboard/tldraw/overrides.tsx
+++ b/src/tw-whiteboard/tldraw/overrides.tsx
@@ -35,16 +35,16 @@ export const getOverrides = (props: IAppProps): TLUiOverrides => ({
       icon: 'whiteboard.layout',
       kbd: 'l',
       onSelect(_source) {
-        $tw.wiki.setText(props.currentTiddler, 'text', undefined, '$:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoard');
-        $tw.wiki.setText('$:/layout', 'text', undefined, '$:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoard');
+        if (props.currentTiddler) {
+          $tw.wiki.setText('$:/state/Whiteboard/PageLayout/focusedTiddler', 'text', undefined, props.currentTiddler);
+          $tw.wiki.setText('$:/layout', 'text', undefined, '$:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoard');
+        }
       },
     };
     return tools;
   },
   toolbar(app, toolbar, { tools }) {
     toolbar.splice(6, 0, toolbarItem(tools[TranscludeTool.id]));
-    // DEBUG: console props.currentTiddler
-    console.log(`props.currentTiddler`, props.currentTiddler);
     if (props.currentTiddler) {
       toolbar.splice(10, 0, toolbarItem(tools['whiteboard.layout']));
     }

From 0f3faa5b54acb1d420922e312a6c1ac889f9baa9 Mon Sep 17 00:00:00 2001
From: lin onetwo <linonetwo012@gmail.com>
Date: Sat, 30 Mar 2024 16:37:18 +0800
Subject: [PATCH 7/9] feat: zoomToFit by default

---
 src/tw-whiteboard/language/en-GB/WidgetParamTable.tid   | 2 +-
 src/tw-whiteboard/language/zh-Hans/WidgetParamTable.tid | 2 +-
 src/tw-whiteboard/widget.ts                             | 2 +-
 wiki/tiddlers/WidgetDemo.tid                            | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/tw-whiteboard/language/en-GB/WidgetParamTable.tid b/src/tw-whiteboard/language/en-GB/WidgetParamTable.tid
index 7d3236f..28b9d28 100644
--- a/src/tw-whiteboard/language/en-GB/WidgetParamTable.tid
+++ b/src/tw-whiteboard/language/en-GB/WidgetParamTable.tid
@@ -4,7 +4,7 @@ type: text/vnd.tiddlywiki
 | !Attribute | !Description | !Values | !DefaultValues | !Example |
 |tiddler|tiddler to render or edit|tiddler title with type `application/vnd.tldraw+json`|`currentTiddler`|`tiddler="TldrTiddlerExample"`|
 |readonly|make widget content non-editable, so you can use it in public-facing wikis for display.|"yes" or "true"|`no`|`readonly="yes"`|
-|zoomToFit|make widget content fit to widget size for display. This usually gives a smaller zoom, you might use `zoom` param to give your custom value.|"yes" or "true"|`no`|`zoomToFit="yes"`|
+|zoomToFit|make widget content fit to widget size for display. This usually gives a smaller zoom, you might use `zoom` param to give your custom value.|"yes" or "true"|`yes`|`zoomToFit="no"`|
 |zoom|This will disable `zoomToFit`, and only apply when widget loads. You can use mouse wheel to zoom later.|number between 0 and 1|`1`|`zoom="0.25"`|
 |height|widget height|number end with "px"||`height="350px"`|
 |width|widget width|number end with "px" or "%"|`100%`|`width="50%"`|
\ No newline at end of file
diff --git a/src/tw-whiteboard/language/zh-Hans/WidgetParamTable.tid b/src/tw-whiteboard/language/zh-Hans/WidgetParamTable.tid
index 2e40370..1f5849d 100644
--- a/src/tw-whiteboard/language/zh-Hans/WidgetParamTable.tid
+++ b/src/tw-whiteboard/language/zh-Hans/WidgetParamTable.tid
@@ -4,7 +4,7 @@ type: text/vnd.tiddlywiki
 | !参数 | !描述 | !值 | !默认值 | !例子 |
 |tiddler|渲染或编辑的条目|条目标题，条目的类型需要为 `application/vnd.tldraw+json`|`currentTiddler`|`tiddler="TldrTiddlerExample"`|
 |readonly|使白板微件的内容不可编辑，以便在面向公众的站点中显示。|"yes" or "true"|`no`|`readonly="yes"`|
-|zoomToFit|使微件内容适合微件大小以显示。这通常会提供较小的缩放，您可以使用 `zoom` 参数提供自定义值。|"yes" or "true"|`no`|`zoomToFit="yes"`|
+|zoomToFit|使微件内容适合微件大小以显示。这通常会提供较小的缩放，您可以使用 `zoom` 参数提供自定义值。|"yes" or "true"|`yes`|`zoomToFit="no"`|
 |zoom|这将禁用 "zoomToFit"，仅在加载微件时应用。以后可以使用鼠标滚轮缩放。|在 0 和 1 之间的数字|`1`|`zoom="0.25"`|
 |height|微件的高度|以 "px "结尾的数字||`height="350px"`|
 |width|微件宽度|数字以 "px "或"%"结尾|`100%`|`width="50%"`|
\ No newline at end of file
diff --git a/src/tw-whiteboard/widget.ts b/src/tw-whiteboard/widget.ts
index 71045d1..d94d437 100644
--- a/src/tw-whiteboard/widget.ts
+++ b/src/tw-whiteboard/widget.ts
@@ -16,7 +16,7 @@ class TldrawWhiteBoardWidget extends Widget<IAppProps> {
       height: this.getAttribute('height'),
       width: this.getAttribute('width'),
       readonly: this.getAttribute('readonly') === 'yes' || this.getAttribute('readonly') === 'true',
-      zoomToFit: this.getAttribute('zoomToFit') === 'yes' || this.getAttribute('zoomToFit') === 'true',
+      zoomToFit: this.getAttribute('zoomToFit') !== 'no' && this.getAttribute('zoomToFit') === 'false',
       zoom: this.getAttribute('zoom'),
       isDraft: this.editTitle === undefined ? false : Boolean(this.getAttribute('draftTitle')),
       locale: $tw.wiki.getTiddlerText('$:/language') === '$:/languages/zh-Hans' ? 'zh-cn' : 'en',
diff --git a/wiki/tiddlers/WidgetDemo.tid b/wiki/tiddlers/WidgetDemo.tid
index bee60a2..5d84b44 100644
--- a/wiki/tiddlers/WidgetDemo.tid
+++ b/wiki/tiddlers/WidgetDemo.tid
@@ -13,6 +13,6 @@ type: text/vnd.tiddlywiki
 
 !!! <<lingo Zoom>>
 
-<<wikitext-example """<$whiteboard tiddler="TldrTiddlerExample" readonly="yes" zoomToFit="yes" width="30%" height="300px" />""">>
+<<wikitext-example """<$whiteboard tiddler="TldrTiddlerExample" readonly="yes" width="30%" height="300px" />""">>
 
-<<wikitext-example """<$whiteboard tiddler="TldrTiddlerExample" readonly="yes" zoom="0.25" width="30%" height="300px" />""">>
+<<wikitext-example """<$whiteboard tiddler="TldrTiddlerExample" readonly="yes" zoomToFit="no" zoom="0.25" width="30%" height="300px" />""">>

From 483af5f868b8da701b72acdbbb02259cfab250cb Mon Sep 17 00:00:00 2001
From: lin onetwo <linonetwo012@gmail.com>
Date: Sat, 30 Mar 2024 17:19:01 +0800
Subject: [PATCH 8/9] feat: friendly create new tiddler modal

---
 .../language/en-GB/Translations.multids       |  1 +
 .../language/zh-Hans/Translations.multids     |  1 +
 .../PageLayout/CreateNewTiddlerModal.tid      | 12 ++++++++++++
 .../CreateNewTiddlerModalFooter.tid           | 16 ++++++++++++++++
 .../PageLayout/CreateNewTiddlerPopup.tid      | 10 ----------
 .../PageLayout/WhiteBoardLayout.css           | 19 ++++++++++++-------
 .../PageLayout/WhiteBoardLayout.tid           | 17 +++++++++++------
 7 files changed, 53 insertions(+), 23 deletions(-)
 create mode 100644 src/tw-whiteboard/tiddlywiki-ui/PageLayout/CreateNewTiddlerModal.tid
 create mode 100644 src/tw-whiteboard/tiddlywiki-ui/PageLayout/CreateNewTiddlerModalFooter.tid
 delete mode 100644 src/tw-whiteboard/tiddlywiki-ui/PageLayout/CreateNewTiddlerPopup.tid

diff --git a/src/tw-whiteboard/language/en-GB/Translations.multids b/src/tw-whiteboard/language/en-GB/Translations.multids
index 5d0a6d8..46f09ff 100644
--- a/src/tw-whiteboard/language/en-GB/Translations.multids
+++ b/src/tw-whiteboard/language/en-GB/Translations.multids
@@ -4,6 +4,7 @@ Name: Whiteboard
 Description: Tiny little drawing app in TW, based on tldraw. Providing diagram widget and whiteboard view.
 Configs/Description: These settings let you customise the behaviour of "Whiteboard" plugin.
 OpenInLayout: Open In Whiteboard Layout
+CurrentBoard: Current Board
 Tools/Transclude/PlaceHolder: Tiddler title transclude
 Tools/Transclude/NoTiddlerTitle: Tiddler title not filled
 Tools/Transclude/TiddlerMissing: Tiddler missing
diff --git a/src/tw-whiteboard/language/zh-Hans/Translations.multids b/src/tw-whiteboard/language/zh-Hans/Translations.multids
index 931ad38..7a5c64c 100644
--- a/src/tw-whiteboard/language/zh-Hans/Translations.multids
+++ b/src/tw-whiteboard/language/zh-Hans/Translations.multids
@@ -4,6 +4,7 @@ Name: 白板
 Description: 太微白板应用，提供图表微件和白板视图，基于开源白板「TlDraw」
 Configs/Description: 通过这些设置，您可以自定义「白板」插件的行为。
 OpenInLayout: 在白板布局中打开
+CurrentBoard: 当前白板
 Tools/Transclude/PlaceHolder: 条目标题去嵌入
 Tools/Transclude/NoTiddlerTitle: 未填条目标题
 Tools/Transclude/TiddlerMissing: 条目不存在
diff --git a/src/tw-whiteboard/tiddlywiki-ui/PageLayout/CreateNewTiddlerModal.tid b/src/tw-whiteboard/tiddlywiki-ui/PageLayout/CreateNewTiddlerModal.tid
new file mode 100644
index 0000000..fe849a7
--- /dev/null
+++ b/src/tw-whiteboard/tiddlywiki-ui/PageLayout/CreateNewTiddlerModal.tid
@@ -0,0 +1,12 @@
+title: $:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/PageLayout/CreateNewTiddlerModal
+subtitle: {{$:/language/Buttons/NewTiddler/Caption}}
+footer: {{$:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/PageLayout/CreateNewTiddlerModalFooter}}
+mask-closable: yes
+
+<div class="tw-whiteboard-layout-create-new-tiddler-modal-container">
+
+  <h2>{{$:/language/ControlPanel/Basics/NewTiddler/Title/Prompt}}</h2>
+
+  {{$:/state/Whiteboard/PageLayout/create-tiddler||$:/core/ui/EditTemplate/title}}
+
+</div>
\ No newline at end of file
diff --git a/src/tw-whiteboard/tiddlywiki-ui/PageLayout/CreateNewTiddlerModalFooter.tid b/src/tw-whiteboard/tiddlywiki-ui/PageLayout/CreateNewTiddlerModalFooter.tid
new file mode 100644
index 0000000..643632a
--- /dev/null
+++ b/src/tw-whiteboard/tiddlywiki-ui/PageLayout/CreateNewTiddlerModalFooter.tid
@@ -0,0 +1,16 @@
+title: $:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/PageLayout/CreateNewTiddlerModalFooter
+
+\procedure temp-tiddler() $:/state/Whiteboard/PageLayout/create-tiddler
+\function temp-tiddler-draft-title() [<temp-tiddler>get[draft.title]]
+
+<$button
+  class="tw-whiteboard-layout-create-new-tiddler-modal-button"
+  message="tm-close-tiddler"
+  disabled={{{ [<temp-tiddler>get[draft.title]else[yes]] }}}
+>
+  {{$:/language/Buttons/NewTiddler/Caption}}
+  <$action-createtiddler $basetitle=<<temp-tiddler-draft-title>> type="application/vnd.tldraw+json">
+    <$action-deletetiddler $tiddler=<<temp-tiddler>>/>
+    <$action-setfield $tiddler="$:/state/Whiteboard/PageLayout/focusedTiddler" text=<<createTiddler-title>>/>
+  </$action-createtiddler>
+</$button>
\ No newline at end of file
diff --git a/src/tw-whiteboard/tiddlywiki-ui/PageLayout/CreateNewTiddlerPopup.tid b/src/tw-whiteboard/tiddlywiki-ui/PageLayout/CreateNewTiddlerPopup.tid
deleted file mode 100644
index 171abc2..0000000
--- a/src/tw-whiteboard/tiddlywiki-ui/PageLayout/CreateNewTiddlerPopup.tid
+++ /dev/null
@@ -1,10 +0,0 @@
-title: $:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/PageLayout/CreateNewTiddlerPopup
-
-<div class="tw-whiteboard-layout-create-new-tiddler-popup">
-  <$edit-text tag=input focus="yes" tiddler="$:/state/Whiteboard/PageLayout/create-tiddler" default="" />
-  <$button>
-    Create
-    <$action-createtiddler $basetitle={{$:/state/Whiteboard/PageLayout/create-tiddler}} type="application/vnd.tldraw+json" />
-    <$action-setfield $tiddler="$:/state/Whiteboard/PageLayout/create-tiddler" text=""/>
-  </$button>
-</div>
\ No newline at end of file
diff --git a/src/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoardLayout.css b/src/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoardLayout.css
index 9ec5401..153264f 100644
--- a/src/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoardLayout.css
+++ b/src/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoardLayout.css
@@ -7,8 +7,10 @@
   left: calc(50% - 400px / 2);
   padding: 5px;
 
-  background-color: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.04);
   backdrop-filter: blur(5px);
+  border-radius: 2em;
 
   display: flex;
   justify-content: center;
@@ -16,6 +18,7 @@
 }
 .tw-whiteboard-layout-top-bar > select {
   max-width: 200px;
+  margin: 0 0.5em;
 }
 
 .tw-whiteboard-layout-main-area {
@@ -28,16 +31,18 @@ div.tw-whiteboard-layout-container {
   margin: 0;
 }
 
-.tw-whiteboard-layout-create-new-tiddler-popup {
+.tw-whiteboard-layout-create-new-tiddler-modal-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
-  width: 200px;
-}
-.tw-whiteboard-layout-create-new-tiddler-popup button {
+  align-items: flex-start;
   width: 100%;
 }
-.tw-whiteboard-layout-create-new-tiddler-popup textarea {
+.tw-whiteboard-layout-create-new-tiddler-modal-container input {
   width: 100%;
+  font-size: 1.5em;
+  height: 2em;
+}
+.tw-whiteboard-layout-create-new-tiddler-modal-button {
+  font-size: 2em;
 }
diff --git a/src/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoardLayout.tid b/src/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoardLayout.tid
index 1eaf1ab..db44256 100644
--- a/src/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoardLayout.tid
+++ b/src/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoardLayout.tid
@@ -8,7 +8,8 @@ icon: $:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/PageLayout/whiteboard-ico
 \define containerClasses()
 tc-page-container tc-page-view-$(storyviewTitle)$ tc-language-$(languageTitle)$ tw-whiteboard-layout-container
 \end
-\import [[$:/core/ui/PageMacros]] [all[shadows+tiddlers]tag[$:/tags/Macro]!has[draft.of]]
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+\define lingo-base() $:/plugins/linonetwo/tw-whiteboard/language/
 
 <$vars
 	tv-config-toolbar-icons={{$:/config/Toolbar/Icons}}
@@ -36,7 +37,7 @@ tc-page-container tc-page-view-$(storyviewTitle)$ tc-language-$(languageTitle)$
 
 <!-- put this below main, so nav bar is layered on top of the main. In UI, this nav in on the top of the page. -->
 <nav class="tw-whiteboard-layout-top-bar">
-	Select board: 
+	<<lingo CurrentBoard>>
 	<!-- default to recently used whiteboard tiddler -->
 	<$select tiddler="$:/state/Whiteboard/PageLayout/focusedTiddler" default={{{[all[shadows+tiddlers]field:type[application/vnd.tldraw+json]sort[modified]first[]]}}}>
 		<$list filter='[all[shadows+tiddlers]field:type[application/vnd.tldraw+json]sort[modified]]'>
@@ -44,10 +45,14 @@ tc-page-container tc-page-view-$(storyviewTitle)$ tc-language-$(languageTitle)$
 		</$list>
 	</$select>
 
-	<$button tooltip="New" popup="$:/state/Whiteboard/PageLayout/CreateNewTiddlerPopup">{{$:/core/images/new-button}}</$button>
-	<$reveal type="popup" state="$:/state/Whiteboard/PageLayout/CreateNewTiddlerPopup">
-		{{$:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/PageLayout/CreateNewTiddlerPopup}}
-	</$reveal>
+	<$button
+		tooltip={{$:/language/Buttons/NewTiddler/Caption}}
+		message="tm-modal"
+		param="$:/plugins/linonetwo/tw-whiteboard/tiddlywiki-ui/PageLayout/CreateNewTiddlerModal"
+	>
+		<$action-createtiddler $basetitle="$:/state/Whiteboard/PageLayout/create-tiddler" $overwrite="yes" draft.title={{$:/language/DefaultNewTiddlerTitle}}/>
+		{{$:/core/images/new-button}}
+	</$button>
 
 	<$reveal state="$:/state/Whiteboard/PageLayout/focusedTiddler" type="nomatch" text="">
 		<$button tooltip="Open In StoryView">

From d1fdfeb2f56af3284130e3dc6eddffb6ece418d6 Mon Sep 17 00:00:00 2001
From: lin onetwo <linonetwo012@gmail.com>
Date: Sat, 30 Mar 2024 17:23:02 +0800
Subject: [PATCH 9/9] feat: i18n

---
 .../language/en-GB/Translations.multids       |  1 +
 .../language/zh-Hans/Translations.multids     |  3 +-
 .../PageLayout/WhiteBoardLayout.tid           | 30 ++++++++++---------
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/tw-whiteboard/language/en-GB/Translations.multids b/src/tw-whiteboard/language/en-GB/Translations.multids
index 46f09ff..7e8b6f7 100644
--- a/src/tw-whiteboard/language/en-GB/Translations.multids
+++ b/src/tw-whiteboard/language/en-GB/Translations.multids
@@ -4,6 +4,7 @@ Name: Whiteboard
 Description: Tiny little drawing app in TW, based on tldraw. Providing diagram widget and whiteboard view.
 Configs/Description: These settings let you customise the behaviour of "Whiteboard" plugin.
 OpenInLayout: Open In Whiteboard Layout
+OpenInDefault: Open In Default Layout
 CurrentBoard: Current Board
 Tools/Transclude/PlaceHolder: Tiddler title transclude
 Tools/Transclude/NoTiddlerTitle: Tiddler title not filled
diff --git a/src/tw-whiteboard/language/zh-Hans/Translations.multids b/src/tw-whiteboard/language/zh-Hans/Translations.multids
index 7a5c64c..cf9354a 100644
--- a/src/tw-whiteboard/language/zh-Hans/Translations.multids
+++ b/src/tw-whiteboard/language/zh-Hans/Translations.multids
@@ -3,7 +3,8 @@ title: $:/plugins/linonetwo/tw-whiteboard/language/zh-Hans/
 Name: 白板
 Description: 太微白板应用，提供图表微件和白板视图，基于开源白板「TlDraw」
 Configs/Description: 通过这些设置，您可以自定义「白板」插件的行为。
-OpenInLayout: 在白板布局中打开
+OpenInLayout: 在白板布局中开启
+OpenInDefault: 在默认布局中开启
 CurrentBoard: 当前白板
 Tools/Transclude/PlaceHolder: 条目标题去嵌入
 Tools/Transclude/NoTiddlerTitle: 未填条目标题
diff --git a/src/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoardLayout.tid b/src/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoardLayout.tid
index db44256..695b667 100644
--- a/src/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoardLayout.tid
+++ b/src/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoardLayout.tid
@@ -54,23 +54,25 @@ tc-page-container tc-page-view-$(storyviewTitle)$ tc-language-$(languageTitle)$
 		{{$:/core/images/new-button}}
 	</$button>
 
-	<$reveal state="$:/state/Whiteboard/PageLayout/focusedTiddler" type="nomatch" text="">
-		<$button tooltip="Open In StoryView">
-			{{$:/core/images/home-button}}
-			<$action-setfield $tiddler="$:/layout" text="$:/core/ui/PageTemplate"/>
-			<$action-navigate $to={{$:/state/Whiteboard/PageLayout/focusedTiddler}}/>
-		</$button>
-	</$reveal>
-	<!-- default value, when first opened, select widget's state tiddler is empty, but default value filter gives a value, we show that tiddler -->
-	<$reveal state="$:/state/Whiteboard/PageLayout/focusedTiddler" type="match" text="">
-		<$list filter='[all[shadows+tiddlers]field:type[application/vnd.tldraw+json]sort[modified]first[]]'>
-			<$button tooltip="Open In StoryView">
+	<$wikify name="OpenInDefault" text="<<lingo OpenInDefault>>">
+		<$reveal state="$:/state/Whiteboard/PageLayout/focusedTiddler" type="nomatch" text="">
+			<$button tooltip=<<OpenInDefault>>>
 				{{$:/core/images/home-button}}
 				<$action-setfield $tiddler="$:/layout" text="$:/core/ui/PageTemplate"/>
-				<$action-navigate $to={{{[all[shadows+tiddlers]field:type[application/vnd.tldraw+json]sort[modified]first[]]}}} />
+				<$action-navigate $to={{$:/state/Whiteboard/PageLayout/focusedTiddler}}/>
 			</$button>
-		</$list>
-	</$reveal>
+		</$reveal>
+		<!-- default value, when first opened, select widget's state tiddler is empty, but default value filter gives a value, we show that tiddler -->
+		<$reveal state="$:/state/Whiteboard/PageLayout/focusedTiddler" type="match" text="">
+			<$list filter='[all[shadows+tiddlers]field:type[application/vnd.tldraw+json]sort[modified]first[]]'>
+				<$button tooltip=<<OpenInDefault>>>
+					{{$:/core/images/home-button}}
+					<$action-setfield $tiddler="$:/layout" text="$:/core/ui/PageTemplate"/>
+					<$action-navigate $to={{{[all[shadows+tiddlers]field:type[application/vnd.tldraw+json]sort[modified]first[]]}}} />
+				</$button>
+			</$list>
+		</$reveal>
+	</$wikify>
 </nav>
 
 </$navigator>