From 15f5b0546d5e6e32bc0a3e7e3a8732ad64cba834 Mon Sep 17 00:00:00 2001 From: z Date: Sun, 14 Jan 2024 05:40:40 +0000 Subject: [PATCH 1/2] Improve custom widgets docuementation --- website/content/docs/custom-widgets.md | 31 +++++++++++++------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/website/content/docs/custom-widgets.md b/website/content/docs/custom-widgets.md index a3ff471cad6e..0599a1ec868d 100644 --- a/website/content/docs/custom-widgets.md +++ b/website/content/docs/custom-widgets.md @@ -27,7 +27,7 @@ import CMS from 'decap-cms-app'; CMS.registerWidget(name, control, [preview], [schema]); ``` -**Params:** +### Params | Param | Type | Description | | ----------- | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -36,7 +36,7 @@ CMS.registerWidget(name, control, [preview], [schema]); | [`preview`] | `React.Component`, optional | Renders the widget preview, receives the following props: | | [`schema`] | `JSON Schema object`, optional | Enforces a schema for the widget's field configuration | -**Example:** +### Example `admin/index.html` @@ -107,13 +107,13 @@ Register a block level component for the Markdown editor: CMS.registerEditorComponent(definition) ``` -**Params** +### Params * **definition:** The component definition; must specify: id, label, fields, patterns, fromBlock, toBlock, toPreview > Additional properties are optional and will be passed to the underlying widget control (object widget by default). For example, adding a `collapsed: true` property will collapse the widget by default. -**Example:** +### Example ```html @@ -131,8 +131,8 @@ CMS.registerEditorComponent({ widget: 'string' }, { - name: 'details', - label: 'Details', + name: 'contents', + label: 'Contents', widget: 'markdown' } ], @@ -154,7 +154,7 @@ CMS.registerEditorComponent({ fromBlock: function(match) { return { summary: match[1], - detail: match[2] + contents: match[2] }; }, // Given an object with one property for each field defined in `fields`, @@ -167,7 +167,7 @@ CMS.registerEditorComponent({
${data.summary} - ${data.detail} + ${data.contents}
`; @@ -179,7 +179,7 @@ CMS.registerEditorComponent({
${data.summary} - ${data.detail} + ${data.contents}
`; @@ -188,17 +188,14 @@ CMS.registerEditorComponent({ ``` -**Result:** - -![youtube-widget](/img/img/screen%20shot%202018-01-05%20at%204.25.07%20pm.png) - ## Advanced field validation All widget fields, including those for built-in widgets, [include basic validation](../widgets/#common-widget-options) capability using the `required` and `pattern` options. With custom widgets, the widget control can also optionally implement an `isValid` method to perform custom validations, in addition to presence and pattern. The `isValid` method will be automatically called, and it can return either a boolean value, an object with an error message or a promise. Examples: -**Boolean** +### Boolean + No errors: ```javascript @@ -217,7 +214,8 @@ Existing error: }; ``` -**Object with `error` (useful for returning custom error messages)** +### Object with `error` (useful for returning custom error messages) + Existing error: ```javascript @@ -227,7 +225,8 @@ Existing error: }; ``` -**Promise** +### 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 From 9387b6b4e75b2f8974174fc3ccc049c3e24a2321 Mon Sep 17 00:00:00 2001 From: z Date: Sun, 14 Jan 2024 05:58:48 +0000 Subject: [PATCH 2/2] Remove unnecessary links --- website/content/docs/custom-widgets.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/content/docs/custom-widgets.md b/website/content/docs/custom-widgets.md index 0599a1ec868d..252455356e94 100644 --- a/website/content/docs/custom-widgets.md +++ b/website/content/docs/custom-widgets.md @@ -502,7 +502,7 @@ CMS.registerWidget('test', Control, Preview) init({ config }) ``` -### [](https://github.com/decaporg/decap-cms-widget-starter#development)Development +### Development To run a copy of Decap CMS with your widget for development, use the start script: @@ -512,7 +512,7 @@ npm start Your widget source is in the `src` directory, where there are separate files for the `Control` and `Preview` components. -### [](https://github.com/decaporg/decap-cms-widget-starter#production--publishing)Production & Publishing +### Production & Publishing You'll want to take a few steps before publishing a production built package to npm: