Introduce "parent-plugin" field to control how plugins are displayed in the chooser

"Sub-plugins" are displayed within the dropdown of their parent plugin.

This is a more elaborate version of #4109. It doesn't address dependent plugins (yet), this is just about grouping addon plugins under their parent.

core/ui/ControlPanel/Modals/AddPlugins.tid

@@ -61,6 +61,13 @@ $:/state/add-plugin-info/$(connectionTiddler)$/$(assetInfo)$
 <div class="tc-plugin-info-dropdown-body">
 <$transclude tiddler=<<assetInfo>> field="readme" mode="block"/>
 </div>
+<div class="tc-plugin-info-sub-plugins">
+<$set name="original-title" value={{{ [<assetInfo>get[original-title]] }}}>
+<$list filter="[all[tiddlers+shadows]tag[$:/tags/RemoteAssetInfo]server-url{!!url}original-plugin-type[$type$]has[parent-plugin]parent-plugin<original-title>sort[title]sort[name]]" variable="assetInfo">
+<<display-plugin-info "$type$">>
+</$list>
+</$set>
+</div>
 </div>
 </$reveal>
 </$set>
@@ -83,8 +90,10 @@ $:/state/add-plugin-info/$(connectionTiddler)$/$(assetInfo)$
 </$reveal>
 <div class="tc-plugin-library-listing">
 <$list filter="[all[tiddlers+shadows]tag[$:/tags/RemoteAssetInfo]server-url{!!url}original-plugin-type[$type$]search:author,description,original-title,readme,title{$:/temp/RemoteAssetSearch/$(currentTiddler)$}sort[title]sort[name]]" variable="assetInfo">
+<$list filter="[[$:/temp/RemoteAssetSearch/$(currentTiddler)$]has[text]] ~[<assetInfo>!has[parent-plugin]]" variable="ignore"><!-- Hide sub-plugins if we're not searching -->
 <<display-plugin-info "$type$">>
 </$list>
+</$list>
 </div>
 \end
 

plugins/tiddlywiki/codemirror-autocomplete/plugin.info

@@ -2,5 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/codemirror-autocomplete",
 	"name": "CodeMirror Autocomplete",
 	"description": "Autocompletion for CodeMirror",
+	"parent-plugin": "$:/plugins/tiddlywiki/codemirror",
 	"list": "readme"
 }

plugins/tiddlywiki/codemirror-closebrackets/plugin.info

@@ -2,5 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/codemirror-closebrackets",
 	"name": "CodeMirror Close Brackets",
 	"description": "Close brackets for CodeMirror",
+	"parent-plugin": "$:/plugins/tiddlywiki/codemirror",
 	"list": "readme"
 }

plugins/tiddlywiki/codemirror-closetag/plugin.info

@@ -2,5 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/codemirror-closetag",
 	"name": "CodeMirror Close Tag",
 	"description": "Close tags automatically for CodeMirror",
+	"parent-plugin": "$:/plugins/tiddlywiki/codemirror",
 	"list": "readme"
 }

plugins/tiddlywiki/codemirror-fullscreen-editing/plugin.info

@@ -2,5 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/codemirror-fullscreen",
 	"name": "CodeMirror Fullscreen",
 	"description": "Fullscreen editing for CodeMirror",
+	"parent-plugin": "$:/plugins/tiddlywiki/codemirror",
 	"list": "readme"
 }

plugins/tiddlywiki/codemirror-keymap-emacs/plugin.info

@@ -2,5 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/codemirror-keymap-emacs",
 	"name": "CodeMirror Keymap Emacs",
 	"description": "Keymap compatible with Emacs for CodeMirror",
+	"parent-plugin": "$:/plugins/tiddlywiki/codemirror",
 	"list": "readme"
 }

plugins/tiddlywiki/codemirror-keymap-sublime-text/plugin.info

@@ -2,5 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/codemirror-keymap-sublime-text",
 	"name": "CodeMirror Keymap Sublime Text",
 	"description": "Keymap compatible with Sublime Text for CodeMirror",
+	"parent-plugin": "$:/plugins/tiddlywiki/codemirror",
 	"list": "readme"
 }

plugins/tiddlywiki/codemirror-keymap-vim/plugin.info

@@ -2,5 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/codemirror-keymap-vim",
 	"name": "CodeMirror Keymap Vim",
 	"description": "Keymap compatible with Vim for CodeMirror",
+	"parent-plugin": "$:/plugins/tiddlywiki/codemirror",
 	"list": "readme"
 }

plugins/tiddlywiki/codemirror-mode-css/plugin.info

@@ -2,5 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/codemirror-mode-css",
 	"name": "CodeMirror Mode CSS",
 	"description": "CSS highlighting mode for CodeMirror",
+	"parent-plugin": "$:/plugins/tiddlywiki/codemirror",
 	"list": "readme"
 }

plugins/tiddlywiki/codemirror-mode-htmlembedded/plugin.info

@@ -2,5 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/codemirror-mode-htmlembedded",
 	"name": "CodeMirror Mode HTML Embedded",
 	"description": "Embedded HTML highlighting mode for CodeMirror",
+	"parent-plugin": "$:/plugins/tiddlywiki/codemirror",
 	"list": "readme"
 }

plugins/tiddlywiki/codemirror-mode-htmlmixed/plugin.info

@@ -2,5 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/codemirror-mode-htmlmixed",
 	"name": "CodeMirror Mode HTML Mixed",
 	"description": "HTML mixed highlighting mode for CodeMirror",
+	"parent-plugin": "$:/plugins/tiddlywiki/codemirror",
 	"list": "readme"
 }

plugins/tiddlywiki/codemirror-mode-javascript/plugin.info

@@ -2,5 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/codemirror-mode-javascript",
 	"name": "CodeMirror Mode JavaScript",
 	"description": "JavaScript highlighting mode for CodeMirror",
+	"parent-plugin": "$:/plugins/tiddlywiki/codemirror",
 	"list": "readme"
 }

plugins/tiddlywiki/codemirror-mode-markdown/plugin.info

@@ -2,5 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/codemirror-mode-markdown",
 	"name": "CodeMirror Mode Markdown",
 	"description": "Markdown highlighting mode for CodeMirror",
+	"parent-plugin": "$:/plugins/tiddlywiki/codemirror",
 	"list": "readme"
 }

plugins/tiddlywiki/codemirror-mode-x-tiddlywiki/plugin.info

@@ -2,5 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/codemirror-mode-x-tiddlywiki",
 	"name": "CodeMirror Mode TiddlyWiki Classic",
 	"description": "Tiddlywiki Classic highlighting mode for CodeMirror",
+	"parent-plugin": "$:/plugins/tiddlywiki/codemirror",
 	"list": "readme"
 }

plugins/tiddlywiki/codemirror-mode-xml/plugin.info

@@ -2,5 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/codemirror-mode-xml",
 	"name": "CodeMirror Mode XML",
 	"description": "XML highlighting mode for CodeMirror",
+	"parent-plugin": "$:/plugins/tiddlywiki/codemirror",
 	"list": "readme"
 }

plugins/tiddlywiki/codemirror-search-replace/plugin.info

@@ -2,5 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/codemirror-search-replace",
 	"name": "CodeMirror Search and Replace",
 	"description": "Search and replace for CodeMirror",
+	"parent-plugin": "$:/plugins/tiddlywiki/codemirror",
 	"list": "readme"
 }

plugins/tiddlywiki/codemirror/readme.tid

@@ -1,17 +1,6 @@
 title: $:/plugins/tiddlywiki/codemirror/readme
 
-This plugin provides an enhanced text editor component based on [[CodeMirror|http://codemirror.net]].
+This plugin provides an enhanced text editor component based on [[CodeMirror|http://codemirror.net]]. The basic configuration is designed to be as lightweight as possible and is just around 235kb of size. Additional features can be installed with ~CodeMirror ~AddOns from the plugin library.
-The basic configuration is designed to be as lightweight as possible and is just around 235kb of size.
-Additional features can be installed with ~CodeMirror ~AddOns from the plugin library:
-
-* Code colouring for many languages (see [[the official documentation here|http://codemirror.net/mode/index.html]])
-* Auto closing brackets and tags
-* Folding brackets, comments, and tags
-* Auto-completion
-* Search and Replace
-* Fullscreen Editing
-* Optional Emacs, Sublime Text or Vim Keymaps
-
 
 [[Source code|https://github.com/Jermolene/TiddlyWiki5/blob/master/plugins/tiddlywiki/codemirror]]
 

themes/tiddlywiki/vanilla/base.tid

@@ -2073,12 +2073,17 @@ html body.tc-body.tc-single-tiddler-window {
 	display: flex;
 	border: 1px solid <<colour muted-foreground>>;
 	fill: <<colour muted-foreground>>;
-	background-colour: <<colour background>>;
+	background-color: <<colour background>>;
 	margin: 0.5em 0 0.5em 0;
 	padding: 4px;
     align-items: center;
 }
 
+.tc-plugin-info-sub-plugins .tc-plugin-info {
+	margin: 0.5em 1em 0.5em 1em;
+	background: rgba(255,255,0,0.05);
+}
+
 .tc-plugin-info-disabled {
 	background: -webkit-repeating-linear-gradient(45deg, #ff0, #ff0 10px, #eee 10px, #eee 20px);
 	background: repeating-linear-gradient(45deg, #ff0, #ff0 10px, #eee 10px, #eee 20px);