lkb-fields-document 1.0.0 → 1.0.1

package/dist/Field-35b79e6b.node.esm.js

@@ -1,1619 +0,0 @@
-'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-a6e340e6.node.esm.js';
-import { u as clearFormatting, k as insertNodesButReplaceIfSelectionIsAtEmptyParagraphOrHeading, v as getPlaceholderTextForPropPath } from './utils-200ff260.node.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-945823b8.node.esm.js';
-import { i as isValidURL } from './index-586adb8f.node.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-e653b908.node.esm.js';
-import { t as toggleList, i as insertLayout, u as unnestList, h as nestList } from './shared-5e864055.node.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-c32e360e.node.esm.js';
-import 'lkb-core';
-import '@keystar/ui/drag-and-drop';
-import './form-from-preview-5df6e492.node.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 };