Composer Markdown Editor

The composer markdown editor is an opinionated React component implemented on top of lexical following and using a bunch of the playground code of the library, adapted to follow our code conventions and simplified to match our specific use case.

Using the library

yarn add @cmpsr/components @cmpsr/markdown-editor

The @cmpsr/markdown-editor library requires react, react-dom and @cmpsr/components libraries to be installed in your project.

In order to get the component properly styled it has to be rendered inside a ComposerProvider component. Example of usage:

import React, { FC } from "react";
import { ComposerProvider } from "@cmpsr/components";
import { MarkdownEditor } from "@cmpsr/markdown-editor";

type Props = {
  value?: string;
  onChange?: (v: string) => void;
  placeholder?: string;
};

export const MyEditor: FC<Props> = ({ value, onChange, placeholder }) => (
  <ComposerProvider>
    <MarkdownEditor
      initialValue={value}
      onChange={onChange}
      placeholder={placeholder}
      height="350px"
      width="100%"
    />
  </ComposerProvider>
);

Initial value

This component is not a controlled component, the initialValue will only be set once to the first non falsy value provided, once a value is set subsequent values sent to the component will be ignored. For example in the following code the value set inside the setTimeout will be discarded by the MarkdownEditor and # First value will be used.

export const WithInitialValue = () => {
  const [value, setValue] = useState("# First value");

  useEffect(() => {
    setTimeout(() => {
      setValue("# Second value");
    }, 1000);
  }, []);

  return <MarkdownEditor initialValue={value} />;
};

Releasing your changes

Before creating the pull request you have to generate a changeset for your components, follow the instructions in here.