Replies: 1 comment
-
Hi. You're right. We've left inline stylings as HTML to simplify rendering for users. Fully clean data, including inline fragments, will be available in version 3.0, which is currently under development. You can help speed up the development by supporting us on Open Collective |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi,
I'm using EditorJS to build a blogging feature for my app. The blogs are written on a webpage, and read on a Flutter mobile app.
There is only one real package to translate editorJS blocks to Flutter widgets and that's editors-flutter package. But this package lacks some features which I was trying to build.
Its during this I realised that EditorJS blocks still capture HTML links as
<a>
tag within text, marker as<mark>
, bold as<b>
etc (sample code below). This is good for web supported platforms, but cannot be used in non-HTML platforms like Flutter. Ofcourse, I could use HTML parsers with css to make bold, italic etc work, but link tags require to extract the href and manually create a Flutter button widget.To overcome this issue and get universal support for any viewing platform, I believe all text in editorJS blocks should be represented as "inline" "list of texts" with sub-blocks representing HTML tags.
Current and Expected output below. What do you think ?
Current Output:
{ "time": 1717151988672, "blocks": [ { "id": "lo-n-5hsoV", "type": "paragraph", "data": { "text": "This is a <mark class=\"cdx-marker\">marker</mark> text" } }, { "id": "FpvtyTJw0E", "type": "paragraph", "data": { "text": "This is another sample with <b>bold</b> and <i>italic</i> text" } }, { "id": "G5qEeZuJ0y", "type": "paragraph", "data": { "text": "This is a link to the <a href=\"https://example.com\">example.com</a>" } } ], "version": "2.29.0-rc.6" }
Expected Output:
{ "time": 1717151988672, "blocks": [ { "id": "lo-n-5hsoV", "type": "paragraph", "data": { "style": "inline", "items": [ { "id": "dfddf", "type": "text", "data": { "text": "This is a " } }, { "id": "lo-n", "type": "marker", "data": { "color": "#ff0000", "text": "marker" } }, { "id": "lo-sdfn", "type": "text", "data": { "text": "text" } } ] } }, { "id": "FpvtyTJw0E", "type": "paragraph", "data": { "style": "inline", "items":[ { "id": "something", "type": "text", "data": { "text": "This is a sample with " } }, { "id": "something", "type": "bold", "data": { "text": "bold" } }, { "id": "something", "type": "text", "data": { "text": "and" } }, { "id": "something", "type": "italic", "data": { "text": "italic" } }, { "id": "something", "type": "text", "data": { "text": "text" } }, ] }, }, { "id": "G5qEeZuJ0y", "type": "paragraph", "data": { "style": "inline", "items": [ { "id": "something", "type": "text", "data": { "text": "This is a link to the " } }, { "id": "something", "type": "link", "data": { "text": "example.com", "url": "https://example.com", } } ] } } ], "version": "2.29.0-rc.6" }
Beta Was this translation helpful? Give feedback.
All reactions