lkb-fields-document 1.0.0

package/dist/toolbar-state-945823b8.node.esm.js

@@ -0,0 +1,971 @@
+import React, { useState, useRef, useEffect, useCallback, useMemo, useContext, Fragment, forwardRef, useId, cloneElement, createContext } from 'react';
+import { ReactEditor, useSelected, useSlateStatic, useSlate } from 'slate-react';
+import { Transforms, Editor, Node } from 'slate';
+import { css, tokenSchema, transition } from '@keystar/ui/style';
+import { d as assert, f as getKeysForArrayValue, g as getInitialPropsValue, q as createGetPreviewProps, p as clientSideValidateProp, n as nodeTypeMatcher, w as getInitialValue, k as insertNodesButReplaceIfSelectionIsAtEmptyParagraphOrHeading } from './utils-200ff260.node.esm.js';
+import { a as areArraysEqual, j as createToolbarState } from './shared-5e864055.node.esm.js';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { Icon } from '@keystar/ui/icon';
+import { trash2Icon } from '@keystar/ui/icon/icons/trash2Icon';
+import { ActionButton, ButtonGroup, Button } from '@keystar/ui/button';
+import { Heading } from '@keystar/ui/typography';
+import { N as NotEditable } from './api-c32e360e.node.esm.js';
+import { p as previewPropsToValue, a as previewPropsOnChange, F as FormValueContentFromPreviewProps } from './form-from-preview-5df6e492.node.esm.js';
+import { DialogContainer, Dialog } from '@keystar/ui/dialog';
+import { FieldMessage } from '@keystar/ui/field';
+import { Flex } from '@keystar/ui/layout';
+import { Content } from '@keystar/ui/slots';
+import { TooltipTrigger, Tooltip } from '@keystar/ui/tooltip';
+import { trashIcon } from '@keystar/ui/icon/icons/trashIcon';
+import { useOverlay, useOverlayPosition } from '@react-aria/overlays';
+import { useLayoutEffect, mergeProps } from '@react-aria/utils';
+import { useOverlayTriggerState } from '@react-stately/overlays';
+import { Overlay } from '@keystar/ui/overlays';
+import '@emotion/weak-memoize';
+import { LayoutOptionsProvider } from './layouts-e653b908.node.esm.js';
+import { useList } from 'lkb-core/admin-ui/context';
+import { ComboboxSingle } from 'lkb-core/fields/types/relationship/views';
+
+// 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] = useState({
+    element,
+    elementWithChanges: element
+  });
+  if (state.element !== element) {
+    setState({
+      element,
+      elementWithChanges: element
+    });
+  }
+  const elementRef = useRef(element);
+  useEffect(() => {
+    elementRef.current = element;
+  });
+  const setNodes = useCallback(changesOrCallback => {
+    const currentElement = elementRef.current;
+    const changes = typeof changesOrCallback === 'function' ? changesOrCallback(currentElement) : changesOrCallback;
+    Transforms.setNodes(editor, changes, {
+      at: ReactEditor.findPath(editor, currentElement)
+    });
+    setState({
+      element: currentElement,
+      elementWithChanges: {
+        ...currentElement,
+        ...changes
+      }
+    });
+  }, [editor]);
+  return [state.elementWithChanges, setNodes];
+}
+function useEventCallback(callback) {
+  const callbackRef = useRef(callback);
+  const cb = useCallback((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+  useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return cb;
+}
+const ForceValidationContext = /*#__PURE__*/React.createContext(false);
+const ForceValidationProvider = ForceValidationContext.Provider;
+function focusWithPreviousSelection(editor) {
+  const selection = window.getSelection();
+  if (selection) {
+    selection.removeAllRanges();
+    selection.addRange(ReactEditor.toDOMRange(editor, editor.selection));
+  }
+  ReactEditor.focus(editor);
+}
+const blockElementSpacing = css({
+  marginBlock: '0.75em',
+  '&:first-child': {
+    marginBlockStart: 0
+  },
+  '&:last-child': {
+    marginBlockEnd: 0
+  }
+});
+
+function updateComponentBlockElementProps(editor, componentBlock, prevProps, newProps, basePath, setElement) {
+  Editor.withoutNormalizing(editor, () => {
+    setElement({
+      props: newProps
+    });
+    const childPropPaths = findChildPropPathsWithPrevious(newProps, prevProps, {
+      kind: 'object',
+      fields: componentBlock.schema
+    }, [], [], []);
+    const getNode = () => Node.get(editor, basePath);
+    const elementForChildren = getNode();
+    if (childPropPaths.length === 0) {
+      const indexes = elementForChildren.children.map((_, i) => i).reverse();
+      for (const idx of indexes) {
+        Transforms.removeNodes(editor, {
+          at: [...basePath, idx]
+        });
+      }
+      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()) {
+      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];
+        assert(prevNode.propPath !== undefined);
+        if (!areArraysEqual(childProp.path, prevNode.propPath)) {
+          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) {
+      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(Editor.pathRef(editor, [...basePath, idxInChildren]));
+    }
+    for (const pathRef of pathsToRemove) {
+      const path = pathRef.unref();
+      assert(path !== null);
+      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()) {
+        assert(childNode.type === 'component-block-prop' || childNode.type === 'component-inline-prop');
+        const expectedIndex = propPathsToExpectedIndexes.get(JSON.stringify(childNode.propPath));
+        assert(expectedIndex !== undefined);
+        if (idx === expectedIndex) continue;
+        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 : 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 = getKeysForArrayValue(prevValue);
+        const keys = getKeysForArrayValue(value);
+        for (const [i, val] of value.entries()) {
+          const key = keys[i];
+          const prevIdx = prevKeys.indexOf(key);
+          let prevVal;
+          if (prevIdx === -1) {
+            prevVal = 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.createContext({});
+function ChildFieldEditable({
+  path
+}) {
+  const childrenByPath = useContext(ChildrenByPathContext);
+  const child = childrenByPath[JSON.stringify(path)];
+  if (child === undefined) {
+    return null;
+  }
+  return child;
+}
+function ComponentBlockRender({
+  componentBlock,
+  element,
+  onChange,
+  children
+}) {
+  const getPreviewProps = useMemo(() => {
+    return createGetPreviewProps({
+      kind: 'object',
+      fields: componentBlock.schema
+    }, onChange, path => /*#__PURE__*/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__*/jsxs(ChildrenByPathContext.Provider, {
+    value: childrenByPath,
+    children: [useMemo(() => /*#__PURE__*/jsx(ComponentBlockPreview, {
+      ...previewProps
+    }), [previewProps, ComponentBlockPreview]), /*#__PURE__*/jsx("span", {
+      className: 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 = getKeysForArrayValue(val);
+    val = (_val2 = val) === null || _val2 === void 0 ? void 0 : _val2[key];
+    return keys[key];
+  });
+}
+
+function ChromefulComponentBlockElement(props) {
+  var _props$componentBlock;
+  const selected = useSelected();
+  const isValid = useMemo(() => clientSideValidateProp({
+    kind: 'object',
+    fields: props.componentBlock.schema
+  }, props.elementProps), [props.componentBlock, props.elementProps]);
+  const [editMode, setEditMode] = useState(false);
+  const onCloseEditMode = useCallback(() => {
+    setEditMode(false);
+  }, []);
+  const onShowEditMode = useCallback(() => {
+    setEditMode(true);
+  }, []);
+  const ChromefulToolbar = (_props$componentBlock = props.componentBlock.toolbar) !== null && _props$componentBlock !== void 0 ? _props$componentBlock : DefaultToolbarWithChrome;
+  return /*#__PURE__*/jsx(BlockPrimitive, {
+    selected: selected,
+    ...props.attributes,
+    children: /*#__PURE__*/jsx(Flex, {
+      gap: "medium",
+      direction: "column",
+      children: /*#__PURE__*/jsx(Fragment, {
+        children: /*#__PURE__*/jsxs("div", {
+          children: [props.renderedBlock, /*#__PURE__*/jsx(ChromefulToolbar, {
+            isValid: isValid,
+            onRemove: props.onRemove,
+            props: props.previewProps,
+            onShowEditMode: onShowEditMode
+          }), /*#__PURE__*/jsx(DialogContainer, {
+            onDismiss: () => onCloseEditMode(),
+            children: (() => {
+              if (!editMode) {
+                return;
+              }
+              return /*#__PURE__*/jsxs(Dialog, {
+                children: [/*#__PURE__*/jsxs(Heading, {
+                  children: ["\u7F16\u8F91\u3010", props.componentBlock.label, "\u3011\u5C5E\u6027"]
+                }), /*#__PURE__*/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__*/forwardRef(function BlockPrimitive({
+  children,
+  selected,
+  ...attributes
+}, ref) {
+  return /*#__PURE__*/jsx("div", {
+    ...attributes,
+    ref: ref,
+    className: css(blockElementSpacing, {
+      position: 'relative',
+      paddingInlineStart: 0,
+      // tokenSchema.size.space.xlarge,
+      marginBottom: 0,
+      // tokenSchema.size.space.xlarge,
+
+      '::before': {
+        display: 'block',
+        content: '" "',
+        backgroundColor: selected ? tokenSchema.color.alias.borderSelected : 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__*/jsx(NotEditable, {
+    children: /*#__PURE__*/jsxs(Flex, {
+      direction: "column",
+      gap: "medium",
+      children: [/*#__PURE__*/jsxs(Flex, {
+        alignItems: "center",
+        gap: "regular",
+        UNSAFE_style: {
+          userSelect: 'none'
+        },
+        justifyContent: "flex-end",
+        children: [/*#__PURE__*/jsxs(TooltipTrigger, {
+          children: [/*#__PURE__*/jsx(ActionButton, {
+            prominence: "low",
+            onPress: onRemove,
+            children: /*#__PURE__*/jsx(Icon, {
+              src: trash2Icon
+            })
+          }), /*#__PURE__*/jsx(Tooltip, {
+            tone: "critical",
+            children: "\u5220\u9664"
+          })]
+        }), /*#__PURE__*/jsx(ActionButton, {
+          onPress: () => onShowEditMode(),
+          children: "\u7F16\u8F91"
+        })]
+      }), !isValid && /*#__PURE__*/jsx(FieldMessage, {
+        children: "Contains invalid fields. Please edit."
+      })]
+    })
+  });
+}
+function FormValue({
+  onClose,
+  props
+}) {
+  const formId = useId();
+  const [forceValidation, setForceValidation] = useState(false);
+  const [state, setState] = useState(() => previewPropsToValue(props));
+  const previewProps = useMemo(() => createGetPreviewProps(props.schema, setState, () => undefined), [props.schema])(state);
+  return /*#__PURE__*/jsxs(Fragment$1, {
+    children: [/*#__PURE__*/jsx(Content, {
+      children: /*#__PURE__*/jsx(Flex, {
+        id: formId,
+        elementType: "form",
+        onSubmit: event => {
+          if (event.target !== event.currentTarget) return;
+          event.preventDefault();
+          if (!clientSideValidateProp(props.schema, state)) {
+            setForceValidation(true);
+          } else {
+            previewPropsOnChange(state, props);
+            onClose();
+          }
+        },
+        direction: "column",
+        gap: "xxlarge",
+        children: /*#__PURE__*/jsx(FormValueContentFromPreviewProps, {
+          ...previewProps,
+          forceValidation: forceValidation
+        })
+      })
+    }), /*#__PURE__*/jsxs(ButtonGroup, {
+      children: [/*#__PURE__*/jsx(Button, {
+        onPress: onClose,
+        children: "\u53D6\u6D88"
+      }), /*#__PURE__*/jsx(Button, {
+        form: formId,
+        prominence: "high",
+        type: "submit",
+        children: "\u786E\u5B9A"
+      })]
+    })]
+  });
+}
+
+const BlockPopoverContext = /*#__PURE__*/createContext(null);
+function useBlockPopoverContext() {
+  const context = useContext(BlockPopoverContext);
+  if (!context) {
+    throw new Error('useBlockPopoverContext must be used within a BlockPopoverTrigger');
+  }
+  return context;
+}
+const typeMatcher = nodeTypeMatcher('code', 'component-block', 'layout', 'link', 'heading');
+const ActiveBlockPopoverContext = /*#__PURE__*/createContext(undefined);
+function useActiveBlockPopover() {
+  return useContext(ActiveBlockPopoverContext);
+}
+function ActiveBlockPopoverProvider(props) {
+  const nodeWithPopover = Editor.above(props.editor, {
+    match: typeMatcher
+  });
+  return /*#__PURE__*/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 = useRef(null);
+  const state = useOverlayTriggerState({
+    isOpen: activePopoverElement === element
+  });
+  const context = useMemo(() => ({
+    state,
+    triggerRef
+  }), [state, triggerRef]);
+  return /*#__PURE__*/jsxs(BlockPopoverContext.Provider, {
+    value: context,
+    children: [/*#__PURE__*/cloneElement(trigger, {
+      ref: triggerRef
+    }), popover]
+  });
+};
+function BlockPopover(props) {
+  const {
+    state
+  } = useBlockPopoverContext();
+  let wrapperRef = useRef(null);
+  return /*#__PURE__*/jsx(Overlay, {
+    isOpen: state.isOpen,
+    nodeRef: wrapperRef,
+    children: /*#__PURE__*/jsx(BlockPopoverWrapper, {
+      wrapperRef: wrapperRef,
+      ...props
+    })
+  });
+}
+const BlockPopoverWrapper = ({
+  children,
+  placement: preferredPlacement = 'bottom'
+}) => {
+  let popoverRef = useRef(null);
+  let {
+    state,
+    triggerRef
+  } = useBlockPopoverContext();
+  let {
+    placement,
+    popoverProps
+  } = useBlockPopover({
+    isNonModal: true,
+    isKeyboardDismissDisabled: false,
+    placement: preferredPlacement,
+    triggerRef,
+    popoverRef
+  }, state);
+  return /*#__PURE__*/jsx("div", {
+    ref: popoverRef,
+    ...popoverProps,
+    "data-open": state.isOpen,
+    "data-placement": placement,
+    contentEditable: false,
+    className: css({
+      backgroundColor: tokenSchema.color.background.surface,
+      // TODO: component token?
+      borderRadius: tokenSchema.size.radius.medium,
+      // TODO: component token?
+      border: `${tokenSchema.size.border.regular} solid ${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: tokenSchema.size.element.regular,
+      minWidth: 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 ${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: tokenSchema.size.space.regular,
+        transform: `translateY(${tokenSchema.size.space.regular})`
+      },
+      '&[data-placement="bottom"]': {
+        marginTop: tokenSchema.size.space.regular,
+        transform: `translateY(calc(${tokenSchema.size.space.regular} * -1))`
+      },
+      '&[data-open="true"]': {
+        opacity: 1,
+        transform: `translateX(0) translateY(0)`,
+        // enter animation
+        transition: 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] = useState(false);
+  let {
+    overlayProps,
+    underlayProps
+  } = 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;
+  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
+  } = 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());
+  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: mergeProps(overlayProps, positionProps),
+    underlayProps,
+    updatePosition
+  };
+}
+function usePrevious(value) {
+  const ref = useRef(undefined);
+  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__*/jsx("div", {
+    ...props.attributes,
+    className: blockElementSpacing,
+    children: hasToolbar ? /*#__PURE__*/jsxs(BlockPopoverTrigger, {
+      element: props.element,
+      children: [/*#__PURE__*/jsx("div", {
+        children: props.renderedBlock
+      }), /*#__PURE__*/jsx(BlockPopover, {
+        children: /*#__PURE__*/jsx(ChromelessToolbar, {
+          onRemove: props.onRemove,
+          props: props.previewProps
+        })
+      })]
+    }) : /*#__PURE__*/jsx("div", {
+      children: props.renderedBlock
+    })
+  });
+}
+function DefaultToolbarWithoutChrome({
+  onRemove
+}) {
+  return /*#__PURE__*/jsxs(TooltipTrigger, {
+    children: [/*#__PURE__*/jsx(ActionButton, {
+      onPress: onRemove,
+      margin: "regular",
+      children: /*#__PURE__*/jsx(Icon, {
+        src: trashIcon
+      })
+    }), /*#__PURE__*/jsx(Tooltip, {
+      tone: "critical",
+      children: "Remove"
+    })]
+  });
+}
+
+const ComponentBlockContext = /*#__PURE__*/createContext({});
+function ComponentInlineProp(props) {
+  return /*#__PURE__*/jsx("span", {
+    ...props.attributes,
+    children: props.children
+  });
+}
+function insertComponentBlock(editor, componentBlocks, componentBlock) {
+  const node = getInitialValue(componentBlock, componentBlocks[componentBlock]);
+  insertNodesButReplaceIfSelectionIsAtEmptyParagraphOrHeading(editor, node);
+  const componentBlockEntry = Editor.above(editor, {
+    match: node => node.type === 'component-block'
+  });
+  if (componentBlockEntry) {
+    const start = Editor.start(editor, componentBlockEntry[1]);
+    Transforms.setSelection(editor, {
+      anchor: start,
+      focus: start
+    });
+  }
+}
+function ComponentBlocksElement({
+  attributes,
+  children,
+  element: __elementToGetPath
+}) {
+  const editor = useSlateStatic();
+  const [currentElement, setElement] = useElementWithSetNodes(editor, __elementToGetPath);
+  const blockComponents = useContext(ComponentBlockContext);
+  const componentBlock = blockComponents[currentElement.component];
+  const elementToGetPathRef = useRef({
+    __elementToGetPath,
+    currentElement
+  });
+  useEffect(() => {
+    elementToGetPathRef.current = {
+      __elementToGetPath,
+      currentElement
+    };
+  });
+  const onRemove = useEventCallback(() => {
+    const path = ReactEditor.findPath(editor, __elementToGetPath);
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+  });
+  const onPropsChange = useCallback(cb => {
+    const prevProps = elementToGetPathRef.current.currentElement.props;
+    updateComponentBlockElementProps(editor, componentBlock, prevProps, cb(prevProps), ReactEditor.findPath(editor, elementToGetPathRef.current.__elementToGetPath), setElement);
+  }, [setElement, componentBlock, editor]);
+  const getToolbarPreviewProps = useMemo(() => {
+    if (!componentBlock) {
+      return () => {
+        throw new Error('expected component block to exist when called');
+      };
+    }
+    return createGetPreviewProps({
+      kind: 'object',
+      fields: componentBlock.schema
+    }, onPropsChange, () => undefined);
+  }, [componentBlock, onPropsChange]);
+  if (!componentBlock) {
+    return /*#__PURE__*/jsxs("div", {
+      className: css({
+        border: 'red 4px solid',
+        padding: tokenSchema.size.space.medium
+      }),
+      children: [/*#__PURE__*/jsx("pre", {
+        contentEditable: false,
+        className: 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__*/jsx(ComponentBlockRender, {
+    children: children,
+    componentBlock: componentBlock,
+    element: currentElement,
+    onChange: onPropsChange
+  });
+  return componentBlock.chromeless ? /*#__PURE__*/jsx(ChromelessComponentBlockElement, {
+    attributes: attributes,
+    renderedBlock: renderedBlock,
+    componentBlock: componentBlock,
+    onRemove: onRemove,
+    element: __elementToGetPath,
+    previewProps: toolbarPreviewProps
+  }) : /*#__PURE__*/jsx(ChromefulComponentBlockElement, {
+    attributes: attributes,
+    children: children,
+    componentBlock: componentBlock,
+    onRemove: onRemove,
+    previewProps: toolbarPreviewProps,
+    renderedBlock: renderedBlock,
+    elementProps: currentElement.props
+  });
+}
+
+const DocumentFieldRelationshipsContext = /*#__PURE__*/createContext({});
+function useDocumentFieldRelationships() {
+  return useContext(DocumentFieldRelationshipsContext);
+}
+const DocumentFieldRelationshipsProvider = DocumentFieldRelationshipsContext.Provider;
+function RelationshipElement({
+  attributes,
+  children,
+  element
+}) {
+  var _element$data$label;
+  const editor = useSlateStatic();
+  const relationships = useContext(DocumentFieldRelationshipsContext);
+  const relationship = relationships[element.relationship];
+  const list = useList(relationship.listKey);
+  return /*#__PURE__*/jsxs("span", {
+    ...attributes,
+    className: css({
+      display: 'inline-flex',
+      alignItems: 'center'
+    }),
+    children: [/*#__PURE__*/jsx("span", {
+      contentEditable: false,
+      className: css({
+        userSelect: 'none',
+        width: 200,
+        display: 'inline-block',
+        paddingLeft: 4,
+        paddingRight: 4,
+        flex: 1
+      }),
+      children: relationship ? /*#__PURE__*/jsx(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 = ReactEditor.findPath(editor, element);
+            if (newItem === null) {
+              Transforms.removeNodes(editor, {
+                at
+              });
+            } else {
+              Transforms.setNodes(editor, {
+                data: {
+                  id: newItem.id,
+                  label: newItem.label,
+                  data: newItem.data
+                }
+              }, {
+                at
+              });
+            }
+          }
+        }
+      }) : 'Invalid relationship'
+    }), /*#__PURE__*/jsx("span", {
+      className: css({
+        flex: 0
+      }),
+      children: children
+    })]
+  });
+}
+
+const ToolbarStateContext = /*#__PURE__*/React.createContext(null);
+function useToolbarState() {
+  const toolbarState = useContext(ToolbarStateContext);
+  if (!toolbarState) {
+    throw new Error('ToolbarStateProvider must be used to use useToolbarState');
+  }
+  return toolbarState;
+}
+const ToolbarStateProvider = ({
+  children,
+  componentBlocks,
+  editorDocumentFeatures,
+  relationships
+}) => {
+  const editor = useSlate();
+  return /*#__PURE__*/jsx(DocumentFieldRelationshipsProvider, {
+    value: relationships,
+    children: /*#__PURE__*/jsx(LayoutOptionsProvider, {
+      value: editorDocumentFeatures.layouts,
+      children: /*#__PURE__*/jsx(ComponentBlockContext.Provider, {
+        value: componentBlocks,
+        children: /*#__PURE__*/jsx(ToolbarStateContext.Provider, {
+          value: createToolbarState(editor, componentBlocks, editorDocumentFeatures),
+          children: children
+        })
+      })
+    })
+  });
+};
+
+export { ActiveBlockPopoverProvider as A, BlockPopoverTrigger as B, ComponentBlockContext as C, DocumentFieldRelationshipsContext as D, ForceValidationProvider as F, RelationshipElement as R, ToolbarStateProvider as T, useActiveBlockPopover as a, useEventCallback as b, BlockPopover as c, useToolbarState as d, ComponentInlineProp as e, focusWithPreviousSelection as f, ComponentBlocksElement as g, useDocumentFieldRelationships as h, insertComponentBlock as i, blockElementSpacing as j, useElementWithSetNodes as u };