@qkix/better-blocks-react-renderer 0.18.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.
Files changed (9) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +970 -0
  3. package/dist/index.d.mts +189 -0
  4. package/dist/index.d.ts +189 -0
  5. package/dist/index.js +1288 -0
  6. package/dist/index.js.map +1 -0
  7. package/dist/index.mjs +1269 -0
  8. package/dist/index.mjs.map +1 -0
  9. package/package.json +105 -0
package/dist/index.d.mts ADDED
@@ -0,0 +1,189 @@
1
+ import { ReactNode, ComponentType, CSSProperties } from 'react';
2
+ import { BlocksContent, TableCellAlign, CalloutVariant, ButtonAlignment, ButtonLink, ButtonFile, ButtonStyle, SocialPlatform, SocialEmbedOembed, SocialEmbedAlignment, AudioFile, AudioPlayer, AudioAlignment, EmbedProvider, AspectRatio, MediaAlignment, VideoProvider, VideoFile, VideoPlayer } from '@qkix/better-blocks-core';
3
+ export { AspectRatio, AudioAlignment, AudioFile, AudioNode, AudioPlayer, AudioPreload, BlockNode, BlocksContent, ButtonAlignment, ButtonElement, ButtonFile, ButtonLink, ButtonStyle, CalloutNode, CalloutVariant, CodeNode, DetailsNode, DiagramNode, EmbedNode, EmbedProvider, HeadingNode, HorizontalLineNode, ImageNode, InlineNode, LinkNode, ListItemNode, ListNode, MathNode, MediaAlignment, MediaEmbedNode, ParagraphNode, QuoteNode, SocialEmbedAlignment, SocialEmbedNode, SocialEmbedOembed, SocialPlatform, TableCellAlign, TableCellNode, TableHeaderCellNode, TableNode, TableRowNode, TextAlign, TextNode, VideoFile, VideoNode, VideoPlayer, VideoProvider } from '@qkix/better-blocks-core';
4
+
5
+ type ModifierProps = {
6
+ children: ReactNode;
7
+ };
8
+ type ColorModifierProps = {
9
+ children: ReactNode;
10
+ color: string;
11
+ };
12
+ type BackgroundColorModifierProps = {
13
+ children: ReactNode;
14
+ backgroundColor: string;
15
+ };
16
+ type BlockComponentProps<T = Record<string, unknown>> = T & {
17
+ children: ReactNode;
18
+ };
19
+ /** Props handed to custom `table-cell` / `table-header-cell` components. */
20
+ type TableCellRenderProps = {
21
+ align?: TableCellAlign;
22
+ colSpan?: number;
23
+ rowSpan?: number;
24
+ /** `text-align` derived from `align`; undefined when the cell is left-aligned. */
25
+ style?: CSSProperties;
26
+ };
27
+ type CustomBlocksConfig = Partial<{
28
+ paragraph: ComponentType<BlockComponentProps<{
29
+ style?: CSSProperties;
30
+ }>>;
31
+ heading: ComponentType<BlockComponentProps<{
32
+ level: 1 | 2 | 3 | 4 | 5 | 6;
33
+ style?: CSSProperties;
34
+ }>>;
35
+ list: ComponentType<BlockComponentProps<{
36
+ format: 'ordered' | 'unordered' | 'todo';
37
+ indentLevel: number;
38
+ }>>;
39
+ 'list-item': ComponentType<BlockComponentProps<{
40
+ checked?: boolean;
41
+ }>>;
42
+ link: ComponentType<BlockComponentProps<{
43
+ url: string;
44
+ target?: string;
45
+ rel?: string;
46
+ }>>;
47
+ quote: ComponentType<BlockComponentProps<{
48
+ style?: CSSProperties;
49
+ }>>;
50
+ code: ComponentType<BlockComponentProps<{
51
+ plainText: string;
52
+ language?: string;
53
+ }>>;
54
+ image: ComponentType<{
55
+ image: {
56
+ url: string;
57
+ alternativeText?: string | null;
58
+ width?: number;
59
+ height?: number;
60
+ };
61
+ caption?: string;
62
+ imageAlign?: 'left' | 'center' | 'right';
63
+ children?: ReactNode;
64
+ }>;
65
+ 'horizontal-line': ComponentType<Record<string, unknown>>;
66
+ table: ComponentType<BlockComponentProps>;
67
+ 'table-row': ComponentType<BlockComponentProps>;
68
+ 'table-cell': ComponentType<BlockComponentProps<TableCellRenderProps>>;
69
+ 'table-header-cell': ComponentType<BlockComponentProps<TableCellRenderProps>>;
70
+ 'media-embed': ComponentType<{
71
+ url: string;
72
+ originalUrl?: string;
73
+ }>;
74
+ math: ComponentType<{
75
+ formula: string;
76
+ inline: boolean;
77
+ }>;
78
+ diagram: ComponentType<{
79
+ code: string;
80
+ format: 'mermaid';
81
+ }>;
82
+ callout: ComponentType<BlockComponentProps<{
83
+ variant: CalloutVariant;
84
+ title?: string;
85
+ }>>;
86
+ details: ComponentType<BlockComponentProps<{
87
+ summary: string;
88
+ defaultOpen?: boolean;
89
+ }>>;
90
+ button: ComponentType<{
91
+ label: string;
92
+ buttonType: 'link' | 'file';
93
+ alignment?: ButtonAlignment;
94
+ link?: ButtonLink;
95
+ file?: ButtonFile;
96
+ showFileSize?: boolean;
97
+ showFileIcon?: boolean;
98
+ filePreview?: boolean;
99
+ style?: ButtonStyle;
100
+ cssClass?: string;
101
+ }>;
102
+ 'social-embed': ComponentType<{
103
+ platform: SocialPlatform;
104
+ url?: string;
105
+ embedCode?: string;
106
+ oembed?: SocialEmbedOembed;
107
+ alignment?: SocialEmbedAlignment;
108
+ caption?: string;
109
+ }>;
110
+ audio: ComponentType<{
111
+ file: AudioFile;
112
+ title?: string;
113
+ caption?: string;
114
+ player: AudioPlayer;
115
+ alignment?: AudioAlignment;
116
+ }>;
117
+ embed: ComponentType<{
118
+ source?: 'url' | 'iframe';
119
+ url?: string;
120
+ iframe?: string;
121
+ embedHtml?: string;
122
+ embedSrc?: string;
123
+ provider?: EmbedProvider;
124
+ thumbnail?: string;
125
+ aspectRatio?: AspectRatio;
126
+ customAspectRatio?: string;
127
+ alignment?: MediaAlignment;
128
+ caption?: string;
129
+ title?: string;
130
+ }>;
131
+ video: ComponentType<{
132
+ provider?: VideoProvider;
133
+ url: string;
134
+ assetId?: string;
135
+ playbackId?: string;
136
+ file?: VideoFile;
137
+ poster?: string;
138
+ title?: string;
139
+ caption?: string;
140
+ transcript?: string;
141
+ player?: VideoPlayer;
142
+ alignment?: MediaAlignment;
143
+ aspectRatio?: AspectRatio;
144
+ customAspectRatio?: string;
145
+ }>;
146
+ }>;
147
+ type FontFamilyModifierProps = {
148
+ children: ReactNode;
149
+ fontFamily: string;
150
+ };
151
+ type FontSizeModifierProps = {
152
+ children: ReactNode;
153
+ fontSize: string;
154
+ };
155
+ type CustomModifiersConfig = Partial<{
156
+ bold: ComponentType<ModifierProps>;
157
+ italic: ComponentType<ModifierProps>;
158
+ underline: ComponentType<ModifierProps>;
159
+ strikethrough: ComponentType<ModifierProps>;
160
+ code: ComponentType<ModifierProps>;
161
+ uppercase: ComponentType<ModifierProps>;
162
+ superscript: ComponentType<ModifierProps>;
163
+ subscript: ComponentType<ModifierProps>;
164
+ color: ComponentType<ColorModifierProps>;
165
+ backgroundColor: ComponentType<BackgroundColorModifierProps>;
166
+ fontFamily: ComponentType<FontFamilyModifierProps>;
167
+ fontSize: ComponentType<FontSizeModifierProps>;
168
+ }>;
169
+ type BlocksRendererProps = {
170
+ content: BlocksContent;
171
+ blocks?: CustomBlocksConfig;
172
+ modifiers?: CustomModifiersConfig;
173
+ /**
174
+ * Shiki theme for the default `code` block highlighting. Any bundled Shiki
175
+ * theme name (e.g. `github-dark`, `github-light`, `dracula`, `nord`).
176
+ * Defaults to `github-dark`. Ignored when a custom `code` renderer is
177
+ * supplied via `blocks.code`.
178
+ */
179
+ codeTheme?: string;
180
+ /**
181
+ * Adds a "Copy" button to default `code` blocks. Off by default. Ignored when
182
+ * a custom `code` renderer is supplied via `blocks.code`.
183
+ */
184
+ codeCopyButton?: boolean;
185
+ };
186
+
187
+ declare function BlocksRenderer({ content, blocks, modifiers, codeTheme, codeCopyButton, }: BlocksRendererProps): ReactNode;
188
+
189
+ export { type BackgroundColorModifierProps, type BlockComponentProps, BlocksRenderer, type BlocksRendererProps, type ColorModifierProps, type CustomBlocksConfig, type CustomModifiersConfig, type FontFamilyModifierProps, type FontSizeModifierProps, type ModifierProps, type TableCellRenderProps };
package/dist/index.d.ts ADDED
@@ -0,0 +1,189 @@
1
+ import { ReactNode, ComponentType, CSSProperties } from 'react';
2
+ import { BlocksContent, TableCellAlign, CalloutVariant, ButtonAlignment, ButtonLink, ButtonFile, ButtonStyle, SocialPlatform, SocialEmbedOembed, SocialEmbedAlignment, AudioFile, AudioPlayer, AudioAlignment, EmbedProvider, AspectRatio, MediaAlignment, VideoProvider, VideoFile, VideoPlayer } from '@qkix/better-blocks-core';
3
+ export { AspectRatio, AudioAlignment, AudioFile, AudioNode, AudioPlayer, AudioPreload, BlockNode, BlocksContent, ButtonAlignment, ButtonElement, ButtonFile, ButtonLink, ButtonStyle, CalloutNode, CalloutVariant, CodeNode, DetailsNode, DiagramNode, EmbedNode, EmbedProvider, HeadingNode, HorizontalLineNode, ImageNode, InlineNode, LinkNode, ListItemNode, ListNode, MathNode, MediaAlignment, MediaEmbedNode, ParagraphNode, QuoteNode, SocialEmbedAlignment, SocialEmbedNode, SocialEmbedOembed, SocialPlatform, TableCellAlign, TableCellNode, TableHeaderCellNode, TableNode, TableRowNode, TextAlign, TextNode, VideoFile, VideoNode, VideoPlayer, VideoProvider } from '@qkix/better-blocks-core';
4
+
5
+ type ModifierProps = {
6
+ children: ReactNode;
7
+ };
8
+ type ColorModifierProps = {
9
+ children: ReactNode;
10
+ color: string;
11
+ };
12
+ type BackgroundColorModifierProps = {
13
+ children: ReactNode;
14
+ backgroundColor: string;
15
+ };
16
+ type BlockComponentProps<T = Record<string, unknown>> = T & {
17
+ children: ReactNode;
18
+ };
19
+ /** Props handed to custom `table-cell` / `table-header-cell` components. */
20
+ type TableCellRenderProps = {
21
+ align?: TableCellAlign;
22
+ colSpan?: number;
23
+ rowSpan?: number;
24
+ /** `text-align` derived from `align`; undefined when the cell is left-aligned. */
25
+ style?: CSSProperties;
26
+ };
27
+ type CustomBlocksConfig = Partial<{
28
+ paragraph: ComponentType<BlockComponentProps<{
29
+ style?: CSSProperties;
30
+ }>>;
31
+ heading: ComponentType<BlockComponentProps<{
32
+ level: 1 | 2 | 3 | 4 | 5 | 6;
33
+ style?: CSSProperties;
34
+ }>>;
35
+ list: ComponentType<BlockComponentProps<{
36
+ format: 'ordered' | 'unordered' | 'todo';
37
+ indentLevel: number;
38
+ }>>;
39
+ 'list-item': ComponentType<BlockComponentProps<{
40
+ checked?: boolean;
41
+ }>>;
42
+ link: ComponentType<BlockComponentProps<{
43
+ url: string;
44
+ target?: string;
45
+ rel?: string;
46
+ }>>;
47
+ quote: ComponentType<BlockComponentProps<{
48
+ style?: CSSProperties;
49
+ }>>;
50
+ code: ComponentType<BlockComponentProps<{
51
+ plainText: string;
52
+ language?: string;
53
+ }>>;
54
+ image: ComponentType<{
55
+ image: {
56
+ url: string;
57
+ alternativeText?: string | null;
58
+ width?: number;
59
+ height?: number;
60
+ };
61
+ caption?: string;
62
+ imageAlign?: 'left' | 'center' | 'right';
63
+ children?: ReactNode;
64
+ }>;
65
+ 'horizontal-line': ComponentType<Record<string, unknown>>;
66
+ table: ComponentType<BlockComponentProps>;
67
+ 'table-row': ComponentType<BlockComponentProps>;
68
+ 'table-cell': ComponentType<BlockComponentProps<TableCellRenderProps>>;
69
+ 'table-header-cell': ComponentType<BlockComponentProps<TableCellRenderProps>>;
70
+ 'media-embed': ComponentType<{
71
+ url: string;
72
+ originalUrl?: string;
73
+ }>;
74
+ math: ComponentType<{
75
+ formula: string;
76
+ inline: boolean;
77
+ }>;
78
+ diagram: ComponentType<{
79
+ code: string;
80
+ format: 'mermaid';
81
+ }>;
82
+ callout: ComponentType<BlockComponentProps<{
83
+ variant: CalloutVariant;
84
+ title?: string;
85
+ }>>;
86
+ details: ComponentType<BlockComponentProps<{
87
+ summary: string;
88
+ defaultOpen?: boolean;
89
+ }>>;
90
+ button: ComponentType<{
91
+ label: string;
92
+ buttonType: 'link' | 'file';
93
+ alignment?: ButtonAlignment;
94
+ link?: ButtonLink;
95
+ file?: ButtonFile;
96
+ showFileSize?: boolean;
97
+ showFileIcon?: boolean;
98
+ filePreview?: boolean;
99
+ style?: ButtonStyle;
100
+ cssClass?: string;
101
+ }>;
102
+ 'social-embed': ComponentType<{
103
+ platform: SocialPlatform;
104
+ url?: string;
105
+ embedCode?: string;
106
+ oembed?: SocialEmbedOembed;
107
+ alignment?: SocialEmbedAlignment;
108
+ caption?: string;
109
+ }>;
110
+ audio: ComponentType<{
111
+ file: AudioFile;
112
+ title?: string;
113
+ caption?: string;
114
+ player: AudioPlayer;
115
+ alignment?: AudioAlignment;
116
+ }>;
117
+ embed: ComponentType<{
118
+ source?: 'url' | 'iframe';
119
+ url?: string;
120
+ iframe?: string;
121
+ embedHtml?: string;
122
+ embedSrc?: string;
123
+ provider?: EmbedProvider;
124
+ thumbnail?: string;
125
+ aspectRatio?: AspectRatio;
126
+ customAspectRatio?: string;
127
+ alignment?: MediaAlignment;
128
+ caption?: string;
129
+ title?: string;
130
+ }>;
131
+ video: ComponentType<{
132
+ provider?: VideoProvider;
133
+ url: string;
134
+ assetId?: string;
135
+ playbackId?: string;
136
+ file?: VideoFile;
137
+ poster?: string;
138
+ title?: string;
139
+ caption?: string;
140
+ transcript?: string;
141
+ player?: VideoPlayer;
142
+ alignment?: MediaAlignment;
143
+ aspectRatio?: AspectRatio;
144
+ customAspectRatio?: string;
145
+ }>;
146
+ }>;
147
+ type FontFamilyModifierProps = {
148
+ children: ReactNode;
149
+ fontFamily: string;
150
+ };
151
+ type FontSizeModifierProps = {
152
+ children: ReactNode;
153
+ fontSize: string;
154
+ };
155
+ type CustomModifiersConfig = Partial<{
156
+ bold: ComponentType<ModifierProps>;
157
+ italic: ComponentType<ModifierProps>;
158
+ underline: ComponentType<ModifierProps>;
159
+ strikethrough: ComponentType<ModifierProps>;
160
+ code: ComponentType<ModifierProps>;
161
+ uppercase: ComponentType<ModifierProps>;
162
+ superscript: ComponentType<ModifierProps>;
163
+ subscript: ComponentType<ModifierProps>;
164
+ color: ComponentType<ColorModifierProps>;
165
+ backgroundColor: ComponentType<BackgroundColorModifierProps>;
166
+ fontFamily: ComponentType<FontFamilyModifierProps>;
167
+ fontSize: ComponentType<FontSizeModifierProps>;
168
+ }>;
169
+ type BlocksRendererProps = {
170
+ content: BlocksContent;
171
+ blocks?: CustomBlocksConfig;
172
+ modifiers?: CustomModifiersConfig;
173
+ /**
174
+ * Shiki theme for the default `code` block highlighting. Any bundled Shiki
175
+ * theme name (e.g. `github-dark`, `github-light`, `dracula`, `nord`).
176
+ * Defaults to `github-dark`. Ignored when a custom `code` renderer is
177
+ * supplied via `blocks.code`.
178
+ */
179
+ codeTheme?: string;
180
+ /**
181
+ * Adds a "Copy" button to default `code` blocks. Off by default. Ignored when
182
+ * a custom `code` renderer is supplied via `blocks.code`.
183
+ */
184
+ codeCopyButton?: boolean;
185
+ };
186
+
187
+ declare function BlocksRenderer({ content, blocks, modifiers, codeTheme, codeCopyButton, }: BlocksRendererProps): ReactNode;
188
+
189
+ export { type BackgroundColorModifierProps, type BlockComponentProps, BlocksRenderer, type BlocksRendererProps, type ColorModifierProps, type CustomBlocksConfig, type CustomModifiersConfig, type FontFamilyModifierProps, type FontSizeModifierProps, type ModifierProps, type TableCellRenderProps };