@atlaskit/editor-plugin-code-block 3.5.15 → 3.6.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/editor-plugin-code-block
 
+## 3.6.0
+
+### Minor Changes
+
+- [#103918](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103918)
+  [`29844093c6ab4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/29844093c6ab4) -
+  Expose new shared state for code block plugin which indicates the current node that the copy text
+  button is hovered for. Display highlight decorations for the copy text button in the advanced code
+  block plugin.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.5.16
+
+### Patch Changes
+
+- [#100411](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100411)
+  [`14499ab145534`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/14499ab145534) -
+  [ux] Introduces advanced code block as per:
+  https://hello.atlassian.net/wiki/spaces/EDITOR/pages/4632293323/Editor+RFC+063+Advanced+code+blocks.
+  This can be added to an existing editor preset to enrich the code block experience with syntax
+  highlighting and can be extended for other features via CodeMirror extensions (ie. autocompletion,
+  code folding etc.).
+
 ## 3.5.15
 
 ### Patch Changes

package/dist/cjs/codeBlockPlugin.js

@@ -36,6 +36,14 @@ var codeBlockPlugin = function codeBlockPlugin(_ref) {
         node: _adfSchema.codeBlock
       }];
     },
+    getSharedState: function getSharedState(state) {
+      if (!state) {
+        return undefined;
+      }
+      return {
+        copyButtonHoverNode: _codeBlockCopySelectionPlugin.copySelectionPluginKey.getState(state).codeBlockNode
+      };
+    },
     pmPlugins: function pmPlugins() {
       return [{
         name: 'codeBlock',

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

@@ -23,12 +23,14 @@ function getSelectionDecorationStartAndEnd(_ref) {
   });
   if (!codeBlockNode) {
     return {
-      decorationStartAndEnd: undefined
+      decorationStartAndEnd: undefined,
+      codeBlockNode: undefined
     };
   }
   var decorationStartAndEnd = [codeBlockNode.start, codeBlockNode.start + codeBlockNode.node.nodeSize];
   return {
-    decorationStartAndEnd: decorationStartAndEnd
+    decorationStartAndEnd: decorationStartAndEnd,
+    codeBlockNode: codeBlockNode.node
   };
 }
 function codeBlockCopySelectionPlugin() {

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

@@ -105,7 +105,11 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
           var codeBlockNodes = (0, _platformFeatureFlags.fg)('editor_code_wrapping_perf_improvement_ed-25141') ? (0, _utils.getAllChangedCodeBlocksInTransaction)(tr) : (0, _utils.getAllCodeBlockNodesInDoc)(newState);
           if (codeBlockNodes) {
             (0, _codeBlock.updateCodeBlockWrappedStateNodeKeys)(codeBlockNodes, _oldState);
-            updatedDecorationSet = (0, _decorators.updateCodeBlockDecorations)(tr, codeBlockNodes, updatedDecorationSet);
+            // Disabled when using advanced code block for performance reasons
+            // @ts-expect-error Code block advanced cannot depend on code block
+            if ((api === null || api === void 0 ? void 0 : api.codeBlockAdvanced) === undefined) {
+              updatedDecorationSet = (0, _decorators.updateCodeBlockDecorations)(tr, codeBlockNodes, updatedDecorationSet);
+            }
           }
           var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
             pos: _node ? _node.pos : null,

package/dist/es2019/codeBlockPlugin.js

@@ -6,7 +6,7 @@ import { IconCode } from '@atlaskit/editor-common/quick-insert';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { createInsertCodeBlockTransaction, insertCodeBlockWithAnalytics } from './editor-commands';
 import { codeBlockAutoFullStopTransformPlugin } from './pm-plugins/codeBlockAutoFullStopTransformPlugin';
-import { codeBlockCopySelectionPlugin } from './pm-plugins/codeBlockCopySelectionPlugin';
+import { codeBlockCopySelectionPlugin, copySelectionPluginKey } from './pm-plugins/codeBlockCopySelectionPlugin';
 import ideUX from './pm-plugins/ide-ux';
 import { createCodeBlockInputRule } from './pm-plugins/input-rule';
 import keymap from './pm-plugins/keymaps';
@@ -27,6 +27,14 @@ const codeBlockPlugin = ({
         node: codeBlock
       }];
     },
+    getSharedState(state) {
+      if (!state) {
+        return undefined;
+      }
+      return {
+        copyButtonHoverNode: copySelectionPluginKey.getState(state).codeBlockNode
+      };
+    },
     pmPlugins() {
       return [{
         name: 'codeBlock',

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

@@ -13,12 +13,14 @@ function getSelectionDecorationStartAndEnd({
   });
   if (!codeBlockNode) {
     return {
-      decorationStartAndEnd: undefined
+      decorationStartAndEnd: undefined,
+      codeBlockNode: undefined
     };
   }
   const decorationStartAndEnd = [codeBlockNode.start, codeBlockNode.start + codeBlockNode.node.nodeSize];
   return {
-    decorationStartAndEnd
+    decorationStartAndEnd,
+    codeBlockNode: codeBlockNode.node
   };
 }
 export function codeBlockCopySelectionPlugin() {

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

@@ -95,7 +95,11 @@ export const createPlugin = ({
           const codeBlockNodes = fg('editor_code_wrapping_perf_improvement_ed-25141') ? getAllChangedCodeBlocksInTransaction(tr) : getAllCodeBlockNodesInDoc(newState);
           if (codeBlockNodes) {
             updateCodeBlockWrappedStateNodeKeys(codeBlockNodes, _oldState);
-            updatedDecorationSet = updateCodeBlockDecorations(tr, codeBlockNodes, updatedDecorationSet);
+            // Disabled when using advanced code block for performance reasons
+            // @ts-expect-error Code block advanced cannot depend on code block
+            if ((api === null || api === void 0 ? void 0 : api.codeBlockAdvanced) === undefined) {
+              updatedDecorationSet = updateCodeBlockDecorations(tr, codeBlockNodes, updatedDecorationSet);
+            }
           }
           const newPluginState = {
             ...pluginState,

package/dist/esm/codeBlockPlugin.js

@@ -9,7 +9,7 @@ import { IconCode } from '@atlaskit/editor-common/quick-insert';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { createInsertCodeBlockTransaction, insertCodeBlockWithAnalytics } from './editor-commands';
 import { codeBlockAutoFullStopTransformPlugin } from './pm-plugins/codeBlockAutoFullStopTransformPlugin';
-import { codeBlockCopySelectionPlugin } from './pm-plugins/codeBlockCopySelectionPlugin';
+import { codeBlockCopySelectionPlugin, copySelectionPluginKey } from './pm-plugins/codeBlockCopySelectionPlugin';
 import ideUX from './pm-plugins/ide-ux';
 import { createCodeBlockInputRule } from './pm-plugins/input-rule';
 import keymap from './pm-plugins/keymaps';
@@ -29,6 +29,14 @@ var codeBlockPlugin = function codeBlockPlugin(_ref) {
         node: codeBlock
       }];
     },
+    getSharedState: function getSharedState(state) {
+      if (!state) {
+        return undefined;
+      }
+      return {
+        copyButtonHoverNode: copySelectionPluginKey.getState(state).codeBlockNode
+      };
+    },
     pmPlugins: function pmPlugins() {
       return [{
         name: 'codeBlock',

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

@@ -13,12 +13,14 @@ function getSelectionDecorationStartAndEnd(_ref) {
   });
   if (!codeBlockNode) {
     return {
-      decorationStartAndEnd: undefined
+      decorationStartAndEnd: undefined,
+      codeBlockNode: undefined
     };
   }
   var decorationStartAndEnd = [codeBlockNode.start, codeBlockNode.start + codeBlockNode.node.nodeSize];
   return {
-    decorationStartAndEnd: decorationStartAndEnd
+    decorationStartAndEnd: decorationStartAndEnd,
+    codeBlockNode: codeBlockNode.node
   };
 }
 export function codeBlockCopySelectionPlugin() {

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

@@ -100,7 +100,11 @@ export var createPlugin = function createPlugin(_ref) {
           var codeBlockNodes = fg('editor_code_wrapping_perf_improvement_ed-25141') ? getAllChangedCodeBlocksInTransaction(tr) : getAllCodeBlockNodesInDoc(newState);
           if (codeBlockNodes) {
             updateCodeBlockWrappedStateNodeKeys(codeBlockNodes, _oldState);
-            updatedDecorationSet = updateCodeBlockDecorations(tr, codeBlockNodes, updatedDecorationSet);
+            // Disabled when using advanced code block for performance reasons
+            // @ts-expect-error Code block advanced cannot depend on code block
+            if ((api === null || api === void 0 ? void 0 : api.codeBlockAdvanced) === undefined) {
+              updatedDecorationSet = updateCodeBlockDecorations(tr, codeBlockNodes, updatedDecorationSet);
+            }
           }
           var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
             pos: _node ? _node.pos : null,

package/dist/types/codeBlockPluginType.d.ts

@@ -5,17 +5,23 @@ import type { CompositionPlugin } from '@atlaskit/editor-plugin-composition';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { CodeBlockOptions } from './types';
+type CodeBlockDependencies = [
+    DecorationsPlugin,
+    CompositionPlugin,
+    OptionalPlugin<AnalyticsPlugin>,
+    OptionalPlugin<EditorDisabledPlugin>,
+    OptionalPlugin<FeatureFlagsPlugin>
+];
 export type CodeBlockPlugin = NextEditorPlugin<'codeBlock', {
     pluginConfiguration: CodeBlockOptions | undefined;
-    dependencies: [
-        DecorationsPlugin,
-        CompositionPlugin,
-        OptionalPlugin<AnalyticsPlugin>,
-        OptionalPlugin<EditorDisabledPlugin>,
-        OptionalPlugin<FeatureFlagsPlugin>
-    ];
+    dependencies: CodeBlockDependencies;
+    sharedState: {
+        copyButtonHoverNode: PMNode;
+    } | undefined;
     actions: {
         insertCodeBlock: (inputMethod: INPUT_METHOD) => Command;
     };
 }>;
+export {};

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

@@ -1,9 +1,11 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 export declare const copySelectionPluginKey: PluginKey<any>;
 type CodeBlockCopySelectionPluginState = {
     decorationStartAndEnd?: [start: number, end: number];
+    codeBlockNode?: PMNode;
 };
 export declare function codeBlockCopySelectionPlugin(): SafePlugin<CodeBlockCopySelectionPluginState>;
 export declare function provideVisualFeedbackForCopyButton(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;

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

@@ -1,6 +1,7 @@
 import type { IntlShape } from 'react-intl-next';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { CodeBlockPlugin } from '../index';
 import { type CodeBlockState } from './main-state';
@@ -36,6 +37,9 @@ export declare const createPlugin: ({ useLongPressSelection, getIntl, allowCompo
             pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
             sharedState: import("@atlaskit/editor-common/types").FeatureFlags;
         }, import("@atlaskit/editor-common/types").FeatureFlags>>];
+        sharedState: {
+            copyButtonHoverNode: PMNode;
+        } | undefined;
         actions: {
             insertCodeBlock: (inputMethod: import("@atlaskit/editor-common/analytics").INPUT_METHOD) => import("@atlaskit/editor-common/types").Command;
         };

package/dist/types-ts4.5/codeBlockPluginType.d.ts

@@ -5,17 +5,23 @@ import type { CompositionPlugin } from '@atlaskit/editor-plugin-composition';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { CodeBlockOptions } from './types';
+type CodeBlockDependencies = [
+    DecorationsPlugin,
+    CompositionPlugin,
+    OptionalPlugin<AnalyticsPlugin>,
+    OptionalPlugin<EditorDisabledPlugin>,
+    OptionalPlugin<FeatureFlagsPlugin>
+];
 export type CodeBlockPlugin = NextEditorPlugin<'codeBlock', {
     pluginConfiguration: CodeBlockOptions | undefined;
-    dependencies: [
-        DecorationsPlugin,
-        CompositionPlugin,
-        OptionalPlugin<AnalyticsPlugin>,
-        OptionalPlugin<EditorDisabledPlugin>,
-        OptionalPlugin<FeatureFlagsPlugin>
-    ];
+    dependencies: CodeBlockDependencies;
+    sharedState: {
+        copyButtonHoverNode: PMNode;
+    } | undefined;
     actions: {
         insertCodeBlock: (inputMethod: INPUT_METHOD) => Command;
     };
 }>;
+export {};

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

@@ -1,4 +1,5 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 export declare const copySelectionPluginKey: PluginKey<any>;
@@ -7,6 +8,7 @@ type CodeBlockCopySelectionPluginState = {
         start: number,
         end: number
     ];
+    codeBlockNode?: PMNode;
 };
 export declare function codeBlockCopySelectionPlugin(): SafePlugin<CodeBlockCopySelectionPluginState>;
 export declare function provideVisualFeedbackForCopyButton(state: EditorState, dispatch?: (tr: Transaction) => void): boolean;

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

@@ -1,6 +1,7 @@
 import type { IntlShape } from 'react-intl-next';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { CodeBlockPlugin } from '../index';
 import { type CodeBlockState } from './main-state';
@@ -44,6 +45,9 @@ export declare const createPlugin: ({ useLongPressSelection, getIntl, allowCompo
                 sharedState: import("@atlaskit/editor-common/types").FeatureFlags;
             }, import("@atlaskit/editor-common/types").FeatureFlags>>
         ];
+        sharedState: {
+            copyButtonHoverNode: PMNode;
+        } | undefined;
         actions: {
             insertCodeBlock: (inputMethod: import("@atlaskit/editor-common/analytics").INPUT_METHOD) => import("@atlaskit/editor-common/types").Command;
         };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block",
-	"version": "3.5.15",
+	"version": "3.6.0",
 	"description": "Code block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,13 +33,13 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^46.1.0",
 		"@atlaskit/code": "^15.6.0",
-		"@atlaskit/editor-common": "^99.0.0",
-		"@atlaskit/editor-plugin-analytics": "^1.10.0",
+		"@atlaskit/editor-common": "^99.5.0",
+		"@atlaskit/editor-plugin-analytics": "^1.11.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": "6.2.1",
-		"@atlaskit/icon": "^23.3.0",
+		"@atlaskit/icon": "^23.4.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/prosemirror-input-rules": "^3.2.0",
 		"@babel/runtime": "^7.0.0"