Merge pull request #32 from tiddly-gittly/feat/note-wikitext

Feat/note wikitext
tiddly-gittly · Mar 30, 2024 · e82bc37 · e82bc37
2 parents 2e70af1 + d1fdfeb
commit e82bc37
Show file tree

Hide file tree

Showing 28 changed files with 345 additions and 120 deletions.
diff --git a/src/tw-whiteboard/components/App.tsx b/src/tw-whiteboard/components/App.tsx
@@ -11,7 +11,9 @@ 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';
 import { TranscludeShapeUtil } from '../tldraw/shapes/transclude/util';
 
@@ -21,7 +23,7 @@ export interface IAppProps {
   /**
    * Tiddler to contain the serialized JSON component state
    */
-  currentTiddler: string;
+  currentTiddler?: string;
   height?: string;
   initialTiddlerText?: string;
   isDarkMode: boolean;
@@ -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 {
@@ -135,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
@@ -187,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/language/en-GB/Translations.multids b/src/tw-whiteboard/language/en-GB/Translations.multids
@@ -3,7 +3,12 @@ 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
+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
+Tools/Transclude/TiddlerMissing: Tiddler missing
+Tools/Transclude/NoTextOnField: No text on field
+Tools/Note/DbClickEdit: Double click to edit
+Tools/Note/PlaceHolder: Input wikitext here...
diff --git 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%"`|
diff --git a/src/tw-whiteboard/language/zh-Hans/Translations.multids b/src/tw-whiteboard/language/zh-Hans/Translations.multids
@@ -3,7 +3,12 @@ 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: 条目此字段无文本内容
+OpenInLayout: 在白板布局中开启
+OpenInDefault: 在默认布局中开启
+CurrentBoard: 当前白板
+Tools/Transclude/PlaceHolder: 条目标题去嵌入
+Tools/Transclude/NoTiddlerTitle: 未填条目标题
+Tools/Transclude/TiddlerMissing: 条目不存在
+Tools/Transclude/NoTextOnField: 条目此字段无文本内容
+Tools/Note/DbClickEdit: 双击以编辑
+Tools/Note/PlaceHolder: 输入维基文本…
diff --git 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%"`|
diff --git a/src/tw-whiteboard/tiddlywiki-ui/PageLayout/CreateNewTiddlerModal.tid 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>
diff --git a/src/tw-whiteboard/tiddlywiki-ui/PageLayout/CreateNewTiddlerModalFooter.tid 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>
diff --git a/src/tw-whiteboard/tiddlywiki-ui/PageLayout/CreateNewTiddlerPopup.tid b/src/tw-whiteboard/tiddlywiki-ui/PageLayout/CreateNewTiddlerPopup.tid
diff --git a/src/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoardLayout.css b/src/tw-whiteboard/tiddlywiki-ui/PageLayout/WhiteBoardLayout.css
@@ -7,15 +7,18 @@
   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;
   align-items: center;
 }
 .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
@@ -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}}
@@ -23,11 +24,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>
@@ -36,36 +37,42 @@ 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/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>
 	</$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/tiddler" 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}}/>
-		</$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="">
-		<$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>

diff --git 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>
+<$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/focusedTiddler" 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>
diff --git a/src/tw-whiteboard/tiddlywiki-ui/ViewToolbar/OpenInFullScreenWhiteBoardButtonImage.tid b/src/tw-whiteboard/tiddlywiki-ui/ViewToolbar/OpenInFullScreenWhiteBoardButtonImage.tid
diff --git 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'),
   };
 }