lkb-fields-document 1.0.0

package/dist/toolbar-state-3359e2f3.cjs.js

@@ -0,0 +1,994 @@
+'use strict';
+
+var React = require('react');
+var slateReact = require('slate-react');
+var slate = require('slate');
+var style = require('@keystar/ui/style');
+var utils = require('./utils-6409f730.cjs.js');
+var shared = require('./shared-0533009e.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var icon = require('@keystar/ui/icon');
+var trash2Icon = require('@keystar/ui/icon/icons/trash2Icon');
+var button = require('@keystar/ui/button');
+var typography = require('@keystar/ui/typography');
+var api = require('./api-73636987.cjs.js');
+var formFromPreview = require('./form-from-preview-2042b9ef.cjs.js');
+var dialog = require('@keystar/ui/dialog');
+var field = require('@keystar/ui/field');
+var layout = require('@keystar/ui/layout');
+var slots = require('@keystar/ui/slots');
+var tooltip = require('@keystar/ui/tooltip');
+var trashIcon = require('@keystar/ui/icon/icons/trashIcon');
+var overlays$2 = require('@react-aria/overlays');
+var utils$1 = require('@react-aria/utils');
+var overlays = require('@react-stately/overlays');
+var overlays$1 = require('@keystar/ui/overlays');
+require('@emotion/weak-memoize');
+var layouts = require('./layouts-ba9a558b.cjs.js');
+var context = require('lkb-core/admin-ui/context');
+var views = require('lkb-core/fields/types/relationship/views');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// this ensures that when changes happen, they are immediately shown
+// this stops the problem of a cursor resetting to the end when a change is made
+// because the changes are applied asynchronously
+function useElementWithSetNodes(editor, element) {
+  const [state, setState] = React.useState({
+    element,
+    elementWithChanges: element
+  });
+  if (state.element !== element) {
+    setState({
+      element,
+      elementWithChanges: element
+    });
+  }
+  const elementRef = React.useRef(element);
+  React.useEffect(() => {
+    elementRef.current = element;
+  });
+  const setNodes = React.useCallback(changesOrCallback => {
+    const currentElement = elementRef.current;
+    const changes = typeof changesOrCallback === 'function' ? changesOrCallback(currentElement) : changesOrCallback;
+    slate.Transforms.setNodes(editor, changes, {
+      at: slateReact.ReactEditor.findPath(editor, currentElement)
+    });
+    setState({
+      element: currentElement,
+      elementWithChanges: {
+        ...currentElement,
+        ...changes
+      }
+    });
+  }, [editor]);
+  return [state.elementWithChanges, setNodes];
+}
+function useEventCallback(callback) {
+  const callbackRef = React.useRef(callback);
+  const cb = React.useCallback((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return cb;
+}
+const ForceValidationContext = /*#__PURE__*/React__default["default"].createContext(false);
+const ForceValidationProvider = ForceValidationContext.Provider;
+function focusWithPreviousSelection(editor) {
+  const selection = window.getSelection();
+  if (selection) {
+    selection.removeAllRanges();
+    selection.addRange(slateReact.ReactEditor.toDOMRange(editor, editor.selection));
+  }
+  slateReact.ReactEditor.focus(editor);
+}
+const blockElementSpacing = style.css({
+  marginBlock: '0.75em',
+  '&:first-child': {
+    marginBlockStart: 0
+  },
+  '&:last-child': {
+    marginBlockEnd: 0
+  }
+});
+
+function updateComponentBlockElementProps(editor, componentBlock, prevProps, newProps, basePath, setElement) {
+  slate.Editor.withoutNormalizing(editor, () => {
+    setElement({
+      props: newProps
+    });
+    const childPropPaths = findChildPropPathsWithPrevious(newProps, prevProps, {
+      kind: 'object',
+      fields: componentBlock.schema
+    }, [], [], []);
+    const getNode = () => slate.Node.get(editor, basePath);
+    const elementForChildren = getNode();
+    if (childPropPaths.length === 0) {
+      const indexes = elementForChildren.children.map((_, i) => i).reverse();
+      for (const idx of indexes) {
+        slate.Transforms.removeNodes(editor, {
+          at: [...basePath, idx]
+        });
+      }
+      slate.Transforms.insertNodes(editor, {
+        type: 'component-inline-prop',
+        propPath: undefined,
+        children: [{
+          text: ''
+        }]
+      }, {
+        at: [...basePath, 0]
+      });
+      return;
+    }
+    const initialPropPathsToEditorPath = new Map();
+    for (const [idx, node] of elementForChildren.children.entries()) {
+      utils.assert(node.type === 'component-block-prop' || node.type === 'component-inline-prop');
+      initialPropPathsToEditorPath.set(node.propPath === undefined ? undefined : JSON.stringify(node.propPath), idx);
+    }
+    const childrenLeftToAdd = new Set(childPropPaths);
+    for (const childProp of childPropPaths) {
+      if (childProp.prevPath === undefined) {
+        continue;
+      }
+      const stringifiedPath = JSON.stringify(childProp.prevPath);
+      const idxInChildren = initialPropPathsToEditorPath.get(stringifiedPath);
+      if (idxInChildren !== undefined) {
+        const prevNode = elementForChildren.children[idxInChildren];
+        utils.assert(prevNode.propPath !== undefined);
+        if (!shared.areArraysEqual(childProp.path, prevNode.propPath)) {
+          slate.Transforms.setNodes(editor, {
+            propPath: childProp.path
+          }, {
+            at: [...basePath, idxInChildren]
+          });
+        }
+        childrenLeftToAdd.delete(childProp);
+        initialPropPathsToEditorPath.delete(stringifiedPath);
+      }
+    }
+    let newIdx = getNode().children.length;
+    for (const childProp of childrenLeftToAdd) {
+      slate.Transforms.insertNodes(editor, {
+        type: `component-${childProp.options.kind}-prop`,
+        propPath: childProp.path,
+        children: [childProp.options.kind === 'block' ? {
+          type: 'paragraph',
+          children: [{
+            text: ''
+          }]
+        } : {
+          text: ''
+        }]
+      }, {
+        at: [...basePath, newIdx]
+      });
+      newIdx++;
+    }
+    const pathsToRemove = [];
+    for (const [, idxInChildren] of initialPropPathsToEditorPath) {
+      pathsToRemove.push(slate.Editor.pathRef(editor, [...basePath, idxInChildren]));
+    }
+    for (const pathRef of pathsToRemove) {
+      const path = pathRef.unref();
+      utils.assert(path !== null);
+      slate.Transforms.removeNodes(editor, {
+        at: path
+      });
+    }
+    const propPathsToExpectedIndexes = new Map();
+    for (const [idx, thing] of childPropPaths.entries()) {
+      propPathsToExpectedIndexes.set(JSON.stringify(thing.path), idx);
+    }
+    outer: while (true) {
+      for (const [idx, childNode] of getNode().children.entries()) {
+        utils.assert(childNode.type === 'component-block-prop' || childNode.type === 'component-inline-prop');
+        const expectedIndex = propPathsToExpectedIndexes.get(JSON.stringify(childNode.propPath));
+        utils.assert(expectedIndex !== undefined);
+        if (idx === expectedIndex) continue;
+        slate.Transforms.moveNodes(editor, {
+          at: [...basePath, idx],
+          to: [...basePath, expectedIndex]
+        });
+
+        // start the for-loop again
+        continue outer;
+      }
+      break;
+    }
+  });
+}
+function findChildPropPathsWithPrevious(value, prevValue, schema, newPath, prevPath, pathWithKeys) {
+  switch (schema.kind) {
+    case 'form':
+      return [];
+    case 'relationship':
+      return [];
+    case 'child':
+      return [{
+        path: newPath,
+        prevPath,
+        options: schema.options
+      }];
+    case 'conditional':
+      {
+        const hasChangedDiscriminant = value.discriminant === prevValue.discriminant;
+        return findChildPropPathsWithPrevious(value.value, hasChangedDiscriminant ? prevValue.value : utils.getInitialPropsValue(schema.values[value.discriminant]), schema.values[value.discriminant], newPath.concat('value'), hasChangedDiscriminant ? undefined : prevPath === null || prevPath === void 0 ? void 0 : prevPath.concat('value'), hasChangedDiscriminant ? undefined : pathWithKeys === null || pathWithKeys === void 0 ? void 0 : pathWithKeys.concat('value'));
+      }
+    case 'object':
+      {
+        const paths = [];
+        for (const key of Object.keys(schema.fields)) {
+          paths.push(...findChildPropPathsWithPrevious(value[key], prevValue[key], schema.fields[key], newPath.concat(key), prevPath === null || prevPath === void 0 ? void 0 : prevPath.concat(key), pathWithKeys === null || pathWithKeys === void 0 ? void 0 : pathWithKeys.concat(key)));
+        }
+        return paths;
+      }
+    case 'array':
+      {
+        const paths = [];
+        const prevKeys = utils.getKeysForArrayValue(prevValue);
+        const keys = utils.getKeysForArrayValue(value);
+        for (const [i, val] of value.entries()) {
+          const key = keys[i];
+          const prevIdx = prevKeys.indexOf(key);
+          let prevVal;
+          if (prevIdx === -1) {
+            prevVal = utils.getInitialPropsValue(schema.element);
+          } else {
+            prevVal = prevValue[prevIdx];
+          }
+          paths.push(...findChildPropPathsWithPrevious(val, prevVal, schema.element, newPath.concat(i), prevIdx === -1 ? undefined : prevPath === null || prevPath === void 0 ? void 0 : prevPath.concat(prevIdx), prevIdx === -1 ? undefined : pathWithKeys === null || pathWithKeys === void 0 ? void 0 : pathWithKeys.concat(key)));
+        }
+        return paths;
+      }
+  }
+}
+
+const ChildrenByPathContext = /*#__PURE__*/React__default["default"].createContext({});
+function ChildFieldEditable({
+  path
+}) {
+  const childrenByPath = React.useContext(ChildrenByPathContext);
+  const child = childrenByPath[JSON.stringify(path)];
+  if (child === undefined) {
+    return null;
+  }
+  return child;
+}
+function ComponentBlockRender({
+  componentBlock,
+  element,
+  onChange,
+  children
+}) {
+  const getPreviewProps = React.useMemo(() => {
+    return utils.createGetPreviewProps({
+      kind: 'object',
+      fields: componentBlock.schema
+    }, onChange, path => /*#__PURE__*/jsxRuntime.jsx(ChildFieldEditable, {
+      path: path
+    }));
+  }, [onChange, componentBlock]);
+  const previewProps = getPreviewProps(element.props);
+  const childrenByPath = {};
+  let maybeChild;
+  for (const child of children) {
+    const propPath = child.props.children.props.element.propPath;
+    if (propPath === undefined) {
+      maybeChild = child;
+    } else {
+      childrenByPath[JSON.stringify(propPathWithIndiciesToKeys(propPath, element.props))] = child;
+    }
+  }
+  const ComponentBlockPreview = componentBlock.preview;
+  return /*#__PURE__*/jsxRuntime.jsxs(ChildrenByPathContext.Provider, {
+    value: childrenByPath,
+    children: [React.useMemo(() => /*#__PURE__*/jsxRuntime.jsx(ComponentBlockPreview, {
+      ...previewProps
+    }), [previewProps, ComponentBlockPreview]), /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: style.css({
+        caretColor: 'transparent',
+        '& ::selection': {
+          backgroundColor: 'transparent'
+        }
+      }),
+      children: maybeChild
+    })]
+  });
+}
+
+// note this is written to avoid crashing when the given prop path doesn't exist in the value
+// this is because editor updates happen asynchronously but we have some logic to ensure
+// that updating the props of a component block synchronously updates it
+// (this is primarily to not mess up things like cursors in inputs)
+// this means that sometimes the child elements will be inconsistent with the values
+// so to deal with this, we return a prop path this is "wrong" but won't break anything
+function propPathWithIndiciesToKeys(propPath, val) {
+  return propPath.map(key => {
+    var _val2;
+    if (typeof key === 'string') {
+      var _val;
+      val = (_val = val) === null || _val === void 0 ? void 0 : _val[key];
+      return key;
+    }
+    if (!Array.isArray(val)) {
+      val = undefined;
+      return '';
+    }
+    const keys = utils.getKeysForArrayValue(val);
+    val = (_val2 = val) === null || _val2 === void 0 ? void 0 : _val2[key];
+    return keys[key];
+  });
+}
+
+function ChromefulComponentBlockElement(props) {
+  var _props$componentBlock;
+  const selected = slateReact.useSelected();
+  const isValid = React.useMemo(() => utils.clientSideValidateProp({
+    kind: 'object',
+    fields: props.componentBlock.schema
+  }, props.elementProps), [props.componentBlock, props.elementProps]);
+  const [editMode, setEditMode] = React.useState(false);
+  const onCloseEditMode = React.useCallback(() => {
+    setEditMode(false);
+  }, []);
+  const onShowEditMode = React.useCallback(() => {
+    setEditMode(true);
+  }, []);
+  const ChromefulToolbar = (_props$componentBlock = props.componentBlock.toolbar) !== null && _props$componentBlock !== void 0 ? _props$componentBlock : DefaultToolbarWithChrome;
+  return /*#__PURE__*/jsxRuntime.jsx(BlockPrimitive, {
+    selected: selected,
+    ...props.attributes,
+    children: /*#__PURE__*/jsxRuntime.jsx(layout.Flex, {
+      gap: "medium",
+      direction: "column",
+      children: /*#__PURE__*/jsxRuntime.jsx(React.Fragment, {
+        children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+          children: [props.renderedBlock, /*#__PURE__*/jsxRuntime.jsx(ChromefulToolbar, {
+            isValid: isValid,
+            onRemove: props.onRemove,
+            props: props.previewProps,
+            onShowEditMode: onShowEditMode
+          }), /*#__PURE__*/jsxRuntime.jsx(dialog.DialogContainer, {
+            onDismiss: () => onCloseEditMode(),
+            children: (() => {
+              if (!editMode) {
+                return;
+              }
+              return /*#__PURE__*/jsxRuntime.jsxs(dialog.Dialog, {
+                children: [/*#__PURE__*/jsxRuntime.jsxs(typography.Heading, {
+                  children: ["\u7F16\u8F91\u3010", props.componentBlock.label, "\u3011\u5C5E\u6027"]
+                }), /*#__PURE__*/jsxRuntime.jsx(FormValue, {
+                  props: props.previewProps,
+                  onClose: onCloseEditMode
+                })]
+              });
+            })()
+          })]
+        })
+      })
+    })
+  });
+}
+
+/**
+ * Wrap block content, delimiting it from surrounding content, and provide a
+ * focus indicator because the cursor may not be present.
+ */
+const BlockPrimitive = /*#__PURE__*/React.forwardRef(function BlockPrimitive({
+  children,
+  selected,
+  ...attributes
+}, ref) {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ...attributes,
+    ref: ref,
+    className: style.css(blockElementSpacing, {
+      position: 'relative',
+      paddingInlineStart: 0,
+      // tokenSchema.size.space.xlarge,
+      marginBottom: 0,
+      // tokenSchema.size.space.xlarge,
+
+      '::before': {
+        display: 'block',
+        content: '" "',
+        backgroundColor: selected ? style.tokenSchema.color.alias.borderSelected : style.tokenSchema.color.alias.borderIdle,
+        borderRadius: 4,
+        width: 0,
+        // 4,
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        bottom: 0,
+        zIndex: 1
+      }
+    }),
+    children: children
+  });
+});
+function DefaultToolbarWithChrome({
+  onShowEditMode,
+  onRemove,
+  isValid
+}) {
+  return /*#__PURE__*/jsxRuntime.jsx(api.NotEditable, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(layout.Flex, {
+      direction: "column",
+      gap: "medium",
+      children: [/*#__PURE__*/jsxRuntime.jsxs(layout.Flex, {
+        alignItems: "center",
+        gap: "regular",
+        UNSAFE_style: {
+          userSelect: 'none'
+        },
+        justifyContent: "flex-end",
+        children: [/*#__PURE__*/jsxRuntime.jsxs(tooltip.TooltipTrigger, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(button.ActionButton, {
+            prominence: "low",
+            onPress: onRemove,
+            children: /*#__PURE__*/jsxRuntime.jsx(icon.Icon, {
+              src: trash2Icon.trash2Icon
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(tooltip.Tooltip, {
+            tone: "critical",
+            children: "\u5220\u9664"
+          })]
+        }), /*#__PURE__*/jsxRuntime.jsx(button.ActionButton, {
+          onPress: () => onShowEditMode(),
+          children: "\u7F16\u8F91"
+        })]
+      }), !isValid && /*#__PURE__*/jsxRuntime.jsx(field.FieldMessage, {
+        children: "Contains invalid fields. Please edit."
+      })]
+    })
+  });
+}
+function FormValue({
+  onClose,
+  props
+}) {
+  const formId = React.useId();
+  const [forceValidation, setForceValidation] = React.useState(false);
+  const [state, setState] = React.useState(() => formFromPreview.previewPropsToValue(props));
+  const previewProps = React.useMemo(() => utils.createGetPreviewProps(props.schema, setState, () => undefined), [props.schema])(state);
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(slots.Content, {
+      children: /*#__PURE__*/jsxRuntime.jsx(layout.Flex, {
+        id: formId,
+        elementType: "form",
+        onSubmit: event => {
+          if (event.target !== event.currentTarget) return;
+          event.preventDefault();
+          if (!utils.clientSideValidateProp(props.schema, state)) {
+            setForceValidation(true);
+          } else {
+            formFromPreview.previewPropsOnChange(state, props);
+            onClose();
+          }
+        },
+        direction: "column",
+        gap: "xxlarge",
+        children: /*#__PURE__*/jsxRuntime.jsx(formFromPreview.FormValueContentFromPreviewProps, {
+          ...previewProps,
+          forceValidation: forceValidation
+        })
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs(button.ButtonGroup, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(button.Button, {
+        onPress: onClose,
+        children: "\u53D6\u6D88"
+      }), /*#__PURE__*/jsxRuntime.jsx(button.Button, {
+        form: formId,
+        prominence: "high",
+        type: "submit",
+        children: "\u786E\u5B9A"
+      })]
+    })]
+  });
+}
+
+const BlockPopoverContext = /*#__PURE__*/React.createContext(null);
+function useBlockPopoverContext() {
+  const context = React.useContext(BlockPopoverContext);
+  if (!context) {
+    throw new Error('useBlockPopoverContext must be used within a BlockPopoverTrigger');
+  }
+  return context;
+}
+const typeMatcher = utils.nodeTypeMatcher('code', 'component-block', 'layout', 'link', 'heading');
+const ActiveBlockPopoverContext = /*#__PURE__*/React.createContext(undefined);
+function useActiveBlockPopover() {
+  return React.useContext(ActiveBlockPopoverContext);
+}
+function ActiveBlockPopoverProvider(props) {
+  const nodeWithPopover = slate.Editor.above(props.editor, {
+    match: typeMatcher
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(ActiveBlockPopoverContext.Provider, {
+    value: nodeWithPopover === null || nodeWithPopover === void 0 ? void 0 : nodeWithPopover[0],
+    children: props.children
+  });
+}
+const BlockPopoverTrigger = ({
+  children,
+  element
+}) => {
+  const [trigger, popover] = children;
+  const activePopoverElement = useActiveBlockPopover();
+  const triggerRef = React.useRef(null);
+  const state = overlays.useOverlayTriggerState({
+    isOpen: activePopoverElement === element
+  });
+  const context = React.useMemo(() => ({
+    state,
+    triggerRef
+  }), [state, triggerRef]);
+  return /*#__PURE__*/jsxRuntime.jsxs(BlockPopoverContext.Provider, {
+    value: context,
+    children: [/*#__PURE__*/React.cloneElement(trigger, {
+      ref: triggerRef
+    }), popover]
+  });
+};
+function BlockPopover(props) {
+  const {
+    state
+  } = useBlockPopoverContext();
+  let wrapperRef = React.useRef(null);
+  return /*#__PURE__*/jsxRuntime.jsx(overlays$1.Overlay, {
+    isOpen: state.isOpen,
+    nodeRef: wrapperRef,
+    children: /*#__PURE__*/jsxRuntime.jsx(BlockPopoverWrapper, {
+      wrapperRef: wrapperRef,
+      ...props
+    })
+  });
+}
+const BlockPopoverWrapper = ({
+  children,
+  placement: preferredPlacement = 'bottom'
+}) => {
+  let popoverRef = React.useRef(null);
+  let {
+    state,
+    triggerRef
+  } = useBlockPopoverContext();
+  let {
+    placement,
+    popoverProps
+  } = useBlockPopover({
+    isNonModal: true,
+    isKeyboardDismissDisabled: false,
+    placement: preferredPlacement,
+    triggerRef,
+    popoverRef
+  }, state);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: popoverRef,
+    ...popoverProps,
+    "data-open": state.isOpen,
+    "data-placement": placement,
+    contentEditable: false,
+    className: style.css({
+      backgroundColor: style.tokenSchema.color.background.surface,
+      // TODO: component token?
+      borderRadius: style.tokenSchema.size.radius.medium,
+      // TODO: component token?
+      border: `${style.tokenSchema.size.border.regular} solid ${style.tokenSchema.color.border.emphasis}`,
+      boxSizing: 'content-box',
+      // resolves measurement/scroll issues related to border
+      // boxShadow: `0 0 0 ${tokenSchema.size.border.regular} ${tokenSchema.color.border.emphasis}`,
+      minHeight: style.tokenSchema.size.element.regular,
+      minWidth: style.tokenSchema.size.element.regular,
+      opacity: 0,
+      outline: 0,
+      pointerEvents: 'auto',
+      position: 'absolute',
+      // use filter:drop-shadow instead of box-shadow so the arrow is included
+      filter: `drop-shadow(0 1px 4px ${style.tokenSchema.color.shadow.regular})`,
+      // filter bug in safari: https://stackoverflow.com/questions/56478925/safari-drop-shadow-filter-remains-visible-even-with-hidden-element
+      willChange: 'filter',
+      userSelect: 'none',
+      // placement
+      '&[data-placement="top"]': {
+        marginBottom: style.tokenSchema.size.space.regular,
+        transform: `translateY(${style.tokenSchema.size.space.regular})`
+      },
+      '&[data-placement="bottom"]': {
+        marginTop: style.tokenSchema.size.space.regular,
+        transform: `translateY(calc(${style.tokenSchema.size.space.regular} * -1))`
+      },
+      '&[data-open="true"]': {
+        opacity: 1,
+        transform: `translateX(0) translateY(0)`,
+        // enter animation
+        transition: style.transition(['opacity', 'transform'], {
+          easing: 'easeOut'
+        })
+      }
+    }),
+    children: typeof children === 'function' ? children(state.close) : children
+  });
+};
+
+/**
+ * Provides the behavior and accessibility implementation for a popover component.
+ * A popover is an overlay element positioned relative to a trigger.
+ */
+function useBlockPopover(props, state) {
+  var _triggerRef$current2;
+  let {
+    triggerRef,
+    popoverRef,
+    isNonModal,
+    isKeyboardDismissDisabled,
+    ...otherProps
+  } = props;
+  let [isSticky, setSticky] = React.useState(false);
+  let {
+    overlayProps,
+    underlayProps
+  } = overlays$2.useOverlay({
+    isOpen: state.isOpen,
+    onClose: state.close,
+    shouldCloseOnBlur: true,
+    isDismissable: !isNonModal,
+    isKeyboardDismissDisabled: false
+  }, popoverRef);
+
+  // stick the popover to the bottom of the viewport instead of flipping
+  const containerPadding = 8;
+  React.useEffect(() => {
+    if (state.isOpen) {
+      const checkForStickiness = () => {
+        var _popoverRef$current, _triggerRef$current;
+        const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+        let popoverRect = (_popoverRef$current = popoverRef.current) === null || _popoverRef$current === void 0 ? void 0 : _popoverRef$current.getBoundingClientRect();
+        let triggerRect = (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.getBoundingClientRect();
+        if (popoverRect && triggerRect) {
+          setSticky(triggerRect.bottom + popoverRect.height + containerPadding * 2 > vh && triggerRect.top < vh);
+        }
+      };
+      checkForStickiness();
+      window.addEventListener('scroll', checkForStickiness);
+      return () => {
+        checkForStickiness();
+        window.removeEventListener('scroll', checkForStickiness);
+      };
+    }
+  }, [popoverRef, triggerRef, state.isOpen]);
+  let {
+    overlayProps: positionProps,
+    arrowProps,
+    placement,
+    updatePosition
+  } = overlays$2.useOverlayPosition({
+    ...otherProps,
+    containerPadding,
+    shouldFlip: false,
+    targetRef: triggerRef,
+    overlayRef: popoverRef,
+    isOpen: state.isOpen,
+    onClose: undefined
+  });
+
+  // force update position when the trigger changes
+  let previousBoundingRect = usePrevious((_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : _triggerRef$current2.getBoundingClientRect());
+  utils$1.useLayoutEffect(() => {
+    if (previousBoundingRect) {
+      var _triggerRef$current3;
+      const currentBoundingRect = (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : _triggerRef$current3.getBoundingClientRect();
+      if (currentBoundingRect) {
+        const hasChanged = previousBoundingRect.height !== currentBoundingRect.height || previousBoundingRect.width !== currentBoundingRect.width || previousBoundingRect.x !== currentBoundingRect.x || previousBoundingRect.y !== currentBoundingRect.y;
+        if (hasChanged) {
+          updatePosition();
+        }
+      }
+    }
+  }, [previousBoundingRect, triggerRef, updatePosition]);
+
+  // make sure popovers are below modal dialogs and their blanket
+  if (positionProps.style) {
+    positionProps.style.zIndex = 1;
+  }
+
+  // switching to position: fixed will undoubtedly bite me later, but this hack works for now
+  if (isSticky) {
+    positionProps.style = {
+      ...positionProps.style,
+      // @ts-expect-error
+      maxHeight: null,
+      position: 'fixed',
+      // @ts-expect-error
+      top: null,
+      bottom: containerPadding
+    };
+  }
+  return {
+    arrowProps,
+    placement,
+    popoverProps: utils$1.mergeProps(overlayProps, positionProps),
+    underlayProps,
+    updatePosition
+  };
+}
+function usePrevious(value) {
+  const ref = React.useRef(undefined);
+  React.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
+function ChromelessComponentBlockElement(props) {
+  var _props$componentBlock;
+  const hasToolbar = props.componentBlock.toolbar !== null;
+  const ChromelessToolbar = (_props$componentBlock = props.componentBlock.toolbar) !== null && _props$componentBlock !== void 0 ? _props$componentBlock : DefaultToolbarWithoutChrome;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ...props.attributes,
+    className: blockElementSpacing,
+    children: hasToolbar ? /*#__PURE__*/jsxRuntime.jsxs(BlockPopoverTrigger, {
+      element: props.element,
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        children: props.renderedBlock
+      }), /*#__PURE__*/jsxRuntime.jsx(BlockPopover, {
+        children: /*#__PURE__*/jsxRuntime.jsx(ChromelessToolbar, {
+          onRemove: props.onRemove,
+          props: props.previewProps
+        })
+      })]
+    }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: props.renderedBlock
+    })
+  });
+}
+function DefaultToolbarWithoutChrome({
+  onRemove
+}) {
+  return /*#__PURE__*/jsxRuntime.jsxs(tooltip.TooltipTrigger, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(button.ActionButton, {
+      onPress: onRemove,
+      margin: "regular",
+      children: /*#__PURE__*/jsxRuntime.jsx(icon.Icon, {
+        src: trashIcon.trashIcon
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx(tooltip.Tooltip, {
+      tone: "critical",
+      children: "Remove"
+    })]
+  });
+}
+
+const ComponentBlockContext = /*#__PURE__*/React.createContext({});
+function ComponentInlineProp(props) {
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    ...props.attributes,
+    children: props.children
+  });
+}
+function insertComponentBlock(editor, componentBlocks, componentBlock) {
+  const node = utils.getInitialValue(componentBlock, componentBlocks[componentBlock]);
+  utils.insertNodesButReplaceIfSelectionIsAtEmptyParagraphOrHeading(editor, node);
+  const componentBlockEntry = slate.Editor.above(editor, {
+    match: node => node.type === 'component-block'
+  });
+  if (componentBlockEntry) {
+    const start = slate.Editor.start(editor, componentBlockEntry[1]);
+    slate.Transforms.setSelection(editor, {
+      anchor: start,
+      focus: start
+    });
+  }
+}
+function ComponentBlocksElement({
+  attributes,
+  children,
+  element: __elementToGetPath
+}) {
+  const editor = slateReact.useSlateStatic();
+  const [currentElement, setElement] = useElementWithSetNodes(editor, __elementToGetPath);
+  const blockComponents = React.useContext(ComponentBlockContext);
+  const componentBlock = blockComponents[currentElement.component];
+  const elementToGetPathRef = React.useRef({
+    __elementToGetPath,
+    currentElement
+  });
+  React.useEffect(() => {
+    elementToGetPathRef.current = {
+      __elementToGetPath,
+      currentElement
+    };
+  });
+  const onRemove = useEventCallback(() => {
+    const path = slateReact.ReactEditor.findPath(editor, __elementToGetPath);
+    slate.Transforms.removeNodes(editor, {
+      at: path
+    });
+  });
+  const onPropsChange = React.useCallback(cb => {
+    const prevProps = elementToGetPathRef.current.currentElement.props;
+    updateComponentBlockElementProps(editor, componentBlock, prevProps, cb(prevProps), slateReact.ReactEditor.findPath(editor, elementToGetPathRef.current.__elementToGetPath), setElement);
+  }, [setElement, componentBlock, editor]);
+  const getToolbarPreviewProps = React.useMemo(() => {
+    if (!componentBlock) {
+      return () => {
+        throw new Error('expected component block to exist when called');
+      };
+    }
+    return utils.createGetPreviewProps({
+      kind: 'object',
+      fields: componentBlock.schema
+    }, onPropsChange, () => undefined);
+  }, [componentBlock, onPropsChange]);
+  if (!componentBlock) {
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: style.css({
+        border: 'red 4px solid',
+        padding: style.tokenSchema.size.space.medium
+      }),
+      children: [/*#__PURE__*/jsxRuntime.jsx("pre", {
+        contentEditable: false,
+        className: style.css({
+          userSelect: 'none'
+        }),
+        children: `The block "${currentElement.component}" no longer exists.
+
+Props:
+
+${JSON.stringify(currentElement.props, null, 2)}
+
+Content:`
+      }), children]
+    });
+  }
+  const toolbarPreviewProps = getToolbarPreviewProps(currentElement.props);
+  const renderedBlock = /*#__PURE__*/jsxRuntime.jsx(ComponentBlockRender, {
+    children: children,
+    componentBlock: componentBlock,
+    element: currentElement,
+    onChange: onPropsChange
+  });
+  return componentBlock.chromeless ? /*#__PURE__*/jsxRuntime.jsx(ChromelessComponentBlockElement, {
+    attributes: attributes,
+    renderedBlock: renderedBlock,
+    componentBlock: componentBlock,
+    onRemove: onRemove,
+    element: __elementToGetPath,
+    previewProps: toolbarPreviewProps
+  }) : /*#__PURE__*/jsxRuntime.jsx(ChromefulComponentBlockElement, {
+    attributes: attributes,
+    children: children,
+    componentBlock: componentBlock,
+    onRemove: onRemove,
+    previewProps: toolbarPreviewProps,
+    renderedBlock: renderedBlock,
+    elementProps: currentElement.props
+  });
+}
+
+const DocumentFieldRelationshipsContext = /*#__PURE__*/React.createContext({});
+function useDocumentFieldRelationships() {
+  return React.useContext(DocumentFieldRelationshipsContext);
+}
+const DocumentFieldRelationshipsProvider = DocumentFieldRelationshipsContext.Provider;
+function RelationshipElement({
+  attributes,
+  children,
+  element
+}) {
+  var _element$data$label;
+  const editor = slateReact.useSlateStatic();
+  const relationships = React.useContext(DocumentFieldRelationshipsContext);
+  const relationship = relationships[element.relationship];
+  const list = context.useList(relationship.listKey);
+  return /*#__PURE__*/jsxRuntime.jsxs("span", {
+    ...attributes,
+    className: style.css({
+      display: 'inline-flex',
+      alignItems: 'center'
+    }),
+    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+      contentEditable: false,
+      className: style.css({
+        userSelect: 'none',
+        width: 200,
+        display: 'inline-block',
+        paddingLeft: 4,
+        paddingRight: 4,
+        flex: 1
+      }),
+      children: relationship ? /*#__PURE__*/jsxRuntime.jsx(views.ComboboxSingle, {
+        list: list,
+        labelField: list.labelField,
+        searchFields: list.initialSearchFields,
+        filter: list.initialFilter,
+        sort: list.initialSort,
+        state: {
+          kind: 'one',
+          value: element.data === null ? null : {
+            id: element.data.id,
+            label: (_element$data$label = element.data.label) !== null && _element$data$label !== void 0 ? _element$data$label : null,
+            built: undefined
+          },
+          onChange(newItem) {
+            const at = slateReact.ReactEditor.findPath(editor, element);
+            if (newItem === null) {
+              slate.Transforms.removeNodes(editor, {
+                at
+              });
+            } else {
+              slate.Transforms.setNodes(editor, {
+                data: {
+                  id: newItem.id,
+                  label: newItem.label,
+                  data: newItem.data
+                }
+              }, {
+                at
+              });
+            }
+          }
+        }
+      }) : 'Invalid relationship'
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: style.css({
+        flex: 0
+      }),
+      children: children
+    })]
+  });
+}
+
+const ToolbarStateContext = /*#__PURE__*/React__default["default"].createContext(null);
+function useToolbarState() {
+  const toolbarState = React.useContext(ToolbarStateContext);
+  if (!toolbarState) {
+    throw new Error('ToolbarStateProvider must be used to use useToolbarState');
+  }
+  return toolbarState;
+}
+const ToolbarStateProvider = ({
+  children,
+  componentBlocks,
+  editorDocumentFeatures,
+  relationships
+}) => {
+  const editor = slateReact.useSlate();
+  return /*#__PURE__*/jsxRuntime.jsx(DocumentFieldRelationshipsProvider, {
+    value: relationships,
+    children: /*#__PURE__*/jsxRuntime.jsx(layouts.LayoutOptionsProvider, {
+      value: editorDocumentFeatures.layouts,
+      children: /*#__PURE__*/jsxRuntime.jsx(ComponentBlockContext.Provider, {
+        value: componentBlocks,
+        children: /*#__PURE__*/jsxRuntime.jsx(ToolbarStateContext.Provider, {
+          value: shared.createToolbarState(editor, componentBlocks, editorDocumentFeatures),
+          children: children
+        })
+      })
+    })
+  });
+};
+
+exports.ActiveBlockPopoverProvider = ActiveBlockPopoverProvider;
+exports.BlockPopover = BlockPopover;
+exports.BlockPopoverTrigger = BlockPopoverTrigger;
+exports.ComponentBlockContext = ComponentBlockContext;
+exports.ComponentBlocksElement = ComponentBlocksElement;
+exports.ComponentInlineProp = ComponentInlineProp;
+exports.DocumentFieldRelationshipsContext = DocumentFieldRelationshipsContext;
+exports.ForceValidationProvider = ForceValidationProvider;
+exports.RelationshipElement = RelationshipElement;
+exports.ToolbarStateProvider = ToolbarStateProvider;
+exports.blockElementSpacing = blockElementSpacing;
+exports.focusWithPreviousSelection = focusWithPreviousSelection;
+exports.insertComponentBlock = insertComponentBlock;
+exports.useActiveBlockPopover = useActiveBlockPopover;
+exports.useDocumentFieldRelationships = useDocumentFieldRelationships;
+exports.useElementWithSetNodes = useElementWithSetNodes;
+exports.useEventCallback = useEventCallback;
+exports.useToolbarState = useToolbarState;