I noticed an annoying The given range isn't in document error during text editing in Chrome. I found one way to reproduce the problem in the Quill demo on your website so I guess this means this is a problem in Quill and not in my code.

Steps for Reproduction

1. Visit quilljs.com and switch to the third demo (The one where you can set a text color).
2. Click into the text area to focus the editor.
3. Select all text with Ctrl-A.
4. Remove selected text with Del. The document must be completely empty now.
5. Select a text color with the color picker in the toolbar.
6. Type multiple lines of text (Can't be reproduced with just one line).
7. Select all content again with Ctrl-A.
8. Type new text.

Expected behavior:

The new text must replace the selected text.

Actual behavior:

The selected text is removed, the error message The given range isn't in document is thrown and the editor looses the focus.

Platforms: Chrome 63.0.3239.132 on Debian Linux 9.3

Version: 1.3.5

We're using Quill via PrimeNG in our Angular2 app, love everything for the most part. Quill seems like a great WYSIWYG editor! We are running into one issue though: If you press enter adding a newline into the editor, the newline is added using a <br/>, but is wrapped in a <p>. Due to this, there is extra white space because of the margin included on a <p>.

My question is: Is there a way to tweak this behavior to prevent a <br/> from getting wrapped in a <p>?

[Describe the issue] quill.d.ts typescript definition file is needed to import quill in typescript projects like angular2 https://typescript.codeplex.com/wikipage?title=Writing%20Definition%20%28.d.ts%29%20Files

example in other project: https://github.com/moment/moment/blob/develop/moment.d.ts

Version: [version] 1.0-beta-6

The Quill Editor does not co-operate well with Grammarly's Chrome Extension. It will jump to different when pressing Enter or Backspace. I believe this may be a problem with the way Quill gets the user's selection in getSelection().

To generate the error:

1. Install Grammarly for Chrome.
2. Go to the Quill homepage.
3. Click the Quill Editor.
4. Wait for "built in" to be underlined.
5. Click anywhere on the word.
6. Hit backspace.

I wanted to check to see if this is possible to fix. I know this isn't necessarily a bug, but it would be great to see this work with other plugins.

I read through the documentation and I couldn't find an example of integration with a textarea in a form:

<textarea id="editor"></textarea>

var editor = new Quill('#editor');

This just injects the iframe inside the textarea DOM node. Are there any examples of integration?

I found serious issue when I click few times on style button in toolbar the cursor jumping to top of the editor...

Please watch the: http://postimg.org/image/4ef3tsq9x/

Is very annoying. Do you know how to fix it?

Native support for Shadow DOM v1 is hitting browsers, and Polymer v2 was just released. I am requesting support for Shadow DOM as a feature because there are just too many bugs to try to describe. When Quill is used on an element inside a ShadowRoot, it is just broken in so many ways.

Rather than try to have the community try to document and submit what may be dozens of separate behavior bugs, I suggest that the project team needs to take on the specific task of making all the existing demos/samples and tests work in Shadow DOM and issue a future release with support for Shadow DOM a specific feature.

We were trying to include polymer in polymer web component, but it throws an error. Does quill work with web components and polymer library?

Steps for Reproduction Add the following lines to your polymer component:

<dom-module id="my-view3">
    <template>
            <div id="editor">
                    <p>Hello World!</p>
                    <p>Some initial <strong>bold</strong> text</p>
                    <p>
                        <br>
                    </p>
            </div>
    </template>
    <script>
     Polymer({

         is: 'my-view3',

         ready: function() {
             /*this.scopeSubtree(this.$.container, true);*/
             var quill = new Quill('#editor', {
                 modules: {
                     toolbar: true
                 },
                 theme: 'snow'
             });
         },
     });
    </script>
</dom-module>

Expected behavior: [expected] An editor in the my-view3 component.

Actual behavior: [actual] Just the plan text. Error in the logs is "Invalid Quill container line 10283

Platforms: [ex. Chrome 48 on Mac 10.11] Chrome, Mac 10.11

Version: [version]

I have read many issues about uploading images, such as #633 #863. When selecting an picture, the picture show immediately in the editor with base64 url, which was the default behaviour in snow/bubble theme.BUT I expect to replace the base64 url with the url getting from server.How can I solve the problem?

Chrome 42 on a Mac

To reproduce, go to to quill's homepage, and try to add a link to the left-most word on a line. For me, the link tooltip becomes partially obscured. Screenshot attached.

Whilst div tags are quite acceptable for most cases, there are some uses where paragraph tags are necessary over div's.

As an example: I work on an application that allows authors to write content for ePubs. For both logical structure and ePub rendering reasons we like to use paragraph tags.

From a very shallow inspection of the source it would appear this would involve changing references to the dom.DEFAULT_BLOCK_TAG variable with an option defined at initialisation.

• Is there enough reason to warrant this change?
• Are there any unintended consequences of implementing a change like this? @jhchen
• How should configuration be handled? Define in the constructor options hash as block_tag: 'p'?

I have added a new full screen button, which leverages the container DOM element and API i.e. Element.requestFullscreen API to render the editor in full screen mode. This works fine, but after this somehow the toggle behaviour of inline blots such as Bold, Italic, Underline, Strike etc have gone away. I am able to apply the changes but after clicking on the same button again, its not reverting back. (I can however do the undo/redo or Ctrl + Z/Y for that matter, but the idea is to persist the toggle behaviour in full screen mode)

Steps for Reproduction

1. Visit quilljs.com
2. Open the Devtool, Locate the container id=snow-container
3. Switch to Console tab in devtool, and run the following code $0.requestFullscreen() OR document.querySelector('#snow-container').requestFullscreen()
4. Editor goes into full screen mode with dark background in chrome. (that's fine we can take care of it by overriding :backdrop CSS)
5. Select any word, click on "B" (Bold) icon button in toolbar.

Expected behavior: The selected word should get bold style applied (using strong tag) and clicking on Bold button again in toolbar should revert it back.

Actual behavior: The selection turns into bold, but same toggle behaviour is not happening, when I am clicking on Bold button again in toolbar.

Platforms: Windows 11, Chrome 108, Edge 108.

This problem is happening only on chromium browser (Chrome and Edge). Toggle is working fine in Firefox

Version: 1.3.6

Screen recording of my storybook

https://user-images.githubusercontent.com/3787965/209972933-3ce8b4b2-1a85-49e1-9913-06ffebac4703.mp4

We noticed that it is not possible to change the background color of the text in the code block in Quill editor.

Steps to reproduce

1. Visit this JSFiddle which contains the following code snippet for Quill initialization:

var quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block'],
      [{'color': [] }, {'background': [] }]
    ]
  }
});

2. Click on the code block icon:

3. Paste some code into the code block:

4. Select some text:

5. Change its background color:

Expected behavior: Text background color should be changed.

Actual behavior: Text background color remains unchanged.

Platforms: Google Chrome 108.0.5359.125 64bit, Windows 10 64bit

Version: 1.3.7

With the other formats (bold, italic, underline) works fine.

Steps for Reproduction

1. Visit https://quilljs.com/playground/
2. Write a text with strike format and a text without format (all in the same line)
3. Select the text and try to type a new letter.

Expected behavior: Replace the text with the new letter and keep the format.

Actual behavior: The line is erased.

Platforms: macOs Monterey Google Chrome - Version 108.0.5359.94

Version: https://cdn.quilljs.com/1.3.7/quill.js

Please describe the a concise description and fill out the details below. It will help others efficiently understand your request and get to an answer instead of repeated back and forth. Providing a minimal, complete and verifiable example will further increase your chances that someone can help.

Steps for Reproduction Not a big deal - just didn't know how else to surface it to you.

1. Visit
2. There are 3 png assets that are 404:

Also separate thing - in the issue template you state: Please describe the a concise description ... maybe it should be someting like: Please describe the issue with a concise description ?

Expected behavior: You can see the icons.

Actual behavior: You can't see the icons and see the alt text instead?

Platforms:

Include browser, operating system and respective versions

Version:

Run Quill.version to find out

I realise that Quill is intended not to result in printing reams and reams of documents, but a simple print button would be a great addition. I've looked but I cannot find anything about one in the documentation. And people do often print to PDF to share it.