From f60c4f3ffd0a12a471ad606bd1fae19f071f9154 Mon Sep 17 00:00:00 2001
From: Viktor Lidholt <viktorlidholt@gmail.com>
Date: Tue, 20 Oct 2026 08:35:23 +0200
Subject: [PATCH] fix(web): keep Grammarly out of every app
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The apps check spelling themselves, and Grammarly's overlays on Flutter's
hidden text fields interfere with editing. Each app's web/index.html opts
out: the data-gramm, data-gramm_editor and data-enable-grammarly "false"
attributes on <html> and <body>, and an inline script that puts them on
every input, textarea and contenteditable Flutter adds (MutationObserver)
and on the focused field (capturing focusin, ahead of the extension's
handler). Spec 01 §2.4 documents it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 specs/01-architecture.md    |  7 +++++++
 wonky_drive/web/index.html  | 30 ++++++++++++++++++++++++++++--
 wonky_sheets/web/index.html | 30 ++++++++++++++++++++++++++++--
 wonky_slides/web/index.html | 30 ++++++++++++++++++++++++++++--
 wonky_write/web/index.html  | 30 ++++++++++++++++++++++++++++--
 5 files changed, 119 insertions(+), 8 deletions(-)

diff --git a/specs/01-architecture.md b/specs/01-architecture.md
index e741187c..f676de84 100644
--- a/specs/01-architecture.md
+++ b/specs/01-architecture.md
@@ -475,6 +475,13 @@ development) from one origin; there is no separate host app.
   source `icons/og.webp`): absolute, as crawlers need, and versioned in its name because
   `/web/` is served as immutable — a new image gets a new name. The legal pages carry the
   same tags with their own `og:url` and canonical link.
+- **No Grammarly**: the apps check spelling themselves (`wonky_spellcheck`), and Grammarly's
+  overlays on Flutter's hidden text fields interfere with editing. Each app's `web/index.html`
+  opts out: `data-gramm="false" data-gramm_editor="false" data-enable-grammarly="false"` on
+  `<html>` and `<body>`, and an inline script puts the same attributes on every `input`,
+  `textarea` and `contenteditable` that Flutter adds (MutationObserver) and on the focused field
+  (capturing `focusin`, which runs before the extension's own handler). A new app's
+  `index.html` copies the attributes and the script.
 - **Development**: the apps are declared in `serverpod: flutter_apps:` in the server pubspec
   (aliases `drive`, `write`, `sheets`, `slides`; `path: ../wonky_<app>`,
   `target: lib/driver.dart`, fixed `web-port`s so the origins are stable for
diff --git a/wonky_drive/web/index.html b/wonky_drive/web/index.html
index aa7db196..9943b456 100644
--- a/wonky_drive/web/index.html
+++ b/wonky_drive/web/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-gramm="false" data-gramm_editor="false" data-enable-grammarly="false">
 <head>
   <!--
     If you are serving your web app in a path other than the root, change the
@@ -53,7 +53,33 @@
   <title>Wonky Drive</title>
   <link rel="manifest" href="manifest.json">
 </head>
-<body>
+<body data-gramm="false" data-gramm_editor="false" data-enable-grammarly="false">
+  <script>
+    // Keep Grammarly and similar extensions out (specs/01 §2.4): the apps
+    // have their own spelling, and the extension's overlays fight Flutter's
+    // hidden text fields. <html> and <body> opt the page out; Flutter creates
+    // the fields on demand, so each one is tagged when added and on focus.
+    (function () {
+      var fields = 'input, textarea, [contenteditable]';
+      function tag(el) {
+        el.setAttribute('data-gramm', 'false');
+        el.setAttribute('data-gramm_editor', 'false');
+        el.setAttribute('data-enable-grammarly', 'false');
+      }
+      new MutationObserver(function (records) {
+        records.forEach(function (r) {
+          r.addedNodes.forEach(function (n) {
+            if (n.nodeType !== 1) return;
+            if (n.matches(fields)) tag(n);
+            n.querySelectorAll(fields).forEach(tag);
+          });
+        });
+      }).observe(document.body, { childList: true, subtree: true });
+      window.addEventListener('focusin', function (e) {
+        if (e.target.matches && e.target.matches(fields)) tag(e.target);
+      }, true);
+    })();
+  </script>
   <!--
     You can customize the "flutter_bootstrap.js" script.
     This is useful to provide a custom configuration to the Flutter loader
diff --git a/wonky_sheets/web/index.html b/wonky_sheets/web/index.html
index 8658130b..7aa1041c 100644
--- a/wonky_sheets/web/index.html
+++ b/wonky_sheets/web/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-gramm="false" data-gramm_editor="false" data-enable-grammarly="false">
 <head>
   <!--
     If you are serving your web app in a path other than the root, change the
@@ -52,7 +52,33 @@
   <title>Wonky Sheets</title>
   <link rel="manifest" href="manifest.json">
 </head>
-<body>
+<body data-gramm="false" data-gramm_editor="false" data-enable-grammarly="false">
+  <script>
+    // Keep Grammarly and similar extensions out (specs/01 §2.4): the apps
+    // have their own spelling, and the extension's overlays fight Flutter's
+    // hidden text fields. <html> and <body> opt the page out; Flutter creates
+    // the fields on demand, so each one is tagged when added and on focus.
+    (function () {
+      var fields = 'input, textarea, [contenteditable]';
+      function tag(el) {
+        el.setAttribute('data-gramm', 'false');
+        el.setAttribute('data-gramm_editor', 'false');
+        el.setAttribute('data-enable-grammarly', 'false');
+      }
+      new MutationObserver(function (records) {
+        records.forEach(function (r) {
+          r.addedNodes.forEach(function (n) {
+            if (n.nodeType !== 1) return;
+            if (n.matches(fields)) tag(n);
+            n.querySelectorAll(fields).forEach(tag);
+          });
+        });
+      }).observe(document.body, { childList: true, subtree: true });
+      window.addEventListener('focusin', function (e) {
+        if (e.target.matches && e.target.matches(fields)) tag(e.target);
+      }, true);
+    })();
+  </script>
   <!--
     You can customize the "flutter_bootstrap.js" script.
     This is useful to provide a custom configuration to the Flutter loader
diff --git a/wonky_slides/web/index.html b/wonky_slides/web/index.html
index 7815ae58..18aedf0e 100644
--- a/wonky_slides/web/index.html
+++ b/wonky_slides/web/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-gramm="false" data-gramm_editor="false" data-enable-grammarly="false">
 <head>
   <!--
     If you are serving your web app in a path other than the root, change the
@@ -52,7 +52,33 @@
   <title>Wonky Slides</title>
   <link rel="manifest" href="manifest.json">
 </head>
-<body>
+<body data-gramm="false" data-gramm_editor="false" data-enable-grammarly="false">
+  <script>
+    // Keep Grammarly and similar extensions out (specs/01 §2.4): the apps
+    // have their own spelling, and the extension's overlays fight Flutter's
+    // hidden text fields. <html> and <body> opt the page out; Flutter creates
+    // the fields on demand, so each one is tagged when added and on focus.
+    (function () {
+      var fields = 'input, textarea, [contenteditable]';
+      function tag(el) {
+        el.setAttribute('data-gramm', 'false');
+        el.setAttribute('data-gramm_editor', 'false');
+        el.setAttribute('data-enable-grammarly', 'false');
+      }
+      new MutationObserver(function (records) {
+        records.forEach(function (r) {
+          r.addedNodes.forEach(function (n) {
+            if (n.nodeType !== 1) return;
+            if (n.matches(fields)) tag(n);
+            n.querySelectorAll(fields).forEach(tag);
+          });
+        });
+      }).observe(document.body, { childList: true, subtree: true });
+      window.addEventListener('focusin', function (e) {
+        if (e.target.matches && e.target.matches(fields)) tag(e.target);
+      }, true);
+    })();
+  </script>
   <!--
     You can customize the "flutter_bootstrap.js" script.
     This is useful to provide a custom configuration to the Flutter loader
diff --git a/wonky_write/web/index.html b/wonky_write/web/index.html
index efb58382..a3b71802 100644
--- a/wonky_write/web/index.html
+++ b/wonky_write/web/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-gramm="false" data-gramm_editor="false" data-enable-grammarly="false">
 <head>
   <!--
     If you are serving your web app in a path other than the root, change the
@@ -68,7 +68,33 @@
     @media (prefers-reduced-motion: reduce) { #wonky-splash .tile { animation: none; } }
   </style>
 </head>
-<body>
+<body data-gramm="false" data-gramm_editor="false" data-enable-grammarly="false">
+  <script>
+    // Keep Grammarly and similar extensions out (specs/01 §2.4): the apps
+    // have their own spelling, and the extension's overlays fight Flutter's
+    // hidden text fields. <html> and <body> opt the page out; Flutter creates
+    // the fields on demand, so each one is tagged when added and on focus.
+    (function () {
+      var fields = 'input, textarea, [contenteditable]';
+      function tag(el) {
+        el.setAttribute('data-gramm', 'false');
+        el.setAttribute('data-gramm_editor', 'false');
+        el.setAttribute('data-enable-grammarly', 'false');
+      }
+      new MutationObserver(function (records) {
+        records.forEach(function (r) {
+          r.addedNodes.forEach(function (n) {
+            if (n.nodeType !== 1) return;
+            if (n.matches(fields)) tag(n);
+            n.querySelectorAll(fields).forEach(tag);
+          });
+        });
+      }).observe(document.body, { childList: true, subtree: true });
+      window.addEventListener('focusin', function (e) {
+        if (e.target.matches && e.target.matches(fields)) tag(e.target);
+      }, true);
+    })();
+  </script>
   <div id="wonky-splash" aria-label="Loading Wonky Write">
     <img class="tile" src="icons/Icon-192.png" alt="" aria-hidden="true">
     <div>Wonky Write</div>