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

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-code-block
 
+## 3.3.4
+
+### Patch Changes
+
+- [#128388](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/128388)
+  [`0ea0f81d30dcc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0ea0f81d30dcc) -
+  ED-24501 Add a CSS var to maintain a dynamic line number gutter size on the code block based on
+  the max number length. ED-24573 update handleClickOn in the code block plugin to work with new
+  line number gutter.
+
 ## 3.3.3
 
 ### Patch Changes

package/dist/cjs/nodeviews/code-block.js

@@ -60,6 +60,20 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
         _this.lineNumberGutter.removeChild(_this.lineNumberGutter.lastChild);
       }
     }));
+    /**
+     * As the code block updates we get the maximum amount of digits in a line number and expand the number gutter to reflect this.
+     */
+    (0, _defineProperty2.default)(this, "maintainDynamicGutterSize", function () {
+      var totalLineCount = 1;
+      _this.node.forEach(function (node) {
+        var text = node.text;
+        if (text) {
+          totalLineCount += (node.text.match(MATCH_NEWLINES) || []).length;
+        }
+      });
+      var maxDigits = totalLineCount.toString().length;
+      _this.dom.style.setProperty('--lineNumberGutterWidth', "".concat(maxDigits, "ch"));
+    });
     this.cleanupEditorDisabledListener = cleanupEditorDisabledListener;
     var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, toDOM(_node, !(api !== null && api !== void 0 && (_api$editorDisabled = api.editorDisabled) !== null && _api$editorDisabled !== void 0 && (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) !== null && _api$editorDisabled !== void 0 && _api$editorDisabled.editorDisabled))),
       dom = _DOMSerializer$render.dom,
@@ -71,7 +85,9 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
     this.contentDOM = contentDOM;
     this.lineNumberGutter = this.dom.querySelector(".".concat((0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? _classNames.codeBlockClassNames.gutterFg : _classNames.codeBlockClassNames.gutter));
     this.api = api;
-    if (!(0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
+    if ((0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
+      this.maintainDynamicGutterSize();
+    } else {
       this.ensureLineNumbers();
     }
     this.handleEditorDisabledChanged();
@@ -149,7 +165,9 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
           this.contentDOM.setAttribute('data-language', node.attrs.language || '');
         }
         this.node = node;
-        if (!(0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
+        if ((0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
+          this.maintainDynamicGutterSize();
+        } else {
           this.ensureLineNumbers();
         }
         if (_utils.browser.android) {

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

@@ -188,7 +188,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
         }
       },
       handleClickOn: (0, _selection.createSelectionClickHandler)(['codeBlock'], function (target) {
-        return !!(target.closest(".".concat(_classNames.codeBlockClassNames.gutter)) || target.classList.contains(_classNames.codeBlockClassNames.content));
+        return (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? !!(target.classList.contains(_classNames.codeBlockClassNames.lineNumberWidget) || target.classList.contains(_classNames.codeBlockClassNames.gutterFg)) : !!(target.closest(".".concat(_classNames.codeBlockClassNames.gutter)) || target.classList.contains(_classNames.codeBlockClassNames.content));
       }, {
         useLongPressSelection: useLongPressSelection
       }),

package/dist/es2019/nodeviews/code-block.js

@@ -47,6 +47,20 @@ export class CodeBlockView {
         this.lineNumberGutter.removeChild(this.lineNumberGutter.lastChild);
       }
     }));
+    /**
+     * As the code block updates we get the maximum amount of digits in a line number and expand the number gutter to reflect this.
+     */
+    _defineProperty(this, "maintainDynamicGutterSize", () => {
+      let totalLineCount = 1;
+      this.node.forEach(node => {
+        const text = node.text;
+        if (text) {
+          totalLineCount += (node.text.match(MATCH_NEWLINES) || []).length;
+        }
+      });
+      const maxDigits = totalLineCount.toString().length;
+      this.dom.style.setProperty('--lineNumberGutterWidth', `${maxDigits}ch`);
+    });
     this.cleanupEditorDisabledListener = cleanupEditorDisabledListener;
     const {
       dom,
@@ -59,7 +73,9 @@ export class CodeBlockView {
     this.contentDOM = contentDOM;
     this.lineNumberGutter = this.dom.querySelector(`.${fg('editor_support_code_block_wrapping') ? codeBlockClassNames.gutterFg : codeBlockClassNames.gutter}`);
     this.api = api;
-    if (!fg('editor_support_code_block_wrapping')) {
+    if (fg('editor_support_code_block_wrapping')) {
+      this.maintainDynamicGutterSize();
+    } else {
       this.ensureLineNumbers();
     }
     this.handleEditorDisabledChanged();
@@ -126,7 +142,9 @@ export class CodeBlockView {
         this.contentDOM.setAttribute('data-language', node.attrs.language || '');
       }
       this.node = node;
-      if (!fg('editor_support_code_block_wrapping')) {
+      if (fg('editor_support_code_block_wrapping')) {
+        this.maintainDynamicGutterSize();
+      } else {
         this.ensureLineNumbers();
       }
       if (browser.android) {

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

@@ -174,7 +174,7 @@ export const createPlugin = ({
       nodeViews: {
         codeBlock: (node, view, getPos) => codeBlockNodeView(node, view, getPos, api)
       },
-      handleClickOn: createSelectionClickHandler(['codeBlock'], target => !!(target.closest(`.${codeBlockClassNames.gutter}`) || target.classList.contains(codeBlockClassNames.content)), {
+      handleClickOn: createSelectionClickHandler(['codeBlock'], target => fg('editor_support_code_block_wrapping') ? !!(target.classList.contains(codeBlockClassNames.lineNumberWidget) || target.classList.contains(codeBlockClassNames.gutterFg)) : !!(target.closest(`.${codeBlockClassNames.gutter}`) || target.classList.contains(codeBlockClassNames.content)), {
         useLongPressSelection
       }),
       handleDOMEvents

package/dist/esm/nodeviews/code-block.js

@@ -53,6 +53,20 @@ export var CodeBlockView = /*#__PURE__*/function () {
         _this.lineNumberGutter.removeChild(_this.lineNumberGutter.lastChild);
       }
     }));
+    /**
+     * As the code block updates we get the maximum amount of digits in a line number and expand the number gutter to reflect this.
+     */
+    _defineProperty(this, "maintainDynamicGutterSize", function () {
+      var totalLineCount = 1;
+      _this.node.forEach(function (node) {
+        var text = node.text;
+        if (text) {
+          totalLineCount += (node.text.match(MATCH_NEWLINES) || []).length;
+        }
+      });
+      var maxDigits = totalLineCount.toString().length;
+      _this.dom.style.setProperty('--lineNumberGutterWidth', "".concat(maxDigits, "ch"));
+    });
     this.cleanupEditorDisabledListener = cleanupEditorDisabledListener;
     var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM(_node, !(api !== null && api !== void 0 && (_api$editorDisabled = api.editorDisabled) !== null && _api$editorDisabled !== void 0 && (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) !== null && _api$editorDisabled !== void 0 && _api$editorDisabled.editorDisabled))),
       dom = _DOMSerializer$render.dom,
@@ -64,7 +78,9 @@ export var CodeBlockView = /*#__PURE__*/function () {
     this.contentDOM = contentDOM;
     this.lineNumberGutter = this.dom.querySelector(".".concat(fg('editor_support_code_block_wrapping') ? codeBlockClassNames.gutterFg : codeBlockClassNames.gutter));
     this.api = api;
-    if (!fg('editor_support_code_block_wrapping')) {
+    if (fg('editor_support_code_block_wrapping')) {
+      this.maintainDynamicGutterSize();
+    } else {
       this.ensureLineNumbers();
     }
     this.handleEditorDisabledChanged();
@@ -142,7 +158,9 @@ export var CodeBlockView = /*#__PURE__*/function () {
           this.contentDOM.setAttribute('data-language', node.attrs.language || '');
         }
         this.node = node;
-        if (!fg('editor_support_code_block_wrapping')) {
+        if (fg('editor_support_code_block_wrapping')) {
+          this.maintainDynamicGutterSize();
+        } else {
           this.ensureLineNumbers();
         }
         if (browser.android) {

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

@@ -181,7 +181,7 @@ export var createPlugin = function createPlugin(_ref) {
         }
       },
       handleClickOn: createSelectionClickHandler(['codeBlock'], function (target) {
-        return !!(target.closest(".".concat(codeBlockClassNames.gutter)) || target.classList.contains(codeBlockClassNames.content));
+        return fg('editor_support_code_block_wrapping') ? !!(target.classList.contains(codeBlockClassNames.lineNumberWidget) || target.classList.contains(codeBlockClassNames.gutterFg)) : !!(target.closest(".".concat(codeBlockClassNames.gutter)) || target.classList.contains(codeBlockClassNames.content));
       }, {
         useLongPressSelection: useLongPressSelection
       }),

package/dist/types/nodeviews/code-block.d.ts

@@ -16,6 +16,10 @@ export declare class CodeBlockView {
     updateDOMAndSelection(savedInnerHTML: string, newCursorPosition: number): void;
     coalesceDOMElements(): void;
     private ensureLineNumbers;
+    /**
+     * As the code block updates we get the maximum amount of digits in a line number and expand the number gutter to reflect this.
+     */
+    private maintainDynamicGutterSize;
     update(node: Node): boolean;
     ignoreMutation(record: MutationRecord | {
         type: 'selection';

package/dist/types-ts4.5/nodeviews/code-block.d.ts

@@ -16,6 +16,10 @@ export declare class CodeBlockView {
     updateDOMAndSelection(savedInnerHTML: string, newCursorPosition: number): void;
     coalesceDOMElements(): void;
     private ensureLineNumbers;
+    /**
+     * As the code block updates we get the maximum amount of digits in a line number and expand the number gutter to reflect this.
+     */
+    private maintainDynamicGutterSize;
     update(node: Node): boolean;
     ignoreMutation(record: MutationRecord | {
         type: 'selection';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block",
-	"version": "3.3.3",
+	"version": "3.3.4",
 	"description": "Code block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",