diff --git a/src/admin/components/forms/field-types/RichText/RichText.tsx b/src/admin/components/forms/field-types/RichText/RichText.tsx index 2bc11ee2bb..c1a23d0eb6 100644 --- a/src/admin/components/forms/field-types/RichText/RichText.tsx +++ b/src/admin/components/forms/field-types/RichText/RichText.tsx @@ -1,7 +1,7 @@ import React, { useState, useCallback, useMemo, useEffect } from 'react'; import isHotkey from 'is-hotkey'; import { Editable, withReact, Slate } from 'slate-react'; -import { createEditor } from 'slate'; +import { createEditor, Transforms } from 'slate'; import { withHistory } from 'slate-history'; import { richText } from '../../../../../fields/validations'; import useFieldType from '../../useFieldType'; @@ -236,9 +236,15 @@ const RichText: React.FC = (props) => { readOnly={readOnly} onBlur={onBlur} onKeyDown={(event) => { - if (event.key === 'Enter' && event.shiftKey) { - event.preventDefault(); - editor.insertText('\n'); + if (event.key === 'Enter') { + if (event.shiftKey) { + event.preventDefault(); + editor.insertText('\n'); + } else { + setTimeout(() => { + Transforms.setNodes(editor, { type: 'p' }); + }, 0); + } } Object.keys(hotkeys).forEach((hotkey) => { diff --git a/src/admin/components/forms/field-types/RichText/elements/toggle.tsx b/src/admin/components/forms/field-types/RichText/elements/toggle.tsx index e2771faa4a..07278e5ce5 100644 --- a/src/admin/components/forms/field-types/RichText/elements/toggle.tsx +++ b/src/admin/components/forms/field-types/RichText/elements/toggle.tsx @@ -1,4 +1,5 @@ import { Transforms } from 'slate'; +import { ReactEditor } from 'slate-react'; import isElementActive from './isActive'; import listTypes from './listTypes'; @@ -19,12 +20,18 @@ const toggleElement = (editor, format) => { type = 'li'; } + if (editor.blurSelection) { + Transforms.select(editor, editor.blurSelection); + } + Transforms.setNodes(editor, { type }); if (!isActive && isList) { const block = { type: format, children: [] }; Transforms.wrapNodes(editor, block); } + + ReactEditor.focus(editor); }; export default toggleElement; diff --git a/src/admin/components/forms/field-types/RichText/index.scss b/src/admin/components/forms/field-types/RichText/index.scss index b82ae7859e..b49eef9bb5 100644 --- a/src/admin/components/forms/field-types/RichText/index.scss +++ b/src/admin/components/forms/field-types/RichText/index.scss @@ -19,7 +19,7 @@ &__editor { min-height: base(10); - span[data-slate-node=element] { + [data-slate-node=element] { margin-bottom: base(0.25); }