upgrading-to-1-0.mdx 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. ---
  2. title: Upgrading to 1.0
  3. ---
  4. Quill 1.0 introduces major changes aimed at greater ability to customize Quill. Interfaces stayed the same where possible and this guide helps bridge the gap otherwise.
  5. To realize the full benefits of 1.0, it is encouraged to take a fresh view of Quill 1.0 and revisit even basic topics on this documentation site. Often, you will find that even though you could do things the old way, there is a better new way.
  6. ### Configuration
  7. - `styles` *removed* - Previous versions of Quill allowed custom CSS to be injected through `<style>` additions. This option has been removed due to [Content Security Policy](https://developers.google.com/web/fundamentals/security/csp/). Instead you should use external CSS directly.
  8. ### API
  9. - `getHTML` *removed* - Previous versions of Quill required the usage of class names to identify lines `ql-line` and an `id` attribute to identify particular lines. This is no longer a requirement and a custom API call no longer adds any value on top of the DOM's existing innerHTML.
  10. - `setHTML` *removed* - Quill, like many editors with a data layer on top of the DOM, does not allow arbitrary changes to the underlying HTML. Previously Quill would detect an illegal state and correct it, but this makes the naming setHTML disingenuous and the reasoning behind the correction is unintuitive. Most use cases of `setHTML` can be suitably met or improved (since cursor preservation is much better) with the new [`pasteHTML`](/docs/api/#pastehtml).
  11. - `addModule` *removed* - Modules are now initialized based off of the initial Quill [configuration](/docs/configuration/), instead of having a separate function.
  12. - `onModuleLoad` *removed* - Module loading is handled by Themes and similar behavior should be achieved by extending the theme.
  13. - `destroy` *removed* - No longer necessary as Quill no longer keeps references to editor instances, allowing JavaScript garbage collectors to work as expected.
  14. - `prepareFormat` *renamed* - A new API [`format`](/docs/api/#format) now provides formatting functionality for all selection states, including those previously covered by `prepareFormat`.
  15. - For consistency, all positions are now index and length based versus the start and end representation sometimes used by [`deleteText`](/docs/api/#deletetext), [`formatText`](/docs/api/#formattext), [`formatLine`](/docs/api/#formatline), and the Range object used by selection APIs such as on [`getSelection`](/docs/api/#getselection), [`setSelection`](/docs/api/#setselection), and the [`selection-change`](/docs/api/#selection-change) event.
  16. - `registerModule` *renamed* - A new API [`register`](/docs/api/#register) is now used to registers all modules, themes and formats.
  17. - `require` *renamed* - Renamed to `import` for consistency with ES6.
  18. - `addContainer` *modified* - The [second parameter](/docs/api/#addcontainer) is changed to allow insertion before any container, not just the editor. Thus instead of an optional boolean, it now an optional HTMLElement.
  19. ### Modules
  20. - Toolbars, when initialized with a custom HTML element, requires buttons to be actual HTMLButtonElements. Previously it allowed any element with an appropriate class name.
  21. - The [Snow](/docs/themes/#snow/) toolbar no longer adds or uses `ql-format-separator` and renamed `ql-format-group` to `ql-formats`.
  22. - The authorship and multi-cursor modules have been temporarily removed. Similar functionality will be re-added at a later time, either separately or in a bundled collaboration module.
  23. - UndoManager has been renamed to [History](/docs/modules/history/).
  24. - PasteManager has been renamed to [Clipboard](/docs/modules/clipboard/), and will provide custom copy and paste behavior.
  25. - LinkTooltip has been moved to be theme specific. With the addition of [Bubble](/docs/themes/#bubble) and videos and [formulas](/docs/modules/formula/), it no longer made sense to open a separate tooltip for links as its own general UI element. The old tooltip behavior is still present in Snow, but is now specific to that theme.
  26. - ImageTooltip has been removed in favor of a simpler and more native flow. The image button now opens the OS file picker and the selected image file is inserted into the editor as a base64 image.
  27. ### Deltas
  28. The default [Delta](/docs/delta/) representation of some content has changed. In all cases the old format is still supported in methods using Deltas as in input, such as `setContents` and `updateContents`. But outputted Deltas, such as the ones reported by `text-change` and `getContents` will be in the new form. Since [Parchment](https://github.com/quilljs/parchment) now allows custom content and formats, it is possible to customize these Delta representations entirely.
  29. ```javascript
  30. const newImage = {
  31. insert: { image: 'url' }
  32. };
  33. const oldImage = {
  34. insert: 1,
  35. attributes: {
  36. image: 'url'
  37. }
  38. };
  39. const newOrderedList = {
  40. insert: '\n',
  41. attributes: {
  42. list: 'ordered'
  43. }
  44. };
  45. const oldOrderedList = {
  46. insert: '\n',
  47. attributes: {
  48. list: true
  49. }
  50. };
  51. const newBullettedList = {
  52. insert: '\n',
  53. attributes: {
  54. list: 'bullet'
  55. }
  56. };
  57. const oldBullettedList = {
  58. insert: '\n',
  59. attributes: {
  60. bullet: true
  61. }
  62. };
  63. ```
  64. ### Defaults
  65. - Quill previously used inline styles to implement font family and size. A class implementation is now default. To revert this, see [Content and Formatting](/guides/how-to-customize-quill/#content-and-formatting).
  66. ### Browsers
  67. - Quill now follows other major open source libraries in supporting the last two versions of major browser releases. Support for IE9 and IE10 have been dropped, and MS Edge has been added.
  68. - Android browser support now applies to Chrome on Android, instead of the stock Android Browser, which Google has phased out support for.
  69. ### Improvements
  70. - Ability to add new formats and content, or modify existing ones with [Parchment](https://github.com/quilljs/parchment/).
  71. - Added support for nested list, superscript, subscript, inline code, code block, header, blockquote, text direction, video and formula support.
  72. - Ability to format with classes instead of inline styles.
  73. - New tooltip based theme called [Bubble](/docs/themes/#bubble/).
  74. - Improved [Toolbar](/docs/modules/toolbar/) initialization with format arrays and customization with custom values.
  75. - Toolbar icons now use SVGs instead of inline PNGs allowing freedom to resize icons while retaining clarity. CSS can now also be used to easily change the active state color instead of the default #06c blue.
  76. - Improved ability to customize interpretation of pastes in [Clipboard](/docs/modules/clipboard/).
  77. - Improved ability to customize [keyboard handlers](/docs/modules/keyboard/).
  78. - A placeholder configuration option.
  79. - Editable [syntax highlighted code](/docs/modules/syntax/) block.
  80. - Several new [APIs](/docs/api/).
  81. - Many, many bug fixes.