Infoclick: allow for some common Markdown and URL characters inside t…

…he infoclick placeholder string:

- I've implemented both of the proposals from #1368 in this commit
- Closes #1368.

new-admin/src/views/tools/infoclick.jsx

@@ -25,6 +25,7 @@ var defaultState = {
   anchorY: 1,
   allowDangerousHtml: true,
   useNewInfoclick: false,
+  useNewPlaceholderMatching: false,
   transformLinkUri: true,
 };
 
@@ -71,6 +72,9 @@ class ToolOptions extends Component {
           tool.options.allowDangerousHtml || this.state.allowDangerousHtml,
         useNewInfoclick:
           tool.options.useNewInfoclick || this.state.useNewInfoclick,
+        useNewPlaceholderMatching:
+          tool.options.useNewPlaceholderMatching ||
+          this.state.useNewPlaceholderMatching,
         transformLinkUri:
           tool.options.transformLinkUri ?? this.state.transformLinkUri,
         visibleForGroups: tool.options.visibleForGroups
@@ -146,6 +150,7 @@ class ToolOptions extends Component {
         fillColor: this.state.fillColor,
         allowDangerousHtml: this.state.allowDangerousHtml,
         useNewInfoclick: this.state.useNewInfoclick,
+        useNewPlaceholderMatching: this.state.useNewPlaceholderMatching,
         transformLinkUri: this.state.transformLinkUri,
         visibleForGroups: this.state.visibleForGroups.map(
           Function.prototype.call,
@@ -390,6 +395,25 @@ class ToolOptions extends Component {
               Använd ny Infoclick-variant (se GitHub issue #1034)
             </label>
           </div>
+          <div>
+            <input
+              id="useNewPlaceholderMatching"
+              name="useNewPlaceholderMatching"
+              type="checkbox"
+              onChange={(e) => {
+                this.handleInputChange(e);
+              }}
+              checked={this.state.useNewPlaceholderMatching}
+            />
+            &nbsp;
+            <label
+              htmlFor="useNewPlaceholderMatching"
+              style={{ width: "auto" }}
+            >
+              Tillåt fler tecken, bl a MarkDown, som del av infoclicks{" "}
+              <i>placeholder</i> (se GitHub issue #1368)
+            </label>
+          </div>
           <div>
             <input
               id="transformLinkUri"

new-client/src/components/FeatureInfo/FeaturePropsParsing.js

@@ -32,10 +32,19 @@ export default class FeaturePropsParsing {
 
     // Default to true to ensure backwards compatibility with old configs that predominately use HTML
     this.allowDangerousHtml = this.options.allowDangerousHtml ?? true;
+
     // Do we want the markdown-renderer to transform the provided uri's or not? Defaults to true to make sure un-safe uri's are not passed by mistake.
     // Disabling the transformer could be used to allow for links to desktop applications, for example app://open.
     this.transformLinkUri = this.options.transformLinkUri ?? true;
 
+    // Let's define which regex to use when looking for placeholders in the infoclick definition. There's the
+    // old (and proved) solution and a new one (see #1368). This is an admin setting for now, as this change does
+    // affect existing setups.
+    this.placeholderMatchingRegex =
+      this.options.useNewPlaceholderMatching === true
+        ? /{[\s\w\u00C0-\u00ff@\-|!,'.():*#=?[\]/]+}/g // Let's allow some common Markdown and URL characters
+        : /{[\s\w\u00C0-\u00ff@\-|!,'.():]+}/g; // Let's only use the old and well-tested regex
+
     // Here we define the components used by ReactMarkdown, see https://github.com/remarkjs/react-markdown#appendix-b-components
     // Note that we import customComponentsForReactMarkdown from our shared library, spread those
     // objects and finally override the definition of "p", as it differs in this case (we want to
@@ -358,8 +367,10 @@ export default class FeaturePropsParsing {
       // The regex below will match all placeholders.
       // The loop below extracts all placeholders and replaces them with actual values
       // current feature's property collection.
-      // Match any word character, range of unicode characters (åäö etc), @ sign, dash or dot
-      (this.markdown.match(/{[\s\w\u00C0-\u00ff@\-|!,'.():]+}/g) || []).forEach(
+      // Match any word character, range of unicode characters (åäö etc), @ sign, dash, dot
+      // as well as some common Markdown and URL characters (as Markdown and URLs can be a part
+      // of the placeholder, see #1277 and 1368).
+      (this.markdown.match(this.placeholderMatchingRegex) || []).forEach(
         (placeholder) => {
           // placeholder is a string, e.g. "{intern_url_1@@documenthandler}" or "{foobar}"
           // Let's replace all occurrences of the placeholder like this: