@atlaskit/editor-plugin-code-block 3.3.7 → 3.3.9

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-code-block
 
+## 3.3.9
+
+### Patch Changes
+
+- [#134918](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/134918)
+  [`89e5820ef3ed5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/89e5820ef3ed5) -
+  [ux] ED-24678 adding a11y support for code block
+
+## 3.3.8
+
+### Patch Changes
+
+- [#134213](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/134213)
+  [`93bd7032842ec`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/93bd7032842ec) -
+  [ux] [ED-24636] Bump ADF Schema package
+
 ## 3.3.7
 
 ### Patch Changes

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

@@ -17,7 +17,7 @@ var _actions = require("../actions");
 var _mainState = require("../pm-plugins/main-state");
 var _classNames = require("../ui/class-names");
 var MATCH_NEWLINES = new RegExp('\n', 'g');
-var toDOM = function toDOM(node, contentEditable) {
+var toDOM = function toDOM(node, contentEditable, formattedAriaLabel) {
   return ['div', {
     class: 'code-block'
   }, ['div', {
@@ -34,17 +34,19 @@ var toDOM = function toDOM(node, contentEditable) {
     'data-language': node.attrs.language || '',
     spellcheck: 'false',
     contenteditable: (0, _platformFeatureFlags.fg)('platform.editor.live-view.disable-editing-in-view-mode_fi1rx') ? contentEditable ? 'true' : 'false' : 'true',
-    'data-testid': 'code-block--code'
+    'data-testid': 'code-block--code',
+    'aria-label': formattedAriaLabel
   }, 0]]], ['div', {
     class: _classNames.codeBlockClassNames.end,
     contenteditable: 'false'
   }]];
 };
 var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
-  function CodeBlockView(_node, view, getPos, api, cleanupEditorDisabledListener) {
+  function CodeBlockView(_node, view, getPos, formattedAriaLabel, api, cleanupEditorDisabledListener) {
     var _this = this,
       _api$editorDisabled;
     (0, _classCallCheck2.default)(this, CodeBlockView);
+    (0, _defineProperty2.default)(this, "formattedAriaLabel", '');
     (0, _defineProperty2.default)(this, "ensureLineNumbers", (0, _rafSchd.default)(function () {
       var lines = 1;
       _this.node.forEach(function (node) {
@@ -75,7 +77,7 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
       _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))),
+    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), formattedAriaLabel)),
       dom = _DOMSerializer$render.dom,
       contentDOM = _DOMSerializer$render.contentDOM;
     this.getPos = getPos;
@@ -199,6 +201,6 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
   }]);
   return CodeBlockView;
 }();
-var codeBlockNodeView = exports.codeBlockNodeView = function codeBlockNodeView(node, view, getPos, api) {
-  return new CodeBlockView(node, view, getPos, api);
+var codeBlockNodeView = exports.codeBlockNodeView = function codeBlockNodeView(node, view, getPos, formattedAriaLabel, api) {
+  return new CodeBlockView(node, view, getPos, formattedAriaLabel, api);
 };

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

@@ -8,6 +8,7 @@ exports.createPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _codeBlock = require("@atlaskit/editor-common/code-block");
+var _messages = require("@atlaskit/editor-common/messages");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -189,7 +190,10 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
       },
       nodeViews: {
         codeBlock: function codeBlock(node, view, getPos) {
-          return (0, _codeBlock2.codeBlockNodeView)(node, view, getPos, api);
+          var _getIntl = getIntl(),
+            formatMessage = _getIntl.formatMessage;
+          var formattedAriaLabel = formatMessage(_messages.blockTypeMessages.codeblock);
+          return (0, _codeBlock2.codeBlockNodeView)(node, view, getPos, formattedAriaLabel, api);
         }
       },
       handleClickOn: (0, _selection.createSelectionClickHandler)(['codeBlock'], function (target) {

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

@@ -8,7 +8,7 @@ import { resetShouldIgnoreFollowingMutations } from '../actions';
 import { getPluginState } from '../pm-plugins/main-state';
 import { codeBlockClassNames } from '../ui/class-names';
 const MATCH_NEWLINES = new RegExp('\n', 'g');
-const toDOM = (node, contentEditable) => ['div', {
+const toDOM = (node, contentEditable, formattedAriaLabel) => ['div', {
   class: 'code-block'
 }, ['div', {
   class: codeBlockClassNames.start,
@@ -24,14 +24,16 @@ const toDOM = (node, contentEditable) => ['div', {
   'data-language': node.attrs.language || '',
   spellcheck: 'false',
   contenteditable: fg('platform.editor.live-view.disable-editing-in-view-mode_fi1rx') ? contentEditable ? 'true' : 'false' : 'true',
-  'data-testid': 'code-block--code'
+  'data-testid': 'code-block--code',
+  'aria-label': formattedAriaLabel
 }, 0]]], ['div', {
   class: codeBlockClassNames.end,
   contenteditable: 'false'
 }]];
 export class CodeBlockView {
-  constructor(_node, view, getPos, api, cleanupEditorDisabledListener) {
+  constructor(_node, view, getPos, formattedAriaLabel, api, cleanupEditorDisabledListener) {
     var _api$editorDisabled, _api$editorDisabled$s;
+    _defineProperty(this, "formattedAriaLabel", '');
     _defineProperty(this, "ensureLineNumbers", rafSchedule(() => {
       let lines = 1;
       this.node.forEach(node => {
@@ -65,7 +67,7 @@ export class CodeBlockView {
     const {
       dom,
       contentDOM
-    } = DOMSerializer.renderSpec(document, toDOM(_node, !(api !== null && api !== void 0 && (_api$editorDisabled = api.editorDisabled) !== null && _api$editorDisabled !== void 0 && (_api$editorDisabled$s = _api$editorDisabled.sharedState.currentState()) !== null && _api$editorDisabled$s !== void 0 && _api$editorDisabled$s.editorDisabled)));
+    } = DOMSerializer.renderSpec(document, toDOM(_node, !(api !== null && api !== void 0 && (_api$editorDisabled = api.editorDisabled) !== null && _api$editorDisabled !== void 0 && (_api$editorDisabled$s = _api$editorDisabled.sharedState.currentState()) !== null && _api$editorDisabled$s !== void 0 && _api$editorDisabled$s.editorDisabled), formattedAriaLabel));
     this.getPos = getPos;
     this.view = view;
     this.node = _node;
@@ -170,4 +172,4 @@ export class CodeBlockView {
     this.cleanupEditorDisabledListener = undefined;
   }
 }
-export const codeBlockNodeView = (node, view, getPos, api) => new CodeBlockView(node, view, getPos, api);
+export const codeBlockNodeView = (node, view, getPos, formattedAriaLabel, api) => new CodeBlockView(node, view, getPos, formattedAriaLabel, api);

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

@@ -1,4 +1,5 @@
 import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
+import { blockTypeMessages } from '@atlaskit/editor-common/messages';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
 import { browser } from '@atlaskit/editor-common/utils';
@@ -177,7 +178,13 @@ export const createPlugin = ({
         return undefined;
       },
       nodeViews: {
-        codeBlock: (node, view, getPos) => codeBlockNodeView(node, view, getPos, api)
+        codeBlock: (node, view, getPos) => {
+          const {
+            formatMessage
+          } = getIntl();
+          const formattedAriaLabel = formatMessage(blockTypeMessages.codeblock);
+          return codeBlockNodeView(node, view, getPos, formattedAriaLabel, api);
+        }
       },
       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

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

@@ -10,7 +10,7 @@ import { resetShouldIgnoreFollowingMutations } from '../actions';
 import { getPluginState } from '../pm-plugins/main-state';
 import { codeBlockClassNames } from '../ui/class-names';
 var MATCH_NEWLINES = new RegExp('\n', 'g');
-var toDOM = function toDOM(node, contentEditable) {
+var toDOM = function toDOM(node, contentEditable, formattedAriaLabel) {
   return ['div', {
     class: 'code-block'
   }, ['div', {
@@ -27,17 +27,19 @@ var toDOM = function toDOM(node, contentEditable) {
     'data-language': node.attrs.language || '',
     spellcheck: 'false',
     contenteditable: fg('platform.editor.live-view.disable-editing-in-view-mode_fi1rx') ? contentEditable ? 'true' : 'false' : 'true',
-    'data-testid': 'code-block--code'
+    'data-testid': 'code-block--code',
+    'aria-label': formattedAriaLabel
   }, 0]]], ['div', {
     class: codeBlockClassNames.end,
     contenteditable: 'false'
   }]];
 };
 export var CodeBlockView = /*#__PURE__*/function () {
-  function CodeBlockView(_node, view, getPos, api, cleanupEditorDisabledListener) {
+  function CodeBlockView(_node, view, getPos, formattedAriaLabel, api, cleanupEditorDisabledListener) {
     var _this = this,
       _api$editorDisabled;
     _classCallCheck(this, CodeBlockView);
+    _defineProperty(this, "formattedAriaLabel", '');
     _defineProperty(this, "ensureLineNumbers", rafSchedule(function () {
       var lines = 1;
       _this.node.forEach(function (node) {
@@ -68,7 +70,7 @@ export var CodeBlockView = /*#__PURE__*/function () {
       _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))),
+    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), formattedAriaLabel)),
       dom = _DOMSerializer$render.dom,
       contentDOM = _DOMSerializer$render.contentDOM;
     this.getPos = getPos;
@@ -192,6 +194,6 @@ export var CodeBlockView = /*#__PURE__*/function () {
   }]);
   return CodeBlockView;
 }();
-export var codeBlockNodeView = function codeBlockNodeView(node, view, getPos, api) {
-  return new CodeBlockView(node, view, getPos, api);
+export var codeBlockNodeView = function codeBlockNodeView(node, view, getPos, formattedAriaLabel, api) {
+  return new CodeBlockView(node, view, getPos, formattedAriaLabel, api);
 };

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

@@ -3,6 +3,7 @@ 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 { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
+import { blockTypeMessages } from '@atlaskit/editor-common/messages';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
 import { browser } from '@atlaskit/editor-common/utils';
@@ -182,7 +183,10 @@ export var createPlugin = function createPlugin(_ref) {
       },
       nodeViews: {
         codeBlock: function codeBlock(node, view, getPos) {
-          return codeBlockNodeView(node, view, getPos, api);
+          var _getIntl = getIntl(),
+            formatMessage = _getIntl.formatMessage;
+          var formattedAriaLabel = formatMessage(blockTypeMessages.codeblock);
+          return codeBlockNodeView(node, view, getPos, formattedAriaLabel, api);
         }
       },
       handleClickOn: createSelectionClickHandler(['codeBlock'], function (target) {

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

@@ -10,8 +10,9 @@ export declare class CodeBlockView {
     lineNumberGutter: HTMLElement;
     getPos: getPosHandlerNode;
     view: EditorView;
+    formattedAriaLabel: string;
     api?: ExtractInjectionAPI<CodeBlockPlugin>;
-    constructor(node: Node, view: EditorView, getPos: getPosHandlerNode, api?: ExtractInjectionAPI<CodeBlockPlugin>, cleanupEditorDisabledListener?: (() => void) | undefined);
+    constructor(node: Node, view: EditorView, getPos: getPosHandlerNode, formattedAriaLabel: string, api?: ExtractInjectionAPI<CodeBlockPlugin>, cleanupEditorDisabledListener?: (() => void) | undefined);
     handleEditorDisabledChanged(): void;
     updateDOMAndSelection(savedInnerHTML: string, newCursorPosition: number): void;
     coalesceDOMElements(): void;
@@ -27,4 +28,4 @@ export declare class CodeBlockView {
     }): boolean;
     destroy(): void;
 }
-export declare const codeBlockNodeView: (node: Node, view: EditorView, getPos: getPosHandler, api: ExtractInjectionAPI<CodeBlockPlugin> | undefined) => CodeBlockView;
+export declare const codeBlockNodeView: (node: Node, view: EditorView, getPos: getPosHandler, formattedAriaLabel: string, api: ExtractInjectionAPI<CodeBlockPlugin> | undefined) => CodeBlockView;

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

@@ -10,8 +10,9 @@ export declare class CodeBlockView {
     lineNumberGutter: HTMLElement;
     getPos: getPosHandlerNode;
     view: EditorView;
+    formattedAriaLabel: string;
     api?: ExtractInjectionAPI<CodeBlockPlugin>;
-    constructor(node: Node, view: EditorView, getPos: getPosHandlerNode, api?: ExtractInjectionAPI<CodeBlockPlugin>, cleanupEditorDisabledListener?: (() => void) | undefined);
+    constructor(node: Node, view: EditorView, getPos: getPosHandlerNode, formattedAriaLabel: string, api?: ExtractInjectionAPI<CodeBlockPlugin>, cleanupEditorDisabledListener?: (() => void) | undefined);
     handleEditorDisabledChanged(): void;
     updateDOMAndSelection(savedInnerHTML: string, newCursorPosition: number): void;
     coalesceDOMElements(): void;
@@ -27,4 +28,4 @@ export declare class CodeBlockView {
     }): boolean;
     destroy(): void;
 }
-export declare const codeBlockNodeView: (node: Node, view: EditorView, getPos: getPosHandler, api: ExtractInjectionAPI<CodeBlockPlugin> | undefined) => CodeBlockView;
+export declare const codeBlockNodeView: (node: Node, view: EditorView, getPos: getPosHandler, formattedAriaLabel: string, api: ExtractInjectionAPI<CodeBlockPlugin> | undefined) => CodeBlockView;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block",
-	"version": "3.3.7",
+	"version": "3.3.9",
 	"description": "Code block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,15 +33,15 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^40.8.1",
-		"@atlaskit/code": "^15.5.0",
-		"@atlaskit/editor-common": "^88.1.0",
+		"@atlaskit/adf-schema": "^40.9.0",
+		"@atlaskit/code": "^15.6.0",
+		"@atlaskit/editor-common": "^88.4.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-composition": "^1.2.0",
 		"@atlaskit/editor-plugin-decorations": "^1.3.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
-		"@atlaskit/icon": "^22.14.0",
+		"@atlaskit/icon": "^22.15.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/prosemirror-input-rules": "^3.2.0",
 		"@babel/runtime": "^7.0.0",