@makeswift/runtime 0.4.2 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (92) hide show
  1. package/dist/Box.cjs.js +5 -3
  2. package/dist/Box.cjs.js.map +1 -1
  3. package/dist/Box.es.js +5 -3
  4. package/dist/Box.es.js.map +1 -1
  5. package/dist/Button.cjs.js +3 -3
  6. package/dist/Button.es.js +3 -3
  7. package/dist/Carousel.cjs.js +5 -3
  8. package/dist/Carousel.cjs.js.map +1 -1
  9. package/dist/Carousel.es.js +5 -3
  10. package/dist/Carousel.es.js.map +1 -1
  11. package/dist/Countdown.cjs.js +3 -3
  12. package/dist/Countdown.es.js +3 -3
  13. package/dist/Divider.cjs.js +3 -3
  14. package/dist/Divider.es.js +3 -3
  15. package/dist/Embed.cjs.js +3 -3
  16. package/dist/Embed.es.js +3 -3
  17. package/dist/Form.cjs.js +3 -3
  18. package/dist/Form.es.js +3 -3
  19. package/dist/Image.cjs.js +20 -12
  20. package/dist/Image.cjs.js.map +1 -1
  21. package/dist/Image.es.js +20 -12
  22. package/dist/Image.es.js.map +1 -1
  23. package/dist/LiveProvider.cjs.js +62 -0
  24. package/dist/LiveProvider.cjs.js.map +1 -0
  25. package/dist/LiveProvider.es.js +60 -0
  26. package/dist/LiveProvider.es.js.map +1 -0
  27. package/dist/Navigation.cjs.js +5 -3
  28. package/dist/Navigation.cjs.js.map +1 -1
  29. package/dist/Navigation.es.js +5 -3
  30. package/dist/Navigation.es.js.map +1 -1
  31. package/dist/{react-builder-preview.cjs.js → PreviewProvider.cjs.js} +43 -16
  32. package/dist/PreviewProvider.cjs.js.map +1 -0
  33. package/dist/{react-builder-preview.es.js → PreviewProvider.es.js} +47 -15
  34. package/dist/PreviewProvider.es.js.map +1 -0
  35. package/dist/Root.cjs.js +5 -3
  36. package/dist/Root.cjs.js.map +1 -1
  37. package/dist/Root.es.js +5 -3
  38. package/dist/Root.es.js.map +1 -1
  39. package/dist/SocialLinks.cjs.js +3 -3
  40. package/dist/SocialLinks.es.js +3 -3
  41. package/dist/Text.cjs.js +3 -3
  42. package/dist/Text.cjs.js.map +1 -1
  43. package/dist/Text.es.js +3 -3
  44. package/dist/Text.es.js.map +1 -1
  45. package/dist/Video.cjs.js +3 -3
  46. package/dist/Video.es.js +3 -3
  47. package/dist/actions.es.js +1 -1
  48. package/dist/components.cjs.js +5 -3
  49. package/dist/components.cjs.js.map +1 -1
  50. package/dist/components.es.js +5 -3
  51. package/dist/components.es.js.map +1 -1
  52. package/dist/grid-item.cjs.js +12 -1
  53. package/dist/grid-item.cjs.js.map +1 -1
  54. package/dist/grid-item.es.js +12 -1
  55. package/dist/grid-item.es.js.map +1 -1
  56. package/dist/index.cjs.js +40 -65
  57. package/dist/index.cjs.js.map +1 -1
  58. package/dist/index.cjs2.js +6 -7
  59. package/dist/index.cjs2.js.map +1 -1
  60. package/dist/index.es.js +35 -65
  61. package/dist/index.es.js.map +1 -1
  62. package/dist/index.es2.js +6 -7
  63. package/dist/index.es2.js.map +1 -1
  64. package/dist/next-version.cjs.js +10 -0
  65. package/dist/next-version.cjs.js.map +1 -0
  66. package/dist/next-version.es.js +5 -0
  67. package/dist/next-version.es.js.map +1 -0
  68. package/dist/next.cjs.js +3 -3
  69. package/dist/next.es.js +4 -4
  70. package/dist/react-page.es.js +1 -1
  71. package/dist/react.cjs.js +4 -4
  72. package/dist/react.es.js +4 -4
  73. package/dist/types/src/components/builtin/Form/components/Field/components/Checkbox/index.d.ts +1 -1
  74. package/dist/types/src/components/builtin/Image/Image.d.ts.map +1 -1
  75. package/dist/types/src/components/shared/BackgroundsContainer/components/Backgrounds/index.d.ts.map +1 -1
  76. package/dist/types/src/components/shared/Link/index.d.ts.map +1 -1
  77. package/dist/types/src/next/client.d.ts +1 -0
  78. package/dist/types/src/next/client.d.ts.map +1 -1
  79. package/dist/types/src/next/index.d.ts.map +1 -1
  80. package/dist/types/src/next/next-version.d.ts +3 -0
  81. package/dist/types/src/next/next-version.d.ts.map +1 -0
  82. package/dist/types/src/runtimes/react/components/LiveProvider.d.ts +11 -0
  83. package/dist/types/src/runtimes/react/components/LiveProvider.d.ts.map +1 -0
  84. package/dist/types/src/runtimes/react/components/PreviewProvider.d.ts +11 -0
  85. package/dist/types/src/runtimes/react/components/PreviewProvider.d.ts.map +1 -0
  86. package/dist/types/src/runtimes/react/index.d.ts +3 -1
  87. package/dist/types/src/runtimes/react/index.d.ts.map +1 -1
  88. package/dist/types/src/state/react-builder-preview.d.ts +3 -1
  89. package/dist/types/src/state/react-builder-preview.d.ts.map +1 -1
  90. package/package.json +4 -4
  91. package/dist/react-builder-preview.cjs.js.map +0 -1
  92. package/dist/react-builder-preview.es.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"Text.cjs.js","sources":["../src/components/builtin/Text/components/RichTextEditor/components/Mark/hooks/useTypographyMark.ts","../src/components/builtin/Text/components/RichTextEditor/components/Mark/index.tsx","../src/components/builtin/Text/components/RichTextEditor/plugins/DeviceOverridesMarks.tsx","../src/components/builtin/Text/components/RichTextEditor/components/Block/index.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/Text.tsx"],"sourcesContent":["import { Length as LengthValue } from '../../../../../../../../prop-controllers'\nimport { ColorValue as Color } from '../../../../../../../utils/types'\nimport { findDeviceOverride } from '../../../../../../../utils/devices'\nimport type { DeviceOverride } from '../../../../../../../../prop-controllers'\nimport {\n useSwatches,\n useTypography,\n} from '../../../../../../../../runtimes/react/hooks/makeswift-api'\nimport { Swatch, Typography } from '../../../../../../../../api'\nimport { getTypographyStyleSwatchIds } from '../../../../../../../../prop-controllers/introspection'\nimport { isNonNullable } from '../../../../../../../utils/isNonNullable'\n\nexport type TypographyMarkDataValue = {\n fontWeight?: number\n fontSize?: LengthValue\n fontFamily?: string\n color?: Color\n textAlign?: string\n lineHeight?: number\n letterSpacing?: number\n uppercase?: boolean\n italic?: boolean\n underline?: boolean\n strikethrough?: boolean\n}\n\nexport type TypographyMarkValue = {\n id: string | null | undefined\n style: Typography['style']\n}\n\nexport type TypographyMarkData = Array<DeviceOverride<TypographyMarkDataValue>>\n\nconst getDeviceId = ({ deviceId }: DeviceOverride<unknown>) => deviceId\n\nconst withColor =\n (swatches: Swatch[]) =>\n ({\n value: { color, ...restOfValue },\n ...rest\n }: Typography['style'][number]): DeviceOverride<TypographyMarkDataValue> =>\n ({\n ...rest,\n value: {\n ...restOfValue,\n ...(color\n ? {\n color: {\n swatch: swatches.find(s => s && s.id === color.swatchId),\n alpha: color.alpha,\n },\n }\n : {}),\n } as TypographyMarkDataValue,\n } as DeviceOverride<TypographyMarkDataValue>)\n\nexport const overrideTypographyStyle = <A>(\n source: Array<DeviceOverride<A>>,\n override: Array<DeviceOverride<A>>,\n): Array<DeviceOverride<A>> => {\n const devices = [...new Set(source.map(getDeviceId).concat(override.map(getDeviceId)))]\n\n return devices.map(deviceId => ({\n deviceId,\n value: {\n ...(findDeviceOverride(source, deviceId) || { value: {} }).value,\n ...(findDeviceOverride(override, deviceId, v => v) || { value: {} }).value,\n },\n })) as DeviceOverride<A>[]\n}\n\nexport default function useTypographyMark(\n value: TypographyMarkValue | null | undefined,\n): TypographyMarkData | null | undefined {\n const typography = useTypography(value?.id ?? null)\n const swatchIds = [\n ...getTypographyStyleSwatchIds(value?.style),\n ...getTypographyStyleSwatchIds(typography?.style),\n ]\n const swatches = useSwatches(swatchIds)\n\n return overrideTypographyStyle(\n typography?.style.map(withColor(swatches.filter(isNonNullable))) ?? [],\n value?.style.map(withColor(swatches.filter(isNonNullable))) ?? [],\n )\n}\n","import { ComponentPropsWithoutRef } from 'react'\n\nimport useTypographyMark, {\n TypographyMarkValue,\n overrideTypographyStyle,\n TypographyMarkDataValue,\n} from './hooks/useTypographyMark'\nimport { colorToString } from '../../../../../../utils/colorToString'\nimport { shallowMergeFallbacks } from '../../../../../../utils/devices'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { responsiveStyle } from '../../../../../../utils/responsive-style'\nimport { ResponsiveValue } from '../../../../../../../prop-controllers/descriptors'\n\nexport type { TypographyMarkValue }\nexport { overrideTypographyStyle }\n\ntype BaseProps = { value: TypographyMarkValue }\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'span'>, keyof BaseProps>\n\nexport default function Mark({ value, className, ...restOfProps }: Props): JSX.Element {\n const typographyStyle = useTypographyMark(value)\n const typographyClassName = useStyle(\n responsiveStyle<\n TypographyMarkDataValue,\n [ResponsiveValue<TypographyMarkDataValue> | null | undefined]\n >(\n [typographyStyle],\n ([\n {\n color,\n fontFamily,\n fontSize,\n fontWeight,\n lineHeight,\n letterSpacing,\n uppercase,\n underline,\n strikethrough,\n italic,\n } = {} as TypographyMarkDataValue,\n ]) => ({\n ...(color == null ? {} : { color: colorToString(color) }),\n ...(fontFamily == null ? {} : { fontFamily }),\n ...(fontSize == null || fontSize.value == null || fontSize.unit == null\n ? {}\n : { fontSize: `${fontSize.value}${fontSize.unit}` }),\n ...(fontWeight == null ? {} : { fontWeight }),\n ...(lineHeight == null ? {} : { lineHeight }),\n ...(letterSpacing == null ? {} : { letterSpacing: `${letterSpacing / 10}em` }),\n ...(uppercase == null\n ? {}\n : { textTransform: uppercase === true ? 'uppercase' : 'initial' }),\n ...(underline == null && strikethrough == null\n ? {}\n : {\n textDecoration: [\n Boolean(underline) && 'underline',\n Boolean(strikethrough) && 'line-through',\n ]\n .filter(Boolean)\n .join(' '),\n }),\n ...(italic == null ? {} : { fontStyle: italic === true ? 'italic' : 'initial' }),\n }),\n shallowMergeFallbacks,\n ),\n )\n\n return <span {...restOfProps} className={cx(typographyClassName, className)} />\n}\n","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 { cx } from '@emotion/css'\nimport { forwardRef, ComponentPropsWithoutRef, ForwardedRef, ElementRef, ElementType } from 'react'\n\nimport type { ResponsiveValue } from '../../../../../../../prop-controllers'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { responsiveStyle } from '../../../../../../utils/responsive-style'\n\ntype BaseProps<T extends ElementType> = {\n as?: T\n textAlign?: ResponsiveValue<'left' | 'center' | 'right' | 'justify'>\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n Omit<ComponentPropsWithoutRef<T>, keyof BaseProps<T>>\n\nexport default forwardRef(function Block<T extends ElementType>(\n { textAlign, className, as, ...restOfProps }: Props<T>,\n ref: ForwardedRef<ElementRef<T>>,\n) {\n const Component = as ?? 'div'\n\n return (\n // @ts-ignore: `ref` types don't match.\n <Component\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ margin: 0 }),\n useStyle(responsiveStyle([textAlign], ([textAlign = 'left']) => ({ textAlign }))),\n useStyle(\n as === 'blockquote'\n ? {\n padding: '0.5em 10px',\n fontSize: '1.25em',\n fontWeight: '300',\n borderLeft: '5px solid rgba(0, 0, 0, 0.1)',\n }\n : {},\n ),\n className,\n )}\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 { useIsInBuilder } from '../../../runtimes/react'\nimport { DescriptorsPropControllers } from '../../../prop-controllers/instances'\nimport { cx } from '@emotion/css'\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 Text = forwardRef(function Text(\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 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(width, margin)}\n readOnly={!isInBuilder}\n value={value}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n />\n )\n})\n\nexport default Text\n"],"names":["findDeviceOverride","useTypography","getTypographyStyleSwatchIds","useSwatches","isNonNullable","value","className","restOfProps","typographyStyle","useTypographyMark","typographyClassName","useStyle","responsiveStyle","color","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","uppercase","underline","strikethrough","italic","colorToString","unit","textTransform","textDecoration","Boolean","filter","join","fontStyle","shallowMergeFallbacks","cx","TYPOGRAPHY_TYPE","renderMark","mark","children","_editor","next","type","data","get","forwardRef","ref","textAlign","as","Component","margin","padding","borderLeft","renderBlock","props","node","attributes","blockProps","Link","renderInline","toJS","RichTextEditor","placeholder","plugins","useMemo","Lists","Inlines","DeviceOverridesBlocks","DeviceOverridesMarks","SlateEditor","WebkitUserModify","undefined","defaultText","document","nodes","object","COMMIT_DEBOUNCE_DELAY","Text","id","text","width","editor","setEditor","useState","propControllers","setPropControllers","controller","useImperativeHandle","getBoxModel","el","findDOMNode","Element","getBox","useEffect","setSlateEditor","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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"}
1
+ {"version":3,"file":"Text.cjs.js","sources":["../src/components/builtin/Text/components/RichTextEditor/components/Mark/hooks/useTypographyMark.ts","../src/components/builtin/Text/components/RichTextEditor/components/Mark/index.tsx","../src/components/builtin/Text/components/RichTextEditor/plugins/DeviceOverridesMarks.tsx","../src/components/builtin/Text/components/RichTextEditor/components/Block/index.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/Text.tsx"],"sourcesContent":["import { Length as LengthValue } from '../../../../../../../../prop-controllers'\nimport { ColorValue as Color } from '../../../../../../../utils/types'\nimport { findDeviceOverride } from '../../../../../../../utils/devices'\nimport type { DeviceOverride } from '../../../../../../../../prop-controllers'\nimport {\n useSwatches,\n useTypography,\n} from '../../../../../../../../runtimes/react/hooks/makeswift-api'\nimport { Swatch, Typography } from '../../../../../../../../api'\nimport { getTypographyStyleSwatchIds } from '../../../../../../../../prop-controllers/introspection'\nimport { isNonNullable } from '../../../../../../../utils/isNonNullable'\n\nexport type TypographyMarkDataValue = {\n fontWeight?: number\n fontSize?: LengthValue\n fontFamily?: string\n color?: Color\n textAlign?: string\n lineHeight?: number\n letterSpacing?: number\n uppercase?: boolean\n italic?: boolean\n underline?: boolean\n strikethrough?: boolean\n}\n\nexport type TypographyMarkValue = {\n id: string | null | undefined\n style: Typography['style']\n}\n\nexport type TypographyMarkData = Array<DeviceOverride<TypographyMarkDataValue>>\n\nconst getDeviceId = ({ deviceId }: DeviceOverride<unknown>) => deviceId\n\nconst withColor =\n (swatches: Swatch[]) =>\n ({\n value: { color, ...restOfValue },\n ...rest\n }: Typography['style'][number]): DeviceOverride<TypographyMarkDataValue> =>\n ({\n ...rest,\n value: {\n ...restOfValue,\n ...(color\n ? {\n color: {\n swatch: swatches.find(s => s && s.id === color.swatchId),\n alpha: color.alpha,\n },\n }\n : {}),\n } as TypographyMarkDataValue,\n } as DeviceOverride<TypographyMarkDataValue>)\n\nexport const overrideTypographyStyle = <A>(\n source: Array<DeviceOverride<A>>,\n override: Array<DeviceOverride<A>>,\n): Array<DeviceOverride<A>> => {\n const devices = [...new Set(source.map(getDeviceId).concat(override.map(getDeviceId)))]\n\n return devices.map(deviceId => ({\n deviceId,\n value: {\n ...(findDeviceOverride(source, deviceId) || { value: {} }).value,\n ...(findDeviceOverride(override, deviceId, v => v) || { value: {} }).value,\n },\n })) as DeviceOverride<A>[]\n}\n\nexport default function useTypographyMark(\n value: TypographyMarkValue | null | undefined,\n): TypographyMarkData | null | undefined {\n const typography = useTypography(value?.id ?? null)\n const swatchIds = [\n ...getTypographyStyleSwatchIds(value?.style),\n ...getTypographyStyleSwatchIds(typography?.style),\n ]\n const swatches = useSwatches(swatchIds)\n\n return overrideTypographyStyle(\n typography?.style.map(withColor(swatches.filter(isNonNullable))) ?? [],\n value?.style.map(withColor(swatches.filter(isNonNullable))) ?? [],\n )\n}\n","import { ComponentPropsWithoutRef } from 'react'\n\nimport useTypographyMark, {\n TypographyMarkValue,\n overrideTypographyStyle,\n TypographyMarkDataValue,\n} from './hooks/useTypographyMark'\nimport { colorToString } from '../../../../../../utils/colorToString'\nimport { shallowMergeFallbacks } from '../../../../../../utils/devices'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { responsiveStyle } from '../../../../../../utils/responsive-style'\nimport { ResponsiveValue } from '../../../../../../../prop-controllers/descriptors'\n\nexport type { TypographyMarkValue }\nexport { overrideTypographyStyle }\n\ntype BaseProps = { value: TypographyMarkValue }\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'span'>, keyof BaseProps>\n\nexport default function Mark({ value, className, ...restOfProps }: Props): JSX.Element {\n const typographyStyle = useTypographyMark(value)\n const typographyClassName = useStyle(\n responsiveStyle<\n TypographyMarkDataValue,\n [ResponsiveValue<TypographyMarkDataValue> | null | undefined]\n >(\n [typographyStyle],\n ([\n {\n color,\n fontFamily,\n fontSize,\n fontWeight,\n lineHeight,\n letterSpacing,\n uppercase,\n underline,\n strikethrough,\n italic,\n } = {} as TypographyMarkDataValue,\n ]) => ({\n ...(color == null ? {} : { color: colorToString(color) }),\n ...(fontFamily == null ? {} : { fontFamily }),\n ...(fontSize == null || fontSize.value == null || fontSize.unit == null\n ? {}\n : { fontSize: `${fontSize.value}${fontSize.unit}` }),\n ...(fontWeight == null ? {} : { fontWeight }),\n ...(lineHeight == null ? {} : { lineHeight }),\n ...(letterSpacing == null ? {} : { letterSpacing: `${letterSpacing / 10}em` }),\n ...(uppercase == null\n ? {}\n : { textTransform: uppercase === true ? 'uppercase' : 'initial' }),\n ...(underline == null && strikethrough == null\n ? {}\n : {\n textDecoration: [\n Boolean(underline) && 'underline',\n Boolean(strikethrough) && 'line-through',\n ]\n .filter(Boolean)\n .join(' '),\n }),\n ...(italic == null ? {} : { fontStyle: italic === true ? 'italic' : 'initial' }),\n }),\n shallowMergeFallbacks,\n ),\n )\n\n return <span {...restOfProps} className={cx(typographyClassName, className)} />\n}\n","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 { cx } from '@emotion/css'\nimport { forwardRef, ComponentPropsWithoutRef, ForwardedRef, ElementRef, ElementType } from 'react'\n\nimport type { ResponsiveValue } from '../../../../../../../prop-controllers'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { responsiveStyle } from '../../../../../../utils/responsive-style'\n\ntype BaseProps<T extends ElementType> = {\n as?: T\n textAlign?: ResponsiveValue<'left' | 'center' | 'right' | 'justify'>\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n Omit<ComponentPropsWithoutRef<T>, keyof BaseProps<T>>\n\nexport default forwardRef(function Block<T extends ElementType>(\n { textAlign, className, as, ...restOfProps }: Props<T>,\n ref: ForwardedRef<ElementRef<T>>,\n) {\n const Component = as ?? 'div'\n\n return (\n // @ts-ignore: `ref` types don't match.\n <Component\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ margin: 0 }),\n useStyle(responsiveStyle([textAlign], ([textAlign = 'left']) => ({ textAlign }))),\n useStyle(\n as === 'blockquote'\n ? {\n padding: '0.5em 10px',\n fontSize: '1.25em',\n fontWeight: '300',\n borderLeft: '5px solid rgba(0, 0, 0, 0.1)',\n }\n : {},\n ),\n className,\n )}\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 { useIsInBuilder } from '../../../runtimes/react'\nimport { DescriptorsPropControllers } from '../../../prop-controllers/instances'\nimport { cx } from '@emotion/css'\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 Text = forwardRef(function Text(\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 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(width, margin)}\n readOnly={!isInBuilder || controller == null}\n value={value}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n />\n )\n})\n\nexport default Text\n"],"names":["findDeviceOverride","useTypography","getTypographyStyleSwatchIds","useSwatches","isNonNullable","value","className","restOfProps","typographyStyle","useTypographyMark","typographyClassName","useStyle","responsiveStyle","color","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","uppercase","underline","strikethrough","italic","colorToString","unit","textTransform","textDecoration","Boolean","filter","join","fontStyle","shallowMergeFallbacks","cx","TYPOGRAPHY_TYPE","renderMark","mark","children","_editor","next","type","data","get","forwardRef","ref","textAlign","as","Component","margin","padding","borderLeft","renderBlock","props","node","attributes","blockProps","Link","renderInline","toJS","RichTextEditor","placeholder","plugins","useMemo","Lists","Inlines","DeviceOverridesBlocks","DeviceOverridesMarks","SlateEditor","WebkitUserModify","undefined","defaultText","document","nodes","object","COMMIT_DEBOUNCE_DELAY","Text","id","text","width","editor","setEditor","useState","propControllers","setPropControllers","controller","useImperativeHandle","getBoxModel","el","findDOMNode","Element","getBox","useEffect","setSlateEditor","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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"}
package/dist/Text.es.js CHANGED
@@ -47,12 +47,12 @@ import "css-box-model";
47
47
  import "./actions.es.js";
48
48
  import "use-sync-external-store/shim/with-selector";
49
49
  import "next/dynamic";
50
+ import "./text-input.es.js";
51
+ import "./combobox.es.js";
50
52
  import "./control.es.js";
51
53
  import "redux";
52
54
  import "redux-thunk";
53
55
  import "./types.es.js";
54
- import "./text-input.es.js";
55
- import "./combobox.es.js";
56
56
  import "color";
57
57
  import "scroll-into-view-if-needed";
58
58
  import "react-dom";
@@ -434,7 +434,7 @@ const Text = forwardRef(function Text2({
434
434
  id,
435
435
  ref: setEditor,
436
436
  className: cx(width, margin),
437
- readOnly: !isInBuilder,
437
+ readOnly: !isInBuilder || controller == null,
438
438
  value,
439
439
  onChange: handleChange,
440
440
  onFocus: handleFocus,
@@ -1 +1 @@
1
- {"version":3,"file":"Text.es.js","sources":["../src/components/builtin/Text/components/RichTextEditor/components/Mark/hooks/useTypographyMark.ts","../src/components/builtin/Text/components/RichTextEditor/components/Mark/index.tsx","../src/components/builtin/Text/components/RichTextEditor/plugins/DeviceOverridesMarks.tsx","../src/components/builtin/Text/components/RichTextEditor/components/Block/index.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/Text.tsx"],"sourcesContent":["import { Length as LengthValue } from '../../../../../../../../prop-controllers'\nimport { ColorValue as Color } from '../../../../../../../utils/types'\nimport { findDeviceOverride } from '../../../../../../../utils/devices'\nimport type { DeviceOverride } from '../../../../../../../../prop-controllers'\nimport {\n useSwatches,\n useTypography,\n} from '../../../../../../../../runtimes/react/hooks/makeswift-api'\nimport { Swatch, Typography } from '../../../../../../../../api'\nimport { getTypographyStyleSwatchIds } from '../../../../../../../../prop-controllers/introspection'\nimport { isNonNullable } from '../../../../../../../utils/isNonNullable'\n\nexport type TypographyMarkDataValue = {\n fontWeight?: number\n fontSize?: LengthValue\n fontFamily?: string\n color?: Color\n textAlign?: string\n lineHeight?: number\n letterSpacing?: number\n uppercase?: boolean\n italic?: boolean\n underline?: boolean\n strikethrough?: boolean\n}\n\nexport type TypographyMarkValue = {\n id: string | null | undefined\n style: Typography['style']\n}\n\nexport type TypographyMarkData = Array<DeviceOverride<TypographyMarkDataValue>>\n\nconst getDeviceId = ({ deviceId }: DeviceOverride<unknown>) => deviceId\n\nconst withColor =\n (swatches: Swatch[]) =>\n ({\n value: { color, ...restOfValue },\n ...rest\n }: Typography['style'][number]): DeviceOverride<TypographyMarkDataValue> =>\n ({\n ...rest,\n value: {\n ...restOfValue,\n ...(color\n ? {\n color: {\n swatch: swatches.find(s => s && s.id === color.swatchId),\n alpha: color.alpha,\n },\n }\n : {}),\n } as TypographyMarkDataValue,\n } as DeviceOverride<TypographyMarkDataValue>)\n\nexport const overrideTypographyStyle = <A>(\n source: Array<DeviceOverride<A>>,\n override: Array<DeviceOverride<A>>,\n): Array<DeviceOverride<A>> => {\n const devices = [...new Set(source.map(getDeviceId).concat(override.map(getDeviceId)))]\n\n return devices.map(deviceId => ({\n deviceId,\n value: {\n ...(findDeviceOverride(source, deviceId) || { value: {} }).value,\n ...(findDeviceOverride(override, deviceId, v => v) || { value: {} }).value,\n },\n })) as DeviceOverride<A>[]\n}\n\nexport default function useTypographyMark(\n value: TypographyMarkValue | null | undefined,\n): TypographyMarkData | null | undefined {\n const typography = useTypography(value?.id ?? null)\n const swatchIds = [\n ...getTypographyStyleSwatchIds(value?.style),\n ...getTypographyStyleSwatchIds(typography?.style),\n ]\n const swatches = useSwatches(swatchIds)\n\n return overrideTypographyStyle(\n typography?.style.map(withColor(swatches.filter(isNonNullable))) ?? [],\n value?.style.map(withColor(swatches.filter(isNonNullable))) ?? [],\n )\n}\n","import { ComponentPropsWithoutRef } from 'react'\n\nimport useTypographyMark, {\n TypographyMarkValue,\n overrideTypographyStyle,\n TypographyMarkDataValue,\n} from './hooks/useTypographyMark'\nimport { colorToString } from '../../../../../../utils/colorToString'\nimport { shallowMergeFallbacks } from '../../../../../../utils/devices'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { responsiveStyle } from '../../../../../../utils/responsive-style'\nimport { ResponsiveValue } from '../../../../../../../prop-controllers/descriptors'\n\nexport type { TypographyMarkValue }\nexport { overrideTypographyStyle }\n\ntype BaseProps = { value: TypographyMarkValue }\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'span'>, keyof BaseProps>\n\nexport default function Mark({ value, className, ...restOfProps }: Props): JSX.Element {\n const typographyStyle = useTypographyMark(value)\n const typographyClassName = useStyle(\n responsiveStyle<\n TypographyMarkDataValue,\n [ResponsiveValue<TypographyMarkDataValue> | null | undefined]\n >(\n [typographyStyle],\n ([\n {\n color,\n fontFamily,\n fontSize,\n fontWeight,\n lineHeight,\n letterSpacing,\n uppercase,\n underline,\n strikethrough,\n italic,\n } = {} as TypographyMarkDataValue,\n ]) => ({\n ...(color == null ? {} : { color: colorToString(color) }),\n ...(fontFamily == null ? {} : { fontFamily }),\n ...(fontSize == null || fontSize.value == null || fontSize.unit == null\n ? {}\n : { fontSize: `${fontSize.value}${fontSize.unit}` }),\n ...(fontWeight == null ? {} : { fontWeight }),\n ...(lineHeight == null ? {} : { lineHeight }),\n ...(letterSpacing == null ? {} : { letterSpacing: `${letterSpacing / 10}em` }),\n ...(uppercase == null\n ? {}\n : { textTransform: uppercase === true ? 'uppercase' : 'initial' }),\n ...(underline == null && strikethrough == null\n ? {}\n : {\n textDecoration: [\n Boolean(underline) && 'underline',\n Boolean(strikethrough) && 'line-through',\n ]\n .filter(Boolean)\n .join(' '),\n }),\n ...(italic == null ? {} : { fontStyle: italic === true ? 'italic' : 'initial' }),\n }),\n shallowMergeFallbacks,\n ),\n )\n\n return <span {...restOfProps} className={cx(typographyClassName, className)} />\n}\n","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 { cx } from '@emotion/css'\nimport { forwardRef, ComponentPropsWithoutRef, ForwardedRef, ElementRef, ElementType } from 'react'\n\nimport type { ResponsiveValue } from '../../../../../../../prop-controllers'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { responsiveStyle } from '../../../../../../utils/responsive-style'\n\ntype BaseProps<T extends ElementType> = {\n as?: T\n textAlign?: ResponsiveValue<'left' | 'center' | 'right' | 'justify'>\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n Omit<ComponentPropsWithoutRef<T>, keyof BaseProps<T>>\n\nexport default forwardRef(function Block<T extends ElementType>(\n { textAlign, className, as, ...restOfProps }: Props<T>,\n ref: ForwardedRef<ElementRef<T>>,\n) {\n const Component = as ?? 'div'\n\n return (\n // @ts-ignore: `ref` types don't match.\n <Component\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ margin: 0 }),\n useStyle(responsiveStyle([textAlign], ([textAlign = 'left']) => ({ textAlign }))),\n useStyle(\n as === 'blockquote'\n ? {\n padding: '0.5em 10px',\n fontSize: '1.25em',\n fontWeight: '300',\n borderLeft: '5px solid rgba(0, 0, 0, 0.1)',\n }\n : {},\n ),\n className,\n )}\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 { useIsInBuilder } from '../../../runtimes/react'\nimport { DescriptorsPropControllers } from '../../../prop-controllers/instances'\nimport { cx } from '@emotion/css'\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 Text = forwardRef(function Text(\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 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(width, margin)}\n readOnly={!isInBuilder}\n value={value}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n />\n )\n})\n\nexport default Text\n"],"names":["value","className","restOfProps","typographyStyle","useTypographyMark","typographyClassName","useStyle","responsiveStyle","color","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","uppercase","underline","strikethrough","italic","colorToString","unit","textTransform","textDecoration","Boolean","filter","join","fontStyle","shallowMergeFallbacks","cx","TYPOGRAPHY_TYPE","renderMark","mark","children","_editor","next","type","data","get","forwardRef","ref","textAlign","as","Component","margin","padding","borderLeft","renderBlock","props","node","attributes","blockProps","renderInline","toJS","RichTextEditor","placeholder","plugins","useMemo","Lists","Link","Inlines","DeviceOverridesBlocks","DeviceOverridesMarks","SlateEditor","WebkitUserModify","undefined","defaultText","document","nodes","object","COMMIT_DEBOUNCE_DELAY","Text","id","text","width","editor","setEditor","useState","propControllers","setPropControllers","controller","useImperativeHandle","getBoxModel","el","findDOMNode","Element","getBox","useEffect","setSlateEditor","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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"}
1
+ {"version":3,"file":"Text.es.js","sources":["../src/components/builtin/Text/components/RichTextEditor/components/Mark/hooks/useTypographyMark.ts","../src/components/builtin/Text/components/RichTextEditor/components/Mark/index.tsx","../src/components/builtin/Text/components/RichTextEditor/plugins/DeviceOverridesMarks.tsx","../src/components/builtin/Text/components/RichTextEditor/components/Block/index.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/Text.tsx"],"sourcesContent":["import { Length as LengthValue } from '../../../../../../../../prop-controllers'\nimport { ColorValue as Color } from '../../../../../../../utils/types'\nimport { findDeviceOverride } from '../../../../../../../utils/devices'\nimport type { DeviceOverride } from '../../../../../../../../prop-controllers'\nimport {\n useSwatches,\n useTypography,\n} from '../../../../../../../../runtimes/react/hooks/makeswift-api'\nimport { Swatch, Typography } from '../../../../../../../../api'\nimport { getTypographyStyleSwatchIds } from '../../../../../../../../prop-controllers/introspection'\nimport { isNonNullable } from '../../../../../../../utils/isNonNullable'\n\nexport type TypographyMarkDataValue = {\n fontWeight?: number\n fontSize?: LengthValue\n fontFamily?: string\n color?: Color\n textAlign?: string\n lineHeight?: number\n letterSpacing?: number\n uppercase?: boolean\n italic?: boolean\n underline?: boolean\n strikethrough?: boolean\n}\n\nexport type TypographyMarkValue = {\n id: string | null | undefined\n style: Typography['style']\n}\n\nexport type TypographyMarkData = Array<DeviceOverride<TypographyMarkDataValue>>\n\nconst getDeviceId = ({ deviceId }: DeviceOverride<unknown>) => deviceId\n\nconst withColor =\n (swatches: Swatch[]) =>\n ({\n value: { color, ...restOfValue },\n ...rest\n }: Typography['style'][number]): DeviceOverride<TypographyMarkDataValue> =>\n ({\n ...rest,\n value: {\n ...restOfValue,\n ...(color\n ? {\n color: {\n swatch: swatches.find(s => s && s.id === color.swatchId),\n alpha: color.alpha,\n },\n }\n : {}),\n } as TypographyMarkDataValue,\n } as DeviceOverride<TypographyMarkDataValue>)\n\nexport const overrideTypographyStyle = <A>(\n source: Array<DeviceOverride<A>>,\n override: Array<DeviceOverride<A>>,\n): Array<DeviceOverride<A>> => {\n const devices = [...new Set(source.map(getDeviceId).concat(override.map(getDeviceId)))]\n\n return devices.map(deviceId => ({\n deviceId,\n value: {\n ...(findDeviceOverride(source, deviceId) || { value: {} }).value,\n ...(findDeviceOverride(override, deviceId, v => v) || { value: {} }).value,\n },\n })) as DeviceOverride<A>[]\n}\n\nexport default function useTypographyMark(\n value: TypographyMarkValue | null | undefined,\n): TypographyMarkData | null | undefined {\n const typography = useTypography(value?.id ?? null)\n const swatchIds = [\n ...getTypographyStyleSwatchIds(value?.style),\n ...getTypographyStyleSwatchIds(typography?.style),\n ]\n const swatches = useSwatches(swatchIds)\n\n return overrideTypographyStyle(\n typography?.style.map(withColor(swatches.filter(isNonNullable))) ?? [],\n value?.style.map(withColor(swatches.filter(isNonNullable))) ?? [],\n )\n}\n","import { ComponentPropsWithoutRef } from 'react'\n\nimport useTypographyMark, {\n TypographyMarkValue,\n overrideTypographyStyle,\n TypographyMarkDataValue,\n} from './hooks/useTypographyMark'\nimport { colorToString } from '../../../../../../utils/colorToString'\nimport { shallowMergeFallbacks } from '../../../../../../utils/devices'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { responsiveStyle } from '../../../../../../utils/responsive-style'\nimport { ResponsiveValue } from '../../../../../../../prop-controllers/descriptors'\n\nexport type { TypographyMarkValue }\nexport { overrideTypographyStyle }\n\ntype BaseProps = { value: TypographyMarkValue }\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'span'>, keyof BaseProps>\n\nexport default function Mark({ value, className, ...restOfProps }: Props): JSX.Element {\n const typographyStyle = useTypographyMark(value)\n const typographyClassName = useStyle(\n responsiveStyle<\n TypographyMarkDataValue,\n [ResponsiveValue<TypographyMarkDataValue> | null | undefined]\n >(\n [typographyStyle],\n ([\n {\n color,\n fontFamily,\n fontSize,\n fontWeight,\n lineHeight,\n letterSpacing,\n uppercase,\n underline,\n strikethrough,\n italic,\n } = {} as TypographyMarkDataValue,\n ]) => ({\n ...(color == null ? {} : { color: colorToString(color) }),\n ...(fontFamily == null ? {} : { fontFamily }),\n ...(fontSize == null || fontSize.value == null || fontSize.unit == null\n ? {}\n : { fontSize: `${fontSize.value}${fontSize.unit}` }),\n ...(fontWeight == null ? {} : { fontWeight }),\n ...(lineHeight == null ? {} : { lineHeight }),\n ...(letterSpacing == null ? {} : { letterSpacing: `${letterSpacing / 10}em` }),\n ...(uppercase == null\n ? {}\n : { textTransform: uppercase === true ? 'uppercase' : 'initial' }),\n ...(underline == null && strikethrough == null\n ? {}\n : {\n textDecoration: [\n Boolean(underline) && 'underline',\n Boolean(strikethrough) && 'line-through',\n ]\n .filter(Boolean)\n .join(' '),\n }),\n ...(italic == null ? {} : { fontStyle: italic === true ? 'italic' : 'initial' }),\n }),\n shallowMergeFallbacks,\n ),\n )\n\n return <span {...restOfProps} className={cx(typographyClassName, className)} />\n}\n","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 { cx } from '@emotion/css'\nimport { forwardRef, ComponentPropsWithoutRef, ForwardedRef, ElementRef, ElementType } from 'react'\n\nimport type { ResponsiveValue } from '../../../../../../../prop-controllers'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { responsiveStyle } from '../../../../../../utils/responsive-style'\n\ntype BaseProps<T extends ElementType> = {\n as?: T\n textAlign?: ResponsiveValue<'left' | 'center' | 'right' | 'justify'>\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n Omit<ComponentPropsWithoutRef<T>, keyof BaseProps<T>>\n\nexport default forwardRef(function Block<T extends ElementType>(\n { textAlign, className, as, ...restOfProps }: Props<T>,\n ref: ForwardedRef<ElementRef<T>>,\n) {\n const Component = as ?? 'div'\n\n return (\n // @ts-ignore: `ref` types don't match.\n <Component\n {...restOfProps}\n ref={ref}\n className={cx(\n useStyle({ margin: 0 }),\n useStyle(responsiveStyle([textAlign], ([textAlign = 'left']) => ({ textAlign }))),\n useStyle(\n as === 'blockquote'\n ? {\n padding: '0.5em 10px',\n fontSize: '1.25em',\n fontWeight: '300',\n borderLeft: '5px solid rgba(0, 0, 0, 0.1)',\n }\n : {},\n ),\n className,\n )}\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 { useIsInBuilder } from '../../../runtimes/react'\nimport { DescriptorsPropControllers } from '../../../prop-controllers/instances'\nimport { cx } from '@emotion/css'\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 Text = forwardRef(function Text(\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 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(width, margin)}\n readOnly={!isInBuilder || controller == null}\n value={value}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n />\n )\n})\n\nexport default Text\n"],"names":["value","className","restOfProps","typographyStyle","useTypographyMark","typographyClassName","useStyle","responsiveStyle","color","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","uppercase","underline","strikethrough","italic","colorToString","unit","textTransform","textDecoration","Boolean","filter","join","fontStyle","shallowMergeFallbacks","cx","TYPOGRAPHY_TYPE","renderMark","mark","children","_editor","next","type","data","get","forwardRef","ref","textAlign","as","Component","margin","padding","borderLeft","renderBlock","props","node","attributes","blockProps","renderInline","toJS","RichTextEditor","placeholder","plugins","useMemo","Lists","Link","Inlines","DeviceOverridesBlocks","DeviceOverridesMarks","SlateEditor","WebkitUserModify","undefined","defaultText","document","nodes","object","COMMIT_DEBOUNCE_DELAY","Text","id","text","width","editor","setEditor","useState","propControllers","setPropControllers","controller","useImperativeHandle","getBoxModel","el","findDOMNode","Element","getBox","useEffect","setSlateEditor","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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"}
package/dist/Video.cjs.js CHANGED
@@ -26,18 +26,18 @@ var next = require("./index.cjs.js");
26
26
  var placeholders = require("./placeholders.cjs.js");
27
27
  var jsxRuntime = require("react/jsx-runtime");
28
28
  require("use-sync-external-store/shim/with-selector");
29
+ require("next/dynamic");
29
30
  require("./react-page.cjs.js");
30
31
  require("redux");
31
32
  require("redux-thunk");
32
33
  require("./actions.cjs.js");
33
34
  require("./slot.cjs.js");
34
35
  require("./control.cjs.js");
35
- require("next/dynamic");
36
- require("slate");
37
- require("./types.cjs.js");
38
36
  require("./text-input.cjs.js");
39
37
  require("./combobox.cjs.js");
40
38
  require("use-sync-external-store/shim");
39
+ require("slate");
40
+ require("./types.cjs.js");
41
41
  require("color");
42
42
  require("scroll-into-view-if-needed");
43
43
  require("./box-models.cjs.js");
package/dist/Video.es.js CHANGED
@@ -24,18 +24,18 @@ import { n as useStyle } from "./index.es.js";
24
24
  import { p as placeholders } from "./placeholders.es.js";
25
25
  import { jsx } from "react/jsx-runtime";
26
26
  import "use-sync-external-store/shim/with-selector";
27
+ import "next/dynamic";
27
28
  import "./react-page.es.js";
28
29
  import "redux";
29
30
  import "redux-thunk";
30
31
  import "./actions.es.js";
31
32
  import "./slot.es.js";
32
33
  import "./control.es.js";
33
- import "next/dynamic";
34
- import "slate";
35
- import "./types.es.js";
36
34
  import "./text-input.es.js";
37
35
  import "./combobox.es.js";
38
36
  import "use-sync-external-store/shim";
37
+ import "slate";
38
+ import "./types.es.js";
39
39
  import "color";
40
40
  import "scroll-into-view-if-needed";
41
41
  import "./box-models.es.js";
@@ -208,5 +208,5 @@ function introspectedResourcesFulfilled(introspectedResourceIds, introspectedRes
208
208
  function restoreAPIResourcesCache(serializedState) {
209
209
  return { type: ActionTypes.RESTORE_API_RESOURCES_CACHE, payload: { serializedState } };
210
210
  }
211
- export { ActionTypes as A, unregisterMeasurable as B, registerMeasurable as C, unregisterPropControllers as D, registerPropControllers as E, registerPropControllersHandle as F, messageBuilderPropController as G, changeDocumentElementScrollTop as a, cleanUp as b, changeDocument as c, changeApiResource as d, evictApiResource as e, introspectedResourcesFulfilled as f, apiResourceFulfilled as g, restoreAPIResourcesCache as h, init as i, registerDocumentEffect as j, registerComponentHandleEffect as k, mountComponentEffect as l, messageHostPropController as m, registerComponentEffect as n, registerReactComponentEffect as o, changeElementBoxModels as p, changeDocumentElementSize as q, registerDocument as r, scrollDocumentElement as s, typographiesFulfilled as t, unregisterDocument as u, handleWheel as v, handlePointerMove as w, setIsInBuilder as x, registerBuilderComponent as y, unregisterBuilderComponent as z };
211
+ export { ActionTypes as A, unregisterBuilderComponent as B, unregisterPropControllers as C, registerPropControllers as D, registerPropControllersHandle as E, messageBuilderPropController as F, registerDocumentEffect as G, changeDocumentElementScrollTop as a, cleanUp as b, changeDocument as c, changeApiResource as d, evictApiResource as e, introspectedResourcesFulfilled as f, apiResourceFulfilled as g, restoreAPIResourcesCache as h, init as i, registerComponentHandleEffect as j, mountComponentEffect as k, registerComponentEffect as l, messageHostPropController as m, registerReactComponentEffect as n, unregisterMeasurable as o, registerMeasurable as p, registerBuilderComponent as q, registerDocument as r, scrollDocumentElement as s, typographiesFulfilled as t, unregisterDocument as u, changeElementBoxModels as v, changeDocumentElementSize as w, handleWheel as x, handlePointerMove as y, setIsInBuilder as z };
212
212
  //# sourceMappingURL=actions.es.js.map
@@ -26,15 +26,15 @@ require("./box-models.cjs.js");
26
26
  require("css-box-model");
27
27
  require("./actions.cjs.js");
28
28
  require("use-sync-external-store/shim/with-selector");
29
+ require("next/dynamic");
29
30
  require("./react-page.cjs.js");
30
31
  require("redux");
31
32
  require("redux-thunk");
32
33
  require("./control.cjs.js");
33
- require("next/dynamic");
34
- require("slate");
35
- require("./types.cjs.js");
36
34
  require("./text-input.cjs.js");
37
35
  require("./combobox.cjs.js");
36
+ require("slate");
37
+ require("./types.cjs.js");
38
38
  require("color");
39
39
  require("scroll-into-view-if-needed");
40
40
  require("react-dom");
@@ -55,6 +55,8 @@ require("@popmotion/popcorn");
55
55
  require("formik");
56
56
  require("next/image");
57
57
  require("./placeholders.cjs.js");
58
+ require("./next-version.cjs.js");
59
+ require("next/package.json");
58
60
  require("./index.cjs3.js");
59
61
  require("polished");
60
62
  require("slate-hotkeys");
@@ -1 +1 @@
1
- {"version":3,"file":"components.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"components.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -24,15 +24,15 @@ import "./box-models.es.js";
24
24
  import "css-box-model";
25
25
  import "./actions.es.js";
26
26
  import "use-sync-external-store/shim/with-selector";
27
+ import "next/dynamic";
27
28
  import "./react-page.es.js";
28
29
  import "redux";
29
30
  import "redux-thunk";
30
31
  import "./control.es.js";
31
- import "next/dynamic";
32
- import "slate";
33
- import "./types.es.js";
34
32
  import "./text-input.es.js";
35
33
  import "./combobox.es.js";
34
+ import "slate";
35
+ import "./types.es.js";
36
36
  import "color";
37
37
  import "scroll-into-view-if-needed";
38
38
  import "react-dom";
@@ -53,6 +53,8 @@ import "@popmotion/popcorn";
53
53
  import "formik";
54
54
  import "next/image";
55
55
  import "./placeholders.es.js";
56
+ import "./next-version.es.js";
57
+ import "next/package.json";
56
58
  import "./index.es3.js";
57
59
  import "polished";
58
60
  import "slate-hotkeys";
@@ -1 +1 @@
1
- {"version":3,"file":"components.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"components.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -40,6 +40,7 @@ require("use-sync-external-store/shim");
40
40
  var NextImage = require("next/image");
41
41
  var jsxRuntime = require("react/jsx-runtime");
42
42
  var ReactPlayer = require("react-player");
43
+ var nextVersion = require("./next-version.cjs.js");
43
44
  function _interopDefaultLegacy(e) {
44
45
  return e && typeof e === "object" && "default" in e ? e : { "default": e };
45
46
  }
@@ -331,6 +332,7 @@ function BackgroundVideo({
331
332
  })]
332
333
  });
333
334
  }
335
+ const NextLegacyImage = NextImage__default["default"];
334
336
  function getColor(color) {
335
337
  if (color == null)
336
338
  return "black";
@@ -457,11 +459,20 @@ function ImageBackground({
457
459
  overflow: "hidden"
458
460
  }
459
461
  })), {
460
- children: /* @__PURE__ */ jsxRuntime.jsx(NextImage__default["default"], {
462
+ children: nextVersion.major < 13 ? /* @__PURE__ */ jsxRuntime.jsx(NextLegacyImage, {
461
463
  src: publicUrl,
462
464
  layout: "fill",
463
465
  objectPosition: backgroundPosition,
464
466
  objectFit: size
467
+ }) : /* @__PURE__ */ jsxRuntime.jsx(NextImage__default["default"], {
468
+ src: publicUrl,
469
+ alt: "",
470
+ fill: true,
471
+ sizes: "100vw",
472
+ style: {
473
+ objectPosition: backgroundPosition,
474
+ objectFit: size
475
+ }
465
476
  })
466
477
  }))
467
478
  });