import extend from"extend";import Emitter from"../core/emitter";import Keyboard from"../modules/keyboard";import BaseTheme,{BaseTooltip}from"./base";import icons from"../ui/icons";import{Range}from"../core/selection";const TOOLBAR_CONFIG=[["bold","italic","link"],[{header:1},{header:2},"blockquote"]];class BubbleTheme extends BaseTheme{constructor(t,e){null!=e.modules.toolbar&&null==e.modules.toolbar.container&&(e.modules.toolbar.container=TOOLBAR_CONFIG),super(t,e),this.quill.container.classList.add("ql-bubble")}extendToolbar(t){this.tooltip=new BubbleTooltip(this.quill,this.options.bounds),this.tooltip.root.appendChild(t.container),this.buildButtons([].slice.call(t.container.querySelectorAll("button"))),this.buildPickers([].slice.call(t.container.querySelectorAll("select")))}}BubbleTheme.DEFAULTS=extend(!0,{},BaseTheme.DEFAULTS,{modules:{toolbar:{handlers:{link:function(t){t?this.quill.theme.tooltip.edit():this.quill.format("link",!1)}}}}});class BubbleTooltip extends BaseTooltip{constructor(t,e){super(t,e),this.quill.on(Emitter.events.EDITOR_CHANGE,((t,e)=>{if(t===Emitter.events.SELECTION_CHANGE)if(null!=e&&e.length>0){this.show(),this.root.style.left="0px",this.root.style.width="",this.root.style.width=this.root.offsetWidth+"px";let t=this.quill.scroll.lines(e.index,e.length);if(1===t.length)this.position(this.quill.getBounds(e));else{let l=t[t.length-1],i=l.offset(this.quill.scroll),o=Math.min(l.length()-1,e.index+e.length-i),s=this.quill.getBounds(new Range(i,o));this.position(s)}}else document.activeElement!==this.textbox&&this.quill.hasFocus()&&this.hide()}))}listen(){super.listen(),this.root.querySelector(".ql-close").addEventListener("click",(t=>{this.root.classList.remove("ql-editing")})),this.quill.on(Emitter.events.SCROLL_OPTIMIZE,(()=>{setTimeout((()=>{if(this.root.classList.contains("ql-hidden"))return;let t=this.quill.getSelection();null!=t&&this.position(this.quill.getBounds(t))}),1)}))}cancel(){this.show()}position(t){let e=super.position(t);if(0===e)return e;let l=this.root.querySelector(".ql-tooltip-arrow");l.style.marginLeft="",l.style.marginLeft=-1*e-l.offsetWidth/2+"px"}}BubbleTooltip.TEMPLATE=['<span class="ql-tooltip-arrow"></span>','<div class="ql-tooltip-editor">','<input type="text" data-formula="e=mc^2" data-link="quilljs.com" data-video="Embed URL">','<a class="ql-close"></a>',"</div>"].join("");export default BubbleTheme;
