hidekih / editorjs-viewer-native

A React Native solution to parse outputData generated by EditorJs.

About

This lib provide a component to render in a React Native a JSON generated by Editor.js!

Installation

Version 1.0.0 is now available!

npm i editorjs-viewer-native

or

yarn add editorjs-viewer-native

Current support for editorJs's plugins:

• Code
• Delimiter
• Header
• Image
• Link
• List
• Marker
• Paragraph
• Personality
• Quote
• Simple Image
• Underline
• Custom block type

See the update plans

Usage

Create a component using function createEditorJsViewer.

import { ScrollView } from 'react-native';
import { createEditorJsViewer } from "editorjs-viewer-native";

import dataFromEditorJs from "./data.json";

const EditorJsViewerNative = createEditorJsViewer();

export default function App() {
  return (
    <ScrollView>
      <EditorJsViewerNative data={dataFromEditorJs} />
    </ScrollView>
  );
}

Custom component for supported plugins

If you want to use your custom component to render any supported plugin block, you can define a Component in createEditorJsViewer config object.

import { ScrollView, Text } from 'react-native';
import { createEditorJsViewer, IHeaderProps } from "editorjs-viewer-native";
import dataFromEditorJs from "./data.json";

const MyHeader = ({ data }: IHeaderProps) => {
  return <Text>{data.text}</Text>
}

const EditorJsViewerNative = createEditorJsViewer({
  tools: {                // Updated to "tools" in v1 (before was toolsParser)
    header: {
      Component: MyHeader // Updated to "Component" in v1 (before was CustomComponent)
    }
  }
})

export default function App() {
  return (
    <ScrollView>
      <EditorJsViewerNative data={dataFromEditorJs} />
    </ScrollView>
  );
}

Now the component MyHeader will render all data of type header.

Support for custom blocks

If you want to render a custom block type, you can define a customTools in createEditorJsViewer config object.

// outputData.json
{
  "blocks": [
    {
      "id": "customBlock_id2",
      "type" : "randomColeredText",
      "data" : {
        "text" : "The color of this text is generated randomic"
      }
    }
  ]
}

import { ScrollView, Text } from 'react-native';
import { createEditorJsViewer, IHeaderProps, IComponentBlockProps } from "editorjs-viewer-native";
import dataFromEditorJs from "./data.json";

interface IRandomColeredTextData {
  text: string;
}

// * Any component will receive "data" and "containerStyle"
// * "data" contain the data of block
// * "containerStyle" is a simple style to prevent margin top on first element or margin bottom on last component
const RandomColeredTextBlock = ({ block, containerStyle }: IComponentBlockProps<IRandomColeredTextData>) => {
  const randomColor = `#${Math.floor(Math.random()*16777215).toString(16)}`;
  return (
    <Text style={[{ color: randomColor }, containerStyle]}>{block.data.text}</Text>
  );
};

const EditorJsViewerNative = createEditorJsViewer({
  customTools: {
    randomColeredText: { // Name of your custom block type
      Component: RandomColeredTextBlock
    }
  }
})

export default function App() {
  return (
    <ScrollView>
      <EditorJsViewerNative data={dataFromEditorJs} />
    </ScrollView>
  );
}

Now the component MyHeader will render all data of type header.

Fallback for unsupported block types

If you want to show a message for unsupported blocks (good for test, bad for production) set showBlockFallback as true inside createEditorJsViewer config object.

const EditorJsViewerNative = createEditorJsViewer({
  showBlockFallback: true // Update to "showBlockFallback" (before was unknownBlockFallback)
})

Updates plans

Support for:

• Attaches
• Checklist
• Raw HTML
• Table

Open source

Feel free to clone/fork this project!

editorjs-viewer-native's Issues

Expo Console Error

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.

my code

      <ScrollView>
             <EditorJsViewerNative data={{blocks:JSON.parse(data.content)}} />
      </ScrollView>

Getting react native warning

Thanks for the package, it works great.
I have a small issue.

Usage:

const EditorJsViewerNative = createEditorJsViewer();
<EditorJsViewerNative data={{ blocks: JSON.parse(text) }} />

Data:

 LOG  [{"data": {"text": "test"}, "id": "97LefH_cM3", "type": "paragraph"}]

How can I fix that?

Info required on Paragraph Component (Not a Bug)

I am using a Paragraph component to render the text with styles. i.e

const EditorJsParagraph = (props: IParagraphProps) => {
	const { text } = props.data;

	return <VHtmlText text={text} textClass="text-base text-52 dark:text-52" />;
};
export default EditorJsParagraph;

I need to change the text color based on Light and dark mode. How can I pass the information to EditorJsParagraph component so that I can change the text color?

Desired Behaviour:

if (darkMode) {
return <VHtmlText text={text} textClass="text-base text-52 dark:text-52" />;
}
return <VHtmlText text={text} textClass="text-base text-50 dark:text-50" />;

Setup

const EditorJsViewerNative = createEditorJsViewer({
	tools: {
		header: { Component: EditorJsHeader },
		paragraph: { Component: EditorJsParagraph },
		list: { Component: EditorJsList },
		image: { Component: EditorJsImage }
	},
	showBlockFallback: true
});