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

#javascript #opensource #productivity #buildinpublic

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

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.
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.
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.
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.
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.
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