Introduce "link" editor toolbar button

As proposed by Alex Hough
2016-04-29 18:54:41 +01:00 · 2016-04-29 18:54:41 +01:00 · 7224fea961
commit 7224fea961
--- a/core/images/link.tid
+++ b/core/images/link.tid
@ -0,0 +1,9 @@
+title: $:/core/images/link
+tags: $:/tags/Image
+
+<svg class="tc-image-link tc-image-button" width="22pt" height="22pt" viewBox="0 0 128 128">
+    <g fill-rule="evenodd">
+        <path d="M128.719999,57.568543 C130.219553,53.8628171 131.045202,49.8121445 131.045202,45.5685425 C131.045202,27.8915447 116.718329,13.5685425 99.0452364,13.5685425 L67.0451674,13.5685425 C49.3655063,13.5685425 35.0452019,27.8954305 35.0452019,45.5685425 C35.0452019,63.2455403 49.3720745,77.5685425 67.0451674,77.5685425 L99.0452364,77.5685425 C100.406772,77.5685425 101.748384,77.4835732 103.065066,77.3186499 C96.4792444,73.7895096 91.1190212,68.272192 87.7873041,61.5685425 L67.0506214,61.5685425 C58.2110723,61.5685425 51.0452019,54.4070414 51.0452019,45.5685425 C51.0452019,36.7319865 58.2005234,29.5685425 67.0506214,29.5685425 L99.0397824,29.5685425 C107.879331,29.5685425 115.045202,36.7300436 115.045202,45.5685425 C115.045202,48.9465282 113.99957,52.0800164 112.21335,54.6623005 C114.314383,56.4735917 117.050039,57.5685425 120.041423,57.5685425 L128.720003,57.5685425 Z" transform="translate(83.045202, 45.568542) rotate(-225.000000) translate(-83.045202, -45.568542)"></path>
+        <path d="M-0.106255113,71.0452019 C-1.60580855,74.7509276 -2.43145751,78.8016001 -2.43145751,83.0452019 C-2.43145751,100.7222 11.8954151,115.045202 29.568508,115.045202 L61.568577,115.045202 C79.2482381,115.045202 93.5685425,100.718314 93.5685425,83.0452019 C93.5685425,65.3682041 79.2416699,51.0452019 61.568577,51.0452019 L29.568508,51.0452019 C28.206973,51.0452019 26.8653616,51.1301711 25.5486799,51.2950943 C32.1345,54.8242347 37.4947231,60.3415524 40.8264403,67.0452019 L61.563123,67.0452019 C70.4026721,67.0452019 77.5685425,74.206703 77.5685425,83.0452019 C77.5685425,91.8817579 70.413221,99.0452019 61.563123,99.0452019 L29.573962,99.0452019 C20.7344129,99.0452019 13.5685425,91.8837008 13.5685425,83.0452019 C13.5685425,79.6672162 14.6141741,76.533728 16.4003949,73.9514439 C14.2993609,72.1401527 11.5637054,71.0452019 8.5723215,71.0452019 L-0.106255113,71.0452019 Z" transform="translate(45.568542, 83.045202) rotate(-225.000000) translate(-45.568542, -83.045202)"></path>
+    </g>
+</svg>
--- a/core/language/en-GB/Buttons.multids
+++ b/core/language/en-GB/Buttons.multids
@ -127,6 +127,8 @@ Italic/Caption: italic
 Italic/Hint: Apply italic formatting to selection
 LineWidth/Caption: line width
 LineWidth/Hint: Set line width for painting
+Link/Caption: link
+Link/Hint: Create wikitext link
 ListBullet/Caption: bulleted list
 ListBullet/Hint: Apply bulleted list formatting to lines containing selection
 ListNumber/Caption: numbered list
--- a/core/modules/editor/operations/text/make-link.js
+++ b/core/modules/editor/operations/text/make-link.js
@ -0,0 +1,29 @@
+/*\
+title: $:/core/modules/editor/operations/text/make-link.js
+type: application/javascript
+module-type: texteditoroperation
+
+Text editor operation to make a link
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+exports["make-link"] = function(event,operation) {
+	if(operation.selection) {
+		operation.replacement = "[[" + operation.selection + "|" + event.paramObject.text + "]]";
+		operation.cutStart = operation.selStart;
+		operation.cutEnd = operation.selEnd;
+	} else {
+		operation.replacement = "[[" + event.paramObject.text + "]]";
+		operation.cutStart = operation.selStart;
+		operation.cutEnd = operation.selEnd;
+	}
+	operation.newSelStart = operation.selStart + operation.replacement.length;
+	operation.newSelEnd = operation.newSelStart;
+};
+
+})();
--- a/core/ui/EditTemplate/body-toolbar-button.tid
+++ b/core/ui/EditTemplate/body-toolbar-button.tid
@ -28,7 +28,7 @@ title: $:/core/ui/EditTemplate/body/toolbar/button
 <$transclude tiddler=<<currentTiddler>> field="text"/>
 </$button>
 <$reveal state=<<dropdown-state>> type="popup" position="below" animate="yes" tag="span">
-<div class="tc-drop-down tc-popup-keep" style="max-width: 75%;">
+<div class="tc-drop-down tc-popup-keep">
 <$transclude tiddler={{!!dropdown}} mode="block"/>
 </div>
 </$reveal>
--- a/core/ui/EditorToolbar/link-dropdown.tid
+++ b/core/ui/EditorToolbar/link-dropdown.tid
@ -0,0 +1,40 @@
+title: $:/core/ui/EditorToolbar/link-dropdown
+
+\define lingo-base() $:/language/Buttons/Link/
+
+\define link-actions()
+<$action-sendmessage
+	$message="tm-edit-text-operation"
+	$param="make-link"
+	text={{$:/temp/mytemp}}
+/>
+
+<$action-deletetiddler
+	$tiddler=<<dropdown-state>>
+/>
+\end
+
+''<<lingo Hint>>''
+
+<$set name="searchTiddler" value="$:/temp/search">
+
+
+<$edit-text tiddler=<<searchTiddler>> type="search" tag="input" focus="true" placeholder={{$:/language/Search/Search}}/>
+<$reveal tag="span" state=<<searchTiddler>> type="nomatch" text="">
+<$button class="tc-btn-invisible" style="width: auto; display: inline-block; background-colour: inherit;">
+<$action-setfield $tiddler=<<searchTiddler>> text="" />
+{{$:/core/images/close-button}}
+</$button>
+</$reveal>
+
+<$reveal tag="div" state=<<searchTiddler>> type="nomatch" text="">
+
+<$linkcatcher actions=<<link-actions>> to="$:/temp/mytemp">
+
+{{$:/core/ui/SearchResults}}
+
+</$linkcatcher>
+
+</$reveal>
+
+</$set>
--- a/core/ui/EditorToolbar/link.tid
+++ b/core/ui/EditorToolbar/link.tid
@ -0,0 +1,10 @@
+title: $:/core/ui/EditorToolbar/link
+tags: $:/tags/EditorToolbar
+icon: $:/core/images/link
+caption: {{$:/language/Buttons/Link/Caption}}
+description: {{$:/language/Buttons/Link/Hint}}
+condition: [<targetTiddler>!has[type]] [<targetTiddler>type[text/vnd.tiddlywiki]]
+button-classes: tc-text-editor-toolbar-item-start-group
+shortcuts: ((link))
+dropdown: $:/core/ui/EditorToolbar/link-dropdown
+
--- a/core/wiki/config/ShortcutInfo.multids
+++ b/core/wiki/config/ShortcutInfo.multids
@ -10,6 +10,7 @@ heading-4: {{$:/language/Buttons/Heading4/Hint}}
 heading-5: {{$:/language/Buttons/Heading5/Hint}}
 heading-6: {{$:/language/Buttons/Heading6/Hint}}
 italic: {{$:/language/Buttons/Italic/Hint}}
+link: {{$:/language/Buttons/Link/Hint}}
 list-bullet: {{$:/language/Buttons/ListBullet/Hint}}
 list-number: {{$:/language/Buttons/ListNumber/Hint}}
 mono-block: {{$:/language/Buttons/MonoBlock/Hint}}
--- a/core/wiki/config/shortcuts/shortcuts.multids
+++ b/core/wiki/config/shortcuts/shortcuts.multids
@ -8,8 +8,9 @@ heading-3: ctrl-3
 heading-4: ctrl-4
 heading-5: ctrl-5
 heading-6: ctrl-6
-list-bullet: ctrl-L
-list-number: ctrl-N
+link: ctrl-L
+list-bullet: ctrl-shift-L
+list-number: ctrl-shift-N
 mono-block: ctrl-shift-M
 mono-line: ctrl-M
 picture: ctrl-shift-I
--- a/core/wiki/tags/EditorToolbar.tid
+++ b/core/wiki/tags/EditorToolbar.tid
@ -1,2 +1,2 @@
 title: $:/tags/EditorToolbar
-list: $:/core/ui/EditorToolbar/paint $:/core/ui/EditorToolbar/opacity $:/core/ui/EditorToolbar/line-width $:/core/ui/EditorToolbar/clear $:/core/ui/EditorToolbar/bold $:/core/ui/EditorToolbar/italic $:/core/ui/EditorToolbar/strikethrough $:/core/ui/EditorToolbar/underline $:/core/ui/EditorToolbar/superscript $:/core/ui/EditorToolbar/subscript $:/core/ui/EditorToolbar/mono-line $:/core/ui/EditorToolbar/mono-block $:/core/ui/EditorToolbar/quote $:/core/ui/EditorToolbar/list-bullet $:/core/ui/EditorToolbar/list-number $:/core/ui/EditorToolbar/heading-1 $:/core/ui/EditorToolbar/heading-2 $:/core/ui/EditorToolbar/heading-3 $:/core/ui/EditorToolbar/heading-4 $:/core/ui/EditorToolbar/heading-5 $:/core/ui/EditorToolbar/heading-6 $:/core/ui/EditorToolbar/excise $:/core/ui/EditorToolbar/picture $:/core/ui/EditorToolbar/stamp $:/core/ui/EditorToolbar/undo $:/core/ui/EditorToolbar/redo $:/core/ui/EditorToolbar/size $:/core/ui/EditorToolbar/editor-height $:/core/ui/EditorToolbar/more $:/core/ui/EditorToolbar/preview $:/core/ui/EditorToolbar/preview-type
+list: $:/core/ui/EditorToolbar/paint $:/core/ui/EditorToolbar/opacity $:/core/ui/EditorToolbar/line-width $:/core/ui/EditorToolbar/clear $:/core/ui/EditorToolbar/bold $:/core/ui/EditorToolbar/italic $:/core/ui/EditorToolbar/strikethrough $:/core/ui/EditorToolbar/underline $:/core/ui/EditorToolbar/superscript $:/core/ui/EditorToolbar/subscript $:/core/ui/EditorToolbar/mono-line $:/core/ui/EditorToolbar/mono-block $:/core/ui/EditorToolbar/quote $:/core/ui/EditorToolbar/list-bullet $:/core/ui/EditorToolbar/list-number $:/core/ui/EditorToolbar/heading-1 $:/core/ui/EditorToolbar/heading-2 $:/core/ui/EditorToolbar/heading-3 $:/core/ui/EditorToolbar/heading-4 $:/core/ui/EditorToolbar/heading-5 $:/core/ui/EditorToolbar/heading-6 $:/core/ui/EditorToolbar/link $:/core/ui/EditorToolbar/excise $:/core/ui/EditorToolbar/picture $:/core/ui/EditorToolbar/stamp $:/core/ui/EditorToolbar/undo $:/core/ui/EditorToolbar/redo $:/core/ui/EditorToolbar/size $:/core/ui/EditorToolbar/editor-height $:/core/ui/EditorToolbar/more $:/core/ui/EditorToolbar/preview $:/core/ui/EditorToolbar/preview-type
--- a/themes/tiddlywiki/vanilla/base.tid
+++ b/themes/tiddlywiki/vanilla/base.tid
@ -982,7 +982,7 @@ html body.tc-body.tc-single-tiddler-window {
 }

 .tc-editor-toolbar button.tc-text-editor-toolbar-item-adjunct {
-    margin-left: -4px;
+	margin-left: -3px;
 	width: 1em;
 	border-radius: 8px;	
 }
@ -1015,6 +1015,10 @@ html body.tc-body.tc-single-tiddler-window {
 	width: auto;
 }

+.tc-editor-toolbar .tc-search-results {
+	padding: 0;
+}
+
 /*
 ** Adjustments for fluid-fixed mode
 */
@ -1299,6 +1303,14 @@ html body.tc-body.tc-single-tiddler-window {
 	line-height: 1.4;
 }

+.tc-drop-down .tc-tab-set .tc-tab-buttons button {
+	display: inline-block;
+    width: auto;
+    margin-bottom: 0px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
 .tc-drop-down .tc-prompt {
 	padding: 0 14px;	
 }