add data-amp-autocomplete-opt-in to email playground samples (#5165)

* add data-amp-autocomplete-opt-in to email playground samples * add data-amp-autocomplete-opt-in at runtime, not in the doc Co-authored-by: Sebastian Benz <sebastian.benz@gmail.com>
ampproject · Jan 11, 2021 · c418e1b · c418e1b
1 parent 26ec369
commit c418e1b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/examples/source/1.components/amp-autocomplete-email.html b/examples/source/1.components/amp-autocomplete-email.html
@@ -45,17 +45,6 @@
     ></script>
 
     <style amp-custom>
-      :root {
-        --space-1: 0.5rem; /* 8px */
-        --space-2: 1rem; /* 16px */
-        --space-3: 1.5rem; /* 24px */
-        --space-4: 2rem; /* 32px */
-
-        --color-text-light: #fff;
-        --color-primary: #005af0;
-        --box-shadow-1: 0 1px 1px 0 rgba(0, 0, 0, 0.14),
-          0 1px 1px -1px rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-      }
       .custom {
         padding-top: 4px;
         font: 10pt 'Courier New', Courier, monospace;
@@ -81,6 +70,7 @@ <h2>Basic usage</h2>
 
     Note: Because server-side filtering is mandatory in the email format, it is wise to pair the `src` and `query` attributes
     in order to passed user inputs to a statically generated endpoint. For example if a `src="https://example.com` and `query="q"`, then a user who types in `abc` will get the fetch JSON result from `https://example.com?q=abc`.
+
     -->
     <amp-autocomplete
       min-characters="1"

diff --git a/playground/src/app.js b/playground/src/app.js
@@ -133,7 +133,18 @@ const editorUpdateListener = () => {
   const source = editor.getSource();
 
   if (preview) {
-    preview.refresh(source);
+    let previewSource = source;
+
+    if (detectRuntime(source).id === 'amp4email') {
+      // the ability to support 'amp-autocomplete' in amp4email documents is determined by the rendering clients.
+      // due to its dynamic support, the `data-amp-autocomplete-opt-in` attribute has to be included to amp4email amp documents at runtime
+      previewSource = source.replace(
+        /<html/,
+        (str) => `${str} data-amp-autocomplete-opt-in`
+      );
+    }
+
+    preview.refresh(previewSource);
   }
 
   validator.validate(source);