npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

editorjs-renderer

v1.0.1

Published

An extensible custom renderer for editorjs blocks that includes support for the simpleImage block

Downloads

251

Readme

editorjs-renderer

This is a modified version of pavittrax's editorjs-html.

The change's relative to his library (as of 11/2/2023) include:

  • Rendering for simpleImage blocks
  • Caption rendering for image blocks
  • Small padding, line spacing changes, etc

Besides that its identical. Here is pavittrax's readme. Support him with your stars or coffee, not me :)

editorjs-html

A utility to parse editorjs clean data to HTML.

  • Use it with plain Javascript/Typescript, React, Angular, Vue or any templating engine/framework of your choice.
  • Fast, Efficient and Lightweight.
  • Fully customizable to the core.
  • Supports basic editorjs blocks which are customizable as well.
  • Extendable for any new or custom editorjs blocks.

[Note] As of recent release, editorjs v2.10 a read-only mode available. You can use the same to display your editorjs data. However, someone looking for something lightweight with customizability and more granular control are free to use this library.

Installation

Host on Your Own

NPM

npm install editorjs-html

CDN

Usage

Browser

  const edjsParser = edjsHTML();

  let html = edjsParser.parse(editorjs_clean_data);

  console.log(html);

Nodejs

  const edjsHTML = require("editorjs-html");
  const edjsParser = edjsHTML();
  const html = edjsParser.parse(editorjs_clean_data);

  console.log(html);

Updates

See Releases

Docs

Supported Block Types

  • Header (H1-H6)
  • Lists (Ordered & Unordered)
  • Nested Lists
  • Image
  • Delimiter
  • Paragraph
  • Quote
  • Code
  • Embed

Parse Entire EditorJS Data Object

  const edjsParser = edjsHTML();
  const HTML = edjsParser.parse(editorjs_data);
  // returns array of html strings per block
  console.log(HTML);

Parse Entire EditorJS Data Object (Strict Mode)

  const edjsParser = edjsHTML();
  const HTML = edjsParser.parseStrict(editorjs_data);
  // returns an error
  if(HTML instanceof Error) throw HTML;

  // in case of success, returns an array of strings
  console.log(HTML);

Parse Single Clean Data Block

  const edjsParser = edjsHTML();
  const blockHTML = edjsParser.parseBlock(editorjs_data_block);
  // returns string of html for this block
  console.log(blockHTML);

Get the list of missing parser functions

  const edjsParser = edjsHTML();
  // returns the list of missing parser functions
  const blockHTML = edjsParser.validate(editorjs_data);
  console.log(blockHTML);

Extend For Custom Blocks

editorjs-html supports extending its functionality to render custom editorjs blocks. Moroever, You can even override these basic supported blocks.

  • The edjsHTML() accepts an optional object that would allow you to extend its functionality.

  • The name of the function must match with editor-js custom block type.

  // Your custom editorjs generated block
  {
    type: "custom",
    data: {
      text: "Hello World"
    }
 }
  // Parse this block in editorjs-html
  function customParser(block){
    return `<custom-tag> ${block.data.text} </custom-tag>`;
  }

  const edjsParser =  edjsHTML({custom: customParser});

[Update] From v2.0.0 onwards, the parser functions recieves full block instead of just data property of the block. Read releases for more information.

Contribution

Create an issue or send a PR for any contributions you would like to make.

I am thankful for everyone who has contributed their own bits to the repository. Even though the library is small and the scope for writing new or lots of features is limited. I still grateful to see a lots of contributions coming in.

Suggestions & Recommendations

I would love to have your feedback and any suggestions. You can also let me know, if you need support for any more editorjs blocks.

Support

If you find this helpful, consider giving this repository a Star. You can also buy me a coffee here

License

MIT Public License

Author

@pavittarx