@makeswift/runtime 0.8.9 → 0.8.10

package/dist/index.cjs9.js

@@ -0,0 +1,370 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var React = require("react");
+var slate$1 = require("slate");
+var slateReact = require("slate-react");
+var css = require("@emotion/css");
+var boxModels = require("./box-models.cjs.js");
+var descriptors = require("./descriptors.cjs.js");
+var leaf = require("./leaf.cjs.js");
+var next = require("./index.cjs.js");
+var slate = require("./slate.cjs2.js");
+var jsxRuntime = require("react/jsx-runtime");
+var index = require("./index.cjs3.js");
+var isHotkey = require("is-hotkey");
+var index$1 = require("./index.cjs5.js");
+var useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect.cjs.js");
+require("css-box-model");
+require("./actions.cjs.js");
+require("./introspection.cjs.js");
+require("./state/breakpoints.cjs.js");
+require("use-sync-external-store/shim/with-selector");
+require("next/dynamic");
+require("./constants.cjs.js");
+require("redux");
+require("redux-thunk");
+require("@emotion/serialize");
+require("@emotion/utils");
+require("./text-input.cjs.js");
+require("./combobox.cjs.js");
+require("use-sync-external-store/shim");
+require("./types.cjs.js");
+require("color");
+require("scroll-into-view-if-needed");
+require("react-dom");
+require("html-react-parser");
+require("next/head");
+require("@emotion/server/create-instance");
+require("next/document");
+require("cors");
+require("path-to-regexp");
+require("cookie");
+require("http-proxy");
+require("set-cookie-parser");
+require("uuid");
+require("corporate-ipsum");
+require("next/link");
+require("./element.cjs.js");
+function _interopDefaultLegacy(e) {
+  return e && typeof e === "object" && "default" in e ? e : { "default": e };
+}
+var isHotkey__default = /* @__PURE__ */ _interopDefaultLegacy(isHotkey);
+function BlockElement({
+  element,
+  attributes,
+  children
+}) {
+  const blockStyles = [next.useStyle({
+    margin: 0
+  }), next.useStyle(next.useResponsiveStyle([element.textAlign], ([textAlign = "left"]) => ({
+    textAlign
+  })))];
+  switch (element.type) {
+    case slate.BlockType.Text:
+      return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues({}, attributes), {
+        className: css.cx(...blockStyles),
+        children
+      }));
+    case slate.BlockType.Paragraph:
+      return /* @__PURE__ */ jsxRuntime.jsx("p", __spreadProps(__spreadValues({}, attributes), {
+        className: css.cx(...blockStyles),
+        children
+      }));
+    case slate.BlockType.Heading1:
+      return /* @__PURE__ */ jsxRuntime.jsx("h1", __spreadProps(__spreadValues({}, attributes), {
+        className: css.cx(...blockStyles),
+        children
+      }));
+    case slate.BlockType.Heading2:
+      return /* @__PURE__ */ jsxRuntime.jsx("h2", __spreadProps(__spreadValues({}, attributes), {
+        className: css.cx(...blockStyles),
+        children
+      }));
+    case slate.BlockType.Heading3:
+      return /* @__PURE__ */ jsxRuntime.jsx("h3", __spreadProps(__spreadValues({}, attributes), {
+        className: css.cx(...blockStyles),
+        children
+      }));
+    case slate.BlockType.Heading4:
+      return /* @__PURE__ */ jsxRuntime.jsx("h4", __spreadProps(__spreadValues({}, attributes), {
+        className: css.cx(...blockStyles),
+        children
+      }));
+    case slate.BlockType.Heading5:
+      return /* @__PURE__ */ jsxRuntime.jsx("h5", __spreadProps(__spreadValues({}, attributes), {
+        className: css.cx(...blockStyles),
+        children
+      }));
+    case slate.BlockType.Heading6:
+      return /* @__PURE__ */ jsxRuntime.jsx("h6", __spreadProps(__spreadValues({}, attributes), {
+        className: css.cx(...blockStyles),
+        children
+      }));
+    case slate.BlockType.BlockQuote:
+      return /* @__PURE__ */ jsxRuntime.jsx("blockquote", __spreadProps(__spreadValues({}, attributes), {
+        className: css.cx(...blockStyles, next.useStyle({
+          padding: "0.5em 10px",
+          fontSize: "1.25em",
+          fontWeight: "300",
+          borderLeft: "5px solid rgba(0, 0, 0, 0.1)"
+        })),
+        children
+      }));
+    case slate.BlockType.OrderedList:
+      return /* @__PURE__ */ jsxRuntime.jsx("ol", __spreadProps(__spreadValues({}, attributes), {
+        className: css.cx(...blockStyles),
+        style: {
+          listStylePosition: "inside"
+        },
+        children
+      }));
+    case slate.BlockType.UnorderedList:
+      return /* @__PURE__ */ jsxRuntime.jsx("ul", __spreadProps(__spreadValues({}, attributes), {
+        className: css.cx(...blockStyles),
+        style: {
+          listStylePosition: "inside"
+        },
+        children
+      }));
+    case slate.BlockType.ListItem:
+      return /* @__PURE__ */ jsxRuntime.jsx("li", __spreadProps(__spreadValues({}, attributes), {
+        className: css.cx(...blockStyles),
+        children
+      }));
+    case slate.BlockType.ListItemChild:
+      return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues({}, attributes), {
+        className: css.cx(...blockStyles),
+        children
+      }));
+  }
+}
+function StyledLink(_a) {
+  var _b = _a, {
+    className
+  } = _b, restOfProps = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Link, __spreadProps(__spreadValues({}, restOfProps), {
+    className: css.cx(next.useStyle({
+      textDecoration: "none"
+    }), className)
+  }));
+}
+function InlineElement({
+  element,
+  attributes,
+  children
+}) {
+  switch (element.type) {
+    case slate.InlineType.Code:
+      return /* @__PURE__ */ jsxRuntime.jsx("code", __spreadProps(__spreadValues({}, attributes), {
+        children
+      }));
+    case slate.InlineType.SuperScript:
+      return /* @__PURE__ */ jsxRuntime.jsx("sup", __spreadProps(__spreadValues({}, attributes), {
+        children
+      }));
+    case slate.InlineType.SubScript:
+      return /* @__PURE__ */ jsxRuntime.jsx("sub", __spreadProps(__spreadValues({}, attributes), {
+        children
+      }));
+    case slate.InlineType.Link:
+      return /* @__PURE__ */ jsxRuntime.jsx(StyledLink, __spreadProps(__spreadValues({}, attributes), {
+        link: element.link,
+        children
+      }));
+  }
+}
+function Element(_c) {
+  var _d = _c, {
+    element
+  } = _d, props = __objRest(_d, [
+    "element"
+  ]);
+  switch (element.type) {
+    case slate.InlineType.Code:
+    case slate.InlineType.SuperScript:
+    case slate.InlineType.SubScript:
+    case slate.InlineType.Link:
+      return /* @__PURE__ */ jsxRuntime.jsx(InlineElement, __spreadValues({
+        element
+      }, props));
+    case slate.BlockType.Paragraph:
+    case slate.BlockType.Heading1:
+    case slate.BlockType.Heading2:
+    case slate.BlockType.Heading3:
+    case slate.BlockType.BlockQuote:
+    case slate.BlockType.OrderedList:
+    case slate.BlockType.UnorderedList:
+    case slate.BlockType.ListItem:
+    case slate.BlockType.ListItemChild:
+      return /* @__PURE__ */ jsxRuntime.jsx(BlockElement, __spreadValues({
+        element
+      }, props));
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues({}, props.attributes), {
+        children: props.children
+      }));
+  }
+}
+const COMMIT_DEBOUNCE_DELAY = 500;
+function useSyncWithBuilder(editor, text) {
+  const [shouldCommit, setShouldCommit] = React.useState(true);
+  const isInBuilder = next.useIsInBuilder();
+  React.useEffect(() => {
+    if (shouldCommit && text && isInBuilder) {
+      const nextValue = descriptors.richTextDTOtoDAO(text);
+      const nextSelection = descriptors.richTextDTOtoSelection(text);
+      if (!next.deepEqual(editor.children, nextValue) || !next.deepEqual(editor.selection, nextSelection)) {
+        editor.children = nextValue;
+        editor.selection = nextSelection;
+        editor.onChange();
+      }
+    }
+  }, [editor, shouldCommit, text]);
+  React.useEffect(() => {
+    if (shouldCommit)
+      return;
+    const timeoutId = window.setTimeout(() => {
+      setShouldCommit(true);
+    }, COMMIT_DEBOUNCE_DELAY);
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [shouldCommit]);
+  return React.useCallback(() => setShouldCommit(false), []);
+}
+function useSyncDOMSelection(editor, isEnabled) {
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    if (!isEnabled || editor.selection == null || slateReact.ReactEditor.isFocused(editor))
+      return;
+    try {
+      const root = slateReact.ReactEditor.findDocumentOrShadowRoot(editor);
+      const domSelection = root.getSelection();
+      const newDomRange = slateReact.ReactEditor.toDOMRange(editor, editor.selection);
+      if (newDomRange) {
+        if (slate$1.Range.isBackward(editor.selection)) {
+          domSelection == null ? void 0 : domSelection.setBaseAndExtent(newDomRange.endContainer, newDomRange.endOffset, newDomRange.startContainer, newDomRange.startOffset);
+        } else {
+          domSelection == null ? void 0 : domSelection.setBaseAndExtent(newDomRange.startContainer, newDomRange.startOffset, newDomRange.endContainer, newDomRange.endOffset);
+        }
+      } else {
+        domSelection == null ? void 0 : domSelection.removeAllRanges();
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  });
+}
+const defaultText = [{
+  type: slate.BlockType.Paragraph,
+  children: [{
+    text: ""
+  }]
+}];
+const EditableText = React.forwardRef(function EditableText2({
+  id,
+  text,
+  width,
+  margin
+}, ref) {
+  const [editor] = React.useState(() => index$1.withBlock(index$1.withTypography(index$1.withList(index$1.withBuilder(slateReact.withReact(slate$1.createEditor()))))));
+  const [isPreservingDOMSElection, setIsPreservingDOMSelection] = React.useState(false);
+  useSyncDOMSelection(editor, isPreservingDOMSElection);
+  const delaySync = useSyncWithBuilder(editor, text);
+  const editMode = next.useBuilderEditMode();
+  const [propControllers, setPropControllers] = React.useState(null);
+  const controller = propControllers == null ? void 0 : propControllers.text;
+  React.useEffect(() => {
+    if (controller == null)
+      return;
+    const element = slateReact.ReactEditor.toDOMNode(editor, editor);
+    return next.pollBoxModel({
+      element,
+      onBoxModelChange: (boxModel) => controller.changeBoxModel(boxModel)
+    });
+  }, [editor, controller]);
+  React.useImperativeHandle(ref, () => ({
+    getDomNode() {
+      return slateReact.ReactEditor.toDOMNode(editor, editor);
+    },
+    getBoxModel() {
+      return boxModels.getBox(slateReact.ReactEditor.toDOMNode(editor, editor));
+    },
+    setPropControllers
+  }), [editor, setPropControllers]);
+  const initialValue = React.useMemo(() => text ? descriptors.richTextDTOtoDAO(text) : defaultText, [text]);
+  React.useEffect(() => {
+    controller == null ? void 0 : controller.setSlateEditor(editor);
+  }, [controller, editor]);
+  const handleFocus = React.useCallback(() => {
+    controller == null ? void 0 : controller.focus();
+    setIsPreservingDOMSelection(true);
+  }, [controller]);
+  const handleKeyDown = React.useCallback((e) => {
+    if (isHotkey__default["default"]("mod+shift+z", e))
+      return controller == null ? void 0 : controller.redo();
+    if (isHotkey__default["default"]("mod+z", e))
+      return controller == null ? void 0 : controller.undo();
+    if (isHotkey__default["default"]("escape")(e))
+      return controller == null ? void 0 : controller.blur();
+    index$1.onKeyDown(e, editor);
+  }, [controller, editor]);
+  const handleBlur = React.useCallback((e) => {
+    if (e.relatedTarget == null)
+      return;
+    setIsPreservingDOMSelection(false);
+    slateReact.ReactEditor.deselect(editor);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(slateReact.Slate, {
+    editor,
+    value: initialValue,
+    onChange: delaySync,
+    children: /* @__PURE__ */ jsxRuntime.jsx(slateReact.Editable, {
+      id,
+      renderLeaf: leaf.Leaf,
+      renderElement: Element,
+      onFocus: handleFocus,
+      onKeyDown: handleKeyDown,
+      onBlur: handleBlur,
+      className: css.cx(width, margin),
+      readOnly: editMode !== descriptors.BuilderEditMode.CONTENT,
+      placeholder: "Write some text..."
+    })
+  });
+});
+var EditableText$1 = EditableText;
+exports.EditableText = EditableText;
+exports["default"] = EditableText$1;
+//# sourceMappingURL=index.cjs9.js.map

package/dist/index.cjs9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs9.js","sources":["../src/components/builtin/Text/components/Element/block.tsx","../src/components/builtin/Text/components/Element/inline.tsx","../src/components/builtin/Text/components/Element/element.tsx","../src/components/builtin/Text/EditableText/useSyncWithBuilder.tsx","../src/components/builtin/Text/EditableText/useSyncDOMSelection.tsx","../src/components/builtin/Text/EditableText/editable-text.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { RenderElementProps } from 'slate-react'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../../../utils/responsive-style'\nimport { Block, BlockType } from '../../../../../../types/slate'\n\nexport interface InlineRenderElementProps extends RenderElementProps {\n  element: Block\n}\n\nexport function BlockElement({ element, attributes, children }: InlineRenderElementProps) {\n  const blockStyles = [\n    useStyle({ margin: 0 }),\n    useStyle(useResponsiveStyle([element.textAlign], ([textAlign = 'left']) => ({ textAlign }))),\n  ]\n\n  switch (element.type) {\n    case BlockType.Text:\n      return (\n        <span {...attributes} className={cx(...blockStyles)}>\n          {children}\n        </span>\n      )\n    case BlockType.Paragraph:\n      return (\n        <p {...attributes} className={cx(...blockStyles)}>\n          {children}\n        </p>\n      )\n    case BlockType.Heading1:\n      return (\n        <h1 {...attributes} className={cx(...blockStyles)}>\n          {children}\n        </h1>\n      )\n    case BlockType.Heading2:\n      return (\n        <h2 {...attributes} className={cx(...blockStyles)}>\n          {children}\n        </h2>\n      )\n    case BlockType.Heading3:\n      return (\n        <h3 {...attributes} className={cx(...blockStyles)}>\n          {children}\n        </h3>\n      )\n    case BlockType.Heading4:\n      return (\n        <h4 {...attributes} className={cx(...blockStyles)}>\n          {children}\n        </h4>\n      )\n    case BlockType.Heading5:\n      return (\n        <h5 {...attributes} className={cx(...blockStyles)}>\n          {children}\n        </h5>\n      )\n    case BlockType.Heading6:\n      return (\n        <h6 {...attributes} className={cx(...blockStyles)}>\n          {children}\n        </h6>\n      )\n    case BlockType.BlockQuote:\n      return (\n        <blockquote\n          {...attributes}\n          className={cx(\n            ...blockStyles,\n            useStyle({\n              padding: '0.5em 10px',\n              fontSize: '1.25em',\n              fontWeight: '300',\n              borderLeft: '5px solid rgba(0, 0, 0, 0.1)',\n            }),\n          )}\n        >\n          {children}\n        </blockquote>\n      )\n    case BlockType.OrderedList:\n      return (\n        <ol {...attributes} className={cx(...blockStyles)} style={{ listStylePosition: 'inside' }}>\n          {children}\n        </ol>\n      )\n    case BlockType.UnorderedList:\n      return (\n        <ul {...attributes} className={cx(...blockStyles)} style={{ listStylePosition: 'inside' }}>\n          {children}\n        </ul>\n      )\n    case BlockType.ListItem:\n      return (\n        <li {...attributes} className={cx(...blockStyles)}>\n          {children}\n        </li>\n      )\n    case BlockType.ListItemChild:\n      return (\n        <span {...attributes} className={cx(...blockStyles)}>\n          {children}\n        </span>\n      )\n  }\n}\n","import { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef } from 'react'\nimport { RenderElementProps } from 'slate-react'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { Link } from '../../../../shared/Link'\nimport { Inline, InlineType } from '../../../../../../types/slate'\n\nfunction StyledLink({ className, ...restOfProps }: ComponentPropsWithoutRef<typeof Link>) {\n  return <Link {...restOfProps} className={cx(useStyle({ textDecoration: 'none' }), className)} />\n}\n\nexport interface InlineRenderElementProps extends RenderElementProps {\n  element: Inline\n}\n\nexport function InlineElement({ element, attributes, children }: InlineRenderElementProps) {\n  switch (element.type) {\n    case InlineType.Code:\n      return <code {...attributes}>{children}</code>\n    case InlineType.SuperScript:\n      return <sup {...attributes}>{children}</sup>\n    case InlineType.SubScript:\n      return <sub {...attributes}>{children}</sub>\n    case InlineType.Link:\n      return (\n        <StyledLink {...attributes} link={element.link}>\n          {children}\n        </StyledLink>\n      )\n  }\n}\n","import { RenderElementProps } from 'slate-react'\nimport { BlockElement } from './block'\nimport { InlineElement } from './inline'\nimport { InlineType, BlockType } from '../../../../../../types/slate'\n\nexport function Element({ element, ...props }: RenderElementProps) {\n  switch (element.type) {\n    case InlineType.Code:\n    case InlineType.SuperScript:\n    case InlineType.SubScript:\n    case InlineType.Link:\n      return <InlineElement element={element} {...props} />\n    case BlockType.Paragraph:\n    case BlockType.Heading1:\n    case BlockType.Heading2:\n    case BlockType.Heading3:\n    case BlockType.BlockQuote:\n    case BlockType.OrderedList:\n    case BlockType.UnorderedList:\n    case BlockType.ListItem:\n    case BlockType.ListItemChild:\n      return <BlockElement element={element} {...props} />\n    default:\n      return <span {...props.attributes}>{props.children}</span>\n  }\n}\n","import { useState, useEffect, useCallback } from 'react'\nimport { Editor } from 'slate'\nimport { richTextDTOtoDAO, richTextDTOtoSelection } from '../../../../controls'\nimport { RichTextValue } from '../../../../prop-controllers'\nimport deepEqual from '../../../../utils/deepEqual'\nimport { useIsInBuilder } from '../../../../runtimes/react'\n\nconst COMMIT_DEBOUNCE_DELAY = 500\n\n/**\n * Compare new prop value with current editor and update editor\n * if the values are not equal.\n */\nexport function useSyncWithBuilder(editor: Editor, text?: RichTextValue) {\n  const [shouldCommit, setShouldCommit] = useState(true)\n  const isInBuilder = useIsInBuilder()\n\n  useEffect(() => {\n    if (shouldCommit && text && isInBuilder) {\n      const nextValue = richTextDTOtoDAO(text)\n      const nextSelection = richTextDTOtoSelection(text)\n      if (!deepEqual(editor.children, nextValue) || !deepEqual(editor.selection, nextSelection)) {\n        editor.children = nextValue\n        editor.selection = nextSelection\n        editor.onChange()\n      }\n    }\n  }, [editor, shouldCommit, text])\n\n  useEffect(() => {\n    if (shouldCommit) return\n\n    const timeoutId = window.setTimeout(() => {\n      setShouldCommit(true)\n    }, COMMIT_DEBOUNCE_DELAY)\n\n    return () => {\n      window.clearTimeout(timeoutId)\n    }\n  }, [shouldCommit])\n\n  return useCallback(() => setShouldCommit(false), [])\n}\n","import { ReactEditor } from 'slate-react'\nimport { useIsomorphicLayoutEffect } from '../../../hooks/useIsomorphicLayoutEffect'\nimport { Editor, Range as SlateRange } from 'slate'\n\n/**\n * Clicking outside of the host blurs our `<Editable />`.\n * `<Editable />` only updates the DOM's selection to match slate when it is focused.\n * In the case of a panel being clicked this hook updates the DOM selection to match slate.\n */\nexport function useSyncDOMSelection(editor: Editor, isEnabled: boolean) {\n  useIsomorphicLayoutEffect(() => {\n    if (!isEnabled || editor.selection == null || ReactEditor.isFocused(editor)) return\n    try {\n      const root = ReactEditor.findDocumentOrShadowRoot(editor) as Document\n      const domSelection = root.getSelection()\n      const newDomRange: Range | null = ReactEditor.toDOMRange(editor, editor.selection)\n\n      if (newDomRange) {\n        if (SlateRange.isBackward(editor.selection!)) {\n          domSelection?.setBaseAndExtent(\n            newDomRange.endContainer,\n            newDomRange.endOffset,\n            newDomRange.startContainer,\n            newDomRange.startOffset,\n          )\n        } else {\n          domSelection?.setBaseAndExtent(\n            newDomRange.startContainer,\n            newDomRange.startOffset,\n            newDomRange.endContainer,\n            newDomRange.endOffset,\n          )\n        }\n      } else {\n        domSelection?.removeAllRanges()\n      }\n    } catch (e) {\n      console.error(e)\n    }\n  })\n}\n","import {\n  FocusEvent,\n  forwardRef,\n  KeyboardEvent,\n  Ref,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n} from 'react'\n\nimport { createEditor } from 'slate'\nimport { Slate, Editable, withReact, ReactEditor } from 'slate-react'\n\nimport { ElementIDValue, RichTextValue } from '../../../../prop-controllers/descriptors'\nimport { cx } from '@emotion/css'\nimport { DescriptorsPropControllers } from '../../../../prop-controllers/instances'\nimport { Descriptors } from '../../../../runtimes/react/controls/rich-text'\nimport { getBox } from '../../../../box-model'\nimport { PropControllersHandle } from '../../../../state/modules/prop-controller-handles'\nimport { richTextDTOtoDAO } from '../../../../controls'\nimport { Leaf } from '../components/Leaf'\nimport { Element } from '../components/Element'\nimport { useSyncWithBuilder } from './useSyncWithBuilder'\nimport isHotkey from 'is-hotkey'\nimport { useBuilderEditMode } from '../../../../runtimes/react'\nimport { BuilderEditMode } from '../../../../state/modules/builder-edit-mode'\nimport { onKeyDown, withBlock, withList, withTypography, withBuilder } from '../../../../slate'\nimport { pollBoxModel } from '../../../../runtimes/react/poll-box-model'\nimport { useSyncDOMSelection } from './useSyncDOMSelection'\nimport { RichTextDAO, BlockType } from '../../../../../types/slate'\n\ntype Props = {\n  id?: ElementIDValue\n  text?: RichTextValue\n  width?: string\n  margin?: string\n}\n\nconst defaultText: RichTextDAO = [{ type: BlockType.Paragraph, children: [{ text: '' }] }]\n\nexport const EditableText = forwardRef(function EditableText(\n  { id, text, width, margin }: Props,\n  ref: Ref<PropControllersHandle<Descriptors>>,\n) {\n  const [editor] = useState(() =>\n    withBlock(withTypography(withList(withBuilder(withReact(createEditor()))))),\n  )\n  const [isPreservingDOMSElection, setIsPreservingDOMSelection] = useState(false)\n  useSyncDOMSelection(editor, isPreservingDOMSElection)\n  const delaySync = useSyncWithBuilder(editor, text)\n  const editMode = useBuilderEditMode()\n\n  const [propControllers, setPropControllers] =\n    useState<DescriptorsPropControllers<Descriptors> | null>(null)\n  const controller = propControllers?.text\n\n  useEffect(() => {\n    if (controller == null) return\n\n    const element = ReactEditor.toDOMNode(editor, editor)\n\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => controller.changeBoxModel(boxModel),\n    })\n  }, [editor, controller])\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getDomNode() {\n        return ReactEditor.toDOMNode(editor, editor)\n      },\n      getBoxModel() {\n        return getBox(ReactEditor.toDOMNode(editor, editor))\n      },\n      setPropControllers,\n    }),\n    [editor, setPropControllers],\n  )\n\n  const initialValue = useMemo(() => (text ? richTextDTOtoDAO(text) : defaultText), [text])\n\n  useEffect(() => {\n    controller?.setSlateEditor(editor)\n  }, [controller, editor])\n\n  const handleFocus = useCallback(() => {\n    controller?.focus()\n    setIsPreservingDOMSelection(true)\n  }, [controller])\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (isHotkey('mod+shift+z', e)) return controller?.redo()\n      if (isHotkey('mod+z', e)) return controller?.undo()\n      if (isHotkey('escape')(e)) return controller?.blur()\n      onKeyDown(e, editor)\n    },\n    [controller, editor],\n  )\n\n  const handleBlur = useCallback((e: FocusEvent) => {\n    // When clicking outside of the iframe (`relatedTarget` is null) we want to preserve the DOM selection.\n    if (e.relatedTarget == null) return\n    // Otherwise we want to deselect on blur and stop preserving selection.\n    setIsPreservingDOMSelection(false)\n    ReactEditor.deselect(editor)\n  }, [])\n\n  return (\n    <Slate editor={editor} value={initialValue} onChange={delaySync}>\n      <Editable\n        id={id}\n        renderLeaf={Leaf}\n        renderElement={Element}\n        onFocus={handleFocus}\n        onKeyDown={handleKeyDown}\n        onBlur={handleBlur}\n        className={cx(width, margin)}\n        readOnly={editMode !== BuilderEditMode.CONTENT}\n        placeholder=\"Write some text...\"\n      />\n    </Slate>\n  )\n})\n\nexport default EditableText\n"],"names":["element","attributes","children","blockStyles","useStyle","margin","useResponsiveStyle","textAlign","type","BlockType","Text","cx","Paragraph","Heading1","Heading2","Heading3","Heading4","Heading5","Heading6","BlockQuote","padding","fontSize","fontWeight","borderLeft","OrderedList","listStylePosition","UnorderedList","ListItem","ListItemChild","className","restOfProps","Link","textDecoration","InlineType","Code","SuperScript","SubScript","link","props","COMMIT_DEBOUNCE_DELAY","editor","text","shouldCommit","setShouldCommit","useState","isInBuilder","useIsInBuilder","useEffect","nextValue","richTextDTOtoDAO","nextSelection","richTextDTOtoSelection","deepEqual","selection","onChange","timeoutId","window","setTimeout","clearTimeout","useCallback","isEnabled","useIsomorphicLayoutEffect","ReactEditor","isFocused","root","findDocumentOrShadowRoot","domSelection","getSelection","newDomRange","toDOMRange","SlateRange","isBackward","setBaseAndExtent","endContainer","endOffset","startContainer","startOffset","removeAllRanges","e","console","error","defaultText","EditableText","forwardRef","id","width","ref","withBlock","withTypography","withList","withBuilder","withReact","createEditor","isPreservingDOMSElection","setIsPreservingDOMSelection","useSyncDOMSelection","delaySync","useSyncWithBuilder","editMode","useBuilderEditMode","propControllers","setPropControllers","controller","toDOMNode","pollBoxModel","onBoxModelChange","boxModel","changeBoxModel","useImperativeHandle","getDomNode","getBoxModel","getBox","initialValue","useMemo","setSlateEditor","handleFocus","focus","handleKeyDown","isHotkey","redo","undo","blur","onKeyDown","handleBlur","relatedTarget","deselect","Slate","Editable","Leaf","Element","BuilderEditMode","CONTENT"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAU6B,sBAAA;AAAA,EAAEA;AAAAA,EAASC;AAAAA,EAAYC;AAAAA,GAAsC;AAClFC,QAAAA,cAAc,CAClBC,cAAS;AAAA,IAAEC,QAAQ;AAAA,EAAA,CAAX,GACRD,KAAAA,SAASE,KAAmB,mBAAA,CAACN,QAAQO,SAAT,GAAqB,CAAC,CAACA,YAAY,YAAa;AAAA,IAAEA;AAAAA,EAAAA,EAAnD,CAAnB,CAFU;AAKZP,UAAAA,QAAQQ;AAAAA,SACTC,MAAUC,UAAAA;AACb,qFACYT;QAAY,WAAWU,IAAAA,GAAG,GAAGR,WAAJ;AAAA,QAChCD;AAAAA,MAAAA,EAFL;AAAA,SAKGO,MAAUG,UAAAA;AACb,kFACSX;QAAY,WAAWU,IAAAA,GAAG,GAAGR,WAAJ;AAAA,QAC7BD;AAAAA,MAAAA,EAFL;AAAA,SAKGO,MAAUI,UAAAA;AACb,mFACUZ;QAAY,WAAWU,IAAAA,GAAG,GAAGR,WAAJ;AAAA,QAC9BD;AAAAA,MAAAA,EAFL;AAAA,SAKGO,MAAUK,UAAAA;AACb,mFACUb;QAAY,WAAWU,IAAAA,GAAG,GAAGR,WAAJ;AAAA,QAC9BD;AAAAA,MAAAA,EAFL;AAAA,SAKGO,MAAUM,UAAAA;AACb,mFACUd;QAAY,WAAWU,IAAAA,GAAG,GAAGR,WAAJ;AAAA,QAC9BD;AAAAA,MAAAA,EAFL;AAAA,SAKGO,MAAUO,UAAAA;AACb,mFACUf;QAAY,WAAWU,IAAAA,GAAG,GAAGR,WAAJ;AAAA,QAC9BD;AAAAA,MAAAA,EAFL;AAAA,SAKGO,MAAUQ,UAAAA;AACb,mFACUhB;QAAY,WAAWU,IAAAA,GAAG,GAAGR,WAAJ;AAAA,QAC9BD;AAAAA,MAAAA,EAFL;AAAA,SAKGO,MAAUS,UAAAA;AACb,mFACUjB;QAAY,WAAWU,IAAAA,GAAG,GAAGR,WAAJ;AAAA,QAC9BD;AAAAA,MAAAA,EAFL;AAAA,SAKGO,MAAUU,UAAAA;AACb,2FAEQlB;QACJ,WAAWU,IAAAA,GACT,GAAGR,aACHC,cAAS;AAAA,UACPgB,SAAS;AAAA,UACTC,UAAU;AAAA,UACVC,YAAY;AAAA,UACZC,YAAY;AAAA,QAAA,CAJN,CAFG;AAAA,QAUZrB;AAAAA,MAAAA,EAbL;AAAA,SAgBGO,MAAUe,UAAAA;AACb,mFACUvB;QAAY,WAAWU,IAAAA,GAAG,GAAGR,WAAJ;AAAA,QAAkB,OAAO;AAAA,UAAEsB,mBAAmB;AAAA,QAA/E;AAAA,QACGvB;AAAAA,MAAAA,EAFL;AAAA,SAKGO,MAAUiB,UAAAA;AACb,mFACUzB;QAAY,WAAWU,IAAAA,GAAG,GAAGR,WAAJ;AAAA,QAAkB,OAAO;AAAA,UAAEsB,mBAAmB;AAAA,QAA/E;AAAA,QACGvB;AAAAA,MAAAA,EAFL;AAAA,SAKGO,MAAUkB,UAAAA;AACb,mFACU1B;QAAY,WAAWU,IAAAA,GAAG,GAAGR,WAAJ;AAAA,QAC9BD;AAAAA,MAAAA,EAFL;AAAA,SAKGO,MAAUmB,UAAAA;AACb,qFACY3B;QAAY,WAAWU,IAAAA,GAAG,GAAGR,WAAJ;AAAA,QAChCD;AAAAA,MAAAA,EAFL;AAAA;AAML;ACpGD,oBAAoB,IAAsE;AAAtE,eAAE2B;AAAAA;AAAAA,MAAF,IAAgBC,wBAAhB,IAAgBA;AAAAA,IAAdD;AAAAA;AACb,wCAACE,MAAAA,MAAD,iCAAUD,cAAV;AAAA,IAAuB,WAAWnB,OAAGP,cAAS;AAAA,MAAE4B,gBAAgB;AAAA,IAAnB,CAAA,GAA8BH,SAAvC;AAAA,EAAA,EAA3C;AACD;AAM6B,uBAAA;AAAA,EAAE7B;AAAAA,EAASC;AAAAA,EAAYC;AAAAA,GAAsC;AACjFF,UAAAA,QAAQQ;AAAAA,SACTyB,MAAWC,WAAAA;AACd,qFAAiBjC;QAAaC;AAAAA,MAAAA,EAA9B;AAAA,SACG+B,MAAWE,WAAAA;AACd,oFAAgBlC;QAAaC;AAAAA,MAAAA,EAA7B;AAAA,SACG+B,MAAWG,WAAAA;AACd,oFAAgBnC;QAAaC;AAAAA,MAAAA,EAA7B;AAAA,SACG+B,MAAWF,WAAAA;AAEZ,4CAAC,YAAD,iCAAgB9B,aAAhB;AAAA,QAA4B,MAAMD,QAAQqC;AAAAA,QACvCnC;AAAAA,MAAAA,EAFL;AAAA;AAML;ACzBuB,iBAAA,IAA2C;AAA3C,eAAEF;AAAAA;AAAAA,MAAF,IAAcsC,kBAAd,IAAcA;AAAAA,IAAZtC;AAAAA;AAChBA,UAAAA,QAAQQ;AAAAA,SACTyB,MAAAA,WAAWC;AAAAA,SACXD,MAAAA,WAAWE;AAAAA,SACXF,MAAAA,WAAWG;AAAAA,SACXH,MAAWF,WAAAA;AACd,4CAAQ,eAAD;AAAA,QAAe;AAAA,SAAsBO,MAA5C;AAAA,SACG7B,MAAAA,UAAUG;AAAAA,SACVH,MAAAA,UAAUI;AAAAA,SACVJ,MAAAA,UAAUK;AAAAA,SACVL,MAAAA,UAAUM;AAAAA,SACVN,MAAAA,UAAUU;AAAAA,SACVV,MAAAA,UAAUe;AAAAA,SACVf,MAAAA,UAAUiB;AAAAA,SACVjB,MAAAA,UAAUkB;AAAAA,SACVlB,MAAUmB,UAAAA;AACb,4CAAQ,cAAD;AAAA,QAAc;AAAA,SAAsBU,MAA3C;AAAA;AAEO,4CAAA,QAAA,iCAAUA,MAAMrC,aAAhB;AAAA,QAAA,UAA6BqC,MAAMpC;AAAAA,MAAAA,EAA1C;AAAA;AAEL;AClBD,MAAMqC,wBAAwB;AAMvB,4BAA4BC,QAAgBC,MAAsB;AACjE,QAAA,CAACC,cAAcC,mBAAmBC,MAAAA,SAAS,IAAD;AAC1CC,QAAAA,cAAcC,KAAAA;AAEpBC,QAAAA,UAAU,MAAM;AACVL,QAAAA,gBAAgBD,QAAQI,aAAa;AACjCG,YAAAA,YAAYC,6BAAiBR,IAAD;AAC5BS,YAAAA,gBAAgBC,mCAAuBV,IAAD;AACxC,UAAA,CAACW,KAAUZ,UAAAA,OAAOtC,UAAU8C,SAAlB,KAAgC,CAACI,KAAAA,UAAUZ,OAAOa,WAAWH,aAAnB,GAAmC;AACzFV,eAAOtC,WAAW8C;AAClBR,eAAOa,YAAYH;AACnBV,eAAOc,SAAP;AAAA,MACD;AAAA,IACF;AAAA,EACA,GAAA,CAACd,QAAQE,cAAcD,IAAvB,CAVM;AAYTM,QAAAA,UAAU,MAAM;AACVL,QAAAA;AAAc;AAEZa,UAAAA,YAAYC,OAAOC,WAAW,MAAM;AACxCd,sBAAgB,IAAD;AAAA,OACdJ,qBAFe;AAIlB,WAAO,MAAM;AACXiB,aAAOE,aAAaH,SAApB;AAAA,IAAA;AAAA,EADF,GAGC,CAACb,YAAD,CAVM;AAYFiB,SAAAA,kBAAY,MAAMhB,gBAAgB,KAAD,GAAS,CAA/B,CAAA;AACnB;ACjCM,6BAA6BH,QAAgBoB,WAAoB;AACtEC,4BAAAA,0BAA0B,MAAM;AAC9B,QAAI,CAACD,aAAapB,OAAOa,aAAa,QAAQS,WAAAA,YAAYC,UAAUvB,MAAtB;AAA+B;AACzE,QAAA;AACIwB,YAAAA,OAAOF,WAAAA,YAAYG,yBAAyBzB,MAArC;AACP0B,YAAAA,eAAeF,KAAKG;AAC1B,YAAMC,cAA4BN,WAAAA,YAAYO,WAAW7B,QAAQA,OAAOa,SAAtC;AAElC,UAAIe,aAAa;AACXE,YAAAA,cAAWC,WAAW/B,OAAOa,SAA7B,GAA0C;AAC9BmB,uDAAAA,iBACZJ,YAAYK,cACZL,YAAYM,WACZN,YAAYO,gBACZP,YAAYQ;AAAAA,QAJd,OAMK;AACSJ,uDAAAA,iBACZJ,YAAYO,gBACZP,YAAYQ,aACZR,YAAYK,cACZL,YAAYM;AAAAA,QAEf;AAAA,MAAA,OACI;AACLR,qDAAcW;AAAAA,MACf;AAAA,aACMC;AACPC,cAAQC,MAAMF,CAAd;AAAA,IACD;AAAA,EAAA,CA5BsB;AA8B1B;ACAD,MAAMG,cAA2B,CAAC;AAAA,EAAEzE,MAAMC,MAAUG,UAAAA;AAAAA,EAAWV,UAAU,CAAC;AAAA,IAAEuC,MAAM;AAAA,EAAA,CAAT;AAAvC,CAAD;AAEpByC,MAAAA,eAAeC,MAAAA,WAAW,uBACrC;AAAA,EAAEC;AAAAA,EAAI3C;AAAAA,EAAM4C;AAAAA,EAAOhF;AAAAA,GACnBiF,KACA;AACM,QAAA,CAAC9C,UAAUI,MAAS,SAAA,MACxB2C,QAAAA,UAAUC,QAAAA,eAAeC,QAAAA,SAASC,QAAYC,YAAAA,WAAAA,UAAUC,sBAAD,CAAV,CAAZ,CAAT,CAAf,CADc;AAGnB,QAAA,CAACC,0BAA0BC,+BAA+BlD,MAAAA,SAAS,KAAD;AACxEmD,sBAAoBvD,QAAQqD,wBAAT;AACbG,QAAAA,YAAYC,mBAAmBzD,QAAQC,IAAT;AAC9ByD,QAAAA,WAAWC,KAAAA;AAEjB,QAAM,CAACC,iBAAiBC,sBACtBzD,MAAAA,SAAyD,IAAjD;AACV,QAAM0D,aAAaF,mDAAiB3D;AAEpCM,QAAAA,UAAU,MAAM;AACVuD,QAAAA,cAAc;AAAM;AAElBtG,UAAAA,UAAU8D,WAAAA,YAAYyC,UAAU/D,QAAQA,MAA9B;AAEhB,WAAOgE,kBAAa;AAAA,MAClBxG;AAAAA,MACAyG,kBAAkBC,CAAAA,aAAYJ,WAAWK,eAAeD,QAA1B;AAAA,IAAA,CAFb;AAAA,EAAA,GAIlB,CAAClE,QAAQ8D,UAAT,CATM;AAWTM,QAAAA,oBACEtB,KACA,MAAO;AAAA,IACLuB,aAAa;AACJ/C,aAAAA,uBAAYyC,UAAU/D,QAAQA,MAA9B;AAAA,IAFJ;AAAA,IAILsE,cAAc;AACLC,aAAAA,UAAAA,OAAOjD,WAAAA,YAAYyC,UAAU/D,QAAQA,MAA9B,CAAD;AAAA,IALV;AAAA,IAOL6D;AAAAA,EAEF,IAAA,CAAC7D,QAAQ6D,kBAAT,CAXiB;AAcbW,QAAAA,eAAeC,cAAQ,MAAOxE,OAAOQ,YAAAA,iBAAiBR,IAAD,IAASwC,aAAc,CAACxC,IAAD,CAAtD;AAE5BM,QAAAA,UAAU,MAAM;AACduD,6CAAYY,eAAe1E;AAAAA,EAA3B,GACC,CAAC8D,YAAY9D,MAAb,CAFM;AAIH2E,QAAAA,cAAcxD,MAAAA,YAAY,MAAM;AACpC2C,6CAAYc;AACZtB,gCAA4B,IAAD;AAAA,EAAA,GAC1B,CAACQ,UAAD,CAH4B;AAKzBe,QAAAA,gBAAgB1D,kBACpB,CAACmB,MAAqB;AAChBwC,QAAAA,kBAAAA,WAAS,eAAexC,CAAhB;AAAoB,aAAOwB,yCAAYiB;AAC/CD,QAAAA,kBAAAA,WAAS,SAASxC,CAAV;AAAc,aAAOwB,yCAAYkB;AACzCF,QAAAA,kBAAAA,WAAS,QAAD,EAAWxC,CAAnB;AAAuB,aAAOwB,yCAAYmB;AAC9CC,sBAAU5C,GAAGtC,MAAJ;AAAA,EAAA,GAEX,CAAC8D,YAAY9D,MAAb,CAP+B;AAU3BmF,QAAAA,aAAahE,kBAAY,CAACmB,MAAkB;AAEhD,QAAIA,EAAE8C,iBAAiB;AAAM;AAE7B9B,gCAA4B,KAAD;AAC3BhC,2BAAY+D,SAASrF,MAArB;AAAA,EAL4B,GAM3B,CAN2B,CAAA;AAQ9B,wCACGsF,WAAAA,OAAD;AAAA,IAAO;AAAA,IAAgB,OAAOd;AAAAA,IAAc,UAAUhB;AAAAA,IAAtD,yCACG+B,qBAAD;AAAA,MACE;AAAA,MACA,YAAYC,KAAAA;AAAAA,MACZ,eAAeC;AAAAA,MACf,SAASd;AAAAA,MACT,WAAWE;AAAAA,MACX,QAAQM;AAAAA,MACR,WAAWhH,IAAAA,GAAG0E,OAAOhF,MAAR;AAAA,MACb,UAAU6F,aAAagC,YAAAA,gBAAgBC;AAAAA,MACvC,aAAY;AAAA,IAAA,CATd;AAAA,EAAA,CAFJ;AAeD,CArFqC;AAuFtC,IAAA,iBAAejD;;;"}

package/dist/index.es.js

@@ -36,7 +36,7 @@ var __publicField = (obj, key, value) => {
 };
 var _c;
 import * as React from "react";
-import { useEffect, createContext, useContext, useState, useMemo, useRef, Children, createElement, forwardRef, memo, useId, useCallback, useLayoutEffect, useImperativeHandle, Component, Suspense } from "react";
+import { useEffect, createContext, useContext, useState, useMemo, useRef, Children, createElement, forwardRef, memo, useId, useCallback, useImperativeHandle, Component, Suspense } from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
 import dynamic from "next/dynamic";
 import { a as createDocumentReference, g as getPropControllerDescriptors, i as isElementReference, M as MakeswiftComponentType, b as isPropControllersHandle, d as getComponentPropControllerDescriptors, e as getPropControllers, f as configureStore$1, h as copyElementTree, j as getBreakpoints, k as getDocument, l as getElementId, m as getIsPreview, n as getIsInBuilder, o as getReactComponent, p as getBuilderEditMode } from "./constants.es.js";
@@ -45,11 +45,9 @@ import { cache, cx } from "@emotion/css";
 import { serializeStyles } from "@emotion/serialize";
 import { registerStyles, insertStyles } from "@emotion/utils";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { S as ShapeControlType, L as ListControlType, T as Types, E as ElementID, B as Backgrounds, W as Width, f as ResponsiveIconRadioGroup, M as Margin, P as Padding, g as Border, h as BorderRadius, i as Shadows, G as GapY, j as GapX, k as ResponsiveSelect, l as ResponsiveNumber, m as Checkbox, n as Grid, o as TextInput, p as Link, q as ResponsiveColor, s as TextStyle, t as Images, N as Number$1, D as Date$1, F as Font, u as ResponsiveLength, v as TextArea, w as Table, x as TableFormFields, y as Image, z as ResponsiveOpacity, A as NavigationLinks, H as SocialLinks, J as RichText, V as Video, K as StyleControlProperty, O as ImageControlValueFormat, Q as BlockType, U as BuilderEditMode, X as StyleControlType, Y as RichTextV2ControlType, Z as RichTextControlType, b as SlotControlType, _ as LinkControlType, I as ImageControlType, C as ColorControlType, $ as BorderPropControllerFormat, a0 as ShadowsPropControllerFormat, a1 as BorderRadiusPropControllerFormat, a2 as MarginPropControllerFormat, a3 as PaddingPropControllerFormat, a4 as WidthPropControllerFormat } from "./descriptors.es.js";
-import { createEditor } from "slate";
+import { S as ShapeControlType, L as ListControlType, T as Types, E as ElementID, B as Backgrounds, W as Width, f as ResponsiveIconRadioGroup, M as Margin, P as Padding, g as Border, h as BorderRadius, i as Shadows, G as GapY, j as GapX, k as ResponsiveSelect, l as ResponsiveNumber, m as Checkbox, n as Grid, o as TextInput, p as Link, q as ResponsiveColor, s as TextStyle, t as Images, N as Number$1, D as Date$1, F as Font, u as ResponsiveLength, v as TextArea, w as Table, x as TableFormFields, y as Image, z as ResponsiveOpacity, A as NavigationLinks, H as SocialLinks, J as RichText, V as Video, K as StyleControlProperty, O as ImageControlValueFormat, Q as StyleControlType, U as RichTextV2ControlType, X as RichTextControlType, b as SlotControlType, Y as LinkControlType, I as ImageControlType, C as ColorControlType, Z as BorderPropControllerFormat, _ as ShadowsPropControllerFormat, $ as BorderRadiusPropControllerFormat, a0 as MarginPropControllerFormat, a1 as PaddingPropControllerFormat, a2 as WidthPropControllerFormat } from "./descriptors.es.js";
 import { S as SelectControlType, T as TextAreaControlType, a as TextInputControlType, N as NumberControlType, C as CheckboxControlType } from "./text-input.es.js";
 import { C as ComboboxControlType } from "./combobox.es.js";
-import { withReact, ReactEditor, Slate, Editable } from "slate-react";
 import { useSyncExternalStore } from "use-sync-external-store/shim";
 import { createStore, applyMiddleware } from "redux";
 import thunk from "redux-thunk";
@@ -59,8 +57,6 @@ import { getBaseBreakpoint, findBreakpointOverride, DefaultBreakpointID, join, g
 import { g as getBox, i as isMeasurable, m as measure } from "./box-models.es.js";
 import ColorHelper from "color";
 import scrollIntoView from "scroll-into-view-if-needed";
-import isHotkey from "is-hotkey";
-import { withHistory, HistoryEditor } from "slate-history";
 import { findDOMNode } from "react-dom";
 import parse from "html-react-parser";
 import Head from "next/head";
@@ -1129,7 +1125,7 @@ async function fonts(_req, res, { getFonts } = {}) {
   const fonts2 = (_a = await (getFonts == null ? void 0 : getFonts())) != null ? _a : [];
   return res.json(fonts2);
 }
-const version = "0.8.9";
+const version = "0.8.10";
 async function handler(req, res, { apiKey }) {
   if (req.query.secret !== apiKey) {
     return res.status(401).json({ message: "Unauthorized" });
@@ -3079,7 +3075,7 @@ function ListControlValue({
 function useNumber(numberControlData, controlDefinition) {
   return numberControlData != null ? numberControlData : controlDefinition.config.defaultValue;
 }
-const Text = forwardNextDynamicRef((patch) => dynamic(() => patch(import("./index.es6.js"))));
+const Text = forwardNextDynamicRef((patch) => dynamic(() => patch(import("./index.es7.js"))));
 function useRichText(data, control) {
   const textCallbackRef = useCallback((handle) => {
     var _a;
@@ -3093,115 +3089,15 @@ function useRichText(data, control) {
     ref: textCallbackRef
   });
 }
-function pollBoxModel({
-  element,
-  onBoxModelChange
-}) {
-  let currentBoxModel = null;
-  const handleAnimationFrameRequest = () => {
-    const measuredBoxModel = getBox(element);
-    if (!deepEqual(currentBoxModel, measuredBoxModel)) {
-      currentBoxModel = measuredBoxModel;
-      onBoxModelChange(currentBoxModel);
-    }
-    animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
-  };
-  let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
-  return () => {
-    cancelAnimationFrame(animationFrameHandle);
-    onBoxModelChange(null);
-  };
-}
-const isSSR = typeof window === "undefined" || /ServerSideRendering/.test(window.navigator && window.navigator.userAgent);
-const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;
-const defaultText = [{
-  type: BlockType.Text,
-  children: [{
-    text: ""
-  }]
-}];
+const EditableText = forwardNextDynamicRef((patch) => dynamic(() => patch(import("./index.es8.js"))));
+const ReadOnlyText = forwardNextDynamicRef((patch) => dynamic(() => patch(import("./ReadOnlyTextV2.es.js"))));
 function useRichTextV2(data, control) {
-  const [editor] = useState(() => withHistory(withReact(createEditor())));
-  const isPreservingFocus = useRef(false);
-  const editMode = useBuilderEditMode();
-  useEffect(() => {
-    if (control == null)
-      return;
-    const element = ReactEditor.toDOMNode(editor, editor);
-    return pollBoxModel({
-      element,
-      onBoxModelChange: (boxModel) => control.changeBoxModel(boxModel)
-    });
-  }, [editor, control]);
-  const renderElement = useCallback(({
-    attributes,
-    children,
-    element
-  }) => {
-    switch (element.type) {
-      default:
-        return /* @__PURE__ */ jsx("p", __spreadProps(__spreadValues({}, attributes), {
-          children
-        }));
-    }
-  }, []);
-  const renderLeaf = useCallback(({
-    attributes,
-    children
-  }) => {
-    return /* @__PURE__ */ jsx("span", __spreadProps(__spreadValues({}, attributes), {
-      children
-    }));
-  }, []);
-  const initialValue = useMemo(() => data != null ? data : defaultText, [data]);
-  useEffect(() => {
-    if (editMode !== BuilderEditMode.CONTENT) {
-      isPreservingFocus.current = false;
-      ReactEditor.deselect(editor);
-    }
-  }, [editMode]);
-  useEffect(() => {
-    control == null ? void 0 : control.setEditor(editor);
-    control == null ? void 0 : control.setDefaultValue(defaultText);
-  }, [control, editor, defaultText]);
-  const handleFocus = useCallback(() => {
-    isPreservingFocus.current = true;
-    control == null ? void 0 : control.select();
-  }, [control]);
-  const handleKeyDown = useCallback((e) => {
-    if (isHotkey("mod+shift+z", e))
-      return HistoryEditor.redo(editor);
-    if (isHotkey("mod+z", e))
-      return HistoryEditor.undo(editor);
-    if (isHotkey("escape")(e)) {
-      isPreservingFocus.current = false;
-      ReactEditor.blur(editor);
-      control == null ? void 0 : control.switchToBuildMode();
-    }
-  }, [control, editor]);
-  const handleBlur = useCallback((e) => {
-    var _a;
-    if (e.relatedTarget == null)
-      return;
-    if (((_a = e.relatedTarget) == null ? void 0 : _a.getAttribute("contenteditable")) === "true")
-      isPreservingFocus.current = false;
-  }, []);
-  const handleOnChange = useCallback((value) => {
-    control == null ? void 0 : control.onChange(value);
-  }, [control]);
-  return /* @__PURE__ */ jsx(Slate, {
-    editor,
-    onChange: handleOnChange,
-    value: initialValue,
-    children: /* @__PURE__ */ jsx(Editable, {
-      renderLeaf,
-      renderElement,
-      onFocus: handleFocus,
-      onKeyDown: handleKeyDown,
-      onBlur: handleBlur,
-      readOnly: editMode !== BuilderEditMode.CONTENT,
-      placeholder: "Write some text..."
-    })
+  const isPreview = useIsPreview();
+  return isPreview ? /* @__PURE__ */ jsx(EditableText, {
+    text: data,
+    control
+  }) : /* @__PURE__ */ jsx(ReadOnlyText, {
+    text: data
   });
 }
 function useSelectControlValue(data, definition) {
@@ -3222,6 +3118,25 @@ function ShapeControlValue({
     }))
   }), children)({});
 }
+function pollBoxModel({
+  element,
+  onBoxModelChange
+}) {
+  let currentBoxModel = null;
+  const handleAnimationFrameRequest = () => {
+    const measuredBoxModel = getBox(element);
+    if (!deepEqual(currentBoxModel, measuredBoxModel)) {
+      currentBoxModel = measuredBoxModel;
+      onBoxModelChange(currentBoxModel);
+    }
+    animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+  };
+  let animationFrameHandle = requestAnimationFrame(handleAnimationFrameRequest);
+  return () => {
+    cancelAnimationFrame(animationFrameHandle);
+    onBoxModelChange(null);
+  };
+}
 function useSlot(data, control) {
   if (data == null || data.elements.length === 0) {
     return /* @__PURE__ */ jsx(Slot.Placeholder, {
@@ -4011,5 +3926,5 @@ const DocumentReference = memo(forwardRef(function DocumentReference2({
     document: document2
   });
 }));
-export { PreviewModeScript as $, Provider as A, Alignments as B, Contrasts as C, DocumentReference as D, Element$1 as E, useFile as F, forwardNextDynamicRef as G, useIsPreview as H, useFiles as I, useSwatches as J, usePagePathnameSlice as K, useElementId as L, deepEqual as M, ElementImperativeHandle as N, StoreContext as O, PageProvider as P, MakeswiftProvider as Q, RuntimeProvider as R, Shapes as S, useBuilderEditMode as T, pollBoxModel as U, useTypography as V, getStaticPaths as W, getStaticProps as X, getServerSideProps as Y, Page as Z, Makeswift as _, ReactRuntime as a, Document$1 as a0, MakeswiftApiHandler as a1, usePageId as b, DEFAULT_BOX_ANIMATE_TYPE as c, DEFAULT_BOX_ANIMATE_DELAY as d, DEFAULT_BOX_ANIMATE_DURATION as e, DEFAULT_ITEM_ANIMATE_TYPE as f, DEFAULT_ITEM_ANIMATE_DELAY as g, DEFAULT_ITEM_ANIMATE_DURATION as h, DEFAULT_ITEM_STAGGER_DURATION as i, useBorder as j, useBoxShadow as k, useResponsiveColor as l, Page$1 as m, useStyle as n, useResponsiveStyle as o, useResponsiveWidth as p, useResponsiveTextStyle as q, colorToString as r, useBreakpoints as s, useIsomorphicLayoutEffect as t, useIsInBuilder as u, Sizes as v, useFormContext as w, useResponsiveGridItem as x, useTable as y, useMakeswiftClient as z };
+export { Document$1 as $, Alignments as A, useFile as B, Contrasts as C, DocumentReference as D, Element$1 as E, forwardNextDynamicRef as F, useIsPreview as G, useFiles as H, useSwatches as I, usePagePathnameSlice as J, useElementId as K, deepEqual as L, ElementImperativeHandle as M, StoreContext as N, MakeswiftProvider as O, PageProvider as P, useBuilderEditMode as Q, RuntimeProvider as R, Shapes as S, pollBoxModel as T, useTypography as U, getStaticPaths as V, getStaticProps as W, getServerSideProps as X, Page as Y, Makeswift as Z, PreviewModeScript as _, ReactRuntime as a, MakeswiftApiHandler as a0, usePageId as b, DEFAULT_BOX_ANIMATE_TYPE as c, DEFAULT_BOX_ANIMATE_DELAY as d, DEFAULT_BOX_ANIMATE_DURATION as e, DEFAULT_ITEM_ANIMATE_TYPE as f, DEFAULT_ITEM_ANIMATE_DELAY as g, DEFAULT_ITEM_ANIMATE_DURATION as h, DEFAULT_ITEM_STAGGER_DURATION as i, useBorder as j, useBoxShadow as k, useResponsiveColor as l, Page$1 as m, useStyle as n, useResponsiveStyle as o, useResponsiveWidth as p, useResponsiveTextStyle as q, colorToString as r, useBreakpoints as s, Sizes as t, useIsInBuilder as u, useFormContext as v, useResponsiveGridItem as w, useTable as x, useMakeswiftClient as y, Provider as z };
 //# sourceMappingURL=index.es.js.map