Building jargons.dev [#3]: The Word Editor

In no time, we're here!

The editor is surely a part of the important piece of this project, the part that facilitates user's contribution; the dreamy 😊 interface where a user's can basically write/edit jargons and submit with the click of a button and boom that's a contribution to Open source that also gets a green square without interfacing with the GitHub UI or any code editor.

The Plan

Right from the initial commit, I had found and readied a library that I wanted to integrate for this Editor feature, this was a project that I found during my search for a visual editor tool that builds down to markdown — I needed this tool at a certain point to write some issue with some complex table structure on the Hearts repo.

It is MDXEditor

MDXEditor; quoting from the project website..

is an open-source React component that allows users to author markdown documents naturally. Just like in Google docs or Notion.

...and I'll add that it's a beautiful tool in itself, with their live demo being of great use to me.

So, MDXEditor had the finest selling point and trust me I was just sold 🤤.

Change of Plan

Unfortunately at the point of integration, I encountered an error; a commonJS related error in lexical — a text editor framework integrated in MDXEditor itself. I did some findings and documented source of error in the tweet below..

I tried a few workarounds to get it working; but in order for the workaround to work, the lexical's integration version in MDXEditor needs to be updated.

I also immediately sourced for alternatives, and I found some but I wasn't feeling them at all.

The Resolution

I ended resolving to make a custom minimal markdown editor

...and for a resolution to the error I encountered in my attempt to integrate MDXEditor, we still gotta do this for Open Source.

The Editor

I got working, with the goal of relying on little to no dependency to patch the feature; I ended up consuming just react-markdown as new dependency and I was able to conclude the very first iteration of the editor in a 6 stages step.

The Stages

1. I added a new map type $dictionaryEditor state to the dictionary store and a custom useDictionaryEditor hook which wraps around the store so I can use it in the next stage.
2. I added a boilerplate word-editor island with react integration. Integrated the island to with client:load directive on a newly created editor page/route.
3. I Implemented the Editor component within the word-editor island with textarea form element. I integrated the useDictionaryEditor to set dictionary store value for editor.
4. I implemented the Preview component within the word-editor island. Where I consumed a react-markdown as markdown converter to HTML for the preview purpose.
5. I created and integrated a DummyPreviewNavbar component into the Previewcomponent to enable the preview tab of the editor look exactly like word looks like when seen in the word layout on the web app.
6. I implemented the editor title field; added a non-functional "Publish" button.

The PR

feat: implement dictionary word editor #6

babblebey posted on Mar 26, 2024

This Pull Request implements the first iteration of the visual word editor for adding new or modifying existing words in the dictionary.

Changes Made

• Added a new page/route /editor
• Added a word-editor island with react integration and integrated this island on the editor page with a client:load directive
• Added a new map store $wordEditor to stores/dictionary
• Implemented a custom hook useWordEditor which serves as a wrapper to perform get and set operation on the $wordEditor store
• Implement 2 component to the word-editor island integrate within the main island default exported component
  • Editor - the entry field component for editing word entry to the dictionary, it implements the title field of input type text and a content field of textarea which receives (Markdown) text content
  • Preview - the preview UI that mimics the view of word as it's going to look on the dictionary live view;
    • this component also integrate another DummyPreviewNavbar component to enhance the live preview idea
    • it also implements the Markdown component from react-markdown node module integration to parse of the Markdown content received from the Editor's content to html.
    • this component also uses the prose utility class name from @tailwind/typography plug-in to style the parsed html content enhance the preview idea.
• Implemented the DummyPreviewNavbar component in within the word-editor island for integration in the Preview component
• Implement a stateless/non-functional Publish button on editor page
• Extracted nav element on layout/base to standalone Navbar component

📖

Screencast/Screenshot

screencast-bpconcjcammlapcogcnnelfmaeghhagj-2024.03.28-16_14_26.webm

Note

• Added new node module: react-markdown

View on GitHub