@plone/volto 18.0.0-alpha.43 → 18.0.0-alpha.44

package/dist/server/assets/BlocksForm-DW5cAojg.js

@@ -0,0 +1,752 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import React__default, { Component, useEffect, lazy, useState } from "react";
+import { useIntl, injectIntl, defineMessages } from "react-intl";
+import { cloneDeep, map } from "lodash-es";
+import PropTypes from "prop-types";
+import { compose } from "redux";
+import { connect, useDispatch } from "react-redux";
+import cx from "classnames";
+import { s as setSidebarTab } from "./sidebar-BGq8uRxG.js";
+import { $ as $149c1bd638913645$export$2e2bcd8739ae039, cR as DefaultBlockView, cS as SidebarPortal, cT as BlockDataForm, cU as Schema, cV as applyBlockDefaults, X as withObjectBrowser, cW as setUIState, cX as buildStyleClassNamesFromData, cY as buildStyleObjectFromData, I as Icon, b6 as deleteSVG, cZ as BlockChooserButton, c_ as blockHasValue, i as getBlocksFieldname, c$ as applyBlockInitialValue, d0 as getBlocks, r as useDetectClickOutside, d1 as deleteBlock, d2 as getBlocksHierarchy, d3 as moveBlock, d4 as previousBlockId, d5 as nextBlockId, d6 as mutateBlock, d7 as insertBlock, d8 as addBlock, d9 as changeBlock, da as moveBlockEnhanced, j as getBlocksLayoutFieldname } from "../entry-server.js";
+import { d as dragSVG } from "./drag-DY7wFRIh.js";
+import { Button } from "semantic-ui-react";
+import includes from "lodash-es/includes.js";
+import isBoolean from "lodash-es/isBoolean.js";
+import { createPortal } from "react-dom";
+import "moment";
+import "react-router";
+import "react-router-hash-link";
+import "tlds";
+import "prepend-http";
+import "react-router-dom";
+import "lodash-move";
+import "react-dom/server";
+import "react-transition-group";
+import "react-toastify";
+import "promise-file-reader";
+import "uuid";
+import "pretty-bytes";
+import "react-side-effect";
+import "github-slugger";
+import "slate";
+import "hoist-non-react-statics";
+import "query-string";
+import "slate-react";
+import "prettier/standalone";
+import "prettier/parser-html";
+import "prismjs/components/prism-core.js";
+import "react-animate-height";
+import "react-popper";
+import "react-sortable-hoc";
+import "react-dates/initialize.js";
+import "react-anchor-link-smooth-scroll";
+import "jwt-decode";
+import "react-router-config";
+import "react-fast-compare";
+import "object-assign";
+import "lodash-es/split.js";
+import "lodash-es/join.js";
+import "lodash-es/trim.js";
+import "react-cookie";
+import "react-intl-redux";
+import "universal-cookie";
+import "slate-hyperscript";
+import "is-hotkey";
+import "react-dropzone";
+import "react-intersection-observer";
+import "is-url";
+import "lodash-es/isUndefined.js";
+import "lodash-es/isString.js";
+import "redux-mock-store";
+import "serialize-javascript";
+import "superagent";
+import "connected-react-router";
+import "react-beautiful-dnd";
+import "detect-browser";
+import "locale";
+import "history";
+import "redux-thunk";
+import "redux-localstorage-simple";
+import "debug";
+import "express";
+import "http-proxy-middleware";
+const DefaultBlockEdit = (props) => {
+  var _a, _b;
+  const { blocksConfig = $149c1bd638913645$export$2e2bcd8739ae039.blocks.blocksConfig } = props;
+  const { data, onChangeBlock, block, selected, navRoot, contentType } = props;
+  const intl = useIntl();
+  const blockSchema = (_a = blocksConfig == null ? void 0 : blocksConfig[data["@type"]]) == null ? void 0 : _a.blockSchema;
+  const schema = typeof blockSchema === "function" ? blockSchema({ ...props, intl }) : blockSchema;
+  const BlockView = ((_b = blocksConfig == null ? void 0 : blocksConfig[data["@type"]]) == null ? void 0 : _b["view"]) || DefaultBlockView;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(BlockView, { ...props }),
+    schema ? /* @__PURE__ */ jsx(SidebarPortal, { selected, children: /* @__PURE__ */ jsx(
+      BlockDataForm,
+      {
+        block,
+        schema,
+        title: schema.title,
+        onChangeField: (id, value) => {
+          onChangeBlock(block, {
+            ...data,
+            [id]: value
+          });
+        },
+        formData: data,
+        navRoot,
+        contentType
+      }
+    ) }) : ""
+  ] });
+};
+const Settings = ({
+  data,
+  block,
+  onChangeBlock,
+  schema,
+  navRoot,
+  contentType
+}) => {
+  return /* @__PURE__ */ jsx(
+    BlockDataForm,
+    {
+      schema,
+      title: schema.title,
+      onChangeField: (id, value) => {
+        onChangeBlock(block, {
+          ...data,
+          [id]: value
+        });
+      },
+      onChangeBlock,
+      formData: data,
+      applySchemaEnhancers: false,
+      navRoot,
+      contentType
+    }
+  );
+};
+Settings.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+  block: PropTypes.string.isRequired,
+  onChangeBlock: PropTypes.func.isRequired,
+  schema: PropTypes.objectOf(PropTypes.any).isRequired
+};
+const BlockSettingsSidebar = injectIntl(Settings);
+const messages$1 = defineMessages({
+  unknownBlock: {
+    id: "Unknown Block",
+    defaultMessage: "Unknown Block {block}"
+  }
+});
+class Edit extends Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "blockNode", React__default.createRef());
+  }
+  componentDidMount() {
+    var _a, _b;
+    const { type } = this.props;
+    const { blocksConfig = $149c1bd638913645$export$2e2bcd8739ae039.blocks.blocksConfig } = this.props;
+    const blockHasOwnFocusManagement = ((_a = blocksConfig == null ? void 0 : blocksConfig[type]) == null ? void 0 : _a["blockHasOwnFocusManagement"]) || null;
+    if (!blockHasOwnFocusManagement && this.props.selected && this.blockNode.current) {
+      this.blockNode.current.focus();
+    }
+    const tab = this.props.manage ? 1 : ((_b = blocksConfig == null ? void 0 : blocksConfig[type]) == null ? void 0 : _b.sidebarTab) || 0;
+    if (this.props.selected && this.props.editable && this.props.sidebarTab !== 2) {
+      this.props.setSidebarTab(tab);
+    }
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    var _a, _b;
+    const { blocksConfig = $149c1bd638913645$export$2e2bcd8739ae039.blocks.blocksConfig } = this.props;
+    const { selected, type } = this.props;
+    const blockHasOwnFocusManagement = ((_a = blocksConfig == null ? void 0 : blocksConfig[type]) == null ? void 0 : _a["blockHasOwnFocusManagement"]) || null;
+    if (!blockHasOwnFocusManagement && nextProps.selected && selected !== nextProps.selected && this.blockNode.current) {
+      this.blockNode.current.focus();
+    }
+    if ((!this.props.selected && nextProps.selected || type !== nextProps.type) && this.props.editable) {
+      const tab = this.props.manage ? 1 : ((_b = blocksConfig == null ? void 0 : blocksConfig[nextProps.type]) == null ? void 0 : _b.sidebarTab) || 0;
+      if (this.props.sidebarTab !== 2) {
+        this.props.setSidebarTab(tab);
+      }
+    }
+  }
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    var _a, _b, _c, _d, _e, _f;
+    const { blocksConfig = $149c1bd638913645$export$2e2bcd8739ae039.blocks.blocksConfig } = this.props;
+    const { editable, type } = this.props;
+    const disableNewBlocks = (_a = this.props.data) == null ? void 0 : _a.disableNewBlocks;
+    let Block = ((_b = blocksConfig == null ? void 0 : blocksConfig[type]) == null ? void 0 : _b["edit"]) || DefaultBlockEdit;
+    if (((_c = this.props.data) == null ? void 0 : _c.readOnly) || !editable && !$149c1bd638913645$export$2e2bcd8739ae039.blocks.showEditBlocksInBabelView) {
+      Block = ((_d = blocksConfig == null ? void 0 : blocksConfig[type]) == null ? void 0 : _d["view"]) || DefaultBlockView;
+    }
+    const schema = ((_e = blocksConfig == null ? void 0 : blocksConfig[type]) == null ? void 0 : _e["schema"]) || Schema;
+    const blockHasOwnFocusManagement = ((_f = blocksConfig == null ? void 0 : blocksConfig[type]) == null ? void 0 : _f["blockHasOwnFocusManagement"]) || null;
+    return /* @__PURE__ */ jsx(Fragment, { children: Block !== null ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "presentation",
+        onMouseEnter: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          if (this.props.hovered !== this.props.id) {
+            this.props.setUIState({ hovered: this.props.id });
+          }
+        },
+        onFocus: (e) => {
+        },
+        onMouseLeave: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          this.props.setUIState({ hovered: null });
+        },
+        onClick: (e) => {
+          const isMultipleSelection = e.shiftKey || e.ctrlKey || e.metaKey;
+          !this.props.selected && this.props.onSelectBlock(
+            this.props.id,
+            this.props.selected ? false : isMultipleSelection,
+            e
+          );
+        },
+        onKeyDown: !(blockHasOwnFocusManagement || disableNewBlocks) ? (e) => this.props.handleKeyDown(
+          e,
+          this.props.index,
+          this.props.id,
+          this.blockNode.current
+        ) : null,
+        className: cx("block", type, this.props.data.variation, {
+          selected: this.props.selected || this.props.multiSelected,
+          multiSelected: this.props.multiSelected,
+          hovered: this.props.hovered === this.props.id
+        }),
+        style: { outline: "none" },
+        ref: this.blockNode,
+        tabIndex: !blockHasOwnFocusManagement ? -1 : null,
+        children: [
+          /* @__PURE__ */ jsx(
+            Block,
+            {
+              ...this.props,
+              blockNode: this.blockNode,
+              data: applyBlockDefaults(this.props)
+            }
+          ),
+          this.props.manage && /* @__PURE__ */ jsx(
+            SidebarPortal,
+            {
+              selected: this.props.selected,
+              tab: "sidebar-settings",
+              children: /* @__PURE__ */ jsx(BlockSettingsSidebar, { ...this.props, schema })
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "presentation",
+        onMouseEnter: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          this.props.setUIState({ hovered: this.props.id });
+        },
+        onFocus: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          this.props.setUIState({ hovered: this.props.id });
+        },
+        onMouseLeave: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          this.props.setUIState({ hovered: null });
+        },
+        onClick: () => !this.props.selected && this.props.onSelectBlock(this.props.id),
+        onKeyDown: !(blockHasOwnFocusManagement || disableNewBlocks) ? (e) => this.props.handleKeyDown(
+          e,
+          this.props.index,
+          this.props.id,
+          this.blockNode.current
+        ) : null,
+        className: cx(`block ${type}`, { selected: this.props.selected }),
+        style: { outline: "none" },
+        ref: this.blockNode,
+        tabIndex: -1,
+        children: this.props.intl.formatMessage(messages$1.unknownBlock, {
+          block: type
+        })
+      }
+    ) });
+  }
+}
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+__publicField(Edit, "propTypes", {
+  type: PropTypes.string.isRequired,
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+  // properties is mapped to formData, so it's not connected to changes of the object
+  properties: PropTypes.objectOf(PropTypes.any).isRequired,
+  selected: PropTypes.bool.isRequired,
+  multiSelected: PropTypes.bool,
+  index: PropTypes.number.isRequired,
+  id: PropTypes.string.isRequired,
+  manage: PropTypes.bool,
+  onMoveBlock: PropTypes.func.isRequired,
+  onDeleteBlock: PropTypes.func.isRequired,
+  editable: PropTypes.bool,
+  pathname: PropTypes.string.isRequired
+});
+/**
+ * Default properties.
+ * @property {Object} defaultProps Default properties.
+ * @static
+ */
+__publicField(Edit, "defaultProps", {
+  manage: false,
+  editable: true
+});
+const EditBlock = compose(
+  injectIntl,
+  withObjectBrowser,
+  connect(
+    (state, props) => {
+      var _a, _b;
+      return {
+        hovered: ((_a = state.form) == null ? void 0 : _a.ui.hovered) || null,
+        sidebarTab: (_b = state.sidebar) == null ? void 0 : _b.tab
+      };
+    },
+    { setSidebarTab, setUIState }
+  )
+)(Edit);
+const messages = defineMessages({
+  delete: {
+    id: "delete",
+    defaultMessage: "delete"
+  }
+});
+const EditBlockWrapper = (props) => {
+  const hideHandler = (data2) => {
+    return !!data2.fixed || !$149c1bd638913645$export$2e2bcd8739ae039.experimental.addBlockButton.enabled && !(blockHasValue(data2) && props.blockProps.editable);
+  };
+  const { intl, blockProps, draginfo, children } = props;
+  const {
+    allowedBlocks,
+    showRestricted,
+    block,
+    blocksConfig,
+    selected,
+    type,
+    onChangeBlock,
+    onDeleteBlock,
+    onInsertBlock,
+    onSelectBlock,
+    onMutateBlock,
+    data,
+    editable,
+    properties,
+    showBlockChooser,
+    navRoot,
+    contentType
+  } = blockProps;
+  const visible = selected && !hideHandler(data);
+  const required = isBoolean(data.required) ? data.required : includes($149c1bd638913645$export$2e2bcd8739ae039.blocks.requiredBlocks, type);
+  const classNames = buildStyleClassNamesFromData(data.styles);
+  const style = buildStyleObjectFromData(data.styles);
+  const styleMergedWithDragProps = {
+    ...draginfo.draggableProps,
+    style: { ...style, ...draginfo.draggableProps.style }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: draginfo.innerRef,
+      ...styleMergedWithDragProps,
+      className: cx(`block-editor-${data["@type"]}`, classNames, {
+        [data.align]: data.align
+      }),
+      children: /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              visibility: visible ? "visible" : "hidden",
+              display: "inline-block"
+            },
+            ...draginfo.dragHandleProps,
+            className: "drag handle wrapper",
+            children: /* @__PURE__ */ jsx(Icon, { name: dragSVG, size: "18px" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: `ui drag block inner ${type}`, children: [
+          children,
+          selected && !required && editable && /* @__PURE__ */ jsx(
+            Button,
+            {
+              icon: true,
+              basic: true,
+              onClick: () => onDeleteBlock(block, true),
+              className: "delete-button",
+              "aria-label": intl.formatMessage(messages.delete),
+              children: /* @__PURE__ */ jsx(Icon, { name: deleteSVG, size: "18px" })
+            }
+          ),
+          $149c1bd638913645$export$2e2bcd8739ae039.experimental.addBlockButton.enabled && showBlockChooser && /* @__PURE__ */ jsx(
+            BlockChooserButton,
+            {
+              data,
+              block,
+              onInsertBlock: (id, value) => {
+                if (blockHasValue(data)) {
+                  onSelectBlock(onInsertBlock(id, value));
+                } else {
+                  const blocksFieldname = getBlocksFieldname(properties);
+                  const newFormData = applyBlockInitialValue({
+                    id,
+                    value,
+                    blocksConfig,
+                    formData: {
+                      ...properties,
+                      [blocksFieldname]: {
+                        ...properties[blocksFieldname],
+                        [id]: value || null
+                      }
+                    }
+                  });
+                  const newValue = newFormData[blocksFieldname][id];
+                  onChangeBlock(id, newValue);
+                }
+              },
+              onMutateBlock,
+              allowedBlocks,
+              showRestricted,
+              blocksConfig,
+              size: "24px",
+              properties,
+              navRoot,
+              contentType
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+const EditBlockWrapper$1 = injectIntl(EditBlockWrapper);
+function useEvent(event, handler) {
+  useEffect(() => {
+    document.addEventListener(event, handler);
+    return function cleanup() {
+      document.removeEventListener(event, handler);
+    };
+  });
+}
+const Order = lazy(() => import("./Order-DYralO8T.js"));
+const DragDropList = lazy(
+  () => import("./DragDropList-CiuXlWfI.js")
+);
+const BlocksForm = (props) => {
+  const {
+    pathname,
+    onChangeField,
+    properties,
+    type,
+    navRoot,
+    onChangeFormData,
+    selectedBlock,
+    multiSelected,
+    onSelectBlock,
+    allowedBlocks,
+    showRestricted,
+    title,
+    description,
+    metadata,
+    manage,
+    children,
+    isMainForm = true,
+    isContainer,
+    stopPropagation,
+    disableAddBlockOnEnterKey,
+    blocksConfig = $149c1bd638913645$export$2e2bcd8739ae039.blocks.blocksConfig,
+    editable = true,
+    direction = "vertical",
+    history,
+    location,
+    token,
+    errors,
+    blocksErrors
+  } = props;
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+  const blockList = getBlocks(properties);
+  const dispatch = useDispatch();
+  const intl = useIntl();
+  const ClickOutsideListener = () => {
+    onSelectBlock(null);
+    dispatch(setSidebarTab(0));
+  };
+  const ref = useDetectClickOutside({
+    onTriggered: ClickOutsideListener,
+    triggerKeys: ["Escape"],
+    // Disabled feature for now https://github.com/plone/volto/pull/2389#issuecomment-830027413
+    disableClick: true,
+    disableKeys: !isMainForm
+  });
+  const handleKeyDown = (e, index, block, node, {
+    disableEnter = false,
+    disableArrowUp = false,
+    disableArrowDown = false
+  } = {}) => {
+    const isMultipleSelection = e.shiftKey;
+    if (e.key === "ArrowUp" && !disableArrowUp) {
+      onFocusPreviousBlock(block, node, isMultipleSelection);
+      e.preventDefault();
+    }
+    if (e.key === "ArrowDown" && !disableArrowDown) {
+      onFocusNextBlock(block, node, isMultipleSelection);
+      e.preventDefault();
+    }
+    if (e.key === "Enter" && !disableEnter) {
+      if (!disableAddBlockOnEnterKey) {
+        onSelectBlock(onAddBlock($149c1bd638913645$export$2e2bcd8739ae039.settings.defaultBlockType, index + 1));
+      }
+      e.preventDefault();
+    }
+  };
+  const onFocusPreviousBlock = (currentBlock, blockNode, isMultipleSelection) => {
+    const prev = previousBlockId(properties, currentBlock);
+    if (prev === null) return;
+    blockNode.blur();
+    onSelectBlock(prev, isMultipleSelection);
+  };
+  const onFocusNextBlock = (currentBlock, blockNode, isMultipleSelection) => {
+    const next = nextBlockId(properties, currentBlock);
+    if (next === null) return;
+    blockNode.blur();
+    onSelectBlock(next, isMultipleSelection);
+  };
+  const onMutateBlock = (id, value) => {
+    const newFormData = mutateBlock(properties, id, value);
+    onChangeFormData(newFormData);
+  };
+  const onInsertBlock = (id, value, current) => {
+    const [newId, newFormData] = insertBlock(
+      properties,
+      id,
+      value,
+      current,
+      $149c1bd638913645$export$2e2bcd8739ae039.experimental.addBlockButton.enabled ? 1 : 0
+    );
+    const blocksFieldname = getBlocksFieldname(newFormData);
+    const blockData = newFormData[blocksFieldname][newId];
+    newFormData[blocksFieldname][newId] = applyBlockDefaults({
+      data: blockData,
+      intl,
+      metadata,
+      properties
+    });
+    onChangeFormData(newFormData);
+    return newId;
+  };
+  const onAddBlock = (type2, index) => {
+    if (editable) {
+      const [id, newFormData] = addBlock(properties, type2, index);
+      const blocksFieldname = getBlocksFieldname(newFormData);
+      const blockData = newFormData[blocksFieldname][id];
+      newFormData[blocksFieldname][id] = applyBlockDefaults({
+        data: blockData,
+        intl,
+        metadata,
+        properties
+      });
+      onChangeFormData(newFormData);
+      return id;
+    }
+  };
+  const onChangeBlock = (id, value) => {
+    const newFormData = changeBlock(properties, id, value);
+    onChangeFormData(newFormData);
+  };
+  const onDeleteBlock = (id, selectPrev) => {
+    const previous = previousBlockId(properties, id);
+    const newFormData = deleteBlock(properties, id);
+    onChangeFormData(newFormData);
+    onSelectBlock(selectPrev ? previous : null);
+  };
+  const onMoveBlock = (dragIndex, hoverIndex) => {
+    const newFormData = moveBlock(properties, dragIndex, hoverIndex);
+    onChangeFormData(newFormData);
+  };
+  const onMoveBlockEnhanced = ({ source, destination }) => {
+    const newFormData = moveBlockEnhanced(cloneDeep(properties), {
+      source,
+      destination
+    });
+    const blocksFieldname = getBlocksFieldname(newFormData);
+    const blocksLayoutFieldname = getBlocksLayoutFieldname(newFormData);
+    let error = false;
+    const allowedBlocks2 = Object.keys(blocksConfig);
+    map(newFormData[blocksLayoutFieldname].items, (id) => {
+      var _a;
+      const block = newFormData[blocksFieldname][id];
+      if (!allowedBlocks2.includes(block["@type"])) {
+        error = true;
+      }
+      if (Array.isArray((_a = block[blocksLayoutFieldname]) == null ? void 0 : _a.items)) {
+        const size = block[blocksLayoutFieldname].items.length;
+        const allowedSubBlocks = [
+          ...blocksConfig[block["@type"]].allowedBlocks || allowedBlocks2,
+          "empty"
+        ];
+        if (size < 1 || size > (blocksConfig[block["@type"]].maxLength || 4)) {
+          error = true;
+        }
+        map(block[blocksLayoutFieldname].items, (subId) => {
+          const subBlock = block[blocksFieldname][subId];
+          if (!allowedSubBlocks.includes(subBlock["@type"])) {
+            error = true;
+          }
+        });
+      }
+    });
+    if (!error) {
+      onChangeFormData(newFormData);
+      dispatch(
+        setUIState({
+          selected: null,
+          multiSelected: [],
+          gridSelected: null
+        })
+      );
+    }
+  };
+  const defaultBlockWrapper = ({ draginfo }, editBlock, blockProps) => /* @__PURE__ */ jsx(EditBlockWrapper$1, { draginfo, blockProps, children: editBlock });
+  const editBlockWrapper = children || defaultBlockWrapper;
+  for (const [n, v] of blockList) {
+    if (!v) {
+      const newFormData = deleteBlock(properties, n);
+      onChangeFormData(newFormData);
+    }
+  }
+  useEvent("voltoClickBelowContent", () => {
+    if (!$149c1bd638913645$export$2e2bcd8739ae039.experimental.addBlockButton.enabled || !isMainForm) return;
+    onSelectBlock(
+      onAddBlock($149c1bd638913645$export$2e2bcd8739ae039.settings.defaultBlockType, blockList.length)
+    );
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isMainForm && isClient && createPortal(
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        Order,
+        {
+          items: getBlocksHierarchy(properties),
+          onMoveBlock: onMoveBlockEnhanced,
+          onDeleteBlock,
+          onSelectBlock,
+          removable: true,
+          errors: blocksErrors
+        }
+      ) }),
+      document.getElementById("sidebar-order")
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "blocks-form",
+        role: "presentation",
+        ref,
+        onKeyDown: (e) => {
+          if (stopPropagation) {
+            e.stopPropagation();
+          }
+        },
+        children: /* @__PURE__ */ jsx("fieldset", { className: "invisible", disabled: !editable, children: /* @__PURE__ */ jsx(
+          DragDropList,
+          {
+            childList: blockList,
+            onMoveItem: (result) => {
+              const { source, destination } = result;
+              if (!destination) {
+                return;
+              }
+              const newFormData = moveBlock(
+                properties,
+                source.index,
+                destination.index
+              );
+              onChangeFormData(newFormData);
+              return true;
+            },
+            direction,
+            children: (dragProps) => {
+              const { child, childId, index } = dragProps;
+              const blockProps = {
+                allowedBlocks,
+                showRestricted,
+                block: childId,
+                data: child,
+                handleKeyDown,
+                id: childId,
+                formTitle: title,
+                formDescription: description,
+                index,
+                manage,
+                onAddBlock,
+                onInsertBlock,
+                onChangeBlock,
+                onChangeField,
+                onChangeFormData,
+                onDeleteBlock,
+                onFocusNextBlock,
+                onFocusPreviousBlock,
+                onMoveBlock,
+                onMutateBlock,
+                onSelectBlock,
+                pathname,
+                metadata,
+                properties,
+                contentType: type,
+                navRoot,
+                blocksConfig,
+                selected: selectedBlock === childId,
+                multiSelected: multiSelected == null ? void 0 : multiSelected.includes(childId),
+                type: child["@type"],
+                editable,
+                showBlockChooser: selectedBlock === childId,
+                detached: isContainer,
+                // Properties to pass to the BlocksForm to match the View ones
+                content: properties,
+                history,
+                location,
+                token,
+                errors,
+                blocksErrors
+              };
+              return editBlockWrapper(
+                dragProps,
+                /* @__PURE__ */ jsx(EditBlock, { ...blockProps }, childId),
+                blockProps
+              );
+            }
+          }
+        ) })
+      }
+    )
+  ] });
+};
+export {
+  BlocksForm as default
+};