a35946aab9332131b7a59d121df1f3e760851aff847a1641da85218256b814cea380a65aa6a4b5e13ed54b65dec35e9fbdb21dc42d6c46c357f557c3a524cc 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. import { merge } from 'lodash-es';
  2. import Emitter from '../core/emitter.js';
  3. import BaseTheme, { BaseTooltip } from './base.js';
  4. import LinkBlot from '../formats/link.js';
  5. import { Range } from '../core/selection.js';
  6. import icons from '../ui/icons.js';
  7. import Quill from '../core/quill.js';
  8. const TOOLBAR_CONFIG = [[{
  9. header: ['1', '2', '3', false]
  10. }], ['bold', 'italic', 'underline', 'link'], [{
  11. list: 'ordered'
  12. }, {
  13. list: 'bullet'
  14. }], ['clean']];
  15. class SnowTooltip extends BaseTooltip {
  16. static 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('');
  17. preview = this.root.querySelector('a.ql-preview');
  18. listen() {
  19. super.listen();
  20. // @ts-expect-error Fix me later
  21. this.root.querySelector('a.ql-action').addEventListener('click', event => {
  22. if (this.root.classList.contains('ql-editing')) {
  23. this.save();
  24. } else {
  25. // @ts-expect-error Fix me later
  26. this.edit('link', this.preview.textContent);
  27. }
  28. event.preventDefault();
  29. });
  30. // @ts-expect-error Fix me later
  31. this.root.querySelector('a.ql-remove').addEventListener('click', event => {
  32. if (this.linkRange != null) {
  33. const range = this.linkRange;
  34. this.restoreFocus();
  35. this.quill.formatText(range, 'link', false, Emitter.sources.USER);
  36. delete this.linkRange;
  37. }
  38. event.preventDefault();
  39. this.hide();
  40. });
  41. this.quill.on(Emitter.events.SELECTION_CHANGE, (range, oldRange, source) => {
  42. if (range == null) return;
  43. if (range.length === 0 && source === Emitter.sources.USER) {
  44. const [link, offset] = this.quill.scroll.descendant(LinkBlot, range.index);
  45. if (link != null) {
  46. this.linkRange = new Range(range.index - offset, link.length());
  47. const preview = LinkBlot.formats(link.domNode);
  48. // @ts-expect-error Fix me later
  49. this.preview.textContent = preview;
  50. // @ts-expect-error Fix me later
  51. this.preview.setAttribute('href', preview);
  52. this.show();
  53. const bounds = this.quill.getBounds(this.linkRange);
  54. if (bounds != null) {
  55. this.position(bounds);
  56. }
  57. return;
  58. }
  59. } else {
  60. delete this.linkRange;
  61. }
  62. this.hide();
  63. });
  64. }
  65. show() {
  66. super.show();
  67. this.root.removeAttribute('data-mode');
  68. }
  69. }
  70. class SnowTheme extends BaseTheme {
  71. constructor(quill, options) {
  72. if (options.modules.toolbar != null && options.modules.toolbar.container == null) {
  73. options.modules.toolbar.container = TOOLBAR_CONFIG;
  74. }
  75. super(quill, options);
  76. this.quill.container.classList.add('ql-snow');
  77. }
  78. extendToolbar(toolbar) {
  79. if (toolbar.container != null) {
  80. toolbar.container.classList.add('ql-snow');
  81. this.buildButtons(toolbar.container.querySelectorAll('button'), icons);
  82. this.buildPickers(toolbar.container.querySelectorAll('select'), icons);
  83. // @ts-expect-error
  84. this.tooltip = new SnowTooltip(this.quill, this.options.bounds);
  85. if (toolbar.container.querySelector('.ql-link')) {
  86. this.quill.keyboard.addBinding({
  87. key: 'k',
  88. shortKey: true
  89. }, (_range, context) => {
  90. toolbar.handlers.link.call(toolbar, !context.format.link);
  91. });
  92. }
  93. }
  94. }
  95. }
  96. SnowTheme.DEFAULTS = merge({}, BaseTheme.DEFAULTS, {
  97. modules: {
  98. toolbar: {
  99. handlers: {
  100. link(value) {
  101. if (value) {
  102. const range = this.quill.getSelection();
  103. if (range == null || range.length === 0) return;
  104. let preview = this.quill.getText(range);
  105. if (/^\S+@\S+\.\S+$/.test(preview) && preview.indexOf('mailto:') !== 0) {
  106. preview = `mailto:${preview}`;
  107. }
  108. // @ts-expect-error
  109. const {
  110. tooltip
  111. } = this.quill.theme;
  112. tooltip.edit('link', preview);
  113. } else {
  114. this.quill.format('link', false, Quill.sources.USER);
  115. }
  116. }
  117. }
  118. }
  119. }
  120. });
  121. export default SnowTheme;
  122. //# sourceMappingURL=snow.js.map