@makeswift/runtime 0.2.19 → 0.3.1
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.
- package/dist/Box.cjs.js +35 -70
- package/dist/Box.cjs.js.map +1 -1
- package/dist/Box.es.js +34 -65
- package/dist/Box.es.js.map +1 -1
- package/dist/Button.cjs.js +176 -208
- package/dist/Button.cjs.js.map +1 -1
- package/dist/Button.es.js +177 -208
- package/dist/Button.es.js.map +1 -1
- package/dist/Carousel.cjs.js +227 -249
- package/dist/Carousel.cjs.js.map +1 -1
- package/dist/Carousel.es.js +229 -247
- package/dist/Carousel.es.js.map +1 -1
- package/dist/Countdown.cjs.js +270 -203
- package/dist/Countdown.cjs.js.map +1 -1
- package/dist/Countdown.es.js +273 -202
- package/dist/Countdown.es.js.map +1 -1
- package/dist/Divider.cjs.js +50 -71
- package/dist/Divider.cjs.js.map +1 -1
- package/dist/Divider.es.js +51 -68
- package/dist/Divider.es.js.map +1 -1
- package/dist/Embed.cjs.js +6 -17
- package/dist/Embed.cjs.js.map +1 -1
- package/dist/Embed.es.js +7 -14
- package/dist/Embed.es.js.map +1 -1
- package/dist/Form.cjs.js +723 -553
- package/dist/Form.cjs.js.map +1 -1
- package/dist/Form.es.js +723 -552
- package/dist/Form.es.js.map +1 -1
- package/dist/Image.cjs.js +16 -38
- package/dist/Image.cjs.js.map +1 -1
- package/dist/Image.es.js +17 -38
- package/dist/Image.es.js.map +1 -1
- package/dist/Navigation.cjs.js +318 -224
- package/dist/Navigation.cjs.js.map +1 -1
- package/dist/Navigation.es.js +318 -220
- package/dist/Navigation.es.js.map +1 -1
- package/dist/Root.cjs.js +116 -78
- package/dist/Root.cjs.js.map +1 -1
- package/dist/Root.es.js +99 -77
- package/dist/Root.es.js.map +1 -1
- package/dist/SocialLinks.cjs.js +119 -86
- package/dist/SocialLinks.cjs.js.map +1 -1
- package/dist/SocialLinks.es.js +120 -83
- package/dist/SocialLinks.es.js.map +1 -1
- package/dist/Text.cjs.js +83 -99
- package/dist/Text.cjs.js.map +1 -1
- package/dist/Text.es.js +84 -99
- package/dist/Text.es.js.map +1 -1
- package/dist/Video.cjs.js +8 -19
- package/dist/Video.cjs.js.map +1 -1
- package/dist/Video.es.js +8 -18
- package/dist/Video.es.js.map +1 -1
- package/dist/components.cjs.js +6 -18
- package/dist/components.cjs.js.map +1 -1
- package/dist/components.es.js +5 -8
- package/dist/components.es.js.map +1 -1
- package/dist/controls.es.js +1 -1
- package/dist/grid-item.cjs.js +612 -0
- package/dist/grid-item.cjs.js.map +1 -0
- package/dist/grid-item.es.js +604 -0
- package/dist/grid-item.es.js.map +1 -0
- package/dist/index.cjs.js +594 -275
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.cjs2.js +98 -474
- package/dist/index.cjs2.js.map +1 -1
- package/dist/index.cjs3.js +20 -107
- package/dist/index.cjs3.js.map +1 -1
- package/dist/index.es.js +589 -274
- package/dist/index.es.js.map +1 -1
- package/dist/index.es2.js +99 -473
- package/dist/index.es2.js.map +1 -1
- package/dist/index.es3.js +21 -103
- package/dist/index.es3.js.map +1 -1
- package/dist/next.cjs.js +1 -2
- package/dist/next.cjs.js.map +1 -1
- package/dist/next.es.js +2 -3
- package/dist/next.es.js.map +1 -1
- package/dist/react-builder-preview.cjs.js +1 -2
- package/dist/react-builder-preview.cjs.js.map +1 -1
- package/dist/react-builder-preview.es.js +3 -4
- package/dist/react-builder-preview.es.js.map +1 -1
- package/dist/react.cjs.js +1 -2
- package/dist/react.cjs.js.map +1 -1
- package/dist/react.es.js +1 -2
- package/dist/react.es.js.map +1 -1
- package/dist/slot.cjs.js +41 -6
- package/dist/slot.cjs.js.map +1 -1
- package/dist/slot.es.js +36 -6
- package/dist/slot.es.js.map +1 -1
- package/dist/types/src/components/builtin/Box/Box.d.ts +7 -7
- package/dist/types/src/components/builtin/Box/Box.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Box/components/Placeholder/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Box/register.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Button/Button.d.ts +46 -34
- package/dist/types/src/components/builtin/Button/Button.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Carousel/Carousel.d.ts +5 -5
- package/dist/types/src/components/builtin/Carousel/Carousel.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Carousel/register.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Countdown/Countdown.d.ts +3 -3
- package/dist/types/src/components/builtin/Countdown/Countdown.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Countdown/register.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Divider/Divider.d.ts +3 -3
- package/dist/types/src/components/builtin/Divider/Divider.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Divider/register.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Embed/Embed.d.ts +3 -3
- package/dist/types/src/components/builtin/Embed/Embed.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Form/Form.d.ts +3 -3
- package/dist/types/src/components/builtin/Form/Form.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Form/components/Field/components/Checkbox/index.d.ts +4 -6
- package/dist/types/src/components/builtin/Form/components/Field/components/Checkbox/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Form/components/Field/components/CheckboxTableField/index.d.ts +3 -0
- package/dist/types/src/components/builtin/Form/components/Field/components/CheckboxTableField/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Form/components/Field/components/EmailTableField/index.d.ts +2 -0
- package/dist/types/src/components/builtin/Form/components/Field/components/EmailTableField/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Form/components/Field/components/Input/index.d.ts +3 -7
- package/dist/types/src/components/builtin/Form/components/Field/components/Input/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Form/components/Field/components/Label/index.d.ts +7 -13
- package/dist/types/src/components/builtin/Form/components/Field/components/Label/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Form/components/Field/components/LongTextTableField/index.d.ts +2 -0
- package/dist/types/src/components/builtin/Form/components/Field/components/LongTextTableField/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Form/components/Field/components/MultipleSelectTableField/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Form/components/Field/components/NumberTableField/index.d.ts +2 -0
- package/dist/types/src/components/builtin/Form/components/Field/components/NumberTableField/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Form/components/Field/components/PhoneNumberTableField/index.d.ts +2 -0
- package/dist/types/src/components/builtin/Form/components/Field/components/PhoneNumberTableField/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Form/components/Field/components/PlaceholderTableField/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Form/components/Field/components/RadioButton/index.d.ts +4 -8
- package/dist/types/src/components/builtin/Form/components/Field/components/RadioButton/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Form/components/Field/components/SingleLineTextTableField/index.d.ts +2 -0
- package/dist/types/src/components/builtin/Form/components/Field/components/SingleLineTextTableField/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Form/components/Field/components/SingleSelectTableField/components/TableColumnRadioButtonGroup/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Form/components/Field/components/SingleSelectTableField/components/TableColumnSingleSelect/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Form/components/Field/components/TextArea/index.d.ts +2 -7
- package/dist/types/src/components/builtin/Form/components/Field/components/TextArea/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Form/components/Field/components/URLTableField/index.d.ts +2 -0
- package/dist/types/src/components/builtin/Form/components/Field/components/URLTableField/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Form/components/Field/services/{cssField.d.ts → responsiveField.d.ts} +5 -4
- package/dist/types/src/components/builtin/Form/components/Field/services/responsiveField.d.ts.map +1 -0
- package/dist/types/src/components/builtin/Form/components/Placeholder/index.d.ts +2 -3
- package/dist/types/src/components/builtin/Form/components/Placeholder/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Form/components/Spinner/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Form/register.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Image/Image.d.ts +7 -7
- package/dist/types/src/components/builtin/Image/Image.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Navigation/Navigation.d.ts +3 -3
- package/dist/types/src/components/builtin/Navigation/Navigation.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Navigation/components/DropDownButton/index.d.ts +8 -81
- package/dist/types/src/components/builtin/Navigation/components/DropDownButton/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Navigation/components/LinksPlaceholder/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Navigation/components/MobileMenu/components/MobileDropDownButton/index.d.ts +8 -81
- package/dist/types/src/components/builtin/Navigation/components/MobileMenu/components/MobileDropDownButton/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Navigation/components/MobileMenu/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Navigation/register.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Root/Root.d.ts +1 -2
- package/dist/types/src/components/builtin/Root/Root.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Root/components/Placeholder/index.d.ts +1 -2
- package/dist/types/src/components/builtin/Root/components/Placeholder/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/SocialLinks/SocialLinks.d.ts +3 -3
- package/dist/types/src/components/builtin/SocialLinks/SocialLinks.d.ts.map +1 -1
- package/dist/types/src/components/builtin/SocialLinks/components/SocialLinksPlaceholder/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/SocialLinks/register.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Text/Text.d.ts +3 -3
- package/dist/types/src/components/builtin/Text/Text.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Text/components/RichTextEditor/components/Block/index.d.ts +8 -11
- package/dist/types/src/components/builtin/Text/components/RichTextEditor/components/Block/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Text/components/RichTextEditor/components/Mark/index.d.ts +3 -6
- package/dist/types/src/components/builtin/Text/components/RichTextEditor/components/Mark/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Text/components/RichTextEditor/index.d.ts +1 -1
- package/dist/types/src/components/builtin/Text/components/RichTextEditor/index.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Text/components/RichTextEditor/plugins/Link.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Text/register.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Video/Video.d.ts +4 -4
- package/dist/types/src/components/builtin/Video/Video.d.ts.map +1 -1
- package/dist/types/src/components/builtin/Video/register.d.ts.map +1 -1
- package/dist/types/src/components/hooks/useBackgrounds.d.ts +1 -1
- package/dist/types/src/components/hooks/useBackgrounds.d.ts.map +1 -1
- package/dist/types/src/components/index.d.ts +0 -1
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/components/shared/BackgroundsContainer/components/BackgroundVideo/index.d.ts.map +1 -1
- package/dist/types/src/components/shared/BackgroundsContainer/components/Backgrounds/index.d.ts.map +1 -1
- package/dist/types/src/components/shared/BackgroundsContainer/index.d.ts +255 -4
- package/dist/types/src/components/shared/BackgroundsContainer/index.d.ts.map +1 -1
- package/dist/types/src/components/shared/FallbackComponent/FallbackComponent.d.ts.map +1 -1
- package/dist/types/src/components/shared/GutterContainer/index.d.ts +8 -4
- package/dist/types/src/components/shared/GutterContainer/index.d.ts.map +1 -1
- package/dist/types/src/components/shared/grid-item.d.ts +17 -0
- package/dist/types/src/components/shared/grid-item.d.ts.map +1 -0
- package/dist/types/src/components/utils/responsive-style.d.ts +22 -1
- package/dist/types/src/components/utils/responsive-style.d.ts.map +1 -1
- package/dist/types/src/controls/style.d.ts +5 -65
- package/dist/types/src/controls/style.d.ts.map +1 -1
- package/dist/types/src/css/border-radius.d.ts +20 -0
- package/dist/types/src/css/border-radius.d.ts.map +1 -0
- package/dist/types/src/css/border.d.ts +31 -0
- package/dist/types/src/css/border.d.ts.map +1 -0
- package/dist/types/src/css/length-percentage.d.ts +10 -0
- package/dist/types/src/css/length-percentage.d.ts.map +1 -0
- package/dist/types/src/css/length.d.ts +14 -0
- package/dist/types/src/css/length.d.ts.map +1 -0
- package/dist/types/src/css/margin.d.ts +20 -0
- package/dist/types/src/css/margin.d.ts.map +1 -0
- package/dist/types/src/css/padding.d.ts +20 -0
- package/dist/types/src/css/padding.d.ts.map +1 -0
- package/dist/types/src/next/document.d.ts.map +1 -1
- package/dist/types/src/prop-controllers/descriptors.d.ts +96 -33
- package/dist/types/src/prop-controllers/descriptors.d.ts.map +1 -1
- package/dist/types/src/runtimes/react/controls/style.d.ts.map +1 -1
- package/dist/types/src/runtimes/react/controls.d.ts +10 -2
- package/dist/types/src/runtimes/react/controls.d.ts.map +1 -1
- package/dist/types/src/runtimes/react/use-global-style.d.ts +3 -0
- package/dist/types/src/runtimes/react/use-global-style.d.ts.map +1 -0
- package/dist/useMediaQuery.es.js +1 -1
- package/package.json +2 -4
- package/dist/cssMediaRules.cjs.js +0 -210
- package/dist/cssMediaRules.cjs.js.map +0 -1
- package/dist/cssMediaRules.es.js +0 -201
- package/dist/cssMediaRules.es.js.map +0 -1
- package/dist/index.cjs4.js +0 -18
- package/dist/index.cjs4.js.map +0 -1
- package/dist/index.es4.js +0 -13
- package/dist/index.es4.js.map +0 -1
- package/dist/types/src/components/builtin/Form/components/Field/services/cssField.d.ts.map +0 -1
- package/dist/types/src/components/utils/cssMediaRules.d.ts +0 -69
- package/dist/types/src/components/utils/cssMediaRules.d.ts.map +0 -1
- package/dist/useBoxShadow.cjs.js +0 -78
- package/dist/useBoxShadow.cjs.js.map +0 -1
- package/dist/useBoxShadow.es.js +0 -77
- package/dist/useBoxShadow.es.js.map +0 -1
package/dist/Text.cjs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.cjs.js","sources":["../src/components/hooks/useTypography.ts","../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 type { ColorValue } from '../utils/types'\nimport type { Length as LengthValue } from '../../prop-controllers'\nimport { DeviceOverride } from '../../prop-controllers'\nimport { TYPOGRAPHIES_BY_ID } from '../utils/queries'\nimport { useQuery } from '../../api/react'\n\nexport type TypographyStyleValue = {\n fontFamily?: string\n fontWeight?: number\n fontSize?: LengthValue\n color?: ColorValue\n textAlign?: string\n lineHeight?: number\n letterSpacing?: number\n uppercase?: boolean\n underline?: boolean\n strikethrough?: boolean\n italic?: boolean\n}\n\nexport type TypographyStyle = Array<DeviceOverride<TypographyStyleValue>>\n\nexport type Typography = {\n id: string\n name: string\n style: TypographyStyle\n}\n\nexport function useTypography(\n typographyId: string | null | undefined,\n): Typography | null | undefined {\n const { error, data } = useQuery(TYPOGRAPHIES_BY_ID, {\n skip: typographyId == null,\n variables: { ids: typographyId != null ? [typographyId] : [] },\n })\n\n if (typographyId == null || error != null) return null\n\n return data?.typographies[0] as Typography | null\n}\n","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 { SWATCHES_BY_ID } from '../../../../../../../utils/queries'\nimport { useTypography, TypographyStyle } from '../../../../../../../hooks/useTypography'\nimport { useQuery } from '../../../../../../../../api/react'\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: TypographyStyle\n}\n\nexport type TypographyMarkData = Array<DeviceOverride<TypographyMarkDataValue>>\n\nconst concat = <A extends unknown[], B extends unknown[]>(a: A, b: B) => a.concat(b)\nconst getSwatchId = ({ value: { color } }: any) => color && color.swatchId\nconst getDeviceId = ({ deviceId }: any) => deviceId\n\nconst withColor =\n (swatches: any) =>\n ({ value: { color, ...restOfValue }, ...rest }: any) => ({\n ...rest,\n value: {\n ...restOfValue,\n ...(color\n ? {\n color: {\n swatch: swatches.find((s: any) => s && s.id === color.swatchId),\n alpha: color.alpha,\n },\n }\n : {}),\n },\n })\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: any) => ({\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 && value.id)\n\n const swatchIds = [\n (typography && typography.style.map(getSwatchId)) || [],\n (value && value.style.map(getSwatchId)) || [],\n ]\n .reduce(concat)\n .filter(Boolean)\n\n const { error: colorError, data: colorData = {} } = useQuery(SWATCHES_BY_ID, {\n skip: swatchIds == null || swatchIds.length === 0,\n variables: { ids: swatchIds },\n })\n\n const { swatches = [] } = colorData\n\n if (colorError != null) return null\n\n return overrideTypographyStyle(\n (typography && typography.style.map(withColor(swatches))) || [],\n (value && value.style.map(withColor(swatches))) || [],\n )\n}\n","import { ComponentPropsWithoutRef } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport useTypographyMark, {\n TypographyMarkValue,\n TypographyMarkData,\n overrideTypographyStyle,\n TypographyMarkDataValue,\n} from './hooks/useTypographyMark'\nimport { cssMediaRules } from '../../../../../../utils/cssMediaRules'\nimport { colorToString } from '../../../../../../utils/colorToString'\nimport { shallowMergeFallbacks } from '../../../../../../utils/devices'\n\nexport type { TypographyMarkValue }\nexport { overrideTypographyStyle }\n\nconst Span = styled.span<{ typographyStyle: TypographyMarkData | null | undefined }>`\n ${p =>\n cssMediaRules(\n [p.typographyStyle] as const,\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 ]) => css`\n ${color == null\n ? ''\n : css`\n color: ${colorToString(color)};\n `}\n\n ${fontFamily == null\n ? ''\n : css`\n font-family: '${fontFamily}';\n `}\n\n ${fontSize == null || fontSize.value == null || fontSize.unit == null\n ? ''\n : css`\n font-size: ${`${fontSize.value}${fontSize.unit}`};\n `}\n\n ${fontWeight == null\n ? ''\n : css`\n font-weight: ${fontWeight};\n `}\n\n ${lineHeight == null\n ? ''\n : css`\n line-height: ${lineHeight};\n `}\n\n ${letterSpacing == null\n ? ''\n : css`\n letter-spacing: ${letterSpacing / 10}em;\n `}\n\n ${underline == null && strikethrough == null\n ? ''\n : css`\n text-decoration: ${[\n Boolean(underline) && 'underline',\n Boolean(strikethrough) && 'line-through',\n ]\n .filter(Boolean)\n .join(' ')};\n `}\n\n ${uppercase == null\n ? ''\n : css`\n text-transform: ${uppercase === true ? 'uppercase' : 'initial'};\n `}\n\n ${italic == null\n ? ''\n : css`\n font-style: ${italic === true ? 'italic' : 'initial'};\n `}\n `,\n shallowMergeFallbacks,\n )}\n`\n\ntype BaseProps = { value: TypographyMarkValue }\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<typeof Span>, keyof BaseProps>\n\nexport default function Mark({ value, ...restOfProps }: Props): JSX.Element {\n const typographyStyle = useTypographyMark(value)\n\n return <Span {...restOfProps} typographyStyle={typographyStyle} />\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 { forwardRef, ElementType, ComponentPropsWithoutRef } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { cssMediaRules } from '../../../../../../utils/cssMediaRules'\nimport type { ResponsiveValue } from '../../../../../../../prop-controllers'\n\ntype StyledBlockProps = {\n textAlign?: ResponsiveValue<'left' | 'center' | 'right' | 'justify'>\n as?: ElementType\n}\n\nconst StyledBlock = styled.div<StyledBlockProps>`\n margin: 0;\n ${p =>\n cssMediaRules([p.textAlign] as const, ([textAlign]) =>\n textAlign == null\n ? css``\n : css`\n text-align: ${textAlign};\n `,\n )}\n\n ${p =>\n p.as === 'blockquote'\n ? css`\n padding: 0.5em 10px;\n font-size: 1.25em;\n font-weight: 300;\n border-left: 5px solid rgba(0, 0, 0, 0.1);\n `\n : ''}\n`\n\ntype Props = ComponentPropsWithoutRef<typeof StyledBlock>\n\nexport default forwardRef<HTMLDivElement, Props>(function Block(\n { textAlign, ...restOfProps }: Props,\n ref,\n) {\n return <StyledBlock {...restOfProps} ref={ref} textAlign={textAlign} />\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 { Plugin } from 'slate-react'\nimport styled from 'styled-components'\n\nimport { Link } from '../../../../../shared/Link'\n\nconst StyledLink = styled(Link)`\n text-decoration: none;\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'\nimport styled from 'styled-components'\n\nimport DeviceOverridesMarks from './plugins/DeviceOverridesMarks'\nimport DeviceOverridesBlocks from './plugins/DeviceOverridesBlocks'\nimport Link from './plugins/Link'\nimport Inlines from './plugins/Inlines'\n\nexport { overrideTypographyStyle } from './components/Mark'\n\ntype Props = ComponentPropsWithoutRef<typeof SlateEditor>\n\nexport const RichTextEditor = styled(\n forwardRef<SlateEditor, Props>(function RichTextEditor(\n { placeholder = 'Write some text...', ...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 ref={ref}\n autoFocus={false}\n plugins={plugins}\n placeholder={placeholder}\n />\n )\n }),\n)`\n ul,\n ol {\n margin: 0;\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 styled from 'styled-components'\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 MarginValue,\n RichTextDescriptor,\n RichTextValue,\n WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { cssMargin, cssWidth } from '../../utils/cssMediaRules'\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'\n\ntype Props = {\n id?: ElementIDValue\n text?: RichTextValue\n width?: WidthValue\n margin?: MarginValue\n}\n\nconst StyledRichTextEditor = styled(RichTextEditor).withConfig({\n shouldForwardProp: prop => !['width', 'margin'].includes(prop.toString()),\n})<{ width: Props['width']; margin: Props['margin'] }>`\n ${cssWidth()}\n ${cssMargin()}\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 <StyledRichTextEditor\n // @ts-expect-error: types don't allow for 'id' prop even though it's used.\n id={id}\n ref={setEditor}\n width={width}\n readOnly={!isInBuilder}\n margin={margin}\n value={value}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n />\n )\n})\n\nexport default Text\n"],"names":["useQuery","TYPOGRAPHIES_BY_ID","findDeviceOverride","SWATCHES_BY_ID","Span","styled","span","p","cssMediaRules","typographyStyle","color","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","uppercase","underline","strikethrough","italic","css","colorToString","value","unit","Boolean","filter","join","shallowMergeFallbacks","restOfProps","useTypographyMark","TYPOGRAPHY_TYPE","renderMark","mark","children","_editor","next","type","data","get","StyledBlock","div","textAlign","as","forwardRef","ref","renderBlock","props","node","attributes","blockProps","StyledLink","Link","renderInline","toJS","RichTextEditor","placeholder","plugins","useMemo","Lists","Inlines","DeviceOverridesBlocks","DeviceOverridesMarks","SlateEditor","WebkitUserModify","undefined","StyledRichTextEditor","withConfig","shouldForwardProp","prop","includes","toString","cssWidth","cssMargin","defaultText","document","nodes","object","COMMIT_DEBOUNCE_DELAY","Text","id","text","width","margin","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/hooks/useTypography.ts","../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 type { ColorValue } from '../utils/types'\nimport type { Length as LengthValue } from '../../prop-controllers'\nimport { DeviceOverride } from '../../prop-controllers'\nimport { TYPOGRAPHIES_BY_ID } from '../utils/queries'\nimport { useQuery } from '../../api/react'\n\nexport type TypographyStyleValue = {\n fontFamily?: string\n fontWeight?: number\n fontSize?: LengthValue\n color?: ColorValue\n textAlign?: string\n lineHeight?: number\n letterSpacing?: number\n uppercase?: boolean\n underline?: boolean\n strikethrough?: boolean\n italic?: boolean\n}\n\nexport type TypographyStyle = Array<DeviceOverride<TypographyStyleValue>>\n\nexport type Typography = {\n id: string\n name: string\n style: TypographyStyle\n}\n\nexport function useTypography(\n typographyId: string | null | undefined,\n): Typography | null | undefined {\n const { error, data } = useQuery(TYPOGRAPHIES_BY_ID, {\n skip: typographyId == null,\n variables: { ids: typographyId != null ? [typographyId] : [] },\n })\n\n if (typographyId == null || error != null) return null\n\n return data?.typographies[0] as Typography | null\n}\n","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 { SWATCHES_BY_ID } from '../../../../../../../utils/queries'\nimport { useTypography, TypographyStyle } from '../../../../../../../hooks/useTypography'\nimport { useQuery } from '../../../../../../../../api/react'\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: TypographyStyle\n}\n\nexport type TypographyMarkData = Array<DeviceOverride<TypographyMarkDataValue>>\n\nconst concat = <A extends unknown[], B extends unknown[]>(a: A, b: B) => a.concat(b)\nconst getSwatchId = ({ value: { color } }: any) => color && color.swatchId\nconst getDeviceId = ({ deviceId }: any) => deviceId\n\nconst withColor =\n (swatches: any) =>\n ({ value: { color, ...restOfValue }, ...rest }: any) => ({\n ...rest,\n value: {\n ...restOfValue,\n ...(color\n ? {\n color: {\n swatch: swatches.find((s: any) => s && s.id === color.swatchId),\n alpha: color.alpha,\n },\n }\n : {}),\n },\n })\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: any) => ({\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 && value.id)\n\n const swatchIds = [\n (typography && typography.style.map(getSwatchId)) || [],\n (value && value.style.map(getSwatchId)) || [],\n ]\n .reduce(concat)\n .filter(Boolean)\n\n const { error: colorError, data: colorData = {} } = useQuery(SWATCHES_BY_ID, {\n skip: swatchIds == null || swatchIds.length === 0,\n variables: { ids: swatchIds },\n })\n\n const { swatches = [] } = colorData\n\n if (colorError != null) return null\n\n return overrideTypographyStyle(\n (typography && typography.style.map(withColor(swatches))) || [],\n (value && value.style.map(withColor(swatches))) || [],\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":["useQuery","TYPOGRAPHIES_BY_ID","findDeviceOverride","SWATCHES_BY_ID","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
|
@@ -30,17 +30,16 @@ var __objRest = (source, exclude) => {
|
|
|
30
30
|
return target;
|
|
31
31
|
};
|
|
32
32
|
import { forwardRef, useMemo, useState, useImperativeHandle, useEffect, useRef, useCallback } from "react";
|
|
33
|
-
import styled, { css } from "styled-components";
|
|
34
33
|
import { Value } from "slate";
|
|
35
34
|
import Hotkeys from "slate-hotkeys";
|
|
36
35
|
import { isHotkey } from "is-hotkey";
|
|
37
|
-
import { c as cssMediaRules, a as cssWidth, b as cssMargin } from "./cssMediaRules.es.js";
|
|
38
36
|
import { g as getBox } from "./box-models.es.js";
|
|
39
37
|
import { Editor } from "slate-react";
|
|
40
38
|
import Lists from "@convertkit/slate-lists";
|
|
41
|
-
import {
|
|
39
|
+
import { B as useQuery, N as TYPOGRAPHIES_BY_ID, O as SWATCHES_BY_ID, J as findDeviceOverride, q as useStyle, r as responsiveStyle, Q as shallowMergeFallbacks, v as colorToString, u as useIsInBuilder } from "./index.es.js";
|
|
40
|
+
import { cx } from "@emotion/css";
|
|
42
41
|
import { jsx } from "react/jsx-runtime";
|
|
43
|
-
import { L as Link } from "./index.
|
|
42
|
+
import { L as Link } from "./index.es2.js";
|
|
44
43
|
import "css-box-model";
|
|
45
44
|
import "./actions.es.js";
|
|
46
45
|
import "use-sync-external-store/shim/with-selector";
|
|
@@ -55,7 +54,6 @@ import "@apollo/client/link/batch-http";
|
|
|
55
54
|
import "./graphql.es.js";
|
|
56
55
|
import "./text-input.es.js";
|
|
57
56
|
import "./combobox.es.js";
|
|
58
|
-
import "@emotion/css";
|
|
59
57
|
import "color";
|
|
60
58
|
import "scroll-into-view-if-needed";
|
|
61
59
|
import "react-dom";
|
|
@@ -115,65 +113,47 @@ function useTypographyMark(value) {
|
|
|
115
113
|
return null;
|
|
116
114
|
return overrideTypographyStyle(typography && typography.style.map(withColor(swatches)) || [], value && value.style.map(withColor(swatches)) || []);
|
|
117
115
|
}
|
|
118
|
-
const Span = styled.span`
|
|
119
|
-
${(p) => cssMediaRules([p.typographyStyle], ([{
|
|
120
|
-
color,
|
|
121
|
-
fontFamily,
|
|
122
|
-
fontSize,
|
|
123
|
-
fontWeight,
|
|
124
|
-
lineHeight,
|
|
125
|
-
letterSpacing,
|
|
126
|
-
uppercase,
|
|
127
|
-
underline,
|
|
128
|
-
strikethrough,
|
|
129
|
-
italic
|
|
130
|
-
} = {}]) => css`
|
|
131
|
-
${color == null ? "" : css`
|
|
132
|
-
color: ${colorToString(color)};
|
|
133
|
-
`}
|
|
134
|
-
|
|
135
|
-
${fontFamily == null ? "" : css`
|
|
136
|
-
font-family: '${fontFamily}';
|
|
137
|
-
`}
|
|
138
|
-
|
|
139
|
-
${fontSize == null || fontSize.value == null || fontSize.unit == null ? "" : css`
|
|
140
|
-
font-size: ${`${fontSize.value}${fontSize.unit}`};
|
|
141
|
-
`}
|
|
142
|
-
|
|
143
|
-
${fontWeight == null ? "" : css`
|
|
144
|
-
font-weight: ${fontWeight};
|
|
145
|
-
`}
|
|
146
|
-
|
|
147
|
-
${lineHeight == null ? "" : css`
|
|
148
|
-
line-height: ${lineHeight};
|
|
149
|
-
`}
|
|
150
|
-
|
|
151
|
-
${letterSpacing == null ? "" : css`
|
|
152
|
-
letter-spacing: ${letterSpacing / 10}em;
|
|
153
|
-
`}
|
|
154
|
-
|
|
155
|
-
${underline == null && strikethrough == null ? "" : css`
|
|
156
|
-
text-decoration: ${[Boolean(underline) && "underline", Boolean(strikethrough) && "line-through"].filter(Boolean).join(" ")};
|
|
157
|
-
`}
|
|
158
|
-
|
|
159
|
-
${uppercase == null ? "" : css`
|
|
160
|
-
text-transform: ${uppercase === true ? "uppercase" : "initial"};
|
|
161
|
-
`}
|
|
162
|
-
|
|
163
|
-
${italic == null ? "" : css`
|
|
164
|
-
font-style: ${italic === true ? "italic" : "initial"};
|
|
165
|
-
`}
|
|
166
|
-
`, shallowMergeFallbacks)}
|
|
167
|
-
`;
|
|
168
116
|
function Mark(_a) {
|
|
169
117
|
var _b = _a, {
|
|
170
|
-
value
|
|
118
|
+
value,
|
|
119
|
+
className
|
|
171
120
|
} = _b, restOfProps = __objRest(_b, [
|
|
172
|
-
"value"
|
|
121
|
+
"value",
|
|
122
|
+
"className"
|
|
173
123
|
]);
|
|
174
124
|
const typographyStyle = useTypographyMark(value);
|
|
175
|
-
|
|
176
|
-
|
|
125
|
+
const typographyClassName = useStyle(responsiveStyle([typographyStyle], ([{
|
|
126
|
+
color,
|
|
127
|
+
fontFamily,
|
|
128
|
+
fontSize,
|
|
129
|
+
fontWeight,
|
|
130
|
+
lineHeight,
|
|
131
|
+
letterSpacing,
|
|
132
|
+
uppercase,
|
|
133
|
+
underline,
|
|
134
|
+
strikethrough,
|
|
135
|
+
italic
|
|
136
|
+
} = {}]) => __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, color == null ? {} : {
|
|
137
|
+
color: colorToString(color)
|
|
138
|
+
}), fontFamily == null ? {} : {
|
|
139
|
+
fontFamily
|
|
140
|
+
}), fontSize == null || fontSize.value == null || fontSize.unit == null ? {} : {
|
|
141
|
+
fontSize: `${fontSize.value}${fontSize.unit}`
|
|
142
|
+
}), fontWeight == null ? {} : {
|
|
143
|
+
fontWeight
|
|
144
|
+
}), lineHeight == null ? {} : {
|
|
145
|
+
lineHeight
|
|
146
|
+
}), letterSpacing == null ? {} : {
|
|
147
|
+
letterSpacing: `${letterSpacing / 10}em`
|
|
148
|
+
}), uppercase == null ? {} : {
|
|
149
|
+
textTransform: uppercase === true ? "uppercase" : "initial"
|
|
150
|
+
}), underline == null && strikethrough == null ? {} : {
|
|
151
|
+
textDecoration: [Boolean(underline) && "underline", Boolean(strikethrough) && "line-through"].filter(Boolean).join(" ")
|
|
152
|
+
}), italic == null ? {} : {
|
|
153
|
+
fontStyle: italic === true ? "italic" : "initial"
|
|
154
|
+
}), shallowMergeFallbacks));
|
|
155
|
+
return /* @__PURE__ */ jsx("span", __spreadProps(__spreadValues({}, restOfProps), {
|
|
156
|
+
className: cx(typographyClassName, className)
|
|
177
157
|
}));
|
|
178
158
|
}
|
|
179
159
|
const TYPOGRAPHY_TYPE = "typography";
|
|
@@ -193,28 +173,29 @@ function DeviceOverridesMarksPlugin() {
|
|
|
193
173
|
}
|
|
194
174
|
};
|
|
195
175
|
}
|
|
196
|
-
const StyledBlock = styled.div`
|
|
197
|
-
margin: 0;
|
|
198
|
-
${(p) => cssMediaRules([p.textAlign], ([textAlign]) => textAlign == null ? css`` : css`
|
|
199
|
-
text-align: ${textAlign};
|
|
200
|
-
`)}
|
|
201
|
-
|
|
202
|
-
${(p) => p.as === "blockquote" ? css`
|
|
203
|
-
padding: 0.5em 10px;
|
|
204
|
-
font-size: 1.25em;
|
|
205
|
-
font-weight: 300;
|
|
206
|
-
border-left: 5px solid rgba(0, 0, 0, 0.1);
|
|
207
|
-
` : ""}
|
|
208
|
-
`;
|
|
209
176
|
var Block = forwardRef(function Block2(_c, ref) {
|
|
210
177
|
var _d = _c, {
|
|
211
|
-
textAlign
|
|
178
|
+
textAlign,
|
|
179
|
+
className,
|
|
180
|
+
as
|
|
212
181
|
} = _d, restOfProps = __objRest(_d, [
|
|
213
|
-
"textAlign"
|
|
182
|
+
"textAlign",
|
|
183
|
+
"className",
|
|
184
|
+
"as"
|
|
214
185
|
]);
|
|
215
|
-
|
|
186
|
+
const Component = as != null ? as : "div";
|
|
187
|
+
return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({}, restOfProps), {
|
|
216
188
|
ref,
|
|
217
|
-
|
|
189
|
+
className: cx(useStyle({
|
|
190
|
+
margin: 0
|
|
191
|
+
}), useStyle(responsiveStyle([textAlign], ([textAlign2 = "left"]) => ({
|
|
192
|
+
textAlign: textAlign2
|
|
193
|
+
}))), useStyle(as === "blockquote" ? {
|
|
194
|
+
padding: "0.5em 10px",
|
|
195
|
+
fontSize: "1.25em",
|
|
196
|
+
fontWeight: "300",
|
|
197
|
+
borderLeft: "5px solid rgba(0, 0, 0, 0.1)"
|
|
198
|
+
} : {}), className)
|
|
218
199
|
}));
|
|
219
200
|
});
|
|
220
201
|
function DeviceOverridesBlockPlugin() {
|
|
@@ -275,9 +256,18 @@ function DeviceOverridesBlockPlugin() {
|
|
|
275
256
|
}
|
|
276
257
|
};
|
|
277
258
|
}
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
259
|
+
function StyledLink(_e) {
|
|
260
|
+
var _f = _e, {
|
|
261
|
+
className
|
|
262
|
+
} = _f, restOfProps = __objRest(_f, [
|
|
263
|
+
"className"
|
|
264
|
+
]);
|
|
265
|
+
return /* @__PURE__ */ jsx(Link, __spreadProps(__spreadValues({}, restOfProps), {
|
|
266
|
+
className: cx(useStyle({
|
|
267
|
+
textDecoration: "none"
|
|
268
|
+
}), className)
|
|
269
|
+
}));
|
|
270
|
+
}
|
|
281
271
|
function LinkPlugin() {
|
|
282
272
|
return {
|
|
283
273
|
renderInline(props, _editor, next) {
|
|
@@ -334,34 +324,30 @@ function Inlines() {
|
|
|
334
324
|
}
|
|
335
325
|
};
|
|
336
326
|
}
|
|
337
|
-
const RichTextEditor =
|
|
338
|
-
var
|
|
339
|
-
placeholder = "Write some text..."
|
|
340
|
-
|
|
341
|
-
|
|
327
|
+
const RichTextEditor = forwardRef(function RichTextEditor2(_g, ref) {
|
|
328
|
+
var _h = _g, {
|
|
329
|
+
placeholder = "Write some text...",
|
|
330
|
+
className
|
|
331
|
+
} = _h, restOfProps = __objRest(_h, [
|
|
332
|
+
"placeholder",
|
|
333
|
+
"className"
|
|
342
334
|
]);
|
|
343
335
|
const plugins = useMemo(() => [Lists(), LinkPlugin(), Inlines(), DeviceOverridesBlockPlugin(), DeviceOverridesMarksPlugin()], []);
|
|
344
336
|
return /* @__PURE__ */ jsx(Editor, __spreadProps(__spreadValues({}, restOfProps), {
|
|
345
337
|
style: {
|
|
346
338
|
WebkitUserModify: void 0
|
|
347
339
|
},
|
|
340
|
+
className: cx(useStyle({
|
|
341
|
+
"ul, ol": {
|
|
342
|
+
margin: 0
|
|
343
|
+
}
|
|
344
|
+
}), className),
|
|
348
345
|
ref,
|
|
349
346
|
autoFocus: false,
|
|
350
347
|
plugins,
|
|
351
348
|
placeholder
|
|
352
349
|
}));
|
|
353
|
-
})
|
|
354
|
-
ul,
|
|
355
|
-
ol {
|
|
356
|
-
margin: 0;
|
|
357
|
-
}
|
|
358
|
-
`;
|
|
359
|
-
const StyledRichTextEditor = styled(RichTextEditor).withConfig({
|
|
360
|
-
shouldForwardProp: (prop) => !["width", "margin"].includes(prop.toString())
|
|
361
|
-
})`
|
|
362
|
-
${cssWidth()}
|
|
363
|
-
${cssMargin()}
|
|
364
|
-
`;
|
|
350
|
+
});
|
|
365
351
|
const defaultText = {
|
|
366
352
|
document: {
|
|
367
353
|
nodes: [{
|
|
@@ -457,12 +443,11 @@ const Text = forwardRef(function Text2({
|
|
|
457
443
|
editor2.select(selection);
|
|
458
444
|
}, []);
|
|
459
445
|
const isInBuilder = useIsInBuilder();
|
|
460
|
-
return /* @__PURE__ */ jsx(
|
|
446
|
+
return /* @__PURE__ */ jsx(RichTextEditor, {
|
|
461
447
|
id,
|
|
462
448
|
ref: setEditor,
|
|
463
|
-
width,
|
|
449
|
+
className: cx(width, margin),
|
|
464
450
|
readOnly: !isInBuilder,
|
|
465
|
-
margin,
|
|
466
451
|
value,
|
|
467
452
|
onChange: handleChange,
|
|
468
453
|
onFocus: handleFocus,
|
package/dist/Text.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.es.js","sources":["../src/components/hooks/useTypography.ts","../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 type { ColorValue } from '../utils/types'\nimport type { Length as LengthValue } from '../../prop-controllers'\nimport { DeviceOverride } from '../../prop-controllers'\nimport { TYPOGRAPHIES_BY_ID } from '../utils/queries'\nimport { useQuery } from '../../api/react'\n\nexport type TypographyStyleValue = {\n fontFamily?: string\n fontWeight?: number\n fontSize?: LengthValue\n color?: ColorValue\n textAlign?: string\n lineHeight?: number\n letterSpacing?: number\n uppercase?: boolean\n underline?: boolean\n strikethrough?: boolean\n italic?: boolean\n}\n\nexport type TypographyStyle = Array<DeviceOverride<TypographyStyleValue>>\n\nexport type Typography = {\n id: string\n name: string\n style: TypographyStyle\n}\n\nexport function useTypography(\n typographyId: string | null | undefined,\n): Typography | null | undefined {\n const { error, data } = useQuery(TYPOGRAPHIES_BY_ID, {\n skip: typographyId == null,\n variables: { ids: typographyId != null ? [typographyId] : [] },\n })\n\n if (typographyId == null || error != null) return null\n\n return data?.typographies[0] as Typography | null\n}\n","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 { SWATCHES_BY_ID } from '../../../../../../../utils/queries'\nimport { useTypography, TypographyStyle } from '../../../../../../../hooks/useTypography'\nimport { useQuery } from '../../../../../../../../api/react'\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: TypographyStyle\n}\n\nexport type TypographyMarkData = Array<DeviceOverride<TypographyMarkDataValue>>\n\nconst concat = <A extends unknown[], B extends unknown[]>(a: A, b: B) => a.concat(b)\nconst getSwatchId = ({ value: { color } }: any) => color && color.swatchId\nconst getDeviceId = ({ deviceId }: any) => deviceId\n\nconst withColor =\n (swatches: any) =>\n ({ value: { color, ...restOfValue }, ...rest }: any) => ({\n ...rest,\n value: {\n ...restOfValue,\n ...(color\n ? {\n color: {\n swatch: swatches.find((s: any) => s && s.id === color.swatchId),\n alpha: color.alpha,\n },\n }\n : {}),\n },\n })\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: any) => ({\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 && value.id)\n\n const swatchIds = [\n (typography && typography.style.map(getSwatchId)) || [],\n (value && value.style.map(getSwatchId)) || [],\n ]\n .reduce(concat)\n .filter(Boolean)\n\n const { error: colorError, data: colorData = {} } = useQuery(SWATCHES_BY_ID, {\n skip: swatchIds == null || swatchIds.length === 0,\n variables: { ids: swatchIds },\n })\n\n const { swatches = [] } = colorData\n\n if (colorError != null) return null\n\n return overrideTypographyStyle(\n (typography && typography.style.map(withColor(swatches))) || [],\n (value && value.style.map(withColor(swatches))) || [],\n )\n}\n","import { ComponentPropsWithoutRef } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport useTypographyMark, {\n TypographyMarkValue,\n TypographyMarkData,\n overrideTypographyStyle,\n TypographyMarkDataValue,\n} from './hooks/useTypographyMark'\nimport { cssMediaRules } from '../../../../../../utils/cssMediaRules'\nimport { colorToString } from '../../../../../../utils/colorToString'\nimport { shallowMergeFallbacks } from '../../../../../../utils/devices'\n\nexport type { TypographyMarkValue }\nexport { overrideTypographyStyle }\n\nconst Span = styled.span<{ typographyStyle: TypographyMarkData | null | undefined }>`\n ${p =>\n cssMediaRules(\n [p.typographyStyle] as const,\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 ]) => css`\n ${color == null\n ? ''\n : css`\n color: ${colorToString(color)};\n `}\n\n ${fontFamily == null\n ? ''\n : css`\n font-family: '${fontFamily}';\n `}\n\n ${fontSize == null || fontSize.value == null || fontSize.unit == null\n ? ''\n : css`\n font-size: ${`${fontSize.value}${fontSize.unit}`};\n `}\n\n ${fontWeight == null\n ? ''\n : css`\n font-weight: ${fontWeight};\n `}\n\n ${lineHeight == null\n ? ''\n : css`\n line-height: ${lineHeight};\n `}\n\n ${letterSpacing == null\n ? ''\n : css`\n letter-spacing: ${letterSpacing / 10}em;\n `}\n\n ${underline == null && strikethrough == null\n ? ''\n : css`\n text-decoration: ${[\n Boolean(underline) && 'underline',\n Boolean(strikethrough) && 'line-through',\n ]\n .filter(Boolean)\n .join(' ')};\n `}\n\n ${uppercase == null\n ? ''\n : css`\n text-transform: ${uppercase === true ? 'uppercase' : 'initial'};\n `}\n\n ${italic == null\n ? ''\n : css`\n font-style: ${italic === true ? 'italic' : 'initial'};\n `}\n `,\n shallowMergeFallbacks,\n )}\n`\n\ntype BaseProps = { value: TypographyMarkValue }\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<typeof Span>, keyof BaseProps>\n\nexport default function Mark({ value, ...restOfProps }: Props): JSX.Element {\n const typographyStyle = useTypographyMark(value)\n\n return <Span {...restOfProps} typographyStyle={typographyStyle} />\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 { forwardRef, ElementType, ComponentPropsWithoutRef } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { cssMediaRules } from '../../../../../../utils/cssMediaRules'\nimport type { ResponsiveValue } from '../../../../../../../prop-controllers'\n\ntype StyledBlockProps = {\n textAlign?: ResponsiveValue<'left' | 'center' | 'right' | 'justify'>\n as?: ElementType\n}\n\nconst StyledBlock = styled.div<StyledBlockProps>`\n margin: 0;\n ${p =>\n cssMediaRules([p.textAlign] as const, ([textAlign]) =>\n textAlign == null\n ? css``\n : css`\n text-align: ${textAlign};\n `,\n )}\n\n ${p =>\n p.as === 'blockquote'\n ? css`\n padding: 0.5em 10px;\n font-size: 1.25em;\n font-weight: 300;\n border-left: 5px solid rgba(0, 0, 0, 0.1);\n `\n : ''}\n`\n\ntype Props = ComponentPropsWithoutRef<typeof StyledBlock>\n\nexport default forwardRef<HTMLDivElement, Props>(function Block(\n { textAlign, ...restOfProps }: Props,\n ref,\n) {\n return <StyledBlock {...restOfProps} ref={ref} textAlign={textAlign} />\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 { Plugin } from 'slate-react'\nimport styled from 'styled-components'\n\nimport { Link } from '../../../../../shared/Link'\n\nconst StyledLink = styled(Link)`\n text-decoration: none;\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'\nimport styled from 'styled-components'\n\nimport DeviceOverridesMarks from './plugins/DeviceOverridesMarks'\nimport DeviceOverridesBlocks from './plugins/DeviceOverridesBlocks'\nimport Link from './plugins/Link'\nimport Inlines from './plugins/Inlines'\n\nexport { overrideTypographyStyle } from './components/Mark'\n\ntype Props = ComponentPropsWithoutRef<typeof SlateEditor>\n\nexport const RichTextEditor = styled(\n forwardRef<SlateEditor, Props>(function RichTextEditor(\n { placeholder = 'Write some text...', ...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 ref={ref}\n autoFocus={false}\n plugins={plugins}\n placeholder={placeholder}\n />\n )\n }),\n)`\n ul,\n ol {\n margin: 0;\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 styled from 'styled-components'\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 MarginValue,\n RichTextDescriptor,\n RichTextValue,\n WidthValue,\n} from '../../../prop-controllers/descriptors'\nimport { cssMargin, cssWidth } from '../../utils/cssMediaRules'\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'\n\ntype Props = {\n id?: ElementIDValue\n text?: RichTextValue\n width?: WidthValue\n margin?: MarginValue\n}\n\nconst StyledRichTextEditor = styled(RichTextEditor).withConfig({\n shouldForwardProp: prop => !['width', 'margin'].includes(prop.toString()),\n})<{ width: Props['width']; margin: Props['margin'] }>`\n ${cssWidth()}\n ${cssMargin()}\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 <StyledRichTextEditor\n // @ts-expect-error: types don't allow for 'id' prop even though it's used.\n id={id}\n ref={setEditor}\n width={width}\n readOnly={!isInBuilder}\n margin={margin}\n value={value}\n onChange={handleChange}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onBlur={handleBlur}\n />\n )\n})\n\nexport default Text\n"],"names":["Span","styled","span","p","cssMediaRules","typographyStyle","color","fontFamily","fontSize","fontWeight","lineHeight","letterSpacing","uppercase","underline","strikethrough","italic","css","colorToString","value","unit","Boolean","filter","join","shallowMergeFallbacks","restOfProps","useTypographyMark","TYPOGRAPHY_TYPE","renderMark","mark","children","_editor","next","type","data","get","StyledBlock","div","textAlign","as","forwardRef","ref","renderBlock","props","node","attributes","blockProps","StyledLink","Link","renderInline","toJS","RichTextEditor","placeholder","plugins","useMemo","Lists","Inlines","DeviceOverridesBlocks","DeviceOverridesMarks","SlateEditor","WebkitUserModify","undefined","StyledRichTextEditor","withConfig","shouldForwardProp","prop","includes","toString","cssWidth","cssMargin","defaultText","document","nodes","object","COMMIT_DEBOUNCE_DELAY","Text","id","text","width","margin","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/hooks/useTypography.ts","../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 type { ColorValue } from '../utils/types'\nimport type { Length as LengthValue } from '../../prop-controllers'\nimport { DeviceOverride } from '../../prop-controllers'\nimport { TYPOGRAPHIES_BY_ID } from '../utils/queries'\nimport { useQuery } from '../../api/react'\n\nexport type TypographyStyleValue = {\n fontFamily?: string\n fontWeight?: number\n fontSize?: LengthValue\n color?: ColorValue\n textAlign?: string\n lineHeight?: number\n letterSpacing?: number\n uppercase?: boolean\n underline?: boolean\n strikethrough?: boolean\n italic?: boolean\n}\n\nexport type TypographyStyle = Array<DeviceOverride<TypographyStyleValue>>\n\nexport type Typography = {\n id: string\n name: string\n style: TypographyStyle\n}\n\nexport function useTypography(\n typographyId: string | null | undefined,\n): Typography | null | undefined {\n const { error, data } = useQuery(TYPOGRAPHIES_BY_ID, {\n skip: typographyId == null,\n variables: { ids: typographyId != null ? [typographyId] : [] },\n })\n\n if (typographyId == null || error != null) return null\n\n return data?.typographies[0] as Typography | null\n}\n","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 { SWATCHES_BY_ID } from '../../../../../../../utils/queries'\nimport { useTypography, TypographyStyle } from '../../../../../../../hooks/useTypography'\nimport { useQuery } from '../../../../../../../../api/react'\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: TypographyStyle\n}\n\nexport type TypographyMarkData = Array<DeviceOverride<TypographyMarkDataValue>>\n\nconst concat = <A extends unknown[], B extends unknown[]>(a: A, b: B) => a.concat(b)\nconst getSwatchId = ({ value: { color } }: any) => color && color.swatchId\nconst getDeviceId = ({ deviceId }: any) => deviceId\n\nconst withColor =\n (swatches: any) =>\n ({ value: { color, ...restOfValue }, ...rest }: any) => ({\n ...rest,\n value: {\n ...restOfValue,\n ...(color\n ? {\n color: {\n swatch: swatches.find((s: any) => s && s.id === color.swatchId),\n alpha: color.alpha,\n },\n }\n : {}),\n },\n })\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: any) => ({\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 && value.id)\n\n const swatchIds = [\n (typography && typography.style.map(getSwatchId)) || [],\n (value && value.style.map(getSwatchId)) || [],\n ]\n .reduce(concat)\n .filter(Boolean)\n\n const { error: colorError, data: colorData = {} } = useQuery(SWATCHES_BY_ID, {\n skip: swatchIds == null || swatchIds.length === 0,\n variables: { ids: swatchIds },\n })\n\n const { swatches = [] } = colorData\n\n if (colorError != null) return null\n\n return overrideTypographyStyle(\n (typography && typography.style.map(withColor(swatches))) || [],\n (value && value.style.map(withColor(swatches))) || [],\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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"}
|