# Changesets

## Manipulations
|Name|key|has target element|Undo/Redo|unset js|
|-----|-----|-----|-----|-----|
|Edit Content|`apply-content`|:heavy_check_mark:|:heavy_check_mark:|:white_check_mark:|
|Edit Style|`apply-styles`|:heavy_check_mark:|:heavy_check_mark:|:white_check_mark:|
|Edit HTML|`apply-html`|:heavy_check_mark:|:heavy_check_mark:|:white_check_mark:|
|Keyword Insertion|`apply-content`|:heavy_check_mark:|:heavy_check_mark:|:white_check_mark:|
|Hide Element|`apply-hide`|:heavy_check_mark:|:heavy_check_mark:|:white_check_mark:|
|Remove Element|`apply-remove`|:heavy_check_mark:|:heavy_check_mark:|:white_check_mark:|
|Hide Element|`apply-hide`|:heavy_check_mark:|:heavy_check_mark:|:white_check_mark:|
|Add CSS|`apply-css`|:white_check_mark:|:white_check_mark:|:white_check_mark:|
|Add JS|`apply-js`|:white_check_mark:|:white_check_mark:|:white_check_mark:|
|Extension|`apply-extension`|:white_check_mark:|:white_check_mark:|:heavy_check_mark:|

## Some points
* We should have _one_ solution for all of our manipulations
* Changesets should not necessarily require a target element
* Something that has been handled as a changeset, does not necessarily require history functionality
* existing variations will be stored as javascript

## Suggested solution
- css, javascript and extensions will be stored separately in backend
- css, javascript and extensions will not be added to history
- A changeset type `javascript` is added, which will handle custom javascript functionality.

_changeset_

[{
    selector: null,
    changes: {
        [type]: {
            value: code
        }
    }
}]

_composedChange handler_

case 'javascript':
  if(change.property === 'createElement') {
    const { type, value } = change.value;
    const createdElement = document.createElement(type);
    createdElement.innerHTML = value;
    document.body.appendChild(createdElement)
  }
  break;

## Tasks
- [x] create fields css, javascipt, extensions
- [x] update VariationController@store
- [x] update VariationController@update
- [x] store existing variations as javascript
- [x] remove code ouput
- [x] store css code in css field
- [x] store javascript code in javascript field
- [x] update VariationController@deliver
- [x] enable keyword insertion in VariationController@deliver for changesets

## Tasks for extensions
- [x] store extensions config in extensions field
- [x] create new lerna package @varify.io/extenions
- [x] implement `apply-extensions` in `clickHandler()`
- [x] implement in xhr request in edit mode
- [x] ensure it's not added to history
- [x] update `VariationController@delivery`
- [ ] reduce size of initial payload in `varify.js`
- [x] disable editor before all scripts have loaded