From db2d5197a389feab722329b515fbe8f88544e610 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Tue, 13 Aug 2019 18:32:25 +0200 Subject: [PATCH] Update docs --- docs/api/component.md | 31 ++++++++++++++++++++++++++----- docs/api/components.md | 13 +++++++++++++ docs/api/editor.md | 15 ++++++++++++++- docs/api/rich_text_editor.md | 2 +- docs/api/selector_manager.md | 10 ++++++++++ docs/api/style_manager.md | 6 +++++- 6 files changed, 69 insertions(+), 8 deletions(-) diff --git a/docs/api/component.md b/docs/api/component.md index 61774a1ad..802431389 100644 --- a/docs/api/component.md +++ b/docs/api/component.md @@ -48,6 +48,8 @@ component.get('tagName'); - `content` **[String][1]?** Content of the component (not escaped) which will be appended before children rendering. Default: `''` - `icon` **[String][1]?** Component's icon, this string will be inserted before the name (in Layers and badge), eg. it can be an HTML string ''. Default: `''` - `script` **([String][1] \| [Function][6])?** Component's javascript. More about it [here][7]. Default: `''` +- `script-export` **([String][1] \| [Function][6])?** You can specify javascript available only in export functions (eg. when you get the HTML). + If this property is defined it will overwrite the `script` one (in export functions). Default: `''` - `traits` **[Array][4]<([Object][2] \| [String][1])>?** Component's traits. More about it [here][8]. Default: `['id', 'title']` - `propagate` **[Array][4]<[String][1]>?** Indicates an array of properties which will be inhereted by all NEW appended children. For example if you create a component likes this: `{ removable: false, draggable: false, propagate: ['removable', 'draggable'] }` @@ -92,12 +94,29 @@ component.is('image') Returns **[Boolean][3]** +## props + +Return all the propeties + +Returns **[Object][2]** + ## index Get the index of the component in the parent collection. Returns **[Number][10]** +## setDragMode + +Change the drag mode of the component. +To get more about this feature read: [https://github.com/artf/grapesjs/issues/1936][11] + +### Parameters + +- `value` **[String][1]** Drag mode, options: 'absolute' | 'translate' + +Returns **this** + ## find Find inner components by query string. @@ -437,12 +456,12 @@ Add trait/s by id/s. ### Examples ```javascript -component.addTrat('title', { at: 1 }); // Add title trait (`at` option is the position index) -component.addTrat({ +component.addTrait('title', { at: 1 }); // Add title trait (`at` option is the position index) +component.addTrait({ type: 'checkbox', name: 'disabled', }); -component.addTrat(['title', {...}, ...]); +component.addTrait(['title', {...}, ...]); ``` Returns **[Array][4]** Array of added traits @@ -517,7 +536,7 @@ Returns **this** Get the DOM element of the component. This works only if the component is already rendered -Returns **[HTMLElement][11]** +Returns **[HTMLElement][12]** ## getView @@ -592,4 +611,6 @@ This method is used in Components.js just after the parsing [10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number -[11]: https://developer.mozilla.org/docs/Web/HTML/Element +[11]: https://github.com/artf/grapesjs/issues/1936 + +[12]: https://developer.mozilla.org/docs/Web/HTML/Element diff --git a/docs/api/components.md b/docs/api/components.md index f333bfa5f..9ffb1fdcb 100644 --- a/docs/api/components.md +++ b/docs/api/components.md @@ -175,6 +175,17 @@ Read more about this in [Define New Component][17] Returns **[Object][12]** Component type defintion, eg. `{ model: ..., view: ... }` +## removeType + +Remove component type + +### Parameters + +- `id` +- `type` **[string][15]** Component ID + +Returns **([Object][12] \| [undefined][18])** Removed component type, undefined otherwise + ## getTypes Return the array of all types @@ -214,3 +225,5 @@ Returns **[Array][14]** [16]: https://developer.mozilla.org/docs/Web/HTML/Element [17]: https://grapesjs.com/docs/modules/Components.html#define-new-component + +[18]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined diff --git a/docs/api/editor.md b/docs/api/editor.md index 1bb912922..430377ece 100644 --- a/docs/api/editor.md +++ b/docs/api/editor.md @@ -218,7 +218,7 @@ editor.addComponents({ }); ``` -Returns **(Model | [Array][4]<Model>)** +Returns **[Array][4]<Component>** ## getStyle @@ -502,6 +502,17 @@ editor.setCustomParserCss(css => { Returns **this** +## setDragMode + +Change the global drag mode of components. +To get more about this feature read: [https://github.com/artf/grapesjs/issues/1936][9] + +### Parameters + +- `value` **[String][2]** Drag mode, options: 'absolute' | 'translate' + +Returns **this** + ## log Trigger event log message @@ -594,3 +605,5 @@ Returns **[HTMLElement][6]** [7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function [8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number + +[9]: https://github.com/artf/grapesjs/issues/1936 diff --git a/docs/api/rich_text_editor.md b/docs/api/rich_text_editor.md index 96e193842..408043df7 100644 --- a/docs/api/rich_text_editor.md +++ b/docs/api/rich_text_editor.md @@ -41,7 +41,7 @@ Add a new action to the built-in RTE toolbar ```javascript rte.add('bold', { icon: 'B', - attributes: {title: 'Bold',} + attributes: {title: 'Bold'}, result: rte => rte.exec('bold') }); rte.add('link', { diff --git a/docs/api/selector_manager.md b/docs/api/selector_manager.md index 6c1994f1f..3f5f383de 100644 --- a/docs/api/selector_manager.md +++ b/docs/api/selector_manager.md @@ -123,6 +123,16 @@ Get all selectors Returns **Collection** +## escapeName + +Return escaped selector name + +### Parameters + +- `name` **[String][8]** Selector name to escape + +Returns **[String][8]** Escaped name + [1]: https://github.com/artf/grapesjs/blob/master/src/selector_manager/config/config.js [2]: #getconfig diff --git a/docs/api/style_manager.md b/docs/api/style_manager.md index a811cde23..0d4b7f0b5 100644 --- a/docs/api/style_manager.md +++ b/docs/api/style_manager.md @@ -52,6 +52,8 @@ that one will be returned - `sector.name` **[string][17]** Sector's label (optional, default `''`) - `sector.open` **[Boolean][18]** Indicates if the sector should be opened (optional, default `true`) - `sector.properties` **[Array][19]<[Object][16]>** Array of properties (optional, default `[]`) +- `opts` (optional, default `{}`) +- `options` **[Object][16]** Options (optional, default `{}`) ### Examples @@ -60,7 +62,8 @@ var sector = styleManager.addSector('mySector',{ name: 'My sector', open: true, properties: [{ name: 'My property'}] -}); +}, { at: 0 }); +// With `at: 0` we place the new sector at the beginning of the collection ``` Returns **Sector** Added Sector @@ -72,6 +75,7 @@ Get sector by id ### Parameters - `id` **[string][17]** Sector id +- `opts` (optional, default `{}`) ### Examples