|
| 1 | +import Delta from 'quill-delta'; |
| 2 | +import { EmbedBlot, Scope } from 'parchment'; |
| 3 | +import Quill from '../core/quill'; |
| 4 | +import logger from '../core/logger'; |
| 5 | +import Module from '../core/module'; |
| 6 | +const debug = logger('quill:toolbar'); |
| 7 | +class Toolbar extends Module { |
| 8 | + constructor(quill, options) { |
| 9 | + super(quill, options); |
| 10 | + if (Array.isArray(this.options.container)) { |
| 11 | + const container = document.createElement('div'); |
| 12 | + addControls(container, this.options.container); |
| 13 | + quill.container.parentNode.insertBefore(container, quill.container); |
| 14 | + this.container = container; |
| 15 | + } else if (typeof this.options.container === 'string') { |
| 16 | + this.container = document.querySelector(this.options.container); |
| 17 | + } else { |
| 18 | + this.container = this.options.container; |
| 19 | + } |
| 20 | + if (!(this.container instanceof HTMLElement)) { |
| 21 | + debug.error('Container required for toolbar', this.options); |
| 22 | + return; |
| 23 | + } |
| 24 | + this.container.classList.add('ql-toolbar'); |
| 25 | + this.controls = []; |
| 26 | + this.handlers = {}; |
| 27 | + Object.keys(this.options.handlers).forEach((format) => { |
| 28 | + this.addHandler(format, this.options.handlers[format]); |
| 29 | + }); |
| 30 | + Array.from(this.container.querySelectorAll('button, select')).forEach((input) => { |
| 31 | + this.attach(input); |
| 32 | + }); |
| 33 | + this.quill.on(Quill.events.EDITOR_CHANGE, (type, range) => { |
| 34 | + if (type === Quill.events.SELECTION_CHANGE) { |
| 35 | + this.update(range); |
| 36 | + } |
| 37 | + }); |
| 38 | + this.quill.on(Quill.events.SCROLL_OPTIMIZE, () => { |
| 39 | + const [range] = this.quill.selection.getRange(); |
| 40 | + this.update(range); |
| 41 | + }); |
| 42 | + } |
| 43 | + addHandler(format, handler) { |
| 44 | + this.handlers[format] = handler; |
| 45 | + } |
| 46 | + attach(input) { |
| 47 | + let format = Array.from(input.classList).find((className) => { |
| 48 | + return className.indexOf('ql-') === 0; |
| 49 | + }); |
| 50 | + if (!format) return; |
| 51 | + format = format.slice('ql-'.length); |
| 52 | + if (input.tagName === 'BUTTON') { |
| 53 | + input.setAttribute('type', 'button'); |
| 54 | + } |
| 55 | + if (this.handlers[format] == null && this.quill.scroll.query(format) == null) { |
| 56 | + debug.warn('ignoring attaching to nonexistent format', format, input); |
| 57 | + return; |
| 58 | + } |
| 59 | + const eventName = input.tagName === 'SELECT' ? 'change' : 'click'; |
| 60 | + input.addEventListener(eventName, (e) => { |
| 61 | + let value; |
| 62 | + if (input.tagName === 'SELECT') { |
| 63 | + if (input.selectedIndex < 0) return; |
| 64 | + const selected = input.options[input.selectedIndex]; |
| 65 | + if (selected.hasAttribute('selected')) { |
| 66 | + value = false; |
| 67 | + } else { |
| 68 | + value = selected.value || false; |
| 69 | + } |
| 70 | + } else { |
| 71 | + if (input.classList.contains('ql-active')) { |
| 72 | + value = false; |
| 73 | + } else { |
| 74 | + value = input.value || !input.hasAttribute('value'); |
| 75 | + } |
| 76 | + e.preventDefault(); |
| 77 | + } |
| 78 | + this.quill.focus(); |
| 79 | + const [range] = this.quill.selection.getRange(); |
| 80 | + if (this.handlers[format] != null) { |
| 81 | + this.handlers[format].call(this, value); |
| 82 | + } else if (this.quill.scroll.query(format).prototype instanceof EmbedBlot) { |
| 83 | + value = prompt(`Enter ${format}`); |
| 84 | + if (!value) return; |
| 85 | + this.quill.updateContents(new Delta().retain(range.index).delete(range.length).insert({ |
| 86 | + [format]: value |
| 87 | + }), Quill.sources.USER); |
| 88 | + } else { |
| 89 | + this.quill.format(format, value, Quill.sources.USER); |
| 90 | + } |
| 91 | + this.update(range); |
| 92 | + }); |
| 93 | + this.controls.push([ |
| 94 | + format, |
| 95 | + input |
| 96 | + ]); |
| 97 | + } |
| 98 | + update(range) { |
| 99 | + const formats = range == null ? {} : this.quill.getFormat(range); |
| 100 | + this.controls.forEach((pair) => { |
| 101 | + const [format, input] = pair; |
| 102 | + if (input.tagName === 'SELECT') { |
| 103 | + let option; |
| 104 | + if (range == null) { |
| 105 | + option = null; |
| 106 | + } else if (formats[format] == null) { |
| 107 | + option = input.querySelector('option[selected]'); |
| 108 | + } else if (!Array.isArray(formats[format])) { |
| 109 | + let value = formats[format]; |
| 110 | + if (typeof value === 'string') { |
| 111 | + value = value.replace(/"/g, '\\"'); |
| 112 | + } |
| 113 | + option = input.querySelector(`option[value="${value}"]`); |
| 114 | + } |
| 115 | + if (option == null) { |
| 116 | + input.value = ''; |
| 117 | + input.selectedIndex = -1; |
| 118 | + } else { |
| 119 | + option.selected = true; |
| 120 | + } |
| 121 | + } else if (range == null) { |
| 122 | + input.classList.remove('ql-active'); |
| 123 | + } else if (input.hasAttribute('value')) { |
| 124 | + const isActive = formats[format] === input.getAttribute('value') || formats[format] != null && formats[format].toString() === input.getAttribute('value') || formats[format] == null && !input.getAttribute('value'); |
| 125 | + input.classList.toggle('ql-active', isActive); |
| 126 | + } else { |
| 127 | + input.classList.toggle('ql-active', formats[format] != null); |
| 128 | + } |
| 129 | + }); |
| 130 | + } |
| 131 | +} |
| 132 | +Toolbar.DEFAULTS = {}; |
| 133 | +function addButton(container, format, value) { |
| 134 | + const input = document.createElement('button'); |
| 135 | + input.setAttribute('type', 'button'); |
| 136 | + input.classList.add(`ql-${format}`); |
| 137 | + if (value != null) { |
| 138 | + input.value = value; |
| 139 | + } |
| 140 | + container.appendChild(input); |
| 141 | +} |
| 142 | +function addControls(container, groups) { |
| 143 | + if (!Array.isArray(groups[0])) { |
| 144 | + groups = [ |
| 145 | + groups |
| 146 | + ]; |
| 147 | + } |
| 148 | + groups.forEach((controls) => { |
| 149 | + const group = document.createElement('span'); |
| 150 | + group.classList.add('ql-formats'); |
| 151 | + controls.forEach((control) => { |
| 152 | + if (typeof control === 'string') { |
| 153 | + addButton(group, control); |
| 154 | + } else { |
| 155 | + const format = Object.keys(control)[0]; |
| 156 | + const value = control[format]; |
| 157 | + if (Array.isArray(value)) { |
| 158 | + addSelect(group, format, value); |
| 159 | + } else { |
| 160 | + addButton(group, format, value); |
| 161 | + } |
| 162 | + } |
| 163 | + }); |
| 164 | + container.appendChild(group); |
| 165 | + }); |
| 166 | +} |
| 167 | +function addSelect(container, format, values) { |
| 168 | + const input = document.createElement('select'); |
| 169 | + input.classList.add(`ql-${format}`); |
| 170 | + values.forEach((value) => { |
| 171 | + const option = document.createElement('option'); |
| 172 | + if (value !== false) { |
| 173 | + option.setAttribute('value', value); |
| 174 | + } else { |
| 175 | + option.setAttribute('selected', 'selected'); |
| 176 | + } |
| 177 | + input.appendChild(option); |
| 178 | + }); |
| 179 | + container.appendChild(input); |
| 180 | +} |
| 181 | +Toolbar.DEFAULTS = { |
| 182 | + container: null, |
| 183 | + handlers: { |
| 184 | + clean() { |
| 185 | + const range = this.quill.getSelection(); |
| 186 | + if (range == null) return; |
| 187 | + if (range.length === 0) { |
| 188 | + const formats = this.quill.getFormat(); |
| 189 | + Object.keys(formats).forEach((name) => { |
| 190 | + if (this.quill.scroll.query(name, Scope.INLINE) != null) { |
| 191 | + this.quill.format(name, false, Quill.sources.USER); |
| 192 | + } |
| 193 | + }); |
| 194 | + } else { |
| 195 | + this.quill.removeFormat(range, Quill.sources.USER); |
| 196 | + } |
| 197 | + }, |
| 198 | + direction(value) { |
| 199 | + const { align } = this.quill.getFormat(); |
| 200 | + if (value === 'rtl' && align == null) { |
| 201 | + this.quill.format('align', 'right', Quill.sources.USER); |
| 202 | + } else if (!value && align === 'right') { |
| 203 | + this.quill.format('align', false, Quill.sources.USER); |
| 204 | + } |
| 205 | + this.quill.format('direction', value, Quill.sources.USER); |
| 206 | + }, |
| 207 | + indent(value) { |
| 208 | + const range = this.quill.getSelection(); |
| 209 | + const formats = this.quill.getFormat(range); |
| 210 | + const indent = parseInt(formats.indent || 0, 10); |
| 211 | + if (value === '+1' || value === '-1') { |
| 212 | + let modifier = value === '+1' ? 1 : -1; |
| 213 | + if (formats.direction === 'rtl') modifier *= -1; |
| 214 | + this.quill.format('indent', indent + modifier, Quill.sources.USER); |
| 215 | + } |
| 216 | + }, |
| 217 | + link(value) { |
| 218 | + if (value === true) { |
| 219 | + value = prompt('Enter link URL:'); |
| 220 | + } |
| 221 | + this.quill.format('link', value, Quill.sources.USER); |
| 222 | + }, |
| 223 | + list(value) { |
| 224 | + const range = this.quill.getSelection(); |
| 225 | + const formats = this.quill.getFormat(range); |
| 226 | + if (value === 'check') { |
| 227 | + if (formats.list === 'checked' || formats.list === 'unchecked') { |
| 228 | + this.quill.format('list', false, Quill.sources.USER); |
| 229 | + } else { |
| 230 | + this.quill.format('list', 'unchecked', Quill.sources.USER); |
| 231 | + } |
| 232 | + } else { |
| 233 | + this.quill.format('list', value, Quill.sources.USER); |
| 234 | + } |
| 235 | + } |
| 236 | + } |
| 237 | +}; |
| 238 | +export { Toolbar as default, addControls }; |
0 commit comments