All files / components/block-renderer/layout ckeditor-block.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4x
 
 
 
 
 
 
3x
 
 
 
 
//Create Custom Block
/* Custom Block Codes in These Files :
  1. src->components->block-renderer->layout->ckeditor-block.tsx 
  2. src->components->block-renderer->index.tsx
  3. src->types->index.ts (add in export type Block and add interface for Props)
  4. src->data->loaders->index.ts (inside getLandingPage())
*/
 
import React, { useMemo } from "react";
import sanitizeHtml from "sanitize-html";
import parse from "html-react-parser";
 
interface CkeditorBlockProps {
  content: string;
}
 
export function CkeditorBlock({ content }: Readonly<CkeditorBlockProps>) {
    // Sanitize HTML
  const sanitizedContent = useMemo(
    () =>
      sanitizeHtml(content, {
        allowedTags: sanitizeHtml.defaults.allowedTags.concat([
          "img", "iframe", "h1", "h2", "h3", "h4", "h5", "h6", "a", "ul", "ol", "li"
        ]),
        allowedAttributes: {
          ...sanitizeHtml.defaults.allowedAttributes,
          iframe: ["src", "width", "height", "frameborder", "allow", "allowfullscreen"],
          img: ["src", "alt", "width", "height", "style"],
          a: ["href", "target", "rel"],
        },
        allowedIframeHostnames: ["www.youtube.com", "player.vimeo.com"],
      }),
    [content]
  );
 
  if (!content) return null;
 
  {/*
     Render normal  content    :   <div> {parse(content)} </div> 
     Render sanitized  content :   <div> {parse(sanitizedContent)} </div>
  */}
  
  return (
        <div> {parse(sanitizedContent)} </div>
  );
}