From e33de7fd43629752105b7ed97a563939df60c16c Mon Sep 17 00:00:00 2001 From: Shawn Erquhart <shawn@erquh.art> Date: Sat, 9 Dec 2017 03:27:38 -0500 Subject: [PATCH] =?UTF-8?q?Update=20Docs=20=E2=80=9Ccustom-widgets?= =?UTF-8?q?=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- website/site/content/docs/custom-widgets.md | 23 +++++++++++---------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/website/site/content/docs/custom-widgets.md b/website/site/content/docs/custom-widgets.md index 8b066434..91dfe266 100644 --- a/website/site/content/docs/custom-widgets.md +++ b/website/site/content/docs/custom-widgets.md @@ -2,7 +2,6 @@ title: Custom Widgets position: 35 --- - # Custom Widgets The NetlifyCMS exposes an `window.CMS` global object that you can use to register custom widgets, previews, and editor plugins. The available widget extension methods are: @@ -26,11 +25,12 @@ 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 \| 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 | 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. @@ -40,7 +40,7 @@ Param | Type | Description **Example:** ```html -<script src="https://unpkg.com/netlify-cms@^0.7.0/dist/cms.js"></script> +<script src="https://unpkg.com/netlify-cms@^1.0.0/dist/cms.js"></script> <script> var CategoriesControl = createClass({ handleChange: function(e) { @@ -71,7 +71,9 @@ CMS.registerWidget('categories', CategoriesControl, CategoriesPreview); Register a block level component for the Markdown editor: - CMS.registerEditorComponent(definition) +``` +CMS.registerEditorComponent(definition) +``` **Params** @@ -80,7 +82,7 @@ Register a block level component for the Markdown editor: **Example:** ```html -<script src="https://unpkg.com/netlify-cms@^0.7.0/dist/cms.js"></script> +<script src="https://unpkg.com/netlify-cms@^1.0.0/dist/cms.js"></script> <script> CMS.registerEditorComponent({ // Internal id of the component @@ -116,7 +118,6 @@ CMS.registerEditorComponent({  - ## Advanced field validation All widget fields, including those for built-in widgets, [include basic validation](https://www.netlifycms.org/docs/widgets/#common-widget-options) capability using the `required` and `pattern` options. @@ -161,4 +162,4 @@ You can also return a promise from `isValid`. While the promise is pending, the }; ``` -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. \ No newline at end of file +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.