@atlaskit/editor-plugin-code-block-advanced 1.0.0

package/src/nodeviews/codeBlockNodeWithToDOMFixed.ts

@@ -0,0 +1,59 @@
+import { codeBlock } from '@atlaskit/adf-schema';
+import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
+import type { NodeSpec, DOMOutputSpec, Node } from '@atlaskit/editor-prosemirror/model';
+
+const codeBlockClassNames = {
+	container: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER,
+	start: CodeBlockSharedCssClassName.CODEBLOCK_START,
+	end: CodeBlockSharedCssClassName.CODEBLOCK_END,
+	contentWrapper: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER,
+	contentWrapped: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED,
+	gutter: CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER,
+	content: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT,
+	lineNumberWidget: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET,
+};
+
+// From: `packages/editor/editor-plugin-code-block/src/nodeviews/code-block.ts`
+const toDOM = (node: Node, contentEditable: boolean, formattedAriaLabel: string): DOMOutputSpec => [
+	'div',
+	{ class: codeBlockClassNames.container },
+	['div', { class: codeBlockClassNames.start, contenteditable: 'false' }],
+	[
+		'div',
+		{
+			class: codeBlockClassNames.contentWrapper,
+		},
+		[
+			'div',
+			{
+				class: codeBlockClassNames.gutter,
+				contenteditable: 'false',
+			},
+		],
+		[
+			'div',
+			{
+				class: codeBlockClassNames.content,
+			},
+			[
+				'code',
+				{
+					'data-language': node.attrs.language || '',
+					spellcheck: 'false',
+					contenteditable: contentEditable ? 'true' : 'false',
+					'data-testid': 'code-block--code',
+					'aria-label': formattedAriaLabel,
+				},
+				0,
+			],
+		],
+	],
+	['div', { class: codeBlockClassNames.end, contenteditable: 'false' }],
+];
+
+export const codeBlockNodeWithFixedToDOM = (): NodeSpec => {
+	return {
+		...codeBlock,
+		toDOM: (node) => toDOM(node, false, ''),
+	};
+};

package/src/nodeviews/codemirrorSync/syncCMWithPM.ts

@@ -0,0 +1,40 @@
+import { ViewUpdate } from '@codemirror/view';
+
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+
+interface Props {
+	view: EditorView;
+	update: ViewUpdate;
+	offset: number;
+}
+
+/**
+ *
+ * Synchronises the CodeMirror update changes with the Prosemirror editor
+ *
+ * @param props.view EditorView - Prosemirror EditorView
+ * @param props.update ViewUpdate - CodeMirror ViewUpdate
+ * @param props.offset number - position where the code block starts in prosemirror
+ */
+export const syncCMWithPM = ({ view, update, offset }: Props): void => {
+	const { main } = update.state.selection;
+	const selFrom = offset + main.from;
+	const selTo = offset + main.to;
+
+	const pmSel = view.state.selection;
+	if (update.docChanged || pmSel.from !== selFrom || pmSel.to !== selTo) {
+		const tr = view.state.tr;
+		// eslint-disable-next-line @typescript-eslint/max-params
+		update.changes.iterChanges((fromA, toA, fromB, toB, text) => {
+			if (text.length) {
+				tr.replaceWith(offset + fromA, offset + toA, view.state.schema.text(text.toString()));
+			} else {
+				tr.delete(offset + fromA, offset + toA);
+			}
+			offset += toB - fromB - (toA - fromA);
+		});
+		tr.setSelection(TextSelection.create(tr.doc, selFrom, selTo));
+		view.dispatch(tr);
+	}
+};

package/src/nodeviews/codemirrorSync/updateCMSelection.ts

@@ -0,0 +1,40 @@
+import { TransactionSpec as CMTransactionSpec } from '@codemirror/state';
+
+/**
+ *
+ * Compares the updated text with the current to determine the transaction to fire
+ * in the CodeMirror editor.
+ *
+ * @param curText string - the current CodeMirror text
+ * @param newText string - the new CodeMirror text
+ * @param updateCallback Callback to process the CodeMirror transaction
+ */
+export const updateCMSelection = (
+	curText: string,
+	newText: string,
+	updateCallback: (value: CMTransactionSpec) => void,
+) => {
+	if (newText !== curText) {
+		let start = 0,
+			curEnd = curText.length,
+			newEnd = newText.length;
+		while (start < curEnd && curText.charCodeAt(start) === newText.charCodeAt(start)) {
+			++start;
+		}
+		while (
+			curEnd > start &&
+			newEnd > start &&
+			curText.charCodeAt(curEnd - 1) === newText.charCodeAt(newEnd - 1)
+		) {
+			curEnd--;
+			newEnd--;
+		}
+		updateCallback({
+			changes: {
+				from: start,
+				to: curEnd,
+				insert: newText.slice(start, newEnd),
+			},
+		});
+	}
+};

package/src/nodeviews/extensions/bidiCharWarning.ts

@@ -0,0 +1,72 @@
+/**
+ * Code based on warning from @atlaskit/code
+ */
+import {
+	EditorView as CodeMirror,
+	ViewPlugin,
+	ViewUpdate,
+	Decoration,
+	MatchDecorator,
+	DecorationSet,
+	WidgetType,
+} from '@codemirror/view';
+
+import { token } from '@atlaskit/tokens';
+
+const bidiCharacterRegex = /[\u202A-\u202E\u2066-\u2069]/gu;
+
+const placeholderMatcher = new MatchDecorator({
+	regexp: bidiCharacterRegex,
+	decoration: (match) =>
+		Decoration.replace({
+			widget: new PlaceholderWidget(match[0]),
+		}),
+});
+
+export const bidiCharWarningExtension = ViewPlugin.fromClass(
+	class {
+		placeholders: DecorationSet;
+		constructor(view: CodeMirror) {
+			this.placeholders = placeholderMatcher.createDeco(view);
+		}
+		update(update: ViewUpdate) {
+			this.placeholders = placeholderMatcher.updateDeco(update, this.placeholders);
+		}
+	},
+	{
+		decorations: (instance) => instance.placeholders,
+		provide: (plugin) =>
+			CodeMirror.atomicRanges.of((view) => {
+				return view.plugin(plugin)?.placeholders || Decoration.none;
+			}),
+	},
+);
+
+function getBidiCharacterCode(bidiCharacter: string) {
+	const bidiCharacterCode = bidiCharacter.codePointAt(0)?.toString(16);
+
+	return `U+${bidiCharacterCode}`;
+}
+
+class PlaceholderWidget extends WidgetType {
+	constructor(readonly name: string) {
+		super();
+	}
+	eq(other: PlaceholderWidget) {
+		return this.name === other.name;
+	}
+	toDOM() {
+		const elt = document.createElement('span');
+		elt.setAttribute('data-bidi-character-code', this.name);
+		elt.style.cssText = `
+      padding: 0 3px;
+      color: ${token('color.text.warning')};
+			background: ${token('color.background.warning')};
+			aria-hidden="true"`;
+		elt.textContent = `<${getBidiCharacterCode(this.name)}>`;
+		return elt;
+	}
+	ignoreEvent() {
+		return false;
+	}
+}

package/src/nodeviews/extensions/keymap/backspace.ts

@@ -0,0 +1,47 @@
+import { EditorView as CodeMirror } from '@codemirror/view';
+
+import type { getPosHandlerNode } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+
+interface BackspaceProps {
+	view: EditorView;
+	cm: CodeMirror;
+	getPos: getPosHandlerNode;
+	getNode: () => PMNode;
+}
+
+export const backspaceKeymap = ({ cm, view, getPos, getNode }: BackspaceProps) => {
+	const ranges = cm.state.selection.ranges;
+
+	if (ranges.length > 1) {
+		return false;
+	}
+
+	const selection = ranges[0];
+
+	if (selection && (!selection.empty || selection.anchor > 0)) {
+		return false;
+	}
+
+	if (cm.state.doc.lines >= 2) {
+		return false;
+	}
+
+	const state = view.state;
+	const pos = getPos() ?? 0;
+	const node = getNode();
+
+	const tr = state.tr.replaceWith(
+		pos,
+		pos + node.nodeSize,
+		state.schema.nodes.paragraph.createChecked({}, node.content),
+	);
+
+	tr.setSelection(TextSelection.near(tr.doc.resolve(pos)));
+
+	view.dispatch(tr);
+	view.focus();
+	return true;
+};

package/src/nodeviews/extensions/keymap/index.ts

@@ -0,0 +1,118 @@
+import { defaultKeymap, indentWithTab } from '@codemirror/commands';
+import { Extension } from '@codemirror/state';
+import { KeyBinding, keymap as cmKeymap } from '@codemirror/view';
+
+import { RelativeSelectionPos } from '@atlaskit/editor-common/selection';
+import type { getPosHandlerNode } from '@atlaskit/editor-common/types';
+import { exitCode } from '@atlaskit/editor-prosemirror/commands';
+import { undo, redo } from '@atlaskit/editor-prosemirror/history';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+
+import { backspaceKeymap } from './backspace';
+import { maybeEscapeKeymap } from './maybeEscape';
+
+interface KeymapProps {
+	view: EditorView;
+	getNode: () => PMNode;
+	getPos: getPosHandlerNode;
+	selectCodeBlockNode: (relativeSelectionPos: RelativeSelectionPos | undefined) => void;
+	onMaybeNodeSelection: () => void;
+}
+
+export const keymapExtension = ({
+	view,
+	getNode,
+	getPos,
+	selectCodeBlockNode,
+	onMaybeNodeSelection,
+}: KeymapProps): Extension => {
+	return cmKeymap.of(
+		codeBlockKeymap({ view, getNode, getPos, selectCodeBlockNode, onMaybeNodeSelection }),
+	);
+};
+
+const codeBlockKeymap = ({
+	view,
+	getNode,
+	getPos,
+	selectCodeBlockNode,
+	onMaybeNodeSelection,
+}: KeymapProps): readonly KeyBinding[] => {
+	return [
+		{
+			key: 'ArrowUp',
+			run: (cm) =>
+				maybeEscapeKeymap({
+					unit: 'line',
+					dir: -1,
+					cm,
+					view,
+					getNode,
+					getPos,
+					selectCodeBlockNode,
+					onMaybeNodeSelection,
+				}),
+		},
+		{
+			key: 'ArrowLeft',
+			run: (cm) =>
+				maybeEscapeKeymap({
+					unit: 'char',
+					dir: -1,
+					cm,
+					view,
+					getNode,
+					getPos,
+					selectCodeBlockNode,
+					onMaybeNodeSelection,
+				}),
+		},
+		{
+			key: 'ArrowDown',
+			run: (cm) =>
+				maybeEscapeKeymap({
+					unit: 'line',
+					dir: 1,
+					cm,
+					view,
+					getNode,
+					getPos,
+					selectCodeBlockNode,
+					onMaybeNodeSelection,
+				}),
+		},
+		{
+			key: 'ArrowRight',
+			run: (cm) =>
+				maybeEscapeKeymap({
+					unit: 'char',
+					dir: 1,
+					cm,
+					view,
+					getNode,
+					getPos,
+					selectCodeBlockNode,
+					onMaybeNodeSelection,
+				}),
+		},
+		{
+			key: 'Ctrl-Enter',
+			run: () => {
+				if (!exitCode(view.state, view.dispatch)) {
+					return false;
+				}
+				view.focus();
+				return true;
+			},
+		},
+		{ key: 'Ctrl-z', mac: 'Cmd-z', run: () => undo(view.state, view.dispatch) },
+		{ key: 'Shift-Ctrl-z', mac: 'Shift-Cmd-z', run: () => redo(view.state, view.dispatch) },
+		{ key: 'Ctrl-y', mac: 'Cmd-y', run: () => redo(view.state, view.dispatch) },
+		{
+			key: 'Backspace',
+			run: (cm) => backspaceKeymap({ cm, view, getNode, getPos }),
+		},
+		...defaultKeymap.concat(indentWithTab),
+	];
+};

package/src/nodeviews/extensions/keymap/maybeEscape.ts

@@ -0,0 +1,69 @@
+import { EditorView as CodeMirror } from '@codemirror/view';
+
+import { RelativeSelectionPos } from '@atlaskit/editor-common/selection';
+import type { getPosHandlerNode } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+
+interface MaybeEscapeProps {
+	unit: 'line' | 'char';
+	dir: -1 | 1;
+	view: EditorView;
+	cm: CodeMirror;
+	getPos: getPosHandlerNode;
+	getNode: () => PMNode;
+	onMaybeNodeSelection: () => void;
+	selectCodeBlockNode: (relativeSelectionPos: RelativeSelectionPos | undefined) => void;
+}
+
+export const maybeEscapeKeymap = ({
+	unit,
+	dir,
+	view,
+	cm,
+	getPos,
+	getNode,
+	onMaybeNodeSelection,
+	selectCodeBlockNode,
+}: MaybeEscapeProps): boolean => {
+	if (unit === 'char') {
+		onMaybeNodeSelection();
+	}
+	const node = getNode();
+	const { state } = cm;
+	let main: { from: number; to: number; empty: boolean; head: number } = state.selection.main;
+	if (!main.empty) {
+		return false;
+	}
+	if (unit === 'line') {
+		main = { ...state.doc.lineAt(main.head), head: 0, empty: false };
+	}
+	if (dir < 0 ? main.from > 0 : main.to < state.doc.length) {
+		return false;
+	}
+	const targetPos = (getPos?.() ?? 0) + (dir < 0 ? 0 : node.nodeSize);
+	if (unit === 'char') {
+		view.focus();
+		selectCodeBlockNode(dir === -1 ? RelativeSelectionPos.Start : RelativeSelectionPos.End);
+		return true;
+	} else {
+		createParagraphIfEndOfDoc(view, targetPos);
+		const tr = view.state.tr;
+		const selection = Selection.near(tr.doc.resolve(targetPos), dir);
+
+		tr.setSelection(selection).scrollIntoView();
+		view.dispatch(tr);
+		view.focus();
+		return true;
+	}
+};
+
+const createParagraphIfEndOfDoc = (view: EditorView, targetPos: number) => {
+	if (targetPos === view.state.doc.content.size) {
+		const paragraph = view.state.schema.nodes.paragraph.createChecked({});
+		const tr = view.state.tr.insert(targetPos, paragraph);
+		// Note: we purposefully do a multi-dispatch here, otherwise we get stuck in codemirror
+		view.dispatch(tr);
+	}
+};

package/src/nodeviews/languages/languageMap.ts

@@ -0,0 +1,91 @@
+import { LanguageDescription } from '@codemirror/language';
+import { languages } from '@codemirror/language-data';
+
+import type { LanguageAlias } from '@atlaskit/code';
+
+type LanguageAliasValue = LanguageAlias[0];
+
+// getLanguageIdentifier defines `language.alias[0]`
+export const mapLanguageToCodeMirror = (language: LanguageAliasValue) => {
+	if (!language || language === 'none') {
+		return undefined;
+	}
+	switch (language) {
+		case 'coldfusion':
+			return languages.find((l) => {
+				return l.name.toLowerCase() === 'xml';
+			});
+		case 'matlab':
+			return languages.find((l) => {
+				return l.name.toLowerCase() === 'octave';
+			});
+		case 'javafx':
+			return languages.find((l) => {
+				return l.name.toLowerCase() === 'java';
+			});
+		case 'vbnet':
+			return languages.find((l) => {
+				return l.name === 'VB.NET';
+			});
+		case 'pas':
+			return languages.find((l) => {
+				return l.name.toLowerCase() === 'pascal';
+			});
+		case 'cuda':
+			return languages.find((l) => {
+				return l.name.toLowerCase() === 'c++';
+			});
+		case 'racket':
+			return languages.find((l) => {
+				return l.name === 'Common Lisp';
+			});
+		case 'abap':
+			return languages.find((l) => {
+				return l.name === 'SQL';
+			});
+		case 'standardmL':
+			return languages.find((l) => {
+				return l.name === 'SML';
+			});
+		case 'objective-j':
+			return languages.find((l) => {
+				return l.name === 'Objective-C';
+			});
+		case 'docker':
+			return languages.find((l) => {
+				return l.name === 'Dockerfile';
+			});
+		case 'arduino':
+			return languages.find((l) => {
+				return l.name === 'C++';
+			});
+		case 'visualbasic':
+			return languages.find((l) => {
+				return l.name === 'VB.NET';
+			});
+		case 'elixir':
+			return LanguageDescription.of({
+				name: 'Elixir',
+				load() {
+					return import(
+						/* webpackChunkName: "@atlaskit-internal_@atlaskit/editor-plugin-code-block-advanced-lang-elixir" */
+						'codemirror-lang-elixir'
+					).then((m) => m.elixir());
+				},
+			});
+		case 'graphql':
+			return LanguageDescription.of({
+				name: 'GraphQL',
+				load() {
+					return import(
+						/* webpackChunkName: "@atlaskit-internal_@atlaskit/editor-plugin-code-block-advanced-lang-graphql" */
+						'cm6-graphql'
+					).then((m) => m.graphqlLanguageSupport());
+				},
+			});
+		default:
+			return languages.find((l) => {
+				return l.alias.includes(language) || l.name.toLowerCase() === language?.toLowerCase();
+			});
+	}
+};

package/src/nodeviews/languages/loader.ts

@@ -0,0 +1,44 @@
+import { LanguageSupport } from '@codemirror/language';
+
+import { mapLanguageToCodeMirror } from './languageMap';
+
+/**
+ * Manages loading the languages (for syntax highlighting, etc.)
+ * from CodeMirror and updating the language in the CodeMirror view
+ */
+export class LanguageLoader {
+	private languageName: string = '';
+
+	constructor(private updateLanguageCompartment: (value: LanguageSupport | []) => void) {}
+
+	updateLanguage(languageName: string) {
+		if (languageName === this.languageName) {
+			return;
+		}
+		const language = mapLanguageToCodeMirror(languageName);
+
+		const configureEmpty = () => {
+			this.updateLanguageCompartment([]);
+			this.languageName = '';
+		};
+
+		if (!language) {
+			configureEmpty();
+			return;
+		}
+
+		language
+			.load()
+			.then((lang) => {
+				if (lang) {
+					this.updateLanguageCompartment(lang);
+					this.languageName = languageName;
+				} else {
+					configureEmpty();
+				}
+			})
+			.catch(() => {
+				configureEmpty();
+			});
+	}
+}

package/src/nodeviews/lazyCodeBlockAdvanced.ts

@@ -0,0 +1,32 @@
+import { Extension } from '@codemirror/state';
+
+import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+
+
+import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
+
+interface Props {
+	api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
+	extensions: Extension[];
+}
+
+export const lazyCodeBlockView = (props: Props) => {
+	return withLazyLoading({
+		nodeName: 'codeBlock',
+		getNodeViewOptions: () => {},
+		loader: () => {
+			const result = import(
+				/* webpackChunkName: "@atlaskit-internal_editor-plugin-code-block-advanced-nodeview" */
+				'./codeBlockAdvanced'
+			).then(({ getCodeBlockAdvancedNodeView }) => {
+				return (node: PMNode, view: EditorView, getPos: () => number | undefined) => {
+					return getCodeBlockAdvancedNodeView(props)(node, view, getPos);
+				};
+			});
+			return result;
+		},
+	});
+};

package/src/pm-plugins/main.ts

@@ -0,0 +1,22 @@
+import type { Extension } from '@codemirror/state';
+
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+
+import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
+import { lazyCodeBlockView } from '../nodeviews/lazyCodeBlockAdvanced';
+
+interface Props {
+	api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
+	extensions: Extension[];
+}
+
+export const createPlugin = (props: Props) => {
+	return new SafePlugin({
+		props: {
+			nodeViews: {
+				codeBlock: lazyCodeBlockView(props),
+			},
+		},
+	});
+};

package/src/ui/syntaxHighlightingTheme.ts

@@ -0,0 +1,50 @@
+import { HighlightStyle } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+
+import { token } from '@atlaskit/tokens';
+
+// Based on `platform/packages/design-system/code/src/internal/theme/styles.tsx`
+export const highlightStyle = HighlightStyle.define([
+	{ tag: tags.meta, color: token('color.text') },
+	{ tag: tags.link, textDecoration: 'underline' },
+	{
+		tag: tags.heading,
+		textDecoration: 'underline',
+		// Custom syntax styling to match existing styling
+		// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+		fontWeight: token('font.weight.bold'),
+	},
+	{ tag: tags.emphasis, fontStyle: 'italic' },
+	{
+		tag: tags.strong,
+		// Custom syntax styling to match existing styling
+		// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+		fontWeight: token('font.weight.bold'),
+	},
+	{ tag: tags.strikethrough, textDecoration: 'line-through' },
+	{
+		tag: tags.keyword,
+		color: token('color.text.accent.blue'),
+		// Custom syntax styling to match existing styling
+		// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+		fontWeight: token('font.weight.bold'),
+	},
+	{
+		tag: [tags.atom, tags.bool, tags.url, tags.contentSeparator, tags.labelName],
+		color: token('color.text.accent.blue'),
+	},
+	{
+		tag: [tags.literal, tags.inserted],
+		color: token('color.text.accent.blue'),
+	},
+	{ tag: [tags.string, tags.deleted], color: token('color.text.accent.green') },
+	{ tag: [tags.regexp, tags.escape, tags.special(tags.string)], color: token('color.text') },
+	{ tag: tags.definition(tags.variableName), color: token('color.text') },
+	{ tag: tags.local(tags.variableName), color: token('color.text') },
+	{ tag: [tags.typeName, tags.namespace], color: token('color.text.accent.blue') },
+	{ tag: tags.className, color: token('color.text.accent.purple') },
+	{ tag: [tags.special(tags.variableName), tags.macroName], color: token('color.text') },
+	{ tag: tags.definition(tags.propertyName), color: token('color.text') },
+	{ tag: tags.comment, color: token('color.text.subtlest'), fontStyle: 'italic' },
+	{ tag: tags.invalid, color: token('color.text') },
+]);