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