Repository: Thinkmill/keystatic
Pull request #68 (2023-02-20 23:09:51)

Fix text align

changeset-bot[bot]: ###  🦋  Changeset detected

Latest commit: ce7cba4732a52a6d8d344869890e25561cb680d3

**The changes in this PR will be included in the next version bump.**

<details><summary>This PR includes changesets to release 4 packages</summary>

  | Name                           | Type  |
| ------------------------------ | ----- |
| @keystatic/core                | Patch |
| @keystatic/test-next-app       | Patch |
| localization                   | Patch |
| @keystatic/test-next-pages-dir | Patch |

</details>

Not sure what this means? [Click here  to learn what changesets are](https://github.com/changesets/changesets/blob/master/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add another changeset to this PR](https://github.com/Thinkmill/keystatic/new/fix-text-align?filename=.changeset/early-cows-eat.md&value=---%0A%22%40keystatic%2Ftest-next-app%22%3A%20patch%0A%22%40keystatic%2Fcore%22%3A%20patch%0A---%0A%0AFix%20text%20align%0A)


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

| Name | Status | Preview | Comments | Updated |
| :--- | :----- | :------ | :------- | :------ |
| **voussoir** | ✅ Ready ([Inspect](https://vercel.com/thinkmill/voussoir/HKt18RgQ8Qcpst8ndJpkv7NkPdqz)) | [Visit Preview](https://voussoir-git-fix-text-align-thinkmill.vercel.app) | 💬 [**Add your feedback**](https://vercel.live/open-feedback/voussoir-git-fix-text-align-thinkmill.vercel.app) | Feb 20, 2023 at 11:09PM (UTC) |



Patch:
diff --git a/.changeset/cold-starfishes-draw.md b/.changeset/cold-starfishes-draw.md
new file mode 100644
index 00000000..a07abde2
--- /dev/null
+++ b/.changeset/cold-starfishes-draw.md
@@ -0,0 +1,5 @@
+---
+'@keystatic/core': patch
+---
+
+Fix text alignment not serialising/deserialising to Markdoc
diff --git a/.changeset/lazy-rings-play.md b/.changeset/lazy-rings-play.md
index b0b8f7c1..634eb600 100644
--- a/.changeset/lazy-rings-play.md
+++ b/.changeset/lazy-rings-play.md
@@ -1,5 +1,5 @@
 ---
-'keystatic': patch
+'@keystatic/core': patch
 ---
 
 replace "edit" with localized string
diff --git a/.changeset/perfect-candles-change.md b/.changeset/perfect-candles-change.md
index 5b2c602a..a01f208b 100644
--- a/.changeset/perfect-candles-change.md
+++ b/.changeset/perfect-candles-change.md
@@ -1,5 +1,5 @@
 ---
-'keystatic': patch
+'@keystatic/core': patch
 ---
 
 - Use localized string for "search".
diff --git a/packages/keystatic/markdoc/from-markdoc.ts b/packages/keystatic/markdoc/from-markdoc.ts
index d7019e0b..9763f05c 100644
--- a/packages/keystatic/markdoc/from-markdoc.ts
+++ b/packages/keystatic/markdoc/from-markdoc.ts
@@ -159,6 +159,7 @@ function fromMarkdocNode(
       type: 'heading',
       level: node.attributes.level,
       children: inlineFromMarkdoc(node.children),
+      textAlign: node.attributes.textAlign,
     };
   }
   if (node.type === 'list') {
@@ -181,7 +182,11 @@ function fromMarkdocNode(
     if (children.length === 1 && children[0].type === 'component-inline-prop') {
       return children[0];
     }
-    return { type: 'paragraph', children };
+    return {
+      type: 'paragraph',
+      children,
+      textAlign: node.attributes.textAlign,
+    };
   }
   if (node.type === 'hr') {
     return { type: 'divider', children: [{ text: '' }] };
diff --git a/packages/keystatic/markdoc/to-markdoc.tsx b/packages/keystatic/markdoc/to-markdoc.tsx
index c093d6b7..c36c4302 100644
--- a/packages/keystatic/markdoc/to-markdoc.tsx
+++ b/packages/keystatic/markdoc/to-markdoc.tsx
@@ -190,7 +190,19 @@ function toMarkdoc(
   componentBlocks: Record<string, ComponentBlock>
 ): Node {
   if (node.type === 'paragraph') {
-    return new Ast.Node('paragraph', {}, [toInline(node.children)]);
+    const markdocNode = new Ast.Node(
+      'paragraph',
+      node.textAlign ? { textAlign: node.textAlign } : {},
+      [toInline(node.children)]
+    );
+    if (node.textAlign) {
+      markdocNode.annotations.push({
+        name: 'textAlign',
+        value: node.textAlign,
+        type: 'attribute',
+      });
+    }
+    return markdocNode;
   }
   if (node.type === 'code') {
     let content = (node.children[0] as { text: string }).text + '\n';
@@ -207,9 +219,22 @@ function toMarkdoc(
     return new Ast.Node('hr');
   }
   if (node.type === 'heading') {
-    return new Ast.Node('heading', { level: node.level }, [
-      toInline(node.children),
-    ]);
+    const markdocNode = new Ast.Node(
+      'heading',
+      {
+        level: node.level,
+        ...(node.textAlign ? { textAlign: node.textAlign } : {}),
+      },
+      [toInline(node.children)]
+    );
+    if (node.textAlign) {
+      markdocNode.annotations.push({
+        name: 'textAlign',
+        value: node.textAlign,
+        type: 'attribute',
+      });
+    }
+    return markdocNode;
   }
   if (node.type === 'ordered-list') {
     return new Ast.Node(


Test patch:
diff --git a/packages/keystatic/DocumentEditor/tests/jsx/namespace.d.ts b/packages/keystatic/DocumentEditor/tests/jsx/namespace.d.ts
index b776d760..26597e4e 100644
--- a/packages/keystatic/DocumentEditor/tests/jsx/namespace.d.ts
+++ b/packages/keystatic/DocumentEditor/tests/jsx/namespace.d.ts
@@ -33,6 +33,7 @@ declare namespace __jsx {
       heading: {
         level: 1 | 2 | 3 | 4 | 5 | 6;
         children: Children;
+        textAlign?: 'center' | 'end';
       };
       'component-block': {
         component: string;
diff --git a/packages/keystatic/markdoc/markdoc.test.tsx b/packages/keystatic/markdoc/markdoc.test.tsx
index e538febb..d99258c1 100644
--- a/packages/keystatic/markdoc/markdoc.test.tsx
+++ b/packages/keystatic/markdoc/markdoc.test.tsx
@@ -82,6 +82,50 @@ test('basic', () => {
   `);
 });
 
+test('textAlign', () => {
+  const markdoc = toMarkdoc(
+    <editor>
+      <paragraph textAlign="center">
+        <text>Something</text>
+      </paragraph>
+      <heading level={1} textAlign="end">
+        <text>Heading</text>
+      </heading>
+      <paragraph>
+        <text />
+      </paragraph>
+    </editor>
+  );
+  expect(markdoc).toMatchInlineSnapshot(`
+    "Something{% textAlign="center" %}
+
+    # Heading{% textAlign="end" %}
+    "
+  `);
+  expect(fromMarkdoc(markdoc)).toMatchInlineSnapshot(`
+    <editor>
+      <paragraph
+        textAlign="center"
+      >
+        <text>
+          Something
+        </text>
+      </paragraph>
+      <heading
+        level={1}
+        textAlign="end"
+      >
+        <text>
+          Heading
+        </text>
+      </heading>
+      <paragraph>
+        <text />
+      </paragraph>
+    </editor>
+  `);
+});
+
 test('inline code', () => {
   const markdoc = toMarkdoc(
     <editor>