Skip to content

markdown-editor is a markdown enhanced textarea with native browser spellchecking

License

Notifications You must be signed in to change notification settings

martinic/ember-cli-markdown-editor

Repository files navigation

ember-cli-markdown-editor

markdown-editor is a markdown enhanced textarea with native browser spellchecking

Features:

  • Bootstrap 5 Styling by default
  • Font Awesome SVG Icons
  • Supports all textarea Attributes
  • Does not depend on a specific markdown addon to generate html formatted markup
  • Native browser spellchecking
  • Disable Buttons via an optional btns array
  • Undo Button
  • Provide localization via ember-intl
  • Compact mode

Requirements

  • ember-cli 3.28.4 or higher
  • Bootstrap 5 CSS

Installation

  • npm install bootstrap Or your favorite Bootstrap 5 addon
  • ember install ember-cli-markdown-editor This addon

Usage

First make sure your route file app/routes/application.js sets the default language for the intl service:

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class ApplicationRoute extends Route {
  @service intl;

  async beforeModel() {
    super.init(...arguments);
    return this.intl.setLocale(['en-us']);
  }
}

Add the markdown-editor to your templates like you would normaly do with a textarea but passing a param function to update the value, like in the examples.

Minimal

<MarkdownEditor @value={{this.myValue}} @onChange={{fn (mut this.myValue)}} />

Common

<MarkdownEditor
  @rows="8"
  @placeholder="Post content"
  @value={{this.myValue}}
  @onChange={{fn (mut this.myValue)}}
/>

Compact mode

<MarkdownEditor
  @rows="8"
  @placeholder="Post content"
  @value={{this.myValue}}
  @onChange={{fn (mut this.myValue)}}
  @compact={{true}}
/>

All Buttons

<MarkdownEditor
  @rows="8"
  @placeholder="Post content"
  @btns="heading,bold,italic,quote,link,image,table,hr,list-ol,list-ul,undo,help"
  @value={{this.myValue}}
  @onChange={{fn (mut this.myValue)}}
/>

Some Buttons

<MarkdownEditor
  @rows="8"
  @placeholder="Post content"
  @btns="bold,italic,list-ol,list-ul"
  @value={{this.myValue}}
  @onChange={{fn (mut this.myValue)}}
/>

Localization

If you include in your project root a folder called translations you can add transition files like this per locale:

translations/nl-nl.yaml

markdown-editor:
  modal:
    selectionText: 'Maak eerst een selectie'
    confirm: 'Bevestigen'
    cancel: 'Annuleren'
  formats:
    heading:
      tooltip: 'Hoofdstuk toevoegen'
    bold:
      tooltip: 'Maak de selectie vet'
    italic:
      tooltip: 'Maak de selectie schuingedrukt'
    quote:
      tooltip: 'Voeg geciteerde tekst toe'
    link:
      tooltip: 'Maak een link van de selectie'
      prompt: 'Vul het linkadres in. Inclusief http://'
    image:
      tooltip: 'Voeg een plaatje toe'
      prompt: 'Voer het afbeeldingadres in. Inclusief http://'
    table:
      tooltip: 'Tabel toevoegen'
    hr:
      tooltip: 'Horizontale lijn'
    list-ol:
      tooltip: 'Voeg genummerde lijst toe'
    list-ul:
      tooltip: 'Add Bulletted List'
    undo:
      tooltip: 'Ongedaan maken'
    help:
      tooltip: 'Wat is Markdown?'
      href: 'https://guides.github.com/features/mastering-markdown/'

Running the Dummy App

Running Tests

  • npm test (Runs ember try:each to test your addon against multiple Ember versions)
  • ember test
  • ember test --server

Credits

This project was originally based on the ember-bootstrap-markdown by @ChrisHonniball, and I really like his code.

And of course thanks to all our wonderful contributors, here.

Changelog

  • 0.4.0
    • Updated ember to 4.3.0
    • Updated ember-intl to 6.0.0-beta.3 so it can be used with ember 4.3.0.
  • 0.3.0
    • Reworked to Octane syntax.
    • Update ember-cli to 3.28.4
    • Update bootstrap to bootstrap 5.1.3
    • Update ember-intl to v5.7.0
  • 0.2.0
    • Integration of ember-svg-jar
    • Removed Font Awesome from requirements and Installation
  • 0.1.1
    • Remove jQuery dependency
  • 0.1.0
    • Release v0.1.0
  • 0.1.0-beta.5
    • Update ember-intl to v3.2.6
  • 0.1.0-beta.4
    • Upgrade ember-intl to 2.30.1
  • 0.1.0-beta.3
    • Add ember-intl translations
    • Add tabindex='-1' if modal is true
  • 0.1.0-beta.2
    • Add some readme
  • 0.1.0-beta.1
    • First version