Log window.selection() on focus

yuzuquats · May 11, 2022 · 6933c89 · 6933c89
1 parent 8ceb55a
commit 6933c89
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 29 deletions.
diff --git a/static/index.html b/static/index.html
@@ -53,12 +53,17 @@
 
 <div id="container">
   <h1>document-level editor</h1>
-  <p>Here, we import the minified lexical library at the HTML level. We then attach it to the content-editable
-    "editor" below. Everything works</p>
+  <p>
+    Here, we import the minified lexical library at the HTML level. We then
+    attach it to the content-editable "editor" below. Everything works
+  </p>
   <div id="editor" contenteditable></div>
   <h1>webcomponent editor</h1>
-  <p>Here, we import a webcomponent. The webcomponent attaches an editor to an element in its shadow root. Properties on
-    the editor are set but the editor is not typeable.</p>
+  <p>
+    Here, we import a webcomponent. The webcomponent attaches an editor to an
+    element in its shadow root. Properties on the editor are set but the editor
+    is not typeable.
+  </p>
   <lexical-component id="webcomponent-editor"></lexical-component>
 </div>
 
@@ -67,11 +72,11 @@ <h1>webcomponent editor</h1>
     await import("../dist/lexical.bundle.min.js");
     const editor = Lexical.lexical.createEditor({
       theme: {
-        ltr: 'ltr',
-        rtl: 'rtl',
-        placeholder: 'editor-placeholder',
-        paragraph: 'editor-paragraph',
-      }
+        ltr: "ltr",
+        rtl: "rtl",
+        placeholder: "editor-placeholder",
+        paragraph: "editor-paragraph",
+      },
     });
     editor.setRootElement($element);
     editor.registerUpdateListener(({ editorState }) => {
@@ -82,13 +87,12 @@ <h1>webcomponent editor</h1>
   }
 </script>
 <script type="module">
-
   // 1) Load document-level editor
-  const $contentEditableElement = document.getElementById('editor');
+  const $contentEditableElement = document.getElementById("editor");
+
   initializeEditorToElement($contentEditableElement);
 
   // 2) Load webcomponent editor
   import LexicalComponent from "./lexical-component.js";
-  window.customElements.define('lexical-component', LexicalComponent);
-
-</script>
+  window.customElements.define("lexical-component", LexicalComponent);
+</script>
diff --git a/static/lexical-component.js b/static/lexical-component.js
@@ -1,26 +1,42 @@
 export default class LexicalComponent extends HTMLElement {
-
   constructor() {
     super();
-    const shadowRoot = this.attachShadow({mode: 'open'});
+    const shadowRoot = this.attachShadow({ mode: "open" });
     shadowRoot.appendChild(LexicalComponent.template.content.cloneNode(true));
   }
 
   async connectedCallback() {
-    const $contentEditableElement = this.shadowRoot.querySelector('#editor');
-    // NOTE: This breaks encapsulation but ensures we're using the same logic across document and webcomponent.
-    const editor = initializeEditorToElement($contentEditableElement);
-    console.log({
-      msg: "[lexical-component] connectedCallback",
-      editor,
-      document,
-      $contentEditableElement,
+    const $contentEditableElement = this.shadowRoot.querySelector("#editor");
+    $contentEditableElement.addEventListener("focus", () => {
+      /*
+        Logs the following:
+          anchorNode: div#container
+          anchorOffset: 11
+          baseNode: div#container
+          baseOffset: 11
+          extentNode: div#container
+          extentOffset: 11
+          focusNode: div#container
+          focusOffset: 11
+          isCollapsed: true
+          rangeCount: 1
+          type: "Range"
+      */
+      console.log("SELECTION ON FOCUS", window.getSelection());
     });
+    // NOTE: This breaks encapsulation but ensures we're using the same logic across document and webcomponent.
+    // const editor = initializeEditorToElement($contentEditableElement);
+    // console.log({
+    //   msg: "[lexical-component] connectedCallback",
+    //   editor,
+    //   document,
+    //   $contentEditableElement,
+    // });
   }
 
   static template = (() => {
-    var template = document.createElement('template');
-    template.innerHTML = /* html */`
+    var template = document.createElement("template");
+    template.innerHTML = /* html */ `
       <style>
         :host {
           display: flex;
@@ -53,6 +69,5 @@ export default class LexicalComponent extends HTMLElement {
       <div id=editor contenteditable>Dummy text</div>
     `;
     return template;
-  })()
-
-}
+  })();
+}