## 2017-11-02 CodeMirro lineWidgets

```javascript
var result = Object.values(System.loads).map(ea => {
  return {name: ea.key.replace(/.*\//,"")}
})

var editor = that.editor
var widgets = []

lively.create("lively-table").then(table => {
  table.setFromJSO(result)
  table.style.backgroundColor = "lightgray"
  widgets.push(editor.addLineWidget(8, table, {
    handleMouseEvents: true,
    coverGutter: false  
  })); 
})

// widgets.forEach(ea => ea.clear())


```

```javascript
result = [{name: "hello", age: 3},{name: "world", age: 4},{name: "world", age: 4},{name: "world", age: 4},{name: "world", age: 4}]

var editor = that.editor
var widgets = []
var widget = document.createElement("span")
lively.create("lively-table", widget).then(table => {
  table.setFromJSO(result)
  table.style.display = "inline"
  table.style.backgroundColor = "rgb(250,250,250)"
  table.style.display = "inline-block"
  table.style.maxHeight = "300px"
  table.style.overflow = "auto"
})
widgets.push(editor.doc.markText({line:5, ch: 0}, {line:5, ch: 5}, {
  replacedWith: widget
})); 
```