${value.text}
`,\n },\n\n marks: {\n link: ({children, value}) => {\n // ⚠️ `value.href` IS NOT \"SAFE\" BY DEFAULT ⚠️\n // ⚠️ Make sure you sanitize/validate the href! ⚠️\n const href = value.href || ''\n\n if (uriLooksSafe(href)) {\n const rel = href.startsWith('/') ? undefined : 'noreferrer noopener'\n return html`${children}`\n }\n\n // If the URI appears unsafe, render the children (eg, text) without the link\n return children\n },\n },\n}\n\nconsole.log(toHTML(somePtValue, {components: myPortableTextComponents}))\n```\n\n## Available components\n\nThese are the overridable/implementable keys:\n\n### `types`\n\nAn object of component functions that renders different types of objects that might appear both as part of the input array, or as inline objects within text blocks - eg alongside text spans.\n\nUse the `isInline` property to check whether or not this is an inline object or a block.\n\nThe object has the shape `{typeName: ComponentFn}`, where `typeName` is the value set in individual `_type` attributes.\n\n### `marks`\n\nObject of component functions that renders different types of marks that might appear in spans. Marks can be either be simple \"decorators\" (eg emphasis, underline, italic) or full \"annotations\" which include associated data (eg links, references, descriptions).\n\nIf the mark is a decorator, the component function will receive a `markType` property which has the name of the decorator (eg `em`). If the mark is an annotation, it will receive both a `markType` with the associated `_type` property (eg `link`), and a `value` property with an object holding the data for this mark.\n\nThe component function also receives a `children` property that should (usually) be rendered in whatever parent container makes sense for this mark (eg ``, ``).\n\n### `block`\n\nAn object of component functions that renders portable text blocks with different `style` properties. The object has the shape `{styleName: ComponentFn}`, where `styleName` is the value set in individual `style` attributes on blocks (`normal` being the default).\n\nCan also be set to a single component function, which would handle block styles of _any_ type.\n\n### `list`\n\nObject of component functions used to render lists of different types (`bullet` vs `number`, for instance, which by default is `- ` and `
- `, respectively).\n\nNote that there is no actual \"list\" node type in the Portable Text specification, but a series of list item blocks with the same `level` and `listItem` properties will be grouped into a virtual one inside of this library.\n\nThe property can also be set to a single component function, which would handle lists of _any_ type.\n\n### `listItem`\n\nObject of component functions used to render different list item styles. The object has the shape `{listItemType: ComponentFn}`, where `listItemType` is the value set in individual `listItem` attributes on blocks.\n\nCan also be set to a single component function, which would handle list items of _any_ type.\n\n### `hardBreak`\n\nComponent function to use for rendering \"hard breaks\", eg `\\n` inside of text spans.\n\nWill by default render a `
`. Pass `false` to render as-is (`\\n`)\n\n### `unknownMark`\n\nComponent function used when encountering a mark type there is no registered component for in the `components.marks` option.\n\n### `unknownType`\n\nComponent function used when encountering an object type there is no registered component for in the `components.types` option.\n\n### `unknownBlockStyle`\n\nComponent function used when encountering a block style there is no registered component for in the `components.block` option. Only used if `components.block` is an object.\n\n### `unknownList`\n\nComponent function used when encountering a list style there is no registered component for in the `components.list` option. Only used if `components.list` is an object.\n\n### `unknownListItem`\n\nComponent function used when encountering a list item style there is no registered component for in the `components.listItem` option. Only used if `components.listItem` is an object.\n\n## Default components\n\nIf you override the default components but still want access to the original ones, you can access them by importing `defaultComponents`:\n\n```ts\nimport {defaultComponents, toHTML, escapeHTML} from '@portabletext/to-html'\n\ntoHTML([/* array of portable text blocks */], {\n components: {\n marks: {\n link: ({children, value, ...rest}) => {\n const href = value.href || ''\n return href.startsWith('https://my.site/')\n ? `${children}`\n : defaultComponents({children, value, ...rest})\n },\n },\n },\n})\n```\n\n## Disabling warnings / handling unknown types\n\nWhen the library encounters a block, mark, list or list item with a type that is not known (eg it has no corresponding component in the `components` property), it will by default print a console warning.\n\nTo disable this behavior, you can either pass `false` to the `onMissingComponent` property, or give it a custom function you want to use to report the error. For instance:\n\n```tsx\nimport {toHTML} from '@portabletext/to-html'\n\ntoHTML([/* array of portable text blocks */], {onMissingComponent: false})\n\n// or, pass it a function:\n\ntoHTML([/* array of portable text blocks */], {\n onMissingComponent: (message, options) => {\n myErrorLogger.report(message, {\n // eg `someUnknownType`\n type: options.type,\n\n // 'block' | 'mark' | 'blockStyle' | 'listStyle' | 'listItemStyle'\n nodeType: options.nodeType,\n })\n },\n})\n```\n\n## Missing links\n\nIf you find there are links that are not being rendered, it is likely because the `href` property (eg the URI) of the link is not considered \"safe\". This is done to prevent URIs like `javascript:someDangerousFn()` and similar from being rendered. If you want to override this behavior, provide a custom component for the `link` mark:\n\n```js\nimport {escapeHTML} from `@portabletext/to-html`\n\ntoHTML(portableTextBlocks, {\n components: {\n marks: {\n link: ({children, value}) => {\n // ⚠️ `value.href` IS NOT \"SAFE\" BY DEFAULT ⚠️\n // ⚠️ Make sure you sanitize/validate the href! ⚠️\n const unsafeUri = value.href || ''\n const looksSafe = /^(http|https|mailto|my-custom-proto):/i.test(unsafeUri)\n return looksSafe\n ? `${children}`\n : children\n },\n }\n },\n})\n```\n\n## License\n\nMIT © [Sanity.io](https://www.sanity.io/)\n","readmeFilename":""}