Skip to content

A simple wysywyg editor with only markdown subset supported by Telegram

License

Notifications You must be signed in to change notification settings

xen/tgmde

 
 

Repository files navigation

TgMDE - Telegram Markdown Editor

Simple WYSIWYG Markdown editor with only support for Telegram flawored text.

All rules that is supported:

*bold text*
_italic text_
[inline URL](http://www.example.com/)
[inline mention of a user](tg://user?id=123456789)
`inline fixed-width code`
```block_language
pre-formatted fixed-width code block
```

Project is based on the beautiful SimpleMDE Markdown Editor.

React component from TgMDE

TgMdEditor.jsx

import React, { useEffect } from 'react'
import * as TGMDE from 'tgmde/dist/tgmde.min.js'
import 'tgmde/dist/tgmde.min.css'


const TgMdEditor = ({ value, setValue }) => {

  useEffect(() => {
    const tgmde = new TGMDE({});
    tgmde.value(value);
    tgmde.codemirror.on('change', () => setValue(tgmde.value()))
  }, [])
  
  
  return (
    <div className="tgmde">
      <textarea />
    </div>
  )
}

export default TgMdEditor

your Form.jsx

// ...

import TgMdEditor from './path/to/TgMdEditor';

// ...

   <TgMdEditor value={ state.text }  setValue={ setText } />

// ...

About

A simple wysywyg editor with only markdown subset supported by Telegram

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 99.1%
  • CSS 0.9%