@atlaskit/editor-plugin-code-block 3.3.2 → 3.3.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-code-block
 
+## 3.3.3
+
+### Patch Changes
+
+- [`0f58d3a82867c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0f58d3a82867c) -
+  ED-24500 Add decorators on init of code block and on document updates
+
 ## 3.3.2
 
 ### Patch Changes

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

@@ -4,17 +4,25 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateLineAttributesFromNode = exports.createLineNumbersDecorations = exports.createDecorationSetFromLineAttributes = void 0;
+exports.generateLineAttributesFromNode = exports.createLineNumbersDecorations = exports.createDecorationSetFromLineAttributes = exports.DECORATION_WIDGET_TYPE = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _classNames = require("../ui/class-names");
-var DECORATION_WIDGET_TYPE = 'decorationWidgetType';
+var DECORATION_WIDGET_TYPE = exports.DECORATION_WIDGET_TYPE = 'decorationWidgetType';
 var generateLineAttributesFromNode = exports.generateLineAttributesFromNode = function generateLineAttributesFromNode(pos, node) {
   // Get content node
   var contentNode = node.content;
 
   // Get node text content
   var lineAttributes = [];
+
+  // Early exit if content size is 0
+  if (contentNode.size === 0) {
+    return [{
+      lineStart: pos + 1,
+      lineNumber: 1
+    }];
+  }
   contentNode.forEach(function (child) {
     var nodeTextContent = child.textContent;
     var nodeStartPos = pos;

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

@@ -32,6 +32,17 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
     allowCompositionInputOverride = _ref$allowComposition === void 0 ? false : _ref$allowComposition,
     api = _ref.api;
   var handleDOMEvents = {};
+  var createLineNumberDecoratorsFromDecendants = function createLineNumberDecoratorsFromDecendants(editorState) {
+    var lineNumberDecorators = [];
+    editorState.doc.descendants(function (node, pos) {
+      if (node.type === editorState.schema.nodes.codeBlock) {
+        lineNumberDecorators.push.apply(lineNumberDecorators, (0, _toConsumableArray2.default)((0, _decorators.createLineNumbersDecorations)(pos, node)));
+        return false;
+      }
+      return true;
+    });
+    return lineNumberDecorators;
+  };
   var createWordWrappedDecoratorPluginState = function createWordWrappedDecoratorPluginState(pluginState, tr, node) {
     var decorationSetFromState = pluginState.decorations;
     if (node) {
@@ -59,19 +70,19 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
     }
     return decorationSetFromState;
   };
-  var createLineDecoratorPluginState = function createLineDecoratorPluginState(pluginState, tr, node) {
+  var createLineDecoratorPluginState = function createLineDecoratorPluginState(pluginState, tr, state) {
     var decorationSetFromState = pluginState.decorations;
-    if (node) {
-      var pos = node.pos,
-        innerNode = node.node;
-      if (pos !== undefined) {
-        // Reset the decorations for the children of the code block node. Wipes all line number decorations.
-        // @ts-ignore
-        decorationSetFromState.children = [];
-        var lineDecorators = (0, _decorators.createLineNumbersDecorations)(pos, innerNode);
-        decorationSetFromState = decorationSetFromState.add(tr.doc, (0, _toConsumableArray2.default)(lineDecorators));
-      }
-    }
+    // remove all the line number children from the decorations set. 'undefined, undefined' is used to find() the whole doc.
+    var children = decorationSetFromState.find(undefined, undefined, function (spec) {
+      return spec.type === _decorators.DECORATION_WIDGET_TYPE;
+    });
+    decorationSetFromState = decorationSetFromState.remove(children);
+
+    // regenerate all the line number for the documents code blocks
+    var lineDecorators = createLineNumberDecoratorsFromDecendants(state);
+
+    // add the newly generated line numbers to the decorations set
+    decorationSetFromState = decorationSetFromState.add(tr.doc, (0, _toConsumableArray2.default)(lineDecorators));
     return decorationSetFromState;
   };
 
@@ -117,12 +128,13 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
     state: {
       init: function init(_, state) {
         var node = (0, _utils2.findCodeBlock)(state, state.selection);
+        var lineNumberDecorators = (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? createLineNumberDecoratorsFromDecendants(state) : [];
         return {
           pos: node ? node.pos : null,
           contentCopied: false,
           isNodeSelected: false,
           shouldIgnoreFollowingMutations: false,
-          decorations: _view.DecorationSet.empty
+          decorations: _view.DecorationSet.create(state.doc, lineNumberDecorators)
         };
       },
       apply: function apply(tr, pluginState, _oldState, newState) {
@@ -138,7 +150,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
           var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
             pos: _node ? _node.pos : null,
             isNodeSelected: tr.selection instanceof _state.NodeSelection,
-            decorations: (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? createLineDecoratorPluginState(pluginState, tr, _node) : _view.DecorationSet.empty
+            decorations: (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? createLineDecoratorPluginState(pluginState, tr, newState) : _view.DecorationSet.empty
           });
           return newPluginState;
         }

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

@@ -1,12 +1,20 @@
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { codeBlockClassNames } from '../ui/class-names';
-const DECORATION_WIDGET_TYPE = 'decorationWidgetType';
+export const DECORATION_WIDGET_TYPE = 'decorationWidgetType';
 export const generateLineAttributesFromNode = (pos, node) => {
   // Get content node
   const contentNode = node.content;
 
   // Get node text content
   let lineAttributes = [];
+
+  // Early exit if content size is 0
+  if (contentNode.size === 0) {
+    return [{
+      lineStart: pos + 1,
+      lineNumber: 1
+    }];
+  }
   contentNode.forEach(child => {
     const nodeTextContent = child.textContent;
     const nodeStartPos = pos;

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

@@ -11,7 +11,7 @@ import { pluginKey } from '../plugin-key';
 import { codeBlockClassNames } from '../ui/class-names';
 import { findCodeBlock } from '../utils';
 import { ACTIONS } from './actions';
-import { createLineNumbersDecorations } from './decorators';
+import { createLineNumbersDecorations, DECORATION_WIDGET_TYPE } from './decorators';
 const DECORATION_WRAPPED_BLOCK_NODE_TYPE = 'decorationNodeType';
 export const createPlugin = ({
   useLongPressSelection = false,
@@ -20,6 +20,17 @@ export const createPlugin = ({
   api
 }) => {
   const handleDOMEvents = {};
+  const createLineNumberDecoratorsFromDecendants = editorState => {
+    let lineNumberDecorators = [];
+    editorState.doc.descendants((node, pos) => {
+      if (node.type === editorState.schema.nodes.codeBlock) {
+        lineNumberDecorators.push(...createLineNumbersDecorations(pos, node));
+        return false;
+      }
+      return true;
+    });
+    return lineNumberDecorators;
+  };
   const createWordWrappedDecoratorPluginState = (pluginState, tr, node) => {
     let decorationSetFromState = pluginState.decorations;
     if (node) {
@@ -47,21 +58,17 @@ export const createPlugin = ({
     }
     return decorationSetFromState;
   };
-  const createLineDecoratorPluginState = (pluginState, tr, node) => {
+  const createLineDecoratorPluginState = (pluginState, tr, state) => {
     let decorationSetFromState = pluginState.decorations;
-    if (node) {
-      const {
-        pos,
-        node: innerNode
-      } = node;
-      if (pos !== undefined) {
-        // Reset the decorations for the children of the code block node. Wipes all line number decorations.
-        // @ts-ignore
-        decorationSetFromState.children = [];
-        const lineDecorators = createLineNumbersDecorations(pos, innerNode);
-        decorationSetFromState = decorationSetFromState.add(tr.doc, [...lineDecorators]);
-      }
-    }
+    // remove all the line number children from the decorations set. 'undefined, undefined' is used to find() the whole doc.
+    const children = decorationSetFromState.find(undefined, undefined, spec => spec.type === DECORATION_WIDGET_TYPE);
+    decorationSetFromState = decorationSetFromState.remove(children);
+
+    // regenerate all the line number for the documents code blocks
+    const lineDecorators = createLineNumberDecoratorsFromDecendants(state);
+
+    // add the newly generated line numbers to the decorations set
+    decorationSetFromState = decorationSetFromState.add(tr.doc, [...lineDecorators]);
     return decorationSetFromState;
   };
 
@@ -105,12 +112,13 @@ export const createPlugin = ({
     state: {
       init(_, state) {
         const node = findCodeBlock(state, state.selection);
+        const lineNumberDecorators = fg('editor_support_code_block_wrapping') ? createLineNumberDecoratorsFromDecendants(state) : [];
         return {
           pos: node ? node.pos : null,
           contentCopied: false,
           isNodeSelected: false,
           shouldIgnoreFollowingMutations: false,
-          decorations: DecorationSet.empty
+          decorations: DecorationSet.create(state.doc, lineNumberDecorators)
         };
       },
       apply(tr, pluginState, _oldState, newState) {
@@ -128,7 +136,7 @@ export const createPlugin = ({
             ...pluginState,
             pos: node ? node.pos : null,
             isNodeSelected: tr.selection instanceof NodeSelection,
-            decorations: fg('editor_support_code_block_wrapping') ? createLineDecoratorPluginState(pluginState, tr, node) : DecorationSet.empty
+            decorations: fg('editor_support_code_block_wrapping') ? createLineDecoratorPluginState(pluginState, tr, newState) : DecorationSet.empty
           };
           return newPluginState;
         }

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

@@ -1,13 +1,21 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { codeBlockClassNames } from '../ui/class-names';
-var DECORATION_WIDGET_TYPE = 'decorationWidgetType';
+export var DECORATION_WIDGET_TYPE = 'decorationWidgetType';
 export var generateLineAttributesFromNode = function generateLineAttributesFromNode(pos, node) {
   // Get content node
   var contentNode = node.content;
 
   // Get node text content
   var lineAttributes = [];
+
+  // Early exit if content size is 0
+  if (contentNode.size === 0) {
+    return [{
+      lineStart: pos + 1,
+      lineNumber: 1
+    }];
+  }
   contentNode.forEach(function (child) {
     var nodeTextContent = child.textContent;
     var nodeStartPos = pos;

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

@@ -15,7 +15,7 @@ import { pluginKey } from '../plugin-key';
 import { codeBlockClassNames } from '../ui/class-names';
 import { findCodeBlock } from '../utils';
 import { ACTIONS } from './actions';
-import { createLineNumbersDecorations } from './decorators';
+import { createLineNumbersDecorations, DECORATION_WIDGET_TYPE } from './decorators';
 var DECORATION_WRAPPED_BLOCK_NODE_TYPE = 'decorationNodeType';
 export var createPlugin = function createPlugin(_ref) {
   var _ref$useLongPressSele = _ref.useLongPressSelection,
@@ -25,6 +25,17 @@ export var createPlugin = function createPlugin(_ref) {
     allowCompositionInputOverride = _ref$allowComposition === void 0 ? false : _ref$allowComposition,
     api = _ref.api;
   var handleDOMEvents = {};
+  var createLineNumberDecoratorsFromDecendants = function createLineNumberDecoratorsFromDecendants(editorState) {
+    var lineNumberDecorators = [];
+    editorState.doc.descendants(function (node, pos) {
+      if (node.type === editorState.schema.nodes.codeBlock) {
+        lineNumberDecorators.push.apply(lineNumberDecorators, _toConsumableArray(createLineNumbersDecorations(pos, node)));
+        return false;
+      }
+      return true;
+    });
+    return lineNumberDecorators;
+  };
   var createWordWrappedDecoratorPluginState = function createWordWrappedDecoratorPluginState(pluginState, tr, node) {
     var decorationSetFromState = pluginState.decorations;
     if (node) {
@@ -52,19 +63,19 @@ export var createPlugin = function createPlugin(_ref) {
     }
     return decorationSetFromState;
   };
-  var createLineDecoratorPluginState = function createLineDecoratorPluginState(pluginState, tr, node) {
+  var createLineDecoratorPluginState = function createLineDecoratorPluginState(pluginState, tr, state) {
     var decorationSetFromState = pluginState.decorations;
-    if (node) {
-      var pos = node.pos,
-        innerNode = node.node;
-      if (pos !== undefined) {
-        // Reset the decorations for the children of the code block node. Wipes all line number decorations.
-        // @ts-ignore
-        decorationSetFromState.children = [];
-        var lineDecorators = createLineNumbersDecorations(pos, innerNode);
-        decorationSetFromState = decorationSetFromState.add(tr.doc, _toConsumableArray(lineDecorators));
-      }
-    }
+    // remove all the line number children from the decorations set. 'undefined, undefined' is used to find() the whole doc.
+    var children = decorationSetFromState.find(undefined, undefined, function (spec) {
+      return spec.type === DECORATION_WIDGET_TYPE;
+    });
+    decorationSetFromState = decorationSetFromState.remove(children);
+
+    // regenerate all the line number for the documents code blocks
+    var lineDecorators = createLineNumberDecoratorsFromDecendants(state);
+
+    // add the newly generated line numbers to the decorations set
+    decorationSetFromState = decorationSetFromState.add(tr.doc, _toConsumableArray(lineDecorators));
     return decorationSetFromState;
   };
 
@@ -110,12 +121,13 @@ export var createPlugin = function createPlugin(_ref) {
     state: {
       init: function init(_, state) {
         var node = findCodeBlock(state, state.selection);
+        var lineNumberDecorators = fg('editor_support_code_block_wrapping') ? createLineNumberDecoratorsFromDecendants(state) : [];
         return {
           pos: node ? node.pos : null,
           contentCopied: false,
           isNodeSelected: false,
           shouldIgnoreFollowingMutations: false,
-          decorations: DecorationSet.empty
+          decorations: DecorationSet.create(state.doc, lineNumberDecorators)
         };
       },
       apply: function apply(tr, pluginState, _oldState, newState) {
@@ -131,7 +143,7 @@ export var createPlugin = function createPlugin(_ref) {
           var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
             pos: _node ? _node.pos : null,
             isNodeSelected: tr.selection instanceof NodeSelection,
-            decorations: fg('editor_support_code_block_wrapping') ? createLineDecoratorPluginState(pluginState, tr, _node) : DecorationSet.empty
+            decorations: fg('editor_support_code_block_wrapping') ? createLineDecoratorPluginState(pluginState, tr, newState) : DecorationSet.empty
           });
           return newPluginState;
         }

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

@@ -1,6 +1,7 @@
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { CodeBlockLineAttributes } from '../types';
+export declare const DECORATION_WIDGET_TYPE = "decorationWidgetType";
 export declare const generateLineAttributesFromNode: (pos: number, node: Node) => CodeBlockLineAttributes[];
 export declare const createDecorationSetFromLineAttributes: (lineAttributes: CodeBlockLineAttributes[]) => Decoration[];
 export declare const createLineNumbersDecorations: (pos: number, node: Node) => Decoration[];

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

@@ -1,6 +1,7 @@
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { CodeBlockLineAttributes } from '../types';
+export declare const DECORATION_WIDGET_TYPE = "decorationWidgetType";
 export declare const generateLineAttributesFromNode: (pos: number, node: Node) => CodeBlockLineAttributes[];
 export declare const createDecorationSetFromLineAttributes: (lineAttributes: CodeBlockLineAttributes[]) => Decoration[];
 export declare const createLineNumbersDecorations: (pos: number, node: Node) => Decoration[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block",
-	"version": "3.3.2",
+	"version": "3.3.3",
 	"description": "Code block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,13 +35,13 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^40.8.1",
 		"@atlaskit/code": "^15.5.0",
-		"@atlaskit/editor-common": "^87.8.0",
+		"@atlaskit/editor-common": "^87.10.0",
 		"@atlaskit/editor-plugin-analytics": "^1.7.0",
 		"@atlaskit/editor-plugin-composition": "^1.2.0",
 		"@atlaskit/editor-plugin-decorations": "^1.2.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.2.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
-		"@atlaskit/icon": "^22.12.0",
+		"@atlaskit/icon": "^22.13.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/prosemirror-input-rules": "^3.2.0",
 		"@babel/runtime": "^7.0.0",