From d268bea7729b66f694652bb28e6e77aa3e12facb Mon Sep 17 00:00:00 2001
From: Teja <tejasrivastav@gmail.com>
Date: Tue, 4 Feb 2020 21:20:19 +0530
Subject: [PATCH 1/2] Append the tooltip to the wrapper element

The tooltip in the existing way append to the body.
When applied the codemirror context inside a shadow root (custom element) this calls append the tooltip out of the root components.
Thus, the user has to monkey patch the appendchild method to override the behavior.

This change would allow the tooltip to render in its own context.
---
 addon/lint/lint.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addon/lint/lint.js b/addon/lint/lint.js
index 0eac8d12a1..0563dfe00f 100644
--- a/addon/lint/lint.js
+++ b/addon/lint/lint.js
@@ -16,7 +16,7 @@
     var tt = document.createElement("div");
     tt.className = "CodeMirror-lint-tooltip cm-s-" + cm.options.theme;
     tt.appendChild(content.cloneNode(true));
-    document.body.appendChild(tt);
+    cm.getWrapperElement().appendChild(tt);
 
     function position(e) {
       if (!tt.parentNode) return CodeMirror.off(document, "mousemove", position);

From 9d39a604d97aad886bf2a765626a0d632187eb44 Mon Sep 17 00:00:00 2001
From: Teja Srivastasa <tejasrivastav@gmail.com>
Date: Wed, 5 Feb 2020 02:08:54 +0530
Subject: [PATCH 2/2] fix: render tooltip inside the editor optionally

---
 addon/lint/lint.js | 5 ++++-
 demo/lint.html     | 4 +++-
 doc/manual.html    | 1 +
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/addon/lint/lint.js b/addon/lint/lint.js
index 0563dfe00f..f36a232978 100644
--- a/addon/lint/lint.js
+++ b/addon/lint/lint.js
@@ -16,7 +16,10 @@
     var tt = document.createElement("div");
     tt.className = "CodeMirror-lint-tooltip cm-s-" + cm.options.theme;
     tt.appendChild(content.cloneNode(true));
-    cm.getWrapperElement().appendChild(tt);
+    if(cm.options.lint.selfContain)
+      cm.getWrapperElement().appendChild(tt);
+    else
+      document.body.appendChild(tt);
 
     function position(e) {
       if (!tt.parentNode) return CodeMirror.off(document, "mousemove", position);
diff --git a/demo/lint.html b/demo/lint.html
index 1184232d43..4b245dc54c 100644
--- a/demo/lint.html
+++ b/demo/lint.html
@@ -150,7 +150,9 @@ <h2>Linter Demo</h2>
     lineNumbers: true,
     mode: "javascript",
     gutters: ["CodeMirror-lint-markers"],
-    lint: true
+    lint: {
+      selfContain: true
+    }
   });
 
   var editor_json = CodeMirror.fromTextArea(document.getElementById("code-json"), {
diff --git a/doc/manual.html b/doc/manual.html
index e943ce63b2..7030b7914d 100644
--- a/doc/manual.html
+++ b/doc/manual.html
@@ -2911,6 +2911,7 @@ <h2 id="addons">Addons</h2>
       will only be executed when the promise resolves.
       By default, the linter will run (debounced) whenever the document is changed.
       You can pass a <code>lintOnChange: false</code> option to disable that.
+      You can pass a <code>selfContain: true</code> option to render the tooltip inside the editor instance.
       Depends on <code>addon/lint/lint.css</code>. A demo can be
       found <a href="../demo/lint.html">here</a>.</dd>