52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import { Components } from "tinacms/dist/rich-text";
|
|
import BlockQuote, { BlockQuoteProps, blockQuoteSchema } from "./block-quote";
|
|
import DateTime, { DateTimeProps, dateTimeSchema } from "./date-time";
|
|
import NewsletterSignup, { NewsletterSignupProps, newsletterSignupSchema } from "./newsletter-signup";
|
|
import { Prism } from "tinacms/dist/rich-text/prism";
|
|
import React from "react";
|
|
import Image, { ImageProps, imageSchema } from "./image";
|
|
import { RichTextTemplate } from "@tinacms/schema-tools";
|
|
import sanitizeHtml from "sanitize-html";
|
|
|
|
const HTMLInline = (props: { value: string }) => {
|
|
const createSanitizedMarkup = (text: string) => {
|
|
return { __html: sanitizeHtml(text, {
|
|
allowedAttributes: {
|
|
div: [ "class" ]
|
|
}
|
|
}) };
|
|
};
|
|
|
|
return <span dangerouslySetInnerHTML={ createSanitizedMarkup(props.value) } />;
|
|
};
|
|
|
|
const inlineComponents: Components<{
|
|
BlockQuote: BlockQuoteProps;
|
|
DateTime: DateTimeProps;
|
|
NewsletterSignup: NewsletterSignupProps;
|
|
Image: ImageProps;
|
|
}> = {
|
|
code_block: (props) => <Prism { ...props } />,
|
|
html: HTMLInline,
|
|
img: (props) => (
|
|
<span className="flex items-center justify-center">
|
|
<img src={ props.url } alt={ props.alt } />
|
|
</span>
|
|
),
|
|
li: (props) => (
|
|
<li>{ props.children }</li>
|
|
),
|
|
BlockQuote,
|
|
DateTime,
|
|
NewsletterSignup,
|
|
Image
|
|
};
|
|
|
|
export const richTextTemplates: RichTextTemplate[] = [
|
|
dateTimeSchema,
|
|
blockQuoteSchema,
|
|
newsletterSignupSchema,
|
|
imageSchema
|
|
];
|
|
|
|
export default inlineComponents; |