Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
editorjs-parser
Advanced tools
Readme
editorjs-parser is a NPM package for parsing the output object of EditorJs to HTML.
Use the package manager npm to install editorjs-parser.
npm install --save editorjs-parser
To use the package in browser, import Browser verison through CDN to your HTML file and just call edjsParser
class:
const parser = new edjsParser(config, customParsers, embedMarkup);
To import the package in Node and Front-end code:
const edjsParser = require("editorjs-parser");
const parser = new edjsParser(config, customParsers, embedMarkup);
NOTE: Parameters are optional. If you want to only pass the second parameter, set the first parameter to undefined
.
To parse all blocks, pass the exact EditorJs' output object:
const markup = parser.parse(output);
To parse one block, pass a complete block:
const markup = parser.parseBlock(block);
NOTE: HTML markup in code blocks are already sanitized and ready to be send to browser. You don't have to do anything.
NOTE: Code blocks are compatible with highlight.js
NOTE: It is pointless to use both image
and simple-image
block types in the same editor insatnce, but this parser supports both of them and you can use any of them that fulfills your needs.
If you have a custom block like so:
{
type: "customBlock",
data: {
// Your data
}
}
You can pass an object of custom parsers or override existing parsers of supported blocks as the second argument, like so:
const customParsers = {
customBlock: function(data, config) {
// parsing functionality
// the config arg is user provided config merged with default config
},
image: function(data, config): {
return `<img src="${data.file.url}" alt="${data.caption}" >`;
}
}
const parser = new edjsParser(undefined, customParsers);
NOTE: The config arg is user provided config merged with default configuration.
This is the default configuration. You can override any of these properties by passing a config object.
{
image: {
use: "figure",
// use figure or img tag for images (figcaption will be used for caption of figure)
// if you use figure, caption will be visible
imgClass: "img", // used class for img tags
figureClass: "fig-img", // used class for figure tags
figCapClass: "fig-cap", // used class for figcaption tags
path: "absolute",
// if absolute is passed, the url property which is the absolute path to the image will be used
// otherwise pass a relative path with the filename property in <> like so: '/img/<fileName>'
},
paragraph: {
pClass: "paragraph", // used class for paragraph tags
},
code: {
codeBlockClass: "code-block", // used class for code blocks
},
embed: {
useProvidedLength: false,
// set to true if you want the returned width and height of editorjs to be applied
// NOTE: sometimes source site overrides the lengths so it does not work 100%
},
quote: {
applyAlignment: false,
// if set to true blockquote element will have text-align css property set
},
};
To use the relative path, you should return the filename of the uploaded image from your backend, alongside the url (for more info docs).
Then include the property name of filename in config like so: (for example the property name of the returned filename is imageFileName
)
const config = {
image: {
path: "/img/<imageFileName>";
}
};
const parser = new edjsParser(config);
NOTE: Images will have class img
.
NOTE: If the image is streched, the parsed img
tag will have img-fullwidth
as class.
NOTE: If image is set to have a border, the parsed img
tag will have img-border
as class.
NOTE: If withBackground
is set to true, the parsed img
tag will have img-bg
as class.
You can style, according to these classes.
If you want the returned width and height of embeded element to be applied, set useProvidedLength
option to true in config:
const config = {
embed: {
useProvidedLength: true,
},
};
const parser = new edjsParser(config);
If you want to render a custom markup for your embed service, pass it in an object in third argument. For example if you want your own markup to be rendered for Youtube video embed, you got to do this:
const parser = new edjsParser(undifined, undifined, {
youtube: `Your markup in string`,
});
You also have access to data
object. To use that you should put variable names in placeholders, like so:
const customEmbeds = {
youtube: `<iframe src="<%data.embed%>" width="<%data.width%>"><%data.caption%></iframe>`,
};
const parser = new edjsParser(undifined, undifined, customEmbeds);
NOTE: If you want to have useProvidedLength functionality, use <%data.length%>
instead of <%data.width%>
and <%data.height%>
in embed markups.
<%data.length%>
returns string like this: width="300" height="500"
If you need the returned alignment of blockquotes to be set, set applyAlignment
to true in config:
const config = {
quote: {
applyAlignment: true;
}
};
const parser = new edjsParser(config);
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Please make sure to update tests as appropriate.
For any issue or feature request, please open an issue.
FAQs
This package parses output blocks of editorjs to html
The npm package editorjs-parser receives a total of 1,097 weekly downloads. As such, editorjs-parser popularity was classified as popular.
We found that editorjs-parser demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.