├── .babelrc ├── .eslintrc.json ├── .gitignore ├── .npmignore ├── .prettierignore ├── .prettierrc ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── circle.yml ├── demo ├── ClickCounterAtom.js ├── ImageCard.js ├── index.html └── index.js ├── karma.conf.js ├── package-lock.json ├── package.json ├── rollup.config.js ├── src ├── components │ ├── AttributeSelect.js │ ├── Container.js │ ├── Context.js │ ├── Editor.js │ ├── LinkButton.js │ ├── MarkupButton.js │ ├── SectionButton.js │ ├── SectionSelect.js │ └── Toolbar.js ├── index.js └── utils │ ├── classToAtom.js │ ├── classToCard.js │ ├── getActiveAttribute.js │ ├── mobiledoc.js │ ├── react.js │ └── titleCase.js ├── test ├── build │ └── index.js ├── components │ ├── AttributeSelectTest.js │ ├── ContainerTest.js │ ├── EditorTest.js │ ├── LinkButtonTest.js │ ├── MarkupButtonTest.js │ ├── SectionButtonTest.js │ ├── SectionSelectTest.js │ └── ToolbarTest.js ├── setup.js └── utils │ ├── classToAtomTest.js │ └── classToCardTest.js └── webpack.demo.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-react", 4 | "@babel/preset-env" 5 | ], 6 | "plugins": [ 7 | "@babel/plugin-transform-runtime" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["eslint:recommended", "plugin:prettier/recommended"], 3 | "env": { 4 | "es6": true, 5 | "browser": true, 6 | "node": true, 7 | "mocha": true 8 | }, 9 | "parser": "@babel/eslint-parser", 10 | "parserOptions": { 11 | "sourceType": "module", 12 | "ecmaVersion": 2018, 13 | "ecmaFeatures": { 14 | "jsx": true 15 | } 16 | }, 17 | "settings": { 18 | "react": { "version": "detect" } 19 | }, 20 | "plugins": ["react"], 21 | "rules": { 22 | "eqeqeq": 2, 23 | "no-const-assign": 2, 24 | "prefer-const": 2, 25 | "array-bracket-spacing": [1, "never"], 26 | "no-console": 1, 27 | "no-unused-vars": 1, 28 | "no-trailing-spaces": 1, 29 | "padded-blocks": [1, "never"], 30 | "react/jsx-uses-react": 2, 31 | "react/jsx-uses-vars": 2, 32 | "react/jsx-no-undef": 2, 33 | "react/no-did-mount-set-state": 2, 34 | "react/no-did-update-set-state": 2, 35 | "react/no-direct-mutation-state": 2, 36 | "react/no-unknown-property": 2, 37 | "react/sort-comp": [ 38 | 1, 39 | { 40 | "order": ["static-methods", "lifecycle", "render", "everything-else"] 41 | } 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | npm-debug.log 2 | node_modules/ 3 | .DS_Store 4 | dist/ 5 | demo-dist/ -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | demo/ 2 | src/ 3 | test/ 4 | demo-dist/ -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | node_modules/ -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true 3 | } -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, 8 | body size, disability, ethnicity, gender identity and expression, level of 9 | experience, nationality, personal appearance, race, religion, or sexual 10 | identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an 52 | appointed representative at an online or offline event. Representation of a 53 | project may be further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at 59 | [opensource@upworthy.com](mailto:opensource@upworthy.com). All complaints will 60 | be reviewed and investigated and will result in a response that is deemed 61 | necessary and appropriate to the circumstances. The project team is obligated 62 | to maintain confidentiality with regard to the reporter of an incident. 63 | Further details of specific enforcement policies may be posted separately. 64 | 65 | Project maintainers who do not follow or enforce the Code of Conduct in good 66 | faith may face temporary or permanent repercussions as determined by other 67 | members of the project's leadership. 68 | 69 | ## Attribution 70 | 71 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 72 | version 1.4, available at 73 | [http://contributor-covenant.org/version/1/4][version] 74 | 75 | [homepage]: http://contributor-covenant.org 76 | [version]: http://contributor-covenant.org/version/1/4/ 77 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | We ❤️ pull requests, and welcome them from all people regardless of age, 2 | nationality, gender, orientation, ethnicity, race, religion, body size, or 3 | level of experience. By participating in this project, you agree to abide by 4 | our [code of conduct][conduct]. 5 | 6 | ### Reporting a bug 7 | 8 | Bug reports are always appreciated! Here are some tips to submitting a helpful 9 | bug report: 10 | 11 | - Check the existing [issues][issues] first. If your bug has already been 12 | submitted, we still appreciate additional clarifying details. 13 | - Provide a title and clear description, with as much supporting detail as 14 | possible. Include the observed behavior and how it differs from the behavior 15 | you expected. 16 | - Include specific steps to reproduce the bug. 17 | - Better yet, provide a repo containing an isolated test case. 18 | - Screenshots and animated GIFs to demonstrate complex workflows are awesome! 19 | 20 | ### Contributing code 21 | 22 | Fork and clone the repo. Make sure the tests pass before proceeding. Next, add 23 | a failing test. Finally, make it pass! 24 | 25 | Push to your repo and open a pull request. We'll try to review it in a timely 26 | fashion, although we're a small team and we thank you for your patience if 27 | we're unable to respond immediately. 28 | 29 | Here are some tips to increase the chances we'll accept your patch 30 | with minimal changes: 31 | 32 | - Include tests. 33 | - Include documentation for public-facing methods. 34 | - Lint your changes against our house style, with either `npm test` or `npm 35 | run lint`. 36 | - Write a good commit message with a brief, clear summary followed by a more 37 | detailed explanation, if necessary. 38 | - Don't bump the version. 39 | 40 | ### Getting help 41 | 42 | If you have technical questions, please [open an 43 | issue](http://github.com/upworthy/react-mobiledoc-editor/issues). If you have 44 | general questions about our policies, please contact us at 45 | [opensource@upworthy.com](mailto:opensource@upworthy.com). 46 | 47 | [issues]: https://github.com/upworthy/react-mobiledoc-editor/issues 48 | [conduct]: ./CODE_OF_CONDUCT.md 49 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | ### BSD 3 Clause License 2 | 3 | Copyright (c) 2016, Cloud Tiger Media, d.b.a. Upworthy. All rights reserved. 4 | 5 | 6 | Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 7 | 8 | 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 9 | 10 | 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. 11 | 12 | 3. Neither the name of the Cloud Tiger Media, d.b.a Upworthy, nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. 13 | 14 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-mobiledoc-editor 2 | 3 | ![Build status](https://circleci.com/gh/joshfrench/react-mobiledoc-editor.svg?style=svg) 4 | 5 | A toolkit for Mobiledoc editors written using React and 6 | [Mobiledoc Kit](https://github.com/bustlelabs/mobiledoc-kit). 7 | 8 | `react-mobiledoc-editor` supports the creation of 9 | [Mobiledoc Cards](https://github.com/bustlelabs/mobiledoc-kit/blob/master/CARDS.md) 10 | as React components. For existing React projects, this makes it possible to 11 | build React components once and share them between Mobiledoc and other contexts. 12 | 13 | ## Installation 14 | 15 | ```sh 16 | npm install react-mobiledoc-editor 17 | ``` 18 | 19 | **Please note:** MobiledocKit and React are specified as peer dependencies, 20 | and **will not** be automatically installed. If you haven't already, please 21 | add `mobiledoc-kit`, `react`, and `react-dom` to your `package.json`. 22 | 23 | ## Usage 24 | 25 | This package contains a number of React components suitable for building 26 | your own editor UI. 27 | 28 | * [`Container`](#container) 29 | * [`Editor`](#editor) 30 | * [`Toolbar`](#toolbar) 31 | * [`SectionButton`](#sectionbutton) 32 | * [`SectionSelect`](#sectionselect) 33 | * [`MarkupButton`](#markupbutton) 34 | * [`LinkButton`](#linkbutton) 35 | 36 | The most basic usage with standard toolbar and empty editor is: 37 | 38 | ```jsx 39 | 40 | 41 | 42 | 43 | ``` 44 | 45 | Read on for how to provide more typical configurations to each component. 46 | 47 | #### `` 48 | 49 | This is the top-level component, which _must_ be present and wrap the rest 50 | of your editor UI. It accepts the configuration for your mobiledoc editor 51 | instance and is responsible for establishing the [React 52 | context](https://facebook.github.io/react/docs/context.html) which enables 53 | the other editor components to work together. 54 | 55 | Please note that by itself, `Container` only renders an empty root-level 56 | component. At a minimum, you'll need to include an `Editor` component inside 57 | it. In addition to the Mobiledoc-specific properties listed below, any known 58 | React props (like `className`) will be passed to the root-level component. 59 | 60 | The `Container` component accepts these Mobiledoc-specific props: 61 | 62 | - `mobiledoc`: A Mobiledoc to be edited. 63 | - `cards`: An array of available cards for use by the editor. Jump to the 64 | section on [Card-based components](#component-based-cards) for more detail 65 | on how to create cards as React components. 66 | - `atoms`: An array of available atoms for use by the editor. 67 | - `spellcheck`: Boolean. 68 | - `autofocus`: Boolean. 69 | - `placeholder`: A string to use as the placeholder text when the mobiledoc 70 | is blank. 71 | - `options`: A hash of additional options that will be passed through to the 72 | Mobiledoc editor constructor. 73 | - `serializeVersion`: A string representing the mobiledoc version to serialize 74 | to when firing the `onChange` action. Defaults to `0.3.1`. 75 | - `onChange`: A callback that will fire whenever the underlying document 76 | changes. Use this to persist and/or serialize your mobiledoc to another 77 | format as it's being edited. Will be called with the serialized mobiledoc. 78 | - `willCreateEditor`: A callback that fires when the Mobiledoc editor instance 79 | is about to be created. Takes no arguments. 80 | - `didCreateEditor`: A callback that fires once the Mobiledoc editor instance 81 | has been created. Will be called with the editor instance and may be used 82 | to configure it further. 83 | 84 | 85 | #### `` 86 | 87 | The `Editor` component is the actual editor interface. In its most basic form 88 | it renders an empty editor with no toolbar. It accepts no Mobiledoc-specific 89 | props, but will respect any known React props like `className` or `onDrop`. 90 | (See the [How To](https://github.com/upworthy/react-mobiledoc-editor/wiki/How-To#drag--drop) 91 | page in the wiki for more information on drag & drop.) 92 | 93 | #### `` 94 | 95 | Creates a toolbar with a basic set of editing controls. While this may be 96 | suitable for very limited implementations, the expectation is that most people 97 | will prefer to customize the toolbar and this component is primarily presented 98 | as a reference implementation. Please see the 99 | [How To](https://github.com/upworthy/react-mobiledoc-editor/wiki/How-To#customizing-the-toolbar) 100 | page in the wiki. 101 | 102 | #### `` 103 | 104 | Accepts an attribute name and an array of possible attribute values, in 105 | addition to any known React props such as `className`. When changed, sets the 106 | attribute on the section under the editor cursor to the selected value. 107 | 108 | If the attribute under the editor cursor matches one of the supplied 109 | attribute values, the `` component's value will be set to match. When changed, toggles 160 | the selected tag on the section under the editor cursor. 161 | 162 | ```jsx 163 | 164 | ``` 165 | 166 | (Does not support customization of the child `