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

Content Editor? #213

Open
chrisspiegl opened this issue Oct 22, 2023 · 14 comments
Open

Content Editor? #213

chrisspiegl opened this issue Oct 22, 2023 · 14 comments

Comments

@chrisspiegl
Copy link

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
Copy link
Author

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
Copy link
Owner

lane711 commented Oct 23, 2023

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
Copy link

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
Copy link
Owner

lane711 commented Nov 8, 2023

@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
Copy link

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
Copy link
Owner

lane711 commented Nov 8, 2023 via email

@osseonews
Copy link

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

@osseonews
Copy link

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
Copy link

cryptoskillz commented Jan 14, 2024

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
Copy link

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
Copy link
Contributor

rhamses commented Jan 25, 2024

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
Copy link
Owner

lane711 commented Feb 1, 2024

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
Copy link
Contributor

rhamses commented Feb 4, 2024

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants