diff --git a/backend/scripts/migrate_draft_to_slate.py b/backend/scripts/migrate_draft_to_slate.py
new file mode 100644
index 0000000..7e48b74
--- /dev/null
+++ b/backend/scripts/migrate_draft_to_slate.py
@@ -0,0 +1,116 @@
+from plone import api
+from plone.restapi.blocks import visit_blocks
+from zope.component.hooks import setSite
+from textwrap import indent
+import json
+import transaction
+
+BLOCK_FIELDS = {
+    "icons_and_numbers": ["columns.text"],
+    "icons_and_text": ["description", "columns.text"],
+    "image_columns": ["description"],
+    "numbers": ["numbers.text"],
+    "slider": ["description"],
+    "text1": ["content"],
+    "text5": ["description", "text1", "text2", "content"],
+    "text6": ["content"],
+    "text7": ["content"],
+}
+
+def find_values(value: dict, fields):
+    for field in fields:
+        if "." in field:
+            field, rest = field.split(".", 1)
+        else:
+            rest = None
+        if field not in value:
+            continue
+        nextvalue = value[field]
+        if rest and isinstance(nextvalue, list):
+            for item in nextvalue:
+                yield from find_values(item, [rest])
+        else:
+            yield value, field, nextvalue
+
+
+def process_entities(text, entityRanges, entityMap):
+    if len(entityRanges) == 1:
+        offset = entityRanges[0]["offset"]
+        length = entityRanges[0]["length"]
+        key = entityRanges[0]["key"]
+        pretext, linktext, posttext = text[:offset], text[offset:offset + length], text[offset + length:]
+        result = []
+        if pretext:
+            result.append({"text": pretext})
+        url = entityMap[str(key)]["data"]["url"]
+        result.append({
+            "type": "link",
+            "children": [{"text": linktext}],
+            "data": {"url": url}
+        })
+        if posttext:
+            result.append({"text": posttext})
+        return result
+    elif len(entityRanges) == 0:
+        return [{"text": text}]
+    else:
+        print(json.dumps(text, indent=4))
+        breakpoint()
+
+
+def migrate_draft_to_slate(value, entityMap=None) -> list:
+    match value:
+        case {"blocks": [*blocks], "entityMap": entityMap}:
+            result = []
+            for block in blocks:
+                result.extend(migrate_draft_to_slate(block, entityMap))
+            return result
+        case {"type": blocktype, "text": text, "entityRanges": entityRanges}:
+            children = process_entities(text, entityRanges, entityMap)
+            match blocktype:
+                case "unstyled" | "align-left" | "buttons":
+                    return [{"type": "p", "children": children}]
+                case "unordered-list-item":
+                    return [{"type": "ul", "children": [{"li": {"children": [{"text": text}]}}]}]
+                case "blockquote":
+                    return [{"type": "blockquote", "children": children}]
+                case _:
+                    breakpoint()
+                    raise Exception()
+        case _:
+            print(json.dumps(value, indent=4))
+            breakpoint()
+            raise Exception()
+
+
+def migrate_items():
+    catalog = api.portal.get_tool(name="portal_catalog")
+    i = 0
+    for brain in catalog.unrestrictedSearchResults(block_types=list(BLOCK_FIELDS.keys())):
+        obj = brain.getObject()
+
+        for block in visit_blocks(obj, obj.blocks):
+            block_type = block.get("@type")
+            for container, field, value in find_values(block, BLOCK_FIELDS.get(block_type, [])):
+                if isinstance(value, list):
+                    # no value, or already migrated
+                    continue
+                elif value is None:
+                    newvalue = []
+                else:
+                    newvalue = migrate_draft_to_slate(value)
+                if newvalue != value:
+                    container[field] = newvalue
+                    obj._p_changed = True
+                i += 1
+                print(f"{brain.getPath()} / {block_type} / {field}")
+                print(indent(json.dumps(value, indent=4), "  "))
+                print()
+                print(indent(json.dumps(newvalue, indent=4), "  "))
+                print()
+
+    print(f"Total fields processed: {i}")
+    transaction.commit()
+
+setSite(app.Plone)
+migrate_items()
diff --git a/frontend/core b/frontend/core
new file mode 160000
index 0000000..4239f53
--- /dev/null
+++ b/frontend/core
@@ -0,0 +1 @@
+Subproject commit 4239f53489fadcc9de82186158c803d91b454096
diff --git a/frontend/src/components/Blocks/IconsAndNumbers/Block/EditBlock.jsx b/frontend/src/components/Blocks/IconsAndNumbers/Block/EditBlock.jsx
index 76b023c..4e274ad 100644
--- a/frontend/src/components/Blocks/IconsAndNumbers/Block/EditBlock.jsx
+++ b/frontend/src/components/Blocks/IconsAndNumbers/Block/EditBlock.jsx
@@ -4,7 +4,7 @@ import { flattenToAppURL } from '@plone/volto/helpers';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useIntl, defineMessages } from 'react-intl';
 import { Input } from 'semantic-ui-react';
-import { TextEditorWidget } from '@package/components/Widgets';
+import { DetachedTextBlockEditor } from '@plone/volto-slate/blocks/Text/DetachedTextBlockEditor';
 
 const messages = defineMessages({
   titlePlaceholder: {
@@ -81,18 +81,12 @@ const EditBlock = ({
           onClick={(e) => setFocusOn('text' + index)}
           onKeyDown={() => setFocusOn('text' + index)}
         >
-          <TextEditorWidget
-            data={data}
-            fieldName={'text'}
+          <DetachedTextBlockEditor
+            data={{ value: data.text }}
+            onChangeBlock={(block, { value }) => onChange(index, 'text', value)}
             selected={selected && focusOn === 'text' + index}
-            onChangeBlock={(v) => {
-              onChange(index, 'text', v.text);
-            }}
+            readOnly={false}
             placeholder={intl.formatMessage(messages.textPlaceholder)}
-            prevFocus={'number' + index}
-            setFocus={(f) => setFocusOn(f)}
-            showToolbar={true}
-            key={'text' + index}
           />
         </div>
       </div>
diff --git a/frontend/src/components/Blocks/IconsAndNumbers/Block/ViewBlock.jsx b/frontend/src/components/Blocks/IconsAndNumbers/Block/ViewBlock.jsx
index 95f164a..a59fc2a 100644
--- a/frontend/src/components/Blocks/IconsAndNumbers/Block/ViewBlock.jsx
+++ b/frontend/src/components/Blocks/IconsAndNumbers/Block/ViewBlock.jsx
@@ -1,10 +1,8 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React from 'react';
-import redraft from 'redraft';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { flattenToAppURL } from '@plone/volto/helpers';
-
-import config from '@plone/volto/registry';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 
 const ViewBlock = ({ data }) => {
   const icon = data.iconImage; //data.icon
@@ -27,11 +25,7 @@ const ViewBlock = ({ data }) => {
       {data.title && <div className="column-title">{data.title}</div>}
 
       <div className="column-text">
-        {redraft(
-          data.text,
-          config.settings.richtextViewSettings.ToHTMLRenderers,
-          config.settings.richtextViewSettings.ToHTMLOptions,
-        )}
+        <TextBlockView data={{ value: data.text }} />
       </div>
     </div>
   ) : (
diff --git a/frontend/src/components/Blocks/IconsAndNumbers/View.jsx b/frontend/src/components/Blocks/IconsAndNumbers/View.jsx
index ad96647..bb0f7bd 100644
--- a/frontend/src/components/Blocks/IconsAndNumbers/View.jsx
+++ b/frontend/src/components/Blocks/IconsAndNumbers/View.jsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import cx from 'classnames';
 import { Container } from 'semantic-ui-react';
-import redraft from 'redraft';
 import { ListingLinkMore } from '@package/components';
 import ViewNumberBlock from './Block/ViewBlock';
-import config from '@plone/volto/registry';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 
 const View = ({ data }) => {
   return (
@@ -20,11 +19,7 @@ const View = ({ data }) => {
             {data.title && <div className="title">{data.title}</div>}
             {data.description && (
               <div className="description">
-                {redraft(
-                  data.description,
-                  config.settings.richtextViewSettings.ToHTMLRenderers,
-                  config.settings.richtextViewSettings.ToHTMLOptions,
-                )}
+                <TextBlockView data={{ value: data.description }} />
               </div>
             )}
             <div className="columns-wrapper">
diff --git a/frontend/src/components/Blocks/IconsAndText/Block/EditBlock.jsx b/frontend/src/components/Blocks/IconsAndText/Block/EditBlock.jsx
index 35431d5..22bf2a3 100644
--- a/frontend/src/components/Blocks/IconsAndText/Block/EditBlock.jsx
+++ b/frontend/src/components/Blocks/IconsAndText/Block/EditBlock.jsx
@@ -5,7 +5,7 @@ import { flattenToAppURL } from '@plone/volto/helpers';
 import { UniversalLink } from '@plone/volto/components';
 import { useIntl, defineMessages } from 'react-intl';
 import { Input, TextArea } from 'semantic-ui-react';
-import { TextEditorWidget } from '@package/components/Widgets';
+import { DetachedTextBlockEditor } from '@plone/volto-slate/blocks/Text/DetachedTextBlockEditor';
 import { Button } from '@package/components';
 
 const messages = defineMessages({
@@ -92,18 +92,12 @@ const EditBlock = ({
           onClick={(e) => setFocusOn('text' + index)}
           onKeyDown={() => setFocusOn('text' + index)}
         >
-          <TextEditorWidget
-            data={data}
-            fieldName={'text'}
+          <DetachedTextBlockEditor
+            data={{ value: data.text }}
+            onChangeBlock={(block, { value }) => onChange(index, 'text', value)}
             selected={selected && focusOn === 'text' + index}
-            onChangeBlock={(v) => {
-              onChange(index, 'text', v.text);
-            }}
+            readOnly={false}
             placeholder={intl.formatMessage(messages.textPlaceholder)}
-            prevFocus={'number' + index}
-            setFocus={(f) => setFocusOn(f)}
-            showToolbar={true}
-            key={'text' + index}
           />
         </div>
       </div>
diff --git a/frontend/src/components/Blocks/IconsAndText/Block/ViewBlock.jsx b/frontend/src/components/Blocks/IconsAndText/Block/ViewBlock.jsx
index 85eb543..a20be5d 100644
--- a/frontend/src/components/Blocks/IconsAndText/Block/ViewBlock.jsx
+++ b/frontend/src/components/Blocks/IconsAndText/Block/ViewBlock.jsx
@@ -1,11 +1,10 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React from 'react';
 import cx from 'classnames';
-import redraft from 'redraft';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { UniversalLink } from '@plone/volto/components';
 import { Button } from '@package/components';
-import config from '@plone/volto/registry';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 
 const ViewBlock = ({ data, bg_color }) => {
   const icon = data.iconImage; //data.icon
@@ -41,11 +40,7 @@ const ViewBlock = ({ data, bg_color }) => {
         </div>
       )}
       <div className="column-text">
-        {redraft(
-          data.text,
-          config.settings.richtextViewSettings.ToHTMLRenderers,
-          config.settings.richtextViewSettings.ToHTMLOptions,
-        )}
+        <TextBlockView data={{ value: data.text }} />
       </div>
 
       {data.href_title && data.href?.length > 0 && (
diff --git a/frontend/src/components/Blocks/IconsAndText/Edit.jsx b/frontend/src/components/Blocks/IconsAndText/Edit.jsx
index 34e90ed..25e1e05 100644
--- a/frontend/src/components/Blocks/IconsAndText/Edit.jsx
+++ b/frontend/src/components/Blocks/IconsAndText/Edit.jsx
@@ -6,7 +6,7 @@ import { useIntl, defineMessages } from 'react-intl';
 import { Input, Container } from 'semantic-ui-react';
 import { SidebarPortal } from '@plone/volto/components';
 import { ListingLinkMore } from '@package/components';
-import { TextEditorWidget } from '@package/components/Widgets';
+import { DetachedTextBlockEditor } from '@plone/volto-slate/blocks/Text/DetachedTextBlockEditor';
 import EditColumnBlock from './Block/EditBlock';
 import Sidebar from './Sidebar';
 
@@ -70,19 +70,17 @@ const Edit = (props) => {
             }
           />
         </div>
-        <TextEditorWidget
-          data={data}
-          fieldName="description"
-          onChangeBlock={(v) => {
+        <DetachedTextBlockEditor
+          data={{ value: data.description }}
+          onChangeBlock={(block, { value }) => {
             onChangeBlock(block, {
               ...data,
-              description: v.description,
+              description: value,
             });
           }}
-          placeholder={intl.formatMessage(messages.textPlaceholder)}
-          setFocus={(f) => focusField(f)}
           selected={focusOn === 'description'}
-          showToolbar={true}
+          readOnly={false}
+          placeholder={intl.formatMessage(messages.textPlaceholder)}
         />
       </div>
       <div className="columns-wrapper">
diff --git a/frontend/src/components/Blocks/IconsAndText/View.jsx b/frontend/src/components/Blocks/IconsAndText/View.jsx
index 7a54710..8c4827e 100644
--- a/frontend/src/components/Blocks/IconsAndText/View.jsx
+++ b/frontend/src/components/Blocks/IconsAndText/View.jsx
@@ -1,30 +1,19 @@
 import React from 'react';
 import cx from 'classnames';
-import redraft from 'redraft';
 import { ListingLinkMore } from '@package/components';
 import ViewBlock from './Block/ViewBlock';
 import { Container } from 'semantic-ui-react';
-import config from '@plone/volto/registry';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 
 const View = ({ data }) => {
-  const checkHasContent = (content) => {
-    if (content) {
-      let blocks = content.blocks.filter((block) => block?.text !== '');
-      return blocks.length > 0 ? true : false;
-    }
-  };
   let content = (
     <>
-      {(data.title || checkHasContent(data.description)) && (
+      {(data.title || data.description) && (
         <div className="block-content-header">
           {data.title && <div className={cx('title')}>{data.title}</div>}
-          {checkHasContent(data.description) && (
+          {data.description && (
             <div className="description">
-              {redraft(
-                data.description,
-                config.settings.richtextViewSettings.ToHTMLRenderers,
-                config.settings.richtextViewSettings.ToHTMLOptions,
-              )}
+              <TextBlockView data={{ value: data.description }} />
             </div>
           )}
         </div>
diff --git a/frontend/src/components/Blocks/Numbers/Block/EditBlock.jsx b/frontend/src/components/Blocks/Numbers/Block/EditBlock.jsx
index fbbcfeb..06ea1bb 100644
--- a/frontend/src/components/Blocks/Numbers/Block/EditBlock.jsx
+++ b/frontend/src/components/Blocks/Numbers/Block/EditBlock.jsx
@@ -4,7 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { useIntl, defineMessages } from 'react-intl';
 import { Input } from 'semantic-ui-react';
-import { TextEditorWidget } from '@package/components/Widgets';
+import { DetachedTextBlockEditor } from '@plone/volto-slate/blocks/Text/DetachedTextBlockEditor';
 
 const messages = defineMessages({
   titlePlaceholder: {
@@ -84,18 +84,14 @@ const EditBlock = ({
             onClick={(e) => setFocusOn('text' + index)}
             onKeyDown={() => setFocusOn('text' + index)}
           >
-            <TextEditorWidget
-              data={data}
-              fieldName={'text'}
+            <DetachedTextBlockEditor
+              data={{ value: data.text }}
+              onChangeBlock={(block, { value }) =>
+                onChange(index, 'text', value)
+              }
               selected={selected && focusOn === 'text' + index}
-              onChangeBlock={(v) => {
-                onChange(index, 'text', v.text);
-              }}
+              readOnly={false}
               placeholder={intl.formatMessage(messages.textPlaceholder)}
-              prevFocus={'number' + index}
-              setFocus={(f) => setFocusOn(f)}
-              showToolbar={true}
-              key={'text' + index}
             />
           </div>
         </div>
diff --git a/frontend/src/components/Blocks/Numbers/Block/ViewBlock.jsx b/frontend/src/components/Blocks/Numbers/Block/ViewBlock.jsx
index 78cd1b5..c1b41c6 100644
--- a/frontend/src/components/Blocks/Numbers/Block/ViewBlock.jsx
+++ b/frontend/src/components/Blocks/Numbers/Block/ViewBlock.jsx
@@ -1,9 +1,8 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React from 'react';
-import redraft from 'redraft';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { flattenToAppURL } from '@plone/volto/helpers';
-import config from '@plone/volto/registry';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 
 const ViewBlock = ({ data }) => {
   return data.title || data.number ? (
@@ -33,11 +32,7 @@ const ViewBlock = ({ data }) => {
         )}
 
         <div className="number-text">
-          {redraft(
-            data.text,
-            config.settings.richtextViewSettings.ToHTMLRenderers,
-            config.settings.richtextViewSettings.ToHTMLOptions,
-          )}
+          <TextBlockView data={{ value: data.text }} />
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/Blocks/Slider/Edit.jsx b/frontend/src/components/Blocks/Slider/Edit.jsx
index 9b34d8d..4ab76c5 100644
--- a/frontend/src/components/Blocks/Slider/Edit.jsx
+++ b/frontend/src/components/Blocks/Slider/Edit.jsx
@@ -10,7 +10,7 @@ import { useIntl, defineMessages } from 'react-intl';
 import { SidebarPortal } from '@plone/volto/components';
 import Sidebar from './Sidebar';
 import Body from './Body';
-import { TextEditorWidget } from '@package/components/Widgets';
+import { DetachedTextBlockEditor } from '@plone/volto-slate/blocks/Text/DetachedTextBlockEditor';
 import { v4 as uuid } from 'uuid';
 
 const messages = defineMessages({
@@ -74,19 +74,17 @@ const Edit = (props) => {
               }
             />
           </div>
-          <TextEditorWidget
-            data={props.data}
-            fieldName="description"
-            onChangeBlock={(v) => {
+          <DetachedTextBlockEditor
+            data={{ value: props.data.description }}
+            onChangeBlock={(block, { value }) => {
               props.onChangeBlock(props.block, {
                 ...props.data,
-                description: v.description,
+                description: value,
               });
             }}
-            placeholder={intl.formatMessage(messages.textPlaceholder)}
-            setFocus={(f) => focusField(f)}
             selected={focusOn === 'description'}
-            showToolbar={true}
+            readOnly={false}
+            placeholder={intl.formatMessage(messages.textPlaceholder)}
           />
         </div>
       )}
diff --git a/frontend/src/components/Blocks/Slider/View.jsx b/frontend/src/components/Blocks/Slider/View.jsx
index f3ffcd8..82adafe 100644
--- a/frontend/src/components/Blocks/Slider/View.jsx
+++ b/frontend/src/components/Blocks/Slider/View.jsx
@@ -6,36 +6,26 @@
 
 import React from 'react';
 import cx from 'classnames';
-import redraft from 'redraft';
 import PropTypes from 'prop-types';
 import Body from './Body';
-import config from '@plone/volto/registry';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
+
 /**
  * View icons blocks class.
  * @class View
  * @extends Component
  */
 const View = ({ data }) => {
-  const checkHasContent = (content) => {
-    if (content) {
-      let blocks = content.blocks.filter((block) => block?.text !== '');
-      return blocks.length > 0 ? true : false;
-    }
-  };
   return (
     <div className="block slider">
       {data.showMainTitleAndDescription && (
         <>
-          {(data.title || checkHasContent(data.description)) && (
+          {(data.title || data.description) && (
             <div className="block-content-header">
               {data.title && <div className={cx('title')}>{data.title}</div>}
-              {checkHasContent(data.description) && (
+              {data.description && (
                 <div className="description">
-                  {redraft(
-                    data.description,
-                    config.settings.richtextViewSettings.ToHTMLRenderers,
-                    config.settings.richtextViewSettings.ToHTMLOptions,
-                  )}
+                  <TextBlockView data={{ value: data.description }} />
                 </div>
               )}
             </div>
diff --git a/frontend/src/components/Blocks/Text/Edit.jsx b/frontend/src/components/Blocks/Text/Edit.jsx
deleted file mode 100644
index 1672846..0000000
--- a/frontend/src/components/Blocks/Text/Edit.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-/*It's simpy a wrapper for Volto Text block, to add background */
-
-import React from 'react';
-import { SidebarPortal } from '@plone/volto/components';
-import VoltoEditTextBlock from '@plone/volto/components/manage/Blocks/Text/Edit';
-import { PresetWrapper, ShareButtons } from '@package/components';
-
-import Sidebar from './Sidebar';
-
-const Edit = (props) => {
-  if (__SERVER__) {
-    return <div />;
-  }
-
-  return (
-    <PresetWrapper
-      {...props.data}
-      usePresetDefaults={false}
-      className="text-block-wrapper"
-    >
-      {props.data.share_social && (
-        <div className="content-social">
-          <ShareButtons showLabel={false} />
-        </div>
-      )}
-      <VoltoEditTextBlock {...props} />
-      <SidebarPortal selected={props.selected}>
-        <Sidebar
-          {...props.data}
-          onChange={(fieldName, value) => {
-            props.onChangeBlock(props.block, {
-              ...props.data,
-              [fieldName]: value,
-            });
-          }}
-        />
-      </SidebarPortal>
-    </PresetWrapper>
-  );
-};
-
-export default Edit;
diff --git a/frontend/src/components/Blocks/Text/Sidebar.jsx b/frontend/src/components/Blocks/Text/Sidebar.jsx
deleted file mode 100644
index 56f3c6a..0000000
--- a/frontend/src/components/Blocks/Text/Sidebar.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Segment } from 'semantic-ui-react';
-import { FormattedMessage } from 'react-intl';
-
-import { TextBlockStyleSidebar } from '@package/components';
-
-const Sidebar = (props) => {
-  return (
-    <Segment.Group raised>
-      <header className="header pulled">
-        <h2>
-          <FormattedMessage id="Text" defaultMessage="Text" />
-        </h2>
-      </header>
-      <TextBlockStyleSidebar {...props} titleColorOptions={[]} />
-    </Segment.Group>
-  );
-};
-
-Sidebar.propTypes = {
-  fullWidth: PropTypes.bool,
-  bg_color: PropTypes.string,
-  title_color: PropTypes.string,
-  share_social: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-};
-
-export default Sidebar;
diff --git a/frontend/src/components/Blocks/Text/View.jsx b/frontend/src/components/Blocks/Text/View.jsx
deleted file mode 100644
index a05499a..0000000
--- a/frontend/src/components/Blocks/Text/View.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-import VoltoViewTextBlock from '@plone/volto/components/manage/Blocks/Text/View';
-import { PresetWrapper, ShareButtons } from '@package/components';
-
-const View = (props) => {
-  return (
-    <PresetWrapper
-      {...props.data}
-      usePresetDefaults={false}
-      className="text-block-wrapper"
-    >
-      {props.data.share_social && (
-        <div className="content-social">
-          <ShareButtons showLabel={false} />
-        </div>
-      )}
-      <VoltoViewTextBlock {...props} />
-    </PresetWrapper>
-  );
-};
-
-export default View;
diff --git a/frontend/src/components/Blocks/Text1/Edit.jsx b/frontend/src/components/Blocks/Text1/Edit.jsx
index 9d13254..8c70729 100644
--- a/frontend/src/components/Blocks/Text1/Edit.jsx
+++ b/frontend/src/components/Blocks/Text1/Edit.jsx
@@ -8,7 +8,7 @@ import { Grid, TextArea } from 'semantic-ui-react';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { UniversalLink, SidebarPortal } from '@plone/volto/components';
 import { Button, PresetWrapper, ShareButtons } from '@package/components';
-import { TextEditorWidget } from '@package/components/Widgets';
+import { DetachedTextBlockEditor } from '@plone/volto-slate/blocks/Text/DetachedTextBlockEditor';
 import Sidebar from './Sidebar';
 
 const messages = defineMessages({
@@ -130,17 +130,14 @@ const Edit = (props) => {
                 )}
                 {/* eslint-disable-next-line */}
                 <p onClick={() => focusField('content')}>
-                  <TextEditorWidget
-                    data={data}
-                    fieldName="content"
+                  <DetachedTextBlockEditor
+                    data={{ value: data.content }}
+                    onChangeBlock={(block, { value }) =>
+                      onChange({ content: value }, 'content')
+                    }
                     selected={selected && focusOn === 'content'}
-                    block={block}
-                    onChangeBlock={(data) => onChange(data, 'content')}
+                    readOnly={false}
                     placeholder={intl.formatMessage(messages.textPlaceholder)}
-                    prevFocus="title"
-                    setFocus={(f) => focusField(f)}
-                    showToolbar={true}
-                    key="content"
                   />
                 </p>
               </div>
diff --git a/frontend/src/components/Blocks/Text1/View.jsx b/frontend/src/components/Blocks/Text1/View.jsx
index 0b8100c..be918b0 100644
--- a/frontend/src/components/Blocks/Text1/View.jsx
+++ b/frontend/src/components/Blocks/Text1/View.jsx
@@ -3,11 +3,10 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { defineMessages, useIntl } from 'react-intl';
 import { Grid } from 'semantic-ui-react';
-import redraft from 'redraft';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { UniversalLink } from '@plone/volto/components';
 import { Button, PresetWrapper, ShareButtons } from '@package/components';
-import config from '@plone/volto/registry';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 
 const messages = defineMessages({
   cta_title_default: {
@@ -63,11 +62,7 @@ const View = (props) => {
                     <ShareButtons showLabel={false} />
                   </div>
                 )}
-                {redraft(
-                  data.content,
-                  config.settings.richtextViewSettings.ToHTMLRenderers,
-                  config.settings.richtextViewSettings.ToHTMLOptions,
-                )}
+                <TextBlockView data={{ value: data.content }} />
               </div>
               {data.have_cta && (
                 <div className="block-text1-mobile-btn">{ctaButton}</div>
diff --git a/frontend/src/components/Blocks/Text5/Edit.jsx b/frontend/src/components/Blocks/Text5/Edit.jsx
index 919585d..8fc5b2e 100644
--- a/frontend/src/components/Blocks/Text5/Edit.jsx
+++ b/frontend/src/components/Blocks/Text5/Edit.jsx
@@ -3,7 +3,7 @@ import { defineMessages } from 'react-intl';
 import { isEqual } from 'lodash';
 import { Input, Grid } from 'semantic-ui-react';
 import { UniversalLink, SidebarPortal } from '@plone/volto/components';
-import { TextEditorWidget } from '@package/components/Widgets';
+import { DetachedTextBlockEditor } from '@plone/volto-slate/blocks/Text/DetachedTextBlockEditor';
 import { ShareButtons, PresetWrapper, Button } from '@package/components';
 import GalleryBody from './GalleryBody';
 import Sidebar from './Sidebar';
@@ -104,27 +104,18 @@ const Edit = (props) => {
           <Grid.Row columns={2}>
             <Grid.Column computer={6} tablet={12} mobile={12}>
               {/* Description */}
-
               {/* eslint-disable-next-line */}
               <div onClick={() => focusField('description')}>
-                <TextEditorWidget
-                  data={data}
-                  block={block}
-                  fieldName="description"
-                  onChangeBlock={(v) => {
-                    onChangeBlock(block, {
-                      ...data,
-                      description: v.description,
-                    });
-                  }}
-                  placeholder={intl.formatMessage(messages.subtitle)}
-                  prevFocus={'title'}
+                <DetachedTextBlockEditor
+                  data={{ value: data.description }}
+                  onChangeBlock={(block, { value }) =>
+                    onChange({ description: value }, 'description')
+                  }
                   selected={selected && focusOn === 'description'}
-                  setFocus={(f) => focusField(f)}
-                  showToolbar={true}
+                  readOnly={false}
+                  placeholder={intl.formatMessage(messages.subtitle)}
                 />
               </div>
-
               {/* Gallery */}
               <div className="block-text5-gallery">
                 <GalleryBody images={data?.images} />
@@ -136,34 +127,28 @@ const Edit = (props) => {
                   <Grid.Column>
                     {/* eslint-disable-next-line */}
                     <div onClick={() => focusField('text1')}>
-                      <TextEditorWidget
-                        data={data}
-                        fieldName="text1"
-                        block={block}
-                        onChangeBlock={(data) => onChange(data, 'text1')}
-                        placeholder={intl.formatMessage(messages.description)}
-                        prevFocus={'description'}
+                      <DetachedTextBlockEditor
+                        data={{ value: data.text1 }}
+                        onChangeBlock={(block, { value }) =>
+                          onChange({ text1: value }, 'text1')
+                        }
                         selected={selected && focusOn === 'text1'}
-                        setFocus={(f) => focusField(f)}
-                        showToolbar={true}
-                        key="text1"
+                        readOnly={false}
+                        placeholder={intl.formatMessage(messages.description)}
                       />
                     </div>
                   </Grid.Column>
                   <Grid.Column>
                     {/* eslint-disable-next-line */}
                     <div onClick={() => focusField('text2')}>
-                      <TextEditorWidget
-                        data={data}
-                        fieldName="text2"
-                        block={block}
-                        onChangeBlock={(data) => onChange(data, 'text2')}
-                        placeholder={intl.formatMessage(messages.description)}
-                        prevFocus={'text1'}
+                      <DetachedTextBlockEditor
+                        data={{ value: data.text2 }}
+                        onChangeBlock={(block, { value }) =>
+                          onChange({ text2: value }, 'text2')
+                        }
                         selected={selected && focusOn === 'text2'}
-                        setFocus={(f) => focusField(f)}
-                        showToolbar={true}
-                        key="text2"
+                        readOnly={false}
+                        placeholder={intl.formatMessage(messages.description)}
                       />
                     </div>
                   </Grid.Column>
@@ -176,18 +161,14 @@ const Edit = (props) => {
               <div className="block-text5-body">
                 {/* eslint-disable-next-line */}
                 <div onClick={() => focusField('content')}>
-                  <TextEditorWidget
-                    data={data}
-                    fieldName="content"
+                  <DetachedTextBlockEditor
+                    data={{ value: data.content }}
+                    onChangeBlock={(block, { value }) =>
+                      onChange({ content: value }, 'content')
+                    }
                     selected={selected && focusOn === 'content'}
-                    block={block}
-                    onChangeBlock={(data) => onChange(data, 'content')}
+                    readOnly={false}
                     placeholder={props.intl.formatMessage(messages.description)}
-                    prevFocus="text2"
-                    setFocus={(f) => focusField(f)}
-                    showToolbar={true}
-                    key="content"
-                    disableMoveToNearest={true}
                   />
                 </div>
                 {data.has_cta && (
diff --git a/frontend/src/components/Blocks/Text5/View.jsx b/frontend/src/components/Blocks/Text5/View.jsx
index a411d0a..e495110 100644
--- a/frontend/src/components/Blocks/Text5/View.jsx
+++ b/frontend/src/components/Blocks/Text5/View.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { defineMessages } from 'react-intl';
 import PropTypes from 'prop-types';
-import redraft from 'redraft';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
 import { Grid } from 'semantic-ui-react';
@@ -9,7 +8,7 @@ import { UniversalLink } from '@plone/volto/components';
 import { ShareButtons, PresetWrapper, Button } from '@package/components';
 import GalleryBody from './GalleryBody';
 import { flattenToAppURL } from '@plone/volto/helpers';
-import config from '@plone/volto/registry';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 
 const messages = defineMessages({
   cta_title_default: {
@@ -34,13 +33,8 @@ const View = (props) => {
           <Grid.Row columns={2}>
             <Grid.Column computer={6} tablet={12} mobile={12}>
               <div className="description">
-                {redraft(
-                  data.description,
-                  config.settings.richtextViewSettings.ToHTMLRenderers,
-                  config.settings.richtextViewSettings.ToHTMLOptions,
-                )}
+                <TextBlockView data={{ value: data.description }} />
               </div>
-
               {/* Gallery o singola immagine */}
               <div className="block-text5-gallery">
                 <GalleryBody images={data?.images} />
@@ -50,18 +44,10 @@ const View = (props) => {
                   {/* blocchi sotto alla gallery */}
                   <Grid.Row columns={2}>
                     <Grid.Column>
-                      {redraft(
-                        data.text1,
-                        config.settings.richtextViewSettings.ToHTMLRenderers,
-                        config.settings.richtextViewSettings.ToHTMLOptions,
-                      )}
+                      <TextBlockView data={{ value: data.text1 }} />
                     </Grid.Column>
                     <Grid.Column>
-                      {redraft(
-                        data.text2,
-                        config.settings.richtextViewSettings.ToHTMLRenderers,
-                        config.settings.richtextViewSettings.ToHTMLOptions,
-                      )}
+                      <TextBlockView data={{ value: data.text2 }} />
                     </Grid.Column>
                   </Grid.Row>
                 </Grid>
@@ -71,11 +57,7 @@ const View = (props) => {
             <Grid.Column computer={6} tablet={12} mobile={12}>
               <div className="block-text5-body">
                 <div className="content">
-                  {redraft(
-                    data.content,
-                    config.settings.richtextViewSettings.ToHTMLRenderers,
-                    config.settings.richtextViewSettings.ToHTMLOptions,
-                  )}
+                  <TextBlockView data={{ value: data.content }} />
                 </div>
                 {data.has_cta && (
                   <div className="block-text5-button">
diff --git a/frontend/src/components/Blocks/Text6/Edit.jsx b/frontend/src/components/Blocks/Text6/Edit.jsx
index 55385af..c74bc27 100644
--- a/frontend/src/components/Blocks/Text6/Edit.jsx
+++ b/frontend/src/components/Blocks/Text6/Edit.jsx
@@ -6,7 +6,7 @@ import { isEqual } from 'lodash';
 import { Input } from 'semantic-ui-react';
 import { SidebarPortal, UniversalLink } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
-import { TextEditorWidget } from '@package/components/Widgets';
+import { DetachedTextBlockEditor } from '@plone/volto-slate/blocks/Text/DetachedTextBlockEditor';
 import { Button, ShareButtons, PresetWrapper } from '@package/components';
 
 import Sidebar from './Sidebar';
@@ -109,17 +109,14 @@ const Edit = (props) => {
               e.stopPropagation();
             }}
           >
-            <TextEditorWidget
-              data={data}
-              fieldName="content"
+            <DetachedTextBlockEditor
+              data={{ value: data.content }}
+              onChangeBlock={(block, { value }) =>
+                onChange({ content: value }, 'content')
+              }
               selected={selected && focusOn === 'content'}
-              block={block}
-              onChangeBlock={(data) => onChange(data, 'content')}
+              readOnly={false}
               placeholder={intl.formatMessage(messages.textPlaceholder)}
-              prevFocus="title"
-              setFocus={(f) => focusField(f)}
-              showToolbar={true}
-              key="content"
             />
           </p>
         </div>
diff --git a/frontend/src/components/Blocks/Text6/View.jsx b/frontend/src/components/Blocks/Text6/View.jsx
index a06f948..ec819b3 100644
--- a/frontend/src/components/Blocks/Text6/View.jsx
+++ b/frontend/src/components/Blocks/Text6/View.jsx
@@ -1,12 +1,11 @@
 import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import redraft from 'redraft';
 import { defineMessages, useIntl } from 'react-intl';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { UniversalLink } from '@plone/volto/components';
 import { PresetWrapper, ShareButtons, Button } from '@package/components';
-import config from '@plone/volto/registry';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 
 const messages = defineMessages({
   cta_title_default: {
@@ -20,12 +19,6 @@ const View = (props) => {
   const { data } = props;
   let href = data.link_to?.[0]?.['@id'];
 
-  const checkHasContent = (content) => {
-    if (content) {
-      let blocks = content.blocks.filter((block) => block?.text !== '');
-      return blocks.length > 0 ? true : false;
-    }
-  };
   return (
     <PresetWrapper
       {...props.data}
@@ -54,13 +47,9 @@ const View = (props) => {
           </div>
         )}
 
-        {checkHasContent(data.content) && (
+        {data.content && (
           <div className="content">
-            {redraft(
-              data.content,
-              config.settings.richtextViewSettings.ToHTMLRenderers,
-              config.settings.richtextViewSettings.ToHTMLOptions,
-            )}
+            <TextBlockView data={{ value: data.content }} />
           </div>
         )}
         {data.have_cta && (
diff --git a/frontend/src/components/Blocks/Text7/Edit.jsx b/frontend/src/components/Blocks/Text7/Edit.jsx
index 4021617..e10e64c 100644
--- a/frontend/src/components/Blocks/Text7/Edit.jsx
+++ b/frontend/src/components/Blocks/Text7/Edit.jsx
@@ -7,9 +7,10 @@ import { Input, Button, Message, Grid, Image } from 'semantic-ui-react';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { SidebarPortal, Icon, UniversalLink } from '@plone/volto/components';
 import clearSVG from '@plone/volto/icons/clear.svg';
+import { DetachedTextBlockEditor } from '@plone/volto-slate/blocks/Text/DetachedTextBlockEditor';
 
 import { PresetWrapper, ShareButtons } from '@package/components';
-import { ImageWidget, TextEditorWidget } from '@package/components/Widgets';
+import { ImageWidget } from '@package/components/Widgets';
 import Sidebar from './Sidebar';
 
 const messages = defineMessages({
@@ -160,18 +161,14 @@ const Edit = (props) => {
                 />
                 {/* eslint-disable-next-line */}
                 <div onClick={() => focusField('content')}>
-                  <TextEditorWidget
-                    data={data}
-                    fieldName="content"
+                  <DetachedTextBlockEditor
+                    data={{ value: data.content }}
+                    onChangeBlock={(block, { value }) =>
+                      onChange({ content: value }, 'content')
+                    }
                     selected={selected && focusOn === 'content'}
-                    block={block}
-                    onChangeBlock={(data) => onChange(data, 'content')}
+                    readOnly={false}
                     placeholder={props.intl.formatMessage(messages.description)}
-                    prevFocus="title"
-                    setFocus={(f) => focusField(f)}
-                    showToolbar={true}
-                    key="content"
-                    disableMoveToNearest={true}
                   />
                 </div>
                 {data.has_cta && (
diff --git a/frontend/src/components/Blocks/Text7/View.jsx b/frontend/src/components/Blocks/Text7/View.jsx
index c7d6d98..3332b12 100644
--- a/frontend/src/components/Blocks/Text7/View.jsx
+++ b/frontend/src/components/Blocks/Text7/View.jsx
@@ -1,14 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import redraft from 'redraft';
 import { Grid, Image } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { UniversalLink } from '@plone/volto/components';
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 
 import { PresetWrapper, ShareButtons, Button } from '@package/components';
-import config from '@plone/volto/registry';
 
 const messages = defineMessages({
   cta_title_default: {
@@ -55,11 +54,7 @@ const View = (props) => {
             <div className="block-text7-body">
               {data.title && <h3 className="title">{data.title}</h3>}
               <div className="content">
-                {redraft(
-                  data.content,
-                  config.settings.richtextViewSettings.ToHTMLRenderers,
-                  config.settings.richtextViewSettings.ToHTMLOptions,
-                )}
+                <TextBlockView data={{ value: data.content }} />
               </div>
               {data.has_cta && (
                 <div className="buttonBottom">
diff --git a/frontend/src/customizations/volto/components/manage/Blocks/HeroImageLeft/View.jsx b/frontend/src/customizations/volto/components/manage/Blocks/HeroImageLeft/View.jsx
index 0860d1a..9be232b 100644
--- a/frontend/src/customizations/volto/components/manage/Blocks/HeroImageLeft/View.jsx
+++ b/frontend/src/customizations/volto/components/manage/Blocks/HeroImageLeft/View.jsx
@@ -9,10 +9,9 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import redraft from 'redraft';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { LinkMore } from '@plone/volto/components';
-import config from '@plone/volto/registry';
+
 /**
  * View image block class.
  * @class View
@@ -35,11 +34,11 @@ const View = ({ data }) => (
         <div className="hero-text">
           {data.title && <h2>{data.title}</h2>}
           <p>
-            {redraft(
+            {/* {redraft(
               data.description,
               config.settings.richtextViewSettings.ToHTMLRenderers,
               config.settings.richtextViewSettings.ToHTMLOptions,
-            )}
+            )} */}
           </p>
         </div>
         <LinkMore data={data} />