https://github.com/tangledbytes/saged

Rich text editor based on draftjs and monaco.
https://github.com/tangledbytes/saged

Last synced: about 2 months ago
JSON representation

Rich text editor based on draftjs and monaco.

• Host: GitHub
• URL: https://github.com/tangledbytes/saged
• Owner: tangledbytes
• License: apache-2.0
• Created: 2020-05-29T05:13:06.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-02-05T04:08:16.000Z (11 months ago)
• Last Synced: 2024-10-11T11:17:37.311Z (2 months ago)
• Language: TypeScript
• Homepage: https://tangledbytes.github.io/saged/
• Size: 8.98 MB
• Stars: 7
• Watchers: 4
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# saged

> saged is the editor used on blog.sagacious.dev site. It embeds draftjs and monaco right out of the box.

[![NPM](https://img.shields.io/npm/v/saged.svg)](https://www.npmjs.com/package/saged) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash

npm install --save saged

```

## Features

1. WYSIWYG editor

2. Configurable

3. Comes with monaco editor (VS Code editor) baked in

4. Markdown support

5. Supports Server Side Rendering (Tested with Next.js) 🎉

## Usage

Using the defaults

```tsx

import React from 'react'

import Editor from 'saged'

function Editor() {

    return 

}

```

Configuring the editor

```tsx

import React from 'react'

import Editor from 'saged'

import Classes from './package.module.css'

function Editor() {

    return (

        

    )

}

```

## Props

1. readOnly (`boolean`): Specify if the editor should open in a read only mode. If opened in readonly mode then it will act as a previewer.

2. content (`string`): Content to be displayed by the text editor. This is supposed to follow the draftjs content schema and hence is not meant to be handled manually.

3. storageKey (`string`): Saged stores the content in the local storage. This key is used to store the data in local storage. Defaults to "article".

4. className (`string`): Override the default style of the editor container using this class name. Note that not all the styles can be overidden.

5. onChange (`(content: string) => void`): Optional function which will be invoked when editor state changes

## Caveats

1. Media uploads is not supported at the moment. Markdown should be used to embed such content.

2. Table is not supported yet, markdown should be used to embed such content.

## License

Apache 2.0 © [utkarsh-pro](https://github.com/utkarsh-pro)