fix: formatting wasn't reflected in style attribute (remirror#1071)

The SchemaAttributesObject didn't have access to the current style. This meant that only one of the formatting attributes was reflected in the style.

Solution provided by @whawker

Fixes remirror#1063

packages/remirror__extension-node-formatting/__stories__/node-formatting.stories.tsx

@@ -0,0 +1,59 @@
+import 'remirror/styles/all.css';
+
+import React from 'react';
+import { NodeFormattingExtension } from 'remirror/extensions';
+import { htmlToProsemirrorNode } from '@remirror/core';
+import { Remirror, ThemeProvider, useCommands, useRemirror } from '@remirror/react';
+
+export default { title: 'Extensions / Node Formatting' };
+
+export const Basic: React.FC = () => {
+  const { manager, state, onChange } = useRemirror({
+    extensions: () => [new NodeFormattingExtension()],
+    content: '<p>Click buttons to change alignment, indent,<br> and line height</p>',
+    stringHandler: htmlToProsemirrorNode,
+  });
+
+  return (
+    <ThemeProvider>
+      <Remirror manager={manager} autoFocus onChange={onChange} state={state} autoRender='end'>
+        <AlignButtons />
+        &nbsp;
+        <IndentButtons />
+        &nbsp;
+        <LineHeightButtons />
+      </Remirror>
+    </ThemeProvider>
+  );
+};
+
+const AlignButtons = () => {
+  const commands = useCommands();
+  return (
+    <>
+      <button onClick={() => commands.leftAlign()}>Left</button>
+      <button onClick={() => commands.centerAlign()}>Center</button>
+      <button onClick={() => commands.rightAlign()}>Right</button>
+    </>
+  );
+};
+
+const IndentButtons = () => {
+  const commands = useCommands();
+  return (
+    <>
+      <button onClick={() => commands.decreaseIndent()}>&lt;&lt;</button>
+      <button onClick={() => commands.increaseIndent()}>&gt;&gt;</button>
+    </>
+  );
+};
+
+const LineHeightButtons = () => {
+  const commands = useCommands();
+  return (
+    <>
+      <button onClick={() => commands.setLineHeight(1)}>Narrow</button>
+      <button onClick={() => commands.setLineHeight(2)}>Wide</button>
+    </>
+  );
+};

packages/remirror__extension-node-formatting/__stories__/tsconfig.json

@@ -0,0 +1,53 @@
+{
+  "__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]_5adcf14f16f83a2edb2923710ccaaea0/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"
+    }
+  ]
+}

packages/remirror__extension-node-formatting/src/node-formatting-extension.ts

@@ -75,6 +75,21 @@ export class NodeFormattingExtension extends PlainExtension<NodeFormattingOption
           nodeIndent: this.nodeIndent(),
           nodeTextAlignment: this.nodeTextAlignment(),
           nodeLineHeight: this.nodeLineHeight(),
+          style: {
+            default: '',
+            parseDOM: (element) => element.getAttribute('style'),
+            toDOM: ({ nodeIndent, nodeTextAlignment, nodeLineHeight, style }) => {
+              const marginLeft = nodeIndent ? this.options.indents[nodeIndent] : undefined;
+              const textAlign =
+                nodeTextAlignment && nodeTextAlignment !== 'none' ? nodeTextAlignment : undefined;
+              const lineHeight = nodeLineHeight ? nodeLineHeight : undefined;
+
+              return {
+                // Compose the style string together with the currently set style.
+                style: joinStyles({ marginLeft, textAlign, lineHeight }, style as string),
+              };
+            },
+          },
         },
       },
     ];
@@ -83,7 +98,7 @@ export class NodeFormattingExtension extends PlainExtension<NodeFormattingOption
   @command()
   setLineHeight(lineHeight: number): CommandFunction {
     return this.setNodeAttribute(({ node }) => {
-      if (lineHeight === node.attrs.nodeTextAlignment) {
+      if (lineHeight === node.attrs.nodeLineHeight) {
         return;
       }
 
@@ -173,7 +188,7 @@ export class NodeFormattingExtension extends PlainExtension<NodeFormattingOption
 
   @keyBinding({ shortcut: NamedShortcut.CenterAlignment, command: 'centerAlign' })
   centerAlignShortcut(props: KeyBindingProps): boolean {
-    return this.leftAlign()(props);
+    return this.centerAlign()(props);
   }
 
   @keyBinding({ shortcut: NamedShortcut.JustifyAlignment, command: 'justifyAlign' })
@@ -213,25 +228,6 @@ export class NodeFormattingExtension extends PlainExtension<NodeFormattingOption
           extractIndent(this.options.indents, element.style.marginLeft)
         );
       },
-      toDOM: (attrs) => {
-        // Ignoring the `0` value is intentional here.
-        if (!attrs.nodeIndent) {
-          return;
-        }
-
-        const indentIndex = `${attrs.nodeIndent}`;
-        const marginLeft = this.options.indents[attrs.nodeIndent];
-
-        if (!marginLeft) {
-          return;
-        }
-
-        return {
-          [NODE_INDENT_ATTRIBUTE]: indentIndex,
-          // Compose the style string together with the currently set style.
-          style: joinStyles({ marginLeft }, attrs.style as string),
-        };
-      },
     };
   }
 
@@ -244,19 +240,6 @@ export class NodeFormattingExtension extends PlainExtension<NodeFormattingOption
       parseDOM: (element) => {
         return element.getAttribute(NODE_TEXT_ALIGNMENT_ATTRIBUTE) ?? element.style.textAlign;
       },
-      toDOM: (attrs) => {
-        const textAlign = attrs.nodeTextAlignment;
-
-        if (!textAlign || textAlign === 'none') {
-          return;
-        }
-
-        return {
-          [NODE_TEXT_ALIGNMENT_ATTRIBUTE]: textAlign,
-          // Compose the style string together with the currently set style.
-          style: joinStyles({ textAlign }, attrs.style as string),
-        };
-      },
     };
   }
 
@@ -269,19 +252,6 @@ export class NodeFormattingExtension extends PlainExtension<NodeFormattingOption
       parseDOM: (element) => {
         return element.getAttribute(NODE_LINE_HEIGHT_ATTRIBUTE) ?? element.style.lineHeight;
       },
-      toDOM: (attrs) => {
-        const lineHeight = attrs.nodeTextAlignment;
-
-        if (!lineHeight) {
-          return;
-        }
-
-        return {
-          [NODE_LINE_HEIGHT_ATTRIBUTE]: lineHeight,
-          // Compose the style string together with the currently set style.
-          style: joinStyles({ lineHeight }, attrs.style as string),
-        };
-      },
     };
   }
 

support/root/tsconfig.json

@@ -329,6 +329,9 @@
     {
       "path": "packages/remirror__extension-mention/src"
     },
+    {
+      "path": "packages/remirror__extension-node-formatting/__stories__"
+    },
     {
       "path": "packages/remirror__extension-node-formatting/__tests__"
     },