lkb-fields-document 1.0.0

package/dist/Field-92d13205.esm.js

@@ -0,0 +1,1619 @@
+'use client';
+import { Field as Field$1 } from '@keystar/ui/field';
+import { css, tokenSchema } from '@keystar/ui/style';
+import { Text, Heading, Kbd, Prose } from '@keystar/ui/typography';
+import { useState, useEffect, useMemo, useContext, useRef, Fragment as Fragment$1, useCallback } from 'react';
+import isHotkey from 'is-hotkey';
+import { Node, Transforms, Editor, Element, Text as Text$1 } from 'slate';
+import { useSlateStatic, ReactEditor, useSelected, withReact, Slate, useSlate, Editable } from 'slate-react';
+import { w as wrapLink, i as insertBlockquote, a as insertDivider, c as createDocumentEditor } from './editor-shared-da518ba3.esm.js';
+import { u as clearFormatting, k as insertNodesButReplaceIfSelectionIsAtEmptyParagraphOrHeading, v as getPlaceholderTextForPropPath } from './utils-bc6a0b82.esm.js';
+import { Icon } from '@keystar/ui/icon';
+import { boldIcon } from '@keystar/ui/icon/icons/boldIcon';
+import { italicIcon } from '@keystar/ui/icon/icons/italicIcon';
+import { plusIcon } from '@keystar/ui/icon/icons/plusIcon';
+import { chevronDownIcon } from '@keystar/ui/icon/icons/chevronDownIcon';
+import { codeIcon } from '@keystar/ui/icon/icons/codeIcon';
+import { removeFormattingIcon } from '@keystar/ui/icon/icons/removeFormattingIcon';
+import { strikethroughIcon } from '@keystar/ui/icon/icons/strikethroughIcon';
+import { subscriptIcon } from '@keystar/ui/icon/icons/subscriptIcon';
+import { superscriptIcon } from '@keystar/ui/icon/icons/superscriptIcon';
+import { typeIcon } from '@keystar/ui/icon/icons/typeIcon';
+import { underlineIcon } from '@keystar/ui/icon/icons/underlineIcon';
+import { maximizeIcon } from '@keystar/ui/icon/icons/maximizeIcon';
+import { minimizeIcon } from '@keystar/ui/icon/icons/minimizeIcon';
+import { EditorToolbarGroup, EditorToolbarItem, EditorToolbarButton, EditorToolbar, EditorToolbarSeparator } from '@keystar/ui/editor';
+import { linkIcon } from '@keystar/ui/icon/icons/linkIcon';
+import { externalLinkIcon } from '@keystar/ui/icon/icons/externalLinkIcon';
+import { editIcon } from '@keystar/ui/icon/icons/editIcon';
+import { u as useElementWithSetNodes, a as useActiveBlockPopover, b as useEventCallback, B as BlockPopoverTrigger, c as BlockPopover, f as focusWithPreviousSelection, d as useToolbarState, D as DocumentFieldRelationshipsContext, C as ComponentBlockContext, i as insertComponentBlock, R as RelationshipElement, e as ComponentInlineProp, g as ComponentBlocksElement, h as useDocumentFieldRelationships, T as ToolbarStateProvider, A as ActiveBlockPopoverProvider, F as ForceValidationProvider } from './toolbar-state-bc8fe661.esm.js';
+import { i as isValidURL } from './index-67d52357.esm.js';
+import { ActionButton, ButtonGroup, Button } from '@keystar/ui/button';
+import { DialogContainer, useDialogContainer, Dialog } from '@keystar/ui/dialog';
+import { Flex } from '@keystar/ui/layout';
+import { TooltipTrigger, Tooltip } from '@keystar/ui/tooltip';
+import '@react-aria/i18n';
+import '@keystar/ui/number-field';
+import { Picker, Item as Item$1 } from '@keystar/ui/picker';
+import '@keystar/ui/combobox';
+import { TextField } from '@keystar/ui/text-field';
+import { Item } from '@keystar/ui/tag';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@keystar/ui/checkbox';
+import { Content } from '@keystar/ui/slots';
+import { unlinkIcon } from '@keystar/ui/icon/icons/unlinkIcon';
+import { LayoutsButton, LayoutArea, LayoutContainer } from './layouts-6412fa2a.esm.js';
+import { t as toggleList, i as insertLayout, u as unnestList, h as nestList } from './shared-aaba5901.esm.js';
+import { listIcon } from '@keystar/ui/icon/icons/listIcon';
+import { listOrderedIcon } from '@keystar/ui/icon/icons/listOrderedIcon';
+import { quoteIcon } from '@keystar/ui/icon/icons/quoteIcon';
+import { alignLeftIcon } from '@keystar/ui/icon/icons/alignLeftIcon';
+import { alignRightIcon } from '@keystar/ui/icon/icons/alignRightIcon';
+import { alignCenterIcon } from '@keystar/ui/icon/icons/alignCenterIcon';
+import { MenuTrigger, Menu } from '@keystar/ui/menu';
+import { minusIcon } from '@keystar/ui/icon/icons/minusIcon';
+import { ActionGroup } from '@keystar/ui/action-group';
+import { matchSorter } from 'match-sorter';
+import scrollIntoView from 'scroll-into-view-if-needed';
+import { useOverlayTrigger } from '@react-aria/overlays';
+import { useListState } from '@react-stately/list';
+import { useOverlayTriggerState } from '@react-stately/overlays';
+import { Popover } from '@keystar/ui/overlays';
+import { Item as Item$2, useListBoxLayout, ListBoxBase } from '@keystar/ui/listbox';
+import { KeystarProvider } from '@keystar/ui/core';
+import 'slate-history';
+import '@emotion/weak-memoize';
+import 'mdast-util-from-markdown';
+import 'mdast-util-gfm-autolink-literal/from-markdown';
+import 'micromark-extension-gfm-autolink-literal';
+import 'mdast-util-gfm-strikethrough/from-markdown';
+import 'micromark-extension-gfm-strikethrough';
+import '@keystar/ui/icon/icons/trash2Icon';
+import './api-2f524611.esm.js';
+import 'lkb-core';
+import '@keystar/ui/drag-and-drop';
+import './form-from-preview-b3a66f37.esm.js';
+import 'lkb-core/admin-ui/context';
+import 'lkb-core/fields/types/relationship/views';
+import 'lkb-core/admin-ui/utils';
+import '@keystar/ui/list-view';
+import '@keystar/ui/icon/icons/trashIcon';
+import '@react-aria/utils';
+import '@braintree/sanitize-url';
+
+function LinkElement({
+  attributes,
+  children,
+  element: __elementForGettingPath
+}) {
+  const editor = useSlateStatic();
+  const [currentElement, setNode] = useElementWithSetNodes(editor, __elementForGettingPath);
+  const href = currentElement.href;
+
+  // const [localForceValidation, setLocalForceValidation] = useState(false)
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const activePopoverElement = useActiveBlockPopover();
+  const selected = activePopoverElement === __elementForGettingPath;
+  useEffect(() => {
+    if (selected && !href) {
+      setDialogOpen(true);
+    }
+  }, [href, selected]);
+  const unlink = useEventCallback(() => {
+    Transforms.unwrapNodes(editor, {
+      at: ReactEditor.findPath(editor, __elementForGettingPath)
+    });
+  });
+  // const forceValidation = useForceValidation()
+  // TODO: show the invalid state
+  // const showInvalidState = isValidURL(href) ? false : forceValidation || localForceValidation
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs(BlockPopoverTrigger, {
+      element: __elementForGettingPath,
+      children: [/*#__PURE__*/jsx("a", {
+        href: href,
+        ...attributes,
+        children: children
+      }), /*#__PURE__*/jsx(BlockPopover, {
+        placement: "bottom start",
+        children: /*#__PURE__*/jsxs(Flex, {
+          gap: "small",
+          padding: "regular",
+          children: [/*#__PURE__*/jsxs(TooltipTrigger, {
+            children: [/*#__PURE__*/jsx(ActionButton, {
+              prominence: "low",
+              onPress: () => setDialogOpen(true),
+              children: /*#__PURE__*/jsx(Icon, {
+                src: editIcon
+              })
+            }), /*#__PURE__*/jsx(Tooltip, {
+              children: "Edit"
+            })]
+          }), /*#__PURE__*/jsxs(TooltipTrigger, {
+            children: [/*#__PURE__*/jsx(ActionButton, {
+              prominence: "low",
+              onPress: () => {
+                window.open(href, '_blank', 'noopener,noreferrer');
+              },
+              children: /*#__PURE__*/jsx(Icon, {
+                src: externalLinkIcon
+              })
+            }), /*#__PURE__*/jsx(Tooltip, {
+              children: /*#__PURE__*/jsx(Text, {
+                truncate: 3,
+                children: href
+              })
+            })]
+          }), /*#__PURE__*/jsxs(TooltipTrigger, {
+            children: [/*#__PURE__*/jsx(ActionButton, {
+              prominence: "low",
+              onPress: unlink,
+              children: /*#__PURE__*/jsx(Icon, {
+                src: unlinkIcon
+              })
+            }), /*#__PURE__*/jsx(Tooltip, {
+              children: "Unlink"
+            })]
+          })]
+        })
+      })]
+    }), /*#__PURE__*/jsx(DialogContainer, {
+      onDismiss: () => {
+        setDialogOpen(false);
+        focusWithPreviousSelection(editor);
+      },
+      children: dialogOpen && /*#__PURE__*/jsx(LinkDialog, {
+        text: Node.string(currentElement),
+        href: href,
+        onSubmit: ({
+          href
+        }) => {
+          setNode({
+            href
+          });
+        }
+      })
+    })]
+  });
+}
+function LinkDialog({
+  onSubmit,
+  ...props
+}) {
+  let [href, setHref] = useState(props.href || '');
+  let [touched, setTouched] = useState(false);
+  let {
+    dismiss
+  } = useDialogContainer();
+  const showInvalidState = touched && !isValidURL(href);
+  return /*#__PURE__*/jsx(Dialog, {
+    size: "small",
+    children: /*#__PURE__*/jsxs("form", {
+      style: {
+        display: 'contents'
+      },
+      onSubmit: event => {
+        if (event.target !== event.currentTarget) return;
+        event.preventDefault();
+        if (!showInvalidState) {
+          dismiss();
+          onSubmit({
+            href
+          });
+        }
+      },
+      children: [/*#__PURE__*/jsxs(Heading, {
+        children: [props.href ? '编辑' : '添加', "\u94FE\u63A5"]
+      }), /*#__PURE__*/jsx(Content, {
+        children: /*#__PURE__*/jsxs(Flex, {
+          gap: "large",
+          direction: "column",
+          children: [/*#__PURE__*/jsx(TextField, {
+            label: "\u6587\u672C",
+            value: props.text,
+            isReadOnly: true
+          }), /*#__PURE__*/jsx(TextField, {
+            autoFocus: true,
+            isRequired: true,
+            onBlur: () => setTouched(true),
+            label: "\u94FE\u63A5",
+            onChange: setHref,
+            value: href,
+            errorMessage: showInvalidState && '请输入有效的链接地址.'
+          })]
+        })
+      }), /*#__PURE__*/jsxs(ButtonGroup, {
+        children: [/*#__PURE__*/jsx(Button, {
+          onPress: dismiss,
+          children: "\u53D6\u6D88"
+        }), /*#__PURE__*/jsx(Button, {
+          prominence: "high",
+          type: "submit",
+          children: "\u4FDD\u5B58"
+        })]
+      })]
+    })
+  });
+}
+let _linkIcon = /*#__PURE__*/jsx(Icon, {
+  src: linkIcon
+});
+function LinkButton() {
+  const {
+    editor,
+    links: {
+      isDisabled,
+      isSelected
+    }
+  } = useToolbarState();
+  return useMemo(() => /*#__PURE__*/jsx(ActionButton, {
+    prominence: "low",
+    isDisabled: isDisabled,
+    isSelected: isSelected,
+    onPress: () => {
+      wrapLink(editor, '');
+      ReactEditor.focus(editor);
+    },
+    children: _linkIcon
+  }), [isSelected, isDisabled, editor]);
+}
+const linkButton = /*#__PURE__*/jsxs(TooltipTrigger, {
+  children: [/*#__PURE__*/jsx(LinkButton, {}), /*#__PURE__*/jsx(Tooltip, {
+    children: /*#__PURE__*/jsx(Text, {
+      children: "Link"
+    })
+  })]
+});
+
+function ListButtons(props) {
+  const {
+    editor,
+    lists
+  } = useToolbarState();
+  const items = useMemo(() => {
+    return [!!props.lists.unordered && {
+      label: '无序列表',
+      key: 'unordered',
+      shortcut: '-⎵',
+      icon: listIcon
+    }, !!props.lists.unordered && {
+      label: '有序列表',
+      key: 'ordered',
+      shortcut: '1.⎵',
+      icon: listOrderedIcon
+    }].filter(removeFalse);
+  }, [props.lists]);
+  return useMemo(() => {
+    const disabledKeys = [];
+    if (lists.ordered.isDisabled) disabledKeys.push('ordered');
+    if (lists.unordered.isDisabled) disabledKeys.push('unordered');
+    const activeListType = lists.ordered.isSelected ? 'ordered' : lists.unordered.isSelected ? 'unordered' : null;
+    return /*#__PURE__*/jsx(EditorToolbarGroup, {
+      value: activeListType,
+      disabledKeys: disabledKeys,
+      onChange: key => {
+        const format = `${key}-list`;
+        toggleList(editor, format);
+        ReactEditor.focus(editor);
+      },
+      selectionMode: "single",
+      children: items.map(item => /*#__PURE__*/jsxs(TooltipTrigger, {
+        children: [/*#__PURE__*/jsx(EditorToolbarItem, {
+          value: item.key,
+          children: /*#__PURE__*/jsx(Icon, {
+            src: item.icon
+          })
+        }), /*#__PURE__*/jsxs(Tooltip, {
+          children: [/*#__PURE__*/jsx(Text, {
+            children: item.label
+          }), /*#__PURE__*/jsx(Kbd, {
+            children: item.shortcut
+          })]
+        })]
+      }, item.key))
+    });
+  }, [editor, lists.ordered.isDisabled, lists.ordered.isSelected, lists.unordered.isDisabled, lists.unordered.isSelected, props.lists.ordered, props.lists.unordered]);
+}
+function removeFalse(val) {
+  return val !== false;
+}
+
+const BlockquoteElement = ({
+  attributes,
+  children
+}) => {
+  return /*#__PURE__*/jsx("blockquote", {
+    ...attributes,
+    children: children
+  });
+};
+const BlockquoteButton = () => {
+  const {
+    editor,
+    blockquote: {
+      isDisabled,
+      isSelected
+    }
+  } = useToolbarState();
+  return useMemo(() => /*#__PURE__*/jsx(EditorToolbarButton, {
+    isSelected: isSelected,
+    isDisabled: isDisabled,
+    onPress: () => {
+      insertBlockquote(editor);
+      ReactEditor.focus(editor);
+    },
+    children: /*#__PURE__*/jsx(Icon, {
+      src: quoteIcon
+    })
+  }), [editor, isDisabled, isSelected]);
+};
+const blockquoteButton = /*#__PURE__*/jsxs(TooltipTrigger, {
+  children: [/*#__PURE__*/jsx(BlockquoteButton, {}), /*#__PURE__*/jsxs(Tooltip, {
+    children: [/*#__PURE__*/jsx(Text, {
+      children: "\u5F15\u7528"
+    }), /*#__PURE__*/jsx(Kbd, {
+      children: '>⎵'
+    })]
+  })]
+});
+
+function CodeButton() {
+  const {
+    editor,
+    code: {
+      isDisabled,
+      isSelected
+    }
+  } = useToolbarState();
+  return useMemo(() => /*#__PURE__*/jsx(EditorToolbarButton, {
+    isSelected: isSelected,
+    isDisabled: isDisabled,
+    onPress: () => {
+      if (isSelected) {
+        Transforms.unwrapNodes(editor, {
+          match: node => node.type === 'code'
+        });
+      } else {
+        Transforms.wrapNodes(editor, {
+          type: 'code',
+          children: [{
+            text: ''
+          }]
+        });
+      }
+      ReactEditor.focus(editor);
+    },
+    children: /*#__PURE__*/jsx(Icon, {
+      src: codeIcon
+    })
+  }), [isDisabled, isSelected, editor]);
+}
+const codeButton = /*#__PURE__*/jsxs(TooltipTrigger, {
+  children: [/*#__PURE__*/jsx(CodeButton, {}), /*#__PURE__*/jsxs(Tooltip, {
+    children: [/*#__PURE__*/jsx(Text, {
+      children: "\u4EE3\u7801\u5757"
+    }), /*#__PURE__*/jsx(Kbd, {
+      children: "```"
+    })]
+  })]
+});
+
+const values = {
+  start: {
+    key: 'start',
+    label: '左对齐',
+    icon: /*#__PURE__*/jsx(Icon, {
+      src: alignLeftIcon
+    })
+  },
+  center: {
+    key: 'center',
+    label: '居中对齐',
+    icon: /*#__PURE__*/jsx(Icon, {
+      src: alignCenterIcon
+    })
+  },
+  end: {
+    key: 'end',
+    label: '右对齐',
+    icon: /*#__PURE__*/jsx(Icon, {
+      src: alignRightIcon
+    })
+  }
+};
+const TextAlignMenu = ({
+  alignment
+}) => {
+  const toolbarState = useToolbarState();
+  const items = useMemo(() => [values.start, ...Object.keys(alignment).map(x => values[x])], [alignment]);
+  return useMemo(() => /*#__PURE__*/jsxs(MenuTrigger, {
+    children: [/*#__PURE__*/jsxs(TooltipTrigger, {
+      children: [/*#__PURE__*/jsxs(EditorToolbarButton, {
+        children: [values[toolbarState.alignment.selected].icon, /*#__PURE__*/jsx(Icon, {
+          src: chevronDownIcon
+        })]
+      }), /*#__PURE__*/jsx(Tooltip, {
+        children: /*#__PURE__*/jsx(Text, {
+          children: "\u6587\u672C\u5BF9\u9F50"
+        })
+      })]
+    }), /*#__PURE__*/jsx(Menu, {
+      selectionMode: "single",
+      selectedKeys: [toolbarState.alignment.selected],
+      items: items,
+      onAction: key => {
+        if (key === 'start') {
+          Transforms.unsetNodes(toolbarState.editor, 'textAlign', {
+            match: node => node.type === 'paragraph' || node.type === 'heading'
+          });
+        } else {
+          Transforms.setNodes(toolbarState.editor, {
+            textAlign: key
+          }, {
+            match: node => node.type === 'paragraph' || node.type === 'heading'
+          });
+        }
+        ReactEditor.focus(toolbarState.editor);
+      },
+      children: item => {
+        return /*#__PURE__*/jsxs(Item, {
+          textValue: item.label,
+          children: [/*#__PURE__*/jsx(Text, {
+            children: item.label
+          }), item.icon]
+        }, item.key);
+      }
+    })]
+  }), [items, toolbarState.alignment.selected, toolbarState.editor]);
+};
+
+const DividerButtonInner = () => {
+  const {
+    editor,
+    dividers: {
+      isDisabled
+    }
+  } = useToolbarState();
+  return useMemo(() => /*#__PURE__*/jsx(EditorToolbarButton, {
+    isDisabled: isDisabled,
+    isSelected: false,
+    onPress: () => {
+      insertDivider(editor);
+    },
+    children: /*#__PURE__*/jsx(Icon, {
+      src: minusIcon
+    })
+  }), [editor, isDisabled]);
+};
+const DividerButton = /*#__PURE__*/jsxs(TooltipTrigger, {
+  delay: 200,
+  children: [/*#__PURE__*/jsx(DividerButtonInner, {}), /*#__PURE__*/jsxs(Tooltip, {
+    children: [/*#__PURE__*/jsx(Text, {
+      children: "\u6DFB\u52A0\u5206\u9694\u7EBF"
+    }), /*#__PURE__*/jsx(Kbd, {
+      children: "---"
+    })]
+  })]
+});
+
+function Toolbar({
+  documentFeatures,
+  viewState
+}) {
+  const relationship = useContext(DocumentFieldRelationshipsContext);
+  const blockComponent = useContext(ComponentBlockContext);
+  const hasBlockItems = Object.entries(relationship).length || Object.keys(blockComponent).length;
+  const hasMarks = Object.values(documentFeatures.formatting.inlineMarks).some(x => x);
+  const hasAlignment = documentFeatures.formatting.alignment.center || documentFeatures.formatting.alignment.end;
+  const hasLists = documentFeatures.formatting.listTypes.unordered || documentFeatures.formatting.listTypes.ordered;
+  return /*#__PURE__*/jsxs(ToolbarWrapper, {
+    children: [/*#__PURE__*/jsxs(ToolbarScrollArea, {
+      children: [!!documentFeatures.formatting.headingLevels.length && /*#__PURE__*/jsx(HeadingMenu, {
+        headingLevels: documentFeatures.formatting.headingLevels
+      }), /*#__PURE__*/jsxs(EditorToolbar, {
+        children: [hasMarks && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(EditorToolbarSeparator, {}), /*#__PURE__*/jsx(InlineMarks, {
+            marks: documentFeatures.formatting.inlineMarks
+          })]
+        }), /*#__PURE__*/jsx(EditorToolbarSeparator, {}), (hasAlignment || hasLists) && /*#__PURE__*/jsxs(EditorToolbarGroup, {
+          children: [hasAlignment && /*#__PURE__*/jsx(TextAlignMenu, {
+            alignment: documentFeatures.formatting.alignment
+          }), hasLists && /*#__PURE__*/jsx(ListButtons, {
+            lists: documentFeatures.formatting.listTypes
+          })]
+        }), /*#__PURE__*/jsxs(EditorToolbarGroup, {
+          children: [documentFeatures.dividers && DividerButton, documentFeatures.links && linkButton, documentFeatures.formatting.blockTypes.blockquote && blockquoteButton, !!documentFeatures.layouts.length && /*#__PURE__*/jsx(LayoutsButton, {
+            layouts: documentFeatures.layouts
+          }), documentFeatures.formatting.blockTypes.code && codeButton]
+        }), useMemo(() => {
+          return viewState && /*#__PURE__*/jsx(EditorToolbarGroup, {
+            children: /*#__PURE__*/jsxs(TooltipTrigger, {
+              children: [/*#__PURE__*/jsx(EditorToolbarButton, {
+                isSelected: viewState.expanded,
+                onPress: () => {
+                  viewState.toggle();
+                },
+                children: /*#__PURE__*/jsx(Icon, {
+                  src: viewState.expanded ? minimizeIcon : maximizeIcon
+                })
+              }), /*#__PURE__*/jsx(Tooltip, {
+                children: viewState.expanded ? '折叠' : '展开'
+              })]
+            })
+          });
+        }, [viewState])]
+      })]
+    }), !!hasBlockItems && /*#__PURE__*/jsx(InsertBlockMenu, {})]
+  });
+}
+const headingMenuVals = new Map([['normal', 'normal'], ['1', 1], ['2', 2], ['3', 3], ['4', 4], ['5', 5], ['6', 6]]);
+const HeadingMenu = ({
+  headingLevels
+}) => {
+  const {
+    editor,
+    textStyles
+  } = useToolbarState();
+  const isDisabled = textStyles.allowedHeadingLevels.length === 0;
+  const items = useMemo(() => {
+    let resolvedItems = [{
+      name: '段落',
+      id: 'normal'
+    }];
+    headingLevels.forEach(level => {
+      resolvedItems.push({
+        name: `标题 ${level}`,
+        id: level.toString()
+      });
+    });
+    return resolvedItems;
+  }, [headingLevels]);
+  const selected = textStyles.selected.toString();
+  return useMemo(() => /*#__PURE__*/jsx(Picker, {
+    flexShrink: 0,
+    width: "scale.1700",
+    prominence: "low",
+    items: items,
+    isDisabled: isDisabled,
+    selectedKey: selected,
+    onSelectionChange: selected => {
+      let key = headingMenuVals.get(selected);
+      if (key === 'normal') {
+        Editor.withoutNormalizing(editor, () => {
+          Transforms.unsetNodes(editor, 'level', {
+            match: n => n.type === 'heading'
+          });
+          Transforms.setNodes(editor, {
+            type: 'paragraph'
+          }, {
+            match: n => n.type === 'heading'
+          });
+        });
+      } else if (key) {
+        Transforms.setNodes(editor, {
+          type: 'heading',
+          level: key
+        }, {
+          match: node => node.type === 'paragraph' || node.type === 'heading'
+        });
+      }
+      ReactEditor.focus(editor);
+    },
+    children: item => /*#__PURE__*/jsx(Item$1, {
+      children: item.name
+    }, item.id)
+  }), [editor, isDisabled, items, selected]);
+};
+function InsertBlockMenu() {
+  const editor = useSlateStatic();
+  const componentBlocks = useContext(ComponentBlockContext);
+  return /*#__PURE__*/jsxs(MenuTrigger, {
+    align: "end",
+    children: [/*#__PURE__*/jsxs(TooltipTrigger, {
+      children: [/*#__PURE__*/jsxs(ActionButton, {
+        marginY: "regular",
+        marginEnd: "medium",
+        children: [/*#__PURE__*/jsx(Icon, {
+          src: plusIcon
+        }), /*#__PURE__*/jsx(Icon, {
+          src: chevronDownIcon
+        })]
+      }), /*#__PURE__*/jsxs(Tooltip, {
+        children: [/*#__PURE__*/jsx(Text, {
+          children: "Insert"
+        }), /*#__PURE__*/jsx(Kbd, {
+          children: "/"
+        })]
+      })]
+    }), /*#__PURE__*/jsx(Menu, {
+      onAction: key => {
+        insertComponentBlock(editor, componentBlocks, key);
+      },
+      items: Object.entries(componentBlocks),
+      children: ([key, item]) => /*#__PURE__*/jsx(Item$1, {
+        children: item.label
+      }, key)
+    })]
+  });
+}
+const inlineMarks = [{
+  key: 'bold',
+  label: 'Bold',
+  icon: boldIcon,
+  shortcut: `B`
+}, {
+  key: 'italic',
+  label: 'Italic',
+  icon: italicIcon,
+  shortcut: `I`
+}, {
+  key: 'underline',
+  label: 'Underline',
+  icon: underlineIcon,
+  shortcut: `U`
+}, {
+  key: 'strikethrough',
+  label: 'Strikethrough',
+  icon: strikethroughIcon
+}, {
+  key: 'code',
+  label: 'Code',
+  icon: codeIcon
+}, {
+  key: 'superscript',
+  label: 'Superscript',
+  icon: superscriptIcon
+}, {
+  key: 'subscript',
+  label: 'Subscript',
+  icon: subscriptIcon
+}, {
+  key: 'clearFormatting',
+  label: 'Clear formatting',
+  icon: removeFormattingIcon
+}];
+function InlineMarks({
+  marks: _marksShown
+}) {
+  const {
+    editor,
+    clearFormatting: {
+      isDisabled
+    },
+    marks
+  } = useToolbarState();
+  const marksShown = useMemoStringified(_marksShown);
+  const selectedKeys = useMemoStringified(Object.keys(marks).filter(key => marks[key].isSelected));
+  const disabledKeys = useMemoStringified(Object.keys(marks).filter(key => marks[key].isDisabled).concat(isDisabled ? 'clearFormatting' : []));
+  return useMemo(() => {
+    const items = inlineMarks.filter(item => item.key === 'clearFormatting' || marksShown[item.key]);
+    return /*#__PURE__*/jsx(ActionGroup, {
+      UNSAFE_className: css({
+        minWidth: `calc(${tokenSchema.size.element.medium} * 4)`
+      }),
+      prominence: "low",
+      density: "compact",
+      buttonLabelBehavior: "hide",
+      overflowMode: "collapse",
+      summaryIcon: /*#__PURE__*/jsx(Icon, {
+        src: typeIcon
+      }),
+      items: items,
+      selectionMode: "multiple",
+      selectedKeys: selectedKeys,
+      disabledKeys: disabledKeys,
+      onAction: key => {
+        if (key === 'clearFormatting') {
+          clearFormatting(editor);
+        } else {
+          var _Editor$marks;
+          const mark = key;
+          if ((_Editor$marks = Editor.marks(editor)) !== null && _Editor$marks !== void 0 && _Editor$marks[mark]) {
+            Editor.removeMark(editor, mark);
+          } else {
+            Editor.addMark(editor, mark, true);
+          }
+        }
+        ReactEditor.focus(editor);
+      },
+      children: item => {
+        return /*#__PURE__*/jsxs(Item$1, {
+          textValue: item.label,
+          children: [/*#__PURE__*/jsx(Text, {
+            children: item.label
+          }), 'shortcut' in item && /*#__PURE__*/jsx(Kbd, {
+            meta: true,
+            children: item.shortcut
+          }), /*#__PURE__*/jsx(Icon, {
+            src: item.icon
+          })]
+        }, item.key);
+      }
+    });
+  }, [disabledKeys, editor, marksShown, selectedKeys]);
+}
+function useMemoStringified(value) {
+  return useMemo(() => value, [JSON.stringify(value)]);
+}
+function useEntryLayoutSplitPaneContext() {
+  return null;
+}
+const ToolbarContainer = ({
+  children
+}) => {
+  return /*#__PURE__*/jsx("div", {
+    className: css({
+      display: 'flex'
+    }),
+    children: children
+  });
+};
+const ToolbarWrapper = ({
+  children
+}) => {
+  let entryLayoutPane = useEntryLayoutSplitPaneContext();
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/jsx("div", {
+      "data-layout": entryLayoutPane,
+      className: css({
+        backdropFilter: 'blur(8px)',
+        backgroundClip: 'padding-box',
+        backgroundColor: `color-mix(in srgb, transparent, ${tokenSchema.color.background.canvas} 90%)`,
+        borderBottom: `${tokenSchema.size.border.regular} solid color-mix(in srgb, transparent, ${tokenSchema.color.foreground.neutral} 10%)`,
+        borderStartEndRadius: tokenSchema.size.radius.medium,
+        borderStartStartRadius: tokenSchema.size.radius.medium,
+        minWidth: 0,
+        position: 'sticky',
+        top: 0,
+        zIndex: 2,
+        '&[data-layout="main"]': {
+          borderRadius: 0
+        }
+      }),
+      children: /*#__PURE__*/jsx(ToolbarContainer, {
+        children: children
+      })
+    })
+  });
+};
+const ToolbarScrollArea = props => {
+  let entryLayoutPane = useEntryLayoutSplitPaneContext();
+  return /*#__PURE__*/jsx(Flex, {
+    "data-layout": entryLayoutPane,
+    paddingY: "regular",
+    paddingX: "medium",
+    gap: "large",
+    flex: true,
+    minWidth: 0,
+    UNSAFE_className: css({
+      msOverflowStyle: 'none' /* for Internet Explorer, Edge */,
+      scrollbarWidth: 'none' /* for Firefox */,
+      overflowX: 'auto',
+      /* for Chrome, Safari, and Opera */
+      '&::-webkit-scrollbar': {
+        display: 'none'
+      },
+      '&[data-layout="main"]': {
+        paddingInline: 0
+      }
+    }),
+    ...props
+  });
+};
+
+function HeadingElement({
+  attributes,
+  children,
+  element
+}) {
+  const Tag = `h${element.level}`;
+  return /*#__PURE__*/jsx(Tag, {
+    ...attributes,
+    style: {
+      textAlign: element.textAlign
+    },
+    children: children
+  });
+}
+
+const renderElement = props => {
+  switch (props.element.type) {
+    case 'layout':
+      return /*#__PURE__*/jsx(LayoutContainer, {
+        attributes: props.attributes,
+        children: props.children,
+        element: props.element
+      });
+    case 'layout-area':
+      return /*#__PURE__*/jsx(LayoutArea, {
+        ...props
+      });
+    case 'code':
+      return /*#__PURE__*/jsx(CodeElement, {
+        ...props
+      });
+    case 'component-block':
+      {
+        return /*#__PURE__*/jsx(ComponentBlocksElement, {
+          attributes: props.attributes,
+          children: props.children,
+          element: props.element
+        });
+      }
+    case 'component-inline-prop':
+    case 'component-block-prop':
+      return /*#__PURE__*/jsx(ComponentInlineProp, {
+        ...props
+      });
+    case 'heading':
+      return /*#__PURE__*/jsx(HeadingElement, {
+        attributes: props.attributes,
+        children: props.children,
+        element: props.element
+      });
+    case 'link':
+      return /*#__PURE__*/jsx(LinkElement, {
+        attributes: props.attributes,
+        children: props.children,
+        element: props.element
+      });
+    case 'ordered-list':
+      return /*#__PURE__*/jsx("ol", {
+        ...props.attributes,
+        children: props.children
+      });
+    case 'unordered-list':
+      return /*#__PURE__*/jsx("ul", {
+        ...props.attributes,
+        children: props.children
+      });
+    case 'list-item':
+      return /*#__PURE__*/jsx("li", {
+        ...props.attributes,
+        children: props.children
+      });
+    case 'list-item-content':
+      return /*#__PURE__*/jsx("span", {
+        ...props.attributes,
+        children: props.children
+      });
+    case 'blockquote':
+      return /*#__PURE__*/jsx(BlockquoteElement, {
+        ...props
+      });
+    case 'relationship':
+      return /*#__PURE__*/jsx(RelationshipElement, {
+        attributes: props.attributes,
+        children: props.children,
+        element: props.element
+      });
+    case 'divider':
+      return /*#__PURE__*/jsx(DividerElement, {
+        ...props
+      });
+    default:
+      return /*#__PURE__*/jsx("p", {
+        style: {
+          textAlign: props.element.textAlign
+        },
+        ...props.attributes,
+        children: props.children
+      });
+  }
+};
+
+/* Block Elements */
+
+const CodeElement = ({
+  attributes,
+  children
+}) => {
+  return /*#__PURE__*/jsx("pre", {
+    spellCheck: "false",
+    ...attributes,
+    children: /*#__PURE__*/jsx("code", {
+      children: children
+    })
+  });
+};
+function DividerElement({
+  attributes,
+  children
+}) {
+  const selected = useSelected();
+  return /*#__PURE__*/jsxs("div", {
+    ...attributes,
+    style: {
+      caretColor: 'transparent'
+    },
+    children: [/*#__PURE__*/jsx("hr", {
+      style: {
+        backgroundColor: selected ? tokenSchema.color.alias.borderSelected : tokenSchema.color.alias.borderIdle
+      }
+    }), children]
+  });
+}
+
+function getOptions(toolbarState, componentBlocks, relationships) {
+  const options = [...Object.entries(relationships).map(([relationship, {
+    label
+  }]) => ({
+    label,
+    insert: editor => {
+      Transforms.insertNodes(editor, {
+        type: 'relationship',
+        relationship,
+        data: null,
+        children: [{
+          text: ''
+        }]
+      });
+    }
+  })), ...Object.keys(componentBlocks).map(key => ({
+    label: componentBlocks[key].label,
+    insert: editor => {
+      insertComponentBlock(editor, componentBlocks, key);
+    }
+  })), ...toolbarState.textStyles.allowedHeadingLevels.filter(a => toolbarState.editorDocumentFeatures.formatting.headingLevels.includes(a)).map(level => ({
+    label: `Heading ${level}`,
+    insert(editor) {
+      insertNodesButReplaceIfSelectionIsAtEmptyParagraphOrHeading(editor, {
+        type: 'heading',
+        level,
+        children: [{
+          text: ''
+        }]
+      });
+    }
+  })), !toolbarState.blockquote.isDisabled && toolbarState.editorDocumentFeatures.formatting.blockTypes.blockquote && {
+    label: 'Blockquote',
+    insert(editor) {
+      insertNodesButReplaceIfSelectionIsAtEmptyParagraphOrHeading(editor, {
+        type: 'blockquote',
+        children: [{
+          text: ''
+        }]
+      });
+    }
+  }, !toolbarState.code.isDisabled && toolbarState.editorDocumentFeatures.formatting.blockTypes.code && {
+    label: 'Code block',
+    insert(editor) {
+      insertNodesButReplaceIfSelectionIsAtEmptyParagraphOrHeading(editor, {
+        type: 'code',
+        children: [{
+          text: ''
+        }]
+      });
+    }
+  }, !toolbarState.dividers.isDisabled && toolbarState.editorDocumentFeatures.dividers && {
+    label: 'Divider',
+    insert(editor) {
+      insertNodesButReplaceIfSelectionIsAtEmptyParagraphOrHeading(editor, {
+        type: 'divider',
+        children: [{
+          text: ''
+        }]
+      });
+    }
+  }, !!toolbarState.editorDocumentFeatures.layouts.length && {
+    label: 'Layout',
+    insert(editor) {
+      insertLayout(editor, toolbarState.editorDocumentFeatures.layouts[0]);
+    }
+  }, !toolbarState.lists.ordered.isDisabled && toolbarState.editorDocumentFeatures.formatting.listTypes.ordered && {
+    label: 'Numbered List',
+    keywords: ['ordered list'],
+    insert(editor) {
+      insertNodesButReplaceIfSelectionIsAtEmptyParagraphOrHeading(editor, {
+        type: 'ordered-list',
+        children: [{
+          text: ''
+        }]
+      });
+    }
+  }, !toolbarState.lists.unordered.isDisabled && toolbarState.editorDocumentFeatures.formatting.listTypes.unordered && {
+    label: 'Bullet List',
+    keywords: ['unordered list'],
+    insert(editor) {
+      insertNodesButReplaceIfSelectionIsAtEmptyParagraphOrHeading(editor, {
+        type: 'unordered-list',
+        children: [{
+          text: ''
+        }]
+      });
+    }
+  }];
+  return options.filter(x => typeof x !== 'boolean');
+}
+function insertOption(editor, text, option) {
+  const path = ReactEditor.findPath(editor, text);
+  Transforms.delete(editor, {
+    at: {
+      focus: Editor.start(editor, path),
+      anchor: Editor.end(editor, path)
+    }
+  });
+  option.insert(editor);
+}
+function InsertMenu({
+  children,
+  text
+}) {
+  const toolbarState = useToolbarState();
+  const {
+    editor
+  } = toolbarState;
+  const componentBlocks = useContext(ComponentBlockContext);
+  const relationships = useDocumentFieldRelationships();
+  const options = matchSorter(getOptions(toolbarState, componentBlocks, relationships), text.text.slice(1), {
+    keys: ['label', 'keywords']
+  }).map((option, index) => ({
+    ...option,
+    index
+  }));
+  const stateRef = useRef({
+    options,
+    text
+  });
+  useEffect(() => {
+    stateRef.current = {
+      options,
+      text
+    };
+  });
+  const listenerRef = useRef(_event => {});
+  useEffect(() => {
+    listenerRef.current = event => {
+      if (event.defaultPrevented) return;
+      switch (event.key) {
+        case 'ArrowDown':
+          {
+            if (stateRef.current.options.length) {
+              event.preventDefault();
+              state.selectionManager.setFocused(true);
+              state.selectionManager.setFocusedKey((Number(state.selectionManager.focusedKey) === stateRef.current.options.length - 1 ? 0 : Number(state.selectionManager.focusedKey) + 1).toString());
+            }
+            return;
+          }
+        case 'ArrowUp':
+          {
+            if (stateRef.current.options.length) {
+              event.preventDefault();
+              state.selectionManager.setFocused(true);
+              state.selectionManager.setFocusedKey((state.selectionManager.focusedKey === '0' ? stateRef.current.options.length - 1 : Number(state.selectionManager.focusedKey) - 1).toString());
+            }
+            return;
+          }
+        case 'Enter':
+          {
+            const option = stateRef.current.options[Number(state.selectionManager.focusedKey)];
+            if (option) {
+              insertOption(editor, stateRef.current.text, option);
+              event.preventDefault();
+            }
+            return;
+          }
+        case 'Escape':
+          {
+            const path = ReactEditor.findPath(editor, stateRef.current.text);
+            Transforms.unsetNodes(editor, 'insertMenu', {
+              at: path
+            });
+            event.preventDefault();
+            return;
+          }
+      }
+    };
+  });
+  useEffect(() => {
+    const domNode = ReactEditor.toDOMNode(editor, editor);
+    let listener = event => listenerRef.current(event);
+    domNode.addEventListener('keydown', listener);
+    return () => {
+      domNode.removeEventListener('keydown', listener);
+    };
+  }, [editor]);
+  const triggerRef = useRef(null);
+  const overlayState = useOverlayTriggerState({
+    isOpen: true
+  });
+  const {
+    triggerProps: {
+      onPress,
+      ...triggerProps
+    },
+    overlayProps
+  } = useOverlayTrigger({
+    type: 'listbox'
+  }, overlayState, triggerRef);
+  let state = useListState({
+    items: options,
+    children: item => /*#__PURE__*/jsx(Item$2, {
+      children: item.label
+    }, item.index)
+  });
+  useEffect(() => {
+    if (!state.selectionManager.isFocused && state.collection.size) {
+      state.selectionManager.setFocused(true);
+      state.selectionManager.setFocusedKey('0');
+    }
+  }, [state]);
+  const scrollableRef = useRef(null);
+  useEffect(() => {
+    var _scrollableRef$curren;
+    const element = (_scrollableRef$curren = scrollableRef.current) === null || _scrollableRef$curren === void 0 || (_scrollableRef$curren = _scrollableRef$curren.querySelector('[role="listbox"] [role="presentation"]')) === null || _scrollableRef$curren === void 0 ? void 0 : _scrollableRef$curren.children[state.selectionManager.focusedKey];
+    if (element) {
+      scrollIntoView(element, {
+        scrollMode: 'if-needed',
+        boundary: scrollableRef.current,
+        block: 'nearest'
+      });
+    }
+  }, [state.selectionManager.focusedKey]);
+  const listboxRef = useRef(null);
+  let layout = useListBoxLayout();
+  return /*#__PURE__*/jsxs(Fragment$1, {
+    children: [/*#__PURE__*/jsx("span", {
+      ...triggerProps,
+      role: "button",
+      className: css({
+        color: tokenSchema.color.foreground.accent,
+        fontWeight: tokenSchema.typography.fontWeight.medium
+      }),
+      ref: triggerRef,
+      children: children
+    }), /*#__PURE__*/jsx(Popover, {
+      width: "alias.singleLineWidth",
+      placement: "bottom start",
+      isNonModal: true,
+      hideArrow: true,
+      ...overlayProps,
+      state: overlayState,
+      triggerRef: triggerRef,
+      children: /*#__PURE__*/jsx("div", {
+        className: css({
+          overflow: 'scroll',
+          maxHeight: 300
+        }),
+        ref: scrollableRef,
+        children: /*#__PURE__*/jsx(ListBoxBase, {
+          state: state,
+          shouldUseVirtualFocus: true,
+          layout: layout,
+          ref: listboxRef,
+          onAction: key => {
+            insertOption(editor, text, options[key]);
+          }
+        })
+      })
+    })]
+  });
+}
+
+function Placeholder({
+  placeholder,
+  children
+}) {
+  const [width, setWidth] = useState(0);
+  return /*#__PURE__*/jsxs("span", {
+    className: css({
+      position: 'relative',
+      display: 'inline-block',
+      width
+    }),
+    children: [/*#__PURE__*/jsx("span", {
+      contentEditable: false,
+      className: css({
+        position: 'absolute',
+        pointerEvents: 'none',
+        display: 'inline-block',
+        left: 0,
+        top: 0,
+        maxWidth: '100%',
+        whiteSpace: 'nowrap',
+        opacity: '0.5',
+        userSelect: 'none',
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+        textDecoration: 'none',
+        textAlign: 'left'
+      }),
+      children: /*#__PURE__*/jsx("span", {
+        ref: node => {
+          if (node) {
+            const offsetWidth = node.offsetWidth;
+            if (offsetWidth !== width) {
+              setWidth(offsetWidth);
+            }
+          }
+        },
+        children: placeholder
+      })
+    }), children]
+  });
+}
+const Leaf = ({
+  leaf,
+  text,
+  children,
+  attributes
+}) => {
+  const {
+    underline,
+    strikethrough,
+    bold,
+    italic,
+    code,
+    keyboard,
+    superscript,
+    subscript,
+    placeholder,
+    insertMenu
+  } = leaf;
+  if (placeholder !== undefined) {
+    children = /*#__PURE__*/jsx(Placeholder, {
+      placeholder: placeholder,
+      children: children
+    });
+  }
+  if (insertMenu) {
+    children = /*#__PURE__*/jsx(InsertMenu, {
+      text: text,
+      children: children
+    });
+  }
+  if (code) {
+    children = /*#__PURE__*/jsx("code", {
+      children: children
+    });
+  }
+  if (bold) {
+    children = /*#__PURE__*/jsx("strong", {
+      children: children
+    });
+  }
+  if (strikethrough) {
+    children = /*#__PURE__*/jsx("s", {
+      children: children
+    });
+  }
+  if (italic) {
+    children = /*#__PURE__*/jsx("em", {
+      children: children
+    });
+  }
+  if (keyboard) {
+    children = /*#__PURE__*/jsx("kbd", {
+      children: children
+    });
+  }
+  if (superscript) {
+    children = /*#__PURE__*/jsx("sup", {
+      children: children
+    });
+  }
+  if (subscript) {
+    children = /*#__PURE__*/jsx("sub", {
+      children: children
+    });
+  }
+  if (underline) {
+    children = /*#__PURE__*/jsx("u", {
+      children: children
+    });
+  }
+  return /*#__PURE__*/jsx("span", {
+    ...attributes,
+    children: children
+  });
+};
+const renderLeaf = props => {
+  return /*#__PURE__*/jsx(Leaf, {
+    ...props
+  });
+};
+
+const styles = css({
+  flex: 1,
+  background: tokenSchema.color.background.canvas,
+  borderColor: tokenSchema.color.alias.borderIdle,
+  outline: 0,
+  padding: tokenSchema.size.space.medium,
+  minHeight: 120,
+  scrollbarGutter: 'stable',
+  overflowY: 'auto',
+  height: 224,
+  resize: 'vertical',
+  borderBottomLeftRadius: tokenSchema.size.radius.medium,
+  borderBottomRightRadius: tokenSchema.size.radius.medium,
+  '&[data-expanded=true]': {
+    // the !important is necessary to override the height set by resizing as an inline style
+    height: 'auto !important',
+    resize: 'none'
+  },
+  'ol ol ol ol ol ol ol ol ol': {
+    listStyle: 'lower-roman'
+  },
+  'ol ol ol ol ol ol ol ol': {
+    listStyle: 'lower-alpha'
+  },
+  'ol ol ol ol ol ol ol': {
+    listStyle: 'decimal'
+  },
+  'ol ol ol ol ol ol': {
+    listStyle: 'lower-roman'
+  },
+  'ol ol ol ol ol': {
+    listStyle: 'lower-alpha'
+  },
+  'ol ol ol ol': {
+    listStyle: 'decimal'
+  },
+  'ol ol ol': {
+    listStyle: 'lower-roman'
+  },
+  'ol ol': {
+    listStyle: 'lower-alpha'
+  },
+  ol: {
+    listStyle: 'decimal'
+  },
+  'ul ul ul ul ul ul ul ul ul': {
+    listStyle: 'square'
+  },
+  'ul ul ul ul ul ul ul ul': {
+    listStyle: 'circle'
+  },
+  'ul ul ul ul ul ul ul': {
+    listStyle: 'disc'
+  },
+  'ul ul ul ul ul ul': {
+    listStyle: 'square'
+  },
+  'ul ul ul ul ul': {
+    listStyle: 'circle'
+  },
+  'ul ul ul ul': {
+    listStyle: 'disc'
+  },
+  'ul ul ul': {
+    listStyle: 'square'
+  },
+  'ul ul': {
+    listStyle: 'circle'
+  },
+  ul: {
+    listStyle: 'disc'
+  }
+});
+const HOTKEYS = {
+  'mod+b': 'bold',
+  'mod+i': 'italic',
+  'mod+u': 'underline'
+};
+function isMarkActive(editor, mark) {
+  const marks = Editor.marks(editor);
+  if (marks !== null && marks !== void 0 && marks[mark]) {
+    return true;
+  }
+  // see the stuff about marks in toolbar-state for why this is here
+  for (const entry of Editor.nodes(editor, {
+    match: Text$1.isText
+  })) {
+    if (entry[0][mark]) {
+      return true;
+    }
+  }
+  return false;
+}
+const getKeyDownHandler = editor => event => {
+  if (event.defaultPrevented) return;
+  for (const hotkey in HOTKEYS) {
+    if (isHotkey(hotkey, event.nativeEvent)) {
+      event.preventDefault();
+      const mark = HOTKEYS[hotkey];
+      const isActive = isMarkActive(editor, mark);
+      if (isActive) {
+        Editor.removeMark(editor, mark);
+      } else {
+        Editor.addMark(editor, mark, true);
+      }
+      return;
+    }
+  }
+  if (isHotkey('mod+\\', event.nativeEvent)) {
+    clearFormatting(editor);
+    return;
+  }
+  if (isHotkey('mod+k', event.nativeEvent)) {
+    event.preventDefault();
+    wrapLink(editor, '');
+    return;
+  }
+  if (event.key === 'Tab') {
+    const didAction = event.shiftKey ? unnestList(editor) : nestList(editor);
+    if (didAction) {
+      event.preventDefault();
+      return;
+    }
+  }
+  if (event.key === 'Tab' && editor.selection) {
+    const layoutArea = Editor.above(editor, {
+      match: node => node.type === 'layout-area'
+    });
+    if (layoutArea) {
+      const layoutAreaToEnter = event.shiftKey ? Editor.before(editor, layoutArea[1], {
+        unit: 'block'
+      }) : Editor.after(editor, layoutArea[1], {
+        unit: 'block'
+      });
+      Transforms.setSelection(editor, {
+        anchor: layoutAreaToEnter,
+        focus: layoutAreaToEnter
+      });
+      event.preventDefault();
+    }
+  }
+};
+function DocumentEditor({
+  onChange,
+  value,
+  componentBlocks,
+  relationships,
+  documentFeatures,
+  initialExpanded = true,
+  ...props
+}) {
+  const [expanded, setExpanded] = useState(initialExpanded);
+  const editor = useMemo(() => createDocumentEditor(documentFeatures, componentBlocks, relationships, {
+    ReactEditor,
+    withReact
+  }), [documentFeatures, componentBlocks, relationships]);
+  return /*#__PURE__*/jsx(KeystarProvider, {
+    children: /*#__PURE__*/jsx("div", {
+      className: css({
+        border: `${tokenSchema.size.border.regular} solid ${tokenSchema.color.border.neutral}`,
+        borderRadius: tokenSchema.size.radius.medium
+      }),
+      children: /*#__PURE__*/jsxs(DocumentEditorProvider, {
+        componentBlocks: componentBlocks,
+        documentFeatures: documentFeatures,
+        relationships: relationships,
+        editor: editor,
+        value: value,
+        onChange: value => {
+          onChange === null || onChange === void 0 || onChange(value);
+          // this fixes a strange issue in Safari where the selection stays inside of the editor
+          // after a blur event happens but the selection is still in the editor
+          // so the cursor is visually in the wrong place and it inserts text backwards
+          const selection = window.getSelection();
+          if (selection && !ReactEditor.isFocused(editor)) {
+            const editorNode = ReactEditor.toDOMNode(editor, editor);
+            if (selection.anchorNode === editorNode) {
+              ReactEditor.focus(editor);
+            }
+          }
+        },
+        children: [useMemo(() => onChange !== undefined && /*#__PURE__*/jsx(Toolbar, {
+          documentFeatures: documentFeatures,
+          viewState: {
+            expanded,
+            toggle: () => {
+              setExpanded(v => !v);
+            }
+          }
+        }), [expanded, documentFeatures, onChange]), /*#__PURE__*/jsx(Prose, {
+          size: "regular",
+          children: /*#__PURE__*/jsx(DocumentEditorEditable, {
+            "data-expanded": expanded,
+            ...props,
+            readOnly: onChange === undefined
+          })
+        })]
+      })
+    })
+  });
+}
+function DocumentEditorProvider({
+  children,
+  editor,
+  onChange,
+  value,
+  componentBlocks,
+  documentFeatures,
+  relationships
+}) {
+  const identity = useMemo(() => Math.random().toString(36), [editor]);
+  return /*#__PURE__*/jsx(Slate
+  // this fixes issues with Slate crashing when a fast refresh occcurs
+  , {
+    editor: editor,
+    initialValue: value,
+    onChange: value => {
+      onChange(value);
+      // this fixes a strange issue in Safari where the selection stays inside of the editor
+      // after a blur event happens but the selection is still in the editor
+      // so the cursor is visually in the wrong place and it inserts text backwards
+      const selection = window.getSelection();
+      if (selection && !ReactEditor.isFocused(editor)) {
+        const editorNode = ReactEditor.toDOMNode(editor, editor);
+        if (selection.anchorNode === editorNode) {
+          ReactEditor.focus(editor);
+        }
+      }
+    },
+    children: /*#__PURE__*/jsx(ToolbarStateProvider, {
+      componentBlocks: componentBlocks,
+      editorDocumentFeatures: documentFeatures,
+      relationships: relationships,
+      children: children
+    })
+  }, identity);
+}
+function DocumentEditorEditable(props) {
+  var _props$className;
+  const editor = useSlate();
+  const componentBlocks = useContext(ComponentBlockContext);
+  const onKeyDown = useMemo(() => getKeyDownHandler(editor), [editor]);
+  return /*#__PURE__*/jsx(ActiveBlockPopoverProvider, {
+    editor: editor,
+    children: /*#__PURE__*/jsx(Editable, {
+      decorate: useCallback(([node, path]) => {
+        const decorations = [];
+        if (node.type === 'component-block') {
+          if (node.children.length === 1 && Element.isElement(node.children[0]) && node.children[0].type === 'component-inline-prop' && node.children[0].propPath === undefined) {
+            return decorations;
+          }
+          node.children.forEach((child, index) => {
+            if (Node.string(child) === '' && Element.isElement(child) && (child.type === 'component-block-prop' || child.type === 'component-inline-prop') && child.propPath !== undefined) {
+              const start = Editor.start(editor, [...path, index]);
+              const placeholder = getPlaceholderTextForPropPath(child.propPath, componentBlocks[node.component].schema, node.props);
+              if (placeholder) {
+                decorations.push({
+                  placeholder,
+                  anchor: start,
+                  focus: start
+                });
+              }
+            }
+          });
+        }
+        return decorations;
+      }, [editor, componentBlocks]),
+      className: `${styles} ${(_props$className = props.className) !== null && _props$className !== void 0 ? _props$className : ''}`,
+      onKeyDown: onKeyDown,
+      renderElement: renderElement,
+      renderLeaf: renderLeaf,
+      ...props
+    })
+  });
+}
+
+// Field 组件用于在编辑视图中显示字段值
+function Field(props) {
+  const {
+    autoFocus,
+    field,
+    forceValidation,
+    onChange,
+    value
+  } = props;
+  return /*#__PURE__*/jsx(Field$1, {
+    label: field.label,
+    description: field.description,
+    children: inputProps => /*#__PURE__*/jsx(ForceValidationProvider, {
+      value: !!forceValidation,
+      children: /*#__PURE__*/jsx(DocumentEditor, {
+        ...inputProps,
+        autoFocus: autoFocus,
+        componentBlocks: field.componentBlocks,
+        documentFeatures: field.documentFeatures,
+        onChange: onChange,
+        relationships: field.relationships,
+        value: value
+      })
+    })
+  });
+}
+
+export { Field as default };