Issue with scroll

[volser]

http://recordit.co/yCPD8KPUdU

[lily514]

I was able to resolve this by extending ImageSpec and adding a scroll event listener that calls the formatter's repositionOverlay method.

[gunchungpyo]

@lily514 Thank you for your answer, and I have made it works. and here is my implementation:

I created CustomImageSpec class that extends ImageSpec and I also overide init() method to listen scroll, click and editor changed

import { DeleteAction, ResizeAction, AlignAction, ImageSpec } from 'quill-blot-formatter';

export class CustomImageSpec extends ImageSpec {
  getActions() {
    return [DeleteAction, ResizeAction, AlignAction];
  }

  init() {
    this.formatter.quill.root.addEventListener('click', this.onClick);

    // handling scroll event
    this.formatter.quill.root.addEventListener('scroll', () => {
      this.formatter.repositionOverlay();
    });

    // handling align
    this.formatter.quill.on('editor-change', (eventName, ...args) => {
      if (eventName === 'selection-change' && args[2] === 'api') {
        setTimeout(() => {
          this.formatter.repositionOverlay();
        }, 10);
      }
    });
  }
}

and in your quill init add your CustomImageSpec to blotFormatter config

this.quill = new Quill('#editor-container', {
      modules: {
        toolbar: {
          container: '#toolbar-container',
          handlers: {
            showHtml: () => {
              this.toggleShowSource(sourceTxtArea);
            }
          }
        },
        blotFormatter: {
          specs: [CustomImageSpec]
        }
      },
      placeholder: 'Announcement Content',
      theme: 'snow'
    });

[Huansheng1]

@lily514 Thank you for your answer, and I have made it works. and here is my implementation:

I created CustomImageSpec class that extends ImageSpec and I also overide init() method to listen scroll, click and editor changed

import { DeleteAction, ResizeAction, AlignAction, ImageSpec } from 'quill-blot-formatter';

export class CustomImageSpec extends ImageSpec {
  getActions() {
    return [DeleteAction, ResizeAction, AlignAction];
  }

  init() {
    this.formatter.quill.root.addEventListener('click', this.onClick);

    // handling scroll event
    this.formatter.quill.root.addEventListener('scroll', () => {
      this.formatter.repositionOverlay();
    });

    // handling align
    this.formatter.quill.on('editor-change', (eventName, ...args) => {
      if (eventName === 'selection-change' && args[2] === 'api') {
        setTimeout(() => {
          this.formatter.repositionOverlay();
        }, 10);
      }
    });
  }
}

and in your quill init add your CustomImageSpec to blotFormatter config

this.quill = new Quill('#editor-container', {
      modules: {
        toolbar: {
          container: '#toolbar-container',
          handlers: {
            showHtml: () => {
              this.toggleShowSource(sourceTxtArea);
            }
          }
        },
        blotFormatter: {
          specs: [CustomImageSpec]
        }
      },
      placeholder: 'Announcement Content',
      theme: 'snow'
    });

I needed this too, thanks for posting this code snippet