@prismicio/react 3.2.2-pr.236.d65a0c3 → 3.2.2-pr.241.fab3732
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/PrismicImage.d.ts +60 -58
- package/dist/PrismicImage.d.ts.map +1 -0
- package/dist/PrismicImage.js +54 -47
- package/dist/PrismicImage.js.map +1 -1
- package/dist/PrismicLink.d.ts +63 -67
- package/dist/PrismicLink.d.ts.map +1 -0
- package/dist/PrismicLink.js +59 -40
- package/dist/PrismicLink.js.map +1 -1
- package/dist/PrismicRichText.d.ts +72 -62
- package/dist/PrismicRichText.d.ts.map +1 -0
- package/dist/PrismicRichText.js +125 -71
- package/dist/PrismicRichText.js.map +1 -1
- package/dist/PrismicTable.d.ts +53 -49
- package/dist/PrismicTable.d.ts.map +1 -0
- package/dist/PrismicTable.js +68 -21
- package/dist/PrismicTable.js.map +1 -1
- package/dist/PrismicText.d.ts +16 -11
- package/dist/PrismicText.d.ts.map +1 -0
- package/dist/PrismicText.js +30 -23
- package/dist/PrismicText.js.map +1 -1
- package/dist/PrismicToolbar.d.ts +12 -7
- package/dist/PrismicToolbar.d.ts.map +1 -0
- package/dist/PrismicToolbar.js +32 -19
- package/dist/PrismicToolbar.js.map +1 -1
- package/dist/SliceZone.d.ts +52 -47
- package/dist/SliceZone.d.ts.map +1 -0
- package/dist/SliceZone.js +54 -27
- package/dist/SliceZone.js.map +1 -1
- package/dist/index.d.ts +9 -15
- package/dist/index.js +4 -14
- package/dist/lib/devMsg.js +23 -6
- package/dist/lib/devMsg.js.map +1 -1
- package/dist/package.js +6 -0
- package/dist/package.js.map +1 -0
- package/package.json +19 -39
- package/src/PrismicImage.tsx +3 -3
- package/src/PrismicLink.tsx +5 -5
- package/src/PrismicRichText.tsx +22 -19
- package/src/PrismicTable.tsx +9 -9
- package/src/PrismicText.tsx +2 -2
- package/src/PrismicToolbar.tsx +1 -1
- package/src/SliceZone.tsx +2 -2
- package/src/index.ts +1 -0
- package/src/lib/devMsg.ts +1 -1
- package/dist/index.js.map +0 -1
- package/dist/lib/devMsg.d.ts +0 -16
- package/dist/package.json.js +0 -5
- package/dist/package.json.js.map +0 -1
|
@@ -1,80 +1,87 @@
|
|
|
1
|
+
import { LinkProps } from "./PrismicLink.js";
|
|
1
2
|
import { ComponentType, FC, ReactNode } from "react";
|
|
2
3
|
import { LinkResolverFunction, RichTextField } from "@prismicio/client";
|
|
3
4
|
import { RichTextFunctionSerializer, RichTextMapSerializer } from "@prismicio/client/richtext";
|
|
4
|
-
|
|
5
|
+
|
|
6
|
+
//#region src/PrismicRichText.d.ts
|
|
7
|
+
|
|
5
8
|
/**
|
|
6
9
|
* A function mapping rich text block types to React Components. It is used to
|
|
7
10
|
* render rich text fields.
|
|
8
11
|
*
|
|
9
12
|
* @see Templating rich text fields {@link https://prismic.io/docs/fields/rich-text}
|
|
10
13
|
*/
|
|
11
|
-
|
|
14
|
+
type JSXFunctionSerializer = RichTextFunctionSerializer<ReactNode>;
|
|
12
15
|
/**
|
|
13
16
|
* A map of rich text block types to React Components. It is used to render rich
|
|
14
17
|
* text fields.
|
|
15
18
|
*
|
|
16
19
|
* @see Templating rich text fields {@link https://prismic.io/docs/fields/rich-text}
|
|
17
20
|
*/
|
|
18
|
-
|
|
21
|
+
type RichTextComponents = RichTextMapSerializer<ReactNode>;
|
|
22
|
+
/**
|
|
23
|
+
* @deprecated Use `RichTextComponents` instead.
|
|
24
|
+
*/
|
|
25
|
+
type JSXMapSerializer = RichTextComponents;
|
|
19
26
|
/** Props for `<PrismicRichText>`. */
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
27
|
+
type PrismicRichTextProps = {
|
|
28
|
+
/** The Prismic rich text field to render. */
|
|
29
|
+
field: RichTextField | null | undefined;
|
|
30
|
+
/**
|
|
31
|
+
* The link resolver used to resolve links.
|
|
32
|
+
*
|
|
33
|
+
* @remarks
|
|
34
|
+
* If your app uses route resolvers when querying for your Prismic
|
|
35
|
+
* repository's content, a link resolver does not need to be provided.
|
|
36
|
+
*
|
|
37
|
+
* @see Learn about link resolvers and route resolvers {@link https://prismic.io/docs/routes}
|
|
38
|
+
*/
|
|
39
|
+
linkResolver?: LinkResolverFunction;
|
|
40
|
+
/**
|
|
41
|
+
* A map or function that maps a rich text block to a React component.
|
|
42
|
+
*
|
|
43
|
+
* @remarks
|
|
44
|
+
* Prefer using a map serializer over the function serializer when possible.
|
|
45
|
+
* The map serializer is simpler to maintain.
|
|
46
|
+
*
|
|
47
|
+
* @example A map serializer.
|
|
48
|
+
*
|
|
49
|
+
* ```jsx
|
|
50
|
+
* {
|
|
51
|
+
* heading1: ({children}) => <Heading>{children}</Heading>
|
|
52
|
+
* }
|
|
53
|
+
* ```
|
|
54
|
+
*
|
|
55
|
+
* @example A function serializer.
|
|
56
|
+
*
|
|
57
|
+
* ```jsx
|
|
58
|
+
* (type, node, content, children) => {
|
|
59
|
+
* switch (type) {
|
|
60
|
+
* case "heading1": {
|
|
61
|
+
* return <Heading>{children}</Heading>;
|
|
62
|
+
* }
|
|
63
|
+
* }
|
|
64
|
+
* };
|
|
65
|
+
* ```
|
|
66
|
+
*/
|
|
67
|
+
components?: RichTextComponents | JSXFunctionSerializer;
|
|
68
|
+
/**
|
|
69
|
+
* The React component rendered for links when the URL is internal.
|
|
70
|
+
*
|
|
71
|
+
* @defaultValue `<a>`
|
|
72
|
+
*/
|
|
73
|
+
internalLinkComponent?: ComponentType<LinkProps>;
|
|
74
|
+
/**
|
|
75
|
+
* The React component rendered for links when the URL is external.
|
|
76
|
+
*
|
|
77
|
+
* @defaultValue `<a>`
|
|
78
|
+
*/
|
|
79
|
+
externalLinkComponent?: ComponentType<LinkProps>;
|
|
80
|
+
/**
|
|
81
|
+
* The value to be rendered when the field is empty. If a fallback is not
|
|
82
|
+
* given, `null` will be rendered.
|
|
83
|
+
*/
|
|
84
|
+
fallback?: ReactNode;
|
|
78
85
|
};
|
|
79
86
|
/**
|
|
80
87
|
* Renders content from a Prismic rich text field as React components.
|
|
@@ -87,4 +94,7 @@ export type PrismicRichTextProps = {
|
|
|
87
94
|
*
|
|
88
95
|
* @see Learn how to style rich text, use custom components, and use labels for custom formatting: {@link https://prismic.io/docs/fields/rich-text}
|
|
89
96
|
*/
|
|
90
|
-
|
|
97
|
+
declare const PrismicRichText: FC<PrismicRichTextProps>;
|
|
98
|
+
//#endregion
|
|
99
|
+
export { JSXFunctionSerializer, JSXMapSerializer, PrismicRichText, PrismicRichTextProps, RichTextComponents };
|
|
100
|
+
//# sourceMappingURL=PrismicRichText.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PrismicRichText.d.ts","names":[],"sources":["../src/PrismicRichText.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AA+BA;AAQA;AAKA;AAGA;AAEQ,KAlBI,qBAAA,GAAwB,0BAkB5B,CAlBuD,SAkBvD,CAAA;;;;;;;AAsDiB,KAhEb,kBAAA,GAAqB,qBAgER,CAhE8B,SAgE9B,CAAA;;;AA2JzB;KAtNY,gBAAA,GAAmB;;KAGnB,oBAAA;;SAEJ;;;;;;;;;;iBAWQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;eA6BF,qBAAqB;;;;;;0BAOV,cAAc;;;;;;0BAOd,cAAc;;;;;aAM3B;;;;;;;;;;;;;cAqJC,iBAAiB,GAAG"}
|
package/dist/PrismicRichText.js
CHANGED
|
@@ -1,79 +1,133 @@
|
|
|
1
|
-
import { jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { isValidElement, cloneElement, Fragment as Fragment$1 } from "react";
|
|
3
|
-
import { isFilled } from "@prismicio/client";
|
|
4
|
-
import { composeSerializers, wrapMapSerializer, serialize } from "@prismicio/client/richtext";
|
|
5
|
-
import { DEV } from "esm-env";
|
|
6
1
|
import { devMsg } from "./lib/devMsg.js";
|
|
7
2
|
import { PrismicLink } from "./PrismicLink.js";
|
|
3
|
+
import { Fragment, cloneElement, isValidElement } from "react";
|
|
4
|
+
import { isFilled } from "@prismicio/client";
|
|
5
|
+
import { DEV } from "esm-env";
|
|
6
|
+
import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
|
|
7
|
+
import { composeSerializers, serialize, wrapMapSerializer } from "@prismicio/client/richtext";
|
|
8
|
+
|
|
9
|
+
//#region src/PrismicRichText.tsx
|
|
8
10
|
const getDir = (node) => {
|
|
9
|
-
|
|
10
|
-
return "rtl";
|
|
11
|
-
}
|
|
11
|
+
if ("direction" in node && node.direction === "rtl") return "rtl";
|
|
12
12
|
};
|
|
13
13
|
const createDefaultSerializer = (args) => wrapMapSerializer({
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
14
|
+
heading1: ({ node, children, key }) => /* @__PURE__ */ jsx("h1", {
|
|
15
|
+
dir: getDir(node),
|
|
16
|
+
children
|
|
17
|
+
}, key),
|
|
18
|
+
heading2: ({ node, children, key }) => /* @__PURE__ */ jsx("h2", {
|
|
19
|
+
dir: getDir(node),
|
|
20
|
+
children
|
|
21
|
+
}, key),
|
|
22
|
+
heading3: ({ node, children, key }) => /* @__PURE__ */ jsx("h3", {
|
|
23
|
+
dir: getDir(node),
|
|
24
|
+
children
|
|
25
|
+
}, key),
|
|
26
|
+
heading4: ({ node, children, key }) => /* @__PURE__ */ jsx("h4", {
|
|
27
|
+
dir: getDir(node),
|
|
28
|
+
children
|
|
29
|
+
}, key),
|
|
30
|
+
heading5: ({ node, children, key }) => /* @__PURE__ */ jsx("h5", {
|
|
31
|
+
dir: getDir(node),
|
|
32
|
+
children
|
|
33
|
+
}, key),
|
|
34
|
+
heading6: ({ node, children, key }) => /* @__PURE__ */ jsx("h6", {
|
|
35
|
+
dir: getDir(node),
|
|
36
|
+
children
|
|
37
|
+
}, key),
|
|
38
|
+
paragraph: ({ node, children, key }) => /* @__PURE__ */ jsx("p", {
|
|
39
|
+
dir: getDir(node),
|
|
40
|
+
children
|
|
41
|
+
}, key),
|
|
42
|
+
preformatted: ({ node, key }) => /* @__PURE__ */ jsx("pre", { children: node.text }, key),
|
|
43
|
+
strong: ({ children, key }) => /* @__PURE__ */ jsx("strong", { children }, key),
|
|
44
|
+
em: ({ children, key }) => /* @__PURE__ */ jsx("em", { children }, key),
|
|
45
|
+
listItem: ({ node, children, key }) => /* @__PURE__ */ jsx("li", {
|
|
46
|
+
dir: getDir(node),
|
|
47
|
+
children
|
|
48
|
+
}, key),
|
|
49
|
+
oListItem: ({ node, children, key }) => /* @__PURE__ */ jsx("li", {
|
|
50
|
+
dir: getDir(node),
|
|
51
|
+
children
|
|
52
|
+
}, key),
|
|
53
|
+
list: ({ children, key }) => /* @__PURE__ */ jsx("ul", { children }, key),
|
|
54
|
+
oList: ({ children, key }) => /* @__PURE__ */ jsx("ol", { children }, key),
|
|
55
|
+
image: ({ node, key }) => {
|
|
56
|
+
const img = /* @__PURE__ */ jsx("img", {
|
|
57
|
+
src: node.url,
|
|
58
|
+
alt: node.alt ?? void 0,
|
|
59
|
+
"data-copyright": node.copyright ? node.copyright : void 0
|
|
60
|
+
});
|
|
61
|
+
return /* @__PURE__ */ jsx("p", {
|
|
62
|
+
className: "block-img",
|
|
63
|
+
children: node.linkTo ? /* @__PURE__ */ jsx(PrismicLink, {
|
|
64
|
+
linkResolver: args.linkResolver,
|
|
65
|
+
internalComponent: args.internalLinkComponent,
|
|
66
|
+
externalComponent: args.externalLinkComponent,
|
|
67
|
+
field: node.linkTo,
|
|
68
|
+
children: img
|
|
69
|
+
}) : img
|
|
70
|
+
}, key);
|
|
71
|
+
},
|
|
72
|
+
embed: ({ node, key }) => /* @__PURE__ */ jsx("div", {
|
|
73
|
+
"data-oembed": node.oembed.embed_url,
|
|
74
|
+
"data-oembed-type": node.oembed.type,
|
|
75
|
+
"data-oembed-provider": node.oembed.provider_name,
|
|
76
|
+
dangerouslySetInnerHTML: { __html: node.oembed.html ?? "" }
|
|
77
|
+
}, key),
|
|
78
|
+
hyperlink: ({ node, children, key }) => /* @__PURE__ */ jsx(PrismicLink, {
|
|
79
|
+
field: node.data,
|
|
80
|
+
linkResolver: args.linkResolver,
|
|
81
|
+
internalComponent: args.internalLinkComponent,
|
|
82
|
+
externalComponent: args.externalLinkComponent,
|
|
83
|
+
children
|
|
84
|
+
}, key),
|
|
85
|
+
label: ({ node, children, key }) => /* @__PURE__ */ jsx("span", {
|
|
86
|
+
className: node.data.label,
|
|
87
|
+
children
|
|
88
|
+
}, key),
|
|
89
|
+
span: ({ text, key }) => {
|
|
90
|
+
const result = [];
|
|
91
|
+
let i = 0;
|
|
92
|
+
for (const line of text.split("\n")) {
|
|
93
|
+
if (i > 0) result.push(/* @__PURE__ */ jsx("br", {}, `${i}__break`));
|
|
94
|
+
result.push(/* @__PURE__ */ jsx(Fragment, { children: line }, `${i}__line`));
|
|
95
|
+
i++;
|
|
96
|
+
}
|
|
97
|
+
return /* @__PURE__ */ jsx(Fragment, { children: result }, key);
|
|
98
|
+
}
|
|
47
99
|
});
|
|
100
|
+
/**
|
|
101
|
+
* Renders content from a Prismic rich text field as React components.
|
|
102
|
+
*
|
|
103
|
+
* @example
|
|
104
|
+
*
|
|
105
|
+
* ```tsx
|
|
106
|
+
* <PrismicRichText field={slice.primary.text} />;
|
|
107
|
+
* ```
|
|
108
|
+
*
|
|
109
|
+
* @see Learn how to style rich text, use custom components, and use labels for custom formatting: {@link https://prismic.io/docs/fields/rich-text}
|
|
110
|
+
*/
|
|
48
111
|
const PrismicRichText = (props) => {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
return cloneElement(result, { key });
|
|
67
|
-
} else {
|
|
68
|
-
return result;
|
|
69
|
-
}
|
|
70
|
-
});
|
|
71
|
-
if (!serialized) {
|
|
72
|
-
return fallback != null ? jsx(Fragment, { children: fallback }) : null;
|
|
73
|
-
}
|
|
74
|
-
return jsx(Fragment, { children: serialized });
|
|
75
|
-
};
|
|
76
|
-
export {
|
|
77
|
-
PrismicRichText
|
|
112
|
+
const { linkResolver, field, fallback, components, externalLinkComponent, internalLinkComponent, ...restProps } = props;
|
|
113
|
+
if (DEV) {
|
|
114
|
+
if ("className" in restProps) console.warn(`[PrismicRichText] className cannot be passed to <PrismicRichText> since it renders an array without a wrapping component. For more details, see ${devMsg("classname-is-not-a-valid-prop")}.`, field);
|
|
115
|
+
}
|
|
116
|
+
if (!isFilled.richText(field)) return fallback != null ? /* @__PURE__ */ jsx(Fragment$1, { children: fallback }) : null;
|
|
117
|
+
const serializer = composeSerializers(typeof components === "object" ? wrapMapSerializer(components) : components, createDefaultSerializer({
|
|
118
|
+
linkResolver,
|
|
119
|
+
internalLinkComponent,
|
|
120
|
+
externalLinkComponent
|
|
121
|
+
}));
|
|
122
|
+
const serialized = serialize(field, (type, node, text, children, key) => {
|
|
123
|
+
const result = serializer(type, node, text, children, key);
|
|
124
|
+
if (isValidElement(result) && result.key == null) return cloneElement(result, { key });
|
|
125
|
+
else return result;
|
|
126
|
+
});
|
|
127
|
+
if (!serialized) return fallback != null ? /* @__PURE__ */ jsx(Fragment$1, { children: fallback }) : null;
|
|
128
|
+
return /* @__PURE__ */ jsx(Fragment$1, { children: serialized });
|
|
78
129
|
};
|
|
79
|
-
|
|
130
|
+
|
|
131
|
+
//#endregion
|
|
132
|
+
export { PrismicRichText };
|
|
133
|
+
//# sourceMappingURL=PrismicRichText.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrismicRichText.js","sources":["../src/PrismicRichText.tsx"],"sourcesContent":["import {\n\tcloneElement,\n\tComponentType,\n\tFC,\n\tFragment,\n\tisValidElement,\n\tReactNode,\n} from \"react\";\nimport {\n\tisFilled,\n\tLinkResolverFunction,\n\tRichTextField,\n\tRTAnyNode,\n} from \"@prismicio/client\";\nimport {\n\tcomposeSerializers,\n\tserialize,\n\twrapMapSerializer,\n\tRichTextFunctionSerializer,\n\tRichTextMapSerializer,\n} from \"@prismicio/client/richtext\";\nimport { DEV } from \"esm-env\";\n\nimport { devMsg } from \"./lib/devMsg.js\";\n\nimport { LinkProps, PrismicLink } from \"./PrismicLink.js\";\n\n/**\n * A function mapping rich text block types to React Components. It is used to\n * render rich text fields.\n *\n * @see Templating rich text fields {@link https://prismic.io/docs/fields/rich-text}\n */\nexport type JSXFunctionSerializer = RichTextFunctionSerializer<ReactNode>;\n\n/**\n * A map of rich text block types to React Components. It is used to render rich\n * text fields.\n *\n * @see Templating rich text fields {@link https://prismic.io/docs/fields/rich-text}\n */\nexport type JSXMapSerializer = RichTextMapSerializer<ReactNode>;\n\n/** Props for `<PrismicRichText>`. */\nexport type PrismicRichTextProps = {\n\t/** The Prismic rich text field to render. */\n\tfield: RichTextField | null | undefined;\n\n\t/**\n\t * The link resolver used to resolve links.\n\t *\n\t * @remarks\n\t * If your app uses route resolvers when querying for your Prismic\n\t * repository's content, a link resolver does not need to be provided.\n\t *\n\t * @see Learn about link resolvers and route resolvers {@link https://prismic.io/docs/routes}\n\t */\n\tlinkResolver?: LinkResolverFunction;\n\n\t/**\n\t * A map or function that maps a rich text block to a React component.\n\t *\n\t * @remarks\n\t * Prefer using a map serializer over the function serializer when possible.\n\t * The map serializer is simpler to maintain.\n\t *\n\t * @example A map serializer.\n\t *\n\t * ```jsx\n\t * {\n\t * heading1: ({children}) => <Heading>{children}</Heading>\n\t * }\n\t * ```\n\t *\n\t * @example A function serializer.\n\t *\n\t * ```jsx\n\t * (type, node, content, children) => {\n\t * \tswitch (type) {\n\t * \t\tcase \"heading1\": {\n\t * \t\t\treturn <Heading>{children}</Heading>;\n\t * \t\t}\n\t * \t}\n\t * };\n\t * ```\n\t */\n\tcomponents?: JSXMapSerializer | JSXFunctionSerializer;\n\n\t/**\n\t * The React component rendered for links when the URL is internal.\n\t *\n\t * @defaultValue `<a>`\n\t */\n\tinternalLinkComponent?: ComponentType<LinkProps>;\n\n\t/**\n\t * The React component rendered for links when the URL is external.\n\t *\n\t * @defaultValue `<a>`\n\t */\n\texternalLinkComponent?: ComponentType<LinkProps>;\n\n\t/**\n\t * The value to be rendered when the field is empty. If a fallback is not\n\t * given, `null` will be rendered.\n\t */\n\tfallback?: ReactNode;\n};\n\ntype CreateDefaultSerializerArgs = {\n\tlinkResolver: LinkResolverFunction | undefined;\n\tinternalLinkComponent?: ComponentType<LinkProps>;\n\texternalLinkComponent?: ComponentType<LinkProps>;\n};\n\nconst getDir = (node: RTAnyNode): \"rtl\" | undefined => {\n\tif (\"direction\" in node && node.direction === \"rtl\") {\n\t\treturn \"rtl\";\n\t}\n};\n\nconst createDefaultSerializer = (\n\targs: CreateDefaultSerializerArgs,\n): JSXFunctionSerializer =>\n\twrapMapSerializer<ReactNode>({\n\t\theading1: ({ node, children, key }) => (\n\t\t\t<h1 key={key} dir={getDir(node)}>\n\t\t\t\t{children}\n\t\t\t</h1>\n\t\t),\n\t\theading2: ({ node, children, key }) => (\n\t\t\t<h2 key={key} dir={getDir(node)}>\n\t\t\t\t{children}\n\t\t\t</h2>\n\t\t),\n\t\theading3: ({ node, children, key }) => (\n\t\t\t<h3 key={key} dir={getDir(node)}>\n\t\t\t\t{children}\n\t\t\t</h3>\n\t\t),\n\t\theading4: ({ node, children, key }) => (\n\t\t\t<h4 key={key} dir={getDir(node)}>\n\t\t\t\t{children}\n\t\t\t</h4>\n\t\t),\n\t\theading5: ({ node, children, key }) => (\n\t\t\t<h5 key={key} dir={getDir(node)}>\n\t\t\t\t{children}\n\t\t\t</h5>\n\t\t),\n\t\theading6: ({ node, children, key }) => (\n\t\t\t<h6 key={key} dir={getDir(node)}>\n\t\t\t\t{children}\n\t\t\t</h6>\n\t\t),\n\t\tparagraph: ({ node, children, key }) => (\n\t\t\t<p key={key} dir={getDir(node)}>\n\t\t\t\t{children}\n\t\t\t</p>\n\t\t),\n\t\tpreformatted: ({ node, key }) => <pre key={key}>{node.text}</pre>,\n\t\tstrong: ({ children, key }) => <strong key={key}>{children}</strong>,\n\t\tem: ({ children, key }) => <em key={key}>{children}</em>,\n\t\tlistItem: ({ node, children, key }) => (\n\t\t\t<li key={key} dir={getDir(node)}>\n\t\t\t\t{children}\n\t\t\t</li>\n\t\t),\n\t\toListItem: ({ node, children, key }) => (\n\t\t\t<li key={key} dir={getDir(node)}>\n\t\t\t\t{children}\n\t\t\t</li>\n\t\t),\n\t\tlist: ({ children, key }) => <ul key={key}>{children}</ul>,\n\t\toList: ({ children, key }) => <ol key={key}>{children}</ol>,\n\t\timage: ({ node, key }) => {\n\t\t\tconst img = (\n\t\t\t\t<img\n\t\t\t\t\tsrc={node.url}\n\t\t\t\t\talt={node.alt ?? undefined}\n\t\t\t\t\tdata-copyright={node.copyright ? node.copyright : undefined}\n\t\t\t\t/>\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<p key={key} className=\"block-img\">\n\t\t\t\t\t{node.linkTo ? (\n\t\t\t\t\t\t<PrismicLink\n\t\t\t\t\t\t\tlinkResolver={args.linkResolver}\n\t\t\t\t\t\t\tinternalComponent={args.internalLinkComponent}\n\t\t\t\t\t\t\texternalComponent={args.externalLinkComponent}\n\t\t\t\t\t\t\tfield={node.linkTo}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{img}\n\t\t\t\t\t\t</PrismicLink>\n\t\t\t\t\t) : (\n\t\t\t\t\t\timg\n\t\t\t\t\t)}\n\t\t\t\t</p>\n\t\t\t);\n\t\t},\n\t\tembed: ({ node, key }) => (\n\t\t\t<div\n\t\t\t\tkey={key}\n\t\t\t\tdata-oembed={node.oembed.embed_url}\n\t\t\t\tdata-oembed-type={node.oembed.type}\n\t\t\t\tdata-oembed-provider={node.oembed.provider_name}\n\t\t\t\tdangerouslySetInnerHTML={{ __html: node.oembed.html ?? \"\" }}\n\t\t\t/>\n\t\t),\n\t\thyperlink: ({ node, children, key }) => (\n\t\t\t<PrismicLink\n\t\t\t\tkey={key}\n\t\t\t\tfield={node.data}\n\t\t\t\tlinkResolver={args.linkResolver}\n\t\t\t\tinternalComponent={args.internalLinkComponent}\n\t\t\t\texternalComponent={args.externalLinkComponent}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</PrismicLink>\n\t\t),\n\t\tlabel: ({ node, children, key }) => (\n\t\t\t<span key={key} className={node.data.label}>\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t),\n\t\tspan: ({ text, key }) => {\n\t\t\tconst result: ReactNode[] = [];\n\n\t\t\tlet i = 0;\n\t\t\tfor (const line of text.split(\"\\n\")) {\n\t\t\t\tif (i > 0) {\n\t\t\t\t\tresult.push(<br key={`${i}__break`} />);\n\t\t\t\t}\n\n\t\t\t\tresult.push(<Fragment key={`${i}__line`}>{line}</Fragment>);\n\n\t\t\t\ti++;\n\t\t\t}\n\n\t\t\treturn <Fragment key={key}>{result}</Fragment>;\n\t\t},\n\t});\n\n/**\n * Renders content from a Prismic rich text field as React components.\n *\n * @example\n *\n * ```tsx\n * <PrismicRichText field={slice.primary.text} />;\n * ```\n *\n * @see Learn how to style rich text, use custom components, and use labels for custom formatting: {@link https://prismic.io/docs/fields/rich-text}\n */\nexport const PrismicRichText: FC<PrismicRichTextProps> = (props) => {\n\tconst {\n\t\tlinkResolver,\n\t\tfield,\n\t\tfallback,\n\t\tcomponents,\n\t\texternalLinkComponent,\n\t\tinternalLinkComponent,\n\t\t...restProps\n\t} = props;\n\n\tif (DEV) {\n\t\tif (\"className\" in restProps) {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicRichText] className cannot be passed to <PrismicRichText> since it renders an array without a wrapping component. For more details, see ${devMsg(\n\t\t\t\t\t\"classname-is-not-a-valid-prop\",\n\t\t\t\t)}.`,\n\t\t\t\tfield,\n\t\t\t);\n\t\t}\n\t}\n\n\tif (!isFilled.richText(field)) {\n\t\treturn fallback != null ? <>{fallback}</> : null;\n\t}\n\n\tconst serializer = composeSerializers<ReactNode>(\n\t\ttypeof components === \"object\" ? wrapMapSerializer(components) : components,\n\t\tcreateDefaultSerializer({\n\t\t\tlinkResolver,\n\t\t\tinternalLinkComponent,\n\t\t\texternalLinkComponent,\n\t\t}),\n\t);\n\n\t// The serializer is wrapped in a higher-order function that\n\t// automatically applies a key to React Elements if one is not already\n\t// given.\n\tconst serialized = serialize<ReactNode>(\n\t\tfield,\n\t\t(type, node, text, children, key) => {\n\t\t\tconst result = serializer(type, node, text, children, key);\n\n\t\t\tif (isValidElement(result) && result.key == null) {\n\t\t\t\treturn cloneElement(result, { key });\n\t\t\t} else {\n\t\t\t\treturn result;\n\t\t\t}\n\t\t},\n\t);\n\n\tif (!serialized) {\n\t\treturn fallback != null ? <>{fallback}</> : null;\n\t}\n\n\treturn <>{serialized}</>;\n};\n"],"names":["_jsx","Fragment","_Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PrismicRichText.js","names":[],"sources":["../src/PrismicRichText.tsx"],"sourcesContent":["import { type LinkProps, PrismicLink } from \"./PrismicLink.js\";\nimport { devMsg } from \"./lib/devMsg.js\";\nimport {\n\tisFilled,\n\ttype LinkResolverFunction,\n\ttype RichTextField,\n\ttype RTAnyNode,\n} from \"@prismicio/client\";\nimport {\n\tcomposeSerializers,\n\tserialize,\n\twrapMapSerializer,\n\ttype RichTextFunctionSerializer,\n\ttype RichTextMapSerializer,\n} from \"@prismicio/client/richtext\";\nimport { DEV } from \"esm-env\";\nimport {\n\tcloneElement,\n\ttype ComponentType,\n\ttype FC,\n\tFragment,\n\tisValidElement,\n\ttype ReactNode,\n} from \"react\";\n\n/**\n * A function mapping rich text block types to React Components. It is used to\n * render rich text fields.\n *\n * @see Templating rich text fields {@link https://prismic.io/docs/fields/rich-text}\n */\nexport type JSXFunctionSerializer = RichTextFunctionSerializer<ReactNode>;\n\n/**\n * A map of rich text block types to React Components. It is used to render rich\n * text fields.\n *\n * @see Templating rich text fields {@link https://prismic.io/docs/fields/rich-text}\n */\nexport type RichTextComponents = RichTextMapSerializer<ReactNode>;\n\n/**\n * @deprecated Use `RichTextComponents` instead.\n */\nexport type JSXMapSerializer = RichTextComponents;\n\n/** Props for `<PrismicRichText>`. */\nexport type PrismicRichTextProps = {\n\t/** The Prismic rich text field to render. */\n\tfield: RichTextField | null | undefined;\n\n\t/**\n\t * The link resolver used to resolve links.\n\t *\n\t * @remarks\n\t * If your app uses route resolvers when querying for your Prismic\n\t * repository's content, a link resolver does not need to be provided.\n\t *\n\t * @see Learn about link resolvers and route resolvers {@link https://prismic.io/docs/routes}\n\t */\n\tlinkResolver?: LinkResolverFunction;\n\n\t/**\n\t * A map or function that maps a rich text block to a React component.\n\t *\n\t * @remarks\n\t * Prefer using a map serializer over the function serializer when possible.\n\t * The map serializer is simpler to maintain.\n\t *\n\t * @example A map serializer.\n\t *\n\t * ```jsx\n\t * {\n\t * heading1: ({children}) => <Heading>{children}</Heading>\n\t * }\n\t * ```\n\t *\n\t * @example A function serializer.\n\t *\n\t * ```jsx\n\t * (type, node, content, children) => {\n\t * \tswitch (type) {\n\t * \t\tcase \"heading1\": {\n\t * \t\t\treturn <Heading>{children}</Heading>;\n\t * \t\t}\n\t * \t}\n\t * };\n\t * ```\n\t */\n\tcomponents?: RichTextComponents | JSXFunctionSerializer;\n\n\t/**\n\t * The React component rendered for links when the URL is internal.\n\t *\n\t * @defaultValue `<a>`\n\t */\n\tinternalLinkComponent?: ComponentType<LinkProps>;\n\n\t/**\n\t * The React component rendered for links when the URL is external.\n\t *\n\t * @defaultValue `<a>`\n\t */\n\texternalLinkComponent?: ComponentType<LinkProps>;\n\n\t/**\n\t * The value to be rendered when the field is empty. If a fallback is not\n\t * given, `null` will be rendered.\n\t */\n\tfallback?: ReactNode;\n};\n\ntype CreateDefaultSerializerArgs = {\n\tlinkResolver: LinkResolverFunction | undefined;\n\tinternalLinkComponent?: ComponentType<LinkProps>;\n\texternalLinkComponent?: ComponentType<LinkProps>;\n};\n\nconst getDir = (node: RTAnyNode): \"rtl\" | undefined => {\n\tif (\"direction\" in node && node.direction === \"rtl\") {\n\t\treturn \"rtl\";\n\t}\n};\n\nconst createDefaultSerializer = (\n\targs: CreateDefaultSerializerArgs,\n): JSXFunctionSerializer =>\n\twrapMapSerializer<ReactNode>({\n\t\theading1: ({ node, children, key }) => (\n\t\t\t<h1 key={key} dir={getDir(node)}>\n\t\t\t\t{children}\n\t\t\t</h1>\n\t\t),\n\t\theading2: ({ node, children, key }) => (\n\t\t\t<h2 key={key} dir={getDir(node)}>\n\t\t\t\t{children}\n\t\t\t</h2>\n\t\t),\n\t\theading3: ({ node, children, key }) => (\n\t\t\t<h3 key={key} dir={getDir(node)}>\n\t\t\t\t{children}\n\t\t\t</h3>\n\t\t),\n\t\theading4: ({ node, children, key }) => (\n\t\t\t<h4 key={key} dir={getDir(node)}>\n\t\t\t\t{children}\n\t\t\t</h4>\n\t\t),\n\t\theading5: ({ node, children, key }) => (\n\t\t\t<h5 key={key} dir={getDir(node)}>\n\t\t\t\t{children}\n\t\t\t</h5>\n\t\t),\n\t\theading6: ({ node, children, key }) => (\n\t\t\t<h6 key={key} dir={getDir(node)}>\n\t\t\t\t{children}\n\t\t\t</h6>\n\t\t),\n\t\tparagraph: ({ node, children, key }) => (\n\t\t\t<p key={key} dir={getDir(node)}>\n\t\t\t\t{children}\n\t\t\t</p>\n\t\t),\n\t\tpreformatted: ({ node, key }) => <pre key={key}>{node.text}</pre>,\n\t\tstrong: ({ children, key }) => <strong key={key}>{children}</strong>,\n\t\tem: ({ children, key }) => <em key={key}>{children}</em>,\n\t\tlistItem: ({ node, children, key }) => (\n\t\t\t<li key={key} dir={getDir(node)}>\n\t\t\t\t{children}\n\t\t\t</li>\n\t\t),\n\t\toListItem: ({ node, children, key }) => (\n\t\t\t<li key={key} dir={getDir(node)}>\n\t\t\t\t{children}\n\t\t\t</li>\n\t\t),\n\t\tlist: ({ children, key }) => <ul key={key}>{children}</ul>,\n\t\toList: ({ children, key }) => <ol key={key}>{children}</ol>,\n\t\timage: ({ node, key }) => {\n\t\t\tconst img = (\n\t\t\t\t<img\n\t\t\t\t\tsrc={node.url}\n\t\t\t\t\talt={node.alt ?? undefined}\n\t\t\t\t\tdata-copyright={node.copyright ? node.copyright : undefined}\n\t\t\t\t/>\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\t<p key={key} className=\"block-img\">\n\t\t\t\t\t{node.linkTo ? (\n\t\t\t\t\t\t<PrismicLink\n\t\t\t\t\t\t\tlinkResolver={args.linkResolver}\n\t\t\t\t\t\t\tinternalComponent={args.internalLinkComponent}\n\t\t\t\t\t\t\texternalComponent={args.externalLinkComponent}\n\t\t\t\t\t\t\tfield={node.linkTo}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{img}\n\t\t\t\t\t\t</PrismicLink>\n\t\t\t\t\t) : (\n\t\t\t\t\t\timg\n\t\t\t\t\t)}\n\t\t\t\t</p>\n\t\t\t);\n\t\t},\n\t\tembed: ({ node, key }) => (\n\t\t\t<div\n\t\t\t\tkey={key}\n\t\t\t\tdata-oembed={node.oembed.embed_url}\n\t\t\t\tdata-oembed-type={node.oembed.type}\n\t\t\t\tdata-oembed-provider={node.oembed.provider_name}\n\t\t\t\tdangerouslySetInnerHTML={{ __html: node.oembed.html ?? \"\" }}\n\t\t\t/>\n\t\t),\n\t\thyperlink: ({ node, children, key }) => (\n\t\t\t<PrismicLink\n\t\t\t\tkey={key}\n\t\t\t\tfield={node.data}\n\t\t\t\tlinkResolver={args.linkResolver}\n\t\t\t\tinternalComponent={args.internalLinkComponent}\n\t\t\t\texternalComponent={args.externalLinkComponent}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</PrismicLink>\n\t\t),\n\t\tlabel: ({ node, children, key }) => (\n\t\t\t<span key={key} className={node.data.label}>\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t),\n\t\tspan: ({ text, key }) => {\n\t\t\tconst result: ReactNode[] = [];\n\n\t\t\tlet i = 0;\n\t\t\tfor (const line of text.split(\"\\n\")) {\n\t\t\t\tif (i > 0) {\n\t\t\t\t\tresult.push(<br key={`${i}__break`} />);\n\t\t\t\t}\n\n\t\t\t\tresult.push(<Fragment key={`${i}__line`}>{line}</Fragment>);\n\n\t\t\t\ti++;\n\t\t\t}\n\n\t\t\treturn <Fragment key={key}>{result}</Fragment>;\n\t\t},\n\t});\n\n/**\n * Renders content from a Prismic rich text field as React components.\n *\n * @example\n *\n * ```tsx\n * <PrismicRichText field={slice.primary.text} />;\n * ```\n *\n * @see Learn how to style rich text, use custom components, and use labels for custom formatting: {@link https://prismic.io/docs/fields/rich-text}\n */\nexport const PrismicRichText: FC<PrismicRichTextProps> = (props) => {\n\tconst {\n\t\tlinkResolver,\n\t\tfield,\n\t\tfallback,\n\t\tcomponents,\n\t\texternalLinkComponent,\n\t\tinternalLinkComponent,\n\t\t...restProps\n\t} = props;\n\n\tif (DEV) {\n\t\tif (\"className\" in restProps) {\n\t\t\tconsole.warn(\n\t\t\t\t`[PrismicRichText] className cannot be passed to <PrismicRichText> since it renders an array without a wrapping component. For more details, see ${devMsg(\n\t\t\t\t\t\"classname-is-not-a-valid-prop\",\n\t\t\t\t)}.`,\n\t\t\t\tfield,\n\t\t\t);\n\t\t}\n\t}\n\n\tif (!isFilled.richText(field)) {\n\t\treturn fallback != null ? <>{fallback}</> : null;\n\t}\n\n\tconst serializer = composeSerializers<ReactNode>(\n\t\ttypeof components === \"object\" ? wrapMapSerializer(components) : components,\n\t\tcreateDefaultSerializer({\n\t\t\tlinkResolver,\n\t\t\tinternalLinkComponent,\n\t\t\texternalLinkComponent,\n\t\t}),\n\t);\n\n\t// The serializer is wrapped in a higher-order function that\n\t// automatically applies a key to React Elements if one is not already\n\t// given.\n\tconst serialized = serialize<ReactNode>(\n\t\tfield,\n\t\t(type, node, text, children, key) => {\n\t\t\tconst result = serializer(type, node, text, children, key);\n\n\t\t\tif (isValidElement(result) && result.key == null) {\n\t\t\t\treturn cloneElement(result, { key });\n\t\t\t} else {\n\t\t\t\treturn result;\n\t\t\t}\n\t\t},\n\t);\n\n\tif (!serialized) {\n\t\treturn fallback != null ? <>{fallback}</> : null;\n\t}\n\n\treturn <>{serialized}</>;\n};\n"],"mappings":"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"}
|
package/dist/PrismicTable.d.ts
CHANGED
|
@@ -1,54 +1,56 @@
|
|
|
1
|
-
import { ComponentType, FC, ReactNode } from "react";
|
|
2
|
-
import { TableField, TableFieldHead, TableFieldHeadRow, TableFieldBody, TableFieldBodyRow, TableFieldHeaderCell, TableFieldDataCell } from "@prismicio/client";
|
|
3
1
|
import { JSXMapSerializer } from "./PrismicRichText.js";
|
|
2
|
+
import { ComponentType, FC, ReactNode } from "react";
|
|
3
|
+
import { TableField, TableFieldBody, TableFieldBodyRow, TableFieldDataCell, TableFieldHead, TableFieldHeadRow, TableFieldHeaderCell } from "@prismicio/client";
|
|
4
|
+
|
|
5
|
+
//#region src/PrismicTable.d.ts
|
|
4
6
|
type TableComponents = {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
7
|
+
table?: ComponentType<{
|
|
8
|
+
table: TableField<"filled">;
|
|
9
|
+
children: ReactNode;
|
|
10
|
+
}>;
|
|
11
|
+
thead?: ComponentType<{
|
|
12
|
+
head: TableFieldHead;
|
|
13
|
+
children: ReactNode;
|
|
14
|
+
}>;
|
|
15
|
+
tbody?: ComponentType<{
|
|
16
|
+
body: TableFieldBody;
|
|
17
|
+
children: ReactNode;
|
|
18
|
+
}>;
|
|
19
|
+
tr?: ComponentType<{
|
|
20
|
+
row: TableFieldHeadRow | TableFieldBodyRow;
|
|
21
|
+
children: ReactNode;
|
|
22
|
+
}>;
|
|
23
|
+
th?: ComponentType<{
|
|
24
|
+
cell: TableFieldHeaderCell;
|
|
25
|
+
children: ReactNode;
|
|
26
|
+
}>;
|
|
27
|
+
td?: ComponentType<{
|
|
28
|
+
cell: TableFieldDataCell;
|
|
29
|
+
children: ReactNode;
|
|
30
|
+
}>;
|
|
29
31
|
};
|
|
30
32
|
/** Props for `<PrismicTable>`. */
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
33
|
+
type PrismicTableProps = {
|
|
34
|
+
/** The Prismic table field to render. */
|
|
35
|
+
field: TableField;
|
|
36
|
+
/**
|
|
37
|
+
* An object that maps a table block to a React component.
|
|
38
|
+
*
|
|
39
|
+
* @example A map serializer.
|
|
40
|
+
*
|
|
41
|
+
* ```jsx
|
|
42
|
+
* {
|
|
43
|
+
* table: ({children}) => <table>{children}</table>
|
|
44
|
+
* thead: ({children}) => <thead>{children}</thead>
|
|
45
|
+
* }
|
|
46
|
+
* ```
|
|
47
|
+
*/
|
|
48
|
+
components?: JSXMapSerializer & TableComponents;
|
|
49
|
+
/**
|
|
50
|
+
* The value to be rendered when the field is empty. If a fallback is not
|
|
51
|
+
* given, `null` will be rendered.
|
|
52
|
+
*/
|
|
53
|
+
fallback?: ReactNode;
|
|
52
54
|
};
|
|
53
55
|
/**
|
|
54
56
|
* Renders content from a Prismic table field as React components.
|
|
@@ -61,5 +63,7 @@ export type PrismicTableProps = {
|
|
|
61
63
|
*
|
|
62
64
|
* @see Learn how to style tables and customize table element components: {@link https://prismic.io/docs/fields/table}
|
|
63
65
|
*/
|
|
64
|
-
|
|
65
|
-
|
|
66
|
+
declare const PrismicTable: FC<PrismicTableProps>;
|
|
67
|
+
//#endregion
|
|
68
|
+
export { PrismicTable, PrismicTableProps };
|
|
69
|
+
//# sourceMappingURL=PrismicTable.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PrismicTable.d.ts","names":[],"sources":["../src/PrismicTable.tsx"],"sourcesContent":[],"mappings":";;;;;KAcK,eAAA;UACI;IADJ,KAAA,EAC2B,UADZ,CAAA,QAAA,CAAA;IACY,QAAA,EAAgC,SAAhC;EAAgC,CAAA,CAAA;EAAvD,KAAA,CAAA,EACA,aADA,CAAA;IACsB,IAAA,EAAA,cAAA;IAA0B,QAAA,EAAA,SAAA;EAAhD,CAAA,CAAA;EACsB,KAAA,CAAA,EAAtB,aAAsB,CAAA;IAA0B,IAAA,EAA1B,cAA0B;IAAhD,QAAA,EAAgD,SAAhD;EAEF,CAAA,CAAA;EAAoB,EAAA,CAAA,EADrB,aACqB,CAAA;IACf,GAAA,EADL,iBACK,GADe,iBACf;IAFN,QAAA,EAEM,SAFN;EAIsB,CAAA,CAAA;EAAgC,EAAA,CAAA,EAAtD,aAAsD,CAAA;IAAtD,IAAA,EAAsB,oBAAtB;IACsB,QAAA,EADgC,SAChC;EAA8B,CAAA,CAAA;EAApD,EAAA,CAAA,EAAA,aAAA,CAAA;IAAa,IAAA,EAAS,kBAAT;IAaP,QAAA,EAb8C,SAa7B;EAErB,CAAA,CAAA;CAcM;;AAMF,KAtBA,iBAAA,GAsBA;EAAS;EAcR,KAAA,EAlCL,UA+DP;;;;;;;;;;;;;eAjDa,mBAAmB;;;;;aAMrB;;;;;;;;;;;;;cAcC,cAAc,GAAG"}
|
package/dist/PrismicTable.js
CHANGED
|
@@ -1,28 +1,75 @@
|
|
|
1
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
import { isFilled } from "@prismicio/client";
|
|
3
1
|
import { PrismicRichText } from "./PrismicRichText.js";
|
|
2
|
+
import { isFilled } from "@prismicio/client";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
|
|
5
|
+
//#region src/PrismicTable.tsx
|
|
4
6
|
const defaultComponents = {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
table: ({ children }) => /* @__PURE__ */ jsx("table", { children }),
|
|
8
|
+
thead: ({ children }) => /* @__PURE__ */ jsx("thead", { children }),
|
|
9
|
+
tbody: ({ children }) => /* @__PURE__ */ jsx("tbody", { children }),
|
|
10
|
+
tr: ({ children }) => /* @__PURE__ */ jsx("tr", { children }),
|
|
11
|
+
th: ({ children }) => /* @__PURE__ */ jsx("th", { children }),
|
|
12
|
+
td: ({ children }) => /* @__PURE__ */ jsx("td", { children })
|
|
11
13
|
};
|
|
14
|
+
/**
|
|
15
|
+
* Renders content from a Prismic table field as React components.
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
*
|
|
19
|
+
* ```tsx
|
|
20
|
+
* <PrismicTable field={slice.primary.pricing_table} />;
|
|
21
|
+
* ```
|
|
22
|
+
*
|
|
23
|
+
* @see Learn how to style tables and customize table element components: {@link https://prismic.io/docs/fields/table}
|
|
24
|
+
*/
|
|
12
25
|
const PrismicTable = (props) => {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
26
|
+
const { field, components, fallback = null } = props;
|
|
27
|
+
if (!isFilled.table(field)) return fallback;
|
|
28
|
+
const { table: Table, thead: Thead, tbody: Tbody } = {
|
|
29
|
+
...defaultComponents,
|
|
30
|
+
...components
|
|
31
|
+
};
|
|
32
|
+
return /* @__PURE__ */ jsxs(Table, {
|
|
33
|
+
table: field,
|
|
34
|
+
children: [field.head && /* @__PURE__ */ jsx(Thead, {
|
|
35
|
+
head: field.head,
|
|
36
|
+
children: field.head.rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
|
|
37
|
+
row,
|
|
38
|
+
components
|
|
39
|
+
}, row.key))
|
|
40
|
+
}), /* @__PURE__ */ jsx(Tbody, {
|
|
41
|
+
body: field.body,
|
|
42
|
+
children: field.body.rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
|
|
43
|
+
row,
|
|
44
|
+
components
|
|
45
|
+
}, row.key))
|
|
46
|
+
})]
|
|
47
|
+
});
|
|
19
48
|
};
|
|
20
49
|
function TableRow(props) {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
50
|
+
const { row, components } = props;
|
|
51
|
+
const { tr: Tr, th: Th, td: Td } = {
|
|
52
|
+
...defaultComponents,
|
|
53
|
+
...components
|
|
54
|
+
};
|
|
55
|
+
return /* @__PURE__ */ jsx(Tr, {
|
|
56
|
+
row,
|
|
57
|
+
children: row.cells.map((cell) => cell.type === "header" ? /* @__PURE__ */ jsx(Th, {
|
|
58
|
+
cell,
|
|
59
|
+
children: /* @__PURE__ */ jsx(PrismicRichText, {
|
|
60
|
+
field: cell.content,
|
|
61
|
+
components
|
|
62
|
+
})
|
|
63
|
+
}, cell.key) : /* @__PURE__ */ jsx(Td, {
|
|
64
|
+
cell,
|
|
65
|
+
children: /* @__PURE__ */ jsx(PrismicRichText, {
|
|
66
|
+
field: cell.content,
|
|
67
|
+
components
|
|
68
|
+
})
|
|
69
|
+
}, cell.key))
|
|
70
|
+
});
|
|
24
71
|
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
};
|
|
28
|
-
//# sourceMappingURL=PrismicTable.js.map
|
|
72
|
+
|
|
73
|
+
//#endregion
|
|
74
|
+
export { PrismicTable };
|
|
75
|
+
//# sourceMappingURL=PrismicTable.js.map
|