@makeswift/runtime 0.13.0 → 0.14.0

package/dist/esm/runtimes/react/controls/image.js

@@ -0,0 +1,35 @@
+import { P, match } from "ts-pattern";
+import {
+  ImageControlValueFormat
+} from "../../../controls";
+import { useFile } from "../hooks/makeswift-api";
+function useImageControlValue(data, definition) {
+  const format = definition.config.format ?? ImageControlValueFormat.URL;
+  const fileId = match(data).with(P.string, (id) => id).with({ type: "makeswift-file" }, ({ id }) => id).otherwise(() => null);
+  const file = useFile(fileId);
+  return match([file, data, format]).with([{ __typename: "File" }, P.any, ImageControlValueFormat.URL], ([file2]) => file2.publicUrl).with(
+    [
+      { __typename: "File", dimensions: P.not(P.nullish) },
+      P.any,
+      ImageControlValueFormat.WithDimensions
+    ],
+    ([file2]) => ({
+      url: file2.publicUrl,
+      dimensions: file2.dimensions
+    })
+  ).with([P.any, { type: "external-file" }, ImageControlValueFormat.URL], ([, d]) => d.url).with(
+    [
+      P.any,
+      { type: "external-file", width: P.number, height: P.number },
+      ImageControlValueFormat.WithDimensions
+    ],
+    ([, d]) => ({
+      url: d.url,
+      dimensions: { width: d.width, height: d.height }
+    })
+  ).otherwise(() => void 0);
+}
+export {
+  useImageControlValue
+};
+//# sourceMappingURL=image.js.map

package/dist/esm/runtimes/react/controls/image.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/image.ts"],"sourcesContent":["import { P, match } from 'ts-pattern'\nimport {\n  ControlDefinition,\n  ImageControlData,\n  ImageControlDefinition,\n  ImageControlValueFormat,\n} from '../../../controls'\nimport { useFile } from '../hooks/makeswift-api'\n\ntype ImageWithDimensions = {\n  url: string\n  dimensions: { width: number; height: number }\n}\n\nexport type ImageControlValue = string | ImageWithDimensions | undefined\n\nexport function useImageControlValue(\n  data: ImageControlData | undefined,\n  definition: ImageControlDefinition,\n): ImageControlValue {\n  const format = definition.config.format ?? ImageControlValueFormat.URL\n\n  const fileId = match(data)\n    .with(P.string, id => id)\n    .with({ type: 'makeswift-file' }, ({ id }) => id)\n    .otherwise(() => null)\n\n  const file = useFile(fileId)\n\n  return match([file, data, format])\n    .with([{ __typename: 'File' }, P.any, ImageControlValueFormat.URL], ([file]) => file.publicUrl)\n    .with(\n      [\n        { __typename: 'File', dimensions: P.not(P.nullish) },\n        P.any,\n        ImageControlValueFormat.WithDimensions,\n      ],\n      ([file]) => ({\n        url: file.publicUrl,\n        dimensions: file.dimensions,\n      }),\n    )\n    .with([P.any, { type: 'external-file' }, ImageControlValueFormat.URL], ([, d]) => d.url)\n    .with(\n      [\n        P.any,\n        { type: 'external-file', width: P.number, height: P.number },\n        ImageControlValueFormat.WithDimensions,\n      ],\n      ([, d]) => ({\n        url: d.url,\n        dimensions: { width: d.width, height: d.height },\n      }),\n    )\n    .otherwise(() => undefined)\n}\n\nexport type ResolveImageControlValue<T extends ControlDefinition> = T extends ImageControlDefinition\n  ? undefined extends T['config']['format']\n    ? string | undefined\n    : T['config']['format'] extends typeof ImageControlValueFormat.URL\n    ? string | undefined\n    : T['config']['format'] extends typeof ImageControlValueFormat.WithDimensions\n    ? ImageWithDimensions | undefined\n    : never\n  : never\n"],"mappings":"AAAA,SAAS,GAAG,aAAa;AACzB;AAAA,EAIE;AAAA,OACK;AACP,SAAS,eAAe;AASjB,SAAS,qBACd,MACA,YACmB;AACnB,QAAM,SAAS,WAAW,OAAO,UAAU,wBAAwB;AAEnE,QAAM,SAAS,MAAM,IAAI,EACtB,KAAK,EAAE,QAAQ,QAAM,EAAE,EACvB,KAAK,EAAE,MAAM,iBAAiB,GAAG,CAAC,EAAE,GAAG,MAAM,EAAE,EAC/C,UAAU,MAAM,IAAI;AAEvB,QAAM,OAAO,QAAQ,MAAM;AAE3B,SAAO,MAAM,CAAC,MAAM,MAAM,MAAM,CAAC,EAC9B,KAAK,CAAC,EAAE,YAAY,OAAO,GAAG,EAAE,KAAK,wBAAwB,GAAG,GAAG,CAAC,CAACA,KAAI,MAAMA,MAAK,SAAS,EAC7F;AAAA,IACC;AAAA,MACE,EAAE,YAAY,QAAQ,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE;AAAA,MACnD,EAAE;AAAA,MACF,wBAAwB;AAAA,IAC1B;AAAA,IACA,CAAC,CAACA,KAAI,OAAO;AAAA,MACX,KAAKA,MAAK;AAAA,MACV,YAAYA,MAAK;AAAA,IACnB;AAAA,EACF,EACC,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,gBAAgB,GAAG,wBAAwB,GAAG,GAAG,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,EACtF;AAAA,IACC;AAAA,MACE,EAAE;AAAA,MACF,EAAE,MAAM,iBAAiB,OAAO,EAAE,QAAQ,QAAQ,EAAE,OAAO;AAAA,MAC3D,wBAAwB;AAAA,IAC1B;AAAA,IACA,CAAC,CAAC,EAAE,CAAC,OAAO;AAAA,MACV,KAAK,EAAE;AAAA,MACP,YAAY,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,OAAO;AAAA,IACjD;AAAA,EACF,EACC,UAAU,MAAM,MAAS;AAC9B;","names":["file"]}

package/dist/esm/runtimes/react/controls/link.js

@@ -0,0 +1,76 @@
+import { useCallback, useMemo } from "react";
+import scrollIntoView from "scroll-into-view-if-needed";
+import { useElementId } from "../";
+import { usePagePathnameSlice } from "../hooks/makeswift-api";
+function useLinkControlValue(link, _definition) {
+  const pageId = link && link.type === "OPEN_PAGE" ? link.payload.pageId : null;
+  const page = usePagePathnameSlice(pageId ?? null);
+  const elementKey = link?.type === "SCROLL_TO_ELEMENT" ? link.payload.elementIdConfig?.elementKey : null;
+  const elementId = useElementId(elementKey);
+  let href = "#";
+  let target;
+  let block;
+  if (link) {
+    switch (link.type) {
+      case "OPEN_PAGE": {
+        if (page)
+          href = `/${page.pathname}`;
+        target = link.payload.openInNewTab ? "_blank" : "_self";
+        break;
+      }
+      case "OPEN_URL": {
+        href = link.payload.url;
+        target = link.payload.openInNewTab ? "_blank" : "_self";
+        break;
+      }
+      case "SEND_EMAIL": {
+        const { to, subject = "", body = "" } = link.payload;
+        if (to != null)
+          href = `mailto:${to}?subject=${subject}&body=${body}`;
+        break;
+      }
+      case "CALL_PHONE": {
+        href = `tel:${link.payload.phoneNumber}`;
+        break;
+      }
+      case "SCROLL_TO_ELEMENT": {
+        href = `#${elementId ?? ""}`;
+        block = link.payload.block;
+        break;
+      }
+      default:
+        throw new RangeError(`Invalid link type "${link.type}."`);
+    }
+  }
+  const handleClick = useCallback(
+    (event) => {
+      if (event.defaultPrevented)
+        return;
+      if (link && link.type === "SCROLL_TO_ELEMENT") {
+        let hash;
+        try {
+          hash = new URL(`http://www.example.com/${href}`).hash;
+        } catch (error) {
+          console.error(`Link received invalid href: ${href}`, error);
+        }
+        if (href != null && href === hash) {
+          event.preventDefault();
+          const view = event.view;
+          scrollIntoView(view.document.querySelector(hash), {
+            behavior: "smooth",
+            block
+          });
+          if (view.location.hash !== hash)
+            view.history.pushState({}, "", hash);
+        }
+      }
+    },
+    [link, href, block]
+  );
+  const res = useMemo(() => ({ href, target, onClick: handleClick }), [href, target, handleClick]);
+  return res;
+}
+export {
+  useLinkControlValue
+};
+//# sourceMappingURL=link.js.map

package/dist/esm/runtimes/react/controls/link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/link.ts"],"sourcesContent":["import { MouseEvent, useCallback, useMemo } from 'react'\n\nimport scrollIntoView from 'scroll-into-view-if-needed'\nimport { useElementId } from '../'\nimport { LinkControlData, LinkControlDefinition } from '../../../controls'\nimport { usePagePathnameSlice } from '../hooks/makeswift-api'\n\ntype LinkValue = {\n  href: string\n  target: '_blank' | '_self' | undefined\n  onClick: (event: MouseEvent<HTMLElement>) => void\n}\n\nexport type LinkControlValue<_T extends LinkControlDefinition> = LinkValue | undefined\n\nexport function useLinkControlValue<T extends LinkControlDefinition>(\n  link: LinkControlData | undefined,\n  _definition: T,\n): LinkControlValue<T> {\n  const pageId = link && link.type === 'OPEN_PAGE' ? link.payload.pageId : null\n  const page = usePagePathnameSlice(pageId ?? null)\n  const elementKey =\n    link?.type === 'SCROLL_TO_ELEMENT' ? link.payload.elementIdConfig?.elementKey : null\n  const elementId = useElementId(elementKey)\n\n  let href = '#'\n  let target: '_blank' | '_self' | undefined\n  let block: 'start' | 'center' | 'end' | undefined\n\n  if (link) {\n    switch (link.type) {\n      case 'OPEN_PAGE': {\n        if (page) href = `/${page.pathname}`\n\n        target = link.payload.openInNewTab ? '_blank' : '_self'\n\n        break\n      }\n\n      case 'OPEN_URL': {\n        href = link.payload.url\n\n        target = link.payload.openInNewTab ? '_blank' : '_self'\n\n        break\n      }\n\n      case 'SEND_EMAIL': {\n        const { to, subject = '', body = '' } = link.payload\n\n        if (to != null) href = `mailto:${to}?subject=${subject}&body=${body}`\n\n        break\n      }\n\n      case 'CALL_PHONE': {\n        href = `tel:${link.payload.phoneNumber}`\n\n        break\n      }\n\n      case 'SCROLL_TO_ELEMENT': {\n        href = `#${elementId ?? ''}`\n        block = link.payload.block\n\n        break\n      }\n\n      default:\n        throw new RangeError(`Invalid link type \"${(link as any).type}.\"`)\n    }\n  }\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLElement>) => {\n      if (event.defaultPrevented) return\n\n      if (link && link.type === 'SCROLL_TO_ELEMENT') {\n        let hash: string | undefined\n\n        try {\n          hash = new URL(`http://www.example.com/${href}`).hash\n        } catch (error) {\n          console.error(`Link received invalid href: ${href}`, error)\n        }\n\n        if (href != null && href === hash) {\n          event.preventDefault()\n          const view = event.view as unknown as Window\n\n          scrollIntoView(view.document.querySelector(hash)!, {\n            behavior: 'smooth',\n            block,\n          })\n\n          if (view.location.hash !== hash) view.history.pushState({}, '', hash)\n        }\n      }\n    },\n    [link, href, block],\n  )\n\n  const res = useMemo(() => ({ href, target, onClick: handleClick }), [href, target, handleClick])\n\n  return res\n}\n"],"mappings":"AAAA,SAAqB,aAAa,eAAe;AAEjD,OAAO,oBAAoB;AAC3B,SAAS,oBAAoB;AAE7B,SAAS,4BAA4B;AAU9B,SAAS,oBACd,MACA,aACqB;AACrB,QAAM,SAAS,QAAQ,KAAK,SAAS,cAAc,KAAK,QAAQ,SAAS;AACzE,QAAM,OAAO,qBAAqB,UAAU,IAAI;AAChD,QAAM,aACJ,MAAM,SAAS,sBAAsB,KAAK,QAAQ,iBAAiB,aAAa;AAClF,QAAM,YAAY,aAAa,UAAU;AAEzC,MAAI,OAAO;AACX,MAAI;AACJ,MAAI;AAEJ,MAAI,MAAM;AACR,YAAQ,KAAK,MAAM;AAAA,MACjB,KAAK,aAAa;AAChB,YAAI;AAAM,iBAAO,IAAI,KAAK,QAAQ;AAElC,iBAAS,KAAK,QAAQ,eAAe,WAAW;AAEhD;AAAA,MACF;AAAA,MAEA,KAAK,YAAY;AACf,eAAO,KAAK,QAAQ;AAEpB,iBAAS,KAAK,QAAQ,eAAe,WAAW;AAEhD;AAAA,MACF;AAAA,MAEA,KAAK,cAAc;AACjB,cAAM,EAAE,IAAI,UAAU,IAAI,OAAO,GAAG,IAAI,KAAK;AAE7C,YAAI,MAAM;AAAM,iBAAO,UAAU,EAAE,YAAY,OAAO,SAAS,IAAI;AAEnE;AAAA,MACF;AAAA,MAEA,KAAK,cAAc;AACjB,eAAO,OAAO,KAAK,QAAQ,WAAW;AAEtC;AAAA,MACF;AAAA,MAEA,KAAK,qBAAqB;AACxB,eAAO,IAAI,aAAa,EAAE;AAC1B,gBAAQ,KAAK,QAAQ;AAErB;AAAA,MACF;AAAA,MAEA;AACE,cAAM,IAAI,WAAW,sBAAuB,KAAa,IAAI,IAAI;AAAA,IACrE;AAAA,EACF;AAEA,QAAM,cAAc;AAAA,IAClB,CAAC,UAAmC;AAClC,UAAI,MAAM;AAAkB;AAE5B,UAAI,QAAQ,KAAK,SAAS,qBAAqB;AAC7C,YAAI;AAEJ,YAAI;AACF,iBAAO,IAAI,IAAI,0BAA0B,IAAI,EAAE,EAAE;AAAA,QACnD,SAAS,OAAO;AACd,kBAAQ,MAAM,+BAA+B,IAAI,IAAI,KAAK;AAAA,QAC5D;AAEA,YAAI,QAAQ,QAAQ,SAAS,MAAM;AACjC,gBAAM,eAAe;AACrB,gBAAM,OAAO,MAAM;AAEnB,yBAAe,KAAK,SAAS,cAAc,IAAI,GAAI;AAAA,YACjD,UAAU;AAAA,YACV;AAAA,UACF,CAAC;AAED,cAAI,KAAK,SAAS,SAAS;AAAM,iBAAK,QAAQ,UAAU,CAAC,GAAG,IAAI,IAAI;AAAA,QACtE;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,MAAM,MAAM,KAAK;AAAA,EACpB;AAEA,QAAM,MAAM,QAAQ,OAAO,EAAE,MAAM,QAAQ,SAAS,YAAY,IAAI,CAAC,MAAM,QAAQ,WAAW,CAAC;AAE/F,SAAO;AACT;","names":[]}

package/dist/esm/runtimes/react/controls/list.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { ControlValue } from "./control";
+function ListControlValue({
+  definition,
+  data,
+  children,
+  control
+}) {
+  const [controls, setControls] = useState(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    if (control == null || data == null)
+      return;
+    setControls(control.setItemsControl(data));
+  }, [data, control]);
+  return (data ?? []).reduce(
+    (renderFn, item) => (listControlValue) => /* @__PURE__ */ jsx(
+      ControlValue,
+      {
+        definition: definition.config.type,
+        data: item.value,
+        control: controls?.get(item.id),
+        children: (value) => renderFn([value, ...listControlValue])
+      }
+    ),
+    children
+  )([]);
+}
+export {
+  ListControlValue
+};
+//# sourceMappingURL=list.js.map

package/dist/esm/runtimes/react/controls/list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/list.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\nimport { ListControl, ListControlData, ListControlDefinition } from '../../../controls'\nimport { AnyPropController } from '../../../prop-controllers/instances'\nimport { ControlDefinitionValue, ControlValue } from './control'\n\ntype ListControlItemValue<T extends ListControlDefinition> = ControlDefinitionValue<\n  T['config']['type']\n>\n\nexport type ListControlValue<T extends ListControlDefinition> = ListControlItemValue<T>[]\n\ntype ListControlValueProps<T extends ListControlDefinition> = {\n  definition: T\n  data: ListControlData<T> | undefined\n  children(value: ListControlValue<T>): JSX.Element\n  control: ListControl\n}\n\nexport function ListControlValue<T extends ListControlDefinition>({\n  definition,\n  data,\n  children,\n  control,\n}: ListControlValueProps<T>): JSX.Element {\n  const [controls, setControls] = useState<Map<string, AnyPropController> | undefined>(new Map())\n\n  useEffect(() => {\n    if (control == null || data == null) return\n\n    // This is not ideal because we're setting the itemsControl from the ListControlValue.\n    // This is because right now we don't have a subscribeToValue function inside the control.\n    // We can improve this by adding the subscribeToValue to createPropController and by\n    // moving the setItemsControl to the control itself.\n    setControls(control.setItemsControl(data))\n  }, [data, control])\n\n  return (data ?? []).reduce(\n    (renderFn, item) => listControlValue =>\n      (\n        <ControlValue\n          definition={definition.config.type}\n          data={item.value}\n          control={controls?.get(item.id)}\n        >\n          {value => renderFn([value as ListControlItemValue<T>, ...listControlValue])}\n        </ControlValue>\n      ),\n    children,\n  )([])\n}\n"],"mappings":"AAuCQ;AAvCR,SAAS,WAAW,gBAAgB;AAGpC,SAAiC,oBAAoB;AAe9C,SAAS,iBAAkD;AAAA,EAChE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0C;AACxC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAqD,oBAAI,IAAI,CAAC;AAE9F,YAAU,MAAM;AACd,QAAI,WAAW,QAAQ,QAAQ;AAAM;AAMrC,gBAAY,QAAQ,gBAAgB,IAAI,CAAC;AAAA,EAC3C,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,UAAQ,QAAQ,CAAC,GAAG;AAAA,IAClB,CAAC,UAAU,SAAS,sBAEhB;AAAA,MAAC;AAAA;AAAA,QACC,YAAY,WAAW,OAAO;AAAA,QAC9B,MAAM,KAAK;AAAA,QACX,SAAS,UAAU,IAAI,KAAK,EAAE;AAAA,QAE7B,qBAAS,SAAS,CAAC,OAAkC,GAAG,gBAAgB,CAAC;AAAA;AAAA,IAC5E;AAAA,IAEJ;AAAA,EACF,EAAE,CAAC,CAAC;AACN;","names":[]}

package/dist/esm/runtimes/react/controls/number.js

@@ -0,0 +1,13 @@
+import { match } from "ts-pattern";
+import {
+  NumberControlDataTypeKey,
+  NumberControlDataTypeValueV1
+} from "../../../controls";
+function useNumber(data, definition) {
+  const value = match(data).with({ [NumberControlDataTypeKey]: NumberControlDataTypeValueV1 }, (val) => val.value).otherwise((val) => val) ?? definition.config.defaultValue;
+  return value;
+}
+export {
+  useNumber
+};
+//# sourceMappingURL=number.js.map

package/dist/esm/runtimes/react/controls/number.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/controls/number.ts"],"sourcesContent":["import { match } from 'ts-pattern'\nimport {\n  NumberControlData,\n  NumberControlDataTypeKey,\n  NumberControlDataTypeValueV1,\n  NumberControlDefinition,\n} from '../../../controls'\n\nexport type NumberControlValue<T extends NumberControlDefinition> =\n  undefined extends T['config']['defaultValue'] ? number | undefined : number\n\nexport function useNumber<T extends NumberControlDefinition>(\n  data: NumberControlData | undefined,\n  definition: T,\n): NumberControlValue<T> {\n  const value: number | undefined =\n    match(data)\n      .with({ [NumberControlDataTypeKey]: NumberControlDataTypeValueV1 }, val => val.value)\n      .otherwise(val => val) ?? definition.config.defaultValue\n\n  return value as NumberControlValue<T>\n}\n"],"mappings":"AAAA,SAAS,aAAa;AACtB;AAAA,EAEE;AAAA,EACA;AAAA,OAEK;AAKA,SAAS,UACd,MACA,YACuB;AACvB,QAAM,QACJ,MAAM,IAAI,EACP,KAAK,EAAE,CAAC,wBAAwB,GAAG,6BAA6B,GAAG,SAAO,IAAI,KAAK,EACnF,UAAU,SAAO,GAAG,KAAK,WAAW,OAAO;AAEhD,SAAO;AACT;","names":[]}

package/dist/esm/runtimes/react/controls/rich-text/EditableText/editable-text.js

@@ -0,0 +1,106 @@
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+import { getBox } from "css-box-model";
+import isHotkey from "is-hotkey";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState
+} from "react";
+import { createEditor } from "slate";
+import { Slate, Editable, withReact, ReactEditor } from "slate-react";
+import { useBuilderEditMode } from "../../..";
+import { richTextDTOtoDAO } from "../../../../../controls";
+import {
+  BlockType,
+  withBlock,
+  withTypography,
+  withBuilder,
+  onKeyDown
+} from "../../../../../slate";
+import { BuilderEditMode } from "../../../../../state/modules/builder-edit-mode";
+import { pollBoxModel } from "../../../poll-box-model";
+import { Element, Leaf } from "../components";
+import { useSyncDOMSelection } from "./useSyncDOMSelection";
+import { useSyncWithBuilder } from "./useSyncWithBuilder";
+const defaultText = [{ type: BlockType.Paragraph, children: [{ text: "" }] }];
+const EditableText = forwardRef(function EditableText2({ id, text, width, margin }, ref) {
+  const [editor] = useState(() => withBlock(withTypography(withBuilder(withReact(createEditor())))));
+  const [isPreservingDOMSElection, setIsPreservingDOMSelection] = useState(false);
+  useSyncDOMSelection(editor, isPreservingDOMSElection);
+  const delaySync = useSyncWithBuilder(editor, text);
+  const editMode = useBuilderEditMode();
+  const [propControllers, setPropControllers] = useState(null);
+  const controller = propControllers?.text;
+  useEffect(() => {
+    if (controller == null)
+      return;
+    const element = ReactEditor.toDOMNode(editor, editor);
+    return pollBoxModel({
+      element,
+      onBoxModelChange: (boxModel) => controller.changeBoxModel(boxModel)
+    });
+  }, [editor, controller]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      getDomNode() {
+        return ReactEditor.toDOMNode(editor, editor);
+      },
+      getBoxModel() {
+        return getBox(ReactEditor.toDOMNode(editor, editor));
+      },
+      setPropControllers
+    }),
+    [editor, setPropControllers]
+  );
+  const initialValue = useMemo(() => text ? richTextDTOtoDAO(text) : defaultText, [text]);
+  useEffect(() => {
+    controller?.setSlateEditor(editor);
+  }, [controller, editor]);
+  const handleFocus = useCallback(() => {
+    controller?.focus();
+    setIsPreservingDOMSelection(true);
+  }, [controller]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (isHotkey("mod+shift+z", e))
+        return controller?.redo();
+      if (isHotkey("mod+z", e))
+        return controller?.undo();
+      if (isHotkey("escape")(e))
+        return controller?.blur();
+      onKeyDown(e, editor);
+    },
+    [controller, editor]
+  );
+  const handleBlur = useCallback((e) => {
+    if (e.relatedTarget == null)
+      return;
+    setIsPreservingDOMSelection(false);
+    ReactEditor.deselect(editor);
+  }, []);
+  return /* @__PURE__ */ jsx(Slate, { editor, value: initialValue, onChange: delaySync, children: /* @__PURE__ */ jsx(
+    Editable,
+    {
+      id,
+      renderLeaf: Leaf,
+      renderElement: Element,
+      onFocus: handleFocus,
+      onKeyDown: handleKeyDown,
+      onBlur: handleBlur,
+      className: cx(width, margin),
+      readOnly: editMode !== BuilderEditMode.CONTENT,
+      placeholder: "Write some text..."
+    }
+  ) });
+});
+var editable_text_default = EditableText;
+export {
+  EditableText,
+  editable_text_default as default
+};
+//# sourceMappingURL=editable-text.js.map

package/dist/esm/runtimes/react/controls/rich-text/EditableText/editable-text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text/EditableText/editable-text.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { getBox } from 'css-box-model'\nimport isHotkey from 'is-hotkey'\nimport {\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'\nimport { useBuilderEditMode } from '../../..'\nimport { richTextDTOtoDAO } from '../../../../../controls'\nimport { RichTextValue } from '../../../../../prop-controllers'\nimport { ElementIDValue } from '../../../../../prop-controllers/descriptors'\nimport { DescriptorsPropControllers } from '../../../../../prop-controllers/instances'\nimport {\n  RichTextDAO,\n  BlockType,\n  withBlock,\n  withTypography,\n  withBuilder,\n  onKeyDown,\n} from '../../../../../slate'\nimport { BuilderEditMode } from '../../../../../state/modules/builder-edit-mode'\nimport { PropControllersHandle } from '../../../../../state/modules/prop-controller-handles'\nimport { pollBoxModel } from '../../../poll-box-model'\nimport { Element, Leaf } from '../components'\nimport { Descriptors } from '../rich-text'\nimport { useSyncDOMSelection } from './useSyncDOMSelection'\nimport { useSyncWithBuilder } from './useSyncWithBuilder'\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(() => withBlock(withTypography(withBuilder(withReact(createEditor())))))\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"],"mappings":"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","names":["EditableText"]}

package/dist/esm/runtimes/react/controls/rich-text/EditableText/index.js

@@ -0,0 +1,7 @@
+import EditableText from "./editable-text";
+export * from "./editable-text";
+var EditableText_default = EditableText;
+export {
+  EditableText_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/runtimes/react/controls/rich-text/EditableText/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text/EditableText/index.ts"],"sourcesContent":["import EditableText from './editable-text'\nexport * from './editable-text'\nexport default EditableText\n"],"mappings":"AAAA,OAAO,kBAAkB;AACzB,cAAc;AACd,IAAO,uBAAQ;","names":[]}

package/dist/esm/runtimes/react/controls/rich-text/EditableText/useSyncDOMSelection.js

@@ -0,0 +1,39 @@
+import { ReactEditor } from "slate-react";
+import { Range as SlateRange } from "slate";
+import { useIsomorphicLayoutEffect } from "../../../../../components/hooks/useIsomorphicLayoutEffect";
+function useSyncDOMSelection(editor, isEnabled) {
+  useIsomorphicLayoutEffect(() => {
+    if (!isEnabled || editor.selection == null || ReactEditor.isFocused(editor))
+      return;
+    try {
+      const root = ReactEditor.findDocumentOrShadowRoot(editor);
+      const domSelection = root.getSelection();
+      const newDomRange = ReactEditor.toDOMRange(editor, editor.selection);
+      if (newDomRange) {
+        if (SlateRange.isBackward(editor.selection)) {
+          domSelection?.setBaseAndExtent(
+            newDomRange.endContainer,
+            newDomRange.endOffset,
+            newDomRange.startContainer,
+            newDomRange.startOffset
+          );
+        } else {
+          domSelection?.setBaseAndExtent(
+            newDomRange.startContainer,
+            newDomRange.startOffset,
+            newDomRange.endContainer,
+            newDomRange.endOffset
+          );
+        }
+      } else {
+        domSelection?.removeAllRanges();
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  });
+}
+export {
+  useSyncDOMSelection
+};
+//# sourceMappingURL=useSyncDOMSelection.js.map

package/dist/esm/runtimes/react/controls/rich-text/EditableText/useSyncDOMSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text/EditableText/useSyncDOMSelection.tsx"],"sourcesContent":["import { ReactEditor } from 'slate-react'\nimport { Editor, Range as SlateRange } from 'slate'\nimport { useIsomorphicLayoutEffect } from '../../../../../components/hooks/useIsomorphicLayoutEffect'\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"],"mappings":"AAAA,SAAS,mBAAmB;AAC5B,SAAiB,SAAS,kBAAkB;AAC5C,SAAS,iCAAiC;AAOnC,SAAS,oBAAoB,QAAgB,WAAoB;AACtE,4BAA0B,MAAM;AAC9B,QAAI,CAAC,aAAa,OAAO,aAAa,QAAQ,YAAY,UAAU,MAAM;AAAG;AAC7E,QAAI;AACF,YAAM,OAAO,YAAY,yBAAyB,MAAM;AACxD,YAAM,eAAe,KAAK,aAAa;AACvC,YAAM,cAA4B,YAAY,WAAW,QAAQ,OAAO,SAAS;AAEjF,UAAI,aAAa;AACf,YAAI,WAAW,WAAW,OAAO,SAAU,GAAG;AAC5C,wBAAc;AAAA,YACZ,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,YAAY;AAAA,UACd;AAAA,QACF,OAAO;AACL,wBAAc;AAAA,YACZ,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,YAAY;AAAA,UACd;AAAA,QACF;AAAA,MACF,OAAO;AACL,sBAAc,gBAAgB;AAAA,MAChC;AAAA,IACF,SAAS,GAAG;AACV,cAAQ,MAAM,CAAC;AAAA,IACjB;AAAA,EACF,CAAC;AACH;","names":[]}

package/dist/esm/runtimes/react/controls/rich-text/EditableText/useSyncWithBuilder.js

@@ -0,0 +1,35 @@
+import { useState, useEffect, useCallback } from "react";
+import { useIsInBuilder } from "../../../../../react";
+import { richTextDTOtoDAO, richTextDTOtoSelection } from "../../../../../controls";
+import deepEqual from "../../../../../utils/deepEqual";
+const COMMIT_DEBOUNCE_DELAY = 500;
+function useSyncWithBuilder(editor, text) {
+  const [shouldCommit, setShouldCommit] = useState(true);
+  const isInBuilder = useIsInBuilder();
+  useEffect(() => {
+    if (shouldCommit && text && isInBuilder) {
+      const nextValue = richTextDTOtoDAO(text);
+      const nextSelection = richTextDTOtoSelection(text);
+      if (!deepEqual(editor.children, nextValue) || !deepEqual(editor.selection, nextSelection)) {
+        editor.children = nextValue;
+        editor.selection = nextSelection;
+        editor.onChange();
+      }
+    }
+  }, [editor, shouldCommit, text]);
+  useEffect(() => {
+    if (shouldCommit)
+      return;
+    const timeoutId = window.setTimeout(() => {
+      setShouldCommit(true);
+    }, COMMIT_DEBOUNCE_DELAY);
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [shouldCommit]);
+  return useCallback(() => setShouldCommit(false), []);
+}
+export {
+  useSyncWithBuilder
+};
+//# sourceMappingURL=useSyncWithBuilder.js.map

package/dist/esm/runtimes/react/controls/rich-text/EditableText/useSyncWithBuilder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text/EditableText/useSyncWithBuilder.tsx"],"sourcesContent":["import { useState, useEffect, useCallback } from 'react'\nimport { Editor } from 'slate'\nimport { useIsInBuilder } from '../../../../../react'\nimport { richTextDTOtoDAO, richTextDTOtoSelection } from '../../../../../controls'\nimport { RichTextValue } from '../../../../../prop-controllers'\nimport deepEqual from '../../../../../utils/deepEqual'\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"],"mappings":"AAAA,SAAS,UAAU,WAAW,mBAAmB;AAEjD,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB,8BAA8B;AAEzD,OAAO,eAAe;AAEtB,MAAM,wBAAwB;AAMvB,SAAS,mBAAmB,QAAgB,MAAsB;AACvE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,IAAI;AACrD,QAAM,cAAc,eAAe;AAEnC,YAAU,MAAM;AACd,QAAI,gBAAgB,QAAQ,aAAa;AACvC,YAAM,YAAY,iBAAiB,IAAI;AACvC,YAAM,gBAAgB,uBAAuB,IAAI;AACjD,UAAI,CAAC,UAAU,OAAO,UAAU,SAAS,KAAK,CAAC,UAAU,OAAO,WAAW,aAAa,GAAG;AACzF,eAAO,WAAW;AAClB,eAAO,YAAY;AACnB,eAAO,SAAS;AAAA,MAClB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,cAAc,IAAI,CAAC;AAE/B,YAAU,MAAM;AACd,QAAI;AAAc;AAElB,UAAM,YAAY,OAAO,WAAW,MAAM;AACxC,sBAAgB,IAAI;AAAA,IACtB,GAAG,qBAAqB;AAExB,WAAO,MAAM;AACX,aAAO,aAAa,SAAS;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,SAAO,YAAY,MAAM,gBAAgB,KAAK,GAAG,CAAC,CAAC;AACrD;","names":[]}

package/dist/esm/runtimes/react/controls/rich-text/ReadOnlyText.js

@@ -0,0 +1,202 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+import { forwardRef } from "react";
+import { useResponsiveStyle } from "../../../../components/utils/responsive-style";
+import { richTextDTOtoDAO } from "../../../../controls";
+import { InlineType, BlockType } from "../../../../slate";
+import { useStyle } from "../../use-style";
+import useEnhancedTypography, { useTypographyClassName } from "../typography";
+import { Link } from "../../../../components/shared/Link";
+const ReadOnlyText = forwardRef(function ReadOnlyText2({ id, text, width, margin }, ref) {
+  const descendants = text == null ? [] : richTextDTOtoDAO(text);
+  const descendantsAsString = getText(descendants);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      id,
+      style: {
+        /**
+         * These are the default styles that Slate uses for its editable div.
+         * https://github.com/ianstormtaylor/slate/blob/4bd15ed3950e3a0871f5d0ecb391bb637c05e59d/packages/slate-react/src/components/editable.tsx
+         * Search for `disableDefaultStyles`
+         */
+        position: "relative",
+        whiteSpace: "pre-wrap",
+        wordWrap: "break-word"
+      },
+      className: cx(width, margin),
+      children: descendantsAsString === "" ? /* @__PURE__ */ jsx(Placeholder, {}) : /* @__PURE__ */ jsx(Descendants, { descendants })
+    }
+  );
+});
+var ReadOnlyText_default = ReadOnlyText;
+function Placeholder({ text = "Write some text..." }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: useStyle({
+        display: "inline-block",
+        width: 0,
+        maxWidth: "100%",
+        whiteSpace: "nowrap",
+        opacity: 0.333,
+        verticalAlign: "text-top"
+      }),
+      children: text
+    }
+  );
+}
+function TextElement({ descendant }) {
+  const enhancedTypography = useEnhancedTypography(descendant.typography);
+  const typographyClassName = useTypographyClassName(enhancedTypography);
+  return /* @__PURE__ */ jsx("span", { className: typographyClassName, children: descendant.text === "" ? "\uFEFF" : descendant.text });
+}
+function InlineElement({ descendant }) {
+  const linkClassName = useStyle({ textDecoration: "none" });
+  switch (descendant.type) {
+    case InlineType.Code:
+      return /* @__PURE__ */ jsx("code", { children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+    case InlineType.SuperScript:
+      return /* @__PURE__ */ jsx("sup", { children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+    case InlineType.SubScript:
+      return /* @__PURE__ */ jsx("sub", { children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+    case InlineType.Link:
+      return /* @__PURE__ */ jsx(Link, { className: linkClassName, link: descendant.link ?? void 0, children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+  }
+}
+function BlockElement({ descendant }) {
+  const blockStyles = [
+    useStyle({ margin: 0 }),
+    useStyle(useResponsiveStyle([descendant.textAlign], ([textAlign = "left"]) => ({ textAlign })))
+  ];
+  const quoteStyle = useStyle({
+    padding: "0.5em 10px",
+    fontSize: "1.25em",
+    fontWeight: "300",
+    borderLeft: "5px solid rgba(0, 0, 0, 0.1)"
+  });
+  switch (descendant.type) {
+    case BlockType.Default:
+    case BlockType.Paragraph:
+      return /* @__PURE__ */ jsx("p", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+    case BlockType.Heading1:
+      return /* @__PURE__ */ jsx("h1", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+    case BlockType.Heading2:
+      return /* @__PURE__ */ jsx("h2", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+    case BlockType.Heading3:
+      return /* @__PURE__ */ jsx("h3", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+    case BlockType.Heading4:
+      return /* @__PURE__ */ jsx("h4", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+    case BlockType.Heading5:
+      return /* @__PURE__ */ jsx("h5", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+    case BlockType.Heading6:
+      return /* @__PURE__ */ jsx("h6", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+    case BlockType.BlockQuote:
+      return /* @__PURE__ */ jsx("blockquote", { className: cx(...blockStyles, quoteStyle), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+    case BlockType.OrderedList:
+      return /* @__PURE__ */ jsx("ol", { className: cx(...blockStyles), style: { listStylePosition: "inside" }, children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+    case BlockType.UnorderedList:
+      return /* @__PURE__ */ jsx("ul", { className: cx(...blockStyles), style: { listStylePosition: "inside" }, children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+    case BlockType.ListItem:
+      return /* @__PURE__ */ jsx("li", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+    case BlockType.ListItemChild:
+      return /* @__PURE__ */ jsx("span", { className: cx(...blockStyles), children: /* @__PURE__ */ jsx(Descendants, { descendants: descendant.children }) });
+    default:
+      return null;
+  }
+}
+function isText(node) {
+  if (typeof node === "object" && "text" in node)
+    return true;
+  return false;
+}
+function Descendants({ descendants }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: descendants.map((descendant, index) => {
+    if (isText(descendant)) {
+      return /* @__PURE__ */ jsx(TextElement, { descendant }, index);
+    }
+    switch (descendant.type) {
+      case InlineType.Link:
+      case InlineType.Code:
+      case InlineType.SubScript:
+      case InlineType.SuperScript:
+        return /* @__PURE__ */ jsx(InlineElement, { descendant }, index);
+      case BlockType.Heading1:
+      case BlockType.Heading2:
+      case BlockType.Heading3:
+      case BlockType.Heading4:
+      case BlockType.Heading5:
+      case BlockType.Heading6:
+      case BlockType.BlockQuote:
+      case BlockType.Paragraph:
+      case BlockType.Default:
+      case BlockType.OrderedList:
+      case BlockType.UnorderedList:
+      case BlockType.ListItem:
+      case BlockType.ListItemChild:
+        return /* @__PURE__ */ jsx(BlockElement, { descendant }, index);
+      default:
+        return null;
+    }
+  }) });
+}
+function isBlock(descendant) {
+  if ("text" in descendant)
+    return false;
+  switch (descendant.type) {
+    case BlockType.Heading1:
+    case BlockType.Heading2:
+    case BlockType.Heading3:
+    case BlockType.Heading4:
+    case BlockType.Heading5:
+    case BlockType.Heading6:
+    case BlockType.BlockQuote:
+    case BlockType.Paragraph:
+    case BlockType.Default:
+    case BlockType.OrderedList:
+    case BlockType.UnorderedList:
+    case BlockType.ListItem:
+    case BlockType.ListItemChild:
+      return true;
+    default:
+      return false;
+  }
+}
+function getTextByDescendant(descendant) {
+  if ("text" in descendant) {
+    return descendant.text ?? "";
+  }
+  switch (descendant.type) {
+    case InlineType.Link:
+    case InlineType.Code:
+    case InlineType.SubScript:
+    case InlineType.SuperScript:
+      return descendant.children.map((descendant2) => getTextByDescendant(descendant2)).join("") ?? "";
+    case BlockType.Heading1:
+    case BlockType.Heading2:
+    case BlockType.Heading3:
+    case BlockType.Heading4:
+    case BlockType.Heading5:
+    case BlockType.Heading6:
+    case BlockType.BlockQuote:
+    case BlockType.Paragraph:
+    case BlockType.Default:
+    case BlockType.OrderedList:
+    case BlockType.UnorderedList:
+    case BlockType.ListItem:
+    case BlockType.ListItemChild:
+      return descendant.children.map((descendant2) => getTextByDescendant(descendant2)).join(descendant.children.every(isBlock) ? "\n" : "") ?? "";
+    default:
+      return "";
+  }
+}
+function getText(descendant) {
+  return descendant.map(getTextByDescendant).join("\n");
+}
+export {
+  BlockElement,
+  TextElement,
+  ReadOnlyText_default as default
+};
+//# sourceMappingURL=ReadOnlyText.js.map