search

AP-Students / website

1 stars 17 forks source link

Feature: Article Editor #29

Closed sresri2 closed 3 months ago

sresri2 commented 4 months ago

Article Editor lets us type up articles with information, tips, studying guides, teaching, etc... to the website. It uses react-quill for the rich text editor, so we are able to fully format the articles with titles, links, etc... as needed. I have tried to match the Home Page style as closely as I could with the clean black and white design.

Screenshot 2024-06-22 at 9 57 41 PM

Currently, the Submitting feature is a placeholder function that converts the entered text into Markdown formatting and prints it to the console. The react-quill package uses HTML, and this Article Editor uses the html-to-md package to convert the HTML to Markdown in string form (and manually convert underlining because......). This makes it easier to link with the Article Renderer feature in the future.

alexng353 commented 4 months ago

Where is the pnpm-lock file? How come it didn't get updated with this PR?

BrilliantDeviation7 commented 4 months ago

The _components directory already exists for components; move ArticleEditor.tsx to app/_components from app/components.

sresri2 commented 4 months ago

The _components directory already exists for components; move ArticleEditor.tsx to app/_components from app/components.

Updated. "ArticleEditor.tsx" is now under app/_components.

elijah-wright commented 4 months ago

we agreed on using ProseMirror last week, not Quill

BrilliantDeviation7 commented 4 months ago

we agreed on using ProseMirror last week, not Quill

I looked at the two, and I think we should use ProseMirror. It has support for Markdown, and I found this editor which looks good. It can output Markdown which is what we want to store on the backend.

sresri2 commented 4 months ago

Article Editor Update:

Article Editor lets us type up articles with information, tips, studying guides, teaching, etc... to the website. It uses ProseMirror for the rich text editor and Markdown editor. We are able to edit in either one and content is synchronized across both. There is no middle step in using html2md anymore - ProseMirror allows direct conversion which is more reliable, so we are able to fully format the articles with titles, links, etc... as needed. I have tried to match the style as closely as I could with the clean black and white design:

Screenshot 2024-07-07 at 9 00 11 PM

Currently, the Submitting feature is a placeholder function that console logs the content in Markdown format and prints it to the javascript browser console. ProseMirror allows for the side-by-side rich text editor and markdown editor, so content writers can use both as they wish and the content will synchronize with both and store directly in Markdown. This makes it easier to link with the Article Renderer feature in the future.

alexng353 commented 3 months ago

Closing because this pr is obsoleted by editorjs.