@atlaskit/editor-plugin-hyperlink 4.3.1 → 4.3.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-hyperlink
 
+## 4.3.3
+
+### Patch Changes
+
+- [#135151](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135151)
+  [`5c16edacc0116`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5c16edacc0116) -
+  [ux] Show link floating toolbar when user clicks right before or after the link (solving one char
+  link issue)
+- Updated dependencies
+
+## 4.3.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.3.1
 
 ### Patch Changes

package/dist/cjs/pm-plugins/main.js

@@ -17,16 +17,6 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _decorations2 = require("./decorations");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var isSelectionInsideLink = function isSelectionInsideLink(state) {
-  return !!state.doc.type.schema.marks.link.isInSet(state.selection.$from.marks());
-};
-var isSelectionAroundLink = function isSelectionAroundLink(state) {
-  var _state$selection = state.selection,
-    $from = _state$selection.$from,
-    $to = _state$selection.$to;
-  var node = $from.nodeAfter;
-  return !!node && $from.textOffset === 0 && $to.pos - $from.pos === node.nodeSize && !!state.doc.type.schema.marks.link.isInSet(node.marks);
-};
 var mapTransactionToState = function mapTransactionToState(state, tr) {
   if (!state) {
     return undefined;
@@ -75,7 +65,7 @@ var toState = function toState(state, action, editorState) {
         }
       case _link3.LinkAction.SELECTION_CHANGE:
         // If the user has moved their cursor, see if they're in a link
-        var link = getActiveLinkMark(editorState);
+        var link = (0, _link3.getActiveLinkMark)(editorState);
         if (link) {
           return _objectSpread(_objectSpread({}, link), {}, {
             type: _link3.InsertStatus.EDIT_LINK_TOOLBAR
@@ -91,7 +81,7 @@ var toState = function toState(state, action, editorState) {
     switch (action) {
       case _link3.LinkAction.EDIT_INSERTED_TOOLBAR:
         {
-          var _link = getActiveLinkMark(editorState);
+          var _link = (0, _link3.getActiveLinkMark)(editorState);
           if (_link) {
             if (_link.pos === state.pos && _link.node === state.node) {
               return _objectSpread(_objectSpread({}, state), {}, {
@@ -105,7 +95,7 @@ var toState = function toState(state, action, editorState) {
           return undefined;
         }
       case _link3.LinkAction.SELECTION_CHANGE:
-        var _link2 = getActiveLinkMark(editorState);
+        var _link2 = (0, _link3.getActiveLinkMark)(editorState);
         if (_link2) {
           if (_link2.pos === state.pos && _link2.node === state.node) {
             // Make sure we return the same object, if it's the same link
@@ -135,18 +125,6 @@ var toState = function toState(state, action, editorState) {
   }
   return;
 };
-var getActiveLinkMark = function getActiveLinkMark(state) {
-  var $from = state.selection.$from;
-  if (isSelectionInsideLink(state) || isSelectionAroundLink(state)) {
-    var pos = $from.pos - $from.textOffset;
-    var node = state.doc.nodeAt(pos);
-    return node && node.isText ? {
-      node: node,
-      pos: pos
-    } : undefined;
-  }
-  return undefined;
-};
 var getActiveText = function getActiveText(selection) {
   var currentSlice = selection.content();
   if (currentSlice.size === 0) {

package/dist/cjs/ui/toolbar/Toolbar.js

@@ -19,9 +19,11 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _edit = _interopRequireDefault(require("@atlaskit/icon/core/edit"));
 var _linkBrokenEditorUnlink = _interopRequireDefault(require("@atlaskit/icon/core/migration/link-broken--editor-unlink"));
 var _linkExternalShortcut = _interopRequireDefault(require("@atlaskit/icon/core/migration/link-external--shortcut"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("../../editor-commands/commands");
 var _main = require("../../pm-plugins/main");
@@ -128,7 +130,14 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(opti
         }),
         // Use only the node types existing in the schema ED-6745
         align: 'left',
-        className: activeLinkMark.type.match('INSERT|EDIT_INSERTED') ? 'hyperlink-floating-toolbar' : ''
+        className: activeLinkMark.type.match('INSERT|EDIT_INSERTED') ? 'hyperlink-floating-toolbar' : '',
+        // getDomRef by default uses view.state.selection.from to position the toolbar.
+        // However, when the user clicks in right after the link the view.state.selection.from references to the dom after the selection.
+        // So instead we want to use the activeLinkMark.pos which has been calculated as the position before the click so that would be the link node
+        getDomRef: activeLinkMark && (activeLinkMark.type === 'EDIT_INSERTED' || activeLinkMark.type === 'EDIT') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_3') ? function (view) {
+          var domRef = (0, _utils2.findDomRefAtPos)(activeLinkMark.pos, view.domAtPos.bind(view));
+          return domRef instanceof HTMLElement ? domRef : undefined;
+        } : undefined
       };
       switch (activeLinkMark.type) {
         case 'EDIT':

package/dist/es2019/pm-plugins/main.js

@@ -1,5 +1,5 @@
 import uuid from 'uuid';
-import { handleNavigation, InsertStatus, LinkAction } from '@atlaskit/editor-common/link';
+import { handleNavigation, InsertStatus, LinkAction, getActiveLinkMark } from '@atlaskit/editor-common/link';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { canLinkBeCreatedInRange, shallowEqual } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
@@ -7,15 +7,6 @@ import { PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { ButtonWrapper } from './decorations';
-const isSelectionInsideLink = state => !!state.doc.type.schema.marks.link.isInSet(state.selection.$from.marks());
-const isSelectionAroundLink = state => {
-  const {
-    $from,
-    $to
-  } = state.selection;
-  const node = $from.nodeAfter;
-  return !!node && $from.textOffset === 0 && $to.pos - $from.pos === node.nodeSize && !!state.doc.type.schema.marks.link.isInSet(node.marks);
-};
 const mapTransactionToState = (state, tr) => {
   if (!state) {
     return undefined;
@@ -132,22 +123,6 @@ const toState = (state, action, editorState) => {
   }
   return;
 };
-const getActiveLinkMark = state => {
-  const {
-    selection: {
-      $from
-    }
-  } = state;
-  if (isSelectionInsideLink(state) || isSelectionAroundLink(state)) {
-    const pos = $from.pos - $from.textOffset;
-    const node = state.doc.nodeAt(pos);
-    return node && node.isText ? {
-      node,
-      pos
-    } : undefined;
-  }
-  return undefined;
-};
 const getActiveText = selection => {
   const currentSlice = selection.content();
   if (currentSlice.size === 0) {

package/dist/es2019/ui/toolbar/Toolbar.js

@@ -8,9 +8,11 @@ import { linkMessages, linkToolbarMessages as linkToolbarCommonMessages } from '
 import { LINKPICKER_HEIGHT_IN_PX, RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX } from '@atlaskit/editor-common/ui';
 import { normalizeUrl } from '@atlaskit/editor-common/utils';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import EditIcon from '@atlaskit/icon/core/edit';
 import LinkBrokenIcon from '@atlaskit/icon/core/migration/link-broken--editor-unlink';
 import LinkExternalIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { editInsertedLink, insertLinkWithAnalytics, onClickAwayCallback, onEscapeCallback, removeLink, updateLink } from '../../editor-commands/commands';
 import { stateKey } from '../../pm-plugins/main';
@@ -112,7 +114,14 @@ export const getToolbarConfig = (options, pluginInjectionApi) => (state, intl, p
       nodeType: [state.schema.nodes.text, state.schema.nodes.paragraph, state.schema.nodes.heading, state.schema.nodes.taskItem, state.schema.nodes.decisionItem, state.schema.nodes.caption].filter(nodeType => !!nodeType),
       // Use only the node types existing in the schema ED-6745
       align: 'left',
-      className: activeLinkMark.type.match('INSERT|EDIT_INSERTED') ? 'hyperlink-floating-toolbar' : ''
+      className: activeLinkMark.type.match('INSERT|EDIT_INSERTED') ? 'hyperlink-floating-toolbar' : '',
+      // getDomRef by default uses view.state.selection.from to position the toolbar.
+      // However, when the user clicks in right after the link the view.state.selection.from references to the dom after the selection.
+      // So instead we want to use the activeLinkMark.pos which has been calculated as the position before the click so that would be the link node
+      getDomRef: activeLinkMark && (activeLinkMark.type === 'EDIT_INSERTED' || activeLinkMark.type === 'EDIT') && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_3') ? view => {
+        const domRef = findDomRefAtPos(activeLinkMark.pos, view.domAtPos.bind(view));
+        return domRef instanceof HTMLElement ? domRef : undefined;
+      } : undefined
     };
     switch (activeLinkMark.type) {
       case 'EDIT':

package/dist/esm/pm-plugins/main.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import uuid from 'uuid';
-import { handleNavigation, InsertStatus, LinkAction } from '@atlaskit/editor-common/link';
+import { handleNavigation, InsertStatus, LinkAction, getActiveLinkMark } from '@atlaskit/editor-common/link';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { canLinkBeCreatedInRange, shallowEqual } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
@@ -10,16 +10,6 @@ import { PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { ButtonWrapper } from './decorations';
-var isSelectionInsideLink = function isSelectionInsideLink(state) {
-  return !!state.doc.type.schema.marks.link.isInSet(state.selection.$from.marks());
-};
-var isSelectionAroundLink = function isSelectionAroundLink(state) {
-  var _state$selection = state.selection,
-    $from = _state$selection.$from,
-    $to = _state$selection.$to;
-  var node = $from.nodeAfter;
-  return !!node && $from.textOffset === 0 && $to.pos - $from.pos === node.nodeSize && !!state.doc.type.schema.marks.link.isInSet(node.marks);
-};
 var mapTransactionToState = function mapTransactionToState(state, tr) {
   if (!state) {
     return undefined;
@@ -128,18 +118,6 @@ var toState = function toState(state, action, editorState) {
   }
   return;
 };
-var getActiveLinkMark = function getActiveLinkMark(state) {
-  var $from = state.selection.$from;
-  if (isSelectionInsideLink(state) || isSelectionAroundLink(state)) {
-    var pos = $from.pos - $from.textOffset;
-    var node = state.doc.nodeAt(pos);
-    return node && node.isText ? {
-      node: node,
-      pos: pos
-    } : undefined;
-  }
-  return undefined;
-};
 var getActiveText = function getActiveText(selection) {
   var currentSlice = selection.content();
   if (currentSlice.size === 0) {

package/dist/esm/ui/toolbar/Toolbar.js

@@ -12,9 +12,11 @@ import { linkMessages, linkToolbarMessages as linkToolbarCommonMessages } from '
 import { LINKPICKER_HEIGHT_IN_PX, RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX } from '@atlaskit/editor-common/ui';
 import { normalizeUrl } from '@atlaskit/editor-common/utils';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import EditIcon from '@atlaskit/icon/core/edit';
 import LinkBrokenIcon from '@atlaskit/icon/core/migration/link-broken--editor-unlink';
 import LinkExternalIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { editInsertedLink, insertLinkWithAnalytics, onClickAwayCallback, onEscapeCallback, removeLink, updateLink } from '../../editor-commands/commands';
 import { stateKey } from '../../pm-plugins/main';
@@ -118,7 +120,14 @@ export var getToolbarConfig = function getToolbarConfig(options, pluginInjection
         }),
         // Use only the node types existing in the schema ED-6745
         align: 'left',
-        className: activeLinkMark.type.match('INSERT|EDIT_INSERTED') ? 'hyperlink-floating-toolbar' : ''
+        className: activeLinkMark.type.match('INSERT|EDIT_INSERTED') ? 'hyperlink-floating-toolbar' : '',
+        // getDomRef by default uses view.state.selection.from to position the toolbar.
+        // However, when the user clicks in right after the link the view.state.selection.from references to the dom after the selection.
+        // So instead we want to use the activeLinkMark.pos which has been calculated as the position before the click so that would be the link node
+        getDomRef: activeLinkMark && (activeLinkMark.type === 'EDIT_INSERTED' || activeLinkMark.type === 'EDIT') && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_3') ? function (view) {
+          var domRef = findDomRefAtPos(activeLinkMark.pos, view.domAtPos.bind(view));
+          return domRef instanceof HTMLElement ? domRef : undefined;
+        } : undefined
       };
       switch (activeLinkMark.type) {
         case 'EDIT':

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-hyperlink",
-	"version": "4.3.1",
+	"version": "4.3.3",
 	"description": "Hyperlink plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,18 +35,18 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
 		"@atlaskit/analytics-next": "^11.0.0",
-		"@atlaskit/editor-common": "^102.13.0",
+		"@atlaskit/editor-common": "^102.19.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-card": "^5.4.0",
 		"@atlaskit/editor-plugin-connectivity": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^3.1.0",
-		"@atlaskit/editor-plugin-selection-toolbar": "^2.2.0",
+		"@atlaskit/editor-plugin-selection-toolbar": "^3.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/icon": "^25.0.0",
+		"@atlaskit/icon": "^25.5.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/prosemirror-input-rules": "^3.3.0",
-		"@atlaskit/tmp-editor-statsig": "^4.3.0",
+		"@atlaskit/tmp-editor-statsig": "^4.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"uuid": "^3.1.0"
@@ -107,6 +107,9 @@
 		},
 		"linking_platform_smart_links_in_live_pages": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_3": {
+			"type": "boolean"
 		}
 	}
 }