Add a better tags editor

Now tags can be individually removed, and added with autocomplete

core/ui/EditTemplate.tid

@@ -9,9 +9,7 @@ modifier: JeremyRuston
 <$edit field="draft.title"/>
 @@
 
-<div class="tw-tiddler-help">Type tags separated with spaces, &#91;&#91;using double square brackets&#93;&#93; if necessary</div>
+<$transclude template="$:/core/ui/TagsEditor"/>
-
-<$edit field="tags"/>
 
 <$reveal state="$:/ShowEditPreview" type="match" text="yes">
 <span class="tw-tiddler-help">Use WikiText to add formatting, images, and dynamic features</span> <$button type="set" set="$:/ShowEditPreview" setTo="no" >Hide preview</$button>
@@ -29,4 +27,4 @@ modifier: JeremyRuston
 <$edit field="text"/>
 </$reveal>
 
-{{$:/core/ui/FieldEditor}}
+<$transclude template="$:/core/ui/FieldEditor"/>

core/ui/TagsEditor.tid

@@ -0,0 +1,17 @@
+title: $:/core/ui/TagsEditor
+
+<$fieldmangler><div class="tw-edit-tags-list"><$list filter="[is[current]tags[]sort[title]]"><$setstyle name="background-color" value={{!!color}} class="tw-tag-label"><$view field="title" format="text" /><$button message="tw-remove-tag" class="btn-invisible tw-remove-tag-button">&times;</$button></$setstyle>
+</$list></div>
+
+<div class="tw-add-tag">Add a new tag: <span class="tw-add-tag-name"><$edit tiddler="$:/NewTagName" type="input" default="" placeholder="tag name" focusSet="$:/state/tagsAutoComplete" qualifyTiddlerTitles="yes"/></span><$button popup="$:/state/tagsAutoComplete" qualifyTiddlerTitles="yes">drop</$button> <span class="tw-add-tag-button"><$button message="tw-add-tag" param={{$:/NewTagName}} set="$:/NewTagName" setTo="" class="">add</$button></span></div>
+
+<div class="tw-tags-autocomplete-wrapper">
+<$reveal state="$:/state/tagsAutoComplete" qualifyTiddlerTitles="yes" type="nomatch" text="" default="" class="tw-tags-autocomplete">
+
+<$linkcatcher set="$:/NewTagName" setTo="" message="tw-add-tag"><$list filter="[!is[shadow]tags[]prefix{$:/NewTagName}sort[title]]"><$link><$setstyle name="background-color" value={{!!color}} class="tw-tag-label"><$view field="title" format="text"/></$setstyle></$link>
+</$list>
+</$linkcatcher>
+
+</$reveal>
+</div>
+</$fieldmangler>

themes/tiddlywiki/snowwhite/base.tid

@@ -471,6 +471,51 @@ canvas.tw-edit-bitmapeditor  {
 ** Tiddler edit mode
 */
 
+.tw-edit-tags-list {
+	margin: 1em 0 1em 0;
+}
+
+.tw-remove-tag-button {
+	padding-left: 4px;
+}
+
+.tw-tags-autocomplete-wrapper {
+	position: relative;
+}
+
+.tw-tags-autocomplete {
+	position: absolute;
+	min-width: 20em;
+	border: 1px solid {{$:/themes/tiddlywiki/snowwhite/colourmappings##dropdownborder}};
+	background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##dropdownbackground}};
+	<<border-radius 4px>>
+	<<box-shadow "2px 2px 10px rgba(0, 0, 0, 0.5)">>
+	padding: 0 0 0 0;
+	margin: 0.25em 0 0 0;
+	white-space: nowrap;
+	z-index: 1000;
+}
+
+.tw-tags-autocomplete a {
+	display: block;
+	padding: 0.25em 1em 0.25em 1em;
+}
+
+.tw-tags-autocomplete a:hover {
+	color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##linkbackground}};
+	background-color: {{$:/themes/tiddlywiki/snowwhite/colourmappings##linkforeground}};
+	text-decoration: none;
+}
+
+.tw-add-tag {
+	color: #999;
+}
+
+.tw-add-tag-name {
+	display: inline-block;
+	width: 15%;
+}
+
 .tw-tiddler-preview {
 	overflow: auto;
 }
@@ -517,6 +562,10 @@ canvas.tw-edit-bitmapeditor  {
 	vertical-align: middle;
 }
 
+.tw-edit-field-add {
+	color: #999;
+}
+
 .tw-edit-field-add-name {
 	display: inline-block;
 	width: 15%;