Skip to content

Commit a69bba9

Browse files
nperez0111nperez0111
authored
docs: update typescript types to be more convenient to use (#2536)
1 parent c59b750 commit a69bba9

12 files changed

Lines changed: 217 additions & 184 deletions

File tree

‎examples/06-custom-schema/04-pdf-file-block/src/PDF.tsx‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,7 @@ import { RiFilePdfFill } from "react-icons/ri";
1010
import "./styles.css";
1111

1212
export const PDFPreview = (
13-
props: Omit<
14-
ReactCustomBlockRenderProps<
15-
FileBlockConfig["type"],
16-
FileBlockConfig["propSchema"],
17-
FileBlockConfig["content"]
18-
>,
19-
"contentRef"
20-
>,
13+
props: Omit<ReactCustomBlockRenderProps<FileBlockConfig>, "contentRef">,
2114
) => {
2215
return (
2316
<embed

‎packages/core/src/schema/blocks/createSpec.ts‎

Lines changed: 27 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ import {
1414
} from "./internal.js";
1515
import {
1616
BlockConfig,
17+
BlockConfigOrCreator,
1718
BlockImplementation,
19+
BlockImplementationOrCreator,
1820
BlockSpec,
1921
LooseBlockSpec,
2022
} from "./types.js";
@@ -297,18 +299,17 @@ export function createBlockSpec<
297299
const TOptions extends Partial<Record<string, any>> | undefined = undefined,
298300
>(
299301
blockConfigOrCreator: BlockConfig<TName, TProps, TContent>,
300-
blockImplementationOrCreator:
301-
| BlockImplementation<TName, TProps, TContent>
302+
blockImplementationOrCreator: BlockImplementationOrCreator<
303+
BlockConfig<TName, TProps, TContent>,
304+
TOptions
305+
>,
306+
extensionsOrCreator?:
307+
| (ExtensionFactoryInstance | Extension)[]
302308
| (TOptions extends undefined
303-
? () => BlockImplementation<TName, TProps, TContent>
309+
? () => (ExtensionFactoryInstance | Extension)[]
304310
: (
305311
options: Partial<TOptions>,
306-
) => BlockImplementation<TName, TProps, TContent>),
307-
extensionsOrCreator?:
308-
| ExtensionFactoryInstance[]
309-
| (TOptions extends undefined
310-
? () => ExtensionFactoryInstance[]
311-
: (options: Partial<TOptions>) => ExtensionFactoryInstance[]),
312+
) => (ExtensionFactoryInstance | Extension)[]),
312313
): (options?: Partial<TOptions>) => BlockSpec<TName, TProps, TContent>;
313314
export function createBlockSpec<
314315
const TName extends string,
@@ -318,30 +319,17 @@ export function createBlockSpec<
318319
const TOptions extends Partial<Record<string, any>>,
319320
>(
320321
blockCreator: (options: Partial<TOptions>) => BlockConf,
321-
blockImplementationOrCreator:
322-
| BlockImplementation<
323-
BlockConf["type"],
324-
BlockConf["propSchema"],
325-
BlockConf["content"]
326-
>
322+
blockImplementationOrCreator: BlockImplementationOrCreator<
323+
BlockConf,
324+
TOptions
325+
>,
326+
extensionsOrCreator?:
327+
| (ExtensionFactoryInstance | Extension)[]
327328
| (TOptions extends undefined
328-
? () => BlockImplementation<
329-
BlockConf["type"],
330-
BlockConf["propSchema"],
331-
BlockConf["content"]
332-
>
329+
? () => (ExtensionFactoryInstance | Extension)[]
333330
: (
334331
options: Partial<TOptions>,
335-
) => BlockImplementation<
336-
BlockConf["type"],
337-
BlockConf["propSchema"],
338-
BlockConf["content"]
339-
>),
340-
extensionsOrCreator?:
341-
| ExtensionFactoryInstance[]
342-
| (TOptions extends undefined
343-
? () => ExtensionFactoryInstance[]
344-
: (options: Partial<TOptions>) => ExtensionFactoryInstance[]),
332+
) => (ExtensionFactoryInstance | Extension)[]),
345333
): (
346334
options?: Partial<TOptions>,
347335
) => BlockSpec<
@@ -355,23 +343,18 @@ export function createBlockSpec<
355343
const TContent extends "inline" | "none",
356344
const TOptions extends Partial<Record<string, any>> | undefined = undefined,
357345
>(
358-
blockConfigOrCreator:
359-
| BlockConfig<TName, TProps, TContent>
360-
| (TOptions extends undefined
361-
? () => BlockConfig<TName, TProps, TContent>
362-
: (options: Partial<TOptions>) => BlockConfig<TName, TProps, TContent>),
363-
blockImplementationOrCreator:
364-
| BlockImplementation<TName, TProps, TContent>
346+
blockConfigOrCreator: BlockConfigOrCreator<TName, TProps, TContent, TOptions>,
347+
blockImplementationOrCreator: BlockImplementationOrCreator<
348+
BlockConfig<TName, TProps, TContent>,
349+
TOptions
350+
>,
351+
extensionsOrCreator?:
352+
| (ExtensionFactoryInstance | Extension)[]
365353
| (TOptions extends undefined
366-
? () => BlockImplementation<TName, TProps, TContent>
354+
? () => (ExtensionFactoryInstance | Extension)[]
367355
: (
368356
options: Partial<TOptions>,
369-
) => BlockImplementation<TName, TProps, TContent>),
370-
extensionsOrCreator?:
371-
| ExtensionFactoryInstance[]
372-
| (TOptions extends undefined
373-
? () => ExtensionFactoryInstance[]
374-
: (options: Partial<TOptions>) => ExtensionFactoryInstance[]),
357+
) => (ExtensionFactoryInstance | Extension)[]),
375358
): (options?: Partial<TOptions>) => BlockSpec<TName, TProps, TContent> {
376359
return (options = {} as TOptions) => {
377360
const blockConfig =

‎packages/core/src/schema/blocks/types.ts‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,34 @@ export interface BlockConfig<
8686
// e.g. tables, alerts (with title & content)
8787
}
8888

89+
/**
90+
* BlockConfigOrCreator is a union type of BlockConfig and a function that returns a BlockConfig.
91+
* This is used to create block configs that can be passed to the createBlockSpec function.
92+
*/
93+
export type BlockConfigOrCreator<
94+
TName extends string = string,
95+
TProps extends PropSchema = PropSchema,
96+
TContent extends "inline" | "none" = "inline" | "none",
97+
TOptions extends Record<string, any> | undefined =
98+
| Record<string, any>
99+
| undefined,
100+
> =
101+
| BlockConfig<TName, TProps, TContent>
102+
| (TOptions extends undefined
103+
? () => BlockConfig<TName, TProps, TContent>
104+
: (options: Partial<TOptions>) => BlockConfig<TName, TProps, TContent>);
105+
106+
/**
107+
* ExtractBlockConfigFromConfigOrCreator is a helper type that extracts the BlockConfig type from a BlockConfigOrCreator.
108+
*/
109+
export type ExtractBlockConfigFromConfigOrCreator<
110+
ConfigOrCreator extends
111+
| BlockConfig<string, PropSchema, "inline" | "none">
112+
| ((...args: any[]) => BlockConfig<string, PropSchema, "inline" | "none">),
113+
> = ConfigOrCreator extends (...args: any[]) => infer Config
114+
? Config
115+
: ConfigOrCreator;
116+
89117
// restrict content to "inline" and "none" only
90118
export type CustomBlockConfig<
91119
T extends string = string,
@@ -104,6 +132,32 @@ export type BlockSpec<
104132
extensions?: (Extension | ExtensionFactoryInstance)[];
105133
};
106134

135+
/**
136+
* BlockSpecOrCreator is a union type of BlockSpec and a function that returns a BlockSpec.
137+
* This is used to create block specs that can be passed to the createBlockSpec function.
138+
*/
139+
export type BlockSpecOrCreator<
140+
T extends string = string,
141+
PS extends PropSchema = PropSchema,
142+
C extends "inline" | "none" | "table" = "inline" | "none" | "table",
143+
TOptions extends Record<string, any> | undefined =
144+
| Record<string, any>
145+
| undefined,
146+
> =
147+
| BlockSpec<T, PS, C>
148+
| (TOptions extends undefined
149+
? () => BlockSpec<T, PS, C>
150+
: (options: Partial<TOptions>) => BlockSpec<T, PS, C>);
151+
152+
/**
153+
* ExtractBlockSpecFromSpecOrCreator is a helper type that extracts the BlockSpec type from a BlockSpecOrCreator.
154+
*/
155+
export type ExtractBlockSpecFromSpecOrCreator<
156+
SpecOrCreator extends
157+
| BlockSpec<string, PropSchema, "inline" | "none">
158+
| ((...args: any[]) => BlockSpec<string, PropSchema, "inline" | "none">),
159+
> = SpecOrCreator extends (...args: any[]) => infer Spec ? Spec : SpecOrCreator;
160+
107161
/**
108162
* This allows de-coupling the types that we display to users versus the types we expose internally.
109163
*
@@ -497,6 +551,46 @@ export type BlockImplementation<
497551
parseContent?: (options: { el: HTMLElement; schema: Schema }) => Fragment;
498552
};
499553

554+
/**
555+
* BlockImplementationOrCreator is a union type of BlockImplementation and a function that returns a BlockImplementation.
556+
* This is used to create block implementations that can be passed to the createBlockSpec function.
557+
*/
558+
export type BlockImplementationOrCreator<
559+
ConfigOrCreator extends BlockConfigOrCreator = BlockConfigOrCreator,
560+
TOptions extends Record<string, any> | undefined =
561+
| Record<string, any>
562+
| undefined,
563+
Config extends
564+
ExtractBlockConfigFromConfigOrCreator<ConfigOrCreator> = ExtractBlockConfigFromConfigOrCreator<ConfigOrCreator>,
565+
> =
566+
| BlockImplementation<Config["type"], Config["propSchema"], Config["content"]>
567+
| (TOptions extends undefined
568+
? () => BlockImplementation<
569+
Config["type"],
570+
Config["propSchema"],
571+
Config["content"]
572+
>
573+
: (
574+
options: Partial<TOptions>,
575+
) => BlockImplementation<
576+
Config["type"],
577+
Config["propSchema"],
578+
Config["content"]
579+
>);
580+
581+
/**
582+
* ExtractBlockImplementationFromImplementationOrCreator is a helper type that extracts the BlockImplementation type from a BlockImplementationOrCreator.
583+
*/
584+
export type ExtractBlockImplementationFromImplementationOrCreator<
585+
ImplementationOrCreator extends
586+
| BlockImplementation<string, PropSchema, "inline" | "none">
587+
| ((
588+
...args: any[]
589+
) => BlockImplementation<string, PropSchema, "inline" | "none">),
590+
> = ImplementationOrCreator extends (...args: any[]) => infer Implementation
591+
? Implementation
592+
: ImplementationOrCreator;
593+
500594
// restrict content to "inline" and "none" only
501595
export type CustomBlockImplementation<
502596
T extends string = string,

‎packages/react/src/blocks/Audio/block.tsx‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,7 @@ import { LinkWithCaption } from "../File/helpers/toExternalHTML/LinkWithCaption.
1313

1414
export const AudioPreview = (
1515
props: Omit<
16-
ReactCustomBlockRenderProps<
17-
ReturnType<typeof createAudioBlockConfig>["type"],
18-
ReturnType<typeof createAudioBlockConfig>["propSchema"],
19-
ReturnType<typeof createAudioBlockConfig>["content"]
20-
>,
16+
ReactCustomBlockRenderProps<typeof createAudioBlockConfig>,
2117
"contentRef"
2218
>,
2319
) => {
@@ -40,11 +36,7 @@ export const AudioPreview = (
4036

4137
export const AudioToExternalHTML = (
4238
props: Omit<
43-
ReactCustomBlockRenderProps<
44-
ReturnType<typeof createAudioBlockConfig>["type"],
45-
ReturnType<typeof createAudioBlockConfig>["propSchema"],
46-
ReturnType<typeof createAudioBlockConfig>["content"]
47-
>,
39+
ReactCustomBlockRenderProps<typeof createAudioBlockConfig>,
4840
"contentRef"
4941
>,
5042
) => {
@@ -76,11 +68,7 @@ export const AudioToExternalHTML = (
7668
};
7769

7870
export const AudioBlock = (
79-
props: ReactCustomBlockRenderProps<
80-
ReturnType<typeof createAudioBlockConfig>["type"],
81-
ReturnType<typeof createAudioBlockConfig>["propSchema"],
82-
ReturnType<typeof createAudioBlockConfig>["content"]
83-
>,
71+
props: ReactCustomBlockRenderProps<typeof createAudioBlockConfig>,
8472
) => {
8573
return (
8674
<FileBlockWrapper

‎packages/react/src/blocks/File/helpers/render/AddFileButton.tsx‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,7 @@ import { useDictionary } from "../../../../i18n/dictionary.js";
99
import { ReactCustomBlockRenderProps } from "../../../../schema/ReactBlockSpec.js";
1010

1111
export const AddFileButton = (
12-
props: Omit<
13-
ReactCustomBlockRenderProps<
14-
FileBlockConfig["type"],
15-
FileBlockConfig["propSchema"],
16-
FileBlockConfig["content"]
17-
>,
18-
"contentRef"
19-
> & {
12+
props: Omit<ReactCustomBlockRenderProps<FileBlockConfig>, "contentRef"> & {
2013
buttonIcon?: ReactNode;
2114
},
2215
) => {

‎packages/react/src/blocks/File/helpers/render/FileBlockWrapper.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FileBlockConfig } from "@blocknote/core";
1+
import { BlockConfig, FileBlockConfig } from "@blocknote/core";
22
import { CSSProperties, ReactNode } from "react";
33

44
import { useUploadLoading } from "../../../../hooks/useUploadLoading.js";
@@ -9,9 +9,11 @@ import { FileNameWithIcon } from "./FileNameWithIcon.js";
99
export const FileBlockWrapper = (
1010
props: Omit<
1111
ReactCustomBlockRenderProps<
12-
FileBlockConfig["type"],
13-
FileBlockConfig["propSchema"] & { showPreview?: { default: true } },
14-
FileBlockConfig["content"]
12+
BlockConfig<
13+
FileBlockConfig["type"],
14+
FileBlockConfig["propSchema"] & { showPreview?: { default: true } },
15+
FileBlockConfig["content"]
16+
>
1517
>,
1618
"contentRef"
1719
> & {

‎packages/react/src/blocks/File/helpers/render/FileNameWithIcon.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,7 @@ import { ReactCustomBlockRenderProps } from "../../../../schema/ReactBlockSpec.j
55

66
export const FileNameWithIcon = (
77
props: Omit<
8-
ReactCustomBlockRenderProps<
9-
FileBlockConfig["type"],
10-
FileBlockConfig["propSchema"],
11-
FileBlockConfig["content"]
12-
>,
8+
ReactCustomBlockRenderProps<FileBlockConfig>,
139
"editor" | "contentRef"
1410
>,
1511
) => (

‎packages/react/src/blocks/File/helpers/render/ResizableFileBlockWrapper.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FileBlockConfig } from "@blocknote/core";
1+
import { BlockConfig, FileBlockConfig } from "@blocknote/core";
22
import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
33

44
import { useUploadLoading } from "../../../../hooks/useUploadLoading.js";
@@ -8,13 +8,15 @@ import { FileBlockWrapper } from "./FileBlockWrapper.js";
88
export const ResizableFileBlockWrapper = (
99
props: Omit<
1010
ReactCustomBlockRenderProps<
11-
FileBlockConfig["type"],
12-
FileBlockConfig["propSchema"] & {
13-
showPreview?: { default: true };
14-
previewWidth?: { default: number };
15-
textAlignment?: { default: "left" };
16-
},
17-
FileBlockConfig["content"]
11+
BlockConfig<
12+
FileBlockConfig["type"],
13+
FileBlockConfig["propSchema"] & {
14+
showPreview?: { default: true };
15+
previewWidth?: { default: number };
16+
textAlignment?: { default: "left" };
17+
},
18+
FileBlockConfig["content"]
19+
>
1820
>,
1921
"contentRef"
2022
> & {

‎packages/react/src/blocks/Image/block.tsx‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,7 @@ import { LinkWithCaption } from "../File/helpers/toExternalHTML/LinkWithCaption.
1212

1313
export const ImagePreview = (
1414
props: Omit<
15-
ReactCustomBlockRenderProps<
16-
ReturnType<typeof createImageBlockConfig>["type"],
17-
ReturnType<typeof createImageBlockConfig>["propSchema"],
18-
ReturnType<typeof createImageBlockConfig>["content"]
19-
>,
15+
ReactCustomBlockRenderProps<typeof createImageBlockConfig>,
2016
"contentRef"
2117
>,
2218
) => {
@@ -39,11 +35,7 @@ export const ImagePreview = (
3935

4036
export const ImageToExternalHTML = (
4137
props: Omit<
42-
ReactCustomBlockRenderProps<
43-
ReturnType<typeof createImageBlockConfig>["type"],
44-
ReturnType<typeof createImageBlockConfig>["propSchema"],
45-
ReturnType<typeof createImageBlockConfig>["content"]
46-
>,
38+
ReactCustomBlockRenderProps<typeof createImageBlockConfig>,
4739
"contentRef"
4840
>,
4941
) => {
@@ -81,11 +73,7 @@ export const ImageToExternalHTML = (
8173
};
8274

8375
export const ImageBlock = (
84-
props: ReactCustomBlockRenderProps<
85-
ReturnType<typeof createImageBlockConfig>["type"],
86-
ReturnType<typeof createImageBlockConfig>["propSchema"],
87-
ReturnType<typeof createImageBlockConfig>["content"]
88-
>,
76+
props: ReactCustomBlockRenderProps<typeof createImageBlockConfig>,
8977
) => {
9078
return (
9179
<ResizableFileBlockWrapper

0 commit comments

Comments
 (0)