@makeswift/runtime 0.7.4 → 0.7.6

package/dist/Box.cjs.js

@@ -141,6 +141,9 @@ const Box = React.forwardRef(function Box2({
     setElement(current);
   }, []);
   React.useImperativeHandle(ref, () => ({
+    getDomNode() {
+      return boxElementObjectRef.current;
+    },
     getBoxModel() {
       var _a, _b, _c, _d;
       const paddingBoxElement = innerRef.current;

package/dist/Box.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.cjs.js","sources":["../src/components/builtin/Box/components/Placeholder/index.tsx","../src/components/builtin/Box/Box.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\ntype Props = { hide?: boolean }\n\nexport default forwardRef(function Placeholder(\n  { hide = false, ...restOfProps }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      style={{ visibility: hide ? 'hidden' : 'initial' }}\n      className={useStyle({\n        width: '100%',\n        background: 'rgba(161, 168, 194, 0.18)',\n        height: 80,\n        padding: 8,\n      })}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        style={{ overflow: 'visible' }}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </div>\n  )\n})\n","import {\n  forwardRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react'\nimport { cx } from '@emotion/css'\nimport { v4 as uuid } from 'uuid'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\nimport { areBoxAnimationPropsEqual, BoxAnimationProps, useBoxAnimation } from './animations'\nimport {\n  ElementIDValue,\n  ResponsiveIconRadioGroupValue,\n  GridValue,\n  GapYValue,\n  GapXValue,\n  CheckboxValue,\n  BackgroundsValue,\n} from '../../../prop-controllers/descriptors'\nimport { BoxModelHandle, parse, createBox } from '../../../box-model'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { responsiveStyle } from '../../utils/responsive-style'\nimport { GridItem } from '../../shared/grid-item'\nimport { useStyle } from '../../../runtimes/react/use-style'\n\ntype Props = {\n  id?: ElementIDValue\n  backgrounds?: BackgroundsValue\n  width?: string\n  height?: ResponsiveIconRadioGroupValue<'auto' | 'stretch'>\n  verticalAlign?: ResponsiveIconRadioGroupValue<\n    'flex-start' | 'center' | 'flex-end' | 'space-between'\n  >\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  rowGap?: GapYValue\n  columnGap?: GapXValue\n  hidePlaceholder?: CheckboxValue\n  children?: GridValue\n} & BoxAnimationProps\n\nconst Box = forwardRef(function Box(\n  {\n    id,\n    backgrounds,\n    width,\n    height,\n    margin,\n    padding,\n    border,\n    children,\n    borderRadius,\n    boxShadow,\n    rowGap,\n    columnGap,\n    hidePlaceholder,\n    verticalAlign,\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemStaggerDuration,\n  }: Props,\n  ref: Ref<BoxModelHandle>,\n) {\n  const innerRef = useRef<HTMLDivElement | null>(null)\n  const boxElementObjectRef = useRef<HTMLElement | null>(null)\n  const [animationClassName, replayAnimation, setElement] = useBoxAnimation(\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n  )\n  const boxElementCallbackRef = useCallback((current: HTMLElement | null) => {\n    boxElementObjectRef.current = current\n\n    setElement(current)\n  }, [])\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getBoxModel() {\n        const paddingBoxElement = innerRef.current\n        const borderBoxElement = innerRef.current\n        const marginBoxElement = boxElementObjectRef.current\n        const borderBox = innerRef.current?.getBoundingClientRect()\n        const paddingBoxComputedStyle =\n          paddingBoxElement?.ownerDocument.defaultView?.getComputedStyle(paddingBoxElement)\n        const borderBoxComputedStyle =\n          borderBoxElement?.ownerDocument.defaultView?.getComputedStyle(borderBoxElement)\n        const marginBoxComputedStyle =\n          marginBoxElement?.ownerDocument.defaultView?.getComputedStyle(marginBoxElement)\n        const padding = paddingBoxComputedStyle && {\n          top: parse(paddingBoxComputedStyle.paddingTop),\n          right: parse(paddingBoxComputedStyle.paddingRight),\n          bottom: parse(paddingBoxComputedStyle.paddingBottom),\n          left: parse(paddingBoxComputedStyle.paddingLeft),\n        }\n        const border = borderBoxComputedStyle && {\n          top: parse(borderBoxComputedStyle.borderTopWidth),\n          right: parse(borderBoxComputedStyle.borderRightWidth),\n          bottom: parse(borderBoxComputedStyle.borderBottomWidth),\n          left: parse(borderBoxComputedStyle.borderLeftWidth),\n        }\n        const margin = marginBoxComputedStyle && {\n          top: parse(marginBoxComputedStyle.marginTop),\n          right: parse(marginBoxComputedStyle.marginRight),\n          bottom: parse(marginBoxComputedStyle.marginBottom),\n          left: parse(marginBoxComputedStyle.marginLeft),\n        }\n\n        return borderBox ? createBox({ borderBox, padding, border, margin }) : null\n      },\n    }),\n    [],\n  )\n\n  const gridItemClassName = useStyle(\n    responsiveStyle([verticalAlign], ([alignItems = 'flex-start']) => ({ alignItems })),\n  )\n\n  const [key, setKey] = useState(() => uuid())\n\n  const animationProps = {\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemAnimateDelay,\n    itemStaggerDuration,\n  }\n\n  const prevAnimationProps = useRef(animationProps)\n  useEffect(() => {\n    if (!areBoxAnimationPropsEqual(prevAnimationProps.current, animationProps)) {\n      replayAnimation()\n      setKey(uuid())\n      prevAnimationProps.current = animationProps\n    }\n  }, [replayAnimation, animationProps])\n\n  return (\n    <BackgroundsContainer\n      ref={boxElementCallbackRef}\n      id={id}\n      className={cx(\n        width,\n        margin,\n        borderRadius,\n        useStyle({ display: 'flex' }),\n        useStyle(responsiveStyle([height], ([alignSelf = 'auto']) => ({ alignSelf }))),\n        animationClassName,\n      )}\n      backgrounds={backgrounds}\n    >\n      <div\n        ref={innerRef}\n        key={key}\n        className={cx(\n          padding,\n          boxShadow,\n          border,\n          useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n          useStyle(\n            responsiveStyle([verticalAlign], ([alignContent = 'flex-start']) => ({ alignContent })),\n          ),\n        )}\n      >\n        {children && children.elements.length > 0 ? (\n          children.elements.map((child, index) => (\n            <GridItem\n              key={child.key}\n              className={gridItemClassName}\n              grid={children.columns}\n              index={index}\n              itemAnimateDuration={itemAnimateDuration}\n              itemAnimateDelay={itemAnimateDelay}\n              itemStaggerDuration={itemStaggerDuration}\n              columnGap={columnGap}\n              rowGap={rowGap}\n            >\n              <Element element={child} />\n            </GridItem>\n          ))\n        ) : (\n          <Placeholder hide={hidePlaceholder} />\n        )}\n      </div>\n    </BackgroundsContainer>\n  )\n})\n\nexport default Box\n"],"names":["forwardRef","ref","hide","restOfProps","visibility","useStyle","width","background","height","padding","overflow","Box","id","backgrounds","margin","border","children","borderRadius","boxShadow","rowGap","columnGap","hidePlaceholder","verticalAlign","boxAnimateType","boxAnimateDuration","boxAnimateDelay","itemAnimateDelay","itemAnimateType","itemAnimateDuration","itemStaggerDuration","innerRef","useRef","boxElementObjectRef","animationClassName","replayAnimation","setElement","useBoxAnimation","boxElementCallbackRef","useCallback","current","useImperativeHandle","getBoxModel","paddingBoxElement","borderBoxElement","marginBoxElement","borderBox","getBoundingClientRect","paddingBoxComputedStyle","ownerDocument","defaultView","getComputedStyle","borderBoxComputedStyle","marginBoxComputedStyle","top","parse","paddingTop","right","paddingRight","bottom","paddingBottom","left","paddingLeft","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","marginTop","marginRight","marginBottom","marginLeft","createBox","gridItemClassName","responsiveStyle","alignItems","key","setKey","useState","uuid","animationProps","prevAnimationProps","useEffect","areBoxAnimationPropsEqual","BackgroundsContainer","cx","display","alignSelf","flexWrap","alignContent","elements","length","map","child","index","GridItem","columns","Element"],"mappings":"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"}
+{"version":3,"file":"Box.cjs.js","sources":["../src/components/builtin/Box/components/Placeholder/index.tsx","../src/components/builtin/Box/Box.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\ntype Props = { hide?: boolean }\n\nexport default forwardRef(function Placeholder(\n  { hide = false, ...restOfProps }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      style={{ visibility: hide ? 'hidden' : 'initial' }}\n      className={useStyle({\n        width: '100%',\n        background: 'rgba(161, 168, 194, 0.18)',\n        height: 80,\n        padding: 8,\n      })}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        style={{ overflow: 'visible' }}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </div>\n  )\n})\n","import {\n  forwardRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react'\nimport { cx } from '@emotion/css'\nimport { v4 as uuid } from 'uuid'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\nimport { areBoxAnimationPropsEqual, BoxAnimationProps, useBoxAnimation } from './animations'\nimport {\n  ElementIDValue,\n  ResponsiveIconRadioGroupValue,\n  GridValue,\n  GapYValue,\n  GapXValue,\n  CheckboxValue,\n  BackgroundsValue,\n} from '../../../prop-controllers/descriptors'\nimport { BoxModelHandle, parse, createBox } from '../../../box-model'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { responsiveStyle } from '../../utils/responsive-style'\nimport { GridItem } from '../../shared/grid-item'\nimport { useStyle } from '../../../runtimes/react/use-style'\n\ntype Props = {\n  id?: ElementIDValue\n  backgrounds?: BackgroundsValue\n  width?: string\n  height?: ResponsiveIconRadioGroupValue<'auto' | 'stretch'>\n  verticalAlign?: ResponsiveIconRadioGroupValue<\n    'flex-start' | 'center' | 'flex-end' | 'space-between'\n  >\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  rowGap?: GapYValue\n  columnGap?: GapXValue\n  hidePlaceholder?: CheckboxValue\n  children?: GridValue\n} & BoxAnimationProps\n\nconst Box = forwardRef(function Box(\n  {\n    id,\n    backgrounds,\n    width,\n    height,\n    margin,\n    padding,\n    border,\n    children,\n    borderRadius,\n    boxShadow,\n    rowGap,\n    columnGap,\n    hidePlaceholder,\n    verticalAlign,\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemStaggerDuration,\n  }: Props,\n  ref: Ref<BoxModelHandle>,\n) {\n  const innerRef = useRef<HTMLDivElement | null>(null)\n  const boxElementObjectRef = useRef<HTMLElement | null>(null)\n  const [animationClassName, replayAnimation, setElement] = useBoxAnimation(\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n  )\n  const boxElementCallbackRef = useCallback((current: HTMLElement | null) => {\n    boxElementObjectRef.current = current\n\n    setElement(current)\n  }, [])\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getDomNode() {\n        return boxElementObjectRef.current\n      },\n      getBoxModel() {\n        const paddingBoxElement = innerRef.current\n        const borderBoxElement = innerRef.current\n        const marginBoxElement = boxElementObjectRef.current\n        const borderBox = innerRef.current?.getBoundingClientRect()\n        const paddingBoxComputedStyle =\n          paddingBoxElement?.ownerDocument.defaultView?.getComputedStyle(paddingBoxElement)\n        const borderBoxComputedStyle =\n          borderBoxElement?.ownerDocument.defaultView?.getComputedStyle(borderBoxElement)\n        const marginBoxComputedStyle =\n          marginBoxElement?.ownerDocument.defaultView?.getComputedStyle(marginBoxElement)\n        const padding = paddingBoxComputedStyle && {\n          top: parse(paddingBoxComputedStyle.paddingTop),\n          right: parse(paddingBoxComputedStyle.paddingRight),\n          bottom: parse(paddingBoxComputedStyle.paddingBottom),\n          left: parse(paddingBoxComputedStyle.paddingLeft),\n        }\n        const border = borderBoxComputedStyle && {\n          top: parse(borderBoxComputedStyle.borderTopWidth),\n          right: parse(borderBoxComputedStyle.borderRightWidth),\n          bottom: parse(borderBoxComputedStyle.borderBottomWidth),\n          left: parse(borderBoxComputedStyle.borderLeftWidth),\n        }\n        const margin = marginBoxComputedStyle && {\n          top: parse(marginBoxComputedStyle.marginTop),\n          right: parse(marginBoxComputedStyle.marginRight),\n          bottom: parse(marginBoxComputedStyle.marginBottom),\n          left: parse(marginBoxComputedStyle.marginLeft),\n        }\n\n        return borderBox ? createBox({ borderBox, padding, border, margin }) : null\n      },\n    }),\n    [],\n  )\n\n  const gridItemClassName = useStyle(\n    responsiveStyle([verticalAlign], ([alignItems = 'flex-start']) => ({ alignItems })),\n  )\n\n  const [key, setKey] = useState(() => uuid())\n\n  const animationProps = {\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemAnimateDelay,\n    itemStaggerDuration,\n  }\n\n  const prevAnimationProps = useRef(animationProps)\n  useEffect(() => {\n    if (!areBoxAnimationPropsEqual(prevAnimationProps.current, animationProps)) {\n      replayAnimation()\n      setKey(uuid())\n      prevAnimationProps.current = animationProps\n    }\n  }, [replayAnimation, animationProps])\n\n  return (\n    <BackgroundsContainer\n      ref={boxElementCallbackRef}\n      id={id}\n      className={cx(\n        width,\n        margin,\n        borderRadius,\n        useStyle({ display: 'flex' }),\n        useStyle(responsiveStyle([height], ([alignSelf = 'auto']) => ({ alignSelf }))),\n        animationClassName,\n      )}\n      backgrounds={backgrounds}\n    >\n      <div\n        ref={innerRef}\n        key={key}\n        className={cx(\n          padding,\n          boxShadow,\n          border,\n          useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n          useStyle(\n            responsiveStyle([verticalAlign], ([alignContent = 'flex-start']) => ({ alignContent })),\n          ),\n        )}\n      >\n        {children && children.elements.length > 0 ? (\n          children.elements.map((child, index) => (\n            <GridItem\n              key={child.key}\n              className={gridItemClassName}\n              grid={children.columns}\n              index={index}\n              itemAnimateDuration={itemAnimateDuration}\n              itemAnimateDelay={itemAnimateDelay}\n              itemStaggerDuration={itemStaggerDuration}\n              columnGap={columnGap}\n              rowGap={rowGap}\n            >\n              <Element element={child} />\n            </GridItem>\n          ))\n        ) : (\n          <Placeholder hide={hidePlaceholder} />\n        )}\n      </div>\n    </BackgroundsContainer>\n  )\n})\n\nexport default Box\n"],"names":["forwardRef","ref","hide","restOfProps","visibility","useStyle","width","background","height","padding","overflow","Box","id","backgrounds","margin","border","children","borderRadius","boxShadow","rowGap","columnGap","hidePlaceholder","verticalAlign","boxAnimateType","boxAnimateDuration","boxAnimateDelay","itemAnimateDelay","itemAnimateType","itemAnimateDuration","itemStaggerDuration","innerRef","useRef","boxElementObjectRef","animationClassName","replayAnimation","setElement","useBoxAnimation","boxElementCallbackRef","useCallback","current","useImperativeHandle","getDomNode","getBoxModel","paddingBoxElement","borderBoxElement","marginBoxElement","borderBox","getBoundingClientRect","paddingBoxComputedStyle","ownerDocument","defaultView","getComputedStyle","borderBoxComputedStyle","marginBoxComputedStyle","top","parse","paddingTop","right","paddingRight","bottom","paddingBottom","left","paddingLeft","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","marginTop","marginRight","marginBottom","marginLeft","createBox","gridItemClassName","responsiveStyle","alignItems","key","setKey","useState","uuid","animationProps","prevAnimationProps","useEffect","areBoxAnimationPropsEqual","BackgroundsContainer","cx","display","alignSelf","flexWrap","alignContent","elements","length","map","child","index","GridItem","columns","Element"],"mappings":"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"}

package/dist/Box.es.js

@@ -139,6 +139,9 @@ const Box = forwardRef(function Box2({
     setElement(current);
   }, []);
   useImperativeHandle(ref, () => ({
+    getDomNode() {
+      return boxElementObjectRef.current;
+    },
     getBoxModel() {
       var _a, _b, _c, _d;
       const paddingBoxElement = innerRef.current;

package/dist/Box.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.es.js","sources":["../src/components/builtin/Box/components/Placeholder/index.tsx","../src/components/builtin/Box/Box.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\ntype Props = { hide?: boolean }\n\nexport default forwardRef(function Placeholder(\n  { hide = false, ...restOfProps }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      style={{ visibility: hide ? 'hidden' : 'initial' }}\n      className={useStyle({\n        width: '100%',\n        background: 'rgba(161, 168, 194, 0.18)',\n        height: 80,\n        padding: 8,\n      })}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        style={{ overflow: 'visible' }}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </div>\n  )\n})\n","import {\n  forwardRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react'\nimport { cx } from '@emotion/css'\nimport { v4 as uuid } from 'uuid'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\nimport { areBoxAnimationPropsEqual, BoxAnimationProps, useBoxAnimation } from './animations'\nimport {\n  ElementIDValue,\n  ResponsiveIconRadioGroupValue,\n  GridValue,\n  GapYValue,\n  GapXValue,\n  CheckboxValue,\n  BackgroundsValue,\n} from '../../../prop-controllers/descriptors'\nimport { BoxModelHandle, parse, createBox } from '../../../box-model'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { responsiveStyle } from '../../utils/responsive-style'\nimport { GridItem } from '../../shared/grid-item'\nimport { useStyle } from '../../../runtimes/react/use-style'\n\ntype Props = {\n  id?: ElementIDValue\n  backgrounds?: BackgroundsValue\n  width?: string\n  height?: ResponsiveIconRadioGroupValue<'auto' | 'stretch'>\n  verticalAlign?: ResponsiveIconRadioGroupValue<\n    'flex-start' | 'center' | 'flex-end' | 'space-between'\n  >\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  rowGap?: GapYValue\n  columnGap?: GapXValue\n  hidePlaceholder?: CheckboxValue\n  children?: GridValue\n} & BoxAnimationProps\n\nconst Box = forwardRef(function Box(\n  {\n    id,\n    backgrounds,\n    width,\n    height,\n    margin,\n    padding,\n    border,\n    children,\n    borderRadius,\n    boxShadow,\n    rowGap,\n    columnGap,\n    hidePlaceholder,\n    verticalAlign,\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemStaggerDuration,\n  }: Props,\n  ref: Ref<BoxModelHandle>,\n) {\n  const innerRef = useRef<HTMLDivElement | null>(null)\n  const boxElementObjectRef = useRef<HTMLElement | null>(null)\n  const [animationClassName, replayAnimation, setElement] = useBoxAnimation(\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n  )\n  const boxElementCallbackRef = useCallback((current: HTMLElement | null) => {\n    boxElementObjectRef.current = current\n\n    setElement(current)\n  }, [])\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getBoxModel() {\n        const paddingBoxElement = innerRef.current\n        const borderBoxElement = innerRef.current\n        const marginBoxElement = boxElementObjectRef.current\n        const borderBox = innerRef.current?.getBoundingClientRect()\n        const paddingBoxComputedStyle =\n          paddingBoxElement?.ownerDocument.defaultView?.getComputedStyle(paddingBoxElement)\n        const borderBoxComputedStyle =\n          borderBoxElement?.ownerDocument.defaultView?.getComputedStyle(borderBoxElement)\n        const marginBoxComputedStyle =\n          marginBoxElement?.ownerDocument.defaultView?.getComputedStyle(marginBoxElement)\n        const padding = paddingBoxComputedStyle && {\n          top: parse(paddingBoxComputedStyle.paddingTop),\n          right: parse(paddingBoxComputedStyle.paddingRight),\n          bottom: parse(paddingBoxComputedStyle.paddingBottom),\n          left: parse(paddingBoxComputedStyle.paddingLeft),\n        }\n        const border = borderBoxComputedStyle && {\n          top: parse(borderBoxComputedStyle.borderTopWidth),\n          right: parse(borderBoxComputedStyle.borderRightWidth),\n          bottom: parse(borderBoxComputedStyle.borderBottomWidth),\n          left: parse(borderBoxComputedStyle.borderLeftWidth),\n        }\n        const margin = marginBoxComputedStyle && {\n          top: parse(marginBoxComputedStyle.marginTop),\n          right: parse(marginBoxComputedStyle.marginRight),\n          bottom: parse(marginBoxComputedStyle.marginBottom),\n          left: parse(marginBoxComputedStyle.marginLeft),\n        }\n\n        return borderBox ? createBox({ borderBox, padding, border, margin }) : null\n      },\n    }),\n    [],\n  )\n\n  const gridItemClassName = useStyle(\n    responsiveStyle([verticalAlign], ([alignItems = 'flex-start']) => ({ alignItems })),\n  )\n\n  const [key, setKey] = useState(() => uuid())\n\n  const animationProps = {\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemAnimateDelay,\n    itemStaggerDuration,\n  }\n\n  const prevAnimationProps = useRef(animationProps)\n  useEffect(() => {\n    if (!areBoxAnimationPropsEqual(prevAnimationProps.current, animationProps)) {\n      replayAnimation()\n      setKey(uuid())\n      prevAnimationProps.current = animationProps\n    }\n  }, [replayAnimation, animationProps])\n\n  return (\n    <BackgroundsContainer\n      ref={boxElementCallbackRef}\n      id={id}\n      className={cx(\n        width,\n        margin,\n        borderRadius,\n        useStyle({ display: 'flex' }),\n        useStyle(responsiveStyle([height], ([alignSelf = 'auto']) => ({ alignSelf }))),\n        animationClassName,\n      )}\n      backgrounds={backgrounds}\n    >\n      <div\n        ref={innerRef}\n        key={key}\n        className={cx(\n          padding,\n          boxShadow,\n          border,\n          useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n          useStyle(\n            responsiveStyle([verticalAlign], ([alignContent = 'flex-start']) => ({ alignContent })),\n          ),\n        )}\n      >\n        {children && children.elements.length > 0 ? (\n          children.elements.map((child, index) => (\n            <GridItem\n              key={child.key}\n              className={gridItemClassName}\n              grid={children.columns}\n              index={index}\n              itemAnimateDuration={itemAnimateDuration}\n              itemAnimateDelay={itemAnimateDelay}\n              itemStaggerDuration={itemStaggerDuration}\n              columnGap={columnGap}\n              rowGap={rowGap}\n            >\n              <Element element={child} />\n            </GridItem>\n          ))\n        ) : (\n          <Placeholder hide={hidePlaceholder} />\n        )}\n      </div>\n    </BackgroundsContainer>\n  )\n})\n\nexport default Box\n"],"names":["forwardRef","ref","hide","restOfProps","visibility","useStyle","width","background","height","padding","overflow","Box","id","backgrounds","margin","border","children","borderRadius","boxShadow","rowGap","columnGap","hidePlaceholder","verticalAlign","boxAnimateType","boxAnimateDuration","boxAnimateDelay","itemAnimateDelay","itemAnimateType","itemAnimateDuration","itemStaggerDuration","innerRef","useRef","boxElementObjectRef","animationClassName","replayAnimation","setElement","useBoxAnimation","boxElementCallbackRef","useCallback","current","useImperativeHandle","getBoxModel","paddingBoxElement","borderBoxElement","marginBoxElement","borderBox","getBoundingClientRect","paddingBoxComputedStyle","ownerDocument","defaultView","getComputedStyle","borderBoxComputedStyle","marginBoxComputedStyle","top","parse","paddingTop","right","paddingRight","bottom","paddingBottom","left","paddingLeft","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","marginTop","marginRight","marginBottom","marginLeft","createBox","gridItemClassName","responsiveStyle","alignItems","key","setKey","useState","uuid","animationProps","prevAnimationProps","useEffect","areBoxAnimationPropsEqual","cx","display","alignSelf","flexWrap","alignContent","elements","length","map","child","index","columns"],"mappings":"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"}
+{"version":3,"file":"Box.es.js","sources":["../src/components/builtin/Box/components/Placeholder/index.tsx","../src/components/builtin/Box/Box.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\ntype Props = { hide?: boolean }\n\nexport default forwardRef(function Placeholder(\n  { hide = false, ...restOfProps }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      style={{ visibility: hide ? 'hidden' : 'initial' }}\n      className={useStyle({\n        width: '100%',\n        background: 'rgba(161, 168, 194, 0.18)',\n        height: 80,\n        padding: 8,\n      })}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"100%\"\n        height=\"100%\"\n        style={{ overflow: 'visible' }}\n      >\n        <rect\n          x={0}\n          y={0}\n          width=\"100%\"\n          height=\"100%\"\n          strokeWidth={2}\n          strokeDasharray=\"4 2\"\n          fill=\"none\"\n          stroke=\"rgba(161, 168, 194, 0.40)\"\n          rx=\"4\"\n          ry=\"4\"\n        />\n      </svg>\n    </div>\n  )\n})\n","import {\n  forwardRef,\n  Ref,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react'\nimport { cx } from '@emotion/css'\nimport { v4 as uuid } from 'uuid'\n\nimport { Element } from '../../../runtimes/react'\nimport Placeholder from './components/Placeholder'\nimport { areBoxAnimationPropsEqual, BoxAnimationProps, useBoxAnimation } from './animations'\nimport {\n  ElementIDValue,\n  ResponsiveIconRadioGroupValue,\n  GridValue,\n  GapYValue,\n  GapXValue,\n  CheckboxValue,\n  BackgroundsValue,\n} from '../../../prop-controllers/descriptors'\nimport { BoxModelHandle, parse, createBox } from '../../../box-model'\nimport BackgroundsContainer from '../../shared/BackgroundsContainer'\nimport { responsiveStyle } from '../../utils/responsive-style'\nimport { GridItem } from '../../shared/grid-item'\nimport { useStyle } from '../../../runtimes/react/use-style'\n\ntype Props = {\n  id?: ElementIDValue\n  backgrounds?: BackgroundsValue\n  width?: string\n  height?: ResponsiveIconRadioGroupValue<'auto' | 'stretch'>\n  verticalAlign?: ResponsiveIconRadioGroupValue<\n    'flex-start' | 'center' | 'flex-end' | 'space-between'\n  >\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  rowGap?: GapYValue\n  columnGap?: GapXValue\n  hidePlaceholder?: CheckboxValue\n  children?: GridValue\n} & BoxAnimationProps\n\nconst Box = forwardRef(function Box(\n  {\n    id,\n    backgrounds,\n    width,\n    height,\n    margin,\n    padding,\n    border,\n    children,\n    borderRadius,\n    boxShadow,\n    rowGap,\n    columnGap,\n    hidePlaceholder,\n    verticalAlign,\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemStaggerDuration,\n  }: Props,\n  ref: Ref<BoxModelHandle>,\n) {\n  const innerRef = useRef<HTMLDivElement | null>(null)\n  const boxElementObjectRef = useRef<HTMLElement | null>(null)\n  const [animationClassName, replayAnimation, setElement] = useBoxAnimation(\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n  )\n  const boxElementCallbackRef = useCallback((current: HTMLElement | null) => {\n    boxElementObjectRef.current = current\n\n    setElement(current)\n  }, [])\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getDomNode() {\n        return boxElementObjectRef.current\n      },\n      getBoxModel() {\n        const paddingBoxElement = innerRef.current\n        const borderBoxElement = innerRef.current\n        const marginBoxElement = boxElementObjectRef.current\n        const borderBox = innerRef.current?.getBoundingClientRect()\n        const paddingBoxComputedStyle =\n          paddingBoxElement?.ownerDocument.defaultView?.getComputedStyle(paddingBoxElement)\n        const borderBoxComputedStyle =\n          borderBoxElement?.ownerDocument.defaultView?.getComputedStyle(borderBoxElement)\n        const marginBoxComputedStyle =\n          marginBoxElement?.ownerDocument.defaultView?.getComputedStyle(marginBoxElement)\n        const padding = paddingBoxComputedStyle && {\n          top: parse(paddingBoxComputedStyle.paddingTop),\n          right: parse(paddingBoxComputedStyle.paddingRight),\n          bottom: parse(paddingBoxComputedStyle.paddingBottom),\n          left: parse(paddingBoxComputedStyle.paddingLeft),\n        }\n        const border = borderBoxComputedStyle && {\n          top: parse(borderBoxComputedStyle.borderTopWidth),\n          right: parse(borderBoxComputedStyle.borderRightWidth),\n          bottom: parse(borderBoxComputedStyle.borderBottomWidth),\n          left: parse(borderBoxComputedStyle.borderLeftWidth),\n        }\n        const margin = marginBoxComputedStyle && {\n          top: parse(marginBoxComputedStyle.marginTop),\n          right: parse(marginBoxComputedStyle.marginRight),\n          bottom: parse(marginBoxComputedStyle.marginBottom),\n          left: parse(marginBoxComputedStyle.marginLeft),\n        }\n\n        return borderBox ? createBox({ borderBox, padding, border, margin }) : null\n      },\n    }),\n    [],\n  )\n\n  const gridItemClassName = useStyle(\n    responsiveStyle([verticalAlign], ([alignItems = 'flex-start']) => ({ alignItems })),\n  )\n\n  const [key, setKey] = useState(() => uuid())\n\n  const animationProps = {\n    boxAnimateType,\n    boxAnimateDuration,\n    boxAnimateDelay,\n    itemAnimateType,\n    itemAnimateDuration,\n    itemAnimateDelay,\n    itemStaggerDuration,\n  }\n\n  const prevAnimationProps = useRef(animationProps)\n  useEffect(() => {\n    if (!areBoxAnimationPropsEqual(prevAnimationProps.current, animationProps)) {\n      replayAnimation()\n      setKey(uuid())\n      prevAnimationProps.current = animationProps\n    }\n  }, [replayAnimation, animationProps])\n\n  return (\n    <BackgroundsContainer\n      ref={boxElementCallbackRef}\n      id={id}\n      className={cx(\n        width,\n        margin,\n        borderRadius,\n        useStyle({ display: 'flex' }),\n        useStyle(responsiveStyle([height], ([alignSelf = 'auto']) => ({ alignSelf }))),\n        animationClassName,\n      )}\n      backgrounds={backgrounds}\n    >\n      <div\n        ref={innerRef}\n        key={key}\n        className={cx(\n          padding,\n          boxShadow,\n          border,\n          useStyle({ display: 'flex', flexWrap: 'wrap', width: '100%' }),\n          useStyle(\n            responsiveStyle([verticalAlign], ([alignContent = 'flex-start']) => ({ alignContent })),\n          ),\n        )}\n      >\n        {children && children.elements.length > 0 ? (\n          children.elements.map((child, index) => (\n            <GridItem\n              key={child.key}\n              className={gridItemClassName}\n              grid={children.columns}\n              index={index}\n              itemAnimateDuration={itemAnimateDuration}\n              itemAnimateDelay={itemAnimateDelay}\n              itemStaggerDuration={itemStaggerDuration}\n              columnGap={columnGap}\n              rowGap={rowGap}\n            >\n              <Element element={child} />\n            </GridItem>\n          ))\n        ) : (\n          <Placeholder hide={hidePlaceholder} />\n        )}\n      </div>\n    </BackgroundsContainer>\n  )\n})\n\nexport default Box\n"],"names":["forwardRef","ref","hide","restOfProps","visibility","useStyle","width","background","height","padding","overflow","Box","id","backgrounds","margin","border","children","borderRadius","boxShadow","rowGap","columnGap","hidePlaceholder","verticalAlign","boxAnimateType","boxAnimateDuration","boxAnimateDelay","itemAnimateDelay","itemAnimateType","itemAnimateDuration","itemStaggerDuration","innerRef","useRef","boxElementObjectRef","animationClassName","replayAnimation","setElement","useBoxAnimation","boxElementCallbackRef","useCallback","current","useImperativeHandle","getDomNode","getBoxModel","paddingBoxElement","borderBoxElement","marginBoxElement","borderBox","getBoundingClientRect","paddingBoxComputedStyle","ownerDocument","defaultView","getComputedStyle","borderBoxComputedStyle","marginBoxComputedStyle","top","parse","paddingTop","right","paddingRight","bottom","paddingBottom","left","paddingLeft","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","marginTop","marginRight","marginBottom","marginLeft","createBox","gridItemClassName","responsiveStyle","alignItems","key","setKey","useState","uuid","animationProps","prevAnimationProps","useEffect","areBoxAnimationPropsEqual","cx","display","alignSelf","flexWrap","alignContent","elements","length","map","child","index","columns"],"mappings":"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"}

package/dist/EditableText.cjs.js

@@ -275,6 +275,10 @@ const EditableText = React.forwardRef(function EditableText2({
     });
   }, [editor, controller]);
   React.useImperativeHandle(ref, () => ({
+    getDomNode() {
+      const el = editor == null ? void 0 : editor.findDOMNode([]);
+      return el instanceof Element ? el : null;
+    },
     getBoxModel() {
       const el = editor == null ? void 0 : editor.findDOMNode([]);
       return el instanceof Element ? boxModels.getBox(el) : null;

package/dist/EditableText.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableText.cjs.js","sources":["../src/components/builtin/Text/components/RichTextEditor/plugins/DeviceOverridesMarks.tsx","../src/components/builtin/Text/components/RichTextEditor/plugins/DeviceOverridesBlocks.tsx","../src/components/builtin/Text/components/RichTextEditor/plugins/Link.tsx","../src/components/builtin/Text/components/RichTextEditor/plugins/Inlines.tsx","../src/components/builtin/Text/components/RichTextEditor/index.tsx","../src/components/builtin/Text/EditableText.tsx"],"sourcesContent":["import type { Plugin } from 'slate-react'\n\nimport Mark from '../components/Mark'\n\nconst TYPOGRAPHY_TYPE = 'typography'\n\nexport default function DeviceOverridesMarksPlugin(): Plugin {\n  return {\n    renderMark({ mark, children }, _editor, next) {\n      if (mark.type === TYPOGRAPHY_TYPE) {\n        return <Mark value={mark.data.get('value')}>{children}</Mark>\n      }\n\n      return next()\n    },\n  }\n}\n","import { Plugin } from 'slate-react'\n\nimport Block from '../components/Block'\n\nexport default function DeviceOverridesBlockPlugin(): Plugin {\n  return {\n    renderBlock(props, _editor, next): JSX.Element {\n      const { node, attributes, children } = props\n      const blockProps = { textAlign: node.data.get('textAlign') }\n\n      switch (node.type) {\n        case 'paragraph':\n          return (\n            <Block {...attributes} {...blockProps} as=\"p\">\n              {children}\n            </Block>\n          )\n\n        case 'heading-one':\n          return (\n            <Block {...attributes} {...blockProps} as=\"h1\">\n              {children}\n            </Block>\n          )\n\n        case 'heading-two':\n          return (\n            <Block {...attributes} {...blockProps} as=\"h2\">\n              {children}\n            </Block>\n          )\n\n        case 'heading-three':\n          return (\n            <Block {...attributes} {...blockProps} as=\"h3\">\n              {children}\n            </Block>\n          )\n\n        case 'heading-four':\n          return (\n            <Block {...attributes} {...blockProps} as=\"h4\">\n              {children}\n            </Block>\n          )\n\n        case 'heading-five':\n          return (\n            <Block {...attributes} {...blockProps} as=\"h5\">\n              {children}\n            </Block>\n          )\n\n        case 'heading-six':\n          return (\n            <Block {...attributes} {...blockProps} as=\"h6\">\n              {children}\n            </Block>\n          )\n\n        case 'blockquote':\n          return (\n            <Block {...attributes} {...blockProps} as=\"blockquote\">\n              {children}\n            </Block>\n          )\n\n        default:\n          return next()\n      }\n    },\n  }\n}\n","import { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef } from 'react'\nimport { Plugin } from 'slate-react'\nimport { useStyle } from '../../../../../../runtimes/react/use-style'\n\nimport { Link } from '../../../../../shared/Link'\n\nfunction StyledLink({ className, ...restOfProps }: ComponentPropsWithoutRef<typeof Link>) {\n  return <Link {...restOfProps} className={cx(useStyle({ textDecoration: 'none' }), className)} />\n}\n\nexport default function LinkPlugin(): Plugin {\n  return {\n    renderInline(props, _editor, next) {\n      const { attributes, children, node } = props\n\n      switch (node.type) {\n        case 'link': {\n          const { data } = node\n\n          return (\n            <StyledLink {...attributes} link={data.toJS()}>\n              {children}\n            </StyledLink>\n          )\n        }\n\n        default: {\n          return next()\n        }\n      }\n    },\n  }\n}\n","import { Plugin } from 'slate-react'\n\nexport default function Inlines(): Plugin {\n  return {\n    renderInline(props, _editor, next) {\n      const { attributes, children, node } = props\n\n      switch (node.type) {\n        case 'code': {\n          return <code {...attributes}>{children}</code>\n        }\n\n        case 'superscript': {\n          return <sup {...attributes}>{children}</sup>\n        }\n\n        case 'subscript': {\n          return <sub {...attributes}>{children}</sub>\n        }\n\n        default: {\n          return next()\n        }\n      }\n    },\n  }\n}\n","import { ComponentPropsWithoutRef, forwardRef, useMemo } from 'react'\n\nimport { Editor as SlateEditor } from 'slate-react'\n\n// @ts-expect-error: no types for '@convertkit/slate-lists'\nimport Lists from '@convertkit/slate-lists'\n\nimport DeviceOverridesMarks from './plugins/DeviceOverridesMarks'\nimport DeviceOverridesBlocks from './plugins/DeviceOverridesBlocks'\nimport Link from './plugins/Link'\nimport Inlines from './plugins/Inlines'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\n\nexport { overrideTypographyStyle } from './components/Mark'\n\ntype Props = ComponentPropsWithoutRef<typeof SlateEditor>\n\nexport const RichTextEditor = forwardRef<SlateEditor, Props>(function RichTextEditor(\n  { placeholder = 'Write some text...', className, ...restOfProps }: Props,\n  ref,\n) {\n  const plugins = useMemo(\n    () => [Lists(), Link(), Inlines(), DeviceOverridesBlocks(), DeviceOverridesMarks()],\n    [],\n  )\n\n  return (\n    <SlateEditor\n      {...restOfProps}\n      // Workaround because our Slate editor is broken on Chrome 105\n      // Problem: https://linear.app/makeswift/issue/PRD-434/our-rich-text-component-breaks-in-the-latest-version-of-chrome\n      // Workaround: https://github.com/ianstormtaylor/slate/issues/5110#issuecomment-1234951122\n      style={{ WebkitUserModify: undefined }}\n      className={cx(useStyle({ 'ul, ol': { margin: 0 } }), className)}\n      ref={ref}\n      autoFocus={false}\n      plugins={plugins}\n      placeholder={placeholder}\n    />\n  )\n})\n","import {\n  useState,\n  Ref,\n  useImperativeHandle,\n  forwardRef,\n  useEffect,\n  useCallback,\n  useRef,\n  KeyboardEvent as ReactKeyboardEvent,\n  FocusEvent as ReactFocusEvent,\n  MouseEvent as ReactMouseEvent,\n} from 'react'\nimport { Editor, OnChangeParam } from 'slate-react'\nimport { Value, ValueJSON } from 'slate'\n// @ts-expect-error: no types for 'slate-hotkeys'\nimport Hotkeys from 'slate-hotkeys'\nimport { isHotkey } from 'is-hotkey'\n\nimport {\n  ElementIDValue,\n  RichTextDescriptor,\n  RichTextValue,\n} from '../../../prop-controllers/descriptors'\nimport { BoxModelHandle, getBox } from '../../../box-model'\nimport { PropControllersHandle } from '../../../state/modules/prop-controller-handles'\nimport { RichTextEditor } from './components/RichTextEditor'\nimport { DescriptorsPropControllers } from '../../../prop-controllers/instances'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { pollBoxModel } from '../../../runtimes/react/poll-box-model'\nimport { useBuilderEditMode } from '../../../runtimes/react'\nimport { BuilderEditMode } from '../../../state/modules/builder-edit-mode'\n\ntype Props = {\n  id?: ElementIDValue\n  text?: RichTextValue\n  width?: string\n  margin?: string\n}\n\nconst defaultText: ValueJSON = {\n  document: { nodes: [{ object: 'block' as const, type: 'paragraph' as const, nodes: [] }] },\n  data: {},\n}\n\nconst COMMIT_DEBOUNCE_DELAY = 500\n\ntype Descriptors = { text?: RichTextDescriptor }\n\nconst EditableText = forwardRef(function EditableText(\n  { id, text, width, margin }: Props,\n  ref: Ref<BoxModelHandle & PropControllersHandle<Descriptors>>,\n) {\n  const [editor, setEditor] = useState<Editor | null>(null)\n  const [propControllers, setPropControllers] =\n    useState<DescriptorsPropControllers<Descriptors> | null>(null)\n  const controller = propControllers?.text\n  const editMode = useBuilderEditMode()\n\n  useEffect(() => {\n    const element = editor?.findDOMNode([])\n    if (element == null || !(element instanceof HTMLElement) || controller == null) return\n    return pollBoxModel({\n      element: element,\n      onBoxModelChange: boxModel => controller.changeBoxModel(boxModel),\n    })\n  }, [editor, controller])\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getBoxModel() {\n        const el = editor?.findDOMNode([])\n\n        return el instanceof Element ? getBox(el) : null\n      },\n      setPropControllers,\n    }),\n    [editor, setPropControllers],\n  )\n\n  useEffect(() => {\n    if (editor) controller?.setSlateEditor(editor)\n  }, [controller, editor])\n\n  /**\n   * We must keep local state so that we can reflect the user's typed changes immediately. At the\n   * same time, though, the source of truth for the data is the prop data. This presents a\n   * challenge: how do we keep local state in sync with the prop data without mangling user input as\n   * data comes in?\n   *\n   * Consider, for example, that the user types \"Hello\". If at a later time, when the user is trying\n   * to type \", world\" the component re-renders with prop data \"H\", \"He\", \"Hel\", \"Hell\", \"Hello\", it\n   * will disrupt the user's typing. This could also happen as a result of the prop data changing\n   * for other reasons, like collaborators changing the prop data concurrently. We want to avoid to\n   * disrupt the user's typing, while at the same time display the \"true\" value as quickly as\n   * possible.\n   *\n   * The approach we take here is to commit the prop data at an opportune time: as the user is\n   * typing we avoid to commit prop data. But once they've stopped typing, we commit it as soon as\n   * possible. This is known as a debounce.\n   */\n  const [value, setValue] = useState(() => {\n    const { selection, ...textWithoutSelection } = text ?? defaultText\n\n    return Value.fromJSON(textWithoutSelection)\n  })\n  const [shouldCommit, setShouldCommit] = useState(true)\n\n  useEffect(() => {\n    if (shouldCommit) {\n      const nextValue = Value.fromJSON(text ?? defaultText)\n\n      setValue(currentValue =>\n        currentValue.selection.isBlurred\n          ? Value.fromJSON(nextValue.toJSON({ preserveSelection: false }))\n          : nextValue,\n      )\n    }\n  }, [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  function handleChange(change: OnChangeParam) {\n    setValue(change.value as Value)\n\n    if (change.value !== value) {\n      setShouldCommit(false)\n\n      controller?.onChange(change)\n    }\n  }\n\n  // HACK: Slate holds on to the very first DOM event handlers passed in and doesn't update them\n  // even if they change. Since `controller` is first `undefined` then we must use a ref.\n  const lastController = useRef(controller)\n  if (lastController.current !== controller) lastController.current = controller\n  const handleFocus = useCallback(() => {\n    lastController.current?.focus()\n  }, [])\n  const handleKeyDown = useCallback(\n    (event: ReactKeyboardEvent, _editor: Editor, next: () => any) => {\n      if (Hotkeys.isUndo(event)) {\n        lastController.current?.undo()\n\n        return true\n      }\n\n      if (Hotkeys.isRedo(event)) {\n        lastController.current?.redo()\n\n        return true\n      }\n\n      if (isHotkey('escape')(event)) {\n        lastController.current?.blur()\n\n        return true\n      }\n\n      return next()\n    },\n    [],\n  )\n  const handleBlur = useCallback((event: ReactFocusEvent, editor: Editor, next: () => any) => {\n    const selection = editor.value.selection\n\n    next()\n\n    // Normally, after a user highlight a text, clicking on the panel will remove the text selection.\n    // This line is a workaround for that. Because the panel is not in the iframe, relatedTarget\n    // would be null, and we select the previous text selection to maintain the text highlight.\n    // Inspiration: https://github.com/ianstormtaylor/slate/issues/3412#issuecomment-663906003\n    if (event.relatedTarget == null) editor.select(selection)\n  }, [])\n\n  // HACK: Slate holds on to the very first DOM event handlers passed in and doesn't update them\n  // even if they change.\n  const lastEditMode = useRef(editMode)\n  if (lastEditMode.current !== editMode) lastEditMode.current = editMode\n\n  const handleClick = (event: ReactMouseEvent, _editor: Editor, next: () => any) => {\n    next()\n\n    // This is needed to prevent clicks from propagating in content mode.\n    // This is not ideal because it might break if we implement a plugin in the future that depends on click.\n    // Also, we might also want to stop hover/mousedown event\n    if (lastEditMode.current === BuilderEditMode.CONTENT) event.stopPropagation()\n  }\n\n  return (\n    <RichTextEditor\n      // @ts-expect-error: types don't allow for 'id' prop even though it's used.\n      id={id}\n      ref={setEditor}\n      className={cx(useStyle({ 'ul, ol': { margin: 0 } }), width, margin)}\n      value={value}\n      onChange={handleChange}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      onBlur={handleBlur}\n      onClick={handleClick}\n      readOnly={editMode !== BuilderEditMode.CONTENT}\n    />\n  )\n})\n\nexport default EditableText\n"],"names":["TYPOGRAPHY_TYPE","renderMark","mark","children","_editor","next","type","Mark","data","get","renderBlock","props","node","attributes","blockProps","textAlign","Block","className","restOfProps","Link","cx","useStyle","textDecoration","renderInline","toJS","RichTextEditor","forwardRef","ref","placeholder","plugins","useMemo","Lists","Inlines","DeviceOverridesBlocks","DeviceOverridesMarks","SlateEditor","WebkitUserModify","undefined","margin","defaultText","document","nodes","object","COMMIT_DEBOUNCE_DELAY","EditableText","id","text","width","editor","setEditor","useState","propControllers","setPropControllers","controller","editMode","useBuilderEditMode","useEffect","element","findDOMNode","HTMLElement","pollBoxModel","onBoxModelChange","boxModel","changeBoxModel","useImperativeHandle","getBoxModel","el","Element","getBox","setSlateEditor","value","setValue","selection","textWithoutSelection","Value","fromJSON","shouldCommit","setShouldCommit","nextValue","currentValue","isBlurred","toJSON","preserveSelection","timeoutId","window","setTimeout","clearTimeout","change","onChange","lastController","useRef","current","handleFocus","useCallback","focus","handleKeyDown","event","Hotkeys","isUndo","undo","isRedo","redo","isHotkey","blur","handleBlur","relatedTarget","select","lastEditMode","handleClick","BuilderEditMode","CONTENT","stopPropagation","handleChange"],"mappings":"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"}
+{"version":3,"file":"EditableText.cjs.js","sources":["../src/components/builtin/Text/components/RichTextEditor/plugins/DeviceOverridesMarks.tsx","../src/components/builtin/Text/components/RichTextEditor/plugins/DeviceOverridesBlocks.tsx","../src/components/builtin/Text/components/RichTextEditor/plugins/Link.tsx","../src/components/builtin/Text/components/RichTextEditor/plugins/Inlines.tsx","../src/components/builtin/Text/components/RichTextEditor/index.tsx","../src/components/builtin/Text/EditableText.tsx"],"sourcesContent":["import type { Plugin } from 'slate-react'\n\nimport Mark from '../components/Mark'\n\nconst TYPOGRAPHY_TYPE = 'typography'\n\nexport default function DeviceOverridesMarksPlugin(): Plugin {\n  return {\n    renderMark({ mark, children }, _editor, next) {\n      if (mark.type === TYPOGRAPHY_TYPE) {\n        return <Mark value={mark.data.get('value')}>{children}</Mark>\n      }\n\n      return next()\n    },\n  }\n}\n","import { Plugin } from 'slate-react'\n\nimport Block from '../components/Block'\n\nexport default function DeviceOverridesBlockPlugin(): Plugin {\n  return {\n    renderBlock(props, _editor, next): JSX.Element {\n      const { node, attributes, children } = props\n      const blockProps = { textAlign: node.data.get('textAlign') }\n\n      switch (node.type) {\n        case 'paragraph':\n          return (\n            <Block {...attributes} {...blockProps} as=\"p\">\n              {children}\n            </Block>\n          )\n\n        case 'heading-one':\n          return (\n            <Block {...attributes} {...blockProps} as=\"h1\">\n              {children}\n            </Block>\n          )\n\n        case 'heading-two':\n          return (\n            <Block {...attributes} {...blockProps} as=\"h2\">\n              {children}\n            </Block>\n          )\n\n        case 'heading-three':\n          return (\n            <Block {...attributes} {...blockProps} as=\"h3\">\n              {children}\n            </Block>\n          )\n\n        case 'heading-four':\n          return (\n            <Block {...attributes} {...blockProps} as=\"h4\">\n              {children}\n            </Block>\n          )\n\n        case 'heading-five':\n          return (\n            <Block {...attributes} {...blockProps} as=\"h5\">\n              {children}\n            </Block>\n          )\n\n        case 'heading-six':\n          return (\n            <Block {...attributes} {...blockProps} as=\"h6\">\n              {children}\n            </Block>\n          )\n\n        case 'blockquote':\n          return (\n            <Block {...attributes} {...blockProps} as=\"blockquote\">\n              {children}\n            </Block>\n          )\n\n        default:\n          return next()\n      }\n    },\n  }\n}\n","import { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef } from 'react'\nimport { Plugin } from 'slate-react'\nimport { useStyle } from '../../../../../../runtimes/react/use-style'\n\nimport { Link } from '../../../../../shared/Link'\n\nfunction StyledLink({ className, ...restOfProps }: ComponentPropsWithoutRef<typeof Link>) {\n  return <Link {...restOfProps} className={cx(useStyle({ textDecoration: 'none' }), className)} />\n}\n\nexport default function LinkPlugin(): Plugin {\n  return {\n    renderInline(props, _editor, next) {\n      const { attributes, children, node } = props\n\n      switch (node.type) {\n        case 'link': {\n          const { data } = node\n\n          return (\n            <StyledLink {...attributes} link={data.toJS()}>\n              {children}\n            </StyledLink>\n          )\n        }\n\n        default: {\n          return next()\n        }\n      }\n    },\n  }\n}\n","import { Plugin } from 'slate-react'\n\nexport default function Inlines(): Plugin {\n  return {\n    renderInline(props, _editor, next) {\n      const { attributes, children, node } = props\n\n      switch (node.type) {\n        case 'code': {\n          return <code {...attributes}>{children}</code>\n        }\n\n        case 'superscript': {\n          return <sup {...attributes}>{children}</sup>\n        }\n\n        case 'subscript': {\n          return <sub {...attributes}>{children}</sub>\n        }\n\n        default: {\n          return next()\n        }\n      }\n    },\n  }\n}\n","import { ComponentPropsWithoutRef, forwardRef, useMemo } from 'react'\n\nimport { Editor as SlateEditor } from 'slate-react'\n\n// @ts-expect-error: no types for '@convertkit/slate-lists'\nimport Lists from '@convertkit/slate-lists'\n\nimport DeviceOverridesMarks from './plugins/DeviceOverridesMarks'\nimport DeviceOverridesBlocks from './plugins/DeviceOverridesBlocks'\nimport Link from './plugins/Link'\nimport Inlines from './plugins/Inlines'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\n\nexport { overrideTypographyStyle } from './components/Mark'\n\ntype Props = ComponentPropsWithoutRef<typeof SlateEditor>\n\nexport const RichTextEditor = forwardRef<SlateEditor, Props>(function RichTextEditor(\n  { placeholder = 'Write some text...', className, ...restOfProps }: Props,\n  ref,\n) {\n  const plugins = useMemo(\n    () => [Lists(), Link(), Inlines(), DeviceOverridesBlocks(), DeviceOverridesMarks()],\n    [],\n  )\n\n  return (\n    <SlateEditor\n      {...restOfProps}\n      // Workaround because our Slate editor is broken on Chrome 105\n      // Problem: https://linear.app/makeswift/issue/PRD-434/our-rich-text-component-breaks-in-the-latest-version-of-chrome\n      // Workaround: https://github.com/ianstormtaylor/slate/issues/5110#issuecomment-1234951122\n      style={{ WebkitUserModify: undefined }}\n      className={cx(useStyle({ 'ul, ol': { margin: 0 } }), className)}\n      ref={ref}\n      autoFocus={false}\n      plugins={plugins}\n      placeholder={placeholder}\n    />\n  )\n})\n","import {\n  useState,\n  Ref,\n  useImperativeHandle,\n  forwardRef,\n  useEffect,\n  useCallback,\n  useRef,\n  KeyboardEvent as ReactKeyboardEvent,\n  FocusEvent as ReactFocusEvent,\n  MouseEvent as ReactMouseEvent,\n} from 'react'\nimport { Editor, OnChangeParam } from 'slate-react'\nimport { Value, ValueJSON } from 'slate'\n// @ts-expect-error: no types for 'slate-hotkeys'\nimport Hotkeys from 'slate-hotkeys'\nimport { isHotkey } from 'is-hotkey'\n\nimport {\n  ElementIDValue,\n  RichTextDescriptor,\n  RichTextValue,\n} from '../../../prop-controllers/descriptors'\nimport { BoxModelHandle, getBox } from '../../../box-model'\nimport { PropControllersHandle } from '../../../state/modules/prop-controller-handles'\nimport { RichTextEditor } from './components/RichTextEditor'\nimport { DescriptorsPropControllers } from '../../../prop-controllers/instances'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { pollBoxModel } from '../../../runtimes/react/poll-box-model'\nimport { useBuilderEditMode } from '../../../runtimes/react'\nimport { BuilderEditMode } from '../../../state/modules/builder-edit-mode'\n\ntype Props = {\n  id?: ElementIDValue\n  text?: RichTextValue\n  width?: string\n  margin?: string\n}\n\nconst defaultText: ValueJSON = {\n  document: { nodes: [{ object: 'block' as const, type: 'paragraph' as const, nodes: [] }] },\n  data: {},\n}\n\nconst COMMIT_DEBOUNCE_DELAY = 500\n\ntype Descriptors = { text?: RichTextDescriptor }\n\nconst EditableText = forwardRef(function EditableText(\n  { id, text, width, margin }: Props,\n  ref: Ref<BoxModelHandle & PropControllersHandle<Descriptors>>,\n) {\n  const [editor, setEditor] = useState<Editor | null>(null)\n  const [propControllers, setPropControllers] =\n    useState<DescriptorsPropControllers<Descriptors> | null>(null)\n  const controller = propControllers?.text\n  const editMode = useBuilderEditMode()\n\n  useEffect(() => {\n    const element = editor?.findDOMNode([])\n    if (element == null || !(element instanceof HTMLElement) || controller == null) return\n    return pollBoxModel({\n      element: element,\n      onBoxModelChange: boxModel => controller.changeBoxModel(boxModel),\n    })\n  }, [editor, controller])\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getDomNode() {\n        const el = editor?.findDOMNode([])\n\n        return el instanceof Element ? el : null\n      },\n      getBoxModel() {\n        const el = editor?.findDOMNode([])\n\n        return el instanceof Element ? getBox(el) : null\n      },\n      setPropControllers,\n    }),\n    [editor, setPropControllers],\n  )\n\n  useEffect(() => {\n    if (editor) controller?.setSlateEditor(editor)\n  }, [controller, editor])\n\n  /**\n   * We must keep local state so that we can reflect the user's typed changes immediately. At the\n   * same time, though, the source of truth for the data is the prop data. This presents a\n   * challenge: how do we keep local state in sync with the prop data without mangling user input as\n   * data comes in?\n   *\n   * Consider, for example, that the user types \"Hello\". If at a later time, when the user is trying\n   * to type \", world\" the component re-renders with prop data \"H\", \"He\", \"Hel\", \"Hell\", \"Hello\", it\n   * will disrupt the user's typing. This could also happen as a result of the prop data changing\n   * for other reasons, like collaborators changing the prop data concurrently. We want to avoid to\n   * disrupt the user's typing, while at the same time display the \"true\" value as quickly as\n   * possible.\n   *\n   * The approach we take here is to commit the prop data at an opportune time: as the user is\n   * typing we avoid to commit prop data. But once they've stopped typing, we commit it as soon as\n   * possible. This is known as a debounce.\n   */\n  const [value, setValue] = useState(() => {\n    const { selection, ...textWithoutSelection } = text ?? defaultText\n\n    return Value.fromJSON(textWithoutSelection)\n  })\n  const [shouldCommit, setShouldCommit] = useState(true)\n\n  useEffect(() => {\n    if (shouldCommit) {\n      const nextValue = Value.fromJSON(text ?? defaultText)\n\n      setValue(currentValue =>\n        currentValue.selection.isBlurred\n          ? Value.fromJSON(nextValue.toJSON({ preserveSelection: false }))\n          : nextValue,\n      )\n    }\n  }, [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  function handleChange(change: OnChangeParam) {\n    setValue(change.value as Value)\n\n    if (change.value !== value) {\n      setShouldCommit(false)\n\n      controller?.onChange(change)\n    }\n  }\n\n  // HACK: Slate holds on to the very first DOM event handlers passed in and doesn't update them\n  // even if they change. Since `controller` is first `undefined` then we must use a ref.\n  const lastController = useRef(controller)\n  if (lastController.current !== controller) lastController.current = controller\n  const handleFocus = useCallback(() => {\n    lastController.current?.focus()\n  }, [])\n  const handleKeyDown = useCallback(\n    (event: ReactKeyboardEvent, _editor: Editor, next: () => any) => {\n      if (Hotkeys.isUndo(event)) {\n        lastController.current?.undo()\n\n        return true\n      }\n\n      if (Hotkeys.isRedo(event)) {\n        lastController.current?.redo()\n\n        return true\n      }\n\n      if (isHotkey('escape')(event)) {\n        lastController.current?.blur()\n\n        return true\n      }\n\n      return next()\n    },\n    [],\n  )\n  const handleBlur = useCallback((event: ReactFocusEvent, editor: Editor, next: () => any) => {\n    const selection = editor.value.selection\n\n    next()\n\n    // Normally, after a user highlight a text, clicking on the panel will remove the text selection.\n    // This line is a workaround for that. Because the panel is not in the iframe, relatedTarget\n    // would be null, and we select the previous text selection to maintain the text highlight.\n    // Inspiration: https://github.com/ianstormtaylor/slate/issues/3412#issuecomment-663906003\n    if (event.relatedTarget == null) editor.select(selection)\n  }, [])\n\n  // HACK: Slate holds on to the very first DOM event handlers passed in and doesn't update them\n  // even if they change.\n  const lastEditMode = useRef(editMode)\n  if (lastEditMode.current !== editMode) lastEditMode.current = editMode\n\n  const handleClick = (event: ReactMouseEvent, _editor: Editor, next: () => any) => {\n    next()\n\n    // This is needed to prevent clicks from propagating in content mode.\n    // This is not ideal because it might break if we implement a plugin in the future that depends on click.\n    // Also, we might also want to stop hover/mousedown event\n    if (lastEditMode.current === BuilderEditMode.CONTENT) event.stopPropagation()\n  }\n\n  return (\n    <RichTextEditor\n      // @ts-expect-error: types don't allow for 'id' prop even though it's used.\n      id={id}\n      ref={setEditor}\n      className={cx(useStyle({ 'ul, ol': { margin: 0 } }), width, margin)}\n      value={value}\n      onChange={handleChange}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      onBlur={handleBlur}\n      onClick={handleClick}\n      readOnly={editMode !== BuilderEditMode.CONTENT}\n    />\n  )\n})\n\nexport default EditableText\n"],"names":["TYPOGRAPHY_TYPE","renderMark","mark","children","_editor","next","type","Mark","data","get","renderBlock","props","node","attributes","blockProps","textAlign","Block","className","restOfProps","Link","cx","useStyle","textDecoration","renderInline","toJS","RichTextEditor","forwardRef","ref","placeholder","plugins","useMemo","Lists","Inlines","DeviceOverridesBlocks","DeviceOverridesMarks","SlateEditor","WebkitUserModify","undefined","margin","defaultText","document","nodes","object","COMMIT_DEBOUNCE_DELAY","EditableText","id","text","width","editor","setEditor","useState","propControllers","setPropControllers","controller","editMode","useBuilderEditMode","useEffect","element","findDOMNode","HTMLElement","pollBoxModel","onBoxModelChange","boxModel","changeBoxModel","useImperativeHandle","getDomNode","el","Element","getBoxModel","getBox","setSlateEditor","value","setValue","selection","textWithoutSelection","Value","fromJSON","shouldCommit","setShouldCommit","nextValue","currentValue","isBlurred","toJSON","preserveSelection","timeoutId","window","setTimeout","clearTimeout","change","onChange","lastController","useRef","current","handleFocus","useCallback","focus","handleKeyDown","event","Hotkeys","isUndo","undo","isRedo","redo","isHotkey","blur","handleBlur","relatedTarget","select","lastEditMode","handleClick","BuilderEditMode","CONTENT","stopPropagation","handleChange"],"mappings":"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"}

package/dist/EditableText.es.js

@@ -268,6 +268,10 @@ const EditableText = forwardRef(function EditableText2({
     });
   }, [editor, controller]);
   useImperativeHandle(ref, () => ({
+    getDomNode() {
+      const el = editor == null ? void 0 : editor.findDOMNode([]);
+      return el instanceof Element ? el : null;
+    },
     getBoxModel() {
       const el = editor == null ? void 0 : editor.findDOMNode([]);
       return el instanceof Element ? getBox(el) : null;

package/dist/EditableText.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditableText.es.js","sources":["../src/components/builtin/Text/components/RichTextEditor/plugins/DeviceOverridesMarks.tsx","../src/components/builtin/Text/components/RichTextEditor/plugins/DeviceOverridesBlocks.tsx","../src/components/builtin/Text/components/RichTextEditor/plugins/Link.tsx","../src/components/builtin/Text/components/RichTextEditor/plugins/Inlines.tsx","../src/components/builtin/Text/components/RichTextEditor/index.tsx","../src/components/builtin/Text/EditableText.tsx"],"sourcesContent":["import type { Plugin } from 'slate-react'\n\nimport Mark from '../components/Mark'\n\nconst TYPOGRAPHY_TYPE = 'typography'\n\nexport default function DeviceOverridesMarksPlugin(): Plugin {\n  return {\n    renderMark({ mark, children }, _editor, next) {\n      if (mark.type === TYPOGRAPHY_TYPE) {\n        return <Mark value={mark.data.get('value')}>{children}</Mark>\n      }\n\n      return next()\n    },\n  }\n}\n","import { Plugin } from 'slate-react'\n\nimport Block from '../components/Block'\n\nexport default function DeviceOverridesBlockPlugin(): Plugin {\n  return {\n    renderBlock(props, _editor, next): JSX.Element {\n      const { node, attributes, children } = props\n      const blockProps = { textAlign: node.data.get('textAlign') }\n\n      switch (node.type) {\n        case 'paragraph':\n          return (\n            <Block {...attributes} {...blockProps} as=\"p\">\n              {children}\n            </Block>\n          )\n\n        case 'heading-one':\n          return (\n            <Block {...attributes} {...blockProps} as=\"h1\">\n              {children}\n            </Block>\n          )\n\n        case 'heading-two':\n          return (\n            <Block {...attributes} {...blockProps} as=\"h2\">\n              {children}\n            </Block>\n          )\n\n        case 'heading-three':\n          return (\n            <Block {...attributes} {...blockProps} as=\"h3\">\n              {children}\n            </Block>\n          )\n\n        case 'heading-four':\n          return (\n            <Block {...attributes} {...blockProps} as=\"h4\">\n              {children}\n            </Block>\n          )\n\n        case 'heading-five':\n          return (\n            <Block {...attributes} {...blockProps} as=\"h5\">\n              {children}\n            </Block>\n          )\n\n        case 'heading-six':\n          return (\n            <Block {...attributes} {...blockProps} as=\"h6\">\n              {children}\n            </Block>\n          )\n\n        case 'blockquote':\n          return (\n            <Block {...attributes} {...blockProps} as=\"blockquote\">\n              {children}\n            </Block>\n          )\n\n        default:\n          return next()\n      }\n    },\n  }\n}\n","import { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef } from 'react'\nimport { Plugin } from 'slate-react'\nimport { useStyle } from '../../../../../../runtimes/react/use-style'\n\nimport { Link } from '../../../../../shared/Link'\n\nfunction StyledLink({ className, ...restOfProps }: ComponentPropsWithoutRef<typeof Link>) {\n  return <Link {...restOfProps} className={cx(useStyle({ textDecoration: 'none' }), className)} />\n}\n\nexport default function LinkPlugin(): Plugin {\n  return {\n    renderInline(props, _editor, next) {\n      const { attributes, children, node } = props\n\n      switch (node.type) {\n        case 'link': {\n          const { data } = node\n\n          return (\n            <StyledLink {...attributes} link={data.toJS()}>\n              {children}\n            </StyledLink>\n          )\n        }\n\n        default: {\n          return next()\n        }\n      }\n    },\n  }\n}\n","import { Plugin } from 'slate-react'\n\nexport default function Inlines(): Plugin {\n  return {\n    renderInline(props, _editor, next) {\n      const { attributes, children, node } = props\n\n      switch (node.type) {\n        case 'code': {\n          return <code {...attributes}>{children}</code>\n        }\n\n        case 'superscript': {\n          return <sup {...attributes}>{children}</sup>\n        }\n\n        case 'subscript': {\n          return <sub {...attributes}>{children}</sub>\n        }\n\n        default: {\n          return next()\n        }\n      }\n    },\n  }\n}\n","import { ComponentPropsWithoutRef, forwardRef, useMemo } from 'react'\n\nimport { Editor as SlateEditor } from 'slate-react'\n\n// @ts-expect-error: no types for '@convertkit/slate-lists'\nimport Lists from '@convertkit/slate-lists'\n\nimport DeviceOverridesMarks from './plugins/DeviceOverridesMarks'\nimport DeviceOverridesBlocks from './plugins/DeviceOverridesBlocks'\nimport Link from './plugins/Link'\nimport Inlines from './plugins/Inlines'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\n\nexport { overrideTypographyStyle } from './components/Mark'\n\ntype Props = ComponentPropsWithoutRef<typeof SlateEditor>\n\nexport const RichTextEditor = forwardRef<SlateEditor, Props>(function RichTextEditor(\n  { placeholder = 'Write some text...', className, ...restOfProps }: Props,\n  ref,\n) {\n  const plugins = useMemo(\n    () => [Lists(), Link(), Inlines(), DeviceOverridesBlocks(), DeviceOverridesMarks()],\n    [],\n  )\n\n  return (\n    <SlateEditor\n      {...restOfProps}\n      // Workaround because our Slate editor is broken on Chrome 105\n      // Problem: https://linear.app/makeswift/issue/PRD-434/our-rich-text-component-breaks-in-the-latest-version-of-chrome\n      // Workaround: https://github.com/ianstormtaylor/slate/issues/5110#issuecomment-1234951122\n      style={{ WebkitUserModify: undefined }}\n      className={cx(useStyle({ 'ul, ol': { margin: 0 } }), className)}\n      ref={ref}\n      autoFocus={false}\n      plugins={plugins}\n      placeholder={placeholder}\n    />\n  )\n})\n","import {\n  useState,\n  Ref,\n  useImperativeHandle,\n  forwardRef,\n  useEffect,\n  useCallback,\n  useRef,\n  KeyboardEvent as ReactKeyboardEvent,\n  FocusEvent as ReactFocusEvent,\n  MouseEvent as ReactMouseEvent,\n} from 'react'\nimport { Editor, OnChangeParam } from 'slate-react'\nimport { Value, ValueJSON } from 'slate'\n// @ts-expect-error: no types for 'slate-hotkeys'\nimport Hotkeys from 'slate-hotkeys'\nimport { isHotkey } from 'is-hotkey'\n\nimport {\n  ElementIDValue,\n  RichTextDescriptor,\n  RichTextValue,\n} from '../../../prop-controllers/descriptors'\nimport { BoxModelHandle, getBox } from '../../../box-model'\nimport { PropControllersHandle } from '../../../state/modules/prop-controller-handles'\nimport { RichTextEditor } from './components/RichTextEditor'\nimport { DescriptorsPropControllers } from '../../../prop-controllers/instances'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { pollBoxModel } from '../../../runtimes/react/poll-box-model'\nimport { useBuilderEditMode } from '../../../runtimes/react'\nimport { BuilderEditMode } from '../../../state/modules/builder-edit-mode'\n\ntype Props = {\n  id?: ElementIDValue\n  text?: RichTextValue\n  width?: string\n  margin?: string\n}\n\nconst defaultText: ValueJSON = {\n  document: { nodes: [{ object: 'block' as const, type: 'paragraph' as const, nodes: [] }] },\n  data: {},\n}\n\nconst COMMIT_DEBOUNCE_DELAY = 500\n\ntype Descriptors = { text?: RichTextDescriptor }\n\nconst EditableText = forwardRef(function EditableText(\n  { id, text, width, margin }: Props,\n  ref: Ref<BoxModelHandle & PropControllersHandle<Descriptors>>,\n) {\n  const [editor, setEditor] = useState<Editor | null>(null)\n  const [propControllers, setPropControllers] =\n    useState<DescriptorsPropControllers<Descriptors> | null>(null)\n  const controller = propControllers?.text\n  const editMode = useBuilderEditMode()\n\n  useEffect(() => {\n    const element = editor?.findDOMNode([])\n    if (element == null || !(element instanceof HTMLElement) || controller == null) return\n    return pollBoxModel({\n      element: element,\n      onBoxModelChange: boxModel => controller.changeBoxModel(boxModel),\n    })\n  }, [editor, controller])\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getBoxModel() {\n        const el = editor?.findDOMNode([])\n\n        return el instanceof Element ? getBox(el) : null\n      },\n      setPropControllers,\n    }),\n    [editor, setPropControllers],\n  )\n\n  useEffect(() => {\n    if (editor) controller?.setSlateEditor(editor)\n  }, [controller, editor])\n\n  /**\n   * We must keep local state so that we can reflect the user's typed changes immediately. At the\n   * same time, though, the source of truth for the data is the prop data. This presents a\n   * challenge: how do we keep local state in sync with the prop data without mangling user input as\n   * data comes in?\n   *\n   * Consider, for example, that the user types \"Hello\". If at a later time, when the user is trying\n   * to type \", world\" the component re-renders with prop data \"H\", \"He\", \"Hel\", \"Hell\", \"Hello\", it\n   * will disrupt the user's typing. This could also happen as a result of the prop data changing\n   * for other reasons, like collaborators changing the prop data concurrently. We want to avoid to\n   * disrupt the user's typing, while at the same time display the \"true\" value as quickly as\n   * possible.\n   *\n   * The approach we take here is to commit the prop data at an opportune time: as the user is\n   * typing we avoid to commit prop data. But once they've stopped typing, we commit it as soon as\n   * possible. This is known as a debounce.\n   */\n  const [value, setValue] = useState(() => {\n    const { selection, ...textWithoutSelection } = text ?? defaultText\n\n    return Value.fromJSON(textWithoutSelection)\n  })\n  const [shouldCommit, setShouldCommit] = useState(true)\n\n  useEffect(() => {\n    if (shouldCommit) {\n      const nextValue = Value.fromJSON(text ?? defaultText)\n\n      setValue(currentValue =>\n        currentValue.selection.isBlurred\n          ? Value.fromJSON(nextValue.toJSON({ preserveSelection: false }))\n          : nextValue,\n      )\n    }\n  }, [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  function handleChange(change: OnChangeParam) {\n    setValue(change.value as Value)\n\n    if (change.value !== value) {\n      setShouldCommit(false)\n\n      controller?.onChange(change)\n    }\n  }\n\n  // HACK: Slate holds on to the very first DOM event handlers passed in and doesn't update them\n  // even if they change. Since `controller` is first `undefined` then we must use a ref.\n  const lastController = useRef(controller)\n  if (lastController.current !== controller) lastController.current = controller\n  const handleFocus = useCallback(() => {\n    lastController.current?.focus()\n  }, [])\n  const handleKeyDown = useCallback(\n    (event: ReactKeyboardEvent, _editor: Editor, next: () => any) => {\n      if (Hotkeys.isUndo(event)) {\n        lastController.current?.undo()\n\n        return true\n      }\n\n      if (Hotkeys.isRedo(event)) {\n        lastController.current?.redo()\n\n        return true\n      }\n\n      if (isHotkey('escape')(event)) {\n        lastController.current?.blur()\n\n        return true\n      }\n\n      return next()\n    },\n    [],\n  )\n  const handleBlur = useCallback((event: ReactFocusEvent, editor: Editor, next: () => any) => {\n    const selection = editor.value.selection\n\n    next()\n\n    // Normally, after a user highlight a text, clicking on the panel will remove the text selection.\n    // This line is a workaround for that. Because the panel is not in the iframe, relatedTarget\n    // would be null, and we select the previous text selection to maintain the text highlight.\n    // Inspiration: https://github.com/ianstormtaylor/slate/issues/3412#issuecomment-663906003\n    if (event.relatedTarget == null) editor.select(selection)\n  }, [])\n\n  // HACK: Slate holds on to the very first DOM event handlers passed in and doesn't update them\n  // even if they change.\n  const lastEditMode = useRef(editMode)\n  if (lastEditMode.current !== editMode) lastEditMode.current = editMode\n\n  const handleClick = (event: ReactMouseEvent, _editor: Editor, next: () => any) => {\n    next()\n\n    // This is needed to prevent clicks from propagating in content mode.\n    // This is not ideal because it might break if we implement a plugin in the future that depends on click.\n    // Also, we might also want to stop hover/mousedown event\n    if (lastEditMode.current === BuilderEditMode.CONTENT) event.stopPropagation()\n  }\n\n  return (\n    <RichTextEditor\n      // @ts-expect-error: types don't allow for 'id' prop even though it's used.\n      id={id}\n      ref={setEditor}\n      className={cx(useStyle({ 'ul, ol': { margin: 0 } }), width, margin)}\n      value={value}\n      onChange={handleChange}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      onBlur={handleBlur}\n      onClick={handleClick}\n      readOnly={editMode !== BuilderEditMode.CONTENT}\n    />\n  )\n})\n\nexport default EditableText\n"],"names":["TYPOGRAPHY_TYPE","renderMark","mark","children","_editor","next","type","data","get","renderBlock","props","node","attributes","blockProps","textAlign","Block","className","restOfProps","cx","useStyle","textDecoration","renderInline","toJS","RichTextEditor","forwardRef","ref","placeholder","plugins","useMemo","Lists","Link","Inlines","DeviceOverridesBlocks","DeviceOverridesMarks","SlateEditor","WebkitUserModify","undefined","margin","defaultText","document","nodes","object","COMMIT_DEBOUNCE_DELAY","EditableText","id","text","width","editor","setEditor","useState","propControllers","setPropControllers","controller","editMode","useBuilderEditMode","useEffect","element","findDOMNode","HTMLElement","pollBoxModel","onBoxModelChange","boxModel","changeBoxModel","useImperativeHandle","getBoxModel","el","Element","getBox","setSlateEditor","value","setValue","selection","textWithoutSelection","Value","fromJSON","shouldCommit","setShouldCommit","nextValue","currentValue","isBlurred","toJSON","preserveSelection","timeoutId","window","setTimeout","clearTimeout","change","onChange","lastController","useRef","current","handleFocus","useCallback","focus","handleKeyDown","event","Hotkeys","isUndo","undo","isRedo","redo","isHotkey","blur","handleBlur","relatedTarget","select","lastEditMode","handleClick","BuilderEditMode","CONTENT","stopPropagation","handleChange"],"mappings":"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"}
+{"version":3,"file":"EditableText.es.js","sources":["../src/components/builtin/Text/components/RichTextEditor/plugins/DeviceOverridesMarks.tsx","../src/components/builtin/Text/components/RichTextEditor/plugins/DeviceOverridesBlocks.tsx","../src/components/builtin/Text/components/RichTextEditor/plugins/Link.tsx","../src/components/builtin/Text/components/RichTextEditor/plugins/Inlines.tsx","../src/components/builtin/Text/components/RichTextEditor/index.tsx","../src/components/builtin/Text/EditableText.tsx"],"sourcesContent":["import type { Plugin } from 'slate-react'\n\nimport Mark from '../components/Mark'\n\nconst TYPOGRAPHY_TYPE = 'typography'\n\nexport default function DeviceOverridesMarksPlugin(): Plugin {\n  return {\n    renderMark({ mark, children }, _editor, next) {\n      if (mark.type === TYPOGRAPHY_TYPE) {\n        return <Mark value={mark.data.get('value')}>{children}</Mark>\n      }\n\n      return next()\n    },\n  }\n}\n","import { Plugin } from 'slate-react'\n\nimport Block from '../components/Block'\n\nexport default function DeviceOverridesBlockPlugin(): Plugin {\n  return {\n    renderBlock(props, _editor, next): JSX.Element {\n      const { node, attributes, children } = props\n      const blockProps = { textAlign: node.data.get('textAlign') }\n\n      switch (node.type) {\n        case 'paragraph':\n          return (\n            <Block {...attributes} {...blockProps} as=\"p\">\n              {children}\n            </Block>\n          )\n\n        case 'heading-one':\n          return (\n            <Block {...attributes} {...blockProps} as=\"h1\">\n              {children}\n            </Block>\n          )\n\n        case 'heading-two':\n          return (\n            <Block {...attributes} {...blockProps} as=\"h2\">\n              {children}\n            </Block>\n          )\n\n        case 'heading-three':\n          return (\n            <Block {...attributes} {...blockProps} as=\"h3\">\n              {children}\n            </Block>\n          )\n\n        case 'heading-four':\n          return (\n            <Block {...attributes} {...blockProps} as=\"h4\">\n              {children}\n            </Block>\n          )\n\n        case 'heading-five':\n          return (\n            <Block {...attributes} {...blockProps} as=\"h5\">\n              {children}\n            </Block>\n          )\n\n        case 'heading-six':\n          return (\n            <Block {...attributes} {...blockProps} as=\"h6\">\n              {children}\n            </Block>\n          )\n\n        case 'blockquote':\n          return (\n            <Block {...attributes} {...blockProps} as=\"blockquote\">\n              {children}\n            </Block>\n          )\n\n        default:\n          return next()\n      }\n    },\n  }\n}\n","import { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef } from 'react'\nimport { Plugin } from 'slate-react'\nimport { useStyle } from '../../../../../../runtimes/react/use-style'\n\nimport { Link } from '../../../../../shared/Link'\n\nfunction StyledLink({ className, ...restOfProps }: ComponentPropsWithoutRef<typeof Link>) {\n  return <Link {...restOfProps} className={cx(useStyle({ textDecoration: 'none' }), className)} />\n}\n\nexport default function LinkPlugin(): Plugin {\n  return {\n    renderInline(props, _editor, next) {\n      const { attributes, children, node } = props\n\n      switch (node.type) {\n        case 'link': {\n          const { data } = node\n\n          return (\n            <StyledLink {...attributes} link={data.toJS()}>\n              {children}\n            </StyledLink>\n          )\n        }\n\n        default: {\n          return next()\n        }\n      }\n    },\n  }\n}\n","import { Plugin } from 'slate-react'\n\nexport default function Inlines(): Plugin {\n  return {\n    renderInline(props, _editor, next) {\n      const { attributes, children, node } = props\n\n      switch (node.type) {\n        case 'code': {\n          return <code {...attributes}>{children}</code>\n        }\n\n        case 'superscript': {\n          return <sup {...attributes}>{children}</sup>\n        }\n\n        case 'subscript': {\n          return <sub {...attributes}>{children}</sub>\n        }\n\n        default: {\n          return next()\n        }\n      }\n    },\n  }\n}\n","import { ComponentPropsWithoutRef, forwardRef, useMemo } from 'react'\n\nimport { Editor as SlateEditor } from 'slate-react'\n\n// @ts-expect-error: no types for '@convertkit/slate-lists'\nimport Lists from '@convertkit/slate-lists'\n\nimport DeviceOverridesMarks from './plugins/DeviceOverridesMarks'\nimport DeviceOverridesBlocks from './plugins/DeviceOverridesBlocks'\nimport Link from './plugins/Link'\nimport Inlines from './plugins/Inlines'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\n\nexport { overrideTypographyStyle } from './components/Mark'\n\ntype Props = ComponentPropsWithoutRef<typeof SlateEditor>\n\nexport const RichTextEditor = forwardRef<SlateEditor, Props>(function RichTextEditor(\n  { placeholder = 'Write some text...', className, ...restOfProps }: Props,\n  ref,\n) {\n  const plugins = useMemo(\n    () => [Lists(), Link(), Inlines(), DeviceOverridesBlocks(), DeviceOverridesMarks()],\n    [],\n  )\n\n  return (\n    <SlateEditor\n      {...restOfProps}\n      // Workaround because our Slate editor is broken on Chrome 105\n      // Problem: https://linear.app/makeswift/issue/PRD-434/our-rich-text-component-breaks-in-the-latest-version-of-chrome\n      // Workaround: https://github.com/ianstormtaylor/slate/issues/5110#issuecomment-1234951122\n      style={{ WebkitUserModify: undefined }}\n      className={cx(useStyle({ 'ul, ol': { margin: 0 } }), className)}\n      ref={ref}\n      autoFocus={false}\n      plugins={plugins}\n      placeholder={placeholder}\n    />\n  )\n})\n","import {\n  useState,\n  Ref,\n  useImperativeHandle,\n  forwardRef,\n  useEffect,\n  useCallback,\n  useRef,\n  KeyboardEvent as ReactKeyboardEvent,\n  FocusEvent as ReactFocusEvent,\n  MouseEvent as ReactMouseEvent,\n} from 'react'\nimport { Editor, OnChangeParam } from 'slate-react'\nimport { Value, ValueJSON } from 'slate'\n// @ts-expect-error: no types for 'slate-hotkeys'\nimport Hotkeys from 'slate-hotkeys'\nimport { isHotkey } from 'is-hotkey'\n\nimport {\n  ElementIDValue,\n  RichTextDescriptor,\n  RichTextValue,\n} from '../../../prop-controllers/descriptors'\nimport { BoxModelHandle, getBox } from '../../../box-model'\nimport { PropControllersHandle } from '../../../state/modules/prop-controller-handles'\nimport { RichTextEditor } from './components/RichTextEditor'\nimport { DescriptorsPropControllers } from '../../../prop-controllers/instances'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { pollBoxModel } from '../../../runtimes/react/poll-box-model'\nimport { useBuilderEditMode } from '../../../runtimes/react'\nimport { BuilderEditMode } from '../../../state/modules/builder-edit-mode'\n\ntype Props = {\n  id?: ElementIDValue\n  text?: RichTextValue\n  width?: string\n  margin?: string\n}\n\nconst defaultText: ValueJSON = {\n  document: { nodes: [{ object: 'block' as const, type: 'paragraph' as const, nodes: [] }] },\n  data: {},\n}\n\nconst COMMIT_DEBOUNCE_DELAY = 500\n\ntype Descriptors = { text?: RichTextDescriptor }\n\nconst EditableText = forwardRef(function EditableText(\n  { id, text, width, margin }: Props,\n  ref: Ref<BoxModelHandle & PropControllersHandle<Descriptors>>,\n) {\n  const [editor, setEditor] = useState<Editor | null>(null)\n  const [propControllers, setPropControllers] =\n    useState<DescriptorsPropControllers<Descriptors> | null>(null)\n  const controller = propControllers?.text\n  const editMode = useBuilderEditMode()\n\n  useEffect(() => {\n    const element = editor?.findDOMNode([])\n    if (element == null || !(element instanceof HTMLElement) || controller == null) return\n    return pollBoxModel({\n      element: element,\n      onBoxModelChange: boxModel => controller.changeBoxModel(boxModel),\n    })\n  }, [editor, controller])\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getDomNode() {\n        const el = editor?.findDOMNode([])\n\n        return el instanceof Element ? el : null\n      },\n      getBoxModel() {\n        const el = editor?.findDOMNode([])\n\n        return el instanceof Element ? getBox(el) : null\n      },\n      setPropControllers,\n    }),\n    [editor, setPropControllers],\n  )\n\n  useEffect(() => {\n    if (editor) controller?.setSlateEditor(editor)\n  }, [controller, editor])\n\n  /**\n   * We must keep local state so that we can reflect the user's typed changes immediately. At the\n   * same time, though, the source of truth for the data is the prop data. This presents a\n   * challenge: how do we keep local state in sync with the prop data without mangling user input as\n   * data comes in?\n   *\n   * Consider, for example, that the user types \"Hello\". If at a later time, when the user is trying\n   * to type \", world\" the component re-renders with prop data \"H\", \"He\", \"Hel\", \"Hell\", \"Hello\", it\n   * will disrupt the user's typing. This could also happen as a result of the prop data changing\n   * for other reasons, like collaborators changing the prop data concurrently. We want to avoid to\n   * disrupt the user's typing, while at the same time display the \"true\" value as quickly as\n   * possible.\n   *\n   * The approach we take here is to commit the prop data at an opportune time: as the user is\n   * typing we avoid to commit prop data. But once they've stopped typing, we commit it as soon as\n   * possible. This is known as a debounce.\n   */\n  const [value, setValue] = useState(() => {\n    const { selection, ...textWithoutSelection } = text ?? defaultText\n\n    return Value.fromJSON(textWithoutSelection)\n  })\n  const [shouldCommit, setShouldCommit] = useState(true)\n\n  useEffect(() => {\n    if (shouldCommit) {\n      const nextValue = Value.fromJSON(text ?? defaultText)\n\n      setValue(currentValue =>\n        currentValue.selection.isBlurred\n          ? Value.fromJSON(nextValue.toJSON({ preserveSelection: false }))\n          : nextValue,\n      )\n    }\n  }, [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  function handleChange(change: OnChangeParam) {\n    setValue(change.value as Value)\n\n    if (change.value !== value) {\n      setShouldCommit(false)\n\n      controller?.onChange(change)\n    }\n  }\n\n  // HACK: Slate holds on to the very first DOM event handlers passed in and doesn't update them\n  // even if they change. Since `controller` is first `undefined` then we must use a ref.\n  const lastController = useRef(controller)\n  if (lastController.current !== controller) lastController.current = controller\n  const handleFocus = useCallback(() => {\n    lastController.current?.focus()\n  }, [])\n  const handleKeyDown = useCallback(\n    (event: ReactKeyboardEvent, _editor: Editor, next: () => any) => {\n      if (Hotkeys.isUndo(event)) {\n        lastController.current?.undo()\n\n        return true\n      }\n\n      if (Hotkeys.isRedo(event)) {\n        lastController.current?.redo()\n\n        return true\n      }\n\n      if (isHotkey('escape')(event)) {\n        lastController.current?.blur()\n\n        return true\n      }\n\n      return next()\n    },\n    [],\n  )\n  const handleBlur = useCallback((event: ReactFocusEvent, editor: Editor, next: () => any) => {\n    const selection = editor.value.selection\n\n    next()\n\n    // Normally, after a user highlight a text, clicking on the panel will remove the text selection.\n    // This line is a workaround for that. Because the panel is not in the iframe, relatedTarget\n    // would be null, and we select the previous text selection to maintain the text highlight.\n    // Inspiration: https://github.com/ianstormtaylor/slate/issues/3412#issuecomment-663906003\n    if (event.relatedTarget == null) editor.select(selection)\n  }, [])\n\n  // HACK: Slate holds on to the very first DOM event handlers passed in and doesn't update them\n  // even if they change.\n  const lastEditMode = useRef(editMode)\n  if (lastEditMode.current !== editMode) lastEditMode.current = editMode\n\n  const handleClick = (event: ReactMouseEvent, _editor: Editor, next: () => any) => {\n    next()\n\n    // This is needed to prevent clicks from propagating in content mode.\n    // This is not ideal because it might break if we implement a plugin in the future that depends on click.\n    // Also, we might also want to stop hover/mousedown event\n    if (lastEditMode.current === BuilderEditMode.CONTENT) event.stopPropagation()\n  }\n\n  return (\n    <RichTextEditor\n      // @ts-expect-error: types don't allow for 'id' prop even though it's used.\n      id={id}\n      ref={setEditor}\n      className={cx(useStyle({ 'ul, ol': { margin: 0 } }), width, margin)}\n      value={value}\n      onChange={handleChange}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      onBlur={handleBlur}\n      onClick={handleClick}\n      readOnly={editMode !== BuilderEditMode.CONTENT}\n    />\n  )\n})\n\nexport default EditableText\n"],"names":["TYPOGRAPHY_TYPE","renderMark","mark","children","_editor","next","type","data","get","renderBlock","props","node","attributes","blockProps","textAlign","Block","className","restOfProps","cx","useStyle","textDecoration","renderInline","toJS","RichTextEditor","forwardRef","ref","placeholder","plugins","useMemo","Lists","Link","Inlines","DeviceOverridesBlocks","DeviceOverridesMarks","SlateEditor","WebkitUserModify","undefined","margin","defaultText","document","nodes","object","COMMIT_DEBOUNCE_DELAY","EditableText","id","text","width","editor","setEditor","useState","propControllers","setPropControllers","controller","editMode","useBuilderEditMode","useEffect","element","findDOMNode","HTMLElement","pollBoxModel","onBoxModelChange","boxModel","changeBoxModel","useImperativeHandle","getDomNode","el","Element","getBoxModel","getBox","setSlateEditor","value","setValue","selection","textWithoutSelection","Value","fromJSON","shouldCommit","setShouldCommit","nextValue","currentValue","isBlurred","toJSON","preserveSelection","timeoutId","window","setTimeout","clearTimeout","change","onChange","lastController","useRef","current","handleFocus","useCallback","focus","handleKeyDown","event","Hotkeys","isUndo","undo","isRedo","redo","isHotkey","blur","handleBlur","relatedTarget","select","lastEditMode","handleClick","BuilderEditMode","CONTENT","stopPropagation","handleChange"],"mappings":"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"}

package/dist/Form.cjs.js

@@ -1708,6 +1708,9 @@ const Form = React.forwardRef(function Form2({
   const [isDone, setIsDone] = React.useState(false);
   const linkRef = React.useRef(null);
   React.useImperativeHandle(ref, () => ({
+    getDomNode() {
+      return refEl instanceof Element ? refEl : null;
+    },
     getBoxModel() {
       return refEl instanceof Element ? boxModels.getBox(refEl) : null;
     },