Implement editor class using c9's ace

[ashwinkjoseph]

Task Description Implement the abstract class for editor using C9's ace editor

In the context of TPF, an editor should have the following behaviour:

• Accept an HTML Div Element and mount to it while initializing
• Accept custom styles when initializing and should also allow for customization after initialization.
• Should store the content in the editor in memory
• Should have the option to persist the content of the editor in localStorage
• Should allow external classes to retrieve the content as a formatted string
• Should have a method for minimizing
• Should have a method for closing
• Accept callback function which will be called with appropriate status when minimizing or closing

Acceptance criteria for task

• [ ] Should be able to mount to any HTML Div Element passed to it while initializing (the logic for this should be written in a method named mount).
• [ ] Should render an ace editor in the HTML Div Element and also accept a unique ID and store this ID in it's state. If ID isn't provided, generate a new one while initalizing.
• [ ] Should accept and apply custom styles when initializing and call the method style which should have the logic for applying the styles to the editor's container as well as to the editor itself based on the received input and the options available in ace
• [ ] Should accept a callback function during initialization which would accept the parameter type save it in the editor's sate as onSwitch.
• [ ] Should pass control to the ace editor instance and the user should be able to type into the editor directly (the content is already stored internally by ace and so we don't have to maintain another state for it)
• [ ] Should give an option to save the content, when the user clicks on save, execute the method persistContent which would have the logic to save the content in localStorage with the id with which the editor was instantiated
• [ ] Should implement the method getContent which would retrieve the content from the ace editor and return as a formatted string (we need to agree upon this format, it's not decided yet)
• [ ] Should implement the method minimize which would make the container div element of the editor invisible (display:none) and call the onSwitch method with value as 'minimize'
• [ ] Should implement the method close which would remove the values stored in localStorage and destroy the instance of the editor and call the onSwitch method with the value as 'close'

[ashwinkjoseph]

shiva and emily are working on this

[yu-emily]

This is the most basic implementation I have right now. I'm not too sure on the parameters for the class constructor, so I have the constructor now with 3 parameters: (1) the div element, (2) the options for styling the editor (if provided), and (3) the unique id (if provided).

For the acceptance criteria, I'm not too clear on this one: Should accept a callback function during initialization which would accept the parameter type save it in the editor's sate as onSwitch. It accepts a parameter "type" and saves it as a onSwitch state, but for both minimize and close, we'll call the onSwitch method with a value. I think what's confusing for me is, is onSwitch supposed to be a property or method. For now, I have a dummy function called onSwitch outside the class and is included in the implementation example: https://github.com/yu-emily/TPF/blob/8b8190c25bee24acd353468f82d10b4c29947dd7/aceEditor.js#L89-L92

The code for the implementation is as follows. https://github.com/yu-emily/TPF/blob/8b8190c25bee24acd353468f82d10b4c29947dd7/aceEditor.js#L1-L111