Editor Lore Blocks
Breakdown of what components are supported under the Lore editor
Hyype's platform native lore editor is a variant of widely popular & opensource Editorjs which is a Block-Styled editor. Blocks are structural units, of which the Entry is composed. For example,
Paragraph, Heading, Image, Video, List are all blocks.Editor blocks
This is aimed at providing flexibility on how you would want to render a block when you display the lore natively in your frontend.
A few examples of block json structures are included below:
paragraph
image
video
quote
embed
{
"id": "tbqvAKSuyg",
"type": "paragraph",
"data": {
"text": "<b>There has always been a bit of mystery surrounding this one. </b>"
}
}
{
"id": "IfOVQ2AeDW",
"type": "image",
"data": {
"file": {
"url": "https://media.hyy.pe/700xAUTO/61561912f084510012274814-1635403828014.jpeg"
},
"caption": "Year 2133: Citizen #10082 looking at the vast emptiness of planet Laran",
"withBorder": false,
"stretched": false,
"withBackground": false
}
}
{
"id": "VYvoLmuo0X",
"type": "video",
"data": {
"url": "https://videos.ctfassets.net/znxnw90vc5ew/7uAidRmq7VC7bvTq1Zd8Rx/c821009212f9fcfb1e5052cf0051392a/cover28-timelapse2_1.mp4",
"caption": "",
"autoplay": true,
"controls": true,
"muted": true,
"stretched": false
}
}
{
"id": "_jwh8Miavq",
"type": "quote",
"data": {
"text": "How did it all come to this",
"caption": "- Alien king says to himself",
"alignment": "left"
}
}
{
"id": "TVJQ2E5vmU",
"type": "embed",
"data": {
"service": "youtube",
"source": "https://youtu.be/5GaJOnwTHw8",
"embed": "https://www.youtube.com/embed/5GaJOnwTHw8",
"width": 580,
"height": 320,
"caption": ""
}
}
Check out the Editorjs github to get started with creating an editor which matches your need. Or you can use the Hyype Editor (coming soon) react component with the entire lore-posting workflow baked in.
Here are the block types which are supported via this endpoint while creating a lore:
Text and typography
Lists
Media & Embed
- @editorjs/image — image block. Custom server-side integration required to upload into a media stack like Arweave or IPFS.
- @editorjs/simple-image — add images to article by pasting image URLs. no server-side uploader required.
- @editorjs/link — links with preview. Customer server-side integration required to generate link previews.
----
JavaScript
Vue.js
React
Angular
Last modified 1yr ago