feat: add side editor link

app/components/Mdx/Mdx.tsx

@@ -14,6 +14,7 @@ import InfoBox from "../InfoBox";
 import GoodToKnowBox from "../GoodToKnowBox/GoodToKnowBox";
 import rehypeExternalLinks from "rehype-external-links";
 import styles from "./Mdx.module.css";
+import SideEditorLink from "../SideEditorLink";
 
 function createHeading(level: number): any {
   const headingSizes: {
@@ -86,6 +87,7 @@ const customComponents = {
   InfoBox,
   GoodToKnowBox,
   CodeSnippet,
+  SideEditorLink,
 };
 export function CustomMDX(props: MDXRemoteProps) {
   return (

app/components/SideEditorLink/SideEditorLink.module.css

@@ -0,0 +1,7 @@
+.main {
+  cursor: pointer;
+  color: hsl(var(--link-color));
+}
+.main:hover {
+  text-decoration: underline;
+}

app/components/SideEditorLink/SideEditorLink.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { useEditorStore } from "@/lib/stores";
+import React from "react";
+import styles from "./SideEditorLink.module.css";
+
+export default function SideEditorLink() {
+  const editorStore = useEditorStore();
+  return (
+    <span
+      className={styles.main}
+      onClick={() => {
+        const range = editorStore.editor.getModel().getFullModelRange();
+        console.log(range);
+        editorStore.editor.setSelection(range);
+        editorStore.editor.focus();
+      }}
+    >
+      side editor
+    </span>
+  );
+}

app/components/SideEditorLink/index.tsx

@@ -0,0 +1 @@
+export { default as default } from "./SideEditorLink";

content/01-Getting-Started/01-Your-First-Schema/instructions.mdx

@@ -30,7 +30,7 @@ Consider you have a JSON document of an employee:
  - `age` with value `25` (integer)
 
 
-You are given an incomplete *schema* for this data on side editor. 
+You are given an incomplete *schema* for this data on the <SideEditorLink/>
 
 Now, try to Add an `age` property to the *schema* and, using the type [keyword](https://json-schema.org/learn/glossary#keyword) and set it `type` to `integer`.