Merge pull request #16294 from atom/ku-add-readonly-editor-attribute

Add `readonly` attribute to text editor element

spec/text-editor-element-spec.js

@@ -70,6 +70,19 @@ describe('TextEditorElement', () => {
     expect(element.getModel().isLineNumberGutterVisible()).toBe(false)
   })
 
+  it("honors the 'readonly' attribute", async function() {
+    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

spec/text-editor-spec.js

@@ -86,6 +86,23 @@ describe('TextEditor', () => {
     })
   })
 
+  describe('when the editor is readonly', () => {
+    it('overrides TextBuffer.isModified to return false', async () => {
+      const editor = await atom.workspace.open(null, {readOnly: true})
+      editor.setText('I am altering the buffer, pray I do not alter it any further')
+      expect(editor.isModified()).toBe(false)
+      editor.setReadOnly(false)
+      expect(editor.isModified()).toBe(true)
+    })
+    it('clears the readonly status when saved', async () => {
+      const editor = await atom.workspace.open(null, {readOnly: true})
+      editor.setText('I am altering the buffer, pray I do not alter it any further')
+      expect(editor.isReadOnly()).toBe(true)
+      await editor.saveAs(temp.openSync('was-readonly').path)
+      expect(editor.isReadOnly()).toBe(false)
+    })
+  })
+
   describe('.copy()', () => {
     it('returns a different editor with the same initial state', () => {
       expect(editor.getAutoHeight()).toBeFalsy()

src/text-editor-component.js

@@ -56,7 +56,7 @@ class TextEditorComponent {
     this.props = props
 
     if (!props.model) {
-      props.model = new TextEditor({mini: props.mini})
+      props.model = new TextEditor({mini: props.mini, readOnly: props.readOnly})
     }
     this.props.model.component = this
 
@@ -460,9 +460,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 +823,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()) {
@@ -2962,11 +2966,11 @@ class TextEditorComponent {
   }
 
   setInputEnabled (inputEnabled) {
-    this.props.inputEnabled = inputEnabled
+    this.props.model.update({readOnly: !inputEnabled})
   }
 
   isInputEnabled (inputEnabled) {
-    return this.props.inputEnabled != null ? this.props.inputEnabled : true
+    return !this.props.model.isReadOnly()
   }
 
   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.getModel().update({readOnly: 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()
     }

src/text-editor.js

@@ -124,6 +124,7 @@ class TextEditor {
     this.decorationManager = params.decorationManager
     this.selectionsMarkerLayer = params.selectionsMarkerLayer
     this.mini = (params.mini != null) ? params.mini : false
+    this.readOnly = (params.readOnly != null) ? params.readOnly : false
     this.placeholderText = params.placeholderText
     this.showLineNumbers = params.showLineNumbers
     this.assert = params.assert || (condition => condition)
@@ -400,6 +401,16 @@ class TextEditor {
           }
           break
 
+        case 'readOnly':
+          if (value !== this.readOnly) {
+            this.readOnly = value
+            if (this.component != null) {
+              this.component.scheduleUpdate()
+            }
+            this.buffer.emitModifiedStatusChanged(this.isModified())
+          }
+          break
+
         case 'placeholderText':
           if (value !== this.placeholderText) {
             this.placeholderText = value
@@ -530,6 +541,7 @@ class TextEditor {
       softWrapAtPreferredLineLength: this.softWrapAtPreferredLineLength,
       preferredLineLength: this.preferredLineLength,
       mini: this.mini,
+      readOnly: this.readOnly,
       editorWidthInChars: this.editorWidthInChars,
       width: this.width,
       maxScreenLineLength: this.maxScreenLineLength,
@@ -556,6 +568,11 @@ class TextEditor {
     this.disposables.add(this.buffer.onDidChangeModified(() => {
       if (!this.hasTerminatedPendingState && this.buffer.isModified()) this.terminatePendingState()
     }))
+    this.disposables.add(this.buffer.onDidSave(() => {
+      if (this.isReadOnly()) {
+        this.setReadOnly(false)
+      }
+    }))
   }
 
   terminatePendingState () {
@@ -965,6 +982,12 @@ class TextEditor {
 
   isMini () { return this.mini }
 
+  setReadOnly (readOnly) {
+    this.update({readOnly})
+  }
+
+  isReadOnly () { return this.readOnly }
+
   onDidChangeMini (callback) {
     return this.emitter.on('did-change-mini', callback)
   }
@@ -1106,7 +1129,7 @@ class TextEditor {
   setEncoding (encoding) { this.buffer.setEncoding(encoding) }
 
   // Essential: Returns {Boolean} `true` if this editor has been modified.
-  isModified () { return this.buffer.isModified() }
+  isModified () { return this.isReadOnly() ? false : this.buffer.isModified() }
 
   // Essential: Returns {Boolean} `true` if this editor has no content.
   isEmpty () { return this.buffer.isEmpty() }