Some checks failed
Test examples / Test Examples (20) (push) Has been cancelled
Test examples / Test Examples (22) (push) Has been cancelled
Lock Threads / action (push) Has been cancelled
Trigger Release / start (push) Has been cancelled
Stale issue handler / stale (push) Has been cancelled
Update Font Data / create-pull-request (push) Has been cancelled
build-and-deploy / deploy-target (push) Has been cancelled
build-and-deploy / build (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / build-wasm (nodejs) (push) Has been cancelled
build-and-deploy / build-wasm (web) (push) Has been cancelled
build-and-deploy / Deploy preview tarball (push) Has been cancelled
build-and-deploy / Potentially publish release (push) Has been cancelled
build-and-deploy / publish-turbopack-npm-packages (push) Has been cancelled
build-and-deploy / Deploy examples (push) Has been cancelled
build-and-deploy / thank you, build (push) Has been cancelled
build-and-deploy / Upload Turbopack Bytesize metrics to Datadog (push) Has been cancelled
Rspack Next.js development integration tests / Rspack integration tests (push) Has been cancelled
Rspack Next.js production integration tests / Rspack integration tests (push) Has been cancelled
Turbopack Next.js development integration tests / Next.js integration tests (push) Has been cancelled
Turbopack Next.js production integration tests / Next.js integration tests (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack development test manifest (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack production test manifest (push) Has been cancelled
Upload bundler test manifests to areweturboyet.com / Upload test results (push) Has been cancelled
Update React / create-pull-request (push) Has been cancelled
test-e2e-project-reset-cron / reset-test-project (push) Has been cancelled
Notify about the top 15 issues/PRs/feature requests (most reacted) in the last 90 days / run (push) Has been cancelled
186 lines
4.0 KiB
TypeScript
186 lines
4.0 KiB
TypeScript
import * as React from "react";
|
|
import classNames from "classnames";
|
|
|
|
const renderParagraph = (block) => {
|
|
const props = { style: {}, className: "" };
|
|
|
|
if (block.data.textAlign) {
|
|
props.style["textAlign"] = block.data.textAlign;
|
|
}
|
|
if (block.data.className) {
|
|
props.className = block.data.className;
|
|
}
|
|
return (
|
|
<p
|
|
{...props}
|
|
className={classNames("rte-block-paragraph", props.className)}
|
|
dangerouslySetInnerHTML={{ __html: block.data.text }}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const renderDelimiter = () => {
|
|
return <div className="rte-block-delimiter" />;
|
|
};
|
|
|
|
const renderHeader = (block) => {
|
|
const props = { style: {}, className: "" };
|
|
|
|
if (block.data.textAlign) {
|
|
props.style["textAlign"] = block.data.textAlign;
|
|
}
|
|
if (block.data.className) {
|
|
props.className = block.data.className;
|
|
}
|
|
|
|
switch (block.data.level) {
|
|
case 1:
|
|
return (
|
|
<h1
|
|
{...props}
|
|
className={classNames(
|
|
props.className,
|
|
"rte-block-heading rte-block-heading--h1",
|
|
)}
|
|
dangerouslySetInnerHTML={{ __html: block.data.text }}
|
|
/>
|
|
);
|
|
|
|
case 2:
|
|
return (
|
|
<h2
|
|
{...props}
|
|
className={classNames(
|
|
props.className,
|
|
"rte-block-heading rte-block-heading--h2",
|
|
)}
|
|
dangerouslySetInnerHTML={{ __html: block.data.text }}
|
|
/>
|
|
);
|
|
|
|
case 3:
|
|
return (
|
|
<h3
|
|
{...props}
|
|
className={classNames(
|
|
props.className,
|
|
"rte-block-heading rte-block-heading--h3",
|
|
)}
|
|
dangerouslySetInnerHTML={{ __html: block.data.text }}
|
|
/>
|
|
);
|
|
|
|
case 4:
|
|
return (
|
|
<h4
|
|
{...props}
|
|
className={classNames(
|
|
props.className,
|
|
"rte-block-heading rte-block-heading--h4",
|
|
)}
|
|
dangerouslySetInnerHTML={{ __html: block.data.text }}
|
|
/>
|
|
);
|
|
|
|
case 5:
|
|
return (
|
|
<h5
|
|
{...props}
|
|
className={classNames(
|
|
props.className,
|
|
"rte-block-heading rte-block-heading--h5",
|
|
)}
|
|
dangerouslySetInnerHTML={{ __html: block.data.text }}
|
|
/>
|
|
);
|
|
|
|
case 6:
|
|
return (
|
|
<h6
|
|
{...props}
|
|
className={classNames(
|
|
props.className,
|
|
"rte-block-heading rte-block-heading--h6",
|
|
)}
|
|
dangerouslySetInnerHTML={{ __html: block.data.text }}
|
|
/>
|
|
);
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
function renderImage(block) {
|
|
return (
|
|
<img
|
|
className={"rte-block-image"}
|
|
alt={block.data.caption}
|
|
src={block.data.file}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function renderList(block) {
|
|
switch (block.data.style) {
|
|
case "unordered":
|
|
return (
|
|
<ul className={"rte-block-list"}>
|
|
{block.data.items.map((text, i) => (
|
|
<li key={i}>{text}</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
|
|
case "ordered":
|
|
return (
|
|
<ol className={"rte-block-list"}>
|
|
{block.data.items.map((text, i) => (
|
|
<li key={i}>{text}</li>
|
|
))}
|
|
</ol>
|
|
);
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function renderQuote(block) {
|
|
return (
|
|
<blockquote className={"rte-block-blockquote"}>
|
|
<p>{block.data.text}</p>
|
|
</blockquote>
|
|
);
|
|
}
|
|
|
|
const defaultRenderers = {
|
|
delimiter: renderDelimiter,
|
|
header: renderHeader,
|
|
image: renderImage,
|
|
list: renderList,
|
|
paragraph: renderParagraph,
|
|
quote: renderQuote,
|
|
};
|
|
|
|
export const RichTextRenderer = (props) => {
|
|
// Combine default renderers with custom renderers
|
|
const renderers = Object.assign({}, defaultRenderers, props.renderers);
|
|
|
|
return (
|
|
<React.Fragment>
|
|
{props.data.map((block, index) => {
|
|
const renderer = renderers[block.type];
|
|
if (!renderer) {
|
|
return null;
|
|
}
|
|
|
|
const node = renderer(block);
|
|
if (React.isValidElement(node)) {
|
|
return React.cloneElement(node, { key: index });
|
|
}
|
|
|
|
return null;
|
|
})}
|
|
</React.Fragment>
|
|
);
|
|
};
|