https://github.com/webbrother/react-headless-mde

React headless markdown editor
https://github.com/webbrother/react-headless-mde

Last synced: 3 months ago
JSON representation

React headless markdown editor

• Host: GitHub
• URL: https://github.com/webbrother/react-headless-mde
• Owner: Webbrother
• Created: 2023-03-08T09:50:45.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-16T11:25:40.000Z (over 1 year ago)
• Last Synced: 2024-09-30T01:02:06.281Z (3 months ago)
• Language: TypeScript
• Homepage:
• Size: 818 KB
• Stars: 4
• Watchers: 1
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-headless-components - React Headless MDE - React headless markdown editor (Libraries)

README

        
# Introduction

A simple yet powerful and extensible **React Markdown Editor** that aims to have feature parity with the Github Markdown editor.

React-mde-headless has **no 3rd party dependencies**.

## [Demo](https://codesandbox.io/s/competent-jepsen-qyz51q?file=/src/index.tsx)

## Installing

    npm i react-headless-mde

## Using

```jsx

import { boldCommand, italicCommand, linkCommand, useTextAreaMarkdownEditor } from 'react-headless-mde';

export const MarkdownEditor = () => {

  const { ref, commandController } = useTextAreaMarkdownEditor({

    commandMap: {

      bold: boldCommand,

      italic: italicCommand,

      link: linkCommand,

    },

  });

  return (

    


       {

          commandController.executeCommand('bold');

        }}

      >

        B

      


      

    

  );

};

```


## Supported commands

- headingLevel1

- headingLevel2

- headingLevel3

- headingLevel4

- headingLevel5

- headingLevel6

- quote

- checkedList

- orderedList

- unorderedList

- bold

- code

- codeBlock

- italic

- strikethrough

- image

- link

## New API discussion [here](https://github.com/Webbrother/react-headless-mde/issues/22)

## Todo

- Undo/Redo commands

- Check execution on SSR (For example, Next.js) and, if necessary, regenerate eslint config, taking into account execution on node.js

- peerDependencies React?

- Undo for

  - 1st priority

    - all headers

    - `quote`

    - `strikethrough`

  - 2nd priority

    - `orderedList`

    - `unorderedList`

    - `checkedList`

    - `codeBlock`

PR's are welcome!

### Third party

- https://github.com/grassator/insert-text-at-cursor by https://twitter.com/d_kubyshkin

### XSS concerns

React-mde-headless does not automatically sanitize the HTML preview. If you are using Showdown,

this has been taken from [their documentation]():

> Cross-side scripting is a well known technique to gain access to private information of the users

> of a website. The attacker injects spurious HTML content (a script) on the web page which will read

> the user’s cookies and do something bad with it (like steal credentials). As a countermeasure,

> you should filter any suspicious content coming from user input. Showdown does not include an

> XSS filter, so you must provide your own. But be careful in how you do it…

You might want to take a look at

- [rehype-sanitize](https://github.com/rehypejs/rehype-sanitize).

- [showdown-xss-filter](https://github.com/VisionistInc/showdown-xss-filter).

## Licence

React-mde-headless is [MIT licensed](https://github.com/andrerpena/react-mde/blob/master/LICENSE).

## About the authors

Created by [André Pena](https://github.com/andrerpena). Maintained and developed by https://github.com/webbrother.