Up docs

docs/api/components.md

@@ -43,7 +43,7 @@ cmp.addType(...);
 *   `component:drag:start` - Component drag started. Passed an object, to the callback, containing the `target` (component to drag), `parent` (parent of the component) and `index` (component index in the parent)
 *   `component:drag` - During component drag. Passed the same object as in `component:drag:start` event, but in this case, `parent` and `index` are updated by the current pointer
 *   `component:drag:end` - Component drag ended. Passed the same object as in `component:drag:start` event, but in this case, `parent` and `index` are updated by the final pointer
-*   `component:resize` - During component resize. 
+*   `component:resize` - During component resize.
 
 ## Methods
 

docs/api/css_composer.md

@@ -53,11 +53,12 @@ Add/update the CssRule.
 ### Parameters
 
 *   `selectors` **[String][8]** Selector string, eg. `.myclass`
-*   `style` **[Object][10]** Style properties and values (optional, default `{}`)
-*   `opts` **[Object][10]** Additional properties (optional, default `{}`)
+*   `style` **[Object][10]** Style properties and values. If the rule exists, styles will be replaced unless `addStyles` option is used. (optional, default `{}`)
+*   `opts` **[Object][10]** Additional properties. (optional, default `{}`)
 
-    *   `opts.atRuleType` **[String][8]** At-rule type, eg. `media` (optional, default `''`)
-    *   `opts.atRuleParams` **[String][8]** At-rule parameters, eg. `(min-width: 500px)` (optional, default `''`)
+    *   `opts.atRuleType` **[String][8]** At-rule type, eg. `media`. (optional, default `''`)
+    *   `opts.atRuleParams` **[String][8]** At-rule parameters, eg. `(min-width: 500px)`. (optional, default `''`)
+    *   `opts.addStyles` **[Boolean][11]** If the rule exists already, merge passed styles instead of replacing them. (optional, default `false`)
 
 ### Examples
 
@@ -73,10 +74,15 @@ const rule = css.setRule('.class1:hover', { color: 'red' }, {
  atRuleType: 'media',
  atRuleParams: '(min-width: 500px)',
 });
-// output: @media (min-width: 500px) { .class1:hover { color: red } }
+// output: `@media (min-width: 500px) { .class1:hover { color: red } }`
+
+// Update styles of existent rule
+css.setRule('.class1', { color: 'red', background: 'red' });
+css.setRule('.class1', { color: 'blue' }, { addStyles: true });
+// output: .class1 { color: blue; background: red }
 ```
 
-Returns **[CssRule]** The new/updated CssRule
+Returns **[CssRule]** The new/updated CssRule.
 
 ## getRule
 
@@ -174,3 +180,5 @@ Returns **this**
 [9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 
 [10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+
+[11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean

docs/api/keymaps.md

@@ -63,6 +63,9 @@ Add new keymap
 *   `handler` **([Function][9] | [string][8])** Keymap handler, might be a function
 *   `opts` **[Object][7]** Options (optional, default `{}`)
 
+    *   `opts.force` **[Boolean][10]** Force the handler to be executed. (optional, default `false`)
+    *   `opts.prevent` **[Boolean][10]** Prevent default of the original triggered event. (optional, default `false`)
+
 ### Examples
 
 ```javascript
@@ -71,16 +74,18 @@ keymaps.add('ns:my-keymap', '⌘+j, ⌘+u, ctrl+j, alt+u', editor => {
  console.log('do stuff');
 });
 // or
-keymaps.add('ns:my-keymap', '⌘+s, ctrl+s', 'some-gjs-command');
+keymaps.add('ns:my-keymap', '⌘+s, ctrl+s', 'some-gjs-command', {
+ // Prevent the default browser action
+ prevent: true,
+});
 
 // listen to events
-editor.on('keymap:emit', (id, shortcut, e) => {
+editor.on('keymap:emit', (id, shortcut, event) => {
  // ...
 })
 ```
 
 Returns **[Object][7]** Added keymap
-or just a command id as a string
 
 ## get
 
@@ -152,3 +157,5 @@ Returns **this**
 [8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
 [9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+
+[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean

docs/api/pages.md

@@ -48,6 +48,12 @@ const pageManager = editor.Pages;
 
 [Component]: component.html
 
+## select
+
+Select the page.
+
+Type: [boolean][9]
+
 ## getAll
 
 Get all pages
@@ -58,7 +64,7 @@ Get all pages
 const arrayOfPages = pageManager.getAll();
 ```
 
-Returns **[Array][9]<[Page]>** 
+Returns **[Array][10]<[Page]>** 
 
 ## add
 
@@ -66,8 +72,8 @@ Add new page
 
 ### Parameters
 
-*   `props` **[Object][10]** Page properties
-*   `opts` **[Object][10]?** Options (optional, default `{}`)
+*   `props` **[Object][11]** Page properties
+*   `opts` **[Object][11]?** Options (optional, default `{}`)
 
 ### Examples
 
@@ -87,7 +93,7 @@ Remove page
 
 ### Parameters
 
-*   `page` **([String][11] | [Page])** Page or page id
+*   `page` **([String][12] | [Page])** Page or page id
 *   `opts` **any**  (optional, default `{}`)
 
 ### Examples
@@ -107,7 +113,7 @@ Get page by id
 
 ### Parameters
 
-*   `id` **[String][11]** Page id
+*   `id` **[String][12]** Page id
 
 ### Examples
 
@@ -141,7 +147,7 @@ const wrappers = pageManager.getAllWrappers();
 const allImages = wrappers.map(wrp => wrp.findType('image')).flat();
 ```
 
-Returns **[Array][9]<[Component]>** 
+Returns **[Array][10]<[Component]>** 
 
 ## select
 
@@ -149,8 +155,8 @@ Change the selected page. This will switch the page rendered in canvas
 
 ### Parameters
 
-*   `page` **([String][11] | [Page])** Page or page id
-*   `opts`   (optional, default `{}`)
+*   `page` **([String][12] | [Page])** Page or page id
+*   `opts` **SetOptions**  (optional, default `{}`)
 
 ### Examples
 
@@ -191,8 +197,10 @@ Returns **[Page]**
 
 [8]: #getselected
 
-[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+
+[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 
-[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 
-[11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String

docs/api/panels.md

@@ -50,10 +50,10 @@ Add new panel to the collection
 ### Examples
 
 ```javascript
-var newPanel = panelManager.addPanel({
-  id: 'myNewPanel',
- visible  : true,
- buttons  : [...],
+const newPanel = panelManager.addPanel({
+ id: 'myNewPanel',
+ visible: true,
+ buttons: [...],
 });
 ```
 
@@ -65,21 +65,19 @@ Remove a panel from the collection
 
 ### Parameters
 
-*   `panel` **([Object][11] | Panel | [String][12])** Object with right properties or an instance of Panel or Painel id
+*   `panel` **(Panel | [String][12])** Panel instance or panel id
 
 ### Examples
 
 ```javascript
-const newPanel = panelManager.removePanel({
-  id: 'myNewPanel',
- visible  : true,
- buttons  : [...],
-});
+const somePanel = panelManager.getPanel('somePanel');
+const removedPanel = panelManager.removePanel(somePanel);
 
-const newPanel = panelManager.removePanel('myNewPanel');
+// or by id
+const removedPanel = panelManager.removePanel('myNewPanel');
 ```
 
-Returns **Panel** Removed panel. Useful in case passed argument was an Object
+Returns **Panel** Removed panel
 
 ## getPanel
 
@@ -92,7 +90,7 @@ Get panel by ID
 ### Examples
 
 ```javascript
-var myPanel = panelManager.getPanel('myNewPanel');
+const myPanel = panelManager.getPanel('myPanel');
 ```
 
 Returns **(Panel | null)** 
@@ -109,7 +107,7 @@ Add button to the panel
 ### Examples
 
 ```javascript
-var newButton = panelManager.addButton('myNewPanel',{
+const newButton = panelManager.addButton('myNewPanel',{
   id: 'myNewButton',
   className: 'someClass',
   command: 'someCommand',
@@ -174,7 +172,7 @@ Get button from the panel
 ### Examples
 
 ```javascript
-var button = panelManager.getButton('myPanel','myButton');
+const button = panelManager.getButton('myPanel', 'myButton');
 ```
 
 Returns **(Button | null)** 

src/css_composer/index.ts

@@ -40,6 +40,7 @@ import EditorModel from '../editor/model/Editor';
 import Component from '../dom_components/model/Component';
 import { ObjectAny } from '../common';
 
+/** @private */
 interface RuleOptions {
   /**
    * At-rule type, eg. `media`
@@ -50,6 +51,8 @@ interface RuleOptions {
    */
   atRuleParams?: string;
 }
+
+/** @private */
 interface SetRuleOptions extends RuleOptions {
   /**
    * If the rule exists already, merge passed styles instead of replacing them.

src/dom_components/index.ts

@@ -38,6 +38,7 @@
  * * `component:drag:start` - Component drag started. Passed an object, to the callback, containing the `target` (component to drag), `parent` (parent of the component) and `index` (component index in the parent)
  * * `component:drag` - During component drag. Passed the same object as in `component:drag:start` event, but in this case, `parent` and `index` are updated by the current pointer
  * * `component:drag:end` - Component drag ended. Passed the same object as in `component:drag:start` event, but in this case, `parent` and `index` are updated by the final pointer
+ * * `component:resize` - During component resize.
  *
  * ## Methods
  * * [getWrapper](#getwrapper)