@atlaskit/editor-plugin-code-block-advanced 4.0.3 → 4.0.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-code-block-advanced
 
+## 4.0.4
+
+### Patch Changes
+
+- [`e239c0974b8dc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e239c0974b8dc) -
+  EDITOR-1464 Use codeBlockWithLocalId and add local-id attribute to dom output.
+- Updated dependencies
+
 ## 4.0.3
 
 ### Patch Changes

package/dist/cjs/nodeviews/codeBlockAdvanced.js

@@ -18,6 +18,7 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _whitespace = require("@atlaskit/editor-common/whitespace");
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _view2 = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _syntaxHighlightingTheme = require("../ui/syntaxHighlightingTheme");
 var _theme = require("../ui/theme");
@@ -30,6 +31,8 @@ var _manageSelectionMarker = require("./extensions/manageSelectionMarker");
 var _prosemirrorDecorations = require("./extensions/prosemirrorDecorations");
 var _tripleClickExtension = require("./extensions/tripleClickExtension");
 var _loader = require("./languages/loader");
+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) { (0, _defineProperty2.default)(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; }
 // Based on: https://prosemirror.net/examples/codemirror/
 var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
   function CodeBlockAdvancedNodeView(node, view, getPos, innerDecorations, config) {
@@ -101,9 +104,11 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         return _this.forwardUpdate(update);
       }), this.readOnlyCompartment.of([_state.EditorState.readOnly.of(!this.view.editable), _view.EditorView.contentAttributes.of({
         contentEditable: "".concat(this.view.editable)
-      })]), (0, _autocomplete.closeBrackets)(), _view.EditorView.editorAttributes.of({
+      })]), (0, _autocomplete.closeBrackets)(), _view.EditorView.editorAttributes.of(_objectSpread({
         class: 'code-block'
-      }), (0, _manageSelectionMarker.manageSelectionMarker)(config.api), (0, _prosemirrorDecorations.prosemirrorDecorationPlugin)(this.pmFacet, view, getPos), (0, _tripleClickExtension.tripleClickSelectAllExtension)(), (0, _firstCodeBlockInDocument.firstCodeBlockInDocument)(getPos), _view.EditorView.contentAttributes.of({
+      }, (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') && {
+        'data-local-id': this.node.attrs.localId
+      })), (0, _manageSelectionMarker.manageSelectionMarker)(config.api), (0, _prosemirrorDecorations.prosemirrorDecorationPlugin)(this.pmFacet, view, getPos), (0, _tripleClickExtension.tripleClickSelectAllExtension)(), (0, _firstCodeBlockInDocument.firstCodeBlockInDocument)(getPos), _view.EditorView.contentAttributes.of({
         'aria-label': formattedAriaLabel
       }), config.allowCodeFolding ? [(0, _foldGutter.foldGutterExtension)({
         selectNode: selectNode,
@@ -126,6 +131,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     // inner editor
     this.updating = false;
     this.updateLanguage();
+    this.updateLocalIdAttribute();
     this.wordWrappingEnabled = (0, _codeBlock.isCodeBlockWordWrapEnabled)(node);
 
     // Restore fold state after initialization
@@ -188,6 +194,18 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     value: function updateLanguage() {
       this.languageLoader.updateLanguage(this.node.attrs.language);
     }
+  }, {
+    key: "updateLocalIdAttribute",
+    value: function updateLocalIdAttribute() {
+      if ((0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid')) {
+        var localId = this.node.attrs.localId;
+        if (localId) {
+          this.cm.dom.setAttribute('data-local-id', localId);
+        } else {
+          this.cm.dom.removeAttribute('data-local-id');
+        }
+      }
+    }
   }, {
     key: "selectCodeBlockNode",
     value: function selectCodeBlockNode(relativeSelectionPos) {
@@ -236,6 +254,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         return true;
       }
       this.updateLanguage();
+      this.updateLocalIdAttribute();
       var newText = node.textContent,
         curText = this.cm.state.doc.toString();
 

package/dist/cjs/nodeviews/codeBlockNodeWithToDOMFixed.js

@@ -81,7 +81,7 @@ var _toDOM = function toDOM(node, formattedAriaLabel, config) {
   }]];
 };
 var codeBlockNodeWithFixedToDOM = exports.codeBlockNodeWithFixedToDOM = function codeBlockNodeWithFixedToDOM(config) {
-  return _objectSpread(_objectSpread({}, _adfSchema.codeBlock), {}, {
+  return _objectSpread(_objectSpread({}, (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.codeBlockWithLocalId : _adfSchema.codeBlock), {}, {
     toDOM: function toDOM(node) {
       return _toDOM(node, '', config);
     }

package/dist/es2019/nodeviews/codeBlockAdvanced.js

@@ -8,6 +8,7 @@ import { blockTypeMessages } from '@atlaskit/editor-common/messages';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { highlightStyle } from '../ui/syntaxHighlightingTheme';
 import { cmTheme, codeFoldingTheme } from '../ui/theme';
@@ -81,7 +82,10 @@ class CodeBlockAdvancedNodeView {
       }), CodeMirror.updateListener.of(update => this.forwardUpdate(update)), this.readOnlyCompartment.of([CodeMirrorState.readOnly.of(!this.view.editable), CodeMirror.contentAttributes.of({
         contentEditable: `${this.view.editable}`
       })]), closeBrackets(), CodeMirror.editorAttributes.of({
-        class: 'code-block'
+        class: 'code-block',
+        ...(fg('platform_editor_adf_with_localid') && {
+          'data-local-id': this.node.attrs.localId
+        })
       }), manageSelectionMarker(config.api), prosemirrorDecorationPlugin(this.pmFacet, view, getPos), tripleClickSelectAllExtension(), firstCodeBlockInDocument(getPos), CodeMirror.contentAttributes.of({
         'aria-label': formattedAriaLabel
       }), config.allowCodeFolding ? [foldGutterExtension({
@@ -103,6 +107,7 @@ class CodeBlockAdvancedNodeView {
     // inner editor
     this.updating = false;
     this.updateLanguage();
+    this.updateLocalIdAttribute();
     this.wordWrappingEnabled = isCodeBlockWordWrapEnabled(node);
 
     // Restore fold state after initialization
@@ -155,6 +160,16 @@ class CodeBlockAdvancedNodeView {
   updateLanguage() {
     this.languageLoader.updateLanguage(this.node.attrs.language);
   }
+  updateLocalIdAttribute() {
+    if (fg('platform_editor_adf_with_localid')) {
+      const localId = this.node.attrs.localId;
+      if (localId) {
+        this.cm.dom.setAttribute('data-local-id', localId);
+      } else {
+        this.cm.dom.removeAttribute('data-local-id');
+      }
+    }
+  }
   selectCodeBlockNode(relativeSelectionPos) {
     var _this$selectionAPI, _this$getPos3, _this$getPos4;
     const tr = (_this$selectionAPI = this.selectionAPI) === null || _this$selectionAPI === void 0 ? void 0 : _this$selectionAPI.selectNearNode({
@@ -195,6 +210,7 @@ class CodeBlockAdvancedNodeView {
       return true;
     }
     this.updateLanguage();
+    this.updateLocalIdAttribute();
     const newText = node.textContent,
       curText = this.cm.state.doc.toString();
 

package/dist/es2019/nodeviews/codeBlockNodeWithToDOMFixed.js

@@ -1,4 +1,4 @@
-import { codeBlock } from '@atlaskit/adf-schema';
+import { codeBlock, codeBlockWithLocalId } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -71,7 +71,7 @@ const toDOM = (node, formattedAriaLabel, config) => {
 };
 export const codeBlockNodeWithFixedToDOM = config => {
   return {
-    ...codeBlock,
+    ...(fg('platform_editor_adf_with_localid') ? codeBlockWithLocalId : codeBlock),
     toDOM: node => toDOM(node, '', config)
   };
 };

package/dist/esm/nodeviews/codeBlockAdvanced.js

@@ -2,6 +2,8 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 { closeBrackets } from '@codemirror/autocomplete';
 import { syntaxHighlighting, bracketMatching } from '@codemirror/language';
 import { Compartment, Facet, EditorState as CodeMirrorState } from '@codemirror/state';
@@ -11,6 +13,7 @@ import { blockTypeMessages } from '@atlaskit/editor-common/messages';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { highlightStyle } from '../ui/syntaxHighlightingTheme';
 import { cmTheme, codeFoldingTheme } from '../ui/theme';
@@ -94,9 +97,11 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         return _this.forwardUpdate(update);
       }), this.readOnlyCompartment.of([CodeMirrorState.readOnly.of(!this.view.editable), CodeMirror.contentAttributes.of({
         contentEditable: "".concat(this.view.editable)
-      })]), closeBrackets(), CodeMirror.editorAttributes.of({
+      })]), closeBrackets(), CodeMirror.editorAttributes.of(_objectSpread({
         class: 'code-block'
-      }), manageSelectionMarker(config.api), prosemirrorDecorationPlugin(this.pmFacet, view, getPos), tripleClickSelectAllExtension(), firstCodeBlockInDocument(getPos), CodeMirror.contentAttributes.of({
+      }, fg('platform_editor_adf_with_localid') && {
+        'data-local-id': this.node.attrs.localId
+      })), manageSelectionMarker(config.api), prosemirrorDecorationPlugin(this.pmFacet, view, getPos), tripleClickSelectAllExtension(), firstCodeBlockInDocument(getPos), CodeMirror.contentAttributes.of({
         'aria-label': formattedAriaLabel
       }), config.allowCodeFolding ? [foldGutterExtension({
         selectNode: selectNode,
@@ -119,6 +124,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     // inner editor
     this.updating = false;
     this.updateLanguage();
+    this.updateLocalIdAttribute();
     this.wordWrappingEnabled = isCodeBlockWordWrapEnabled(node);
 
     // Restore fold state after initialization
@@ -181,6 +187,18 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     value: function updateLanguage() {
       this.languageLoader.updateLanguage(this.node.attrs.language);
     }
+  }, {
+    key: "updateLocalIdAttribute",
+    value: function updateLocalIdAttribute() {
+      if (fg('platform_editor_adf_with_localid')) {
+        var localId = this.node.attrs.localId;
+        if (localId) {
+          this.cm.dom.setAttribute('data-local-id', localId);
+        } else {
+          this.cm.dom.removeAttribute('data-local-id');
+        }
+      }
+    }
   }, {
     key: "selectCodeBlockNode",
     value: function selectCodeBlockNode(relativeSelectionPos) {
@@ -229,6 +247,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         return true;
       }
       this.updateLanguage();
+      this.updateLocalIdAttribute();
       var newText = node.textContent,
         curText = this.cm.state.doc.toString();
 

package/dist/esm/nodeviews/codeBlockNodeWithToDOMFixed.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 { codeBlock } from '@atlaskit/adf-schema';
+import { codeBlock, codeBlockWithLocalId } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -74,7 +74,7 @@ var _toDOM = function toDOM(node, formattedAriaLabel, config) {
   }]];
 };
 export var codeBlockNodeWithFixedToDOM = function codeBlockNodeWithFixedToDOM(config) {
-  return _objectSpread(_objectSpread({}, codeBlock), {}, {
+  return _objectSpread(_objectSpread({}, fg('platform_editor_adf_with_localid') ? codeBlockWithLocalId : codeBlock), {}, {
     toDOM: function toDOM(node) {
       return _toDOM(node, '', config);
     }

package/dist/types/nodeviews/codeBlockAdvanced.d.ts

@@ -33,6 +33,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     setSelection(anchor: number, head: number): void;
     private updateReadonlyState;
     private updateLanguage;
+    private updateLocalIdAttribute;
     private selectCodeBlockNode;
     private wordWrappingEnabled;
     private getWordWrapEffects;

package/dist/types-ts4.5/nodeviews/codeBlockAdvanced.d.ts

@@ -33,6 +33,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     setSelection(anchor: number, head: number): void;
     private updateReadonlyState;
     private updateLanguage;
+    private updateLocalIdAttribute;
     private selectCodeBlockNode;
     private wordWrappingEnabled;
     private getWordWrapEffects;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block-advanced",
-	"version": "4.0.3",
+	"version": "4.0.4",
 	"description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -39,7 +39,7 @@
 		"@atlaskit/editor-toolbar": "^0.8.0",
 		"@atlaskit/icon": "^28.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^12.4.0",
+		"@atlaskit/tmp-editor-statsig": "^12.5.0",
 		"@atlaskit/tokens": "^6.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@codemirror/autocomplete": "6.18.4",
@@ -55,7 +55,7 @@
 		"codemirror-lang-elixir": "4.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^108.2.0",
+		"@atlaskit/editor-common": "^108.3.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},

package/src/nodeviews/codeBlockAdvanced.ts

@@ -29,6 +29,7 @@ import type {
 	NodeView,
 } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
@@ -140,7 +141,12 @@ class CodeBlockAdvancedNodeView implements NodeView {
 					CodeMirror.contentAttributes.of({ contentEditable: `${this.view.editable}` }),
 				]),
 				closeBrackets(),
-				CodeMirror.editorAttributes.of({ class: 'code-block' }),
+				CodeMirror.editorAttributes.of({
+					class: 'code-block',
+					...(fg('platform_editor_adf_with_localid') && {
+						'data-local-id': this.node.attrs.localId,
+					}),
+				}),
 				manageSelectionMarker(config.api),
 				prosemirrorDecorationPlugin(this.pmFacet, view, getPos),
 				tripleClickSelectAllExtension(),
@@ -165,6 +171,7 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		// inner editor
 		this.updating = false;
 		this.updateLanguage();
+		this.updateLocalIdAttribute();
 		this.wordWrappingEnabled = isCodeBlockWordWrapEnabled(node);
 
 		// Restore fold state after initialization
@@ -218,6 +225,17 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		this.languageLoader.updateLanguage(this.node.attrs.language);
 	}
 
+	private updateLocalIdAttribute() {
+		if (fg('platform_editor_adf_with_localid')) {
+			const localId = this.node.attrs.localId;
+			if (localId) {
+				this.cm.dom.setAttribute('data-local-id', localId);
+			} else {
+				this.cm.dom.removeAttribute('data-local-id');
+			}
+		}
+	}
+
 	private selectCodeBlockNode(relativeSelectionPos: RelativeSelectionPos | undefined) {
 		const tr = this.selectionAPI?.selectNearNode({
 			selectionRelativeToNode: relativeSelectionPos,
@@ -260,6 +278,7 @@ class CodeBlockAdvancedNodeView implements NodeView {
 			return true;
 		}
 		this.updateLanguage();
+		this.updateLocalIdAttribute();
 		const newText = node.textContent,
 			curText = this.cm.state.doc.toString();
 

package/src/nodeviews/codeBlockNodeWithToDOMFixed.ts

@@ -1,4 +1,4 @@
-import { codeBlock } from '@atlaskit/adf-schema';
+import { codeBlock, codeBlockWithLocalId } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import type { NodeSpec, DOMOutputSpec, Node } from '@atlaskit/editor-prosemirror/model';
@@ -107,7 +107,7 @@ const toDOM = (node: Node, formattedAriaLabel: string, config: Config): DOMOutpu
 
 export const codeBlockNodeWithFixedToDOM = (config: Config): NodeSpec => {
 	return {
-		...codeBlock,
+		...(fg('platform_editor_adf_with_localid') ? codeBlockWithLocalId : codeBlock),
 		toDOM: (node) => toDOM(node, '', config),
 	};
 };