Repository: Thinkmill/keystatic
Pull request #328 (2023-06-16 06:23:49)

Fix parsing inline code in new editor
Fix parsing inline code in new editor


vercel[bot]: [vc]: #C2wnbZs73N8PZlhWPkpcJIUH4gRXpXZRIHZQbirUsvA=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJrZXlzdGF0aWMiLCJyb290RGlyZWN0b3J5Ijoia2V5c3RhdGljIiwibGl2ZUZlZWRiYWNrIjp7InJlc29sdmVkIjowLCJ1bnJlc29sdmVkIjowLCJ0b3RhbCI6MCwibGluayI6IiJ9LCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vdGhpbmttaWxsLWxhYnMva2V5c3RhdGljL0dZQ3BCSjgxV1FXQWRkb1h4QnN1RzhiZEd0TFEiLCJuZXh0Q29tbWl0U3RhdHVzIjoiUEVORElORyJ9XX0=
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **keystatic** | 🔄 Building ([Inspect](https://vercel.com/thinkmill-labs/keystatic/GYCpBJ81WQWAddoXxBsuG8bdGtLQ)) |  |  | Jun 16, 2023 6:23am |


changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: 7481fbd6c8635ee34eaab5f14cd3a90fe6b841dd

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/Thinkmill/keystatic/new/pr328?filename=.changeset/brown-pianos-sell.md&value=---%0A%22%40keystatic%2Ftest-next-app%22%3A%20patch%0A%22%40keystatic%2Fcore%22%3A%20patch%0A---%0A%0AFix%20parsing%20inline%20code%20in%20new%20editor%0A)



Patch:
diff --git a/packages/keystatic/src/form/fields/markdoc/editor/markdoc/parse.ts b/packages/keystatic/src/form/fields/markdoc/editor/markdoc/parse.ts
index 98f03a83..48e189e6 100644
--- a/packages/keystatic/src/form/fields/markdoc/editor/markdoc/parse.ts
+++ b/packages/keystatic/src/form/fields/markdoc/editor/markdoc/parse.ts
@@ -205,7 +205,10 @@ function markdocNodeToProseMirrorNode(
     return addMark(node, schema.marks.italic);
   }
   if (node.type === 'code') {
-    return addMark(node, schema.marks.code);
+    return schema.schema.text(node.attributes.content, [
+      ...getState().marks,
+      schema.marks.code.create(),
+    ]);
   }
   if (node.type === 's') {
     return addMark(node, schema.marks.strikethrough);
diff --git a/packages/keystatic/src/form/fields/markdoc/editor/markdoc/serialize.ts b/packages/keystatic/src/form/fields/markdoc/editor/markdoc/serialize.ts
index 558a98a4..714e4a14 100644
--- a/packages/keystatic/src/form/fields/markdoc/editor/markdoc/serialize.ts
+++ b/packages/keystatic/src/form/fields/markdoc/editor/markdoc/serialize.ts
@@ -20,7 +20,8 @@ function textblockChildren(fragment: Fragment): MarkdocNode[] {
   const children: MarkdocNode[] = [];
   fragment.forEach(child => {
     if (child.text !== undefined) {
-      let node = new Ast.Node('text', { content: child.text }, []);
+      const textNode = new Ast.Node('text', { content: child.text }, []);
+      let node = textNode;
       const schema = getEditorSchema(child.type.schema);
       let linkMark: Mark | undefined;
       for (const mark of child.marks) {
@@ -33,7 +34,8 @@ function textblockChildren(fragment: Fragment): MarkdocNode[] {
           type = 'strong';
         }
         if (mark.type === schema.marks.code) {
-          type = 'code';
+          textNode.type = 'code';
+          continue;
         }
         if (mark.type === schema.marks.italic) {
           type = 'em';


Test patch:
diff --git a/packages/keystatic/src/form/fields/markdoc/editor/tests/markdoc.test.tsx b/packages/keystatic/src/form/fields/markdoc/editor/tests/markdoc.test.tsx
new file mode 100644
index 00000000..c439e982
--- /dev/null
+++ b/packages/keystatic/src/form/fields/markdoc/editor/tests/markdoc.test.tsx
@@ -0,0 +1,140 @@
+/** @jest-environment jsdom */
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { EditorStateDescription, jsx, toEditorState } from './utils';
+import { markdocToProseMirror } from '../markdoc/parse';
+import { proseMirrorToMarkdoc } from '../markdoc/serialize';
+import Markdoc from '@markdoc/markdoc';
+import { createEditorSchema } from '../schema';
+
+const schema = createEditorSchema({});
+
+function toMarkdoc(node: EditorStateDescription) {
+  return Markdoc.format(
+    Markdoc.parse(Markdoc.format(proseMirrorToMarkdoc(node.get().doc)))
+  );
+}
+
+function fromMarkdoc(markdoc: string) {
+  return toEditorState(markdocToProseMirror(Markdoc.parse(markdoc), schema));
+}
+
+test('basic', () => {
+  expect(
+    toMarkdoc(
+      <doc>
+        <paragraph>
+          <text>Something</text>
+        </paragraph>
+        <heading level={1}>
+          <text>Heading</text>
+        </heading>
+        <paragraph />
+      </doc>
+    )
+  ).toMatchInlineSnapshot(`
+    "Something
+
+    # Heading
+    "
+  `);
+});
+
+test('nested list', () => {
+  const markdoc = toMarkdoc(
+    <doc>
+      <unordered_list>
+        <list_item>
+          <paragraph>
+            <text>Something</text>
+          </paragraph>
+          <unordered_list>
+            <list_item>
+              <paragraph>
+                <text>Something</text>
+              </paragraph>
+            </list_item>
+          </unordered_list>
+        </list_item>
+      </unordered_list>
+      <paragraph />
+    </doc>
+  );
+  expect(markdoc).toMatchInlineSnapshot(`
+    "- Something
+
+      - Something
+    "
+  `);
+  expect(fromMarkdoc(markdoc)).toMatchInlineSnapshot(`
+    <doc>
+      <unordered_list>
+        <list_item>
+          <paragraph>
+            <text>
+              <cursor />
+              Something
+            </text>
+          </paragraph>
+          <unordered_list>
+            <list_item>
+              <paragraph>
+                <text>
+                  Something
+                </text>
+              </paragraph>
+            </list_item>
+          </unordered_list>
+        </list_item>
+      </unordered_list>
+    </doc>
+  `);
+});
+
+test('inline code', () => {
+  const markdoc = toMarkdoc(
+    <doc>
+      <paragraph>
+        <text>Something</text>
+      </paragraph>
+      <heading level={1}>
+        <text>Heading</text>
+      </heading>
+      <paragraph>
+        <text code>a</text>
+      </paragraph>
+    </doc>
+  );
+  expect(markdoc).toMatchInlineSnapshot(`
+    "Something
+
+    # Heading
+
+    \`a\`
+    "
+  `);
+  expect(fromMarkdoc(markdoc)).toMatchInlineSnapshot(`
+    <doc>
+      <paragraph>
+        <text>
+          <cursor />
+          Something
+        </text>
+      </paragraph>
+      <heading
+        level={1}
+      >
+        <text>
+          Heading
+        </text>
+      </heading>
+      <paragraph>
+        <text
+          code={true}
+        >
+          a
+        </text>
+      </paragraph>
+    </doc>
+  `);
+});
diff --git a/packages/keystatic/src/form/fields/markdoc/editor/tests/utils.tsx b/packages/keystatic/src/form/fields/markdoc/editor/tests/utils.tsx
index eb2bdc06..f7f8c91c 100644
--- a/packages/keystatic/src/form/fields/markdoc/editor/tests/utils.tsx
+++ b/packages/keystatic/src/form/fields/markdoc/editor/tests/utils.tsx
@@ -404,7 +404,7 @@ export declare namespace jsx {
   }
 }
 
-function toEditorState(doc: Node): EditorStateDescription {
+export function toEditorState(doc: Node): EditorStateDescription {
   if (!(doc instanceof Node)) {
     throw new Error('toEditorState only accepts a single node');
   }
@@ -539,7 +539,7 @@ const editorStateSerializer: NewPlugin = {
   },
 };
 
-type EditorStateDescription = {
+export type EditorStateDescription = {
   get(): EditorState;
 };