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
 |