fix: shortcut don't work if not focused

tiddly-gittly · Mar 30, 2024 · f90b7ab · f90b7ab
1 parent 57b3530
commit f90b7ab
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 6 deletions.
diff --git a/src/tw-whiteboard/components/App.tsx b/src/tw-whiteboard/components/App.tsx
@@ -24,6 +24,7 @@ export interface IAppProps {
    * Tiddler to contain the serialized JSON component state
    */
   currentTiddler?: string;
+  focused: boolean;
   height?: string;
   initialTiddlerText?: string;
   isDarkMode: boolean;
@@ -65,6 +66,7 @@ export function App(props: IAppProps & IDefaultWidgetProps): JSX.Element {
     isDarkMode,
     locale,
     isDraft,
+    focused,
     onReady,
   } = props;
 
@@ -75,6 +77,10 @@ export function App(props: IAppProps & IDefaultWidgetProps): JSX.Element {
     // set configs
     editor.user.updateUserPreferences({ isDarkMode, locale });
   }, [editor, isDarkMode, locale]);
+  useEffect(() => {
+    if (!editor) return;
+    editor.updateInstanceState({ isFocused: focused });
+  }, [editor, focused]);
 
   const onMount = useCallback((newEditor: Editor) => {
     setEditor(newEditor);

diff --git a/src/tw-whiteboard/language/en-GB/WidgetParamTable.tid b/src/tw-whiteboard/language/en-GB/WidgetParamTable.tid
@@ -7,4 +7,5 @@ type: text/vnd.tiddlywiki
 |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%"`|
+|width|widget width|number end with "px" or "%"|`100%`|`width="50%"`|
+|focused|focused or not|shortcuts can only be used when focused|`no`|`focused="yes"`|
diff --git a/src/tw-whiteboard/language/zh-Hans/Translations.multids b/src/tw-whiteboard/language/zh-Hans/Translations.multids
@@ -6,7 +6,7 @@ Configs/Description: 通过这些设置，您可以自定义「白板」插件
 OpenInLayout: 在白板布局中开启
 OpenInDefault: 在默认布局中开启
 CurrentBoard: 当前白板
-Tools/Transclude/PlaceHolder: 条目标题去嵌入
+Tools/Transclude/PlaceHolder: 条目标题 - 嵌入
 Tools/Transclude/NoTiddlerTitle: 未填条目标题
 Tools/Transclude/TiddlerMissing: 条目不存在
 Tools/Transclude/NoTextOnField: 条目此字段无文本内容

diff --git a/src/tw-whiteboard/language/zh-Hans/WidgetParamTable.tid b/src/tw-whiteboard/language/zh-Hans/WidgetParamTable.tid
@@ -7,4 +7,5 @@ type: text/vnd.tiddlywiki
 |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%"`|
+|width|微件宽度|数字以 "px "或"%"结尾|`100%`|`width="50%"`|
+|focused|是否聚焦|聚焦时才能使用快捷键|`no`|`focused="yes"`|
diff --git a/src/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoardLayout.tid b/src/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoardLayout.tid
@@ -25,12 +25,12 @@ tc-page-container tc-page-view-$(storyviewTitle)$ tc-language-$(languageTitle)$
 
 <main class="tw-whiteboard-layout-main-area">
 	<$reveal state="$:/state/Whiteboard/PageLayout/focusedTiddler" type="nomatch" text="">
-		<$whiteboard tiddler={{$:/state/Whiteboard/PageLayout/focusedTiddler}} height="calc(100vh - 35px)" />
+		<$whiteboard tiddler={{$:/state/Whiteboard/PageLayout/focusedTiddler}} height="calc(100vh - 35px)" focused="yes" />
 	</$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[]]'>
-			<$whiteboard tiddler={{{[all[shadows+tiddlers]field:type[application/vnd.tldraw+json]sort[modified]first[]]}}} height="calc(100vh - 35px)" />
+			<$whiteboard tiddler={{{[all[shadows+tiddlers]field:type[application/vnd.tldraw+json]sort[modified]first[]]}}} height="calc(100vh - 35px)" focused="yes" />
 		</$list>
 	</$reveal>
 </main>

diff --git a/src/tw-whiteboard/tldraw/overrides.tsx b/src/tw-whiteboard/tldraw/overrides.tsx
@@ -13,7 +13,7 @@ export const getOverrides = (props: IAppProps): TLUiOverrides => ({
       label: 'tool.transclude',
       readonlyOk: false,
       icon: 'transcludify',
-      kbd: '{',
+      kbd: 'c',
       onSelect(_source) {
         editor.setCurrentTool(TranscludeTool.id);
       },

diff --git a/src/tw-whiteboard/widget.ts b/src/tw-whiteboard/widget.ts
@@ -18,6 +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'),
+      focused: this.getAttribute('focused') === 'yes',
       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',