updates

core/ui/EditTemplate/body/default.tid

@@ -1,10 +1,20 @@
 title: $:/core/ui/EditTemplate/body/default
 
-\function edit-preview-state()
+\function get.edit-preview-state()
 [{$:/config/ShowEditPreview/PerTiddler}!match[yes]then[$:/state/showeditpreview]] :else[<qualified-preview-state>] +[get[text]] :else[[no]]
 \end
 
-\function get.tc-edit-texteditor.class() tc-edit-texteditor tc-edit-texteditor-body [<edit-preview-state>match[yes]then<identifier>addprefix[tc-edit-texteditor-identified-]] +[join[ ]]
+\function get.tc-edit-texteditor.class() tc-edit-texteditor tc-edit-texteditor-body [<get.edit-preview-state>match[yes]then<identifier>addprefix[tc-edit-texteditor-identified-]] +[join[ ]]
+
+\function get.preview.width() [<sidebarWidthTiddler>get[text]]
+
+\function get.style.grid-template-columns()
+[<get.edit-preview-state>!match[yes]then[1fr]]
+:else[<sidebarWidthTiddler>!is[missing]then[calc(100% - ]addsuffix<get.preview.width>addsuffix[) ]addsuffix<get.preview.width>]
+:else[[repeat(2, minmax(0px, 1fr))]]
+\end
+
+\function get.slider.condition() [<get.edit-preview-state>match[yes]] :else[[no]]
 
 \define config-visibility-title()
 $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
@@ -14,7 +24,13 @@ $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
 <$action-popup $state=<<importState>> $coords="(0,0,0,0)" $floating="yes"/>
 \end
 
-\procedure tp-tiddler-preview()
+\procedure tp-tiddler-editor-preview()
+<div
+	class={{{ [<get.edit-preview-state>match[yes]then[tc-tiddler-preview]else[tc-tiddler-preview-hidden]] [[tc-tiddler-editor]] +[join[ ]] }}}
+	style.grid-template-columns=<<get.style.grid-template-columns>>>
+
+	<$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>
+
 	<$list filter="[<editPreviewStateTiddler>get[text]match[yes]]" variable="ignore">
 
 		<div class="tc-tiddler-preview-preview" data-tiddler-title={{!!draft.title}} data-tags={{!!tags}}>
@@ -28,6 +44,8 @@ $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
 		</div>
 
 	</$list>
+
+</div>
 \end
 
 \whitespace trim
@@ -35,27 +53,22 @@ $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
 	qualified-preview-state=<<qualify "$:/state/showeditpreview">>
 	editPreviewStateTiddler={{{ [{$:/config/ShowEditPreview/PerTiddler}!match[yes]then[$:/state/showeditpreview]] :else[<qualified-preview-state>] }}}
 	importTitle=<<qualify $:/ImportImage>>
-	importState=<<qualify $:/state/ImportImage>> >
+	importState=<<qualify $:/state/ImportImage>>
+	identifier={{{ [<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]] }}}
+	sidebarWidthTiddler={{{ [<identifier>addprefix[$:/state/resizer/previewwidth-]] }}} >
 <$dropzone importTitle=<<importTitle>> autoOpenOnImport="no" contentTypesFilter={{$:/config/Editor/ImportContentTypesFilter}} class="tc-dropzone-editor" enable={{{ [{$:/config/DragAndDrop/Enable}match[no]] :else[subfilter{$:/config/Editor/EnableImportFilter}then[yes]else[no]] }}} filesOnly="yes" actions=<<importFileActions>> >
 <div>
-<div class={{{ [<edit-preview-state>match[yes]then[tc-tiddler-preview]else[tc-tiddler-preview-hidden]] [[tc-tiddler-editor]] +[join[ ]] }}}>
-
-<$let identifier={{{ [<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]] }}} sidebarWidthTiddler={{{ [<identifier>addprefix[$:/state/resizer/texteditorwidth-]] }}}>
-
-<$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>
 
 <$transclude
-	$variable="one-cell-slider"
+	$variable="editor-preview-slider"
-	template="tp-tiddler-preview"
+	class="tc-edit-texteditor-slider"
+	template="tp-tiddler-editor-preview"
+	sliderCondition=<<get.slider.condition>>
 	mode="inline"
 	padding="0px"
 	sliderWidth="6px"
 />
 
-</$let>
-
-</div>
-
 </div>
 
 </$dropzone>

core/wiki/macros/sidebar-resizer.tid

@@ -410,3 +410,76 @@ title: $:/core/procedures/sidebar-resizer
 
 </$set>
 \end
+
+\procedure editor-resizer(template:"",mode:"block",sliderCondition:"yes",eventCatcherClass:"")
+<$set name="resizerWidthDivided" value={{{ [<get.resizer.style.width>divide[2]] }}}>
+
+	<$eventcatcher
+		tag="div"
+		class=<<get.active.class tc-sidebar-resizer-pointerdown-eventcatcher>>
+		selector=".tc-sidebar-resizer"
+		matchSelector=".tc-sidebar-resizer"
+		$pointerdown=<<get.sidebar-resizer.pointerdown.actions>>
+		$pointerup=<<sidebar-resizer-pointercancel-actions>>>
+
+		<%if [<resizer.state>!match[no]] %>
+
+			<$eventcatcher
+				tag="div"
+				class=<<get.active.class tc-sidebar-resizer-pointermove-eventcatcher-wrapper>>
+				selector=".tc-sidebar-resizer"
+				matchSelector=".tc-sidebar-resizer"
+				$pointerup={{{ [<get.resizer.state>!is[missing]then<sidebar-resizer-pointercancel-actions>] }}}>
+
+				<$eventcatcher
+					tag="div"
+					selector=".tc-sidebar-resizer-pointermove"
+					matchSelector=".tc-sidebar-resizer-pointermove"
+					class=<<get.active.class tc-sidebar-resizer-pointermove-eventcatcher>>
+					$pointerup=<<sidebar-resizer-pointercancel-actions>>
+					$pointerleave=<<sidebar-resizer-pointercancel-actions>>
+					$pointerout=<<sidebar-resizer-pointercancel-actions>>
+					$pointercancel=<<sidebar-resizer-pointercancel-actions>>
+					$pointerdown=<<sidebar-resizer-pointercancel-actions>>
+					$touchstart=<<sidebar-resizer-pointercancel-actions>>
+					$pointermove=<<sidebar-resizer-pointermove-actions>>
+					$contextmenu=<<sidebar-resizer-pointercancel-actions>>>
+
+					<div class=<<get.active.class tc-sidebar-resizer-pointermove>>/>
+
+				</$eventcatcher>
+
+				<%if [<sliderCondition>match[yes]] %>
+
+					<div
+						class=<<get.resizer.class>>
+						style.position=<<get.resizer.style.position>>
+						style.left=<<get.resizer.style.left>>
+						style.width=<<get.resizer.style.width>>
+					/>
+
+				<% endif %>
+
+				<%if [<template>is[variable]] [<template>is[tiddler]] %>
+
+					<%if [<template>is[variable]] %>
+
+						<$transclude $variable=<<template>> mode=<<mode>>/>
+
+					<% else %>
+
+						<$transclude $tiddler=<<template>> mode=<<mode>>/>
+
+					<% endif %>
+
+				<% endif %>
+
+			</$eventcatcher>
+
+		<% endif %>
+
+	</$eventcatcher>
+
+</$set>
+\end
+

core/wiki/macros/sliders.tid

@@ -2,7 +2,7 @@ title: $:/core/procedures/sliders
 tags: $:/tags/Global
 code-body: yes
 
-\procedure one-cell-slider(width:"100%",minHeight:"10px",template:"",mode:"block",sliderWidth:"12px",padding:"12px",sliderCondition:"yes",leftMinWidth:"100px",rightMinWidth:"100px")
+\procedure editor-preview-slider(class:"",width:"100%",minHeight:"10px",template:"",mode:"block",sliderWidth:"12px",padding:"12px",sliderCondition:"yes",leftMinWidth:"250px",rightMinWidth:"250px")
 \import $:/core/procedures/sidebar-resizer
 \function get.resizer.style.position() absolute
 \function get.template-right.width() [<sidebarWidthTiddler>get[text]] :else[[50%]]
@@ -10,21 +10,11 @@ code-body: yes
 \function get.resizer.style.width() [<sliderWidth>]
 \function set.throttling() no
 \function get.template.left()
+\function get.preview.slider.class() [<class>]
 \function get.left.minwidth() [<leftMinWidth>]
 \function get.right.minwidth() [<rightMinWidth>]
 \whitespace trim
 
-<div
-	style.width=<<width>>
-	style.min-height=<<minHeight>>
-	style.display="flex"
-	style.flex-direction="column"
-	style.padding-left=<<padding>>
-	style.padding-right=<<padding>>
-	style.padding-top=<<padding>>
-	style.padding-bottom=<<padding>>
->
-
 <$let
 	tv-set-storywidth-storyright="no"
 	tv-set-sidebarwidth="yes"
@@ -40,18 +30,14 @@ code-body: yes
 	storyPaddingRightTiddler={{{ [<storyPaddingRightTiddler>!is[blank]] :else[<qualify>addsuffix[-]addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storypaddingright-]] }}}>
 
 	<$transclude
-			$variable="sidebar-resizer"
+		$variable="editor-resizer"
-			templateLeft="get.template.left"
+		template=<<template>>
-			templateRight=<<template>>
 		sliderCondition=<<sliderCondition>>
 		eventCatcherClass="tc-one-cell-eventcatcher"
 		mode=<<mode>>
-			zIndexLeft="-1"
 	/>
 
 </$let>
-
-</div>
 \end
 
 \procedure two-cell-slider(width:"100%",minHeight:"10px",templateLeft:"",templateRight:"",mode:"block",sliderWidth:"12px",padding:"12px",sliderCondition:"yes",leftMinWidth:"100px",rightMinWidth:"100px")

themes/tiddlywiki/vanilla/base.tid

@@ -1426,7 +1426,7 @@ html body.tc-body.tc-single-tiddler-window {
 */
 
 .tc-editor-toolbar {
-	margin-top: 8px;
+	padding-top: 8px;
 }
 
 .tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-editor-toolbar,
@@ -1697,6 +1697,7 @@ html body.tc-body.tc-single-tiddler-window {
 		"editor";
 	grid-template-columns: 1fr;
 	grid-template-rows: auto 1fr;
+	width: 100%;
 }
 
 .tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-tiddler-preview-preview {
@@ -1704,7 +1705,7 @@ html body.tc-body.tc-single-tiddler-window {
 	overflow-wrap: anywhere;
 	word-break: normal;
 	border: 1px solid <<colour tiddler-editor-border>>;
-	margin: 4px 0 3px 0;
+	margin: 4px 0 3px 9px;
 	padding: 3px 3px 3px 3px;
 }
 

themes/tiddlywiki/vanilla/sidebar-resizer.tid

@@ -40,9 +40,15 @@ code-body: yes
 			height: 100%;
 		}
 
-		.tc-sidebar-resizer-pointerdown-eventcatcher.tc-one-cell-eventcatcher {
+		.tc-edit-texteditor-slider > .tc-sidebar-resizer-pointerdown-eventcatcher.tc-one-cell-eventcatcher {
-			width: 200%;
+			position: absolute;
-			left: -100%;
+			width: 100%;
+			top: 0;
+			left: 0;
+		}
+
+		.tc-editor-toolbar {
+			background-color: <<colour tiddler-background>>;
 		}
 
 		.tc-sidebar-resizer-pointermove-eventcatcher, .tc-sidebar-resizer-pointermove {
@@ -166,18 +172,3 @@ code-body: yes
 .tc-tiddler-frame contenteditable[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor {
 	width: calc(100% - 3px);
 }
-
-<$list filter="[all[tiddlers]prefix[$:/state/resizer/texteditorwidth-]]" variable="textEditorWidthTiddler">
-
-	<$let classIdentifier={{{ [<textEditorWidthTiddler>removeprefix[$:/state/resizer/texteditorwidth-]] }}}>
-
-		.tc-tiddler-frame iframe.tc-edit-texteditor.tc-edit-texteditor-identified-<<classIdentifier>>,
-		.tc-tiddler-frame textarea.tc-edit-texteditor.tc-edit-texteditor-identified-<<classIdentifier>>,
-		.tc-tiddler-frame contenteditable.tc-edit-texteditor.tc-edit-texteditor-identified-<<classIdentifier>> {
-			width: calc(2 * (100% - {{{ [<textEditorWidthTiddler>get[text]] }}}) - 3px);
-			max-width: 200%;
-		}
-
-	</$let>
-
-</$list>