@valbuild/react 0.62.5 → 0.63.0

package/dist/declarations/src/internal/ValRichText.d.ts

@@ -1,5 +1,6 @@
-import { RichText, RichTextNode, AnyRichTextOptions, RichTextOptions } from "@valbuild/core";
+import { RichTextNode as RichTextSourceNode, AllRichTextOptions, RichTextOptions } from "@valbuild/core";
 import { CSSProperties, ReactNode } from "react";
+import { RichText, StegaOfRichTextSource } from "../stega/index.js";
 type DefaultThemes = Partial<{
     br: string | null;
     p: string | null;
@@ -21,9 +22,10 @@ type OptionalFields = {
     bold: string | null;
     italic: string | null;
 };
-type ThemeOptions<O extends RichTextOptions = AnyRichTextOptions> = DefaultThemes & Pick<OptionalFields, (O["img"] extends true ? "img" : never) | (O["a"] extends true ? "a" : never) | (O["ul"] extends true ? "ul" | "li" : never) | (O["ol"] extends true ? "ol" | "li" : never) | (O["lineThrough"] extends true ? "lineThrough" : never) | (O["bold"] extends true ? "bold" : never) | (O["italic"] extends true ? "italic" : never) | (O["headings"] extends Array<infer T> ? T extends "h1" | "h2" | "h3" | "h4" | "h5" | "h6" ? T : never : never)>;
+type ThemeOptions<O extends RichTextOptions = AllRichTextOptions> = DefaultThemes & Pick<OptionalFields, (NonNullable<O["inline"]>["img"] extends true ? "img" : never) | (NonNullable<O["inline"]>["a"] extends true ? "a" : never) | (NonNullable<O["block"]>["ul"] extends true ? "ul" | "li" : never) | (NonNullable<O["block"]>["ol"] extends true ? "ol" | "li" : never) | (NonNullable<O["style"]>["lineThrough"] extends true ? "lineThrough" : never) | (NonNullable<O["style"]>["bold"] extends true ? "bold" : never) | (NonNullable<O["style"]>["italic"] extends true ? "italic" : never) | (NonNullable<O["block"]>["h1"] extends true ? "h1" : never) | (NonNullable<O["block"]>["h2"] extends true ? "h2" : never) | (NonNullable<O["block"]>["h3"] extends true ? "h3" : never) | (NonNullable<O["block"]>["h4"] extends true ? "h4" : never) | (NonNullable<O["block"]>["h5"] extends true ? "h5" : never) | (NonNullable<O["block"]>["h6"] extends true ? "h6" : never)>;
+type RichTextNode = StegaOfRichTextSource<RichTextSourceNode<AllRichTextOptions>>;
 /**
- * Render RichText as HTML
+ * Render RichText using JSX
  *
  * @example
  * const content = useVal(contentVal);
@@ -46,8 +48,12 @@ type ThemeOptions<O extends RichTextOptions = AnyRichTextOptions> = DefaultTheme
  * return (
  *   <ValRichText
  *     theme={{
- *        h1: 'text-4xl font-bold',
- *        img: 'rounded',
+ *        block: {
+ *          h1: 'text-4xl font-bold',
+ *        },
+ *        inline: {
+ *          img: 'rounded',
+ *        }
  *     }}
  *     transform={(node, className) => {
  *        if (node.tag === 'img') {
@@ -66,6 +72,6 @@ export declare function ValRichText<O extends RichTextOptions>({ children, class
     className?: string;
     style?: CSSProperties;
     theme?: ThemeOptions<O>;
-    transform?: (node: RichTextNode<O>, children: ReactNode | ReactNode[], className?: string) => JSX.Element | string | undefined;
+    transform?: (node: RichTextNode, children: ReactNode | ReactNode[], className?: string) => JSX.Element | string | undefined;
 }): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/declarations/src/stega/index.d.ts

@@ -1,6 +1,5 @@
 export { autoTagJSX } from "./autoTagJSX.js";
-export { stegaEncode, getModuleIds, stegaClean, type ValEncodedString, type StegaOfSource, } from "./stegaEncode.js";
-export { type Image } from "./stegaEncode.js";
+export { stegaEncode, getModuleIds, stegaClean, type ValEncodedString, type StegaOfSource, type StegaOfRichTextSource, type File, type Image, type RichText, } from "./stegaEncode.js";
 export { stegaDecodeString } from "./stegaDecodeString.js";
 export declare function IS_AUTO_TAG_JSX_ENABLED(): boolean;
 export declare function SET_AUTO_TAG_JSX_ENABLED(enabled: boolean): void;

package/dist/declarations/src/stega/stegaEncode.d.ts

@@ -1,4 +1,4 @@
-import { Json, RichTextSource, RichText, ImageMetadata, FileMetadata } from "@valbuild/core";
+import { Json, RichTextSource, ImageMetadata, FileMetadata, RichTextOptions, ImageSource } from "@valbuild/core";
 import { FileSource, Source, SourceObject } from "@valbuild/core";
 import { JsonPrimitive } from "@valbuild/core";
 import { SourceArray } from "@valbuild/core";
@@ -154,6 +154,15 @@ export type File<Metadata extends FileMetadata> = {
     readonly url: ValEncodedString;
     readonly metadata?: Metadata;
 };
+export type StegaOfRichTextSource<T extends Source> = Json extends T ? Json : T extends ImageSource ? Image : T extends SourceObject ? {
+    [key in keyof T]: StegaOfRichTextSource<T[key]>;
+} : T extends SourceArray ? StegaOfRichTextSource<T[number]>[] : T extends JsonPrimitive ? T : never;
+/**
+ * RichText is accessible by users (after conversion via useVal / fetchVal)
+ **/
+export type RichText<O extends RichTextOptions> = StegaOfRichTextSource<RichTextSource<O>> & {
+    valPath: string;
+};
 export type StegaOfSource<T extends Source> = Json extends T ? Json : T extends RichTextSource<infer O> ? RichText<O> : T extends FileSource<infer M> ? M extends ImageMetadata ? Image : M extends FileMetadata ? File<M> : never : T extends SourceObject ? {
     [key in keyof T]: StegaOfSource<T[key]>;
 } : T extends SourceArray ? StegaOfSource<T[number]>[] : T extends RawString ? string : string extends T ? ValEncodedString : T extends JsonPrimitive ? T : never;

package/internal/dist/valbuild-react-internal.browser.esm.js

@@ -4,7 +4,7 @@ import { jsx } from 'react/jsx-runtime';
 import '../../dist/unsupportedIterableToArray-cce3cb41.browser.esm.js';
 
 /**
- * Render RichText as HTML
+ * Render RichText using JSX
  *
  * @example
  * const content = useVal(contentVal);
@@ -27,8 +27,12 @@ import '../../dist/unsupportedIterableToArray-cce3cb41.browser.esm.js';
  * return (
  *   <ValRichText
  *     theme={{
- *        h1: 'text-4xl font-bold',
- *        img: 'rounded',
+ *        block: {
+ *          h1: 'text-4xl font-bold',
+ *        },
+ *        inline: {
+ *          img: 'rounded',
+ *        }
  *     }}
  *     transform={(node, className) => {
  *        if (node.tag === 'img') {
@@ -57,44 +61,55 @@ function ValRichText(_ref) {
       }
       return child;
     }
-    var className = classNameOfTag(child.tag, "classes" in child ? child.classes : [], theme);
+    var className = classNameOfTag(child.tag, child.tag === "span" ? child.styles : [], theme);
+    if (child.tag === "img") {
+      var _child$src$metadata, _child$src$metadata2;
+      var _transformed = transform && transform(child, []);
+      if (_transformed !== undefined) {
+        return _transformed;
+      }
+      return /*#__PURE__*/React.createElement("img", {
+        key: key === null || key === void 0 ? void 0 : key.toString(),
+        className: className,
+        src: child.src.url,
+        // alt: child.alt, TODO: add alt to the img html object
+        width: (_child$src$metadata = child.src.metadata) === null || _child$src$metadata === void 0 ? void 0 : _child$src$metadata.width,
+        height: (_child$src$metadata2 = child.src.metadata) === null || _child$src$metadata2 === void 0 ? void 0 : _child$src$metadata2.height
+      });
+    }
     var children = "children" in child ?
     // Why do this? We get a very weird error in NextJS 14.0.4 if we do not
     // Error: Cannot access Image.prototype on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.
     // https://github.com/vercel/next.js/issues/52415
     child.children.length === 1 ? build(child.children[0]) : child.children.map(build) : null;
     if (transform) {
-      var _transformed = transform(child, children !== null && children !== void 0 ? children : [], className);
-      if (_transformed !== undefined) {
-        return _transformed;
+      var _transformed2 = transform(child, children !== null && children !== void 0 ? children : [], className);
+      if (_transformed2 !== undefined) {
+        return _transformed2;
       }
     }
-    var tag = child.tag; // one of: "img" | "a" | "ul" | "ol" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "br" | "p" | "li" | "span"
+    var tag = child.tag; // one of:  "a" | "ul" | "ol" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "br" | "p" | "li" | "span"
     return /*#__PURE__*/React.createElement(tag, {
       key: key === null || key === void 0 ? void 0 : key.toString(),
       className: className,
       children: children,
-      href: tag === "a" ? child.href : undefined,
-      src: tag === "img" ? child.src && "/api/val/files/public".concat(child.src) : undefined,
-      alt: tag === "img" ? child.alt : undefined,
-      width: tag === "img" ? child.width : undefined,
-      height: tag === "img" ? child.height : undefined
+      href: child.tag === "a" ? child.href : undefined
     });
   }
   return /*#__PURE__*/jsx("div", {
     className: className,
     style: style,
     "data-val-path": root.valPath,
-    children: root.children.map(build)
+    children: root.map(build)
   });
 }
-function classNameOfTag(tag, clazz, theme) {
+function classNameOfTag(tag, style, theme) {
   var thisTagClassName = null;
   if (theme && tag in theme) {
-    var _theme$tag;
-    thisTagClassName = (_theme$tag = theme[tag]) !== null && _theme$tag !== void 0 ? _theme$tag : null;
+    var _tag;
+    thisTagClassName = (_tag = theme[tag]) !== null && _tag !== void 0 ? _tag : null;
   }
-  return [].concat(_toConsumableArray(thisTagClassName ? [thisTagClassName] : []), _toConsumableArray(clazz.map(function (style) {
+  return [].concat(_toConsumableArray(thisTagClassName ? [thisTagClassName] : []), _toConsumableArray(style.map(function (style) {
     if (theme &&
     // not need on type-level, but defensive on runtime:
     typeof style === "string") {
@@ -107,7 +122,7 @@ function classNameOfTag(tag, clazz, theme) {
         return theme[style];
       }
     }
-    return clazz;
+    return style;
   }))).join(" ");
 }
 

package/internal/dist/valbuild-react-internal.cjs.dev.js

@@ -12,7 +12,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 /**
- * Render RichText as HTML
+ * Render RichText using JSX
  *
  * @example
  * const content = useVal(contentVal);
@@ -35,8 +35,12 @@ var React__default = /*#__PURE__*/_interopDefault(React);
  * return (
  *   <ValRichText
  *     theme={{
- *        h1: 'text-4xl font-bold',
- *        img: 'rounded',
+ *        block: {
+ *          h1: 'text-4xl font-bold',
+ *        },
+ *        inline: {
+ *          img: 'rounded',
+ *        }
  *     }}
  *     transform={(node, className) => {
  *        if (node.tag === 'img') {
@@ -65,44 +69,55 @@ function ValRichText(_ref) {
       }
       return child;
     }
-    var className = classNameOfTag(child.tag, "classes" in child ? child.classes : [], theme);
+    var className = classNameOfTag(child.tag, child.tag === "span" ? child.styles : [], theme);
+    if (child.tag === "img") {
+      var _child$src$metadata, _child$src$metadata2;
+      var _transformed = transform && transform(child, []);
+      if (_transformed !== undefined) {
+        return _transformed;
+      }
+      return /*#__PURE__*/React__default["default"].createElement("img", {
+        key: key === null || key === void 0 ? void 0 : key.toString(),
+        className: className,
+        src: child.src.url,
+        // alt: child.alt, TODO: add alt to the img html object
+        width: (_child$src$metadata = child.src.metadata) === null || _child$src$metadata === void 0 ? void 0 : _child$src$metadata.width,
+        height: (_child$src$metadata2 = child.src.metadata) === null || _child$src$metadata2 === void 0 ? void 0 : _child$src$metadata2.height
+      });
+    }
     var children = "children" in child ?
     // Why do this? We get a very weird error in NextJS 14.0.4 if we do not
     // Error: Cannot access Image.prototype on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.
     // https://github.com/vercel/next.js/issues/52415
     child.children.length === 1 ? build(child.children[0]) : child.children.map(build) : null;
     if (transform) {
-      var _transformed = transform(child, children !== null && children !== void 0 ? children : [], className);
-      if (_transformed !== undefined) {
-        return _transformed;
+      var _transformed2 = transform(child, children !== null && children !== void 0 ? children : [], className);
+      if (_transformed2 !== undefined) {
+        return _transformed2;
       }
     }
-    var tag = child.tag; // one of: "img" | "a" | "ul" | "ol" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "br" | "p" | "li" | "span"
+    var tag = child.tag; // one of:  "a" | "ul" | "ol" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "br" | "p" | "li" | "span"
     return /*#__PURE__*/React__default["default"].createElement(tag, {
       key: key === null || key === void 0 ? void 0 : key.toString(),
       className: className,
       children: children,
-      href: tag === "a" ? child.href : undefined,
-      src: tag === "img" ? child.src && "/api/val/files/public".concat(child.src) : undefined,
-      alt: tag === "img" ? child.alt : undefined,
-      width: tag === "img" ? child.width : undefined,
-      height: tag === "img" ? child.height : undefined
+      href: child.tag === "a" ? child.href : undefined
     });
   }
   return /*#__PURE__*/ReactJSXRuntime.jsx("div", {
     className: className,
     style: style,
     "data-val-path": root.valPath,
-    children: root.children.map(build)
+    children: root.map(build)
   });
 }
-function classNameOfTag(tag, clazz, theme) {
+function classNameOfTag(tag, style, theme) {
   var thisTagClassName = null;
   if (theme && tag in theme) {
-    var _theme$tag;
-    thisTagClassName = (_theme$tag = theme[tag]) !== null && _theme$tag !== void 0 ? _theme$tag : null;
+    var _tag;
+    thisTagClassName = (_tag = theme[tag]) !== null && _tag !== void 0 ? _tag : null;
   }
-  return [].concat(toConsumableArray._toConsumableArray(thisTagClassName ? [thisTagClassName] : []), toConsumableArray._toConsumableArray(clazz.map(function (style) {
+  return [].concat(toConsumableArray._toConsumableArray(thisTagClassName ? [thisTagClassName] : []), toConsumableArray._toConsumableArray(style.map(function (style) {
     if (theme &&
     // not need on type-level, but defensive on runtime:
     typeof style === "string") {
@@ -115,7 +130,7 @@ function classNameOfTag(tag, clazz, theme) {
         return theme[style];
       }
     }
-    return clazz;
+    return style;
   }))).join(" ");
 }
 

package/internal/dist/valbuild-react-internal.cjs.prod.js

@@ -12,7 +12,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 /**
- * Render RichText as HTML
+ * Render RichText using JSX
  *
  * @example
  * const content = useVal(contentVal);
@@ -35,8 +35,12 @@ var React__default = /*#__PURE__*/_interopDefault(React);
  * return (
  *   <ValRichText
  *     theme={{
- *        h1: 'text-4xl font-bold',
- *        img: 'rounded',
+ *        block: {
+ *          h1: 'text-4xl font-bold',
+ *        },
+ *        inline: {
+ *          img: 'rounded',
+ *        }
  *     }}
  *     transform={(node, className) => {
  *        if (node.tag === 'img') {
@@ -65,44 +69,55 @@ function ValRichText(_ref) {
       }
       return child;
     }
-    var className = classNameOfTag(child.tag, "classes" in child ? child.classes : [], theme);
+    var className = classNameOfTag(child.tag, child.tag === "span" ? child.styles : [], theme);
+    if (child.tag === "img") {
+      var _child$src$metadata, _child$src$metadata2;
+      var _transformed = transform && transform(child, []);
+      if (_transformed !== undefined) {
+        return _transformed;
+      }
+      return /*#__PURE__*/React__default["default"].createElement("img", {
+        key: key === null || key === void 0 ? void 0 : key.toString(),
+        className: className,
+        src: child.src.url,
+        // alt: child.alt, TODO: add alt to the img html object
+        width: (_child$src$metadata = child.src.metadata) === null || _child$src$metadata === void 0 ? void 0 : _child$src$metadata.width,
+        height: (_child$src$metadata2 = child.src.metadata) === null || _child$src$metadata2 === void 0 ? void 0 : _child$src$metadata2.height
+      });
+    }
     var children = "children" in child ?
     // Why do this? We get a very weird error in NextJS 14.0.4 if we do not
     // Error: Cannot access Image.prototype on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.
     // https://github.com/vercel/next.js/issues/52415
     child.children.length === 1 ? build(child.children[0]) : child.children.map(build) : null;
     if (transform) {
-      var _transformed = transform(child, children !== null && children !== void 0 ? children : [], className);
-      if (_transformed !== undefined) {
-        return _transformed;
+      var _transformed2 = transform(child, children !== null && children !== void 0 ? children : [], className);
+      if (_transformed2 !== undefined) {
+        return _transformed2;
       }
     }
-    var tag = child.tag; // one of: "img" | "a" | "ul" | "ol" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "br" | "p" | "li" | "span"
+    var tag = child.tag; // one of:  "a" | "ul" | "ol" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "br" | "p" | "li" | "span"
     return /*#__PURE__*/React__default["default"].createElement(tag, {
       key: key === null || key === void 0 ? void 0 : key.toString(),
       className: className,
       children: children,
-      href: tag === "a" ? child.href : undefined,
-      src: tag === "img" ? child.src && "/api/val/files/public".concat(child.src) : undefined,
-      alt: tag === "img" ? child.alt : undefined,
-      width: tag === "img" ? child.width : undefined,
-      height: tag === "img" ? child.height : undefined
+      href: child.tag === "a" ? child.href : undefined
     });
   }
   return /*#__PURE__*/ReactJSXRuntime.jsx("div", {
     className: className,
     style: style,
     "data-val-path": root.valPath,
-    children: root.children.map(build)
+    children: root.map(build)
   });
 }
-function classNameOfTag(tag, clazz, theme) {
+function classNameOfTag(tag, style, theme) {
   var thisTagClassName = null;
   if (theme && tag in theme) {
-    var _theme$tag;
-    thisTagClassName = (_theme$tag = theme[tag]) !== null && _theme$tag !== void 0 ? _theme$tag : null;
+    var _tag;
+    thisTagClassName = (_tag = theme[tag]) !== null && _tag !== void 0 ? _tag : null;
   }
-  return [].concat(toConsumableArray._toConsumableArray(thisTagClassName ? [thisTagClassName] : []), toConsumableArray._toConsumableArray(clazz.map(function (style) {
+  return [].concat(toConsumableArray._toConsumableArray(thisTagClassName ? [thisTagClassName] : []), toConsumableArray._toConsumableArray(style.map(function (style) {
     if (theme &&
     // not need on type-level, but defensive on runtime:
     typeof style === "string") {
@@ -115,7 +130,7 @@ function classNameOfTag(tag, clazz, theme) {
         return theme[style];
       }
     }
-    return clazz;
+    return style;
   }))).join(" ");
 }
 

package/internal/dist/valbuild-react-internal.esm.js

@@ -4,7 +4,7 @@ import { jsx } from 'react/jsx-runtime';
 import '../../dist/unsupportedIterableToArray-7c30dadf.esm.js';
 
 /**
- * Render RichText as HTML
+ * Render RichText using JSX
  *
  * @example
  * const content = useVal(contentVal);
@@ -27,8 +27,12 @@ import '../../dist/unsupportedIterableToArray-7c30dadf.esm.js';
  * return (
  *   <ValRichText
  *     theme={{
- *        h1: 'text-4xl font-bold',
- *        img: 'rounded',
+ *        block: {
+ *          h1: 'text-4xl font-bold',
+ *        },
+ *        inline: {
+ *          img: 'rounded',
+ *        }
  *     }}
  *     transform={(node, className) => {
  *        if (node.tag === 'img') {
@@ -57,44 +61,55 @@ function ValRichText(_ref) {
       }
       return child;
     }
-    var className = classNameOfTag(child.tag, "classes" in child ? child.classes : [], theme);
+    var className = classNameOfTag(child.tag, child.tag === "span" ? child.styles : [], theme);
+    if (child.tag === "img") {
+      var _child$src$metadata, _child$src$metadata2;
+      var _transformed = transform && transform(child, []);
+      if (_transformed !== undefined) {
+        return _transformed;
+      }
+      return /*#__PURE__*/React.createElement("img", {
+        key: key === null || key === void 0 ? void 0 : key.toString(),
+        className: className,
+        src: child.src.url,
+        // alt: child.alt, TODO: add alt to the img html object
+        width: (_child$src$metadata = child.src.metadata) === null || _child$src$metadata === void 0 ? void 0 : _child$src$metadata.width,
+        height: (_child$src$metadata2 = child.src.metadata) === null || _child$src$metadata2 === void 0 ? void 0 : _child$src$metadata2.height
+      });
+    }
     var children = "children" in child ?
     // Why do this? We get a very weird error in NextJS 14.0.4 if we do not
     // Error: Cannot access Image.prototype on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.
     // https://github.com/vercel/next.js/issues/52415
     child.children.length === 1 ? build(child.children[0]) : child.children.map(build) : null;
     if (transform) {
-      var _transformed = transform(child, children !== null && children !== void 0 ? children : [], className);
-      if (_transformed !== undefined) {
-        return _transformed;
+      var _transformed2 = transform(child, children !== null && children !== void 0 ? children : [], className);
+      if (_transformed2 !== undefined) {
+        return _transformed2;
       }
     }
-    var tag = child.tag; // one of: "img" | "a" | "ul" | "ol" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "br" | "p" | "li" | "span"
+    var tag = child.tag; // one of:  "a" | "ul" | "ol" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "br" | "p" | "li" | "span"
     return /*#__PURE__*/React.createElement(tag, {
       key: key === null || key === void 0 ? void 0 : key.toString(),
       className: className,
       children: children,
-      href: tag === "a" ? child.href : undefined,
-      src: tag === "img" ? child.src && "/api/val/files/public".concat(child.src) : undefined,
-      alt: tag === "img" ? child.alt : undefined,
-      width: tag === "img" ? child.width : undefined,
-      height: tag === "img" ? child.height : undefined
+      href: child.tag === "a" ? child.href : undefined
     });
   }
   return /*#__PURE__*/jsx("div", {
     className: className,
     style: style,
     "data-val-path": root.valPath,
-    children: root.children.map(build)
+    children: root.map(build)
   });
 }
-function classNameOfTag(tag, clazz, theme) {
+function classNameOfTag(tag, style, theme) {
   var thisTagClassName = null;
   if (theme && tag in theme) {
-    var _theme$tag;
-    thisTagClassName = (_theme$tag = theme[tag]) !== null && _theme$tag !== void 0 ? _theme$tag : null;
+    var _tag;
+    thisTagClassName = (_tag = theme[tag]) !== null && _tag !== void 0 ? _tag : null;
   }
-  return [].concat(_toConsumableArray(thisTagClassName ? [thisTagClassName] : []), _toConsumableArray(clazz.map(function (style) {
+  return [].concat(_toConsumableArray(thisTagClassName ? [thisTagClassName] : []), _toConsumableArray(style.map(function (style) {
     if (theme &&
     // not need on type-level, but defensive on runtime:
     typeof style === "string") {
@@ -107,7 +122,7 @@ function classNameOfTag(tag, clazz, theme) {
         return theme[style];
       }
     }
-    return clazz;
+    return style;
   }))).join(" ");
 }
 

package/internal/dist/valbuild-react-internal.worker.esm.js

@@ -4,7 +4,7 @@ import { jsx } from 'react/jsx-runtime';
 import '../../dist/unsupportedIterableToArray-50359a05.worker.esm.js';
 
 /**
- * Render RichText as HTML
+ * Render RichText using JSX
  *
  * @example
  * const content = useVal(contentVal);
@@ -27,8 +27,12 @@ import '../../dist/unsupportedIterableToArray-50359a05.worker.esm.js';
  * return (
  *   <ValRichText
  *     theme={{
- *        h1: 'text-4xl font-bold',
- *        img: 'rounded',
+ *        block: {
+ *          h1: 'text-4xl font-bold',
+ *        },
+ *        inline: {
+ *          img: 'rounded',
+ *        }
  *     }}
  *     transform={(node, className) => {
  *        if (node.tag === 'img') {
@@ -57,44 +61,55 @@ function ValRichText(_ref) {
       }
       return child;
     }
-    var className = classNameOfTag(child.tag, "classes" in child ? child.classes : [], theme);
+    var className = classNameOfTag(child.tag, child.tag === "span" ? child.styles : [], theme);
+    if (child.tag === "img") {
+      var _child$src$metadata, _child$src$metadata2;
+      var _transformed = transform && transform(child, []);
+      if (_transformed !== undefined) {
+        return _transformed;
+      }
+      return /*#__PURE__*/React.createElement("img", {
+        key: key === null || key === void 0 ? void 0 : key.toString(),
+        className: className,
+        src: child.src.url,
+        // alt: child.alt, TODO: add alt to the img html object
+        width: (_child$src$metadata = child.src.metadata) === null || _child$src$metadata === void 0 ? void 0 : _child$src$metadata.width,
+        height: (_child$src$metadata2 = child.src.metadata) === null || _child$src$metadata2 === void 0 ? void 0 : _child$src$metadata2.height
+      });
+    }
     var children = "children" in child ?
     // Why do this? We get a very weird error in NextJS 14.0.4 if we do not
     // Error: Cannot access Image.prototype on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.
     // https://github.com/vercel/next.js/issues/52415
     child.children.length === 1 ? build(child.children[0]) : child.children.map(build) : null;
     if (transform) {
-      var _transformed = transform(child, children !== null && children !== void 0 ? children : [], className);
-      if (_transformed !== undefined) {
-        return _transformed;
+      var _transformed2 = transform(child, children !== null && children !== void 0 ? children : [], className);
+      if (_transformed2 !== undefined) {
+        return _transformed2;
       }
     }
-    var tag = child.tag; // one of: "img" | "a" | "ul" | "ol" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "br" | "p" | "li" | "span"
+    var tag = child.tag; // one of:  "a" | "ul" | "ol" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "br" | "p" | "li" | "span"
     return /*#__PURE__*/React.createElement(tag, {
       key: key === null || key === void 0 ? void 0 : key.toString(),
       className: className,
       children: children,
-      href: tag === "a" ? child.href : undefined,
-      src: tag === "img" ? child.src && "/api/val/files/public".concat(child.src) : undefined,
-      alt: tag === "img" ? child.alt : undefined,
-      width: tag === "img" ? child.width : undefined,
-      height: tag === "img" ? child.height : undefined
+      href: child.tag === "a" ? child.href : undefined
     });
   }
   return /*#__PURE__*/jsx("div", {
     className: className,
     style: style,
     "data-val-path": root.valPath,
-    children: root.children.map(build)
+    children: root.map(build)
   });
 }
-function classNameOfTag(tag, clazz, theme) {
+function classNameOfTag(tag, style, theme) {
   var thisTagClassName = null;
   if (theme && tag in theme) {
-    var _theme$tag;
-    thisTagClassName = (_theme$tag = theme[tag]) !== null && _theme$tag !== void 0 ? _theme$tag : null;
+    var _tag;
+    thisTagClassName = (_tag = theme[tag]) !== null && _tag !== void 0 ? _tag : null;
   }
-  return [].concat(_toConsumableArray(thisTagClassName ? [thisTagClassName] : []), _toConsumableArray(clazz.map(function (style) {
+  return [].concat(_toConsumableArray(thisTagClassName ? [thisTagClassName] : []), _toConsumableArray(style.map(function (style) {
     if (theme &&
     // not need on type-level, but defensive on runtime:
     typeof style === "string") {
@@ -107,7 +122,7 @@ function classNameOfTag(tag, clazz, theme) {
         return theme[style];
       }
     }
-    return clazz;
+    return style;
   }))).join(" ");
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@valbuild/react",
-  "version": "0.62.5",
+  "version": "0.63.0",
   "private": false,
   "description": "Val - React internal helpers",
   "sideEffects": false,
@@ -9,9 +9,9 @@
     "test": "jest"
   },
   "dependencies": {
-    "@valbuild/core": "~0.62.5",
-    "@valbuild/shared": "~0.62.5",
-    "@valbuild/ui": "~0.62.5",
+    "@valbuild/core": "~0.63.0",
+    "@valbuild/shared": "~0.63.0",
+    "@valbuild/ui": "~0.63.0",
     "@vercel/stega": "^0.1.0",
     "base64-arraybuffer": "^1.0.2"
   },

package/stega/dist/valbuild-react-stega.browser.esm.js

@@ -5,7 +5,6 @@ import React from 'react';
 import { vercelStegaDecode, VERCEL_STEGA_REGEX, vercelStegaSplit, vercelStegaCombine } from '@vercel/stega';
 import { _ as _toConsumableArray } from '../../dist/toConsumableArray-5a71fbb3.browser.esm.js';
 import { Internal, VAL_EXTENSION, FILE_REF_PROP } from '@valbuild/core';
-import { parseRichTextSource } from '@valbuild/shared/internal';
 import '../../dist/unsupportedIterableToArray-cce3cb41.browser.esm.js';
 
 function stegaDecodeString(encodedString) {
@@ -195,8 +194,15 @@ function _objectSpread2(e) {
  *
  */
 
+/**
+ * RichText is accessible by users (after conversion via useVal / fetchVal)
+ **/
+
 function stegaEncode(input, opts) {
   function rec(sourceOrSelector, recOpts) {
+    if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isKeyOfSchema(recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema)) {
+      return sourceOrSelector;
+    }
     if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isLiteralSchema(recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema)) {
       return sourceOrSelector;
     }
@@ -241,6 +247,11 @@ function stegaEncode(input, opts) {
         });
       }
     }
+    if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isRichTextSchema(recOpts.schema)) {
+      var res = rec(sourceOrSelector);
+      res.valPath = recOpts.path;
+      return res;
+    }
     if (_typeof(sourceOrSelector) === "object") {
       if (!sourceOrSelector) {
         return null;
@@ -254,14 +265,6 @@ function stegaEncode(input, opts) {
         });
       }
       if (VAL_EXTENSION in sourceOrSelector) {
-        if (sourceOrSelector[VAL_EXTENSION] === "richtext") {
-          if (recOpts !== null && recOpts !== void 0 && recOpts.path) {
-            return _objectSpread2(_objectSpread2({}, parseRichTextSource(sourceOrSelector)), {}, {
-              valPath: recOpts.path
-            });
-          }
-          return parseRichTextSource(sourceOrSelector);
-        }
         if (sourceOrSelector[VAL_EXTENSION] === "file" && typeof sourceOrSelector[FILE_REF_PROP] === "string") {
           var fileSelector = Internal.convertFileSource(sourceOrSelector);
           var url = fileSelector.url;
@@ -286,18 +289,18 @@ function stegaEncode(input, opts) {
         });
       }
       if (!Array.isArray(sourceOrSelector)) {
-        var res = {};
+        var _res = {};
         var entries = Object.entries(sourceOrSelector);
         for (var _i = 0, _entries = entries; _i < _entries.length; _i++) {
           var _entries$_i = _slicedToArray(_entries[_i], 2),
             _key2 = _entries$_i[0],
             value = _entries$_i[1];
-          res[_key2] = rec(value, (recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema) && {
+          _res[_key2] = rec(value, (recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema) && {
             path: Internal.createValPathOfItem(recOpts.path, _key2),
             schema: isRecordSchema(recOpts.schema) ? recOpts.schema.item : isObjectSchema(recOpts.schema) ? recOpts.schema.items[_key2] : unknownSchema(recOpts.schema)
           });
         }
-        return res;
+        return _res;
       }
       console.error("Could not transform source selector: ".concat(_typeof(sourceOrSelector), " (array: ").concat(Array.isArray(sourceOrSelector), ")"), sourceOrSelector);
       return sourceOrSelector;
@@ -339,6 +342,12 @@ function unknownSchema(schema) {
 function isUnionSchema(schema) {
   return (schema === null || schema === void 0 ? void 0 : schema.type) === "union";
 }
+function isKeyOfSchema(schema) {
+  return (schema === null || schema === void 0 ? void 0 : schema.type) === "keyOf";
+}
+function isRichTextSchema(schema) {
+  return (schema === null || schema === void 0 ? void 0 : schema.type) === "richtext";
+}
 function isObjectSchema(schema) {
   return (schema === null || schema === void 0 ? void 0 : schema.type) === "object";
 }

package/stega/dist/valbuild-react-stega.cjs.dev.js

@@ -9,7 +9,6 @@ var React = require('react');
 var stega = require('@vercel/stega');
 var toConsumableArray = require('../../dist/toConsumableArray-b2d28ffa.cjs.dev.js');
 var core = require('@valbuild/core');
-var internal = require('@valbuild/shared/internal');
 require('../../dist/unsupportedIterableToArray-ac28611a.cjs.dev.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -205,8 +204,15 @@ function _objectSpread2(e) {
  *
  */
 
+/**
+ * RichText is accessible by users (after conversion via useVal / fetchVal)
+ **/
+
 function stegaEncode(input, opts) {
   function rec(sourceOrSelector, recOpts) {
+    if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isKeyOfSchema(recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema)) {
+      return sourceOrSelector;
+    }
     if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isLiteralSchema(recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema)) {
       return sourceOrSelector;
     }
@@ -251,6 +257,11 @@ function stegaEncode(input, opts) {
         });
       }
     }
+    if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isRichTextSchema(recOpts.schema)) {
+      var res = rec(sourceOrSelector);
+      res.valPath = recOpts.path;
+      return res;
+    }
     if (slicedToArray._typeof(sourceOrSelector) === "object") {
       if (!sourceOrSelector) {
         return null;
@@ -264,14 +275,6 @@ function stegaEncode(input, opts) {
         });
       }
       if (core.VAL_EXTENSION in sourceOrSelector) {
-        if (sourceOrSelector[core.VAL_EXTENSION] === "richtext") {
-          if (recOpts !== null && recOpts !== void 0 && recOpts.path) {
-            return _objectSpread2(_objectSpread2({}, internal.parseRichTextSource(sourceOrSelector)), {}, {
-              valPath: recOpts.path
-            });
-          }
-          return internal.parseRichTextSource(sourceOrSelector);
-        }
         if (sourceOrSelector[core.VAL_EXTENSION] === "file" && typeof sourceOrSelector[core.FILE_REF_PROP] === "string") {
           var fileSelector = core.Internal.convertFileSource(sourceOrSelector);
           var url = fileSelector.url;
@@ -296,18 +299,18 @@ function stegaEncode(input, opts) {
         });
       }
       if (!Array.isArray(sourceOrSelector)) {
-        var res = {};
+        var _res = {};
         var entries = Object.entries(sourceOrSelector);
         for (var _i = 0, _entries = entries; _i < _entries.length; _i++) {
           var _entries$_i = slicedToArray._slicedToArray(_entries[_i], 2),
             _key2 = _entries$_i[0],
             value = _entries$_i[1];
-          res[_key2] = rec(value, (recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema) && {
+          _res[_key2] = rec(value, (recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema) && {
             path: core.Internal.createValPathOfItem(recOpts.path, _key2),
             schema: isRecordSchema(recOpts.schema) ? recOpts.schema.item : isObjectSchema(recOpts.schema) ? recOpts.schema.items[_key2] : unknownSchema(recOpts.schema)
           });
         }
-        return res;
+        return _res;
       }
       console.error("Could not transform source selector: ".concat(slicedToArray._typeof(sourceOrSelector), " (array: ").concat(Array.isArray(sourceOrSelector), ")"), sourceOrSelector);
       return sourceOrSelector;
@@ -349,6 +352,12 @@ function unknownSchema(schema) {
 function isUnionSchema(schema) {
   return (schema === null || schema === void 0 ? void 0 : schema.type) === "union";
 }
+function isKeyOfSchema(schema) {
+  return (schema === null || schema === void 0 ? void 0 : schema.type) === "keyOf";
+}
+function isRichTextSchema(schema) {
+  return (schema === null || schema === void 0 ? void 0 : schema.type) === "richtext";
+}
 function isObjectSchema(schema) {
   return (schema === null || schema === void 0 ? void 0 : schema.type) === "object";
 }

package/stega/dist/valbuild-react-stega.cjs.prod.js

@@ -9,7 +9,6 @@ var React = require('react');
 var stega = require('@vercel/stega');
 var toConsumableArray = require('../../dist/toConsumableArray-b5e3b83f.cjs.prod.js');
 var core = require('@valbuild/core');
-var internal = require('@valbuild/shared/internal');
 require('../../dist/unsupportedIterableToArray-42309462.cjs.prod.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -205,8 +204,15 @@ function _objectSpread2(e) {
  *
  */
 
+/**
+ * RichText is accessible by users (after conversion via useVal / fetchVal)
+ **/
+
 function stegaEncode(input, opts) {
   function rec(sourceOrSelector, recOpts) {
+    if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isKeyOfSchema(recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema)) {
+      return sourceOrSelector;
+    }
     if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isLiteralSchema(recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema)) {
       return sourceOrSelector;
     }
@@ -251,6 +257,11 @@ function stegaEncode(input, opts) {
         });
       }
     }
+    if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isRichTextSchema(recOpts.schema)) {
+      var res = rec(sourceOrSelector);
+      res.valPath = recOpts.path;
+      return res;
+    }
     if (slicedToArray._typeof(sourceOrSelector) === "object") {
       if (!sourceOrSelector) {
         return null;
@@ -264,14 +275,6 @@ function stegaEncode(input, opts) {
         });
       }
       if (core.VAL_EXTENSION in sourceOrSelector) {
-        if (sourceOrSelector[core.VAL_EXTENSION] === "richtext") {
-          if (recOpts !== null && recOpts !== void 0 && recOpts.path) {
-            return _objectSpread2(_objectSpread2({}, internal.parseRichTextSource(sourceOrSelector)), {}, {
-              valPath: recOpts.path
-            });
-          }
-          return internal.parseRichTextSource(sourceOrSelector);
-        }
         if (sourceOrSelector[core.VAL_EXTENSION] === "file" && typeof sourceOrSelector[core.FILE_REF_PROP] === "string") {
           var fileSelector = core.Internal.convertFileSource(sourceOrSelector);
           var url = fileSelector.url;
@@ -296,18 +299,18 @@ function stegaEncode(input, opts) {
         });
       }
       if (!Array.isArray(sourceOrSelector)) {
-        var res = {};
+        var _res = {};
         var entries = Object.entries(sourceOrSelector);
         for (var _i = 0, _entries = entries; _i < _entries.length; _i++) {
           var _entries$_i = slicedToArray._slicedToArray(_entries[_i], 2),
             _key2 = _entries$_i[0],
             value = _entries$_i[1];
-          res[_key2] = rec(value, (recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema) && {
+          _res[_key2] = rec(value, (recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema) && {
             path: core.Internal.createValPathOfItem(recOpts.path, _key2),
             schema: isRecordSchema(recOpts.schema) ? recOpts.schema.item : isObjectSchema(recOpts.schema) ? recOpts.schema.items[_key2] : unknownSchema(recOpts.schema)
           });
         }
-        return res;
+        return _res;
       }
       console.error("Could not transform source selector: ".concat(slicedToArray._typeof(sourceOrSelector), " (array: ").concat(Array.isArray(sourceOrSelector), ")"), sourceOrSelector);
       return sourceOrSelector;
@@ -349,6 +352,12 @@ function unknownSchema(schema) {
 function isUnionSchema(schema) {
   return (schema === null || schema === void 0 ? void 0 : schema.type) === "union";
 }
+function isKeyOfSchema(schema) {
+  return (schema === null || schema === void 0 ? void 0 : schema.type) === "keyOf";
+}
+function isRichTextSchema(schema) {
+  return (schema === null || schema === void 0 ? void 0 : schema.type) === "richtext";
+}
 function isObjectSchema(schema) {
   return (schema === null || schema === void 0 ? void 0 : schema.type) === "object";
 }

package/stega/dist/valbuild-react-stega.esm.js

@@ -5,7 +5,6 @@ import React from 'react';
 import { vercelStegaDecode, VERCEL_STEGA_REGEX, vercelStegaSplit, vercelStegaCombine } from '@vercel/stega';
 import { _ as _toConsumableArray } from '../../dist/toConsumableArray-0ccd58b7.esm.js';
 import { Internal, VAL_EXTENSION, FILE_REF_PROP } from '@valbuild/core';
-import { parseRichTextSource } from '@valbuild/shared/internal';
 import '../../dist/unsupportedIterableToArray-7c30dadf.esm.js';
 
 function stegaDecodeString(encodedString) {
@@ -195,8 +194,15 @@ function _objectSpread2(e) {
  *
  */
 
+/**
+ * RichText is accessible by users (after conversion via useVal / fetchVal)
+ **/
+
 function stegaEncode(input, opts) {
   function rec(sourceOrSelector, recOpts) {
+    if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isKeyOfSchema(recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema)) {
+      return sourceOrSelector;
+    }
     if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isLiteralSchema(recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema)) {
       return sourceOrSelector;
     }
@@ -241,6 +247,11 @@ function stegaEncode(input, opts) {
         });
       }
     }
+    if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isRichTextSchema(recOpts.schema)) {
+      var res = rec(sourceOrSelector);
+      res.valPath = recOpts.path;
+      return res;
+    }
     if (_typeof(sourceOrSelector) === "object") {
       if (!sourceOrSelector) {
         return null;
@@ -254,14 +265,6 @@ function stegaEncode(input, opts) {
         });
       }
       if (VAL_EXTENSION in sourceOrSelector) {
-        if (sourceOrSelector[VAL_EXTENSION] === "richtext") {
-          if (recOpts !== null && recOpts !== void 0 && recOpts.path) {
-            return _objectSpread2(_objectSpread2({}, parseRichTextSource(sourceOrSelector)), {}, {
-              valPath: recOpts.path
-            });
-          }
-          return parseRichTextSource(sourceOrSelector);
-        }
         if (sourceOrSelector[VAL_EXTENSION] === "file" && typeof sourceOrSelector[FILE_REF_PROP] === "string") {
           var fileSelector = Internal.convertFileSource(sourceOrSelector);
           var url = fileSelector.url;
@@ -286,18 +289,18 @@ function stegaEncode(input, opts) {
         });
       }
       if (!Array.isArray(sourceOrSelector)) {
-        var res = {};
+        var _res = {};
         var entries = Object.entries(sourceOrSelector);
         for (var _i = 0, _entries = entries; _i < _entries.length; _i++) {
           var _entries$_i = _slicedToArray(_entries[_i], 2),
             _key2 = _entries$_i[0],
             value = _entries$_i[1];
-          res[_key2] = rec(value, (recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema) && {
+          _res[_key2] = rec(value, (recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema) && {
             path: Internal.createValPathOfItem(recOpts.path, _key2),
             schema: isRecordSchema(recOpts.schema) ? recOpts.schema.item : isObjectSchema(recOpts.schema) ? recOpts.schema.items[_key2] : unknownSchema(recOpts.schema)
           });
         }
-        return res;
+        return _res;
       }
       console.error("Could not transform source selector: ".concat(_typeof(sourceOrSelector), " (array: ").concat(Array.isArray(sourceOrSelector), ")"), sourceOrSelector);
       return sourceOrSelector;
@@ -339,6 +342,12 @@ function unknownSchema(schema) {
 function isUnionSchema(schema) {
   return (schema === null || schema === void 0 ? void 0 : schema.type) === "union";
 }
+function isKeyOfSchema(schema) {
+  return (schema === null || schema === void 0 ? void 0 : schema.type) === "keyOf";
+}
+function isRichTextSchema(schema) {
+  return (schema === null || schema === void 0 ? void 0 : schema.type) === "richtext";
+}
 function isObjectSchema(schema) {
   return (schema === null || schema === void 0 ? void 0 : schema.type) === "object";
 }

package/stega/dist/valbuild-react-stega.worker.esm.js

@@ -5,7 +5,6 @@ import React from 'react';
 import { vercelStegaDecode, VERCEL_STEGA_REGEX, vercelStegaSplit, vercelStegaCombine } from '@vercel/stega';
 import { _ as _toConsumableArray } from '../../dist/toConsumableArray-0a75a603.worker.esm.js';
 import { Internal, VAL_EXTENSION, FILE_REF_PROP } from '@valbuild/core';
-import { parseRichTextSource } from '@valbuild/shared/internal';
 import '../../dist/unsupportedIterableToArray-50359a05.worker.esm.js';
 
 function stegaDecodeString(encodedString) {
@@ -195,8 +194,15 @@ function _objectSpread2(e) {
  *
  */
 
+/**
+ * RichText is accessible by users (after conversion via useVal / fetchVal)
+ **/
+
 function stegaEncode(input, opts) {
   function rec(sourceOrSelector, recOpts) {
+    if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isKeyOfSchema(recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema)) {
+      return sourceOrSelector;
+    }
     if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isLiteralSchema(recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema)) {
       return sourceOrSelector;
     }
@@ -241,6 +247,11 @@ function stegaEncode(input, opts) {
         });
       }
     }
+    if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isRichTextSchema(recOpts.schema)) {
+      var res = rec(sourceOrSelector);
+      res.valPath = recOpts.path;
+      return res;
+    }
     if (_typeof(sourceOrSelector) === "object") {
       if (!sourceOrSelector) {
         return null;
@@ -254,14 +265,6 @@ function stegaEncode(input, opts) {
         });
       }
       if (VAL_EXTENSION in sourceOrSelector) {
-        if (sourceOrSelector[VAL_EXTENSION] === "richtext") {
-          if (recOpts !== null && recOpts !== void 0 && recOpts.path) {
-            return _objectSpread2(_objectSpread2({}, parseRichTextSource(sourceOrSelector)), {}, {
-              valPath: recOpts.path
-            });
-          }
-          return parseRichTextSource(sourceOrSelector);
-        }
         if (sourceOrSelector[VAL_EXTENSION] === "file" && typeof sourceOrSelector[FILE_REF_PROP] === "string") {
           var fileSelector = Internal.convertFileSource(sourceOrSelector);
           var url = fileSelector.url;
@@ -286,18 +289,18 @@ function stegaEncode(input, opts) {
         });
       }
       if (!Array.isArray(sourceOrSelector)) {
-        var res = {};
+        var _res = {};
         var entries = Object.entries(sourceOrSelector);
         for (var _i = 0, _entries = entries; _i < _entries.length; _i++) {
           var _entries$_i = _slicedToArray(_entries[_i], 2),
             _key2 = _entries$_i[0],
             value = _entries$_i[1];
-          res[_key2] = rec(value, (recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema) && {
+          _res[_key2] = rec(value, (recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema) && {
             path: Internal.createValPathOfItem(recOpts.path, _key2),
             schema: isRecordSchema(recOpts.schema) ? recOpts.schema.item : isObjectSchema(recOpts.schema) ? recOpts.schema.items[_key2] : unknownSchema(recOpts.schema)
           });
         }
-        return res;
+        return _res;
       }
       console.error("Could not transform source selector: ".concat(_typeof(sourceOrSelector), " (array: ").concat(Array.isArray(sourceOrSelector), ")"), sourceOrSelector);
       return sourceOrSelector;
@@ -339,6 +342,12 @@ function unknownSchema(schema) {
 function isUnionSchema(schema) {
   return (schema === null || schema === void 0 ? void 0 : schema.type) === "union";
 }
+function isKeyOfSchema(schema) {
+  return (schema === null || schema === void 0 ? void 0 : schema.type) === "keyOf";
+}
+function isRichTextSchema(schema) {
+  return (schema === null || schema === void 0 ? void 0 : schema.type) === "richtext";
+}
 function isObjectSchema(schema) {
   return (schema === null || schema === void 0 ? void 0 : schema.type) === "object";
 }