tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Up docs

pull/4080/head
Artur Arseniev 4 years ago
parent
adcc693f44
commit
fcdcc5efc8
4 changed files with 76 additions and 94 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 23
      docs/api/component.md
  2. 54
      docs/api/property.md
  3. 4
      docs/api/property_composite.md
  4. 89
      docs/api/style_manager.md

23
docs/api/component.md
View File

@ -756,29 +756,6 @@ editor.getSelected().move(dest, { at: 0 });
Returns **this**
### getList
The list of components is taken from the Components module.
Initially, the list, was set statically on the Component object but it was
not ok, as it was shared between multiple editor instances
#### Parameters
* `model`
### checkId
This method checks, for each parsed component and style object
(are not Components/CSSRules yet), for duplicated id and fixes them
This method is used in Components.js just after the parsing
#### Parameters
* `components`
* `styles` (optional, default `[]`)
* `list` (optional, default `{}`)
* `opts` (optional, default `{}`)
[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

54
docs/api/property.md
View File

@ -10,6 +10,12 @@
* `property` **[String][1]** Related CSS property name, eg. `text-align`.
* `default` **[String][1]** Defaul value of the property.
* `label` **[String][1]** Label to use in UI, eg. `Text Align`.
* `onChange` **[Function][2]?** Change callback.
```js
onChange: ({ property, from, to }) => {
console.log(`Changed property`, property.getName(), { from, to });
}
```
### getId
@ -37,9 +43,9 @@ Get property label.
#### Parameters
* `opts` **[Object][2]** Options (optional, default `{}`)
* `opts` **[Object][3]** Options (optional, default `{}`)
* `opts.locale` **[Boolean][3]** Use the locale string from i18n module (optional, default `true`)
* `opts.locale` **[Boolean][4]** Use the locale string from i18n module (optional, default `true`)
Returns **[String][1]**
@ -49,9 +55,9 @@ Get property value.
#### Parameters
* `opts` **[Object][2]** Options (optional, default `{}`)
* `opts` **[Object][3]** Options (optional, default `{}`)
* `opts.noDefault` **[Boolean][3]** Avoid returning the default value (optional, default `false`)
* `opts.noDefault` **[Boolean][4]** Avoid returning the default value (optional, default `false`)
Returns **[String][1]**
@ -61,17 +67,17 @@ Check if the property has value.
#### Parameters
* `opts` **[Object][2]** Options (optional, default `{}`)
* `opts` **[Object][3]** Options (optional, default `{}`)
* `opts.noParent` **[Boolean][3]** Ignore the value if it comes from the parent target. (optional, default `false`)
* `opts.noParent` **[Boolean][4]** Ignore the value if it comes from the parent target. (optional, default `false`)
Returns **[Boolean][3]**
Returns **[Boolean][4]**
### hasValueParent
Indicates if the current value is coming from a parent target (eg. another CSSRule).
Returns **[Boolean][3]**
Returns **[Boolean][4]**
### getStyle
@ -79,9 +85,9 @@ Get the CSS style object of the property.
#### Parameters
* `opts` **[Object][2]** Options (optional, default `{}`)
* `opts` **[Object][3]** Options (optional, default `{}`)
* `opts.camelCase` **[Boolean][3]?** Return property name in camelCase.
* `opts.camelCase` **[Boolean][4]?** Return property name in camelCase.
#### Examples
@ -91,7 +97,7 @@ console.log(property.getStyle());
// { color: 'red' };
```
Returns **[Object][2]**
Returns **[Object][3]**
### getDefaultValue
@ -107,16 +113,16 @@ The change is also propagated to the selected targets (eg. CSS rule).
#### Parameters
* `value` **[String][1]** New value
* `opts` **[Object][2]** Options (optional, default `{}`)
* `opts` **[Object][3]** Options (optional, default `{}`)
* `opts.partial` **[Boolean][3]** If `true` the update on targets won't be considered complete (not stored in UndoManager) (optional, default `false`)
* `opts.noTarget` **[Boolean][3]** If `true` the change won't be propagated to selected targets. (optional, default `false`)
* `opts.partial` **[Boolean][4]** If `true` the update on targets won't be considered complete (not stored in UndoManager) (optional, default `false`)
* `opts.noTarget` **[Boolean][4]** If `true` the change won't be propagated to selected targets. (optional, default `false`)
### isVisible
Check if the property is visible
Returns **[Boolean][3]**
Returns **[Boolean][4]**
### clear
@ -125,32 +131,34 @@ The change is also propagated to the selected targets (eg. the css property is c
#### Parameters
* `opts` **[Object][2]** Options (optional, default `{}`)
* `opts` **[Object][3]** Options (optional, default `{}`)
* `opts.noTarget` **[Boolean][3]** If `true` the change won't be propagated to selected targets. (optional, default `false`)
* `opts.noTarget` **[Boolean][4]** If `true` the change won't be propagated to selected targets. (optional, default `false`)
### canClear
Indicates if the current value comes directly from the selected target and so can be cleared.
Returns **[Boolean][3]**
Returns **[Boolean][4]**
### getParent
If the current property is a sub-property, this will return the parent Property.
Returns **([[Property][4]] | null)**
Returns **([[Property][5]] | null)**
### isFull
Indicates if the property is full-width in UI.
Returns **[Boolean][3]**
Returns **[Boolean][4]**
[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[4]: #property
[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
[5]: #property

4
docs/api/property_composite.md
View File

@ -14,7 +14,7 @@
* `join` **[String][4]?** Value used to join property values, default `" "`.
* `fromStyle` **[Function][6]?** Custom logic for getting property values from the target style object.
```js
fromStyle(style) => {
fromStyle: (style) => {
const margins = parseMarginShorthand(style.margin);
return {
'margin-top': margins.top,
@ -24,7 +24,7 @@
```
* `toStyle` **[Function][6]?** Custom logic for creating the CSS style object to apply on selected targets.
```js
toStyle(values) => {
toStyle: (values) => {
const top = values['margin-top'] || 0;
const right = values['margin-right'] || 0;
// ...

89
docs/api/style_manager.md
View File

@ -62,7 +62,6 @@ styleManager.addSector(...);
* [addType][19]
* [getType][20]
* [getTypes][21]
* [createType][22]
[Sector]: sector.html
@ -76,7 +75,7 @@ styleManager.addSector(...);
Get configuration object
Returns **[Object][23]**
Returns **[Object][22]**
## addSector
@ -84,11 +83,11 @@ Add new sector. If the sector with the same id already exists, that one will be
### Parameters
* `id` **[String][24]** Sector id
* `sector` **[Object][23]** Sector definition. Check the [available properties][25]
* `options` **[Object][23]** Options (optional, default `{}`)
* `id` **[String][23]** Sector id
* `sector` **[Object][22]** Sector definition. Check the [available properties][24]
* `options` **[Object][22]** Options (optional, default `{}`)
* `options.at` **[Number][26]?** Position index (by default, will be appended at the end).
* `options.at` **[Number][25]?** Position index (by default, will be appended at the end).
### Examples
@ -109,7 +108,7 @@ Get sector by id.
### Parameters
* `id` **[String][24]** Sector id
* `id` **[String][23]** Sector id
* `opts` (optional, default `{}`)
### Examples
@ -126,9 +125,9 @@ Get all sectors.
### Parameters
* `opts` **[Object][23]** Options (optional, default `{}`)
* `opts` **[Object][22]** Options (optional, default `{}`)
* `opts.visible` **[Boolean][27]?** Returns only visible sectors
* `opts.visible` **[Boolean][26]?** Returns only visible sectors
### Examples
@ -136,7 +135,7 @@ Get all sectors.
const sectors = styleManager.getSectors();
```
Returns **[Array][28]<[Sector]>**
Returns **[Array][27]<[Sector]>**
## removeSector
@ -144,7 +143,7 @@ Remove sector by id.
### Parameters
* `id` **[String][24]** Sector id
* `id` **[String][23]** Sector id
### Examples
@ -160,11 +159,11 @@ Add new property to the sector.
### Parameters
* `sectorId` **[String][24]** Sector id.
* `property` **[Object][23]** Property definition. Check the [base available properties][29] + others based on the `type` of your property.
* `opts` **[Object][23]** Options (optional, default `{}`)
* `sectorId` **[String][23]** Sector id.
* `property` **[Object][22]** Property definition. Check the [base available properties][28] + others based on the `type` of your property.
* `opts` **[Object][22]** Options (optional, default `{}`)
* `opts.at` **[Number][26]?** Position index (by default, will be appended at the end).
* `opts.at` **[Number][25]?** Position index (by default, will be appended at the end).
### Examples
@ -189,8 +188,8 @@ Get the property.
### Parameters
* `sectorId` **[String][24]** Sector id.
* `id` **[String][24]** Property id.
* `sectorId` **[String][23]** Sector id.
* `id` **[String][23]** Property id.
### Examples
@ -206,7 +205,7 @@ Get all properties of the sector.
### Parameters
* `sectorId` **[String][24]** Sector id.
* `sectorId` **[String][23]** Sector id.
### Examples
@ -222,8 +221,8 @@ Remove the property.
### Parameters
* `sectorId` **[String][24]** Sector id.
* `id` **[String][24]** Property id.
* `sectorId` **[String][23]** Sector id.
* `id` **[String][23]** Property id.
### Examples
@ -240,7 +239,7 @@ The target could be a Component, CSSRule, or a CSS selector string.
### Parameters
* `target` **([Component] | [CSSRule] | [String][24])**
* `target` **([Component] | [CSSRule] | [String][23])**
* `opts` (optional, default `{}`)
### Examples
@ -255,7 +254,7 @@ btnCmp && styleManager.select(btnCmp);
styleManager.select('.btn > span');
```
Returns **[Array][28]<([Component] | [CSSRule])>** Array containing selected Components or CSSRules
Returns **[Array][27]<([Component] | [CSSRule])>** Array containing selected Components or CSSRules
## getSelected
@ -268,13 +267,13 @@ Returns **([Component] | [CSSRule] | null)**
Get the array of selected targets.
Returns **[Array][28]<([Component] | [CSSRule])>**
Returns **[Array][27]<([Component] | [CSSRule])>**
## getSelectedParents
Get parent rules of the last selected target.
Returns **[Array][28]<[CSSRule]>**
Returns **[Array][27]<[CSSRule]>**
## addStyleTargets
@ -282,8 +281,8 @@ Update selected targets with a custom style.
### Parameters
* `style` **[Object][23]** Style object
* `opts` **[Object][23]** Options (optional, default `{}`)
* `style` **[Object][22]** Style object
* `opts` **[Object][22]** Options (optional, default `{}`)
### Examples
@ -297,7 +296,7 @@ Return built-in property definition
### Parameters
* `prop` **[String][24]** Property name.
* `prop` **[String][23]** Property name.
### Examples
@ -305,13 +304,13 @@ Return built-in property definition
const widthPropDefinition = styleManager.getBuiltIn('width');
```
Returns **([Object][23] | null)** Property definition.
Returns **([Object][22] | null)** Property definition.
## getBuiltInAll
Get all the available built-in property definitions.
Returns **[Object][23]**
Returns **[Object][22]**
## addBuiltIn
@ -320,8 +319,8 @@ If the property exists already, it will extend it.
### Parameters
* `prop` **[String][24]** Property name.
* `definition` **[Object][23]** Property definition.
* `prop` **[String][23]** Property name.
* `definition` **[Object][22]** Property definition.
### Examples
@ -333,7 +332,7 @@ const sector = styleManager.addBuiltIn('new-property', {
})
```
Returns **[Object][23]** Added property definition.
Returns **[Object][22]** Added property definition.
## addType
@ -341,8 +340,8 @@ Add new property type
### Parameters
* `id` **[string][24]** Type ID
* `definition` **[Object][23]** Definition of the type.
* `id` **[string][23]** Type ID
* `definition` **[Object][22]** Definition of the type.
### Examples
@ -377,15 +376,15 @@ Get type
### Parameters
* `id` **[string][24]** Type ID
* `id` **[string][23]** Type ID
Returns **[Object][23]** Type definition
Returns **[Object][22]** Type definition
## getTypes
Get all types
Returns **[Array][28]**
Returns **[Array][27]**
[1]: https://github.com/artf/grapesjs/blob/master/src/style_manager/config/config.js
@ -429,18 +428,16 @@ Returns **[Array][28]**
[21]: #gettypes
[22]: #createtype
[22]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[23]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[23]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[24]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[24]: sector.html#properties
[25]: sector.html#properties
[25]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
[26]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
[26]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
[27]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
[27]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
[28]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
[29]: property.html#properties
[28]: property.html#properties

Write Preview
Loading…
Cancel
Save