Use custom element on text editor element

DigDug101 · Aug 18, 2021 · 510d04b · 510d04b
1 parent 7df9cdb
commit 510d04b
Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/spec/text-editor-element-spec.js b/spec/text-editor-element-spec.js
@@ -14,7 +14,7 @@ describe('TextEditorElement', () => {
   });
 
   function buildTextEditorElement(options = {}) {
-    const element = new TextEditorElement();
+    const element = TextEditorElement.createTextEditorElement();
     element.setUpdatedSynchronously(false);
     if (options.attach !== false) jasmine.attachToDOM(element);
     return element;

diff --git a/src/text-editor-component.js b/src/text-editor-component.js
@@ -67,7 +67,7 @@ module.exports = class TextEditorComponent {
     } else {
       if (!TextEditorElement)
         TextEditorElement = require('./text-editor-element');
-      this.element = new TextEditorElement();
+      this.element = TextEditorElement.createTextEditorElement();
     }
     this.element.initialize(this);
     this.virtualNode = $('atom-text-editor');

diff --git a/src/text-editor-element.js b/src/text-editor-element.js
@@ -29,7 +29,8 @@ class TextEditorElement extends HTMLElement {
     return this;
   }
 
-  createdCallback() {
+  constructor() {
+    super();
     this.emitter = new Emitter();
     this.initialText = this.textContent;
     if (this.tabIndex == null) this.tabIndex = -1;
@@ -39,16 +40,20 @@ class TextEditorElement extends HTMLElement {
     this.addEventListener('blur', event => this.getComponent().didBlur(event));
   }
 
-  attachedCallback() {
+  connectedCallback() {
     this.getComponent().didAttach();
     this.emitter.emit('did-attach');
   }
 
-  detachedCallback() {
+  disconnectedCallback() {
     this.emitter.emit('did-detach');
     this.getComponent().didDetach();
   }
 
+  static get observedAttributes() {
+    return ['mini', 'placeholder-text', 'gutter-hidden', 'readonly'];
+  }
+
   attributeChangedCallback(name, oldValue, newValue) {
     if (this.component) {
       switch (name) {
@@ -352,8 +357,12 @@ class TextEditorElement extends HTMLElement {
   getFirstVisibleScreenColumn() {
     return this.getModel().getFirstVisibleScreenColumn();
   }
+
+  static createTextEditorElement() {
+    return document.createElement('atom-text-editor');
+  }
 }
 
-module.exports = document.registerElement('atom-text-editor', {
-  prototype: TextEditorElement.prototype
-});
+window.customElements.define('atom-text-editor', TextEditorElement);
+
+module.exports = TextEditorElement;