Towards a friendlier workflow for images in notes

[franp]

First of all, thank you for this plugin :)! I sought something like this for TW in the past, I’ve been using it in the last couple of months, I think it adds great value for people like me who take a lot of screenshots for study and work.

Said that, I noticed a strange behaviour when opening tiddlers in edit mode.
I’m using TW for node.js remotely deployed on a server.
If the plugin is enabled, when I open a tiddler for editing it and start writing something, after a a couple of seconds the focus into the tiddler is lost and I’m forced to click again inside the tiddler for getting back the edit focus.
This is a bit annoying during the standard edit of the tiddler, especially when you work with lots of them
If I disable the plugin and restart the server, the focus behaviour is ok.

To be sure, I also tried with latest tiddlywiki(v. 5.3.6) for node.js deployed on my local machine with quickimages(v. 0.0.3) as the only installed plugin.

@saqimtiaz is there something I can do in order to solve this focus problem?

Thanks

[saqimtiaz]

@franp I believe this is due to an underyling bug with the genesis widget, see [BUG] Genesis widget always re-renders on first refresh cycle · Issue #8871 · TiddlyWiki/TiddlyWiki5 · GitHub

[franp]

thank you for your feedback @saqimtiaz

I will monitor the bug then and retry after its resolution.

[well-noted]

@saqimtiaz Amazing, I was just starting to think about how this could be done, no surprise you had already beaten me to the punch.

Now any chance it could work with Streams?

(PS, this is working well with MWS, which is fantastic because it really opens up the ability to keep large image collections in bags)

[saqimtiaz]

@well-noted

Now any chance it could work with Streams?

You would need to adapt $:/plugins/sq/streams/editor-template to follow the pattern in the version of $:/core/ui/EditTemplate/body/default from this plugin. Here is a quick rough jab at it to get you started (requires that both plugins are installed):

\procedure customImportFileActions()
\procedure tv-action-refresh-policy() always
\procedure imageTextTitle() $:/config/sq/quickimage/image-transclusion-text
\procedure defaultTextTitle() $:/config/sq/quickimage/default-transclusion-text
<$let
	tiddlerJSON={{{[<importTitle>get[text]jsonextract[tiddlers]]}}}
	replacement-text-image={{{ [<imageTextTitle>get[text]] }}}
	replacement-text-file={{{ [<defaultTextTitle>get[text]] }}}
	contentTiddler={{{ [<currentTiddler>get[draft.of]else<currentTiddler>] }}}
	>
	<!-- iterate over each position in the array -->
	<$list filter="[<tiddlerJSON>jsonindexes[]]" variable="index">
		<!-- get the tiddler at that position in the array from the JSON -->
		<$let
			tiddler={{{ [<tiddlerJSON>jsonextract<index>] }}} 
			title={{{ [<tiddler>jsonget[title]] }}}
			type={{{ [<tiddler>jsonget[type]] :else[[text/vnd.tiddlywiki]] }}}
			unusedtitle={{{ [<title>] :cascade[{$:/config/sq/quickimage/file-title-cascade}splitregexp[\n]!prefix[\\]!is[blank]] }}}
		>
		<$action-log $$filter="title unusedtitle"/>
			<!-- make sure we have a title for the tiddler -->
			<$list filter="[<unusedtitle>!is[blank]]">
					<$action-setmultiplefields
						$fields="[<tiddler>jsonindexes[]] :except[[title]] created modified quickimage"
						$values="[<tiddler>jsonindexes[]] :except[[title]] :map[<tiddler>jsonget<currentTiddler>] [<now [UTC]YYYY0MM0DD0hh0mm0ssXXX>] :all[<now [UTC]YYYY0MM0DD0hh0mm0ssXXX>] yes"
						$timestamp="no"
						/>
					<$list filter="[<currentTiddler>] :map[get[type]prefix[image]then<replacement-text-image>else<replacement-text-file>substitute[]]" variable="imageTitle">
						<$action-transmit actions=`<$action-sendmessage
							$message="tm-edit-text-operation"
							$param="insert-text" text="$(imageTitle)$"/>` target="editor-import"/>
					</$list>
					<$action-deletetiddler $tiddler=<<importTitle>>/>
			</$list>
		</$let>
	</$list>
</$let>
\end customImportFileActions

\define config-visibility-title()
$:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
\end

\widget $edit(tiddler, field, index, class, tabindex, autocomplete,cancelPopups,inputActions,refreshTitle)
<$genesis $remappable="no" $type="$streams-edit" tag="textarea" autoHeight="yes" minHeight="1em" focus="yes" select="false" class="streams-editor tc-edit-texteditor tc-edit-texteditor-body" caretPosition={{{[{$:/state/sq/streams/caret-position}!is[blank]else[end]]}}}>
	<$set name="targetTiddler"value=<<currentTiddler>> >
		<$slot $name="ts-raw"/>
	</$set>
</$genesis>
\end 

\widget $dropzone(importTitle, autoOpenOnImport, contentTypesFilter, class, enable, filesOnly, actions)
<$let
	configTitle="$:/config/sq/quickimage/import/enable"
	quickimageEnabled={{{ [<configTitle>get[text]trim[]match[no]else[yes]]  }}}
	>
	<$genesis
		$remappable="no" 
		$type="$dropzone"
		importTitle=<<importTitle>>
		autoOpenOnImport="no"
		contentTypesFilter=<<contentTypesFilter>>
		class=<<class> enable=<<enable>>
		filesOnly=<<filesOnly>>
		actions={{{ [<quickimageEnabled>match[yes]then<customImportFileActions>else<actions>]  }}}
	>
		<$slot $name="ts-raw"/>
	</$genesis>
</$let>
\end

<$transclude $tiddler="$:/core" $subtiddler="$:/core/ui/EditTemplate/body/default"/>

This also reminds me that Streams is really overdue for a refactoring, since a lot of the core tweaks and workarounds that were used back then are now a part of the core.

[arunnbabu81]

@arunnbabu81

This request might be related to webdav utils and quick images plug ins.
Currently if we copy paste an image into the editor, it gets upload to files folder or its subdirectory and at the same time a tiddler with _canonical_uri field gets created. Can the creation of image tiddler with _canonical_uri field be avoided and instead the image gets directly referenced in the tiddler (in which it was copy pasted) in this format - [img[relative-path]]

@saqimtiaz can something be done for this. I use a lot of images in my wiki. So creating separate image tiddlers for each image being added to the wiki seems unnecessary. Atleast can there be a configurable option - one the current way of transcluding the image tiddler and other as [img[file-path]]

[saqimtiaz]

This should now be resolved in the prerelease v5.3.7 of TiddlyWiki:
https://tiddlywiki.com/prerelease/

[arunnbabu81]

@saqimtiaz Is it possible to support image widgets as shown in the above screenshot

[well-noted]

@saqimtiaz

You would need to adapt $:/plugins/sq/streams/editor-template to follow the pattern in the version of $:/core/ui/EditTemplate/body/default from this plugin

\procedure customImportFileActions()
\procedure tv-action-refresh-policy() always
\procedure imageTextTitle() $:/config/sq/quickimage/image-transclusion-text
\procedure defaultTextTitle() $:/config/sq/quickimage/default-transclusion-text
<$let
	tiddlerJSON={{{[<importTitle>get[text]jsonextract[tiddlers]]}}}
	replacement-text-image={{{ [<imageTextTitle>get[text]] }}}
	replacement-text-file={{{ [<defaultTextTitle>get[text]] }}}
	contentTiddler={{{ [<currentTiddler>get[draft.of]else<currentTiddler>] }}}
	>
	<!-- iterate over each position in the array -->
	<$list filter="[<tiddlerJSON>jsonindexes[]]" variable="index">
		<!-- get the tiddler at that position in the array from the JSON -->
		<$let
			tiddler={{{ [<tiddlerJSON>jsonextract<index>] }}} 
			title={{{ [<tiddler>jsonget[title]] }}}
			type={{{ [<tiddler>jsonget[type]] :else[[text/vnd.tiddlywiki]] }}}
			unusedtitle={{{ [<title>] :cascade[{$:/config/sq/quickimage/file-title-cascade}splitregexp[\n]!prefix[\\]!is[blank]] }}}
		>
		<$action-log $$filter="title unusedtitle"/>
			<!-- make sure we have a title for the tiddler -->
			<$list filter="[<unusedtitle>!is[blank]]">
					<$action-setmultiplefields
						$fields="[<tiddler>jsonindexes[]] :except[[title]] created modified quickimage"
						$values="[<tiddler>jsonindexes[]] :except[[title]] :map[<tiddler>jsonget<currentTiddler>] [<now [UTC]YYYY0MM0DD0hh0mm0ssXXX>] :all[<now [UTC]YYYY0MM0DD0hh0mm0ssXXX>] yes"
						$timestamp="no"
						/>
					<$list filter="[<currentTiddler>] :map[get[type]prefix[image]then<replacement-text-image>else<replacement-text-file>substitute[]]" variable="imageTitle">
						<$action-transmit actions=`<$action-sendmessage
							$message="tm-edit-text-operation"
							$param="insert-text" text="$(imageTitle)$"/>` target="editor-import"/>
					</$list>
					<$action-deletetiddler $tiddler=<<importTitle>>/>
			</$list>
		</$let>
	</$list>
</$let>
\end customImportFileActions

\define config-visibility-title()
$:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
\end

\widget $streams-edit(tag, autoHeight, minHeight, focus, select, class, caretPosition)
<$genesis
	$remappable="no"
	$type="$streams-edit"
	tag=<<tag>>
	autoHeight=<<autoHeight>>
	minHeight=<<minHeight>>
	focus=<<focus>>
	select=<<select>>
	class=<<class>>
	caretPosition=<<caretPosition>>
>
	<$set name="targetTiddler" value=<<currentTiddler>>>
		<$list filter="[all[shadows+tiddlers]tag[$:/tags/EditorToolbar]!has[draft.of]]">
			<$reveal type="nomatch" state=<<config-visibility-title>> text="hide" class="tc-text-editor-toolbar-item-wrapper">
				<$transclude tiddler="$:/core/ui/EditTemplate/body/toolbar/button" mode="inline"/>
			</$reveal>
		</$list>
	</$set>
	<$slot $name="ts-raw"/>
</$genesis>
\end

\widget $dropzone(importTitle, autoOpenOnImport, contentTypesFilter, class, enable, filesOnly, actions)
<$let
	configTitle="$:/config/sq/quickimage/import/enable"
	quickimageEnabled={{{ [<configTitle>get[text]trim[]match[no]else[yes]]  }}}
	>
	<$genesis
		$remappable="no" 
		$type="$dropzone"
		importTitle=<<importTitle>>
		autoOpenOnImport="no"
		contentTypesFilter=<<contentTypesFilter>>
		class=<<class>>
		enable=<<enable>>
		filesOnly=<<filesOnly>>
		actions={{{ [<quickimageEnabled>match[yes]then<customImportFileActions>else<actions>]  }}}
	>
		<$slot $name="ts-raw"/>
	</$genesis>
</$let>
\end

<$transclude $tiddler="$:/core" $subtiddler="$:/core/ui/EditTemplate/body/default"/>

Unfortunately, I haven’t found a way to wrap keyboard shortcuts around that editor

Nvm, the following solution addresses both goals:

\procedure customImportFileActions()
\procedure tv-action-refresh-policy() always
\procedure imageTextTitle() $:/config/sq/quickimage/image-transclusion-text
\procedure defaultTextTitle() $:/config/sq/quickimage/default-transclusion-text
<$let
	tiddlerJSON={{{[<importTitle>get[text]jsonextract[tiddlers]]}}}
	replacement-text-image={{{ [<imageTextTitle>get[text]] }}}
	replacement-text-file={{{ [<defaultTextTitle>get[text]] }}}
	contentTiddler={{{ [<currentTiddler>get[draft.of]else<currentTiddler>] }}}
	>
	<!-- iterate over each position in the array -->
	<$list filter="[<tiddlerJSON>jsonindexes[]]" variable="index">
		<!-- get the tiddler at that position in the array from the JSON -->
		<$let
			tiddler={{{ [<tiddlerJSON>jsonextract<index>] }}} 
			title={{{ [<tiddler>jsonget[title]] }}}
			type={{{ [<tiddler>jsonget[type]] :else[[text/vnd.tiddlywiki]] }}}
			unusedtitle={{{ [<title>] :cascade[{$:/config/sq/quickimage/file-title-cascade}splitregexp[\n]!prefix[\\]!is[blank]] }}}
		>
		<$action-log $$filter="title unusedtitle"/>
			<!-- make sure we have a title for the tiddler -->
			<$list filter="[<unusedtitle>!is[blank]]">
					<$action-setmultiplefields
						$fields="[<tiddler>jsonindexes[]] :except[[title]] created modified quickimage"
						$values="[<tiddler>jsonindexes[]] :except[[title]] :map[<tiddler>jsonget<currentTiddler>] [<now [UTC]YYYY0MM0DD0hh0mm0ssXXX>] :all[<now [UTC]YYYY0MM0DD0hh0mm0ssXXX>] yes"
						$timestamp="no"
						/>
					<$list filter="[<currentTiddler>] :map[get[type]prefix[image]then<replacement-text-image>else<replacement-text-file>substitute[]]" variable="imageTitle">
						<$action-transmit actions=`<$action-sendmessage
							$message="tm-edit-text-operation"
							$param="insert-text" text="$(imageTitle)$"/>` target="editor-import"/>
					</$list>
					<$action-deletetiddler $tiddler=<<importTitle>>/>
			</$list>
		</$let>
	</$list>
</$let>
\end customImportFileActions

\define config-visibility-title()
$:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
\end

\widget $dropzone(importTitle, autoOpenOnImport, contentTypesFilter, class, enable, filesOnly, actions)
<$let
	configTitle="$:/config/sq/quickimage/import/enable"
	quickimageEnabled={{{ [<configTitle>get[text]trim[]match[no]else[yes]]  }}}
	>
	<$genesis
		$remappable="no" 
		$type="$dropzone"
		importTitle=<<importTitle>>
		autoOpenOnImport="no"
		contentTypesFilter=<<contentTypesFilter>>
		class=<<class>>
		enable=<<enable>>
		filesOnly=<<filesOnly>>
		actions={{{ [<quickimageEnabled>match[yes]then<customImportFileActions>else<actions>]  }}}
	>
		<$slot $name="ts-raw"/>
	</$genesis>
</$let>
\end

<$keyboard key="ctrl-shift-T" actions="""<<mark-todo>>""">
<$keyboard key="ctrl-shift-K" actions="""<<yadda-yadda-streams>>""">
<$transclude $tiddler="$:/core" $subtiddler="$:/core/ui/EditTemplate/body/default"/>
</$keyboard>
</$keyboard>