** Warning this cube is not intended for use in production currently **
Summary
-------
Add editorjs format for RichString.
This cube adds the application/vnd.cubicweb.editorjs mimetype to the available
formats for RichStrings.
It also adds a widget which allows to edit the RichString using the EditorJS library (a WYSIWYG editor).
Status of this project
----------------------
This project has been initiated as a POC to test integration of EditorJS in CubicWeb.
Features:
- [X] setting the format of a RichString to application/vnd.cubicweb.editorjs
- [X] edition on an **already existing** RichString attribute with EditorJS
- [X] rendering a RichString using this mime type in some conditions (see below)
- [ ] RQL plugin allowing to edit and execute RQL queries
Known bugs:
- when switching to application/vnd.cubicweb.editorjs the editor is not loaded
which means that only already saved attributes can be edited with EditorJS
- the rich string is not rendered when it is asynchroneously loaded (after the
page's scripts have run). This happens with CubicWeb web in tab views.
- the breadcrumb displays the json instead of a rendered version of the RichString
- it makes automatic tests of client cubes fail
Implementation flaws:
- the implementation use monkeypatches to
- add the application/vnd.cubicweb.editorjs format to the known format list
- override some views
- override entities `printable_value` method (might not be the best place
to add the widget)
- missing mttransforms for application/vnd.cubicweb.editorjs to html
- images uploads are not supported
Usage in react applications
---------------------------
React applications don't suffer most of the problems seen above as they handle the rendering themselves.
Displaying an EditorJS is as easy as:
```tsx
function Edit() {
const instanceRef = React.useRef<EditorJS | null>(null);
async function handleSave() {
if (instanceRef.current !== null) {
const savedData = await instanceRef.current.save();
rqlClient.queryRows(
`Set X content %(content)s Where X is BlogEntry, X eid ${eid}`,
{ content: JSON.stringify(savedData) }
);
}
}
return (
<>
<EditorJs
instanceRef={(instance) => (instanceRef.current = instance)}
data={JSON.parse(blogEntry.content)}
/>
<button onClick={handleSave}>Save</button>
</>
)
}
```
For rendering, a library like https://github.com/jeremyrajan/editorjs2html can be used.
```
if (contentFormat === "application/vnd.cubicweb.editorjs") {
const edjsParser = EditorJsToHTML();
const html = edjsParser.parse(JSON.parse(blogEntry.content)).join("");
return <div dangerouslySetInnerHTML={{ __html: html }} />;
}
```
Raw data
{
"_id": null,
"home_page": "http://www.cubicweb.org/project/cubicweb-editorjs",
"name": "cubicweb-editorjs",
"maintainer": "",
"docs_url": null,
"requires_python": "",
"maintainer_email": "",
"keywords": "",
"author": "LOGILAB S.A. (Paris, FRANCE)",
"author_email": "contact@logilab.fr",
"download_url": "https://files.pythonhosted.org/packages/b4/7e/5cae1a9ac001a178817a123ef9e84a9994b9c42fee3cc5eb24575516fb06/cubicweb-editorjs-0.2.0.tar.gz",
"platform": null,
"description": "** Warning this cube is not intended for use in production currently **\n\nSummary\n-------\nAdd editorjs format for RichString.\nThis cube adds the application/vnd.cubicweb.editorjs mimetype to the available\nformats for RichStrings.\nIt also adds a widget which allows to edit the RichString using the EditorJS library (a WYSIWYG editor).\n\nStatus of this project\n----------------------\n\nThis project has been initiated as a POC to test integration of EditorJS in CubicWeb.\n\nFeatures:\n- [X] setting the format of a RichString to application/vnd.cubicweb.editorjs\n- [X] edition on an **already existing** RichString attribute with EditorJS\n- [X] rendering a RichString using this mime type in some conditions (see below)\n- [ ] RQL plugin allowing to edit and execute RQL queries\n\n\n\nKnown bugs:\n- when switching to application/vnd.cubicweb.editorjs the editor is not loaded\n which means that only already saved attributes can be edited with EditorJS\n- the rich string is not rendered when it is asynchroneously loaded (after the\n page's scripts have run). This happens with CubicWeb web in tab views.\n- the breadcrumb displays the json instead of a rendered version of the RichString\n- it makes automatic tests of client cubes fail\n\nImplementation flaws:\n\n- the implementation use monkeypatches to\n - add the application/vnd.cubicweb.editorjs format to the known format list\n - override some views\n - override entities `printable_value` method (might not be the best place\n to add the widget)\n- missing mttransforms for application/vnd.cubicweb.editorjs to html\n- images uploads are not supported\n\nUsage in react applications\n---------------------------\n\nReact applications don't suffer most of the problems seen above as they handle the rendering themselves.\nDisplaying an EditorJS is as easy as:\n\n```tsx\nfunction Edit() {\n const instanceRef = React.useRef<EditorJS | null>(null);\n async function handleSave() {\n if (instanceRef.current !== null) {\n const savedData = await instanceRef.current.save();\n rqlClient.queryRows(\n `Set X content %(content)s Where X is BlogEntry, X eid ${eid}`,\n { content: JSON.stringify(savedData) }\n );\n }\n }\n return (\n <>\n <EditorJs\n instanceRef={(instance) => (instanceRef.current = instance)}\n data={JSON.parse(blogEntry.content)}\n />\n <button onClick={handleSave}>Save</button>\n </>\n )\n}\n```\n\nFor rendering, a library like https://github.com/jeremyrajan/editorjs2html can be used.\n```\nif (contentFormat === \"application/vnd.cubicweb.editorjs\") {\n const edjsParser = EditorJsToHTML();\n const html = edjsParser.parse(JSON.parse(blogEntry.content)).join(\"\");\n return <div dangerouslySetInnerHTML={{ __html: html }} />;\n}\n```\n\n\n",
"bugtrack_url": null,
"license": "LGPL",
"summary": "Add editorjs format for RichString",
"version": "0.2.0",
"project_urls": {
"Homepage": "http://www.cubicweb.org/project/cubicweb-editorjs"
},
"split_keywords": [],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "843a96e3998c64da640042679dbf0c4633a98fd59e3108745aedf43c700bbd95",
"md5": "033075758b300f8e891f6057fd4daf24",
"sha256": "66e4cb4111a4381c845b2e696d7d75f6a98bd64cc5a41ad07fcb6fcfbb91fc5a"
},
"downloads": -1,
"filename": "cubicweb_editorjs-0.2.0-py3-none-any.whl",
"has_sig": false,
"md5_digest": "033075758b300f8e891f6057fd4daf24",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": null,
"size": 7066,
"upload_time": "2023-08-11T08:38:35",
"upload_time_iso_8601": "2023-08-11T08:38:35.633407Z",
"url": "https://files.pythonhosted.org/packages/84/3a/96e3998c64da640042679dbf0c4633a98fd59e3108745aedf43c700bbd95/cubicweb_editorjs-0.2.0-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "b47e5cae1a9ac001a178817a123ef9e84a9994b9c42fee3cc5eb24575516fb06",
"md5": "409b66e05f1a06ffd84b98b85b9aeff9",
"sha256": "737a40e9742ee2308df37de5de2c0f774cf10745a36dac0f07a5800719014230"
},
"downloads": -1,
"filename": "cubicweb-editorjs-0.2.0.tar.gz",
"has_sig": false,
"md5_digest": "409b66e05f1a06ffd84b98b85b9aeff9",
"packagetype": "sdist",
"python_version": "source",
"requires_python": null,
"size": 7608,
"upload_time": "2023-08-11T08:38:37",
"upload_time_iso_8601": "2023-08-11T08:38:37.204795Z",
"url": "https://files.pythonhosted.org/packages/b4/7e/5cae1a9ac001a178817a123ef9e84a9994b9c42fee3cc5eb24575516fb06/cubicweb-editorjs-0.2.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2023-08-11 08:38:37",
"github": false,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"lcname": "cubicweb-editorjs"
}
JSON