diff --git a/README.md b/README.md
index 53558b9..3f6f94b 100644
--- a/README.md
+++ b/README.md
@@ -113,8 +113,10 @@ The edit component of the parent block must extend the class `SubblocksEdit`.
In the `render()` function of this component, you have to iterate on `this.state.subblocks` to draw subblocks.
-You could insert the add button simply writing `{this.renderAddBlockButton()}`
-You could insert the remove button for each subblock, simply writing `{this.renderDeleteBlockButton(subindex)}` where 'subindex' is the index of subblock.
+#### Usage
+
+- You could insert the add button simply writing `{this.renderAddBlockButton()}`
+- You could insert the remove button for each subblock, simply writing `{this.renderDeleteBlockButton(subindex)}` where 'subindex' is the index of subblock.
- `this.state.subblocks`: contains subblocks. Used to iterate on subblocks
- `this.state.subIndexSelected`: contains the index of the current selected subblock
@@ -128,18 +130,18 @@ You could insert the remove button for each subblock, simply writing `{this.rend
#### Example
-````jsx
+```jsx
/**
* Edit icons block.
* @module components/manage/Blocks/IconsBlocks/Edit
*/
-import React from 'react';
-import { Grid } from 'semantic-ui-react';
-import { SubblocksEdit, withDNDContext } from 'volto-subblocks';
-import { SidebarPortal } from '@plone/volto/components';
-import EditBlock from './Block/EditBlock';
-import Sidebar from './Sidebar';
+import React from 'react'
+import { Grid } from 'semantic-ui-react'
+import { SubblocksEdit, withDNDContext } from 'volto-subblocks'
+import { SidebarPortal } from '@plone/volto/components'
+import EditBlock from './Block/EditBlock'
+import Sidebar from './Sidebar'
/**
* Edit icons block class.
* @class Edit
@@ -153,14 +155,14 @@ class Edit extends SubblocksEdit {
*/
render() {
if (__SERVER__) {
- return
;
+ return
}
return (
{
- this.node = node;
+ ref={node => {
+ this.node = node
}}
>
@@ -170,13 +172,9 @@ class Edit extends SubblocksEdit {
))}
- {this.props.selected && (
- {this.renderAddBlockButton()}
- )}
+ {this.props.selected && {this.renderAddBlockButton()}}
@@ -200,48 +196,46 @@ class Edit extends SubblocksEdit {
/>
- );
+ )
}
}
-export default React.memo(withDNDContext(Edit));
-``
-
+export default React.memo(withDNDContext(Edit))
+```
###Â SubblockEdit
The edit component of the subblock must extend the class SubblockEdit
If you want to enable drag&drop to reorder subblocks, you have to return content from this function:
-* this.props.connectDropTarget
-* this.props.connectDragPreview
-* this.props.connectDragSource
-and compose with DNDSubblocks.
-
-* `this.onChange(obj)` to call when the subblock changes. *obj* is the object of subblock with new values
-* `this.onFocus(event)` to call when subblock receive focus
-* `this.focusNode()` to call when you focus the subblock
-* `this.renderDNDButton()` renders drag & drop button for subblock.
-* `this.renderDeleteButton()` renders delete button to delete subblock.
+- this.props.connectDropTarget
+- this.props.connectDragPreview
+- this.props.connectDragSource
+ and compose with DNDSubblocks.
+- `this.onChange(obj)` to call when the subblock changes. _obj_ is the object of subblock with new values
+- `this.onFocus(event)` to call when subblock receive focus
+- `this.focusNode()` to call when you focus the subblock
+- `this.renderDNDButton()` renders drag & drop button for subblock.
+- `this.renderDeleteButton()` renders delete button to delete subblock.
#### Example
+
```jsx
/**
* Edit text block.
* @module components/manage/Blocks/Title/Edit
*/
-import React from 'react';
-import { compose } from 'redux';
-import cx from 'classnames';
-import { Placeholder } from 'semantic-ui-react';
-import { injectIntl, defineMessages } from 'react-intl';
-import { SubblockEdit, DNDSubblocks } from 'volto-subblocks';
-
+import React from 'react'
+import { compose } from 'redux'
+import cx from 'classnames'
+import { Placeholder } from 'semantic-ui-react'
+import { injectIntl, defineMessages } from 'react-intl'
+import { SubblockEdit, DNDSubblocks } from 'volto-subblocks'
-import { TextEditorWidget } from '@package/components';
-import ViewIcon from './ViewIcon';
+import { TextEditorWidget } from '@package/components'
+import ViewIcon from './ViewIcon'
const messages = defineMessages({
iconPlaceholder: {
@@ -252,7 +246,7 @@ const messages = defineMessages({
id: 'Description placeholder',
defaultMessage: 'Description...',
},
-});
+})
/**
* Edit text block class.
* @class Edit
@@ -266,12 +260,12 @@ class EditBlock extends SubblockEdit {
* @constructs WysiwygEditor
*/
constructor(props) {
- super(props);
+ super(props)
this.state = {
focusOn: 'description',
- };
+ }
if (!this.props.data.block_style) {
- this.props.data.block_style = 'underline';
+ this.props.data.block_style = 'underline'
}
}
@@ -282,7 +276,7 @@ class EditBlock extends SubblockEdit {
*/
render() {
if (__SERVER__) {
- return ;
+ return
}
return this.props.connectDropTarget(
@@ -293,8 +287,8 @@ class EditBlock extends SubblockEdit {
isDragging: this.props.isDragging,
})}
onFocus={this.onFocus}
- ref={(node) => {
- this.node = node;
+ ref={node => {
+ this.node = node
}}
>
{this.renderDNDButton()}
@@ -313,17 +307,15 @@ class EditBlock extends SubblockEdit {
selected={this.state.focusOn === 'description'}
block={this.props.block}
onChangeBlock={this.onChange}
- placeholder={this.props.intl.formatMessage(
- messages.descriptionPlaceholder,
- )}
+ placeholder={this.props.intl.formatMessage(messages.descriptionPlaceholder)}
/>
,
),
),
- );
+ )
}
}
-export default React.memo(compose(injectIntl, ...DNDSubblocks)(EditBlock));
-``
-````
+export default React.memo(compose(injectIntl, ...DNDSubblocks)(EditBlock))
+;``
+```