Add an option to specify the editor grammar for a column

abe33 · Nov 28, 2016 · ef43eed · ef43eed
1 parent 5dd9a90
commit ef43eed
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 3 deletions.
diff --git a/lib/display-column.js b/lib/display-column.js
@@ -26,6 +26,13 @@ class DisplayColumn {
   get cellRender () { return this.options.cellRender }
   set cellRender (newCellRender) { this.setOption('cellRender', newCellRender) }
 
+  get grammarScope () {
+    return this.options.grammarScope || 'text.plain.null-grammar'
+  }
+  set grammarScope (newGrammarScope) {
+    this.setOption('grammarScope', newGrammarScope)
+  }
+
   constructor (options = {}) {
     this.options = options
     this.initID()

diff --git a/lib/table-element.js b/lib/table-element.js
@@ -1265,6 +1265,8 @@ class TableElement extends HTMLElement {
     this.editorElement.style.display = 'block'
 
     const column = this.tableEditor.getScreenColumn(position.column)
+    this.editor.setGrammar(atom.grammars.grammarForScopeName(column.grammarScope))
+
     this.editorElement.dataset.column = column.name || columnName(position.column)
     this.editorElement.dataset.row = position.row + 1
 
@@ -1306,6 +1308,8 @@ class TableElement extends HTMLElement {
       this.columnUnderEditIndex = columnIndex
       const columnRect = headerCell.getBoundingClientRect()
 
+      this.editor.setGrammar(atom.grammars.grammarForScopeName('text.plain.null-grammar'))
+
       this.editorElement.style.top = this.toUnit(columnRect.top)
       this.editorElement.style.left = this.toUnit(columnRect.left)
       this.editorElement.style.minWidth = this.toUnit(columnRect.width)

diff --git a/lib/tablr.js b/lib/tablr.js
@@ -172,7 +172,7 @@ module.exports = {
 
     table.lockModifiedStatus()
     table.addColumn('key', {width: 150, align: 'right'})
-    table.addColumn('value', {width: 150, align: 'center'})
+    table.addColumn('value', {width: 150, align: 'center', grammarScope: 'source.js'})
     table.addColumn('locked', {width: 150, align: 'left'})
 
     const rows = new Array(100).fill().map((v, i) => [
@@ -196,7 +196,7 @@ module.exports = {
 
     table.lockModifiedStatus()
     table.addColumn('key', {width: 150, align: 'right'})
-    table.addColumn('value', {width: 150, align: 'center'})
+    table.addColumn('value', {width: 150, align: 'center', grammarScope: 'source.js'})
     for (let i = 0; i <= 100; i++) {
       table.addColumn(undefined, {width: 150, align: 'left'})
     }

diff --git a/spec/display-table-spec.coffee b/spec/display-table-spec.coffee
@@ -125,6 +125,7 @@ describe 'DisplayTable', ->
       column = displayTable.getScreenColumn(0)
       expect(column.width).toEqual(100)
       expect(column.align).toEqual('left')
+      expect(column.grammarScope).toEqual('text.plain.null-grammar')
 
     it 'computes the columns offset', ->
       expect(displayTable.getScreenColumnOffsetAt(0)).toEqual(0)
@@ -150,13 +151,14 @@ describe 'DisplayTable', ->
 
       describe 'with an option object', ->
         beforeEach ->
-          displayTable.addColumn('locked', width: 200, align: 'right')
+          displayTable.addColumn('locked', width: 200, align: 'right', grammarScope: 'source.js')
 
         it 'creates a new screen column with the given options', ->
           expect(displayTable.getScreenColumns().length).toEqual(3)
           expect(displayTable.getScreenColumn(2).name).toEqual('locked')
           expect(displayTable.getScreenColumn(2).width).toEqual(200)
           expect(displayTable.getScreenColumn(2).align).toEqual('right')
+          expect(displayTable.getScreenColumn(2).grammarScope).toEqual('source.js')
 
       describe 'between two other columns', ->
         beforeEach ->

diff --git a/spec/table-element-spec.coffee b/spec/table-element-spec.coffee
@@ -1711,6 +1711,20 @@ describe 'tableElement', ->
         editor = tableElement.querySelector('atom-text-editor').model
         expect(editor.getText()).toEqual('x')
 
+  describe 'on an table with a column with a grammar', ->
+    beforeEach ->
+      waitsForPromise -> atom.packages.activatePackage('language-javascript')
+
+      runs ->
+        tableEditor.getScreenColumn(0).grammarScope = 'source.js'
+
+        cell = tableElement.querySelector('tablr-cell[data-column="0"]')
+        dblclick(cell)
+
+    it 'sets the grammar on the editor', ->
+      editor = tableElement.querySelector('atom-text-editor').model
+      expect(editor.getGrammar().scopeName).toEqual('source.js')
+
   describe 'double clicking on a cell', ->
     beforeEach ->
       cell = tableElement.querySelector('tablr-cell:last-child')