https://github.com/tuture-dev/editure

✍️The richtext markdown editor from the future.
https://github.com/tuture-dev/editure

editor hotkeys markdown markdown-editor richtext wysiwyg

Last synced: about 1 month ago
JSON representation

✍️The richtext markdown editor from the future.

• Host: GitHub
• URL: https://github.com/tuture-dev/editure
• Owner: tuture-dev
• License: mit
• Created: 2020-02-02T09:33:45.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2021-12-31T12:13:37.000Z (almost 3 years ago)
• Last Synced: 2024-09-30T01:02:06.363Z (about 2 months ago)
• Topics: editor, hotkeys, markdown, markdown-editor, richtext, wysiwyg
• Language: TypeScript
• Homepage: https://editure-preview.netlify.com/
• Size: 1010 KB
• Stars: 18
• Watchers: 3
• Forks: 3
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Editure

[![Build Status](https://travis-ci.com/tuture-dev/editure.svg?branch=master)](https://travis-ci.com/tuture-dev/editure)[![codecov](https://codecov.io/gh/tuture-dev/editure/branch/master/graph/badge.svg)](https://codecov.io/gh/tuture-dev/editure)

Editure is a richtext markdown editor built on top of [Slate](https://www.slatejs.org/), with out-of-the-box support for markdown **shortcuts**, **hotkeys**, **serialization**. It aims to provide editing experience on par with [Typora](https://typora.io/) or [Yuque](https://www.yuque.com/).

> Warning: Editure is currently experimental. DO NOT USE IT IN PRODUCTION!

## Highlights

- **Hotkeys**: e.g. toggle bold font with `Ctrl+B` or `Cmd+B`

- **Shortcuts**: trigger the full rendering of Markdown as you are typing

- **Toolbar**: a toolbar for adjusting format with buttons

## Supported Formats

Marks: **bold**, _italic_, underline, ~~strikethrough~~ and [link](https://tuture.co).

Blocks: paragraphs, headings, blockquotes, code blocks, note blocks, bulleted lists, numbered lists, images, and horizontal lines.

## Installation

```bash

npm install editure editure-react

# or if you prefer yarn:

yarn add editure editure-react

```

## Getting Started

### Using the Component

A quick demo:

```javascript

import Editure from 'editure-react';

class MyComponent extends React.Component {

  constructor(props) {

    super(props);

    this.state = { value: [] };

  }

  handleChange = (value) => {

    this.setState({ value });

  };

  render() {

    return ;

  }

}

```

Or, if you prefer [Hooks](https://reactjs.org/docs/hooks-intro.html):

```javascript

import Editure from 'editure-react';

function MyComponent() {

  const [value, setValue] = useState([]);

  return ;

}

```

### Content Serialization

As in Slate, the `value` prop is a plain JavaScript object. You can perform serialization with `JSON` global object:

```javascript

// serialize to JSON

const serialized = JSON.stringify(value);

// parse from JSON

const value = JSON.stringify(serialized);

```

Moreover, Editure provides serialization support for HTML and Markdown, for example:

```javascript

import { toHtml, toMarkdown, parseHtml, parseMarkdown } from 'editure';

// serialize to HTML

const htmlString = toHtml(value);

// parse from HTML

const value = parseHtml(htmlString);

// serialize to Markdown

const markdownString = toMarkdown(value);

// parse from Markdown

const value = parseMarkdown(markdownString);

```

## API Reference

### `editure`

The `editure` package provides low-level utilities to work with Slate.

### `editure-react`

Here is a full list of props from `Editure` component:

- `value`: the current value of the editor

- `onChange`: handler called after the content changed

- `placeholder`: placeholder string for the editor

- `readOnly`: if `true`, the editor won't allow changing its contents.

## LICENSE

MIT.