You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
3.8 KiB
120 lines
3.8 KiB
import extend from 'extend'; |
|
import Emitter from '../core/emitter'; |
|
import BaseTheme, { BaseTooltip } from './base'; |
|
import LinkBlot from '../formats/link'; |
|
import { Range } from '../core/selection'; |
|
import icons from '../ui/icons'; |
|
|
|
|
|
const TOOLBAR_CONFIG = [ |
|
[{ header: ['1', '2', '3', false] }], |
|
['bold', 'italic', 'underline', 'link'], |
|
[{ list: 'ordered' }, { list: 'bullet' }], |
|
['clean'] |
|
]; |
|
|
|
class SnowTheme extends BaseTheme { |
|
constructor(quill, options) { |
|
if (options.modules.toolbar != null && options.modules.toolbar.container == null) { |
|
options.modules.toolbar.container = TOOLBAR_CONFIG; |
|
} |
|
super(quill, options); |
|
this.quill.container.classList.add('ql-snow'); |
|
} |
|
|
|
extendToolbar(toolbar) { |
|
toolbar.container.classList.add('ql-snow'); |
|
this.buildButtons([].slice.call(toolbar.container.querySelectorAll('button')), icons); |
|
this.buildPickers([].slice.call(toolbar.container.querySelectorAll('select')), icons); |
|
this.tooltip = new SnowTooltip(this.quill, this.options.bounds); |
|
if (toolbar.container.querySelector('.ql-link')) { |
|
this.quill.keyboard.addBinding({ key: 'K', shortKey: true }, function(range, context) { |
|
toolbar.handlers['link'].call(toolbar, !context.format.link); |
|
}); |
|
} |
|
} |
|
} |
|
SnowTheme.DEFAULTS = extend(true, {}, BaseTheme.DEFAULTS, { |
|
modules: { |
|
toolbar: { |
|
handlers: { |
|
link: function(value) { |
|
if (value) { |
|
let range = this.quill.getSelection(); |
|
if (range == null || range.length == 0) return; |
|
let preview = this.quill.getText(range); |
|
if (/^\S+@\S+\.\S+$/.test(preview) && preview.indexOf('mailto:') !== 0) { |
|
preview = 'mailto:' + preview; |
|
} |
|
let tooltip = this.quill.theme.tooltip; |
|
tooltip.edit('link', preview); |
|
} else { |
|
this.quill.format('link', false); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
}); |
|
|
|
|
|
class SnowTooltip extends BaseTooltip { |
|
constructor(quill, bounds) { |
|
super(quill, bounds); |
|
this.preview = this.root.querySelector('a.ql-preview'); |
|
} |
|
|
|
listen() { |
|
super.listen(); |
|
this.root.querySelector('a.ql-action').addEventListener('click', (event) => { |
|
if (this.root.classList.contains('ql-editing')) { |
|
this.save(); |
|
} else { |
|
this.edit('link', this.preview.textContent); |
|
} |
|
event.preventDefault(); |
|
}); |
|
this.root.querySelector('a.ql-remove').addEventListener('click', (event) => { |
|
if (this.linkRange != null) { |
|
let range = this.linkRange; |
|
this.restoreFocus(); |
|
this.quill.formatText(range, 'link', false, Emitter.sources.USER); |
|
delete this.linkRange; |
|
} |
|
event.preventDefault(); |
|
this.hide(); |
|
}); |
|
this.quill.on(Emitter.events.SELECTION_CHANGE, (range, oldRange, source) => { |
|
if (range == null) return; |
|
if (range.length === 0 && source === Emitter.sources.USER) { |
|
let [link, offset] = this.quill.scroll.descendant(LinkBlot, range.index); |
|
if (link != null) { |
|
this.linkRange = new Range(range.index - offset, link.length()); |
|
let preview = LinkBlot.formats(link.domNode); |
|
this.preview.textContent = preview; |
|
this.preview.setAttribute('href', preview); |
|
this.show(); |
|
this.position(this.quill.getBounds(this.linkRange)); |
|
return; |
|
} |
|
} else { |
|
delete this.linkRange; |
|
} |
|
this.hide(); |
|
}); |
|
} |
|
|
|
show() { |
|
super.show(); |
|
this.root.removeAttribute('data-mode'); |
|
} |
|
} |
|
SnowTooltip.TEMPLATE = [ |
|
'<a class="ql-preview" rel="noopener noreferrer" target="_blank" href="about:blank"></a>', |
|
'<input type="text" data-formula="e=mc^2" data-link="https://quilljs.com" data-video="Embed URL">', |
|
'<a class="ql-action"></a>', |
|
'<a class="ql-remove"></a>' |
|
].join(''); |
|
|
|
|
|
export default SnowTheme;
|
|
|