Merge pull request #2 from moveyourdigital/fix-add-more-info

Added Github info

Author: lightningspirit

.github/CONTRIBUTING.md

@@ -0,0 +1,38 @@
+# Contributing to EditorJS Blocks React Renderer
+
+The following is a set of guidelines for contributing to this repository.
+
+## Code of Conduct
+We expect participants to adhere to the following set of rules.
+
+## Open Development
+All work on this repository happens directly on GitHub. Both core team members and external contributors send pull requests which go through the same review process.
+
+## Branch Organization
+We maintain master branch for development of new features. If you want to push a bugfix of the last version, please open a pull request against the last tag version commit and another to the master, if needed.
+
+## Bugs
+We are using GitHub Issues for bug tracking. Please, provide reproduction steps for the bug. Before that, make sure the bug is not already reported in the Issues section.
+
+## Proposing a Change
+If you want to introduce a new renderer or augment the public API you are free to either open a Pull Request with the change or an issue, which will be opened for further discussions.
+
+If your change breaks the current public API, our recommendation is to start a thread in a new Issue.
+
+## Your First Pull Request
+Working on your first Pull Request? You can learn how from this free video series:
+
+[How to Contribute to an Open Source Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)
+
+
+## Sending a Pull Request
+The core team is monitoring for pull requests. We will review your pull request and either merge it, request changes to it, or close it with an explanation.
+
+**Before submitting a pull request**, please make sure the following is done:
+
+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.
+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.

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,21 @@
+### Purpose
+
+- [ ] New feature
+- [ ] New renderer
+- [ ] Bug fix
+- [ ] Documentation
+- [ ] Refactoring
+- [ ] Test Case
+- [ ] Other
+
+### Description
+
+<!--
+Include a brief description
+-->
+
+### Possible solution
+
+<!--
+If needed, provide a possible solution for the problem.
+-->

.github/workflows/continuous-integration.yml

@@ -0,0 +1,36 @@
+name: Integration
+
+on: pull_request
+
+jobs:
+  ci:
+    name: Continuous Integration
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x]
+
+    steps:
+    - uses: actions/checkout@v1
+      with:
+        fetch-depth: 1
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Install
+      run: |
+        npm install
+      env:
+        CI: true
+
+    - name: Testing
+      run: |
+        npm run lint
+        npm test
+
+      env:
+        CI: true

README.md

@@ -1,2 +1,142 @@
-# editorjs-blocks-react-renderer
-Renders EditorJS block format to React components.
+# Editor.js Blocks React Renderer
+
+Renders Editor.js blocks to semantic React HTML5 components. Unnopinated and flexible.
+
+[![](https://flat.badgen.net/npm/v/editorjs-blocks-react-renderer?icon=npm)](https://www.npmjs.com/package/editorjs-blocks-react-renderer)
+[![](https://flat.badgen.net/npm/license/editorjs-blocks-react-renderer)](https://www.npmjs.com/package/editorjs-blocks-react-renderer)
+
+An unnopinated React library that renders flexible HTML5 React components from [Editor.js](https://editorjs.io/) block style data.
+
+It follows semantic practices and without inlining styles. It's flexible enough to allow developers to include their own styles via CSS classes, which can be passed to each renderer via configuration.
+
+This also supports server side rendering.
+
+## Usage
+
+Install the package via npm:
+```sh
+npm i -S editorjs-blocks-react-renderer
+```
+
+Import in your component:
+```js
+import Blocks from 'editorjs-blocks-react-renderer';
+```
+
+Use it with a [block style data](https://editorjs.io/saving-data) from Editor.js:
+```jsx
+export const Article = () => <Blocks data={dataFromEditor} />;
+```
+
+## Render a single block
+
+Blocks are independent and you can import only a set of them and use them diretly:
+```jsx
+import { Header } from 'editorjs-react-renderer';
+
+const dataHeader = {
+  "text": "Heading 2",
+  "level": 2
+}
+
+export const Heading () => <Header data={dataHeader} />;
+```
+
+## Internal blocks
+
+The package ships with the following renderers, but you can include your custom ones:
+- Code
+- Header
+- Paragraph
+- Image
+- Embed
+- List
+- Table
+- Quote
+- Delimiter
+
+## Styling and optional configs
+
+This library does not include/force any style nor inlines any styles. Before you ask, we're not supporting inline styles due to [Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) requirements.
+
+However, each renderer supports a set of props, including `className` which can be used to style each block. You just need to pass a `config` object to `Blocks` or directly to any renderer like so:
+
+```jsx
+<Blocks data={dataFromEditor} config={{
+  code: {
+    className: "language-js"
+  },
+  delimiter: {
+    className: "article-hr"
+  },
+  embed: {
+    className: "styled-iframe",
+    rel: "nofollower",
+    sandbox: "allow-fullscreen"
+  }
+  header: {
+    className: "lead"
+  },
+  image: {
+    className: "img-fluid",
+    actionsClassNames: {
+      stretched: 'image-block--stretched',
+      withBorder: 'image-block--with-border',
+      withBackground: 'image-block--with-background',
+    }
+  },
+  list: {
+    className: "unstyled-list"
+  },
+  paragraph: {
+    className: "lead"
+  },
+  quote: {
+    className: "block-quote",
+    actionsClassNames: {
+    alignment: 'text-align-{alignment}', // This is a substitution placeholder: left or center.
+  }
+  },
+  table: {
+    className: "table"
+  }
+}} />
+```
+
+Above you have all allowed properties for each renderer.
+
+So, in theory, any CSS framework (such as Bootstrap) can work seamlessly with this library as long as you pass the correct properties.
+
+## Custom Renderers
+
+You can provide your own custom renderers or replace the default ones by passing a `renderers` object to the `Blocks`.
+
+```tsx
+const Checklist = ({
+  data, className = ""
+}: {
+  data: {[s:string]: any}
+  className?: string
+}) => {
+
+  return (
+    <>
+      {data?.items.map((item, i) => (
+        <p key={i}>
+          <label>
+            <input type="checkbox" /> {ReactHtmlParser(item)}
+          </label>
+        </p>
+      ))}
+    </>
+  )
+}
+
+export default () => <Blocks data={dataFromEditor} renderers={{
+  checklist: Checklist
+}} />
+```
+
+## Inspiration
+
+- [EditorJS-React-Renderer](https://github.com/BomdiZane/EditorJS-React-Renderer) but without opinated inline styles.

package.json

@@ -10,9 +10,8 @@
   "scripts": {
     "start": "tsc -w",
     "build": "tsc",
-    "test": "jest",
+    "test": "jest --coverage",
     "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
     "format": "prettier --write \"src/**/*.tsx\"",
     "lint": "tslint -p tsconfig.json",
     "prepare" : "npm run build",

src/renderers/code/index.tsx

@@ -5,14 +5,18 @@ export interface CodeBlockData {
   lang?: string;
 }
 
-const Code = ({ data }: { data: CodeBlockData }) => {
-  const codeprops: {
+const Code = ({ data, className = '' }: { data: CodeBlockData; className?: string }) => {
+  const props: {
     [s: string]: string;
   } = {};
 
-  if (data?.lang) codeprops.lang = data.lang;
+  if (className) {
+    props.className = className;
+  }
 
-  return <pre>{data?.code && <code {...codeprops}>{`${data.code}`}</code>}</pre>;
+  if (data?.lang) props.lang = data.lang;
+
+  return <pre>{data?.code && <code {...props}>{`${data.code}`}</code>}</pre>;
 };
 
 export default Code;

src/renderers/header/index.tsx

@@ -6,9 +6,17 @@ export interface HeaderBlockData {
   level: number;
 }
 
-const Header = ({ data }: { data: HeaderBlockData }) => {
+const Header = ({ data, className = '' }: { data: HeaderBlockData; className?: string }) => {
+  const props: {
+    [s: string]: string;
+  } = {};
+
+  if (className) {
+    props.className = className;
+  }
+
   const Tag = `h${data.level || 1}` as keyof JSX.IntrinsicElements;
-  return <Tag>{data?.text && ReactHtmlParser(data.text)}</Tag>;
+  return <Tag {...props}>{data?.text && ReactHtmlParser(data.text)}</Tag>;
 };
 
 export default Header;

src/renderers/list/index.tsx

@@ -6,10 +6,18 @@ export interface ListBlockData {
   items: string[];
 }
 
-const List = ({ data }: { data: ListBlockData }) => {
+const List = ({ data, className = '' }: { data: ListBlockData; className?: string }) => {
+  const props: {
+    [s: string]: string;
+  } = {};
+
+  if (className) {
+    props.className = className;
+  }
+
   const Tag = (data?.style === 'ordered' ? `ol` : `ul`) as keyof JSX.IntrinsicElements;
   return (
-    <Tag>
+    <Tag {...props}>
       {data?.items.map((item, i) => (
         <li key={i}>{ReactHtmlParser(item)}</li>
       ))}

src/renderers/paragraph/index.tsx

@@ -5,8 +5,16 @@ export interface ParagraphBlockData {
   text: string;
 }
 
-const Paragraph = ({ data }: { data: ParagraphBlockData }) => {
-  return <p>{data?.text && ReactHtmlParser(data.text)}</p>;
+const Paragraph = ({ data, className = '' }: { data: ParagraphBlockData; className?: string }) => {
+  const props: {
+    [s: string]: string;
+  } = {};
+
+  if (className) {
+    props.className = className;
+  }
+
+  return <p {...props}>{data?.text && ReactHtmlParser(data.text)}</p>;
 };
 
 export default Paragraph;