README
@graphcms/html-to-slate-ast
HTML to Slate AST converter for the GraphCMS's RichTextAST format.
⚠️ This converter outputs the custom flavour of Slate AST that is used at GraphCMS, and will most likely not produce an output compatible with your own Slate implementation. But feel free to fork it and adapt it to your needs.
⚡ Usage
1. Install
This package needs to have the packages slate
and slate-hyperscript
installed, and jsdom
as well if you need to run the converter in nodejs.
# for node or isomorphic usage, jsdom is required
npm install jsdom
# required peer-dependancies
npm install slate@0.58.3 slate-hyperscript@0.58.3
npm install @graphcms/html-to-slate-ast
2. Convert your data
☝️ htmlToSlateAst
returns a Promise
import { htmlToSlateAST } from '@graphcms/html-to-slate-ast';
const htmlString = '<div><p>test</p></div>'; // or import form a filr or database
const ast = await htmlToSlateAST(htmlString);
3. Use it in your Content API mutations
The output of this converstion is compatible with our RichTextAST
GraphQL type and can be used to import content in your Rich Text fields.
Example mutation:
mutation newArticle($title: String!, $content: RichTextAST) {
createArticle(data: { title: $title, content: $content }) {
id
title
content {
html
raw
}
}
}
See the docs about the Rich Text field type and Content Api mutations
📝 License
Licensed under the MIT License.
Made with 💜 by GraphCMS 👋 join our community!