@starlightcms/react-sdk 0.11.0 → 1.1.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/README.md +1 -1
- package/dist/cjs/VisualContent/blocks/Paragraph.d.ts +2 -1
- package/dist/cjs/VisualContent/blocks/Paragraph.d.ts.map +1 -1
- package/dist/cjs/VisualContent/blocks/Paragraph.js +5 -1
- package/dist/cjs/VisualContent/blocks/Paragraph.js.map +1 -1
- package/dist/cjs/VisualContent/index.d.ts.map +1 -1
- package/dist/cjs/VisualContent/index.js +1 -1
- package/dist/cjs/VisualContent/index.js.map +1 -1
- package/dist/esm/VisualContent/blocks/Paragraph.d.ts +2 -1
- package/dist/esm/VisualContent/blocks/Paragraph.d.ts.map +1 -1
- package/dist/esm/VisualContent/blocks/Paragraph.js +5 -1
- package/dist/esm/VisualContent/blocks/Paragraph.js.map +1 -1
- package/dist/esm/VisualContent/index.d.ts.map +1 -1
- package/dist/esm/VisualContent/index.js +1 -1
- package/dist/esm/VisualContent/index.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -41,7 +41,7 @@ const response = Starlight.posts.entries.list()
|
|
|
41
41
|
const response = Starlight.posts.entries.get('hello-world')
|
|
42
42
|
|
|
43
43
|
// Rendering visual editor content:
|
|
44
|
-
<VisualContent content={
|
|
44
|
+
<VisualContent content={response.data.data.content} />
|
|
45
45
|
```
|
|
46
46
|
|
|
47
47
|
The SDK is capable of requesting a myriad of different content from your workspaces. Check out
|
|
@@ -2,7 +2,8 @@ import { FC } from 'react';
|
|
|
2
2
|
import { ParagraphBlock, VisualDataBlock } from '@starlightcms/js-sdk';
|
|
3
3
|
/**
|
|
4
4
|
* VisualContent renderer component that renders `paragraph` type blocks
|
|
5
|
-
* as `<p>` elements.
|
|
5
|
+
* as `<p>` elements. Empty paragraph blocks (generally used to break
|
|
6
|
+
* lines) will have an `empty` class added to them.
|
|
6
7
|
*
|
|
7
8
|
* See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}
|
|
8
9
|
* to learn how to customize block renderer components like this one.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Paragraph.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEtE
|
|
1
|
+
{"version":3,"file":"Paragraph.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEtE;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,eAAe,CAAC,cAAc,CAAC,CAclD,CAAA;AAED,eAAe,SAAS,CAAA"}
|
|
@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
const react_1 = __importDefault(require("react"));
|
|
7
7
|
/**
|
|
8
8
|
* VisualContent renderer component that renders `paragraph` type blocks
|
|
9
|
-
* as `<p>` elements.
|
|
9
|
+
* as `<p>` elements. Empty paragraph blocks (generally used to break
|
|
10
|
+
* lines) will have an `empty` class added to them.
|
|
10
11
|
*
|
|
11
12
|
* See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}
|
|
12
13
|
* to learn how to customize block renderer components like this one.
|
|
@@ -16,6 +17,9 @@ const react_1 = __importDefault(require("react"));
|
|
|
16
17
|
* @group VisualContent Renderers
|
|
17
18
|
*/
|
|
18
19
|
const Paragraph = ({ data }) => {
|
|
20
|
+
if (!data.text)
|
|
21
|
+
return (react_1.default.createElement("p", { className: "sl-content-block sl-paragraph empty", "aria-hidden": true },
|
|
22
|
+
react_1.default.createElement("br", null)));
|
|
19
23
|
return (react_1.default.createElement("p", { className: "sl-content-block sl-paragraph", dangerouslySetInnerHTML: { __html: data.text } }));
|
|
20
24
|
};
|
|
21
25
|
exports.default = Paragraph;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Paragraph.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAiC;AAGjC
|
|
1
|
+
{"version":3,"file":"Paragraph.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAiC;AAGjC;;;;;;;;;;;GAWG;AACH,MAAM,SAAS,GAAwC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,IAAI,CAAC,IAAI,CAAC,IAAI;QACZ,OAAO,CACL,qCAAG,SAAS,EAAC,qCAAqC;YAChD,yCAAM,CACJ,CACL,CAAA;IAEH,OAAO,CACL,qCACE,SAAS,EAAC,+BAA+B,EACzC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAC9C,CACH,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,SAAS,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport { ParagraphBlock, VisualDataBlock } from '@starlightcms/js-sdk'\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 if (!data.text)\n return (\n <p className=\"sl-content-block sl-paragraph empty\" aria-hidden>\n <br />\n </p>\n )\n\n return (\n <p\n className=\"sl-content-block sl-paragraph\"\n dangerouslySetInnerHTML={{ __html: data.text }}\n />\n )\n}\n\nexport default Paragraph\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAmB,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAWhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,eAAO,MAAM,aAAa,qDAKvB,kBAAkB,KAAG,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAmB,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAWhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,eAAO,MAAM,aAAa,qDAKvB,kBAAkB,KAAG,WAmDvB,CAAA;AAED,OAAO,EACL,mBAAmB,EACnB,SAAS,IAAI,kBAAkB,EAC/B,MAAM,IAAI,eAAe,EACzB,KAAK,IAAI,cAAc,EACvB,KAAK,IAAI,cAAc,EACvB,IAAI,IAAI,aAAa,EACrB,IAAI,IAAI,aAAa,GACtB,CAAA;AAED,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,CAAA"}
|
|
@@ -108,7 +108,7 @@ const VisualContent = ({ content, components = {}, excerpt = false, excerptLengt
|
|
|
108
108
|
}
|
|
109
109
|
if (excerpt) {
|
|
110
110
|
const block = content.blocks.find((block) => block.type === 'paragraph');
|
|
111
|
-
if (!block)
|
|
111
|
+
if (!block || !block.data.text)
|
|
112
112
|
return null;
|
|
113
113
|
const text = block.data.text.split(' ');
|
|
114
114
|
const excerptText = text.length > excerptLength
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAsC;AAGtC,qCAA8C;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAsC;AAGtC,qCAA8C;AA+H5C,oGA/HO,4BAAmB,OA+HP;AA9HrB,mEAA0C;AA+H3B,6BA/HR,mBAAS,CA+HiB;AA9HjC,6DAAoC;AA+HxB,0BA/HL,gBAAM,CA+Hc;AA9H3B,2DAAkC;AA+HvB,yBA/HJ,eAAK,CA+Ha;AA9HzB,2DAAoD;AA+HzC,yBA/HJ,eAAK,CA+Ha;AA9HzB,yDAAgC;AA+HtB,wBA/HH,cAAI,CA+HY;AA9HvB,yDAAgC;AA+HtB,wBA/HH,cAAI,CA+HY;AA7HvB,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;CACX,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;QACZ,OAAO,IAA8B,CAAA;KACtC;IAED,IAAI,OAAO,EAAE;QACX,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,EAAE,GAC3B,CACH,CAAA;KACF;IACD,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;AAxDY,QAAA,aAAa,iBAwDzB","sourcesContent":["import React, { useMemo } from 'react'\nimport { VisualDataBlock, ParagraphBlock } from '@starlightcms/js-sdk'\nimport { BlockComponents, VisualContentProps } from './types'\nimport { VisualContentStyles } from './styles'\nimport Paragraph from './blocks/Paragraph'\nimport Header from './blocks/Header'\nimport Quote from './blocks/Quote'\nimport Image, { ImageOptions } from './blocks/Image'\nimport HTML from './blocks/HTML'\nimport List from './blocks/List'\n\nconst defaultComponents: BlockComponents = {\n paragraph: Paragraph,\n header: Header,\n quote: Quote,\n image: Image,\n raw: HTML,\n list: List,\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 }}\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 VisualContentStyles,\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}\n\nexport type { VisualContentProps, ImageOptions }\n"]}
|
|
@@ -2,7 +2,8 @@ import { FC } from 'react';
|
|
|
2
2
|
import { ParagraphBlock, VisualDataBlock } from '@starlightcms/js-sdk';
|
|
3
3
|
/**
|
|
4
4
|
* VisualContent renderer component that renders `paragraph` type blocks
|
|
5
|
-
* as `<p>` elements.
|
|
5
|
+
* as `<p>` elements. Empty paragraph blocks (generally used to break
|
|
6
|
+
* lines) will have an `empty` class added to them.
|
|
6
7
|
*
|
|
7
8
|
* See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}
|
|
8
9
|
* to learn how to customize block renderer components like this one.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Paragraph.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEtE
|
|
1
|
+
{"version":3,"file":"Paragraph.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEtE;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,eAAe,CAAC,cAAc,CAAC,CAclD,CAAA;AAED,eAAe,SAAS,CAAA"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
/**
|
|
3
3
|
* VisualContent renderer component that renders `paragraph` type blocks
|
|
4
|
-
* as `<p>` elements.
|
|
4
|
+
* as `<p>` elements. Empty paragraph blocks (generally used to break
|
|
5
|
+
* lines) will have an `empty` class added to them.
|
|
5
6
|
*
|
|
6
7
|
* See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}
|
|
7
8
|
* to learn how to customize block renderer components like this one.
|
|
@@ -11,6 +12,9 @@ import React from 'react';
|
|
|
11
12
|
* @group VisualContent Renderers
|
|
12
13
|
*/
|
|
13
14
|
const Paragraph = ({ data }) => {
|
|
15
|
+
if (!data.text)
|
|
16
|
+
return (React.createElement("p", { className: "sl-content-block sl-paragraph empty", "aria-hidden": true },
|
|
17
|
+
React.createElement("br", null)));
|
|
14
18
|
return (React.createElement("p", { className: "sl-content-block sl-paragraph", dangerouslySetInnerHTML: { __html: data.text } }));
|
|
15
19
|
};
|
|
16
20
|
export default Paragraph;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Paragraph.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AAGjC
|
|
1
|
+
{"version":3,"file":"Paragraph.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AAGjC;;;;;;;;;;;GAWG;AACH,MAAM,SAAS,GAAwC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,IAAI,CAAC,IAAI,CAAC,IAAI;QACZ,OAAO,CACL,2BAAG,SAAS,EAAC,qCAAqC;YAChD,+BAAM,CACJ,CACL,CAAA;IAEH,OAAO,CACL,2BACE,SAAS,EAAC,+BAA+B,EACzC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAC9C,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,SAAS,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport { ParagraphBlock, VisualDataBlock } from '@starlightcms/js-sdk'\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 if (!data.text)\n return (\n <p className=\"sl-content-block sl-paragraph empty\" aria-hidden>\n <br />\n </p>\n )\n\n return (\n <p\n className=\"sl-content-block sl-paragraph\"\n dangerouslySetInnerHTML={{ __html: data.text }}\n />\n )\n}\n\nexport default Paragraph\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAmB,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAWhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,eAAO,MAAM,aAAa,qDAKvB,kBAAkB,KAAG,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAmB,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAWhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,eAAO,MAAM,aAAa,qDAKvB,kBAAkB,KAAG,WAmDvB,CAAA;AAED,OAAO,EACL,mBAAmB,EACnB,SAAS,IAAI,kBAAkB,EAC/B,MAAM,IAAI,eAAe,EACzB,KAAK,IAAI,cAAc,EACvB,KAAK,IAAI,cAAc,EACvB,IAAI,IAAI,aAAa,EACrB,IAAI,IAAI,aAAa,GACtB,CAAA;AAED,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,CAAA"}
|
|
@@ -72,7 +72,7 @@ export const VisualContent = ({ content, components = {}, excerpt = false, excer
|
|
|
72
72
|
}
|
|
73
73
|
if (excerpt) {
|
|
74
74
|
const block = content.blocks.find((block) => block.type === 'paragraph');
|
|
75
|
-
if (!block)
|
|
75
|
+
if (!block || !block.data.text)
|
|
76
76
|
return null;
|
|
77
77
|
const text = block.data.text.split(' ');
|
|
78
78
|
const excerptText = text.length > excerptLength
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,KAAuB,MAAM,gBAAgB,CAAA;AACpD,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAEhC,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;CACX,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;QACZ,OAAO,IAA8B,CAAA;KACtC;IAED,IAAI,OAAO,EAAE;QACX,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,WAAW,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo } from 'react'\nimport { VisualDataBlock, ParagraphBlock } from '@starlightcms/js-sdk'\nimport { BlockComponents, VisualContentProps } from './types'\nimport { VisualContentStyles } from './styles'\nimport Paragraph from './blocks/Paragraph'\nimport Header from './blocks/Header'\nimport Quote from './blocks/Quote'\nimport Image, { ImageOptions } from './blocks/Image'\nimport HTML from './blocks/HTML'\nimport List from './blocks/List'\n\nconst defaultComponents: BlockComponents = {\n paragraph: Paragraph,\n header: Header,\n quote: Quote,\n image: Image,\n raw: HTML,\n list: List,\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 }}\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 VisualContentStyles,\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}\n\nexport type { VisualContentProps, ImageOptions }\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@starlightcms/react-sdk",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "The Starlight SDK for React",
|
|
5
5
|
"workspaces": [
|
|
6
6
|
"website"
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
]
|
|
61
61
|
},
|
|
62
62
|
"dependencies": {
|
|
63
|
-
"@starlightcms/js-sdk": "^
|
|
63
|
+
"@starlightcms/js-sdk": "^1.1.0"
|
|
64
64
|
},
|
|
65
65
|
"peerDependencies": {
|
|
66
66
|
"react": ">=16.0.0"
|