@atlaskit/editor-plugin-floating-toolbar 3.0.2 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 3.1.0
+
+### Minor Changes
+
+- [#121533](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121533)
+  [`9efef36af09aa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9efef36af09aa) -
+  Wire up the copy functionality in floating toolbar overflow menu
+
+### Patch Changes
+
+- [#121662](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/121662)
+  [`9b32bffcee007`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9b32bffcee007) -
+  [ux] [ED-26870] Allow toolbar height to expand
+- Updated dependencies
+
 ## 3.0.2
 
 ### Patch Changes

package/dist/cjs/floatingToolbarPlugin.js

@@ -21,8 +21,9 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _commands = require("./pm-plugins/commands");
 var _forceFocus = _interopRequireWildcard(require("./pm-plugins/force-focus"));
-var _commands = require("./pm-plugins/toolbar-data/commands");
+var _commands2 = require("./pm-plugins/toolbar-data/commands");
 var _plugin = require("./pm-plugins/toolbar-data/plugin");
 var _pluginKey = require("./pm-plugins/toolbar-data/plugin-key");
 var _utils2 = require("./pm-plugins/utils");
@@ -164,6 +165,11 @@ var floatingToolbarPlugin = exports.floatingToolbarPlugin = function floatingToo
     actions: {
       forceFocusSelector: _forceFocus.forceFocusSelector
     },
+    commands: {
+      copyNode: function copyNode(nodeType) {
+        return (0, _commands.copyNode)(nodeType);
+      }
+    },
     getSharedState: function getSharedState(editorState) {
       var _pluginKey$getState$g, _pluginKey$getState, _pluginKey$getState$g2;
       if (!editorState) {
@@ -399,7 +405,7 @@ function ContentComponent(_ref5) {
       }
     },
     onClose: function onClose() {
-      dispatchCommand((0, _commands.hideConfirmDialog)());
+      dispatchCommand((0, _commands2.hideConfirmDialog)());
       // Need to set focus to Editor here,
       // As when the Confirmation dialog pop up, and user interacts with the dialog, Editor loses focus.
       // So when Confirmation dialog is closed, Editor does not have the focus, then cursor goes to the position 1 of the doc,

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

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.copyNode = void 0;
+var _browser = require("@atlaskit/editor-common/browser");
+var _clipboard = require("@atlaskit/editor-common/clipboard");
+var _copyButton = require("@atlaskit/editor-common/copy-button");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var copyNode = exports.copyNode = function copyNode(nodeType, editorAnalyticsAp) {
+  return function (_ref) {
+    var tr = _ref.tr;
+    // const { tr, schema } = state;
+
+    // This command should only be triggered by the Copy button in the floating toolbar
+    // which is only visible when selection is inside the target node
+    var contentNodeWithPos = (0, _copyButton.getSelectedNodeOrNodeParentByNodeType)({
+      nodeType: nodeType,
+      selection: tr.selection
+    });
+    if (!contentNodeWithPos) {
+      return tr;
+    }
+    var schema = tr.doc.type.schema;
+    var copyToClipboardTr = tr;
+    var domNode = (0, _copyButton.toDOM)(contentNodeWithPos.node, schema);
+    if (domNode) {
+      var div = document.createElement('div');
+      div.appendChild(domNode);
+
+      // if copying inline content
+      if (contentNodeWithPos.node.type.inlineContent) {
+        // The "1 1" refers to the start and end depth of the slice
+        // since we're copying the text inside a paragraph, it will always be 1 1
+        // https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.ts#L32
+        // Ignored via go/ees005
+        // eslint-disable-next-line @atlaskit/editor/no-as-casting
+        div.firstChild.setAttribute('data-pm-slice', '1 1 []');
+      } else {
+        // The "0 0" refers to the start and end depth of the slice
+        // since we're copying the block node only, it will always be 0 0
+        // https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.ts#L32
+        // Ignored via go/ees005
+        // eslint-disable-next-line @atlaskit/editor/no-as-casting
+        div.firstChild.setAttribute('data-pm-slice', '0 0 []');
+      }
+      // ED-17083 safari seems have bugs for extension copy because exntension do not have a child text(innerText) and it will not recognized as html in clipboard, this could be merge into one if this extension fixed children issue or safari fix the copy bug
+      // MEX-2528 safari has a bug related to the mediaSingle node with border or link. The image tag within the clipboard is not recognized as HTML when using the ClipboardItem API. To address this, we have to switch to ClipboardPolyfill
+      if (_browser.browser.safari && tr.selection instanceof _state.NodeSelection && (tr.selection.node.type === schema.nodes.extension || tr.selection.node.type === schema.nodes.mediaSingle)) {
+        (0, _clipboard.copyHTMLToClipboardPolyfill)(div);
+      } else {
+        (0, _clipboard.copyHTMLToClipboard)(div);
+      }
+    }
+    copyToClipboardTr.setMeta('scrollIntoView', false);
+    return copyToClipboardTr;
+  };
+};

package/dist/cjs/ui/Toolbar.js

@@ -433,7 +433,7 @@ var toolbarContainer = function toolbarContainer(scrollable, hasSelect, firstEle
   (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ?
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
   (0, _react2.css)({
-    height: "var(--ds-space-500, 40px)"
+    minHeight: "var(--ds-space-500, 40px)"
   }) : undefined);
 };
 
@@ -488,7 +488,7 @@ var toolbarOverflow = function toolbarOverflow(_ref2) {
     padding: paddingFeatureFlag ? "var(--ds-space-0, 0)".concat(" 0 ", "var(--ds-space-050, 4px)") : "var(--ds-space-0, 0)".concat(" 0 ", "var(--ds-space-600, 48px)"),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '> div': {
-      height: '40px',
+      minHeight: "var(--ds-space-500, 40px)",
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
       '> div:has(+ [data-editor-popup="true"]:last-of-type)': {
         marginRight: "var(--ds-space-100, 8px)"

package/dist/es2019/floatingToolbarPlugin.js

@@ -9,6 +9,7 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import { AllSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { editorExperiment, unstable_editorExperimentParam } from '@atlaskit/tmp-editor-statsig/experiments';
+import { copyNode } from './pm-plugins/commands';
 import forceFocusPlugin, { forceFocusSelector } from './pm-plugins/force-focus';
 import { hideConfirmDialog } from './pm-plugins/toolbar-data/commands';
 import { createPlugin as floatingToolbarDataPluginFactory } from './pm-plugins/toolbar-data/plugin';
@@ -147,6 +148,9 @@ export const floatingToolbarPlugin = ({
     actions: {
       forceFocusSelector
     },
+    commands: {
+      copyNode: nodeType => copyNode(nodeType)
+    },
     getSharedState(editorState) {
       var _pluginKey$getState$g, _pluginKey$getState, _pluginKey$getState$g2;
       if (!editorState) {

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

@@ -0,0 +1,52 @@
+import { browser } from '@atlaskit/editor-common/browser';
+import { copyHTMLToClipboard, copyHTMLToClipboardPolyfill } from '@atlaskit/editor-common/clipboard';
+import { getSelectedNodeOrNodeParentByNodeType, toDOM } from '@atlaskit/editor-common/copy-button';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+export const copyNode = (nodeType, editorAnalyticsAp) => ({
+  tr
+}) => {
+  // const { tr, schema } = state;
+
+  // This command should only be triggered by the Copy button in the floating toolbar
+  // which is only visible when selection is inside the target node
+  const contentNodeWithPos = getSelectedNodeOrNodeParentByNodeType({
+    nodeType,
+    selection: tr.selection
+  });
+  if (!contentNodeWithPos) {
+    return tr;
+  }
+  const schema = tr.doc.type.schema;
+  const copyToClipboardTr = tr;
+  const domNode = toDOM(contentNodeWithPos.node, schema);
+  if (domNode) {
+    const div = document.createElement('div');
+    div.appendChild(domNode);
+
+    // if copying inline content
+    if (contentNodeWithPos.node.type.inlineContent) {
+      // The "1 1" refers to the start and end depth of the slice
+      // since we're copying the text inside a paragraph, it will always be 1 1
+      // https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.ts#L32
+      // Ignored via go/ees005
+      // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      div.firstChild.setAttribute('data-pm-slice', '1 1 []');
+    } else {
+      // The "0 0" refers to the start and end depth of the slice
+      // since we're copying the block node only, it will always be 0 0
+      // https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.ts#L32
+      // Ignored via go/ees005
+      // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      div.firstChild.setAttribute('data-pm-slice', '0 0 []');
+    }
+    // ED-17083 safari seems have bugs for extension copy because exntension do not have a child text(innerText) and it will not recognized as html in clipboard, this could be merge into one if this extension fixed children issue or safari fix the copy bug
+    // MEX-2528 safari has a bug related to the mediaSingle node with border or link. The image tag within the clipboard is not recognized as HTML when using the ClipboardItem API. To address this, we have to switch to ClipboardPolyfill
+    if (browser.safari && tr.selection instanceof NodeSelection && (tr.selection.node.type === schema.nodes.extension || tr.selection.node.type === schema.nodes.mediaSingle)) {
+      copyHTMLToClipboardPolyfill(div);
+    } else {
+      copyHTMLToClipboard(div);
+    }
+  }
+  copyToClipboardTr.setMeta('scrollIntoView', false);
+  return copyToClipboardTr;
+};

package/dist/es2019/ui/Toolbar.js

@@ -395,7 +395,7 @@ css({
 editorExperiment('platform_editor_controls', 'variant1') ?
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
 css({
-  height: "var(--ds-space-500, 40px)"
+  minHeight: "var(--ds-space-500, 40px)"
 }) : undefined);
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
@@ -449,7 +449,7 @@ css({
   padding: paddingFeatureFlag ? `${"var(--ds-space-0, 0)"} 0 ${"var(--ds-space-050, 4px)"}` : `${"var(--ds-space-0, 0)"} 0 ${"var(--ds-space-600, 48px)"}`,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '> div': {
-    height: '40px',
+    minHeight: "var(--ds-space-500, 40px)",
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
     '> div:has(+ [data-editor-popup="true"]:last-of-type)': {
       marginRight: "var(--ds-space-100, 8px)"

package/dist/esm/floatingToolbarPlugin.js

@@ -12,6 +12,7 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import { AllSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { editorExperiment, unstable_editorExperimentParam } from '@atlaskit/tmp-editor-statsig/experiments';
+import { copyNode as _copyNode } from './pm-plugins/commands';
 import forceFocusPlugin, { forceFocusSelector } from './pm-plugins/force-focus';
 import { hideConfirmDialog } from './pm-plugins/toolbar-data/commands';
 import { createPlugin as floatingToolbarDataPluginFactory } from './pm-plugins/toolbar-data/plugin';
@@ -152,6 +153,11 @@ export var floatingToolbarPlugin = function floatingToolbarPlugin(_ref) {
     actions: {
       forceFocusSelector: forceFocusSelector
     },
+    commands: {
+      copyNode: function copyNode(nodeType) {
+        return _copyNode(nodeType);
+      }
+    },
     getSharedState: function getSharedState(editorState) {
       var _pluginKey$getState$g, _pluginKey$getState, _pluginKey$getState$g2;
       if (!editorState) {

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

@@ -0,0 +1,53 @@
+import { browser } from '@atlaskit/editor-common/browser';
+import { copyHTMLToClipboard, copyHTMLToClipboardPolyfill } from '@atlaskit/editor-common/clipboard';
+import { getSelectedNodeOrNodeParentByNodeType, toDOM } from '@atlaskit/editor-common/copy-button';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+export var copyNode = function copyNode(nodeType, editorAnalyticsAp) {
+  return function (_ref) {
+    var tr = _ref.tr;
+    // const { tr, schema } = state;
+
+    // This command should only be triggered by the Copy button in the floating toolbar
+    // which is only visible when selection is inside the target node
+    var contentNodeWithPos = getSelectedNodeOrNodeParentByNodeType({
+      nodeType: nodeType,
+      selection: tr.selection
+    });
+    if (!contentNodeWithPos) {
+      return tr;
+    }
+    var schema = tr.doc.type.schema;
+    var copyToClipboardTr = tr;
+    var domNode = toDOM(contentNodeWithPos.node, schema);
+    if (domNode) {
+      var div = document.createElement('div');
+      div.appendChild(domNode);
+
+      // if copying inline content
+      if (contentNodeWithPos.node.type.inlineContent) {
+        // The "1 1" refers to the start and end depth of the slice
+        // since we're copying the text inside a paragraph, it will always be 1 1
+        // https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.ts#L32
+        // Ignored via go/ees005
+        // eslint-disable-next-line @atlaskit/editor/no-as-casting
+        div.firstChild.setAttribute('data-pm-slice', '1 1 []');
+      } else {
+        // The "0 0" refers to the start and end depth of the slice
+        // since we're copying the block node only, it will always be 0 0
+        // https://github.com/ProseMirror/prosemirror-view/blob/master/src/clipboard.ts#L32
+        // Ignored via go/ees005
+        // eslint-disable-next-line @atlaskit/editor/no-as-casting
+        div.firstChild.setAttribute('data-pm-slice', '0 0 []');
+      }
+      // ED-17083 safari seems have bugs for extension copy because exntension do not have a child text(innerText) and it will not recognized as html in clipboard, this could be merge into one if this extension fixed children issue or safari fix the copy bug
+      // MEX-2528 safari has a bug related to the mediaSingle node with border or link. The image tag within the clipboard is not recognized as HTML when using the ClipboardItem API. To address this, we have to switch to ClipboardPolyfill
+      if (browser.safari && tr.selection instanceof NodeSelection && (tr.selection.node.type === schema.nodes.extension || tr.selection.node.type === schema.nodes.mediaSingle)) {
+        copyHTMLToClipboardPolyfill(div);
+      } else {
+        copyHTMLToClipboard(div);
+      }
+    }
+    copyToClipboardTr.setMeta('scrollIntoView', false);
+    return copyToClipboardTr;
+  };
+};

package/dist/esm/ui/Toolbar.js

@@ -426,7 +426,7 @@ var toolbarContainer = function toolbarContainer(scrollable, hasSelect, firstEle
   editorExperiment('platform_editor_controls', 'variant1') ?
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
   css({
-    height: "var(--ds-space-500, 40px)"
+    minHeight: "var(--ds-space-500, 40px)"
   }) : undefined);
 };
 
@@ -481,7 +481,7 @@ var toolbarOverflow = function toolbarOverflow(_ref2) {
     padding: paddingFeatureFlag ? "var(--ds-space-0, 0)".concat(" 0 ", "var(--ds-space-050, 4px)") : "var(--ds-space-0, 0)".concat(" 0 ", "var(--ds-space-600, 48px)"),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '> div': {
-      height: '40px',
+      minHeight: "var(--ds-space-500, 40px)",
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
       '> div:has(+ [data-editor-popup="true"]:last-of-type)': {
         marginRight: "var(--ds-space-100, 8px)"

package/dist/types/pm-plugins/commands.d.ts

@@ -0,0 +1,6 @@
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { NodeType } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+export declare const copyNode: (nodeType: NodeType | Array<NodeType>, editorAnalyticsAp?: EditorAnalyticsAPI | undefined) => ({ tr }: {
+    tr: Transaction;
+}) => Transaction;

package/dist/types-ts4.5/pm-plugins/commands.d.ts

@@ -0,0 +1,6 @@
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { NodeType } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+export declare const copyNode: (nodeType: NodeType | Array<NodeType>, editorAnalyticsAp?: EditorAnalyticsAPI | undefined) => ({ tr }: {
+    tr: Transaction;
+}) => Transaction;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-floating-toolbar",
-	"version": "3.0.2",
+	"version": "3.1.0",
 	"description": "Floating toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -25,20 +25,20 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/adf-utils": "^19.18.0",
+		"@atlaskit/adf-utils": "^19.19.0",
 		"@atlaskit/button": "^21.1.0",
 		"@atlaskit/checkbox": "^17.0.0",
-		"@atlaskit/editor-common": "^100.4.0",
+		"@atlaskit/editor-common": "^100.5.0",
 		"@atlaskit/editor-palette": "2.0.0",
-		"@atlaskit/editor-plugin-block-controls": "^3.1.0",
+		"@atlaskit/editor-plugin-block-controls": "^3.2.0",
 		"@atlaskit/editor-plugin-context-panel": "^3.0.0",
 		"@atlaskit/editor-plugin-copy-button": "^2.0.0",
 		"@atlaskit/editor-plugin-decorations": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
-		"@atlaskit/editor-plugin-emoji": "^3.0.0",
-		"@atlaskit/editor-plugin-extension": "^4.0.0",
-		"@atlaskit/editor-plugin-table": "^10.2.0",
+		"@atlaskit/editor-plugin-emoji": "^3.1.0",
+		"@atlaskit/editor-plugin-extension": "^4.1.0",
+		"@atlaskit/editor-plugin-table": "^10.3.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/emoji": "^68.0.0",
 		"@atlaskit/icon": "^24.1.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/select": "^20.0.0",
 		"@atlaskit/theme": "^17.0.0",
-		"@atlaskit/tmp-editor-statsig": "^3.3.0",
+		"@atlaskit/tmp-editor-statsig": "^3.4.0",
 		"@atlaskit/tokens": "^4.3.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",