fix(plugin): set correct position of nodes

Author: sergeysova

example/src/woly/atoms/button/usage.mdx

@@ -23,6 +23,22 @@ const Example = () => (
 );
 ```
 
+First
+
+<Frame>
+  <New />
+  <button.Base />
+</Frame>
+
+Second
+
+<Frame>
+  <New />
+  <button.Base />
+</Frame>
+
+Third
+
 <Frame>
   <New />
   <button.Base />
@@ -39,10 +55,10 @@ const Example = () => (
 
 ### Props
 
-| Name    | Type                            | Default    | Description                                                |
-| ------- | ------------------------------- | ---------- | ---------------------------------------------------------- |
-| `text`  | `React.ReactNode`               |            | Text appeared on the button                                |
-| `left`  | `React.ReactNode`               | `null`     | Component to show on the left side of the text (ex.: Icon) |
-| `right` | `React.ReactNode`               | `null`     | Component on the right side of the text                    |
-| `type`  | `'button' | 'submit' | 'reset'` | `'button'` | HTML type of the button                                    |
-| `...`   | `HTMLButtonElementProps`        | `{}`       | Other props is inherited from `HTMLButtonElement`          |
+| Name    | Type                     | Default  | Description                                                |
+| ------- | ------------------------ | -------- | ---------------------------------------------------------- | ---------- | ----------------------- |
+| `text`  | `React.ReactNode`        |          | Text appeared on the button                                |
+| `left`  | `React.ReactNode`        | `null`   | Component to show on the left side of the text (ex.: Icon) |
+| `right` | `React.ReactNode`        | `null`   | Component on the right side of the text                    |
+| `type`  | `'button'                | 'submit' | 'reset'`                                                   | `'button'` | HTML type of the button |
+| `...`   | `HTMLButtonElementProps` | `{}`     | Other props is inherited from `HTMLButtonElement`          |

gatsby-theme-woly/plugins/remark-plugin.js

@@ -19,8 +19,12 @@ module.exports = (options) => {
       });
     });
 
+    // When new element added to AST list, other elements is moved down
+    // Absolute index of each element in `codes` has incorrect `at` position
+    let shift = 0;
     codes.forEach(({ at, node, parent }) => {
-      parent.children.splice(at + 1, 0, node);
+      parent.children.splice(at + 1 + shift, 0, node);
+      shift++;
     });
 
     delete codes;