├── .babelrc.js ├── .browserslistrc ├── .circleci └── config.yml ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .stylelintignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── bower.json ├── dist ├── marky-marked.css ├── marky-marked.js ├── marky-marked.min.js └── marky-marked.umd.js ├── images ├── marky-marked-dialog.png ├── marky-marked-fullscreen.png └── marky-marked.png ├── index.html ├── karma.conf.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── rollup.config.base.js ├── rollup.config.min.js ├── rollup.config.test.js ├── rollup.config.umd.js ├── src ├── Marky.js ├── Store.js ├── elements │ ├── Button.js │ ├── Dialog.js │ ├── Element.js │ ├── HeadingDialog.js │ ├── HeadingItem.js │ ├── Icon.js │ ├── ImageDialog.js │ ├── LinkDialog.js │ └── Separator.js ├── index.js ├── initializer.js └── utils │ ├── markdownHandlers.js │ └── parsers.js ├── stylelint.config.js ├── styles ├── marky-dialogs.css ├── marky-editor.css ├── marky-marked.css ├── marky-toolbar.css └── variables.css └── test ├── Marky.spec.js ├── Store.spec.js ├── buttons.spec.js ├── dialogs.spec.js ├── elements ├── Button.spec.js ├── Dialog.spec.js ├── Element.spec.js ├── HeadingDialog.spec.js ├── HeadingItem.spec.js ├── Icon.spec.js ├── ImageDialog.spec.js ├── LinkDialog.spec.js └── Separator.spec.js ├── headings.spec.js ├── initializer.spec.js ├── markymark.spec.js └── utils ├── block-handler.spec.js ├── indent-handler.spec.js ├── inline-handler.spec.js ├── insert-handler.spec.js ├── list-handler.spec.js └── parsers.spec.js /.babelrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "modules": false 7 | } 8 | ] 9 | ], 10 | "plugins": [ "transform-object-rest-spread", "external-helpers", "array-includes" ] 11 | } 12 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | defaults -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | jobs: 3 | test: 4 | docker: 5 | - image: circleci/node:8-browsers 6 | steps: 7 | - checkout 8 | - run: node -v 9 | - run: npm -v 10 | - run: 11 | name: Install dependencies 12 | command: npm install 13 | - run: 14 | name: Run unit tests 15 | command: npm test 16 | - run: 17 | name: Generate code coverage 18 | command: cat ./coverage/**/lcov.info | ./node_modules/codecov/bin/codecov 19 | - store_artifacts: 20 | path: coverage 21 | prefix: coverage 22 | - store_test_results: 23 | path: tmp/karma-results 24 | deploy: 25 | docker: 26 | - image: circleci/node:8 27 | steps: 28 | - checkout 29 | - run: 30 | name: Set git configs 31 | command: | 32 | git config credential.helper 'cache --timeout=120' 33 | git config user.email "patrick.fricano@icloud.com" 34 | git config user.name "CircleCi" 35 | - run: 36 | name: Checkout gh-pages branch 37 | command: | 38 | git fetch 39 | git checkout gh-pages 40 | git rebase master 41 | - run: 42 | name: Push to gh-pages branch 43 | command: git push origin gh-pages 44 | workflows: 45 | version: 2 46 | test_and_deploy: 47 | jobs: 48 | - test 49 | - deploy: 50 | requires: 51 | - test 52 | filters: 53 | branches: 54 | only: master -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | vendor 3 | node_modules -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: 'babel-eslint', 3 | extends: ['airbnb-base'], 4 | env: { 5 | browser: true 6 | }, 7 | plugins: ['import'], 8 | rules: { 9 | 'import/no-extraneous-dependencies': [ 10 | 'error', 11 | { 12 | devDependencies: ['**/*.spec.js', '**/*conf*.js'] 13 | } 14 | ] 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | npm-debug.log 4 | yarn-error.log 5 | coverage 6 | .vscode 7 | tmp 8 | vendor -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | README.md 2 | index.html -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | #### 4.0 2 | 3 | More breaking changes! Yay! This update actually includes some big changes. 4 | 5 | The biggest change is now the library exports just a function, `markymark`. Rather than `marky.mark()` you will just use `markymark()` to initialize it. 6 | 7 | In moving further away from the DOM for the public API, I've incorporated [contra/emitter](https://github.com/bevacqua/contra#λemitterthing-options) so that now the Marky object itself emits the public events ('markychange', 'markyupdate', etc.). No more having to register CustomEvents to be able to interface with the events. 8 | 9 | This package also now uses Rollup for the build. This resulted in significantly a smaller library, even with the addition of the emitter. About 20KB was shaved off the minified file. 10 | 11 | Tests are now written with Tape instead of Mocha/Chai, as well. 12 | 13 | #### 3.0 14 | 15 | Another breaking change was introduced. Instead of writing the html to a hidden input in the DOM it is now written to the marky object in the `html` prop. Similarly, the current state's markdown is written to the `markdown` prop. 16 | 17 | Finally, fullscreen and the `fullscreen-toggled` class have been renamed. The concept of "fullscreen" is now called "expanded view" since it may only fill its container depending on your styles and layout. The class is now `marky-expanded`. 18 | 19 | #### 2.0 20 | 21 | Not much has really changed, but there is a breaking change in that now `mark` should have elements directly passed in, rather than tag names. To migrate you really only need to switch your function call from `mark('funky-bunch')` to `mark(document.getElementsByTagName('funcky-bunch'))`. 22 | 23 | It accepts an array of elemtents, HTMLCollection, and NodeList. You cannot pass in an element directly; even if it's one element just wrap it in an array. 24 | 25 | `marky-mark` elements still are initialized by default. 26 | 27 | This change should make it a little more flexible and a little easier to work with in frameworks like React and Vue so you can now just pass in refs within your components. 28 | 29 | #### v1.5 30 | 31 | - Under the hood: Switched to standardjs 32 | - New `destroy()` method for removing editors from the DOM if need be. 33 | 34 | #### v1.4 35 | 36 | State management is a lot smarter now. Instead of the previous behavior where a markyupdate event would fire on every input event (meaning, every time a character is added or removed), and undo/redos would just go back or forward 5 state, updates are now fired on the following events: 37 | 38 | - period input 39 | - comma input 40 | - question mark input 41 | - exclamation point input 42 | - colon input 43 | - semi-colon input 44 | - back slash input 45 | - forward slash input 46 | - ampersand input 47 | - vertical pipe input 48 | - space input (but not a space directly following any of the above punctuation or another space) 49 | - Deletion of a bulk selection (using the delete key) 50 | - Any toolbar button is used (aside from undo, redo, and fullscreen) 51 | - The editor's value is committed by uthe user, meaning focus has moved off of the editor 52 | - Lastly, if there's ever more than a one-second pause 53 | 54 | This essentially makes all toolbar functionality push an update, but also any word input and deliberate deletion of more than one character. 55 | 56 | The main reasoning behind this change is to make the editor more performant. Rather than constantly writing state with every little change Marky Marked can be a bit more selective. I haven't run any benchmarks but by watching stats on my computer I noticed a drastic reduction in processor power needing to be used. 57 | 58 | The other added benefit is that now we have a lot more state that can be written, since we're writing state a lot less frequently. 59 | 60 | #### v1.3.5 61 | 62 | - Mostly clean up. Only potentially breaking change should be that I've changed the super generic id that's added to most elements from `editor-0` for instance to `marky-mark-0` (as an id for the container element, as a class for everything else). 63 | 64 | #### v1.3.4 65 | 66 | - Resizing is now turned off by default for the textarea in the stylesheet. This can be overridden, of course. 67 | 68 | #### v1.3 69 | 70 | - Fullscreen. Hitting the new fullscreen button in the toolbar will toggle `fullscreen-toggled` classes on the container as well as the editor. With this you can make the Marky Marked editor fill the entire browser window. Of course, the included stylesheet already handles it all for you, if you're using it. 71 | - Link and image insertion now behaves a bit differently. If any text is selected in the editor this text will be autopopulated into the alt text or display text input in the dialog. Additionally, instead of always inserting the Markdown snippet after the selected text, Marky Marked will now replace the selected text with the snippet. Which makes more sense when allowing for the autopopulation. 72 | 73 | #### v1.2 74 | 75 | - Headings selection is no longer done in a `