@atlaskit/editor-plugin-block-menu 0.0.6 → 0.0.7

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 0.0.7
+
+### Patch Changes
+
+- [`31fc6b9e10762`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/31fc6b9e10762) -
+  [ux] ED-28592 ED-28592:Add copy block menu item to block menu
+- Updated dependencies
+
 ## 0.0.6
 
 ### Patch Changes

package/dist/cjs/ui/block-menu-components.js

@@ -14,6 +14,7 @@ var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-
 var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
 var _listBulleted = _interopRequireDefault(require("@atlaskit/icon/core/list-bulleted"));
 var _task = _interopRequireDefault(require("@atlaskit/icon/core/task"));
+var _copyBlock = _interopRequireDefault(require("./copy-block"));
 var _moveDown = require("./move-down");
 var _moveUp = require("./move-up");
 var getMoveUpMoveDownMenuComponents = function getMoveUpMoveDownMenuComponents(api) {
@@ -60,7 +61,7 @@ var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockM
     }
   }, {
     type: 'block-menu-section',
-    key: 'block-menu-section-move-up-down',
+    key: 'block-menu-section-copy',
     rank: 200,
     component: function component(_ref2) {
       var children = _ref2.children;
@@ -68,9 +69,22 @@ var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockM
         hasSeparator: true
       }, children);
     }
+  }, {
+    type: 'block-menu-item',
+    key: 'block-menu-copy-block',
+    parent: {
+      type: 'block-menu-section',
+      key: 'block-menu-section-copy',
+      rank: 200
+    },
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_copyBlock.default, {
+        api: api
+      });
+    }
   }, {
     type: 'block-menu-section',
-    key: 'block-menu-section-delete',
+    key: 'block-menu-section-move-up-down',
     rank: 300,
     component: function component(_ref3) {
       var children = _ref3.children;
@@ -78,6 +92,16 @@ var getBlockMenuComponents = exports.getBlockMenuComponents = function getBlockM
         hasSeparator: true
       }, children);
     }
+  }, {
+    type: 'block-menu-section',
+    key: 'block-menu-section-delete',
+    rank: 400,
+    component: function component(_ref4) {
+      var children = _ref4.children;
+      return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, children);
+    }
   }, {
     type: 'block-menu-nested',
     key: 'nested-menu',

package/dist/cjs/ui/copy-block.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _blockMenu = require("@atlaskit/editor-common/block-menu");
+var _clipboard = require("@atlaskit/editor-common/clipboard");
+var _copyButton = require("@atlaskit/editor-common/copy-button");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils = require("@atlaskit/editor-tables/utils");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
+var toDOMFromFragment = function toDOMFromFragment(fragment, schema) {
+  return _model.DOMSerializer.fromSchema(schema).serializeFragment(fragment);
+};
+var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
+  var api = _ref.api;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var copyHandler = function copyHandler(event) {
+    var _api$selection;
+    // prevent click event from bubbling up to the ancestor elements
+    event.stopPropagation();
+    // get the current selection
+    var selection = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.sharedState) === null || _api$selection === void 0 || (_api$selection = _api$selection.currentState()) === null || _api$selection === void 0 ? void 0 : _api$selection.selection;
+    if (selection) {
+      var schema = selection.$from.doc.type.schema;
+      // for texts and inline nodes
+      if (selection instanceof _state.TextSelection) {
+        var _fragment;
+        var fragment = selection === null || selection === void 0 ? void 0 : selection.content().content;
+        if (!fragment) {
+          return;
+        }
+        // if text is inside of a layout column, the selection contains the layoutSection and layoutColumn for some reason
+        // But the layoutSection only contains the layoutColumn that the selected text is in, hence we can use the .firstChild
+        if ((_fragment = fragment) !== null && _fragment !== void 0 && _fragment.firstChild && fragment.firstChild.type.name === 'layoutSection') {
+          var layoutSectionNode = fragment.firstChild;
+          var layoutColumnNode = layoutSectionNode.firstChild;
+          var layoutContent = layoutColumnNode === null || layoutColumnNode === void 0 ? void 0 : layoutColumnNode.firstChild;
+          fragment = (layoutContent === null || layoutContent === void 0 ? void 0 : layoutContent.content) || _model.Fragment.empty;
+        }
+        var domNode = toDOMFromFragment(fragment, schema);
+        var div = document.createElement('div');
+        div.appendChild(domNode);
+        (0, _clipboard.copyHTMLToClipboard)(div);
+      }
+
+      // for table
+      if ((0, _utils.isTableSelected)(selection)) {
+        var nodeType = schema.nodes.table;
+        var tableNode = selection.$anchorCell.node(-1);
+        if (!tableNode) {
+          return;
+        }
+        var _domNode = (0, _copyButton.toDOM)(tableNode, schema);
+        (0, _copyButton.copyDomNode)(_domNode, nodeType, selection);
+      }
+
+      // for other nodes
+      if (selection instanceof _state.NodeSelection) {
+        var _nodeType = selection.node.type;
+        var _domNode2 = (0, _copyButton.toDOM)(selection.node, schema);
+        (0, _copyButton.copyDomNode)(_domNode2, _nodeType, selection);
+      }
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_copy.default, {
+      label: ""
+    }),
+    onClick: function onClick(e) {
+      return copyHandler(e);
+    }
+  }, formatMessage(_blockMenu.messages.copyBlock));
+};
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(CopyBlockMenuItem);

package/dist/es2019/ui/block-menu-components.js

@@ -6,6 +6,7 @@ import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import ListBulletedIcon from '@atlaskit/icon/core/list-bulleted';
 import TaskIcon from '@atlaskit/icon/core/task';
+import CopyBlockMenuItem from './copy-block';
 import { MoveDownDropdownItem } from './move-down';
 import { MoveUpDropdownItem } from './move-up';
 const getMoveUpMoveDownMenuComponents = api => {
@@ -49,7 +50,7 @@ export const getBlockMenuComponents = api => {
     }
   }, {
     type: 'block-menu-section',
-    key: 'block-menu-section-move-up-down',
+    key: 'block-menu-section-copy',
     rank: 200,
     component: ({
       children
@@ -58,9 +59,22 @@ export const getBlockMenuComponents = api => {
         hasSeparator: true
       }, children);
     }
+  }, {
+    type: 'block-menu-item',
+    key: 'block-menu-copy-block',
+    parent: {
+      type: 'block-menu-section',
+      key: 'block-menu-section-copy',
+      rank: 200
+    },
+    component: () => {
+      return /*#__PURE__*/React.createElement(CopyBlockMenuItem, {
+        api: api
+      });
+    }
   }, {
     type: 'block-menu-section',
-    key: 'block-menu-section-delete',
+    key: 'block-menu-section-move-up-down',
     rank: 300,
     component: ({
       children
@@ -69,6 +83,17 @@ export const getBlockMenuComponents = api => {
         hasSeparator: true
       }, children);
     }
+  }, {
+    type: 'block-menu-section',
+    key: 'block-menu-section-delete',
+    rank: 400,
+    component: ({
+      children
+    }) => {
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, children);
+    }
   }, {
     type: 'block-menu-nested',
     key: 'nested-menu',

package/dist/es2019/ui/copy-block.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { injectIntl, useIntl } from 'react-intl-next';
+import { messages } from '@atlaskit/editor-common/block-menu';
+import { copyHTMLToClipboard } from '@atlaskit/editor-common/clipboard';
+import { toDOM, copyDomNode } from '@atlaskit/editor-common/copy-button';
+import { Fragment, DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { isTableSelected } from '@atlaskit/editor-tables/utils';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import CopyIcon from '@atlaskit/icon/core/copy';
+const toDOMFromFragment = (fragment, schema) => {
+  return DOMSerializer.fromSchema(schema).serializeFragment(fragment);
+};
+const CopyBlockMenuItem = ({
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const copyHandler = event => {
+    var _api$selection, _api$selection$shared, _api$selection$shared2;
+    // prevent click event from bubbling up to the ancestor elements
+    event.stopPropagation();
+    // get the current selection
+    const selection = api === null || api === void 0 ? void 0 : (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : (_api$selection$shared = _api$selection.sharedState) === null || _api$selection$shared === void 0 ? void 0 : (_api$selection$shared2 = _api$selection$shared.currentState()) === null || _api$selection$shared2 === void 0 ? void 0 : _api$selection$shared2.selection;
+    if (selection) {
+      const schema = selection.$from.doc.type.schema;
+      // for texts and inline nodes
+      if (selection instanceof TextSelection) {
+        var _fragment;
+        let fragment = selection === null || selection === void 0 ? void 0 : selection.content().content;
+        if (!fragment) {
+          return;
+        }
+        // if text is inside of a layout column, the selection contains the layoutSection and layoutColumn for some reason
+        // But the layoutSection only contains the layoutColumn that the selected text is in, hence we can use the .firstChild
+        if ((_fragment = fragment) !== null && _fragment !== void 0 && _fragment.firstChild && fragment.firstChild.type.name === 'layoutSection') {
+          const layoutSectionNode = fragment.firstChild;
+          const layoutColumnNode = layoutSectionNode.firstChild;
+          const layoutContent = layoutColumnNode === null || layoutColumnNode === void 0 ? void 0 : layoutColumnNode.firstChild;
+          fragment = (layoutContent === null || layoutContent === void 0 ? void 0 : layoutContent.content) || Fragment.empty;
+        }
+        const domNode = toDOMFromFragment(fragment, schema);
+        const div = document.createElement('div');
+        div.appendChild(domNode);
+        copyHTMLToClipboard(div);
+      }
+
+      // for table
+      if (isTableSelected(selection)) {
+        const nodeType = schema.nodes.table;
+        const tableNode = selection.$anchorCell.node(-1);
+        if (!tableNode) {
+          return;
+        }
+        const domNode = toDOM(tableNode, schema);
+        copyDomNode(domNode, nodeType, selection);
+      }
+
+      // for other nodes
+      if (selection instanceof NodeSelection) {
+        const nodeType = selection.node.type;
+        const domNode = toDOM(selection.node, schema);
+        copyDomNode(domNode, nodeType, selection);
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(CopyIcon, {
+      label: ""
+    }),
+    onClick: e => copyHandler(e)
+  }, formatMessage(messages.copyBlock));
+};
+export default injectIntl(CopyBlockMenuItem);

package/dist/esm/ui/block-menu-components.js

@@ -7,6 +7,7 @@ import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import ListBulletedIcon from '@atlaskit/icon/core/list-bulleted';
 import TaskIcon from '@atlaskit/icon/core/task';
+import CopyBlockMenuItem from './copy-block';
 import { MoveDownDropdownItem } from './move-down';
 import { MoveUpDropdownItem } from './move-up';
 var getMoveUpMoveDownMenuComponents = function getMoveUpMoveDownMenuComponents(api) {
@@ -53,7 +54,7 @@ export var getBlockMenuComponents = function getBlockMenuComponents(api) {
     }
   }, {
     type: 'block-menu-section',
-    key: 'block-menu-section-move-up-down',
+    key: 'block-menu-section-copy',
     rank: 200,
     component: function component(_ref2) {
       var children = _ref2.children;
@@ -61,9 +62,22 @@ export var getBlockMenuComponents = function getBlockMenuComponents(api) {
         hasSeparator: true
       }, children);
     }
+  }, {
+    type: 'block-menu-item',
+    key: 'block-menu-copy-block',
+    parent: {
+      type: 'block-menu-section',
+      key: 'block-menu-section-copy',
+      rank: 200
+    },
+    component: function component() {
+      return /*#__PURE__*/React.createElement(CopyBlockMenuItem, {
+        api: api
+      });
+    }
   }, {
     type: 'block-menu-section',
-    key: 'block-menu-section-delete',
+    key: 'block-menu-section-move-up-down',
     rank: 300,
     component: function component(_ref3) {
       var children = _ref3.children;
@@ -71,6 +85,16 @@ export var getBlockMenuComponents = function getBlockMenuComponents(api) {
         hasSeparator: true
       }, children);
     }
+  }, {
+    type: 'block-menu-section',
+    key: 'block-menu-section-delete',
+    rank: 400,
+    component: function component(_ref4) {
+      var children = _ref4.children;
+      return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
+        hasSeparator: true
+      }, children);
+    }
   }, {
     type: 'block-menu-nested',
     key: 'nested-menu',

package/dist/esm/ui/copy-block.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { injectIntl, useIntl } from 'react-intl-next';
+import { messages } from '@atlaskit/editor-common/block-menu';
+import { copyHTMLToClipboard } from '@atlaskit/editor-common/clipboard';
+import { toDOM, copyDomNode } from '@atlaskit/editor-common/copy-button';
+import { Fragment, DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { isTableSelected } from '@atlaskit/editor-tables/utils';
+import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import CopyIcon from '@atlaskit/icon/core/copy';
+var toDOMFromFragment = function toDOMFromFragment(fragment, schema) {
+  return DOMSerializer.fromSchema(schema).serializeFragment(fragment);
+};
+var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
+  var api = _ref.api;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var copyHandler = function copyHandler(event) {
+    var _api$selection;
+    // prevent click event from bubbling up to the ancestor elements
+    event.stopPropagation();
+    // get the current selection
+    var selection = api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 || (_api$selection = _api$selection.sharedState) === null || _api$selection === void 0 || (_api$selection = _api$selection.currentState()) === null || _api$selection === void 0 ? void 0 : _api$selection.selection;
+    if (selection) {
+      var schema = selection.$from.doc.type.schema;
+      // for texts and inline nodes
+      if (selection instanceof TextSelection) {
+        var _fragment;
+        var fragment = selection === null || selection === void 0 ? void 0 : selection.content().content;
+        if (!fragment) {
+          return;
+        }
+        // if text is inside of a layout column, the selection contains the layoutSection and layoutColumn for some reason
+        // But the layoutSection only contains the layoutColumn that the selected text is in, hence we can use the .firstChild
+        if ((_fragment = fragment) !== null && _fragment !== void 0 && _fragment.firstChild && fragment.firstChild.type.name === 'layoutSection') {
+          var layoutSectionNode = fragment.firstChild;
+          var layoutColumnNode = layoutSectionNode.firstChild;
+          var layoutContent = layoutColumnNode === null || layoutColumnNode === void 0 ? void 0 : layoutColumnNode.firstChild;
+          fragment = (layoutContent === null || layoutContent === void 0 ? void 0 : layoutContent.content) || Fragment.empty;
+        }
+        var domNode = toDOMFromFragment(fragment, schema);
+        var div = document.createElement('div');
+        div.appendChild(domNode);
+        copyHTMLToClipboard(div);
+      }
+
+      // for table
+      if (isTableSelected(selection)) {
+        var nodeType = schema.nodes.table;
+        var tableNode = selection.$anchorCell.node(-1);
+        if (!tableNode) {
+          return;
+        }
+        var _domNode = toDOM(tableNode, schema);
+        copyDomNode(_domNode, nodeType, selection);
+      }
+
+      // for other nodes
+      if (selection instanceof NodeSelection) {
+        var _nodeType = selection.node.type;
+        var _domNode2 = toDOM(selection.node, schema);
+        copyDomNode(_domNode2, _nodeType, selection);
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(CopyIcon, {
+      label: ""
+    }),
+    onClick: function onClick(e) {
+      return copyHandler(e);
+    }
+  }, formatMessage(messages.copyBlock));
+};
+export default injectIntl(CopyBlockMenuItem);

package/dist/types/blockMenuPluginType.d.ts

@@ -1,8 +1,13 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
+import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 export type BlockMenuPlugin = NextEditorPlugin<'blockMenu', {
-    dependencies: [OptionalPlugin<BlockControlsPlugin>, OptionalPlugin<UserIntentPlugin>];
+    dependencies: [
+        OptionalPlugin<BlockControlsPlugin>,
+        OptionalPlugin<UserIntentPlugin>,
+        OptionalPlugin<SelectionPlugin>
+    ];
     actions: {
         registerBlockMenuComponents: (blockMenuComponents: Array<RegisterBlockMenuComponent>) => void;
         getBlockMenuComponents: () => Array<RegisterBlockMenuComponent>;

package/dist/types/ui/copy-block.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockMenuPlugin } from '../blockMenuPluginType';
+interface CopyBlockMenuItemProps {
+    api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
+}
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<CopyBlockMenuItemProps & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<CopyBlockMenuItemProps & WrappedComponentProps>;
+};
+export default _default;

package/dist/types-ts4.5/blockMenuPluginType.d.ts

@@ -1,10 +1,12 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
+import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 export type BlockMenuPlugin = NextEditorPlugin<'blockMenu', {
     dependencies: [
         OptionalPlugin<BlockControlsPlugin>,
-        OptionalPlugin<UserIntentPlugin>
+        OptionalPlugin<UserIntentPlugin>,
+        OptionalPlugin<SelectionPlugin>
     ];
     actions: {
         registerBlockMenuComponents: (blockMenuComponents: Array<RegisterBlockMenuComponent>) => void;

package/dist/types-ts4.5/ui/copy-block.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockMenuPlugin } from '../blockMenuPluginType';
+interface CopyBlockMenuItemProps {
+    api: ExtractInjectionAPI<BlockMenuPlugin> | undefined;
+}
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<CopyBlockMenuItemProps & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<CopyBlockMenuItemProps & WrappedComponentProps>;
+};
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "0.0.6",
+	"version": "0.0.7",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -39,7 +39,7 @@
 		"@atlaskit/editor-shared-styles": "^3.6.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/editor-toolbar": "^0.3.0",
-		"@atlaskit/icon": "^27.12.0",
+		"@atlaskit/icon": "^28.0.0",
 		"@atlaskit/icon-lab": "^5.6.0",
 		"@atlaskit/primitives": "^14.11.0",
 		"@atlaskit/tokens": "^6.0.0",

package/tsconfig.json

@@ -1,8 +1,5 @@
 {
 	"extends": "../../../tsconfig.json",
-	"include": [
-		"src/**/*.ts",
-		"src/**/*.tsx"
-	],
+	"include": ["src/**/*.ts", "src/**/*.tsx", "../editor-common/src/block-menu/messages.ts"],
 	"compilerOptions": {}
 }