Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feat]: Is there an editor to place it in a frontend project and thus save the information? Just like Strapi admin has. #62

Open
AlexisSniffer opened this issue Jan 25, 2025 · 1 comment
Labels
issue: enhancement Issue suggesting an enhancement to an existing feature

Comments

@AlexisSniffer
Copy link

A clear and concise description of what the feature is

Is there an editor to place it in a frontend project and thus save the information? Just like Strapi admin has.

Why should this feature be included?

An editor is required if you want to perform the crud in a project other than Strapi

Please provide an example for how this would work

No response

@AlexisSniffer AlexisSniffer added the issue: enhancement Issue suggesting an enhancement to an existing feature label Jan 25, 2025
@BoozedBunny
Copy link

BoozedBunny commented Feb 18, 2025

tldr:

  • install Slate
  • use GPT to convert from slate JSON to strapi block editor v5 JSON

Hello World and hello dear OP,

i found out a solution using the slate editor for my purpose. Install & use slate:
import { Slate, Editable, withReact } from "slate-react";

Initialize with something like
const editor = useMemo(() => withReact(createEditor()), []);

And here is the main part, what it looks for me in my code now:
<Slate editor={editor} initialValue={editorContent} onChange={handleChange}> <Editable className="rounded-xl" placeholder={placeholder} style={{ border: "1px solid #ccc", padding: "10px", minHeight: "150px", }} /> </Slate>

Now the cool part: the editor reads and gives JSON and can also read & display the strapi v5 block editor syntax as well. But, when you get it back to save it in strapi, the whole thing needs to be converted into the strapi syntax (so you dont need to 'decrypt' to display / update it in your editor, you just need to 'encrypt' when sending it back to strapi).
And for this you can just ask your friend GPT for the right answers, i let him wrote me this for me, so you can see where he converts bold / italic and stuff like that as well, so you can add whatever you like:
const handleChange = (newValue: any) => { // create strapi format const formattedContent = newValue.map((block: any) => ({ type: block.type || "paragraph", children: block.children.map((child: any) => ({ type: child.type || "text", text: child.text || "", ...(child.bold && { bold: true }), ...(child.italic && { italic: true }), })), })); setEditorContent(formattedContent); };

I chose slate because it is easy for GPT to convert in one place. Other editors like Blocknote, TipTap, Lexical ... were tested, but proven wrong in long run - i have no relation to slate and you can chose any editor you like. Here is what i was looking into:

  • Blocknote: very cool at glance, but comes with +200 dependencies, is very weak on updates (two core deps can break your whole build on pnpm / yarn build) and there are like 3 main components and everyone is working differently (oh, you want to use the blocks without the possibility to change the color of line background / color? happy coding!)
  • TipTap: to be honest, i never tested it - depends on an API key, not my software, cant tell you anything about it
  • Lexical / Draft: big dependencies and no possibilty to save my data directly in JSON without converting it myself
  • Plate: well i never tested it, but it seems to be the editor for ShadCN, but i dont know if it mainains the ability to write the data directly in JSON

Update: of course you cant use the block logic from strapi with it without coding it yourself and you may need a translation back to slate JSON when adding stuff like anchorlinks / other stuff.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
issue: enhancement Issue suggesting an enhancement to an existing feature
Projects
None yet
Development

No branches or pull requests

2 participants