WIP WIP

plone · May 15, 2024 · 22d79b7 · 22d79b7
1 parent b438bdc
commit 22d79b7
Showing 1 changed file with 93 additions and 80 deletions.
diff --git a/packages/volto/src/components/manage/Blocks/Block/EditBlockWrapper.jsx b/packages/volto/src/components/manage/Blocks/Block/EditBlockWrapper.jsx
@@ -78,91 +78,104 @@ const EditBlockWrapper = (props) => {
  },
  });
 
+ let ref0 = React.useRef(null);
  let ref = React.useRef(null);
- let { dropProps, isDropTarget } = useDrop({
- ref,
- async onDrop(e) {
- let items = await Promise.all(
- e.items
- .filter((item) => item.kind === 'text' && item.types.has('block'))
- .map((item) => item.getText('block')),
- );
- const indexDraggable = properties.blocks_layout.items.indexOf(
- JSON.parse(items[0]).id,
- );
- let indexDroppable = properties.blocks_layout.items.indexOf(block);
- if (indexDroppable < indexDraggable) {
- indexDroppable += 1;
- }
- onMoveBlock(indexDraggable, indexDroppable);
- },
- });
 
- return (
+ let useDropHook = (ref) =>
+ useDrop({
+ ref,
+ async onDrop(e) {
+ let items = await Promise.all(
+ e.items
+ .filter((item) => item.kind === 'text' && item.types.has('block'))
+ .map((item) => item.getText('block')),
+ );
+ const indexDraggable = properties.blocks_layout.items.indexOf(
+ JSON.parse(items[0]).id,
+ );
+ let indexDroppable = properties.blocks_layout.items.indexOf(block);
+ if (indexDroppable < indexDraggable) {
+ indexDroppable += 1;
+ }
+ onMoveBlock(indexDraggable, indexDroppable);
+ },
+ });
+
+ const makeDropTarget = ({ dropProps, isDropTarget }, theRef) => (
  <div
- {...dragProps}
- {...styleMergedWithDragProps}
- // Right now, we can have the alignment information in the styles property or in the
- // block data root, we inject the classname here for having control over the whole
- // Block Edit wrapper
- className={cx(`block-editor-${data['@type']}`, classNames, {
- [data.align]: data.align,
- })}
- >
- <div style={{ position: 'relative' }}>
- <div
- style={{
- visibility: visible ? 'visible' : 'hidden',
- display: 'inline-block',
- }}
- className="drag handle wrapper"
- >
- <Icon name={dragSVG} size="18px" />
- </div>
- <div className={`ui drag block inner ${type}`}>
- {children}
- {selected && !required && editable && (
- <Button
- icon
- basic
- onClick={() => onDeleteBlock(block, true)}
- className="delete-button"
- aria-label={intl.formatMessage(messages.delete)}
- >
- <Icon name={trashSVG} size="18px" />
- </Button>
- )}
- {config.experimental.addBlockButton.enabled && showBlockChooser && (
- <BlockChooserButton
- data={data}
- block={block}
- onInsertBlock={(id, value) => {
- if (blockHasValue(data)) {
- onSelectBlock(onInsertBlock(id, value));
- } else {
- onChangeBlock(id, value);
- }
- }}
- onMutateBlock={onMutateBlock}
- allowedBlocks={allowedBlocks}
- blocksConfig={blocksConfig}
- size="24px"
- properties={properties}
- navRoot={navRoot}
- contentType={contentType}
- />
- )}
+ {...dropProps}
+ ref={theRef}
+ style={{
+ border: isDropTarget ? '1px solid blue' : '1px solid transparent',
+ height: '30px',
+ backgroundColor: 'paleturquoise',
+ }}
+ />
+ );
+
+ const DropTarget0 = () => makeDropTarget(useDropHook(ref0), ref0);
+ const DropTarget = () => makeDropTarget(useDropHook(ref), ref);
+
+ return (
+ <div>
+ <DropTarget0 />
+ <div
+ {...dragProps}
+ {...styleMergedWithDragProps}
+ // Right now, we can have the alignment information in the styles property or in the
+ // block data root, we inject the classname here for having control over the whole
+ // Block Edit wrapper
+ className={cx(`block-editor-${data['@type']}`, classNames, {
+ [data.align]: data.align,
+ })}
+ >
+ <div style={{ position: 'relative' }}>
+ <div
+ style={{
+ visibility: visible ? 'visible' : 'hidden',
+ display: 'inline-block',
+ }}
+ className="drag handle wrapper"
+ >
+ <Icon name={dragSVG} size="18px" />
+ </div>
+ <div className={`ui drag block inner ${type}`}>
+ {children}
+ {selected && !required && editable && (
+ <Button
+ icon
+ basic
+ onClick={() => onDeleteBlock(block, true)}
+ className="delete-button"
+ aria-label={intl.formatMessage(messages.delete)}
+ >
+ <Icon name={trashSVG} size="18px" />
+ </Button>
+ )}
+ {config.experimental.addBlockButton.enabled && showBlockChooser && (
+ <BlockChooserButton
+ data={data}
+ block={block}
+ onInsertBlock={(id, value) => {
+ if (blockHasValue(data)) {
+ onSelectBlock(onInsertBlock(id, value));
+ } else {
+ onChangeBlock(id, value);
+ }
+ }}
+ onMutateBlock={onMutateBlock}
+ allowedBlocks={allowedBlocks}
+ blocksConfig={blocksConfig}
+ size="24px"
+ properties={properties}
+ navRoot={navRoot}
+ contentType={contentType}
+ />
+ )}
+ </div>
  </div>
+ <DropTarget />
  </div>
- <div
- {...dropProps}
- ref={ref}
- style={{
- border: isDropTarget ? '1px solid blue' : '1px solid transparent',
- height: '30px',
- backgroundColor: 'paleturquoise',
- }}
- />
  </div>
  );
 };