@atlaskit/editor-plugin-block-controls 3.8.5 → 3.8.6

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.8.6
+
+### Patch Changes
+
+- [#137780](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137780)
+  [`6940941e679c5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6940941e679c5) -
+  Move style decoration to own plugin
+- Updated dependencies
+
 ## 3.8.5
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.blockControlsPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _selection = require("@atlaskit/editor-common/selection");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -13,6 +14,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _moveNode = require("./editor-commands/move-node");
 var _moveToLayout = require("./editor-commands/move-to-layout");
+var _firstNodeDecPlugin = require("./pm-plugins/first-node-dec-plugin");
 var _main = require("./pm-plugins/main");
 var _getSelection = require("./pm-plugins/utils/getSelection");
 var _blockMenu = _interopRequireDefault(require("./ui/block-menu"));
@@ -25,7 +27,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
   return {
     name: 'blockControls',
     pmPlugins: function pmPlugins() {
-      return [{
+      var plugins = [{
         name: 'blockControlsPmPlugin',
         plugin: function plugin(_ref2) {
           var getIntl = _ref2.getIntl,
@@ -33,6 +35,13 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
           return (0, _main.createPlugin)(api, getIntl, nodeViewPortalProviderAPI);
         }
       }];
+      var controlsPlugins = [{
+        name: 'firstNodeDec',
+        plugin: function plugin() {
+          return (0, _firstNodeDecPlugin.firstNodeDecPlugin)();
+        }
+      }];
+      return [].concat(plugins, (0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? controlsPlugins : []));
     },
     commands: {
       moveNode: (0, _moveNode.moveNode)(api),

package/dist/cjs/pm-plugins/decorations-anchor.js

@@ -97,9 +97,7 @@ var nodeDecorations = exports.nodeDecorations = function nodeDecorations(newStat
     if (shouldIgnoreNode(node, ignore_nodes, depth, parent)) {
       return shouldDescend; //skip over, don't consider it a valid depth
     }
-    var anchorStyles = pos === 0 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? // why margin-top:0? well it's not possible using CSS to select the first node in the document while excluding n number of nodes, in this case
-    // we're rendering quick insert button and drag handle. For now override margin-top to 0
-    "anchor-name: ".concat(anchorName, ";margin-top:0px;") : "anchor-name: ".concat(anchorName, ";");
+    var anchorStyles = "anchor-name: ".concat(anchorName, ";");
     decs.push(_view.Decoration.node(pos, pos + node.nodeSize, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
       style: anchorStyles
     }, 'data-drag-handler-anchor-name', anchorName), 'data-drag-handler-node-type', nodeTypeWithLevel), 'data-drag-handler-anchor-depth', "".concat(depth)), {

package/dist/cjs/pm-plugins/decorations-drag-handle.js

@@ -54,9 +54,9 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
       isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
     }
     /*
-    	* We disable mouseover event to fix flickering issue on hover
-    	* However, the tooltip for nested drag handle is no long working.
-    	*/
+     * We disable mouseover event to fix flickering issue on hover
+     * However, the tooltip for nested drag handle is no long working.
+     */
     if (newPos === undefined || !isTopLevelNode) {
       // This will also hide the tooltip.
       unbind = (0, _bindEventListener.bind)(element, {

package/dist/cjs/pm-plugins/first-node-dec-plugin.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.firstNodeDecPluginKey = exports.firstNodeDecPlugin = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _transform = require("@atlaskit/editor-prosemirror/transform");
+var _view = require("@atlaskit/editor-prosemirror/view");
+var firstNodeDecPluginKey = exports.firstNodeDecPluginKey = new _state.PluginKey('firstNodeDec');
+var createFirstNodeDecSet = function createFirstNodeDecSet(state) {
+  ;
+  var firstNode = state.doc.firstChild;
+  if (!firstNode) {
+    return _view.DecorationSet.empty;
+  }
+  return _view.DecorationSet.create(state.doc, [_view.Decoration.node(0, firstNode.nodeSize, {
+    style: 'margin-top: 0'
+  })]);
+};
+var firstNodeDecPlugin = exports.firstNodeDecPlugin = function firstNodeDecPlugin() {
+  return new _safePlugin.SafePlugin({
+    key: firstNodeDecPluginKey,
+    state: {
+      init: function init(_, state) {
+        return createFirstNodeDecSet(state);
+      },
+      apply: function apply(tr, currentState, _, newState) {
+        var isDocChanged = tr.docChanged && tr.steps.some(function (step) {
+          return step instanceof _transform.ReplaceStep || step instanceof _transform.ReplaceAroundStep;
+        });
+        // Reapply decorations if there are any steps that modify the document
+        if (isDocChanged) {
+          return createFirstNodeDecSet(newState);
+        }
+        return currentState;
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        return firstNodeDecPluginKey.getState(state);
+      }
+    }
+  });
+};

package/dist/es2019/blockControlsPlugin.js

@@ -5,6 +5,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { moveNode } from './editor-commands/move-node';
 import { moveToLayout } from './editor-commands/move-to-layout';
+import { firstNodeDecPlugin } from './pm-plugins/first-node-dec-plugin';
 import { createPlugin, key } from './pm-plugins/main';
 import { selectNode } from './pm-plugins/utils/getSelection';
 import BlockMenu from './ui/block-menu';
@@ -15,13 +16,18 @@ export const blockControlsPlugin = ({
 }) => ({
   name: 'blockControls',
   pmPlugins() {
-    return [{
+    const plugins = [{
       name: 'blockControlsPmPlugin',
       plugin: ({
         getIntl,
         nodeViewPortalProviderAPI
       }) => createPlugin(api, getIntl, nodeViewPortalProviderAPI)
     }];
+    const controlsPlugins = [{
+      name: 'firstNodeDec',
+      plugin: () => firstNodeDecPlugin()
+    }];
+    return [...plugins, ...(editorExperiment('platform_editor_controls', 'variant1') ? controlsPlugins : [])];
   },
   commands: {
     moveNode: moveNode(api),

package/dist/es2019/pm-plugins/decorations-anchor.js

@@ -87,10 +87,7 @@ export const nodeDecorations = (newState, from, to) => {
     if (shouldIgnoreNode(node, ignore_nodes, depth, parent)) {
       return shouldDescend; //skip over, don't consider it a valid depth
     }
-    const anchorStyles = pos === 0 && editorExperiment('platform_editor_controls', 'variant1') ?
-    // why margin-top:0? well it's not possible using CSS to select the first node in the document while excluding n number of nodes, in this case
-    // we're rendering quick insert button and drag handle. For now override margin-top to 0
-    `anchor-name: ${anchorName};margin-top:0px;` : `anchor-name: ${anchorName};`;
+    const anchorStyles = `anchor-name: ${anchorName};`;
     decs.push(Decoration.node(pos, pos + node.nodeSize, {
       style: anchorStyles,
       ['data-drag-handler-anchor-name']: anchorName,

package/dist/es2019/pm-plugins/decorations-drag-handle.js

@@ -45,9 +45,9 @@ export const dragHandleDecoration = (api, formatMessage, pos, anchorName, nodeTy
       isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
     }
     /*
-    	* We disable mouseover event to fix flickering issue on hover
-    	* However, the tooltip for nested drag handle is no long working.
-    	*/
+     * We disable mouseover event to fix flickering issue on hover
+     * However, the tooltip for nested drag handle is no long working.
+     */
     if (newPos === undefined || !isTopLevelNode) {
       // This will also hide the tooltip.
       unbind = bind(element, {

package/dist/es2019/pm-plugins/first-node-dec-plugin.js

@@ -0,0 +1,36 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
+import { DecorationSet, Decoration } from '@atlaskit/editor-prosemirror/view';
+export const firstNodeDecPluginKey = new PluginKey('firstNodeDec');
+const createFirstNodeDecSet = state => {
+  ;
+  const firstNode = state.doc.firstChild;
+  if (!firstNode) {
+    return DecorationSet.empty;
+  }
+  return DecorationSet.create(state.doc, [Decoration.node(0, firstNode.nodeSize, {
+    style: 'margin-top: 0'
+  })]);
+};
+export const firstNodeDecPlugin = () => new SafePlugin({
+  key: firstNodeDecPluginKey,
+  state: {
+    init(_, state) {
+      return createFirstNodeDecSet(state);
+    },
+    apply(tr, currentState, _, newState) {
+      const isDocChanged = tr.docChanged && tr.steps.some(step => step instanceof ReplaceStep || step instanceof ReplaceAroundStep);
+      // Reapply decorations if there are any steps that modify the document
+      if (isDocChanged) {
+        return createFirstNodeDecSet(newState);
+      }
+      return currentState;
+    }
+  },
+  props: {
+    decorations(state) {
+      return firstNodeDecPluginKey.getState(state);
+    }
+  }
+});

package/dist/esm/blockControlsPlugin.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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 React from 'react';
@@ -8,6 +9,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { moveNode } from './editor-commands/move-node';
 import { moveToLayout } from './editor-commands/move-to-layout';
+import { firstNodeDecPlugin } from './pm-plugins/first-node-dec-plugin';
 import { createPlugin, key } from './pm-plugins/main';
 import { selectNode } from './pm-plugins/utils/getSelection';
 import BlockMenu from './ui/block-menu';
@@ -18,7 +20,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
   return {
     name: 'blockControls',
     pmPlugins: function pmPlugins() {
-      return [{
+      var plugins = [{
         name: 'blockControlsPmPlugin',
         plugin: function plugin(_ref2) {
           var getIntl = _ref2.getIntl,
@@ -26,6 +28,13 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
           return createPlugin(api, getIntl, nodeViewPortalProviderAPI);
         }
       }];
+      var controlsPlugins = [{
+        name: 'firstNodeDec',
+        plugin: function plugin() {
+          return firstNodeDecPlugin();
+        }
+      }];
+      return [].concat(plugins, _toConsumableArray(editorExperiment('platform_editor_controls', 'variant1') ? controlsPlugins : []));
     },
     commands: {
       moveNode: moveNode(api),

package/dist/esm/pm-plugins/decorations-anchor.js

@@ -90,9 +90,7 @@ export var nodeDecorations = function nodeDecorations(newState, from, to) {
     if (shouldIgnoreNode(node, ignore_nodes, depth, parent)) {
       return shouldDescend; //skip over, don't consider it a valid depth
     }
-    var anchorStyles = pos === 0 && editorExperiment('platform_editor_controls', 'variant1') ? // why margin-top:0? well it's not possible using CSS to select the first node in the document while excluding n number of nodes, in this case
-    // we're rendering quick insert button and drag handle. For now override margin-top to 0
-    "anchor-name: ".concat(anchorName, ";margin-top:0px;") : "anchor-name: ".concat(anchorName, ";");
+    var anchorStyles = "anchor-name: ".concat(anchorName, ";");
     decs.push(Decoration.node(pos, pos + node.nodeSize, _defineProperty(_defineProperty(_defineProperty({
       style: anchorStyles
     }, 'data-drag-handler-anchor-name', anchorName), 'data-drag-handler-node-type', nodeTypeWithLevel), 'data-drag-handler-anchor-depth', "".concat(depth)), {

package/dist/esm/pm-plugins/decorations-drag-handle.js

@@ -47,9 +47,9 @@ export var dragHandleDecoration = function dragHandleDecoration(api, formatMessa
       isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
     }
     /*
-    	* We disable mouseover event to fix flickering issue on hover
-    	* However, the tooltip for nested drag handle is no long working.
-    	*/
+     * We disable mouseover event to fix flickering issue on hover
+     * However, the tooltip for nested drag handle is no long working.
+     */
     if (newPos === undefined || !isTopLevelNode) {
       // This will also hide the tooltip.
       unbind = bind(element, {

package/dist/esm/pm-plugins/first-node-dec-plugin.js

@@ -0,0 +1,40 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
+import { DecorationSet, Decoration } from '@atlaskit/editor-prosemirror/view';
+export var firstNodeDecPluginKey = new PluginKey('firstNodeDec');
+var createFirstNodeDecSet = function createFirstNodeDecSet(state) {
+  ;
+  var firstNode = state.doc.firstChild;
+  if (!firstNode) {
+    return DecorationSet.empty;
+  }
+  return DecorationSet.create(state.doc, [Decoration.node(0, firstNode.nodeSize, {
+    style: 'margin-top: 0'
+  })]);
+};
+export var firstNodeDecPlugin = function firstNodeDecPlugin() {
+  return new SafePlugin({
+    key: firstNodeDecPluginKey,
+    state: {
+      init: function init(_, state) {
+        return createFirstNodeDecSet(state);
+      },
+      apply: function apply(tr, currentState, _, newState) {
+        var isDocChanged = tr.docChanged && tr.steps.some(function (step) {
+          return step instanceof ReplaceStep || step instanceof ReplaceAroundStep;
+        });
+        // Reapply decorations if there are any steps that modify the document
+        if (isDocChanged) {
+          return createFirstNodeDecSet(newState);
+        }
+        return currentState;
+      }
+    },
+    props: {
+      decorations: function decorations(state) {
+        return firstNodeDecPluginKey.getState(state);
+      }
+    }
+  });
+};

package/dist/types/pm-plugins/first-node-dec-plugin.d.ts

@@ -0,0 +1,5 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export declare const firstNodeDecPluginKey: PluginKey<DecorationSet>;
+export declare const firstNodeDecPlugin: () => SafePlugin<DecorationSet>;

package/dist/types-ts4.5/pm-plugins/first-node-dec-plugin.d.ts

@@ -0,0 +1,5 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export declare const firstNodeDecPluginKey: PluginKey<DecorationSet>;
+export declare const firstNodeDecPlugin: () => SafePlugin<DecorationSet>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.8.5",
+	"version": "3.8.6",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",