@atlaskit/editor-plugin-synced-block 27.0.0 → 27.0.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 27.0.1
+
+### Patch Changes
+
+- [`ab1712cdf840c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ab1712cdf840c) -
+  Select reference synced blocks when clicking anywhere in the block under
+  platform_editor_blocks_patch_11.
+- Updated dependencies
+
 ## 27.0.0
 
 ### Patch Changes

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

@@ -19,13 +19,9 @@ var getSelectedReference = function getSelectedReference(view) {
   return reference && view.dom.contains(reference) ? reference : null;
 };
 var createReferenceSelectionView = exports.createReferenceSelectionView = function createReferenceSelectionView(view) {
-  var syncReferenceSelection = function syncReferenceSelection() {
+  var syncReferenceSelection = function syncReferenceSelection(reference) {
     var _doc$nodeAt;
-    if (!view.editable) {
-      return;
-    }
-    var reference = getSelectedReference(view);
-    if (!reference) {
+    if (!view.editable || !reference) {
       return;
     }
     var pos = view.posAtDOM(reference, 0);
@@ -40,10 +36,29 @@ var createReferenceSelectionView = exports.createReferenceSelectionView = functi
     // Track the containing atom without focusing the editor or clearing highlighted text.
     view.dispatch(view.state.tr.setSelection(_state.NodeSelection.create(doc, pos)));
   };
-  var unbind = (0, _bindEventListener.bind)(view.dom.ownerDocument, {
+  var unbind = (0, _bindEventListener.bindAll)(view.dom.ownerDocument, [{
     type: 'selectionchange',
-    listener: syncReferenceSelection
-  });
+    listener: function listener() {
+      return syncReferenceSelection(getSelectedReference(view));
+    }
+  }, {
+    type: 'click',
+    listener: function listener(event) {
+      if (event.button !== 0 || !view.editable) {
+        return;
+      }
+      var target = event.target instanceof Element ? event.target : null;
+      var reference = target === null || target === void 0 ? void 0 : target.closest(".".concat(_syncBlock.SyncBlockSharedCssClassName.prefix));
+      if (!reference || !view.dom.contains(reference)) {
+        return;
+      }
+      // Edge clicks never create a native selection inside the renderer.
+      syncReferenceSelection(reference);
+      if (!(target !== null && target !== void 0 && target.closest(".".concat(_syncBlock.SyncBlockSharedCssClassName.renderer))) && !(target !== null && target !== void 0 && target.closest(".".concat(_syncBlock.SyncBlockLabelSharedCssClassName.labelClassName)))) {
+        view.focus();
+      }
+    }
+  }]);
   return {
     destroy: unbind
   };

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

@@ -1,5 +1,5 @@
-import { bind } from 'bind-event-listener';
-import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/styles/sync-block';
+import { bindAll } from 'bind-event-listener';
+import { SyncBlockSharedCssClassName, SyncBlockLabelSharedCssClassName } from '@atlaskit/editor-common/styles/sync-block';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 const getSelectedReference = view => {
   const selection = view.dom.ownerDocument.getSelection();
@@ -13,13 +13,9 @@ const getSelectedReference = view => {
   return reference && view.dom.contains(reference) ? reference : null;
 };
 export const createReferenceSelectionView = view => {
-  const syncReferenceSelection = () => {
+  const syncReferenceSelection = reference => {
     var _doc$nodeAt;
-    if (!view.editable) {
-      return;
-    }
-    const reference = getSelectedReference(view);
-    if (!reference) {
+    if (!view.editable || !reference) {
       return;
     }
     const pos = view.posAtDOM(reference, 0);
@@ -35,10 +31,27 @@ export const createReferenceSelectionView = view => {
     // Track the containing atom without focusing the editor or clearing highlighted text.
     view.dispatch(view.state.tr.setSelection(NodeSelection.create(doc, pos)));
   };
-  const unbind = bind(view.dom.ownerDocument, {
+  const unbind = bindAll(view.dom.ownerDocument, [{
     type: 'selectionchange',
-    listener: syncReferenceSelection
-  });
+    listener: () => syncReferenceSelection(getSelectedReference(view))
+  }, {
+    type: 'click',
+    listener: event => {
+      if (event.button !== 0 || !view.editable) {
+        return;
+      }
+      const target = event.target instanceof Element ? event.target : null;
+      const reference = target === null || target === void 0 ? void 0 : target.closest(`.${SyncBlockSharedCssClassName.prefix}`);
+      if (!reference || !view.dom.contains(reference)) {
+        return;
+      }
+      // Edge clicks never create a native selection inside the renderer.
+      syncReferenceSelection(reference);
+      if (!(target !== null && target !== void 0 && target.closest(`.${SyncBlockSharedCssClassName.renderer}`)) && !(target !== null && target !== void 0 && target.closest(`.${SyncBlockLabelSharedCssClassName.labelClassName}`))) {
+        view.focus();
+      }
+    }
+  }]);
   return {
     destroy: unbind
   };

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

@@ -1,5 +1,5 @@
-import { bind } from 'bind-event-listener';
-import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/styles/sync-block';
+import { bindAll } from 'bind-event-listener';
+import { SyncBlockSharedCssClassName, SyncBlockLabelSharedCssClassName } from '@atlaskit/editor-common/styles/sync-block';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 var getSelectedReference = function getSelectedReference(view) {
   var selection = view.dom.ownerDocument.getSelection();
@@ -13,13 +13,9 @@ var getSelectedReference = function getSelectedReference(view) {
   return reference && view.dom.contains(reference) ? reference : null;
 };
 export var createReferenceSelectionView = function createReferenceSelectionView(view) {
-  var syncReferenceSelection = function syncReferenceSelection() {
+  var syncReferenceSelection = function syncReferenceSelection(reference) {
     var _doc$nodeAt;
-    if (!view.editable) {
-      return;
-    }
-    var reference = getSelectedReference(view);
-    if (!reference) {
+    if (!view.editable || !reference) {
       return;
     }
     var pos = view.posAtDOM(reference, 0);
@@ -34,10 +30,29 @@ export var createReferenceSelectionView = function createReferenceSelectionView(
     // Track the containing atom without focusing the editor or clearing highlighted text.
     view.dispatch(view.state.tr.setSelection(NodeSelection.create(doc, pos)));
   };
-  var unbind = bind(view.dom.ownerDocument, {
+  var unbind = bindAll(view.dom.ownerDocument, [{
     type: 'selectionchange',
-    listener: syncReferenceSelection
-  });
+    listener: function listener() {
+      return syncReferenceSelection(getSelectedReference(view));
+    }
+  }, {
+    type: 'click',
+    listener: function listener(event) {
+      if (event.button !== 0 || !view.editable) {
+        return;
+      }
+      var target = event.target instanceof Element ? event.target : null;
+      var reference = target === null || target === void 0 ? void 0 : target.closest(".".concat(SyncBlockSharedCssClassName.prefix));
+      if (!reference || !view.dom.contains(reference)) {
+        return;
+      }
+      // Edge clicks never create a native selection inside the renderer.
+      syncReferenceSelection(reference);
+      if (!(target !== null && target !== void 0 && target.closest(".".concat(SyncBlockSharedCssClassName.renderer))) && !(target !== null && target !== void 0 && target.closest(".".concat(SyncBlockLabelSharedCssClassName.labelClassName)))) {
+        view.focus();
+      }
+    }
+  }]);
   return {
     destroy: unbind
   };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "27.0.0",
+	"version": "27.0.1",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",