diff --git a/packages/volto-slate/src/widgets/HtmlSlateWidget.jsx b/packages/volto-slate/src/widgets/HtmlSlateWidget.jsx index cdd37527ea..226d17e4e6 100644 --- a/packages/volto-slate/src/widgets/HtmlSlateWidget.jsx +++ b/packages/volto-slate/src/widgets/HtmlSlateWidget.jsx @@ -12,6 +12,7 @@ import { defineMessages, injectIntl } from 'react-intl'; import { FormFieldWrapper } from '@plone/volto/components/manage/Widgets'; import SlateEditor from '@plone/volto-slate/editor/SlateEditor'; import { serializeNodes } from '@plone/volto-slate/editor/render'; +import { handleKeyDetached } from '@plone/volto-slate/blocks/Text/keyboard'; import { makeEditor } from '@plone/volto-slate/utils/editor'; import deserialize from '@plone/volto-slate/editor/deserialize'; @@ -19,6 +20,8 @@ import { createEmptyParagraph, normalizeExternalData, } from '@plone/volto-slate/utils'; +import config from '@plone/volto/registry'; + import { ErrorBoundary } from './ErrorBoundary'; import './style.css'; @@ -44,6 +47,8 @@ const HtmlSlateWidget = (props) => { intl, } = props; + const { slateWidgetExtensions } = config.settings.slate; + const [selected, setSelected] = React.useState(focus); const editor = React.useMemo(() => makeEditor(), []); @@ -127,7 +132,10 @@ const HtmlSlateWidget = (props) => { block={block} selected={selected} properties={properties} + extensions={slateWidgetExtensions} + onKeyDown={handleKeyDetached} placeholder={placeholder} + editableProps={{ 'aria-multiline': 'true' }} />