Skip to content

Instantly share code, notes, and snippets.

@datapimp
Last active August 29, 2015 14:20
Show Gist options
  • Save datapimp/ab6395c2c54cd84df678 to your computer and use it in GitHub Desktop.
Save datapimp/ab6395c2c54cd84df678 to your computer and use it in GitHub Desktop.
Atom editor control API

I would like an external interface around the Atom editor.

I would like to be able to:

stylish = new Stylish.EditorWrapper(atom: atomApplication)
component = new Stylish.Component(path: "/path/to/component/manifest.json")

stylish.editComponent(component)

The EditorWrapper would provide a collection of methods which allow me to load the Stylish.Component which will provide:

{
  "files":[
    "/path/to/file1.html",
    "/path/to/file2.css",
    "/path/to/file3.js"
  ],
  "previewUrl": "file://path-to-ui.html",
  "optionsInterfaceView": "ViewClassForExpandablePanel"
}

The AtomApplication should arrange itself accordingly in response to the component being loaded:

Diagram

The Stylish.EditorInterface needs to provide the following API:

class Stylish.EditorInterface
  # opens the component, configures the atom editor UI visual layout
  # loads the content from the component files in temporary buffers
  editComponent: ->
  
  # called whenever one of the editor's changes
  componentFileDidChange: (editor, contents)->
  
  # get temporary buffer contents (to run through preprocessors, etc)
  # prior to rendering in the preview view
  getTemporaryBufferContents: ->

  # saves the content from each editor's temporary buffer
  # in the official component path
  saveComponent: ->
  
  # returns an instance of the component preview renderer
  getComponentPreviewer: ->
  
  # returns an instance of the component options UI widget
  getComponentOptions: ->
  
  # toggles visibility of the component options UI widget
  toggleComponentOptionsPanel: ->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment