altos-react-text-editor

• Overview
• Using library
  • Server Side Rendering
• Preparation and starting the application
  • Installation
• Deploying to Github Pages
• Buling library
• Troubleshoots
  • The editor keeps re-rendering
  • The bundle size is quite large

Overview

This project is a Markdown editor library. Thanks to it, it is possible to use Markdown in a simple and pleasant way. It is written using React, styled-components. React-hook-form was used to render forms alogn with yup.

The newest test version should be released there -> example page

Using library

Simply run:

yarn add altos-react-text-editor

and then import TextEditor

import 'altos-react-text-editor/dist/style.css';

import { TextEditor } from 'altos-react-text-editor';

const AltosTextEditor: React.FC = () => {
  const onDataChange = useCallback(() => {}, [])

  return (
    <TextEditor data="" mode="active" onDataChange={onDataChange} />
  )
}

Server Side Rendering

This library cannot be rendered on the server! That's why it's important to render it only on the client side.

So basically.. the library will never and should not be rendered on the server.

How to use it with Next.js? It's not the best solution. We shouldn't use lazy loading components in this case, but it's a "now" solution. In the future, this must be changed and a better solution must be found

• yarn add altos-react-text-editor
• Create a new component

import 'altos-react-text-editor/dist/style.css';

import { TextEditor } from 'altos-react-text-editor';

const AltosTextEditor: React.FC = () => {
  const onDataChange = useCallback(() => {}, [])

  return (
    <TextEditor data="" mode="active" onDataChange={onDataChange} />
  )
}

export default AltosTextEditor;

• Import AltosTextEditor via dynamic

import dynamic from 'next/dynamic'

const AltosTextEditorDynamic = dynamic(() => 
  import('<--path_to_the_component->'), {
    loading: () => <p>Loading...</p>,
    ssr: false,
  }
)

export default function MyComponent() {
  return (
    <div>
      Hello!
      <AltosTextEditorDynamic />
    </div>
  )
}

Preparation and starting the application

For consistency and to ensure that each developer uses the same version of Node.js, we used nvm (How to install nvm on macos).

Installation

1. cd /your_path
2. git clone [e-mail]:DareData/notion-style-editor.git
3. cd notion-style-editor
4. nvm use
5. yarn
6. yarn prepare
7. yarn start

Deploying to Github Pages

If you want to share the current state of the library with external people, you can use Github Pages where a test version is placed for testing by testers.

To add a new version, you just need to run the following commands:

1. yarn build:pages
2. git commit -m"<--any_commit_message-->"
3. git push origin <--your_branch-->

Just remember that the changes you upload should be visible on github pages, your changes should be in the same branch on which github pages is currently "listening". Here you can check on which branch github is currently listening for changes.

Buling library

If you want to build a library to be used by external applications, you need to run the following commands:

• yarn build

Your library has been created in the dist folder.

Troubleshoots

The editor keeps re-rendering

Check, whether onDataChange and data do not change their reference. When one of them changes, the old editor is "unmounted" and a new one is "mounted". https://blog.logrocket.com/understanding-react-exhaustive-deps-linting-warning/

The bundle size is quite large

Unfortunately after using https://github.com/btd/rollup-plugin-visualizer, I noticed that both of these plugins are around 4MB

• https://milkdown.dev/docs/api/plugin-diagram
• https://milkdown.dev/docs/api/plugin-math

In addition, fonts take up quite a lot of space.

Moreover.. the code is not minified yet, so 60% of the size will be reduced. Also remember about compression, which will also reduce the size of the package.