Merge pull request #14 from moveyourdigital/improve-typescript-typing

Improve typescript typing

Author: lightningspirit

.github/CONTRIBUTING.md

@@ -33,6 +33,6 @@ The core team is monitoring for pull requests. We will review your pull request
 1) Fork the repository and create your branch from the correct branch/tag.
 2) Run `npm install` in the repository root.
 3) Add or change tests as needed.
-4) Ensure the test suite passes with `npm test`. Tip: `npm run test:watch` development.
+4) Ensure the test suite passes with `npm test`. Tip: run `npm run test:watch` during development.
 5) Run `npm test -- -u` to update the jest snapshots and commit these changes as well (if there are any updates).
 6) Run `npm run list && npm run format` and commit any changes.

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', () => {
@@ -118,4 +118,63 @@ describe('<Block />', () => {
       expect(create(<Blocks data={data} />).toJSON()).toMatchSnapshot();
     });
   });
+
+  describe('when receives a Renderers object', () => {
+    const data: DataProp = {
+      time: 1610632160642,
+      blocks: [
+        {
+          type: 'paragraph',
+          data: {
+            text: 'Mollit deserunt culpa fugiat ea do laboris minim ex do. Elit cillum qui aute sint irure aliqua excepteur minim. Eiusmod velit cupidatat ea culpa magna magna id consectetur enim irure ex excepteur tempor quis. Veniam incididunt ullamco adipisicing dolor ex proident ex amet dolor. Nisi in adipisicing non quis id Lorem consectetur.',
+          },
+        },
+        {
+          type: 'code',
+          data: {
+            code: 'const foo = new Bar();',
+            lang: 'text/javascript',
+          },
+        },
+      ],
+      version: '2.19.0',
+    };
+
+    const CustomRenderCode: RenderFn<{
+      code: string | number
+      lang: "text/javascript" | "text/typescript"
+    }> = ({ data: d, className }) => (
+      <div>
+        <pre>
+          {d?.code && (
+            <code lang={d.lang} className={className}>{`${d.code}`}</code>
+          )}
+        </pre>
+        <p>Warning: do not run this code in production</p>
+      </div>
+    )
+
+    const CustomRenderHeader = ({
+      data: d,
+      className,
+    }: {
+      data: {[s:string]: any},
+      className?: string
+    }) => (
+      <h1></h1>
+    )
+
+    const renderers: RenderersProp = {
+      code: CustomRenderCode,
+      header: CustomRenderHeader,
+    }
+
+    it('uses the provided renderer for the specified block', () => {
+      expect(create(<Blocks data={data} renderers={renderers} />).toJSON()).toMatchSnapshot();
+    });
+
+    it('must maintan backward compatibility with 0.1.x format', () => {
+      expect(create(<Blocks data={data} renderers={renderers} />).toJSON()).toMatchSnapshot();
+    });
+  });
 });

src/index.tsx

@@ -9,21 +9,24 @@ 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 RenderFnWithoutData<K = Record<string, any> | undefined> = (_: {
+  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 { RenderFnWithoutData } from '../..';
 
-const Delimiter = ({ className = '' }: { className?: string }) => {
+const Delimiter: RenderFnWithoutData = ({ 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;
   } = {};