Add more checks on parsing from JSON, fix of those issues on the builtin themes

UI/CustomGenerator/SharePanel.ts

@@ -19,7 +19,7 @@ export default class SharePanel extends UIElement {
         const proposedNameEnc = encodeURIComponent(`wiki:User:${userDetails.name}/${config.data.id}`)
 
         this._panel = new Combine([
-            "<h2>share</h2>",
+            "<h2>Share</h2>",
             "Share the following link with friends:<br/>",
             new VariableUiElement(liveUrl.map(url => `<a href='${url}' target="_blank">${url}</a>`)),
             "<h2>Publish on OSM Wiki</h2>",

UI/CustomGenerator/TagRenderingPanel.ts

@@ -14,6 +14,8 @@ import {AndOrTagConfigJson} from "../../Customizations/JSON/TagConfigJson";
 import {TagRenderingConfigJson} from "../../Customizations/JSON/TagRenderingConfigJson";
 import {UserDetails} from "../../Logic/Osm/OsmConnection";
 import {State} from "../../State";
+import {VariableUiElement} from "../Base/VariableUIElement";
+import {FromJSON} from "../../Customizations/JSON/FromJSON";
 
 export default class TagRenderingPanel extends InputElement<TagRenderingConfigJson> {
 
@@ -24,6 +26,8 @@ export default class TagRenderingPanel extends InputElement<TagRenderingConfigJs
     private readonly _value: UIEventSource<TagRenderingConfigJson>;
     public options: { title?: string; description?: string; disableQuestions?: boolean; isImage?: boolean; };
 
+    public readonly validText : UIElement;
+    
     constructor(languages: UIEventSource<string[]>,
                 currentlySelected: UIEventSource<SingleSetting<any>>,
                 userDetails: UserDetails,
@@ -95,12 +99,24 @@ export default class TagRenderingPanel extends InputElement<TagRenderingConfigJs
         ];
 
         this.settingsTable = new SettingsTable(settings, currentlySelected);
+    
+        
+        this.validText = new VariableUiElement(value.map((json: TagRenderingConfigJson) => {
+            try{
+                FromJSON.TagRendering(json, options?.title ?? "");
+                return "";
+            }catch(e){
+                return "<span class='alert'>"+e+"</span>"
+            }
+        }));
+    
     }
 
     InnerRender(): string {
         return new Combine([
             this.intro,
-            this.settingsTable]).Render();
+            this.settingsTable,
+            this.validText]).Render();
     }
 
     GetValue(): UIEventSource<TagRenderingConfigJson> {

UI/Input/SingleTagInput.ts

@@ -4,6 +4,9 @@ import {DropDown} from "./DropDown";
 import {TextField} from "./TextField";
 import Combine from "../Base/Combine";
 import {Utils} from "../../Utils";
+import {UIElement} from "../UIElement";
+import {VariableUiElement} from "../Base/VariableUIElement";
+import {FromJSON} from "../../Customizations/JSON/FromJSON";
 
 export default class SingleTagInput extends InputElement<string> {
 
@@ -13,17 +16,29 @@ export default class SingleTagInput extends InputElement<string> {
     private key: InputElement<string>;
     private value: InputElement<string>;
     private operator: DropDown<string>
+    private readonly helpMesage: UIElement;
 
     constructor(value: UIEventSource<string> = undefined) {
         super(undefined);
         this._value = value ?? new UIEventSource<string>("");
-       
+
+        this.helpMesage = new VariableUiElement(this._value.map(tagDef => {
+                try {
+                    FromJSON.Tag(tagDef, "");
+                    return "";
+                } catch (e) {
+                    return `<br/><span class='alert'>${e}</span>`
+                }
+            }
+        ));
+
         this.key = TextField.KeyInput();
 
         this.value = new TextField<string>({
                 placeholder: "value - if blank, matches if key is NOT present",
                 fromString: str => str,
                 toString: str => str,
+                value: new UIEventSource<string>("")
             }
         );
         this.operator = new DropDown<string>("", [
@@ -85,9 +100,9 @@ export default class SingleTagInput extends InputElement<string> {
 
     InnerRender(): string {
         return new Combine([
-            this.key, this.operator, this.value
-        ]).SetStyle("display:flex")
-            .Render();
+            this.key, this.operator, this.value,
+            this.helpMesage
+        ]).Render();
     }