Skip to content

Commit 66eee67

Browse files
davisaglidavisagli
committed
Update blocks to use slate instead of draftjs (no migration yet)
1 parent c305a69 commit 66eee67

File tree

23 files changed

+108
-313
lines changed

23 files changed

+108
-313
lines changed

‎frontend/src/components/Blocks/IconsAndNumbers/Block/EditBlock.jsx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { flattenToAppURL } from '@plone/volto/helpers';
44
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
55
import { useIntl, defineMessages } from 'react-intl';
66
import { Input } from 'semantic-ui-react';
7-
import { TextEditorWidget } from '@package/components/Widgets';
7+
import { DetachedTextBlockEditor } from '@plone/volto-slate/blocks/Text/DetachedTextBlockEditor';
88

99
const messages = defineMessages({
1010
titlePlaceholder: {
@@ -81,18 +81,12 @@ const EditBlock = ({
8181
onClick={(e) => setFocusOn('text' + index)}
8282
onKeyDown={() => setFocusOn('text' + index)}
8383
>
84-
<TextEditorWidget
85-
data={data}
86-
fieldName={'text'}
84+
<DetachedTextBlockEditor
85+
data={{ value: data.text }}
86+
onChangeBlock={(block, { value }) => onChange(index, 'text', value)}
8787
selected={selected && focusOn === 'text' + index}
88-
onChangeBlock={(v) => {
89-
onChange(index, 'text', v.text);
90-
}}
88+
readOnly={false}
9189
placeholder={intl.formatMessage(messages.textPlaceholder)}
92-
prevFocus={'number' + index}
93-
setFocus={(f) => setFocusOn(f)}
94-
showToolbar={true}
95-
key={'text' + index}
9690
/>
9791
</div>
9892
</div>

‎frontend/src/components/Blocks/IconsAndNumbers/Block/ViewBlock.jsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
/* eslint-disable jsx-a11y/no-static-element-interactions */
22
import React from 'react';
3-
import redraft from 'redraft';
43
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
54
import { flattenToAppURL } from '@plone/volto/helpers';
6-
7-
import config from '@plone/volto/registry';
5+
import { TextBlockView } from '@plone/volto-slate/blocks/Text';
86

97
const ViewBlock = ({ data }) => {
108
const icon = data.iconImage; //data.icon
@@ -27,11 +25,7 @@ const ViewBlock = ({ data }) => {
2725
{data.title && <div className="column-title">{data.title}</div>}
2826

2927
<div className="column-text">
30-
{redraft(
31-
data.text,
32-
config.settings.richtextViewSettings.ToHTMLRenderers,
33-
config.settings.richtextViewSettings.ToHTMLOptions,
34-
)}
28+
<TextBlockView data={{ value: data.text }} />
3529
</div>
3630
</div>
3731
) : (

‎frontend/src/components/Blocks/IconsAndNumbers/View.jsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import React from 'react';
22
import cx from 'classnames';
33
import { Container } from 'semantic-ui-react';
4-
import redraft from 'redraft';
54
import { ListingLinkMore } from '@package/components';
65
import ViewNumberBlock from './Block/ViewBlock';
7-
import config from '@plone/volto/registry';
6+
import { TextBlockView } from '@plone/volto-slate/blocks/Text';
87

98
const View = ({ data }) => {
109
return (
@@ -20,11 +19,7 @@ const View = ({ data }) => {
2019
{data.title && <div className="title">{data.title}</div>}
2120
{data.description && (
2221
<div className="description">
23-
{redraft(
24-
data.description,
25-
config.settings.richtextViewSettings.ToHTMLRenderers,
26-
config.settings.richtextViewSettings.ToHTMLOptions,
27-
)}
22+
<TextBlockView data={{ value: data.description }} />
2823
</div>
2924
)}
3025
<div className="columns-wrapper">

‎frontend/src/components/Blocks/IconsAndText/Block/EditBlock.jsx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { flattenToAppURL } from '@plone/volto/helpers';
55
import { UniversalLink } from '@plone/volto/components';
66
import { useIntl, defineMessages } from 'react-intl';
77
import { Input, TextArea } from 'semantic-ui-react';
8-
import { TextEditorWidget } from '@package/components/Widgets';
8+
import { DetachedTextBlockEditor } from '@plone/volto-slate/blocks/Text/DetachedTextBlockEditor';
99
import { Button } from '@package/components';
1010

1111
const messages = defineMessages({
@@ -92,18 +92,12 @@ const EditBlock = ({
9292
onClick={(e) => setFocusOn('text' + index)}
9393
onKeyDown={() => setFocusOn('text' + index)}
9494
>
95-
<TextEditorWidget
96-
data={data}
97-
fieldName={'text'}
95+
<DetachedTextBlockEditor
96+
data={{ value: data.text }}
97+
onChangeBlock={(block, { value }) => onChange(index, 'text', value)}
9898
selected={selected && focusOn === 'text' + index}
99-
onChangeBlock={(v) => {
100-
onChange(index, 'text', v.text);
101-
}}
99+
readOnly={false}
102100
placeholder={intl.formatMessage(messages.textPlaceholder)}
103-
prevFocus={'number' + index}
104-
setFocus={(f) => setFocusOn(f)}
105-
showToolbar={true}
106-
key={'text' + index}
107101
/>
108102
</div>
109103
</div>

‎frontend/src/components/Blocks/IconsAndText/Block/ViewBlock.jsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
/* eslint-disable jsx-a11y/no-static-element-interactions */
22
import React from 'react';
33
import cx from 'classnames';
4-
import redraft from 'redraft';
54
import { flattenToAppURL } from '@plone/volto/helpers';
65
import { UniversalLink } from '@plone/volto/components';
76
import { Button } from '@package/components';
8-
import config from '@plone/volto/registry';
7+
import { TextBlockView } from '@plone/volto-slate/blocks/Text';
98

109
const ViewBlock = ({ data, bg_color }) => {
1110
const icon = data.iconImage; //data.icon
@@ -41,11 +40,7 @@ const ViewBlock = ({ data, bg_color }) => {
4140
</div>
4241
)}
4342
<div className="column-text">
44-
{redraft(
45-
data.text,
46-
config.settings.richtextViewSettings.ToHTMLRenderers,
47-
config.settings.richtextViewSettings.ToHTMLOptions,
48-
)}
43+
<TextBlockView data={{ value: data.text }} />
4944
</div>
5045

5146
{data.href_title && data.href?.length > 0 && (

‎frontend/src/components/Blocks/IconsAndText/Edit.jsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useIntl, defineMessages } from 'react-intl';
66
import { Input, Container } from 'semantic-ui-react';
77
import { SidebarPortal } from '@plone/volto/components';
88
import { ListingLinkMore } from '@package/components';
9-
import { TextEditorWidget } from '@package/components/Widgets';
9+
import { DetachedTextBlockEditor } from '@plone/volto-slate/blocks/Text/DetachedTextBlockEditor';
1010
import EditColumnBlock from './Block/EditBlock';
1111
import Sidebar from './Sidebar';
1212

@@ -70,19 +70,17 @@ const Edit = (props) => {
7070
}
7171
/>
7272
</div>
73-
<TextEditorWidget
74-
data={data}
75-
fieldName="description"
76-
onChangeBlock={(v) => {
73+
<DetachedTextBlockEditor
74+
data={{ value: data.description }}
75+
onChangeBlock={(block, { value }) => {
7776
onChangeBlock(block, {
7877
...data,
79-
description: v.description,
78+
description: value,
8079
});
8180
}}
82-
placeholder={intl.formatMessage(messages.textPlaceholder)}
83-
setFocus={(f) => focusField(f)}
8481
selected={focusOn === 'description'}
85-
showToolbar={true}
82+
readOnly={false}
83+
placeholder={intl.formatMessage(messages.textPlaceholder)}
8684
/>
8785
</div>
8886
<div className="columns-wrapper">

‎frontend/src/components/Blocks/IconsAndText/View.jsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import React from 'react';
22
import cx from 'classnames';
3-
import redraft from 'redraft';
43
import { ListingLinkMore } from '@package/components';
54
import ViewBlock from './Block/ViewBlock';
65
import { Container } from 'semantic-ui-react';
7-
import config from '@plone/volto/registry';
6+
import { TextBlockView } from '@plone/volto-slate/blocks/Text';
87

98
const View = ({ data }) => {
109
const checkHasContent = (content) => {
@@ -20,11 +19,7 @@ const View = ({ data }) => {
2019
{data.title && <div className={cx('title')}>{data.title}</div>}
2120
{checkHasContent(data.description) && (
2221
<div className="description">
23-
{redraft(
24-
data.description,
25-
config.settings.richtextViewSettings.ToHTMLRenderers,
26-
config.settings.richtextViewSettings.ToHTMLOptions,
27-
)}
22+
<TextBlockView data={{ value: data.description }} />
2823
</div>
2924
)}
3025
</div>

‎frontend/src/components/Blocks/Numbers/Block/EditBlock.jsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
44
import { flattenToAppURL } from '@plone/volto/helpers';
55
import { useIntl, defineMessages } from 'react-intl';
66
import { Input } from 'semantic-ui-react';
7-
import { TextEditorWidget } from '@package/components/Widgets';
7+
import { DetachedTextBlockEditor } from '@plone/volto-slate/blocks/Text/DetachedTextBlockEditor';
88

99
const messages = defineMessages({
1010
titlePlaceholder: {
@@ -84,18 +84,14 @@ const EditBlock = ({
8484
onClick={(e) => setFocusOn('text' + index)}
8585
onKeyDown={() => setFocusOn('text' + index)}
8686
>
87-
<TextEditorWidget
88-
data={data}
89-
fieldName={'text'}
87+
<DetachedTextBlockEditor
88+
data={{ value: data.text }}
89+
onChangeBlock={(block, { value }) =>
90+
onChange(index, 'text', value)
91+
}
9092
selected={selected && focusOn === 'text' + index}
91-
onChangeBlock={(v) => {
92-
onChange(index, 'text', v.text);
93-
}}
93+
readOnly={false}
9494
placeholder={intl.formatMessage(messages.textPlaceholder)}
95-
prevFocus={'number' + index}
96-
setFocus={(f) => setFocusOn(f)}
97-
showToolbar={true}
98-
key={'text' + index}
9995
/>
10096
</div>
10197
</div>

‎frontend/src/components/Blocks/Numbers/Block/ViewBlock.jsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
/* eslint-disable jsx-a11y/no-static-element-interactions */
22
import React from 'react';
3-
import redraft from 'redraft';
43
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
54
import { flattenToAppURL } from '@plone/volto/helpers';
6-
import config from '@plone/volto/registry';
5+
import { TextBlockView } from '@plone/volto-slate/blocks/Text';
76

87
const ViewBlock = ({ data }) => {
98
return data.title || data.number ? (
@@ -33,11 +32,7 @@ const ViewBlock = ({ data }) => {
3332
)}
3433

3534
<div className="number-text">
36-
{redraft(
37-
data.text,
38-
config.settings.richtextViewSettings.ToHTMLRenderers,
39-
config.settings.richtextViewSettings.ToHTMLOptions,
40-
)}
35+
<TextBlockView data={{ value: data.text }} />
4136
</div>
4237
</div>
4338
</div>

‎frontend/src/components/Blocks/Slider/Edit.jsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { useIntl, defineMessages } from 'react-intl';
1010
import { SidebarPortal } from '@plone/volto/components';
1111
import Sidebar from './Sidebar';
1212
import Body from './Body';
13-
import { TextEditorWidget } from '@package/components/Widgets';
13+
import { DetachedTextBlockEditor } from '@plone/volto-slate/blocks/Text/DetachedTextBlockEditor';
1414
import { v4 as uuid } from 'uuid';
1515

1616
const messages = defineMessages({
@@ -74,19 +74,17 @@ const Edit = (props) => {
7474
}
7575
/>
7676
</div>
77-
<TextEditorWidget
78-
data={props.data}
79-
fieldName="description"
80-
onChangeBlock={(v) => {
77+
<DetachedTextBlockEditor
78+
data={{ value: props.data.description }}
79+
onChangeBlock={(block, { value }) => {
8180
props.onChangeBlock(props.block, {
8281
...props.data,
83-
description: v.description,
82+
description: value,
8483
});
8584
}}
86-
placeholder={intl.formatMessage(messages.textPlaceholder)}
87-
setFocus={(f) => focusField(f)}
8885
selected={focusOn === 'description'}
89-
showToolbar={true}
86+
readOnly={false}
87+
placeholder={intl.formatMessage(messages.textPlaceholder)}
9088
/>
9189
</div>
9290
)}

0 commit comments

Comments
 (0)