https://github.com/oklookat/jmarkd

simple markdown editor
https://github.com/oklookat/jmarkd

js markdown markdown-editor text-editor typescript

Last synced: 3 days ago
JSON representation

simple markdown editor

• Host: GitHub
• URL: https://github.com/oklookat/jmarkd
• Owner: oklookat
• License: other
• Created: 2022-01-03T14:10:58.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-02-13T17:10:57.000Z (8 months ago)
• Last Synced: 2024-09-15T10:38:11.781Z (12 days ago)
• Topics: js, markdown, markdown-editor, text-editor, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@oklookat/jmarkd
• Size: 108 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        
# jmarkd

![screenshot](./screenshot/screen.png)

## Features

- Toolbar with API

- Dark/light themes

- Preview (you need to provide markdown parser)

- Hmm. What else is needed?

## Requirements

- **Modern browser**

## Example

```npm install @oklookat/jmarkd```

```html



```

```typescript

import jmarkd from '@oklookat/jmarkd'

import '@oklookat/jmarkd/styles'

import { Config } from '@oklookat/jmarkd'


const container = document.getElementsByClassName('container')[0]

const config: Config = {

    container: container,

    // (optional) preview tool config to display parsed markdown

    toolbar: {

        elements: {

            config: {

                preview: {

                    parse: (data) => {

                        return anotherMarkdownParser.parse(data)

                    }

                }

            }

        }

    }

}

const editor = new jmarkd(config)

```

## Creating you own toolbar item

```typescript

import jmarkd from '@oklookat/jmarkd'

import '@oklookat/jmarkd/styles'

import { Config, ToolbarElement } from '@oklookat/jmarkd'

class Say implements ToolbarElement {

    private what: string

    get icon() {

        return "Say"

    }

    setConfig(what: string) {

        this.what = what

    }

    getShortcut() {

        return ['AltLeft', 'KeyE']

    }

    onClick(textarea: HTMLTextAreaElement) {

        textarea.value += this.what

    }

}

const container = document.getElementsByClassName('container')[0]

const config: Config = {

    container: container,

    toolbar: {

        // displayed: ['say'] // if you need leave only your items or change item order

        elements: {

            boot: {

                say: new Say()

            },

            config: {

                say: '🌹'

            }

        }

    }

}

const editor = new jmarkd(config)

```

## Types, configs, toolbars, etc

- **[./src/types.d.ts](./src/types.d.ts)**

- **[./src/factory](./src/factory)**