@atlaskit/editor-plugin-code-block-advanced 3.0.7 → 3.1.0

package/dist/esm/nodeviews/extensions/foldGutter.js

@@ -0,0 +1,94 @@
+import { foldGutter, codeFolding } from '@codemirror/language';
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+// Based on platform/packages/design-system/icon/svgs/utility/add.svg
+var chevronDown = ['http://www.w3.org/2000/svg svg', {
+  width: '12',
+  height: '12',
+  fill: 'none',
+  viewBox: '0 0 16 16',
+  style: 'pointer-events: none;'
+}, ['http://www.w3.org/2000/svg path', {
+  fill: 'currentcolor',
+  'fill-rule': 'evenodd',
+  d: 'm14.53 6.03-6 6a.75.75 0 0 1-1.004.052l-.056-.052-6-6 1.06-1.06L8 10.44l5.47-5.47z',
+  'clip-rule': 'evenodd',
+  style: 'pointer-events: none;'
+}]];
+var chevronRight = ['http://www.w3.org/2000/svg svg', {
+  width: '12',
+  height: '12',
+  fill: 'none',
+  viewBox: '0 0 16 16',
+  style: 'pointer-events: none;'
+}, ['http://www.w3.org/2000/svg path', {
+  fill: 'currentcolor',
+  'fill-rule': 'evenodd',
+  d: 'm8.28 1.47 6 6a.75.75 0 0 1 .052 1.004l-.052.056-6 6-1.06-1.06L12.69 8 7.22 2.53z',
+  'clip-rule': 'evenodd',
+  style: 'pointer-events: none;'
+}]];
+export function foldGutterExtension(_ref) {
+  var selectNode = _ref.selectNode;
+  return [foldGutter({
+    domEventHandlers: {
+      click: function click(_view, _, event) {
+        // If we're trying to click the button, don't select
+        if (event.target instanceof HTMLButtonElement && event.target.getAttribute('data-marker-dom-element')) {
+          return false;
+        }
+        selectNode();
+        return false;
+      }
+    },
+    markerDOM: function markerDOM(open) {
+      var _DOMSerializer$render = DOMSerializer.renderSpec(document, chevronDown),
+        downElement = _DOMSerializer$render.dom;
+      var _DOMSerializer$render2 = DOMSerializer.renderSpec(document, chevronRight),
+        rightElement = _DOMSerializer$render2.dom;
+      var htmlElement = document.createElement('button');
+      htmlElement.setAttribute('data-marker-dom-element', 'true');
+      htmlElement.setAttribute('data-testid', "code-block-fold-button-".concat(open ? 'open' : 'closed'));
+      htmlElement.setAttribute('style', convertToInlineCss({
+        background: 'none',
+        color: 'inherit',
+        border: 'none',
+        padding: 0,
+        paddingRight: "var(--ds-space-050, 4px)",
+        font: 'inherit',
+        outline: 'inherit',
+        cursor: 'pointer'
+      }));
+      if (open) {
+        if (downElement) {
+          htmlElement.appendChild(downElement);
+        } else {
+          // Fallback - never called
+          htmlElement.textContent = '⌄';
+        }
+      } else {
+        if (rightElement) {
+          htmlElement.appendChild(rightElement);
+        } else {
+          // Fallback - never called
+          htmlElement.textContent = '>';
+        }
+      }
+      return htmlElement;
+    }
+  }), codeFolding({
+    placeholderDOM: function placeholderDOM(view, onclick, prepared) {
+      var htmlElement = document.createElement('button');
+      htmlElement.setAttribute('data-marker-dom-element', 'true');
+      htmlElement.setAttribute('style', convertToInlineCss({
+        color: 'inherit',
+        font: 'inherit',
+        cursor: 'pointer'
+      }));
+      htmlElement.textContent = '…';
+      htmlElement.className = 'cm-foldPlaceholder';
+      htmlElement.onclick = onclick;
+      return htmlElement;
+    }
+  })];
+}

package/dist/esm/ui/theme.js

@@ -68,6 +68,36 @@ export var cmTheme = CodeMirror.theme({
     minHeight: lineHeight
   }
 });
+export var codeFoldingTheme = CodeMirror.theme({
+  '.cm-gutter': {
+    paddingLeft: "var(--ds-space-075, 6px)",
+    paddingTop: "var(--ds-space-100, 8px)",
+    paddingBottom: "var(--ds-space-100, 8px)",
+    paddingRight: "var(--ds-space-0, 0px)"
+  },
+  '.cm-foldGutter': {
+    paddingLeft: "var(--ds-space-050, 4px)"
+  },
+  '.cm-gutterElement:has([data-marker-dom-element="true"])': {
+    color: "var(--ds-icon-subtle, #626F86)"
+  },
+  '.cm-gutterElement:has([data-marker-dom-element="true"]):hover': {
+    color: "var(--ds-text-accent-gray-bolder, #091E42)"
+  },
+  '.cm-foldPlaceholder': {
+    // To give spacing between lines
+    height: '20px',
+    backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
+    border: 'none',
+    color: "var(--ds-text, #172B4D)",
+    outline: "1px solid ".concat("var(--ds-border-accent-gray, #758195)"),
+    paddingLeft: "var(--ds-space-025, 2px)",
+    paddingRight: "var(--ds-space-025, 2px)"
+  },
+  '.cm-foldPlaceholder:hover': {
+    backgroundColor: "var(--ds-background-accent-gray-subtlest-hovered, #DCDFE4)"
+  }
+});
 
 /**
  * Copied directly from `packages/editor/editor-shared-styles/src/overflow-shadow/overflow-shadow.ts`

package/dist/types/codeBlockAdvancedPluginType.d.ts

@@ -13,7 +13,9 @@ export type CodeBlockAdvancedPlugin = NextEditorPlugin<'codeBlockAdvanced', {
         OptionalPlugin<SelectionMarkerPlugin>,
         OptionalPlugin<FindReplacePlugin>
     ];
-    pluginConfiguration: {
-        extensions?: Extension[];
-    } | undefined;
+    pluginConfiguration: CodeBlockAdvancedPluginOptions | undefined;
 }>;
+export type CodeBlockAdvancedPluginOptions = {
+    extensions?: Extension[];
+    allowCodeFolding?: boolean;
+};

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
 export { codeBlockAdvancedPlugin } from './codeBlockAdvancedPlugin';
-export type { CodeBlockAdvancedPlugin } from './codeBlockAdvancedPluginType';
+export type { CodeBlockAdvancedPlugin, CodeBlockAdvancedPluginOptions, } from './codeBlockAdvancedPluginType';

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

@@ -5,10 +5,11 @@ import type { getPosHandler, getPosHandlerNode, ExtractInjectionAPI } from '@atl
 import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Decoration, DecorationSource, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
-interface ConfigProps {
+export interface ConfigProps {
     api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
     extensions: Extension[];
     getIntl: () => IntlShape;
+    allowCodeFolding: boolean;
 }
 declare class CodeBlockAdvancedNodeView implements NodeView {
     dom: Node;

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

@@ -1,2 +1,6 @@
 import type { NodeSpec } from '@atlaskit/editor-prosemirror/model';
-export declare const codeBlockNodeWithFixedToDOM: () => NodeSpec;
+interface Config {
+    allowCodeFolding: boolean;
+}
+export declare const codeBlockNodeWithFixedToDOM: (config: Config) => NodeSpec;
+export {};

package/dist/types/nodeviews/extensions/foldGutter.d.ts

@@ -0,0 +1,3 @@
+export declare function foldGutterExtension({ selectNode }: {
+    selectNode: () => void;
+}): import("@codemirror/state").Extension[];

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

@@ -6,6 +6,7 @@ interface Props {
     api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
     extensions: Extension[];
     getIntl: () => IntlShape;
+    allowCodeFolding: boolean;
 }
 export declare const lazyCodeBlockView: (props: Props) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;
 export {};

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

@@ -7,6 +7,7 @@ interface Props {
     api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
     extensions: Extension[];
     getIntl: () => IntlShape;
+    allowCodeFolding: boolean;
 }
 export declare const createPlugin: (props: Props) => SafePlugin<any>;
 export {};

package/dist/types/ui/theme.d.ts

@@ -1 +1,2 @@
 export declare const cmTheme: import("@codemirror/state").Extension;
+export declare const codeFoldingTheme: import("@codemirror/state").Extension;

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

@@ -13,7 +13,9 @@ export type CodeBlockAdvancedPlugin = NextEditorPlugin<'codeBlockAdvanced', {
         OptionalPlugin<SelectionMarkerPlugin>,
         OptionalPlugin<FindReplacePlugin>
     ];
-    pluginConfiguration: {
-        extensions?: Extension[];
-    } | undefined;
+    pluginConfiguration: CodeBlockAdvancedPluginOptions | undefined;
 }>;
+export type CodeBlockAdvancedPluginOptions = {
+    extensions?: Extension[];
+    allowCodeFolding?: boolean;
+};

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

@@ -1,2 +1,2 @@
 export { codeBlockAdvancedPlugin } from './codeBlockAdvancedPlugin';
-export type { CodeBlockAdvancedPlugin } from './codeBlockAdvancedPluginType';
+export type { CodeBlockAdvancedPlugin, CodeBlockAdvancedPluginOptions, } from './codeBlockAdvancedPluginType';

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

@@ -5,10 +5,11 @@ import type { getPosHandler, getPosHandlerNode, ExtractInjectionAPI } from '@atl
 import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Decoration, DecorationSource, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
-interface ConfigProps {
+export interface ConfigProps {
     api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
     extensions: Extension[];
     getIntl: () => IntlShape;
+    allowCodeFolding: boolean;
 }
 declare class CodeBlockAdvancedNodeView implements NodeView {
     dom: Node;

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

@@ -1,2 +1,6 @@
 import type { NodeSpec } from '@atlaskit/editor-prosemirror/model';
-export declare const codeBlockNodeWithFixedToDOM: () => NodeSpec;
+interface Config {
+    allowCodeFolding: boolean;
+}
+export declare const codeBlockNodeWithFixedToDOM: (config: Config) => NodeSpec;
+export {};

package/dist/types-ts4.5/nodeviews/extensions/foldGutter.d.ts

@@ -0,0 +1,3 @@
+export declare function foldGutterExtension({ selectNode }: {
+    selectNode: () => void;
+}): import("@codemirror/state").Extension[];

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

@@ -6,6 +6,7 @@ interface Props {
     api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
     extensions: Extension[];
     getIntl: () => IntlShape;
+    allowCodeFolding: boolean;
 }
 export declare const lazyCodeBlockView: (props: Props) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;
 export {};

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

@@ -7,6 +7,7 @@ interface Props {
     api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
     extensions: Extension[];
     getIntl: () => IntlShape;
+    allowCodeFolding: boolean;
 }
 export declare const createPlugin: (props: Props) => SafePlugin<any>;
 export {};

package/dist/types-ts4.5/ui/theme.d.ts

@@ -1 +1,2 @@
 export declare const cmTheme: import("@codemirror/state").Extension;
+export declare const codeFoldingTheme: import("@codemirror/state").Extension;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block-advanced",
-	"version": "3.0.7",
+	"version": "3.1.0",
 	"description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -39,7 +39,7 @@
 		"@atlaskit/editor-plugin-selection-marker": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^9.22.0",
+		"@atlaskit/tmp-editor-statsig": "^9.27.0",
 		"@atlaskit/tokens": "^6.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@codemirror/autocomplete": "6.18.4",
@@ -54,12 +54,11 @@
 		"codemirror-lang-elixir": "4.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.16.0",
+		"@atlaskit/editor-common": "^107.20.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
-		"@atlaskit/code": "^17.2.0",
-		"typescript": "~5.4.2"
+		"@atlaskit/code": "^17.2.0"
 	},
 	"techstack": {
 		"@atlassian/frontend": {

package/src/codeBlockAdvancedPlugin.tsx

@@ -9,7 +9,7 @@ export const codeBlockAdvancedPlugin: CodeBlockAdvancedPlugin = ({ api, config }
 		return [
 			{
 				name: 'codeBlock',
-				node: codeBlockNodeWithFixedToDOM(),
+				node: codeBlockNodeWithFixedToDOM({ allowCodeFolding: config?.allowCodeFolding ?? false }),
 			},
 		];
 	},
@@ -19,7 +19,12 @@ export const codeBlockAdvancedPlugin: CodeBlockAdvancedPlugin = ({ api, config }
 			{
 				name: 'codeBlockAdvancedPlugin',
 				plugin: ({ getIntl }) =>
-					createPlugin({ api, extensions: config?.extensions ?? [], getIntl }),
+					createPlugin({
+						api,
+						extensions: config?.extensions ?? [],
+						allowCodeFolding: config?.allowCodeFolding ?? false,
+						getIntl
+					}),
 			},
 		];
 	},

package/src/codeBlockAdvancedPluginType.ts

@@ -17,10 +17,11 @@ export type CodeBlockAdvancedPlugin = NextEditorPlugin<
 			OptionalPlugin<SelectionMarkerPlugin>,
 			OptionalPlugin<FindReplacePlugin>,
 		];
-		pluginConfiguration:
-			| {
-					extensions?: Extension[];
-			  }
-			| undefined;
+		pluginConfiguration: CodeBlockAdvancedPluginOptions | undefined;
 	}
 >;
+
+export type CodeBlockAdvancedPluginOptions = {
+	extensions?: Extension[];
+	allowCodeFolding?: boolean;
+};

package/src/index.ts

@@ -2,4 +2,7 @@
 // Entry file in package.json
 
 export { codeBlockAdvancedPlugin } from './codeBlockAdvancedPlugin';
-export type { CodeBlockAdvancedPlugin } from './codeBlockAdvancedPluginType';
+export type {
+	CodeBlockAdvancedPlugin,
+	CodeBlockAdvancedPluginOptions,
+} from './codeBlockAdvancedPluginType';

package/src/nodeviews/codeBlockAdvanced.ts

@@ -33,21 +33,23 @@ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equ
 
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
 import { highlightStyle } from '../ui/syntaxHighlightingTheme';
-import { cmTheme } from '../ui/theme';
+import { cmTheme, codeFoldingTheme } from '../ui/theme';
 
 import { syncCMWithPM } from './codemirrorSync/syncCMWithPM';
 import { getCMSelectionChanges } from './codemirrorSync/updateCMSelection';
 import { firstCodeBlockInDocument } from './extensions/firstCodeBlockInDocument';
+import { foldGutterExtension } from './extensions/foldGutter';
 import { keymapExtension } from './extensions/keymap';
 import { manageSelectionMarker } from './extensions/manageSelectionMarker';
 import { prosemirrorDecorationPlugin } from './extensions/prosemirrorDecorations';
 import { tripleClickSelectAllExtension } from './extensions/tripleClickExtension';
 import { LanguageLoader } from './languages/loader';
 
-interface ConfigProps {
+export interface ConfigProps {
 	api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
 	extensions: Extension[];
 	getIntl: () => IntlShape;
+	allowCodeFolding: boolean;
 }
 
 // Based on: https://prosemirror.net/examples/codemirror/
@@ -94,6 +96,11 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		const { formatMessage } = config.getIntl();
 		const formattedAriaLabel = formatMessage(blockTypeMessages.codeblock);
 
+		const selectNode = () => {
+			this.selectCodeBlockNode(undefined);
+			this.view.focus();
+		};
+
 		this.cm = new CodeMirror({
 			doc: this.node.textContent,
 			extensions: [
@@ -111,14 +118,15 @@ class CodeBlockAdvancedNodeView implements NodeView {
 					onMaybeNodeSelection,
 					customFindReplace: Boolean(config.api?.findReplace),
 				}),
+				// Goes before cmTheme to override styles
+				config.allowCodeFolding ? [codeFoldingTheme] : [],
 				cmTheme,
 				syntaxHighlighting(highlightStyle),
 				bracketMatching(),
 				lineNumbers({
 					domEventHandlers: {
 						click: () => {
-							this.selectCodeBlockNode(undefined);
-							this.view.focus();
+							selectNode();
 							return true;
 						},
 					},
@@ -138,6 +146,7 @@ class CodeBlockAdvancedNodeView implements NodeView {
 				tripleClickSelectAllExtension(),
 				firstCodeBlockInDocument(getPos),
 				CodeMirror.contentAttributes.of({ 'aria-label': formattedAriaLabel }),
+				config.allowCodeFolding ? [foldGutterExtension({ selectNode })] : [],
 			],
 		});
 

package/src/nodeviews/codeBlockNodeWithToDOMFixed.ts

@@ -4,6 +4,10 @@ import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import type { NodeSpec, DOMOutputSpec, Node } from '@atlaskit/editor-prosemirror/model';
 import { token } from '@atlaskit/tokens';
 
+interface Config {
+	allowCodeFolding: boolean;
+}
+
 const codeBlockClassNames = {
 	container: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER,
 	start: CodeBlockSharedCssClassName.CODEBLOCK_START,
@@ -15,7 +19,7 @@ const codeBlockClassNames = {
 const MATCH_NEWLINES = new RegExp('\n', 'gu');
 
 // Based on: `packages/editor/editor-plugin-code-block/src/nodeviews/code-block.ts`
-const toDOM = (node: Node, formattedAriaLabel: string): DOMOutputSpec => {
+const toDOM = (node: Node, formattedAriaLabel: string, config: Config): DOMOutputSpec => {
 	let totalLineCount = 1;
 
 	node.forEach((node) => {
@@ -54,7 +58,10 @@ const toDOM = (node: Node, formattedAriaLabel: string): DOMOutputSpec => {
 						backgroundColor: token('color.background.neutral'),
 						position: 'relative',
 						width: 'var(--lineNumberGutterWidth, 2rem)',
-						padding: token('space.100'),
+						/* top and bottom | left and right */
+						padding: config.allowCodeFolding
+							? `${token('space.100')} ${token('space.250')} ${token('space.100')} ${token('space.075')}`
+							: token('space.100'),
 						flexShrink: 0,
 						fontSize: '0.875rem',
 						boxSizing: 'content-box',
@@ -96,9 +103,9 @@ const toDOM = (node: Node, formattedAriaLabel: string): DOMOutputSpec => {
 	];
 };
 
-export const codeBlockNodeWithFixedToDOM = (): NodeSpec => {
+export const codeBlockNodeWithFixedToDOM = (config: Config): NodeSpec => {
 	return {
 		...codeBlock,
-		toDOM: (node) => toDOM(node, ''),
+		toDOM: (node) => toDOM(node, '', config),
 	};
 };

package/src/nodeviews/extensions/foldGutter.ts

@@ -0,0 +1,128 @@
+import { foldGutter, codeFolding } from '@codemirror/language';
+
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import type { DOMOutputSpec } from '@atlaskit/editor-prosemirror/model';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { token } from '@atlaskit/tokens';
+
+// Based on platform/packages/design-system/icon/svgs/utility/add.svg
+const chevronDown: DOMOutputSpec = [
+	'http://www.w3.org/2000/svg svg',
+	{
+		width: '12',
+		height: '12',
+		fill: 'none',
+		viewBox: '0 0 16 16',
+		style: 'pointer-events: none;',
+	},
+	[
+		'http://www.w3.org/2000/svg path',
+		{
+			fill: 'currentcolor',
+			'fill-rule': 'evenodd',
+			d: 'm14.53 6.03-6 6a.75.75 0 0 1-1.004.052l-.056-.052-6-6 1.06-1.06L8 10.44l5.47-5.47z',
+			'clip-rule': 'evenodd',
+			style: 'pointer-events: none;',
+		},
+	],
+];
+
+const chevronRight: DOMOutputSpec = [
+	'http://www.w3.org/2000/svg svg',
+	{
+		width: '12',
+		height: '12',
+		fill: 'none',
+		viewBox: '0 0 16 16',
+		style: 'pointer-events: none;',
+	},
+	[
+		'http://www.w3.org/2000/svg path',
+		{
+			fill: 'currentcolor',
+			'fill-rule': 'evenodd',
+			d: 'm8.28 1.47 6 6a.75.75 0 0 1 .052 1.004l-.052.056-6 6-1.06-1.06L12.69 8 7.22 2.53z',
+			'clip-rule': 'evenodd',
+			style: 'pointer-events: none;',
+		},
+	],
+];
+
+export function foldGutterExtension({ selectNode }: { selectNode: () => void }) {
+	return [
+		foldGutter({
+			domEventHandlers: {
+				click: (_view, _, event) => {
+					// If we're trying to click the button, don't select
+					if (
+						event.target instanceof HTMLButtonElement &&
+						event.target.getAttribute('data-marker-dom-element')
+					) {
+						return false;
+					}
+					selectNode();
+					return false;
+				},
+			},
+			markerDOM: (open) => {
+				const { dom: downElement } = DOMSerializer.renderSpec(document, chevronDown);
+				const { dom: rightElement } = DOMSerializer.renderSpec(document, chevronRight);
+				const htmlElement = document.createElement('button');
+				htmlElement.setAttribute('data-marker-dom-element', 'true');
+				htmlElement.setAttribute(
+					'data-testid',
+					`code-block-fold-button-${open ? 'open' : 'closed'}`,
+				);
+				htmlElement.setAttribute(
+					'style',
+					convertToInlineCss({
+						background: 'none',
+						color: 'inherit',
+						border: 'none',
+						padding: 0,
+						paddingRight: token('space.050'),
+						font: 'inherit',
+						outline: 'inherit',
+						cursor: 'pointer',
+					}),
+				);
+
+				if (open) {
+					if (downElement) {
+						htmlElement.appendChild(downElement);
+					} else {
+						// Fallback - never called
+						htmlElement.textContent = '⌄';
+					}
+				} else {
+					if (rightElement) {
+						htmlElement.appendChild(rightElement);
+					} else {
+						// Fallback - never called
+						htmlElement.textContent = '>';
+					}
+				}
+
+				return htmlElement;
+			},
+		}),
+		codeFolding({
+			placeholderDOM(view, onclick, prepared) {
+				const htmlElement = document.createElement('button');
+				htmlElement.setAttribute('data-marker-dom-element', 'true');
+				htmlElement.setAttribute(
+					'style',
+					convertToInlineCss({
+						color: 'inherit',
+						font: 'inherit',
+						cursor: 'pointer',
+					}),
+				);
+				htmlElement.textContent = '…';
+				htmlElement.className = 'cm-foldPlaceholder';
+				htmlElement.onclick = onclick;
+				return htmlElement;
+			},
+		}),
+	];
+}

package/src/nodeviews/lazyCodeBlockAdvanced.ts

@@ -12,6 +12,7 @@ interface Props {
 	api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
 	extensions: Extension[];
 	getIntl: () => IntlShape;
+	allowCodeFolding: boolean;
 }
 
 export const lazyCodeBlockView = (props: Props) => {

package/src/pm-plugins/main.ts

@@ -14,6 +14,7 @@ interface Props {
 	api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
 	extensions: Extension[];
 	getIntl: () => IntlShape;
+	allowCodeFolding: boolean;
 }
 
 export const createPlugin = (props: Props) => {

package/src/ui/theme.ts

@@ -73,6 +73,37 @@ export const cmTheme = CodeMirror.theme({
 	},
 });
 
+export const codeFoldingTheme = CodeMirror.theme({
+	'.cm-gutter': {
+		paddingLeft: token('space.075'),
+		paddingTop: token('space.100'),
+		paddingBottom: token('space.100'),
+		paddingRight: token('space.0'),
+	},
+	'.cm-foldGutter': {
+		paddingLeft: token('space.050'),
+	},
+	'.cm-gutterElement:has([data-marker-dom-element="true"])': {
+		color: token('color.icon.subtle'),
+	},
+	'.cm-gutterElement:has([data-marker-dom-element="true"]):hover': {
+		color: token('color.text.accent.gray.bolder'),
+	},
+	'.cm-foldPlaceholder': {
+		// To give spacing between lines
+		height: '20px',
+		backgroundColor: token('color.background.accent.gray.subtlest'),
+		border: 'none',
+		color: token('color.text'),
+		outline: `1px solid ${token('color.border.accent.gray')}`,
+		paddingLeft: token('space.025'),
+		paddingRight: token('space.025'),
+	},
+	'.cm-foldPlaceholder:hover': {
+		backgroundColor: token('color.background.accent.gray.subtlest.hovered'),
+	},
+});
+
 /**
  * Copied directly from `packages/editor/editor-shared-styles/src/overflow-shadow/overflow-shadow.ts`
  * `CodeMirror` does not support emotion styling so this has been re-created.