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

package/dist/cjs/runtimes/react/controls/rich-text/ReadOnlyText.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text/ReadOnlyText.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { ForwardedRef, forwardRef } from 'react'\nimport { Descendant, Text } from 'slate'\n\nimport { Slate, RichTextValue, richTextDTOtoDAO } from '@makeswift/controls'\n\nimport { useResponsiveStyle } from '../../../../components/utils/responsive-style'\nimport { InlineType, BlockType } from '../../../../slate/types'\nimport { useStyle } from '../../use-style'\nimport useEnhancedTypography, { useTypographyClassName } from '../typography'\nimport { Link } from '../../../../components/shared/Link'\n\ntype Props = {\n  id?: string\n  text?: RichTextValue\n  width?: string\n  margin?: string\n}\n\nconst ReadOnlyText = forwardRef(function ReadOnlyText(\n  { id, text, width, margin }: Props,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const descendants = text == null ? [] : richTextDTOtoDAO(text)\n  const descendantsAsString = getText(descendants)\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      style={{\n        /**\n         * These are the default styles that Slate uses for its editable div.\n         * https://github.com/ianstormtaylor/slate/blob/4bd15ed3950e3a0871f5d0ecb391bb637c05e59d/packages/slate-react/src/components/editable.tsx\n         * Search for `disableDefaultStyles`\n         */\n        position: 'relative',\n        whiteSpace: 'pre-wrap',\n        wordWrap: 'break-word',\n      }}\n      className={cx(width, margin)}\n    >\n      {descendantsAsString === '' ? <Placeholder /> : <Descendants descendants={descendants} />}\n    </div>\n  )\n})\n\nexport default ReadOnlyText\n\nfunction Placeholder({ text = 'Write some text...' }: { text?: string }) {\n  return (\n    <span\n      className={useStyle({\n        display: 'inline-block',\n        width: 0,\n        maxWidth: '100%',\n        whiteSpace: 'nowrap',\n        opacity: 0.333,\n        verticalAlign: 'text-top',\n      })}\n    >\n      {text}\n    </span>\n  )\n}\n\nexport interface TextProps {\n  descendant: Text\n}\n\nexport function TextElement({ descendant }: TextProps) {\n  const enhancedTypography = useEnhancedTypography(descendant.typography)\n  const typographyClassName = useTypographyClassName(enhancedTypography)\n\n  return (\n    <span className={typographyClassName}>\n      {descendant.text === '' ? '\\uFEFF' : descendant.text}\n    </span>\n  )\n}\n\nexport interface InlineProps {\n  descendant: Slate.Inline\n}\n\nfunction InlineElement({ descendant }: InlineProps) {\n  const linkClassName = useStyle({ textDecoration: 'none' })\n\n  switch (descendant.type) {\n    case InlineType.Code:\n      return (\n        <code>\n          <Descendants descendants={descendant.children} />\n        </code>\n      )\n\n    case InlineType.SuperScript:\n      return (\n        <sup>\n          <Descendants descendants={descendant.children} />\n        </sup>\n      )\n\n    case InlineType.SubScript:\n      return (\n        <sub>\n          <Descendants descendants={descendant.children} />\n        </sub>\n      )\n\n    case InlineType.Link:\n      return (\n        <Link className={linkClassName} link={descendant.link ?? undefined}>\n          <Descendants descendants={descendant.children} />\n        </Link>\n      )\n  }\n}\n\nexport interface BlockProps {\n  descendant: Slate.Block\n}\n\nexport function BlockElement({ descendant }: BlockProps) {\n  const blockStyles = [\n    useStyle({ margin: 0 }),\n    useStyle(useResponsiveStyle([descendant.textAlign], ([textAlign = 'left']) => ({ textAlign }))),\n  ]\n  const quoteStyle = 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 (descendant.type) {\n    case BlockType.Default:\n    case BlockType.Paragraph:\n      return (\n        <p className={cx(...blockStyles)}>\n          <Descendants descendants={descendant.children} />\n        </p>\n      )\n    case BlockType.Heading1:\n      return (\n        <h1 className={cx(...blockStyles)}>\n          <Descendants descendants={descendant.children} />\n        </h1>\n      )\n    case BlockType.Heading2:\n      return (\n        <h2 className={cx(...blockStyles)}>\n          <Descendants descendants={descendant.children} />\n        </h2>\n      )\n    case BlockType.Heading3:\n      return (\n        <h3 className={cx(...blockStyles)}>\n          <Descendants descendants={descendant.children} />\n        </h3>\n      )\n    case BlockType.Heading4:\n      return (\n        <h4 className={cx(...blockStyles)}>\n          <Descendants descendants={descendant.children} />\n        </h4>\n      )\n    case BlockType.Heading5:\n      return (\n        <h5 className={cx(...blockStyles)}>\n          <Descendants descendants={descendant.children} />\n        </h5>\n      )\n    case BlockType.Heading6:\n      return (\n        <h6 className={cx(...blockStyles)}>\n          <Descendants descendants={descendant.children} />\n        </h6>\n      )\n    case BlockType.BlockQuote:\n      return (\n        <blockquote className={cx(...blockStyles, quoteStyle)}>\n          <Descendants descendants={descendant.children} />\n        </blockquote>\n      )\n    case BlockType.OrderedList:\n      return (\n        <ol className={cx(...blockStyles)} style={{ listStylePosition: 'inside' }}>\n          <Descendants descendants={descendant.children} />\n        </ol>\n      )\n    case BlockType.UnorderedList:\n      return (\n        <ul className={cx(...blockStyles)} style={{ listStylePosition: 'inside' }}>\n          <Descendants descendants={descendant.children} />\n        </ul>\n      )\n    case BlockType.ListItem:\n      return (\n        <li className={cx(...blockStyles)}>\n          <Descendants descendants={descendant.children} />\n        </li>\n      )\n    case BlockType.ListItemChild:\n      return (\n        <span className={cx(...blockStyles)}>\n          <Descendants descendants={descendant.children} />\n        </span>\n      )\n    default:\n      return null\n  }\n}\n\nfunction Descendants({ descendants }: { descendants: Descendant[] }) {\n  return (\n    <>\n      {descendants.map((descendant, index) => {\n        if (Slate.isText(descendant)) {\n          return <TextElement key={index} descendant={descendant} />\n        }\n\n        switch (descendant.type) {\n          case InlineType.Link:\n          case InlineType.Code:\n          case InlineType.SubScript:\n          case InlineType.SuperScript:\n            return <InlineElement key={index} descendant={descendant} />\n          case BlockType.Heading1:\n          case BlockType.Heading2:\n          case BlockType.Heading3:\n          case BlockType.Heading4:\n          case BlockType.Heading5:\n          case BlockType.Heading6:\n          case BlockType.BlockQuote:\n          case BlockType.Paragraph:\n          case BlockType.Default:\n          case BlockType.OrderedList:\n          case BlockType.UnorderedList:\n          case BlockType.ListItem:\n          case BlockType.ListItemChild:\n            return <BlockElement key={index} descendant={descendant} />\n          default:\n            return null\n        }\n      })}\n    </>\n  )\n}\n\nfunction isBlock(descendant: Descendant): descendant is Slate.Block {\n  if ('text' in descendant) return false\n\n  switch (descendant.type) {\n    case BlockType.Heading1:\n    case BlockType.Heading2:\n    case BlockType.Heading3:\n    case BlockType.Heading4:\n    case BlockType.Heading5:\n    case BlockType.Heading6:\n    case BlockType.BlockQuote:\n    case BlockType.Paragraph:\n    case BlockType.Default:\n    case BlockType.OrderedList:\n    case BlockType.UnorderedList:\n    case BlockType.ListItem:\n    case BlockType.ListItemChild:\n      return true\n\n    default:\n      return false\n  }\n}\n\nfunction getTextByDescendant(descendant: Descendant): string {\n  if ('text' in descendant) {\n    return descendant.text ?? ''\n  }\n\n  switch (descendant.type) {\n    case InlineType.Link:\n    case InlineType.Code:\n    case InlineType.SubScript:\n    case InlineType.SuperScript:\n      return descendant.children.map(descendant => getTextByDescendant(descendant)).join('') ?? ''\n    case BlockType.Heading1:\n    case BlockType.Heading2:\n    case BlockType.Heading3:\n    case BlockType.Heading4:\n    case BlockType.Heading5:\n    case BlockType.Heading6:\n    case BlockType.BlockQuote:\n    case BlockType.Paragraph:\n    case BlockType.Default:\n    case BlockType.OrderedList:\n    case BlockType.UnorderedList:\n    case BlockType.ListItem:\n    case BlockType.ListItemChild:\n      return (\n        descendant.children\n          .map(descendant => getTextByDescendant(descendant))\n          .join(descendant.children.every(isBlock) ? '\\n' : '') ?? ''\n      )\n    default:\n      return ''\n  }\n}\n\nfunction getText(descendant: Descendant[]): string {\n  return descendant.map(getTextByDescendant).join('\\n')\n}\n"],"mappings":"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","names":["ReadOnlyText","useEnhancedTypography","descendant"]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/controls/rich-text/ReadOnlyText.tsx"],"sourcesContent":["'use client'\n\nimport { ForwardedRef, forwardRef } from 'react'\nimport { Descendant, Text } from 'slate'\n\nimport { Slate, RichTextValue, richTextDTOtoDAO } from '@makeswift/controls'\n\nimport { useResponsiveStyle } from '../../../../components/utils/responsive-style'\nimport { InlineType, BlockType } from '../../../../slate/types'\nimport useEnhancedTypography, { useTypographyStyle } from '../typography'\nimport { Link } from '../../../../components/shared/Link'\nimport { useStyle } from '../../css-runtime/hooks/use-style'\nimport { CSSObject } from '@emotion/serialize'\nimport clsx from 'clsx'\n\ntype Props = {\n  id?: string\n  text?: RichTextValue\n  width?: string\n  margin?: string\n}\n\nconst ReadOnlyText = forwardRef(function ReadOnlyText(\n  { id, text, width, margin }: Props,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const descendants = text == null ? [] : richTextDTOtoDAO(text)\n  const descendantsAsString = getText(descendants)\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      style={{\n        /**\n         * These are the default styles that Slate uses for its editable div.\n         * https://github.com/ianstormtaylor/slate/blob/4bd15ed3950e3a0871f5d0ecb391bb637c05e59d/packages/slate-react/src/components/editable.tsx\n         * Search for `disableDefaultStyles`\n         */\n        position: 'relative',\n        whiteSpace: 'pre-wrap',\n        wordWrap: 'break-word',\n      }}\n      className={clsx(width, margin)}\n    >\n      {descendantsAsString === '' ? <Placeholder /> : <Descendants descendants={descendants} />}\n    </div>\n  )\n})\n\nexport default ReadOnlyText\n\nfunction Placeholder({ text = 'Write some text...' }: { text?: string }) {\n  const { className, styleElement } = useStyle({\n    display: 'inline-block',\n    width: 0,\n    maxWidth: '100%',\n    whiteSpace: 'nowrap',\n    opacity: 0.333,\n    verticalAlign: 'text-top',\n  })\n  return (\n    <>\n      {styleElement}\n      <span className={className}>{text}</span>\n    </>\n  )\n}\n\nexport interface TextProps {\n  descendant: Text\n}\n\nexport function TextElement({ descendant }: TextProps) {\n  const enhancedTypography = useEnhancedTypography(descendant.typography)\n  const { className, styleElement } = useTypographyStyle(enhancedTypography)\n\n  return (\n    <>\n      {styleElement}\n      <span className={className}>{descendant.text === '' ? '\\uFEFF' : descendant.text}</span>\n    </>\n  )\n}\n\nexport interface InlineProps {\n  descendant: Slate.Inline\n}\n\nfunction InlineElement({ descendant }: InlineProps) {\n  const { className: linkClassName, styleElement: linkStyleElement } = useStyle({\n    textDecoration: 'none',\n  })\n\n  switch (descendant.type) {\n    case InlineType.Code:\n      return (\n        <code>\n          {linkStyleElement}\n          <Descendants descendants={descendant.children} />\n        </code>\n      )\n\n    case InlineType.SuperScript:\n      return (\n        <sup>\n          {linkStyleElement}\n          <Descendants descendants={descendant.children} />\n        </sup>\n      )\n\n    case InlineType.SubScript:\n      return (\n        <sub>\n          {linkStyleElement}\n          <Descendants descendants={descendant.children} />\n        </sub>\n      )\n\n    case InlineType.Link:\n      return (\n        <Link className={linkClassName} link={descendant.link ?? undefined}>\n          {linkStyleElement}\n          <Descendants descendants={descendant.children} />\n        </Link>\n      )\n  }\n}\n\nexport interface BlockProps {\n  descendant: Slate.Block\n}\n\nexport function BlockElement({ descendant }: BlockProps) {\n  const responsiveBlockStyles = useResponsiveStyle(\n    [descendant.textAlign],\n    ([textAlign = 'left']) => ({ textAlign }),\n  )\n  const blockStyles: CSSObject = { margin: 0, ...responsiveBlockStyles }\n  const { className: blockStylesClassName, styleElement: blockStylesStyleElement } =\n    useStyle(blockStyles)\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 (descendant.type) {\n    case BlockType.Default:\n    case BlockType.Paragraph:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <p className={blockStylesClassName}>\n            <Descendants descendants={descendant.children} />\n          </p>\n        </>\n      )\n    case BlockType.Heading1:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <h1 className={blockStylesClassName}>\n            <Descendants descendants={descendant.children} />\n          </h1>\n        </>\n      )\n    case BlockType.Heading2:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <h2 className={blockStylesClassName}>\n            <Descendants descendants={descendant.children} />\n          </h2>\n        </>\n      )\n    case BlockType.Heading3:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <h3 className={blockStylesClassName}>\n            <Descendants descendants={descendant.children} />\n          </h3>\n        </>\n      )\n    case BlockType.Heading4:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <h4 className={blockStylesClassName}>\n            <Descendants descendants={descendant.children} />\n          </h4>\n        </>\n      )\n    case BlockType.Heading5:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <h5 className={blockStylesClassName}>\n            <Descendants descendants={descendant.children} />\n          </h5>\n        </>\n      )\n    case BlockType.Heading6:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <h6 className={blockStylesClassName}>\n            <Descendants descendants={descendant.children} />\n          </h6>\n        </>\n      )\n    case BlockType.BlockQuote:\n      return (\n        <>\n          {blockStylesStyleElement}\n          {quoteStylesStyleElement}\n          <blockquote className={clsx(blockStylesClassName, quoteStylesClassName)}>\n            <Descendants descendants={descendant.children} />\n          </blockquote>\n        </>\n      )\n    case BlockType.OrderedList:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <ol className={blockStylesClassName} style={{ listStylePosition: 'inside' }}>\n            <Descendants descendants={descendant.children} />\n          </ol>\n        </>\n      )\n    case BlockType.UnorderedList:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <ul className={blockStylesClassName} style={{ listStylePosition: 'inside' }}>\n            <Descendants descendants={descendant.children} />\n          </ul>\n        </>\n      )\n    case BlockType.ListItem:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <li className={blockStylesClassName}>\n            <Descendants descendants={descendant.children} />\n          </li>\n        </>\n      )\n    case BlockType.ListItemChild:\n      return (\n        <>\n          {blockStylesStyleElement}\n          <span className={blockStylesClassName}>\n            <Descendants descendants={descendant.children} />\n          </span>\n        </>\n      )\n    default:\n      return null\n  }\n}\n\nfunction Descendants({ descendants }: { descendants: Descendant[] }) {\n  return (\n    <>\n      {descendants.map((descendant, index) => {\n        if (Slate.isText(descendant)) {\n          return <TextElement key={index} descendant={descendant} />\n        }\n\n        switch (descendant.type) {\n          case InlineType.Link:\n          case InlineType.Code:\n          case InlineType.SubScript:\n          case InlineType.SuperScript:\n            return <InlineElement key={index} descendant={descendant} />\n          case BlockType.Heading1:\n          case BlockType.Heading2:\n          case BlockType.Heading3:\n          case BlockType.Heading4:\n          case BlockType.Heading5:\n          case BlockType.Heading6:\n          case BlockType.BlockQuote:\n          case BlockType.Paragraph:\n          case BlockType.Default:\n          case BlockType.OrderedList:\n          case BlockType.UnorderedList:\n          case BlockType.ListItem:\n          case BlockType.ListItemChild:\n            return <BlockElement key={index} descendant={descendant} />\n          default:\n            return null\n        }\n      })}\n    </>\n  )\n}\n\nfunction isBlock(descendant: Descendant): descendant is Slate.Block {\n  if ('text' in descendant) return false\n\n  switch (descendant.type) {\n    case BlockType.Heading1:\n    case BlockType.Heading2:\n    case BlockType.Heading3:\n    case BlockType.Heading4:\n    case BlockType.Heading5:\n    case BlockType.Heading6:\n    case BlockType.BlockQuote:\n    case BlockType.Paragraph:\n    case BlockType.Default:\n    case BlockType.OrderedList:\n    case BlockType.UnorderedList:\n    case BlockType.ListItem:\n    case BlockType.ListItemChild:\n      return true\n\n    default:\n      return false\n  }\n}\n\nfunction getTextByDescendant(descendant: Descendant): string {\n  if ('text' in descendant) {\n    return descendant.text ?? ''\n  }\n\n  switch (descendant.type) {\n    case InlineType.Link:\n    case InlineType.Code:\n    case InlineType.SubScript:\n    case InlineType.SuperScript:\n      return descendant.children.map(descendant => getTextByDescendant(descendant)).join('') ?? ''\n    case BlockType.Heading1:\n    case BlockType.Heading2:\n    case BlockType.Heading3:\n    case BlockType.Heading4:\n    case BlockType.Heading5:\n    case BlockType.Heading6:\n    case BlockType.BlockQuote:\n    case BlockType.Paragraph:\n    case BlockType.Default:\n    case BlockType.OrderedList:\n    case BlockType.UnorderedList:\n    case BlockType.ListItem:\n    case BlockType.ListItemChild:\n      return (\n        descendant.children\n          .map(descendant => getTextByDescendant(descendant))\n          .join(descendant.children.every(isBlock) ? '\\n' : '') ?? ''\n      )\n    default:\n      return ''\n  }\n}\n\nfunction getText(descendant: Descendant[]): string {\n  return descendant.map(getTextByDescendant).join('\\n')\n}\n"],"mappings":"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","names":["ReadOnlyText","clsx","useEnhancedTypography","descendant"]}

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

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var block_exports = {};
 __export(block_exports, {
@@ -22,47 +32,104 @@ __export(block_exports, {
 });
 module.exports = __toCommonJS(block_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_css = require("@emotion/css");
 var import_responsive_style = require("../../../../../../components/utils/responsive-style");
-var import_use_style = require("../../../../use-style");
 var import_types = require("../../../../../../slate/types");
+var import_use_style = require("../../../../css-runtime/hooks/use-style");
+var import_clsx = __toESM(require("clsx"));
 function BlockElement({ element, attributes, children }) {
-  const blockStyles = [
-    (0, import_use_style.useStyle)({ margin: 0 }),
-    (0, import_use_style.useStyle)((0, import_responsive_style.useResponsiveStyle)([element.textAlign], ([textAlign = "left"]) => ({ textAlign })))
-  ];
-  const quoteStyles = (0, import_use_style.useStyle)({
+  const responsiveBlockStyles = (0, import_responsive_style.useResponsiveStyle)([element.textAlign], ([textAlign = "left"]) => ({
+    textAlign
+  }));
+  const { className: blockStylesClassName, styleElement: blockStylesStyleElement } = (0, import_use_style.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 } = (0, import_use_style.useStyle)(quoteStyles);
   switch (element.type) {
     case import_types.BlockType.Default:
     case import_types.BlockType.Paragraph:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { ...attributes, className: (0, import_css.cx)(...blockStyles), children });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { ...attributes, className: blockStylesClassName, children })
+      ] });
     case import_types.BlockType.Heading1:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { ...attributes, className: (0, import_css.cx)(...blockStyles), children });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { ...attributes, className: blockStylesClassName, children })
+      ] });
     case import_types.BlockType.Heading2:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { ...attributes, className: (0, import_css.cx)(...blockStyles), children });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { ...attributes, className: blockStylesClassName, children })
+      ] });
     case import_types.BlockType.Heading3:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { ...attributes, className: (0, import_css.cx)(...blockStyles), children });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { ...attributes, className: blockStylesClassName, children })
+      ] });
     case import_types.BlockType.Heading4:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { ...attributes, className: (0, import_css.cx)(...blockStyles), children });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { ...attributes, className: blockStylesClassName, children })
+      ] });
     case import_types.BlockType.Heading5:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h5", { ...attributes, className: (0, import_css.cx)(...blockStyles), children });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h5", { ...attributes, className: blockStylesClassName, children })
+      ] });
     case import_types.BlockType.Heading6:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h6", { ...attributes, className: (0, import_css.cx)(...blockStyles), children });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h6", { ...attributes, className: blockStylesClassName, children })
+      ] });
     case import_types.BlockType.BlockQuote:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("blockquote", { ...attributes, className: (0, import_css.cx)(...blockStyles, quoteStyles), children });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        quoteStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("blockquote", { ...attributes, className: (0, import_clsx.default)(blockStylesClassName, quoteStylesClassName), children })
+      ] });
     case import_types.BlockType.OrderedList:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { ...attributes, className: (0, import_css.cx)(...blockStyles), style: { listStylePosition: "inside" }, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "ol",
+          {
+            ...attributes,
+            className: blockStylesClassName,
+            style: { listStylePosition: "inside" },
+            children
+          }
+        )
+      ] });
     case import_types.BlockType.UnorderedList:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { ...attributes, className: (0, import_css.cx)(...blockStyles), style: { listStylePosition: "inside" }, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "ul",
+          {
+            ...attributes,
+            className: blockStylesClassName,
+            style: { listStylePosition: "inside" },
+            children
+          }
+        )
+      ] });
     case import_types.BlockType.ListItem:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { ...attributes, className: (0, import_css.cx)(...blockStyles), children });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { ...attributes, className: blockStylesClassName, children })
+      ] });
     case import_types.BlockType.ListItemChild:
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...attributes, className: (0, import_css.cx)(...blockStyles), children });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        blockStylesStyleElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...attributes, className: blockStylesClassName, children })
+      ] });
   }
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/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":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BQ;AA7BR,iBAAmB;AAInB,8BAAmC;AACnC,uBAAyB;AACzB,mBAA0B;AAMnB,SAAS,aAAa,EAAE,SAAS,YAAY,SAAS,GAA6B;AACxF,QAAM,cAAc;AAAA,QAClB,2BAAS,EAAE,QAAQ,EAAE,CAAC;AAAA,QACtB,+BAAS,4CAAmB,CAAC,QAAQ,SAAS,GAAG,CAAC,CAAC,YAAY,MAAM,OAAO,EAAE,UAAU,EAAE,CAAC;AAAA,EAC7F;AAEA,QAAM,kBAAc,2BAAS;AAAA,IAC3B,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,EACd,CAAC;AAED,UAAQ,QAAQ,MAAM;AAAA,IACpB,KAAK,uBAAU;AAAA,IACf,KAAK,uBAAU;AACb,aACE,4CAAC,OAAG,GAAG,YAAY,eAAW,eAAG,GAAG,WAAW,GAC5C,UACH;AAAA,IAEJ,KAAK,uBAAU;AACb,aACE,4CAAC,QAAI,GAAG,YAAY,eAAW,eAAG,GAAG,WAAW,GAC7C,UACH;AAAA,IAEJ,KAAK,uBAAU;AACb,aACE,4CAAC,QAAI,GAAG,YAAY,eAAW,eAAG,GAAG,WAAW,GAC7C,UACH;AAAA,IAEJ,KAAK,uBAAU;AACb,aACE,4CAAC,QAAI,GAAG,YAAY,eAAW,eAAG,GAAG,WAAW,GAC7C,UACH;AAAA,IAEJ,KAAK,uBAAU;AACb,aACE,4CAAC,QAAI,GAAG,YAAY,eAAW,eAAG,GAAG,WAAW,GAC7C,UACH;AAAA,IAEJ,KAAK,uBAAU;AACb,aACE,4CAAC,QAAI,GAAG,YAAY,eAAW,eAAG,GAAG,WAAW,GAC7C,UACH;AAAA,IAEJ,KAAK,uBAAU;AACb,aACE,4CAAC,QAAI,GAAG,YAAY,eAAW,eAAG,GAAG,WAAW,GAC7C,UACH;AAAA,IAEJ,KAAK,uBAAU;AACb,aACE,4CAAC,gBAAY,GAAG,YAAY,eAAW,eAAG,GAAG,aAAa,WAAW,GAClE,UACH;AAAA,IAEJ,KAAK,uBAAU;AACb,aACE,4CAAC,QAAI,GAAG,YAAY,eAAW,eAAG,GAAG,WAAW,GAAG,OAAO,EAAE,mBAAmB,SAAS,GACrF,UACH;AAAA,IAEJ,KAAK,uBAAU;AACb,aACE,4CAAC,QAAI,GAAG,YAAY,eAAW,eAAG,GAAG,WAAW,GAAG,OAAO,EAAE,mBAAmB,SAAS,GACrF,UACH;AAAA,IAEJ,KAAK,uBAAU;AACb,aACE,4CAAC,QAAI,GAAG,YAAY,eAAW,eAAG,GAAG,WAAW,GAC7C,UACH;AAAA,IAEJ,KAAK,uBAAU;AACb,aACE,4CAAC,UAAM,GAAG,YAAY,eAAW,eAAG,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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCQ;AA/BR,8BAAmC;AACnC,mBAA0B;AAC1B,uBAAyB;AACzB,kBAAiB;AAMV,SAAS,aAAa,EAAE,SAAS,YAAY,SAAS,GAA6B;AACxF,QAAM,4BAAwB,4CAAmB,CAAC,QAAQ,SAAS,GAAG,CAAC,CAAC,YAAY,MAAM,OAAO;AAAA,IAC/F;AAAA,EACF,EAAE;AACF,QAAM,EAAE,WAAW,sBAAsB,cAAc,wBAAwB,QAAI,2BAAS;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,QAC7E,2BAAS,WAAW;AAEtB,UAAQ,QAAQ,MAAM;AAAA,IACpB,KAAK,uBAAU;AAAA,IACf,KAAK,uBAAU;AACb,aACE,4EACG;AAAA;AAAA,QACD,4CAAC,OAAG,GAAG,YAAY,WAAW,sBAC3B,UACH;AAAA,SACF;AAAA,IAEJ,KAAK,uBAAU;AACb,aACE,4EACG;AAAA;AAAA,QACD,4CAAC,QAAI,GAAG,YAAY,WAAW,sBAC5B,UACH;AAAA,SACF;AAAA,IAEJ,KAAK,uBAAU;AACb,aACE,4EACG;AAAA;AAAA,QACD,4CAAC,QAAI,GAAG,YAAY,WAAW,sBAC5B,UACH;AAAA,SACF;AAAA,IAEJ,KAAK,uBAAU;AACb,aACE,4EACG;AAAA;AAAA,QACD,4CAAC,QAAI,GAAG,YAAY,WAAW,sBAC5B,UACH;AAAA,SACF;AAAA,IAEJ,KAAK,uBAAU;AACb,aACE,4EACG;AAAA;AAAA,QACD,4CAAC,QAAI,GAAG,YAAY,WAAW,sBAC5B,UACH;AAAA,SACF;AAAA,IAEJ,KAAK,uBAAU;AACb,aACE,4EACG;AAAA;AAAA,QACD,4CAAC,QAAI,GAAG,YAAY,WAAW,sBAC5B,UACH;AAAA,SACF;AAAA,IAEJ,KAAK,uBAAU;AACb,aACE,4EACG;AAAA;AAAA,QACD,4CAAC,QAAI,GAAG,YAAY,WAAW,sBAC5B,UACH;AAAA,SACF;AAAA,IAEJ,KAAK,uBAAU;AACb,aACE,4EACG;AAAA;AAAA,QACA;AAAA,QACD,4CAAC,gBAAY,GAAG,YAAY,eAAW,YAAAA,SAAK,sBAAsB,oBAAoB,GACnF,UACH;AAAA,SACF;AAAA,IAEJ,KAAK,uBAAU;AACb,aACE,4EACG;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,uBAAU;AACb,aACE,4EACG;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,uBAAU;AACb,aACE,4EACG;AAAA;AAAA,QACD,4CAAC,QAAI,GAAG,YAAY,WAAW,sBAC5B,UACH;AAAA,SACF;AAAA,IAEJ,KAAK,uBAAU;AACb,aACE,4EACG;AAAA;AAAA,QACD,4CAAC,UAAM,GAAG,YAAY,WAAW,sBAC9B,UACH;AAAA,SACF;AAAA,EAEN;AACF;","names":["clsx"]}

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

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var inline_exports = {};
 __export(inline_exports, {
@@ -22,12 +32,16 @@ __export(inline_exports, {
 });
 module.exports = __toCommonJS(inline_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_css = require("@emotion/css");
-var import_use_style = require("../../../../use-style");
 var import_Link = require("../../../../../../components/shared/Link");
 var import_types = require("../../../../../../slate/types");
+var import_use_style = require("../../../../css-runtime/hooks/use-style");
+var import_clsx = __toESM(require("clsx"));
 function StyledLink({ className, ...restOfProps }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Link.Link, { ...restOfProps, className: (0, import_css.cx)((0, import_use_style.useStyle)({ textDecoration: "none" }), className) });
+  const { className: baseClassName, styleElement } = (0, import_use_style.useStyle)({ textDecoration: "none" });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    styleElement,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Link.Link, { ...restOfProps, className: (0, import_clsx.default)(baseClassName, className) })
+  ] });
 }
 function InlineElement({ element, attributes, children }) {
   switch (element.type) {

package/dist/cjs/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":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUS;AAVT,iBAAmB;AAKnB,uBAAyB;AACzB,kBAAqB;AACrB,mBAA2B;AAE3B,SAAS,WAAW,EAAE,WAAW,GAAG,YAAY,GAA0C;AACxF,SAAO,4CAAC,oBAAM,GAAG,aAAa,eAAW,mBAAG,2BAAS,EAAE,gBAAgB,OAAO,CAAC,GAAG,SAAS,GAAG;AAChG;AAMO,SAAS,cAAc,EAAE,SAAS,YAAY,SAAS,GAA6B;AACzF,UAAQ,QAAQ,MAAM;AAAA,IACpB,KAAK,wBAAW;AACd,aAAO,4CAAC,UAAM,GAAG,YAAa,UAAS;AAAA,IAEzC,KAAK,wBAAW;AACd,aAAO,4CAAC,SAAK,GAAG,YAAa,UAAS;AAAA,IAExC,KAAK,wBAAW;AACd,aAAO,4CAAC,SAAK,GAAG,YAAa,UAAS;AAAA,IAExC,KAAK,wBAAW;AACd,aACE,4CAAC,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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAYI;AARJ,kBAAqB;AACrB,mBAA2B;AAC3B,uBAAyB;AACzB,kBAAiB;AAEjB,SAAS,WAAW,EAAE,WAAW,GAAG,YAAY,GAA0C;AACxF,QAAM,EAAE,WAAW,eAAe,aAAa,QAAI,2BAAS,EAAE,gBAAgB,OAAO,CAAC;AACtF,SACE,4EACG;AAAA;AAAA,IACD,4CAAC,oBAAM,GAAG,aAAa,eAAW,YAAAA,SAAK,eAAe,SAAS,GAAG;AAAA,KACpE;AAEJ;AAMO,SAAS,cAAc,EAAE,SAAS,YAAY,SAAS,GAA6B;AACzF,UAAQ,QAAQ,MAAM;AAAA,IACpB,KAAK,wBAAW;AACd,aAAO,4CAAC,UAAM,GAAG,YAAa,UAAS;AAAA,IAEzC,KAAK,wBAAW;AACd,aAAO,4CAAC,SAAK,GAAG,YAAa,UAAS;AAAA,IAExC,KAAK,wBAAW;AACd,aAAO,4CAAC,SAAK,GAAG,YAAa,UAAS;AAAA,IAExC,KAAK,wBAAW;AACd,aACE,4CAAC,cAAY,GAAG,YAAY,MAAM,QAAQ,QAAQ,QAC/C,UACH;AAAA,EAEN;AACF;","names":["clsx"]}

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

@@ -35,8 +35,11 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_typography = __toESM(require("../../../typography"));
 function Leaf({ leaf, ...props }) {
   const enhancedTypography = (0, import_typography.default)(leaf.typography);
-  const typographyClassName = (0, import_typography.useTypographyClassName)(enhancedTypography);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...props.attributes, className: typographyClassName, children: props.children });
+  const { className, styleElement } = (0, import_typography.useTypographyStyle)(enhancedTypography);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    styleElement,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...props.attributes, className, children: props.children })
+  ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAWI;AAVJ,wBAA8D;AAEvD,SAAS,KAAK,EAAE,MAAM,GAAG,MAAM,GAAoB;AAExD,QAAM,yBAAqB,kBAAAA,SAAsB,KAAK,UAAU;AAGhE,QAAM,0BAAsB,0CAAuB,kBAAkB;AAErE,SACE,4CAAC,UAAM,GAAG,MAAM,YAAY,WAAW,qBACpC,gBAAM,UACT;AAEJ;","names":["useEnhancedTypography"]}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAWI;AAVJ,wBAA0D;AAEnD,SAAS,KAAK,EAAE,MAAM,GAAG,MAAM,GAAoB;AAExD,QAAM,yBAAqB,kBAAAA,SAAsB,KAAK,UAAU;AAGhE,QAAM,EAAE,WAAW,aAAa,QAAI,sCAAmB,kBAAkB;AAEzE,SACE,4EACG;AAAA;AAAA,IACD,4CAAC,UAAM,GAAG,MAAM,YAAY,WACzB,gBAAM,UACT;AAAA,KACF;AAEJ;","names":["useEnhancedTypography"]}

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

@@ -29,8 +29,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var editable_text_v2_exports = {};
 __export(editable_text_v2_exports, {
-  EditableTextV2: () => EditableTextV2,
-  default: () => editable_text_v2_default
+  EditableTextV2Value: () => EditableTextV2Value
 });
 module.exports = __toCommonJS(editable_text_v2_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -39,18 +38,27 @@ var import_slate = require("slate");
 var import_is_hotkey = __toESM(require("is-hotkey"));
 var import_slate_react = require("slate-react");
 var import_rich_text_v2 = require("../../../../../controls/rich-text-v2");
-var import__ = require("../../..");
+var import_use_builder_edit_mode = require("../../../hooks/use-builder-edit-mode");
+var import_use_control_instance = require("../../../hooks/use-control-instance");
 var import_use_slate_reset = require("../../use-slate-reset");
 var import_builder_edit_mode = require("../../../../../state/modules/builder-edit-mode");
 var import_poll_box_model = require("../../../poll-box-model");
 var import_slate2 = require("../../../../../slate");
+var import_node_value = require("../../node-value");
 var import_useSyncDOMSelection = require("./useSyncDOMSelection");
 var import_render_element = require("./render-element");
 var import_render_leaf = require("./render-leaf");
 var import_useRemoteChanges = require("./useRemoteChanges");
 var import_usePresetValue = require("./usePresetValue");
-function EditableTextV2({ text, definition, control }) {
-  const plugins = (0, import_react.useMemo)(() => definition.config.plugins, [definition]);
+const EditableTextV2Value = (0, import_react.memo)(function EditableTextV2Value2({
+  instanceKey,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_node_value.NodeValue, { instanceKey, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditableTextV2, { instanceKey, ...props }) });
+});
+function EditableTextV2({ text, config, instanceKey, parentStylesheetKey }) {
+  const plugins = (0, import_react.useMemo)(() => new import_rich_text_v2.RichTextV2Definition(config).plugins, [config]);
+  const control = (0, import_use_control_instance.useControlInstance)(instanceKey, import_rich_text_v2.RichTextV2Control);
   const [editor] = (0, import_react.useState)(
     () => plugins.reduceRight(
       (editor2, plugin) => plugin?.withPlugin?.(editor2) ?? editor2,
@@ -62,21 +70,21 @@ function EditableTextV2({ text, definition, control }) {
       return;
     const element = import_slate_react.ReactEditor.toDOMNode(editor, editor);
     return (0, import_poll_box_model.pollBoxModel)({
-      element,
+      getElement: () => element,
       onBoxModelChange: (boxModel) => control.changeBoxModel(boxModel)
     });
   }, [editor, control]);
   const isPreservingFocus = (0, import_react.useRef)(false);
   (0, import_useSyncDOMSelection.useSyncDOMSelection)(editor, isPreservingFocus);
-  const editMode = (0, import__.useBuilderEditMode)();
+  const editMode = (0, import_use_builder_edit_mode.useBuilderEditMode)();
   (0, import_react.useEffect)(() => {
     if (editMode !== import_builder_edit_mode.BuilderEditMode.CONTENT) {
       isPreservingFocus.current = false;
       import_slate_react.ReactEditor.deselect(editor);
     }
-  }, [editMode]);
+  }, [editMode, editor]);
   (0, import_useRemoteChanges.useSyncRemoteChanges)(editor, text);
-  const presetValue = (0, import_usePresetValue.usePresetValue)(definition);
+  const presetValue = (0, import_usePresetValue.usePresetValue)(config);
   const initialValue = (0, import_react.useMemo)(
     () => (text && import_rich_text_v2.RichText.dataToNodes(text)) ?? presetValue,
     [text, presetValue]
@@ -90,17 +98,48 @@ function EditableTextV2({ text, definition, control }) {
       control?.onLocalUserChange();
     }
   }, [control, initialValue, presetValue]);
+  const decorate = (0, import_react.useCallback)(
+    ([node, path]) => {
+      if (!import_slate.Text.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 = (0, import_react.useCallback)(
     (props) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_render_element.RichTextV2Element, { ...props, definition, plugins });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_render_element.RichTextV2Element,
+        {
+          ...props,
+          plugins,
+          pathComponents: [],
+          parentStylesheetKey
+        }
+      );
     },
-    [plugins, definition]
+    [plugins, parentStylesheetKey]
   );
   const renderLeaf = (0, import_react.useCallback)(
     (props) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_render_leaf.RichTextV2Leaf, { ...props, definition, plugins });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_render_leaf.RichTextV2Leaf,
+        {
+          ...props,
+          plugins,
+          pathComponents: [],
+          parentStylesheetKey
+        }
+      );
     },
-    [plugins, definition]
+    [plugins, parentStylesheetKey]
   );
   const handleFocus = (0, import_react.useCallback)(() => {
     isPreservingFocus.current = true;
@@ -131,7 +170,7 @@ function EditableTextV2({ text, definition, control }) {
         e.preventDefault();
       }
     },
-    [control, editor, editMode]
+    [editMode]
   );
   const handleClick = (0, import_react.useCallback)(
     (e) => {
@@ -148,26 +187,29 @@ function EditableTextV2({ text, definition, control }) {
     if (e.relatedTarget?.getAttribute("contenteditable") === "true")
       isPreservingFocus.current = false;
   }, []);
-  const slateReset = (0, import_use_slate_reset.useSlateReset)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_slate_react.Slate, { editor, value: initialValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_slate_react.Editable,
-    {
-      className: slateReset,
-      renderLeaf,
-      renderElement,
-      onFocus: handleFocus,
-      onKeyDown: handleKeyDown,
-      onKeyUp: handleKeyUp,
-      onClick: handleClick,
-      onBlur: handleBlur,
-      readOnly: editMode !== import_builder_edit_mode.BuilderEditMode.CONTENT,
-      placeholder: "Write some text..."
-    }
-  ) });
+  const { className: slateResetClass, styleElement: slateResetStyleElement } = (0, import_use_slate_reset.useSlateReset)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    slateResetStyleElement,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_slate_react.Slate, { editor, value: initialValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_slate_react.Editable,
+      {
+        className: slateResetClass,
+        decorate,
+        renderLeaf,
+        renderElement,
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+        onClick: handleClick,
+        onBlur: handleBlur,
+        readOnly: editMode !== import_builder_edit_mode.BuilderEditMode.CONTENT,
+        placeholder: "Write some text..."
+      }
+    ) })
+  ] });
 }
-var editable_text_v2_default = EditableTextV2;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  EditableTextV2
+  EditableTextV2Value
 });
 //# sourceMappingURL=editable-text-v2.js.map

package/dist/cjs/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":"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","names":["import_slate","editor","isHotkey"]}
+{"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":["import_slate","EditableTextV2Value","editor","SlateText","isHotkey"]}

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

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,26 +15,12 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var EditableTextV2_exports = {};
 __export(EditableTextV2_exports, {
   default: () => EditableTextV2_default
 });
 module.exports = __toCommonJS(EditableTextV2_exports);
-__reExport(EditableTextV2_exports, require("./editable-text-v2"), module.exports);
-var import_editable_text_v2 = __toESM(require("./editable-text-v2"));
-var EditableTextV2_default = import_editable_text_v2.default;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ...require("./editable-text-v2")
-});
+var import_editable_text_v2 = require("./editable-text-v2");
+var EditableTextV2_default = import_editable_text_v2.EditableTextV2Value;
 //# sourceMappingURL=index.js.map