@modusoperandi/licit 1.3.1 → 1.3.2

package/LinkSetURLCommand.js

@@ -114,7 +114,7 @@ var LinkSetURLCommand = /*#__PURE__*/function (_UICommand) {
               return _context2.abrupt("return", Promise.resolve(undefined));
             case 5:
               from = selection.from, to = selection.to;
-              result = findNodesWithSameMark(doc, from, to, markType);
+              result = findNodesWithSameMark(doc, from, to - 1, markType);
               href = result ? result.mark.attrs.href : null;
               _context2.next = 10;
               return _this.showTocList(view);

package/LinkSetURLCommand.js.flow

@@ -86,7 +86,7 @@ class LinkSetURLCommand extends UICommand {
       return Promise.resolve(undefined);
     }
     const { from, to } = selection;
-    const result = findNodesWithSameMark(doc, from, to, markType);
+    const result = findNodesWithSameMark(doc, from, to - 1, markType);
     const href = result ? result.mark.attrs.href : null;
     const tocItemsNode = await this.showTocList(view);
     const viewPops = {

package/LinkTooltipPlugin.js

@@ -15,23 +15,39 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
 function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
 function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-import { EditorState, Plugin, PluginKey, TextSelection } from 'prosemirror-state';
+import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { MARK_LINK } from './MarkNames.js';
-import { hideSelectionPlaceholder } from './SelectionPlaceholderPlugin.js';
-import { applyMark, findNodesWithSameMark, atAnchorTopCenter, createPopUp } from '@modusoperandi/licit-ui-commands';
+import { atAnchorTopCenter, createPopUp, findNodesWithSameMark } from '@modusoperandi/licit-ui-commands';
 import lookUpElement from './lookUpElement.js';
 import LinkTooltip from './ui/LinkTooltip.js';
-import LinkURLEditor from './ui/LinkURLEditor.js';
-import { INNER_LINK } from './Types.js';
-
-// https://prosemirror.net/examples/tooltip/
+import scrollIntoView from 'smooth-scroll-into-view-if-needed';
+import sanitizeURL from './sanitizeURL.js';
+import '@modusoperandi/licit-ui-commands/ui/czi-pop-up.css';
 var SPEC = {
-  // [FS] IRAD-1005 2020-07-07
-  // Upgrade outdated packages.
   key: new PluginKey('LinkTooltipPlugin'),
+  props: {
+    handleDOMEvents: {
+      mouseover: function mouseover(view, event) {
+        var _pluginView$_handleMo;
+        var pluginView = view.dom._linkTooltipView;
+        return (_pluginView$_handleMo = pluginView === null || pluginView === void 0 ? void 0 : pluginView._handleMouseOver(event)) !== null && _pluginView$_handleMo !== void 0 ? _pluginView$_handleMo : false;
+      },
+      mouseout: function mouseout(view, event) {
+        var pluginView = view.dom._linkTooltipView;
+        return pluginView === null || pluginView === void 0 ? void 0 : pluginView._handleMouseOut.call(view, event);
+      },
+      click: function click(view, event) {
+        var pluginView = view.dom._linkTooltipView;
+        return pluginView === null || pluginView === void 0 ? void 0 : pluginView._handleClick.call(view, event);
+      }
+    }
+  },
   view: function view(editorView) {
-    return new LinkTooltipView(editorView);
+    var pluginView = new LinkTooltipView(editorView);
+    // Store the instance for use in DOM handlers
+    editorView.dom._linkTooltipView = pluginView;
+    return pluginView;
   }
 };
 var LinkTooltipPlugin = /*#__PURE__*/function (_Plugin) {
@@ -43,153 +59,78 @@ var LinkTooltipPlugin = /*#__PURE__*/function (_Plugin) {
   return _createClass(LinkTooltipPlugin);
 }(Plugin);
 var LinkTooltipView = /*#__PURE__*/function () {
-  function LinkTooltipView(editorView) {
+  function LinkTooltipView(_view) {
     var _this = this;
     _classCallCheck(this, LinkTooltipView);
-    _defineProperty(this, "_anchorEl", null);
     _defineProperty(this, "_popup", null);
-    _defineProperty(this, "_editor", null);
-    _defineProperty(this, "_onCancel", function (view) {
-      _this.destroy();
-      view.focus();
+    _defineProperty(this, "_anchorEl", null);
+    _defineProperty(this, "_view", null);
+    _defineProperty(this, "jumpLink", function (view, tocItemPos, href, selectionId) {
+      if (selectionId || selectionId === 0 && tocItemPos) {
+        _this.jumpInnerLink(view, tocItemPos);
+      } else {
+        _this._openLink(href);
+      }
     });
-    _defineProperty(this, "_onClose", function () {
-      _this._anchorEl = null;
-      _this._editor = null;
-      _this._popup = null;
+    _defineProperty(this, "jumpInnerLink", function (view, tocItemPos) {
+      var transaction = view.state.tr;
+      var tr = transaction.setSelection(TextSelection.create(transaction.doc, tocItemPos.position + 1));
+      view.dispatch(tr.scrollIntoView(true));
+      var dom = view.domAtPos((tocItemPos === null || tocItemPos === void 0 ? void 0 : tocItemPos.position) + 1).node;
+      if (dom !== null && dom !== void 0 && dom.scrollIntoView) {
+        dom.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start'
+        });
+      }
     });
-    _defineProperty(this, "showTocList", /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(view) {
-        var storeTOCvalue, TOCselectedNode, stylePromise, styles;
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              storeTOCvalue = [];
-              TOCselectedNode = [];
-              stylePromise = view.runtime;
-              if (!(stylePromise === null || undefined)) {
-                _context.next = 7;
-                break;
+    _defineProperty(this, "_openLink", function (href) {
+      if (_this.isBookMarkHref(href)) {
+        var id = href.substr(1);
+        var el = document.getElementById(id);
+        if (el) {
+          var _this$props = _this.props,
+            onCancel = _this$props.onCancel,
+            editorView = _this$props.editorView;
+          onCancel(editorView);
+          _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+            return _regeneratorRuntime().wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return scrollIntoView(el, {
+                    scrollMode: 'if-needed',
+                    behavior: 'smooth'
+                  });
+                case 2:
+                case "end":
+                  return _context.stop();
               }
-              return _context.abrupt("return", TOCselectedNode);
-            case 7:
-              _context.next = 9;
-              return stylePromise.fetchStyles();
-            case 9:
-              styles = _context.sent;
-              storeTOCvalue = styles.filter(function (style // Added TOT/TOF selected styles to be listed as well
-              ) {
-                var _style$styles, _style$styles2, _style$styles3;
-                return (style === null || style === void 0 || (_style$styles = style.styles) === null || _style$styles === void 0 ? void 0 : _style$styles.toc) === true || (style === null || style === void 0 || (_style$styles2 = style.styles) === null || _style$styles2 === void 0 ? void 0 : _style$styles2.tot) === true || (style === null || style === void 0 || (_style$styles3 = style.styles) === null || _style$styles3 === void 0 ? void 0 : _style$styles3.tof) === true;
-              }).map(function (style) {
-                return style === null || style === void 0 ? void 0 : style.styleName;
-              });
-              view.state.tr.doc.descendants(function (node, pos) {
-                if (node.attrs.styleName) {
-                  for (var i = 0; i <= storeTOCvalue.length; i++) {
-                    if (storeTOCvalue[i] === node.attrs.styleName) {
-                      TOCselectedNode.push({
-                        node_: node,
-                        pos_: pos
-                      });
-                    }
-                  }
-                }
-              });
-              return _context.abrupt("return", TOCselectedNode);
-            case 13:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function (_x) {
-        return _ref.apply(this, arguments);
-      };
-    }());
-    _defineProperty(this, "_onEdit", function (view) {
-      _this._popup.close();
-      if (_this._editor) {
-        return;
-      }
-      var state = view.state;
-      var schema = state.schema,
-        doc = state.doc,
-        selection = state.selection;
-      var from = selection.from,
-        to = selection.to;
-      var markType = schema.marks[MARK_LINK];
-      var result = findNodesWithSameMark(doc, from, to, markType);
-      if (!result) {
+            }, _callee);
+          }))();
+        }
         return;
       }
-      _this.showTocList(view).then(function (data) {
-        var tocItemsNode = data;
-        var href = result.mark.attrs.href;
-        var viewPops = {
-          selectionId_: result.mark.attrs.selectionId,
-          href_: href,
-          TOCselectedNode_: tocItemsNode,
-          view_: view
-        };
-        _this._editor = createPopUp(LinkURLEditor, viewPops, {
-          onClose: function onClose(value) {
-            _this._editor = null;
-            _this._onEditEnd(view, selection, value);
-          }
-        });
-      });
-    });
-    _defineProperty(this, "_onRemove", function (view) {
-      _this._popup.close();
-      _this._onEditEnd(view, view.state.selection, null);
-    });
-    _defineProperty(this, "_onEditEnd", function (view, initialSelection, url) {
-      var state = view.state,
-        dispatch = view.dispatch;
-      var tr = hideSelectionPlaceholder(state);
-      if (url !== undefined) {
-        var schema = state.schema;
-        var markType = schema.marks[MARK_LINK];
-        if (markType) {
-          var result = findNodesWithSameMark(tr.doc, initialSelection.from, initialSelection.to, markType);
-          if (result) {
-            var linkSelection = TextSelection.create(tr.doc, result.from.pos, result.to.pos + 1);
-            tr = tr.setSelection(linkSelection);
-            var selectionId;
-            var href;
-            if (url === null) {
-              selectionId = null;
-              href = null;
-            } else if (url.includes(INNER_LINK)) {
-              selectionId = url.split(INNER_LINK)[0];
-              href = url.split(INNER_LINK)[1];
-            } else {
-              selectionId = null;
-              href = url;
-            }
-            var attrs = href ? {
-              href: href,
-              selectionId: selectionId
-            } : null;
-            tr = applyMark(tr, schema, markType, attrs);
-
-            // [FS] IRAD-1005 2020-07-09
-            // Upgrade outdated packages.
-            // reset selection to original using the latest doc.
-            var origSelection = TextSelection.create(tr.doc, initialSelection.from, initialSelection.to);
-            tr = tr.setSelection(origSelection);
-          }
+      if (href) {
+        var _this$_view;
+        var url = sanitizeURL(href);
+        var popupString;
+        if (_this._view.editable) {
+          popupString = 'Any unsaved changes will be lost';
+        } else {
+          popupString = '';
+        }
+        if ((_this$_view = _this._view) !== null && _this$_view !== void 0 && (_this$_view = _this$_view.runtime) !== null && _this$_view !== void 0 && _this$_view.openLinkDialog) {
+          _this._view.runtime.openLinkDialog(url, popupString);
+        } else {
+          window.open(url);
         }
       }
-      dispatch(tr);
-      view.focus();
     });
-    this.update(editorView, null);
-  }
-  return _createClass(LinkTooltipView, [{
-    key: "getInnerlinkSelected_position",
-    value: function getInnerlinkSelected_position(view, selectionId) {
+    _defineProperty(this, "isBookMarkHref", function (href) {
+      return !!href && href.startsWith('#') && href.length >= 2;
+    });
+    _defineProperty(this, "getInnerlinkSelected_position", function (view, selectionId) {
       var tocItemPos = null;
       if (selectionId) {
         view.state.tr.doc.descendants(function (node, pos) {
@@ -202,68 +143,80 @@ var LinkTooltipView = /*#__PURE__*/function () {
         });
       }
       return tocItemPos;
+    });
+    this._view = _view;
+  }
+  return _createClass(LinkTooltipView, [{
+    key: "_handleMouseOver",
+    value: function _handleMouseOver(event) {
+      var _event$target,
+        _this$_popup,
+        _this2 = this;
+      var anchor = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.closest('a');
+      if (!anchor || anchor === this._anchorEl) return;
+      this._anchorEl = anchor;
+      var href = anchor.getAttribute('href');
+      (_this$_popup = this._popup) === null || _this$_popup === void 0 || _this$_popup.close();
+      this._popup = createPopUp(LinkTooltip, {
+        href: href,
+        selectionId: null,
+        editorView: this._view
+      }, {
+        anchor: anchor,
+        autoDismiss: true,
+        onClose: function onClose() {
+          _this2._popup = null;
+          _this2._anchorEl = null;
+        },
+        position: atAnchorTopCenter
+      });
     }
   }, {
-    key: "update",
-    value: function update(view, lastState) {
-      var state = view.state;
+    key: "_handleClick",
+    value: function _handleClick(event) {
+      var state = this.dom._linkTooltipView._view.state;
       var doc = state.doc,
         selection = state.selection,
         schema = state.schema;
-      var markType = schema.marks[MARK_LINK];
-      if (!markType) {
-        return;
-      }
       var from = selection.from,
         to = selection.to;
+      var markType = schema.marks[MARK_LINK];
       var result = findNodesWithSameMark(doc, from, to, markType);
       if (!result) {
-        this.destroy();
-        return;
+        return false;
       }
-      var domFound = view.domAtPos(from);
+      var domFound = this.dom._linkTooltipView._view.domAtPos(from);
       if (!domFound) {
-        this.destroy();
-        return;
+        return false;
       }
-      var anchorEl = lookUpElement(domFound.node, function (el) {
+      var anchor = lookUpElement(domFound.node, function (el) {
         return el.nodeName === 'A';
       });
-      if (!anchorEl) {
-        this.destroy();
-        return;
+      if (!anchor) {
+        return false;
       }
-      var tocItemPos = this.getInnerlinkSelected_position(view, result.mark.attrs.selectionId);
-      var popup = this._popup;
-      var viewPops = {
-        editorState: state,
-        editorView: view,
-        href: result.mark.attrs.href,
-        selectionId_: result.mark.attrs.selectionId,
-        onCancel: this._onCancel,
-        onEdit: this._onEdit,
-        onRemove: this._onRemove,
-        tocItemPos_: tocItemPos
-      };
-      if (popup && anchorEl === this._anchorEl) {
-        popup.update(viewPops);
-      } else {
-        popup === null || popup === void 0 || popup.close();
-        this._anchorEl = anchorEl;
-        this._popup = createPopUp(LinkTooltip, viewPops, {
-          anchor: anchorEl,
-          autoDismiss: false,
-          onClose: this._onClose,
-          position: atAnchorTopCenter
-        });
+      var href = anchor.getAttribute('href');
+      var selectionId = anchor.getAttribute('selectionid');
+      var tocItemPos = this.dom._linkTooltipView.getInnerlinkSelected_position(this.dom._linkTooltipView._view, result.mark.attrs.selectionId);
+      this.dom._linkTooltipView.jumpLink(this.dom._linkTooltipView._view, tocItemPos, href, selectionId);
+      event.preventDefault(); // prevent default browser navigation
+      return true;
+    }
+  }, {
+    key: "_handleMouseOut",
+    value: function _handleMouseOut(event) {
+      if (this._anchorEl && !this._anchorEl.contains(event.relatedTarget)) {
+        var _this$_popup2;
+        (_this$_popup2 = this._popup) === null || _this$_popup2 === void 0 || _this$_popup2.close();
+        this._popup = null;
+        this._anchorEl = null;
       }
     }
   }, {
     key: "destroy",
     value: function destroy() {
-      var _this$_popup, _this$_editor;
-      (_this$_popup = this._popup) === null || _this$_popup === void 0 || _this$_popup.close();
-      (_this$_editor = this._editor) === null || _this$_editor === void 0 || _this$_editor.close();
+      var _this$_popup3;
+      (_this$_popup3 = this._popup) === null || _this$_popup3 === void 0 || _this$_popup3.close();
     }
   }]);
 }();