Introducing RenderFn

This commit adds the new RenderFn type which all renders now
are based on.

The signature is:
RenderFn<DataProps, Config>: JSX.Element

No tests were touch to maintain backward compatibility.

Author: lightningspirit

README.md

@@ -34,12 +34,12 @@ Blocks are independent and you can import only a set of them and use them diretl
 ```jsx
 import { Header } from 'editorjs-react-renderer';
 
-const dataHeader = {
-  "text": "Heading 2",
-  "level": 2
+const dataHeader: HeaderBlockData = {
+  text: "Heading 2",
+  level: 2
 }
 
-export const Heading () => <Header data={dataHeader} />;
+export const Heading () => <Header data={dataHeader} className="text-xl" />;
 ```
 
 ## Internal blocks
@@ -144,17 +144,16 @@ So, in theory, any CSS framework (such as Bootstrap) can work seamlessly with th
 You can provide your own custom renderers or replace the default ones by passing a `renderers` object to the `Blocks`.
 
 ```tsx
-const Checklist = ({
+const Checklist: RenderFn<{
+  items: string[]
+}> = ({
   data, className = ""
-}: {
-  data: {[s:string]: any}
-  className?: string
 }) => {
 
   return (
     <>
       {data?.items.map((item, i) => (
-        <p key={i}>
+        <p key={i} className={className}>
           <label>
             <input type="checkbox" /> {HTMLReactParser(item)}
           </label>

src/index.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { create } from 'react-test-renderer';
-import Blocks, { DataProp } from '.';
+import Blocks, { ConfigProp, DataProp, RenderersProp, RenderFn } from '.';
 
 describe('<Block />', () => {
   describe('when receives an EditorJS blocks data', () => {

src/index.tsx

@@ -9,21 +9,20 @@ import Paragraph from './renderers/paragraph';
 import Quote from './renderers/quote';
 import Table from './renderers/table';
 
-export interface ConfigProp {
-  [s: string]: {
-    [s: string]: any;
-  };
-}
+export type ConfigProp = Record<string, RenderConfig>
 
-export interface RenderersProp {
-  [s: string]: any;
-}
+export type RenderConfig = Record<string, any>
+
+export type RenderFn<T = undefined, K = Record<string, any> | undefined> = (_: {
+  data?: T
+  className?: string
+} & K) => JSX.Element;
+
+export type RenderersProp = Record<string, RenderFn<any>>
 
 export interface Block {
   type: string;
-  data: {
-    [s: string]: any;
-  };
+  data: Record<string, any>;
 }
 
 export interface DataProp {

src/renderers/code/index.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { FC } from 'react';
+import { RenderFn } from '../..';
 
 export interface CodeBlockData {
   code: string;
   lang?: string;
 }
 
-const Code = ({ data, className = '' }: { data: CodeBlockData; className?: string }) => {
+const Code: RenderFn<CodeBlockData> = ({ data, className = '' }) => {
   const props: {
     [s: string]: string;
   } = {};

src/renderers/delimiter/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
+import { RenderFn } from '../..';
 
-const Delimiter = ({ className = '' }: { className?: string }) => {
+const Delimiter: RenderFn = ({ className = '' }) => {
   const props: {
     [s: string]: string;
   } = {};

src/renderers/embed/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import HTMLReactParser from 'html-react-parser';
+import { RenderFn } from '../..';
 
 export interface EmbedBlockData {
   service: string;
@@ -10,20 +11,20 @@ export interface EmbedBlockData {
   caption?: string;
 }
 
-const Embed = ({
+export interface EmbedBlockConfig {
+  rel?: string;
+  sandbox?: string | null;
+}
+
+const Embed: RenderFn<EmbedBlockData, EmbedBlockConfig> = ({
   data,
   className = '',
   rel = 'noreferer nofollower external',
   sandbox,
-}: {
-  data: EmbedBlockData;
-  className?: string;
-  rel?: string;
-  sandbox?: string | null;
 }) => {
   const classNames: string[] = [];
   if (className) classNames.push(className);
-  classNames.push(`embed-block-service-${data.service}`);
+  classNames.push(`embed-block-service-${data?.service}`);
 
   const figureprops: {
     [s: string]: string;
@@ -33,11 +34,11 @@ const Embed = ({
     figureprops.className = classNames.join(' ');
   }
 
-  if (data.width) {
+  if (data?.width) {
     figureprops.width = data.width.toString();
   }
 
-  if (data.height) {
+  if (data?.height) {
     figureprops.height = data.height.toString();
   }
 
@@ -47,14 +48,14 @@ const Embed = ({
 
   return (
     <figure>
-      {data.embed ? (
+      {data?.embed ? (
         <iframe src={data.embed} {...figureprops} frameBorder="0" data-src={data.source}></iframe>
       ) : (
-        <a href={data.source} target="_blank" rel={rel}>
-          {data.source}
+        <a href={data?.source} target="_blank" rel={rel}>
+          {data?.source}
         </a>
       )}
-      {data.caption && <figcaption>{HTMLReactParser(data.caption)}</figcaption>}
+      {data?.caption && <figcaption>{HTMLReactParser(data.caption)}</figcaption>}
     </figure>
   );
 };

src/renderers/header/index.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import HTMLReactParser from 'html-react-parser';
+import { RenderFn } from '../..';
 
 export interface HeaderBlockData {
   text: string;
   level: number;
 }
 
-const Header = ({ data, className = '' }: { data: HeaderBlockData; className?: string }) => {
+const Header: RenderFn<HeaderBlockData> = ({ data, className = '' }) => {
   const props: {
     [s: string]: string;
   } = {};
@@ -15,7 +16,7 @@ const Header = ({ data, className = '' }: { data: HeaderBlockData; className?: s
     props.className = className;
   }
 
-  const Tag = `h${data.level || 1}` as keyof JSX.IntrinsicElements;
+  const Tag = `h${data?.level || 1}` as keyof JSX.IntrinsicElements;
   return <Tag {...props}>{data?.text && HTMLReactParser(data.text)}</Tag>;
 };
 

src/renderers/image/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import HTMLReactParser from 'html-react-parser';
+import { RenderFn } from '../..';
 
 export interface ImageBlockData {
   file: {
@@ -13,26 +14,26 @@ export interface ImageBlockData {
   [s: string]: any;
 }
 
-const Image = ({
+export interface ImageBlockConfig {
+  actionsClassNames?: {
+    [s: string]: string;
+  }
+}
+
+const Image: RenderFn<ImageBlockData, ImageBlockConfig> = ({
   data,
   className = '',
   actionsClassNames = {
     stretched: 'image-block--stretched',
     withBorder: 'image-block--with-border',
     withBackground: 'image-block--with-background',
   },
-}: {
-  data: ImageBlockData;
-  className?: string;
-  actionsClassNames?: {
-    [s: string]: string;
-  };
 }) => {
   const classNames: string[] = [];
   if (className) classNames.push(className);
 
   Object.keys(actionsClassNames).forEach((actionName) => {
-    if (data[actionName] === true && actionName in actionsClassNames) {
+    if (data && data[actionName] === true && actionName in actionsClassNames) {
       // @ts-ignore
       classNames.push(actionsClassNames[actionName]);
     }
@@ -49,7 +50,7 @@ const Image = ({
   return (
     <figure {...figureprops}>
       {data?.file?.url && <img src={data.file.url} alt={data.caption || data.file.name} />}
-      {data.caption && <figcaption>{HTMLReactParser(data.caption)}</figcaption>}
+      {data?.caption && <figcaption>{HTMLReactParser(data.caption)}</figcaption>}
     </figure>
   );
 };

src/renderers/list/index.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import HTMLReactParser from 'html-react-parser';
+import { RenderFn } from '../..';
 
 export interface ListBlockData {
   style: 'ordered' | 'unordered';
   items: string[];
 }
 
-const List = ({ data, className = '' }: { data: ListBlockData; className?: string }) => {
+const List: RenderFn<ListBlockData> = ({ data, className = '' }) => {
   const props: {
     [s: string]: string;
   } = {};

src/renderers/paragraph/index.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import HTMLReactParser from 'html-react-parser';
+import { RenderFn } from '../..';
 
 export interface ParagraphBlockData {
   text: string;
 }
 
-const Paragraph = ({ data, className = '' }: { data: ParagraphBlockData; className?: string }) => {
+const Paragraph: RenderFn<ParagraphBlockData> = ({ data, className = '' }) => {
   const props: {
     [s: string]: string;
   } = {};