@makeswift/runtime 0.2.19 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (228) hide show
  1. package/dist/Box.cjs.js +35 -70
  2. package/dist/Box.cjs.js.map +1 -1
  3. package/dist/Box.es.js +34 -65
  4. package/dist/Box.es.js.map +1 -1
  5. package/dist/Button.cjs.js +176 -208
  6. package/dist/Button.cjs.js.map +1 -1
  7. package/dist/Button.es.js +177 -208
  8. package/dist/Button.es.js.map +1 -1
  9. package/dist/Carousel.cjs.js +227 -249
  10. package/dist/Carousel.cjs.js.map +1 -1
  11. package/dist/Carousel.es.js +229 -247
  12. package/dist/Carousel.es.js.map +1 -1
  13. package/dist/Countdown.cjs.js +270 -203
  14. package/dist/Countdown.cjs.js.map +1 -1
  15. package/dist/Countdown.es.js +273 -202
  16. package/dist/Countdown.es.js.map +1 -1
  17. package/dist/Divider.cjs.js +50 -71
  18. package/dist/Divider.cjs.js.map +1 -1
  19. package/dist/Divider.es.js +51 -68
  20. package/dist/Divider.es.js.map +1 -1
  21. package/dist/Embed.cjs.js +6 -17
  22. package/dist/Embed.cjs.js.map +1 -1
  23. package/dist/Embed.es.js +7 -14
  24. package/dist/Embed.es.js.map +1 -1
  25. package/dist/Form.cjs.js +723 -553
  26. package/dist/Form.cjs.js.map +1 -1
  27. package/dist/Form.es.js +723 -552
  28. package/dist/Form.es.js.map +1 -1
  29. package/dist/Image.cjs.js +16 -38
  30. package/dist/Image.cjs.js.map +1 -1
  31. package/dist/Image.es.js +17 -38
  32. package/dist/Image.es.js.map +1 -1
  33. package/dist/Navigation.cjs.js +318 -224
  34. package/dist/Navigation.cjs.js.map +1 -1
  35. package/dist/Navigation.es.js +318 -220
  36. package/dist/Navigation.es.js.map +1 -1
  37. package/dist/Root.cjs.js +116 -78
  38. package/dist/Root.cjs.js.map +1 -1
  39. package/dist/Root.es.js +99 -77
  40. package/dist/Root.es.js.map +1 -1
  41. package/dist/SocialLinks.cjs.js +119 -86
  42. package/dist/SocialLinks.cjs.js.map +1 -1
  43. package/dist/SocialLinks.es.js +120 -83
  44. package/dist/SocialLinks.es.js.map +1 -1
  45. package/dist/Text.cjs.js +83 -99
  46. package/dist/Text.cjs.js.map +1 -1
  47. package/dist/Text.es.js +84 -99
  48. package/dist/Text.es.js.map +1 -1
  49. package/dist/Video.cjs.js +8 -19
  50. package/dist/Video.cjs.js.map +1 -1
  51. package/dist/Video.es.js +8 -18
  52. package/dist/Video.es.js.map +1 -1
  53. package/dist/components.cjs.js +6 -18
  54. package/dist/components.cjs.js.map +1 -1
  55. package/dist/components.es.js +5 -8
  56. package/dist/components.es.js.map +1 -1
  57. package/dist/controls.es.js +1 -1
  58. package/dist/grid-item.cjs.js +612 -0
  59. package/dist/grid-item.cjs.js.map +1 -0
  60. package/dist/grid-item.es.js +604 -0
  61. package/dist/grid-item.es.js.map +1 -0
  62. package/dist/index.cjs.js +592 -275
  63. package/dist/index.cjs.js.map +1 -1
  64. package/dist/index.cjs2.js +98 -474
  65. package/dist/index.cjs2.js.map +1 -1
  66. package/dist/index.cjs3.js +20 -107
  67. package/dist/index.cjs3.js.map +1 -1
  68. package/dist/index.es.js +587 -274
  69. package/dist/index.es.js.map +1 -1
  70. package/dist/index.es2.js +99 -473
  71. package/dist/index.es2.js.map +1 -1
  72. package/dist/index.es3.js +21 -103
  73. package/dist/index.es3.js.map +1 -1
  74. package/dist/next.cjs.js +1 -2
  75. package/dist/next.cjs.js.map +1 -1
  76. package/dist/next.es.js +2 -3
  77. package/dist/next.es.js.map +1 -1
  78. package/dist/react-builder-preview.cjs.js +1 -2
  79. package/dist/react-builder-preview.cjs.js.map +1 -1
  80. package/dist/react-builder-preview.es.js +3 -4
  81. package/dist/react-builder-preview.es.js.map +1 -1
  82. package/dist/react.cjs.js +1 -2
  83. package/dist/react.cjs.js.map +1 -1
  84. package/dist/react.es.js +1 -2
  85. package/dist/react.es.js.map +1 -1
  86. package/dist/slot.cjs.js +41 -6
  87. package/dist/slot.cjs.js.map +1 -1
  88. package/dist/slot.es.js +36 -6
  89. package/dist/slot.es.js.map +1 -1
  90. package/dist/types/src/components/builtin/Box/Box.d.ts +7 -7
  91. package/dist/types/src/components/builtin/Box/Box.d.ts.map +1 -1
  92. package/dist/types/src/components/builtin/Box/components/Placeholder/index.d.ts.map +1 -1
  93. package/dist/types/src/components/builtin/Box/register.d.ts.map +1 -1
  94. package/dist/types/src/components/builtin/Button/Button.d.ts +46 -34
  95. package/dist/types/src/components/builtin/Button/Button.d.ts.map +1 -1
  96. package/dist/types/src/components/builtin/Carousel/Carousel.d.ts +5 -5
  97. package/dist/types/src/components/builtin/Carousel/Carousel.d.ts.map +1 -1
  98. package/dist/types/src/components/builtin/Carousel/register.d.ts.map +1 -1
  99. package/dist/types/src/components/builtin/Countdown/Countdown.d.ts +3 -3
  100. package/dist/types/src/components/builtin/Countdown/Countdown.d.ts.map +1 -1
  101. package/dist/types/src/components/builtin/Countdown/register.d.ts.map +1 -1
  102. package/dist/types/src/components/builtin/Divider/Divider.d.ts +3 -3
  103. package/dist/types/src/components/builtin/Divider/Divider.d.ts.map +1 -1
  104. package/dist/types/src/components/builtin/Divider/register.d.ts.map +1 -1
  105. package/dist/types/src/components/builtin/Embed/Embed.d.ts +3 -3
  106. package/dist/types/src/components/builtin/Embed/Embed.d.ts.map +1 -1
  107. package/dist/types/src/components/builtin/Form/Form.d.ts +3 -3
  108. package/dist/types/src/components/builtin/Form/Form.d.ts.map +1 -1
  109. package/dist/types/src/components/builtin/Form/components/Field/components/Checkbox/index.d.ts +4 -6
  110. package/dist/types/src/components/builtin/Form/components/Field/components/Checkbox/index.d.ts.map +1 -1
  111. package/dist/types/src/components/builtin/Form/components/Field/components/CheckboxTableField/index.d.ts +3 -0
  112. package/dist/types/src/components/builtin/Form/components/Field/components/CheckboxTableField/index.d.ts.map +1 -1
  113. package/dist/types/src/components/builtin/Form/components/Field/components/EmailTableField/index.d.ts +2 -0
  114. package/dist/types/src/components/builtin/Form/components/Field/components/EmailTableField/index.d.ts.map +1 -1
  115. package/dist/types/src/components/builtin/Form/components/Field/components/Input/index.d.ts +3 -7
  116. package/dist/types/src/components/builtin/Form/components/Field/components/Input/index.d.ts.map +1 -1
  117. package/dist/types/src/components/builtin/Form/components/Field/components/Label/index.d.ts +7 -13
  118. package/dist/types/src/components/builtin/Form/components/Field/components/Label/index.d.ts.map +1 -1
  119. package/dist/types/src/components/builtin/Form/components/Field/components/LongTextTableField/index.d.ts +2 -0
  120. package/dist/types/src/components/builtin/Form/components/Field/components/LongTextTableField/index.d.ts.map +1 -1
  121. package/dist/types/src/components/builtin/Form/components/Field/components/MultipleSelectTableField/index.d.ts.map +1 -1
  122. package/dist/types/src/components/builtin/Form/components/Field/components/NumberTableField/index.d.ts +2 -0
  123. package/dist/types/src/components/builtin/Form/components/Field/components/NumberTableField/index.d.ts.map +1 -1
  124. package/dist/types/src/components/builtin/Form/components/Field/components/PhoneNumberTableField/index.d.ts +2 -0
  125. package/dist/types/src/components/builtin/Form/components/Field/components/PhoneNumberTableField/index.d.ts.map +1 -1
  126. package/dist/types/src/components/builtin/Form/components/Field/components/PlaceholderTableField/index.d.ts.map +1 -1
  127. package/dist/types/src/components/builtin/Form/components/Field/components/RadioButton/index.d.ts +4 -8
  128. package/dist/types/src/components/builtin/Form/components/Field/components/RadioButton/index.d.ts.map +1 -1
  129. package/dist/types/src/components/builtin/Form/components/Field/components/SingleLineTextTableField/index.d.ts +2 -0
  130. package/dist/types/src/components/builtin/Form/components/Field/components/SingleLineTextTableField/index.d.ts.map +1 -1
  131. package/dist/types/src/components/builtin/Form/components/Field/components/SingleSelectTableField/components/TableColumnRadioButtonGroup/index.d.ts.map +1 -1
  132. package/dist/types/src/components/builtin/Form/components/Field/components/SingleSelectTableField/components/TableColumnSingleSelect/index.d.ts.map +1 -1
  133. package/dist/types/src/components/builtin/Form/components/Field/components/TextArea/index.d.ts +2 -7
  134. package/dist/types/src/components/builtin/Form/components/Field/components/TextArea/index.d.ts.map +1 -1
  135. package/dist/types/src/components/builtin/Form/components/Field/components/URLTableField/index.d.ts +2 -0
  136. package/dist/types/src/components/builtin/Form/components/Field/components/URLTableField/index.d.ts.map +1 -1
  137. package/dist/types/src/components/builtin/Form/components/Field/services/{cssField.d.ts → responsiveField.d.ts} +5 -4
  138. package/dist/types/src/components/builtin/Form/components/Field/services/responsiveField.d.ts.map +1 -0
  139. package/dist/types/src/components/builtin/Form/components/Placeholder/index.d.ts +2 -3
  140. package/dist/types/src/components/builtin/Form/components/Placeholder/index.d.ts.map +1 -1
  141. package/dist/types/src/components/builtin/Form/components/Spinner/index.d.ts.map +1 -1
  142. package/dist/types/src/components/builtin/Form/register.d.ts.map +1 -1
  143. package/dist/types/src/components/builtin/Image/Image.d.ts +7 -7
  144. package/dist/types/src/components/builtin/Image/Image.d.ts.map +1 -1
  145. package/dist/types/src/components/builtin/Navigation/Navigation.d.ts +3 -3
  146. package/dist/types/src/components/builtin/Navigation/Navigation.d.ts.map +1 -1
  147. package/dist/types/src/components/builtin/Navigation/components/DropDownButton/index.d.ts +8 -81
  148. package/dist/types/src/components/builtin/Navigation/components/DropDownButton/index.d.ts.map +1 -1
  149. package/dist/types/src/components/builtin/Navigation/components/LinksPlaceholder/index.d.ts.map +1 -1
  150. package/dist/types/src/components/builtin/Navigation/components/MobileMenu/components/MobileDropDownButton/index.d.ts +8 -81
  151. package/dist/types/src/components/builtin/Navigation/components/MobileMenu/components/MobileDropDownButton/index.d.ts.map +1 -1
  152. package/dist/types/src/components/builtin/Navigation/components/MobileMenu/index.d.ts.map +1 -1
  153. package/dist/types/src/components/builtin/Navigation/register.d.ts.map +1 -1
  154. package/dist/types/src/components/builtin/Root/Root.d.ts +1 -2
  155. package/dist/types/src/components/builtin/Root/Root.d.ts.map +1 -1
  156. package/dist/types/src/components/builtin/Root/components/Placeholder/index.d.ts +1 -2
  157. package/dist/types/src/components/builtin/Root/components/Placeholder/index.d.ts.map +1 -1
  158. package/dist/types/src/components/builtin/SocialLinks/SocialLinks.d.ts +3 -3
  159. package/dist/types/src/components/builtin/SocialLinks/SocialLinks.d.ts.map +1 -1
  160. package/dist/types/src/components/builtin/SocialLinks/components/SocialLinksPlaceholder/index.d.ts.map +1 -1
  161. package/dist/types/src/components/builtin/SocialLinks/register.d.ts.map +1 -1
  162. package/dist/types/src/components/builtin/Text/Text.d.ts +3 -3
  163. package/dist/types/src/components/builtin/Text/Text.d.ts.map +1 -1
  164. package/dist/types/src/components/builtin/Text/components/RichTextEditor/components/Block/index.d.ts +8 -11
  165. package/dist/types/src/components/builtin/Text/components/RichTextEditor/components/Block/index.d.ts.map +1 -1
  166. package/dist/types/src/components/builtin/Text/components/RichTextEditor/components/Mark/index.d.ts +3 -6
  167. package/dist/types/src/components/builtin/Text/components/RichTextEditor/components/Mark/index.d.ts.map +1 -1
  168. package/dist/types/src/components/builtin/Text/components/RichTextEditor/index.d.ts +1 -1
  169. package/dist/types/src/components/builtin/Text/components/RichTextEditor/index.d.ts.map +1 -1
  170. package/dist/types/src/components/builtin/Text/components/RichTextEditor/plugins/Link.d.ts.map +1 -1
  171. package/dist/types/src/components/builtin/Text/register.d.ts.map +1 -1
  172. package/dist/types/src/components/builtin/Video/Video.d.ts +4 -4
  173. package/dist/types/src/components/builtin/Video/Video.d.ts.map +1 -1
  174. package/dist/types/src/components/builtin/Video/register.d.ts.map +1 -1
  175. package/dist/types/src/components/hooks/useBackgrounds.d.ts +1 -1
  176. package/dist/types/src/components/hooks/useBackgrounds.d.ts.map +1 -1
  177. package/dist/types/src/components/index.d.ts +0 -1
  178. package/dist/types/src/components/index.d.ts.map +1 -1
  179. package/dist/types/src/components/shared/BackgroundsContainer/components/BackgroundVideo/index.d.ts.map +1 -1
  180. package/dist/types/src/components/shared/BackgroundsContainer/components/Backgrounds/index.d.ts.map +1 -1
  181. package/dist/types/src/components/shared/BackgroundsContainer/index.d.ts +255 -4
  182. package/dist/types/src/components/shared/BackgroundsContainer/index.d.ts.map +1 -1
  183. package/dist/types/src/components/shared/FallbackComponent/FallbackComponent.d.ts.map +1 -1
  184. package/dist/types/src/components/shared/GutterContainer/index.d.ts +8 -4
  185. package/dist/types/src/components/shared/GutterContainer/index.d.ts.map +1 -1
  186. package/dist/types/src/components/shared/grid-item.d.ts +17 -0
  187. package/dist/types/src/components/shared/grid-item.d.ts.map +1 -0
  188. package/dist/types/src/components/utils/responsive-style.d.ts +22 -1
  189. package/dist/types/src/components/utils/responsive-style.d.ts.map +1 -1
  190. package/dist/types/src/controls/style.d.ts +5 -65
  191. package/dist/types/src/controls/style.d.ts.map +1 -1
  192. package/dist/types/src/css/border-radius.d.ts +20 -0
  193. package/dist/types/src/css/border-radius.d.ts.map +1 -0
  194. package/dist/types/src/css/border.d.ts +31 -0
  195. package/dist/types/src/css/border.d.ts.map +1 -0
  196. package/dist/types/src/css/length-percentage.d.ts +10 -0
  197. package/dist/types/src/css/length-percentage.d.ts.map +1 -0
  198. package/dist/types/src/css/length.d.ts +14 -0
  199. package/dist/types/src/css/length.d.ts.map +1 -0
  200. package/dist/types/src/css/margin.d.ts +20 -0
  201. package/dist/types/src/css/margin.d.ts.map +1 -0
  202. package/dist/types/src/css/padding.d.ts +20 -0
  203. package/dist/types/src/css/padding.d.ts.map +1 -0
  204. package/dist/types/src/next/document.d.ts.map +1 -1
  205. package/dist/types/src/prop-controllers/descriptors.d.ts +96 -33
  206. package/dist/types/src/prop-controllers/descriptors.d.ts.map +1 -1
  207. package/dist/types/src/runtimes/react/controls/style.d.ts.map +1 -1
  208. package/dist/types/src/runtimes/react/controls.d.ts +10 -2
  209. package/dist/types/src/runtimes/react/controls.d.ts.map +1 -1
  210. package/dist/types/src/runtimes/react/use-global-style.d.ts +3 -0
  211. package/dist/types/src/runtimes/react/use-global-style.d.ts.map +1 -0
  212. package/dist/useMediaQuery.es.js +1 -1
  213. package/package.json +1 -3
  214. package/dist/cssMediaRules.cjs.js +0 -210
  215. package/dist/cssMediaRules.cjs.js.map +0 -1
  216. package/dist/cssMediaRules.es.js +0 -201
  217. package/dist/cssMediaRules.es.js.map +0 -1
  218. package/dist/index.cjs4.js +0 -18
  219. package/dist/index.cjs4.js.map +0 -1
  220. package/dist/index.es4.js +0 -13
  221. package/dist/index.es4.js.map +0 -1
  222. package/dist/types/src/components/builtin/Form/components/Field/services/cssField.d.ts.map +0 -1
  223. package/dist/types/src/components/utils/cssMediaRules.d.ts +0 -69
  224. package/dist/types/src/components/utils/cssMediaRules.d.ts.map +0 -1
  225. package/dist/useBoxShadow.cjs.js +0 -78
  226. package/dist/useBoxShadow.cjs.js.map +0 -1
  227. package/dist/useBoxShadow.es.js +0 -77
  228. package/dist/useBoxShadow.es.js.map +0 -1
@@ -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 { v as useQuery, B as TYPOGRAPHIES_BY_ID, F as SWATCHES_BY_ID, z as findDeviceOverride, G as shallowMergeFallbacks, p as colorToString, u as useIsInBuilder } from "./index.es.js";
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.es3.js";
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
- return /* @__PURE__ */ jsx(Span, __spreadProps(__spreadValues({}, restOfProps), {
176
- typographyStyle
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
- return /* @__PURE__ */ jsx(StyledBlock, __spreadProps(__spreadValues({}, restOfProps), {
186
+ const Component = as != null ? as : "div";
187
+ return /* @__PURE__ */ jsx(Component, __spreadProps(__spreadValues({}, restOfProps), {
216
188
  ref,
217
- textAlign
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
- const StyledLink = styled(Link)`
279
- text-decoration: none;
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 = styled(forwardRef(function RichTextEditor2(_e, ref) {
338
- var _f = _e, {
339
- placeholder = "Write some text..."
340
- } = _f, restOfProps = __objRest(_f, [
341
- "placeholder"
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(StyledRichTextEditor, {
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,
@@ -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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"}