diff --git a/.changeset/two-mangos-pay.md b/.changeset/two-mangos-pay.md
new file mode 100644
index 0000000000..61887ad778
--- /dev/null
+++ b/.changeset/two-mangos-pay.md
@@ -0,0 +1,5 @@
+---
+'@remirror/extension-code-block': patch
+---
+
+Fix a crash when the code block node contains an invalid language name.
diff --git a/packages/remirror__extension-code-block/__stories__/code-block.stories.tsx b/packages/remirror__extension-code-block/__stories__/code-block.stories.tsx
new file mode 100644
index 0000000000..8d377f9b31
--- /dev/null
+++ b/packages/remirror__extension-code-block/__stories__/code-block.stories.tsx
@@ -0,0 +1,69 @@
+import javascript from 'refractor/lang/javascript';
+import typescript from 'refractor/lang/typescript';
+import { CodeBlockExtension } from 'remirror/extensions';
+import { ProsemirrorDevTools } from '@remirror/dev';
+import { Remirror, ThemeProvider, useEditorState, useRemirror } from '@remirror/react';
+
+export default { title: 'Code Block extension' };
+
+const Dev = () => {
+ const updatedState = useEditorState();
+ console.log(JSON.stringify(updatedState.doc.toJSON()));
+ return null;
+};
+export const Basic = (): JSX.Element => {
+ const { manager, state } = useRemirror({ extensions, content, stringHandler: 'html' });
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+Basic.args = {
+ autoLink: true,
+ openLinkOnClick: true,
+};
+
+const extensions = () => [
+ new CodeBlockExtension({
+ supportedLanguages: [javascript, typescript],
+ }),
+];
+
+const html = String.raw;
+const content = html`
+
+function sayHello{
+ console.log('hello world!')
+}
+
+`;
+
+export const WithIncorrectLanguage = (): JSX.Element => {
+ const { manager, state } = useRemirror({
+ extensions,
+ content: {
+ type: 'doc',
+ content: [
+ {
+ type: 'codeBlock',
+ attrs: { language: 'THIS_LANGUAGE_DOES_NOT_EXIST', wrap: false },
+ content: [{ type: 'text', text: 'hello world' }],
+ },
+ ],
+ },
+ });
+
+ return (
+
+
+
+
+
+ );
+};
diff --git a/packages/remirror__extension-code-block/__stories__/tsconfig.json b/packages/remirror__extension-code-block/__stories__/tsconfig.json
new file mode 100644
index 0000000000..da86eb7b29
--- /dev/null
+++ b/packages/remirror__extension-code-block/__stories__/tsconfig.json
@@ -0,0 +1,56 @@
+{
+ "__AUTO_GENERATED__": [
+ "To update the configuration edit the following field.",
+ "`package.json > @remirror > tsconfigs > '__stories__'`",
+ "",
+ "Then run: `pnpm -w generate:ts`"
+ ],
+ "extends": "../../../support/tsconfig.base.json",
+ "compilerOptions": {
+ "types": [],
+ "declaration": false,
+ "noEmit": true,
+ "skipLibCheck": true,
+ "importsNotUsedAsValues": "remove",
+ "paths": {
+ "react": [
+ "../../../node_modules/.pnpm/@types+react@17.0.14/node_modules/@types/react/index.d.ts"
+ ],
+ "react/jsx-dev-runtime": [
+ "../../../node_modules/.pnpm/@types+react@17.0.14/node_modules/@types/react/jsx-dev-runtime.d.ts"
+ ],
+ "react/jsx-runtime": [
+ "../../../node_modules/.pnpm/@types+react@17.0.14/node_modules/@types/react/jsx-runtime.d.ts"
+ ],
+ "react-dom": [
+ "../../../node_modules/.pnpm/@types+react-dom@17.0.9/node_modules/@types/react-dom/index.d.ts"
+ ],
+ "reakit": [
+ "../../../node_modules/.pnpm/reakit@1.3.8_react-dom@17.0.2+react@17.0.2/node_modules/reakit/ts/index.d.ts"
+ ],
+ "@remirror/react": ["../../remirror__react/src/index.ts"],
+ "@storybook/react": [
+ "../../../node_modules/.pnpm/@storybook+react@6.3.4_dfad392d5450b8683a621f3ec486af19/node_modules/@storybook/react/types-6-0.d.ts"
+ ],
+ "@remirror/dev": ["../../remirror__dev/src/index.ts"]
+ }
+ },
+ "include": ["./"],
+ "references": [
+ {
+ "path": "../../testing/src"
+ },
+ {
+ "path": "../../remirror/src"
+ },
+ {
+ "path": "../../remirror__core/src"
+ },
+ {
+ "path": "../../remirror__messages/src"
+ },
+ {
+ "path": "../../remirror__theme/src"
+ }
+ ]
+}
diff --git a/packages/remirror__extension-code-block/src/code-block-utils.ts b/packages/remirror__extension-code-block/src/code-block-utils.ts
index 7a5d164503..d62772672c 100644
--- a/packages/remirror__extension-code-block/src/code-block-utils.ts
+++ b/packages/remirror__extension-code-block/src/code-block-utils.ts
@@ -101,10 +101,11 @@ function getPositionedRefractorNodes(
plainTextClassName: string | undefined,
) {
const { node, pos } = nodeWithPos;
- const refractorNodes = refractor.highlight(
- node.textContent ?? '',
- node.attrs.language?.replace('language-', '') ?? 'markup',
- );
+ const language = getLanguage({
+ language: node.attrs.language?.replace('language-', ''),
+ fallback: 'markup',
+ });
+ const refractorNodes = refractor.highlight(node.textContent ?? '', language);
const parsedRefractorNodes = parseRefractorNodes(refractorNodes, plainTextClassName);
let startPos = pos + 1;
diff --git a/support/root/tsconfig.json b/support/root/tsconfig.json
index 553dbe05eb..8e4215fa51 100644
--- a/support/root/tsconfig.json
+++ b/support/root/tsconfig.json
@@ -143,6 +143,9 @@
{
"path": "packages/remirror__extension-callout/src"
},
+ {
+ "path": "packages/remirror__extension-code-block/__stories__"
+ },
{
"path": "packages/remirror__extension-code-block/__tests__"
},