Bidirectional text improvements (#4541)

* Add support for \dir pragma

* Add "dir" attribute to reveal, edit, edit-text and edit-codemirror widgets

* Add  $:/config/DefaultTextDirection hidden setting

* Revert accidentally commited test data

This reverts some of commit b83c1d160f.

* Remove Codemirror plugin from Prerelease

Makes it easier to test things

* Fix framed text editor directionality in Firefox

* Add direction attribute for edit body template

* Missed closing brace

* Add docs for \dir pragma

* Templates should set text direction from a variable, not a transclusion

* Updates to framed.js in the light of PRs that have been merged since this

* Restore whitespace trim

* Docs dates

* Fix typo

* Clarify docs

core/modules/editor/engines/framed.js

@@ -72,6 +72,9 @@ function FramedEngine(options) {
 	if(this.widget.editRows) {
 		this.domNode.setAttribute("rows",this.widget.editRows);
 	}
+	if(this.widget.editDir) {
+		this.domNode.setAttribute("dir",this.widget.editDir);
+	}
 	if(this.widget.editTabIndex) {
 		this.iframeNode.setAttribute("tabindex",this.widget.editTabIndex);
 	}
@@ -120,6 +123,7 @@ FramedEngine.prototype.copyStyles = function() {
 	this.domNode.style["-webkit-text-fill-color"] = "currentcolor";
 	// Ensure we don't force text direction to LTR
 	this.domNode.style.removeProperty("direction");
+	this.domNode.style.removeProperty("unicodeBidi");
 };
 
 /*

core/modules/editor/engines/simple.js

@@ -52,6 +52,9 @@ function SimpleEngine(options) {
 	if(this.widget.editTabIndex) {
 		this.domNode.setAttribute("tabindex",this.widget.editTabIndex);
 	}
+	if(this.widget.editDir) {
+		this.domNode.setAttribute("dir",this.widget.editDir);
+	}
 	if(this.widget.editAutoComplete) {
 		this.domNode.setAttribute("autocomplete",this.widget.editAutoComplete);
 	}

core/modules/editor/factory.js

@@ -183,6 +183,7 @@ function editTextWidgetFactory(toolbarEngine,nonToolbarEngine) {
 		this.editFocusSelectFromStart = $tw.utils.parseNumber(this.getAttribute("focusSelectFromStart","0"));
 		this.editFocusSelectFromEnd = $tw.utils.parseNumber(this.getAttribute("focusSelectFromEnd","0"));
 		this.editTabIndex = this.getAttribute("tabindex");
+		this.editDir = this.getAttribute("dir");
 		this.editCancelPopups = this.getAttribute("cancelPopups","") === "yes";
 		this.editInputActions = this.getAttribute("inputActions");
 		this.editRefreshTitle = this.getAttribute("refreshTitle");
@@ -220,7 +221,7 @@ function editTextWidgetFactory(toolbarEngine,nonToolbarEngine) {
 	EditTextWidget.prototype.refresh = function(changedTiddlers) {
 		var changedAttributes = this.computeAttributes();
 		// Completely rerender if any of our attributes have changed
-		if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes["default"] || changedAttributes["class"] || changedAttributes.placeholder || changedAttributes.size || changedAttributes.autoHeight || changedAttributes.minHeight || changedAttributes.focusPopup ||  changedAttributes.rows || changedAttributes.tabindex || changedAttributes.cancelPopups || changedAttributes.inputActions || changedAttributes.refreshTitle || changedAttributes.autocomplete || changedTiddlers[HEIGHT_MODE_TITLE] || changedTiddlers[ENABLE_TOOLBAR_TITLE] || changedTiddlers["$:/palette"] || changedAttributes.disabled || changedAttributes.fileDrop) {
+		if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes["default"] || changedAttributes["class"] || changedAttributes.placeholder || changedAttributes.size || changedAttributes.autoHeight || changedAttributes.minHeight || changedAttributes.focusPopup ||  changedAttributes.rows || changedAttributes.tabindex || changedAttributes.dir || changedAttributes.cancelPopups || changedAttributes.inputActions || changedAttributes.refreshTitle || changedAttributes.autocomplete || changedTiddlers[HEIGHT_MODE_TITLE] || changedTiddlers[ENABLE_TOOLBAR_TITLE] || changedTiddlers["$:/palette"]  || changedAttributes.disabled || changedAttributes.fileDrop) {
 			this.refreshSelf();
 			return true;
 		} else if (changedTiddlers[this.editRefreshTitle]) {

core/modules/parsers/wikiparser/rules/dir.js

@@ -0,0 +1,51 @@
+/*\
+title: $:/core/modules/parsers/wikiparser/rules/dir.js
+type: application/javascript
+module-type: wikirule
+
+Wiki pragma rule for specifying text direction
+
+```
+\dir rtl
+\dir ltr
+\dir auto
+```
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+exports.name = "dir";
+exports.types = {pragma: true};
+
+/*
+Instantiate parse rule
+*/
+exports.init = function(parser) {
+	this.parser = parser;
+	// Regexp to match
+	this.matchRegExp = /^\\dir[^\S\n]*(\S+)\r?\n/mg;
+};
+
+/*
+Parse the most recent match
+*/
+exports.parse = function() {
+	var self = this;
+	// Move past the pragma invocation
+	this.parser.pos = this.matchRegExp.lastIndex;
+	// Parse tree nodes to return
+	return [{
+		type: "element",
+		tag: this.parser.parseAsInline ? "span" : "div",
+		attributes: {
+			dir: {type: "string", value: this.match[1]}
+		},
+		children: []
+	}];
+};
+
+})();

core/modules/parsers/wikiparser/wikiparser.js

@@ -36,6 +36,7 @@ options: see below:
 */
 var WikiParser = function(type,text,options) {
 	this.wiki = options.wiki;
+	this.parseAsInline = options.parseAsInline;
 	var self = this;
 	// Check for an externally linked tiddler
 	if($tw.browser && (text || "") === "" && options._canonical_uri) {

core/modules/widgets/edit.js

@@ -48,6 +48,7 @@ EditWidget.prototype.execute = function() {
 	this.editPlaceholder = this.getAttribute("placeholder");
 	this.editTabIndex = this.getAttribute("tabindex");
 	this.editFocus = this.getAttribute("focus","");
+	this.editDir = this.getAttribute("dir");
 	this.editCancelPopups = this.getAttribute("cancelPopups","");
 	this.editInputActions = this.getAttribute("inputActions");
 	this.editRefreshTitle = this.getAttribute("refreshTitle");
@@ -90,7 +91,7 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
 EditWidget.prototype.refresh = function(changedTiddlers) {
 	var changedAttributes = this.computeAttributes();
 	// Refresh if an attribute has changed, or the type associated with the target tiddler has changed
-	if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes.tabindex || changedAttributes.cancelPopups || changedAttributes.inputActions || changedAttributes.refreshTitle || changedAttributes.autocomplete || (changedTiddlers[this.editTitle] && this.getEditorType() !== this.editorType)) {
+	if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes.tabindex || changedAttributes.dir || changedAttributes.cancelPopups || changedAttributes.inputActions || changedAttributes.refreshTitle || changedAttributes.autocomplete || (changedTiddlers[this.editTitle] && this.getEditorType() !== this.editorType)) {
 		this.refreshSelf();
 		return true;
 	} else {

core/modules/widgets/reveal.js

@@ -42,6 +42,9 @@ RevealWidget.prototype.render = function(parent,nextSibling) {
 	if(this.style) {
 		domNode.setAttribute("style",this.style);
 	}
+	if(this.direction) {
+		domNode.setAttribute("dir",this.direction);
+	}
 	parent.insertBefore(domNode,nextSibling);
 	this.renderChildren(domNode,null);
 	if(!domNode.isTiddlyWikiFakeDom && this.type === "popup" && this.isOpen) {
@@ -123,6 +126,7 @@ RevealWidget.prototype.execute = function() {
 	this["default"] = this.getAttribute("default","");
 	this.animate = this.getAttribute("animate","no");
 	this.retain = this.getAttribute("retain","no");
+	this.direction = this.getAttribute("dir");
 	this.openAnimation = this.animate === "no" ? undefined : "open";
 	this.closeAnimation = this.animate === "no" ? undefined : "close";
 	this.updatePopupPosition = this.getAttribute("updatePopupPosition","no") === "yes";
@@ -214,7 +218,7 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
 */
 RevealWidget.prototype.refresh = function(changedTiddlers) {
 	var changedAttributes = this.computeAttributes();
-	if(changedAttributes.state || changedAttributes.type || changedAttributes.text || changedAttributes.position || changedAttributes.positionAllowNegative || changedAttributes["default"] || changedAttributes.animate || changedAttributes.stateTitle || changedAttributes.stateField || changedAttributes.stateIndex) {
+	if(changedAttributes.state || changedAttributes.type || changedAttributes.text || changedAttributes.position || changedAttributes.positionAllowNegative || changedAttributes["default"] || changedAttributes.animate || changedAttributes.stateTitle || changedAttributes.stateField || changedAttributes.stateIndex || changedAttributes.dir) {
 		this.refreshSelf();
 		return true;
 	} else {

core/templates/single.tiddler.window.tid

@@ -12,7 +12,8 @@ tc-page-container tc-page-view-$(storyviewTitle)$ tc-language-$(languageTitle)$
 	tv-config-toolbar-class={{$:/config/Toolbar/ButtonClass}}
 	tv-show-missing-links={{$:/config/MissingLinks}}
 	storyviewTitle={{$:/view}}
-	languageTitle={{{ [{$:/language}get[name]] }}}>
+	languageTitle={{{ [{$:/language}get[name]] }}}
+	tv-text-direction={{$:/config/DefaultTextDirection}}>
 
 <div class=<<containerClasses>>>
 

core/ui/EditTemplate.tid

@@ -29,6 +29,7 @@ title: $:/core/ui/EditTemplate
 	data-tiddler-title=<<currentTiddler>>
 	data-tags={{!!tags}}
 	class={{{ [all[shadows+tiddlers]tag[$:/tags/ClassFilters/TiddlerTemplate]!is[draft]] :map:flat[subfilter{!!text}] tc-tiddler-frame tc-tiddler-edit-frame [<currentTiddler>is[tiddler]then[tc-tiddler-exists]] [<currentTiddler>is[missing]!is[shadow]then[tc-tiddler-missing]] [<currentTiddler>is[shadow]then[tc-tiddler-exists tc-tiddler-shadow]] [<currentTiddler>is[system]then[tc-tiddler-system]] [{!!class}] [<currentTiddler>tags[]encodeuricomponent[]addprefix[tc-tagged-]] +[join[ ]] }}}
+	dir=<<tv-text-direction>>
 	role="region"
 	aria-label={{$:/language/EditTemplate/Caption}}>
 <$fieldmangler>

core/ui/EditTemplate/body-editor.tid

@@ -9,6 +9,7 @@ title: $:/core/ui/EditTemplate/body/editor
   placeholder={{$:/language/EditTemplate/Body/Placeholder}}
   tabindex={{$:/config/EditTabIndex}}
   focus={{{ [{$:/config/AutoFocus}match[text]then[true]] ~[[false]] }}}
+  dir=<<tv-text-direction>>
   cancelPopups="yes"
   fileDrop={{{ [{$:/config/DragAndDrop/Enable}match[no]] :else[subfilter{$:/config/Editor/EnableImportFilter}then[yes]else[no]] }}}
 

core/ui/EditTemplate/body/default.tid

@@ -15,7 +15,7 @@ $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
 	importState=<<qualify $:/state/ImportImage>> >
 <$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>> >
 <$reveal stateTitle=<<edit-preview-state>> type="match" text="yes" tag="div">
-<div class="tc-tiddler-preview">
+<div class="tc-tiddler-preview" dir=<<tv-text-direction>>>
 
 <$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>
 
@@ -32,7 +32,7 @@ $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
 </div>
 </$reveal>
 
-<$reveal stateTitle=<<edit-preview-state>> type="nomatch" text="yes" tag="div">
+<$reveal stateTitle=<<edit-preview-state>> type="nomatch" text="yes" tag="div" dir=<<tv-text-direction>>>
 
 <$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>
 

core/ui/EditTemplate/controls.tid

@@ -5,7 +5,7 @@ tags: $:/tags/EditTemplate
 $:/config/EditToolbarButtons/Visibility/$(listItem)$
 \end
 \whitespace trim
-<div class="tc-tiddler-title tc-tiddler-edit-title">
+<div class="tc-tiddler-title tc-tiddler-edit-title" dir=<<tv-text-direction>>>
 <$view field="title"/>
 <span class="tc-tiddler-controls tc-titlebar"><$list filter="[all[shadows+tiddlers]tag[$:/tags/EditToolbar]!has[draft.of]]" variable="listItem"><$let tv-config-toolbar-class={{{ [enlist<tv-config-toolbar-class>] [<listItem>encodeuricomponent[]addprefix[tc-btn-]] +[join[ ]]}}}><$reveal type="nomatch" state=<<config-title>> text="hide"><$transclude tiddler=<<listItem>>/></$reveal></$let></$list></span>
 <div style="clear: both;"></div>

core/ui/EditTemplate/fields.tid

@@ -74,7 +74,7 @@ $value={{{ [subfilter<get-field-value-tiddler-filter>get[text]] }}}/>
 \whitespace trim
 
 <$set name="newFieldValueTiddlerPrefix" value=<<newFieldValueTiddlerPrefix>> emptyValue=<<qualify "$:/temp/NewFieldValue">> >
-<div class="tc-edit-fields">
+<div class="tc-edit-fields" dir=<<tv-text-direction>>>
 <table class={{{ [all[current]fields[]] :filter[lookup[$:/config/EditTemplateFields/Visibility/]!match[hide]] +[count[]!match[0]] +[then[tc-edit-fields]] ~[[tc-edit-fields tc-edit-fields-small]] }}}>
 <tbody>
 <$list filter="[all[current]fields[]] +[sort[title]]" variable="currentField" storyview="pop">
@@ -101,7 +101,7 @@ $value={{{ [subfilter<get-field-value-tiddler-filter>get[text]] }}}/>
 </div>
 
 <$fieldmangler>
-<div class="tc-edit-field-add">
+<div class="tc-edit-field-add" dir=<<tv-text-direction>>>
 <em class="tc-edit tc-small-gap-right">
 <<lingo Fields/Add/Prompt>>
 </em>

core/ui/EditTemplate/shadow.tid

@@ -14,7 +14,7 @@ tags: $:/tags/EditTemplate
 <$list filter="[all[current]shadowsource[]]" variable="pluginTitle">
 
 <$set name="pluginLink" value=<<pluginLinkBody>>>
-<div class="tc-message-box">
+<div class="tc-message-box" dir=<<tv-text-direction>>>
 
 <<lingo Warning>>
 
@@ -29,7 +29,7 @@ tags: $:/tags/EditTemplate
 <$list filter="[all[current]shadowsource[]]" variable="pluginTitle">
 
 <$set name="pluginLink" value=<<pluginLinkBody>>>
-<div class="tc-message-box">
+<div class="tc-message-box" dir=<<tv-text-direction>>>
 
 <<lingo OverriddenWarning>>
 

core/ui/EditTemplate/tags.tid

@@ -27,7 +27,7 @@ color:$(foregroundColor)$;
 
 \define edit-tags-template(tagField:"tags")
 \whitespace trim
-<div class="tc-edit-tags">
+<div class="tc-edit-tags" dir=<<tv-text-direction>>>
 <$list filter="[list[!!$tagField$]sort[title]]" storyview="pop">
 <$macrocall $name="tag-body" colour={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]] }}} palette={{$:/palette}} icon={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerIconFilter]!is[draft]get[text]] }}} tagField=<<__tagField__>>/>
 </$list>

core/ui/EditTemplate/title.tid

@@ -2,13 +2,13 @@ title: $:/core/ui/EditTemplate/title
 tags: $:/tags/EditTemplate
 
 \whitespace trim
-<$edit-text field="draft.title" class="tc-titlebar tc-edit-texteditor" focus={{{ [{$:/config/AutoFocus}match[title]then[true]] ~[[false]] }}} tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"/>
+<$edit-text field="draft.title" class="tc-titlebar tc-edit-texteditor" focus={{{ [{$:/config/AutoFocus}match[title]then[true]] ~[[false]] }}} tabindex={{$:/config/EditTabIndex}} cancelPopups="yes" dir=<<tv-text-direction>>/>
 
 <$vars pattern="""[\|\[\]{}]""" bad-chars="""`| [ ] { }`""">
 
 <$list filter="[all[current]regexp:draft.title<pattern>]" variable="listItem">
 
-<div class="tc-message-box">
+<div class="tc-message-box" dir=<<tv-text-direction>>>
 
 {{$:/core/images/warning}}&#32;{{$:/language/EditTemplate/Title/BadCharacterWarning}}
 
@@ -18,7 +18,7 @@ tags: $:/tags/EditTemplate
 
 </$vars>
 
-<$reveal state="!!draft.title" type="nomatch" text={{!!draft.of}} tag="div">
+<$reveal state="!!draft.title" type="nomatch" text={{!!draft.of}} tag="div" dir=<<tv-text-direction>>>
 
 <$list filter="[{!!draft.title}!is[missing]]" variable="listItem">
 

core/ui/EditTemplate/type.tid

@@ -9,7 +9,7 @@ first-search-filter: [all[shadows+tiddlers]prefix[$:/language/Docs/Types/]sort[d
 <div class="tc-edit-type-selector-wrapper">
 <em class="tc-edit tc-small-gap-right"><<lingo Type/Prompt>></em>
 <div class="tc-type-selector-dropdown-wrapper">
-<div class="tc-type-selector"><$fieldmangler>
+<div class="tc-type-selector" dir=<<tv-text-direction>>}><$fieldmangler>
 <$macrocall $name="keyboard-driven-input" tiddler=<<currentTiddler>> storeTitle=<<typeInputTiddler>> refreshTitle=<<refreshTitle>> selectionStateTitle=<<typeSelectionTiddler>> field="type" tag="input" default="" placeholder={{$:/language/EditTemplate/Type/Placeholder}} focusPopup=<<qualify "$:/state/popup/type-dropdown">> class="tc-edit-typeeditor tc-edit-texteditor tc-popup-handle" tabindex={{$:/config/EditTabIndex}} focus={{{ [{$:/config/AutoFocus}match[type]then[true]] ~[[false]] }}} cancelPopups="yes" configTiddlerFilter="[[$:/core/ui/EditTemplate/type]]" inputCancelActions=<<input-cancel-actions>>/><$button popup=<<qualify "$:/state/popup/type-dropdown">> class="tc-btn-invisible tc-btn-dropdown tc-small-gap" tooltip={{$:/language/EditTemplate/Type/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Type/Dropdown/Caption}}>{{$:/core/images/down-arrow}}</$button><$button message="tm-remove-field" param="type" class="tc-btn-invisible tc-btn-icon" tooltip={{$:/language/EditTemplate/Type/Delete/Hint}} aria-label={{$:/language/EditTemplate/Type/Delete/Caption}}>{{$:/core/images/delete-button}}<$action-deletetiddler $filter="[<storeTitle>] [<refreshTitle>] [<selectionStateTitle>]"/></$button>
 </$fieldmangler></div>
 

core/ui/PageTemplate.tid

@@ -13,7 +13,8 @@ icon: $:/core/images/layout-button
 	tv-enable-drag-and-drop={{$:/config/DragAndDrop/Enable}}
 	tv-show-missing-links={{$:/config/MissingLinks}}
 	storyviewTitle={{$:/view}}
-	languageTitle={{{ [{$:/language}get[name]] }}}>
+	languageTitle={{{ [{$:/language}get[name]] }}}
+	tv-text-direction={{$:/config/DefaultTextDirection}}>
 
 <div class={{{ [all[shadows+tiddlers]tag[$:/tags/ClassFilters/PageTemplate]!is[draft]] :map:flat[subfilter{!!text}] tc-page-container [[tc-page-view-]addsuffix<storyviewTitle>] [[tc-language-]addsuffix<languageTitle>] :and[unique[]join[ ]] }}} >
 

core/ui/ViewTemplate.tid

@@ -7,7 +7,7 @@ $:/state/folded/$(currentTiddler)$
 \define cancel-delete-tiddler-actions(message) <$action-sendmessage $message="tm-$message$-tiddler"/>
 \import [all[shadows+tiddlers]tag[$:/tags/Macro/View]!is[draft]] [all[shadows+tiddlers]tag[$:/tags/Global/View]!is[draft]]
 <$vars storyTiddler=<<currentTiddler>> tiddlerInfoState=<<qualify "$:/state/popup/tiddler-info">>>
-<div data-tiddler-title=<<currentTiddler>> data-tags={{!!tags}} class={{{ [all[shadows+tiddlers]tag[$:/tags/ClassFilters/TiddlerTemplate]!is[draft]] :map:flat[subfilter{!!text}] tc-tiddler-frame tc-tiddler-view-frame [<currentTiddler>is[tiddler]then[tc-tiddler-exists]] [<currentTiddler>is[missing]!is[shadow]then[tc-tiddler-missing]] [<currentTiddler>is[shadow]then[tc-tiddler-exists tc-tiddler-shadow]] [<currentTiddler>is[shadow]is[tiddler]then[tc-tiddler-overridden-shadow]] [<currentTiddler>is[system]then[tc-tiddler-system]] [{!!class}] [<currentTiddler>tags[]encodeuricomponent[]addprefix[tc-tagged-]] +[join[ ]] }}} role="article">
+<div dir=<<tv-text-direction>> data-tiddler-title=<<currentTiddler>> data-tags={{!!tags}} class={{{ [all[shadows+tiddlers]tag[$:/tags/ClassFilters/TiddlerTemplate]!is[draft]] :map:flat[subfilter{!!text}] tc-tiddler-frame tc-tiddler-view-frame [<currentTiddler>is[tiddler]then[tc-tiddler-exists]] [<currentTiddler>is[missing]!is[shadow]then[tc-tiddler-missing]] [<currentTiddler>is[shadow]then[tc-tiddler-exists tc-tiddler-shadow]] [<currentTiddler>is[shadow]is[tiddler]then[tc-tiddler-overridden-shadow]] [<currentTiddler>is[system]then[tc-tiddler-system]] [{!!class}] [<currentTiddler>tags[]encodeuricomponent[]addprefix[tc-tagged-]] +[join[ ]] }}} role="article">
 <$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!is[draft]]" variable="listItem">
 <$transclude tiddler=<<listItem>>/>
 </$list>

core/ui/ViewTemplate/body.tid

@@ -3,7 +3,7 @@ tags: $:/tags/ViewTemplate
 
 \import [all[shadows+tiddlers]tag[$:/tags/Macro/View/Body]!is[draft]] [all[shadows+tiddlers]tag[$:/tags/Global/View/Body]!is[draft]]
 
-<$reveal tag="div" class="tc-tiddler-body" type="nomatch" stateTitle=<<folded-state>> text="hide" retain="yes" animate="yes">
+<$reveal tag="div" class="tc-tiddler-body" type="nomatch" stateTitle=<<folded-state>> text="hide" retain="yes" animate="yes" dir=<<tv-text-direction>>>
 
 <$transclude tiddler={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/ViewTemplateBodyFilter]!is[draft]get[text]] :and[!is[blank]else[$:/core/ui/ViewTemplate/body/default]] }}} />
 

core/ui/ViewTemplate/subtitle.tid

@@ -3,7 +3,7 @@ tags: $:/tags/ViewTemplate
 
 \whitespace trim
 <$reveal type="nomatch" stateTitle=<<folded-state>> text="hide" tag="div" retain="yes" animate="yes">
-<div class="tc-subtitle">
+<div class="tc-subtitle" dir=<<tv-text-direction>>>
 <$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate/Subtitle]!has[draft.of]]" variable="subtitleTiddler" counter="indexSubtitleTiddler">
 <$list filter="[<indexSubtitleTiddler-first>match[no]]" variable="ignore">
 &nbsp;

core/ui/ViewTemplate/tags.tid

@@ -3,5 +3,5 @@ tags: $:/tags/ViewTemplate
 
 \whitespace trim
 <$reveal type="nomatch" stateTitle=<<folded-state>> text="hide" tag="div" retain="yes" animate="yes">
-<div class="tc-tags-wrapper"><$list filter="[all[current]tags[]sort[title]]" template="$:/core/ui/TagTemplate" storyview="pop"/></div>
+<div class="tc-tags-wrapper" dir=<<tv-text-direction>>><$list filter="[all[current]tags[]sort[title]]" template="$:/core/ui/TagTemplate" storyview="pop"/></div>
 </$reveal>

core/ui/ViewTemplate/title.tid

@@ -6,7 +6,7 @@ tags: $:/tags/ViewTemplate
 fill:$(foregroundColor)$;
 \end
 <div class="tc-tiddler-title">
-<div class="tc-titlebar">
+<div class="tc-titlebar" dir=<<tv-text-direction>>>
 <span class="tc-tiddler-controls">
 <$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewToolbar]!has[draft.of]] :filter[lookup[$:/config/ViewToolbarButtons/Visibility/]!match[hide]]" storyview="pop" variable="listItem"><$set name="tv-config-toolbar-class" filter="[<tv-config-toolbar-class>] [<listItem>encodeuricomponent[]addprefix[tc-btn-]]"><$transclude tiddler=<<listItem>>/></$set></$list>
 </span>

core/wiki/config/DefaultTextDirection.tid

@@ -0,0 +1,2 @@
+title: $:/config/DefaultTextDirection
+text: auto

editions/tw5.com/tiddlers/Right-To-Left Languages.tid

@@ -0,0 +1,11 @@
+created: 20230613162508509
+modified: 20230613162508509
+title: Right-To-Left Languages
+type: text/vnd.tiddlywiki
+
+<<.from-version "5.3.0">> The [[language plugins|Languages]] in TiddlyWiki's plugin library apply the appropriate [["right-to-left" setting|https://www.w3.org/International/questions/qa-html-dir]] to the entire document. To set the right to left setting independently for an individual tiddler, use the `\dir` [[pragma|Pragma]] at the top of the tiddler:
+
+```
+\dir rtl
+This text will be displayed with right-to-left formatting
+```

editions/tw5.com/tiddlers/pragmas/Pragma_ _dir.tid

@@ -0,0 +1,13 @@
+created: 20230613162508509
+modified: 20230613162508509
+tags: Pragmas
+title: Pragma: \dir
+type: text/vnd.tiddlywiki
+
+<<.from-version "5.3.0">> The ''\dir'' [[pragma|Pragmas]] is used to set the text direction of text within a tiddler -- see [[Right-To-Left Languages]].
+
+The ''\dir'' pragma should be used after any procedure, function, widget or macro definitions.
+
+* `\dir ltr` – sets text direction to left-to-right
+* `\dir rtl` – sets text direction to right-to-left
+* `\dir auto` – causes the browser to attempt to automatically deduce the text direction

plugins/tiddlywiki/codemirror/engine.js

@@ -109,6 +109,9 @@ function CodeMirrorEngine(options) {
 	if(this.widget.editTabIndex) {
 		config["tabindex"] = this.widget.editTabIndex;
 	}
+	if(this.widget.editDir) {
+		config.direction = this.widget.editDir;
+	}
 	config.editWidget = this.widget;
 	// Create the CodeMirror instance
 	this.cm = window.CodeMirror(function(cmDomNode) {