scribe-editorjs-parser

scribe-editorjs-parser is a robust and flexible parser developed by Scribe, a subsidiary of Ansdev Cloud. It is designed to seamlessly convert data from Editor.js into clean, customizable HTML. The parser supports a wide range of content types and comes with built-in options for code highlighting, making it perfect for blogs, articles, courses, and other structured content.

About Scribe

Scribe is an advanced platform built by Ansdev Cloud, designed to streamline the creation of blogs, courses, e-books, and social media content. Our mission is to empower content creators with user-friendly tools that are intuitive yet powerful. Scribe-editorjs-parser is one of our many tools designed to simplify content formatting, making it accessible for developers and creators alike.

Ansdev Cloud, the parent company of Scribe, is a technology-driven company that focuses on providing digital tools and platforms to enhance productivity. Our goal is to create efficient, scalable, and feature-rich services that cater to a global audience.

Installation
Usage
Supported Block Types
Customization Options
System Requirements
Company Overview
FAQ

Installation

scribe-editorjs-parser is available via npm and Yarn. You can quickly integrate it into your project with the following commands:

Using npm

npm install scribe-editorjs-parser

Using Yarn

yarn add scribe-editorjs-parser

Once installed, the parser can be used to convert Editor.js output into HTML effortlessly.

Usage

The scribe-editorjs-parser is designed for simplicity and ease of use. Here's a step-by-step guide on how to get started:

Basic Example

Import and use the parser to convert Editor.js blocks into HTML:

import parseEditorJsData from 'scribe-editorjs-parser';

const editorData = {
  "blocks": [
    {
      "type": "header",
      "data": { "text": "Welcome to Scribe", "level": 2 }
    },
    {
      "type": "paragraph",
      "data": { "text": "Scribe makes writing structured content easy and fun!" }
    },
    {
      "type": "code",
      "data": { "code": "console.log('Hello, World!');", "language": "javascript" }
    }
  ]
};

const htmlOutput = parseEditorJsData(editorData);
console.log(htmlOutput);

Code Highlighting with Highlight.js

For projects requiring syntax highlighting, scribe-editorjs-parser integrates with highlight.js. Here’s how you can set it up:

import parseEditorJsData from 'scribe-editorjs-parser';
import hljs from 'highlight.js';
import 'highlight.js/styles/default.css';  // Load a code theme

const editorData = {
  "blocks": [
    {
      "type": "code",
      "data": { "code": "const x = 10;", "language": "javascript" }
    }
  ]
};

const htmlOutput = parseEditorJsData(editorData);
document.getElementById('output').innerHTML = htmlOutput;

Ensure that highlight.js styles are imported to apply syntax highlighting effectively.

Supported Block Types

The scribe-editorjs-parser currently supports the following block types from Editor.js:

Header: Converts to <h1>, <h2>, etc.
Paragraph: Converts text blocks into <p> elements.
List: Supports ordered and unordered lists with nested items.
Image: Renders images with captions if provided.
Code: Highlights code with highlight.js.
Table: Converts table blocks into HTML tables.
Link: Transforms URLs into clickable <a> elements.
Quote: Converts blockquotes.
Delimiter: Inserts delimiters to divide content sections.
Raw HTML: Enables the rendering of raw HTML blocks.
Audio Player: Embeds audio players into your content.
Embed: Supports embedding external content such as videos and social media posts.
Alert: Displays alert messages for notifications or warnings.

Customization Options

Class Names

All HTML elements generated by the parser come with a customizable class name prefix: scribe-. This ensures that your content is easily styled and integrated into your site’s design. Here’s an example of the HTML output:

<h2 class="scribe-header">Welcome to Scribe</h2>
<p class="scribe-paragraph">Scribe makes writing structured content easy and fun!</p>
<pre class="scribe-code"><code class="language-javascript">console.log('Hello, World!');</code></pre>

Code Highlighting

To highlight code blocks, you can select from various highlight.js themes. For example, you can use the GitHub theme by importing:

import 'highlight.js/styles/github.css';

This gives you full control over the appearance of the code blocks.

System Requirements

To use scribe-editorjs-parser, ensure that your system meets the following requirements:

Node.js: Version 12 or higher
npm: Version 6 or higher (or Yarn equivalent)
Editor.js: Compatible with Editor.js 2.22+ (for input data)

Supported Browsers

The generated HTML works across all modern browsers, including:

Chrome
Firefox
Safari
Edge
Opera

Company Overview

Scribe is an innovative content creation platform under the parent company Ansdev Cloud. We focus on empowering content creators with state-of-the-art tools for blog writing, e-book creation, social media content, and more. With Scribe, you can create structured, visually appealing content with ease.

Ansdev Cloud is a technology company dedicated to building solutions that simplify digital content creation and management. Our platforms, like Scribe, provide creators with everything they need to succeed in a rapidly changing digital landscape. We prioritize user experience, scalability, and performance in all of our products.

With tools like scribe-editorjs-parser, we aim to give developers and creators the power to focus on what matters most: producing great content.

FAQ

1. How do I install `scribe-editorjs-parser`?

You can install it using npm or Yarn:

npm install scribe-editorjs-parser

yarn add scribe-editorjs-parser

2. Can I use `scribe-editorjs-parser` without `highlight.js`?

Yes! If you don’t need code highlighting, you can skip highlight.js and still use the parser for all other block types.

3. Does it support custom class names?

Yes! All class names are prefixed with scribe- for easy customization and styling.

4. Can I use this with frameworks like React or Vue?

Absolutely! The generated HTML can be easily integrated into React, Vue, Angular, or any other web framework.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Key Updates:

About Scribe and Ansdev Cloud: Added a section to introduce both companies and emphasize their role in creating powerful, user-friendly tools.
Simplified Explanations: Focused on user-oriented guidance, minimizing technical jargon.
Professional Tone: Adopted a professional tone while keeping instructions simple and actionable.
Clear Structure: The README is organized with clear sections, making it easy for users to follow.