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.
		
		
		
		
			
				
					121 lines
				
				3.8 KiB
			
		
		
			
		
	
	
					121 lines
				
				3.8 KiB
			| 
								 
											4 years ago
										 
									 | 
							
								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;
							 |