Add 'readonly' attribute to <atom-text-editor> element

spec/text-editor-element-spec.js

@@ -70,6 +70,20 @@ describe('TextEditorElement', () => {
     expect(element.getModel().isLineNumberGutterVisible()).toBe(false)
   })
 
+  it("honors the 'readonly' attribute", async function() {
+    console.log('set attribute');
+    jasmineContent.innerHTML = "<atom-text-editor readonly>"
+    const element = jasmineContent.firstChild
+
+    expect(element.getComponent().isInputEnabled()).toBe(false)
+
+    element.removeAttribute('readonly')
+    expect(element.getComponent().isInputEnabled()).toBe(true)
+
+    element.setAttribute('readonly', true)
+    expect(element.getComponent().isInputEnabled()).toBe(false)
+  })
+
   it('honors the text content', () => {
     jasmineContent.innerHTML = '<atom-text-editor>testing</atom-text-editor>'
     const element = jasmineContent.firstChild

src/text-editor-component.js

@@ -55,6 +55,8 @@ class TextEditorComponent {
   constructor (props) {
     this.props = props
 
+    this.setInputEnabled(!this.props.readonly)
+
     if (!props.model) {
       props.model = new TextEditor({mini: props.mini})
     }
@@ -460,9 +462,13 @@ class TextEditorComponent {
       }
     }
 
-    let attributes = null
+    let attributes = {}
     if (model.isMini()) {
-      attributes = {mini: ''}
+      attributes.mini = ''
+    }
+
+    if (!this.isInputEnabled()) {
+      attributes.readonly = ''
     }
 
     const dataset = {encoding: model.getEncoding()}
@@ -819,7 +825,7 @@ class TextEditorComponent {
 
     const oldClassList = this.classList
     const newClassList = ['editor']
-    if (this.focused) newClassList.push('is-focused')
+    if (this.focused && this.isInputEnabled()) newClassList.push('is-focused')
     if (model.isMini()) newClassList.push('mini')
     for (var i = 0; i < model.selections.length; i++) {
       if (!model.selections[i].isEmpty()) {
@@ -2966,7 +2972,7 @@ class TextEditorComponent {
   }
 
   isInputEnabled (inputEnabled) {
-    return this.props.inputEnabled != null ? this.props.inputEnabled : true
+    return this.props.inputEnabled;
   }
 
   getHiddenInput () {

src/text-editor-element.js

@@ -59,6 +59,9 @@ class TextEditorElement extends HTMLElement {
         case 'gutter-hidden':
           this.getModel().update({lineNumberGutterVisible: newValue == null})
           break
+        case 'readonly':
+          this.getComponent().setInputEnabled(newValue == null)
+          break
       }
     }
   }
@@ -275,7 +278,8 @@ class TextEditorElement extends HTMLElement {
       this.component = new TextEditorComponent({
         element: this,
         mini: this.hasAttribute('mini'),
-        updatedSynchronously: this.updatedSynchronously
+        updatedSynchronously: this.updatedSynchronously,
+        readonly: this.hasAttribute('readonly')
       })
       this.updateModelFromAttributes()
     }