Content Editor?

[chrisspiegl]

As mentioned before, I just found Sonic and was wondering if there are any plans to integrate a form of Content Editing?

Some WYSIWYG editor or Markdown or something to make it easier for a non technical person to be able to also use this setup?

In this regard, it would also be great not to have to do the category => post linking completely manual by copying around ID numbers?

[chrisspiegl]

I just was doing some more research on this topic and found this editor which appears very powerful and "easyish" to implement.

https://tiptap.dev

[lane711]

Something like this is definitely in the roadmap. Right now content editing is in place, but pretty basic, ie: https://demo.sonicjs.com/admin/content/edit/users/488484b6-00df-4d43-b7a2-d554ae654f9a

[osseonews]

By the way, I'd personally drop the whole admin folder for editing content. It really overly complicates this repo and causes some errors. Admin interfaces are a whole other ballgame. For actually editing the content in the database, I'd just use Retool and set up a resource that connects to the D1 database. It's quite trivial to do. Then this repo should just focus on setting up the backend correctly, i.e. D1 to KV and memory cache, schema set ups. You can even use Retool to upload images to Cloudflare and then that's solved also by jusing saving the SRC url into the D1 database.

[lane711]

@osseonews I don't disagree but it's been really helpful for me while building the API as we're "eating our own dogfood" plus the visual representation of data is a benefit. I will look into retool and other alternatives at some point as it would be nice to be able to focus on the API framework more exclusively. Thanks for the idea.

[osseonews]

Yeah, totally understand. I used to be the same way until I discovered Retool a few months back. Now, I don't even bother with frontend admin tools any more. Frees up so much energy and time to focus just on the API stuff.

[lane711]

Is the free version fairly full featured for what we would need?

On Wed, Nov 8, 2023 at 7:22 AM Shlomo @.***> wrote:

Yeah, totally understand. I used to be the same way until I discovered Retool a few months back. Now, I don't even bother with frontend admin tools any more. Frees up so much energy and time to focus just on the API stuff.

— Reply to this email directly, view it on GitHub https://github.com/lane711/sonicjs/issues/213#issuecomment-1802111298, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABBGCCYNNG2BLVTIRSD4C3LYDOPUXAVCNFSM6AAAAAA6KXG5M2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMBSGEYTCMRZHA . You are receiving this because you commented.Message ID: @.***>

[osseonews]

Yes, 100%. You only need paid versions , when you have multiple users that require access rights,

[osseonews]

BTW, I was going to try to set up a Retool connection to D1, but busy on some other stuff now. But, I think the way it would work is that you set up REST API resource to the Cloudflare Worker and then since you already have the API routes set up, it should be trivial to do all the CRUD. And you would have an unbelievable amount of components to work with in Retool.

[cryptoskillz]

I also like the idea of separating the content editor from the rest of the repo. I coded up a simple Cloudflare pages app using the editor quill.js

You can see the code here

https://github.com/cryptoskillz/sonicjswithquill

and a working demo here

https://sonicjswithquill.pages.dev/b8c26807-6991-4b30-b1ef-a951d6adafc7#

All that would be required from Sonicjs is an edit button next to each row.
Also, if a POST/PUT endpoint was added to the posts API, we could use Sonicjs to fetch and store the data.

[osseonews]

Yeah, I agree developing a good admin dashboard to edit content is a very difficult thing to do, and not essential to the core functionality of this great little CMS. It would be best to create another repo which would run the admin dashboard that can be used to interact with D1. It is really a separate project.

[rhamses]

While I was looking for alternatives for the content editor I found grapejs which sounds really cool and modern. What do you guys think?

[lane711]

While I was looking for alternatives for the content editor I found grapejs which sounds really cool and modern. What do you guys think?

GrapeJs is just for editing web page HTML content, so not a good fit for an admin tool. I played with it quite a bit a couple of years ago. Its ok, but far from a great page builder compared to the popular Wordpress page builder plugins like Elementor, etc

[rhamses]

Yeah, I get from this discussion that GrapeJS and page builder in general would be a separate step on this process. I'm running an experiment with EditorJS somewhat successfully and I'll happy to share the screens after the setup is complete.

[ninjasitm]

Found a way to hack this quickly for formio (https://help.form.io/userguide/):

As an example in cms/api/forms.ts:

function getField(fieldName): Field {
  const disabled = fieldName == "id";
  const type = getFieldType(fieldName);
  return {
    type,
    key: fieldName,
    label: fieldName,
    disabled,
    autoExpand: type === "textarea",
    wysiwyg: type === "textarea",
    rows: type === "textarea" ? 3 : undefined,
    // placeholder: "Enter your first name.",
    // input: true,
    // tooltip: "Enter your <strong>First Name</strong>",
    // description: "Enter your <strong>First Name</strong>",
  };
}

function getFieldType(fieldName) {
  switch (fieldName) {
    case 'body':
      return 'textarea';
      break;
  }
  return fieldName === "password" ? "password" : "textfield";
}

Not sure if this will be overwritten in the future but for now this allows me to define a wyswyg.