tinacms 1.5.12 → 1.5.14
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.
- package/dist/client.es.js +12 -4
- package/dist/client.js +9 -9
- package/dist/dev-tools.es.js +211 -245
- package/dist/dev-tools.js +221 -262
- package/dist/edit-state.es.js +37 -23
- package/dist/edit-state.js +39 -39
- package/dist/index.es.js +1960 -1538
- package/dist/index.js +1989 -1614
- package/dist/internalClient/index.d.ts +1 -0
- package/dist/react.es.js +32 -8
- package/dist/react.js +35 -21
- package/dist/rich-text/index.es.js +43 -104
- package/dist/rich-text/index.js +50 -117
- package/dist/rich-text/prism.d.ts +2 -0
- package/dist/rich-text/prism.es.js +13 -69
- package/dist/rich-text/prism.js +11 -74
- package/dist/utils/index.d.ts +2 -2
- package/package.json +8 -7
package/dist/dev-tools.js
CHANGED
|
@@ -2,10 +2,6 @@
|
|
|
2
2
|
typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react")) : typeof define === "function" && define.amd ? define(["exports", "react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP));
|
|
3
3
|
})(this, function(exports2, React) {
|
|
4
4
|
"use strict";
|
|
5
|
-
function _interopDefaultLegacy(e) {
|
|
6
|
-
return e && typeof e === "object" && "default" in e ? e : { "default": e };
|
|
7
|
-
}
|
|
8
|
-
var React__default = /* @__PURE__ */ _interopDefaultLegacy(React);
|
|
9
5
|
const TinaMarkdown = ({
|
|
10
6
|
content,
|
|
11
7
|
components = {}
|
|
@@ -17,12 +13,8 @@
|
|
|
17
13
|
if (!nodes) {
|
|
18
14
|
return null;
|
|
19
15
|
}
|
|
20
|
-
return /* @__PURE__ */
|
|
21
|
-
return /* @__PURE__ */
|
|
22
|
-
components,
|
|
23
|
-
key: index,
|
|
24
|
-
child
|
|
25
|
-
});
|
|
16
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, nodes.map((child, index) => {
|
|
17
|
+
return /* @__PURE__ */ React.createElement(MemoNode, { components, key: index, child });
|
|
26
18
|
}));
|
|
27
19
|
};
|
|
28
20
|
const Leaf = (props) => {
|
|
@@ -30,72 +22,53 @@
|
|
|
30
22
|
const { bold, ...rest } = props;
|
|
31
23
|
if (props.components.bold) {
|
|
32
24
|
const Component = props.components.bold;
|
|
33
|
-
return /* @__PURE__ */
|
|
34
|
-
...rest
|
|
35
|
-
}));
|
|
25
|
+
return /* @__PURE__ */ React.createElement(Component, null, /* @__PURE__ */ React.createElement(Leaf, { ...rest }));
|
|
36
26
|
}
|
|
37
|
-
return /* @__PURE__ */
|
|
38
|
-
...rest
|
|
39
|
-
}));
|
|
27
|
+
return /* @__PURE__ */ React.createElement("strong", null, /* @__PURE__ */ React.createElement(Leaf, { ...rest }));
|
|
40
28
|
}
|
|
41
29
|
if (props.italic) {
|
|
42
30
|
const { italic, ...rest } = props;
|
|
43
31
|
if (props.components.italic) {
|
|
44
32
|
const Component = props.components.italic;
|
|
45
|
-
return /* @__PURE__ */
|
|
46
|
-
...rest
|
|
47
|
-
}));
|
|
33
|
+
return /* @__PURE__ */ React.createElement(Component, null, /* @__PURE__ */ React.createElement(Leaf, { ...rest }));
|
|
48
34
|
}
|
|
49
|
-
return /* @__PURE__ */
|
|
50
|
-
...rest
|
|
51
|
-
}));
|
|
35
|
+
return /* @__PURE__ */ React.createElement("em", null, /* @__PURE__ */ React.createElement(Leaf, { ...rest }));
|
|
52
36
|
}
|
|
53
37
|
if (props.underline) {
|
|
54
38
|
const { underline, ...rest } = props;
|
|
55
39
|
if (props.components.underline) {
|
|
56
40
|
const Component = props.components.underline;
|
|
57
|
-
return /* @__PURE__ */
|
|
58
|
-
...rest
|
|
59
|
-
}));
|
|
41
|
+
return /* @__PURE__ */ React.createElement(Component, null, /* @__PURE__ */ React.createElement(Leaf, { ...rest }));
|
|
60
42
|
}
|
|
61
|
-
return /* @__PURE__ */
|
|
62
|
-
...rest
|
|
63
|
-
}));
|
|
43
|
+
return /* @__PURE__ */ React.createElement("u", null, /* @__PURE__ */ React.createElement(Leaf, { ...rest }));
|
|
64
44
|
}
|
|
65
45
|
if (props.strikethrough) {
|
|
66
46
|
const { strikethrough, ...rest } = props;
|
|
67
47
|
if (props.components.strikethrough) {
|
|
68
48
|
const Component = props.components.strikethrough;
|
|
69
|
-
return /* @__PURE__ */
|
|
70
|
-
...rest
|
|
71
|
-
}));
|
|
49
|
+
return /* @__PURE__ */ React.createElement(Component, null, /* @__PURE__ */ React.createElement(Leaf, { ...rest }));
|
|
72
50
|
}
|
|
73
|
-
return /* @__PURE__ */
|
|
74
|
-
...rest
|
|
75
|
-
}));
|
|
51
|
+
return /* @__PURE__ */ React.createElement("s", null, /* @__PURE__ */ React.createElement(Leaf, { ...rest }));
|
|
76
52
|
}
|
|
77
53
|
if (props.code) {
|
|
78
54
|
const { code, ...rest } = props;
|
|
79
55
|
if (props.components.code) {
|
|
80
56
|
const Component = props.components.code;
|
|
81
|
-
return /* @__PURE__ */
|
|
82
|
-
...rest
|
|
83
|
-
}));
|
|
57
|
+
return /* @__PURE__ */ React.createElement(Component, null, /* @__PURE__ */ React.createElement(Leaf, { ...rest }));
|
|
84
58
|
}
|
|
85
|
-
return /* @__PURE__ */
|
|
86
|
-
...rest
|
|
87
|
-
}));
|
|
59
|
+
return /* @__PURE__ */ React.createElement("code", null, /* @__PURE__ */ React.createElement(Leaf, { ...rest }));
|
|
88
60
|
}
|
|
89
61
|
if (props.components.text) {
|
|
90
62
|
const Component = props.components.text;
|
|
91
|
-
return /* @__PURE__ */
|
|
63
|
+
return /* @__PURE__ */ React.createElement(Component, null, props.text);
|
|
92
64
|
}
|
|
93
|
-
return /* @__PURE__ */
|
|
65
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, props.text);
|
|
94
66
|
};
|
|
95
67
|
const MemoNode = (props) => {
|
|
96
|
-
const MNode =
|
|
97
|
-
...props
|
|
98
|
-
|
|
68
|
+
const MNode = React.useMemo(
|
|
69
|
+
() => /* @__PURE__ */ React.createElement(Node, { ...props }),
|
|
70
|
+
[JSON.stringify(props)]
|
|
71
|
+
);
|
|
99
72
|
return MNode;
|
|
100
73
|
};
|
|
101
74
|
const Node = ({ components, child }) => {
|
|
@@ -114,106 +87,71 @@
|
|
|
114
87
|
case "li":
|
|
115
88
|
if (components[child.type]) {
|
|
116
89
|
const Component2 = components[child.type];
|
|
117
|
-
return /* @__PURE__ */
|
|
118
|
-
...props
|
|
119
|
-
}, /* @__PURE__ */ React__default["default"].createElement(TinaMarkdown, {
|
|
120
|
-
components,
|
|
121
|
-
content: children
|
|
122
|
-
}));
|
|
90
|
+
return /* @__PURE__ */ React.createElement(Component2, { ...props }, /* @__PURE__ */ React.createElement(TinaMarkdown, { components, content: children }));
|
|
123
91
|
}
|
|
124
|
-
return
|
|
125
|
-
children: /* @__PURE__ */
|
|
126
|
-
components,
|
|
127
|
-
content: children
|
|
128
|
-
})
|
|
92
|
+
return React.createElement(child.type, {
|
|
93
|
+
children: /* @__PURE__ */ React.createElement(TinaMarkdown, { components, content: children })
|
|
129
94
|
});
|
|
130
95
|
case "lic":
|
|
131
96
|
if (components.lic) {
|
|
132
97
|
const Component2 = components.lic;
|
|
133
|
-
return /* @__PURE__ */
|
|
134
|
-
...props
|
|
135
|
-
}, /* @__PURE__ */ React__default["default"].createElement(TinaMarkdown, {
|
|
136
|
-
components,
|
|
137
|
-
content: children
|
|
138
|
-
}));
|
|
98
|
+
return /* @__PURE__ */ React.createElement(Component2, { ...props }, /* @__PURE__ */ React.createElement(TinaMarkdown, { components, content: children }));
|
|
139
99
|
}
|
|
140
|
-
return /* @__PURE__ */
|
|
141
|
-
components,
|
|
142
|
-
content: child.children
|
|
143
|
-
}));
|
|
100
|
+
return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(TinaMarkdown, { components, content: child.children }));
|
|
144
101
|
case "img":
|
|
145
102
|
if (components[child.type]) {
|
|
146
103
|
const Component2 = components[child.type];
|
|
147
|
-
return /* @__PURE__ */
|
|
148
|
-
...props
|
|
149
|
-
});
|
|
104
|
+
return /* @__PURE__ */ React.createElement(Component2, { ...props });
|
|
150
105
|
}
|
|
151
|
-
return /* @__PURE__ */
|
|
152
|
-
src: child.url,
|
|
153
|
-
alt: child.caption
|
|
154
|
-
});
|
|
106
|
+
return /* @__PURE__ */ React.createElement("img", { src: child.url, alt: child.caption });
|
|
155
107
|
case "a":
|
|
156
108
|
if (components[child.type]) {
|
|
157
109
|
const Component2 = components[child.type];
|
|
158
|
-
return
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
content: children
|
|
163
|
-
}));
|
|
110
|
+
return (
|
|
111
|
+
// @ts-ignore FIXME: TinaMarkdownContent needs to be a union of all possible node types
|
|
112
|
+
/* @__PURE__ */ React.createElement(Component2, { ...props }, /* @__PURE__ */ React.createElement(TinaMarkdown, { components, content: children }))
|
|
113
|
+
);
|
|
164
114
|
}
|
|
165
|
-
return
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
content: children
|
|
170
|
-
}));
|
|
115
|
+
return (
|
|
116
|
+
// @ts-ignore FIXME: TinaMarkdownContent needs to be a union of all possible node types
|
|
117
|
+
/* @__PURE__ */ React.createElement("a", { href: child.url }, /* @__PURE__ */ React.createElement(TinaMarkdown, { components, content: children }))
|
|
118
|
+
);
|
|
171
119
|
case "code_block":
|
|
172
120
|
const value = child.value;
|
|
173
121
|
if (components[child.type]) {
|
|
174
122
|
const Component2 = components[child.type];
|
|
175
|
-
return
|
|
176
|
-
|
|
177
|
-
|
|
123
|
+
return (
|
|
124
|
+
// @ts-ignore FIXME: TinaMarkdownContent needs to be a union of all possible node types
|
|
125
|
+
/* @__PURE__ */ React.createElement(Component2, { ...props })
|
|
126
|
+
);
|
|
178
127
|
}
|
|
179
|
-
return /* @__PURE__ */
|
|
128
|
+
return /* @__PURE__ */ React.createElement("pre", null, /* @__PURE__ */ React.createElement("code", null, value));
|
|
180
129
|
case "hr":
|
|
181
130
|
if (components[child.type]) {
|
|
182
131
|
const Component2 = components[child.type];
|
|
183
|
-
return /* @__PURE__ */
|
|
184
|
-
...props
|
|
185
|
-
});
|
|
132
|
+
return /* @__PURE__ */ React.createElement(Component2, { ...props });
|
|
186
133
|
}
|
|
187
|
-
return /* @__PURE__ */
|
|
134
|
+
return /* @__PURE__ */ React.createElement("hr", null);
|
|
188
135
|
case "break":
|
|
189
136
|
if (components[child.type]) {
|
|
190
137
|
const Component2 = components[child.type];
|
|
191
|
-
return /* @__PURE__ */
|
|
192
|
-
...props
|
|
193
|
-
});
|
|
138
|
+
return /* @__PURE__ */ React.createElement(Component2, { ...props });
|
|
194
139
|
}
|
|
195
|
-
return /* @__PURE__ */
|
|
140
|
+
return /* @__PURE__ */ React.createElement("br", null);
|
|
196
141
|
case "text":
|
|
197
|
-
return /* @__PURE__ */
|
|
198
|
-
components,
|
|
199
|
-
...child
|
|
200
|
-
});
|
|
142
|
+
return /* @__PURE__ */ React.createElement(Leaf, { components, ...child });
|
|
201
143
|
case "mdxJsxTextElement":
|
|
202
144
|
case "mdxJsxFlowElement":
|
|
203
145
|
const Component = components[child.name];
|
|
204
146
|
if (Component) {
|
|
205
147
|
const props2 = child.props ? child.props : {};
|
|
206
|
-
return /* @__PURE__ */
|
|
207
|
-
...props2
|
|
208
|
-
});
|
|
148
|
+
return /* @__PURE__ */ React.createElement(Component, { ...props2 });
|
|
209
149
|
} else {
|
|
210
150
|
const ComponentMissing = components["component_missing"];
|
|
211
151
|
if (ComponentMissing) {
|
|
212
|
-
return /* @__PURE__ */
|
|
213
|
-
name: child.name
|
|
214
|
-
});
|
|
152
|
+
return /* @__PURE__ */ React.createElement(ComponentMissing, { name: child.name });
|
|
215
153
|
} else {
|
|
216
|
-
return /* @__PURE__ */
|
|
154
|
+
return /* @__PURE__ */ React.createElement("span", null, `No component provided for ${child.name}`);
|
|
217
155
|
}
|
|
218
156
|
}
|
|
219
157
|
case "maybe_mdx":
|
|
@@ -222,19 +160,14 @@
|
|
|
222
160
|
case "html_inline":
|
|
223
161
|
if (components[child.type]) {
|
|
224
162
|
const Component2 = components[child.type];
|
|
225
|
-
return /* @__PURE__ */
|
|
226
|
-
...props
|
|
227
|
-
});
|
|
163
|
+
return /* @__PURE__ */ React.createElement(Component2, { ...props });
|
|
228
164
|
}
|
|
229
165
|
return child.value;
|
|
230
166
|
case "invalid_markdown":
|
|
231
|
-
return /* @__PURE__ */
|
|
167
|
+
return /* @__PURE__ */ React.createElement("pre", null, child.value);
|
|
232
168
|
default:
|
|
233
169
|
if (typeof child.text === "string") {
|
|
234
|
-
return /* @__PURE__ */
|
|
235
|
-
components,
|
|
236
|
-
...child
|
|
237
|
-
});
|
|
170
|
+
return /* @__PURE__ */ React.createElement(Leaf, { components, ...child });
|
|
238
171
|
}
|
|
239
172
|
}
|
|
240
173
|
};
|
|
@@ -264,28 +197,24 @@
|
|
|
264
197
|
return "";
|
|
265
198
|
};
|
|
266
199
|
const Explorer = (props) => {
|
|
267
|
-
return /* @__PURE__ */
|
|
268
|
-
className: "font-mono"
|
|
269
|
-
}, /* @__PURE__ */ React__default["default"].createElement(ObjectValueRenderer, {
|
|
270
|
-
...props
|
|
271
|
-
}));
|
|
200
|
+
return /* @__PURE__ */ React.createElement("div", { className: "font-mono" }, /* @__PURE__ */ React.createElement(ObjectValueRenderer, { ...props }));
|
|
272
201
|
};
|
|
273
202
|
const ObjectValueRenderer = (props) => {
|
|
274
203
|
const subEntries = Object.entries(props.value).map(([keyName, subValue]) => {
|
|
275
|
-
return /* @__PURE__ */
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
204
|
+
return /* @__PURE__ */ React.createElement("div", { key: keyName, className: "gap-2" }, /* @__PURE__ */ React.createElement(
|
|
205
|
+
UnknownRenderer,
|
|
206
|
+
{
|
|
207
|
+
keyName,
|
|
208
|
+
value: subValue,
|
|
209
|
+
parentValue: props.value,
|
|
210
|
+
parentKeyName: props.parentKeyName,
|
|
211
|
+
renderValue: props.renderValue,
|
|
212
|
+
renderRichText: props.renderRichText,
|
|
213
|
+
showMetaFields: props.showMetaFields
|
|
214
|
+
}
|
|
215
|
+
));
|
|
287
216
|
});
|
|
288
|
-
return /* @__PURE__ */
|
|
217
|
+
return /* @__PURE__ */ React.createElement("div", null, subEntries);
|
|
289
218
|
};
|
|
290
219
|
const UnknownRenderer = ({
|
|
291
220
|
keyName,
|
|
@@ -297,11 +226,16 @@
|
|
|
297
226
|
showMetaFields
|
|
298
227
|
}) => {
|
|
299
228
|
const typeOfValue = typeof value;
|
|
300
|
-
const [expanded, setExpanded] =
|
|
229
|
+
const [expanded, setExpanded] = React.useState(
|
|
230
|
+
/* @ts-ignore */
|
|
231
|
+
(value == null ? void 0 : value.type) === "root" ? false : true
|
|
232
|
+
);
|
|
301
233
|
if (!showMetaFields) {
|
|
302
234
|
if ([
|
|
235
|
+
// 'id',
|
|
303
236
|
"_sys",
|
|
304
237
|
"__typename",
|
|
238
|
+
// '_tina_metadata',
|
|
305
239
|
"_internalValues",
|
|
306
240
|
"_internalSys"
|
|
307
241
|
].includes(keyName)) {
|
|
@@ -309,46 +243,65 @@
|
|
|
309
243
|
}
|
|
310
244
|
}
|
|
311
245
|
if (Array.isArray(value)) {
|
|
312
|
-
return /* @__PURE__ */
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
246
|
+
return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
|
|
247
|
+
"button",
|
|
248
|
+
{
|
|
249
|
+
onClick: () => setExpanded((exp) => !exp),
|
|
250
|
+
className: "min-w-[48px] flex justify-start gap-2"
|
|
251
|
+
},
|
|
252
|
+
keyName,
|
|
253
|
+
": ",
|
|
254
|
+
"[",
|
|
255
|
+
!expanded && `...]`
|
|
256
|
+
), expanded && /* @__PURE__ */ React.createElement("div", { className: "pl-4" }, value.map((item, index) => /* @__PURE__ */ React.createElement(
|
|
257
|
+
UnknownRenderer,
|
|
258
|
+
{
|
|
259
|
+
key: String(index),
|
|
260
|
+
keyName: String(index),
|
|
261
|
+
value: item,
|
|
262
|
+
parentKeyName: keyName,
|
|
263
|
+
parentValue,
|
|
264
|
+
renderValue,
|
|
265
|
+
renderRichText
|
|
266
|
+
}
|
|
267
|
+
))), expanded && /* @__PURE__ */ React.createElement("div", null, "]"));
|
|
326
268
|
}
|
|
327
269
|
if (typeOfValue === "object") {
|
|
328
270
|
if ((value == null ? void 0 : value.type) === "root" && renderRichText) {
|
|
329
|
-
return /* @__PURE__ */
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
271
|
+
return /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement(
|
|
272
|
+
"button",
|
|
273
|
+
{
|
|
274
|
+
onClick: () => setExpanded((exp) => !exp),
|
|
275
|
+
className: "min-w-[48px] flex justify-start gap-2"
|
|
276
|
+
},
|
|
277
|
+
keyName,
|
|
278
|
+
": ",
|
|
279
|
+
!expanded && "{...}"
|
|
280
|
+
), /* @__PURE__ */ React.createElement("div", null, expanded && // @ts-ignore
|
|
281
|
+
renderRichText({ value, keyName, parentValue, parentKeyName })));
|
|
335
282
|
}
|
|
336
|
-
return /* @__PURE__ */
|
|
283
|
+
return /* @__PURE__ */ React.createElement(
|
|
284
|
+
ObjectRenderer,
|
|
285
|
+
{
|
|
286
|
+
keyName,
|
|
287
|
+
value,
|
|
288
|
+
parentValue,
|
|
289
|
+
parentKeyName,
|
|
290
|
+
renderValue,
|
|
291
|
+
renderRichText
|
|
292
|
+
}
|
|
293
|
+
);
|
|
294
|
+
}
|
|
295
|
+
return /* @__PURE__ */ React.createElement(
|
|
296
|
+
Value,
|
|
297
|
+
{
|
|
337
298
|
keyName,
|
|
338
299
|
value,
|
|
339
300
|
parentValue,
|
|
340
301
|
parentKeyName,
|
|
341
|
-
renderValue
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
}
|
|
345
|
-
return /* @__PURE__ */ React__default["default"].createElement(Value, {
|
|
346
|
-
keyName,
|
|
347
|
-
value,
|
|
348
|
-
parentValue,
|
|
349
|
-
parentKeyName,
|
|
350
|
-
renderValue
|
|
351
|
-
});
|
|
302
|
+
renderValue
|
|
303
|
+
}
|
|
304
|
+
);
|
|
352
305
|
};
|
|
353
306
|
const Value = ({
|
|
354
307
|
keyName,
|
|
@@ -358,9 +311,7 @@
|
|
|
358
311
|
renderValue
|
|
359
312
|
}) => {
|
|
360
313
|
const keyDisplay = isNaN(Number(keyName)) ? `${keyName}: ` : ``;
|
|
361
|
-
return /* @__PURE__ */
|
|
362
|
-
className: "flex gap-2"
|
|
363
|
-
}, /* @__PURE__ */ React__default["default"].createElement("div", null, keyDisplay), /* @__PURE__ */ React__default["default"].createElement("div", null, renderValue({ value, keyName, parentValue, parentKeyName })));
|
|
314
|
+
return /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement("div", null, keyDisplay), /* @__PURE__ */ React.createElement("div", null, renderValue({ value, keyName, parentValue, parentKeyName })));
|
|
364
315
|
};
|
|
365
316
|
const ObjectRenderer = ({
|
|
366
317
|
keyName,
|
|
@@ -371,48 +322,50 @@
|
|
|
371
322
|
renderRichText
|
|
372
323
|
}) => {
|
|
373
324
|
const { withDataTinaFieldState } = React.useContext(JsonContext);
|
|
374
|
-
const [showMetaFields, setShowMetaFields] =
|
|
375
|
-
const [expanded, setExpanded] =
|
|
325
|
+
const [showMetaFields, setShowMetaFields] = React.useState(false);
|
|
326
|
+
const [expanded, setExpanded] = React.useState(true);
|
|
376
327
|
const v = value;
|
|
377
328
|
const keyDisplay = isNaN(Number(keyName)) ? `${keyName}: ` : ``;
|
|
378
329
|
if (value === null) {
|
|
379
|
-
return /* @__PURE__ */
|
|
380
|
-
className: "flex gap-2"
|
|
381
|
-
}, /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
382
|
-
className: ""
|
|
383
|
-
}, keyDisplay), /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
384
|
-
className: "text-gray-400"
|
|
385
|
-
}, "null")));
|
|
330
|
+
return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "" }, keyDisplay), /* @__PURE__ */ React.createElement("div", { className: "text-gray-400" }, "null")));
|
|
386
331
|
} else {
|
|
387
332
|
const fieldName = tinaField(v);
|
|
388
333
|
const extraProps = {};
|
|
389
334
|
if (fieldName !== "undefined#undefined" && withDataTinaFieldState) {
|
|
390
335
|
extraProps["data-tina-field"] = fieldName;
|
|
391
336
|
}
|
|
392
|
-
return /* @__PURE__ */
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
}, keyDisplay, "{", !expanded && `...}`), expanded && /* @__PURE__ */ React__default["default"].createElement("button", {
|
|
398
|
-
onClick: () => {
|
|
399
|
-
setShowMetaFields((show) => !show);
|
|
337
|
+
return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between" }, /* @__PURE__ */ React.createElement(
|
|
338
|
+
"button",
|
|
339
|
+
{
|
|
340
|
+
onClick: () => setExpanded((exp) => !exp),
|
|
341
|
+
className: "min-w-[48px] flex justify-start gap-2"
|
|
400
342
|
},
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
343
|
+
keyDisplay,
|
|
344
|
+
"{",
|
|
345
|
+
!expanded && `...}`
|
|
346
|
+
), expanded && /* @__PURE__ */ React.createElement(
|
|
347
|
+
"button",
|
|
348
|
+
{
|
|
349
|
+
onClick: () => {
|
|
350
|
+
setShowMetaFields((show) => !show);
|
|
351
|
+
},
|
|
352
|
+
className: "min-w-[48px] text-sm text-gray-400"
|
|
353
|
+
},
|
|
354
|
+
showMetaFields ? "Hide meta fields" : "Show meta fields"
|
|
355
|
+
)), expanded && /* @__PURE__ */ React.createElement("div", { className: "pl-4", ...extraProps }, /* @__PURE__ */ React.createElement(
|
|
356
|
+
ObjectValueRenderer,
|
|
357
|
+
{
|
|
358
|
+
value: v,
|
|
359
|
+
parentValue,
|
|
360
|
+
parentKeyName,
|
|
361
|
+
renderValue,
|
|
362
|
+
renderRichText,
|
|
363
|
+
showMetaFields
|
|
364
|
+
}
|
|
365
|
+
)), expanded && /* @__PURE__ */ React.createElement("div", null, "}"));
|
|
413
366
|
}
|
|
414
367
|
};
|
|
415
|
-
const JsonContext =
|
|
368
|
+
const JsonContext = React.createContext({ withDataTinaFieldState: true });
|
|
416
369
|
function Json({
|
|
417
370
|
src,
|
|
418
371
|
withDataTinaFieldState = true
|
|
@@ -424,73 +377,79 @@
|
|
|
424
377
|
if (!isClient) {
|
|
425
378
|
return null;
|
|
426
379
|
}
|
|
427
|
-
return /* @__PURE__ */
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
value: {
|
|
433
|
-
withDataTinaFieldState: withDataTinaFieldState === false ? false : true
|
|
434
|
-
}
|
|
435
|
-
}, /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
436
|
-
className: "px-4"
|
|
437
|
-
}, /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
438
|
-
className: "mx-auto my-8 border rounded-lg p-8 shadow-lg max-w-5xl mx-auto shadow-lg"
|
|
439
|
-
}, /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
440
|
-
className: "h-full overflow-scroll"
|
|
441
|
-
}, /* @__PURE__ */ React__default["default"].createElement(Explorer, {
|
|
442
|
-
value: src,
|
|
443
|
-
renderRichText: ({
|
|
444
|
-
value,
|
|
445
|
-
keyName,
|
|
446
|
-
parentValue,
|
|
447
|
-
parentKeyName
|
|
448
|
-
}) => {
|
|
449
|
-
let fieldName = "";
|
|
450
|
-
if (!isNaN(Number(keyName))) {
|
|
451
|
-
fieldName = `${tinaField(parentValue, parentKeyName)}.${keyName}`;
|
|
452
|
-
} else {
|
|
453
|
-
fieldName = tinaField(parentValue, keyName);
|
|
454
|
-
}
|
|
455
|
-
const extraProps = {};
|
|
456
|
-
if (fieldName !== "undefined#undefined") {
|
|
457
|
-
if (fieldName && withDataTinaFieldState) {
|
|
458
|
-
extraProps["data-tina-field"] = fieldName;
|
|
459
|
-
}
|
|
380
|
+
return /* @__PURE__ */ React.createElement(React.Suspense, { fallback: /* @__PURE__ */ React.createElement("div", { className: "" }, "Loading...") }, /* @__PURE__ */ React.createElement(
|
|
381
|
+
JsonContext.Provider,
|
|
382
|
+
{
|
|
383
|
+
value: {
|
|
384
|
+
withDataTinaFieldState: withDataTinaFieldState === false ? false : true
|
|
460
385
|
}
|
|
461
|
-
return /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
462
|
-
className: "font-sans px-2 border-l-2 bg-gray-50 w-full prose",
|
|
463
|
-
...extraProps
|
|
464
|
-
}, /* @__PURE__ */ React__default["default"].createElement(TinaMarkdown, {
|
|
465
|
-
content: value
|
|
466
|
-
}));
|
|
467
386
|
},
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
387
|
+
/* @__PURE__ */ React.createElement("div", { className: "px-4" }, /* @__PURE__ */ React.createElement("div", { className: "mx-auto my-8 border rounded-lg p-8 shadow-lg max-w-5xl mx-auto shadow-lg" }, /* @__PURE__ */ React.createElement("div", { className: "h-full overflow-scroll" }, /* @__PURE__ */ React.createElement(
|
|
388
|
+
Explorer,
|
|
389
|
+
{
|
|
390
|
+
value: src,
|
|
391
|
+
renderRichText: ({
|
|
392
|
+
value,
|
|
393
|
+
// @ts-ignore
|
|
394
|
+
keyName,
|
|
395
|
+
// @ts-ignore
|
|
396
|
+
parentValue,
|
|
397
|
+
// @ts-ignore
|
|
398
|
+
parentKeyName
|
|
399
|
+
}) => {
|
|
400
|
+
let fieldName = "";
|
|
401
|
+
if (!isNaN(Number(keyName))) {
|
|
402
|
+
fieldName = `${tinaField(
|
|
403
|
+
parentValue,
|
|
404
|
+
parentKeyName
|
|
405
|
+
)}.${keyName}`;
|
|
406
|
+
} else {
|
|
407
|
+
fieldName = tinaField(parentValue, keyName);
|
|
408
|
+
}
|
|
409
|
+
const extraProps = {};
|
|
410
|
+
if (fieldName !== "undefined#undefined") {
|
|
411
|
+
if (fieldName && withDataTinaFieldState) {
|
|
412
|
+
extraProps["data-tina-field"] = fieldName;
|
|
413
|
+
}
|
|
414
|
+
}
|
|
415
|
+
return /* @__PURE__ */ React.createElement(
|
|
416
|
+
"div",
|
|
417
|
+
{
|
|
418
|
+
className: "font-sans px-2 border-l-2 bg-gray-50 w-full prose",
|
|
419
|
+
...extraProps
|
|
420
|
+
},
|
|
421
|
+
/* @__PURE__ */ React.createElement(TinaMarkdown, { content: value })
|
|
422
|
+
);
|
|
423
|
+
},
|
|
424
|
+
renderValue: ({
|
|
425
|
+
value,
|
|
426
|
+
keyName,
|
|
427
|
+
parentValue,
|
|
428
|
+
parentKeyName
|
|
429
|
+
}) => {
|
|
430
|
+
let fieldName = "";
|
|
431
|
+
if (!isNaN(Number(keyName))) {
|
|
432
|
+
fieldName = `${tinaField(
|
|
433
|
+
parentValue,
|
|
434
|
+
// @ts-ignore
|
|
435
|
+
parentKeyName
|
|
436
|
+
)}.${keyName}`;
|
|
437
|
+
} else {
|
|
438
|
+
fieldName = tinaField(parentValue, keyName);
|
|
439
|
+
}
|
|
440
|
+
const extraProps = {};
|
|
441
|
+
if (fieldName !== "undefined#undefined") {
|
|
442
|
+
if (fieldName && withDataTinaFieldState) {
|
|
443
|
+
extraProps["data-tina-field"] = fieldName;
|
|
444
|
+
}
|
|
445
|
+
}
|
|
446
|
+
return /* @__PURE__ */ React.createElement("span", { className: "text-orange-600", ...extraProps }, value);
|
|
484
447
|
}
|
|
485
448
|
}
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
...extraProps
|
|
489
|
-
}, value);
|
|
490
|
-
}
|
|
491
|
-
}))))));
|
|
449
|
+
))))
|
|
450
|
+
));
|
|
492
451
|
}
|
|
493
452
|
exports2.Explorer = Explorer;
|
|
494
453
|
exports2.Json = Json;
|
|
495
|
-
Object.
|
|
454
|
+
Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
|
|
496
455
|
});
|