@starlightcms/react-sdk 0.4.0 → 0.5.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/index.d.ts +2 -1
- package/dist/cjs/VisualContent/index.d.ts.map +1 -1
- package/dist/cjs/VisualContent/index.js +4 -2
- package/dist/cjs/VisualContent/index.js.map +1 -1
- package/dist/cjs/VisualContent/styles.d.ts +3 -0
- package/dist/cjs/VisualContent/styles.d.ts.map +1 -0
- package/dist/cjs/VisualContent/styles.js +38 -0
- package/dist/cjs/VisualContent/styles.js.map +1 -0
- package/dist/esm/VisualContent/index.d.ts +2 -1
- package/dist/esm/VisualContent/index.d.ts.map +1 -1
- package/dist/esm/VisualContent/index.js +3 -2
- package/dist/esm/VisualContent/index.js.map +1 -1
- package/dist/esm/VisualContent/styles.d.ts +3 -0
- package/dist/esm/VisualContent/styles.d.ts.map +1 -0
- package/dist/esm/VisualContent/styles.js +31 -0
- package/dist/esm/VisualContent/styles.js.map +1 -0
- package/package.json +1 -1
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { VisualContentProps } from './types';
|
|
3
|
+
import { VisualContentStyles } from './styles';
|
|
3
4
|
import Paragraph from './blocks/Paragraph';
|
|
4
5
|
import Header from './blocks/Header';
|
|
5
6
|
import Quote from './blocks/Quote';
|
|
@@ -7,5 +8,5 @@ import Image from './blocks/Image';
|
|
|
7
8
|
import HTML from './blocks/HTML';
|
|
8
9
|
import List from './blocks/List';
|
|
9
10
|
export declare const VisualContent: FC<VisualContentProps>;
|
|
10
|
-
export { Paragraph as ParagraphComponent, Header as HeaderComponent, Quote as QuoteComponent, Image as ImageComponent, HTML as HTMLComponent, List as ListComponent, };
|
|
11
|
+
export { VisualContentStyles, Paragraph as ParagraphComponent, Header as HeaderComponent, Quote as QuoteComponent, Image as ImageComponent, HTML as HTMLComponent, List as ListComponent, };
|
|
11
12
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAW,MAAM,OAAO,CAAA;AAE1C,OAAO,EAAmB,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAWhC,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAuDhD,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,GACtB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAW,MAAM,OAAO,CAAA;AAE1C,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,MAAM,gBAAgB,CAAA;AAClC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAWhC,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAuDhD,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"}
|
|
@@ -22,8 +22,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
22
22
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
23
23
|
};
|
|
24
24
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
-
exports.ListComponent = exports.HTMLComponent = exports.ImageComponent = exports.QuoteComponent = exports.HeaderComponent = exports.ParagraphComponent = exports.VisualContent = void 0;
|
|
25
|
+
exports.ListComponent = exports.HTMLComponent = exports.ImageComponent = exports.QuoteComponent = exports.HeaderComponent = exports.ParagraphComponent = exports.VisualContentStyles = exports.VisualContent = void 0;
|
|
26
26
|
const react_1 = __importStar(require("react"));
|
|
27
|
+
const styles_1 = require("./styles");
|
|
28
|
+
Object.defineProperty(exports, "VisualContentStyles", { enumerable: true, get: function () { return styles_1.VisualContentStyles; } });
|
|
27
29
|
const Paragraph_1 = __importDefault(require("./blocks/Paragraph"));
|
|
28
30
|
exports.ParagraphComponent = Paragraph_1.default;
|
|
29
31
|
const Header_1 = __importDefault(require("./blocks/Header"));
|
|
@@ -45,10 +47,10 @@ const defaultComponents = {
|
|
|
45
47
|
list: List_1.default,
|
|
46
48
|
};
|
|
47
49
|
const VisualContent = ({ content, components = {}, excerpt = false, excerptLength = 40, }) => {
|
|
50
|
+
const componentList = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, defaultComponents), components)), [components]);
|
|
48
51
|
if (!content) {
|
|
49
52
|
return null;
|
|
50
53
|
}
|
|
51
|
-
const componentList = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, defaultComponents), components)), [components]);
|
|
52
54
|
if (excerpt) {
|
|
53
55
|
const block = content.blocks.find((block) => block.type === 'paragraph');
|
|
54
56
|
if (!block)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAG1C,mEAA0C;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAG1C,qCAA8C;AA2E5C,oGA3EO,4BAAmB,OA2EP;AA1ErB,mEAA0C;AA2E3B,6BA3ER,mBAAS,CA2EiB;AA1EjC,6DAAoC;AA2ExB,0BA3EL,gBAAM,CA2Ec;AA1E3B,2DAAkC;AA2EvB,yBA3EJ,eAAK,CA2Ea;AA1EzB,2DAAkC;AA2EvB,yBA3EJ,eAAK,CA2Ea;AA1EzB,yDAAgC;AA2EtB,wBA3EH,cAAI,CA2EY;AA1EvB,yDAAgC;AA2EtB,wBA3EH,cAAI,CA2EY;AAzEvB,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;AAEM,MAAM,aAAa,GAA2B,CAAC,EACpD,OAAO,EACP,UAAU,GAAG,EAAE,EACf,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,EAAE,GACnB,EAAE,EAAE;IACH,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,IAAI,CAAA;KACZ;IAED,IAAI,OAAO,EAAE;QACX,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,WAAW,CAAC,CAAA;QAExE,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAA;QAEvB,MAAM,IAAI,GAAI,KAAyC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QAC5E,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;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;AAvDY,QAAA,aAAa,iBAuDzB","sourcesContent":["import React, { FC, 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 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\nexport const VisualContent: FC<VisualContentProps> = ({\n content,\n components = {},\n excerpt = false,\n excerptLength = 40,\n}) => {\n const componentList = useMemo(\n () => ({ ...defaultComponents, ...components }),\n [components]\n )\n\n if (!content) {\n return null\n }\n\n if (excerpt) {\n const block = content.blocks.find((block) => block.type === 'paragraph')\n\n if (!block) return null\n\n const text = (block as VisualDataBlock<ParagraphBlock>).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\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"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/styles.tsx"],"names":[],"mappings":";AA6BA,eAAO,MAAM,mBAAmB,QAAO,WAEtC,CAAA"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.VisualContentStyles = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const styles = `
|
|
9
|
+
.sl-visual-content *{max-width:100%}
|
|
10
|
+
.sl-visual-content>figure{margin:1em 0}
|
|
11
|
+
.sl-list{list-style:none;padding-left:1em}
|
|
12
|
+
.sl-list>li{margin:.5em 0}
|
|
13
|
+
.sl-list>li::before{content: "•";margin-right:.5em}
|
|
14
|
+
.sl__color{padding:2px 0;border-radius:4px}
|
|
15
|
+
.sl__color__bg--red{background-color:rgb(253,235,236)}
|
|
16
|
+
.sl__color__bg--pink{background-color:rgb(253,235,236)}
|
|
17
|
+
.sl__color__bg--purple{background-color:rgb(244,240,247)}
|
|
18
|
+
.sl__color__bg--blue{background-color:rgb(231,243,248)}
|
|
19
|
+
.sl__color__bg--green{background-color:rgb(237,243,236)}
|
|
20
|
+
.sl__color__bg--yellow{background-color:rgb(251,243,219)}
|
|
21
|
+
.sl__color__bg--orange{background-color:rgb(251,236,221)}
|
|
22
|
+
.sl__color__bg--brown{background-color:rgb(244,238,238)}
|
|
23
|
+
.sl__color__bg--gray{background-color:rgb(241,241,239)}
|
|
24
|
+
.sl__color__text--red{color:rgb(212,76,71)}
|
|
25
|
+
.sl__color__text--pink{color:rgb(193,76,138)}
|
|
26
|
+
.sl__color__text--purple{color:rgb(144,101,176)}
|
|
27
|
+
.sl__color__text--blue{color:rgb(51,126,169)}
|
|
28
|
+
.sl__color__text--green{color:rgb(68,131,97)}
|
|
29
|
+
.sl__color__text--yellow{color:rgb(203,145,47)}
|
|
30
|
+
.sl__color__text--orange{color:rgb(217,115,13)}
|
|
31
|
+
.sl__color__text--brown{color:rgb(159,107,83)}
|
|
32
|
+
.sl__color__text--gray{color:rgb(120,119,116)}
|
|
33
|
+
`;
|
|
34
|
+
const VisualContentStyles = () => {
|
|
35
|
+
return react_1.default.createElement("style", { dangerouslySetInnerHTML: { __html: styles } });
|
|
36
|
+
};
|
|
37
|
+
exports.VisualContentStyles = VisualContentStyles;
|
|
38
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/VisualContent/styles.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AAEzB,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;CAyBd,CAAA;AAEM,MAAM,mBAAmB,GAAG,GAAgB,EAAE;IACnD,OAAO,yCAAO,uBAAuB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,GAAI,CAAA;AAC/D,CAAC,CAAA;AAFY,QAAA,mBAAmB,uBAE/B","sourcesContent":["import React from 'react'\n\nconst styles = `\n .sl-visual-content *{max-width:100%}\n .sl-visual-content>figure{margin:1em 0}\n .sl-list{list-style:none;padding-left:1em}\n .sl-list>li{margin:.5em 0}\n .sl-list>li::before{content: \"•\";margin-right:.5em}\n .sl__color{padding:2px 0;border-radius:4px}\n .sl__color__bg--red{background-color:rgb(253,235,236)}\n .sl__color__bg--pink{background-color:rgb(253,235,236)}\n .sl__color__bg--purple{background-color:rgb(244,240,247)}\n .sl__color__bg--blue{background-color:rgb(231,243,248)}\n .sl__color__bg--green{background-color:rgb(237,243,236)}\n .sl__color__bg--yellow{background-color:rgb(251,243,219)}\n .sl__color__bg--orange{background-color:rgb(251,236,221)}\n .sl__color__bg--brown{background-color:rgb(244,238,238)}\n .sl__color__bg--gray{background-color:rgb(241,241,239)}\n .sl__color__text--red{color:rgb(212,76,71)}\n .sl__color__text--pink{color:rgb(193,76,138)}\n .sl__color__text--purple{color:rgb(144,101,176)}\n .sl__color__text--blue{color:rgb(51,126,169)}\n .sl__color__text--green{color:rgb(68,131,97)}\n .sl__color__text--yellow{color:rgb(203,145,47)}\n .sl__color__text--orange{color:rgb(217,115,13)}\n .sl__color__text--brown{color:rgb(159,107,83)}\n .sl__color__text--gray{color:rgb(120,119,116)}\n`\n\nexport const VisualContentStyles = (): JSX.Element => {\n return <style dangerouslySetInnerHTML={{ __html: styles }} />\n}\n"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { VisualContentProps } from './types';
|
|
3
|
+
import { VisualContentStyles } from './styles';
|
|
3
4
|
import Paragraph from './blocks/Paragraph';
|
|
4
5
|
import Header from './blocks/Header';
|
|
5
6
|
import Quote from './blocks/Quote';
|
|
@@ -7,5 +8,5 @@ import Image from './blocks/Image';
|
|
|
7
8
|
import HTML from './blocks/HTML';
|
|
8
9
|
import List from './blocks/List';
|
|
9
10
|
export declare const VisualContent: FC<VisualContentProps>;
|
|
10
|
-
export { Paragraph as ParagraphComponent, Header as HeaderComponent, Quote as QuoteComponent, Image as ImageComponent, HTML as HTMLComponent, List as ListComponent, };
|
|
11
|
+
export { VisualContentStyles, Paragraph as ParagraphComponent, Header as HeaderComponent, Quote as QuoteComponent, Image as ImageComponent, HTML as HTMLComponent, List as ListComponent, };
|
|
11
12
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAW,MAAM,OAAO,CAAA;AAE1C,OAAO,EAAmB,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAWhC,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAuDhD,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,GACtB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAW,MAAM,OAAO,CAAA;AAE1C,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,MAAM,gBAAgB,CAAA;AAClC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAWhC,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAuDhD,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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { useMemo } from 'react';
|
|
2
|
+
import { VisualContentStyles } from './styles';
|
|
2
3
|
import Paragraph from './blocks/Paragraph';
|
|
3
4
|
import Header from './blocks/Header';
|
|
4
5
|
import Quote from './blocks/Quote';
|
|
@@ -14,10 +15,10 @@ const defaultComponents = {
|
|
|
14
15
|
list: List,
|
|
15
16
|
};
|
|
16
17
|
export const VisualContent = ({ content, components = {}, excerpt = false, excerptLength = 40, }) => {
|
|
18
|
+
const componentList = useMemo(() => (Object.assign(Object.assign({}, defaultComponents), components)), [components]);
|
|
17
19
|
if (!content) {
|
|
18
20
|
return null;
|
|
19
21
|
}
|
|
20
|
-
const componentList = useMemo(() => (Object.assign(Object.assign({}, defaultComponents), components)), [components]);
|
|
21
22
|
if (excerpt) {
|
|
22
23
|
const block = content.blocks.find((block) => block.type === 'paragraph');
|
|
23
24
|
if (!block)
|
|
@@ -36,5 +37,5 @@ export const VisualContent = ({ content, components = {}, excerpt = false, excer
|
|
|
36
37
|
return (React.createElement(Component, { key: block.id, id: block.id, type: block.type, data: block.data }));
|
|
37
38
|
})));
|
|
38
39
|
};
|
|
39
|
-
export { Paragraph as ParagraphComponent, Header as HeaderComponent, Quote as QuoteComponent, Image as ImageComponent, HTML as HTMLComponent, List as ListComponent, };
|
|
40
|
+
export { VisualContentStyles, Paragraph as ParagraphComponent, Header as HeaderComponent, Quote as QuoteComponent, Image as ImageComponent, HTML as HTMLComponent, List as ListComponent, };
|
|
40
41
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,OAAO,EAAE,MAAM,OAAO,CAAA;AAG1C,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,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,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,OAAO,EACP,UAAU,GAAG,EAAE,EACf,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,EAAE,GACnB,EAAE,EAAE;IACH,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,OAAO,EAAE,MAAM,OAAO,CAAA;AAG1C,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,MAAM,gBAAgB,CAAA;AAClC,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,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,OAAO,EACP,UAAU,GAAG,EAAE,EACf,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,EAAE,GACnB,EAAE,EAAE;IACH,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,IAAI,CAAA;KACZ;IAED,IAAI,OAAO,EAAE;QACX,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,WAAW,CAAC,CAAA;QAExE,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAA;QAEvB,MAAM,IAAI,GAAI,KAAyC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QAC5E,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,EAAE,GAC3B,CACH,CAAA;KACF;IAED,OAAO,CACL,6BAAK,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,oBAAC,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;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","sourcesContent":["import React, { FC, 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 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\nexport const VisualContent: FC<VisualContentProps> = ({\n content,\n components = {},\n excerpt = false,\n excerptLength = 40,\n}) => {\n const componentList = useMemo(\n () => ({ ...defaultComponents, ...components }),\n [components]\n )\n\n if (!content) {\n return null\n }\n\n if (excerpt) {\n const block = content.blocks.find((block) => block.type === 'paragraph')\n\n if (!block) return null\n\n const text = (block as VisualDataBlock<ParagraphBlock>).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\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"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/styles.tsx"],"names":[],"mappings":";AA6BA,eAAO,MAAM,mBAAmB,QAAO,WAEtC,CAAA"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
const styles = `
|
|
3
|
+
.sl-visual-content *{max-width:100%}
|
|
4
|
+
.sl-visual-content>figure{margin:1em 0}
|
|
5
|
+
.sl-list{list-style:none;padding-left:1em}
|
|
6
|
+
.sl-list>li{margin:.5em 0}
|
|
7
|
+
.sl-list>li::before{content: "•";margin-right:.5em}
|
|
8
|
+
.sl__color{padding:2px 0;border-radius:4px}
|
|
9
|
+
.sl__color__bg--red{background-color:rgb(253,235,236)}
|
|
10
|
+
.sl__color__bg--pink{background-color:rgb(253,235,236)}
|
|
11
|
+
.sl__color__bg--purple{background-color:rgb(244,240,247)}
|
|
12
|
+
.sl__color__bg--blue{background-color:rgb(231,243,248)}
|
|
13
|
+
.sl__color__bg--green{background-color:rgb(237,243,236)}
|
|
14
|
+
.sl__color__bg--yellow{background-color:rgb(251,243,219)}
|
|
15
|
+
.sl__color__bg--orange{background-color:rgb(251,236,221)}
|
|
16
|
+
.sl__color__bg--brown{background-color:rgb(244,238,238)}
|
|
17
|
+
.sl__color__bg--gray{background-color:rgb(241,241,239)}
|
|
18
|
+
.sl__color__text--red{color:rgb(212,76,71)}
|
|
19
|
+
.sl__color__text--pink{color:rgb(193,76,138)}
|
|
20
|
+
.sl__color__text--purple{color:rgb(144,101,176)}
|
|
21
|
+
.sl__color__text--blue{color:rgb(51,126,169)}
|
|
22
|
+
.sl__color__text--green{color:rgb(68,131,97)}
|
|
23
|
+
.sl__color__text--yellow{color:rgb(203,145,47)}
|
|
24
|
+
.sl__color__text--orange{color:rgb(217,115,13)}
|
|
25
|
+
.sl__color__text--brown{color:rgb(159,107,83)}
|
|
26
|
+
.sl__color__text--gray{color:rgb(120,119,116)}
|
|
27
|
+
`;
|
|
28
|
+
export const VisualContentStyles = () => {
|
|
29
|
+
return React.createElement("style", { dangerouslySetInnerHTML: { __html: styles } });
|
|
30
|
+
};
|
|
31
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/VisualContent/styles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;CAyBd,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAgB,EAAE;IACnD,OAAO,+BAAO,uBAAuB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,GAAI,CAAA;AAC/D,CAAC,CAAA","sourcesContent":["import React from 'react'\n\nconst styles = `\n .sl-visual-content *{max-width:100%}\n .sl-visual-content>figure{margin:1em 0}\n .sl-list{list-style:none;padding-left:1em}\n .sl-list>li{margin:.5em 0}\n .sl-list>li::before{content: \"•\";margin-right:.5em}\n .sl__color{padding:2px 0;border-radius:4px}\n .sl__color__bg--red{background-color:rgb(253,235,236)}\n .sl__color__bg--pink{background-color:rgb(253,235,236)}\n .sl__color__bg--purple{background-color:rgb(244,240,247)}\n .sl__color__bg--blue{background-color:rgb(231,243,248)}\n .sl__color__bg--green{background-color:rgb(237,243,236)}\n .sl__color__bg--yellow{background-color:rgb(251,243,219)}\n .sl__color__bg--orange{background-color:rgb(251,236,221)}\n .sl__color__bg--brown{background-color:rgb(244,238,238)}\n .sl__color__bg--gray{background-color:rgb(241,241,239)}\n .sl__color__text--red{color:rgb(212,76,71)}\n .sl__color__text--pink{color:rgb(193,76,138)}\n .sl__color__text--purple{color:rgb(144,101,176)}\n .sl__color__text--blue{color:rgb(51,126,169)}\n .sl__color__text--green{color:rgb(68,131,97)}\n .sl__color__text--yellow{color:rgb(203,145,47)}\n .sl__color__text--orange{color:rgb(217,115,13)}\n .sl__color__text--brown{color:rgb(159,107,83)}\n .sl__color__text--gray{color:rgb(120,119,116)}\n`\n\nexport const VisualContentStyles = (): JSX.Element => {\n return <style dangerouslySetInnerHTML={{ __html: styles }} />\n}\n"]}
|