draftail - npm Package Compare versions
Comparing version 0.15.0 to 0.16.0
@@ -7,2 +7,20 @@ # Changelog | ||
| ## [[v0.16.0]](https://github.com/springload/draftail/releases/tag/v0.16.0) | ||
| ### Changed | ||
| * Remove toolbar z-index when the editor is not focused, to reduce chances of interferring with other components. | ||
| * Adjust toolbar button alignment for text-only buttons. | ||
| * Replace `className` prop for blocks by dynamically adding a class based on block type. | ||
| * Update to `draftjs-filters@0.7.0` to preserve list items in Word. | ||
| * Update `draft-js` peerDependency version to 0.10.5. | ||
| ### Fixed | ||
| * Fix Markdown shortcuts for blocks removing styles and entities at the end of the block text. | ||
| ### Removed | ||
| * Remove React 15 from peerDependencies. | ||
| ## [[v0.15.0]](https://github.com/springload/draftail/releases/tag/v0.15.0) | ||
@@ -9,0 +27,0 @@ |
| { | ||
| "name": "draftail", | ||
| "version": "0.15.0", | ||
| "version": "0.16.0", | ||
| "description": "📝🍸 A configurable rich text editor based on Draft.js, built for Wagtail", | ||
@@ -104,3 +104,3 @@ "author": "Springload", | ||
| "dependencies": { | ||
| "draftjs-filters": "^0.6.1" | ||
| "draftjs-filters": "^0.7.0" | ||
| }, | ||
@@ -120,3 +120,3 @@ "devDependencies": { | ||
| "dotenv": "^4.0.0", | ||
| "draft-js": "^0.10.4", | ||
| "draft-js": "0.10.5", | ||
| "enzyme": "^3.2.0", | ||
@@ -149,6 +149,6 @@ "enzyme-adapter-react-16": "^1.1.0", | ||
| "peerDependencies": { | ||
| "draft-js": "^0.10.4", | ||
| "draft-js": "^0.10.5", | ||
| "prop-types": "^15.5.0", | ||
| "react": "^15.5.0 || ^16.0.0", | ||
| "react-dom": "^15.5.0 || ^16.0.0" | ||
| "react": "^16.0.0", | ||
| "react-dom": "^16.0.0" | ||
| }, | ||
@@ -155,0 +155,0 @@ "scripts": { |
@@ -7,3 +7,3 @@ # [Draftail](https://springload.github.io/draftail/) [](https://www.npmjs.com/package/draftail) [](https://travis-ci.org/springload/draftail) [](https://coveralls.io/github/springload/draftail) [<img src="https://cdn.rawgit.com/springload/awesome-wagtail/ac912cc661a7099813f90545adffa6bb3e75216c/logo.svg" width="104" align="right" alt="Wagtail">](https://wagtail.io/) | ||
| It’s developed alongside our Python [Draft.js exporter](https://github.com/springload/draftjs_exporter), for integration into [Wagtail](https://wagtail.io/). Check out [WagtailDraftail](https://github.com/springload/wagtaildraftail), and the [editor’s online demo](https://springload.github.io/draftail/)! | ||
| It’s developed alongside our Python [Draft.js exporter](https://github.com/springload/draftjs_exporter), for integration into [Wagtail](https://wagtail.io/). Check out the [online demo](https://springload.github.io/draftail/)! | ||
@@ -14,7 +14,7 @@ ## Features | ||
| Draftail aims for a mouse-free, keyboard-centric experience. Most formatting can be done by using common keyboard shortcuts, inspired by [Google Docs](https://support.google.com/docs/answer/179738) and [Markdown](https://en.wikipedia.org/wiki/Markdown). | ||
| Draftail aims for a mouse-free, keyboard-centric experience. Most formatting can be done by using common keyboard shortcuts, inspired by Google Docs and [Markdown](https://en.wikipedia.org/wiki/Markdown). | ||
| Here are important features worth highlighting: | ||
| * Support for [keyboard shortcuts](https://github.com/springload/draftail/tree/master/docs#keyboard-shortcuts). Lots of them! | ||
| * Support for [keyboard shortcuts](/docs/user-guide/README.md). Lots of them! | ||
| * Paste from Word. Or any other editor. | ||
@@ -30,2 +30,4 @@ * Autolists – start a line with `-` , `*` , `1.` to create a list item. | ||
| > Have a look at the [user guide](/docs/user-guide/README.md). | ||
| Draftail is meant to be used in scenarios where not all formatting should be available, and where custom formatting can be necessary. Available formats, built-in and custom, can be specificed declaratively for each editor instance. | ||
@@ -37,5 +39,6 @@ | ||
| * Inline styles: Bold, Italic, Underline, Code, Strikethrough, Mark, Keyboard, Superscript, Subscript | ||
| * Entities (things with data): Images, Embeds, Links, Documents | ||
| * And HR, BR | ||
| Draftail does not come with built-in controls for things like images and links, so you can build your own exactly as you wish. This is particularly useful when integrating with content sources, like a CMS, an API, or other tools with a fixed schema. | ||
| ### Custom formats | ||
@@ -186,4 +189,2 @@ | ||
| element: PropTypes.string, | ||
| // CSS class(es) added to the block for styling within the editor area. | ||
| className: PropTypes.string, | ||
| ``` | ||
@@ -248,28 +249,9 @@ | ||
| | ------------------------------------- | ------------- | | ||
| | Format a portion of a line | Inline styles | | ||
| | Indicate the structure of the content | Blocks | | ||
| | Enter additional data/metadata | Entities | | ||
| | Format a portion of a line | Inline styles | | ||
| #### Custom blocks | ||
| Simple blocks are very easy to create. Add a new block type to `blockTypes`, specifying which `element` and `className` to display the block as. | ||
| Here is an example, creating a "Tiny text" block: | ||
| ```jsx | ||
| blockTypes={[ | ||
| { | ||
| type: 'tiny-text', | ||
| label: 'Tiny', | ||
| element: 'div', | ||
| className: 'u-tinytext', | ||
| }, | ||
| ]} | ||
| ``` | ||
| More advanced blocks, requiring custom React components, aren't supported at the moment. If you need this, feel free to [create an issue](https://github.com/springload/draftail/issues/new). | ||
| #### Custom inline styles | ||
| Custom inline styles only require a `style` prop, defining which CSS properties to apply when the format is active. | ||
| Custom inline styles only require a `style` prop, defining which [CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference) to apply when the format is active. | ||
@@ -305,2 +287,29 @@ Here is a basic example: | ||
| #### Custom blocks | ||
| Simple blocks are very easy to create. Add a new block type to `blockTypes`, specifying which `element` to display the block as. | ||
| Here is an example, creating a "Tiny text" block: | ||
| ```jsx | ||
| blockTypes={[ | ||
| { | ||
| type: 'tiny-text', | ||
| label: 'Tiny', | ||
| element: 'div', | ||
| }, | ||
| ]} | ||
| ``` | ||
| You may also use CSS to style the block, via the `Draftail-block--tiny-text` class: | ||
| ```css | ||
| .Draftail-block--tiny-text { | ||
| font-size: 11px; | ||
| font-style: italic; | ||
| } | ||
| ``` | ||
| More advanced blocks, requiring custom React components, aren't supported at the moment. If you need this, feel free to [create an issue](https://github.com/springload/draftail/issues/new). | ||
| #### Custom entity types | ||
@@ -549,12 +558,11 @@ | ||
| | Browser | Device/OS | Version | | ||
| | ------------- | ---------- | ------- | | ||
| | Mobile Safari | iOS Phone | latest | | ||
| | Mobile Safari | iOS Tablet | latest | | ||
| | Chrome | Android | latest | | ||
| | IE | Desktop | 11 | | ||
| | Chrome | Desktop | latest | | ||
| | MS Edge | Windows | latest | | ||
| | Firefox | Desktop | latest | | ||
| | Safari | OSX | latest | | ||
| | Browser | Device/OS | Version | | ||
| | ------------- | -------------- | ------- | | ||
| | Chrome | Windows, macOS | latest | | ||
| | Firefox | Windows, macOS | latest | | ||
| | MS Edge | Windows | latest | | ||
| | Safari | macOS | latest | | ||
| | Mobile Safari | iOS Phone | latest | | ||
| | Mobile Safari | iOS Tablet | latest | | ||
| | Chrome | Android | latest | | ||
@@ -580,2 +588,4 @@ ### Polyfills | ||
| The demo site’s icons come from [IcoMoon](https://icomoon.io/). | ||
| View the full list of [contributors](https://github.com/springload/draftail/graphs/contributors). [MIT](LICENSE) licensed. Website content available as [CC0](https://creativecommons.org/publicdomain/zero/1.0/). |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by1.75%
583
Worsened metrics
- Total package byte prevSize
- decreased by-0.72%
213407
- Lines of code
- decreased by-1.32%
3592
Dependency changes
+ Addeddraftjs-filters@0.7.0(transitive)
- Removeddraftjs-filters@0.6.1(transitive)
Updateddraftjs-filters@^0.7.0