@contember/react-richtext-renderer 2.1.0-alpha.30 → 2.1.0-alpha.36

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@contember/react-richtext-renderer",
   "license": "Apache-2.0",
-  "version": "2.1.0-alpha.30",
+  "version": "2.1.0-alpha.36",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/production/index.js",
@@ -30,15 +30,14 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/contember/interface.git",
+    "url": "git+https://github.com/contember/contember.git",
     "directory": "packages/react-richtext-renderer"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.0.1",
-    "@testing-library/react-hooks": "^8.0.1"
+    "@testing-library/dom": "catalog:",
+    "@testing-library/react": "catalog:"
   },
   "peerDependencies": {
-    "react": "^18 || ^19"
+    "react": "catalog:"
   }
 }

package/src/components/RichText.tsx

@@ -34,10 +34,12 @@ export const RichText = <
 		<>
 			{blocks.map((block, i) => (
 				createElement(
-					renderBlock, {
+					renderBlock,
+					{
 						block,
 						key: block.id ?? i,
-					}, renderChildren(block.content.children, {
+					},
+					renderChildren(block.content.children, {
 						referenceRenderers,
 						renderBlock,
 						renderLeaf,

package/src/components/RichTextRenderer.tsx

@@ -4,7 +4,6 @@ import type { RichTextLeaf } from '../types/structure/RichTextLeaf'
 import { RichTextFieldRenderer, RichTextFieldRendererProps } from './RichTextFieldRenderer'
 import { RichTextBlocksRenderer, RichTextBlocksRendererProps } from './RichTextBlocksRenderer'
 
-
 export type RichTextRendererProps<
 	CustomElements extends RichTextElement = never,
 	CustomLeaves extends RichTextLeaf = RichTextLeaf,
@@ -20,7 +19,6 @@ export const RichTextRenderer = memo(function RichTextRenderer<
 	CustomElements extends RichTextElement = never,
 	CustomLeaves extends RichTextLeaf = RichTextLeaf,
 >(props: RichTextRendererProps<CustomElements, CustomLeaves>) {
-
 	if ('source' in props) {
 		return <RichTextFieldRenderer<CustomElements, CustomLeaves> {...props} />
 	}

package/src/hooks/useRichTextBlocksSource.ts

@@ -18,11 +18,11 @@ export const useRichTextBlocksSource = <CustomElements extends RichTextElement,
 		return blocks.map(block => {
 			if (!(sourceFieldResolved in block)) {
 				throw new RichTextRendererError(
-					`Found a block without a '${sourceFieldResolved}' field. ` +
-					(sourceField === undefined
-						? `The 'sourceField' prop has not been supplied, and so '${sourceFieldResolved}' was used as a default.`
-						: `That is what the 'sourceField' prop has been set to, and so either this is a typo, ` +
-						`or the data supplied is invalid.`),
+					`Found a block without a '${sourceFieldResolved}' field. `
+						+ (sourceField === undefined
+							? `The 'sourceField' prop has not been supplied, and so '${sourceFieldResolved}' was used as a default.`
+							: `That is what the 'sourceField' prop has been set to, and so either this is a typo, `
+								+ `or the data supplied is invalid.`),
 				)
 			}
 			const source = block[sourceFieldResolved]
@@ -32,38 +32,40 @@ export const useRichTextBlocksSource = <CustomElements extends RichTextElement,
 
 			if (referencesField !== undefined && !(referencesFieldResolved in block)) {
 				throw new RichTextRendererError(
-					`The 'referencesField' prop is set to '${referencesFieldResolved}' but a block without such field ` +
-					`has been encountered. Unless this is just a typo, ` +
-					`if you do not wish to use references, avoid supplying the 'referencesField' prop.`,
+					`The 'referencesField' prop is set to '${referencesFieldResolved}' but a block without such field `
+						+ `has been encountered. Unless this is just a typo, `
+						+ `if you do not wish to use references, avoid supplying the 'referencesField' prop.`,
 				)
 			}
 			const references = block[referencesFieldResolved]
 
-			let normalizedReferences: Record<string, RichTextReference> | undefined = undefined
+			let normalizedReferences: Record<string, RichTextReference> | undefined
 			if (references) {
 				if (typeof Object(references)[Symbol.iterator] !== 'function') {
 					throw new RichTextRendererError(`The set of references must be an iterable!`)
 				}
 
-				normalizedReferences = Object.fromEntries(Array.from(references as Iterable<RichTextReference>).map(reference => {
-					if (!('id' in reference)) {
-						throw new RichTextRendererError(`Found a reference without an id field.`)
-					}
-					if (!(referenceDiscriminationFieldResolved in reference) || typeof reference[referenceDiscriminationFieldResolved] !== 'string') {
-						throw new RichTextRendererError(
-							`Found a reference without a '${referenceDiscriminationFieldResolved}' field. ` +
-							(referenceDiscriminationField === undefined
-								? `The 'referenceDiscriminationField' prop has not been supplied, ` +
-								`and so '${referenceDiscriminationFieldResolved}' was used as a default.`
-								: `That is what the 'referenceDiscriminationField' prop has been set to, ` +
-								`and so either this is a typo, or the data supplied is invalid.`),
-						)
-					}
-					return [reference.id, {
-						...reference,
-						type: reference[referenceDiscriminationFieldResolved] as string,
-					}]
-				}))
+				normalizedReferences = Object.fromEntries(
+					Array.from(references as Iterable<RichTextReference>).map(reference => {
+						if (!('id' in reference)) {
+							throw new RichTextRendererError(`Found a reference without an id field.`)
+						}
+						if (!(referenceDiscriminationFieldResolved in reference) || typeof reference[referenceDiscriminationFieldResolved] !== 'string') {
+							throw new RichTextRendererError(
+								`Found a reference without a '${referenceDiscriminationFieldResolved}' field. `
+									+ (referenceDiscriminationField === undefined
+										? `The 'referenceDiscriminationField' prop has not been supplied, `
+											+ `and so '${referenceDiscriminationFieldResolved}' was used as a default.`
+										: `That is what the 'referenceDiscriminationField' prop has been set to, `
+											+ `and so either this is a typo, or the data supplied is invalid.`),
+							)
+						}
+						return [reference.id, {
+							...reference,
+							type: reference[referenceDiscriminationFieldResolved] as string,
+						}]
+					}),
+				)
 			}
 			return {
 				id: typeof block.id === 'string' ? block.id : undefined,

package/src/index.ts

@@ -3,4 +3,3 @@ export * from './hooks'
 export * from './types'
 
 export * from './RichTextRendererError'
-

package/src/internal/components/ElementRenderer.tsx

@@ -9,7 +9,6 @@ import type { RichTextLeaf } from '../../types/structure/RichTextLeaf'
 import { RichTextBlock } from '../../types/RichTextBlock'
 import { RichTextRenderingOptions } from '../../types/RichTextRenderingOptions'
 
-
 export interface ElementRendererProps<
 	CustomElements extends RichTextElement = never,
 	CustomLeaves extends RichTextLeaf = RichTextLeaf,
@@ -27,7 +26,11 @@ export function ElementRenderer<
 	const referenceMetadata = useReferenceMetadata<CustomElements, CustomLeaves>(element, options, block)
 
 	const fallback = (
-		<RenderElementFallback<CustomElements, CustomLeaves> element={element as BuiltinElements<CustomElements, CustomLeaves>} options={options} block={block}>
+		<RenderElementFallback<CustomElements, CustomLeaves>
+			element={element as BuiltinElements<CustomElements, CustomLeaves>}
+			options={options}
+			block={block}
+		>
 			{children}
 		</RenderElementFallback>
 	)

package/src/internal/components/LeafRenderer.tsx

@@ -31,6 +31,6 @@ export function LeafRenderer<
 				fallback,
 				children: leaf.text,
 			},
-		  )
+		)
 		: fallback
 }

package/src/internal/components/RenderElementFallback.tsx

@@ -127,9 +127,9 @@ function ReferenceElementFallback<
 	const elementMetadata = useReferenceMetadata<CustomElements, CustomLeaves>(element, options, block, true)
 
 	if (
-		elementMetadata.referenceRenderer === undefined ||
-		elementMetadata.referenceType === undefined ||
-		elementMetadata.reference === undefined
+		elementMetadata.referenceRenderer === undefined
+		|| elementMetadata.referenceType === undefined
+		|| elementMetadata.reference === undefined
 	) {
 		return children // At least render the text contents
 	}

package/src/types/RichTextRenderingOptions.ts

@@ -6,7 +6,7 @@ import { RichTextReferenceMetadata } from './RichTextReferenceMetadata'
 export type UndefinedReferenceHandler<
 	CustomElements extends RichTextElement = never,
 	CustomLeaves extends RichTextLeaf = RichTextLeaf,
-	Reference extends RichTextReference = RichTextReference
+	Reference extends RichTextReference = RichTextReference,
 > = (referenceId: string) => void | RichTextReferenceMetadata<CustomElements, CustomLeaves, Reference>
 
 export type RichTextRenderingOptions<

package/src/types/custom/RenderLeaf.ts

@@ -2,13 +2,11 @@ import { RichTextLeaf } from '../structure'
 import { ComponentType, ReactElement } from 'react'
 import { BuiltinLeaves } from '../builtin'
 
-export type RenderLeafProps<CustomLeaves extends RichTextLeaf = RichTextLeaf> =
-	& {
-		formatVersion: number
-		leaf: CustomLeaves & BuiltinLeaves
-		fallback: ReactElement
-		children: string
-	}
+export type RenderLeafProps<CustomLeaves extends RichTextLeaf = RichTextLeaf> = {
+	formatVersion: number
+	leaf: CustomLeaves & BuiltinLeaves
+	fallback: ReactElement
+	children: string
+}
 
 export type RenderLeaf<CustomLeaves extends RichTextLeaf> = ComponentType<RenderLeafProps<CustomLeaves>>
-

package/tests/decodeBlockSource.test.tsx

@@ -14,22 +14,24 @@ describe('useRichTextBlocksSource', () => {
 	})
 
 	test('decode blocks with references', () => {
-		const { result } = renderHook(() => useRichTextBlocksSource({
-			blocks: [{
-				source: '{"formatVersion":1,"children":[{"type":"reference","children":[{"text":"Foo bar"}],"referenceId":"74bfb183-3adf-4cc1-8e8e-6d5cd700cadd"}]}',
-				references: [
-					{
-						id: '74bfb183-3adf-4cc1-8e8e-6d5cd700cadd',
-						type: 'image',
-						url: 'https://example.com/image.png',
-					},
-				],
-
-			}],
-			sourceField: 'source',
-			referencesField: 'references',
-			referenceDiscriminationField: 'type',
-		}))
+		const { result } = renderHook(() =>
+			useRichTextBlocksSource({
+				blocks: [{
+					source:
+						'{"formatVersion":1,"children":[{"type":"reference","children":[{"text":"Foo bar"}],"referenceId":"74bfb183-3adf-4cc1-8e8e-6d5cd700cadd"}]}',
+					references: [
+						{
+							id: '74bfb183-3adf-4cc1-8e8e-6d5cd700cadd',
+							type: 'image',
+							url: 'https://example.com/image.png',
+						},
+					],
+				}],
+				sourceField: 'source',
+				referencesField: 'references',
+				referenceDiscriminationField: 'type',
+			})
+		)
 		expect(result.current).toStrictEqual([
 			{
 				'content': {
@@ -57,5 +59,4 @@ describe('useRichTextBlocksSource', () => {
 			},
 		])
 	})
-
 })

package/tests/renderElement.test.tsx

@@ -13,114 +13,161 @@ describe('paragraph rendering', () => {
 	})
 
 	test('render paragraph', () => {
-		expect(render(<RichText blocks={[createBlock({
-			type: 'paragraph',
-			children: [{
-				text: 'Hello',
-				isBold: true,
-			}],
-		})]} />).container.innerHTML)
+		expect(
+			render(
+				<RichText
+					blocks={[createBlock({
+						type: 'paragraph',
+						children: [{
+							text: 'Hello',
+							isBold: true,
+						}],
+					})]}
+				/>,
+			).container.innerHTML,
+		)
 			.toEqual(`<p data-contember-type="paragraph"><b>Hello</b></p>`)
 	})
 
 	test('render table', () => {
-		expect(render(<RichText blocks={[createBlock({
-			type: 'table',
-			children: [{
-				type: 'tableRow',
-				children: [{
-					type: 'tableCell',
-					children: [{
-						text: 'Hello',
-					}],
-				}],
-			}],
-		})]} />).container.innerHTML)
-			.toEqual(`<table data-contember-type="table"><tbody><tr data-contember-type="tableRow"><td data-contember-type="tableCell">Hello</td></tr></tbody></table>`)
+		expect(
+			render(
+				<RichText
+					blocks={[createBlock({
+						type: 'table',
+						children: [{
+							type: 'tableRow',
+							children: [{
+								type: 'tableCell',
+								children: [{
+									text: 'Hello',
+								}],
+							}],
+						}],
+					})]}
+				/>,
+			).container.innerHTML,
+		)
+			.toEqual(
+				`<table data-contember-type="table"><tbody><tr data-contember-type="tableRow"><td data-contember-type="tableCell">Hello</td></tr></tbody></table>`,
+			)
 	})
 
 	test('render table with header', () => {
-		expect(render(<RichText blocks={[createBlock({
-			type: 'table',
-			children: [{
-				type: 'tableRow',
-				headerScope: 'table',
-				children: [{
-					type: 'tableCell',
-					children: [{
-						text: 'Hello',
-					}],
-				}],
-			}],
-		})]} />).container.innerHTML)
-			.toEqual(`<table data-contember-type="table"><thead><tr data-contember-type="tableRow" data-contember-headerscope="table"><td data-contember-type="tableCell">Hello</td></tr></thead><tbody></tbody></table>`)
+		expect(
+			render(
+				<RichText
+					blocks={[createBlock({
+						type: 'table',
+						children: [{
+							type: 'tableRow',
+							headerScope: 'table',
+							children: [{
+								type: 'tableCell',
+								children: [{
+									text: 'Hello',
+								}],
+							}],
+						}],
+					})]}
+				/>,
+			).container.innerHTML,
+		)
+			.toEqual(
+				`<table data-contember-type="table"><thead><tr data-contember-type="tableRow" data-contember-headerscope="table"><td data-contember-type="tableCell">Hello</td></tr></thead><tbody></tbody></table>`,
+			)
 	})
 
 	test('render heading', () => {
-		expect(render(<RichText blocks={[createBlock({
-			type: 'heading',
-			level: 1,
-			children: [{
-				text: 'Hello',
-			}],
-		})]} />).container.innerHTML)
+		expect(
+			render(
+				<RichText
+					blocks={[createBlock({
+						type: 'heading',
+						level: 1,
+						children: [{
+							text: 'Hello',
+						}],
+					})]}
+				/>,
+			).container.innerHTML,
+		)
 			.toEqual(`<h1 data-contember-type="heading" data-contember-level="1">Hello</h1>`)
 	})
 
 	test('render list', () => {
-		expect(render(<RichText blocks={[createBlock({
-			type: 'unorderedList',
-			children: [{
-				type: 'listItem',
-				children: [{
-					text: 'Hello',
-				}],
-			}],
-		})]} />).container.innerHTML)
+		expect(
+			render(
+				<RichText
+					blocks={[createBlock({
+						type: 'unorderedList',
+						children: [{
+							type: 'listItem',
+							children: [{
+								text: 'Hello',
+							}],
+						}],
+					})]}
+				/>,
+			).container.innerHTML,
+		)
 			.toEqual(`<ul data-contember-type="unorderedList"><li data-contember-type="listItem">Hello</li></ul>`)
 	})
 
 	test('render ordered list', () => {
-		expect(render(<RichText blocks={[createBlock({
-			type: 'orderedList',
-			children: [{
-				type: 'listItem',
-				children: [{
-					text: 'Hello',
-				}],
-			}],
-		})]} />).container.innerHTML)
+		expect(
+			render(
+				<RichText
+					blocks={[createBlock({
+						type: 'orderedList',
+						children: [{
+							type: 'listItem',
+							children: [{
+								text: 'Hello',
+							}],
+						}],
+					})]}
+				/>,
+			).container.innerHTML,
+		)
 			.toEqual(`<ol data-contember-type="orderedList"><li data-contember-type="listItem">Hello</li></ol>`)
 	})
 
 	test('custom element', () => {
-		expect(render(<RichText blocks={[{
-			content: {
-				formatVersion: 1,
-				children: [{
-					type: 'blockquote',
-					children: [
-						{
-							type: 'heading',
-							level: 1,
+		expect(
+			render(
+				<RichText
+					blocks={[{
+						content: {
+							formatVersion: 1,
 							children: [{
-								text: 'Hello',
+								type: 'blockquote',
+								children: [
+									{
+										type: 'heading',
+										level: 1,
+										children: [{
+											text: 'Hello',
+										}],
+									},
+									{
+										text: 'Hello',
+									},
+								],
 							}],
 						},
-						{
-							text: 'Hello',
-						},
-					],
-				}],
-			},
-			id: '1',
-			references: undefined,
-		}]} renderElement={it => {
-			if (it.element.type === 'blockquote') {
-				return <blockquote data-contember-type="blockquote">{it.children}</blockquote>
-			}
-			return it.fallback
-		}} />).container.innerHTML)
+						id: '1',
+						references: undefined,
+					}]}
+					renderElement={it => {
+						if (it.element.type === 'blockquote') {
+							return <blockquote data-contember-type="blockquote">{it.children}</blockquote>
+						}
+						return it.fallback
+					}}
+				/>,
+			).container.innerHTML,
+		)
 			.toEqual(`<blockquote data-contember-type="blockquote"><h1 data-contember-type="heading" data-contember-level="1">Hello</h1>Hello</blockquote>`)
 	})
 })

package/tests/renderLeaf.test.tsx

@@ -25,54 +25,62 @@ describe('leaf rendering', () => {
 			.toEqual(`<code>Hello</code>`)
 	})
 
-
 	test('render highlighted', () => {
 		expect(render(<RichText blocks={[createLeafBlock('Hello', 'isHighlighted')]} />).container.innerHTML)
 			.toEqual(`<em>Hello</em>`)
 	})
 
-
 	test('render italic', () => {
 		expect(render(<RichText blocks={[createLeafBlock('Hello', 'isItalic')]} />).container.innerHTML)
 			.toEqual(`<i>Hello</i>`)
 	})
 
-
 	test('render underline', () => {
 		expect(render(<RichText blocks={[createLeafBlock('Hello', 'isUnderlined')]} />).container.innerHTML)
 			.toEqual(`<u>Hello</u>`)
 	})
 
-
 	test('render struck through', () => {
 		expect(render(<RichText blocks={[createLeafBlock('Hello', 'isStruckThrough')]} />).container.innerHTML)
 			.toEqual(`<s>Hello</s>`)
 	})
 
-
 	test('render multiple', () => {
-		expect(render(<RichText blocks={[{
-			content: {
-				formatVersion: 1,
-				children: [{
-					text: 'Hello',
-					isBold: true,
-					isItalic: true,
-				}],
-			},
-			id: '1',
-			references: undefined,
-		}]} />).container.innerHTML)
+		expect(
+			render(
+				<RichText
+					blocks={[{
+						content: {
+							formatVersion: 1,
+							children: [{
+								text: 'Hello',
+								isBold: true,
+								isItalic: true,
+							}],
+						},
+						id: '1',
+						references: undefined,
+					}]}
+				/>,
+			).container.innerHTML,
+		)
 			.toEqual(`<b><i>Hello</i></b>`)
 	})
 
 	test('render custom leaf', () => {
-		expect(render(<RichText<never, {isSup?: boolean} & BuiltinLeaves> blocks={[createLeafBlock('Hello', 'isSup')]} renderLeaf={it => {
-			if (it.leaf.isSup) {
-				return <sup>{it.fallback}</sup>
-			}
-			return it.fallback
-		}} />).container.innerHTML)
+		expect(
+			render(
+				<RichText<never, { isSup?: boolean } & BuiltinLeaves>
+					blocks={[createLeafBlock('Hello', 'isSup')]}
+					renderLeaf={it => {
+						if (it.leaf.isSup) {
+							return <sup>{it.fallback}</sup>
+						}
+						return it.fallback
+					}}
+				/>,
+			).container.innerHTML,
+		)
 			.toEqual(`<sup>Hello</sup>`)
 	})
 })