dafunda-markdown-editor v0.1.1

Usage

Install

yarn add dafunda-markdown-editor

or

npm install dafunda-markdown-editor

or

pnpm add dafunda-markdown-editor

Note that react, react-dom, and styled-components are required peer dependencies.

Import

import Editor from "dafunda-markdown-editor";

<Editor
  defaultValue="Hello world!"
/>

Clone this repo and run the Storybook with yarn start to see a wide variety of example usage.

Props

id

A unique id for this editor, used to persist settings in local storage. If no id is passed then the editor will default to using the location pathname.

defaultValue

A markdown string that represents the initial value of the editor. Use this to prop to restore previously saved content for the user to continue editing.

value

A markdown string that represents the value of the editor. Use this prop to change the value of the editor once mounted, this will re-render the entire editor and as such is only suitable when also in readOnly mode. Do not pipe the value of onChange back into value, the editor keeps it's own internal state and this will result in unexpected side effects.

placeholder

Allows overriding of the placeholder. The default is "Write something nice…".

readOnly

With readOnly set to false the editor is optimized for composition. When true the editor can be used to display previously written content – headings gain anchors and links become clickable.

readOnlyWriteCheckboxes

With readOnlyWriteCheckboxes set to true checkboxes can still be checked or unchecked as a special case while readOnly is set to true and the editor is otherwise unable to be edited.

autoFocus

When set true together with readOnly set to false, focus at the end of the document automatically.

maxLength

When set enforces a maximum character length on the document, not including markdown syntax.

extensions

Allows additional Prosemirror plugins to be passed to the underlying Prosemirror instance.

disableExtensions

List of included extension names to disable. Removes corresponding menu items and commands. E.g. set to ["em", "blockquote"] to disable italic text and blockquotes.

theme

Allows overriding the inbuilt theme to brand the editor, for example use your own font face and brand colors to have the editor fit within your application. See the inbuilt theme for an example of the keys that should be provided.

dictionary

Allows overriding the inbuilt copy dictionary, for example to internationalize the editor. See the inbuilt dictionary for an example of the keys that should be provided.

dark

With dark set to true the editor will use a default dark theme that's included. See the source here.

dir

Default: auto

Controls direction of the document. Possible values are:

• ltr: Editor layout is optimized for LTR documents and the content is explicitly marked as LTR.
• rtl: Editor layout is optimized for RTL documents and the content is explicitly marked as RTL.
• auto: Editor layout is decided by the browser based on document content.

tooltip

A React component that will be wrapped around items that have an optional tooltip. You can use this to inject your own tooltip library into the editor – the component will be passed the following props:

• tooltip: A React node with the tooltip content
• placement: Enum top, bottom, left, right
• children: The component that the tooltip wraps, must be rendered

headingsOffset

A number that will offset the document headings by a number of levels. For example, if you already nest the editor under a main h1 title you might want the user to only be able to create h2 headings and below, in this case you would set the prop to 1.

scrollTo

A string representing a heading anchor – the document will smooth scroll so that the heading is visible in the viewport.

embeds

Optionally define embeds which will be inserted in place of links when the matcher function returns a truthy value. The matcher method's return value will be available on the component under props.attrs.matches. If title and icon are provided then the embed will also appear in the block menu.

<Editor
  embeds={[
    {
      title: "Doc",
      keywords: "docs",
      icon: <GoogleDocIcon />,
      defaultHidden: false,
      matcher: href => href.matches(/docs.google.com/i),
      component: GoogleDocEmbed
    }
  ]}
/>