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

package/dist/esm/runtimes/react/server/components/editable-server-element.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/server/components/editable-server-element.tsx"],"sourcesContent":["'use client'\n\nimport { type PropsWithChildren, useEffect, useRef, startTransition, useCallback } from 'react'\n\nimport { ControlInstance } from '@makeswift/controls'\n\nimport { type ElementData } from '../../../../state/read-only-state'\nimport {\n  setResolvedValueOverride,\n  clearResolvedValueOverride,\n} from '../../../../state/actions/internal/read-write-actions'\n\nimport { useServerElementRefresh } from '../../hooks/use-server-element-refresh'\nimport { useElementData } from '../../hooks/use-element-data'\nimport { useControlDefs } from '../../hooks/use-control-defs'\nimport { useEditableElementStylesheetFactory } from '../../hooks/use-editable-element-stylesheet-factory'\nimport { useResolvedProps } from '../../hooks/use-resolved-props'\nimport { useControlInstances } from '../../components/control-instances-context'\nimport { useDispatch } from '../../hooks/use-dispatch'\nimport { useDocumentKey } from '../../hooks/use-document-context'\n\nimport { getProp } from '../../../../utils/prop-by-path'\nimport { setUnion, setDifference } from '../../../../utils/set'\n\nexport const EditableServerElement = ({\n  initialElementData,\n  children,\n}: PropsWithChildren<{ initialElementData: ElementData }>) => {\n  const elementKey = initialElementData.key\n  const elementData = useElementData({ elementKey })\n  if (elementData == null) {\n    // Element has been deleted\n    return null\n  }\n\n  return (\n    <EditableServerElementWrapper {...{ initialElementData, elementData }}>\n      {children}\n    </EditableServerElementWrapper>\n  )\n}\n\n/**\n * Reflects edits to `elementData.props` in the server-rendered `children`.\n * Changes limited to existing `ReactNode` props are applied through client-side\n * overrides. Style prop changes are handled by the stylesheet engine during\n * prop resolution. All other prop changes trigger a server refresh.\n */\nconst EditableServerElementWrapper = ({\n  initialElementData,\n  elementData,\n  children,\n}: PropsWithChildren<{ initialElementData: ElementData; elementData: ElementData }>) => {\n  const elementKey = initialElementData.key\n  const dispatch = useDispatch()\n  const documentKey = useDocumentKey()\n\n  const [_legacyDefs, definitions] = useControlDefs({ elementType: initialElementData.type })\n  const stylesheetFactory = useEditableElementStylesheetFactory({ elementKey })\n\n  const controlInstances = useControlInstances(elementKey)\n  const resolvedProps = useResolvedProps({\n    elementKey,\n    propDefs: definitions,\n    propData: elementData.props,\n    controlInstances,\n    stylesheetFactory,\n  })\n\n  const prevPropsRef = useRef(resolvedProps)\n  const prevLeafPropsRef = useRef(\n    getLeafPropsAndInstances(resolvedProps, controlInstances).leafProps,\n  )\n\n  const serverRefresh = useServerElementRefresh({ elementKey })\n  const applyServerRefresh = useCallback(\n    (elementData: ElementData, leafInstances: ControlInstance[], documentKey: string) =>\n      startTransition(async () => {\n        const applied = await serverRefresh(elementData)\n        if (!applied) return\n\n        // need a nested `startTransition` here, see\n        // https://react.dev/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition\n        startTransition(() => {\n          // reset instance overrides, if any\n          leafInstances.forEach(c =>\n            dispatch(clearResolvedValueOverride({ documentKey, instanceKey: c.instanceKey })),\n          )\n        })\n      }),\n    [serverRefresh, dispatch],\n  )\n\n  const applyResolvedValueOverrides = useCallback(\n    (instances: ControlInstance[], props: Record<string, unknown>, documentKey: string) =>\n      instances.forEach(c =>\n        dispatch(\n          setResolvedValueOverride({\n            documentKey,\n            instanceKey: c.instanceKey,\n            value: getProp(props, c.propPath),\n          }),\n        ),\n      ),\n    [dispatch],\n  )\n\n  useEffect(() => {\n    if (documentKey == null) return\n\n    if (children == null) {\n      // If we don't have a server-rendered node (i.e. user just dropped the element to the page),\n      // trigger a server re-render\n      const { leafInstances, leafProps } = getLeafPropsAndInstances(resolvedProps, controlInstances)\n\n      applyServerRefresh(elementData, leafInstances, documentKey)\n\n      prevPropsRef.current = resolvedProps\n      prevLeafPropsRef.current = leafProps\n      return\n    }\n\n    if (resolvedProps !== prevPropsRef.current) {\n      // If there was a change in resolved value, check if any of the changed props necessitate\n      // a server refresh.\n      //\n      // Note that style props have stable class names and updating a style prop will not result\n      // in a change to the resolved value, which is what we want. The stylesheet engine takes\n      // care of updating the client CSS on style prop updates through the `useResolvedProps` call.\n      const { needsRefresh, leafInstances, leafProps, reactNodeInstances } = needsServerRefresh({\n        resolvedProps,\n        controlInstances,\n        prevProps: prevPropsRef.current,\n        prevLeafProps: prevLeafPropsRef.current,\n      })\n\n      if (needsRefresh) {\n        applyServerRefresh(elementData, leafInstances, documentKey)\n      } else {\n        applyResolvedValueOverrides(reactNodeInstances, resolvedProps, documentKey)\n      }\n\n      prevPropsRef.current = resolvedProps\n      prevLeafPropsRef.current = leafProps\n    }\n  }, [\n    children,\n    resolvedProps,\n    documentKey,\n    elementData,\n    controlInstances,\n    applyServerRefresh,\n    applyResolvedValueOverrides,\n  ])\n\n  return children\n}\n\n/**\n * Determines whether resolved prop changes require a server refresh and returns\n * the control-instance state needed to apply the update.\n */\nconst needsServerRefresh = ({\n  resolvedProps,\n  controlInstances,\n  prevProps,\n  prevLeafProps,\n}: {\n  resolvedProps: Record<string, unknown>\n  controlInstances: Record<string, ControlInstance> | null\n  prevProps: Record<string, unknown>\n  prevLeafProps: Set<string>\n}): {\n  needsRefresh: boolean\n  leafInstances: ControlInstance[]\n  leafProps: Set<string>\n  reactNodeInstances: ControlInstance[]\n} => {\n  const { leafInstances, leafProps } = getLeafPropsAndInstances(resolvedProps, controlInstances)\n\n  const combinedLeafProps = setUnion(leafProps, prevLeafProps).values()\n  const updatedLeafProps = new Set(\n    [...combinedLeafProps].filter(\n      propName => getProp(resolvedProps, propName) !== getProp(prevProps, propName),\n    ),\n  )\n\n  const updatedLeafInstances = leafInstances.filter(instance =>\n    updatedLeafProps.has(instance.propPath),\n  )\n\n  const reactNodeInstances = updatedLeafInstances.filter(c => c.resolvesToRenderableNode())\n\n  const reactNodePropKeys = new Set(reactNodeInstances.map(c => c.propPath))\n  const newlyAddedLeafProps = setDifference(leafProps, prevLeafProps)\n\n  // A server refresh is needed if some of the updated props are not `ReactNode` props, or we\n  // have newly observed props (typically `List` items). Even when newly observed props are\n  // `ReactNode` props, we have to first render them on the server to get them in the element\n  // tree before they can be updated client-side.\n  const needsRefresh =\n    setDifference(updatedLeafProps, reactNodePropKeys).size > 0 || newlyAddedLeafProps.size > 0\n\n  return {\n    needsRefresh,\n    leafInstances,\n    leafProps,\n    reactNodeInstances,\n  }\n}\n\n/**\n *  Returns terminal prop paths with the corresponding control instances.\n */\nconst getLeafPropsAndInstances = (\n  props: Record<string, unknown>,\n  controlInstances: Record<string, ControlInstance> | null,\n): {\n  leafProps: Set<string>\n  leafInstances: ControlInstance[]\n} => {\n  const topLevelInstances = Object.keys(props)\n    .map(prop => controlInstances?.[prop])\n    .filter(inst => inst != null)\n\n  const leafInstances = getLeafInstances(topLevelInstances)\n  const leafProps = new Set(leafInstances.map(c => c.propPath))\n  return { leafProps, leafInstances }\n}\n\n/**\n * Flattens a control instance tree to its leaf (terminal) instances.\n */\nconst getLeafInstances = (instances: ControlInstance[]): ControlInstance[] =>\n  instances.flatMap(instance =>\n    instance.isCompositeProp() ? getLeafInstances(instance.children()) : [instance],\n  )\n"],"mappings":"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","names":["elementData","documentKey"]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/server/components/editable-server-element.tsx"],"sourcesContent":["'use client'\n\nimport { type PropsWithChildren, useEffect, useRef, startTransition, useCallback } from 'react'\n\nimport { ControlInstance } from '@makeswift/controls'\n\nimport { type ElementData } from '../../../../state/read-only-state'\nimport {\n  setResolvedValueOverride,\n  clearResolvedValueOverride,\n} from '../../../../state/actions/internal/read-write-actions'\n\nimport { useServerElementRefresh } from '../../hooks/use-server-element-refresh'\nimport { useElementData } from '../../hooks/use-element-data'\nimport { useControlDefs } from '../../hooks/use-control-defs'\nimport { useResolvedProps } from '../../hooks/use-resolved-props'\nimport { useControlInstances } from '../../components/control-instances-context'\nimport { useDispatch } from '../../hooks/use-dispatch'\nimport { useDocumentKey } from '../../hooks/use-document-context'\n\nimport { getProp } from '../../../../utils/prop-by-path'\nimport { setUnion, setDifference } from '../../../../utils/set'\nimport { useControlledStyles } from '../../css-runtime/hooks/use-controlled-styles'\n\nexport const EditableServerElement = ({\n  initialElementData,\n  children,\n}: PropsWithChildren<{ initialElementData: ElementData }>) => {\n  const elementKey = initialElementData.key\n  const elementData = useElementData({ elementKey })\n  if (elementData == null) {\n    // Element has been deleted\n    return null\n  }\n\n  return (\n    <EditableServerElementWrapper {...{ initialElementData, elementData }}>\n      {children}\n    </EditableServerElementWrapper>\n  )\n}\n\n/**\n * Reflects edits to `elementData.props` in the server-rendered `children`.\n * Changes limited to existing `ReactNode` props are applied through client-side\n * overrides. Style prop changes are handled by the stylesheet engine during\n * prop resolution. All other prop changes trigger a server refresh.\n */\nconst EditableServerElementWrapper = ({\n  initialElementData,\n  elementData,\n  children,\n}: PropsWithChildren<{ initialElementData: ElementData; elementData: ElementData }>) => {\n  const elementKey = initialElementData.key\n  const dispatch = useDispatch()\n  const documentKey = useDocumentKey()\n\n  const [_legacyDefs, definitions] = useControlDefs({ elementType: initialElementData.type })\n  const { getStylesheet, styleElements } = useControlledStyles({ namespace: elementKey })\n\n  const controlInstances = useControlInstances(elementKey)\n  const resolvedProps = useResolvedProps({\n    elementKey,\n    propDefs: definitions,\n    propData: elementData.props,\n    controlInstances,\n    getStylesheet,\n  })\n\n  const prevPropsRef = useRef(resolvedProps)\n  const prevLeafPropsRef = useRef(\n    getLeafPropsAndInstances(resolvedProps, controlInstances).leafProps,\n  )\n\n  const serverRefresh = useServerElementRefresh({ elementKey })\n  const applyServerRefresh = useCallback(\n    (elementData: ElementData, leafInstances: ControlInstance[], documentKey: string) =>\n      startTransition(async () => {\n        const applied = await serverRefresh(elementData)\n        if (!applied) return\n\n        // need a nested `startTransition` here, see\n        // https://react.dev/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition\n        startTransition(() => {\n          // reset instance overrides, if any\n          leafInstances.forEach(c =>\n            dispatch(clearResolvedValueOverride({ documentKey, instanceKey: c.instanceKey })),\n          )\n        })\n      }),\n    [serverRefresh, dispatch],\n  )\n\n  const applyResolvedValueOverrides = useCallback(\n    (instances: ControlInstance[], props: Record<string, unknown>, documentKey: string) =>\n      instances.forEach(c =>\n        dispatch(\n          setResolvedValueOverride({\n            documentKey,\n            instanceKey: c.instanceKey,\n            value: getProp(props, c.propPath),\n          }),\n        ),\n      ),\n    [dispatch],\n  )\n\n  useEffect(() => {\n    if (documentKey == null) return\n\n    if (children == null) {\n      // If we don't have a server-rendered node (i.e. user just dropped the element to the page),\n      // trigger a server re-render\n      const { leafInstances, leafProps } = getLeafPropsAndInstances(resolvedProps, controlInstances)\n\n      applyServerRefresh(elementData, leafInstances, documentKey)\n\n      prevPropsRef.current = resolvedProps\n      prevLeafPropsRef.current = leafProps\n      return\n    }\n\n    if (resolvedProps !== prevPropsRef.current) {\n      // If there was a change in resolved value, check if any of the changed props necessitate\n      // a server refresh.\n      //\n      // Note that style props have stable class names and updating a style prop will not result\n      // in a change to the resolved value, which is what we want. Dynamic style updates are handled\n      // through a subscription mechanism that listens for changes to controlled style data in the\n      // styles registry.\n      const { needsRefresh, leafInstances, leafProps, reactNodeInstances } = needsServerRefresh({\n        resolvedProps,\n        controlInstances,\n        prevProps: prevPropsRef.current,\n        prevLeafProps: prevLeafPropsRef.current,\n      })\n\n      if (needsRefresh) {\n        applyServerRefresh(elementData, leafInstances, documentKey)\n      } else {\n        applyResolvedValueOverrides(reactNodeInstances, resolvedProps, documentKey)\n      }\n\n      prevPropsRef.current = resolvedProps\n      prevLeafPropsRef.current = leafProps\n    }\n  }, [\n    children,\n    resolvedProps,\n    documentKey,\n    elementData,\n    controlInstances,\n    applyServerRefresh,\n    applyResolvedValueOverrides,\n  ])\n\n  return (\n    <>\n      {children}\n      {styleElements}\n    </>\n  )\n}\n\n/**\n * Determines whether resolved prop changes require a server refresh and returns\n * the control-instance state needed to apply the update.\n */\nconst needsServerRefresh = ({\n  resolvedProps,\n  controlInstances,\n  prevProps,\n  prevLeafProps,\n}: {\n  resolvedProps: Record<string, unknown>\n  controlInstances: Record<string, ControlInstance> | null\n  prevProps: Record<string, unknown>\n  prevLeafProps: Set<string>\n}): {\n  needsRefresh: boolean\n  leafInstances: ControlInstance[]\n  leafProps: Set<string>\n  reactNodeInstances: ControlInstance[]\n} => {\n  const { leafInstances, leafProps } = getLeafPropsAndInstances(resolvedProps, controlInstances)\n\n  const combinedLeafProps = setUnion(leafProps, prevLeafProps).values()\n  const updatedLeafProps = new Set(\n    [...combinedLeafProps].filter(\n      propName => getProp(resolvedProps, propName) !== getProp(prevProps, propName),\n    ),\n  )\n\n  const updatedLeafInstances = leafInstances.filter(instance =>\n    updatedLeafProps.has(instance.propPath),\n  )\n\n  const reactNodeInstances = updatedLeafInstances.filter(c => c.resolvesToRenderableNode())\n\n  const reactNodePropKeys = new Set(reactNodeInstances.map(c => c.propPath))\n  const newlyAddedLeafProps = setDifference(leafProps, prevLeafProps)\n\n  // A server refresh is needed if some of the updated props are not `ReactNode` props, or we\n  // have newly observed props (typically `List` items). Even when newly observed props are\n  // `ReactNode` props, we have to first render them on the server to get them in the element\n  // tree before they can be updated client-side.\n  const needsRefresh =\n    setDifference(updatedLeafProps, reactNodePropKeys).size > 0 || newlyAddedLeafProps.size > 0\n\n  return {\n    needsRefresh,\n    leafInstances,\n    leafProps,\n    reactNodeInstances,\n  }\n}\n\n/**\n *  Returns terminal prop paths with the corresponding control instances.\n */\nconst getLeafPropsAndInstances = (\n  props: Record<string, unknown>,\n  controlInstances: Record<string, ControlInstance> | null,\n): {\n  leafProps: Set<string>\n  leafInstances: ControlInstance[]\n} => {\n  const topLevelInstances = Object.keys(props)\n    .map(prop => controlInstances?.[prop])\n    .filter(inst => inst != null)\n\n  const leafInstances = getLeafInstances(topLevelInstances)\n  const leafProps = new Set(leafInstances.map(c => c.propPath))\n  return { leafProps, leafInstances }\n}\n\n/**\n * Flattens a control instance tree to its leaf (terminal) instances.\n */\nconst getLeafInstances = (instances: ControlInstance[]): ControlInstance[] =>\n  instances.flatMap(instance =>\n    instance.isCompositeProp() ? getLeafInstances(instance.children()) : [instance],\n  )\n"],"mappings":"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","names":["elementData","documentKey"]}

package/dist/esm/runtimes/react/server/components/element-data.js

@@ -7,13 +7,10 @@ import {
 } from "../../../../state/read-only-state";
 import { FallbackComponent } from "../../../../components/shared/FallbackComponent";
 import { isLegacyDescriptor } from "../../../../prop-controllers/descriptors";
-import {
-  ServerCSSCollector,
-  createCollectingServerStylesheet,
-  InjectServerCSS
-} from "../css/server-css";
 import { getStore } from "../render-context";
 import { resolveProps } from "../resolve-props";
+import { StylesheetEngine } from "../../css-runtime/stylesheet-engine";
+import { RSCEmittedStyle } from "../../css-runtime/components/rsc-emitted-style";
 async function ServerElementData({
   documentKey,
   context,
@@ -39,19 +36,26 @@ async function ServerElementData({
       legacyKeys
     });
   }
-  const cssCollector = new ServerCSSCollector();
-  const stylesheet = createCollectingServerStylesheet(
-    cssCollector,
-    getBreakpoints(state),
-    elementData.key
-  );
+  const classStyleData = /* @__PURE__ */ new Map();
+  const stylesheet = new StylesheetEngine({
+    breakpointsData: getBreakpoints(state),
+    classNamePrefix: context.rootStyleProps?.classNamePrefix,
+    documentKey,
+    elementKey: elementData.key,
+    propPathComponents: [],
+    onDefineStyle: (styleData) => {
+      const { onBoxModelChange, ...serializableStyleData } = styleData;
+      classStyleData.set(styleData.className, serializableStyleData);
+    }
+  });
   const props = {
     ...await resolveProps(context, elementData, documentKey, definitions, stylesheet),
     ...injectedProps
   };
+  const styleElements = Array.from(classStyleData, ([className, styleData]) => /* @__PURE__ */ jsx(RSCEmittedStyle, { namespace: elementData.key, serializableData: styleData }, className));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Component, { ...props }, elementData.key),
-    /* @__PURE__ */ jsx(InjectServerCSS, { collector: cssCollector, elementKey: elementData.key })
+    styleElements
   ] });
 }
 const getControlDefs = (state, elementData) => {

package/dist/esm/runtimes/react/server/components/element-data.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/server/components/element-data.tsx"],"sourcesContent":["import { type ReactNode } from 'react'\n\nimport { partitionRecord } from '../../../../utils/partition'\n\nimport {\n  type State,\n  type ElementData,\n  getReactComponent,\n  getBreakpoints,\n  getComponentPropControllerDescriptors,\n} from '../../../../state/read-only-state'\n\nimport { FallbackComponent } from '../../../../components/shared/FallbackComponent'\nimport { isLegacyDescriptor } from '../../../../prop-controllers/descriptors'\n\nimport {\n  ServerCSSCollector,\n  createCollectingServerStylesheet,\n  InjectServerCSS,\n} from '../css/server-css'\nimport { type ServerRenderContext, getStore } from '../render-context'\nimport { resolveProps } from '../resolve-props'\n\nexport async function ServerElementData({\n  documentKey,\n  context,\n  elementData,\n  injectedProps,\n}: {\n  documentKey: string\n  context: ServerRenderContext\n  elementData: ElementData\n  injectedProps: Record<string, unknown>\n}): Promise<ReactNode> {\n  const state = getStore(context).getState()\n\n  const Component = getReactComponent(state, elementData.type)\n  if (Component == null) {\n    return (\n      <FallbackComponent\n        text=\"Component not found\"\n        details={`Unknown component '${elementData.type}'`}\n      />\n    )\n  }\n\n  const [legacyDescriptors, definitions] = getControlDefs(state, elementData)\n  const legacyKeys = Object.keys(legacyDescriptors)\n  if (legacyKeys.length > 0) {\n    console.warn(`Unexpected legacy control data in server element '${elementData.key}`, {\n      elementData,\n      legacyKeys,\n    })\n  }\n\n  const cssCollector = new ServerCSSCollector()\n  const stylesheet = createCollectingServerStylesheet(\n    cssCollector,\n    getBreakpoints(state),\n    elementData.key,\n  )\n\n  const props = {\n    ...(await resolveProps(context, elementData, documentKey, definitions, stylesheet)),\n    ...injectedProps,\n  }\n\n  return (\n    <>\n      {/* Make the component the first child so that `findDOMNode` resolves to its first\n        rendered DOM node (if any) rather than the component's `<style>` element */}\n      <Component key={elementData.key} {...props} />\n      <InjectServerCSS collector={cssCollector} elementKey={elementData.key} />\n    </>\n  )\n}\n\nconst getControlDefs = (state: State, elementData: ElementData) => {\n  const descriptors = getComponentPropControllerDescriptors(state, elementData.type) ?? {}\n  return partitionRecord(descriptors, isLegacyDescriptor)\n}\n"],"mappings":"AAuCM,SA6BF,UA7BE,KA6BF,YA7BE;AArCN,SAAS,uBAAuB;AAEhC;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AAEnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAmC,gBAAgB;AACnD,SAAS,oBAAoB;AAE7B,eAAsB,kBAAkB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKuB;AACrB,QAAM,QAAQ,SAAS,OAAO,EAAE,SAAS;AAEzC,QAAM,YAAY,kBAAkB,OAAO,YAAY,IAAI;AAC3D,MAAI,aAAa,MAAM;AACrB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,sBAAsB,YAAY,IAAI;AAAA;AAAA,IACjD;AAAA,EAEJ;AAEA,QAAM,CAAC,mBAAmB,WAAW,IAAI,eAAe,OAAO,WAAW;AAC1E,QAAM,aAAa,OAAO,KAAK,iBAAiB;AAChD,MAAI,WAAW,SAAS,GAAG;AACzB,YAAQ,KAAK,qDAAqD,YAAY,GAAG,IAAI;AAAA,MACnF;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,eAAe,IAAI,mBAAmB;AAC5C,QAAM,aAAa;AAAA,IACjB;AAAA,IACA,eAAe,KAAK;AAAA,IACpB,YAAY;AAAA,EACd;AAEA,QAAM,QAAQ;AAAA,IACZ,GAAI,MAAM,aAAa,SAAS,aAAa,aAAa,aAAa,UAAU;AAAA,IACjF,GAAG;AAAA,EACL;AAEA,SACE,iCAGE;AAAA,wBAAC,aAAiC,GAAG,SAArB,YAAY,GAAgB;AAAA,IAC5C,oBAAC,mBAAgB,WAAW,cAAc,YAAY,YAAY,KAAK;AAAA,KACzE;AAEJ;AAEA,MAAM,iBAAiB,CAAC,OAAc,gBAA6B;AACjE,QAAM,cAAc,sCAAsC,OAAO,YAAY,IAAI,KAAK,CAAC;AACvF,SAAO,gBAAgB,aAAa,kBAAkB;AACxD;","names":[]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/server/components/element-data.tsx"],"sourcesContent":["import { type ReactNode } from 'react'\n\nimport { partitionRecord } from '../../../../utils/partition'\n\nimport {\n  type State,\n  type ElementData,\n  getReactComponent,\n  getBreakpoints,\n  getComponentPropControllerDescriptors,\n} from '../../../../state/read-only-state'\n\nimport { FallbackComponent } from '../../../../components/shared/FallbackComponent'\nimport { isLegacyDescriptor } from '../../../../prop-controllers/descriptors'\n\nimport { type ServerRenderContext, getStore } from '../render-context'\nimport { resolveProps } from '../resolve-props'\nimport { StylesheetEngine } from '../../css-runtime/stylesheet-engine'\nimport { type ControlledStyleData } from '../../css-runtime/types'\nimport { RSCEmittedStyle } from '../../css-runtime/components/rsc-emitted-style'\n\nexport async function ServerElementData({\n  documentKey,\n  context,\n  elementData,\n  injectedProps,\n}: {\n  documentKey: string\n  context: ServerRenderContext\n  elementData: ElementData\n  injectedProps: Record<string, unknown>\n}): Promise<ReactNode> {\n  const state = getStore(context).getState()\n\n  const Component = getReactComponent(state, elementData.type)\n  if (Component == null) {\n    return (\n      <FallbackComponent\n        text=\"Component not found\"\n        details={`Unknown component '${elementData.type}'`}\n      />\n    )\n  }\n\n  const [legacyDescriptors, definitions] = getControlDefs(state, elementData)\n  const legacyKeys = Object.keys(legacyDescriptors)\n  if (legacyKeys.length > 0) {\n    console.warn(`Unexpected legacy control data in server element '${elementData.key}`, {\n      elementData,\n      legacyKeys,\n    })\n  }\n\n  const classStyleData = new Map<string, ControlledStyleData>()\n  const stylesheet = new StylesheetEngine({\n    breakpointsData: getBreakpoints(state),\n    classNamePrefix: context.rootStyleProps?.classNamePrefix,\n    documentKey,\n    elementKey: elementData.key,\n    propPathComponents: [],\n    onDefineStyle: styleData => {\n      const { onBoxModelChange, ...serializableStyleData } = styleData\n      classStyleData.set(styleData.className, serializableStyleData)\n    },\n  })\n\n  const props = {\n    ...(await resolveProps(context, elementData, documentKey, definitions, stylesheet)),\n    ...injectedProps,\n  }\n\n  const styleElements = Array.from(classStyleData, ([className, styleData]) => (\n    <RSCEmittedStyle key={className} namespace={elementData.key} serializableData={styleData} />\n  ))\n\n  return (\n    <>\n      {/* Make the component the first child so that `findDOMNode` resolves to its first\n        rendered DOM node (if any) rather than the component's `<style>` element */}\n      <Component key={elementData.key} {...props} />\n      {styleElements}\n    </>\n  )\n}\n\nconst getControlDefs = (state: State, elementData: ElementData) => {\n  const descriptors = getComponentPropControllerDescriptors(state, elementData.type) ?? {}\n  return partitionRecord(descriptors, isLegacyDescriptor)\n}\n"],"mappings":"AAqCM,SAuCF,UAvCE,KAuCF,YAvCE;AAnCN,SAAS,uBAAuB;AAEhC;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AAEnC,SAAmC,gBAAgB;AACnD,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AAEjC,SAAS,uBAAuB;AAEhC,eAAsB,kBAAkB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKuB;AACrB,QAAM,QAAQ,SAAS,OAAO,EAAE,SAAS;AAEzC,QAAM,YAAY,kBAAkB,OAAO,YAAY,IAAI;AAC3D,MAAI,aAAa,MAAM;AACrB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,sBAAsB,YAAY,IAAI;AAAA;AAAA,IACjD;AAAA,EAEJ;AAEA,QAAM,CAAC,mBAAmB,WAAW,IAAI,eAAe,OAAO,WAAW;AAC1E,QAAM,aAAa,OAAO,KAAK,iBAAiB;AAChD,MAAI,WAAW,SAAS,GAAG;AACzB,YAAQ,KAAK,qDAAqD,YAAY,GAAG,IAAI;AAAA,MACnF;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,iBAAiB,oBAAI,IAAiC;AAC5D,QAAM,aAAa,IAAI,iBAAiB;AAAA,IACtC,iBAAiB,eAAe,KAAK;AAAA,IACrC,iBAAiB,QAAQ,gBAAgB;AAAA,IACzC;AAAA,IACA,YAAY,YAAY;AAAA,IACxB,oBAAoB,CAAC;AAAA,IACrB,eAAe,eAAa;AAC1B,YAAM,EAAE,kBAAkB,GAAG,sBAAsB,IAAI;AACvD,qBAAe,IAAI,UAAU,WAAW,qBAAqB;AAAA,IAC/D;AAAA,EACF,CAAC;AAED,QAAM,QAAQ;AAAA,IACZ,GAAI,MAAM,aAAa,SAAS,aAAa,aAAa,aAAa,UAAU;AAAA,IACjF,GAAG;AAAA,EACL;AAEA,QAAM,gBAAgB,MAAM,KAAK,gBAAgB,CAAC,CAAC,WAAW,SAAS,MACrE,oBAAC,mBAAgC,WAAW,YAAY,KAAK,kBAAkB,aAAzD,SAAoE,CAC3F;AAED,SACE,iCAGE;AAAA,wBAAC,aAAiC,GAAG,SAArB,YAAY,GAAgB;AAAA,IAC3C;AAAA,KACH;AAEJ;AAEA,MAAM,iBAAiB,CAAC,OAAc,gBAA6B;AACjE,QAAM,cAAc,sCAAsC,OAAO,YAAY,IAAI,KAAK,CAAC;AACvF,SAAO,gBAAgB,aAAa,kBAAkB;AACxD;","names":[]}

package/dist/esm/runtimes/react/server/components/server-elements-cache.js

@@ -1,7 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useState, useMemo } from "react";
-import { ClientCSSProvider } from "../css/client-css";
 const Context = createContext({
   getElement: () => null,
   updateElement: () => {
@@ -41,7 +40,7 @@ const ServerElementsCache = ({
 const ServerElementsProvider = ({
   children,
   elements
-}) => /* @__PURE__ */ jsx(ServerElementsCache, { value: elements, children: /* @__PURE__ */ jsx(ClientCSSProvider, { children }) });
+}) => /* @__PURE__ */ jsx(ServerElementsCache, { value: elements, children });
 const useServerElementsCache = () => useContext(Context);
 export {
   ServerElementsCache,

package/dist/esm/runtimes/react/server/components/server-elements-cache.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/server/components/server-elements-cache.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, ReactNode, useCallback, useContext, useState, useMemo } from 'react'\n\nimport { type ElementsMap } from '../collect-server-elements'\nimport { ClientCSSProvider } from '../css/client-css'\n\ntype ContextValue = {\n  getElement: (elementKey: string) => ReactNode\n  updateElement: (elementKey: string, node: ReactNode) => void\n  removeElement: (elementKey: string) => void\n}\n\nconst Context = createContext<ContextValue>({\n  getElement: () => null,\n  updateElement: () => {},\n  removeElement: () => {},\n})\n\n/**\n * Client-side \"cache\" of server-rendered elements; this is one of the key pieces in our RSC\n * implementation, with React doing the majority of the heavy lifting: when `ReactNode`s are\n * passed as props across a 'use client' boundary, React's flight serializer automatically\n * renders and encodes them in the RSC stream and then reconstructs them on the client. All\n * we need to do on the client is to make these React elements available for lookup/\n * manipulation when editing in the builder.\n */\nexport const ServerElementsCache = ({\n  children,\n  value,\n}: {\n  children: ReactNode\n  value: ElementsMap\n}) => {\n  // An RSC re-render does not inherently remount client components; React can reconcile\n  // the new server tree with the existing client tree, so we need to handle the `value`\n  // prop updates\n  const [nodes, setNodes] = useState(value)\n  const [previousValue, setPreviousValue] = useState(value)\n\n  // this is okay to do on render, see https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes\n  if (value !== previousValue) {\n    setPreviousValue(value)\n    setNodes(value)\n  }\n\n  const getElement = useCallback((elementKey: string): ReactNode => nodes.get(elementKey), [nodes])\n\n  const updateElement = useCallback(\n    (elementKey: string, node: ReactNode) => setNodes(prev => new Map(prev).set(elementKey, node)),\n    [],\n  )\n\n  const removeElement = useCallback(\n    (elementKey: string) =>\n      setNodes(prev => {\n        const next = new Map(prev)\n        next.delete(elementKey)\n        return next\n      }),\n    [],\n  )\n\n  const cache = useMemo(\n    () => ({ getElement, updateElement, removeElement }),\n    [getElement, updateElement, removeElement],\n  )\n\n  return <Context.Provider value={cache}>{children}</Context.Provider>\n}\n\nexport const ServerElementsProvider = ({\n  children,\n  elements,\n}: {\n  children: ReactNode\n  elements: ElementsMap\n}) => (\n  <ServerElementsCache value={elements}>\n    <ClientCSSProvider>{children}</ClientCSSProvider>\n  </ServerElementsCache>\n)\n\nexport const useServerElementsCache = () => useContext(Context)\n"],"mappings":";AAoES;AAlET,SAAS,eAA0B,aAAa,YAAY,UAAU,eAAe;AAGrF,SAAS,yBAAyB;AAQlC,MAAM,UAAU,cAA4B;AAAA,EAC1C,YAAY,MAAM;AAAA,EAClB,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe,MAAM;AAAA,EAAC;AACxB,CAAC;AAUM,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AACF,MAGM;AAIJ,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAGxD,MAAI,UAAU,eAAe;AAC3B,qBAAiB,KAAK;AACtB,aAAS,KAAK;AAAA,EAChB;AAEA,QAAM,aAAa,YAAY,CAAC,eAAkC,MAAM,IAAI,UAAU,GAAG,CAAC,KAAK,CAAC;AAEhG,QAAM,gBAAgB;AAAA,IACpB,CAAC,YAAoB,SAAoB,SAAS,UAAQ,IAAI,IAAI,IAAI,EAAE,IAAI,YAAY,IAAI,CAAC;AAAA,IAC7F,CAAC;AAAA,EACH;AAEA,QAAM,gBAAgB;AAAA,IACpB,CAAC,eACC,SAAS,UAAQ;AACf,YAAM,OAAO,IAAI,IAAI,IAAI;AACzB,WAAK,OAAO,UAAU;AACtB,aAAO;AAAA,IACT,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAEA,QAAM,QAAQ;AAAA,IACZ,OAAO,EAAE,YAAY,eAAe,cAAc;AAAA,IAClD,CAAC,YAAY,eAAe,aAAa;AAAA,EAC3C;AAEA,SAAO,oBAAC,QAAQ,UAAR,EAAiB,OAAO,OAAQ,UAAS;AACnD;AAEO,MAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AACF,MAIE,oBAAC,uBAAoB,OAAO,UAC1B,8BAAC,qBAAmB,UAAS,GAC/B;AAGK,MAAM,yBAAyB,MAAM,WAAW,OAAO;","names":[]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/server/components/server-elements-cache.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, ReactNode, useCallback, useContext, useState, useMemo } from 'react'\n\nimport { type ElementsMap } from '../collect-server-elements'\n\ntype ContextValue = {\n  getElement: (elementKey: string) => ReactNode\n  updateElement: (elementKey: string, node: ReactNode) => void\n  removeElement: (elementKey: string) => void\n}\n\nconst Context = createContext<ContextValue>({\n  getElement: () => null,\n  updateElement: () => {},\n  removeElement: () => {},\n})\n\n/**\n * Client-side \"cache\" of server-rendered elements; this is one of the key pieces in our RSC\n * implementation, with React doing the majority of the heavy lifting: when `ReactNode`s are\n * passed as props across a 'use client' boundary, React's flight serializer automatically\n * renders and encodes them in the RSC stream and then reconstructs them on the client. All\n * we need to do on the client is to make these React elements available for lookup/\n * manipulation when editing in the builder.\n */\nexport const ServerElementsCache = ({\n  children,\n  value,\n}: {\n  children: ReactNode\n  value: ElementsMap\n}) => {\n  // An RSC re-render does not inherently remount client components; React can reconcile\n  // the new server tree with the existing client tree, so we need to handle the `value`\n  // prop updates\n  const [nodes, setNodes] = useState(value)\n  const [previousValue, setPreviousValue] = useState(value)\n\n  // this is okay to do on render, see https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes\n  if (value !== previousValue) {\n    setPreviousValue(value)\n    setNodes(value)\n  }\n\n  const getElement = useCallback((elementKey: string): ReactNode => nodes.get(elementKey), [nodes])\n\n  const updateElement = useCallback(\n    (elementKey: string, node: ReactNode) => setNodes(prev => new Map(prev).set(elementKey, node)),\n    [],\n  )\n\n  const removeElement = useCallback(\n    (elementKey: string) =>\n      setNodes(prev => {\n        const next = new Map(prev)\n        next.delete(elementKey)\n        return next\n      }),\n    [],\n  )\n\n  const cache = useMemo(\n    () => ({ getElement, updateElement, removeElement }),\n    [getElement, updateElement, removeElement],\n  )\n\n  return <Context.Provider value={cache}>{children}</Context.Provider>\n}\n\nexport const ServerElementsProvider = ({\n  children,\n  elements,\n}: {\n  children: ReactNode\n  elements: ElementsMap\n}) => <ServerElementsCache value={elements}>{children}</ServerElementsCache>\n\nexport const useServerElementsCache = () => useContext(Context)\n"],"mappings":";AAmES;AAjET,SAAS,eAA0B,aAAa,YAAY,UAAU,eAAe;AAUrF,MAAM,UAAU,cAA4B;AAAA,EAC1C,YAAY,MAAM;AAAA,EAClB,eAAe,MAAM;AAAA,EAAC;AAAA,EACtB,eAAe,MAAM;AAAA,EAAC;AACxB,CAAC;AAUM,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AACF,MAGM;AAIJ,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAGxD,MAAI,UAAU,eAAe;AAC3B,qBAAiB,KAAK;AACtB,aAAS,KAAK;AAAA,EAChB;AAEA,QAAM,aAAa,YAAY,CAAC,eAAkC,MAAM,IAAI,UAAU,GAAG,CAAC,KAAK,CAAC;AAEhG,QAAM,gBAAgB;AAAA,IACpB,CAAC,YAAoB,SAAoB,SAAS,UAAQ,IAAI,IAAI,IAAI,EAAE,IAAI,YAAY,IAAI,CAAC;AAAA,IAC7F,CAAC;AAAA,EACH;AAEA,QAAM,gBAAgB;AAAA,IACpB,CAAC,eACC,SAAS,UAAQ;AACf,YAAM,OAAO,IAAI,IAAI,IAAI;AACzB,WAAK,OAAO,UAAU;AACtB,aAAO;AAAA,IACT,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAEA,QAAM,QAAQ;AAAA,IACZ,OAAO,EAAE,YAAY,eAAe,cAAc;AAAA,IAClD,CAAC,YAAY,eAAe,aAAa;AAAA,EAC3C;AAEA,SAAO,oBAAC,QAAQ,UAAR,EAAiB,OAAO,OAAQ,UAAS;AACnD;AAEO,MAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AACF,MAGM,oBAAC,uBAAoB,OAAO,UAAW,UAAS;AAE/C,MAAM,yBAAyB,MAAM,WAAW,OAAO;","names":[]}

package/dist/esm/runtimes/react/server/index.js

@@ -3,7 +3,6 @@ import { ServerElement } from "./components/element";
 import { MakeswiftComponent } from "./components/makeswift-component";
 import { Slot } from "./components/slot";
 import { RSCElementRenderer } from "./components/renderer";
-import { ServerCSSCollector } from "./css/server-css";
 import {
   RenderContext,
   setRenderContext,
@@ -15,7 +14,6 @@ export {
   RSCElementRenderer,
   RenderContext,
   RenderElementPayload,
-  ServerCSSCollector,
   ServerElement,
   Slot,
   collectServerElements,

package/dist/esm/runtimes/react/server/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/server/index.ts"],"sourcesContent":["export { collectServerElements } from './collect-server-elements'\nexport { ServerElement } from './components/element'\nexport { MakeswiftComponent } from './components/makeswift-component'\nexport { Slot } from './components/slot'\nexport { RSCElementRenderer } from './components/renderer'\nexport { ServerCSSCollector } from './css/server-css'\nexport {\n  type ServerRenderContext,\n  RenderContext,\n  setRenderContext,\n  getRenderContext,\n} from './render-context'\nexport { RenderElementPayload } from './render-element-payload'\n"],"mappings":"AAAA,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AACnC,SAAS,YAAY;AACrB,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/server/index.ts"],"sourcesContent":["export { collectServerElements } from './collect-server-elements'\nexport { ServerElement } from './components/element'\nexport { MakeswiftComponent } from './components/makeswift-component'\nexport { Slot } from './components/slot'\nexport { RSCElementRenderer } from './components/renderer'\nexport {\n  type ServerRenderContext,\n  RenderContext,\n  setRenderContext,\n  getRenderContext,\n} from './render-context'\nexport { RenderElementPayload } from './render-element-payload'\n"],"mappings":"AAAA,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AACnC,SAAS,YAAY;AACrB,SAAS,0BAA0B;AACnC;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;","names":[]}

package/dist/esm/runtimes/react/server/render-context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/server/render-context.tsx"],"sourcesContent":["import { cache, type PropsWithChildren } from 'react'\n\nimport { ReactRuntime } from '../../react/react-runtime'\nimport { type Store } from '../../../state/store'\n\nimport { type SiteVersion } from '../../../api/site-version'\nimport { MakeswiftClient } from '../../../client'\n\n/**\n * Request-scoped dependencies used to render Makeswift server elements.\n *\n * Framework integrations create a context for each request and install it with\n * `RenderContext` or `setRenderContext` so nested renderers can access it without\n * threading it through every component. The runtime must be request-bound;\n * together with `siteVersion` and `locale`, it selects the store and API resource\n * cache used during rendering.\n */\nexport type ServerRenderContext = {\n  request: Request\n  runtime: ReactRuntime\n  client: MakeswiftClient\n  siteVersion: SiteVersion | null\n  locale: string | undefined\n  store: Store\n}\n\nconst requestContext = cache((): { current?: ServerRenderContext } => ({}))\n\nexport const setRenderContext = (context: ServerRenderContext) => {\n  requestContext().current = context\n}\n\nexport const getRenderContext = (): ServerRenderContext => {\n  const context = requestContext().current\n  if (!context) throw Error('Makeswift render context was not set.')\n  return context\n}\n\nexport const getStore = ({ store }: ServerRenderContext): Store => store\n\nexport const RenderContext = ({\n  context,\n  children,\n}: PropsWithChildren<{ context: ServerRenderContext }>) => {\n  setRenderContext(context)\n  return children\n}\n"],"mappings":"AAAA,SAAS,aAAqC;AA0B9C,MAAM,iBAAiB,MAAM,OAA0C,CAAC,EAAE;AAEnE,MAAM,mBAAmB,CAAC,YAAiC;AAChE,iBAAe,EAAE,UAAU;AAC7B;AAEO,MAAM,mBAAmB,MAA2B;AACzD,QAAM,UAAU,eAAe,EAAE;AACjC,MAAI,CAAC;AAAS,UAAM,MAAM,uCAAuC;AACjE,SAAO;AACT;AAEO,MAAM,WAAW,CAAC,EAAE,MAAM,MAAkC;AAE5D,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AACF,MAA2D;AACzD,mBAAiB,OAAO;AACxB,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/server/render-context.tsx"],"sourcesContent":["import { cache, type PropsWithChildren } from 'react'\n\nimport { ReactRuntime } from '../../react/react-runtime'\nimport { type Store } from '../../../state/store'\n\nimport { type SiteVersion } from '../../../api/site-version'\nimport { MakeswiftClient } from '../../../client'\nimport { type RootStyleProps } from '../root-style-registry'\n\n/**\n * Request-scoped dependencies used to render Makeswift server elements.\n *\n * Framework integrations create a context for each request and install it with\n * `RenderContext` or `setRenderContext` so nested renderers can access it without\n * threading it through every component. The runtime must be request-bound;\n * together with `siteVersion` and `locale`, it selects the store and API resource\n * cache used during rendering.\n */\nexport type ServerRenderContext = {\n  request: Request\n  runtime: ReactRuntime\n  client: MakeswiftClient\n  siteVersion: SiteVersion | null\n  locale: string | undefined\n  store: Store\n  rootStyleProps?: RootStyleProps\n}\n\nconst requestContext = cache((): { current?: ServerRenderContext } => ({}))\n\nexport const setRenderContext = (context: ServerRenderContext) => {\n  requestContext().current = context\n}\n\nexport const getRenderContext = (): ServerRenderContext => {\n  const context = requestContext().current\n  if (!context) throw Error('Makeswift render context was not set.')\n  return context\n}\n\nexport const getStore = ({ store }: ServerRenderContext): Store => store\n\nexport const RenderContext = ({\n  context,\n  children,\n}: PropsWithChildren<{ context: ServerRenderContext }>) => {\n  setRenderContext(context)\n  return children\n}\n"],"mappings":"AAAA,SAAS,aAAqC;AA4B9C,MAAM,iBAAiB,MAAM,OAA0C,CAAC,EAAE;AAEnE,MAAM,mBAAmB,CAAC,YAAiC;AAChE,iBAAe,EAAE,UAAU;AAC7B;AAEO,MAAM,mBAAmB,MAA2B;AACzD,QAAM,UAAU,eAAe,EAAE;AACjC,MAAI,CAAC;AAAS,UAAM,MAAM,uCAAuC;AACjE,SAAO;AACT;AAEO,MAAM,WAAW,CAAC,EAAE,MAAM,MAAkC;AAE5D,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AACF,MAA2D;AACzD,mBAAiB,OAAO;AACxB,SAAO;AACT;","names":[]}

package/dist/esm/slate/BlockPlugin/index.js

@@ -1,5 +1,4 @@
-import { Fragment, jsx } from "react/jsx-runtime";
-import { cx } from "@emotion/css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Editor, Transforms, Range, Node, Text } from "slate";
 import { Select, Slate } from "@makeswift/controls";
 import { setBlockKeyForDevice } from "./setBlockKeyForDevice";
@@ -17,9 +16,10 @@ import { toggleList } from "./toggleList";
 import { EditorUtils } from "../utils/editor";
 import isHotkey from "is-hotkey";
 import { LIST_ITEM_CHILD_POSITION } from "./constants";
-import { useStyle } from "../../runtimes/react/use-style";
 import { Plugin } from "../../controls/rich-text-v2/plugin";
 import { BlockType } from "../../slate/types";
+import { useStyle } from "../../runtimes/react/css-runtime/hooks/use-style";
+import clsx from "clsx";
 const BlockActions = {
   setBlockKeyForDevice,
   clearBlockKeyForDevice,
@@ -265,14 +265,17 @@ function BlockPluginComponent({
   renderElement,
   ...props
 }) {
-  const blockStyles = [useStyle({ margin: 0 }), props.element.className];
-  const quoteStyles = useStyle({
+  const { className: blockStylesClassName, styleElement: blockStylesStyleElement } = useStyle({
+    margin: 0
+  });
+  const quoteStyles = {
     padding: "0.5em 10px",
     fontSize: "1.25em",
     fontWeight: "300",
     borderLeft: "5px solid rgba(0, 0, 0, 0.1)"
-  });
-  const unorderedListStyles = useStyle({
+  };
+  const { className: quoteStylesClassName, styleElement: quoteStylesStyleElement } = useStyle(quoteStyles);
+  const unorderedListStyles = {
     listStylePosition: "inside",
     paddingInlineStart: "20px",
     listStyleType: "disc",
@@ -282,38 +285,115 @@ function BlockPluginComponent({
     "ul ul": {
       listStyleType: "square"
     }
-  });
-  const orderedListStyles = useStyle({
+  };
+  const { className: unorderedListStylesClassName, styleElement: unorderedListStyleElement } = useStyle(unorderedListStyles);
+  const orderedListStyles = {
     listStylePosition: "inside",
     paddingInlineStart: "20px",
     listStyleType: "decimal"
-  });
+  };
+  const { className: orderedListStylesClassName, styleElement: orderedListStyleElement } = useStyle(orderedListStyles);
   switch (props.element.type) {
     case BlockType.Default:
     case BlockType.Paragraph:
-      return /* @__PURE__ */ jsx("p", { ...props.attributes, className: cx(...blockStyles), children: renderElement(props) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("p", { ...props.attributes, className: clsx(blockStylesClassName, props.element.className), children: renderElement(props) })
+      ] });
     case BlockType.Heading1:
-      return /* @__PURE__ */ jsx("h1", { ...props.attributes, className: cx(...blockStyles), children: renderElement(props) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("h1", { ...props.attributes, className: clsx(blockStylesClassName, props.element.className), children: renderElement(props) })
+      ] });
     case BlockType.Heading2:
-      return /* @__PURE__ */ jsx("h2", { ...props.attributes, className: cx(...blockStyles), children: renderElement(props) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("h2", { ...props.attributes, className: clsx(blockStylesClassName, props.element.className), children: renderElement(props) })
+      ] });
     case BlockType.Heading3:
-      return /* @__PURE__ */ jsx("h3", { ...props.attributes, className: cx(...blockStyles), children: renderElement(props) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("h3", { ...props.attributes, className: clsx(blockStylesClassName, props.element.className), children: renderElement(props) })
+      ] });
     case BlockType.Heading4:
-      return /* @__PURE__ */ jsx("h4", { ...props.attributes, className: cx(...blockStyles), children: renderElement(props) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("h4", { ...props.attributes, className: clsx(blockStylesClassName, props.element.className), children: renderElement(props) })
+      ] });
     case BlockType.Heading5:
-      return /* @__PURE__ */ jsx("h5", { ...props.attributes, className: cx(...blockStyles), children: renderElement(props) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("h5", { ...props.attributes, className: clsx(blockStylesClassName, props.element.className), children: renderElement(props) })
+      ] });
     case BlockType.Heading6:
-      return /* @__PURE__ */ jsx("h6", { ...props.attributes, className: cx(...blockStyles), children: renderElement(props) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("h6", { ...props.attributes, className: clsx(blockStylesClassName, props.element.className), children: renderElement(props) })
+      ] });
     case BlockType.BlockQuote:
-      return /* @__PURE__ */ jsx("blockquote", { ...props.attributes, className: cx(...blockStyles, quoteStyles), children: renderElement(props) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        quoteStylesStyleElement,
+        /* @__PURE__ */ jsx(
+          "blockquote",
+          {
+            ...props.attributes,
+            className: clsx(blockStylesClassName, quoteStylesClassName, props.element.className),
+            children: renderElement(props)
+          }
+        )
+      ] });
     case BlockType.OrderedList:
-      return /* @__PURE__ */ jsx("ol", { ...props.attributes, className: cx(...blockStyles, orderedListStyles), children: renderElement(props) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        orderedListStyleElement,
+        /* @__PURE__ */ jsx(
+          "ol",
+          {
+            ...props.attributes,
+            className: clsx(
+              blockStylesClassName,
+              orderedListStylesClassName,
+              props.element.className
+            ),
+            children: renderElement(props)
+          }
+        )
+      ] });
     case BlockType.UnorderedList:
-      return /* @__PURE__ */ jsx("ul", { ...props.attributes, className: cx(...blockStyles, unorderedListStyles), children: renderElement(props) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        unorderedListStyleElement,
+        /* @__PURE__ */ jsx(
+          "ul",
+          {
+            ...props.attributes,
+            className: clsx(
+              blockStylesClassName,
+              unorderedListStylesClassName,
+              props.element.className
+            ),
+            children: renderElement(props)
+          }
+        )
+      ] });
     case BlockType.ListItem:
-      return /* @__PURE__ */ jsx("li", { ...props.attributes, className: cx(...blockStyles), children: renderElement(props) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx("li", { ...props.attributes, className: clsx(blockStylesClassName, props.element.className), children: renderElement(props) })
+      ] });
     case BlockType.ListItemChild:
-      return /* @__PURE__ */ jsx("span", { ...props.attributes, className: cx(...blockStyles), children: renderElement(props) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            ...props.attributes,
+            className: clsx(blockStylesClassName, props.element.className),
+            children: renderElement(props)
+          }
+        )
+      ] });
     default:
       return /* @__PURE__ */ jsx(Fragment, { children: renderElement(props) });
   }

package/dist/esm/slate/BlockPlugin/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/slate/BlockPlugin/index.tsx"],"sourcesContent":["import type { KeyboardEvent } from 'react'\nimport { cx } from '@emotion/css'\nimport { Editor, Transforms, Range, Node, PathRef, Text } from 'slate'\nimport { type RenderElementProps } from 'slate-react'\nimport { Select, Slate, type DataType } from '@makeswift/controls'\n\nimport { setBlockKeyForDevice } from './setBlockKeyForDevice'\nimport { clearBlockKeyForDevice } from './clearBlockKeyForDevice'\nimport { wrapInline } from './wrapInline'\nimport { unwrapInline } from './unwrapInline'\nimport { getSelection } from '../selectors'\nimport { ElementUtils } from '../utils/element'\nimport { getActiveBlockType } from '../selectors'\nimport { unwrapList } from './unwrapList'\nimport { wrapList } from './wrapList'\nimport { indent } from './indent'\nimport { dedent } from './dedent'\nimport { toggleList } from './toggleList'\nimport { EditorUtils } from '../utils/editor'\nimport isHotkey from 'is-hotkey'\nimport { LIST_ITEM_CHILD_POSITION } from './constants'\nimport { useStyle } from '../../runtimes/react/use-style'\nimport { type RenderElement, Plugin } from '../../controls/rich-text-v2/plugin'\nimport { BlockType } from '../../slate/types'\n\nexport const BlockActions = {\n  setBlockKeyForDevice,\n  clearBlockKeyForDevice,\n  wrapInline,\n  unwrapInline,\n}\n\n// TODO: This API is still litered with artifacts from the list plugin being seperated out.\n// This plugin needs to be rewritten to be assumptionless.\nexport const ListActions = {\n  unwrapList,\n  wrapList,\n  indent,\n  dedent,\n  toggleList,\n}\n\nexport function onKeyDown(e: KeyboardEvent, editor: Editor) {\n  if (\n    !editor.selection ||\n    Array.from(Editor.nodes(editor, { match: node => Slate.isListItem(node) })).length === 0\n  )\n    return\n\n  if (isHotkey('shift+tab', e)) {\n    e.preventDefault()\n    ListActions.dedent(editor)\n  }\n\n  if (isHotkey('tab', e)) {\n    e.preventDefault()\n    ListActions.indent(editor)\n  }\n\n  if (isHotkey('backspace', e)) {\n    if (!editor.selection) return\n    if (Range.isExpanded(editor.selection)) return\n    const listItem = EditorUtils.getFirstAncestorListItem(editor, editor.selection.anchor.path)\n    if (editor.selection.anchor.offset === 0 && listItem) {\n      e.preventDefault()\n      const parentListItem = EditorUtils.getFirstAncestorListItem(editor, listItem[1])\n      const list = EditorUtils.getFirstAncestorList(editor, listItem[1])\n\n      if (parentListItem) {\n        ListActions.dedent(editor)\n      } else if (list) {\n        ListActions.unwrapList(editor)\n      }\n      return\n    }\n  }\n\n  if (isHotkey('enter', e)) {\n    e.preventDefault()\n\n    if (!editor.selection) return\n\n    if (Range.isExpanded(editor.selection)) {\n      Transforms.delete(editor)\n      return\n    }\n\n    const listItem = EditorUtils.getFirstAncestorListItem(editor, editor.selection.anchor.path)\n    if (\n      editor.selection.anchor.offset === 0 &&\n      listItem &&\n      Editor.string(editor, listItem[1]) === ''\n    ) {\n      const parentListItem = EditorUtils.getFirstAncestorListItem(editor, listItem[1])\n\n      if (parentListItem) {\n        ListActions.dedent(editor)\n      } else {\n        ListActions.unwrapList(editor)\n      }\n      return\n    }\n\n    Transforms.splitNodes(editor, {\n      at: editor.selection,\n      always: true,\n      match: node => Slate.isListItem(node),\n    })\n  }\n\n  if (isHotkey('shift+enter', e)) {\n    e.preventDefault()\n    editor.insertText('\\n')\n  }\n}\n\nexport function withBlock(editor: Editor) {\n  const { normalizeNode } = editor\n\n  editor.isInline = entry => {\n    return Slate.isInline(entry)\n  }\n\n  editor.normalizeNode = entry => {\n    const [normalizationNode, normalizationPath] = entry\n    // Normalization textAlign with empty array of values\n    if (Slate.isBlock(normalizationNode) && normalizationNode?.textAlign?.length == 0) {\n      Transforms.unsetNodes(editor, 'textAlign', { at: normalizationPath })\n      return\n    }\n\n    // Normalization for preventing non-list root blocks from being nested.\n    if (\n      normalizationPath.length === 1 &&\n      Slate.isRootBlock(normalizationNode) &&\n      !Slate.isList(normalizationNode)\n    ) {\n      const children = Array.from(Node.children(editor, normalizationPath))\n      if (children.findIndex(([child]) => Slate.isRootBlock(child)) !== -1) {\n        Transforms.unwrapNodes(editor, { at: normalizationPath })\n        return\n      }\n    }\n\n    // Normalization for converting children of list items to list item children\n    // In the case of backspace from position 0 of node into a list this converts the node into a list item.\n    if (Slate.isListItem(normalizationNode)) {\n      const pathToListItemText = [...normalizationPath, LIST_ITEM_CHILD_POSITION]\n\n      if (Node.has(editor, pathToListItemText)) {\n        const nodeInListItemTextPosition = Node.get(editor, pathToListItemText)\n        if (Slate.isRootBlock(nodeInListItemTextPosition)) {\n          Transforms.setNodes(\n            editor,\n            { type: BlockType.ListItemChild },\n            {\n              at: pathToListItemText,\n            },\n          )\n          return\n        }\n      } else {\n        Transforms.insertNodes(editor, ElementUtils.createListItem(), {\n          at: pathToListItemText,\n        })\n        return\n      }\n    }\n\n    // Normalization for merging adjacent lists of the same type\n    if (!Text.isText(normalizationNode)) {\n      const mergeableChildren = Array.from(Node.children(editor, normalizationPath))\n        .map((child, index, children) => {\n          const potentialNodeToBeMerged = children.at(index + 1)\n          if (\n            !potentialNodeToBeMerged ||\n            !Slate.isList(potentialNodeToBeMerged[0]) ||\n            !Slate.isList(child[0]) ||\n            potentialNodeToBeMerged[0].type !== child[0].type\n          ) {\n            return null\n          }\n          return [\n            Editor.pathRef(editor, child[1]),\n            Editor.pathRef(editor, potentialNodeToBeMerged[1]),\n          ]\n        })\n        .filter((mergeableNodes): mergeableNodes is PathRef[] => Boolean(mergeableNodes))\n\n      if (mergeableChildren.length !== 0) {\n        mergeableChildren.reverse().forEach(([nodePathRef, nodeToBeMergedPathRef]) => {\n          const nodePath = nodePathRef.current\n          const nodeToBeMergedPath = nodeToBeMergedPathRef.current\n          if (nodePath == null || nodeToBeMergedPath == null) return\n          const nodeChildren = Array.from(Node.children(editor, nodePath))\n          const childrenToBeMerged = Array.from(Node.children(editor, nodeToBeMergedPath))\n          Editor.withoutNormalizing(editor, () => {\n            childrenToBeMerged.reverse().forEach(([_, childPath]) => {\n              Transforms.moveNodes(editor, {\n                at: childPath,\n                to: [...nodePath, nodeChildren.length],\n              })\n            })\n            Transforms.removeNodes(editor, { at: nodeToBeMergedPath })\n          })\n          nodePathRef.unref()\n          nodeToBeMergedPathRef.unref()\n        })\n        return\n      }\n    }\n\n    normalizeNode(entry)\n  }\n\n  return editor\n}\n\nconst definition = Select({\n  label: 'Block',\n  labelOrientation: 'horizontal',\n  options: [\n    {\n      value: BlockType.Paragraph,\n      label: 'Paragraph',\n    },\n    {\n      value: BlockType.Heading1,\n      label: 'Heading 1',\n    },\n    {\n      value: BlockType.Heading2,\n      label: 'Heading 2',\n    },\n    {\n      value: BlockType.Heading3,\n      label: 'Heading 3',\n    },\n    {\n      value: BlockType.Heading4,\n      label: 'Heading 4',\n    },\n    {\n      value: BlockType.Heading5,\n      label: 'Heading 5',\n    },\n    {\n      value: BlockType.Heading6,\n      label: 'Heading 6',\n    },\n    {\n      value: BlockType.UnorderedList,\n      label: 'Bulleted list',\n    },\n    {\n      value: BlockType.OrderedList,\n      label: 'Numbered list',\n    },\n    {\n      value: BlockType.BlockQuote,\n      label: 'Quote',\n    },\n  ],\n  defaultValue: BlockType.Paragraph,\n})\n\nexport function BlockPlugin() {\n  return Plugin({\n    withPlugin: withBlock,\n    onKeyDown: onKeyDown,\n    control: {\n      definition,\n      onChange: (editor, value: DataType<typeof definition>) => {\n        // TODO: This onChange being so complex is an artifact of how the List plugin used to be seperated out from the block plugin.\n        // Would be great to refactor and simplify here.\n\n        const activeBlockType = getActiveBlockType(editor)\n        if (value === BlockType.UnorderedList || value === BlockType.OrderedList) {\n          ListActions.toggleList(editor, {\n            type: value,\n            at: getSelection(editor),\n          })\n        } else if (activeBlockType === value) {\n          Transforms.setNodes(\n            editor,\n            {\n              type: BlockType.Default,\n            },\n            { at: getSelection(editor) },\n          )\n        } else {\n          ListActions.unwrapList(editor, {\n            at: getSelection(editor),\n          })\n          Transforms.setNodes(\n            editor,\n            {\n              type: value ?? BlockType.Default,\n            },\n            { at: getSelection(editor) },\n          )\n        }\n      },\n      getValue: editor => {\n        const activeBlock = getActiveBlockType(editor)\n\n        if (activeBlock == null) return undefined\n        if (activeBlock === Slate.RootBlockType.Default) return undefined\n\n        return activeBlock\n      },\n    },\n    renderElement: renderElement => props => (\n      <BlockPluginComponent {...props} renderElement={renderElement} />\n    ),\n  })\n}\n\nfunction BlockPluginComponent({\n  renderElement,\n  ...props\n}: RenderElementProps & { renderElement: RenderElement }) {\n  const blockStyles = [useStyle({ margin: 0 }), props.element.className]\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  const unorderedListStyles = useStyle({\n    listStylePosition: 'inside',\n    paddingInlineStart: '20px',\n    listStyleType: 'disc',\n    ul: {\n      listStyleType: 'circle',\n    },\n    'ul ul': {\n      listStyleType: 'square',\n    },\n  })\n\n  const orderedListStyles = useStyle({\n    listStylePosition: 'inside',\n    paddingInlineStart: '20px',\n    listStyleType: 'decimal',\n  })\n\n  switch (props.element.type) {\n    case BlockType.Default:\n    case BlockType.Paragraph:\n      return (\n        <p {...props.attributes} className={cx(...blockStyles)}>\n          {renderElement(props)}\n        </p>\n      )\n    case BlockType.Heading1:\n      return (\n        <h1 {...props.attributes} className={cx(...blockStyles)}>\n          {renderElement(props)}\n        </h1>\n      )\n    case BlockType.Heading2:\n      return (\n        <h2 {...props.attributes} className={cx(...blockStyles)}>\n          {renderElement(props)}\n        </h2>\n      )\n    case BlockType.Heading3:\n      return (\n        <h3 {...props.attributes} className={cx(...blockStyles)}>\n          {renderElement(props)}\n        </h3>\n      )\n    case BlockType.Heading4:\n      return (\n        <h4 {...props.attributes} className={cx(...blockStyles)}>\n          {renderElement(props)}\n        </h4>\n      )\n    case BlockType.Heading5:\n      return (\n        <h5 {...props.attributes} className={cx(...blockStyles)}>\n          {renderElement(props)}\n        </h5>\n      )\n    case BlockType.Heading6:\n      return (\n        <h6 {...props.attributes} className={cx(...blockStyles)}>\n          {renderElement(props)}\n        </h6>\n      )\n    case BlockType.BlockQuote:\n      return (\n        <blockquote {...props.attributes} className={cx(...blockStyles, quoteStyles)}>\n          {renderElement(props)}\n        </blockquote>\n      )\n    case BlockType.OrderedList:\n      return (\n        <ol {...props.attributes} className={cx(...blockStyles, orderedListStyles)}>\n          {renderElement(props)}\n        </ol>\n      )\n    case BlockType.UnorderedList:\n      return (\n        <ul {...props.attributes} className={cx(...blockStyles, unorderedListStyles)}>\n          {renderElement(props)}\n        </ul>\n      )\n    case BlockType.ListItem:\n      return (\n        <li {...props.attributes} className={cx(...blockStyles)}>\n          {renderElement(props)}\n        </li>\n      )\n    case BlockType.ListItemChild:\n      return (\n        <span {...props.attributes} className={cx(...blockStyles)}>\n          {renderElement(props)}\n        </span>\n      )\n    default:\n      return <>{renderElement(props)}</>\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/slate/BlockPlugin/index.tsx"],"sourcesContent":["import type { KeyboardEvent } from 'react'\nimport { Editor, Transforms, Range, Node, PathRef, Text } from 'slate'\nimport { type RenderElementProps } from 'slate-react'\nimport { Select, Slate, type DataType } from '@makeswift/controls'\n\nimport { setBlockKeyForDevice } from './setBlockKeyForDevice'\nimport { clearBlockKeyForDevice } from './clearBlockKeyForDevice'\nimport { wrapInline } from './wrapInline'\nimport { unwrapInline } from './unwrapInline'\nimport { getSelection } from '../selectors'\nimport { ElementUtils } from '../utils/element'\nimport { getActiveBlockType } from '../selectors'\nimport { unwrapList } from './unwrapList'\nimport { wrapList } from './wrapList'\nimport { indent } from './indent'\nimport { dedent } from './dedent'\nimport { toggleList } from './toggleList'\nimport { EditorUtils } from '../utils/editor'\nimport isHotkey from 'is-hotkey'\nimport { LIST_ITEM_CHILD_POSITION } from './constants'\nimport { type RenderElement, Plugin } from '../../controls/rich-text-v2/plugin'\nimport { BlockType } from '../../slate/types'\nimport { useStyle } from '../../runtimes/react/css-runtime/hooks/use-style'\nimport clsx from 'clsx'\nimport { CSSObject } from '@emotion/serialize'\n\nexport const BlockActions = {\n  setBlockKeyForDevice,\n  clearBlockKeyForDevice,\n  wrapInline,\n  unwrapInline,\n}\n\n// TODO: This API is still litered with artifacts from the list plugin being seperated out.\n// This plugin needs to be rewritten to be assumptionless.\nexport const ListActions = {\n  unwrapList,\n  wrapList,\n  indent,\n  dedent,\n  toggleList,\n}\n\nexport function onKeyDown(e: KeyboardEvent, editor: Editor) {\n  if (\n    !editor.selection ||\n    Array.from(Editor.nodes(editor, { match: node => Slate.isListItem(node) })).length === 0\n  )\n    return\n\n  if (isHotkey('shift+tab', e)) {\n    e.preventDefault()\n    ListActions.dedent(editor)\n  }\n\n  if (isHotkey('tab', e)) {\n    e.preventDefault()\n    ListActions.indent(editor)\n  }\n\n  if (isHotkey('backspace', e)) {\n    if (!editor.selection) return\n    if (Range.isExpanded(editor.selection)) return\n    const listItem = EditorUtils.getFirstAncestorListItem(editor, editor.selection.anchor.path)\n    if (editor.selection.anchor.offset === 0 && listItem) {\n      e.preventDefault()\n      const parentListItem = EditorUtils.getFirstAncestorListItem(editor, listItem[1])\n      const list = EditorUtils.getFirstAncestorList(editor, listItem[1])\n\n      if (parentListItem) {\n        ListActions.dedent(editor)\n      } else if (list) {\n        ListActions.unwrapList(editor)\n      }\n      return\n    }\n  }\n\n  if (isHotkey('enter', e)) {\n    e.preventDefault()\n\n    if (!editor.selection) return\n\n    if (Range.isExpanded(editor.selection)) {\n      Transforms.delete(editor)\n      return\n    }\n\n    const listItem = EditorUtils.getFirstAncestorListItem(editor, editor.selection.anchor.path)\n    if (\n      editor.selection.anchor.offset === 0 &&\n      listItem &&\n      Editor.string(editor, listItem[1]) === ''\n    ) {\n      const parentListItem = EditorUtils.getFirstAncestorListItem(editor, listItem[1])\n\n      if (parentListItem) {\n        ListActions.dedent(editor)\n      } else {\n        ListActions.unwrapList(editor)\n      }\n      return\n    }\n\n    Transforms.splitNodes(editor, {\n      at: editor.selection,\n      always: true,\n      match: node => Slate.isListItem(node),\n    })\n  }\n\n  if (isHotkey('shift+enter', e)) {\n    e.preventDefault()\n    editor.insertText('\\n')\n  }\n}\n\nexport function withBlock(editor: Editor) {\n  const { normalizeNode } = editor\n\n  editor.isInline = entry => {\n    return Slate.isInline(entry)\n  }\n\n  editor.normalizeNode = entry => {\n    const [normalizationNode, normalizationPath] = entry\n    // Normalization textAlign with empty array of values\n    if (Slate.isBlock(normalizationNode) && normalizationNode?.textAlign?.length == 0) {\n      Transforms.unsetNodes(editor, 'textAlign', { at: normalizationPath })\n      return\n    }\n\n    // Normalization for preventing non-list root blocks from being nested.\n    if (\n      normalizationPath.length === 1 &&\n      Slate.isRootBlock(normalizationNode) &&\n      !Slate.isList(normalizationNode)\n    ) {\n      const children = Array.from(Node.children(editor, normalizationPath))\n      if (children.findIndex(([child]) => Slate.isRootBlock(child)) !== -1) {\n        Transforms.unwrapNodes(editor, { at: normalizationPath })\n        return\n      }\n    }\n\n    // Normalization for converting children of list items to list item children\n    // In the case of backspace from position 0 of node into a list this converts the node into a list item.\n    if (Slate.isListItem(normalizationNode)) {\n      const pathToListItemText = [...normalizationPath, LIST_ITEM_CHILD_POSITION]\n\n      if (Node.has(editor, pathToListItemText)) {\n        const nodeInListItemTextPosition = Node.get(editor, pathToListItemText)\n        if (Slate.isRootBlock(nodeInListItemTextPosition)) {\n          Transforms.setNodes(\n            editor,\n            { type: BlockType.ListItemChild },\n            {\n              at: pathToListItemText,\n            },\n          )\n          return\n        }\n      } else {\n        Transforms.insertNodes(editor, ElementUtils.createListItem(), {\n          at: pathToListItemText,\n        })\n        return\n      }\n    }\n\n    // Normalization for merging adjacent lists of the same type\n    if (!Text.isText(normalizationNode)) {\n      const mergeableChildren = Array.from(Node.children(editor, normalizationPath))\n        .map((child, index, children) => {\n          const potentialNodeToBeMerged = children.at(index + 1)\n          if (\n            !potentialNodeToBeMerged ||\n            !Slate.isList(potentialNodeToBeMerged[0]) ||\n            !Slate.isList(child[0]) ||\n            potentialNodeToBeMerged[0].type !== child[0].type\n          ) {\n            return null\n          }\n          return [\n            Editor.pathRef(editor, child[1]),\n            Editor.pathRef(editor, potentialNodeToBeMerged[1]),\n          ]\n        })\n        .filter((mergeableNodes): mergeableNodes is PathRef[] => Boolean(mergeableNodes))\n\n      if (mergeableChildren.length !== 0) {\n        mergeableChildren.reverse().forEach(([nodePathRef, nodeToBeMergedPathRef]) => {\n          const nodePath = nodePathRef.current\n          const nodeToBeMergedPath = nodeToBeMergedPathRef.current\n          if (nodePath == null || nodeToBeMergedPath == null) return\n          const nodeChildren = Array.from(Node.children(editor, nodePath))\n          const childrenToBeMerged = Array.from(Node.children(editor, nodeToBeMergedPath))\n          Editor.withoutNormalizing(editor, () => {\n            childrenToBeMerged.reverse().forEach(([_, childPath]) => {\n              Transforms.moveNodes(editor, {\n                at: childPath,\n                to: [...nodePath, nodeChildren.length],\n              })\n            })\n            Transforms.removeNodes(editor, { at: nodeToBeMergedPath })\n          })\n          nodePathRef.unref()\n          nodeToBeMergedPathRef.unref()\n        })\n        return\n      }\n    }\n\n    normalizeNode(entry)\n  }\n\n  return editor\n}\n\nconst definition = Select({\n  label: 'Block',\n  labelOrientation: 'horizontal',\n  options: [\n    {\n      value: BlockType.Paragraph,\n      label: 'Paragraph',\n    },\n    {\n      value: BlockType.Heading1,\n      label: 'Heading 1',\n    },\n    {\n      value: BlockType.Heading2,\n      label: 'Heading 2',\n    },\n    {\n      value: BlockType.Heading3,\n      label: 'Heading 3',\n    },\n    {\n      value: BlockType.Heading4,\n      label: 'Heading 4',\n    },\n    {\n      value: BlockType.Heading5,\n      label: 'Heading 5',\n    },\n    {\n      value: BlockType.Heading6,\n      label: 'Heading 6',\n    },\n    {\n      value: BlockType.UnorderedList,\n      label: 'Bulleted list',\n    },\n    {\n      value: BlockType.OrderedList,\n      label: 'Numbered list',\n    },\n    {\n      value: BlockType.BlockQuote,\n      label: 'Quote',\n    },\n  ],\n  defaultValue: BlockType.Paragraph,\n})\n\nexport function BlockPlugin() {\n  return Plugin({\n    withPlugin: withBlock,\n    onKeyDown: onKeyDown,\n    control: {\n      definition,\n      onChange: (editor, value: DataType<typeof definition>) => {\n        // TODO: This onChange being so complex is an artifact of how the List plugin used to be seperated out from the block plugin.\n        // Would be great to refactor and simplify here.\n\n        const activeBlockType = getActiveBlockType(editor)\n        if (value === BlockType.UnorderedList || value === BlockType.OrderedList) {\n          ListActions.toggleList(editor, {\n            type: value,\n            at: getSelection(editor),\n          })\n        } else if (activeBlockType === value) {\n          Transforms.setNodes(\n            editor,\n            {\n              type: BlockType.Default,\n            },\n            { at: getSelection(editor) },\n          )\n        } else {\n          ListActions.unwrapList(editor, {\n            at: getSelection(editor),\n          })\n          Transforms.setNodes(\n            editor,\n            {\n              type: value ?? BlockType.Default,\n            },\n            { at: getSelection(editor) },\n          )\n        }\n      },\n      getValue: editor => {\n        const activeBlock = getActiveBlockType(editor)\n\n        if (activeBlock == null) return undefined\n        if (activeBlock === Slate.RootBlockType.Default) return undefined\n\n        return activeBlock\n      },\n    },\n    renderElement: renderElement => props => (\n      <BlockPluginComponent {...props} renderElement={renderElement} />\n    ),\n  })\n}\n\nfunction BlockPluginComponent({\n  renderElement,\n  ...props\n}: RenderElementProps & { renderElement: RenderElement }) {\n  const { className: blockStylesClassName, styleElement: blockStylesStyleElement } = useStyle({\n    margin: 0,\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  const unorderedListStyles: CSSObject = {\n    listStylePosition: 'inside',\n    paddingInlineStart: '20px',\n    listStyleType: 'disc',\n    ul: {\n      listStyleType: 'circle',\n    },\n    'ul ul': {\n      listStyleType: 'square',\n    },\n  }\n  const { className: unorderedListStylesClassName, styleElement: unorderedListStyleElement } =\n    useStyle(unorderedListStyles)\n\n  const orderedListStyles: CSSObject = {\n    listStylePosition: 'inside',\n    paddingInlineStart: '20px',\n    listStyleType: 'decimal',\n  }\n  const { className: orderedListStylesClassName, styleElement: orderedListStyleElement } =\n    useStyle(orderedListStyles)\n\n  switch (props.element.type) {\n    case BlockType.Default:\n    case BlockType.Paragraph:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <p {...props.attributes} className={clsx(blockStylesClassName, props.element.className)}>\n            {renderElement(props)}\n          </p>\n        </>\n      )\n    case BlockType.Heading1:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <h1 {...props.attributes} className={clsx(blockStylesClassName, props.element.className)}>\n            {renderElement(props)}\n          </h1>\n        </>\n      )\n    case BlockType.Heading2:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <h2 {...props.attributes} className={clsx(blockStylesClassName, props.element.className)}>\n            {renderElement(props)}\n          </h2>\n        </>\n      )\n    case BlockType.Heading3:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <h3 {...props.attributes} className={clsx(blockStylesClassName, props.element.className)}>\n            {renderElement(props)}\n          </h3>\n        </>\n      )\n    case BlockType.Heading4:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <h4 {...props.attributes} className={clsx(blockStylesClassName, props.element.className)}>\n            {renderElement(props)}\n          </h4>\n        </>\n      )\n    case BlockType.Heading5:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <h5 {...props.attributes} className={clsx(blockStylesClassName, props.element.className)}>\n            {renderElement(props)}\n          </h5>\n        </>\n      )\n    case BlockType.Heading6:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <h6 {...props.attributes} className={clsx(blockStylesClassName, props.element.className)}>\n            {renderElement(props)}\n          </h6>\n        </>\n      )\n    case BlockType.BlockQuote:\n      return (\n        <>\n          {blockStylesStyleElement}\n          {quoteStylesStyleElement}\n          <blockquote\n            {...props.attributes}\n            className={clsx(blockStylesClassName, quoteStylesClassName, props.element.className)}\n          >\n            {renderElement(props)}\n          </blockquote>\n        </>\n      )\n    case BlockType.OrderedList:\n      return (\n        <>\n          {blockStylesStyleElement}\n          {orderedListStyleElement}\n          <ol\n            {...props.attributes}\n            className={clsx(\n              blockStylesClassName,\n              orderedListStylesClassName,\n              props.element.className,\n            )}\n          >\n            {renderElement(props)}\n          </ol>\n        </>\n      )\n    case BlockType.UnorderedList:\n      return (\n        <>\n          {blockStylesStyleElement}\n          {unorderedListStyleElement}\n          <ul\n            {...props.attributes}\n            className={clsx(\n              blockStylesClassName,\n              unorderedListStylesClassName,\n              props.element.className,\n            )}\n          >\n            {renderElement(props)}\n          </ul>\n        </>\n      )\n    case BlockType.ListItem:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <li {...props.attributes} className={clsx(blockStylesClassName, props.element.className)}>\n            {renderElement(props)}\n          </li>\n        </>\n      )\n    case BlockType.ListItemChild:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <span\n            {...props.attributes}\n            className={clsx(blockStylesClassName, props.element.className)}\n          >\n            {renderElement(props)}\n          </span>\n        </>\n      )\n    default:\n      return <>{renderElement(props)}</>\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/esm/slate/LinkPlugin/index.js

@@ -1,12 +1,12 @@
-import { Fragment, jsx } from "react/jsx-runtime";
-import { cx } from "@emotion/css";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Slate } from "@makeswift/controls";
 import { Link } from "../../controls/link";
-import { useStyle } from "../../runtimes/react/use-style";
 import { Link as LinkComponent } from "../../components/shared/Link";
 import { Plugin } from "../../controls/rich-text-v2/plugin";
 import { onChange } from "./onChange";
 import { getValue } from "./getValue";
+import { useStyle } from "../../runtimes/react/css-runtime/hooks/use-style";
+import clsx from "clsx";
 const withLink = (editor) => {
   const { isInline } = editor;
   editor.isInline = (entry) => {
@@ -20,22 +20,27 @@ function InlinePluginComponent({
   children,
   renderElement
 }) {
-  const linkStyle = useStyle({ textDecoration: "none" });
+  const { className: linkClassName, styleElement: linkStyleElement } = useStyle({
+    textDecoration: "none"
+  });
   switch (element.type) {
     case Slate.InlineType.Link:
-      return /* @__PURE__ */ jsx(
-        LinkComponent,
-        {
-          ...attributes,
-          link: element.link ?? void 0,
-          className: cx(linkStyle, element.className),
-          children: renderElement({
-            element,
-            attributes,
-            children
-          })
-        }
-      );
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        linkStyleElement,
+        /* @__PURE__ */ jsx(
+          LinkComponent,
+          {
+            ...attributes,
+            link: element.link ?? void 0,
+            className: clsx(linkClassName, element.className),
+            children: renderElement({
+              element,
+              attributes,
+              children
+            })
+          }
+        )
+      ] });
     default:
       return /* @__PURE__ */ jsx(Fragment, { children: renderElement({
         element,
@@ -48,7 +53,7 @@ function LinkPlugin() {
   return Plugin({
     control: {
       definition: Link({
-        label: "On Click"
+        label: "On click"
       }),
       onChange,
       getValue,

package/dist/esm/slate/LinkPlugin/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/slate/LinkPlugin/index.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { type Editor, Element } from 'slate'\nimport { type RenderElementProps } from 'slate-react'\nimport { Slate } from '@makeswift/controls'\n\nimport { Link } from '../../controls/link'\nimport { useStyle } from '../../runtimes/react/use-style'\nimport { Link as LinkComponent } from '../../components/shared/Link'\nimport { type RenderElement, Plugin } from '../../controls/rich-text-v2/plugin'\n\nimport { onChange } from './onChange'\nimport { getValue } from './getValue'\n\nexport const withLink = (editor: Editor) => {\n  const { isInline } = editor\n\n  editor.isInline = entry => {\n    return Slate.isInline(entry) && isInline(entry)\n  }\n\n  return editor\n}\n\nfunction InlinePluginComponent({\n  element,\n  attributes,\n  children,\n  renderElement,\n}: RenderElementProps & { renderElement: RenderElement }) {\n  const linkStyle = useStyle({ textDecoration: 'none' })\n  switch (element.type) {\n    case Slate.InlineType.Link:\n      return (\n        <LinkComponent\n          {...attributes}\n          link={element.link ?? undefined}\n          className={cx(linkStyle, element.className)}\n        >\n          {renderElement({\n            element,\n            attributes,\n            children,\n          })}\n        </LinkComponent>\n      )\n\n    default:\n      return (\n        <>\n          {renderElement({\n            element,\n            attributes,\n            children,\n          })}\n        </>\n      )\n  }\n}\n\nexport function LinkPlugin() {\n  return Plugin({\n    control: {\n      definition: Link({\n        label: 'On Click',\n      }),\n      onChange,\n      getValue,\n      getElementValue: (element: Element) => {\n        return Slate.isLink(element) ? element.link : undefined\n      },\n    },\n    withPlugin: withLink,\n    renderElement: renderElement => props => {\n      return <InlinePluginComponent {...props} renderElement={renderElement} />\n    },\n  })\n}\n"],"mappings":"AAiCQ,SAeA,UAfA;AAjCR,SAAS,UAAU;AAGnB,SAAS,aAAa;AAEtB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,qBAAqB;AACtC,SAA6B,cAAc;AAE3C,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AAElB,MAAM,WAAW,CAAC,WAAmB;AAC1C,QAAM,EAAE,SAAS,IAAI;AAErB,SAAO,WAAW,WAAS;AACzB,WAAO,MAAM,SAAS,KAAK,KAAK,SAAS,KAAK;AAAA,EAChD;AAEA,SAAO;AACT;AAEA,SAAS,sBAAsB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0D;AACxD,QAAM,YAAY,SAAS,EAAE,gBAAgB,OAAO,CAAC;AACrD,UAAQ,QAAQ,MAAM;AAAA,IACpB,KAAK,MAAM,WAAW;AACpB,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,MAAM,QAAQ,QAAQ;AAAA,UACtB,WAAW,GAAG,WAAW,QAAQ,SAAS;AAAA,UAEzC,wBAAc;AAAA,YACb;AAAA,YACA;AAAA,YACA;AAAA,UACF,CAAC;AAAA;AAAA,MACH;AAAA,IAGJ;AACE,aACE,gCACG,wBAAc;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC,GACH;AAAA,EAEN;AACF;AAEO,SAAS,aAAa;AAC3B,SAAO,OAAO;AAAA,IACZ,SAAS;AAAA,MACP,YAAY,KAAK;AAAA,QACf,OAAO;AAAA,MACT,CAAC;AAAA,MACD;AAAA,MACA;AAAA,MACA,iBAAiB,CAAC,YAAqB;AACrC,eAAO,MAAM,OAAO,OAAO,IAAI,QAAQ,OAAO;AAAA,MAChD;AAAA,IACF;AAAA,IACA,YAAY;AAAA,IACZ,eAAe,mBAAiB,WAAS;AACvC,aAAO,oBAAC,yBAAuB,GAAG,OAAO,eAA8B;AAAA,IACzE;AAAA,EACF,CAAC;AACH;","names":[]}
+{"version":3,"sources":["../../../../src/slate/LinkPlugin/index.tsx"],"sourcesContent":["import { type Editor, Element } from 'slate'\nimport { type RenderElementProps } from 'slate-react'\nimport { Slate } from '@makeswift/controls'\n\nimport { Link } from '../../controls/link'\nimport { Link as LinkComponent } from '../../components/shared/Link'\nimport { type RenderElement, Plugin } from '../../controls/rich-text-v2/plugin'\n\nimport { onChange } from './onChange'\nimport { getValue } from './getValue'\nimport { useStyle } from '../../runtimes/react/css-runtime/hooks/use-style'\nimport clsx from 'clsx'\n\nexport const withLink = (editor: Editor) => {\n  const { isInline } = editor\n\n  editor.isInline = entry => {\n    return Slate.isInline(entry) && isInline(entry)\n  }\n\n  return editor\n}\n\nfunction InlinePluginComponent({\n  element,\n  attributes,\n  children,\n  renderElement,\n}: RenderElementProps & { renderElement: RenderElement }) {\n  const { className: linkClassName, styleElement: linkStyleElement } = useStyle({\n    textDecoration: 'none',\n  })\n  switch (element.type) {\n    case Slate.InlineType.Link:\n      return (\n        <>\n          {linkStyleElement}\n          <LinkComponent\n            {...attributes}\n            link={element.link ?? undefined}\n            className={clsx(linkClassName, element.className)}\n          >\n            {renderElement({\n              element,\n              attributes,\n              children,\n            })}\n          </LinkComponent>\n        </>\n      )\n\n    default:\n      return (\n        <>\n          {renderElement({\n            element,\n            attributes,\n            children,\n          })}\n        </>\n      )\n  }\n}\n\nexport function LinkPlugin() {\n  return Plugin({\n    control: {\n      definition: Link({\n        label: 'On click',\n      }),\n      onChange,\n      getValue,\n      getElementValue: (element: Element) => {\n        return Slate.isLink(element) ? element.link : undefined\n      },\n    },\n    withPlugin: withLink,\n    renderElement: renderElement => props => {\n      return <InlinePluginComponent {...props} renderElement={renderElement} />\n    },\n  })\n}\n"],"mappings":"AAmCQ,mBAEE,KAFF;AAjCR,SAAS,aAAa;AAEtB,SAAS,YAAY;AACrB,SAAS,QAAQ,qBAAqB;AACtC,SAA6B,cAAc;AAE3C,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,OAAO,UAAU;AAEV,MAAM,WAAW,CAAC,WAAmB;AAC1C,QAAM,EAAE,SAAS,IAAI;AAErB,SAAO,WAAW,WAAS;AACzB,WAAO,MAAM,SAAS,KAAK,KAAK,SAAS,KAAK;AAAA,EAChD;AAEA,SAAO;AACT;AAEA,SAAS,sBAAsB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0D;AACxD,QAAM,EAAE,WAAW,eAAe,cAAc,iBAAiB,IAAI,SAAS;AAAA,IAC5E,gBAAgB;AAAA,EAClB,CAAC;AACD,UAAQ,QAAQ,MAAM;AAAA,IACpB,KAAK,MAAM,WAAW;AACpB,aACE,iCACG;AAAA;AAAA,QACD;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,MAAM,QAAQ,QAAQ;AAAA,YACtB,WAAW,KAAK,eAAe,QAAQ,SAAS;AAAA,YAE/C,wBAAc;AAAA,cACb;AAAA,cACA;AAAA,cACA;AAAA,YACF,CAAC;AAAA;AAAA,QACH;AAAA,SACF;AAAA,IAGJ;AACE,aACE,gCACG,wBAAc;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC,GACH;AAAA,EAEN;AACF;AAEO,SAAS,aAAa;AAC3B,SAAO,OAAO;AAAA,IACZ,SAAS;AAAA,MACP,YAAY,KAAK;AAAA,QACf,OAAO;AAAA,MACT,CAAC;AAAA,MACD;AAAA,MACA;AAAA,MACA,iBAAiB,CAAC,YAAqB;AACrC,eAAO,MAAM,OAAO,OAAO,IAAI,QAAQ,OAAO;AAAA,MAChD;AAAA,IACF;AAAA,IACA,YAAY;AAAA,IACZ,eAAe,mBAAiB,WAAS;AACvC,aAAO,oBAAC,yBAAuB,GAAG,OAAO,eAA8B;AAAA,IACzE;AAAA,EACF,CAAC;AACH;","names":[]}

package/dist/esm/slate/TypographyPlugin/index.js

@@ -1,5 +1,4 @@
 import { Editor, Text, Transforms } from "slate";
-import { cx } from "@emotion/css";
 import { unstable_Typography } from "@makeswift/controls";
 import { clearActiveTypographyStyle } from "./clearActiveTypographyStyle";
 import { clearDeviceActiveTypography } from "./clearDeviceActiveTypography";
@@ -12,6 +11,7 @@ import { Plugin } from "../../controls/rich-text-v2/plugin";
 import { normalizeTypographyUp } from "./normalizeTypographyUp";
 import { normalizeTypographyDown } from "./normalizeTypographyDown";
 import { normalizeSimilarText } from "./normalizeSimilarText";
+import clsx from "clsx";
 const TypographyActions = {
   setActiveTypographyId,
   setActiveTypographyStyle,
@@ -101,7 +101,7 @@ function TypographyPlugin() {
         ...props,
         leaf: {
           ...props.leaf,
-          className: cx(props.leaf.className, className)
+          className: clsx(props.leaf.className, className)
         }
       });
     }