gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(fix): revert prettier formatting on markdown files (#1612)

Browse Source 
Prettier formatting our markdown files is causing bugs because of the
differences between Gatsby's parser and Prettier's. Also, Prettier
formats the inline code-blocks containing example CMS configs, but the
formatting it uses doesn't really make much sense or match the suggested
CMS config style.

It doesn't actually make much sense to format the docs anyway, since we
use the CMS itself to edit/generate them.
This commit is contained in:
Caleb
2018-08-14 11:33:13 -06:00
committed by GitHub
parent dd56d6e2d9
commit ebc2471c6b
40 changed files with 452 additions and 502 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
website/content/docs/custom-widgets.md
View File

@ -6,8 +6,8 @@ group: guides
The NetlifyCMS exposes a `window.CMS` global object that you can use to register custom widgets, previews, and editor plugins. The same object is also the default export if you import Netify CMS as an npm module. The available widget extension methods are:
- **registerWidget:** lets you register a custom widget.
- **registerEditorComponent:** lets you add a block component to the Markdown editor.
* **registerWidget:** lets you register a custom widget.
* **registerEditorComponent:** lets you add a block component to the Markdown editor.
### Writing React Components inline
@ -30,17 +30,17 @@ CMS.registerWidget(name, control, [preview]);
**Params:**
| Param | Type | Description |
| ----------- | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name` | `string` | Widget name, allows this widget to be used via the field `widget` property in config |
| `control` | `React.Component` or `string` | <ul><li>React component that renders the control, receives the following props: <ul><li>**value:** Current field value</li><li>**onChange:** Callback function to update the field value</li></ul></li><li>Name of a registered widget whose control should be used (includes built in widgets).</li></ul> |
| [`preview`] | `React.Component`, optional | Renders the widget preview, receives the following props: <ul><li>**value:** Current preview value</li><li>**field:** Immutable map of current field configuration</li><li>**metadata:** Immutable map of any available metadata for the current field</li><li>**getAsset:** Function for retrieving an asset url for image/file fields</li><li>**entry:** Immutable Map of all entry data</li><li>**fieldsMetaData:** Immutable map of metadata from all fields.</li></ul> |
| Param | Type | Description |
| ----------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name` | `string` | Widget name, allows this widget to be used via the field `widget` property in config |
| `control` | `React.Component` or `string`| <ul><li>React component that renders the control, receives the following props: <ul><li>**value:** Current field value</li><li>**onChange:** Callback function to update the field value</li></ul></li><li>Name of a registered widget whose control should be used (includes built in widgets).</li></ul> |
| [`preview`] | `React.Component`, optional | Renders the widget preview, receives the following props: <ul><li>**value:** Current preview value</li><li>**field:** Immutable map of current field configuration</li><li>**metadata:** Immutable map of any available metadata for the current field</li><li>**getAsset:** Function for retrieving an asset url for image/file fields</li><li>**entry:** Immutable Map of all entry data</li><li>**fieldsMetaData:** Immutable map of metadata from all fields.</li></ul> |
- **field:** The field type that this widget will be used for.
- **control:** A React component that renders the editing interface for this field. Two props will be passed:
- **value:** The current value for this field.
- **onChange:** Callback function to update the field value.
- **preview (optional):** A React component that renders the preview of how the content will look. A `value` prop will be passed to this component.
* **field:** The field type that this widget will be used for.
* **control:** A React component that renders the editing interface for this field. Two props will be passed:
* **value:** The current value for this field.
* **onChange:** Callback function to update the field value.
* **preview (optional):** A React component that renders the preview of how the content will look. A `value` prop will be passed to this component.
**Example:**
@ -77,12 +77,12 @@ CMS.registerWidget('categories', CategoriesControl, CategoriesPreview);
Register a block level component for the Markdown editor:
```js
CMS.registerEditorComponent(definition);
CMS.registerEditorComponent(definition)
```
**Params**
- **definition:** The component definition; must specify: id, label, fields, patterns, fromBlock, toBlock, toPreview
* **definition:** The component definition; must specify: id, label, fields, patterns, fromBlock, toBlock, toPreview
**Example:**
@ -133,38 +133,38 @@ With custom widgets, the widget control can also optionally implement an `isVali
No errors:
```javascript
isValid = () => {
// Do internal validation
return true;
};
isValid = () => {
// Do internal validation
return true;
};
```
Existing error:
```javascript
isValid = () => {
// Do internal validation
return false;
};
isValid = () => {
// Do internal validation
return false;
};
```
**Object with `error` (useful for returning custom error messages)**
Existing error:
```javascript
isValid = () => {
// Do internal validation
return { error: 'Your error message.' };
};
isValid = () => {
// Do internal validation
return { error: 'Your error message.' };
};
```
**Promise**
You can also return a promise from `isValid`. While the promise is pending, the widget will be marked as "in error". When the promise resolves, the error is automatically cleared.
```javascript
isValid = () => {
return this.existingPromise;
};
isValid = () => {
return this.existingPromise;
};
```
Note: Do not create a promise inside `isValid` - `isValid` is called right before trying to persist. This means that even if a previous promise was already resolved, when the user hits 'save', `isValid` will be called again. If it returns a new promise, it will be immediately marked as "in error" until the new promise resolves.