@starlightcms/react-sdk 3.0.0-beta.1 → 3.0.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.
- package/dist/cjs/VisualContent/blocks/HTML/index.d.ts.map +1 -1
- package/dist/cjs/VisualContent/blocks/HTML/index.js +4 -4
- package/dist/cjs/VisualContent/blocks/HTML/index.js.map +1 -1
- package/dist/cjs/VisualContent/blocks/Header.d.ts.map +1 -1
- package/dist/cjs/VisualContent/blocks/Header.js +5 -1
- package/dist/cjs/VisualContent/blocks/Header.js.map +1 -1
- package/dist/cjs/VisualContent/blocks/Image/index.d.ts.map +1 -1
- package/dist/cjs/VisualContent/blocks/Image/index.js +6 -3
- package/dist/cjs/VisualContent/blocks/Image/index.js.map +1 -1
- package/dist/cjs/VisualContent/blocks/List/index.d.ts.map +1 -1
- package/dist/cjs/VisualContent/blocks/List/index.js +7 -7
- package/dist/cjs/VisualContent/blocks/List/index.js.map +1 -1
- package/dist/cjs/VisualContent/blocks/Paragraph.d.ts.map +1 -1
- package/dist/cjs/VisualContent/blocks/Paragraph.js +6 -2
- package/dist/cjs/VisualContent/blocks/Paragraph.js.map +1 -1
- package/dist/cjs/VisualContent/blocks/Video/index.d.ts.map +1 -1
- package/dist/cjs/VisualContent/blocks/Video/index.js +6 -3
- package/dist/cjs/VisualContent/blocks/Video/index.js.map +1 -1
- package/dist/cjs/VisualContent/index.d.ts.map +1 -1
- package/dist/cjs/VisualContent/index.js.map +1 -1
- package/dist/esm/VisualContent/blocks/HTML/index.d.ts.map +1 -1
- package/dist/esm/VisualContent/blocks/HTML/index.js +4 -4
- package/dist/esm/VisualContent/blocks/HTML/index.js.map +1 -1
- package/dist/esm/VisualContent/blocks/Header.d.ts.map +1 -1
- package/dist/esm/VisualContent/blocks/Header.js +5 -1
- package/dist/esm/VisualContent/blocks/Header.js.map +1 -1
- package/dist/esm/VisualContent/blocks/Image/index.d.ts.map +1 -1
- package/dist/esm/VisualContent/blocks/Image/index.js +6 -3
- package/dist/esm/VisualContent/blocks/Image/index.js.map +1 -1
- package/dist/esm/VisualContent/blocks/List/index.d.ts.map +1 -1
- package/dist/esm/VisualContent/blocks/List/index.js +7 -7
- package/dist/esm/VisualContent/blocks/List/index.js.map +1 -1
- package/dist/esm/VisualContent/blocks/Paragraph.d.ts.map +1 -1
- package/dist/esm/VisualContent/blocks/Paragraph.js +6 -2
- package/dist/esm/VisualContent/blocks/Paragraph.js.map +1 -1
- package/dist/esm/VisualContent/blocks/Video/index.d.ts.map +1 -1
- package/dist/esm/VisualContent/blocks/Video/index.js +6 -3
- package/dist/esm/VisualContent/blocks/Video/index.js.map +1 -1
- package/dist/esm/VisualContent/index.d.ts.map +1 -1
- package/dist/esm/VisualContent/index.js.map +1 -1
- package/dist/styles.css +71 -4
- package/dist/styles.css.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/HTML/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AACjE,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;GAUG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/HTML/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AACjE,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;GAUG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,CAWxC,CAAA;AAED,eAAe,IAAI,CAAA"}
|
|
@@ -15,9 +15,9 @@ const react_1 = __importDefault(require("react"));
|
|
|
15
15
|
* type of data this component receives.
|
|
16
16
|
* @group VisualContent Renderers
|
|
17
17
|
*/
|
|
18
|
-
const HTML = ({ data }) => {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
};
|
|
18
|
+
const HTML = ({ data }) => (react_1.default.createElement("div", { className: `sl-content-block sl-html
|
|
19
|
+
${data.isStretched ? 'sl-stretched' : ''}
|
|
20
|
+
` },
|
|
21
|
+
react_1.default.createElement("div", { className: "sl-html__root", dangerouslySetInnerHTML: { __html: data.html } })));
|
|
22
22
|
exports.default = HTML;
|
|
23
23
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/HTML/index.tsx"],"names":[],"mappings":";;;;;AACA,kDAAiC;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,IAAI,GAAmC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/HTML/index.tsx"],"names":[],"mappings":";;;;;AACA,kDAAiC;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,IAAI,GAAmC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CACzD,uCACE,SAAS,EAAE;MACT,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACvC;IAED,uCACE,SAAS,EAAC,eAAe,EACzB,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAC9C,CACE,CACP,CAAA;AAED,kBAAe,IAAI,CAAA","sourcesContent":["import { HTMLBlock, VisualDataBlock } from '@starlightcms/js-sdk'\nimport React, { FC } from 'react'\n\n/**\n * VisualContent renderer component that renders `raw` type blocks\n * as inline HTML inside a `div` element.\n *\n * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n *\n * @param props VisualDataBlock object. See {@link HTMLBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst HTML: FC<VisualDataBlock<HTMLBlock>> = ({ data }) => (\n <div\n className={`sl-content-block sl-html \n ${data.isStretched ? 'sl-stretched' : ''}\n `}\n >\n <div\n className=\"sl-html__root\"\n dangerouslySetInnerHTML={{ __html: data.html }}\n />\n </div>\n)\n\nexport default HTML\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAGnE;;;;;;;;;;GAUG;AACH,QAAA,MAAM,MAAM,GAAI,UAAU,eAAe,CAAC,WAAW,CAAC,KAAG,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAGnE;;;;;;;;;;GAUG;AACH,QAAA,MAAM,MAAM,GAAI,UAAU,eAAe,CAAC,WAAW,CAAC,KAAG,GAAG,CAAC,OAe5D,CAAA;AAED,eAAe,MAAM,CAAA"}
|
|
@@ -16,8 +16,12 @@ const react_1 = __importDefault(require("react"));
|
|
|
16
16
|
* @group VisualContent Renderers
|
|
17
17
|
*/
|
|
18
18
|
const Header = ({ data }) => {
|
|
19
|
+
const { alignment, isStretched } = data;
|
|
19
20
|
const HeaderComponent = `h${data.level}`;
|
|
20
|
-
return (react_1.default.createElement("div", { className:
|
|
21
|
+
return (react_1.default.createElement("div", { className: `sl-content-block sl-header
|
|
22
|
+
${alignment ? `sl-alignment-${alignment}` : ''}
|
|
23
|
+
${isStretched ? 'sl-stretched' : ''}
|
|
24
|
+
` },
|
|
21
25
|
react_1.default.createElement(HeaderComponent, { dangerouslySetInnerHTML: { __html: data.text } })));
|
|
22
26
|
};
|
|
23
27
|
exports.default = Header;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":";;;;;AACA,kDAAyB;AAEzB;;;;;;;;;;GAUG;AACH,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAgC,EAAe,EAAE;IACrE,MAAM,eAAe,GAAG,IAAI,IAAI,CAAC,KAAK,EAAU,CAAA;IAEhD,OAAO,CACL,
|
|
1
|
+
{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":";;;;;AACA,kDAAyB;AAEzB;;;;;;;;;;GAUG;AACH,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAgC,EAAe,EAAE;IACrE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,IAAI,CAAA;IAEvC,MAAM,eAAe,GAAG,IAAI,IAAI,CAAC,KAAK,EAAU,CAAA;IAEhD,OAAO,CACL,uCACE,SAAS,EAAE;QACT,SAAS,CAAC,CAAC,CAAC,gBAAgB,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE;QAC5C,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;OAClC;QAED,8BAAC,eAAe,IAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAAI,CAC/D,CACP,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,MAAM,CAAA","sourcesContent":["import { HeaderBlock, VisualDataBlock } from '@starlightcms/js-sdk'\nimport React from 'react'\n\n/**\n * VisualContent renderer component that renders `header` type blocks\n * as HTML heading elements, like `<h1>`, `<h2>`, and so on.\n *\n * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n *\n * @param props VisualDataBlock object. See {@link HeaderBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst Header = ({ data }: VisualDataBlock<HeaderBlock>): JSX.Element => {\n const { alignment, isStretched } = data\n\n const HeaderComponent = `h${data.level}` as 'h1'\n\n return (\n <div\n className={`sl-content-block sl-header \n ${alignment ? `sl-alignment-${alignment}` : ''}\n ${isStretched ? 'sl-stretched' : ''}\n `}\n >\n <HeaderComponent dangerouslySetInnerHTML={{ __html: data.text }} />\n </div>\n )\n}\n\nexport default Header\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAClE,OAAc,EAAE,EAAE,EAAgC,MAAM,OAAO,CAAA;AAE/D;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAClE,OAAc,EAAE,EAAE,EAAgC,MAAM,OAAO,CAAA;AAE/D;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,GAAG,YAAY,CA2GzD,CAAA;AAED,eAAe,KAAK,CAAA"}
|
|
@@ -52,7 +52,7 @@ const react_1 = __importStar(require("react"));
|
|
|
52
52
|
* @group VisualContent Renderers
|
|
53
53
|
*/
|
|
54
54
|
const Image = ({ data, sizes = '(max-width: 480px) 90vw, 70vw', }) => {
|
|
55
|
-
const { url, alt = '', files, caption, width, href, responsive } = data;
|
|
55
|
+
const { url, alt = '', files, caption, width, href, responsive, alignment, isStretched, } = data;
|
|
56
56
|
const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed';
|
|
57
57
|
const [target, setTarget] = (0, react_1.useState)('_self');
|
|
58
58
|
const [originalWidth, setOriginalWidth] = (0, react_1.useState)(undefined);
|
|
@@ -92,8 +92,11 @@ const Image = ({ data, sizes = '(max-width: 480px) 90vw, 70vw', }) => {
|
|
|
92
92
|
const optimizedFile = files.find((f) => f.variation === 'optimized');
|
|
93
93
|
setOriginalWidth(optimizedFile ? optimizedFile.width.toString() + 'px' : undefined);
|
|
94
94
|
}, []);
|
|
95
|
-
return (react_1.default.createElement("div", { className: `sl-content-block sl-image
|
|
96
|
-
|
|
95
|
+
return (react_1.default.createElement("div", { className: `sl-content-block sl-image
|
|
96
|
+
${alignment ? `sl-alignment-${alignment}` : ''}
|
|
97
|
+
${isStretched || widthType === 'max' ? 'sl-stretched' : ''}
|
|
98
|
+
` },
|
|
99
|
+
react_1.default.createElement("figure", { className: `sl-figure sl-image--width-${widthType}`, style: {
|
|
97
100
|
width: calculatedWidth,
|
|
98
101
|
maxWidth: calculatedMaxWidth,
|
|
99
102
|
} },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,+CAA+D;AAS/D;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,KAAK,GAAmD,CAAC,EAC7D,IAAI,EACJ,KAAK,GAAG,+BAA+B,GACxC,EAAE,EAAE;IACH,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ImageBlock, VisualDataBlock } from '@starlightcms/js-sdk'\nimport React, { FC, useEffect, useMemo, useState } from 'react'\n\n/**\n * Type used by {@link ImageComponent} to accept a `sizes` prop.\n */\nexport type ImageOptions = {\n sizes?: string\n}\n\n/**\n * VisualContent renderer component that renders `image` type blocks\n * as a responsive image along with its caption (if defined). Optionally\n * wraps the image in an anchor if a link is defined in the content.\n *\n * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n *\n * This component also supports an optional `sizes` prop to provide better image\n * responsiveness, see {@doclink components/VisualContent/#responsive-images | the guide page on responsive images}\n * to learn more.\n *\n * @param props VisualDataBlock object. See {@link ImageBlock} to learn the\n * type of data this component receives. Also accepts\n * an optional `sizes` string prop.\n * @group VisualContent Renderers\n */\nconst Image: FC<VisualDataBlock<ImageBlock> & ImageOptions> = ({\n data,\n sizes = '(max-width: 480px) 90vw, 70vw',\n}) => {\n const {\n url,\n alt = '',\n files,\n caption,\n width,\n href,\n responsive,\n alignment,\n isStretched,\n } = data\n\n const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed'\n\n const [target, setTarget] = useState('_self')\n const [originalWidth, setOriginalWidth] = useState<string | undefined>(\n undefined\n )\n\n const calculatedWidth = useMemo(() => {\n switch (width) {\n case 'auto':\n return 'auto'\n case 'justify':\n case 'max':\n return '100%'\n default:\n return width\n }\n }, [width])\n\n const calculatedMaxWidth = useMemo(() => {\n if (responsive && originalWidth && width === 'auto') return originalWidth\n\n switch (width) {\n case 'auto':\n return '100%'\n case 'justify':\n case 'max':\n return 'initial'\n default:\n return originalWidth\n }\n }, [width, responsive, originalWidth])\n\n const srcSet = useMemo(() => {\n return data.files.map((file) => `${file.url} ${file.width}w`).join(', ')\n }, [data])\n\n useEffect(() => {\n if (!href) return\n\n setTarget(\n new URL(href).origin === window.location.origin ? '_self' : '_blank'\n )\n }, [href])\n\n useEffect(() => {\n const optimizedFile = files.find((f) => f.variation === 'optimized')\n setOriginalWidth(\n optimizedFile ? optimizedFile.width.toString() + 'px' : undefined\n )\n }, [])\n\n return (\n <div\n className={`sl-content-block sl-image \n ${alignment ? `sl-alignment-${alignment}` : ''} \n ${isStretched || widthType === 'max' ? 'sl-stretched' : ''}\n `}\n >\n <figure\n className={`sl-figure sl-image--width-${widthType}`}\n style={{\n width: calculatedWidth,\n maxWidth: calculatedMaxWidth,\n }}\n >\n {href ? (\n <a href={href} target={target}>\n <img\n className=\"sl-image__img\"\n src={url}\n alt={alt}\n srcSet={srcSet}\n sizes={responsive ? sizes : undefined}\n />\n </a>\n ) : (\n <img\n className=\"sl-image__img\"\n src={url}\n alt={alt}\n srcSet={srcSet}\n sizes={responsive ? sizes : undefined}\n />\n )}\n {caption && (\n <figcaption dangerouslySetInnerHTML={{ __html: caption }} />\n )}\n </figure>\n </div>\n )\n}\n\nexport default Image\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAC3E,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAC3E,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAqBjC;;;;;;;;;;GAUG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,CAgBxC,CAAA;AAED,eAAe,IAAI,CAAA"}
|
|
@@ -4,12 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
const react_1 = __importDefault(require("react"));
|
|
7
|
-
const SubList = ({ item, Wrapper }) =>
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
item.items
|
|
11
|
-
item.items.map((subItem, index) => (react_1.default.createElement(SubList, { key: index, item: subItem, Wrapper: Wrapper }))))) : null));
|
|
12
|
-
};
|
|
7
|
+
const SubList = ({ item, Wrapper }) => (react_1.default.createElement("li", null,
|
|
8
|
+
react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: item.content } }),
|
|
9
|
+
item.items && item.items.length ? (react_1.default.createElement(Wrapper, null, item.items &&
|
|
10
|
+
item.items.map((subItem, index) => (react_1.default.createElement(SubList, { key: index, item: subItem, Wrapper: Wrapper }))))) : null));
|
|
13
11
|
/**
|
|
14
12
|
* VisualContent renderer component that renders `list` type blocks
|
|
15
13
|
* as `<ul>` or `<ol>` elements, depending on the list style.
|
|
@@ -23,7 +21,9 @@ const SubList = ({ item, Wrapper }) => {
|
|
|
23
21
|
*/
|
|
24
22
|
const List = ({ data }) => {
|
|
25
23
|
const ListWrapper = data.style === 'ordered' ? 'ol' : 'ul';
|
|
26
|
-
return (react_1.default.createElement("div", { className:
|
|
24
|
+
return (react_1.default.createElement("div", { className: `sl-content-block sl-list
|
|
25
|
+
${data.isStretched ? 'sl-stretched' : ''}
|
|
26
|
+
` },
|
|
27
27
|
react_1.default.createElement(ListWrapper, { className: "sl-list__root" }, data.items.map((item, index) => (react_1.default.createElement(SubList, { key: index, item: item, Wrapper: ListWrapper }))))));
|
|
28
28
|
};
|
|
29
29
|
exports.default = List;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/List/index.tsx"],"names":[],"mappings":";;;;;AACA,kDAAiC;AAOjC,MAAM,OAAO,GAAqB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/List/index.tsx"],"names":[],"mappings":";;;;;AACA,kDAAiC;AAOjC,MAAM,OAAO,GAAqB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CACvD;IACE,wCAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,GAAI;IAC1D,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACjC,8BAAC,OAAO,QACL,IAAI,CAAC,KAAK;QACT,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CACjC,8BAAC,OAAO,IAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAI,CACzD,CAAC,CACI,CACX,CAAC,CAAC,CAAC,IAAI,CACL,CACN,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,IAAI,GAAmC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACxD,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;IAE1D,OAAO,CACL,uCACE,SAAS,EAAE;QACT,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;OACvC;QAED,8BAAC,WAAW,IAAC,SAAS,EAAC,eAAe,IACnC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,8BAAC,OAAO,IAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,GAAI,CAC1D,CAAC,CACU,CACV,CACP,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,IAAI,CAAA","sourcesContent":["import { ListBlock, ListItem, VisualDataBlock } from '@starlightcms/js-sdk'\nimport React, { FC } from 'react'\n\ntype SubListProps = {\n item: ListItem\n Wrapper: 'ul' | 'ol'\n}\n\nconst SubList: FC<SubListProps> = ({ item, Wrapper }) => (\n <li>\n <span dangerouslySetInnerHTML={{ __html: item.content }} />\n {item.items && item.items.length ? (\n <Wrapper>\n {item.items &&\n item.items.map((subItem, index) => (\n <SubList key={index} item={subItem} Wrapper={Wrapper} />\n ))}\n </Wrapper>\n ) : null}\n </li>\n)\n\n/**\n * VisualContent renderer component that renders `list` type blocks\n * as `<ul>` or `<ol>` elements, depending on the list style.\n *\n * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n *\n * @param props VisualDataBlock object. See {@link ListBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst List: FC<VisualDataBlock<ListBlock>> = ({ data }) => {\n const ListWrapper = data.style === 'ordered' ? 'ol' : 'ul'\n\n return (\n <div\n className={`sl-content-block sl-list\n ${data.isStretched ? 'sl-stretched' : ''}\n `}\n >\n <ListWrapper className=\"sl-list__root\">\n {data.items.map((item, index) => (\n <SubList key={index} item={item} Wrapper={ListWrapper} />\n ))}\n </ListWrapper>\n </div>\n )\n}\n\nexport default List\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Paragraph.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AACtE,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,eAAe,CAAC,cAAc,CAAC,
|
|
1
|
+
{"version":3,"file":"Paragraph.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AACtE,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,eAAe,CAAC,cAAc,CAAC,CAqBlD,CAAA;AAED,eAAe,SAAS,CAAA"}
|
|
@@ -17,11 +17,15 @@ const react_1 = __importDefault(require("react"));
|
|
|
17
17
|
* @group VisualContent Renderers
|
|
18
18
|
*/
|
|
19
19
|
const Paragraph = ({ data }) => {
|
|
20
|
+
const { alignment, isStretched } = data;
|
|
21
|
+
const baseClasses = `sl-content-block sl-paragraph
|
|
22
|
+
${alignment ? `sl-alignment-${alignment}` : ''}
|
|
23
|
+
${isStretched ? 'sl-stretched' : ''}`;
|
|
20
24
|
if (!data.text)
|
|
21
|
-
return (react_1.default.createElement("div", { className:
|
|
25
|
+
return (react_1.default.createElement("div", { className: `${baseClasses} empty`, "aria-hidden": true },
|
|
22
26
|
react_1.default.createElement("p", null,
|
|
23
27
|
react_1.default.createElement("br", null))));
|
|
24
|
-
return (react_1.default.createElement("div", { className:
|
|
28
|
+
return (react_1.default.createElement("div", { className: baseClasses },
|
|
25
29
|
react_1.default.createElement("p", { dangerouslySetInnerHTML: { __html: data.text } })));
|
|
26
30
|
};
|
|
27
31
|
exports.default = Paragraph;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Paragraph.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":";;;;;AACA,kDAAiC;AAEjC;;;;;;;;;;;GAWG;AACH,MAAM,SAAS,GAAwC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,IAAI,CAAC,IAAI,CAAC,IAAI;QACZ,OAAO,CACL,uCAAK,SAAS,
|
|
1
|
+
{"version":3,"file":"Paragraph.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":";;;;;AACA,kDAAiC;AAEjC;;;;;;;;;;;GAWG;AACH,MAAM,SAAS,GAAwC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,IAAI,CAAA;IAEvC,MAAM,WAAW,GAAG;UACZ,SAAS,CAAC,CAAC,CAAC,gBAAgB,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE;UAC5C,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,CAAA;IAE3C,IAAI,CAAC,IAAI,CAAC,IAAI;QACZ,OAAO,CACL,uCAAK,SAAS,EAAE,GAAG,WAAW,QAAQ;YACpC;gBACE,yCAAM,CACJ,CACA,CACP,CAAA;IAEH,OAAO,CACL,uCAAK,SAAS,EAAE,WAAW;QACzB,qCAAG,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAAI,CACjD,CACP,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,SAAS,CAAA","sourcesContent":["import { ParagraphBlock, VisualDataBlock } from '@starlightcms/js-sdk'\nimport React, { FC } from 'react'\n\n/**\n * VisualContent renderer component that renders `paragraph` type blocks\n * as `<p>` elements. Empty paragraph blocks (generally used to break\n * lines) will have an `empty` class added to them.\n *\n * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n *\n * @param props VisualDataBlock object. See {@link ParagraphBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst Paragraph: FC<VisualDataBlock<ParagraphBlock>> = ({ data }) => {\n const { alignment, isStretched } = data\n\n const baseClasses = `sl-content-block sl-paragraph \n ${alignment ? `sl-alignment-${alignment}` : ''}\n ${isStretched ? 'sl-stretched' : ''}`\n\n if (!data.text)\n return (\n <div className={`${baseClasses} empty`} aria-hidden>\n <p>\n <br />\n </p>\n </div>\n )\n\n return (\n <div className={baseClasses}>\n <p dangerouslySetInnerHTML={{ __html: data.text }} />\n </div>\n )\n}\n\nexport default Paragraph\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Video/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAClE,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;GAUG;AACH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Video/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAClE,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;GAUG;AACH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,CAwB1C,CAAA;AAED,eAAe,KAAK,CAAA"}
|
|
@@ -16,10 +16,13 @@ const react_1 = __importDefault(require("react"));
|
|
|
16
16
|
* @group VisualContent Renderers
|
|
17
17
|
*/
|
|
18
18
|
const Video = ({ data }) => {
|
|
19
|
-
const { html, width, caption } = data;
|
|
19
|
+
const { html, width, caption, alignment, isStretched } = data;
|
|
20
20
|
const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed';
|
|
21
|
-
return (react_1.default.createElement("div", { className: `sl-content-block sl-video
|
|
22
|
-
|
|
21
|
+
return (react_1.default.createElement("div", { className: `sl-content-block sl-video
|
|
22
|
+
${alignment ? `sl-alignment-${alignment}` : ''}
|
|
23
|
+
${isStretched || widthType === 'max' ? 'sl-stretched' : ''}
|
|
24
|
+
` },
|
|
25
|
+
react_1.default.createElement("figure", { className: `sl-figure sl-video--width-${widthType}` },
|
|
23
26
|
react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: html }, style: { maxWidth: widthType === 'fixed' ? `${width}` : undefined } }),
|
|
24
27
|
caption && (react_1.default.createElement("figcaption", { dangerouslySetInnerHTML: { __html: caption } })))));
|
|
25
28
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Video/index.tsx"],"names":[],"mappings":";;;;;AACA,kDAAiC;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,KAAK,GAAoC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,IAAI,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Video/index.tsx"],"names":[],"mappings":";;;;;AACA,kDAAiC;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,KAAK,GAAoC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,IAAI,CAAA;IAE7D,MAAM,SAAS,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAA;IAE9E,OAAO,CACL,uCACE,SAAS,EAAE;QACT,SAAS,CAAC,CAAC,CAAC,gBAAgB,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE;QAC5C,WAAW,IAAI,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;OACzD;QAED,0CAAQ,SAAS,EAAE,6BAA6B,SAAS,EAAE;YACzD,uCACE,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,EACzC,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,GACnE;YAED,OAAO,IAAI,CACV,8CAAY,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAAI,CAC7D,CACM,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,KAAK,CAAA","sourcesContent":["import { VideoBlock, VisualDataBlock } from '@starlightcms/js-sdk'\nimport React, { FC } from 'react'\n\n/**\n * VisualContent renderer component that renders `video` type blocks\n * as a responsive video along with its caption (if defined).\n *\n * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n *\n * @param props VisualDataBlock object. See {@link VideoBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst Video: FC<VisualDataBlock<VideoBlock>> = ({ data }) => {\n const { html, width, caption, alignment, isStretched } = data\n\n const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed'\n\n return (\n <div\n className={`sl-content-block sl-video \n ${alignment ? `sl-alignment-${alignment}` : ''}\n ${isStretched || widthType === 'max' ? 'sl-stretched' : ''}\n `}\n >\n <figure className={`sl-figure sl-video--width-${widthType}`}>\n <div\n dangerouslySetInnerHTML={{ __html: html }}\n style={{ maxWidth: widthType === 'fixed' ? `${width}` : undefined }}\n />\n\n {caption && (\n <figcaption dangerouslySetInnerHTML={{ __html: caption }} />\n )}\n </figure>\n </div>\n )\n}\n\nexport default Video\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmB,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAE1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAYlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,eAAO,MAAM,aAAa,GAAI,kDAK3B,kBAAkB,KAAG,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmB,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAE1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAYlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,eAAO,MAAM,aAAa,GAAI,kDAK3B,kBAAkB,KAAG,GAAG,CAAC,OAoD3B,CAAA;AAED,OAAO,EACL,SAAS,IAAI,kBAAkB,EAC/B,MAAM,IAAI,eAAe,EACzB,KAAK,IAAI,cAAc,EACvB,KAAK,IAAI,cAAc,EACvB,IAAI,IAAI,aAAa,EACrB,IAAI,IAAI,aAAa,EACrB,KAAK,IAAI,cAAc,GACxB,CAAA;AAED,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIZ,2DAAoD;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIZ,2DAAoD;AAqIzC,yBArIJ,eAAK,CAqIa;AApIzB,mEAA0C;AAiI3B,6BAjIR,mBAAS,CAiIiB;AAhIjC,+CAAsC;AACtC,6DAAoC;AAgIxB,0BAhIL,gBAAM,CAgIc;AA/H3B,2DAAkC;AAgIvB,yBAhIJ,eAAK,CAgIa;AA/HzB,yDAAgC;AAiItB,wBAjIH,cAAI,CAiIY;AAhIvB,yDAAgC;AAiItB,wBAjIH,cAAI,CAiIY;AAhIvB,2DAAkC;AAiIvB,yBAjIJ,eAAK,CAiIa;AA/HzB,MAAM,iBAAiB,GAAoB;IACzC,SAAS,EAAE,mBAAS;IACpB,MAAM,EAAE,gBAAM;IACd,KAAK,EAAE,eAAK;IACZ,KAAK,EAAE,eAAK;IACZ,GAAG,EAAE,cAAI;IACT,IAAI,EAAE,cAAI;IACV,KAAK,EAAE,eAAK;CACb,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,OAAO,EACP,UAAU,GAAG,EAAE,EACf,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,EAAE,GACC,EAAe,EAAE;IACpC,MAAM,aAAa,GAAG,IAAA,eAAO,EAC3B,GAAG,EAAE,CAAC,iCAAM,iBAAiB,GAAK,UAAU,EAAG,EAC/C,CAAC,UAAU,CAAC,CACb,CAAA;IAED,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,IAA8B,CAAA;IACvC,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACZ,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,WAAW,CAE1D,CAAA;QAEb,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,IAA8B,CAAA;QAErE,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QACvC,MAAM,WAAW,GACf,IAAI,CAAC,MAAM,GAAG,aAAa;YACzB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK;YACjD,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QACpB,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAA;QAEzC,OAAO,CACL,8BAAC,SAAS,IACR,GAAG,EAAE,KAAK,CAAC,EAAE,EACb,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAoB,GAC7C,CACH,CAAA;IACH,CAAC;IAED,OAAO,CACL,uCAAK,SAAS,EAAC,mBAAmB,IAC/B,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QAC5B,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAE3C,IAAI,CAAC,SAAS;YAAE,OAAO,IAAI,CAAA;QAE3B,OAAO,CACL,8BAAC,SAAS,IACR,GAAG,EAAE,KAAK,CAAC,EAAE,EACb,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAa,GACzB,CACH,CAAA;IACH,CAAC,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAzDY,QAAA,aAAa,iBAyDzB","sourcesContent":["'use client'\n\nimport { VisualDataBlock, ParagraphBlock } from '@starlightcms/js-sdk'\nimport { BlockComponents, VisualContentProps } from './types'\nimport Image, { ImageOptions } from './blocks/Image'\nimport Paragraph from './blocks/Paragraph'\nimport React, { useMemo } from 'react'\nimport Header from './blocks/Header'\nimport Quote from './blocks/Quote'\nimport HTML from './blocks/HTML'\nimport List from './blocks/List'\nimport Video from './blocks/Video'\n\nconst defaultComponents: BlockComponents = {\n paragraph: Paragraph,\n header: Header,\n quote: Quote,\n image: Image,\n raw: HTML,\n list: List,\n video: Video,\n}\n\n/**\n * Renders HTML content from data returned by a Visual Editor field on Starlight.\n *\n * The only required prop is `content`, which is the data returned by a Visual\n * Editor field. Additionally, you can provide custom components to render each\n * data block type.\n *\n * You can also pass the `excerpt` boolean prop to only render a portion of the\n * content, which is useful to summarize the content in lists.\n *\n * To learn how to customize the rendered content, take a look at the\n * [Customizing the output](#) guide page.\n *\n * @example Requesting an entry and rendering its content.\n *\n * Assume we created a \"Posts\" model with a slug of `posts`, and placed a Visual\n * Editor field with a key of `post_content` on it.\n *\n * ```jsx\n * import Starlight, { VisualContent } from '@starlightcms/react-sdk'\n *\n * const EntryComponent = ({ slug }) => {\n * const [entry, setEntry] = useState(null)\n *\n * // This is just an example, you could fetch\n * // the entry any way you want.\n * useEffect(async () => {\n * const response = await Starlight.posts.entries.get(slug)\n *\n * setEntry(response.data)\n * }, [ slug ])\n *\n * // After fetching, content will be on the `entry.data.post_content` property.\n * return (\n * entry ? (\n * <article>\n * <h1>{entry.title}</h1>\n * <VisualContent content={entry.data.post_content} />\n * </article>\n * ) : (\n * <div>Loading...</div>\n * )\n * )\n * }\n *\n * ```\n *\n * @param props Component props. See {@link VisualContentProps} to see the\n * available options.\n * @group VisualContent\n */\nexport const VisualContent = ({\n content,\n components = {},\n excerpt = false,\n excerptLength = 40,\n}: VisualContentProps): JSX.Element => {\n const componentList = useMemo(\n () => ({ ...defaultComponents, ...components }),\n [components]\n )\n\n if (!content) {\n return null as unknown as JSX.Element\n }\n\n if (excerpt) {\n const block = content.blocks.find((block) => block.type === 'paragraph') as\n | VisualDataBlock<ParagraphBlock>\n | undefined\n\n if (!block || !block.data.text) return null as unknown as JSX.Element\n\n const text = block.data.text.split(' ')\n const excerptText =\n text.length > excerptLength\n ? text.splice(0, excerptLength).join(' ') + '...'\n : text.join(' ')\n const Component = componentList.paragraph\n\n return (\n <Component\n key={block.id}\n id={block.id}\n type={block.type}\n data={{ text: excerptText } as ParagraphBlock}\n />\n )\n }\n\n return (\n <div className=\"sl-visual-content\">\n {content.blocks.map((block) => {\n const Component = componentList[block.type]\n\n if (!Component) return null\n\n return (\n <Component\n key={block.id}\n id={block.id}\n type={block.type}\n data={block.data as never}\n />\n )\n })}\n </div>\n )\n}\n\nexport {\n Paragraph as ParagraphComponent,\n Header as HeaderComponent,\n Quote as QuoteComponent,\n Image as ImageComponent,\n HTML as HTMLComponent,\n List as ListComponent,\n Video as VideoComponent,\n}\n\nexport type { VisualContentProps, ImageOptions }\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/HTML/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AACjE,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;GAUG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/HTML/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AACjE,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;GAUG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,CAWxC,CAAA;AAED,eAAe,IAAI,CAAA"}
|
|
@@ -10,9 +10,9 @@ import React from 'react';
|
|
|
10
10
|
* type of data this component receives.
|
|
11
11
|
* @group VisualContent Renderers
|
|
12
12
|
*/
|
|
13
|
-
const HTML = ({ data }) => {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
};
|
|
13
|
+
const HTML = ({ data }) => (React.createElement("div", { className: `sl-content-block sl-html
|
|
14
|
+
${data.isStretched ? 'sl-stretched' : ''}
|
|
15
|
+
` },
|
|
16
|
+
React.createElement("div", { className: "sl-html__root", dangerouslySetInnerHTML: { __html: data.html } })));
|
|
17
17
|
export default HTML;
|
|
18
18
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/HTML/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAa,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,IAAI,GAAmC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/HTML/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAa,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,IAAI,GAAmC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CACzD,6BACE,SAAS,EAAE;MACT,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACvC;IAED,6BACE,SAAS,EAAC,eAAe,EACzB,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAC9C,CACE,CACP,CAAA;AAED,eAAe,IAAI,CAAA","sourcesContent":["import { HTMLBlock, VisualDataBlock } from '@starlightcms/js-sdk'\nimport React, { FC } from 'react'\n\n/**\n * VisualContent renderer component that renders `raw` type blocks\n * as inline HTML inside a `div` element.\n *\n * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n *\n * @param props VisualDataBlock object. See {@link HTMLBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst HTML: FC<VisualDataBlock<HTMLBlock>> = ({ data }) => (\n <div\n className={`sl-content-block sl-html \n ${data.isStretched ? 'sl-stretched' : ''}\n `}\n >\n <div\n className=\"sl-html__root\"\n dangerouslySetInnerHTML={{ __html: data.html }}\n />\n </div>\n)\n\nexport default HTML\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAGnE;;;;;;;;;;GAUG;AACH,QAAA,MAAM,MAAM,GAAI,UAAU,eAAe,CAAC,WAAW,CAAC,KAAG,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAGnE;;;;;;;;;;GAUG;AACH,QAAA,MAAM,MAAM,GAAI,UAAU,eAAe,CAAC,WAAW,CAAC,KAAG,GAAG,CAAC,OAe5D,CAAA;AAED,eAAe,MAAM,CAAA"}
|
|
@@ -11,8 +11,12 @@ import React from 'react';
|
|
|
11
11
|
* @group VisualContent Renderers
|
|
12
12
|
*/
|
|
13
13
|
const Header = ({ data }) => {
|
|
14
|
+
const { alignment, isStretched } = data;
|
|
14
15
|
const HeaderComponent = `h${data.level}`;
|
|
15
|
-
return (React.createElement("div", { className:
|
|
16
|
+
return (React.createElement("div", { className: `sl-content-block sl-header
|
|
17
|
+
${alignment ? `sl-alignment-${alignment}` : ''}
|
|
18
|
+
${isStretched ? 'sl-stretched' : ''}
|
|
19
|
+
` },
|
|
16
20
|
React.createElement(HeaderComponent, { dangerouslySetInnerHTML: { __html: data.text } })));
|
|
17
21
|
};
|
|
18
22
|
export default Header;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;;;;GAUG;AACH,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAgC,EAAe,EAAE;IACrE,MAAM,eAAe,GAAG,IAAI,IAAI,CAAC,KAAK,EAAU,CAAA;IAEhD,OAAO,CACL,
|
|
1
|
+
{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;;;;GAUG;AACH,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAgC,EAAe,EAAE;IACrE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,IAAI,CAAA;IAEvC,MAAM,eAAe,GAAG,IAAI,IAAI,CAAC,KAAK,EAAU,CAAA;IAEhD,OAAO,CACL,6BACE,SAAS,EAAE;QACT,SAAS,CAAC,CAAC,CAAC,gBAAgB,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE;QAC5C,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;OAClC;QAED,oBAAC,eAAe,IAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAAI,CAC/D,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,MAAM,CAAA","sourcesContent":["import { HeaderBlock, VisualDataBlock } from '@starlightcms/js-sdk'\nimport React from 'react'\n\n/**\n * VisualContent renderer component that renders `header` type blocks\n * as HTML heading elements, like `<h1>`, `<h2>`, and so on.\n *\n * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n *\n * @param props VisualDataBlock object. See {@link HeaderBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst Header = ({ data }: VisualDataBlock<HeaderBlock>): JSX.Element => {\n const { alignment, isStretched } = data\n\n const HeaderComponent = `h${data.level}` as 'h1'\n\n return (\n <div\n className={`sl-content-block sl-header \n ${alignment ? `sl-alignment-${alignment}` : ''}\n ${isStretched ? 'sl-stretched' : ''}\n `}\n >\n <HeaderComponent dangerouslySetInnerHTML={{ __html: data.text }} />\n </div>\n )\n}\n\nexport default Header\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAClE,OAAc,EAAE,EAAE,EAAgC,MAAM,OAAO,CAAA;AAE/D;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,GAAG,YAAY,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAClE,OAAc,EAAE,EAAE,EAAgC,MAAM,OAAO,CAAA;AAE/D;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,GAAG,YAAY,CA2GzD,CAAA;AAED,eAAe,KAAK,CAAA"}
|
|
@@ -17,7 +17,7 @@ import React, { useEffect, useMemo, useState } from 'react';
|
|
|
17
17
|
* @group VisualContent Renderers
|
|
18
18
|
*/
|
|
19
19
|
const Image = ({ data, sizes = '(max-width: 480px) 90vw, 70vw', }) => {
|
|
20
|
-
const { url, alt = '', files, caption, width, href, responsive } = data;
|
|
20
|
+
const { url, alt = '', files, caption, width, href, responsive, alignment, isStretched, } = data;
|
|
21
21
|
const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed';
|
|
22
22
|
const [target, setTarget] = useState('_self');
|
|
23
23
|
const [originalWidth, setOriginalWidth] = useState(undefined);
|
|
@@ -57,8 +57,11 @@ const Image = ({ data, sizes = '(max-width: 480px) 90vw, 70vw', }) => {
|
|
|
57
57
|
const optimizedFile = files.find((f) => f.variation === 'optimized');
|
|
58
58
|
setOriginalWidth(optimizedFile ? optimizedFile.width.toString() + 'px' : undefined);
|
|
59
59
|
}, []);
|
|
60
|
-
return (React.createElement("div", { className: `sl-content-block sl-image
|
|
61
|
-
|
|
60
|
+
return (React.createElement("div", { className: `sl-content-block sl-image
|
|
61
|
+
${alignment ? `sl-alignment-${alignment}` : ''}
|
|
62
|
+
${isStretched || widthType === 'max' ? 'sl-stretched' : ''}
|
|
63
|
+
` },
|
|
64
|
+
React.createElement("figure", { className: `sl-figure sl-image--width-${widthType}`, style: {
|
|
62
65
|
width: calculatedWidth,
|
|
63
66
|
maxWidth: calculatedMaxWidth,
|
|
64
67
|
} },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAM,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAS/D;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,KAAK,GAAmD,CAAC,EAC7D,IAAI,EACJ,KAAK,GAAG,+BAA+B,GACxC,EAAE,EAAE;IACH,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ImageBlock, VisualDataBlock } from '@starlightcms/js-sdk'\nimport React, { FC, useEffect, useMemo, useState } from 'react'\n\n/**\n * Type used by {@link ImageComponent} to accept a `sizes` prop.\n */\nexport type ImageOptions = {\n sizes?: string\n}\n\n/**\n * VisualContent renderer component that renders `image` type blocks\n * as a responsive image along with its caption (if defined). Optionally\n * wraps the image in an anchor if a link is defined in the content.\n *\n * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n *\n * This component also supports an optional `sizes` prop to provide better image\n * responsiveness, see {@doclink components/VisualContent/#responsive-images | the guide page on responsive images}\n * to learn more.\n *\n * @param props VisualDataBlock object. See {@link ImageBlock} to learn the\n * type of data this component receives. Also accepts\n * an optional `sizes` string prop.\n * @group VisualContent Renderers\n */\nconst Image: FC<VisualDataBlock<ImageBlock> & ImageOptions> = ({\n data,\n sizes = '(max-width: 480px) 90vw, 70vw',\n}) => {\n const {\n url,\n alt = '',\n files,\n caption,\n width,\n href,\n responsive,\n alignment,\n isStretched,\n } = data\n\n const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed'\n\n const [target, setTarget] = useState('_self')\n const [originalWidth, setOriginalWidth] = useState<string | undefined>(\n undefined\n )\n\n const calculatedWidth = useMemo(() => {\n switch (width) {\n case 'auto':\n return 'auto'\n case 'justify':\n case 'max':\n return '100%'\n default:\n return width\n }\n }, [width])\n\n const calculatedMaxWidth = useMemo(() => {\n if (responsive && originalWidth && width === 'auto') return originalWidth\n\n switch (width) {\n case 'auto':\n return '100%'\n case 'justify':\n case 'max':\n return 'initial'\n default:\n return originalWidth\n }\n }, [width, responsive, originalWidth])\n\n const srcSet = useMemo(() => {\n return data.files.map((file) => `${file.url} ${file.width}w`).join(', ')\n }, [data])\n\n useEffect(() => {\n if (!href) return\n\n setTarget(\n new URL(href).origin === window.location.origin ? '_self' : '_blank'\n )\n }, [href])\n\n useEffect(() => {\n const optimizedFile = files.find((f) => f.variation === 'optimized')\n setOriginalWidth(\n optimizedFile ? optimizedFile.width.toString() + 'px' : undefined\n )\n }, [])\n\n return (\n <div\n className={`sl-content-block sl-image \n ${alignment ? `sl-alignment-${alignment}` : ''} \n ${isStretched || widthType === 'max' ? 'sl-stretched' : ''}\n `}\n >\n <figure\n className={`sl-figure sl-image--width-${widthType}`}\n style={{\n width: calculatedWidth,\n maxWidth: calculatedMaxWidth,\n }}\n >\n {href ? (\n <a href={href} target={target}>\n <img\n className=\"sl-image__img\"\n src={url}\n alt={alt}\n srcSet={srcSet}\n sizes={responsive ? sizes : undefined}\n />\n </a>\n ) : (\n <img\n className=\"sl-image__img\"\n src={url}\n alt={alt}\n srcSet={srcSet}\n sizes={responsive ? sizes : undefined}\n />\n )}\n {caption && (\n <figcaption dangerouslySetInnerHTML={{ __html: caption }} />\n )}\n </figure>\n </div>\n )\n}\n\nexport default Image\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAC3E,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAC3E,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAqBjC;;;;;;;;;;GAUG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,CAgBxC,CAAA;AAED,eAAe,IAAI,CAAA"}
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
const SubList = ({ item, Wrapper }) =>
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
item.items
|
|
6
|
-
item.items.map((subItem, index) => (React.createElement(SubList, { key: index, item: subItem, Wrapper: Wrapper }))))) : null));
|
|
7
|
-
};
|
|
2
|
+
const SubList = ({ item, Wrapper }) => (React.createElement("li", null,
|
|
3
|
+
React.createElement("span", { dangerouslySetInnerHTML: { __html: item.content } }),
|
|
4
|
+
item.items && item.items.length ? (React.createElement(Wrapper, null, item.items &&
|
|
5
|
+
item.items.map((subItem, index) => (React.createElement(SubList, { key: index, item: subItem, Wrapper: Wrapper }))))) : null));
|
|
8
6
|
/**
|
|
9
7
|
* VisualContent renderer component that renders `list` type blocks
|
|
10
8
|
* as `<ul>` or `<ol>` elements, depending on the list style.
|
|
@@ -18,7 +16,9 @@ const SubList = ({ item, Wrapper }) => {
|
|
|
18
16
|
*/
|
|
19
17
|
const List = ({ data }) => {
|
|
20
18
|
const ListWrapper = data.style === 'ordered' ? 'ol' : 'ul';
|
|
21
|
-
return (React.createElement("div", { className:
|
|
19
|
+
return (React.createElement("div", { className: `sl-content-block sl-list
|
|
20
|
+
${data.isStretched ? 'sl-stretched' : ''}
|
|
21
|
+
` },
|
|
22
22
|
React.createElement(ListWrapper, { className: "sl-list__root" }, data.items.map((item, index) => (React.createElement(SubList, { key: index, item: item, Wrapper: ListWrapper }))))));
|
|
23
23
|
};
|
|
24
24
|
export default List;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/List/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAa,MAAM,OAAO,CAAA;AAOjC,MAAM,OAAO,GAAqB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/List/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAa,MAAM,OAAO,CAAA;AAOjC,MAAM,OAAO,GAAqB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CACvD;IACE,8BAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,GAAI;IAC1D,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACjC,oBAAC,OAAO,QACL,IAAI,CAAC,KAAK;QACT,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CACjC,oBAAC,OAAO,IAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAI,CACzD,CAAC,CACI,CACX,CAAC,CAAC,CAAC,IAAI,CACL,CACN,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,IAAI,GAAmC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACxD,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;IAE1D,OAAO,CACL,6BACE,SAAS,EAAE;QACT,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;OACvC;QAED,oBAAC,WAAW,IAAC,SAAS,EAAC,eAAe,IACnC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,oBAAC,OAAO,IAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,GAAI,CAC1D,CAAC,CACU,CACV,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAA","sourcesContent":["import { ListBlock, ListItem, VisualDataBlock } from '@starlightcms/js-sdk'\nimport React, { FC } from 'react'\n\ntype SubListProps = {\n item: ListItem\n Wrapper: 'ul' | 'ol'\n}\n\nconst SubList: FC<SubListProps> = ({ item, Wrapper }) => (\n <li>\n <span dangerouslySetInnerHTML={{ __html: item.content }} />\n {item.items && item.items.length ? (\n <Wrapper>\n {item.items &&\n item.items.map((subItem, index) => (\n <SubList key={index} item={subItem} Wrapper={Wrapper} />\n ))}\n </Wrapper>\n ) : null}\n </li>\n)\n\n/**\n * VisualContent renderer component that renders `list` type blocks\n * as `<ul>` or `<ol>` elements, depending on the list style.\n *\n * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n *\n * @param props VisualDataBlock object. See {@link ListBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst List: FC<VisualDataBlock<ListBlock>> = ({ data }) => {\n const ListWrapper = data.style === 'ordered' ? 'ol' : 'ul'\n\n return (\n <div\n className={`sl-content-block sl-list\n ${data.isStretched ? 'sl-stretched' : ''}\n `}\n >\n <ListWrapper className=\"sl-list__root\">\n {data.items.map((item, index) => (\n <SubList key={index} item={item} Wrapper={ListWrapper} />\n ))}\n </ListWrapper>\n </div>\n )\n}\n\nexport default List\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Paragraph.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AACtE,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,eAAe,CAAC,cAAc,CAAC,
|
|
1
|
+
{"version":3,"file":"Paragraph.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AACtE,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,eAAe,CAAC,cAAc,CAAC,CAqBlD,CAAA;AAED,eAAe,SAAS,CAAA"}
|
|
@@ -12,11 +12,15 @@ import React from 'react';
|
|
|
12
12
|
* @group VisualContent Renderers
|
|
13
13
|
*/
|
|
14
14
|
const Paragraph = ({ data }) => {
|
|
15
|
+
const { alignment, isStretched } = data;
|
|
16
|
+
const baseClasses = `sl-content-block sl-paragraph
|
|
17
|
+
${alignment ? `sl-alignment-${alignment}` : ''}
|
|
18
|
+
${isStretched ? 'sl-stretched' : ''}`;
|
|
15
19
|
if (!data.text)
|
|
16
|
-
return (React.createElement("div", { className:
|
|
20
|
+
return (React.createElement("div", { className: `${baseClasses} empty`, "aria-hidden": true },
|
|
17
21
|
React.createElement("p", null,
|
|
18
22
|
React.createElement("br", null))));
|
|
19
|
-
return (React.createElement("div", { className:
|
|
23
|
+
return (React.createElement("div", { className: baseClasses },
|
|
20
24
|
React.createElement("p", { dangerouslySetInnerHTML: { __html: data.text } })));
|
|
21
25
|
};
|
|
22
26
|
export default Paragraph;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Paragraph.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AACA,OAAO,KAAa,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;;GAWG;AACH,MAAM,SAAS,GAAwC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,IAAI,CAAC,IAAI,CAAC,IAAI;QACZ,OAAO,CACL,6BAAK,SAAS,
|
|
1
|
+
{"version":3,"file":"Paragraph.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AACA,OAAO,KAAa,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;;GAWG;AACH,MAAM,SAAS,GAAwC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,IAAI,CAAA;IAEvC,MAAM,WAAW,GAAG;UACZ,SAAS,CAAC,CAAC,CAAC,gBAAgB,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE;UAC5C,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,CAAA;IAE3C,IAAI,CAAC,IAAI,CAAC,IAAI;QACZ,OAAO,CACL,6BAAK,SAAS,EAAE,GAAG,WAAW,QAAQ;YACpC;gBACE,+BAAM,CACJ,CACA,CACP,CAAA;IAEH,OAAO,CACL,6BAAK,SAAS,EAAE,WAAW;QACzB,2BAAG,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAAI,CACjD,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,SAAS,CAAA","sourcesContent":["import { ParagraphBlock, VisualDataBlock } from '@starlightcms/js-sdk'\nimport React, { FC } from 'react'\n\n/**\n * VisualContent renderer component that renders `paragraph` type blocks\n * as `<p>` elements. Empty paragraph blocks (generally used to break\n * lines) will have an `empty` class added to them.\n *\n * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n *\n * @param props VisualDataBlock object. See {@link ParagraphBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst Paragraph: FC<VisualDataBlock<ParagraphBlock>> = ({ data }) => {\n const { alignment, isStretched } = data\n\n const baseClasses = `sl-content-block sl-paragraph \n ${alignment ? `sl-alignment-${alignment}` : ''}\n ${isStretched ? 'sl-stretched' : ''}`\n\n if (!data.text)\n return (\n <div className={`${baseClasses} empty`} aria-hidden>\n <p>\n <br />\n </p>\n </div>\n )\n\n return (\n <div className={baseClasses}>\n <p dangerouslySetInnerHTML={{ __html: data.text }} />\n </div>\n )\n}\n\nexport default Paragraph\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Video/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAClE,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;GAUG;AACH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Video/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAClE,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;GAUG;AACH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,CAwB1C,CAAA;AAED,eAAe,KAAK,CAAA"}
|
|
@@ -11,10 +11,13 @@ import React from 'react';
|
|
|
11
11
|
* @group VisualContent Renderers
|
|
12
12
|
*/
|
|
13
13
|
const Video = ({ data }) => {
|
|
14
|
-
const { html, width, caption } = data;
|
|
14
|
+
const { html, width, caption, alignment, isStretched } = data;
|
|
15
15
|
const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed';
|
|
16
|
-
return (React.createElement("div", { className: `sl-content-block sl-video
|
|
17
|
-
|
|
16
|
+
return (React.createElement("div", { className: `sl-content-block sl-video
|
|
17
|
+
${alignment ? `sl-alignment-${alignment}` : ''}
|
|
18
|
+
${isStretched || widthType === 'max' ? 'sl-stretched' : ''}
|
|
19
|
+
` },
|
|
20
|
+
React.createElement("figure", { className: `sl-figure sl-video--width-${widthType}` },
|
|
18
21
|
React.createElement("div", { dangerouslySetInnerHTML: { __html: html }, style: { maxWidth: widthType === 'fixed' ? `${width}` : undefined } }),
|
|
19
22
|
caption && (React.createElement("figcaption", { dangerouslySetInnerHTML: { __html: caption } })))));
|
|
20
23
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Video/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAa,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,KAAK,GAAoC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,IAAI,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Video/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAa,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,KAAK,GAAoC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,IAAI,CAAA;IAE7D,MAAM,SAAS,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAA;IAE9E,OAAO,CACL,6BACE,SAAS,EAAE;QACT,SAAS,CAAC,CAAC,CAAC,gBAAgB,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE;QAC5C,WAAW,IAAI,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;OACzD;QAED,gCAAQ,SAAS,EAAE,6BAA6B,SAAS,EAAE;YACzD,6BACE,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,EACzC,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,GACnE;YAED,OAAO,IAAI,CACV,oCAAY,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAAI,CAC7D,CACM,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAA","sourcesContent":["import { VideoBlock, VisualDataBlock } from '@starlightcms/js-sdk'\nimport React, { FC } from 'react'\n\n/**\n * VisualContent renderer component that renders `video` type blocks\n * as a responsive video along with its caption (if defined).\n *\n * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n *\n * @param props VisualDataBlock object. See {@link VideoBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst Video: FC<VisualDataBlock<VideoBlock>> = ({ data }) => {\n const { html, width, caption, alignment, isStretched } = data\n\n const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed'\n\n return (\n <div\n className={`sl-content-block sl-video \n ${alignment ? `sl-alignment-${alignment}` : ''}\n ${isStretched || widthType === 'max' ? 'sl-stretched' : ''}\n `}\n >\n <figure className={`sl-figure sl-video--width-${widthType}`}>\n <div\n dangerouslySetInnerHTML={{ __html: html }}\n style={{ maxWidth: widthType === 'fixed' ? `${width}` : undefined }}\n />\n\n {caption && (\n <figcaption dangerouslySetInnerHTML={{ __html: caption }} />\n )}\n </figure>\n </div>\n )\n}\n\nexport default Video\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmB,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAE1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAYlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,eAAO,MAAM,aAAa,GAAI,kDAK3B,kBAAkB,KAAG,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmB,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAE1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAYlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,eAAO,MAAM,aAAa,GAAI,kDAK3B,kBAAkB,KAAG,GAAG,CAAC,OAoD3B,CAAA;AAED,OAAO,EACL,SAAS,IAAI,kBAAkB,EAC/B,MAAM,IAAI,eAAe,EACzB,KAAK,IAAI,cAAc,EACvB,KAAK,IAAI,cAAc,EACvB,IAAI,IAAI,aAAa,EACrB,IAAI,IAAI,aAAa,EACrB,KAAK,IAAI,cAAc,GACxB,CAAA;AAED,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAIZ,OAAO,KAAuB,MAAM,gBAAgB,CAAA;AACpD,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAElC,MAAM,iBAAiB,GAAoB;IACzC,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,KAAK;IACZ,GAAG,EAAE,IAAI;IACT,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,KAAK;CACb,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,OAAO,EACP,UAAU,GAAG,EAAE,EACf,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,EAAE,GACC,EAAe,EAAE;IACpC,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,iCAAM,iBAAiB,GAAK,UAAU,EAAG,EAC/C,CAAC,UAAU,CAAC,CACb,CAAA;IAED,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,IAA8B,CAAA;IACvC,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACZ,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,WAAW,CAE1D,CAAA;QAEb,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,IAA8B,CAAA;QAErE,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QACvC,MAAM,WAAW,GACf,IAAI,CAAC,MAAM,GAAG,aAAa;YACzB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK;YACjD,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QACpB,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAA;QAEzC,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,KAAK,CAAC,EAAE,EACb,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport { VisualDataBlock, ParagraphBlock } from '@starlightcms/js-sdk'\nimport { BlockComponents, VisualContentProps } from './types'\nimport Image, { ImageOptions } from './blocks/Image'\nimport Paragraph from './blocks/Paragraph'\nimport React, { useMemo } from 'react'\nimport Header from './blocks/Header'\nimport Quote from './blocks/Quote'\nimport HTML from './blocks/HTML'\nimport List from './blocks/List'\nimport Video from './blocks/Video'\n\nconst defaultComponents: BlockComponents = {\n paragraph: Paragraph,\n header: Header,\n quote: Quote,\n image: Image,\n raw: HTML,\n list: List,\n video: Video,\n}\n\n/**\n * Renders HTML content from data returned by a Visual Editor field on Starlight.\n *\n * The only required prop is `content`, which is the data returned by a Visual\n * Editor field. Additionally, you can provide custom components to render each\n * data block type.\n *\n * You can also pass the `excerpt` boolean prop to only render a portion of the\n * content, which is useful to summarize the content in lists.\n *\n * To learn how to customize the rendered content, take a look at the\n * [Customizing the output](#) guide page.\n *\n * @example Requesting an entry and rendering its content.\n *\n * Assume we created a \"Posts\" model with a slug of `posts`, and placed a Visual\n * Editor field with a key of `post_content` on it.\n *\n * ```jsx\n * import Starlight, { VisualContent } from '@starlightcms/react-sdk'\n *\n * const EntryComponent = ({ slug }) => {\n * const [entry, setEntry] = useState(null)\n *\n * // This is just an example, you could fetch\n * // the entry any way you want.\n * useEffect(async () => {\n * const response = await Starlight.posts.entries.get(slug)\n *\n * setEntry(response.data)\n * }, [ slug ])\n *\n * // After fetching, content will be on the `entry.data.post_content` property.\n * return (\n * entry ? (\n * <article>\n * <h1>{entry.title}</h1>\n * <VisualContent content={entry.data.post_content} />\n * </article>\n * ) : (\n * <div>Loading...</div>\n * )\n * )\n * }\n *\n * ```\n *\n * @param props Component props. See {@link VisualContentProps} to see the\n * available options.\n * @group VisualContent\n */\nexport const VisualContent = ({\n content,\n components = {},\n excerpt = false,\n excerptLength = 40,\n}: VisualContentProps): JSX.Element => {\n const componentList = useMemo(\n () => ({ ...defaultComponents, ...components }),\n [components]\n )\n\n if (!content) {\n return null as unknown as JSX.Element\n }\n\n if (excerpt) {\n const block = content.blocks.find((block) => block.type === 'paragraph') as\n | VisualDataBlock<ParagraphBlock>\n | undefined\n\n if (!block || !block.data.text) return null as unknown as JSX.Element\n\n const text = block.data.text.split(' ')\n const excerptText =\n text.length > excerptLength\n ? text.splice(0, excerptLength).join(' ') + '...'\n : text.join(' ')\n const Component = componentList.paragraph\n\n return (\n <Component\n key={block.id}\n id={block.id}\n type={block.type}\n data={{ text: excerptText } as ParagraphBlock}\n />\n )\n }\n\n return (\n <div className=\"sl-visual-content\">\n {content.blocks.map((block) => {\n const Component = componentList[block.type]\n\n if (!Component) return null\n\n return (\n <Component\n key={block.id}\n id={block.id}\n type={block.type}\n data={block.data as never}\n />\n )\n })}\n </div>\n )\n}\n\nexport {\n Paragraph as ParagraphComponent,\n Header as HeaderComponent,\n Quote as QuoteComponent,\n Image as ImageComponent,\n HTML as HTMLComponent,\n List as ListComponent,\n Video as VideoComponent,\n}\n\nexport type { VisualContentProps, ImageOptions }\n"]}
|
package/dist/styles.css
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
|
+
.sl-visual-content {
|
|
3
|
+
--sl-max-block-width: 100%;
|
|
4
|
+
}
|
|
2
5
|
.sl-visual-content .sl__color {
|
|
3
6
|
padding: 2px 0;
|
|
4
7
|
border-radius: 4px;
|
|
@@ -60,11 +63,30 @@
|
|
|
60
63
|
|
|
61
64
|
.sl-content-block {
|
|
62
65
|
margin: auto;
|
|
66
|
+
width: 100%;
|
|
67
|
+
max-width: var(--sl-max-block-width);
|
|
63
68
|
}
|
|
64
|
-
|
|
69
|
+
|
|
70
|
+
.sl-stretched {
|
|
65
71
|
max-width: 100%;
|
|
66
72
|
}
|
|
67
73
|
|
|
74
|
+
.sl-header.sl-alignment-start, .sl-paragraph.sl-alignment-start {
|
|
75
|
+
text-align: start;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.sl-header.sl-alignment-center, .sl-paragraph.sl-alignment-center {
|
|
79
|
+
text-align: center;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.sl-header.sl-alignment-end, .sl-paragraph.sl-alignment-end {
|
|
83
|
+
text-align: end;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.sl-header.sl-alignment-justify, .sl-paragraph.sl-alignment-justify {
|
|
87
|
+
text-align: justify;
|
|
88
|
+
}
|
|
89
|
+
|
|
68
90
|
.sl-figure figcaption {
|
|
69
91
|
display: flex;
|
|
70
92
|
justify-content: center;
|
|
@@ -76,12 +98,32 @@
|
|
|
76
98
|
}
|
|
77
99
|
|
|
78
100
|
.sl-image > .sl-figure {
|
|
79
|
-
margin:
|
|
101
|
+
margin: 1rem 0;
|
|
80
102
|
}
|
|
81
103
|
.sl-image > .sl-figure > a {
|
|
82
104
|
width: 100%;
|
|
83
105
|
}
|
|
84
106
|
|
|
107
|
+
.sl-image.sl-alignment-start {
|
|
108
|
+
display: flex;
|
|
109
|
+
justify-content: flex-start;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.sl-image.sl-alignment-center {
|
|
113
|
+
display: flex;
|
|
114
|
+
justify-content: center;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.sl-image.sl-alignment-end {
|
|
118
|
+
display: flex;
|
|
119
|
+
justify-content: flex-end;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.sl-image.sl-alignment-justify {
|
|
123
|
+
display: flex;
|
|
124
|
+
justify-content: stretch;
|
|
125
|
+
}
|
|
126
|
+
|
|
85
127
|
.sl-image__img {
|
|
86
128
|
display: block;
|
|
87
129
|
width: 100%;
|
|
@@ -105,6 +147,9 @@
|
|
|
105
147
|
margin-right: 0.5em;
|
|
106
148
|
}
|
|
107
149
|
|
|
150
|
+
.sl-video {
|
|
151
|
+
display: flex;
|
|
152
|
+
}
|
|
108
153
|
.sl-video > figure.sl-figure {
|
|
109
154
|
margin: 0;
|
|
110
155
|
}
|
|
@@ -119,12 +164,34 @@
|
|
|
119
164
|
background-color: transparent;
|
|
120
165
|
}
|
|
121
166
|
|
|
122
|
-
.sl-width-auto
|
|
167
|
+
.sl-video--width-auto {
|
|
168
|
+
width: initial;
|
|
169
|
+
}
|
|
170
|
+
.sl-video--width-auto iframe {
|
|
123
171
|
width: initial;
|
|
124
172
|
}
|
|
125
173
|
|
|
126
|
-
.sl-width-justify
|
|
174
|
+
.sl-video--width-justify, .sl-video--width-max, .sl-video--width-fixed {
|
|
175
|
+
width: 100%;
|
|
176
|
+
}
|
|
177
|
+
.sl-video--width-justify iframe, .sl-video--width-max iframe, .sl-video--width-fixed iframe {
|
|
127
178
|
width: 100%;
|
|
128
179
|
}
|
|
129
180
|
|
|
181
|
+
.sl-video.sl-alignment-start {
|
|
182
|
+
justify-content: flex-start;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.sl-video.sl-alignment-center {
|
|
186
|
+
justify-content: center;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.sl-video.sl-alignment-end {
|
|
190
|
+
justify-content: flex-end;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.sl-video.sl-alignment-justify {
|
|
194
|
+
justify-content: stretch;
|
|
195
|
+
}
|
|
196
|
+
|
|
130
197
|
/*# sourceMappingURL=styles.css.map */
|
package/dist/styles.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../src/VisualContent/styles.scss","../src/VisualContent/blocks/blocks.scss","../src/VisualContent/blocks/HTML/styles.scss","../src/VisualContent/blocks/Image/styles.scss","../src/VisualContent/blocks/List/styles.scss","../src/VisualContent/blocks/Video/styles.scss"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/VisualContent/styles.scss","../src/VisualContent/blocks/blocks.scss","../src/VisualContent/blocks/HTML/styles.scss","../src/VisualContent/blocks/Image/styles.scss","../src/VisualContent/blocks/List/styles.scss","../src/VisualContent/blocks/Video/styles.scss"],"names":[],"mappings":";AAAA;EACE;;AAEA;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAKF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;;AC/DR;EACE;EAEA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE;EACA;EACA;;;AC9BF;EACE;;;ACFJ;EACE;;AAEA;EACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAIF;EACE;EACA;EACA;;;AC/BA;EACE;;AAGE;EACE;;;AAMR;EACE;;AAEA;EACE;;AAEA;EACE;;;ACnBN;EACE;;AAEA;EACE;;AAGE;EACE;;AAGF;EACE;EACA;EAEA;EAEA;EAEA;;;AAMR;EACE;;AAEA;EACE;;;AAIJ;EACE;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"styles.css"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@starlightcms/react-sdk",
|
|
3
|
-
"version": "3.0.0
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "The Starlight SDK for React",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"exports": {
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
]
|
|
65
65
|
},
|
|
66
66
|
"dependencies": {
|
|
67
|
-
"@starlightcms/js-sdk": "^
|
|
67
|
+
"@starlightcms/js-sdk": "^3.0.0"
|
|
68
68
|
},
|
|
69
69
|
"peerDependencies": {
|
|
70
70
|
"react": ">=18.0.0"
|