@valbuild/react 0.62.6 → 0.63.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,6 @@
1
- import { RichText, RichTextNode, AnyRichTextOptions, RichTextOptions } from "@valbuild/core";
1
+ import { RichTextNode as RichTextSourceNode, AllRichTextOptions, RichTextOptions } from "@valbuild/core";
2
2
  import { CSSProperties, ReactNode } from "react";
3
+ import { RichText, StegaOfRichTextSource } from "../stega/index.js";
3
4
  type DefaultThemes = Partial<{
4
5
  br: string | null;
5
6
  p: string | null;
@@ -21,9 +22,10 @@ type OptionalFields = {
21
22
  bold: string | null;
22
23
  italic: string | null;
23
24
  };
24
- 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)>;
25
+ 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)>;
26
+ type RichTextNode = StegaOfRichTextSource<RichTextSourceNode<AllRichTextOptions>>;
25
27
  /**
26
- * Render RichText as HTML
28
+ * Render RichText using JSX
27
29
  *
28
30
  * @example
29
31
  * const content = useVal(contentVal);
@@ -46,8 +48,12 @@ type ThemeOptions<O extends RichTextOptions = AnyRichTextOptions> = DefaultTheme
46
48
  * return (
47
49
  * <ValRichText
48
50
  * theme={{
49
- * h1: 'text-4xl font-bold',
50
- * img: 'rounded',
51
+ * block: {
52
+ * h1: 'text-4xl font-bold',
53
+ * },
54
+ * inline: {
55
+ * img: 'rounded',
56
+ * }
51
57
  * }}
52
58
  * transform={(node, className) => {
53
59
  * if (node.tag === 'img') {
@@ -66,6 +72,6 @@ export declare function ValRichText<O extends RichTextOptions>({ children, class
66
72
  className?: string;
67
73
  style?: CSSProperties;
68
74
  theme?: ThemeOptions<O>;
69
- transform?: (node: RichTextNode<O>, children: ReactNode | ReactNode[], className?: string) => JSX.Element | string | undefined;
75
+ transform?: (node: RichTextNode, children: ReactNode | ReactNode[], className?: string) => JSX.Element | string | undefined;
70
76
  }): import("react/jsx-runtime").JSX.Element;
71
77
  export {};
@@ -1,6 +1,5 @@
1
1
  export { autoTagJSX } from "./autoTagJSX.js";
2
- export { stegaEncode, getModuleIds, stegaClean, type ValEncodedString, type StegaOfSource, } from "./stegaEncode.js";
3
- export { type Image } from "./stegaEncode.js";
2
+ export { stegaEncode, getModuleIds, stegaClean, type ValEncodedString, type StegaOfSource, type StegaOfRichTextSource, type File, type Image, type RichText, } from "./stegaEncode.js";
4
3
  export { stegaDecodeString } from "./stegaDecodeString.js";
5
4
  export declare function IS_AUTO_TAG_JSX_ENABLED(): boolean;
6
5
  export declare function SET_AUTO_TAG_JSX_ENABLED(enabled: boolean): void;
@@ -1,4 +1,4 @@
1
- import { Json, RichTextSource, RichText, ImageMetadata, FileMetadata } from "@valbuild/core";
1
+ import { Json, RichTextSource, ImageMetadata, FileMetadata, RichTextOptions, ImageSource } from "@valbuild/core";
2
2
  import { FileSource, Source, SourceObject } from "@valbuild/core";
3
3
  import { JsonPrimitive } from "@valbuild/core";
4
4
  import { SourceArray } from "@valbuild/core";
@@ -154,6 +154,15 @@ export type File<Metadata extends FileMetadata> = {
154
154
  readonly url: ValEncodedString;
155
155
  readonly metadata?: Metadata;
156
156
  };
157
+ export type StegaOfRichTextSource<T extends Source> = Json extends T ? Json : T extends ImageSource ? Image : T extends SourceObject ? {
158
+ [key in keyof T]: StegaOfRichTextSource<T[key]>;
159
+ } : T extends SourceArray ? StegaOfRichTextSource<T[number]>[] : T extends JsonPrimitive ? T : never;
160
+ /**
161
+ * RichText is accessible by users (after conversion via useVal / fetchVal)
162
+ **/
163
+ export type RichText<O extends RichTextOptions> = StegaOfRichTextSource<RichTextSource<O>> & {
164
+ valPath: string;
165
+ };
157
166
  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 ? {
158
167
  [key in keyof T]: StegaOfSource<T[key]>;
159
168
  } : T extends SourceArray ? StegaOfSource<T[number]>[] : T extends RawString ? string : string extends T ? ValEncodedString : T extends JsonPrimitive ? T : never;
@@ -4,7 +4,7 @@ import { jsx } from 'react/jsx-runtime';
4
4
  import '../../dist/unsupportedIterableToArray-cce3cb41.browser.esm.js';
5
5
 
6
6
  /**
7
- * Render RichText as HTML
7
+ * Render RichText using JSX
8
8
  *
9
9
  * @example
10
10
  * const content = useVal(contentVal);
@@ -27,8 +27,12 @@ import '../../dist/unsupportedIterableToArray-cce3cb41.browser.esm.js';
27
27
  * return (
28
28
  * <ValRichText
29
29
  * theme={{
30
- * h1: 'text-4xl font-bold',
31
- * img: 'rounded',
30
+ * block: {
31
+ * h1: 'text-4xl font-bold',
32
+ * },
33
+ * inline: {
34
+ * img: 'rounded',
35
+ * }
32
36
  * }}
33
37
  * transform={(node, className) => {
34
38
  * if (node.tag === 'img') {
@@ -57,44 +61,55 @@ function ValRichText(_ref) {
57
61
  }
58
62
  return child;
59
63
  }
60
- var className = classNameOfTag(child.tag, "classes" in child ? child.classes : [], theme);
64
+ var className = classNameOfTag(child.tag, child.tag === "span" ? child.styles : [], theme);
65
+ if (child.tag === "img") {
66
+ var _child$src$metadata, _child$src$metadata2;
67
+ var _transformed = transform && transform(child, []);
68
+ if (_transformed !== undefined) {
69
+ return _transformed;
70
+ }
71
+ return /*#__PURE__*/React.createElement("img", {
72
+ key: key === null || key === void 0 ? void 0 : key.toString(),
73
+ className: className,
74
+ src: child.src.url,
75
+ // alt: child.alt, TODO: add alt to the img html object
76
+ width: (_child$src$metadata = child.src.metadata) === null || _child$src$metadata === void 0 ? void 0 : _child$src$metadata.width,
77
+ height: (_child$src$metadata2 = child.src.metadata) === null || _child$src$metadata2 === void 0 ? void 0 : _child$src$metadata2.height
78
+ });
79
+ }
61
80
  var children = "children" in child ?
62
81
  // Why do this? We get a very weird error in NextJS 14.0.4 if we do not
63
82
  // 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.
64
83
  // https://github.com/vercel/next.js/issues/52415
65
84
  child.children.length === 1 ? build(child.children[0]) : child.children.map(build) : null;
66
85
  if (transform) {
67
- var _transformed = transform(child, children !== null && children !== void 0 ? children : [], className);
68
- if (_transformed !== undefined) {
69
- return _transformed;
86
+ var _transformed2 = transform(child, children !== null && children !== void 0 ? children : [], className);
87
+ if (_transformed2 !== undefined) {
88
+ return _transformed2;
70
89
  }
71
90
  }
72
- var tag = child.tag; // one of: "img" | "a" | "ul" | "ol" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "br" | "p" | "li" | "span"
91
+ var tag = child.tag; // one of: "a" | "ul" | "ol" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "br" | "p" | "li" | "span"
73
92
  return /*#__PURE__*/React.createElement(tag, {
74
93
  key: key === null || key === void 0 ? void 0 : key.toString(),
75
94
  className: className,
76
95
  children: children,
77
- href: tag === "a" ? child.href : undefined,
78
- src: tag === "img" ? child.src && "/api/val/files/public".concat(child.src) : undefined,
79
- alt: tag === "img" ? child.alt : undefined,
80
- width: tag === "img" ? child.width : undefined,
81
- height: tag === "img" ? child.height : undefined
96
+ href: child.tag === "a" ? child.href : undefined
82
97
  });
83
98
  }
84
99
  return /*#__PURE__*/jsx("div", {
85
100
  className: className,
86
101
  style: style,
87
102
  "data-val-path": root.valPath,
88
- children: root.children.map(build)
103
+ children: root.map(build)
89
104
  });
90
105
  }
91
- function classNameOfTag(tag, clazz, theme) {
106
+ function classNameOfTag(tag, style, theme) {
92
107
  var thisTagClassName = null;
93
108
  if (theme && tag in theme) {
94
- var _theme$tag;
95
- thisTagClassName = (_theme$tag = theme[tag]) !== null && _theme$tag !== void 0 ? _theme$tag : null;
109
+ var _tag;
110
+ thisTagClassName = (_tag = theme[tag]) !== null && _tag !== void 0 ? _tag : null;
96
111
  }
97
- return [].concat(_toConsumableArray(thisTagClassName ? [thisTagClassName] : []), _toConsumableArray(clazz.map(function (style) {
112
+ return [].concat(_toConsumableArray(thisTagClassName ? [thisTagClassName] : []), _toConsumableArray(style.map(function (style) {
98
113
  if (theme &&
99
114
  // not need on type-level, but defensive on runtime:
100
115
  typeof style === "string") {
@@ -107,7 +122,7 @@ function classNameOfTag(tag, clazz, theme) {
107
122
  return theme[style];
108
123
  }
109
124
  }
110
- return clazz;
125
+ return style;
111
126
  }))).join(" ");
112
127
  }
113
128
 
@@ -12,7 +12,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
12
12
  var React__default = /*#__PURE__*/_interopDefault(React);
13
13
 
14
14
  /**
15
- * Render RichText as HTML
15
+ * Render RichText using JSX
16
16
  *
17
17
  * @example
18
18
  * const content = useVal(contentVal);
@@ -35,8 +35,12 @@ var React__default = /*#__PURE__*/_interopDefault(React);
35
35
  * return (
36
36
  * <ValRichText
37
37
  * theme={{
38
- * h1: 'text-4xl font-bold',
39
- * img: 'rounded',
38
+ * block: {
39
+ * h1: 'text-4xl font-bold',
40
+ * },
41
+ * inline: {
42
+ * img: 'rounded',
43
+ * }
40
44
  * }}
41
45
  * transform={(node, className) => {
42
46
  * if (node.tag === 'img') {
@@ -65,44 +69,55 @@ function ValRichText(_ref) {
65
69
  }
66
70
  return child;
67
71
  }
68
- var className = classNameOfTag(child.tag, "classes" in child ? child.classes : [], theme);
72
+ var className = classNameOfTag(child.tag, child.tag === "span" ? child.styles : [], theme);
73
+ if (child.tag === "img") {
74
+ var _child$src$metadata, _child$src$metadata2;
75
+ var _transformed = transform && transform(child, []);
76
+ if (_transformed !== undefined) {
77
+ return _transformed;
78
+ }
79
+ return /*#__PURE__*/React__default["default"].createElement("img", {
80
+ key: key === null || key === void 0 ? void 0 : key.toString(),
81
+ className: className,
82
+ src: child.src.url,
83
+ // alt: child.alt, TODO: add alt to the img html object
84
+ width: (_child$src$metadata = child.src.metadata) === null || _child$src$metadata === void 0 ? void 0 : _child$src$metadata.width,
85
+ height: (_child$src$metadata2 = child.src.metadata) === null || _child$src$metadata2 === void 0 ? void 0 : _child$src$metadata2.height
86
+ });
87
+ }
69
88
  var children = "children" in child ?
70
89
  // Why do this? We get a very weird error in NextJS 14.0.4 if we do not
71
90
  // 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.
72
91
  // https://github.com/vercel/next.js/issues/52415
73
92
  child.children.length === 1 ? build(child.children[0]) : child.children.map(build) : null;
74
93
  if (transform) {
75
- var _transformed = transform(child, children !== null && children !== void 0 ? children : [], className);
76
- if (_transformed !== undefined) {
77
- return _transformed;
94
+ var _transformed2 = transform(child, children !== null && children !== void 0 ? children : [], className);
95
+ if (_transformed2 !== undefined) {
96
+ return _transformed2;
78
97
  }
79
98
  }
80
- var tag = child.tag; // one of: "img" | "a" | "ul" | "ol" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "br" | "p" | "li" | "span"
99
+ var tag = child.tag; // one of: "a" | "ul" | "ol" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "br" | "p" | "li" | "span"
81
100
  return /*#__PURE__*/React__default["default"].createElement(tag, {
82
101
  key: key === null || key === void 0 ? void 0 : key.toString(),
83
102
  className: className,
84
103
  children: children,
85
- href: tag === "a" ? child.href : undefined,
86
- src: tag === "img" ? child.src && "/api/val/files/public".concat(child.src) : undefined,
87
- alt: tag === "img" ? child.alt : undefined,
88
- width: tag === "img" ? child.width : undefined,
89
- height: tag === "img" ? child.height : undefined
104
+ href: child.tag === "a" ? child.href : undefined
90
105
  });
91
106
  }
92
107
  return /*#__PURE__*/ReactJSXRuntime.jsx("div", {
93
108
  className: className,
94
109
  style: style,
95
110
  "data-val-path": root.valPath,
96
- children: root.children.map(build)
111
+ children: root.map(build)
97
112
  });
98
113
  }
99
- function classNameOfTag(tag, clazz, theme) {
114
+ function classNameOfTag(tag, style, theme) {
100
115
  var thisTagClassName = null;
101
116
  if (theme && tag in theme) {
102
- var _theme$tag;
103
- thisTagClassName = (_theme$tag = theme[tag]) !== null && _theme$tag !== void 0 ? _theme$tag : null;
117
+ var _tag;
118
+ thisTagClassName = (_tag = theme[tag]) !== null && _tag !== void 0 ? _tag : null;
104
119
  }
105
- return [].concat(toConsumableArray._toConsumableArray(thisTagClassName ? [thisTagClassName] : []), toConsumableArray._toConsumableArray(clazz.map(function (style) {
120
+ return [].concat(toConsumableArray._toConsumableArray(thisTagClassName ? [thisTagClassName] : []), toConsumableArray._toConsumableArray(style.map(function (style) {
106
121
  if (theme &&
107
122
  // not need on type-level, but defensive on runtime:
108
123
  typeof style === "string") {
@@ -115,7 +130,7 @@ function classNameOfTag(tag, clazz, theme) {
115
130
  return theme[style];
116
131
  }
117
132
  }
118
- return clazz;
133
+ return style;
119
134
  }))).join(" ");
120
135
  }
121
136
 
@@ -12,7 +12,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
12
12
  var React__default = /*#__PURE__*/_interopDefault(React);
13
13
 
14
14
  /**
15
- * Render RichText as HTML
15
+ * Render RichText using JSX
16
16
  *
17
17
  * @example
18
18
  * const content = useVal(contentVal);
@@ -35,8 +35,12 @@ var React__default = /*#__PURE__*/_interopDefault(React);
35
35
  * return (
36
36
  * <ValRichText
37
37
  * theme={{
38
- * h1: 'text-4xl font-bold',
39
- * img: 'rounded',
38
+ * block: {
39
+ * h1: 'text-4xl font-bold',
40
+ * },
41
+ * inline: {
42
+ * img: 'rounded',
43
+ * }
40
44
  * }}
41
45
  * transform={(node, className) => {
42
46
  * if (node.tag === 'img') {
@@ -65,44 +69,55 @@ function ValRichText(_ref) {
65
69
  }
66
70
  return child;
67
71
  }
68
- var className = classNameOfTag(child.tag, "classes" in child ? child.classes : [], theme);
72
+ var className = classNameOfTag(child.tag, child.tag === "span" ? child.styles : [], theme);
73
+ if (child.tag === "img") {
74
+ var _child$src$metadata, _child$src$metadata2;
75
+ var _transformed = transform && transform(child, []);
76
+ if (_transformed !== undefined) {
77
+ return _transformed;
78
+ }
79
+ return /*#__PURE__*/React__default["default"].createElement("img", {
80
+ key: key === null || key === void 0 ? void 0 : key.toString(),
81
+ className: className,
82
+ src: child.src.url,
83
+ // alt: child.alt, TODO: add alt to the img html object
84
+ width: (_child$src$metadata = child.src.metadata) === null || _child$src$metadata === void 0 ? void 0 : _child$src$metadata.width,
85
+ height: (_child$src$metadata2 = child.src.metadata) === null || _child$src$metadata2 === void 0 ? void 0 : _child$src$metadata2.height
86
+ });
87
+ }
69
88
  var children = "children" in child ?
70
89
  // Why do this? We get a very weird error in NextJS 14.0.4 if we do not
71
90
  // 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.
72
91
  // https://github.com/vercel/next.js/issues/52415
73
92
  child.children.length === 1 ? build(child.children[0]) : child.children.map(build) : null;
74
93
  if (transform) {
75
- var _transformed = transform(child, children !== null && children !== void 0 ? children : [], className);
76
- if (_transformed !== undefined) {
77
- return _transformed;
94
+ var _transformed2 = transform(child, children !== null && children !== void 0 ? children : [], className);
95
+ if (_transformed2 !== undefined) {
96
+ return _transformed2;
78
97
  }
79
98
  }
80
- var tag = child.tag; // one of: "img" | "a" | "ul" | "ol" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "br" | "p" | "li" | "span"
99
+ var tag = child.tag; // one of: "a" | "ul" | "ol" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "br" | "p" | "li" | "span"
81
100
  return /*#__PURE__*/React__default["default"].createElement(tag, {
82
101
  key: key === null || key === void 0 ? void 0 : key.toString(),
83
102
  className: className,
84
103
  children: children,
85
- href: tag === "a" ? child.href : undefined,
86
- src: tag === "img" ? child.src && "/api/val/files/public".concat(child.src) : undefined,
87
- alt: tag === "img" ? child.alt : undefined,
88
- width: tag === "img" ? child.width : undefined,
89
- height: tag === "img" ? child.height : undefined
104
+ href: child.tag === "a" ? child.href : undefined
90
105
  });
91
106
  }
92
107
  return /*#__PURE__*/ReactJSXRuntime.jsx("div", {
93
108
  className: className,
94
109
  style: style,
95
110
  "data-val-path": root.valPath,
96
- children: root.children.map(build)
111
+ children: root.map(build)
97
112
  });
98
113
  }
99
- function classNameOfTag(tag, clazz, theme) {
114
+ function classNameOfTag(tag, style, theme) {
100
115
  var thisTagClassName = null;
101
116
  if (theme && tag in theme) {
102
- var _theme$tag;
103
- thisTagClassName = (_theme$tag = theme[tag]) !== null && _theme$tag !== void 0 ? _theme$tag : null;
117
+ var _tag;
118
+ thisTagClassName = (_tag = theme[tag]) !== null && _tag !== void 0 ? _tag : null;
104
119
  }
105
- return [].concat(toConsumableArray._toConsumableArray(thisTagClassName ? [thisTagClassName] : []), toConsumableArray._toConsumableArray(clazz.map(function (style) {
120
+ return [].concat(toConsumableArray._toConsumableArray(thisTagClassName ? [thisTagClassName] : []), toConsumableArray._toConsumableArray(style.map(function (style) {
106
121
  if (theme &&
107
122
  // not need on type-level, but defensive on runtime:
108
123
  typeof style === "string") {
@@ -115,7 +130,7 @@ function classNameOfTag(tag, clazz, theme) {
115
130
  return theme[style];
116
131
  }
117
132
  }
118
- return clazz;
133
+ return style;
119
134
  }))).join(" ");
120
135
  }
121
136
 
@@ -4,7 +4,7 @@ import { jsx } from 'react/jsx-runtime';
4
4
  import '../../dist/unsupportedIterableToArray-7c30dadf.esm.js';
5
5
 
6
6
  /**
7
- * Render RichText as HTML
7
+ * Render RichText using JSX
8
8
  *
9
9
  * @example
10
10
  * const content = useVal(contentVal);
@@ -27,8 +27,12 @@ import '../../dist/unsupportedIterableToArray-7c30dadf.esm.js';
27
27
  * return (
28
28
  * <ValRichText
29
29
  * theme={{
30
- * h1: 'text-4xl font-bold',
31
- * img: 'rounded',
30
+ * block: {
31
+ * h1: 'text-4xl font-bold',
32
+ * },
33
+ * inline: {
34
+ * img: 'rounded',
35
+ * }
32
36
  * }}
33
37
  * transform={(node, className) => {
34
38
  * if (node.tag === 'img') {
@@ -57,44 +61,55 @@ function ValRichText(_ref) {
57
61
  }
58
62
  return child;
59
63
  }
60
- var className = classNameOfTag(child.tag, "classes" in child ? child.classes : [], theme);
64
+ var className = classNameOfTag(child.tag, child.tag === "span" ? child.styles : [], theme);
65
+ if (child.tag === "img") {
66
+ var _child$src$metadata, _child$src$metadata2;
67
+ var _transformed = transform && transform(child, []);
68
+ if (_transformed !== undefined) {
69
+ return _transformed;
70
+ }
71
+ return /*#__PURE__*/React.createElement("img", {
72
+ key: key === null || key === void 0 ? void 0 : key.toString(),
73
+ className: className,
74
+ src: child.src.url,
75
+ // alt: child.alt, TODO: add alt to the img html object
76
+ width: (_child$src$metadata = child.src.metadata) === null || _child$src$metadata === void 0 ? void 0 : _child$src$metadata.width,
77
+ height: (_child$src$metadata2 = child.src.metadata) === null || _child$src$metadata2 === void 0 ? void 0 : _child$src$metadata2.height
78
+ });
79
+ }
61
80
  var children = "children" in child ?
62
81
  // Why do this? We get a very weird error in NextJS 14.0.4 if we do not
63
82
  // 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.
64
83
  // https://github.com/vercel/next.js/issues/52415
65
84
  child.children.length === 1 ? build(child.children[0]) : child.children.map(build) : null;
66
85
  if (transform) {
67
- var _transformed = transform(child, children !== null && children !== void 0 ? children : [], className);
68
- if (_transformed !== undefined) {
69
- return _transformed;
86
+ var _transformed2 = transform(child, children !== null && children !== void 0 ? children : [], className);
87
+ if (_transformed2 !== undefined) {
88
+ return _transformed2;
70
89
  }
71
90
  }
72
- var tag = child.tag; // one of: "img" | "a" | "ul" | "ol" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "br" | "p" | "li" | "span"
91
+ var tag = child.tag; // one of: "a" | "ul" | "ol" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "br" | "p" | "li" | "span"
73
92
  return /*#__PURE__*/React.createElement(tag, {
74
93
  key: key === null || key === void 0 ? void 0 : key.toString(),
75
94
  className: className,
76
95
  children: children,
77
- href: tag === "a" ? child.href : undefined,
78
- src: tag === "img" ? child.src && "/api/val/files/public".concat(child.src) : undefined,
79
- alt: tag === "img" ? child.alt : undefined,
80
- width: tag === "img" ? child.width : undefined,
81
- height: tag === "img" ? child.height : undefined
96
+ href: child.tag === "a" ? child.href : undefined
82
97
  });
83
98
  }
84
99
  return /*#__PURE__*/jsx("div", {
85
100
  className: className,
86
101
  style: style,
87
102
  "data-val-path": root.valPath,
88
- children: root.children.map(build)
103
+ children: root.map(build)
89
104
  });
90
105
  }
91
- function classNameOfTag(tag, clazz, theme) {
106
+ function classNameOfTag(tag, style, theme) {
92
107
  var thisTagClassName = null;
93
108
  if (theme && tag in theme) {
94
- var _theme$tag;
95
- thisTagClassName = (_theme$tag = theme[tag]) !== null && _theme$tag !== void 0 ? _theme$tag : null;
109
+ var _tag;
110
+ thisTagClassName = (_tag = theme[tag]) !== null && _tag !== void 0 ? _tag : null;
96
111
  }
97
- return [].concat(_toConsumableArray(thisTagClassName ? [thisTagClassName] : []), _toConsumableArray(clazz.map(function (style) {
112
+ return [].concat(_toConsumableArray(thisTagClassName ? [thisTagClassName] : []), _toConsumableArray(style.map(function (style) {
98
113
  if (theme &&
99
114
  // not need on type-level, but defensive on runtime:
100
115
  typeof style === "string") {
@@ -107,7 +122,7 @@ function classNameOfTag(tag, clazz, theme) {
107
122
  return theme[style];
108
123
  }
109
124
  }
110
- return clazz;
125
+ return style;
111
126
  }))).join(" ");
112
127
  }
113
128
 
@@ -4,7 +4,7 @@ import { jsx } from 'react/jsx-runtime';
4
4
  import '../../dist/unsupportedIterableToArray-50359a05.worker.esm.js';
5
5
 
6
6
  /**
7
- * Render RichText as HTML
7
+ * Render RichText using JSX
8
8
  *
9
9
  * @example
10
10
  * const content = useVal(contentVal);
@@ -27,8 +27,12 @@ import '../../dist/unsupportedIterableToArray-50359a05.worker.esm.js';
27
27
  * return (
28
28
  * <ValRichText
29
29
  * theme={{
30
- * h1: 'text-4xl font-bold',
31
- * img: 'rounded',
30
+ * block: {
31
+ * h1: 'text-4xl font-bold',
32
+ * },
33
+ * inline: {
34
+ * img: 'rounded',
35
+ * }
32
36
  * }}
33
37
  * transform={(node, className) => {
34
38
  * if (node.tag === 'img') {
@@ -57,44 +61,55 @@ function ValRichText(_ref) {
57
61
  }
58
62
  return child;
59
63
  }
60
- var className = classNameOfTag(child.tag, "classes" in child ? child.classes : [], theme);
64
+ var className = classNameOfTag(child.tag, child.tag === "span" ? child.styles : [], theme);
65
+ if (child.tag === "img") {
66
+ var _child$src$metadata, _child$src$metadata2;
67
+ var _transformed = transform && transform(child, []);
68
+ if (_transformed !== undefined) {
69
+ return _transformed;
70
+ }
71
+ return /*#__PURE__*/React.createElement("img", {
72
+ key: key === null || key === void 0 ? void 0 : key.toString(),
73
+ className: className,
74
+ src: child.src.url,
75
+ // alt: child.alt, TODO: add alt to the img html object
76
+ width: (_child$src$metadata = child.src.metadata) === null || _child$src$metadata === void 0 ? void 0 : _child$src$metadata.width,
77
+ height: (_child$src$metadata2 = child.src.metadata) === null || _child$src$metadata2 === void 0 ? void 0 : _child$src$metadata2.height
78
+ });
79
+ }
61
80
  var children = "children" in child ?
62
81
  // Why do this? We get a very weird error in NextJS 14.0.4 if we do not
63
82
  // 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.
64
83
  // https://github.com/vercel/next.js/issues/52415
65
84
  child.children.length === 1 ? build(child.children[0]) : child.children.map(build) : null;
66
85
  if (transform) {
67
- var _transformed = transform(child, children !== null && children !== void 0 ? children : [], className);
68
- if (_transformed !== undefined) {
69
- return _transformed;
86
+ var _transformed2 = transform(child, children !== null && children !== void 0 ? children : [], className);
87
+ if (_transformed2 !== undefined) {
88
+ return _transformed2;
70
89
  }
71
90
  }
72
- var tag = child.tag; // one of: "img" | "a" | "ul" | "ol" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "br" | "p" | "li" | "span"
91
+ var tag = child.tag; // one of: "a" | "ul" | "ol" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "br" | "p" | "li" | "span"
73
92
  return /*#__PURE__*/React.createElement(tag, {
74
93
  key: key === null || key === void 0 ? void 0 : key.toString(),
75
94
  className: className,
76
95
  children: children,
77
- href: tag === "a" ? child.href : undefined,
78
- src: tag === "img" ? child.src && "/api/val/files/public".concat(child.src) : undefined,
79
- alt: tag === "img" ? child.alt : undefined,
80
- width: tag === "img" ? child.width : undefined,
81
- height: tag === "img" ? child.height : undefined
96
+ href: child.tag === "a" ? child.href : undefined
82
97
  });
83
98
  }
84
99
  return /*#__PURE__*/jsx("div", {
85
100
  className: className,
86
101
  style: style,
87
102
  "data-val-path": root.valPath,
88
- children: root.children.map(build)
103
+ children: root.map(build)
89
104
  });
90
105
  }
91
- function classNameOfTag(tag, clazz, theme) {
106
+ function classNameOfTag(tag, style, theme) {
92
107
  var thisTagClassName = null;
93
108
  if (theme && tag in theme) {
94
- var _theme$tag;
95
- thisTagClassName = (_theme$tag = theme[tag]) !== null && _theme$tag !== void 0 ? _theme$tag : null;
109
+ var _tag;
110
+ thisTagClassName = (_tag = theme[tag]) !== null && _tag !== void 0 ? _tag : null;
96
111
  }
97
- return [].concat(_toConsumableArray(thisTagClassName ? [thisTagClassName] : []), _toConsumableArray(clazz.map(function (style) {
112
+ return [].concat(_toConsumableArray(thisTagClassName ? [thisTagClassName] : []), _toConsumableArray(style.map(function (style) {
98
113
  if (theme &&
99
114
  // not need on type-level, but defensive on runtime:
100
115
  typeof style === "string") {
@@ -107,7 +122,7 @@ function classNameOfTag(tag, clazz, theme) {
107
122
  return theme[style];
108
123
  }
109
124
  }
110
- return clazz;
125
+ return style;
111
126
  }))).join(" ");
112
127
  }
113
128
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@valbuild/react",
3
- "version": "0.62.6",
3
+ "version": "0.63.0",
4
4
  "private": false,
5
5
  "description": "Val - React internal helpers",
6
6
  "sideEffects": false,
@@ -9,9 +9,9 @@
9
9
  "test": "jest"
10
10
  },
11
11
  "dependencies": {
12
- "@valbuild/core": "~0.62.6",
13
- "@valbuild/shared": "~0.62.6",
14
- "@valbuild/ui": "~0.62.6",
12
+ "@valbuild/core": "~0.63.0",
13
+ "@valbuild/shared": "~0.63.0",
14
+ "@valbuild/ui": "~0.63.0",
15
15
  "@vercel/stega": "^0.1.0",
16
16
  "base64-arraybuffer": "^1.0.2"
17
17
  },
@@ -5,7 +5,6 @@ import React from 'react';
5
5
  import { vercelStegaDecode, VERCEL_STEGA_REGEX, vercelStegaSplit, vercelStegaCombine } from '@vercel/stega';
6
6
  import { _ as _toConsumableArray } from '../../dist/toConsumableArray-5a71fbb3.browser.esm.js';
7
7
  import { Internal, VAL_EXTENSION, FILE_REF_PROP } from '@valbuild/core';
8
- import { parseRichTextSource } from '@valbuild/shared/internal';
9
8
  import '../../dist/unsupportedIterableToArray-cce3cb41.browser.esm.js';
10
9
 
11
10
  function stegaDecodeString(encodedString) {
@@ -195,6 +194,10 @@ function _objectSpread2(e) {
195
194
  *
196
195
  */
197
196
 
197
+ /**
198
+ * RichText is accessible by users (after conversion via useVal / fetchVal)
199
+ **/
200
+
198
201
  function stegaEncode(input, opts) {
199
202
  function rec(sourceOrSelector, recOpts) {
200
203
  if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isKeyOfSchema(recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema)) {
@@ -244,6 +247,11 @@ function stegaEncode(input, opts) {
244
247
  });
245
248
  }
246
249
  }
250
+ if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isRichTextSchema(recOpts.schema)) {
251
+ var res = rec(sourceOrSelector);
252
+ res.valPath = recOpts.path;
253
+ return res;
254
+ }
247
255
  if (_typeof(sourceOrSelector) === "object") {
248
256
  if (!sourceOrSelector) {
249
257
  return null;
@@ -257,14 +265,6 @@ function stegaEncode(input, opts) {
257
265
  });
258
266
  }
259
267
  if (VAL_EXTENSION in sourceOrSelector) {
260
- if (sourceOrSelector[VAL_EXTENSION] === "richtext") {
261
- if (recOpts !== null && recOpts !== void 0 && recOpts.path) {
262
- return _objectSpread2(_objectSpread2({}, parseRichTextSource(sourceOrSelector)), {}, {
263
- valPath: recOpts.path
264
- });
265
- }
266
- return parseRichTextSource(sourceOrSelector);
267
- }
268
268
  if (sourceOrSelector[VAL_EXTENSION] === "file" && typeof sourceOrSelector[FILE_REF_PROP] === "string") {
269
269
  var fileSelector = Internal.convertFileSource(sourceOrSelector);
270
270
  var url = fileSelector.url;
@@ -289,18 +289,18 @@ function stegaEncode(input, opts) {
289
289
  });
290
290
  }
291
291
  if (!Array.isArray(sourceOrSelector)) {
292
- var res = {};
292
+ var _res = {};
293
293
  var entries = Object.entries(sourceOrSelector);
294
294
  for (var _i = 0, _entries = entries; _i < _entries.length; _i++) {
295
295
  var _entries$_i = _slicedToArray(_entries[_i], 2),
296
296
  _key2 = _entries$_i[0],
297
297
  value = _entries$_i[1];
298
- res[_key2] = rec(value, (recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema) && {
298
+ _res[_key2] = rec(value, (recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema) && {
299
299
  path: Internal.createValPathOfItem(recOpts.path, _key2),
300
300
  schema: isRecordSchema(recOpts.schema) ? recOpts.schema.item : isObjectSchema(recOpts.schema) ? recOpts.schema.items[_key2] : unknownSchema(recOpts.schema)
301
301
  });
302
302
  }
303
- return res;
303
+ return _res;
304
304
  }
305
305
  console.error("Could not transform source selector: ".concat(_typeof(sourceOrSelector), " (array: ").concat(Array.isArray(sourceOrSelector), ")"), sourceOrSelector);
306
306
  return sourceOrSelector;
@@ -345,6 +345,9 @@ function isUnionSchema(schema) {
345
345
  function isKeyOfSchema(schema) {
346
346
  return (schema === null || schema === void 0 ? void 0 : schema.type) === "keyOf";
347
347
  }
348
+ function isRichTextSchema(schema) {
349
+ return (schema === null || schema === void 0 ? void 0 : schema.type) === "richtext";
350
+ }
348
351
  function isObjectSchema(schema) {
349
352
  return (schema === null || schema === void 0 ? void 0 : schema.type) === "object";
350
353
  }
@@ -9,7 +9,6 @@ var React = require('react');
9
9
  var stega = require('@vercel/stega');
10
10
  var toConsumableArray = require('../../dist/toConsumableArray-b2d28ffa.cjs.dev.js');
11
11
  var core = require('@valbuild/core');
12
- var internal = require('@valbuild/shared/internal');
13
12
  require('../../dist/unsupportedIterableToArray-ac28611a.cjs.dev.js');
14
13
 
15
14
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -205,6 +204,10 @@ function _objectSpread2(e) {
205
204
  *
206
205
  */
207
206
 
207
+ /**
208
+ * RichText is accessible by users (after conversion via useVal / fetchVal)
209
+ **/
210
+
208
211
  function stegaEncode(input, opts) {
209
212
  function rec(sourceOrSelector, recOpts) {
210
213
  if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isKeyOfSchema(recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema)) {
@@ -254,6 +257,11 @@ function stegaEncode(input, opts) {
254
257
  });
255
258
  }
256
259
  }
260
+ if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isRichTextSchema(recOpts.schema)) {
261
+ var res = rec(sourceOrSelector);
262
+ res.valPath = recOpts.path;
263
+ return res;
264
+ }
257
265
  if (slicedToArray._typeof(sourceOrSelector) === "object") {
258
266
  if (!sourceOrSelector) {
259
267
  return null;
@@ -267,14 +275,6 @@ function stegaEncode(input, opts) {
267
275
  });
268
276
  }
269
277
  if (core.VAL_EXTENSION in sourceOrSelector) {
270
- if (sourceOrSelector[core.VAL_EXTENSION] === "richtext") {
271
- if (recOpts !== null && recOpts !== void 0 && recOpts.path) {
272
- return _objectSpread2(_objectSpread2({}, internal.parseRichTextSource(sourceOrSelector)), {}, {
273
- valPath: recOpts.path
274
- });
275
- }
276
- return internal.parseRichTextSource(sourceOrSelector);
277
- }
278
278
  if (sourceOrSelector[core.VAL_EXTENSION] === "file" && typeof sourceOrSelector[core.FILE_REF_PROP] === "string") {
279
279
  var fileSelector = core.Internal.convertFileSource(sourceOrSelector);
280
280
  var url = fileSelector.url;
@@ -299,18 +299,18 @@ function stegaEncode(input, opts) {
299
299
  });
300
300
  }
301
301
  if (!Array.isArray(sourceOrSelector)) {
302
- var res = {};
302
+ var _res = {};
303
303
  var entries = Object.entries(sourceOrSelector);
304
304
  for (var _i = 0, _entries = entries; _i < _entries.length; _i++) {
305
305
  var _entries$_i = slicedToArray._slicedToArray(_entries[_i], 2),
306
306
  _key2 = _entries$_i[0],
307
307
  value = _entries$_i[1];
308
- res[_key2] = rec(value, (recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema) && {
308
+ _res[_key2] = rec(value, (recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema) && {
309
309
  path: core.Internal.createValPathOfItem(recOpts.path, _key2),
310
310
  schema: isRecordSchema(recOpts.schema) ? recOpts.schema.item : isObjectSchema(recOpts.schema) ? recOpts.schema.items[_key2] : unknownSchema(recOpts.schema)
311
311
  });
312
312
  }
313
- return res;
313
+ return _res;
314
314
  }
315
315
  console.error("Could not transform source selector: ".concat(slicedToArray._typeof(sourceOrSelector), " (array: ").concat(Array.isArray(sourceOrSelector), ")"), sourceOrSelector);
316
316
  return sourceOrSelector;
@@ -355,6 +355,9 @@ function isUnionSchema(schema) {
355
355
  function isKeyOfSchema(schema) {
356
356
  return (schema === null || schema === void 0 ? void 0 : schema.type) === "keyOf";
357
357
  }
358
+ function isRichTextSchema(schema) {
359
+ return (schema === null || schema === void 0 ? void 0 : schema.type) === "richtext";
360
+ }
358
361
  function isObjectSchema(schema) {
359
362
  return (schema === null || schema === void 0 ? void 0 : schema.type) === "object";
360
363
  }
@@ -9,7 +9,6 @@ var React = require('react');
9
9
  var stega = require('@vercel/stega');
10
10
  var toConsumableArray = require('../../dist/toConsumableArray-b5e3b83f.cjs.prod.js');
11
11
  var core = require('@valbuild/core');
12
- var internal = require('@valbuild/shared/internal');
13
12
  require('../../dist/unsupportedIterableToArray-42309462.cjs.prod.js');
14
13
 
15
14
  function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -205,6 +204,10 @@ function _objectSpread2(e) {
205
204
  *
206
205
  */
207
206
 
207
+ /**
208
+ * RichText is accessible by users (after conversion via useVal / fetchVal)
209
+ **/
210
+
208
211
  function stegaEncode(input, opts) {
209
212
  function rec(sourceOrSelector, recOpts) {
210
213
  if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isKeyOfSchema(recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema)) {
@@ -254,6 +257,11 @@ function stegaEncode(input, opts) {
254
257
  });
255
258
  }
256
259
  }
260
+ if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isRichTextSchema(recOpts.schema)) {
261
+ var res = rec(sourceOrSelector);
262
+ res.valPath = recOpts.path;
263
+ return res;
264
+ }
257
265
  if (slicedToArray._typeof(sourceOrSelector) === "object") {
258
266
  if (!sourceOrSelector) {
259
267
  return null;
@@ -267,14 +275,6 @@ function stegaEncode(input, opts) {
267
275
  });
268
276
  }
269
277
  if (core.VAL_EXTENSION in sourceOrSelector) {
270
- if (sourceOrSelector[core.VAL_EXTENSION] === "richtext") {
271
- if (recOpts !== null && recOpts !== void 0 && recOpts.path) {
272
- return _objectSpread2(_objectSpread2({}, internal.parseRichTextSource(sourceOrSelector)), {}, {
273
- valPath: recOpts.path
274
- });
275
- }
276
- return internal.parseRichTextSource(sourceOrSelector);
277
- }
278
278
  if (sourceOrSelector[core.VAL_EXTENSION] === "file" && typeof sourceOrSelector[core.FILE_REF_PROP] === "string") {
279
279
  var fileSelector = core.Internal.convertFileSource(sourceOrSelector);
280
280
  var url = fileSelector.url;
@@ -299,18 +299,18 @@ function stegaEncode(input, opts) {
299
299
  });
300
300
  }
301
301
  if (!Array.isArray(sourceOrSelector)) {
302
- var res = {};
302
+ var _res = {};
303
303
  var entries = Object.entries(sourceOrSelector);
304
304
  for (var _i = 0, _entries = entries; _i < _entries.length; _i++) {
305
305
  var _entries$_i = slicedToArray._slicedToArray(_entries[_i], 2),
306
306
  _key2 = _entries$_i[0],
307
307
  value = _entries$_i[1];
308
- res[_key2] = rec(value, (recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema) && {
308
+ _res[_key2] = rec(value, (recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema) && {
309
309
  path: core.Internal.createValPathOfItem(recOpts.path, _key2),
310
310
  schema: isRecordSchema(recOpts.schema) ? recOpts.schema.item : isObjectSchema(recOpts.schema) ? recOpts.schema.items[_key2] : unknownSchema(recOpts.schema)
311
311
  });
312
312
  }
313
- return res;
313
+ return _res;
314
314
  }
315
315
  console.error("Could not transform source selector: ".concat(slicedToArray._typeof(sourceOrSelector), " (array: ").concat(Array.isArray(sourceOrSelector), ")"), sourceOrSelector);
316
316
  return sourceOrSelector;
@@ -355,6 +355,9 @@ function isUnionSchema(schema) {
355
355
  function isKeyOfSchema(schema) {
356
356
  return (schema === null || schema === void 0 ? void 0 : schema.type) === "keyOf";
357
357
  }
358
+ function isRichTextSchema(schema) {
359
+ return (schema === null || schema === void 0 ? void 0 : schema.type) === "richtext";
360
+ }
358
361
  function isObjectSchema(schema) {
359
362
  return (schema === null || schema === void 0 ? void 0 : schema.type) === "object";
360
363
  }
@@ -5,7 +5,6 @@ import React from 'react';
5
5
  import { vercelStegaDecode, VERCEL_STEGA_REGEX, vercelStegaSplit, vercelStegaCombine } from '@vercel/stega';
6
6
  import { _ as _toConsumableArray } from '../../dist/toConsumableArray-0ccd58b7.esm.js';
7
7
  import { Internal, VAL_EXTENSION, FILE_REF_PROP } from '@valbuild/core';
8
- import { parseRichTextSource } from '@valbuild/shared/internal';
9
8
  import '../../dist/unsupportedIterableToArray-7c30dadf.esm.js';
10
9
 
11
10
  function stegaDecodeString(encodedString) {
@@ -195,6 +194,10 @@ function _objectSpread2(e) {
195
194
  *
196
195
  */
197
196
 
197
+ /**
198
+ * RichText is accessible by users (after conversion via useVal / fetchVal)
199
+ **/
200
+
198
201
  function stegaEncode(input, opts) {
199
202
  function rec(sourceOrSelector, recOpts) {
200
203
  if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isKeyOfSchema(recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema)) {
@@ -244,6 +247,11 @@ function stegaEncode(input, opts) {
244
247
  });
245
248
  }
246
249
  }
250
+ if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isRichTextSchema(recOpts.schema)) {
251
+ var res = rec(sourceOrSelector);
252
+ res.valPath = recOpts.path;
253
+ return res;
254
+ }
247
255
  if (_typeof(sourceOrSelector) === "object") {
248
256
  if (!sourceOrSelector) {
249
257
  return null;
@@ -257,14 +265,6 @@ function stegaEncode(input, opts) {
257
265
  });
258
266
  }
259
267
  if (VAL_EXTENSION in sourceOrSelector) {
260
- if (sourceOrSelector[VAL_EXTENSION] === "richtext") {
261
- if (recOpts !== null && recOpts !== void 0 && recOpts.path) {
262
- return _objectSpread2(_objectSpread2({}, parseRichTextSource(sourceOrSelector)), {}, {
263
- valPath: recOpts.path
264
- });
265
- }
266
- return parseRichTextSource(sourceOrSelector);
267
- }
268
268
  if (sourceOrSelector[VAL_EXTENSION] === "file" && typeof sourceOrSelector[FILE_REF_PROP] === "string") {
269
269
  var fileSelector = Internal.convertFileSource(sourceOrSelector);
270
270
  var url = fileSelector.url;
@@ -289,18 +289,18 @@ function stegaEncode(input, opts) {
289
289
  });
290
290
  }
291
291
  if (!Array.isArray(sourceOrSelector)) {
292
- var res = {};
292
+ var _res = {};
293
293
  var entries = Object.entries(sourceOrSelector);
294
294
  for (var _i = 0, _entries = entries; _i < _entries.length; _i++) {
295
295
  var _entries$_i = _slicedToArray(_entries[_i], 2),
296
296
  _key2 = _entries$_i[0],
297
297
  value = _entries$_i[1];
298
- res[_key2] = rec(value, (recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema) && {
298
+ _res[_key2] = rec(value, (recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema) && {
299
299
  path: Internal.createValPathOfItem(recOpts.path, _key2),
300
300
  schema: isRecordSchema(recOpts.schema) ? recOpts.schema.item : isObjectSchema(recOpts.schema) ? recOpts.schema.items[_key2] : unknownSchema(recOpts.schema)
301
301
  });
302
302
  }
303
- return res;
303
+ return _res;
304
304
  }
305
305
  console.error("Could not transform source selector: ".concat(_typeof(sourceOrSelector), " (array: ").concat(Array.isArray(sourceOrSelector), ")"), sourceOrSelector);
306
306
  return sourceOrSelector;
@@ -345,6 +345,9 @@ function isUnionSchema(schema) {
345
345
  function isKeyOfSchema(schema) {
346
346
  return (schema === null || schema === void 0 ? void 0 : schema.type) === "keyOf";
347
347
  }
348
+ function isRichTextSchema(schema) {
349
+ return (schema === null || schema === void 0 ? void 0 : schema.type) === "richtext";
350
+ }
348
351
  function isObjectSchema(schema) {
349
352
  return (schema === null || schema === void 0 ? void 0 : schema.type) === "object";
350
353
  }
@@ -5,7 +5,6 @@ import React from 'react';
5
5
  import { vercelStegaDecode, VERCEL_STEGA_REGEX, vercelStegaSplit, vercelStegaCombine } from '@vercel/stega';
6
6
  import { _ as _toConsumableArray } from '../../dist/toConsumableArray-0a75a603.worker.esm.js';
7
7
  import { Internal, VAL_EXTENSION, FILE_REF_PROP } from '@valbuild/core';
8
- import { parseRichTextSource } from '@valbuild/shared/internal';
9
8
  import '../../dist/unsupportedIterableToArray-50359a05.worker.esm.js';
10
9
 
11
10
  function stegaDecodeString(encodedString) {
@@ -195,6 +194,10 @@ function _objectSpread2(e) {
195
194
  *
196
195
  */
197
196
 
197
+ /**
198
+ * RichText is accessible by users (after conversion via useVal / fetchVal)
199
+ **/
200
+
198
201
  function stegaEncode(input, opts) {
199
202
  function rec(sourceOrSelector, recOpts) {
200
203
  if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isKeyOfSchema(recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema)) {
@@ -244,6 +247,11 @@ function stegaEncode(input, opts) {
244
247
  });
245
248
  }
246
249
  }
250
+ if (recOpts !== null && recOpts !== void 0 && recOpts.schema && isRichTextSchema(recOpts.schema)) {
251
+ var res = rec(sourceOrSelector);
252
+ res.valPath = recOpts.path;
253
+ return res;
254
+ }
247
255
  if (_typeof(sourceOrSelector) === "object") {
248
256
  if (!sourceOrSelector) {
249
257
  return null;
@@ -257,14 +265,6 @@ function stegaEncode(input, opts) {
257
265
  });
258
266
  }
259
267
  if (VAL_EXTENSION in sourceOrSelector) {
260
- if (sourceOrSelector[VAL_EXTENSION] === "richtext") {
261
- if (recOpts !== null && recOpts !== void 0 && recOpts.path) {
262
- return _objectSpread2(_objectSpread2({}, parseRichTextSource(sourceOrSelector)), {}, {
263
- valPath: recOpts.path
264
- });
265
- }
266
- return parseRichTextSource(sourceOrSelector);
267
- }
268
268
  if (sourceOrSelector[VAL_EXTENSION] === "file" && typeof sourceOrSelector[FILE_REF_PROP] === "string") {
269
269
  var fileSelector = Internal.convertFileSource(sourceOrSelector);
270
270
  var url = fileSelector.url;
@@ -289,18 +289,18 @@ function stegaEncode(input, opts) {
289
289
  });
290
290
  }
291
291
  if (!Array.isArray(sourceOrSelector)) {
292
- var res = {};
292
+ var _res = {};
293
293
  var entries = Object.entries(sourceOrSelector);
294
294
  for (var _i = 0, _entries = entries; _i < _entries.length; _i++) {
295
295
  var _entries$_i = _slicedToArray(_entries[_i], 2),
296
296
  _key2 = _entries$_i[0],
297
297
  value = _entries$_i[1];
298
- res[_key2] = rec(value, (recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema) && {
298
+ _res[_key2] = rec(value, (recOpts === null || recOpts === void 0 ? void 0 : recOpts.schema) && {
299
299
  path: Internal.createValPathOfItem(recOpts.path, _key2),
300
300
  schema: isRecordSchema(recOpts.schema) ? recOpts.schema.item : isObjectSchema(recOpts.schema) ? recOpts.schema.items[_key2] : unknownSchema(recOpts.schema)
301
301
  });
302
302
  }
303
- return res;
303
+ return _res;
304
304
  }
305
305
  console.error("Could not transform source selector: ".concat(_typeof(sourceOrSelector), " (array: ").concat(Array.isArray(sourceOrSelector), ")"), sourceOrSelector);
306
306
  return sourceOrSelector;
@@ -345,6 +345,9 @@ function isUnionSchema(schema) {
345
345
  function isKeyOfSchema(schema) {
346
346
  return (schema === null || schema === void 0 ? void 0 : schema.type) === "keyOf";
347
347
  }
348
+ function isRichTextSchema(schema) {
349
+ return (schema === null || schema === void 0 ? void 0 : schema.type) === "richtext";
350
+ }
348
351
  function isObjectSchema(schema) {
349
352
  return (schema === null || schema === void 0 ? void 0 : schema.type) === "object";
350
353
  }