@makeswift/runtime 0.28.10-canary.11 → 0.28.10-canary.14

package/dist/esm/api/graphql-api-client.js

@@ -4,7 +4,7 @@ class MakeswiftGraphQLApiClient {
   graphqlClient;
   constructor({ endpoint }) {
     this.graphqlClient = new GraphQLClient(endpoint, {
-      "makeswift-runtime-version": "0.28.10-canary.11"
+      "makeswift-runtime-version": "0.28.10-canary.14"
     });
   }
   async getUnversionedResources({

package/dist/esm/api/rest-api-client.js

@@ -163,7 +163,7 @@ class MakeswiftRestAPIClient {
     const requestHeaders = new Headers({
       "x-api-key": this.apiKey,
       "makeswift-site-api-key": this.apiKey,
-      "makeswift-runtime-version": "0.28.10-canary.11"
+      "makeswift-runtime-version": "0.28.10-canary.14"
     });
     if (siteVersion?.token) {
       requestUrl.searchParams.set("version", siteVersion.version);

package/dist/esm/api-handler/handlers/manifest.js

@@ -8,7 +8,7 @@ async function manifestHandler(req, { apiKey, manifest }) {
     return ApiResponse.json({ message: "Unauthorized" }, { status: 401 });
   }
   return ApiResponse.json({
-    version: "0.28.10-canary.11",
+    version: "0.28.10-canary.14",
     interactionMode: true,
     clientSideNavigation: false,
     elementFromPoint: false,

package/dist/esm/components/builtin/Image/Image.js

@@ -11,6 +11,11 @@ import { useFile } from "../../../runtimes/react/hooks/makeswift-api";
 import { useBreakpoints } from "../../../runtimes/react/hooks/use-breakpoints";
 import { useFrameworkContext } from "../../../runtimes/react/components/hooks/use-framework-context";
 import { match, P } from "ts-pattern";
+const aspectRatioValues = {
+  "16:9": "16 / 9",
+  "4:3": "4 / 3",
+  "1:1": "1 / 1"
+};
 function loadImage(src) {
   return new Promise((resolve, reject) => {
     const image = new Image();
@@ -46,6 +51,7 @@ const ImageComponent = forwardRef(function Image2({
   link,
   opacity,
   boxShadow,
+  aspectRatio,
   placeholder = placeholders.image,
   className,
   priority
@@ -86,6 +92,16 @@ const ImageComponent = forwardRef(function Image2({
     className
   );
   const { Image: Image3 } = useFrameworkContext();
+  const imageClassName = useStyle(
+    useResponsiveStyle([aspectRatio], ([aspectRatio2 = "original"]) => ({
+      width: "100%",
+      height: "auto",
+      ...aspectRatio2 !== "original" && {
+        aspectRatio: aspectRatioValues[aspectRatio2],
+        objectFit: "cover"
+      }
+    }))
+  );
   if (!dimensions)
     return null;
   return /* @__PURE__ */ jsx(Container, { link, ref, id, className: containerClassName, children: /* @__PURE__ */ jsx(
@@ -97,10 +113,7 @@ const ImageComponent = forwardRef(function Image2({
       alt: altText ?? "",
       width: dimensions.width,
       height: dimensions.height,
-      style: {
-        width: "100%",
-        height: "auto"
-      }
+      className: imageClassName
     }
   ) });
 });

package/dist/esm/components/builtin/Image/Image.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Image/Image.tsx"],"sourcesContent":["'use client'\n\nimport { useState, useEffect, Ref, forwardRef } from 'react'\n\nimport {\n  LinkData,\n  ResponsiveLengthData,\n  ImageData,\n  ResponsiveOpacityValue,\n} from '@makeswift/prop-controllers'\nimport { type Breakpoints, findBreakpointOverride } from '@makeswift/controls'\n\nimport { placeholders } from '../../utils/placeholders'\nimport { Link } from '../../shared/Link'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useResponsiveStyle, useResponsiveWidth } from '../../utils/responsive-style'\nimport { useFile } from '../../../runtimes/react/hooks/makeswift-api'\nimport { useBreakpoints } from '../../../runtimes/react/hooks/use-breakpoints'\nimport { useFrameworkContext } from '../../../runtimes/react/components/hooks/use-framework-context'\nimport { match, P } from 'ts-pattern'\n\ntype Props = {\n  id?: string\n  file?: ImageData\n  altText?: string\n  link?: LinkData\n  width?: ResponsiveLengthData\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  opacity?: ResponsiveOpacityValue\n  placeholder?: { src: string; dimensions: { width: number; height: number } }\n  className?: string\n  priority?: boolean\n}\n\nfunction loadImage(src: string): Promise<HTMLImageElement> {\n  return new Promise<HTMLImageElement>((resolve, reject) => {\n    const image = new Image()\n\n    image.onload = () => resolve(image)\n    image.onerror = reject\n    image.src = src\n  })\n}\n\nfunction imageSizes(breakpoints: Breakpoints, width?: Props['width']): string {\n  const baseDevice = breakpoints.find(breakpoint => breakpoint.maxWidth == null)\n  const baseWidth = baseDevice && width && findBreakpointOverride(breakpoints, width, baseDevice.id)\n  const baseWidthSize =\n    baseWidth == null || baseWidth.value.unit !== 'px' ? '100vw' : `${baseWidth.value.value}px`\n\n  return breakpoints\n    .map(breakpoint => {\n      const override = findBreakpointOverride(breakpoints, width, breakpoint.id)\n\n      if (override == null || breakpoint.maxWidth == null || override.value.unit !== 'px') {\n        return null\n      }\n\n      return `(max-width: ${breakpoint.maxWidth}px) ${Math.min(\n        breakpoint.maxWidth,\n        override.value.value,\n      )}px`\n    })\n    .filter((size): size is NonNullable<typeof size> => size != null)\n    .reduce((sourceSizes, sourceSize) => `${sourceSize}, ${sourceSizes}`, baseWidthSize)\n}\n\ntype Dimensions = {\n  width: number\n  height: number\n}\n\nconst ImageComponent = forwardRef(function Image(\n  {\n    id,\n    width,\n    margin,\n    padding,\n    file,\n    border,\n    borderRadius,\n    altText,\n    link,\n    opacity,\n    boxShadow,\n    placeholder = placeholders.image,\n    className,\n    priority,\n  }: Props,\n  ref: Ref<HTMLAnchorElement & HTMLDivElement>,\n) {\n  const fileId = match(file)\n    .with(P.string, v => v)\n    .with({ type: 'makeswift-file', version: 1 }, v => v.id)\n    .otherwise(() => null)\n  const fileData = useFile(fileId)\n  const imageSrc = match([file, fileData])\n    .with([P.any, P.not(P.nullish)], ([, fileData]) => fileData.publicUrl)\n    .with([{ type: 'external-file', version: 1 }, P.any], ([file]) => file.url)\n    .otherwise(() => placeholder.src)\n  const dataDimensions = match([file, fileData, imageSrc])\n    .with(\n      [{ type: 'external-file', version: 1, width: P.number, height: P.number }, P.any, P.any],\n      ([externalFile]) => ({ width: externalFile.width, height: externalFile.height }),\n    )\n    .with([P.any, P.not(P.nullish), P.any], ([, data]) => data.dimensions)\n    .with([P.any, P.any, placeholder.src], () => placeholder.dimensions)\n    .otherwise(() => null)\n  const [measuredDimensions, setMeasuredDimensions] = useState<Dimensions | null>(null)\n  const breakpoints = useBreakpoints()\n\n  useEffect(() => {\n    if (dataDimensions) return\n\n    let cleanedUp = false\n\n    loadImage(imageSrc)\n      .then(image => {\n        if (!cleanedUp) {\n          setMeasuredDimensions({ width: image.naturalWidth, height: image.naturalHeight })\n        }\n      })\n      .catch(console.error)\n\n    return () => {\n      cleanedUp = true\n    }\n  }, [dataDimensions, imageSrc])\n\n  const dimensions = dataDimensions ?? measuredDimensions\n  const Container = link ? Link : 'div'\n  const containerClassName = cx(\n    useStyle({ lineHeight: 0, overflow: 'hidden' }),\n    useStyle(useResponsiveWidth(width, dimensions?.width)),\n    useStyle(useResponsiveStyle([opacity] as const, ([opacity = 1]) => ({ opacity }))),\n    margin,\n    padding,\n    border,\n    borderRadius,\n    boxShadow,\n    className,\n  )\n\n  const { Image } = useFrameworkContext()\n\n  if (!dimensions) return null\n\n  return (\n    <Container link={link} ref={ref} id={id} className={containerClassName}>\n      <Image\n        src={imageSrc}\n        priority={priority}\n        sizes={imageSizes(breakpoints, width)}\n        alt={altText ?? ''}\n        width={dimensions.width}\n        height={dimensions.height}\n        style={{\n          width: '100%',\n          height: 'auto',\n        }}\n      />\n    </Container>\n  )\n})\n\nexport default ImageComponent\n"],"mappings":"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","names":["Image","fileData","file","opacity"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Image/Image.tsx"],"sourcesContent":["'use client'\n\nimport { useState, useEffect, Ref, forwardRef } from 'react'\n\nimport {\n  LinkData,\n  ResponsiveLengthData,\n  ImageData,\n  ResponsiveOpacityValue,\n  ResponsiveSelectValue,\n} from '@makeswift/prop-controllers'\nimport { type Breakpoints, findBreakpointOverride } from '@makeswift/controls'\n\nimport { placeholders } from '../../utils/placeholders'\nimport { Link } from '../../shared/Link'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { useResponsiveStyle, useResponsiveWidth } from '../../utils/responsive-style'\nimport { useFile } from '../../../runtimes/react/hooks/makeswift-api'\nimport { useBreakpoints } from '../../../runtimes/react/hooks/use-breakpoints'\nimport { useFrameworkContext } from '../../../runtimes/react/components/hooks/use-framework-context'\nimport { match, P } from 'ts-pattern'\n\ntype AspectRatio = 'original' | '16:9' | '4:3' | '1:1'\n\nconst aspectRatioValues: Record<Exclude<AspectRatio, 'original'>, string> = {\n  '16:9': '16 / 9',\n  '4:3': '4 / 3',\n  '1:1': '1 / 1',\n}\n\ntype Props = {\n  id?: string\n  file?: ImageData\n  altText?: string\n  link?: LinkData\n  width?: ResponsiveLengthData\n  aspectRatio?: ResponsiveSelectValue<AspectRatio>\n  margin?: string\n  padding?: string\n  border?: string\n  borderRadius?: string\n  boxShadow?: string\n  opacity?: ResponsiveOpacityValue\n  placeholder?: { src: string; dimensions: { width: number; height: number } }\n  className?: string\n  priority?: boolean\n}\n\nfunction loadImage(src: string): Promise<HTMLImageElement> {\n  return new Promise<HTMLImageElement>((resolve, reject) => {\n    const image = new Image()\n\n    image.onload = () => resolve(image)\n    image.onerror = reject\n    image.src = src\n  })\n}\n\nfunction imageSizes(breakpoints: Breakpoints, width?: Props['width']): string {\n  const baseDevice = breakpoints.find(breakpoint => breakpoint.maxWidth == null)\n  const baseWidth = baseDevice && width && findBreakpointOverride(breakpoints, width, baseDevice.id)\n  const baseWidthSize =\n    baseWidth == null || baseWidth.value.unit !== 'px' ? '100vw' : `${baseWidth.value.value}px`\n\n  return breakpoints\n    .map(breakpoint => {\n      const override = findBreakpointOverride(breakpoints, width, breakpoint.id)\n\n      if (override == null || breakpoint.maxWidth == null || override.value.unit !== 'px') {\n        return null\n      }\n\n      return `(max-width: ${breakpoint.maxWidth}px) ${Math.min(\n        breakpoint.maxWidth,\n        override.value.value,\n      )}px`\n    })\n    .filter((size): size is NonNullable<typeof size> => size != null)\n    .reduce((sourceSizes, sourceSize) => `${sourceSize}, ${sourceSizes}`, baseWidthSize)\n}\n\ntype Dimensions = {\n  width: number\n  height: number\n}\n\nconst ImageComponent = forwardRef(function Image(\n  {\n    id,\n    width,\n    margin,\n    padding,\n    file,\n    border,\n    borderRadius,\n    altText,\n    link,\n    opacity,\n    boxShadow,\n    aspectRatio,\n    placeholder = placeholders.image,\n    className,\n    priority,\n  }: Props,\n  ref: Ref<HTMLAnchorElement & HTMLDivElement>,\n) {\n  const fileId = match(file)\n    .with(P.string, v => v)\n    .with({ type: 'makeswift-file', version: 1 }, v => v.id)\n    .otherwise(() => null)\n  const fileData = useFile(fileId)\n  const imageSrc = match([file, fileData])\n    .with([P.any, P.not(P.nullish)], ([, fileData]) => fileData.publicUrl)\n    .with([{ type: 'external-file', version: 1 }, P.any], ([file]) => file.url)\n    .otherwise(() => placeholder.src)\n  const dataDimensions = match([file, fileData, imageSrc])\n    .with(\n      [{ type: 'external-file', version: 1, width: P.number, height: P.number }, P.any, P.any],\n      ([externalFile]) => ({ width: externalFile.width, height: externalFile.height }),\n    )\n    .with([P.any, P.not(P.nullish), P.any], ([, data]) => data.dimensions)\n    .with([P.any, P.any, placeholder.src], () => placeholder.dimensions)\n    .otherwise(() => null)\n  const [measuredDimensions, setMeasuredDimensions] = useState<Dimensions | null>(null)\n  const breakpoints = useBreakpoints()\n\n  useEffect(() => {\n    if (dataDimensions) return\n\n    let cleanedUp = false\n\n    loadImage(imageSrc)\n      .then(image => {\n        if (!cleanedUp) {\n          setMeasuredDimensions({ width: image.naturalWidth, height: image.naturalHeight })\n        }\n      })\n      .catch(console.error)\n\n    return () => {\n      cleanedUp = true\n    }\n  }, [dataDimensions, imageSrc])\n\n  const dimensions = dataDimensions ?? measuredDimensions\n  const Container = link ? Link : 'div'\n  const containerClassName = cx(\n    useStyle({ lineHeight: 0, overflow: 'hidden' }),\n    useStyle(useResponsiveWidth(width, dimensions?.width)),\n    useStyle(useResponsiveStyle([opacity] as const, ([opacity = 1]) => ({ opacity }))),\n    margin,\n    padding,\n    border,\n    borderRadius,\n    boxShadow,\n    className,\n  )\n\n  const { Image } = useFrameworkContext()\n\n  const imageClassName = useStyle(\n    useResponsiveStyle([aspectRatio] as const, ([aspectRatio = 'original']) => ({\n      width: '100%',\n      height: 'auto',\n      ...(aspectRatio !== 'original' && {\n        aspectRatio: aspectRatioValues[aspectRatio],\n        objectFit: 'cover',\n      }),\n    })),\n  )\n\n  if (!dimensions) return null\n\n  return (\n    <Container link={link} ref={ref} id={id} className={containerClassName}>\n      <Image\n        src={imageSrc}\n        priority={priority}\n        sizes={imageSizes(breakpoints, width)}\n        alt={altText ?? ''}\n        width={dimensions.width}\n        height={dimensions.height}\n        className={imageClassName}\n      />\n    </Container>\n  )\n})\n\nexport default ImageComponent\n"],"mappings":"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","names":["Image","fileData","file","opacity","aspectRatio"]}

package/dist/esm/components/builtin/Image/register.js

@@ -12,6 +12,7 @@ import {
   ElementID,
   Image,
   ResponsiveOpacity,
+  ResponsiveSelect,
   TextInput
 } from "@makeswift/prop-controllers";
 function registerComponent(runtime) {
@@ -26,6 +27,17 @@ function registerComponent(runtime) {
         altText: TextInput({ label: "Alt text" }),
         link: Link({ label: "On click" }),
         width: Width(),
+        aspectRatio: ResponsiveSelect({
+          label: "Aspect ratio",
+          labelOrientation: "vertical",
+          options: [
+            { value: "original", label: "Original" },
+            { value: "16:9", label: "16:9" },
+            { value: "4:3", label: "4:3" },
+            { value: "1:1", label: "1:1" }
+          ],
+          defaultValue: "original"
+        }),
         margin: Margin({ format: Margin.Format.ClassName }),
         padding: Padding({ format: Padding.Format.ClassName }),
         border: Border({ format: Border.Format.ClassName }),

package/dist/esm/components/builtin/Image/register.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Image/register.ts"],"sourcesContent":["import { lazy } from 'react'\nimport { type ReactRuntimeCore } from '../../../runtimes/react/react-runtime-core'\nimport { MakeswiftComponentType } from '../constants'\nimport {\n  Border,\n  Link,\n  Shadows,\n  Checkbox,\n  BorderRadius,\n  Margin,\n  Padding,\n  Width,\n  ElementID,\n  Image,\n  ResponsiveOpacity,\n  TextInput,\n} from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntimeCore) {\n  return runtime.registerComponent(\n    lazy(() => import('./Image')),\n    {\n      type: MakeswiftComponentType.Image,\n      label: 'Image',\n      props: {\n        id: ElementID(),\n        file: Image(),\n        altText: TextInput({ label: 'Alt text' }),\n        link: Link({ label: 'On click' }),\n        width: Width(),\n        margin: Margin({ format: Margin.Format.ClassName }),\n        padding: Padding({ format: Padding.Format.ClassName }),\n        border: Border({ format: Border.Format.ClassName }),\n        borderRadius: BorderRadius({ format: BorderRadius.Format.ClassName }),\n        boxShadow: Shadows({ format: Shadows.Format.ClassName }),\n        opacity: ResponsiveOpacity(),\n        priority: Checkbox({ label: 'Priority' }),\n      },\n    },\n  )\n}\n"],"mappings":"AAAA,SAAS,YAAY;AAErB,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,kBAAkB,SAA2B;AAC3D,SAAO,QAAQ;AAAA,IACb,KAAK,MAAM,OAAO,SAAS,CAAC;AAAA,IAC5B;AAAA,MACE,MAAM,uBAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,OAAO;AAAA,QACL,IAAI,UAAU;AAAA,QACd,MAAM,MAAM;AAAA,QACZ,SAAS,UAAU,EAAE,OAAO,WAAW,CAAC;AAAA,QACxC,MAAM,KAAK,EAAE,OAAO,WAAW,CAAC;AAAA,QAChC,OAAO,MAAM;AAAA,QACb,QAAQ,OAAO,EAAE,QAAQ,OAAO,OAAO,UAAU,CAAC;AAAA,QAClD,SAAS,QAAQ,EAAE,QAAQ,QAAQ,OAAO,UAAU,CAAC;AAAA,QACrD,QAAQ,OAAO,EAAE,QAAQ,OAAO,OAAO,UAAU,CAAC;AAAA,QAClD,cAAc,aAAa,EAAE,QAAQ,aAAa,OAAO,UAAU,CAAC;AAAA,QACpE,WAAW,QAAQ,EAAE,QAAQ,QAAQ,OAAO,UAAU,CAAC;AAAA,QACvD,SAAS,kBAAkB;AAAA,QAC3B,UAAU,SAAS,EAAE,OAAO,WAAW,CAAC;AAAA,MAC1C;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../../../src/components/builtin/Image/register.ts"],"sourcesContent":["import { lazy } from 'react'\nimport { type ReactRuntimeCore } from '../../../runtimes/react/react-runtime-core'\nimport { MakeswiftComponentType } from '../constants'\nimport {\n  Border,\n  Link,\n  Shadows,\n  Checkbox,\n  BorderRadius,\n  Margin,\n  Padding,\n  Width,\n  ElementID,\n  Image,\n  ResponsiveOpacity,\n  ResponsiveSelect,\n  TextInput,\n} from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntimeCore) {\n  return runtime.registerComponent(\n    lazy(() => import('./Image')),\n    {\n      type: MakeswiftComponentType.Image,\n      label: 'Image',\n      props: {\n        id: ElementID(),\n        file: Image(),\n        altText: TextInput({ label: 'Alt text' }),\n        link: Link({ label: 'On click' }),\n        width: Width(),\n        aspectRatio: ResponsiveSelect({\n          label: 'Aspect ratio',\n          labelOrientation: 'vertical',\n          options: [\n            { value: 'original', label: 'Original' },\n            { value: '16:9', label: '16:9' },\n            { value: '4:3', label: '4:3' },\n            { value: '1:1', label: '1:1' },\n          ],\n          defaultValue: 'original',\n        }),\n        margin: Margin({ format: Margin.Format.ClassName }),\n        padding: Padding({ format: Padding.Format.ClassName }),\n        border: Border({ format: Border.Format.ClassName }),\n        borderRadius: BorderRadius({ format: BorderRadius.Format.ClassName }),\n        boxShadow: Shadows({ format: Shadows.Format.ClassName }),\n        opacity: ResponsiveOpacity(),\n        priority: Checkbox({ label: 'Priority' }),\n      },\n    },\n  )\n}\n"],"mappings":"AAAA,SAAS,YAAY;AAErB,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,kBAAkB,SAA2B;AAC3D,SAAO,QAAQ;AAAA,IACb,KAAK,MAAM,OAAO,SAAS,CAAC;AAAA,IAC5B;AAAA,MACE,MAAM,uBAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,OAAO;AAAA,QACL,IAAI,UAAU;AAAA,QACd,MAAM,MAAM;AAAA,QACZ,SAAS,UAAU,EAAE,OAAO,WAAW,CAAC;AAAA,QACxC,MAAM,KAAK,EAAE,OAAO,WAAW,CAAC;AAAA,QAChC,OAAO,MAAM;AAAA,QACb,aAAa,iBAAiB;AAAA,UAC5B,OAAO;AAAA,UACP,kBAAkB;AAAA,UAClB,SAAS;AAAA,YACP,EAAE,OAAO,YAAY,OAAO,WAAW;AAAA,YACvC,EAAE,OAAO,QAAQ,OAAO,OAAO;AAAA,YAC/B,EAAE,OAAO,OAAO,OAAO,MAAM;AAAA,YAC7B,EAAE,OAAO,OAAO,OAAO,MAAM;AAAA,UAC/B;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,QAAQ,OAAO,EAAE,QAAQ,OAAO,OAAO,UAAU,CAAC;AAAA,QAClD,SAAS,QAAQ,EAAE,QAAQ,QAAQ,OAAO,UAAU,CAAC;AAAA,QACrD,QAAQ,OAAO,EAAE,QAAQ,OAAO,OAAO,UAAU,CAAC;AAAA,QAClD,cAAc,aAAa,EAAE,QAAQ,aAAa,OAAO,UAAU,CAAC;AAAA,QACpE,WAAW,QAAQ,EAAE,QAAQ,QAAQ,OAAO,UAAU,CAAC;AAAA,QACvD,SAAS,kBAAkB;AAAA,QAC3B,UAAU,SAAS,EAAE,OAAO,WAAW,CAAC;AAAA,MAC1C;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/dist/esm/controls/rich-text-v2/rich-text-v2.js

@@ -18,12 +18,13 @@ import { Plugin } from "./plugin";
 import { RichTextV2Control } from "./control";
 import { getTranslatableData } from "./translations/get-translations";
 class Definition extends BaseRichTextDefinition {
+  plugins;
   constructor({ mode, defaultValue }, plugins) {
     super({
       mode,
-      defaultValue: defaultValue ?? (mode === Definition.Mode.Inline ? "Edit this text" : Definition.generateParagraph()),
-      plugins: plugins ?? (mode === Definition.Mode.Inline ? [InlineModePlugin()] : [BlockPlugin(), TypographyPlugin(), TextAlignPlugin(), InlinePlugin(), LinkPlugin()])
+      defaultValue: defaultValue ?? (mode === Definition.Mode.Inline ? "Edit this text" : Definition.generateParagraph())
     });
+    this.plugins = plugins ?? (mode === Definition.Mode.Inline ? [InlineModePlugin()] : [BlockPlugin(), TypographyPlugin(), TextAlignPlugin(), InlinePlugin(), LinkPlugin()]);
   }
   static generateParagraph() {
     return ipsum(3);
@@ -32,13 +33,13 @@ class Definition extends BaseRichTextDefinition {
     if (data.type !== Definition.type) {
       throw new Error(`RichText: expected type ${Definition.type}, got ${data.type}`);
     }
-    const { config } = Definition.fullSchema({
+    const { config, plugins } = Definition.fullSchema({
       pluginDef: SerializationSchema.deserializedRecord
     }).definition.parse(data);
-    const { plugins, ...userConfig } = config;
+    const { plugins: configPlugins, ...userConfig } = config;
     return new RichTextV2Definition(
       userConfig,
-      plugins.map(
+      (plugins ?? configPlugins ?? []).map(
         ({ control }) => control ? { control: { definition: deserializeCallback(control?.definition) } } : {}
       )
     );
@@ -50,21 +51,31 @@ class Definition extends BaseRichTextDefinition {
         definition: pluginDef
       }).optional()
     });
-    const config = baseSchema.userConfig.extend({
-      defaultValue: z.string(),
-      plugins: z.array(plugin)
+    const plugins = z.array(plugin);
+    const config = Definition.configSchema().extend({
+      // plugins have been moved from config to the definition itself; keeping
+      // the field here as optional so we can deserialize definitions coming from
+      // older runtimes
+      plugins: plugins.optional()
     });
     return {
       ...baseSchema,
       config,
       definition: z.object({
         type: baseSchema.type,
+        // marked as optional for backward compatibility with older runtimes
+        plugins: plugins.optional(),
         config
       })
     };
   }
+  static configSchema() {
+    return super.schema.userConfig.extend({
+      defaultValue: z.string()
+    });
+  }
   get configSchema() {
-    return Definition.fullSchema({ pluginDef: z.any() }).config;
+    return Definition.configSchema();
   }
   createInstance(args) {
     return new RichTextV2Control(this, args);
@@ -72,7 +83,7 @@ class Definition extends BaseRichTextDefinition {
   resolveValue(data, _resolver, _stylesheet, control) {
     const stableValue = StableValue({
       name: Definition.type,
-      read: () => renderRichTextV2(data, this.config, control ?? null)
+      read: () => renderRichTextV2({ data, config: this.config, control: control ?? null })
     });
     return {
       ...stableValue,
@@ -83,10 +94,10 @@ class Definition extends BaseRichTextDefinition {
   getTranslatableData(data) {
     if (data == null)
       return null;
-    return getTranslatableData(Definition.dataToNodes(data), this.config.plugins);
+    return getTranslatableData(Definition.dataToNodes(data), this.plugins);
   }
   get pluginControls() {
-    return this.config.plugins.map((plugin) => plugin.control).filter(isNotNil);
+    return this.plugins.map((plugin) => plugin.control).filter(isNotNil);
   }
   pluginControlAt(index) {
     return this.pluginControls[index];

package/dist/esm/controls/rich-text-v2/rich-text-v2.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/controls/rich-text-v2/rich-text-v2.ts"],"sourcesContent":["import { ReactNode } from 'react'\nimport { z } from 'zod'\n// @ts-expect-error: there are no types for 'corporate-ipsum'\nimport ipsum from 'corporate-ipsum'\n\nimport {\n  RichTextDefinition as BaseRichTextDefinition,\n  isNotNil,\n  ControlDefinition,\n  SerializationSchema,\n  StableValue,\n  type Data,\n  type Resolvable,\n  type ControlInstanceArgs,\n  type DeserializedRecord,\n  type SchemaType,\n  type SchemaTypeAny,\n  type RichTextPluginControl,\n  type ResourceResolver,\n  type Stylesheet,\n  type RichTextMode,\n} from '@makeswift/controls'\n\nimport { LinkPlugin } from '../../slate/LinkPlugin'\nimport { InlinePlugin } from '../../slate/InlinePlugin'\nimport { TextAlignPlugin } from '../../slate/TextAlignPlugin'\nimport { BlockPlugin } from '../../slate/BlockPlugin'\nimport { TypographyPlugin } from '../../slate/TypographyPlugin'\nimport { InlineModePlugin } from '../../slate/InlineModePlugin'\nimport { toText } from '../../slate/utils'\n\nimport { renderRichTextV2 } from '../../runtimes/react/controls/rich-text-v2'\n\nimport { RichTextV2Plugin, Plugin } from './plugin'\nimport { RichTextV2Control } from './control'\nimport { getTranslatableData } from './translations/get-translations'\n\ntype DataType = z.infer<typeof Definition.schema.data>\ntype DataV2Type = z.infer<typeof Definition.schema.dataV2>\ntype InstanceType = RichTextV2Control\ntype UserConfig = z.infer<typeof Definition.schema.userConfig>\ntype Config = UserConfig & {\n  defaultValue: string\n  plugins: RichTextV2Plugin[]\n}\n\nclass Definition extends BaseRichTextDefinition<ReactNode, Config, InstanceType> {\n  constructor({ mode, defaultValue }: UserConfig, plugins?: RichTextV2Plugin[]) {\n    super({\n      mode,\n      defaultValue:\n        defaultValue ??\n        (mode === Definition.Mode.Inline ? 'Edit this text' : Definition.generateParagraph()),\n      plugins:\n        plugins ??\n        (mode === Definition.Mode.Inline\n          ? [InlineModePlugin()]\n          : [BlockPlugin(), TypographyPlugin(), TextAlignPlugin(), InlinePlugin(), LinkPlugin()]),\n    })\n  }\n\n  static generateParagraph(): string {\n    return ipsum(3)\n  }\n\n  static deserialize(\n    data: DeserializedRecord,\n    deserializeCallback: (r: DeserializedRecord) => ControlDefinition,\n  ): RichTextV2Definition {\n    if (data.type !== Definition.type) {\n      throw new Error(`RichText: expected type ${Definition.type}, got ${data.type}`)\n    }\n\n    const { config } = Definition.fullSchema({\n      pluginDef: SerializationSchema.deserializedRecord,\n    }).definition.parse(data)\n\n    const { plugins, ...userConfig } = config\n\n    return new RichTextV2Definition(\n      userConfig,\n      plugins.map(({ control }) =>\n        control ? { control: { definition: deserializeCallback(control?.definition) } } : {},\n      ),\n    )\n  }\n\n  static fullSchema<S extends SchemaTypeAny>({ pluginDef }: { pluginDef: S }) {\n    const baseSchema = super.schema\n    const plugin = z.object({\n      control: z\n        .object({\n          definition: pluginDef,\n        })\n        .optional(),\n    })\n\n    const config = baseSchema.userConfig.extend({\n      defaultValue: z.string(),\n      plugins: z.array(plugin),\n    })\n\n    return {\n      ...baseSchema,\n      config,\n      definition: z.object({\n        type: baseSchema.type,\n        config,\n      }),\n    }\n  }\n\n  get configSchema(): SchemaType<Config> {\n    return Definition.fullSchema({ pluginDef: z.any() as SchemaType<ControlDefinition> }).config\n  }\n\n  createInstance(args: ControlInstanceArgs) {\n    return new RichTextV2Control(this, args)\n  }\n\n  resolveValue(\n    data: DataType | undefined,\n    _resolver: ResourceResolver,\n    _stylesheet: Stylesheet,\n    control?: InstanceType,\n  ): Resolvable<ReactNode | undefined> {\n    const stableValue = StableValue({\n      name: Definition.type,\n      read: () => renderRichTextV2(data, this.config, control ?? null),\n    })\n\n    return {\n      ...stableValue,\n      triggerResolve: async () => {},\n    }\n  }\n\n  getTranslatableData(data: DataType | undefined): Data {\n    if (data == null) return null\n    return getTranslatableData(Definition.dataToNodes(data), this.config.plugins)\n  }\n\n  get pluginControls(): RichTextPluginControl[] {\n    return this.config.plugins.map(plugin => plugin.control).filter(isNotNil)\n  }\n\n  pluginControlAt(index: number): RichTextPluginControl | undefined {\n    return this.pluginControls[index]\n  }\n\n  toText(data: DataType | undefined): string {\n    if (data == null) return ''\n    return toText(Definition.dataToNodes(data), this.config.mode ?? Definition.Mode.Block)\n  }\n}\n\nexport class RichTextV2Definition extends Definition {}\n\nexport function RichText(config?: UserConfig): RichTextV2Definition {\n  return new RichTextV2Definition(config ?? {})\n}\n\nRichText.Mode = Definition.Mode\nRichText.isV1Data = Definition.isV1Data\nRichText.dataToNodes = Definition.dataToNodes\nRichText.Plugin = Plugin\n\nexport { RichTextMode as RichTextV2Mode, type DataV2Type as RichTextDataV2, RichTextV2Control }\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/controls/rich-text-v2/rich-text-v2.ts"],"sourcesContent":["import { ReactNode } from 'react'\nimport { z } from 'zod'\n// @ts-expect-error: there are no types for 'corporate-ipsum'\nimport ipsum from 'corporate-ipsum'\n\nimport {\n  RichTextDefinition as BaseRichTextDefinition,\n  isNotNil,\n  ControlDefinition,\n  SerializationSchema,\n  StableValue,\n  type Data,\n  type Resolvable,\n  type ControlInstanceArgs,\n  type DeserializedRecord,\n  type SchemaType,\n  type SchemaTypeAny,\n  type RichTextPluginControl,\n  type ResourceResolver,\n  type Stylesheet,\n  type RichTextMode,\n} from '@makeswift/controls'\n\nimport { LinkPlugin } from '../../slate/LinkPlugin'\nimport { InlinePlugin } from '../../slate/InlinePlugin'\nimport { TextAlignPlugin } from '../../slate/TextAlignPlugin'\nimport { BlockPlugin } from '../../slate/BlockPlugin'\nimport { TypographyPlugin } from '../../slate/TypographyPlugin'\nimport { InlineModePlugin } from '../../slate/InlineModePlugin'\nimport { toText } from '../../slate/utils'\n\nimport { renderRichTextV2 } from '../../runtimes/react/controls/rich-text-v2'\n\nimport { RichTextV2Plugin, Plugin } from './plugin'\nimport { RichTextV2Control } from './control'\nimport { getTranslatableData } from './translations/get-translations'\n\ntype DataType = z.infer<typeof Definition.schema.data>\ntype DataV2Type = z.infer<typeof Definition.schema.dataV2>\ntype InstanceType = RichTextV2Control\ntype UserConfig = z.infer<typeof Definition.schema.userConfig>\ntype Config = UserConfig & {\n  defaultValue: string\n}\n\nclass Definition extends BaseRichTextDefinition<ReactNode, Config, InstanceType> {\n  readonly plugins: RichTextV2Plugin[]\n\n  constructor({ mode, defaultValue }: UserConfig, plugins?: RichTextV2Plugin[]) {\n    super({\n      mode,\n      defaultValue:\n        defaultValue ??\n        (mode === Definition.Mode.Inline ? 'Edit this text' : Definition.generateParagraph()),\n    })\n\n    // The built-in plugin set is currently determined entirely by `mode` and\n    // has remained stable across runtime versions, so it does not need to be\n    // stored in the internal config. When that changes, we should:\n    //  - introduce a plugin registry\n    //  - have the config carry the IDs of selected plugins\n    //  - use the current inline and block plugin sets as defaults when\n    //    deserializing a legacy config that does not include plugin IDs\n    this.plugins =\n      plugins ??\n      (mode === Definition.Mode.Inline\n        ? [InlineModePlugin()]\n        : [BlockPlugin(), TypographyPlugin(), TextAlignPlugin(), InlinePlugin(), LinkPlugin()])\n  }\n\n  static generateParagraph(): string {\n    return ipsum(3)\n  }\n\n  static deserialize(\n    data: DeserializedRecord,\n    deserializeCallback: (r: DeserializedRecord) => ControlDefinition,\n  ): RichTextV2Definition {\n    if (data.type !== Definition.type) {\n      throw new Error(`RichText: expected type ${Definition.type}, got ${data.type}`)\n    }\n\n    const { config, plugins } = Definition.fullSchema({\n      pluginDef: SerializationSchema.deserializedRecord,\n    }).definition.parse(data)\n\n    const { plugins: configPlugins, ...userConfig } = config\n\n    return new RichTextV2Definition(\n      userConfig,\n      (plugins ?? configPlugins ?? []).map(({ control }) =>\n        control ? { control: { definition: deserializeCallback(control?.definition) } } : {},\n      ),\n    )\n  }\n\n  static fullSchema<S extends SchemaTypeAny>({ pluginDef }: { pluginDef: S }) {\n    const baseSchema = super.schema\n    const plugin = z.object({\n      control: z\n        .object({\n          definition: pluginDef,\n        })\n        .optional(),\n    })\n\n    const plugins = z.array(plugin)\n\n    const config = Definition.configSchema().extend({\n      // plugins have been moved from config to the definition itself; keeping\n      // the field here as optional so we can deserialize definitions coming from\n      // older runtimes\n      plugins: plugins.optional(),\n    })\n\n    return {\n      ...baseSchema,\n      config,\n      definition: z.object({\n        type: baseSchema.type,\n        // marked as optional for backward compatibility with older runtimes\n        plugins: plugins.optional(),\n        config,\n      }),\n    }\n  }\n\n  static configSchema() {\n    return super.schema.userConfig.extend({\n      defaultValue: z.string(),\n    })\n  }\n\n  get configSchema(): SchemaType<Config> {\n    return Definition.configSchema()\n  }\n\n  createInstance(args: ControlInstanceArgs) {\n    return new RichTextV2Control(this, args)\n  }\n\n  resolveValue(\n    data: DataType | undefined,\n    _resolver: ResourceResolver,\n    _stylesheet: Stylesheet,\n    control?: InstanceType,\n  ): Resolvable<ReactNode | undefined> {\n    const stableValue = StableValue({\n      name: Definition.type,\n      read: () => renderRichTextV2({ data, config: this.config, control: control ?? null }),\n    })\n\n    return {\n      ...stableValue,\n      triggerResolve: async () => {},\n    }\n  }\n\n  getTranslatableData(data: DataType | undefined): Data {\n    if (data == null) return null\n    return getTranslatableData(Definition.dataToNodes(data), this.plugins)\n  }\n\n  get pluginControls(): RichTextPluginControl[] {\n    return this.plugins.map(plugin => plugin.control).filter(isNotNil)\n  }\n\n  pluginControlAt(index: number): RichTextPluginControl | undefined {\n    return this.pluginControls[index]\n  }\n\n  toText(data: DataType | undefined): string {\n    if (data == null) return ''\n    return toText(Definition.dataToNodes(data), this.config.mode ?? Definition.Mode.Block)\n  }\n}\n\nexport class RichTextV2Definition extends Definition {}\n\nexport function RichText(config?: UserConfig): RichTextV2Definition {\n  return new RichTextV2Definition(config ?? {})\n}\n\nRichText.Mode = Definition.Mode\nRichText.isV1Data = Definition.isV1Data\nRichText.dataToNodes = Definition.dataToNodes\nRichText.Plugin = Plugin\n\nexport { RichTextMode as RichTextV2Mode, type DataV2Type as RichTextDataV2, RichTextV2Control }\n"],"mappings":"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","names":[]}

package/dist/esm/controls/serialization/base/visitor.js

@@ -13,8 +13,7 @@ class BaseControlSerializationVisitor extends ControlSerializationVisitor {
     super([serializeDefinitionPlugin, ...plugins]);
   }
   visitRichTextV2(def) {
-    const { plugins, ...config } = def.config;
-    const pluginDefs = plugins.map(
+    const pluginDefs = def.plugins.map(
       ({ control }) => control ? {
         control: {
           definition: control.definition,
@@ -27,7 +26,10 @@ class BaseControlSerializationVisitor extends ControlSerializationVisitor {
       } : {}
     );
     const serialized = serializeObject(
-      { config: { ...config, plugins: pluginDefs } },
+      // Continue serializing plugins as part of the config for the time being
+      // for builder compatibility; the current runtime accept plugins either in
+      // the config or at the definition level -- see `RichTextV2Definition.fullSchema`
+      { config: { ...def.config, plugins: pluginDefs } },
       this.serializationPlugins
     );
     return { ...serialized, type: RichTextV2Definition.type };

package/dist/esm/controls/serialization/base/visitor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/controls/serialization/base/visitor.ts"],"sourcesContent":["import {\n  ControlDefinition,\n  SerializedRecord,\n  serializeObject,\n  SerializationPlugin,\n  ControlSerializationVisitor,\n} from '@makeswift/controls'\n\nimport { RichTextV2Definition } from '../../rich-text-v2'\n\nexport class BaseControlSerializationVisitor extends ControlSerializationVisitor {\n  constructor(plugins: SerializationPlugin<any>[]) {\n    const serializeDefinitionPlugin: SerializationPlugin<ControlDefinition> = {\n      match: (val: unknown) => val instanceof ControlDefinition,\n      serialize: (val: ControlDefinition) => val.accept(this),\n    }\n\n    super([serializeDefinitionPlugin, ...plugins])\n  }\n\n  visitRichTextV2(def: RichTextV2Definition): SerializedRecord {\n    const { plugins, ...config } = def.config\n\n    // serialize only the plugin control definition, if any\n    const pluginDefs = plugins.map(({ control }) =>\n      control\n        ? {\n            control: {\n              definition: control.definition,\n              // FIXME: remove getValue/onChange stubs once we released a version of the builder\n              // built against the runtime where these can be optional\n              getValue: () => undefined,\n              onChange: () => {},\n            },\n          }\n        : {},\n    )\n\n    const serialized = serializeObject(\n      { config: { ...config, plugins: pluginDefs } },\n      this.serializationPlugins,\n    ) as SerializedRecord\n\n    return { ...serialized, type: RichTextV2Definition.type }\n  }\n}\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EAEA;AAAA,EAEA;AAAA,OACK;AAEP,SAAS,4BAA4B;AAE9B,MAAM,wCAAwC,4BAA4B;AAAA,EAC/E,YAAY,SAAqC;AAC/C,UAAM,4BAAoE;AAAA,MACxE,OAAO,CAAC,QAAiB,eAAe;AAAA,MACxC,WAAW,CAAC,QAA2B,IAAI,OAAO,IAAI;AAAA,IACxD;AAEA,UAAM,CAAC,2BAA2B,GAAG,OAAO,CAAC;AAAA,EAC/C;AAAA,EAEA,gBAAgB,KAA6C;AAC3D,UAAM,EAAE,SAAS,GAAG,OAAO,IAAI,IAAI;AAGnC,UAAM,aAAa,QAAQ;AAAA,MAAI,CAAC,EAAE,QAAQ,MACxC,UACI;AAAA,QACE,SAAS;AAAA,UACP,YAAY,QAAQ;AAAA;AAAA;AAAA,UAGpB,UAAU,MAAM;AAAA,UAChB,UAAU,MAAM;AAAA,UAAC;AAAA,QACnB;AAAA,MACF,IACA,CAAC;AAAA,IACP;AAEA,UAAM,aAAa;AAAA,MACjB,EAAE,QAAQ,EAAE,GAAG,QAAQ,SAAS,WAAW,EAAE;AAAA,MAC7C,KAAK;AAAA,IACP;AAEA,WAAO,EAAE,GAAG,YAAY,MAAM,qBAAqB,KAAK;AAAA,EAC1D;AACF;","names":[]}
+{"version":3,"sources":["../../../../../src/controls/serialization/base/visitor.ts"],"sourcesContent":["import {\n  ControlDefinition,\n  SerializedRecord,\n  serializeObject,\n  SerializationPlugin,\n  ControlSerializationVisitor,\n} from '@makeswift/controls'\n\nimport { RichTextV2Definition } from '../../rich-text-v2'\n\nexport class BaseControlSerializationVisitor extends ControlSerializationVisitor {\n  constructor(plugins: SerializationPlugin<any>[]) {\n    const serializeDefinitionPlugin: SerializationPlugin<ControlDefinition> = {\n      match: (val: unknown) => val instanceof ControlDefinition,\n      serialize: (val: ControlDefinition) => val.accept(this),\n    }\n\n    super([serializeDefinitionPlugin, ...plugins])\n  }\n\n  visitRichTextV2(def: RichTextV2Definition): SerializedRecord {\n    // serialize only the plugin control definition, if any\n    const pluginDefs = def.plugins.map(({ control }) =>\n      control\n        ? {\n            control: {\n              definition: control.definition,\n              // FIXME: remove getValue/onChange stubs once we released a version of the builder\n              // built against the runtime where these can be optional\n              getValue: () => undefined,\n              onChange: () => {},\n            },\n          }\n        : {},\n    )\n\n    const serialized = serializeObject(\n      // Continue serializing plugins as part of the config for the time being\n      // for builder compatibility; the current runtime accept plugins either in\n      // the config or at the definition level -- see `RichTextV2Definition.fullSchema`\n      { config: { ...def.config, plugins: pluginDefs } },\n      this.serializationPlugins,\n    ) as SerializedRecord\n\n    return { ...serialized, type: RichTextV2Definition.type }\n  }\n}\n"],"mappings":"AAAA;AAAA,EACE;AAAA,EAEA;AAAA,EAEA;AAAA,OACK;AAEP,SAAS,4BAA4B;AAE9B,MAAM,wCAAwC,4BAA4B;AAAA,EAC/E,YAAY,SAAqC;AAC/C,UAAM,4BAAoE;AAAA,MACxE,OAAO,CAAC,QAAiB,eAAe;AAAA,MACxC,WAAW,CAAC,QAA2B,IAAI,OAAO,IAAI;AAAA,IACxD;AAEA,UAAM,CAAC,2BAA2B,GAAG,OAAO,CAAC;AAAA,EAC/C;AAAA,EAEA,gBAAgB,KAA6C;AAE3D,UAAM,aAAa,IAAI,QAAQ;AAAA,MAAI,CAAC,EAAE,QAAQ,MAC5C,UACI;AAAA,QACE,SAAS;AAAA,UACP,YAAY,QAAQ;AAAA;AAAA;AAAA,UAGpB,UAAU,MAAM;AAAA,UAChB,UAAU,MAAM;AAAA,UAAC;AAAA,QACnB;AAAA,MACF,IACA,CAAC;AAAA,IACP;AAEA,UAAM,aAAa;AAAA;AAAA;AAAA;AAAA,MAIjB,EAAE,QAAQ,EAAE,GAAG,IAAI,QAAQ,SAAS,WAAW,EAAE;AAAA,MACjD,KAAK;AAAA,IACP;AAEA,WAAO,EAAE,GAAG,YAAY,MAAM,qBAAqB,KAAK;AAAA,EAC1D;AACF;","names":[]}

package/dist/esm/controls/visitors/merge-translations-visitor.js

@@ -11,7 +11,7 @@ class ReactMergeTranslationsVisitor extends MergeTranslationsVisitor {
       descendants: mergeTranslatedNodes(
         descendants,
         translatedData,
-        def.config.plugins
+        def.plugins
       )
     };
   }

package/dist/esm/controls/visitors/merge-translations-visitor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/controls/visitors/merge-translations-visitor.ts"],"sourcesContent":["import { Data, DataType, MergeTranslationsVisitor } from '@makeswift/controls'\n\nimport { RichTextV2Definition } from '../rich-text-v2'\nimport { RichTextTranslationDto } from '../rich-text-v2/translations/translations-core'\nimport { mergeTranslatedNodes } from '../rich-text-v2/translations/merge-translations'\n\nexport class ReactMergeTranslationsVisitor extends MergeTranslationsVisitor {\n  visitRichTextV2(\n    def: RichTextV2Definition,\n    data: DataType<RichTextV2Definition> | undefined,\n    translatedData: Data,\n  ): Data {\n    if (data == null || translatedData == null) return data\n\n    const { descendants, ...rest } = RichTextV2Definition.normalizeData(data)\n\n    return {\n      ...rest,\n      descendants: mergeTranslatedNodes(\n        descendants,\n        translatedData as RichTextTranslationDto,\n        def.config.plugins,\n      ),\n    }\n  }\n}\n"],"mappings":"AAAA,SAAyB,gCAAgC;AAEzD,SAAS,4BAA4B;AAErC,SAAS,4BAA4B;AAE9B,MAAM,sCAAsC,yBAAyB;AAAA,EAC1E,gBACE,KACA,MACA,gBACM;AACN,QAAI,QAAQ,QAAQ,kBAAkB;AAAM,aAAO;AAEnD,UAAM,EAAE,aAAa,GAAG,KAAK,IAAI,qBAAqB,cAAc,IAAI;AAExE,WAAO;AAAA,MACL,GAAG;AAAA,MACH,aAAa;AAAA,QACX;AAAA,QACA;AAAA,QACA,IAAI,OAAO;AAAA,MACb;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/controls/visitors/merge-translations-visitor.ts"],"sourcesContent":["import { Data, DataType, MergeTranslationsVisitor } from '@makeswift/controls'\n\nimport { RichTextV2Definition } from '../rich-text-v2'\nimport { RichTextTranslationDto } from '../rich-text-v2/translations/translations-core'\nimport { mergeTranslatedNodes } from '../rich-text-v2/translations/merge-translations'\n\nexport class ReactMergeTranslationsVisitor extends MergeTranslationsVisitor {\n  visitRichTextV2(\n    def: RichTextV2Definition,\n    data: DataType<RichTextV2Definition> | undefined,\n    translatedData: Data,\n  ): Data {\n    if (data == null || translatedData == null) return data\n\n    const { descendants, ...rest } = RichTextV2Definition.normalizeData(data)\n\n    return {\n      ...rest,\n      descendants: mergeTranslatedNodes(\n        descendants,\n        translatedData as RichTextTranslationDto,\n        def.plugins,\n      ),\n    }\n  }\n}\n"],"mappings":"AAAA,SAAyB,gCAAgC;AAEzD,SAAS,4BAA4B;AAErC,SAAS,4BAA4B;AAE9B,MAAM,sCAAsC,yBAAyB;AAAA,EAC1E,gBACE,KACA,MACA,gBACM;AACN,QAAI,QAAQ,QAAQ,kBAAkB;AAAM,aAAO;AAEnD,UAAM,EAAE,aAAa,GAAG,KAAK,IAAI,qBAAqB,cAAc,IAAI;AAExE,WAAO;AAAA,MACL,GAAG;AAAA,MACH,aAAa;AAAA,QACX;AAAA,QACA;AAAA,QACA,IAAI;AAAA,MACN;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/dist/esm/runtimes/react/components/framework-context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/components/framework-context.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ReactNode,\n  type PropsWithChildren,\n  type CSSProperties,\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type ForwardRefExoticComponent,\n  type RefAttributes,\n  forwardRef,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\n\nimport { type LinkData } from '@makeswift/prop-controllers'\n\nimport { type Snippet } from '../../../client/page-snapshot'\n\nimport { type RenderElementPayload } from '../server/render-element-payload'\n\nimport { BaseHeadSnippet } from './page/HeadSnippet'\n\ntype HeadComponent = (props: { children: ReactNode }) => ReactNode\ntype HeadSnippet = (props: { snippet: Snippet }) => ReactNode\ntype ImageComponent = (props: {\n  src: string\n  alt: string\n  sizes?: string\n  width?: number\n  height?: number\n  priority?: boolean\n  fill?: boolean\n  style?: CSSProperties\n}) => ReactNode\n\ntype LinkProps = Omit<ComponentPropsWithoutRef<'a'>, 'onClick'> & {\n  linkType?: LinkData['type']\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => unknown\n}\n\ntype LinkComponent = ForwardRefExoticComponent<RefAttributes<HTMLAnchorElement> & LinkProps>\n\nexport type FrameworkContext = {\n  Head: HeadComponent\n  HeadSnippet: HeadSnippet\n  Image: ImageComponent\n  Link: LinkComponent\n  /**\n   * Callback to render a single RSC element on the server and return the result.\n   */\n  renderRSCElement?: (args: RenderElementPayload) => Promise<ReactNode>\n}\n\n// React 19 automatically hoists metadata tags to the <head>\nconst DefaultHead = ({ children }: PropsWithChildren) => <>{children}</>\n\nconst DefaultHeadSnippet = BaseHeadSnippet\n\nconst DefaultImage: ImageComponent = ({ priority, fill, style, ...props }) => (\n  <img\n    {...props}\n    style={{\n      ...(fill\n        ? {\n            height: '100%',\n            width: '100%',\n            objectFit: 'cover',\n          }\n        : {}),\n      ...style,\n    }}\n    loading={priority ? 'eager' : 'lazy'}\n  />\n)\n\nconst DefaultLink: LinkComponent = forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ linkType, ...props }, ref) => <a {...props} ref={ref} />,\n)\n\nconst FrameworkContext = createContext<Partial<FrameworkContext>>({})\n\nexport const FrameworkContextProvider = ({\n  value,\n  children,\n}: PropsWithChildren<{ value: Partial<FrameworkContext> }>) => {\n  const parentContext = useContext(FrameworkContext)\n  const mergedContext = useMemo(() => ({ ...parentContext, ...value }), [parentContext, value])\n\n  return <FrameworkContext.Provider value={mergedContext}>{children}</FrameworkContext.Provider>\n}\n\nconst defaultContext: FrameworkContext = {\n  Head: DefaultHead,\n  HeadSnippet: DefaultHeadSnippet,\n  Image: DefaultImage,\n  Link: DefaultLink,\n}\n\nexport function useFrameworkContext(): FrameworkContext {\n  return { ...defaultContext, ...useContext(FrameworkContext) }\n}\n"],"mappings":";AAwDyD;AAtDzD;AAAA,EAQE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAQP,SAAS,uBAAuB;AAkChC,MAAM,cAAc,CAAC,EAAE,SAAS,MAAyB,gCAAG,UAAS;AAErE,MAAM,qBAAqB;AAE3B,MAAM,eAA+B,CAAC,EAAE,UAAU,MAAM,OAAO,GAAG,MAAM,MACtE;AAAA,EAAC;AAAA;AAAA,IACE,GAAG;AAAA,IACJ,OAAO;AAAA,MACL,GAAI,OACA;AAAA,QACE,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,WAAW;AAAA,MACb,IACA,CAAC;AAAA,MACL,GAAG;AAAA,IACL;AAAA,IACA,SAAS,WAAW,UAAU;AAAA;AAChC;AAGF,MAAM,cAA6B;AAAA,EACjC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,QAAQ,oBAAC,OAAG,GAAG,OAAO,KAAU;AAC3D;AAEA,MAAM,mBAAmB,cAAyC,CAAC,CAAC;AAE7D,MAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EACA;AACF,MAA+D;AAC7D,QAAM,gBAAgB,WAAW,gBAAgB;AACjD,QAAM,gBAAgB,QAAQ,OAAO,EAAE,GAAG,eAAe,GAAG,MAAM,IAAI,CAAC,eAAe,KAAK,CAAC;AAE5F,SAAO,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,eAAgB,UAAS;AACpE;AAEA,MAAM,iBAAmC;AAAA,EACvC,MAAM;AAAA,EACN,aAAa;AAAA,EACb,OAAO;AAAA,EACP,MAAM;AACR;AAEO,SAAS,sBAAwC;AACtD,SAAO,EAAE,GAAG,gBAAgB,GAAG,WAAW,gBAAgB,EAAE;AAC9D;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/components/framework-context.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ReactNode,\n  type PropsWithChildren,\n  type CSSProperties,\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type ForwardRefExoticComponent,\n  type RefAttributes,\n  forwardRef,\n  createContext,\n  useContext,\n  useMemo,\n} from 'react'\n\nimport { type LinkData } from '@makeswift/prop-controllers'\n\nimport { type Snippet } from '../../../client/page-snapshot'\n\nimport { type RenderElementPayload } from '../server/render-element-payload'\n\nimport { BaseHeadSnippet } from './page/HeadSnippet'\n\ntype HeadComponent = (props: { children: ReactNode }) => ReactNode\ntype HeadSnippet = (props: { snippet: Snippet }) => ReactNode\ntype ImageComponent = (props: {\n  src: string\n  alt: string\n  sizes?: string\n  width?: number\n  height?: number\n  priority?: boolean\n  fill?: boolean\n  style?: CSSProperties\n  className?: string\n}) => ReactNode\n\ntype LinkProps = Omit<ComponentPropsWithoutRef<'a'>, 'onClick'> & {\n  linkType?: LinkData['type']\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => unknown\n}\n\ntype LinkComponent = ForwardRefExoticComponent<RefAttributes<HTMLAnchorElement> & LinkProps>\n\nexport type FrameworkContext = {\n  Head: HeadComponent\n  HeadSnippet: HeadSnippet\n  Image: ImageComponent\n  Link: LinkComponent\n  /**\n   * Callback to render a single RSC element on the server and return the result.\n   */\n  renderRSCElement?: (args: RenderElementPayload) => Promise<ReactNode>\n}\n\n// React 19 automatically hoists metadata tags to the <head>\nconst DefaultHead = ({ children }: PropsWithChildren) => <>{children}</>\n\nconst DefaultHeadSnippet = BaseHeadSnippet\n\nconst DefaultImage: ImageComponent = ({ priority, fill, style, ...props }) => (\n  <img\n    {...props}\n    style={{\n      ...(fill\n        ? {\n            height: '100%',\n            width: '100%',\n            objectFit: 'cover',\n          }\n        : {}),\n      ...style,\n    }}\n    loading={priority ? 'eager' : 'lazy'}\n  />\n)\n\nconst DefaultLink: LinkComponent = forwardRef<HTMLAnchorElement, LinkProps>(\n  ({ linkType, ...props }, ref) => <a {...props} ref={ref} />,\n)\n\nconst FrameworkContext = createContext<Partial<FrameworkContext>>({})\n\nexport const FrameworkContextProvider = ({\n  value,\n  children,\n}: PropsWithChildren<{ value: Partial<FrameworkContext> }>) => {\n  const parentContext = useContext(FrameworkContext)\n  const mergedContext = useMemo(() => ({ ...parentContext, ...value }), [parentContext, value])\n\n  return <FrameworkContext.Provider value={mergedContext}>{children}</FrameworkContext.Provider>\n}\n\nconst defaultContext: FrameworkContext = {\n  Head: DefaultHead,\n  HeadSnippet: DefaultHeadSnippet,\n  Image: DefaultImage,\n  Link: DefaultLink,\n}\n\nexport function useFrameworkContext(): FrameworkContext {\n  return { ...defaultContext, ...useContext(FrameworkContext) }\n}\n"],"mappings":";AAyDyD;AAvDzD;AAAA,EAQE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAQP,SAAS,uBAAuB;AAmChC,MAAM,cAAc,CAAC,EAAE,SAAS,MAAyB,gCAAG,UAAS;AAErE,MAAM,qBAAqB;AAE3B,MAAM,eAA+B,CAAC,EAAE,UAAU,MAAM,OAAO,GAAG,MAAM,MACtE;AAAA,EAAC;AAAA;AAAA,IACE,GAAG;AAAA,IACJ,OAAO;AAAA,MACL,GAAI,OACA;AAAA,QACE,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,WAAW;AAAA,MACb,IACA,CAAC;AAAA,MACL,GAAG;AAAA,IACL;AAAA,IACA,SAAS,WAAW,UAAU;AAAA;AAChC;AAGF,MAAM,cAA6B;AAAA,EACjC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,QAAQ,oBAAC,OAAG,GAAG,OAAO,KAAU;AAC3D;AAEA,MAAM,mBAAmB,cAAyC,CAAC,CAAC;AAE7D,MAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,EACA;AACF,MAA+D;AAC7D,QAAM,gBAAgB,WAAW,gBAAgB;AACjD,QAAM,gBAAgB,QAAQ,OAAO,EAAE,GAAG,eAAe,GAAG,MAAM,IAAI,CAAC,eAAe,KAAK,CAAC;AAE5F,SAAO,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,eAAgB,UAAS;AACpE;AAEA,MAAM,iBAAmC;AAAA,EACvC,MAAM;AAAA,EACN,aAAa;AAAA,EACb,OAAO;AAAA,EACP,MAAM;AACR;AAEO,SAAS,sBAAwC;AACtD,SAAO,EAAE,GAAG,gBAAgB,GAAG,WAAW,gBAAgB,EAAE;AAC9D;","names":[]}

package/dist/esm/runtimes/react/controls/rich-text-v2/EditableTextV2/editable-text-v2.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import {
+  memo,
   useCallback,
   useEffect,
   useMemo,
@@ -16,20 +17,31 @@ import {
   Editable
 } from "slate-react";
 import {
-  RichText
+  RichTextV2Definition,
+  RichText,
+  RichTextV2Control
 } from "../../../../../controls/rich-text-v2";
 import { useBuilderEditMode } from "../../../hooks/use-builder-edit-mode";
+import { useControlInstance } from "../../../hooks/use-control-instance";
 import { useSlateReset } from "../../use-slate-reset";
 import { BuilderEditMode } from "../../../../../state/modules/builder-edit-mode";
 import { pollBoxModel } from "../../../poll-box-model";
 import { withBuilder, withLocalChanges } from "../../../../../slate";
+import { NodeValue } from "../../node-value";
 import { useSyncDOMSelection } from "./useSyncDOMSelection";
 import { RichTextV2Element } from "./render-element";
 import { RichTextV2Leaf } from "./render-leaf";
 import { useSyncRemoteChanges } from "./useRemoteChanges";
 import { defaultValue, usePresetValue } from "./usePresetValue";
-function EditableTextV2({ text, config, control }) {
-  const plugins = useMemo(() => config.plugins, [config]);
+const EditableTextV2Value = memo(function EditableTextV2Value2({
+  instanceKey,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(NodeValue, { instanceKey, children: /* @__PURE__ */ jsx(EditableTextV2, { instanceKey, ...props }) });
+});
+function EditableTextV2({ text, config, instanceKey }) {
+  const plugins = useMemo(() => new RichTextV2Definition(config).plugins, [config]);
+  const control = useControlInstance(instanceKey, RichTextV2Control);
   const [editor] = useState(
     () => plugins.reduceRight(
       (editor2, plugin) => plugin?.withPlugin?.(editor2) ?? editor2,
@@ -145,6 +157,6 @@ function EditableTextV2({ text, config, control }) {
   ) });
 }
 export {
-  EditableTextV2
+  EditableTextV2Value
 };
 //# sourceMappingURL=editable-text-v2.js.map

package/dist/esm/runtimes/react/controls/rich-text-v2/EditableTextV2/editable-text-v2.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text-v2/EditableTextV2/editable-text-v2.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FocusEvent,\n  type KeyboardEvent,\n  type MouseEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { createEditor } from 'slate'\nimport isHotkey from 'is-hotkey'\nimport {\n  withReact,\n  ReactEditor,\n  RenderElementProps,\n  RenderLeafProps,\n  Slate,\n  Editable,\n} from 'slate-react'\n\nimport { type ConfigType } from '@makeswift/controls'\n\nimport {\n  RichTextV2Definition,\n  RichText,\n  RichTextV2Control,\n  type RichTextDataV2,\n} from '../../../../../controls/rich-text-v2'\n\nimport { useBuilderEditMode } from '../../../hooks/use-builder-edit-mode'\nimport { useSlateReset } from '../../use-slate-reset'\nimport { BuilderEditMode } from '../../../../../state/modules/builder-edit-mode'\nimport { pollBoxModel } from '../../../poll-box-model'\nimport { withBuilder, withLocalChanges } from '../../../../../slate'\n\nimport { useSyncDOMSelection } from './useSyncDOMSelection'\nimport { RichTextV2Element } from './render-element'\nimport { RichTextV2Leaf } from './render-leaf'\nimport { useSyncRemoteChanges } from './useRemoteChanges'\nimport { defaultValue, usePresetValue } from './usePresetValue'\n\ntype Props = {\n  text?: RichTextDataV2\n  config: ConfigType<RichTextV2Definition>\n  control: RichTextV2Control | null\n}\n\nexport function EditableTextV2({ text, config, control }: Props) {\n  const plugins = useMemo(() => config.plugins, [config])\n\n  const [editor] = useState(() =>\n    plugins.reduceRight(\n      (editor, plugin) => plugin?.withPlugin?.(editor) ?? editor,\n      withLocalChanges(withBuilder(withReact(createEditor()))),\n    ),\n  )\n\n  useEffect(() => {\n    if (control == null) return\n\n    const element = ReactEditor.toDOMNode(editor, editor)\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => control.changeBoxModel(boxModel),\n    })\n  }, [editor, control])\n\n  // ------ Preserving selection ------\n\n  const isPreservingFocus = useRef(false)\n  useSyncDOMSelection(editor, isPreservingFocus)\n  const editMode = useBuilderEditMode()\n\n  useEffect(() => {\n    /**\n     * This is required because clicking on the overlay has `relatedTarget` null just like the sidebar, but\n     * - in the case of the overlay we switch to BUILD mode\n     * - in the case of the sidebar we preserve the selection\n     */\n    if (editMode !== BuilderEditMode.CONTENT) {\n      isPreservingFocus.current = false\n      ReactEditor.deselect(editor)\n    }\n  }, [editMode, editor])\n\n  // ------ Syncing remote changes ------\n\n  useSyncRemoteChanges(editor, text)\n\n  // ------ Default value ------\n\n  const presetValue = usePresetValue(config)\n\n  const initialValue = useMemo(\n    () => (text && RichText.dataToNodes(text)) ?? presetValue,\n    [text, presetValue],\n  )\n\n  useEffect(() => {\n    control?.setEditor(editor)\n    control?.setDefaultValue(defaultValue)\n  }, [control, editor])\n\n  /**\n   * When initialValue is set to the default value we need to trigger an local change so that the sidebar updates and so the data is saved\n   */\n  useEffect(() => {\n    if (initialValue === presetValue) {\n      control?.onLocalUserChange()\n    }\n  }, [control, initialValue, presetValue])\n\n  // ------ Rendering ------\n\n  const renderElement = useCallback(\n    (props: RenderElementProps) => {\n      return <RichTextV2Element {...props} plugins={plugins} />\n    },\n    [plugins],\n  )\n\n  const renderLeaf = useCallback(\n    (props: RenderLeafProps) => {\n      return <RichTextV2Leaf {...props} plugins={plugins} />\n    },\n    [plugins],\n  )\n\n  // ------ Event handlers ------\n\n  const handleFocus = useCallback(() => {\n    isPreservingFocus.current = true\n    control?.select()\n  }, [control])\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (isHotkey('mod+shift+z', e)) return control?.redo()\n      if (isHotkey('mod+z', e)) return control?.undo()\n      if (isHotkey('escape')(e)) {\n        isPreservingFocus.current = false\n        ReactEditor.blur(editor)\n        control?.switchToBuildMode()\n      }\n\n      if (editMode === BuilderEditMode.CONTENT) {\n        e.stopPropagation()\n      }\n\n      plugins.forEach(plugin => plugin?.onKeyDown?.(e, editor))\n    },\n    [control, plugins, editor, editMode],\n  )\n\n  const handleKeyUp = useCallback(\n    (e: KeyboardEvent) => {\n      if (editMode === BuilderEditMode.CONTENT) {\n        e.stopPropagation()\n        e.preventDefault()\n      }\n    },\n    [editMode],\n  )\n\n  const handleClick = useCallback(\n    (e: MouseEvent) => {\n      if (editMode === BuilderEditMode.CONTENT) {\n        e.stopPropagation()\n        e.preventDefault()\n      }\n    },\n    [editMode],\n  )\n\n  const handleBlur = useCallback((e: FocusEvent) => {\n    // outside of iframe (overlay, sidebar, etc)\n    if (e.relatedTarget == null) return\n    // another text\n    if (e.relatedTarget?.getAttribute('contenteditable') === 'true')\n      isPreservingFocus.current = false\n  }, [])\n\n  const slateReset = useSlateReset()\n\n  return (\n    <Slate editor={editor} value={initialValue}>\n      <Editable\n        className={slateReset}\n        renderLeaf={renderLeaf}\n        renderElement={renderElement}\n        onFocus={handleFocus}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onClick={handleClick}\n        onBlur={handleBlur}\n        readOnly={editMode !== BuilderEditMode.CONTENT}\n        placeholder=\"Write some text...\"\n      />\n    </Slate>\n  )\n}\n"],"mappings":";AAuHa;AArHb;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,OAAO,cAAc;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EAGA;AAAA,EACA;AAAA,OACK;AAIP;AAAA,EAEE;AAAA,OAGK;AAEP,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,aAAa,wBAAwB;AAE9C,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,cAAc,sBAAsB;AAQtC,SAAS,eAAe,EAAE,MAAM,QAAQ,QAAQ,GAAU;AAC/D,QAAM,UAAU,QAAQ,MAAM,OAAO,SAAS,CAAC,MAAM,CAAC;AAEtD,QAAM,CAAC,MAAM,IAAI;AAAA,IAAS,MACxB,QAAQ;AAAA,MACN,CAACA,SAAQ,WAAW,QAAQ,aAAaA,OAAM,KAAKA;AAAA,MACpD,iBAAiB,YAAY,UAAU,aAAa,CAAC,CAAC,CAAC;AAAA,IACzD;AAAA,EACF;AAEA,YAAU,MAAM;AACd,QAAI,WAAW;AAAM;AAErB,UAAM,UAAU,YAAY,UAAU,QAAQ,MAAM;AACpD,WAAO,aAAa;AAAA,MAClB;AAAA,MACA,kBAAkB,cAAY,QAAQ,eAAe,QAAQ;AAAA,IAC/D,CAAC;AAAA,EACH,GAAG,CAAC,QAAQ,OAAO,CAAC;AAIpB,QAAM,oBAAoB,OAAO,KAAK;AACtC,sBAAoB,QAAQ,iBAAiB;AAC7C,QAAM,WAAW,mBAAmB;AAEpC,YAAU,MAAM;AAMd,QAAI,aAAa,gBAAgB,SAAS;AACxC,wBAAkB,UAAU;AAC5B,kBAAY,SAAS,MAAM;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,UAAU,MAAM,CAAC;AAIrB,uBAAqB,QAAQ,IAAI;AAIjC,QAAM,cAAc,eAAe,MAAM;AAEzC,QAAM,eAAe;AAAA,IACnB,OAAO,QAAQ,SAAS,YAAY,IAAI,MAAM;AAAA,IAC9C,CAAC,MAAM,WAAW;AAAA,EACpB;AAEA,YAAU,MAAM;AACd,aAAS,UAAU,MAAM;AACzB,aAAS,gBAAgB,YAAY;AAAA,EACvC,GAAG,CAAC,SAAS,MAAM,CAAC;AAKpB,YAAU,MAAM;AACd,QAAI,iBAAiB,aAAa;AAChC,eAAS,kBAAkB;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,SAAS,cAAc,WAAW,CAAC;AAIvC,QAAM,gBAAgB;AAAA,IACpB,CAAC,UAA8B;AAC7B,aAAO,oBAAC,qBAAmB,GAAG,OAAO,SAAkB;AAAA,IACzD;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,UAA2B;AAC1B,aAAO,oBAAC,kBAAgB,GAAG,OAAO,SAAkB;AAAA,IACtD;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAIA,QAAM,cAAc,YAAY,MAAM;AACpC,sBAAkB,UAAU;AAC5B,aAAS,OAAO;AAAA,EAClB,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAqB;AACpB,UAAI,SAAS,eAAe,CAAC;AAAG,eAAO,SAAS,KAAK;AACrD,UAAI,SAAS,SAAS,CAAC;AAAG,eAAO,SAAS,KAAK;AAC/C,UAAI,SAAS,QAAQ,EAAE,CAAC,GAAG;AACzB,0BAAkB,UAAU;AAC5B,oBAAY,KAAK,MAAM;AACvB,iBAAS,kBAAkB;AAAA,MAC7B;AAEA,UAAI,aAAa,gBAAgB,SAAS;AACxC,UAAE,gBAAgB;AAAA,MACpB;AAEA,cAAQ,QAAQ,YAAU,QAAQ,YAAY,GAAG,MAAM,CAAC;AAAA,IAC1D;AAAA,IACA,CAAC,SAAS,SAAS,QAAQ,QAAQ;AAAA,EACrC;AAEA,QAAM,cAAc;AAAA,IAClB,CAAC,MAAqB;AACpB,UAAI,aAAa,gBAAgB,SAAS;AACxC,UAAE,gBAAgB;AAClB,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,cAAc;AAAA,IAClB,CAAC,MAAkB;AACjB,UAAI,aAAa,gBAAgB,SAAS;AACxC,UAAE,gBAAgB;AAClB,UAAE,eAAe;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,aAAa,YAAY,CAAC,MAAkB;AAEhD,QAAI,EAAE,iBAAiB;AAAM;AAE7B,QAAI,EAAE,eAAe,aAAa,iBAAiB,MAAM;AACvD,wBAAkB,UAAU;AAAA,EAChC,GAAG,CAAC,CAAC;AAEL,QAAM,aAAa,cAAc;AAEjC,SACE,oBAAC,SAAM,QAAgB,OAAO,cAC5B;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,UAAU,aAAa,gBAAgB;AAAA,MACvC,aAAY;AAAA;AAAA,EACd,GACF;AAEJ;","names":["editor"]}
+{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text-v2/EditableTextV2/editable-text-v2.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type FocusEvent,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { createEditor } from 'slate'\nimport isHotkey from 'is-hotkey'\nimport {\n  withReact,\n  ReactEditor,\n  RenderElementProps,\n  RenderLeafProps,\n  Slate,\n  Editable,\n} from 'slate-react'\n\nimport { type ControlInstanceKey, type ConfigType } from '@makeswift/controls'\n\nimport {\n  RichTextV2Definition,\n  RichText,\n  RichTextV2Control,\n  type RichTextDataV2,\n} from '../../../../../controls/rich-text-v2'\n\nimport { useBuilderEditMode } from '../../../hooks/use-builder-edit-mode'\nimport { useControlInstance } from '../../../hooks/use-control-instance'\nimport { useSlateReset } from '../../use-slate-reset'\nimport { BuilderEditMode } from '../../../../../state/modules/builder-edit-mode'\nimport { pollBoxModel } from '../../../poll-box-model'\nimport { withBuilder, withLocalChanges } from '../../../../../slate'\nimport { NodeValue } from '../../node-value'\n\nimport { useSyncDOMSelection } from './useSyncDOMSelection'\nimport { RichTextV2Element } from './render-element'\nimport { RichTextV2Leaf } from './render-leaf'\nimport { useSyncRemoteChanges } from './useRemoteChanges'\nimport { defaultValue, usePresetValue } from './usePresetValue'\n\ntype Props = {\n  text?: RichTextDataV2\n  config: ConfigType<RichTextV2Definition>\n  instanceKey: ControlInstanceKey | undefined\n}\n\nexport const EditableTextV2Value = memo(function EditableTextV2Value({\n  instanceKey,\n  ...props\n}: Props): ReactNode {\n  return (\n    <NodeValue instanceKey={instanceKey}>\n      <EditableTextV2 instanceKey={instanceKey} {...props} />\n    </NodeValue>\n  )\n})\n\nfunction EditableTextV2({ text, config, instanceKey }: Props) {\n  const plugins = useMemo(() => new RichTextV2Definition(config).plugins, [config])\n  const control = useControlInstance(instanceKey, RichTextV2Control)\n\n  const [editor] = useState(() =>\n    plugins.reduceRight(\n      (editor, plugin) => plugin?.withPlugin?.(editor) ?? editor,\n      withLocalChanges(withBuilder(withReact(createEditor()))),\n    ),\n  )\n\n  useEffect(() => {\n    if (control == null) return\n\n    const element = ReactEditor.toDOMNode(editor, editor)\n    return pollBoxModel({\n      element,\n      onBoxModelChange: boxModel => control.changeBoxModel(boxModel),\n    })\n  }, [editor, control])\n\n  // ------ Preserving selection ------\n\n  const isPreservingFocus = useRef(false)\n  useSyncDOMSelection(editor, isPreservingFocus)\n  const editMode = useBuilderEditMode()\n\n  useEffect(() => {\n    /**\n     * This is required because clicking on the overlay has `relatedTarget` null just like the sidebar, but\n     * - in the case of the overlay we switch to BUILD mode\n     * - in the case of the sidebar we preserve the selection\n     */\n    if (editMode !== BuilderEditMode.CONTENT) {\n      isPreservingFocus.current = false\n      ReactEditor.deselect(editor)\n    }\n  }, [editMode, editor])\n\n  // ------ Syncing remote changes ------\n\n  useSyncRemoteChanges(editor, text)\n\n  // ------ Default value ------\n\n  const presetValue = usePresetValue(config)\n\n  const initialValue = useMemo(\n    () => (text && RichText.dataToNodes(text)) ?? presetValue,\n    [text, presetValue],\n  )\n\n  useEffect(() => {\n    control?.setEditor(editor)\n    control?.setDefaultValue(defaultValue)\n  }, [control, editor])\n\n  /**\n   * When initialValue is set to the default value we need to trigger an local change so that the sidebar updates and so the data is saved\n   */\n  useEffect(() => {\n    if (initialValue === presetValue) {\n      control?.onLocalUserChange()\n    }\n  }, [control, initialValue, presetValue])\n\n  // ------ Rendering ------\n\n  const renderElement = useCallback(\n    (props: RenderElementProps) => {\n      return <RichTextV2Element {...props} plugins={plugins} />\n    },\n    [plugins],\n  )\n\n  const renderLeaf = useCallback(\n    (props: RenderLeafProps) => {\n      return <RichTextV2Leaf {...props} plugins={plugins} />\n    },\n    [plugins],\n  )\n\n  // ------ Event handlers ------\n\n  const handleFocus = useCallback(() => {\n    isPreservingFocus.current = true\n    control?.select()\n  }, [control])\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (isHotkey('mod+shift+z', e)) return control?.redo()\n      if (isHotkey('mod+z', e)) return control?.undo()\n      if (isHotkey('escape')(e)) {\n        isPreservingFocus.current = false\n        ReactEditor.blur(editor)\n        control?.switchToBuildMode()\n      }\n\n      if (editMode === BuilderEditMode.CONTENT) {\n        e.stopPropagation()\n      }\n\n      plugins.forEach(plugin => plugin?.onKeyDown?.(e, editor))\n    },\n    [control, plugins, editor, editMode],\n  )\n\n  const handleKeyUp = useCallback(\n    (e: KeyboardEvent) => {\n      if (editMode === BuilderEditMode.CONTENT) {\n        e.stopPropagation()\n        e.preventDefault()\n      }\n    },\n    [editMode],\n  )\n\n  const handleClick = useCallback(\n    (e: MouseEvent) => {\n      if (editMode === BuilderEditMode.CONTENT) {\n        e.stopPropagation()\n        e.preventDefault()\n      }\n    },\n    [editMode],\n  )\n\n  const handleBlur = useCallback((e: FocusEvent) => {\n    // outside of iframe (overlay, sidebar, etc)\n    if (e.relatedTarget == null) return\n    // another text\n    if (e.relatedTarget?.getAttribute('contenteditable') === 'true')\n      isPreservingFocus.current = false\n  }, [])\n\n  const slateReset = useSlateReset()\n\n  return (\n    <Slate editor={editor} value={initialValue}>\n      <Editable\n        className={slateReset}\n        renderLeaf={renderLeaf}\n        renderElement={renderElement}\n        onFocus={handleFocus}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onClick={handleClick}\n        onBlur={handleBlur}\n        readOnly={editMode !== BuilderEditMode.CONTENT}\n        placeholder=\"Write some text...\"\n      />\n    </Slate>\n  )\n}\n"],"mappings":"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","names":["EditableTextV2Value","editor"]}

package/dist/esm/runtimes/react/controls/rich-text-v2/EditableTextV2/index.js

@@ -1,6 +1,5 @@
-export * from "./editable-text-v2";
-import { EditableTextV2 } from "./editable-text-v2";
-var EditableTextV2_default = EditableTextV2;
+import { EditableTextV2Value } from "./editable-text-v2";
+var EditableTextV2_default = EditableTextV2Value;
 export {
   EditableTextV2_default as default
 };

package/dist/esm/runtimes/react/controls/rich-text-v2/EditableTextV2/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text-v2/EditableTextV2/index.tsx"],"sourcesContent":["export * from './editable-text-v2'\nimport { EditableTextV2 } from './editable-text-v2'\nexport default EditableTextV2\n"],"mappings":"AAAA,cAAc;AACd,SAAS,sBAAsB;AAC/B,IAAO,yBAAQ;","names":[]}
+{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text-v2/EditableTextV2/index.tsx"],"sourcesContent":["import { EditableTextV2Value } from './editable-text-v2'\nexport default EditableTextV2Value\n"],"mappings":"AAAA,SAAS,2BAA2B;AACpC,IAAO,yBAAQ;","names":[]}

package/dist/esm/runtimes/react/controls/rich-text-v2/ReadOnlyTextV2.js

@@ -1,6 +1,7 @@
 import { Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
 import {
+  RichTextV2Definition,
   RichText
 } from "../../../../controls/rich-text-v2";
 import { useStyle } from "../../use-style";
@@ -8,7 +9,7 @@ import { toText } from "../../../../slate/utils";
 import { ControlValue } from "../control";
 const ReadOnlyTextV2 = forwardRef(function ReadOnlyText({ text, config }, ref) {
   const descendants = useMemo(() => text?.descendants ?? [], [text?.descendants]);
-  const plugins = useMemo(() => config?.plugins ?? [], [config]);
+  const plugins = useMemo(() => config ? new RichTextV2Definition(config).plugins : [], [config]);
   const descendantsAsString = toText(descendants, config?.mode ?? RichText.Mode.Block);
   return /* @__PURE__ */ jsx(
     "div",

package/dist/esm/runtimes/react/controls/rich-text-v2/ReadOnlyTextV2.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text-v2/ReadOnlyTextV2.tsx"],"sourcesContent":["import { type ReactNode, type ForwardedRef, forwardRef, useMemo } from 'react'\nimport { type Descendant, type Element, type Text } from 'slate'\nimport { type RenderElementProps, type RenderLeafProps } from 'slate-react'\n\nimport { type ConfigType } from '@makeswift/controls'\n\nimport {\n  type RichTextDataV2,\n  RichTextV2Definition,\n  RichText,\n} from '../../../../controls/rich-text-v2'\nimport { useStyle } from '../../use-style'\nimport { toText } from '../../../../slate/utils'\nimport { RichTextV2Plugin } from '../../../../controls/rich-text-v2/plugin'\n\nimport { ControlValue } from '../control'\n\ntype Props = {\n  text: RichTextDataV2 | undefined\n  config: ConfigType<RichTextV2Definition> | undefined\n}\n\nconst ReadOnlyTextV2 = forwardRef(function ReadOnlyText(\n  { text, config }: Props,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const descendants = useMemo(() => text?.descendants ?? [], [text?.descendants])\n  const plugins = useMemo(() => config?.plugins ?? [], [config])\n  const descendantsAsString = toText(descendants, config?.mode ?? RichText.Mode.Block)\n\n  return (\n    <div\n      ref={ref}\n      style={{\n        /**\n         * These are the default styles that Slate uses for its editable div.\n         * https://github.com/ianstormtaylor/slate/blob/4bd15ed3950e3a0871f5d0ecb391bb637c05e59d/packages/slate-react/src/components/editable.tsx\n         * Search for `disableDefaultStyles`\n         */\n        position: 'relative',\n        whiteSpace: 'pre-wrap',\n        wordWrap: 'break-word',\n      }}\n    >\n      {descendantsAsString === '' ? (\n        <Placeholder />\n      ) : (\n        <Descendants plugins={plugins} descendants={descendants} />\n      )}\n    </div>\n  )\n})\n\nexport default ReadOnlyTextV2\n\nfunction Placeholder({ text = 'Write some text...' }: { text?: string }) {\n  return (\n    <span\n      className={useStyle({\n        display: 'inline-block',\n        width: 0,\n        maxWidth: '100%',\n        whiteSpace: 'nowrap',\n        opacity: 0.333,\n        verticalAlign: 'text-top',\n      })}\n    >\n      {text}\n    </span>\n  )\n}\n\ntype LeafProps = {\n  leaf: Text\n  plugins: RichTextV2Plugin[]\n}\n\nexport function LeafComponent({ plugins, ...props }: LeafProps) {\n  function initialRenderLeaf({ leaf }: RenderLeafProps): ReactNode {\n    return <span className={leaf.className}>{leaf.text === '' ? '\\uFEFF' : leaf.text}</span>\n  }\n\n  const renderLeaf = plugins.reduce(\n    (renderFn, plugin) =>\n      function RenderLeafPlugin(props: RenderLeafProps) {\n        const { control, renderLeaf } = plugin\n\n        if (control?.definition == null || renderLeaf == null) return renderFn(props)\n\n        if (control.getLeafValue == null) return renderLeaf(renderFn, undefined)(props)\n\n        return (\n          <ControlValue definition={control.definition} data={control.getLeafValue(props.leaf)}>\n            {value => renderLeaf(renderFn, value)(props)}\n          </ControlValue>\n        )\n      },\n    initialRenderLeaf,\n  )\n\n  return renderLeaf({ attributes: {} as any, leaf: props.leaf, children: null, text: props.leaf })\n}\n\ntype ElementProps = {\n  descendant: Element\n  plugins: RichTextV2Plugin[]\n}\n\nfunction ElementComponent({ plugins, ...props }: ElementProps) {\n  function initialRenderElement(props: RenderElementProps): ReactNode {\n    return <Descendants descendants={props.element.children} plugins={plugins} />\n  }\n\n  const renderElement = plugins.reduce(\n    (renderFn, plugin) =>\n      function RenderElementPlugin(props: RenderElementProps) {\n        const { control, renderElement } = plugin\n\n        if (control?.definition == null || renderElement == null) return renderFn(props)\n\n        if (control.getElementValue == null) return renderElement(renderFn, undefined)(props)\n\n        return (\n          <ControlValue\n            definition={control.definition}\n            data={control.getElementValue(props.element)}\n          >\n            {value => renderElement(renderFn, value)(props)}\n          </ControlValue>\n        )\n      },\n    initialRenderElement,\n  )\n\n  return renderElement({ attributes: {} as any, children: null, element: props.descendant })\n}\n\n// reimplemented from slate source for code splitting\nfunction isText(node: Descendant): node is Text {\n  if (typeof node === 'object' && 'text' in node) return true\n\n  return false\n}\n\nfunction Descendants({\n  descendants,\n  plugins,\n}: {\n  plugins: RichTextV2Plugin[]\n  descendants: Descendant[]\n}) {\n  return (\n    <>\n      {descendants.map((descendant, index) => {\n        if (isText(descendant)) {\n          return <LeafComponent key={index} plugins={plugins} leaf={descendant} />\n        }\n\n        return <ElementComponent key={index} descendant={descendant} plugins={plugins} />\n      })}\n    </>\n  )\n}\n"],"mappings":"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","names":["props","renderLeaf","renderElement"]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text-v2/ReadOnlyTextV2.tsx"],"sourcesContent":["import { type ReactNode, type ForwardedRef, forwardRef, useMemo } from 'react'\nimport { type Descendant, type Element, type Text } from 'slate'\nimport { type RenderElementProps, type RenderLeafProps } from 'slate-react'\n\nimport { type ConfigType } from '@makeswift/controls'\n\nimport {\n  type RichTextDataV2,\n  RichTextV2Definition,\n  RichText,\n} from '../../../../controls/rich-text-v2'\nimport { useStyle } from '../../use-style'\nimport { toText } from '../../../../slate/utils'\nimport { RichTextV2Plugin } from '../../../../controls/rich-text-v2/plugin'\n\nimport { ControlValue } from '../control'\n\ntype Props = {\n  text: RichTextDataV2 | undefined\n  config: ConfigType<RichTextV2Definition> | undefined\n}\n\nconst ReadOnlyTextV2 = forwardRef(function ReadOnlyText(\n  { text, config }: Props,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const descendants = useMemo(() => text?.descendants ?? [], [text?.descendants])\n  const plugins = useMemo(() => (config ? new RichTextV2Definition(config).plugins : []), [config])\n  const descendantsAsString = toText(descendants, config?.mode ?? RichText.Mode.Block)\n\n  return (\n    <div\n      ref={ref}\n      style={{\n        /**\n         * These are the default styles that Slate uses for its editable div.\n         * https://github.com/ianstormtaylor/slate/blob/4bd15ed3950e3a0871f5d0ecb391bb637c05e59d/packages/slate-react/src/components/editable.tsx\n         * Search for `disableDefaultStyles`\n         */\n        position: 'relative',\n        whiteSpace: 'pre-wrap',\n        wordWrap: 'break-word',\n      }}\n    >\n      {descendantsAsString === '' ? (\n        <Placeholder />\n      ) : (\n        <Descendants plugins={plugins} descendants={descendants} />\n      )}\n    </div>\n  )\n})\n\nexport default ReadOnlyTextV2\n\nfunction Placeholder({ text = 'Write some text...' }: { text?: string }) {\n  return (\n    <span\n      className={useStyle({\n        display: 'inline-block',\n        width: 0,\n        maxWidth: '100%',\n        whiteSpace: 'nowrap',\n        opacity: 0.333,\n        verticalAlign: 'text-top',\n      })}\n    >\n      {text}\n    </span>\n  )\n}\n\ntype LeafProps = {\n  leaf: Text\n  plugins: RichTextV2Plugin[]\n}\n\nexport function LeafComponent({ plugins, ...props }: LeafProps) {\n  function initialRenderLeaf({ leaf }: RenderLeafProps): ReactNode {\n    return <span className={leaf.className}>{leaf.text === '' ? '\\uFEFF' : leaf.text}</span>\n  }\n\n  const renderLeaf = plugins.reduce(\n    (renderFn, plugin) =>\n      function RenderLeafPlugin(props: RenderLeafProps) {\n        const { control, renderLeaf } = plugin\n\n        if (control?.definition == null || renderLeaf == null) return renderFn(props)\n\n        if (control.getLeafValue == null) return renderLeaf(renderFn, undefined)(props)\n\n        return (\n          <ControlValue definition={control.definition} data={control.getLeafValue(props.leaf)}>\n            {value => renderLeaf(renderFn, value)(props)}\n          </ControlValue>\n        )\n      },\n    initialRenderLeaf,\n  )\n\n  return renderLeaf({ attributes: {} as any, leaf: props.leaf, children: null, text: props.leaf })\n}\n\ntype ElementProps = {\n  descendant: Element\n  plugins: RichTextV2Plugin[]\n}\n\nfunction ElementComponent({ plugins, ...props }: ElementProps) {\n  function initialRenderElement(props: RenderElementProps): ReactNode {\n    return <Descendants descendants={props.element.children} plugins={plugins} />\n  }\n\n  const renderElement = plugins.reduce(\n    (renderFn, plugin) =>\n      function RenderElementPlugin(props: RenderElementProps) {\n        const { control, renderElement } = plugin\n\n        if (control?.definition == null || renderElement == null) return renderFn(props)\n\n        if (control.getElementValue == null) return renderElement(renderFn, undefined)(props)\n\n        return (\n          <ControlValue\n            definition={control.definition}\n            data={control.getElementValue(props.element)}\n          >\n            {value => renderElement(renderFn, value)(props)}\n          </ControlValue>\n        )\n      },\n    initialRenderElement,\n  )\n\n  return renderElement({ attributes: {} as any, children: null, element: props.descendant })\n}\n\n// reimplemented from slate source for code splitting\nfunction isText(node: Descendant): node is Text {\n  if (typeof node === 'object' && 'text' in node) return true\n\n  return false\n}\n\nfunction Descendants({\n  descendants,\n  plugins,\n}: {\n  plugins: RichTextV2Plugin[]\n  descendants: Descendant[]\n}) {\n  return (\n    <>\n      {descendants.map((descendant, index) => {\n        if (isText(descendant)) {\n          return <LeafComponent key={index} plugins={plugins} leaf={descendant} />\n        }\n\n        return <ElementComponent key={index} descendant={descendant} plugins={plugins} />\n      })}\n    </>\n  )\n}\n"],"mappings":"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","names":["props","renderLeaf","renderElement"]}

package/dist/esm/runtimes/react/controls/rich-text-v2/render-rich-text-v2.js

@@ -3,8 +3,12 @@ import { lazy } from "react";
 import { RichTextV2Definition } from "../../../../controls/rich-text-v2";
 import { RichTextV2Value } from "./rich-text-v2-value";
 const ReadOnlyTextV1 = lazy(() => import("../rich-text/ReadOnlyText"));
-function renderRichTextV2(data, config, control) {
-  return RichTextV2Definition.isV1Data(data) ? /* @__PURE__ */ jsx(ReadOnlyTextV1, { text: data }) : /* @__PURE__ */ jsx(RichTextV2Value, { data, config, control });
+function renderRichTextV2({
+  data,
+  config,
+  control
+}) {
+  return RichTextV2Definition.isV1Data(data) ? /* @__PURE__ */ jsx(ReadOnlyTextV1, { text: data }) : /* @__PURE__ */ jsx(RichTextV2Value, { data, config, instanceKey: control?.instanceKey });
 }
 export {
   renderRichTextV2

package/dist/esm/runtimes/react/controls/rich-text-v2/render-rich-text-v2.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text-v2/render-rich-text-v2.tsx"],"sourcesContent":["import { type ReactNode, lazy } from 'react'\n\nimport { type DataType, type ConfigType } from '@makeswift/controls'\n\nimport { RichTextV2Control, RichTextV2Definition } from '../../../../controls/rich-text-v2'\n\nimport { RichTextV2Value } from './rich-text-v2-value'\n\nconst ReadOnlyTextV1 = lazy(() => import('../rich-text/ReadOnlyText'))\n\nexport function renderRichTextV2(\n  data: DataType<RichTextV2Definition> | undefined,\n  config: ConfigType<RichTextV2Definition>,\n  control: RichTextV2Control | null,\n): ReactNode {\n  return RichTextV2Definition.isV1Data(data) ? (\n    <ReadOnlyTextV1 text={data} />\n  ) : (\n    <RichTextV2Value data={data} config={config} control={control} />\n  )\n}\n"],"mappings":"AAgBI;AAhBJ,SAAyB,YAAY;AAIrC,SAA4B,4BAA4B;AAExD,SAAS,uBAAuB;AAEhC,MAAM,iBAAiB,KAAK,MAAM,OAAO,2BAA2B,CAAC;AAE9D,SAAS,iBACd,MACA,QACA,SACW;AACX,SAAO,qBAAqB,SAAS,IAAI,IACvC,oBAAC,kBAAe,MAAM,MAAM,IAE5B,oBAAC,mBAAgB,MAAY,QAAgB,SAAkB;AAEnE;","names":[]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text-v2/render-rich-text-v2.tsx"],"sourcesContent":["import { type ReactNode, lazy } from 'react'\n\nimport { type DataType, type ConfigType } from '@makeswift/controls'\n\nimport { RichTextV2Control, RichTextV2Definition } from '../../../../controls/rich-text-v2'\n\nimport { RichTextV2Value } from './rich-text-v2-value'\n\nconst ReadOnlyTextV1 = lazy(() => import('../rich-text/ReadOnlyText'))\n\nexport function renderRichTextV2({\n  data,\n  config,\n  control,\n}: {\n  data: DataType<RichTextV2Definition> | undefined\n  config: ConfigType<RichTextV2Definition>\n  control: RichTextV2Control | null\n}): ReactNode {\n  // See `renderSlot` comments\n  return RichTextV2Definition.isV1Data(data) ? (\n    <ReadOnlyTextV1 text={data} />\n  ) : (\n    <RichTextV2Value data={data} config={config} instanceKey={control?.instanceKey} />\n  )\n}\n"],"mappings":"AAqBI;AArBJ,SAAyB,YAAY;AAIrC,SAA4B,4BAA4B;AAExD,SAAS,uBAAuB;AAEhC,MAAM,iBAAiB,KAAK,MAAM,OAAO,2BAA2B,CAAC;AAE9D,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,GAIc;AAEZ,SAAO,qBAAqB,SAAS,IAAI,IACvC,oBAAC,kBAAe,MAAM,MAAM,IAE5B,oBAAC,mBAAgB,MAAY,QAAgB,aAAa,SAAS,aAAa;AAEpF;","names":[]}

package/dist/esm/runtimes/react/controls/rich-text-v2/rich-text-v2-value.js

@@ -7,9 +7,9 @@ const ReadOnlyText = lazy(() => import("./ReadOnlyTextV2"));
 function RichTextV2Value({
   data,
   config,
-  control
+  instanceKey
 }) {
-  return useIsReadOnly() ? /* @__PURE__ */ jsx(ReadOnlyText, { text: data, config }) : /* @__PURE__ */ jsx(EditableText, { text: data, config, control });
+  return useIsReadOnly() ? /* @__PURE__ */ jsx(ReadOnlyText, { text: data, config }) : /* @__PURE__ */ jsx(EditableText, { text: data, config, instanceKey });
 }
 export {
   RichTextV2Value

package/dist/esm/runtimes/react/controls/rich-text-v2/rich-text-v2-value.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text-v2/rich-text-v2-value.tsx"],"sourcesContent":["'use client'\n\nimport { lazy } from 'react'\n\nimport { type ConfigType } from '@makeswift/controls'\n\nimport {\n  type RichTextDataV2,\n  RichTextV2Definition,\n  RichTextV2Control,\n} from '../../../../controls/rich-text-v2'\n\nimport { useIsReadOnly } from '../../hooks/use-is-read-only'\n\nconst EditableText = lazy(() => import('./EditableTextV2'))\nconst ReadOnlyText = lazy(() => import('./ReadOnlyTextV2'))\n\nexport function RichTextV2Value({\n  data,\n  config,\n  control,\n}: {\n  data: RichTextDataV2 | undefined\n  config: ConfigType<RichTextV2Definition>\n  control: RichTextV2Control | null\n}) {\n  return useIsReadOnly() ? (\n    <ReadOnlyText text={data} config={config} />\n  ) : (\n    <EditableText text={data} config={config} control={control} />\n  )\n}\n"],"mappings":";AA2BI;AAzBJ,SAAS,YAAY;AAUrB,SAAS,qBAAqB;AAE9B,MAAM,eAAe,KAAK,MAAM,OAAO,kBAAkB,CAAC;AAC1D,MAAM,eAAe,KAAK,MAAM,OAAO,kBAAkB,CAAC;AAEnD,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SAAO,cAAc,IACnB,oBAAC,gBAAa,MAAM,MAAM,QAAgB,IAE1C,oBAAC,gBAAa,MAAM,MAAM,QAAgB,SAAkB;AAEhE;","names":[]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text-v2/rich-text-v2-value.tsx"],"sourcesContent":["'use client'\n\nimport { lazy } from 'react'\n\nimport { type ControlInstanceKey, type ConfigType } from '@makeswift/controls'\n\nimport { type RichTextDataV2, RichTextV2Definition } from '../../../../controls/rich-text-v2'\n\nimport { useIsReadOnly } from '../../hooks/use-is-read-only'\n\nconst EditableText = lazy(() => import('./EditableTextV2'))\nconst ReadOnlyText = lazy(() => import('./ReadOnlyTextV2'))\n\nexport function RichTextV2Value({\n  data,\n  config,\n  instanceKey,\n}: {\n  data: RichTextDataV2 | undefined\n  config: ConfigType<RichTextV2Definition>\n  instanceKey: ControlInstanceKey | undefined\n}) {\n  return useIsReadOnly() ? (\n    <ReadOnlyText text={data} config={config} />\n  ) : (\n    <EditableText text={data} config={config} instanceKey={instanceKey} />\n  )\n}\n"],"mappings":";AAuBI;AArBJ,SAAS,YAAY;AAMrB,SAAS,qBAAqB;AAE9B,MAAM,eAAe,KAAK,MAAM,OAAO,kBAAkB,CAAC;AAC1D,MAAM,eAAe,KAAK,MAAM,OAAO,kBAAkB,CAAC;AAEnD,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SAAO,cAAc,IACnB,oBAAC,gBAAa,MAAM,MAAM,QAAgB,IAE1C,oBAAC,gBAAa,MAAM,MAAM,QAAgB,aAA0B;AAExE;","names":[]}