fix(extension-code-block): set fallback language (remirror#1055)

.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.

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 (
+    <ThemeProvider>
+      <Remirror manager={manager} initialContent={state} autoRender>
+        <Dev />
+        <ProsemirrorDevTools />
+      </Remirror>
+    </ThemeProvider>
+  );
+};
+
+Basic.args = {
+  autoLink: true,
+  openLinkOnClick: true,
+};
+
+const extensions = () => [
+  new CodeBlockExtension({
+    supportedLanguages: [javascript, typescript],
+  }),
+];
+
+const html = String.raw;
+const content = html`
+  <pre><code data-code-block-language="typescript">
+function sayHello{
+  console.log('hello world!')
+}
+</code></pre>
+`;
+
+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 (
+    <ThemeProvider>
+      <Remirror manager={manager} initialContent={state} autoRender>
+        <ProsemirrorDevTools />
+      </Remirror>
+    </ThemeProvider>
+  );
+};

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/@[email protected]/node_modules/@types/react/index.d.ts"
+      ],
+      "react/jsx-dev-runtime": [
+        "../../../node_modules/.pnpm/@[email protected]/node_modules/@types/react/jsx-dev-runtime.d.ts"
+      ],
+      "react/jsx-runtime": [
+        "../../../node_modules/.pnpm/@[email protected]/node_modules/@types/react/jsx-runtime.d.ts"
+      ],
+      "react-dom": [
+        "../../../node_modules/.pnpm/@[email protected]/node_modules/@types/react-dom/index.d.ts"
+      ],
+      "reakit": [
+        "../../../node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/reakit/ts/index.d.ts"
+      ],
+      "@remirror/react": ["../../remirror__react/src/index.ts"],
+      "@storybook/react": [
+        "../../../node_modules/.pnpm/@[email protected]_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"
+    }
+  ]
+}

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;

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__"
     },