From a9d5e4ae235f34f433730bee9fe4addf00cde11b Mon Sep 17 00:00:00 2001 From: Giulia Ghisini Date: Mon, 17 Jun 2024 12:44:33 +0200 Subject: [PATCH 1/3] chfeat: handle breakList in detached TextBlockEditor --- .../blocks/Text/DetachedTextBlockEditor.jsx | 13 +++++++- .../src/blocks/Text/extensions/breakList.js | 33 ++++++++++++++----- .../src/blocks/Text/extensions/insertBreak.js | 2 +- 3 files changed, 37 insertions(+), 11 deletions(-) diff --git a/packages/volto-slate/src/blocks/Text/DetachedTextBlockEditor.jsx b/packages/volto-slate/src/blocks/Text/DetachedTextBlockEditor.jsx index 50f45bf2ad..c9f5f34054 100644 --- a/packages/volto-slate/src/blocks/Text/DetachedTextBlockEditor.jsx +++ b/packages/volto-slate/src/blocks/Text/DetachedTextBlockEditor.jsx @@ -4,6 +4,7 @@ import { useInView } from 'react-intersection-observer'; import { SlateEditor } from '@plone/volto-slate/editor'; import { serializeNodesToText } from '@plone/volto-slate/editor/render'; import { handleKeyDetached } from './keyboard'; +import config from '@plone/volto/registry'; const DEBUG = false; @@ -29,6 +30,7 @@ export const DetachedTextBlockEditor = (props) => { const { value } = data; const intl = useIntl(); + const { textblockExtensions } = config.settings.slate; const placeholder = data.placeholder || formTitle || intl.formatMessage(messages.text); let instructions = data?.instructions?.data || data?.instructions; @@ -41,13 +43,22 @@ export const DetachedTextBlockEditor = (props) => { rootMargin: '0px 0px 200px 0px', }); + const withBlockProperties = React.useCallback( + (editor) => { + editor.getBlockProps = () => props; + return editor; + }, + [props], + ); + return (
{ const { slate } = config.settings; const { anchor } = editor.selection; + const blockProps = editor.getBlockProps(); + const detached = blockProps.detached; const ref = Editor.rangeRef(editor, editor.selection, { affinity: 'inward', @@ -65,8 +67,7 @@ export const breakList = (editor) => { return; // applies default behaviour, as defined in insertBreak.js extension } - if (parent) { - const blockProps = editor.getBlockProps(); + if (parent && !detached) { const { data } = blockProps; // Don't add new block if not allowed if (data?.disableNewBlocks) { @@ -77,22 +78,36 @@ export const breakList = (editor) => { Editor.deleteBackward(editor, { unit: 'line' }); // also account for empty nodes [{text: ''}] if (Editor.isEmpty(editor, parent)) { - createAndSelectNewBlockAfter(editor, [createEmptyParagraph()]); - Transforms.removeNodes(editor, { at: ref.current }); + if (detached) { + Transforms.removeNodes(editor, { at: ref.current }); + + Transforms.insertNodes(editor, createEmptyParagraph(), { + at: [editor.children.length], + }); + Transforms.select(editor, Editor.end(editor, [])); + } else { + createAndSelectNewBlockAfter(editor, [createEmptyParagraph()]); + Transforms.removeNodes(editor, { at: ref.current }); + } return true; } Transforms.removeNodes(editor, { at: ref.current }); if (isCursorAtBlockEnd(editor)) { - createAndSelectNewBlockAfter(editor, [createEmptyParagraph()]); + if (detached) { + Editor.insertNode(editor, createEmptyParagraph()); + } else { + createAndSelectNewBlockAfter(editor, [createEmptyParagraph()]); + } return true; } - const [top, bottom] = splitEditorInTwoFragments(editor, ref.current); - setEditorContent(editor, top); - createAndSelectNewBlockAfter(editor, bottom); - + if (!detached) { + const [top, bottom] = splitEditorInTwoFragments(editor, ref.current); + setEditorContent(editor, top); + createAndSelectNewBlockAfter(editor, bottom); + } return true; }; diff --git a/packages/volto-slate/src/blocks/Text/extensions/insertBreak.js b/packages/volto-slate/src/blocks/Text/extensions/insertBreak.js index d767c30ab6..c7ffae1a23 100644 --- a/packages/volto-slate/src/blocks/Text/extensions/insertBreak.js +++ b/packages/volto-slate/src/blocks/Text/extensions/insertBreak.js @@ -34,7 +34,7 @@ export const withSplitBlocksOnBreak = (editor) => { const { data } = blockProps; // Don't add new block if not allowed - if (data?.disableNewBlocks) { + if (data?.disableNewBlocks || blockProps.detached) { return insertBreak(); } From dfa211274582c78d7e19cec0cc338d069e6621d5 Mon Sep 17 00:00:00 2001 From: Giulia Ghisini Date: Mon, 17 Jun 2024 12:48:39 +0200 Subject: [PATCH 2/3] chchore: added news file --- packages/volto-slate/news/6106.feature | 1 + packages/volto/src/components/theme/Logo/Logo.jsx | 1 + 2 files changed, 2 insertions(+) create mode 100644 packages/volto-slate/news/6106.feature diff --git a/packages/volto-slate/news/6106.feature b/packages/volto-slate/news/6106.feature new file mode 100644 index 0000000000..bb9f440822 --- /dev/null +++ b/packages/volto-slate/news/6106.feature @@ -0,0 +1 @@ +Handle breakList in DetachedTextBlockEditor. @giuliaghisini \ No newline at end of file diff --git a/packages/volto/src/components/theme/Logo/Logo.jsx b/packages/volto/src/components/theme/Logo/Logo.jsx index d8eebd6e70..4581475522 100644 --- a/packages/volto/src/components/theme/Logo/Logo.jsx +++ b/packages/volto/src/components/theme/Logo/Logo.jsx @@ -27,6 +27,7 @@ const Logo = () => { const navroot = useSelector((state) => state.navroot.data); const dispatch = useDispatch(); const intl = useIntl(); + return <>; const messages = defineMessages({ home: { From 771280398a16690bec6f3beab29e8a3ffbd64b45 Mon Sep 17 00:00:00 2001 From: Giulia Ghisini <51911425+giuliaghisini@users.noreply.github.com> Date: Wed, 19 Jun 2024 10:43:20 +0200 Subject: [PATCH 3/3] fix: logo --- packages/volto/src/components/theme/Logo/Logo.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/volto/src/components/theme/Logo/Logo.jsx b/packages/volto/src/components/theme/Logo/Logo.jsx index 4581475522..d8eebd6e70 100644 --- a/packages/volto/src/components/theme/Logo/Logo.jsx +++ b/packages/volto/src/components/theme/Logo/Logo.jsx @@ -27,7 +27,6 @@ const Logo = () => { const navroot = useSelector((state) => state.navroot.data); const dispatch = useDispatch(); const intl = useIntl(); - return <>; const messages = defineMessages({ home: {