@contember/react-client 1.0.0-alpha.8 → 1.0.0-rc.4

package/dist/types/upload/SingleFileUploadState.d.ts

@@ -0,0 +1,31 @@
+import type { FileUploader, FileUploadError } from '@contember/client';
+export declare type SingleFileUploadState<Result = unknown, Metadata = undefined> = {
+    readyState: 'initializing';
+    abortController: AbortController;
+    file: File;
+    previewUrl: string;
+} | {
+    readyState: 'uploading';
+    abortController: AbortController;
+    file: File;
+    metadata: Metadata;
+    previewUrl: string;
+    progress: number | undefined;
+    uploader: FileUploader;
+} | {
+    readyState: 'success';
+    file: File;
+    metadata: Metadata;
+    previewUrl: string;
+    result: Result;
+    uploader: FileUploader;
+} | {
+    readyState: 'error';
+    errors: FileUploadError[] | undefined;
+    rawError: any;
+    file: File;
+    metadata: Metadata | undefined;
+    previewUrl: string;
+    uploader: FileUploader | undefined;
+};
+//# sourceMappingURL=SingleFileUploadState.d.ts.map

package/dist/types/upload/SingleFileUploadState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleFileUploadState.d.ts","sourceRoot":"","sources":["../../../src/upload/SingleFileUploadState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAEtE,oBAAY,qBAAqB,CAAC,MAAM,GAAG,OAAO,EAAE,QAAQ,GAAG,SAAS,IACrE;IACA,UAAU,EAAE,cAAc,CAAA;IAC1B,eAAe,EAAE,eAAe,CAAA;IAChC,IAAI,EAAE,IAAI,CAAA;IACV,UAAU,EAAE,MAAM,CAAA;CACjB,GACD;IACA,UAAU,EAAE,WAAW,CAAA;IACvB,eAAe,EAAE,eAAe,CAAA;IAChC,IAAI,EAAE,IAAI,CAAA;IACV,QAAQ,EAAE,QAAQ,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;IAC5B,QAAQ,EAAE,YAAY,CAAA;CACrB,GACD;IACA,UAAU,EAAE,SAAS,CAAA;IACrB,IAAI,EAAE,IAAI,CAAA;IACV,QAAQ,EAAE,QAAQ,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,YAAY,CAAA;CACrB,GACD;IACA,UAAU,EAAE,OAAO,CAAA;IACnB,MAAM,EAAE,eAAe,EAAE,GAAG,SAAS,CAAA;IACrC,QAAQ,EAAE,GAAG,CAAA;IACb,IAAI,EAAE,IAAI,CAAA;IACV,QAAQ,EAAE,QAAQ,GAAG,SAAS,CAAA;IAC9B,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAA;CACjC,CAAA"}

package/dist/types/upload/fileUploadReducer.d.ts

@@ -0,0 +1,5 @@
+import type { FileUploadAction } from './FileUploadAction';
+import type { FileUploadMultiTemporalState } from './FileUploadMultiTemporalState';
+export declare const initializeFileUploadState: <Result = unknown, Metadata = undefined>() => FileUploadMultiTemporalState<Result, Metadata>;
+export declare const fileUploadReducer: <Result = unknown, Metadata = undefined>(previousState: FileUploadMultiTemporalState<Result, Metadata>, action: FileUploadAction<Result, Metadata>) => FileUploadMultiTemporalState<Result, Metadata>;
+//# sourceMappingURL=fileUploadReducer.d.ts.map

package/dist/types/upload/fileUploadReducer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileUploadReducer.d.ts","sourceRoot":"","sources":["../../../src/upload/fileUploadReducer.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAC1D,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAA;AAGlF,eAAO,MAAM,yBAAyB,8FASpC,CAAA;AAEF,eAAO,MAAM,iBAAiB,uMAsK7B,CAAA"}

package/dist/types/upload/index.d.ts

@@ -0,0 +1,8 @@
+export * from './useFileUpload';
+export type { FileId } from './FileId';
+export type { FileUploadCompoundState } from './FileUploadCompoundState';
+export type { FileUploadMetadata } from './FileUploadMetadata';
+export type { StartUploadFileOptions, StartUpload, FileUploadOperations, InitializeUpload, PurgeUpload, FailUpload, } from './FileUploadOperations';
+export type { FileWithMetadata } from './FileWithMetadata';
+export type { SingleFileUploadState } from './SingleFileUploadState';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/upload/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/upload/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAE/B,YAAY,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACtC,YAAY,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;AACxE,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAC9D,YAAY,EACX,sBAAsB,EACtB,WAAW,EACX,oBAAoB,EACpB,gBAAgB,EAChB,WAAW,EACX,UAAU,GACV,MAAM,wBAAwB,CAAA;AAC/B,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAC1D,YAAY,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/types/upload/toFileId.d.ts

@@ -0,0 +1,4 @@
+import type { FileId } from './FileId';
+import type { FileUploadMultiTemporalState } from './FileUploadMultiTemporalState';
+export declare const toFileId: <Result = unknown, Metadata = undefined>(state: FileUploadMultiTemporalState<Result, Metadata>, fileOrId: File | FileId) => FileId;
+//# sourceMappingURL=toFileId.d.ts.map

package/dist/types/upload/toFileId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toFileId.d.ts","sourceRoot":"","sources":["../../../src/upload/toFileId.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAA;AAElF,eAAO,MAAM,QAAQ,4GAEV,IAAI,GAAG,MAAM,WAMvB,CAAA"}

package/dist/types/upload/useFileUpload.d.ts

@@ -0,0 +1,11 @@
+import type { FileUploadCompoundState } from './FileUploadCompoundState';
+import type { FileUploadOperations } from './FileUploadOperations';
+export declare type FileUpload<Result = unknown, Metadata = undefined> = [
+    FileUploadCompoundState<Result, Metadata>,
+    FileUploadOperations<Metadata>
+];
+export interface FileUploadOptions {
+    maxUpdateFrequency?: number;
+}
+export declare const useFileUpload: <Result = unknown, Metadata = undefined>(options?: FileUploadOptions | undefined) => FileUpload<Result, Metadata>;
+//# sourceMappingURL=useFileUpload.d.ts.map

package/dist/types/upload/useFileUpload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFileUpload.d.ts","sourceRoot":"","sources":["../../../src/upload/useFileUpload.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;AAGxE,OAAO,KAAK,EAEX,oBAAoB,EAKpB,MAAM,wBAAwB,CAAA;AAK/B,oBAAY,UAAU,CAAC,MAAM,GAAG,OAAO,EAAE,QAAQ,GAAG,SAAS,IAAI;IAChE,uBAAuB,CAAC,MAAM,EAAE,QAAQ,CAAC;IACzC,oBAAoB,CAAC,QAAQ,CAAC;CAC9B,CAAA;AAED,MAAM,WAAW,iBAAiB;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAED,eAAO,MAAM,aAAa,mHAwOzB,CAAA"}

package/dist/types/useGraphQlClient.d.ts

@@ -0,0 +1,3 @@
+import { GraphQlClient } from '@contember/client';
+export declare const useGraphQlClient: (path: string) => GraphQlClient;
+//# sourceMappingURL=useGraphQlClient.d.ts.map

package/dist/types/useGraphQlClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGraphQlClient.d.ts","sourceRoot":"","sources":["../../src/useGraphQlClient.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAKjD,eAAO,MAAM,gBAAgB,SAAU,MAAM,KAAG,aAI/C,CAAA"}

package/dist/types/utils/assertNever.d.ts

@@ -0,0 +1,2 @@
+export declare function assertNever(_: never): asserts _ is never;
+//# sourceMappingURL=assertNever.d.ts.map

package/dist/types/utils/assertNever.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"assertNever.d.ts","sourceRoot":"","sources":["../../../src/utils/assertNever.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC,CAAC,IAAI,KAAK,CAExD"}

package/dist/types/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './assertNever';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@contember/react-client",
   "license": "Apache-2.0",
-  "version": "1.0.0-alpha.8",
+  "version": "1.0.0-rc.4",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/production/index.js",
@@ -14,19 +14,18 @@
     }
   },
   "files": [
-    "dist/"
+    "dist/",
+    "src/"
   ],
-  "typings": "./dist/react-client.d.ts",
+  "typings": "./dist/types/index.d.ts",
   "dependencies": {
-    "@contember/client": "1.0.0-alpha.8"
+    "@contember/client": "1.0.0-rc.4"
   },
   "peerDependencies": {
     "react": "^17"
   },
   "scripts": {
-    "build": "vite build --mode development && vite build --mode production",
-    "build:api:dev": "api-extractor run --local",
-    "build:api:prod": "api-extractor run"
+    "build": "vite build --mode development && vite build --mode production"
   },
   "readme": "# `@contember/react-client`\n\n## Usage\nIf you wish to communicate with any Contember API, wrap your code with the `ContemberClient` component:\n```tsx\nimport { ContemberClient } from '@contember/react-client'\n\n<ContemberClient\n\tapiBaseUrl=\"https://api.example.com\"\n\tproject=\"PROJECT-SLUG\"\n\tsessionToken=\"SESSION-TOKEN\"\n\tstage=\"STAGE-SLUG\"\n>\n  ...\n</ContemberClient>\n```\n\n## Notable APIs\nYou'll have to look at the code for now, sorry.\n- `<RichTextRenderer />`\n- `useFileUpload`\n- `useContentApiRequest` / `useTenantApiRequest` / `useSystemApiRequest`\n"
 }

package/src/ClientError.ts

@@ -0,0 +1 @@
+export class ClientError extends Error {}

package/src/ContemberClient.tsx

@@ -0,0 +1,48 @@
+import { memo, useCallback, useEffect, useState } from 'react'
+import { SessionTokenContext, SetSessionTokenContext } from './auth'
+import { ApiBaseUrlContext, LoginTokenContext } from './config'
+import { ProjectSlugContext, StageSlugContext } from './project'
+
+export interface ContemberClientProps {
+	apiBaseUrl: string
+	sessionToken?: string
+	loginToken?: string
+	project?: string
+	stage?: string
+}
+
+const sessionTokenKey = 'contember_session_token'
+
+export const ContemberClient = memo<ContemberClientProps & { children: React.ReactNode }>(function ContemberClient({
+	apiBaseUrl,
+	children,
+	loginToken,
+	project,
+	sessionToken,
+	stage,
+}) {
+	const [sessionTokenInner, setSessionTokenInner] = useState(() => localStorage.getItem(sessionTokenKey) ?? sessionToken  ?? undefined)
+
+	const setSessionToken = useCallback((token: string | undefined) => {
+		if (token !== undefined) {
+			localStorage.setItem(sessionTokenKey, token)
+		} else {
+			localStorage.removeItem(sessionTokenKey)
+		}
+		setSessionTokenInner(token)
+	}, [])
+
+	return (
+		<ApiBaseUrlContext.Provider value={apiBaseUrl}>
+			<LoginTokenContext.Provider value={loginToken}>
+				<SetSessionTokenContext.Provider value={setSessionToken}>
+					<SessionTokenContext.Provider value={sessionTokenInner}>
+						<ProjectSlugContext.Provider value={project}>
+							<StageSlugContext.Provider value={stage}>{children}</StageSlugContext.Provider>
+						</ProjectSlugContext.Provider>
+					</SessionTokenContext.Provider>
+				</SetSessionTokenContext.Provider>
+			</LoginTokenContext.Provider>
+		</ApiBaseUrlContext.Provider>
+	)
+})

package/src/ambient.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/src/apiRequest/ApiRequestAction.ts

@@ -0,0 +1,17 @@
+import type { GraphQlClientFailedRequestMetadata } from '@contember/client'
+
+export type ApiRequestAction<SuccessData> =
+	| {
+			type: 'uninitialize'
+	  }
+	| {
+			type: 'initialize'
+	  }
+	| {
+			type: 'resolveSuccessfully'
+			data: SuccessData
+	  }
+	| {
+			type: 'resolveWithError'
+			error: GraphQlClientFailedRequestMetadata
+	  }

package/src/apiRequest/ApiRequestState.ts

@@ -0,0 +1,25 @@
+import type { GraphQlClientFailedRequestMetadata } from '@contember/client'
+
+export type ApiRequestState<SuccessData> =
+	| {
+			isLoading: false
+			isFinished: false
+			readyState: 'uninitialized'
+	  }
+	| {
+			isLoading: true
+			isFinished: false
+			readyState: 'pending'
+	  }
+	| {
+			isLoading: false
+			isFinished: true
+			readyState: 'networkSuccess'
+			data: SuccessData
+	  }
+	| {
+			isLoading: false
+			isFinished: true
+			readyState: 'networkError'
+			data: GraphQlClientFailedRequestMetadata
+	  }

package/src/apiRequest/apiRequestReducer.ts

@@ -0,0 +1,41 @@
+import type { ApiRequestAction } from './ApiRequestAction'
+import type { ApiRequestState } from './ApiRequestState'
+
+export type ApiRequestReducer<SuccessData> = (
+	previousState: ApiRequestState<SuccessData>,
+	action: ApiRequestAction<SuccessData>,
+) => ApiRequestState<SuccessData>
+
+export const apiRequestReducer = <SuccessData>(
+	previousState: ApiRequestState<SuccessData>,
+	action: ApiRequestAction<SuccessData>,
+): ApiRequestState<SuccessData> => {
+	switch (action.type) {
+		case 'uninitialize':
+			return {
+				readyState: 'uninitialized',
+				isFinished: false,
+				isLoading: false,
+			}
+		case 'initialize':
+			return {
+				readyState: 'pending',
+				isFinished: false,
+				isLoading: true,
+			}
+		case 'resolveSuccessfully':
+			return {
+				readyState: 'networkSuccess',
+				data: action.data,
+				isFinished: true,
+				isLoading: false,
+			}
+		case 'resolveWithError':
+			return {
+				readyState: 'networkError',
+				data: action.error,
+				isFinished: true,
+				isLoading: false,
+			}
+	}
+}

package/src/apiRequest/index.ts

@@ -0,0 +1,4 @@
+export * from './ApiRequestAction'
+export * from './apiRequestReducer'
+export * from './ApiRequestState'
+export * from './useApiRequest'

package/src/apiRequest/useApiRequest.ts

@@ -0,0 +1,73 @@
+import type {
+	GraphQlClient,
+	GraphQlClientFailedRequestMetadata,
+	GraphQlClientRequestOptions,
+	GraphQlClientVariables,
+} from '@contember/client'
+import { useCallback, useEffect, useReducer, useRef } from 'react'
+import { ApiRequestReducer, apiRequestReducer } from './apiRequestReducer'
+import type { ApiRequestState } from './ApiRequestState'
+
+const initialState: ApiRequestState<any> = {
+	isLoading: false,
+	isFinished: false,
+	readyState: 'uninitialized',
+}
+
+export type UseApiRequestResult<SuccessData> = [
+	ApiRequestState<SuccessData>,
+	(
+		query: string,
+		variables?: GraphQlClientVariables,
+		options?: Omit<GraphQlClientRequestOptions, 'variables'>,
+	) => Promise<SuccessData>,
+]
+
+export const useApiRequest = <SuccessData>(client: GraphQlClient): UseApiRequestResult<SuccessData> => {
+	const [state, dispatch] = useReducer(apiRequestReducer as ApiRequestReducer<SuccessData>, initialState)
+
+	const isUnmountedRef = useRef(false)
+	const sendRequest = useCallback(
+		async (
+			query: string,
+			variables: GraphQlClientVariables = {},
+			options?: Omit<GraphQlClientRequestOptions, 'variables'>,
+		): Promise<SuccessData> => {
+			if (isUnmountedRef.current) {
+				return Promise.reject()
+			}
+			dispatch({
+				type: 'initialize',
+			})
+			return client
+				.sendRequest<SuccessData>(query, {
+					...options,
+					variables,
+				})
+				.then(data => {
+					dispatch({
+						type: 'resolveSuccessfully',
+						data,
+					})
+					return Promise.resolve(data)
+				})
+				.catch((error: GraphQlClientFailedRequestMetadata) => {
+					dispatch({
+						type: 'resolveWithError',
+						error,
+					})
+					return Promise.reject(error)
+				})
+		},
+		[client],
+	)
+
+	useEffect(
+		() => () => {
+			isUnmountedRef.current = true
+		},
+		[], // This empty array is crucial! Otherwise it will first "unmount" before second render no matter what.
+	)
+
+	return [state, sendRequest]
+}

package/src/auth/SessionTokenContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react'
+
+export const SessionTokenContext = createContext<string | undefined>(undefined)

package/src/auth/SetSessionTokenContext.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+export const SetSessionTokenContext = createContext<(token: string | undefined) => void>(() => {
+	throw new Error('SetSessionTokenContext is not set')
+})

package/src/auth/index.ts

@@ -0,0 +1,4 @@
+export * from './SessionTokenContext'
+export * from './SetSessionTokenContext'
+export * from './useSessionToken'
+export * from './useSetSessionToken'

package/src/auth/useSessionToken.ts

@@ -0,0 +1,4 @@
+import { useContext } from 'react'
+import { SessionTokenContext } from './SessionTokenContext'
+
+export const useSessionToken = () => useContext(SessionTokenContext)

package/src/auth/useSetSessionToken.ts

@@ -0,0 +1,4 @@
+import { useContext } from 'react'
+import { SetSessionTokenContext } from './SetSessionTokenContext'
+
+export const useSetSessionToken = () => useContext(SetSessionTokenContext)

package/src/components/RichTextRenderer/BuiltinElements.ts

@@ -0,0 +1,112 @@
+import type { RichTextElement } from './RichTextElement'
+import type { RichTextLeaf } from './RichTextLeaf'
+
+export type BuiltinElements<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = never,
+> =
+	| RichTextAnchorElement<CustomElements, CustomLeaves>
+	| RichTextHeadingElement<CustomElements, CustomLeaves>
+	| RichTextHorizontalRuleElement<CustomElements, CustomLeaves>
+	| RichTextListItemElement<CustomElements, CustomLeaves>
+	| RichTextOrderedListElement<CustomElements, CustomLeaves>
+	| RichTextParagraphElement<CustomElements, CustomLeaves>
+	| RichTextReferenceElement<CustomElements, CustomLeaves>
+	| RichTextScrollTargetElement<CustomElements, CustomLeaves>
+	| RichTextTableCellElement<CustomElements, CustomLeaves>
+	| RichTextTableElement<CustomElements, CustomLeaves>
+	| RichTextTableRowElement<CustomElements, CustomLeaves>
+	| RichTextUnorderedListElement<CustomElements, CustomLeaves>
+
+export interface RichTextAnchorElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = never,
+> extends RichTextElement<CustomElements, CustomLeaves> {
+	type: 'anchor'
+	href: string
+}
+
+export interface RichTextHeadingElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = never,
+> extends RichTextElement<CustomElements, CustomLeaves> {
+	type: 'heading'
+	level: 1 | 2 | 3 | 4 | 5 | 6
+	isNumbered?: boolean
+}
+
+export interface RichTextOrderedListElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = never,
+> extends RichTextElement<CustomElements, CustomLeaves> {
+	type: 'orderedList'
+}
+
+export interface RichTextUnorderedListElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = never,
+> extends RichTextElement<CustomElements, CustomLeaves> {
+	type: 'unorderedList'
+}
+
+export interface RichTextListItemElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = never,
+> extends RichTextElement<CustomElements, CustomLeaves> {
+	type: 'listItem'
+}
+
+export interface RichTextHorizontalRuleElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = never,
+> extends RichTextElement<CustomElements, CustomLeaves> {
+	type: 'horizontalRule'
+}
+
+export interface RichTextParagraphElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = never,
+> extends RichTextElement<CustomElements, CustomLeaves> {
+	type: 'paragraph'
+	isNumbered?: boolean
+}
+
+export interface RichTextReferenceElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = never,
+> extends RichTextElement<CustomElements, CustomLeaves> {
+	type: 'reference'
+	referenceId: string
+}
+
+export interface RichTextScrollTargetElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = never,
+> extends RichTextElement<CustomElements, CustomLeaves> {
+	type: 'scrollTarget'
+	identifier: string
+}
+
+export interface RichTextTableElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = never,
+> extends RichTextElement<CustomElements, CustomLeaves> {
+	type: 'table'
+}
+
+export interface RichTextTableCellElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = never,
+> extends RichTextElement<CustomElements, CustomLeaves> {
+	type: 'tableCell'
+	headerScope?: 'row'
+	justify?: 'start' | 'center' | 'end'
+}
+
+export interface RichTextTableRowElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = never,
+> extends RichTextElement<CustomElements, CustomLeaves> {
+	type: 'tableRow'
+	headerScope?: 'table'
+}

package/src/components/RichTextRenderer/BuiltinLeaves.ts

@@ -0,0 +1,32 @@
+import type { RichTextLeaf } from './RichTextLeaf'
+
+export type BuiltinLeaves = RichTextBoldLeaf &
+	RichTextCodeLeaf &
+	RichTextHighlightLeaf &
+	RichTextItalicLeaf &
+	RichTextStrikeThroughLeaf &
+	RichTextUnderlineLeaf
+
+export interface RichTextBoldLeaf extends RichTextLeaf {
+	isBold?: boolean
+}
+
+export interface RichTextCodeLeaf extends RichTextLeaf {
+	isCode?: boolean
+}
+
+export interface RichTextHighlightLeaf extends RichTextLeaf {
+	isHighlighted?: boolean
+}
+
+export interface RichTextItalicLeaf extends RichTextLeaf {
+	isItalic?: boolean
+}
+
+export interface RichTextStrikeThroughLeaf extends RichTextLeaf {
+	isStruckThrough?: boolean
+}
+
+export interface RichTextUnderlineLeaf extends RichTextLeaf {
+	isUnderlined?: boolean
+}

package/src/components/RichTextRenderer/ElementRenderer.tsx

@@ -0,0 +1,71 @@
+import type { ComponentType, ReactElement } from 'react'
+import { createElement } from 'react'
+import type { BuiltinElements } from './BuiltinElements'
+import type { BuiltinLeaves } from './BuiltinLeaves'
+import type { RenderChildrenOptions } from './renderChildren'
+import { renderChildren } from './renderChildren'
+import { RenderElementFallback } from './RenderElementFallback'
+import { resolveRichTextElementMetadata } from './resolveRichTextElementMetadata'
+import type { RichTextElement } from './RichTextElement'
+import type { RichTextElementMetadata } from './RichTextElementMetadata'
+import type { RichTextLeaf } from './RichTextLeaf'
+import type { RichTextReference } from './RichTextReference'
+import { useRichTextRenderMetadata } from './RichTextRenderMetadataContext'
+
+export type RenderElement<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = never,
+	Reference extends RichTextReference = RichTextReference,
+> = ComponentType<
+	{
+		element: CustomElements | BuiltinElements<CustomElements, CustomLeaves>
+		children: ReactElement
+
+		fallback: ReactElement
+
+		renderChildren: (
+			children:
+				| CustomElements
+				| BuiltinElements<CustomElements, CustomLeaves>
+				| CustomLeaves
+				| BuiltinLeaves
+				| Array<CustomElements | BuiltinElements<CustomElements, CustomLeaves> | CustomLeaves | BuiltinLeaves>,
+			options: RenderChildrenOptions<CustomElements, CustomLeaves>,
+		) => ReactElement
+		renderChildrenOptions: RenderChildrenOptions<CustomElements, CustomLeaves>
+	} & RichTextElementMetadata<CustomElements, CustomLeaves, Reference>
+>
+
+export interface ElementRendererProps<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = never,
+> {
+	element: CustomElements | BuiltinElements<CustomElements, CustomLeaves>
+	children: ReactElement
+	options: RenderChildrenOptions<CustomElements, CustomLeaves>
+}
+
+export function ElementRenderer<
+	CustomElements extends RichTextElement = never,
+	CustomLeaves extends RichTextLeaf = never,
+>({ element, children, options }: ElementRendererProps<CustomElements, CustomLeaves>) {
+	const metadata = useRichTextRenderMetadata<CustomElements, CustomLeaves>()
+	const elementMetadata = resolveRichTextElementMetadata<CustomElements, CustomLeaves>(element, metadata)
+
+	const fallback = (
+		<RenderElementFallback element={element as BuiltinElements} options={options}>
+			{children}
+		</RenderElementFallback>
+	)
+
+	return options.renderElement
+		? createElement(options.renderElement, {
+				...elementMetadata,
+				element,
+				fallback,
+				children,
+				renderChildren,
+				renderChildrenOptions: options,
+		  })
+		: fallback
+}

package/src/components/RichTextRenderer/LeafRenderer.tsx

@@ -0,0 +1,39 @@
+import type { ComponentType, ReactElement } from 'react'
+import { createElement } from 'react'
+import type { BuiltinLeaves } from './BuiltinLeaves'
+import { RenderLeafFallback } from './RenderLeafFallback'
+import type { RichTextLeaf } from './RichTextLeaf'
+import type { RichTextLeafMetadata } from './RichTextLeafMetadata'
+import { useRichTextRenderMetadata } from './RichTextRenderMetadataContext'
+
+export type RenderLeaf<CustomLeaves extends RichTextLeaf> = ComponentType<
+	{
+		leaf: CustomLeaves | BuiltinLeaves
+		fallback: ReactElement
+	} & RichTextLeafMetadata
+>
+
+export interface LeafRendererProps<CustomLeaves extends RichTextLeaf = never> {
+	renderLeaf?: RenderLeaf<CustomLeaves>
+	leaf: CustomLeaves | BuiltinLeaves
+}
+
+export function LeafRenderer<CustomLeaves extends RichTextLeaf = never>({
+	leaf,
+	renderLeaf,
+}: LeafRendererProps<CustomLeaves>) {
+	const formatVersion = useRichTextRenderMetadata().formatVersion
+	const fallback = <RenderLeafFallback leaf={leaf} />
+
+	return renderLeaf
+		? createElement(
+				renderLeaf,
+				{
+					formatVersion,
+					leaf,
+					fallback,
+				},
+				leaf.text,
+		  )
+		: fallback
+}