@makeswift/runtime 0.0.0-20230206202113 → 0.0.0-20230224184430

package/dist/EditableText.cjs.js

@@ -44,7 +44,7 @@ var css = require("@emotion/css");
 var next = require("./index.cjs.js");
 var index$1 = require("./index.cjs3.js");
 require("use-sync-external-store/shim");
-require("./rich-text.cjs.js");
+var richText = require("./rich-text.cjs.js");
 require("css-box-model");
 require("./actions.cjs.js");
 require("./constants.cjs.js");
@@ -264,6 +264,7 @@ const EditableText = React.forwardRef(function EditableText2({
   const [editor, setEditor] = React.useState(null);
   const [propControllers, setPropControllers] = React.useState(null);
   const controller = propControllers == null ? void 0 : propControllers.text;
+  const editMode = next.useBuilderEditMode();
   React.useEffect(() => {
     const element = editor == null ? void 0 : editor.findDOMNode([]);
     if (element == null || !(element instanceof HTMLElement) || controller == null)
@@ -347,7 +348,14 @@ const EditableText = React.forwardRef(function EditableText2({
     if (event.relatedTarget == null)
       editor2.select(selection);
   }, []);
-  const isInBuilder = next.useIsInBuilder();
+  const lastEditMode = React.useRef(editMode);
+  if (lastEditMode.current !== editMode)
+    lastEditMode.current = editMode;
+  const handleClick = (event, _editor, next2) => {
+    next2();
+    if (lastEditMode.current === richText.BuilderEditMode.CONTENT)
+      event.stopPropagation();
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(RichTextEditor, {
     id,
     ref: setEditor,
@@ -361,7 +369,8 @@ const EditableText = React.forwardRef(function EditableText2({
     onFocus: handleFocus,
     onKeyDown: handleKeyDown,
     onBlur: handleBlur,
-    readOnly: !isInBuilder || controller == null
+    onClick: handleClick,
+    readOnly: editMode !== richText.BuilderEditMode.CONTENT
   });
 });
 exports["default"] = EditableText;

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} 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 { useIsInBuilder } from '../../../runtimes/react'\nimport { pollBoxModel } from '../../../runtimes/react/poll-box-model'\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\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  const isInBuilder = useIsInBuilder()\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      readOnly={!isInBuilder || controller == null}\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","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","isInBuilder","useIsInBuilder","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      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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"}

package/dist/EditableText.es.js

@@ -39,10 +39,10 @@ import Lists from "@convertkit/slate-lists";
 import { M as Mark, D as DeviceOverrideBlock } from "./index.es6.js";
 import { jsx } from "react/jsx-runtime";
 import { cx } from "@emotion/css";
-import { o as useStyle, U as pollBoxModel, u as useIsInBuilder } from "./index.es.js";
+import { o as useStyle, U as useBuilderEditMode, V as pollBoxModel } from "./index.es.js";
 import { L as Link } from "./index.es3.js";
 import "use-sync-external-store/shim";
-import "./rich-text.es.js";
+import { aa as BuilderEditMode } from "./rich-text.es.js";
 import "css-box-model";
 import "./actions.es.js";
 import "./constants.es.js";
@@ -257,6 +257,7 @@ const EditableText = forwardRef(function EditableText2({
   const [editor, setEditor] = useState(null);
   const [propControllers, setPropControllers] = useState(null);
   const controller = propControllers == null ? void 0 : propControllers.text;
+  const editMode = useBuilderEditMode();
   useEffect(() => {
     const element = editor == null ? void 0 : editor.findDOMNode([]);
     if (element == null || !(element instanceof HTMLElement) || controller == null)
@@ -340,7 +341,14 @@ const EditableText = forwardRef(function EditableText2({
     if (event.relatedTarget == null)
       editor2.select(selection);
   }, []);
-  const isInBuilder = useIsInBuilder();
+  const lastEditMode = useRef(editMode);
+  if (lastEditMode.current !== editMode)
+    lastEditMode.current = editMode;
+  const handleClick = (event, _editor, next) => {
+    next();
+    if (lastEditMode.current === BuilderEditMode.CONTENT)
+      event.stopPropagation();
+  };
   return /* @__PURE__ */ jsx(RichTextEditor, {
     id,
     ref: setEditor,
@@ -354,7 +362,8 @@ const EditableText = forwardRef(function EditableText2({
     onFocus: handleFocus,
     onKeyDown: handleKeyDown,
     onBlur: handleBlur,
-    readOnly: !isInBuilder || controller == null
+    onClick: handleClick,
+    readOnly: editMode !== BuilderEditMode.CONTENT
   });
 });
 export { EditableText as default };

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} 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 { useIsInBuilder } from '../../../runtimes/react'\nimport { pollBoxModel } from '../../../runtimes/react/poll-box-model'\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\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  const isInBuilder = useIsInBuilder()\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      readOnly={!isInBuilder || controller == null}\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","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","isInBuilder","useIsInBuilder","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      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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"}

package/dist/Image.cjs.js

@@ -79,8 +79,8 @@ const ImageComponent = React.forwardRef(function Image2({
   className
 }, ref) {
   const fileData = next.useFile(file != null ? file : null);
-  const imageSrc = (fileData == null ? void 0 : fileData.publicUrl) ? fileData.publicUrl : placeholder.src;
-  const dataDimensions = (fileData == null ? void 0 : fileData.publicUrl) ? fileData == null ? void 0 : fileData.dimensions : placeholder.dimensions;
+  const imageSrc = (fileData == null ? void 0 : fileData.publicUrlV2) ? fileData.publicUrlV2 : placeholder.src;
+  const dataDimensions = (fileData == null ? void 0 : fileData.publicUrlV2) ? fileData == null ? void 0 : fileData.dimensions : placeholder.dimensions;
   const [measuredDimensions, setMeasuredDimensions] = React.useState(null);
   React.useEffect(() => {
     if (dataDimensions)

package/dist/Image.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.cjs.js","sources":["../src/components/builtin/Image/Image.tsx"],"sourcesContent":["import { useState, useEffect, Ref, forwardRef } from 'react'\nimport NextImage from 'next/image'\nimport type NextLegacyImageType from 'next/legacy/image'\n\nimport {\n  ElementIDValue,\n  ImageValue,\n  LinkValue,\n  ResponsiveOpacityValue,\n  TextInputValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { DEVICES, findDeviceOverride } from '../../utils/devices'\nimport { placeholders } from '../../utils/placeholders'\nimport { Link } from '../../shared/Link'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { responsiveStyle, responsiveWidth } from '../../utils/responsive-style'\nimport { useFile } from '../../../runtimes/react/hooks/makeswift-api'\nimport { major as nextMajorVersion } from '../../../next/next-version'\n\nconst NextLegacyImage = NextImage as typeof NextLegacyImageType\n\ntype Props = {\n  id?: ElementIDValue\n  file?: ImageValue\n  altText?: TextInputValue\n  link?: LinkValue\n  width?: WidthValue\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  opacity?: ResponsiveOpacityValue\n  placeholder?: { src: string; dimensions: { width: number; height: number } }\n  className?: string\n}\n\nfunction loadImage(src: string): Promise<HTMLImageElement> {\n  return new Promise<HTMLImageElement>((resolve, reject) => {\n    const image = new Image()\n\n    image.onload = () => resolve(image)\n    image.onerror = reject\n    image.src = src\n  })\n}\n\nfunction imageSizes(width?: Props['width']): string {\n  const baseDevice = DEVICES.find(device => device.maxWidth == null)\n  const baseWidth = baseDevice && width && findDeviceOverride(width, baseDevice.id)\n  const baseWidthSize =\n    baseWidth == null || baseWidth.value.unit !== 'px' ? '100vw' : `${baseWidth.value.value}px`\n\n  return DEVICES.map(device => {\n    const override = findDeviceOverride(width, device.id)\n\n    if (override == null || device.maxWidth == null || override.value.unit !== 'px') return null\n\n    return `(max-width: ${device.maxWidth}px) ${Math.min(device.maxWidth, override.value.value)}px`\n  })\n    .filter((size): size is NonNullable<typeof size> => size != null)\n    .reduce((sourceSizes, sourceSize) => `${sourceSize}, ${sourceSizes}`, baseWidthSize)\n}\n\ntype Dimensions = {\n  width: number\n  height: number\n}\n\nconst ImageComponent = forwardRef(function Image(\n  {\n    id,\n    width,\n    margin,\n    padding,\n    file,\n    border,\n    borderRadius,\n    altText,\n    link,\n    opacity,\n    boxShadow,\n    placeholder = placeholders.image,\n    className,\n  }: Props,\n  ref: Ref<HTMLAnchorElement & HTMLDivElement>,\n) {\n  const fileData = useFile(file ?? null)\n  const imageSrc = fileData?.publicUrl ? fileData.publicUrl : placeholder.src\n  const dataDimensions = fileData?.publicUrl ? fileData?.dimensions : placeholder.dimensions\n  const [measuredDimensions, setMeasuredDimensions] = useState<Dimensions | null>(null)\n\n  useEffect(() => {\n    if (dataDimensions) return\n\n    let cleanedUp = false\n\n    loadImage(imageSrc)\n      .then(image => {\n        if (!cleanedUp) {\n          setMeasuredDimensions({ width: image.naturalWidth, height: image.naturalHeight })\n        }\n      })\n      .catch(console.error)\n\n    return () => {\n      cleanedUp = true\n    }\n  }, [dataDimensions, imageSrc])\n\n  const dimensions = dataDimensions ?? measuredDimensions\n  const Container = link ? Link : 'div'\n  const containerClassName = cx(\n    useStyle({ lineHeight: 0, overflow: 'hidden' }),\n    useStyle(responsiveWidth(width, dimensions?.width)),\n    useStyle(responsiveStyle([opacity] as const, ([opacity = 1]) => ({ opacity }))),\n    margin,\n    padding,\n    border,\n    borderRadius,\n    boxShadow,\n    className,\n  )\n\n  if (!dimensions) return null\n\n  return (\n    <Container link={link} ref={ref} id={id} className={containerClassName}>\n      {nextMajorVersion < 13 ? (\n        <NextLegacyImage\n          layout=\"responsive\"\n          src={imageSrc}\n          sizes={imageSizes(width)}\n          alt={altText}\n          width={dimensions.width}\n          height={dimensions.height}\n        />\n      ) : (\n        <NextImage\n          src={imageSrc}\n          sizes={imageSizes(width)}\n          alt={altText ?? ''}\n          width={dimensions.width}\n          height={dimensions.height}\n          style={{\n            width: '100%',\n            height: 'auto',\n          }}\n        />\n      )}\n    </Container>\n  )\n})\n\nexport default ImageComponent\n"],"names":["NextLegacyImage","NextImage","src","Promise","resolve","reject","image","Image","onload","onerror","width","baseDevice","DEVICES","find","device","maxWidth","baseWidth","findDeviceOverride","id","baseWidthSize","value","unit","map","override","Math","min","filter","size","reduce","sourceSizes","sourceSize","ImageComponent","forwardRef","margin","padding","file","border","borderRadius","altText","link","opacity","boxShadow","placeholder","placeholders","className","ref","fileData","useFile","imageSrc","publicUrl","dataDimensions","dimensions","measuredDimensions","setMeasuredDimensions","useState","useEffect","cleanedUp","then","naturalWidth","height","naturalHeight","catch","console","error","Container","Link","containerClassName","cx","useStyle","lineHeight","overflow","responsiveWidth","responsiveStyle","nextMajorVersion","_jsx","imageSizes"],"mappings":"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"}
+{"version":3,"file":"Image.cjs.js","sources":["../src/components/builtin/Image/Image.tsx"],"sourcesContent":["import { useState, useEffect, Ref, forwardRef } from 'react'\nimport NextImage from 'next/image'\nimport type NextLegacyImageType from 'next/legacy/image'\n\nimport {\n  ElementIDValue,\n  ImageValue,\n  LinkValue,\n  ResponsiveOpacityValue,\n  TextInputValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { DEVICES, findDeviceOverride } from '../../utils/devices'\nimport { placeholders } from '../../utils/placeholders'\nimport { Link } from '../../shared/Link'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { responsiveStyle, responsiveWidth } from '../../utils/responsive-style'\nimport { useFile } from '../../../runtimes/react/hooks/makeswift-api'\nimport { major as nextMajorVersion } from '../../../next/next-version'\n\nconst NextLegacyImage = NextImage as typeof NextLegacyImageType\n\ntype Props = {\n  id?: ElementIDValue\n  file?: ImageValue\n  altText?: TextInputValue\n  link?: LinkValue\n  width?: WidthValue\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  opacity?: ResponsiveOpacityValue\n  placeholder?: { src: string; dimensions: { width: number; height: number } }\n  className?: string\n}\n\nfunction loadImage(src: string): Promise<HTMLImageElement> {\n  return new Promise<HTMLImageElement>((resolve, reject) => {\n    const image = new Image()\n\n    image.onload = () => resolve(image)\n    image.onerror = reject\n    image.src = src\n  })\n}\n\nfunction imageSizes(width?: Props['width']): string {\n  const baseDevice = DEVICES.find(device => device.maxWidth == null)\n  const baseWidth = baseDevice && width && findDeviceOverride(width, baseDevice.id)\n  const baseWidthSize =\n    baseWidth == null || baseWidth.value.unit !== 'px' ? '100vw' : `${baseWidth.value.value}px`\n\n  return DEVICES.map(device => {\n    const override = findDeviceOverride(width, device.id)\n\n    if (override == null || device.maxWidth == null || override.value.unit !== 'px') return null\n\n    return `(max-width: ${device.maxWidth}px) ${Math.min(device.maxWidth, override.value.value)}px`\n  })\n    .filter((size): size is NonNullable<typeof size> => size != null)\n    .reduce((sourceSizes, sourceSize) => `${sourceSize}, ${sourceSizes}`, baseWidthSize)\n}\n\ntype Dimensions = {\n  width: number\n  height: number\n}\n\nconst ImageComponent = forwardRef(function Image(\n  {\n    id,\n    width,\n    margin,\n    padding,\n    file,\n    border,\n    borderRadius,\n    altText,\n    link,\n    opacity,\n    boxShadow,\n    placeholder = placeholders.image,\n    className,\n  }: Props,\n  ref: Ref<HTMLAnchorElement & HTMLDivElement>,\n) {\n  const fileData = useFile(file ?? null)\n  const imageSrc = fileData?.publicUrlV2 ? fileData.publicUrlV2 : placeholder.src\n  const dataDimensions = fileData?.publicUrlV2 ? fileData?.dimensions : placeholder.dimensions\n  const [measuredDimensions, setMeasuredDimensions] = useState<Dimensions | null>(null)\n\n  useEffect(() => {\n    if (dataDimensions) return\n\n    let cleanedUp = false\n\n    loadImage(imageSrc)\n      .then(image => {\n        if (!cleanedUp) {\n          setMeasuredDimensions({ width: image.naturalWidth, height: image.naturalHeight })\n        }\n      })\n      .catch(console.error)\n\n    return () => {\n      cleanedUp = true\n    }\n  }, [dataDimensions, imageSrc])\n\n  const dimensions = dataDimensions ?? measuredDimensions\n  const Container = link ? Link : 'div'\n  const containerClassName = cx(\n    useStyle({ lineHeight: 0, overflow: 'hidden' }),\n    useStyle(responsiveWidth(width, dimensions?.width)),\n    useStyle(responsiveStyle([opacity] as const, ([opacity = 1]) => ({ opacity }))),\n    margin,\n    padding,\n    border,\n    borderRadius,\n    boxShadow,\n    className,\n  )\n\n  if (!dimensions) return null\n\n  return (\n    <Container link={link} ref={ref} id={id} className={containerClassName}>\n      {nextMajorVersion < 13 ? (\n        <NextLegacyImage\n          layout=\"responsive\"\n          src={imageSrc}\n          sizes={imageSizes(width)}\n          alt={altText}\n          width={dimensions.width}\n          height={dimensions.height}\n        />\n      ) : (\n        <NextImage\n          src={imageSrc}\n          sizes={imageSizes(width)}\n          alt={altText ?? ''}\n          width={dimensions.width}\n          height={dimensions.height}\n          style={{\n            width: '100%',\n            height: 'auto',\n          }}\n        />\n      )}\n    </Container>\n  )\n})\n\nexport default ImageComponent\n"],"names":["NextLegacyImage","NextImage","src","Promise","resolve","reject","image","Image","onload","onerror","width","baseDevice","DEVICES","find","device","maxWidth","baseWidth","findDeviceOverride","id","baseWidthSize","value","unit","map","override","Math","min","filter","size","reduce","sourceSizes","sourceSize","ImageComponent","forwardRef","margin","padding","file","border","borderRadius","altText","link","opacity","boxShadow","placeholder","placeholders","className","ref","fileData","useFile","imageSrc","publicUrlV2","dataDimensions","dimensions","measuredDimensions","setMeasuredDimensions","useState","useEffect","cleanedUp","then","naturalWidth","height","naturalHeight","catch","console","error","Container","Link","containerClassName","cx","useStyle","lineHeight","overflow","responsiveWidth","responsiveStyle","nextMajorVersion","_jsx","imageSizes"],"mappings":"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"}

package/dist/Image.es.js

@@ -73,8 +73,8 @@ const ImageComponent = forwardRef(function Image2({
   className
 }, ref) {
   const fileData = useFile(file != null ? file : null);
-  const imageSrc = (fileData == null ? void 0 : fileData.publicUrl) ? fileData.publicUrl : placeholder.src;
-  const dataDimensions = (fileData == null ? void 0 : fileData.publicUrl) ? fileData == null ? void 0 : fileData.dimensions : placeholder.dimensions;
+  const imageSrc = (fileData == null ? void 0 : fileData.publicUrlV2) ? fileData.publicUrlV2 : placeholder.src;
+  const dataDimensions = (fileData == null ? void 0 : fileData.publicUrlV2) ? fileData == null ? void 0 : fileData.dimensions : placeholder.dimensions;
   const [measuredDimensions, setMeasuredDimensions] = useState(null);
   useEffect(() => {
     if (dataDimensions)

package/dist/Image.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.es.js","sources":["../src/components/builtin/Image/Image.tsx"],"sourcesContent":["import { useState, useEffect, Ref, forwardRef } from 'react'\nimport NextImage from 'next/image'\nimport type NextLegacyImageType from 'next/legacy/image'\n\nimport {\n  ElementIDValue,\n  ImageValue,\n  LinkValue,\n  ResponsiveOpacityValue,\n  TextInputValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { DEVICES, findDeviceOverride } from '../../utils/devices'\nimport { placeholders } from '../../utils/placeholders'\nimport { Link } from '../../shared/Link'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { responsiveStyle, responsiveWidth } from '../../utils/responsive-style'\nimport { useFile } from '../../../runtimes/react/hooks/makeswift-api'\nimport { major as nextMajorVersion } from '../../../next/next-version'\n\nconst NextLegacyImage = NextImage as typeof NextLegacyImageType\n\ntype Props = {\n  id?: ElementIDValue\n  file?: ImageValue\n  altText?: TextInputValue\n  link?: LinkValue\n  width?: WidthValue\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  opacity?: ResponsiveOpacityValue\n  placeholder?: { src: string; dimensions: { width: number; height: number } }\n  className?: string\n}\n\nfunction loadImage(src: string): Promise<HTMLImageElement> {\n  return new Promise<HTMLImageElement>((resolve, reject) => {\n    const image = new Image()\n\n    image.onload = () => resolve(image)\n    image.onerror = reject\n    image.src = src\n  })\n}\n\nfunction imageSizes(width?: Props['width']): string {\n  const baseDevice = DEVICES.find(device => device.maxWidth == null)\n  const baseWidth = baseDevice && width && findDeviceOverride(width, baseDevice.id)\n  const baseWidthSize =\n    baseWidth == null || baseWidth.value.unit !== 'px' ? '100vw' : `${baseWidth.value.value}px`\n\n  return DEVICES.map(device => {\n    const override = findDeviceOverride(width, device.id)\n\n    if (override == null || device.maxWidth == null || override.value.unit !== 'px') return null\n\n    return `(max-width: ${device.maxWidth}px) ${Math.min(device.maxWidth, override.value.value)}px`\n  })\n    .filter((size): size is NonNullable<typeof size> => size != null)\n    .reduce((sourceSizes, sourceSize) => `${sourceSize}, ${sourceSizes}`, baseWidthSize)\n}\n\ntype Dimensions = {\n  width: number\n  height: number\n}\n\nconst ImageComponent = forwardRef(function Image(\n  {\n    id,\n    width,\n    margin,\n    padding,\n    file,\n    border,\n    borderRadius,\n    altText,\n    link,\n    opacity,\n    boxShadow,\n    placeholder = placeholders.image,\n    className,\n  }: Props,\n  ref: Ref<HTMLAnchorElement & HTMLDivElement>,\n) {\n  const fileData = useFile(file ?? null)\n  const imageSrc = fileData?.publicUrl ? fileData.publicUrl : placeholder.src\n  const dataDimensions = fileData?.publicUrl ? fileData?.dimensions : placeholder.dimensions\n  const [measuredDimensions, setMeasuredDimensions] = useState<Dimensions | null>(null)\n\n  useEffect(() => {\n    if (dataDimensions) return\n\n    let cleanedUp = false\n\n    loadImage(imageSrc)\n      .then(image => {\n        if (!cleanedUp) {\n          setMeasuredDimensions({ width: image.naturalWidth, height: image.naturalHeight })\n        }\n      })\n      .catch(console.error)\n\n    return () => {\n      cleanedUp = true\n    }\n  }, [dataDimensions, imageSrc])\n\n  const dimensions = dataDimensions ?? measuredDimensions\n  const Container = link ? Link : 'div'\n  const containerClassName = cx(\n    useStyle({ lineHeight: 0, overflow: 'hidden' }),\n    useStyle(responsiveWidth(width, dimensions?.width)),\n    useStyle(responsiveStyle([opacity] as const, ([opacity = 1]) => ({ opacity }))),\n    margin,\n    padding,\n    border,\n    borderRadius,\n    boxShadow,\n    className,\n  )\n\n  if (!dimensions) return null\n\n  return (\n    <Container link={link} ref={ref} id={id} className={containerClassName}>\n      {nextMajorVersion < 13 ? (\n        <NextLegacyImage\n          layout=\"responsive\"\n          src={imageSrc}\n          sizes={imageSizes(width)}\n          alt={altText}\n          width={dimensions.width}\n          height={dimensions.height}\n        />\n      ) : (\n        <NextImage\n          src={imageSrc}\n          sizes={imageSizes(width)}\n          alt={altText ?? ''}\n          width={dimensions.width}\n          height={dimensions.height}\n          style={{\n            width: '100%',\n            height: 'auto',\n          }}\n        />\n      )}\n    </Container>\n  )\n})\n\nexport default ImageComponent\n"],"names":["NextLegacyImage","NextImage","src","Promise","resolve","reject","image","Image","onload","onerror","width","baseDevice","DEVICES","find","device","maxWidth","baseWidth","findDeviceOverride","id","baseWidthSize","value","unit","map","override","Math","min","filter","size","reduce","sourceSizes","sourceSize","ImageComponent","forwardRef","margin","padding","file","border","borderRadius","altText","link","opacity","boxShadow","placeholder","placeholders","className","ref","fileData","useFile","imageSrc","publicUrl","dataDimensions","dimensions","measuredDimensions","setMeasuredDimensions","useState","useEffect","cleanedUp","then","naturalWidth","height","naturalHeight","catch","console","error","Container","Link","containerClassName","cx","useStyle","lineHeight","overflow","responsiveWidth","responsiveStyle","nextMajorVersion","_jsx","imageSizes"],"mappings":"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"}
+{"version":3,"file":"Image.es.js","sources":["../src/components/builtin/Image/Image.tsx"],"sourcesContent":["import { useState, useEffect, Ref, forwardRef } from 'react'\nimport NextImage from 'next/image'\nimport type NextLegacyImageType from 'next/legacy/image'\n\nimport {\n  ElementIDValue,\n  ImageValue,\n  LinkValue,\n  ResponsiveOpacityValue,\n  TextInputValue,\n  WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { DEVICES, findDeviceOverride } from '../../utils/devices'\nimport { placeholders } from '../../utils/placeholders'\nimport { Link } from '../../shared/Link'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { responsiveStyle, responsiveWidth } from '../../utils/responsive-style'\nimport { useFile } from '../../../runtimes/react/hooks/makeswift-api'\nimport { major as nextMajorVersion } from '../../../next/next-version'\n\nconst NextLegacyImage = NextImage as typeof NextLegacyImageType\n\ntype Props = {\n  id?: ElementIDValue\n  file?: ImageValue\n  altText?: TextInputValue\n  link?: LinkValue\n  width?: WidthValue\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  opacity?: ResponsiveOpacityValue\n  placeholder?: { src: string; dimensions: { width: number; height: number } }\n  className?: string\n}\n\nfunction loadImage(src: string): Promise<HTMLImageElement> {\n  return new Promise<HTMLImageElement>((resolve, reject) => {\n    const image = new Image()\n\n    image.onload = () => resolve(image)\n    image.onerror = reject\n    image.src = src\n  })\n}\n\nfunction imageSizes(width?: Props['width']): string {\n  const baseDevice = DEVICES.find(device => device.maxWidth == null)\n  const baseWidth = baseDevice && width && findDeviceOverride(width, baseDevice.id)\n  const baseWidthSize =\n    baseWidth == null || baseWidth.value.unit !== 'px' ? '100vw' : `${baseWidth.value.value}px`\n\n  return DEVICES.map(device => {\n    const override = findDeviceOverride(width, device.id)\n\n    if (override == null || device.maxWidth == null || override.value.unit !== 'px') return null\n\n    return `(max-width: ${device.maxWidth}px) ${Math.min(device.maxWidth, override.value.value)}px`\n  })\n    .filter((size): size is NonNullable<typeof size> => size != null)\n    .reduce((sourceSizes, sourceSize) => `${sourceSize}, ${sourceSizes}`, baseWidthSize)\n}\n\ntype Dimensions = {\n  width: number\n  height: number\n}\n\nconst ImageComponent = forwardRef(function Image(\n  {\n    id,\n    width,\n    margin,\n    padding,\n    file,\n    border,\n    borderRadius,\n    altText,\n    link,\n    opacity,\n    boxShadow,\n    placeholder = placeholders.image,\n    className,\n  }: Props,\n  ref: Ref<HTMLAnchorElement & HTMLDivElement>,\n) {\n  const fileData = useFile(file ?? null)\n  const imageSrc = fileData?.publicUrlV2 ? fileData.publicUrlV2 : placeholder.src\n  const dataDimensions = fileData?.publicUrlV2 ? fileData?.dimensions : placeholder.dimensions\n  const [measuredDimensions, setMeasuredDimensions] = useState<Dimensions | null>(null)\n\n  useEffect(() => {\n    if (dataDimensions) return\n\n    let cleanedUp = false\n\n    loadImage(imageSrc)\n      .then(image => {\n        if (!cleanedUp) {\n          setMeasuredDimensions({ width: image.naturalWidth, height: image.naturalHeight })\n        }\n      })\n      .catch(console.error)\n\n    return () => {\n      cleanedUp = true\n    }\n  }, [dataDimensions, imageSrc])\n\n  const dimensions = dataDimensions ?? measuredDimensions\n  const Container = link ? Link : 'div'\n  const containerClassName = cx(\n    useStyle({ lineHeight: 0, overflow: 'hidden' }),\n    useStyle(responsiveWidth(width, dimensions?.width)),\n    useStyle(responsiveStyle([opacity] as const, ([opacity = 1]) => ({ opacity }))),\n    margin,\n    padding,\n    border,\n    borderRadius,\n    boxShadow,\n    className,\n  )\n\n  if (!dimensions) return null\n\n  return (\n    <Container link={link} ref={ref} id={id} className={containerClassName}>\n      {nextMajorVersion < 13 ? (\n        <NextLegacyImage\n          layout=\"responsive\"\n          src={imageSrc}\n          sizes={imageSizes(width)}\n          alt={altText}\n          width={dimensions.width}\n          height={dimensions.height}\n        />\n      ) : (\n        <NextImage\n          src={imageSrc}\n          sizes={imageSizes(width)}\n          alt={altText ?? ''}\n          width={dimensions.width}\n          height={dimensions.height}\n          style={{\n            width: '100%',\n            height: 'auto',\n          }}\n        />\n      )}\n    </Container>\n  )\n})\n\nexport default ImageComponent\n"],"names":["NextLegacyImage","NextImage","src","Promise","resolve","reject","image","Image","onload","onerror","width","baseDevice","DEVICES","find","device","maxWidth","baseWidth","findDeviceOverride","id","baseWidthSize","value","unit","map","override","Math","min","filter","size","reduce","sourceSizes","sourceSize","ImageComponent","forwardRef","margin","padding","file","border","borderRadius","altText","link","opacity","boxShadow","placeholder","placeholders","className","ref","fileData","useFile","imageSrc","publicUrlV2","dataDimensions","dimensions","measuredDimensions","setMeasuredDimensions","useState","useEffect","cleanedUp","then","naturalWidth","height","naturalHeight","catch","console","error","Container","Link","containerClassName","cx","useStyle","lineHeight","overflow","responsiveWidth","responsiveStyle","nextMajorVersion","_jsx","imageSizes"],"mappings":"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"}

package/dist/PreviewProvider.cjs.js

@@ -23,6 +23,8 @@ var React = require("react");
 var next = require("./index.cjs.js");
 var redux = require("redux");
 var thunk = require("redux-thunk");
+var isHotkey = require("is-hotkey");
+var Router = require("next/router");
 var immutable = require("immutable");
 var constants = require("./constants.cjs.js");
 var actions = require("./actions.cjs.js");
@@ -58,6 +60,8 @@ function _interopDefaultLegacy(e) {
   return e && typeof e === "object" && "default" in e ? e : { "default": e };
 }
 var thunk__default = /* @__PURE__ */ _interopDefaultLegacy(thunk);
+var isHotkey__default = /* @__PURE__ */ _interopDefaultLegacy(isHotkey);
+var Router__default = /* @__PURE__ */ _interopDefaultLegacy(Router);
 function apply(data, operation) {
   let applied = data;
   operation.forEach((component) => {
@@ -106,7 +110,8 @@ const reducer = redux.combineReducers({
   propControllers: constants.reducer$3,
   propControllerHandles: constants.reducer$4,
   isInBuilder: constants.reducer$5,
-  isPreview: constants.reducer$6
+  isPreview: constants.reducer$6,
+  builderEditMode: richText.reducer
 });
 function getBoxModelsStateSlice(state) {
   return state.boxModels;
@@ -230,22 +235,30 @@ function startHandlingPointerMoveEvent() {
   };
 }
 function startHandlingFocusEvents() {
-  window.addEventListener("focusin", handleFocusIn);
-  window.addEventListener("focusout", handleFocusOut);
-  return () => {
-    window.removeEventListener("focusin", handleFocusIn);
-    window.removeEventListener("focusout", handleFocusOut);
-  };
-  function handleFocusIn(event) {
-    if (!(event.target instanceof window.HTMLElement) || !event.target.isContentEditable) {
-      window.parent.focus();
+  return (_dispatch, getState) => {
+    window.addEventListener("focusin", handleFocusIn);
+    window.addEventListener("focusout", handleFocusOut);
+    return () => {
+      window.removeEventListener("focusin", handleFocusIn);
+      window.removeEventListener("focusout", handleFocusOut);
+    };
+    function handleFocusIn(event) {
+      if (constants.getBuilderEditMode(getState()) === richText.BuilderEditMode.INTERACT) {
+        return;
+      }
+      if (!(event.target instanceof window.HTMLElement) || !event.target.isContentEditable) {
+        window.parent.focus();
+      }
     }
-  }
-  function handleFocusOut(event) {
-    if (!(event.relatedTarget instanceof window.HTMLElement) || !event.relatedTarget.isContentEditable) {
-      window.parent.focus();
+    function handleFocusOut(event) {
+      if (constants.getBuilderEditMode(getState()) === richText.BuilderEditMode.INTERACT) {
+        return;
+      }
+      if (!(event.relatedTarget instanceof window.HTMLElement) || !event.relatedTarget.isContentEditable) {
+        window.parent.focus();
+      }
     }
-  }
+  };
 }
 function startMeasuringDocumentElement() {
   return (dispatch) => {
@@ -264,13 +277,33 @@ function startMeasuringDocumentElement() {
     }
   };
 }
+function startHandlingKeyDownEvent() {
+  return (dispatch, getState) => {
+    window.document.body.addEventListener("keydown", handle);
+    return () => {
+      window.document.body.removeEventListener("keydown", handle);
+    };
+    function handle(event) {
+      if (event.defaultPrevented)
+        return;
+      if (constants.getBuilderEditMode(getState()) !== richText.BuilderEditMode.INTERACT) {
+        return;
+      }
+      if (isHotkey__default["default"]("escape")(event)) {
+        window.parent.focus();
+        dispatch(actions.setBuilderEditMode(richText.BuilderEditMode.BUILD));
+      }
+    }
+  };
+}
 function initialize() {
   return (dispatch) => {
     const stopMeasuringElements = dispatch(startMeasuringElements());
     const stopMeasuringDocumentElement = dispatch(startMeasuringDocumentElement());
-    const stopHandlingFocusEvent = startHandlingFocusEvents();
+    const stopHandlingFocusEvent = dispatch(startHandlingFocusEvents());
     const unlockDocumentScroll = dispatch(lockDocumentScroll());
     const stopHandlingPointerMoveEvent = dispatch(startHandlingPointerMoveEvent());
+    const stopHandlingKeyDownEvent = dispatch(startHandlingKeyDownEvent());
     dispatch(actions.setIsInBuilder(true));
     return () => {
       stopMeasuringElements();
@@ -278,6 +311,7 @@ function initialize() {
       stopHandlingFocusEvent();
       unlockDocumentScroll();
       stopHandlingPointerMoveEvent();
+      stopHandlingKeyDownEvent();
       dispatch(actions.setIsInBuilder(false));
     };
   };
@@ -318,7 +352,14 @@ function messageChannelMiddleware() {
         messageChannel.port1.postMessage(actions.registerBuilderComponent(componentType, componentMeta, serializedControls), transferables);
       }
     });
+    Router__default["default"].events.on("routeChangeStart", () => {
+      messageChannel.port1.postMessage(actions.changePathnameStart());
+    });
+    Router__default["default"].events.on("routeChangeComplete", () => {
+      messageChannel.port1.postMessage(actions.changePathnameComplete());
+    });
     return (action) => {
+      var _a;
       switch (action.type) {
         case actions.ActionTypes.CHANGE_ELEMENT_BOX_MODELS:
         case actions.ActionTypes.MOUNT_COMPONENT:
@@ -344,6 +385,17 @@ function messageChannelMiddleware() {
         case actions.ActionTypes.SCROLL_DOCUMENT_ELEMENT:
           window.document.documentElement.scrollTop += action.payload.scrollTopDelta;
           break;
+        case actions.ActionTypes.SET_BUILDER_EDIT_MODE:
+          messageChannel.port1.postMessage(action);
+          (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
+          break;
+        case actions.ActionTypes.CHANGE_PATHNAME: {
+          const pathname = action.payload.pathname.replace(/^\//, "");
+          const currentPathname = Router__default["default"].asPath.replace(/^\//, "");
+          if (pathname !== currentPathname)
+            Router__default["default"].push(pathname);
+          break;
+        }
         case actions.ActionTypes.INIT:
           cleanUp = dispatch(initialize());
           break;