DEV Community

Cover image for Building jargons.dev [#3]: The Word Editor
Olabode Lawal-Shittabey
Olabode Lawal-Shittabey

Posted on • Edited on

1

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

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

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more