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.
		
		
		
		
		
			
		
			
				
					
					
						
							175 lines
						
					
					
						
							6.9 KiB
						
					
					
				
			
		
		
	
	
							175 lines
						
					
					
						
							6.9 KiB
						
					
					
				| (function (global, factory) {
 | |
|   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tiptap/core'), require('prosemirror-state'), require('tippy.js')) :
 | |
|   typeof define === 'function' && define.amd ? define(['exports', '@tiptap/core', 'prosemirror-state', 'tippy.js'], factory) :
 | |
|   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@tiptap/extension-floating-menu"] = {}, global.core, global.prosemirrorState, global.tippy));
 | |
| })(this, (function (exports, core, prosemirrorState, tippy) { 'use strict';
 | |
| 
 | |
|   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 | |
| 
 | |
|   var tippy__default = /*#__PURE__*/_interopDefaultLegacy(tippy);
 | |
| 
 | |
|   class FloatingMenuView {
 | |
|       constructor({ editor, element, view, tippyOptions = {}, shouldShow, }) {
 | |
|           this.preventHide = false;
 | |
|           this.shouldShow = ({ view, state }) => {
 | |
|               const { selection } = state;
 | |
|               const { $anchor, empty } = selection;
 | |
|               const isRootDepth = $anchor.depth === 1;
 | |
|               const isEmptyTextBlock = $anchor.parent.isTextblock
 | |
|                   && !$anchor.parent.type.spec.code
 | |
|                   && !$anchor.parent.textContent;
 | |
|               if (!view.hasFocus()
 | |
|                   || !empty
 | |
|                   || !isRootDepth
 | |
|                   || !isEmptyTextBlock
 | |
|                   || !this.editor.isEditable) {
 | |
|                   return false;
 | |
|               }
 | |
|               return true;
 | |
|           };
 | |
|           this.mousedownHandler = () => {
 | |
|               this.preventHide = true;
 | |
|           };
 | |
|           this.focusHandler = () => {
 | |
|               // we use `setTimeout` to make sure `selection` is already updated
 | |
|               setTimeout(() => this.update(this.editor.view));
 | |
|           };
 | |
|           this.blurHandler = ({ event }) => {
 | |
|               var _a;
 | |
|               if (this.preventHide) {
 | |
|                   this.preventHide = false;
 | |
|                   return;
 | |
|               }
 | |
|               if ((event === null || event === void 0 ? void 0 : event.relatedTarget)
 | |
|                   && ((_a = this.element.parentNode) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget))) {
 | |
|                   return;
 | |
|               }
 | |
|               this.hide();
 | |
|           };
 | |
|           this.tippyBlurHandler = (event) => {
 | |
|               this.blurHandler({ event });
 | |
|           };
 | |
|           this.editor = editor;
 | |
|           this.element = element;
 | |
|           this.view = view;
 | |
|           if (shouldShow) {
 | |
|               this.shouldShow = shouldShow;
 | |
|           }
 | |
|           this.element.addEventListener('mousedown', this.mousedownHandler, { capture: true });
 | |
|           this.editor.on('focus', this.focusHandler);
 | |
|           this.editor.on('blur', this.blurHandler);
 | |
|           this.tippyOptions = tippyOptions;
 | |
|           // Detaches menu content from its current parent
 | |
|           this.element.remove();
 | |
|           this.element.style.visibility = 'visible';
 | |
|       }
 | |
|       createTooltip() {
 | |
|           const { element: editorElement } = this.editor.options;
 | |
|           const editorIsAttached = !!editorElement.parentElement;
 | |
|           if (this.tippy || !editorIsAttached) {
 | |
|               return;
 | |
|           }
 | |
|           this.tippy = tippy__default["default"](editorElement, {
 | |
|               duration: 0,
 | |
|               getReferenceClientRect: null,
 | |
|               content: this.element,
 | |
|               interactive: true,
 | |
|               trigger: 'manual',
 | |
|               placement: 'right',
 | |
|               hideOnClick: 'toggle',
 | |
|               ...this.tippyOptions,
 | |
|           });
 | |
|           // maybe we have to hide tippy on its own blur event as well
 | |
|           if (this.tippy.popper.firstChild) {
 | |
|               this.tippy.popper.firstChild.addEventListener('blur', this.tippyBlurHandler);
 | |
|           }
 | |
|       }
 | |
|       update(view, oldState) {
 | |
|           var _a, _b, _c;
 | |
|           const { state } = view;
 | |
|           const { doc, selection } = state;
 | |
|           const { from, to } = selection;
 | |
|           const isSame = oldState && oldState.doc.eq(doc) && oldState.selection.eq(selection);
 | |
|           if (isSame) {
 | |
|               return;
 | |
|           }
 | |
|           this.createTooltip();
 | |
|           const shouldShow = (_a = this.shouldShow) === null || _a === void 0 ? void 0 : _a.call(this, {
 | |
|               editor: this.editor,
 | |
|               view,
 | |
|               state,
 | |
|               oldState,
 | |
|           });
 | |
|           if (!shouldShow) {
 | |
|               this.hide();
 | |
|               return;
 | |
|           }
 | |
|           (_b = this.tippy) === null || _b === void 0 ? void 0 : _b.setProps({
 | |
|               getReferenceClientRect: ((_c = this.tippyOptions) === null || _c === void 0 ? void 0 : _c.getReferenceClientRect) || (() => core.posToDOMRect(view, from, to)),
 | |
|           });
 | |
|           this.show();
 | |
|       }
 | |
|       show() {
 | |
|           var _a;
 | |
|           (_a = this.tippy) === null || _a === void 0 ? void 0 : _a.show();
 | |
|       }
 | |
|       hide() {
 | |
|           var _a;
 | |
|           (_a = this.tippy) === null || _a === void 0 ? void 0 : _a.hide();
 | |
|       }
 | |
|       destroy() {
 | |
|           var _a, _b;
 | |
|           if ((_a = this.tippy) === null || _a === void 0 ? void 0 : _a.popper.firstChild) {
 | |
|               this.tippy.popper.firstChild.removeEventListener('blur', this.tippyBlurHandler);
 | |
|           }
 | |
|           (_b = this.tippy) === null || _b === void 0 ? void 0 : _b.destroy();
 | |
|           this.element.removeEventListener('mousedown', this.mousedownHandler, { capture: true });
 | |
|           this.editor.off('focus', this.focusHandler);
 | |
|           this.editor.off('blur', this.blurHandler);
 | |
|       }
 | |
|   }
 | |
|   const FloatingMenuPlugin = (options) => {
 | |
|       return new prosemirrorState.Plugin({
 | |
|           key: typeof options.pluginKey === 'string'
 | |
|               ? new prosemirrorState.PluginKey(options.pluginKey)
 | |
|               : options.pluginKey,
 | |
|           view: view => new FloatingMenuView({ view, ...options }),
 | |
|       });
 | |
|   };
 | |
| 
 | |
|   const FloatingMenu = core.Extension.create({
 | |
|       name: 'floatingMenu',
 | |
|       addOptions() {
 | |
|           return {
 | |
|               element: null,
 | |
|               tippyOptions: {},
 | |
|               pluginKey: 'floatingMenu',
 | |
|               shouldShow: null,
 | |
|           };
 | |
|       },
 | |
|       addProseMirrorPlugins() {
 | |
|           if (!this.options.element) {
 | |
|               return [];
 | |
|           }
 | |
|           return [
 | |
|               FloatingMenuPlugin({
 | |
|                   pluginKey: this.options.pluginKey,
 | |
|                   editor: this.editor,
 | |
|                   element: this.options.element,
 | |
|                   tippyOptions: this.options.tippyOptions,
 | |
|                   shouldShow: this.options.shouldShow,
 | |
|               }),
 | |
|           ];
 | |
|       },
 | |
|   });
 | |
| 
 | |
|   exports.FloatingMenu = FloatingMenu;
 | |
|   exports.FloatingMenuPlugin = FloatingMenuPlugin;
 | |
|   exports.FloatingMenuView = FloatingMenuView;
 | |
|   exports["default"] = FloatingMenu;
 | |
| 
 | |
|   Object.defineProperty(exports, '__esModule', { value: true });
 | |
| 
 | |
| }));
 | |
| //# sourceMappingURL=tiptap-extension-floating-menu.umd.js.map
 |