Dev Tools: Allow overlay hint to be customized by ReActionView (#1420)

Enables marcoroth/reactionview#88

Related marcoroth/reactionview#47
Related marcoroth/reactionview#81

Author: marcoroth

javascript/packages/dev-tools/src/error-overlay.ts

@@ -577,12 +577,22 @@ export class ErrorOverlay {
         <div class="herb-dismiss-hint" style="padding-left: 24px; padding-right: 24px; padding-bottom: 12px;">
           Click outside, press <kbd style="display: inline-block; padding: 2px 6px; font-family: monospace; font-size: 0.9em; color: #333; background: #f7f7f7; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 0 #ccc, 0 2px 3px rgba(0,0,0,0.2) inset;">Esc</kbd> key, or fix the code to dismiss.<br>
 
-          You can also disable this overlay by passing <code style="color: #ffeb3b; font-family: monospace; font-size: 12pt;">validation_mode: :none</code> to <code style="color: #ffeb3b; font-family: monospace; font-size: 12pt;">Herb::Engine</code>.
+          ${this.getDismissHint()}
         </div>
       </div>
     `;
   }
 
+  private getDismissHint(): string {
+    const template = document.querySelector('template[data-herb-dismiss-hint]') as HTMLTemplateElement | null;
+
+    if (template) {
+      return template.innerHTML.trim();
+    }
+
+    return `You can also disable this overlay by passing <code style="color: #ffeb3b; font-family: monospace; font-size: 12pt;">validation_mode: :none</code> to <code style="color: #ffeb3b; font-family: monospace; font-size: 12pt;">Herb::Engine</code>.`;
+  }
+
   private getValidationOverlayStyles(): string {
     return `
       .herb-validation-overlay {