Fix: substituteKeys works correctly if newline is in the text, fix 'send email to report broken'-button by porting it to svelte

src/UI/Popup/SendEmail.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  
+  import type { OsmTags } from "../../Models/OsmFeature";
+  import Svg from "../../Svg";
+  import ToSvelte from "../Base/ToSvelte.svelte";
+  import { Utils } from "../../Utils";
+
+  export let tags: Store<OsmTags>
+  export let args: string[]
+
+  let [to, subject, body, button_text] = args.map(a => Utils.SubstituteKeys(a, $tags))
+  let url = "mailto:" +
+    to +
+    "?subject=" +
+    encodeURIComponent(subject) +
+    "&body=" +
+    encodeURIComponent(body)
+  $: console.log(url)
+  console.log(">>> args", args)
+</script>
+<a class="button flex items-center w-full" href={url}>
+  <ToSvelte construct={Svg.envelope_svg().SetClass("w-8 h-8 mr-4 shrink-0")}/>
+  {button_text}
+</a>
+SEND EMAIL to {to} 
+<br/>
+subject: {subject}
+<br/>
+body: {body}
+<br/>
+{button_text}

src/UI/SpecialVisualizations.ts

@@ -3,7 +3,11 @@ import {FixedUiElement} from "./Base/FixedUiElement"
 import BaseUIElement from "./BaseUIElement"
 import Title from "./Base/Title"
 import Table from "./Base/Table"
-import {RenderingSpecification, SpecialVisualization, SpecialVisualizationState,} from "./SpecialVisualization"
+import {
+    RenderingSpecification,
+    SpecialVisualization,
+    SpecialVisualizationState,
+} from "./SpecialVisualization"
 import { HistogramViz } from "./Popup/HistogramViz"
 import { MinimapViz } from "./Popup/MinimapViz"
 import { ShareLinkViz } from "./Popup/ShareLinkViz"
@@ -54,7 +58,11 @@ import LanguagePicker from "./LanguagePicker"
 import Link from "./Base/Link"
 import LayerConfig from "../Models/ThemeConfig/LayerConfig"
 import TagRenderingConfig from "../Models/ThemeConfig/TagRenderingConfig"
-import NearbyImages, {NearbyImageOptions, P4CPicture, SelectOneNearbyImage,} from "./Popup/NearbyImages"
+import NearbyImages, {
+    NearbyImageOptions,
+    P4CPicture,
+    SelectOneNearbyImage,
+} from "./Popup/NearbyImages"
 import { Tag } from "../Logic/Tags/Tag"
 import ChangeTagAction from "../Logic/Osm/Actions/ChangeTagAction"
 import { And } from "../Logic/Tags/And"
@@ -74,7 +82,8 @@ import ConflateImportButtonViz from "./Popup/ImportButtons/ConflateImportButtonV
 import DeleteWizard from "./Popup/DeleteFlow/DeleteWizard.svelte"
 import { OpenJosm } from "./BigComponents/OpenJosm"
 import OpenIdEditor from "./BigComponents/OpenIdEditor.svelte"
-import FediverseValidator from "./InputElement/Validators/FediverseValidator";
+import FediverseValidator from "./InputElement/Validators/FediverseValidator"
+import SendEmail from "./Popup/SendEmail.svelte"
 
 class NearbyImageVis implements SpecialVisualization {
     // Class must be in SpecialVisualisations due to weird cyclical import that breaks the tests
@@ -1229,23 +1238,7 @@ export default class SpecialVisualizations {
                     },
                 ],
                 constr(__, tags, args) {
-                    return new VariableUiElement(
+                    return new SvelteUIElement(SendEmail, { args, tags })
-                        tags.map((tags) => {
-                            const [to, subject, body, button_text] = args.map((str) =>
-                                Utils.SubstituteKeys(str, tags)
-                            )
-                            const url =
-                                "mailto:" +
-                                to +
-                                "?subject=" +
-                                encodeURIComponent(subject) +
-                                "&body=" +
-                                encodeURIComponent(body)
-                            return new SubtleButton(Svg.envelope_svg(), button_text, {
-                                url,
-                            })
-                        })
-                    )
                 },
             },
             {
@@ -1340,23 +1333,40 @@ export default class SpecialVisualizations {
             {
                 funcName: "fediverse_link",
                 docs: "Converts a fediverse username or link into a clickable link",
-                args: [{
+                args: [
+                    {
                         name: "key",
                         doc: "The attribute-name containing the link",
-                    required: true
+                        required: true,
-                }],
+                    },
-                constr(state: SpecialVisualizationState, tagSource: UIEventSource<Record<string, string>>, argument: string[], feature: Feature, layer: LayerConfig): BaseUIElement {
+                ],
+                constr(
+                    state: SpecialVisualizationState,
+                    tagSource: UIEventSource<Record<string, string>>,
+                    argument: string[],
+                    feature: Feature,
+                    layer: LayerConfig
+                ): BaseUIElement {
                     const key = argument[0]
                     const validator = new FediverseValidator()
-                    return new VariableUiElement(tagSource.map(tags => tags[key]).map(fediAccount => {
+                    return new VariableUiElement(
+                        tagSource
+                            .map((tags) => tags[key])
+                            .map((fediAccount) => {
                                 fediAccount = validator.reformat(fediAccount)
-                            const [_, username, host] = fediAccount.match(FediverseValidator.usernameAtServer)
+                                const [_, username, host] = fediAccount.match(
+                                    FediverseValidator.usernameAtServer
+                                )
 
-                            return new Link(fediAccount, "https://" + host + "/@" + username, true)
+                                return new Link(
-                        }
+                                    fediAccount,
-                    ))
+                                    "https://" + host + "/@" + username,
-                }
+                                    true
-            }
+                                )
+                            })
+                    )
+                },
+            },
         ]
 
         specialVisualizations.push(new AutoApplyButton(specialVisualizations))

src/Utils.ts

@@ -442,6 +442,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
      * Utils.SubstituteKeys("abc{def}ghi", {def: 'XYZ'}) // => "abcXYZghi"
      * Utils.SubstituteKeys("abc{def}{def}ghi", {def: 'XYZ'}) // => "abcXYZXYZghi"
      * Utils.SubstituteKeys("abc{def}ghi", {def: '{XYZ}'}) // => "abc{XYZ}ghi"
+     * Utils.SubstituteKeys("abc\n\n{def}ghi", {def: '{XYZ}'}) // => "abc\n\n{XYZ}ghi"
      *
      * @param txt
      * @param tags
@@ -456,7 +457,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be
         if (txt === undefined) {
             return undefined
         }
-        const regex = /(.*?){([^}]*)}(.*)/
+        const regex = /(.*?){([^}]*)}(.*)/s
 
         let match = txt.match(regex)