@makeswift/runtime 0.28.10-canary.9 → 0.29.0-canary.19

package/dist/esm/runtimes/react/controls/rich-text/components/Element/block.js

@@ -1,45 +1,102 @@
-import { jsx } from "react/jsx-runtime";
-import { cx } from "@emotion/css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useResponsiveStyle } from "../../../../../../components/utils/responsive-style";
-import { useStyle } from "../../../../use-style";
 import { BlockType } from "../../../../../../slate/types";
+import { useStyle } from "../../../../css-runtime/hooks/use-style";
+import clsx from "clsx";
 function BlockElement({ element, attributes, children }) {
-  const blockStyles = [
-    useStyle({ margin: 0 }),
-    useStyle(useResponsiveStyle([element.textAlign], ([textAlign = "left"]) => ({ textAlign })))
-  ];
-  const quoteStyles = useStyle({
+  const responsiveBlockStyles = useResponsiveStyle([element.textAlign], ([textAlign = "left"]) => ({
+    textAlign
+  }));
+  const { className: blockStylesClassName, styleElement: blockStylesStyleElement } = useStyle({
+    margin: 0,
+    ...responsiveBlockStyles
+  });
+  const quoteStyles = {
     padding: "0.5em 10px",
     fontSize: "1.25em",
     fontWeight: "300",
     borderLeft: "5px solid rgba(0, 0, 0, 0.1)"
-  });
+  };
+  const { className: quoteStylesClassName, styleElement: quoteStylesStyleElement } = useStyle(quoteStyles);
   switch (element.type) {
     case BlockType.Default:
     case BlockType.Paragraph:
-      return /* @__PURE__ */ jsx("p", { ...attributes, className: cx(...blockStyles), children });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("p", { ...attributes, className: blockStylesClassName, children })
+      ] });
     case BlockType.Heading1:
-      return /* @__PURE__ */ jsx("h1", { ...attributes, className: cx(...blockStyles), children });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("h1", { ...attributes, className: blockStylesClassName, children })
+      ] });
     case BlockType.Heading2:
-      return /* @__PURE__ */ jsx("h2", { ...attributes, className: cx(...blockStyles), children });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("h2", { ...attributes, className: blockStylesClassName, children })
+      ] });
     case BlockType.Heading3:
-      return /* @__PURE__ */ jsx("h3", { ...attributes, className: cx(...blockStyles), children });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("h3", { ...attributes, className: blockStylesClassName, children })
+      ] });
     case BlockType.Heading4:
-      return /* @__PURE__ */ jsx("h4", { ...attributes, className: cx(...blockStyles), children });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("h4", { ...attributes, className: blockStylesClassName, children })
+      ] });
     case BlockType.Heading5:
-      return /* @__PURE__ */ jsx("h5", { ...attributes, className: cx(...blockStyles), children });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("h5", { ...attributes, className: blockStylesClassName, children })
+      ] });
     case BlockType.Heading6:
-      return /* @__PURE__ */ jsx("h6", { ...attributes, className: cx(...blockStyles), children });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("h6", { ...attributes, className: blockStylesClassName, children })
+      ] });
     case BlockType.BlockQuote:
-      return /* @__PURE__ */ jsx("blockquote", { ...attributes, className: cx(...blockStyles, quoteStyles), children });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        quoteStylesStyleElement,
+        /* @__PURE__ */ jsx("blockquote", { ...attributes, className: clsx(blockStylesClassName, quoteStylesClassName), children })
+      ] });
     case BlockType.OrderedList:
-      return /* @__PURE__ */ jsx("ol", { ...attributes, className: cx(...blockStyles), style: { listStylePosition: "inside" }, children });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx(
+          "ol",
+          {
+            ...attributes,
+            className: blockStylesClassName,
+            style: { listStylePosition: "inside" },
+            children
+          }
+        )
+      ] });
     case BlockType.UnorderedList:
-      return /* @__PURE__ */ jsx("ul", { ...attributes, className: cx(...blockStyles), style: { listStylePosition: "inside" }, children });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx(
+          "ul",
+          {
+            ...attributes,
+            className: blockStylesClassName,
+            style: { listStylePosition: "inside" },
+            children
+          }
+        )
+      ] });
     case BlockType.ListItem:
-      return /* @__PURE__ */ jsx("li", { ...attributes, className: cx(...blockStyles), children });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("li", { ...attributes, className: blockStylesClassName, children })
+      ] });
     case BlockType.ListItemChild:
-      return /* @__PURE__ */ jsx("span", { ...attributes, className: cx(...blockStyles), children });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("span", { ...attributes, className: blockStylesClassName, children })
+      ] });
   }
 }
 export {

package/dist/esm/runtimes/react/controls/rich-text/components/Element/block.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/runtimes/react/controls/rich-text/components/Element/block.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { RenderElementProps } from 'slate-react'\nimport { Slate } from '@makeswift/controls'\n\nimport { useResponsiveStyle } from '../../../../../../components/utils/responsive-style'\nimport { useStyle } from '../../../../use-style'\nimport { BlockType } from '../../../../../../slate/types'\n\nexport interface InlineRenderElementProps extends RenderElementProps {\n  element: Slate.Block\n}\n\nexport function BlockElement({ element, attributes, children }: InlineRenderElementProps) {\n  const blockStyles = [\n    useStyle({ margin: 0 }),\n    useStyle(useResponsiveStyle([element.textAlign], ([textAlign = 'left']) => ({ textAlign }))),\n  ]\n\n  const quoteStyles = useStyle({\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  switch (element.type) {\n    case BlockType.Default:\n    case BlockType.Paragraph:\n      return (\n        <p {...attributes} className={cx(...blockStyles)}>\n          {children}\n        </p>\n      )\n    case BlockType.Heading1:\n      return (\n        <h1 {...attributes} className={cx(...blockStyles)}>\n          {children}\n        </h1>\n      )\n    case BlockType.Heading2:\n      return (\n        <h2 {...attributes} className={cx(...blockStyles)}>\n          {children}\n        </h2>\n      )\n    case BlockType.Heading3:\n      return (\n        <h3 {...attributes} className={cx(...blockStyles)}>\n          {children}\n        </h3>\n      )\n    case BlockType.Heading4:\n      return (\n        <h4 {...attributes} className={cx(...blockStyles)}>\n          {children}\n        </h4>\n      )\n    case BlockType.Heading5:\n      return (\n        <h5 {...attributes} className={cx(...blockStyles)}>\n          {children}\n        </h5>\n      )\n    case BlockType.Heading6:\n      return (\n        <h6 {...attributes} className={cx(...blockStyles)}>\n          {children}\n        </h6>\n      )\n    case BlockType.BlockQuote:\n      return (\n        <blockquote {...attributes} className={cx(...blockStyles, quoteStyles)}>\n          {children}\n        </blockquote>\n      )\n    case BlockType.OrderedList:\n      return (\n        <ol {...attributes} className={cx(...blockStyles)} style={{ listStylePosition: 'inside' }}>\n          {children}\n        </ol>\n      )\n    case BlockType.UnorderedList:\n      return (\n        <ul {...attributes} className={cx(...blockStyles)} style={{ listStylePosition: 'inside' }}>\n          {children}\n        </ul>\n      )\n    case BlockType.ListItem:\n      return (\n        <li {...attributes} className={cx(...blockStyles)}>\n          {children}\n        </li>\n      )\n    case BlockType.ListItemChild:\n      return (\n        <span {...attributes} className={cx(...blockStyles)}>\n          {children}\n        </span>\n      )\n  }\n}\n"],"mappings":"AA6BQ;AA7BR,SAAS,UAAU;AAInB,SAAS,0BAA0B;AACnC,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAMnB,SAAS,aAAa,EAAE,SAAS,YAAY,SAAS,GAA6B;AACxF,QAAM,cAAc;AAAA,IAClB,SAAS,EAAE,QAAQ,EAAE,CAAC;AAAA,IACtB,SAAS,mBAAmB,CAAC,QAAQ,SAAS,GAAG,CAAC,CAAC,YAAY,MAAM,OAAO,EAAE,UAAU,EAAE,CAAC;AAAA,EAC7F;AAEA,QAAM,cAAc,SAAS;AAAA,IAC3B,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,EACd,CAAC;AAED,UAAQ,QAAQ,MAAM;AAAA,IACpB,KAAK,UAAU;AAAA,IACf,KAAK,UAAU;AACb,aACE,oBAAC,OAAG,GAAG,YAAY,WAAW,GAAG,GAAG,WAAW,GAC5C,UACH;AAAA,IAEJ,KAAK,UAAU;AACb,aACE,oBAAC,QAAI,GAAG,YAAY,WAAW,GAAG,GAAG,WAAW,GAC7C,UACH;AAAA,IAEJ,KAAK,UAAU;AACb,aACE,oBAAC,QAAI,GAAG,YAAY,WAAW,GAAG,GAAG,WAAW,GAC7C,UACH;AAAA,IAEJ,KAAK,UAAU;AACb,aACE,oBAAC,QAAI,GAAG,YAAY,WAAW,GAAG,GAAG,WAAW,GAC7C,UACH;AAAA,IAEJ,KAAK,UAAU;AACb,aACE,oBAAC,QAAI,GAAG,YAAY,WAAW,GAAG,GAAG,WAAW,GAC7C,UACH;AAAA,IAEJ,KAAK,UAAU;AACb,aACE,oBAAC,QAAI,GAAG,YAAY,WAAW,GAAG,GAAG,WAAW,GAC7C,UACH;AAAA,IAEJ,KAAK,UAAU;AACb,aACE,oBAAC,QAAI,GAAG,YAAY,WAAW,GAAG,GAAG,WAAW,GAC7C,UACH;AAAA,IAEJ,KAAK,UAAU;AACb,aACE,oBAAC,gBAAY,GAAG,YAAY,WAAW,GAAG,GAAG,aAAa,WAAW,GAClE,UACH;AAAA,IAEJ,KAAK,UAAU;AACb,aACE,oBAAC,QAAI,GAAG,YAAY,WAAW,GAAG,GAAG,WAAW,GAAG,OAAO,EAAE,mBAAmB,SAAS,GACrF,UACH;AAAA,IAEJ,KAAK,UAAU;AACb,aACE,oBAAC,QAAI,GAAG,YAAY,WAAW,GAAG,GAAG,WAAW,GAAG,OAAO,EAAE,mBAAmB,SAAS,GACrF,UACH;AAAA,IAEJ,KAAK,UAAU;AACb,aACE,oBAAC,QAAI,GAAG,YAAY,WAAW,GAAG,GAAG,WAAW,GAC7C,UACH;AAAA,IAEJ,KAAK,UAAU;AACb,aACE,oBAAC,UAAM,GAAG,YAAY,WAAW,GAAG,GAAG,WAAW,GAC/C,UACH;AAAA,EAEN;AACF;","names":[]}
+{"version":3,"sources":["../../../../../../../../src/runtimes/react/controls/rich-text/components/Element/block.tsx"],"sourcesContent":["import { RenderElementProps } from 'slate-react'\nimport { Slate } from '@makeswift/controls'\n\nimport { useResponsiveStyle } from '../../../../../../components/utils/responsive-style'\nimport { BlockType } from '../../../../../../slate/types'\nimport { useStyle } from '../../../../css-runtime/hooks/use-style'\nimport clsx from 'clsx'\n\nexport interface InlineRenderElementProps extends RenderElementProps {\n  element: Slate.Block\n}\n\nexport function BlockElement({ element, attributes, children }: InlineRenderElementProps) {\n  const responsiveBlockStyles = useResponsiveStyle([element.textAlign], ([textAlign = 'left']) => ({\n    textAlign,\n  }))\n  const { className: blockStylesClassName, styleElement: blockStylesStyleElement } = useStyle({\n    margin: 0,\n    ...responsiveBlockStyles,\n  })\n\n  const quoteStyles = {\n    padding: '0.5em 10px',\n    fontSize: '1.25em',\n    fontWeight: '300',\n    borderLeft: '5px solid rgba(0, 0, 0, 0.1)',\n  }\n  const { className: quoteStylesClassName, styleElement: quoteStylesStyleElement } =\n    useStyle(quoteStyles)\n\n  switch (element.type) {\n    case BlockType.Default:\n    case BlockType.Paragraph:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <p {...attributes} className={blockStylesClassName}>\n            {children}\n          </p>\n        </>\n      )\n    case BlockType.Heading1:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <h1 {...attributes} className={blockStylesClassName}>\n            {children}\n          </h1>\n        </>\n      )\n    case BlockType.Heading2:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <h2 {...attributes} className={blockStylesClassName}>\n            {children}\n          </h2>\n        </>\n      )\n    case BlockType.Heading3:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <h3 {...attributes} className={blockStylesClassName}>\n            {children}\n          </h3>\n        </>\n      )\n    case BlockType.Heading4:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <h4 {...attributes} className={blockStylesClassName}>\n            {children}\n          </h4>\n        </>\n      )\n    case BlockType.Heading5:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <h5 {...attributes} className={blockStylesClassName}>\n            {children}\n          </h5>\n        </>\n      )\n    case BlockType.Heading6:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <h6 {...attributes} className={blockStylesClassName}>\n            {children}\n          </h6>\n        </>\n      )\n    case BlockType.BlockQuote:\n      return (\n        <>\n          {blockStylesStyleElement}\n          {quoteStylesStyleElement}\n          <blockquote {...attributes} className={clsx(blockStylesClassName, quoteStylesClassName)}>\n            {children}\n          </blockquote>\n        </>\n      )\n    case BlockType.OrderedList:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <ol\n            {...attributes}\n            className={blockStylesClassName}\n            style={{ listStylePosition: 'inside' }}\n          >\n            {children}\n          </ol>\n        </>\n      )\n    case BlockType.UnorderedList:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <ul\n            {...attributes}\n            className={blockStylesClassName}\n            style={{ listStylePosition: 'inside' }}\n          >\n            {children}\n          </ul>\n        </>\n      )\n    case BlockType.ListItem:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <li {...attributes} className={blockStylesClassName}>\n            {children}\n          </li>\n        </>\n      )\n    case BlockType.ListItemChild:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <span {...attributes} className={blockStylesClassName}>\n            {children}\n          </span>\n        </>\n      )\n  }\n}\n"],"mappings":"AAkCQ,mBAEE,KAFF;AA/BR,SAAS,0BAA0B;AACnC,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,OAAO,UAAU;AAMV,SAAS,aAAa,EAAE,SAAS,YAAY,SAAS,GAA6B;AACxF,QAAM,wBAAwB,mBAAmB,CAAC,QAAQ,SAAS,GAAG,CAAC,CAAC,YAAY,MAAM,OAAO;AAAA,IAC/F;AAAA,EACF,EAAE;AACF,QAAM,EAAE,WAAW,sBAAsB,cAAc,wBAAwB,IAAI,SAAS;AAAA,IAC1F,QAAQ;AAAA,IACR,GAAG;AAAA,EACL,CAAC;AAED,QAAM,cAAc;AAAA,IAClB,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,EACd;AACA,QAAM,EAAE,WAAW,sBAAsB,cAAc,wBAAwB,IAC7E,SAAS,WAAW;AAEtB,UAAQ,QAAQ,MAAM;AAAA,IACpB,KAAK,UAAU;AAAA,IACf,KAAK,UAAU;AACb,aACE,iCACG;AAAA;AAAA,QACD,oBAAC,OAAG,GAAG,YAAY,WAAW,sBAC3B,UACH;AAAA,SACF;AAAA,IAEJ,KAAK,UAAU;AACb,aACE,iCACG;AAAA;AAAA,QACD,oBAAC,QAAI,GAAG,YAAY,WAAW,sBAC5B,UACH;AAAA,SACF;AAAA,IAEJ,KAAK,UAAU;AACb,aACE,iCACG;AAAA;AAAA,QACD,oBAAC,QAAI,GAAG,YAAY,WAAW,sBAC5B,UACH;AAAA,SACF;AAAA,IAEJ,KAAK,UAAU;AACb,aACE,iCACG;AAAA;AAAA,QACD,oBAAC,QAAI,GAAG,YAAY,WAAW,sBAC5B,UACH;AAAA,SACF;AAAA,IAEJ,KAAK,UAAU;AACb,aACE,iCACG;AAAA;AAAA,QACD,oBAAC,QAAI,GAAG,YAAY,WAAW,sBAC5B,UACH;AAAA,SACF;AAAA,IAEJ,KAAK,UAAU;AACb,aACE,iCACG;AAAA;AAAA,QACD,oBAAC,QAAI,GAAG,YAAY,WAAW,sBAC5B,UACH;AAAA,SACF;AAAA,IAEJ,KAAK,UAAU;AACb,aACE,iCACG;AAAA;AAAA,QACD,oBAAC,QAAI,GAAG,YAAY,WAAW,sBAC5B,UACH;AAAA,SACF;AAAA,IAEJ,KAAK,UAAU;AACb,aACE,iCACG;AAAA;AAAA,QACA;AAAA,QACD,oBAAC,gBAAY,GAAG,YAAY,WAAW,KAAK,sBAAsB,oBAAoB,GACnF,UACH;AAAA,SACF;AAAA,IAEJ,KAAK,UAAU;AACb,aACE,iCACG;AAAA;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,WAAW;AAAA,YACX,OAAO,EAAE,mBAAmB,SAAS;AAAA,YAEpC;AAAA;AAAA,QACH;AAAA,SACF;AAAA,IAEJ,KAAK,UAAU;AACb,aACE,iCACG;AAAA;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,WAAW;AAAA,YACX,OAAO,EAAE,mBAAmB,SAAS;AAAA,YAEpC;AAAA;AAAA,QACH;AAAA,SACF;AAAA,IAEJ,KAAK,UAAU;AACb,aACE,iCACG;AAAA;AAAA,QACD,oBAAC,QAAI,GAAG,YAAY,WAAW,sBAC5B,UACH;AAAA,SACF;AAAA,IAEJ,KAAK,UAAU;AACb,aACE,iCACG;AAAA;AAAA,QACD,oBAAC,UAAM,GAAG,YAAY,WAAW,sBAC9B,UACH;AAAA,SACF;AAAA,EAEN;AACF;","names":[]}

package/dist/esm/runtimes/react/controls/rich-text/components/Element/inline.js

@@ -1,10 +1,14 @@
-import { jsx } from "react/jsx-runtime";
-import { cx } from "@emotion/css";
-import { useStyle } from "../../../../use-style";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Link } from "../../../../../../components/shared/Link";
 import { InlineType } from "../../../../../../slate/types";
+import { useStyle } from "../../../../css-runtime/hooks/use-style";
+import clsx from "clsx";
 function StyledLink({ className, ...restOfProps }) {
-  return /* @__PURE__ */ jsx(Link, { ...restOfProps, className: cx(useStyle({ textDecoration: "none" }), className) });
+  const { className: baseClassName, styleElement } = useStyle({ textDecoration: "none" });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styleElement,
+    /* @__PURE__ */ jsx(Link, { ...restOfProps, className: clsx(baseClassName, className) })
+  ] });
 }
 function InlineElement({ element, attributes, children }) {
   switch (element.type) {

package/dist/esm/runtimes/react/controls/rich-text/components/Element/inline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/runtimes/react/controls/rich-text/components/Element/inline.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { ComponentPropsWithoutRef } from 'react'\nimport { RenderElementProps } from 'slate-react'\nimport { Slate } from '@makeswift/controls'\n\nimport { useStyle } from '../../../../use-style'\nimport { Link } from '../../../../../../components/shared/Link'\nimport { InlineType } from '../../../../../../slate/types'\n\nfunction StyledLink({ className, ...restOfProps }: ComponentPropsWithoutRef<typeof Link>) {\n  return <Link {...restOfProps} className={cx(useStyle({ textDecoration: 'none' }), className)} />\n}\n\nexport interface InlineRenderElementProps extends RenderElementProps {\n  element: Slate.Inline\n}\n\nexport function InlineElement({ element, attributes, children }: InlineRenderElementProps) {\n  switch (element.type) {\n    case InlineType.Code:\n      return <code {...attributes}>{children}</code>\n\n    case InlineType.SuperScript:\n      return <sup {...attributes}>{children}</sup>\n\n    case InlineType.SubScript:\n      return <sub {...attributes}>{children}</sub>\n\n    case InlineType.Link:\n      return (\n        <StyledLink {...attributes} link={element.link ?? undefined}>\n          {children}\n        </StyledLink>\n      )\n  }\n}\n"],"mappings":"AAUS;AAVT,SAAS,UAAU;AAKnB,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAE3B,SAAS,WAAW,EAAE,WAAW,GAAG,YAAY,GAA0C;AACxF,SAAO,oBAAC,QAAM,GAAG,aAAa,WAAW,GAAG,SAAS,EAAE,gBAAgB,OAAO,CAAC,GAAG,SAAS,GAAG;AAChG;AAMO,SAAS,cAAc,EAAE,SAAS,YAAY,SAAS,GAA6B;AACzF,UAAQ,QAAQ,MAAM;AAAA,IACpB,KAAK,WAAW;AACd,aAAO,oBAAC,UAAM,GAAG,YAAa,UAAS;AAAA,IAEzC,KAAK,WAAW;AACd,aAAO,oBAAC,SAAK,GAAG,YAAa,UAAS;AAAA,IAExC,KAAK,WAAW;AACd,aAAO,oBAAC,SAAK,GAAG,YAAa,UAAS;AAAA,IAExC,KAAK,WAAW;AACd,aACE,oBAAC,cAAY,GAAG,YAAY,MAAM,QAAQ,QAAQ,QAC/C,UACH;AAAA,EAEN;AACF;","names":[]}
+{"version":3,"sources":["../../../../../../../../src/runtimes/react/controls/rich-text/components/Element/inline.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef } from 'react'\nimport { RenderElementProps } from 'slate-react'\nimport { Slate } from '@makeswift/controls'\n\nimport { Link } from '../../../../../../components/shared/Link'\nimport { InlineType } from '../../../../../../slate/types'\nimport { useStyle } from '../../../../css-runtime/hooks/use-style'\nimport clsx from 'clsx'\n\nfunction StyledLink({ className, ...restOfProps }: ComponentPropsWithoutRef<typeof Link>) {\n  const { className: baseClassName, styleElement } = useStyle({ textDecoration: 'none' })\n  return (\n    <>\n      {styleElement}\n      <Link {...restOfProps} className={clsx(baseClassName, className)} />\n    </>\n  )\n}\n\nexport interface InlineRenderElementProps extends RenderElementProps {\n  element: Slate.Inline\n}\n\nexport function InlineElement({ element, attributes, children }: InlineRenderElementProps) {\n  switch (element.type) {\n    case InlineType.Code:\n      return <code {...attributes}>{children}</code>\n\n    case InlineType.SuperScript:\n      return <sup {...attributes}>{children}</sup>\n\n    case InlineType.SubScript:\n      return <sub {...attributes}>{children}</sub>\n\n    case InlineType.Link:\n      return (\n        <StyledLink {...attributes} link={element.link ?? undefined}>\n          {children}\n        </StyledLink>\n      )\n  }\n}\n"],"mappings":"AAYI,mBAEE,KAFF;AARJ,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,OAAO,UAAU;AAEjB,SAAS,WAAW,EAAE,WAAW,GAAG,YAAY,GAA0C;AACxF,QAAM,EAAE,WAAW,eAAe,aAAa,IAAI,SAAS,EAAE,gBAAgB,OAAO,CAAC;AACtF,SACE,iCACG;AAAA;AAAA,IACD,oBAAC,QAAM,GAAG,aAAa,WAAW,KAAK,eAAe,SAAS,GAAG;AAAA,KACpE;AAEJ;AAMO,SAAS,cAAc,EAAE,SAAS,YAAY,SAAS,GAA6B;AACzF,UAAQ,QAAQ,MAAM;AAAA,IACpB,KAAK,WAAW;AACd,aAAO,oBAAC,UAAM,GAAG,YAAa,UAAS;AAAA,IAEzC,KAAK,WAAW;AACd,aAAO,oBAAC,SAAK,GAAG,YAAa,UAAS;AAAA,IAExC,KAAK,WAAW;AACd,aAAO,oBAAC,SAAK,GAAG,YAAa,UAAS;AAAA,IAExC,KAAK,WAAW;AACd,aACE,oBAAC,cAAY,GAAG,YAAY,MAAM,QAAQ,QAAQ,QAC/C,UACH;AAAA,EAEN;AACF;","names":[]}

package/dist/esm/runtimes/react/controls/rich-text/components/Leaf/leaf.js

@@ -1,9 +1,12 @@
-import { jsx } from "react/jsx-runtime";
-import useEnhancedTypography, { useTypographyClassName } from "../../../typography";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import useEnhancedTypography, { useTypographyStyle } from "../../../typography";
 function Leaf({ leaf, ...props }) {
   const enhancedTypography = useEnhancedTypography(leaf.typography);
-  const typographyClassName = useTypographyClassName(enhancedTypography);
-  return /* @__PURE__ */ jsx("span", { ...props.attributes, className: typographyClassName, children: props.children });
+  const { className, styleElement } = useTypographyStyle(enhancedTypography);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styleElement,
+    /* @__PURE__ */ jsx("span", { ...props.attributes, className, children: props.children })
+  ] });
 }
 export {
   Leaf

package/dist/esm/runtimes/react/controls/rich-text/components/Leaf/leaf.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/runtimes/react/controls/rich-text/components/Leaf/leaf.tsx"],"sourcesContent":["import { RenderLeafProps } from 'slate-react'\nimport useEnhancedTypography, { useTypographyClassName } from '../../../typography'\n\nexport function Leaf({ leaf, ...props }: RenderLeafProps) {\n  // for each breakpoint fetch related resources and merge its value with its override\n  const enhancedTypography = useEnhancedTypography(leaf.typography)\n\n  // for each breakpoint shallow merge back up through the breakpoints and create a className\n  const typographyClassName = useTypographyClassName(enhancedTypography)\n\n  return (\n    <span {...props.attributes} className={typographyClassName}>\n      {props.children}\n    </span>\n  )\n}\n"],"mappings":"AAWI;AAVJ,OAAO,yBAAyB,8BAA8B;AAEvD,SAAS,KAAK,EAAE,MAAM,GAAG,MAAM,GAAoB;AAExD,QAAM,qBAAqB,sBAAsB,KAAK,UAAU;AAGhE,QAAM,sBAAsB,uBAAuB,kBAAkB;AAErE,SACE,oBAAC,UAAM,GAAG,MAAM,YAAY,WAAW,qBACpC,gBAAM,UACT;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../../../../src/runtimes/react/controls/rich-text/components/Leaf/leaf.tsx"],"sourcesContent":["import { RenderLeafProps } from 'slate-react'\nimport useEnhancedTypography, { useTypographyStyle } from '../../../typography'\n\nexport function Leaf({ leaf, ...props }: RenderLeafProps) {\n  // for each breakpoint fetch related resources and merge its value with its override\n  const enhancedTypography = useEnhancedTypography(leaf.typography)\n\n  // for each breakpoint shallow merge back up through the breakpoints and create a className\n  const { className, styleElement } = useTypographyStyle(enhancedTypography)\n\n  return (\n    <>\n      {styleElement}\n      <span {...props.attributes} className={className}>\n        {props.children}\n      </span>\n    </>\n  )\n}\n"],"mappings":"AAWI,mBAEE,KAFF;AAVJ,OAAO,yBAAyB,0BAA0B;AAEnD,SAAS,KAAK,EAAE,MAAM,GAAG,MAAM,GAAoB;AAExD,QAAM,qBAAqB,sBAAsB,KAAK,UAAU;AAGhE,QAAM,EAAE,WAAW,aAAa,IAAI,mBAAmB,kBAAkB;AAEzE,SACE,iCACG;AAAA;AAAA,IACD,oBAAC,UAAM,GAAG,MAAM,YAAY,WACzB,gBAAM,UACT;AAAA,KACF;AAEJ;","names":[]}

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

@@ -1,13 +1,14 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
+  memo,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState
 } from "react";
-import { createEditor } from "slate";
+import { createEditor, Text as SlateText } from "slate";
 import isHotkey from "is-hotkey";
 import {
   withReact,
@@ -16,20 +17,31 @@ import {
   Editable
 } from "slate-react";
 import {
-  RichText
+  RichTextV2Definition,
+  RichText,
+  RichTextV2Control
 } from "../../../../../controls/rich-text-v2";
-import { useBuilderEditMode } from "../../..";
+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, definition, control }) {
-  const plugins = useMemo(() => definition.config.plugins, [definition]);
+const EditableTextV2Value = memo(function EditableTextV2Value2({
+  instanceKey,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(NodeValue, { instanceKey, children: /* @__PURE__ */ jsx(EditableTextV2, { instanceKey, ...props }) });
+});
+function EditableTextV2({ text, config, instanceKey, parentStylesheetKey }) {
+  const plugins = useMemo(() => new RichTextV2Definition(config).plugins, [config]);
+  const control = useControlInstance(instanceKey, RichTextV2Control);
   const [editor] = useState(
     () => plugins.reduceRight(
       (editor2, plugin) => plugin?.withPlugin?.(editor2) ?? editor2,
@@ -41,7 +53,7 @@ function EditableTextV2({ text, definition, control }) {
       return;
     const element = ReactEditor.toDOMNode(editor, editor);
     return pollBoxModel({
-      element,
+      getElement: () => element,
       onBoxModelChange: (boxModel) => control.changeBoxModel(boxModel)
     });
   }, [editor, control]);
@@ -53,9 +65,9 @@ function EditableTextV2({ text, definition, control }) {
       isPreservingFocus.current = false;
       ReactEditor.deselect(editor);
     }
-  }, [editMode]);
+  }, [editMode, editor]);
   useSyncRemoteChanges(editor, text);
-  const presetValue = usePresetValue(definition);
+  const presetValue = usePresetValue(config);
   const initialValue = useMemo(
     () => (text && RichText.dataToNodes(text)) ?? presetValue,
     [text, presetValue]
@@ -69,17 +81,48 @@ function EditableTextV2({ text, definition, control }) {
       control?.onLocalUserChange();
     }
   }, [control, initialValue, presetValue]);
+  const decorate = useCallback(
+    ([node, path]) => {
+      if (!SlateText.isText(node))
+        return [];
+      return [
+        {
+          anchor: { path, offset: 0 },
+          focus: { path, offset: node.text.length },
+          // @ts-expect-error - this is a custom property that is used by the css runtime
+          _makeswiftLeafPath: `slate-editor-path-[${path.join(",")}]`
+        }
+      ];
+    },
+    [editor]
+  );
   const renderElement = useCallback(
     (props) => {
-      return /* @__PURE__ */ jsx(RichTextV2Element, { ...props, definition, plugins });
+      return /* @__PURE__ */ jsx(
+        RichTextV2Element,
+        {
+          ...props,
+          plugins,
+          pathComponents: [],
+          parentStylesheetKey
+        }
+      );
     },
-    [plugins, definition]
+    [plugins, parentStylesheetKey]
   );
   const renderLeaf = useCallback(
     (props) => {
-      return /* @__PURE__ */ jsx(RichTextV2Leaf, { ...props, definition, plugins });
+      return /* @__PURE__ */ jsx(
+        RichTextV2Leaf,
+        {
+          ...props,
+          plugins,
+          pathComponents: [],
+          parentStylesheetKey
+        }
+      );
     },
-    [plugins, definition]
+    [plugins, parentStylesheetKey]
   );
   const handleFocus = useCallback(() => {
     isPreservingFocus.current = true;
@@ -110,7 +153,7 @@ function EditableTextV2({ text, definition, control }) {
         e.preventDefault();
       }
     },
-    [control, editor, editMode]
+    [editMode]
   );
   const handleClick = useCallback(
     (e) => {
@@ -127,26 +170,28 @@ function EditableTextV2({ text, definition, control }) {
     if (e.relatedTarget?.getAttribute("contenteditable") === "true")
       isPreservingFocus.current = false;
   }, []);
-  const slateReset = useSlateReset();
-  return /* @__PURE__ */ jsx(Slate, { editor, value: initialValue, children: /* @__PURE__ */ jsx(
-    Editable,
-    {
-      className: slateReset,
-      renderLeaf,
-      renderElement,
-      onFocus: handleFocus,
-      onKeyDown: handleKeyDown,
-      onKeyUp: handleKeyUp,
-      onClick: handleClick,
-      onBlur: handleBlur,
-      readOnly: editMode !== BuilderEditMode.CONTENT,
-      placeholder: "Write some text..."
-    }
-  ) });
+  const { className: slateResetClass, styleElement: slateResetStyleElement } = useSlateReset();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    slateResetStyleElement,
+    /* @__PURE__ */ jsx(Slate, { editor, value: initialValue, children: /* @__PURE__ */ jsx(
+      Editable,
+      {
+        className: slateResetClass,
+        decorate,
+        renderLeaf,
+        renderElement,
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+        onClick: handleClick,
+        onBlur: handleBlur,
+        readOnly: editMode !== BuilderEditMode.CONTENT,
+        placeholder: "Write some text..."
+      }
+    ) })
+  ] });
 }
-var editable_text_v2_default = EditableTextV2;
 export {
-  EditableTextV2,
-  editable_text_v2_default as default
+  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  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\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 {\n  RichTextV2Definition,\n  RichText,\n  RichTextV2Control,\n  type RichTextDataV2,\n} from '../../../../../controls/rich-text-v2'\n\nimport { useBuilderEditMode } from '../../..'\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 { useSyncDOMSelection } from './useSyncDOMSelection'\nimport { RichTextV2Element } from './render-element'\nimport { RichTextV2Leaf } from './render-leaf'\nimport { useSyncRemoteChanges } from './useRemoteChanges'\nimport { defaultValue, usePresetValue } from './usePresetValue'\n\nexport type RichTextV2ControlValue = ReactNode\n\nexport type Descriptors = { text?: RichTextV2Definition }\n\ntype Props = {\n  text?: RichTextDataV2\n  definition: RichTextV2Definition\n  control: RichTextV2Control | null\n}\n\nexport function EditableTextV2({ text, definition, control }: Props) {\n  const plugins = useMemo(() => definition.config.plugins, [definition])\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])\n\n  // ------ Syncing remote changes ------\n\n  useSyncRemoteChanges(editor, text)\n\n  // ------ Default value ------\n\n  const presetValue = usePresetValue(definition)\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} definition={definition} plugins={plugins} />\n    },\n    [plugins, definition],\n  )\n\n  const renderLeaf = useCallback(\n    (props: RenderLeafProps) => {\n      return <RichTextV2Leaf {...props} definition={definition} plugins={plugins} />\n    },\n    [plugins, definition],\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    [control, editor, 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\nexport default EditableTextV2\n"],"mappings":";AAyHa;AAvHb;AAAA,EAKE;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;AAEP;AAAA,EAEE;AAAA,OAGK;AAEP,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,aAAa,wBAAwB;AAC9C,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,cAAc,sBAAsB;AAYtC,SAAS,eAAe,EAAE,MAAM,YAAY,QAAQ,GAAU;AACnE,QAAM,UAAU,QAAQ,MAAM,WAAW,OAAO,SAAS,CAAC,UAAU,CAAC;AAErE,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,QAAQ,CAAC;AAIb,uBAAqB,QAAQ,IAAI;AAIjC,QAAM,cAAc,eAAe,UAAU;AAE7C,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,YAAwB,SAAkB;AAAA,IACjF;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,EACtB;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,UAA2B;AAC1B,aAAO,oBAAC,kBAAgB,GAAG,OAAO,YAAwB,SAAkB;AAAA,IAC9E;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,EACtB;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,SAAS,QAAQ,QAAQ;AAAA,EAC5B;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;AAEA,IAAO,2BAAQ;","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, NodeEntry, Range, Text as SlateText } 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  parentStylesheetKey: string\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, parentStylesheetKey }: 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      getElement: () => 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  /*\n    This is needed for the css runtime. It tells Slate to \"decorate\" each leaf node with\n    its root -> leaf path through the editor. This path is used as part of the unique identifier\n    which is hashed into a css class name.\n    \n    For \"normal\" top-level controls, the unique identifier is simply pulled from the element key and prop path.\n    For RichTextV2 plugins, the \"prop path\" equivalent is managed by Slate as it creates and manages Slate nodes.\n    For that reason, this decorator exists so that we can surface the Slate-managed path to the css runtime for\n    class name generation (and regeneration, on node insertions/deletions).\n  */\n  const decorate = useCallback(\n    ([node, path]: NodeEntry): Range[] => {\n      if (!SlateText.isText(node)) return []\n      return [\n        {\n          anchor: { path, offset: 0 },\n          focus: { path, offset: node.text.length },\n          // @ts-expect-error - this is a custom property that is used by the css runtime\n          _makeswiftLeafPath: `slate-editor-path-[${path.join(',')}]`,\n        },\n      ]\n    },\n    [editor],\n  )\n\n  const renderElement = useCallback(\n    (props: RenderElementProps) => {\n      return (\n        <RichTextV2Element\n          {...props}\n          plugins={plugins}\n          pathComponents={[]}\n          parentStylesheetKey={parentStylesheetKey}\n        />\n      )\n    },\n    [plugins, parentStylesheetKey],\n  )\n\n  const renderLeaf = useCallback(\n    (props: RenderLeafProps) => {\n      return (\n        <RichTextV2Leaf\n          {...props}\n          plugins={plugins}\n          pathComponents={[]}\n          parentStylesheetKey={parentStylesheetKey}\n        />\n      )\n    },\n    [plugins, parentStylesheetKey],\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 { className: slateResetClass, styleElement: slateResetStyleElement } = useSlateReset()\n\n  return (\n    <>\n      {slateResetStyleElement}\n      <Slate editor={editor} value={initialValue}>\n        <Editable\n          className={slateResetClass}\n          decorate={decorate}\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}\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,OAAO,oBAAoB;AAC3B,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/EditableTextV2/render-element.js

@@ -1,17 +1,50 @@
 import { jsx } from "react/jsx-runtime";
+import { ReactEditor, useSlateStatic } from "slate-react";
 import { ControlValue } from "../../control";
-function RichTextV2Element({ definition, plugins, ...props }) {
+function RichTextV2Element({
+  plugins,
+  pathComponents,
+  parentStylesheetKey,
+  ...props
+}) {
+  const slateEditor = useSlateStatic();
   function initialRenderElement(props2) {
     return props2.children;
   }
+  const slatePath = () => {
+    try {
+      return ReactEditor.findPath(slateEditor, props.element);
+    } catch (error) {
+      return [];
+    }
+  };
+  const slatePathString = `slate-editor-path-[${slatePath().join(",")}]`;
   const renderElement = plugins.reduce(
-    (renderFn, plugin) => (props2) => {
+    (renderFn, plugin, index) => function RenderElementPlugin(props2) {
       const { control, renderElement: renderElement2 } = plugin;
       if (renderElement2 == null)
         return renderFn(props2);
       if (control == null || control.getElementValue == null)
         return renderElement2(renderFn, void 0)(props2);
-      return /* @__PURE__ */ jsx(ControlValue, { definition: control.definition, data: control.getElementValue(props2.element), children: (value) => renderElement2(renderFn, value)(props2) });
+      const pseudoElementKey = parentStylesheetKey;
+      const elementPathComponents = [
+        ...pathComponents,
+        `editable`,
+        `plugins`,
+        `${index}`,
+        `element`,
+        slatePathString
+      ];
+      return /* @__PURE__ */ jsx(
+        ControlValue,
+        {
+          definition: control.definition,
+          data: control.getElementValue(props2.element),
+          elementKey: pseudoElementKey,
+          propPathComponents: elementPathComponents,
+          children: (value) => renderElement2(renderFn, value)(props2)
+        }
+      );
     },
     initialRenderElement
   );

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text-v2/EditableTextV2/render-element.tsx"],"sourcesContent":["import { RenderElementProps } from 'slate-react'\n\nimport { RichTextV2Definition } from '../../../../../controls/rich-text-v2'\nimport { RichTextV2Plugin } from '../../../../../controls/rich-text-v2/plugin'\n\nimport { ControlValue } from '../../control'\n\ntype RichTextV2ElementProps = RenderElementProps & {\n  definition: RichTextV2Definition\n  plugins: RichTextV2Plugin[]\n}\n\nexport function RichTextV2Element({ definition, plugins, ...props }: RichTextV2ElementProps) {\n  function initialRenderElement(props: RenderElementProps) {\n    return props.children\n  }\n\n  const renderElement = plugins.reduce(\n    (renderFn, plugin) => (props: RenderElementProps) => {\n      const { control, renderElement } = plugin\n\n      if (renderElement == null) return renderFn(props)\n\n      if (control == null || control.getElementValue == null)\n        return renderElement(renderFn, undefined)(props)\n\n      return (\n        <ControlValue definition={control.definition} data={control.getElementValue(props.element)}>\n          {value => renderElement(renderFn, value)(props)}\n        </ControlValue>\n      )\n    },\n    initialRenderElement,\n  )\n\n  return renderElement(props)\n}\n"],"mappings":"AA2BQ;AAtBR,SAAS,oBAAoB;AAOtB,SAAS,kBAAkB,EAAE,YAAY,SAAS,GAAG,MAAM,GAA2B;AAC3F,WAAS,qBAAqBA,QAA2B;AACvD,WAAOA,OAAM;AAAA,EACf;AAEA,QAAM,gBAAgB,QAAQ;AAAA,IAC5B,CAAC,UAAU,WAAW,CAACA,WAA8B;AACnD,YAAM,EAAE,SAAS,eAAAC,eAAc,IAAI;AAEnC,UAAIA,kBAAiB;AAAM,eAAO,SAASD,MAAK;AAEhD,UAAI,WAAW,QAAQ,QAAQ,mBAAmB;AAChD,eAAOC,eAAc,UAAU,MAAS,EAAED,MAAK;AAEjD,aACE,oBAAC,gBAAa,YAAY,QAAQ,YAAY,MAAM,QAAQ,gBAAgBA,OAAM,OAAO,GACtF,qBAASC,eAAc,UAAU,KAAK,EAAED,MAAK,GAChD;AAAA,IAEJ;AAAA,IACA;AAAA,EACF;AAEA,SAAO,cAAc,KAAK;AAC5B;","names":["props","renderElement"]}
+{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text-v2/EditableTextV2/render-element.tsx"],"sourcesContent":["import { ReactEditor, RenderElementProps, useSlateStatic } from 'slate-react'\n\nimport { RichTextV2Plugin } from '../../../../../controls/rich-text-v2/plugin'\n\nimport { ControlValue } from '../../control'\n\ntype RichTextV2ElementProps = RenderElementProps & {\n  plugins: RichTextV2Plugin[]\n  pathComponents: string[]\n  parentStylesheetKey: string\n}\n\nexport function RichTextV2Element({\n  plugins,\n  pathComponents,\n  parentStylesheetKey,\n  ...props\n}: RichTextV2ElementProps) {\n  const slateEditor = useSlateStatic()\n  function initialRenderElement(props: RenderElementProps) {\n    return props.children\n  }\n\n  const slatePath = () => {\n    try {\n      return ReactEditor.findPath(slateEditor, props.element)\n    } catch (error) {\n      return []\n    }\n  }\n  const slatePathString = `slate-editor-path-[${slatePath().join(',')}]`\n\n  const renderElement = plugins.reduce(\n    (renderFn, plugin, index) =>\n      function RenderElementPlugin(props: RenderElementProps) {\n        const { control, renderElement } = plugin\n\n        if (renderElement == null) return renderFn(props)\n\n        if (control == null || control.getElementValue == null)\n          return renderElement(renderFn, undefined)(props)\n\n        const pseudoElementKey = parentStylesheetKey\n        const elementPathComponents = [\n          ...pathComponents,\n          `editable`,\n          `plugins`,\n          `${index}`,\n          `element`,\n          slatePathString,\n        ]\n\n        return (\n          <ControlValue\n            definition={control.definition}\n            data={control.getElementValue(props.element)}\n            elementKey={pseudoElementKey}\n            propPathComponents={elementPathComponents}\n          >\n            {value => renderElement(renderFn, value)(props)}\n          </ControlValue>\n        )\n      },\n    initialRenderElement,\n  )\n\n  return renderElement(props)\n}\n"],"mappings":"AAqDU;AArDV,SAAS,aAAiC,sBAAsB;AAIhE,SAAS,oBAAoB;AAQtB,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,QAAM,cAAc,eAAe;AACnC,WAAS,qBAAqBA,QAA2B;AACvD,WAAOA,OAAM;AAAA,EACf;AAEA,QAAM,YAAY,MAAM;AACtB,QAAI;AACF,aAAO,YAAY,SAAS,aAAa,MAAM,OAAO;AAAA,IACxD,SAAS,OAAO;AACd,aAAO,CAAC;AAAA,IACV;AAAA,EACF;AACA,QAAM,kBAAkB,sBAAsB,UAAU,EAAE,KAAK,GAAG,CAAC;AAEnE,QAAM,gBAAgB,QAAQ;AAAA,IAC5B,CAAC,UAAU,QAAQ,UACjB,SAAS,oBAAoBA,QAA2B;AACtD,YAAM,EAAE,SAAS,eAAAC,eAAc,IAAI;AAEnC,UAAIA,kBAAiB;AAAM,eAAO,SAASD,MAAK;AAEhD,UAAI,WAAW,QAAQ,QAAQ,mBAAmB;AAChD,eAAOC,eAAc,UAAU,MAAS,EAAED,MAAK;AAEjD,YAAM,mBAAmB;AACzB,YAAM,wBAAwB;AAAA,QAC5B,GAAG;AAAA,QACH;AAAA,QACA;AAAA,QACA,GAAG,KAAK;AAAA,QACR;AAAA,QACA;AAAA,MACF;AAEA,aACE;AAAA,QAAC;AAAA;AAAA,UACC,YAAY,QAAQ;AAAA,UACpB,MAAM,QAAQ,gBAAgBA,OAAM,OAAO;AAAA,UAC3C,YAAY;AAAA,UACZ,oBAAoB;AAAA,UAEnB,qBAASC,eAAc,UAAU,KAAK,EAAED,MAAK;AAAA;AAAA,MAChD;AAAA,IAEJ;AAAA,IACF;AAAA,EACF;AAEA,SAAO,cAAc,KAAK;AAC5B;","names":["props","renderElement"]}

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

@@ -1,17 +1,41 @@
 import { jsx } from "react/jsx-runtime";
 import { ControlValue } from "../../control";
-function RichTextV2Leaf({ definition, plugins, ...props }) {
+function RichTextV2Leaf({
+  plugins,
+  pathComponents,
+  parentStylesheetKey,
+  ...props
+}) {
   function initialRenderLeaf({ attributes, children, leaf }) {
     return /* @__PURE__ */ jsx("span", { className: leaf.className, ...attributes, children });
   }
   const renderLeaf = plugins.reduce(
-    (renderFn, plugin) => (props2) => {
+    (renderFn, plugin, index) => function RenderLeafPlugin(props2) {
       const { control, renderLeaf: renderLeaf2 } = plugin;
       if (control?.definition == null || renderLeaf2 == null)
         return renderFn(props2);
       if (control.getLeafValue == null)
         return renderLeaf2(renderFn, void 0)(props2);
-      return /* @__PURE__ */ jsx(ControlValue, { definition: control.definition, data: control.getLeafValue(props2.leaf), children: (value) => renderLeaf2(renderFn, value)(props2) });
+      const slatePath = props2.leaf._makeswiftLeafPath ?? "";
+      const pseudoElementKey = parentStylesheetKey;
+      const leafPathComponents = [
+        ...pathComponents,
+        `editable`,
+        `plugins`,
+        `${index}`,
+        `leaf`,
+        slatePath
+      ];
+      return /* @__PURE__ */ jsx(
+        ControlValue,
+        {
+          definition: control.definition,
+          data: control.getLeafValue(props2.leaf),
+          elementKey: pseudoElementKey,
+          propPathComponents: leafPathComponents,
+          children: (value) => renderLeaf2(renderFn, value)(props2)
+        }
+      );
     },
     initialRenderLeaf
   );

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text-v2/EditableTextV2/render-leaf.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport { RenderLeafProps } from 'slate-react'\nimport { RichTextV2Definition } from '../../../../../controls/rich-text-v2'\nimport { RichTextV2Plugin } from '../../../../../controls/rich-text-v2/plugin'\nimport { ControlValue } from '../../control'\n\ntype RichTextV2LeafProps = RenderLeafProps & {\n  definition: RichTextV2Definition\n  plugins: RichTextV2Plugin[]\n}\n\nexport function RichTextV2Leaf({ definition, plugins, ...props }: RichTextV2LeafProps) {\n  function initialRenderLeaf({ attributes, children, leaf }: RenderLeafProps): ReactNode {\n    return (\n      <span className={leaf.className} {...attributes}>\n        {children}\n      </span>\n    )\n  }\n\n  const renderLeaf = plugins.reduce(\n    (renderFn, plugin) => (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(props)\n}\n"],"mappings":"AAcM;AAVN,SAAS,oBAAoB;AAOtB,SAAS,eAAe,EAAE,YAAY,SAAS,GAAG,MAAM,GAAwB;AACrF,WAAS,kBAAkB,EAAE,YAAY,UAAU,KAAK,GAA+B;AACrF,WACE,oBAAC,UAAK,WAAW,KAAK,WAAY,GAAG,YAClC,UACH;AAAA,EAEJ;AAEA,QAAM,aAAa,QAAQ;AAAA,IACzB,CAAC,UAAU,WAAW,CAACA,WAA2B;AAChD,YAAM,EAAE,SAAS,YAAAC,YAAW,IAAI;AAEhC,UAAI,SAAS,cAAc,QAAQA,eAAc;AAAM,eAAO,SAASD,MAAK;AAE5E,UAAI,QAAQ,gBAAgB;AAAM,eAAOC,YAAW,UAAU,MAAS,EAAED,MAAK;AAE9E,aACE,oBAAC,gBAAa,YAAY,QAAQ,YAAY,MAAM,QAAQ,aAAaA,OAAM,IAAI,GAChF,qBAASC,YAAW,UAAU,KAAK,EAAED,MAAK,GAC7C;AAAA,IAEJ;AAAA,IACA;AAAA,EACF;AAEA,SAAO,WAAW,KAAK;AACzB;","names":["props","renderLeaf"]}
+{"version":3,"sources":["../../../../../../../src/runtimes/react/controls/rich-text-v2/EditableTextV2/render-leaf.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport { RenderLeafProps } from 'slate-react'\nimport { RichTextV2Plugin } from '../../../../../controls/rich-text-v2/plugin'\nimport { ControlValue } from '../../control'\n\ntype RichTextV2LeafProps = RenderLeafProps & {\n  plugins: RichTextV2Plugin[]\n  pathComponents: string[]\n  parentStylesheetKey: string\n}\n\nexport function RichTextV2Leaf({\n  plugins,\n  pathComponents,\n  parentStylesheetKey,\n  ...props\n}: RichTextV2LeafProps) {\n  function initialRenderLeaf({ attributes, children, leaf }: RenderLeafProps): ReactNode {\n    return (\n      <span className={leaf.className} {...attributes}>\n        {children}\n      </span>\n    )\n  }\n\n  const renderLeaf = plugins.reduce(\n    (renderFn, plugin, index) =>\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        // @ts-expect-error - this is a property that is added by a custom Slate decorator and is used by the css runtime\n        const slatePath = props.leaf._makeswiftLeafPath ?? ''\n        const pseudoElementKey = parentStylesheetKey\n        const leafPathComponents = [\n          ...pathComponents,\n          `editable`,\n          `plugins`,\n          `${index}`,\n          `leaf`,\n          slatePath,\n        ]\n\n        return (\n          <ControlValue\n            definition={control.definition}\n            data={control.getLeafValue(props.leaf)}\n            elementKey={pseudoElementKey}\n            propPathComponents={leafPathComponents}\n          >\n            {value => renderLeaf(renderFn, value)(props)}\n          </ControlValue>\n        )\n      },\n    initialRenderLeaf,\n  )\n\n  return renderLeaf(props)\n}\n"],"mappings":"AAmBM;AAhBN,SAAS,oBAAoB;AAQtB,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,WAAS,kBAAkB,EAAE,YAAY,UAAU,KAAK,GAA+B;AACrF,WACE,oBAAC,UAAK,WAAW,KAAK,WAAY,GAAG,YAClC,UACH;AAAA,EAEJ;AAEA,QAAM,aAAa,QAAQ;AAAA,IACzB,CAAC,UAAU,QAAQ,UACjB,SAAS,iBAAiBA,QAAwB;AAChD,YAAM,EAAE,SAAS,YAAAC,YAAW,IAAI;AAEhC,UAAI,SAAS,cAAc,QAAQA,eAAc;AAAM,eAAO,SAASD,MAAK;AAE5E,UAAI,QAAQ,gBAAgB;AAAM,eAAOC,YAAW,UAAU,MAAS,EAAED,MAAK;AAE9E,YAAM,YAAYA,OAAM,KAAK,sBAAsB;AACnD,YAAM,mBAAmB;AACzB,YAAM,qBAAqB;AAAA,QACzB,GAAG;AAAA,QACH;AAAA,QACA;AAAA,QACA,GAAG,KAAK;AAAA,QACR;AAAA,QACA;AAAA,MACF;AAEA,aACE;AAAA,QAAC;AAAA;AAAA,UACC,YAAY,QAAQ;AAAA,UACpB,MAAM,QAAQ,aAAaA,OAAM,IAAI;AAAA,UACrC,YAAY;AAAA,UACZ,oBAAoB;AAAA,UAEnB,qBAASC,YAAW,UAAU,KAAK,EAAED,MAAK;AAAA;AAAA,MAC7C;AAAA,IAEJ;AAAA,IACF;AAAA,EACF;AAEA,SAAO,WAAW,KAAK;AACzB;","names":["props","renderLeaf"]}