├── .editorconfig ├── .ember-cli ├── .eslintignore ├── .eslintrc.js ├── .github └── workflows │ └── ci.yml ├── .gitignore ├── .npmignore ├── .prettierignore ├── .prettierrc.js ├── .template-lintrc.js ├── .travis.yml ├── .watchmanconfig ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── addon ├── components │ ├── markdown-editor.hbs │ └── markdown-editor.js └── styles │ └── ember-cli-markdown-editor.css ├── app └── components │ └── markdown-editor.js ├── config ├── ember-try.js └── environment.js ├── ember-cli-build.js ├── index.js ├── package.json ├── svg ├── bold.svg ├── chain.svg ├── check.svg ├── close.svg ├── header.svg ├── image.svg ├── italic.svg ├── list-ol.svg ├── list-ul.svg ├── minus.svg ├── question-circle.svg ├── quote-right.svg ├── rotate-left.svg └── table.svg ├── testem.js ├── tests ├── dummy │ ├── app │ │ ├── app.js │ │ ├── components │ │ │ └── .gitkeep │ │ ├── controllers │ │ │ ├── .gitkeep │ │ │ └── application.js │ │ ├── helpers │ │ │ ├── .gitkeep │ │ │ └── format-markdown.js │ │ ├── index.html │ │ ├── models │ │ │ └── .gitkeep │ │ ├── router.js │ │ ├── routes │ │ │ ├── .gitkeep │ │ │ └── application.js │ │ ├── styles │ │ │ └── app.css │ │ └── templates │ │ │ └── application.hbs │ ├── config │ │ ├── ember-cli-update.json │ │ ├── environment.js │ │ ├── optional-features.json │ │ └── targets.js │ └── public │ │ └── robots.txt ├── helpers │ └── .gitkeep ├── index.html ├── integration │ └── .gitkeep ├── test-helper.js └── unit │ └── .gitkeep └── translations └── en-us.yaml /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | indent_style = space 13 | indent_size = 2 14 | 15 | [*.hbs] 16 | insert_final_newline = false 17 | 18 | [*.{diff,md}] 19 | trim_trailing_whitespace = false 20 | -------------------------------------------------------------------------------- /.ember-cli: -------------------------------------------------------------------------------- 1 | { 2 | /** 3 | Ember CLI sends analytics information by default. The data is completely 4 | anonymous, but there are times when you might want to disable this behavior. 5 | 6 | Setting `disableAnalytics` to true will prevent any data from being sent. 7 | */ 8 | "disableAnalytics": false 9 | } 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | # unconventional js 2 | /blueprints/*/files/ 3 | /vendor/ 4 | 5 | # compiled output 6 | /dist/ 7 | /tmp/ 8 | 9 | # dependencies 10 | /bower_components/ 11 | /node_modules/ 12 | 13 | # misc 14 | /coverage/ 15 | !.* 16 | .*/ 17 | .eslintcache 18 | 19 | # ember-try 20 | /.node_modules.ember-try/ 21 | /bower.json.ember-try 22 | /package.json.ember-try 23 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'babel-eslint', 6 | parserOptions: { 7 | ecmaVersion: 2018, 8 | sourceType: 'module', 9 | ecmaFeatures: { 10 | legacyDecorators: true, 11 | }, 12 | }, 13 | plugins: ['ember'], 14 | extends: [ 15 | 'eslint:recommended', 16 | 'plugin:ember/recommended', 17 | 'plugin:prettier/recommended', 18 | ], 19 | env: { 20 | browser: true, 21 | }, 22 | rules: {}, 23 | overrides: [ 24 | // node files 25 | { 26 | files: [ 27 | './.eslintrc.js', 28 | './.prettierrc.js', 29 | './.template-lintrc.js', 30 | './ember-cli-build.js', 31 | './index.js', 32 | './testem.js', 33 | './blueprints/*/index.js', 34 | './config/**/*.js', 35 | './tests/dummy/config/**/*.js', 36 | ], 37 | parserOptions: { 38 | sourceType: 'script', 39 | }, 40 | env: { 41 | browser: false, 42 | node: true, 43 | }, 44 | plugins: ['node'], 45 | extends: ['plugin:node/recommended'], 46 | }, 47 | { 48 | // Test files: 49 | files: ['tests/**/*-test.{js,ts}'], 50 | extends: ['plugin:qunit/recommended'], 51 | }, 52 | ], 53 | }; 54 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions 3 | 4 | name: Node.js CI 5 | 6 | on: 7 | push: 8 | branches: 9 | - master 10 | pull_request: {} 11 | 12 | concurrency: 13 | group: ci-${{ github.head_ref || github.ref }} 14 | cancel-in-progress: true 15 | 16 | jobs: 17 | test: 18 | name: "Tests" 19 | runs-on: ubuntu-latest 20 | 21 | steps: 22 | - uses: actions/checkout@v3 23 | - name: Install Node 24 | uses: actions/setup-node@v3 25 | with: 26 | node-version: 12.x 27 | # cache: npm 28 | - name: Install dependencies 29 | run: | 30 | if [ -e yarn.lock ]; then 31 | yarn install --frozen-lockfile 32 | elif [ -e package-lock.json ]; then 33 | npm ci 34 | else 35 | npm i 36 | fi 37 | - name: Lint 38 | run: npm run lint 39 | - name: Run Tests 40 | run: npm run test:ember 41 | 42 | floating: 43 | name: "Floating Dependencies" 44 | runs-on: ubuntu-latest 45 | 46 | steps: 47 | - uses: actions/checkout@v3 48 | - uses: actions/setup-node@v3 49 | with: 50 | node-version: 12.x 51 | # cache: npm 52 | - name: Install Dependencies 53 | run: npm install --no-shrinkwrap 54 | - name: Run Tests 55 | run: npm run test:ember 56 | 57 | try-scenarios: 58 | name: ${{ matrix.try-scenario }} 59 | runs-on: ubuntu-latest 60 | needs: "test" 61 | 62 | strategy: 63 | fail-fast: false 64 | matrix: 65 | try-scenario: 66 | - ember-lts-3.24 67 | - ember-lts-3.28 68 | - ember-release 69 | - ember-beta 70 | - ember-canary 71 | - ember-classic 72 | - embroider-safe 73 | - embroider-optimized 74 | 75 | steps: 76 | - uses: actions/checkout@v3 77 | - name: Install Node 78 | uses: actions/setup-node@v3 79 | with: 80 | node-version: 12.x 81 | # cache: npm 82 | - name: Install dependencies 83 | run: | 84 | if [ -e yarn.lock ]; then 85 | yarn install --frozen-lockfile 86 | elif [ -e package-lock.json ]; then 87 | npm ci 88 | else 89 | npm i 90 | fi 91 | - name: Run Tests 92 | run: ./node_modules/.bin/ember try:one ${{ matrix.try-scenario }} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist/ 5 | /tmp/ 6 | 7 | # dependencies 8 | /bower_components/ 9 | /node_modules/ 10 | 11 | # misc 12 | /.env* 13 | /.pnp* 14 | /.sass-cache 15 | /.eslintcache 16 | /connect.lock 17 | /coverage/ 18 | /libpeerconnection.log 19 | /npm-debug.log* 20 | /testem.log 21 | /yarn-error.log 22 | /package-lock.json 23 | /yarn.lock 24 | 25 | # ember-try 26 | /.node_modules.ember-try/ 27 | /bower.json.ember-try 28 | /package.json.ember-try 29 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # compiled output 2 | /dist/ 3 | /tmp/ 4 | 5 | # dependencies 6 | /bower_components/ 7 | 8 | # misc 9 | /.bowerrc 10 | /.editorconfig 11 | /.ember-cli 12 | /.env* 13 | /.eslintcache 14 | /.eslintignore 15 | /.eslintrc.js 16 | /.git/ 17 | /.gitignore 18 | /.prettierignore 19 | /.prettierrc.js 20 | /.template-lintrc.js 21 | /.travis.yml 22 | /.watchmanconfig 23 | /bower.json 24 | /config/ember-try.js 25 | /CONTRIBUTING.md 26 | /ember-cli-build.js 27 | /testem.js 28 | /tests/ 29 | /yarn-error.log 30 | /yarn.lock 31 | .gitkeep 32 | 33 | # ember-try 34 | /.node_modules.ember-try/ 35 | /bower.json.ember-try 36 | /package.json.ember-try 37 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # unconventional js 2 | /blueprints/*/files/ 3 | /vendor/ 4 | 5 | # compiled output 6 | /dist/ 7 | /tmp/ 8 | 9 | # dependencies 10 | /bower_components/ 11 | /node_modules/ 12 | 13 | # misc 14 | /coverage/ 15 | !.* 16 | .eslintcache 17 | 18 | # ember-try 19 | /.node_modules.ember-try/ 20 | /bower.json.ember-try 21 | /package.json.ember-try 22 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = { 4 | singleQuote: true, 5 | }; 6 | -------------------------------------------------------------------------------- /.template-lintrc.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = { 4 | extends: 'recommended', 5 | rules: { 6 | 'no-forbidden-elements': false, 7 | }, 8 | }; 9 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | --- 2 | language: node_js 3 | node_js: 4 | # we recommend testing addons with the same minimum supported node version as Ember CLI 5 | # so that your addon works for all apps 6 | '12' 7 | dist: xenial 8 | 9 | addons: 10 | chrome: stable 11 | 12 | cache: 13 | directories: 14 | - $HOME/.npm 15 | 16 | env: 17 | global: 18 | # See https://git.io/vdao3 for details. 19 | - JOBS=1 20 | 21 | branches: 22 | only: 23 | - master 24 | # npm version tags 25 | - /^v\d+\.\d+\.\d+/ 26 | 27 | jobs: 28 | fast_finish: true 29 | allow_failures: 30 | - env: EMBER_TRY_SCENARIO=ember-canary 31 | - env: EMBER_TRY_SCENARIO=ember-beta 32 | 33 | include: 34 | # runs linting and tests with current locked deps 35 | - stage: 'Tests' 36 | name: 'Tests' 37 | script: 38 | - npm run lint 39 | - npm run test:ember 40 | 41 | - stage: 'Additional Tests' 42 | name: 'Floating Dependencies' 43 | install: 44 | - npm install --no-package-lock 45 | script: 46 | - npm run test:ember 47 | 48 | # we recommend new addons test the current and previous LTS 49 | # as well as latest stable release (bonus points to beta/canary) 50 | - env: EMBER_TRY_SCENARIO=ember-lts-3.24 51 | - env: EMBER_TRY_SCENARIO=ember-lts-3.28 52 | - env: EMBER_TRY_SCENARIO=ember-release 53 | - env: EMBER_TRY_SCENARIO=ember-beta 54 | - env: EMBER_TRY_SCENARIO=ember-canary 55 | - env: EMBER_TRY_SCENARIO=ember-classic 56 | - env: EMBER_TRY_SCENARIO=embroider-safe 57 | - env: EMBER_TRY_SCENARIO=embroider-optimized 58 | 59 | script: 60 | - node_modules/.bin/ember try:one $EMBER_TRY_SCENARIO 61 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | { 2 | "ignore_dirs": ["tmp", "dist"] 3 | } 4 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # How To Contribute 2 | 3 | ## Installation 4 | 5 | - `git clone ` 6 | - `cd ember-cli-markdown-editor` 7 | - `npm install` 8 | 9 | ## Linting 10 | 11 | - `npm run lint` 12 | - `npm run lint:fix` 13 | 14 | ## Running tests 15 | 16 | - `ember test` – Runs the test suite on the current Ember version 17 | - `ember test --server` – Runs the test suite in "watch mode" 18 | - `ember try:each` – Runs the test suite against multiple Ember versions 19 | 20 | ## Running the dummy application 21 | 22 | - `ember serve` 23 | - Visit the dummy application at [http://localhost:4200](http://localhost:4200). 24 | 25 | For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/). 26 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ember-cli-markdown-editor 2 | 3 | markdown-editor is a markdown enhanced textarea with native browser spellchecking 4 | 5 | Features: 6 | 7 | - Bootstrap 5 Styling by default 8 | - Font Awesome SVG Icons 9 | - Supports all textarea Attributes 10 | - Does not depend on a specific markdown addon to generate html formatted markup 11 | - Native browser spellchecking 12 | - Disable Buttons via an optional btns array 13 | - Undo Button 14 | - Provide localization via [ember-intl](https://github.com/ember-intl/ember-intl) 15 | - Compact mode 16 | 17 | ## Requirements 18 | 19 | - ember-cli 3.28.4 or higher 20 | - Bootstrap 5 CSS 21 | 22 | ## Installation 23 | 24 | - `npm install bootstrap` Or your favorite Bootstrap 5 addon 25 | - `ember install ember-cli-markdown-editor` This addon 26 | 27 | ## Usage 28 | 29 | First make sure your route file app/routes/application.js sets the default language for the intl service: 30 | 31 | ``` 32 | import Route from '@ember/routing/route'; 33 | import { inject as service } from '@ember/service'; 34 | 35 | export default class ApplicationRoute extends Route { 36 | @service intl; 37 | 38 | async beforeModel() { 39 | super.init(...arguments); 40 | return this.intl.setLocale(['en-us']); 41 | } 42 | } 43 | ``` 44 | 45 | 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. 46 | 47 | Minimal 48 | 49 | ``` 50 | 51 | ``` 52 | 53 | Common 54 | 55 | ``` 56 | 62 | ``` 63 | 64 | Compact mode 65 | 66 | ``` 67 | 74 | ``` 75 | 76 | All Buttons 77 | 78 | ``` 79 | 86 | ``` 87 | 88 | Some Buttons 89 | 90 | ``` 91 | 98 | ``` 99 | 100 | ## Localization 101 | 102 | If you include in your project root a folder called `translations` you can add transition files like this per locale: 103 | 104 | `translations/nl-nl.yaml` 105 | 106 | ```yaml 107 | markdown-editor: 108 | modal: 109 | selectionText: 'Maak eerst een selectie' 110 | confirm: 'Bevestigen' 111 | cancel: 'Annuleren' 112 | formats: 113 | heading: 114 | tooltip: 'Hoofdstuk toevoegen' 115 | bold: 116 | tooltip: 'Maak de selectie vet' 117 | italic: 118 | tooltip: 'Maak de selectie schuingedrukt' 119 | quote: 120 | tooltip: 'Voeg geciteerde tekst toe' 121 | link: 122 | tooltip: 'Maak een link van de selectie' 123 | prompt: 'Vul het linkadres in. Inclusief http://' 124 | image: 125 | tooltip: 'Voeg een plaatje toe' 126 | prompt: 'Voer het afbeeldingadres in. Inclusief http://' 127 | table: 128 | tooltip: 'Tabel toevoegen' 129 | hr: 130 | tooltip: 'Horizontale lijn' 131 | list-ol: 132 | tooltip: 'Voeg genummerde lijst toe' 133 | list-ul: 134 | tooltip: 'Add Bulletted List' 135 | undo: 136 | tooltip: 'Ongedaan maken' 137 | help: 138 | tooltip: 'Wat is Markdown?' 139 | href: 'https://guides.github.com/features/mastering-markdown/' 140 | ``` 141 | 142 | ## Running the Dummy App 143 | 144 | - `ember serve` 145 | - Visit your app at [http://localhost:4200](http://localhost:4200). 146 | 147 | ## Running Tests 148 | 149 | - `npm test` (Runs `ember try:each` to test your addon against multiple Ember versions) 150 | - `ember test` 151 | - `ember test --server` 152 | 153 | ## Credits 154 | 155 | This project was originally based on the [ember-bootstrap-markdown](https://github.com/ChrisHonniball/ember-bootstrap-markdown) by [@ChrisHonniball](https://github.com/ChrisHonniball), and I really like his code. 156 | 157 | And of course thanks to all our wonderful contributors, [here](https://github.com/martinic/ember-cli-markdown-editor/graphs/contributors). 158 | 159 | ## Changelog 160 | 161 | - **0.4.0** 162 | - Updated ember to 4.3.0 163 | - Updated ember-intl to 6.0.0-beta.3 so it can be used with ember 4.3.0. 164 | - **0.3.0** 165 | - Reworked to Octane syntax. 166 | - Update ember-cli to 3.28.4 167 | - Update bootstrap to bootstrap 5.1.3 168 | - Update ember-intl to v5.7.0 169 | - **0.2.0** 170 | - Integration of ember-svg-jar 171 | - Removed Font Awesome from requirements and Installation 172 | - **0.1.1** 173 | - Remove jQuery dependency 174 | - **0.1.0** 175 | - Release v0.1.0 176 | - **0.1.0-beta.5** 177 | - Update ember-intl to v3.2.6 178 | - **0.1.0-beta.4** 179 | - Upgrade ember-intl to 2.30.1 180 | - **0.1.0-beta.3** 181 | - Add [ember-intl](https://github.com/ember-intl/ember-intl) translations 182 | - Add tabindex='-1' if modal is true 183 | - **0.1.0-beta.2** 184 | - Add some readme 185 | - **0.1.0-beta.1** 186 | - First version 187 | -------------------------------------------------------------------------------- /addon/components/markdown-editor.hbs: -------------------------------------------------------------------------------- 1 | {{#unless this.intl.primaryLocale}}{{/unless}} 2 |
3 |
4 | {{#each this.toolbarBtns as |btnGroup|}} 5 |
6 | {{#each btnGroup as |btn|}} 7 | {{#if btn.defaultType}} 8 | 27 | {{/if}} 28 | {{#if btn.undoType}} 29 | 39 | {{/if}} 40 | {{#if btn.helpType}} 41 | 54 | {{svg-jar 55 | btn.iconSvg 56 | size='1' 57 | class='markdown-button' 58 | fill='#337ab7' 59 | }} 60 | 61 | {{/if}} 62 | {{/each}} 63 |
64 | {{/each}} 65 |
66 | 67 |
68 |