feat: editor component

package.json

@@ -6,7 +6,8 @@
     "dev:spotlight": "spotlight-sidecar",
     "dev:next": "next dev",
     "dev": "run-p dev:*",
-    "build": "npm run db:migrate && next build",
+    "build": "next build",
+    "build-with-migrate": "npm run db:migrate && next build",
     "start": "next start",
     "build-stats": "cross-env ANALYZE=true npm run build",
     "clean": "rimraf .next .swc out coverage",
@@ -42,6 +43,7 @@
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/mdx": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
+    "@mdxeditor/editor": "^3.0.7",
     "@mui/icons-material": "^5.15.15",
     "@mui/material": "^5.15.15",
     "@mui/material-nextjs": "^5.15.11",
@@ -93,7 +95,7 @@
     "@storybook/nextjs": "^8.0.6",
     "@storybook/preview-api": "^8.0.6",
     "@storybook/react": "^8.0.6",
-    "@storybook/test": "^8.0.6",
+    "@storybook/test": "^8.1.1",
     "@storybook/test-runner": "^0.17.0",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.2",

public/test/full-mdx.mdx

@@ -0,0 +1,94 @@
+
+---
+type: knowledge
+product: products/airview_l6za3rlx
+title: MDX Test Page
+---
+
+# H1
+
+Normal text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat.
+
+Normal text with *italics*, **bold** and ***bold italics*** in the middle.. Lorem ipsum dolor sit amet, *consectetur* adipisicing elit, sed do eiusmod
+tempor incididunt ut ***labore et dolore magna aliqua***. Ut enim ad minim veniam,
+
+> quote quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+
+Text with `code` in the middle. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. `Excepteur sint occaecat` cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+> Multi-line quote. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+> quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+> consequat.
+
+>
+
+```bash
+mulitple lines of code in bash format
+var=some_code
+# comments
+```
+
+## H2
+
+Lorem ipsum dolor sit amet, *consectetur* adipisicing elit, sed do eiusmod
+tempor incididunt ut **labore et dolore magna aliqua**. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat.
+
+### H3
+
+#### H4
+
+##### H5
+
+unordered list:
+
+* item-1
+  * sub-item-1
+  * sub-item-2
+* item-2
+  * sub-item-3
+  * sub-item-4
+* item-3
+  * sub-item-5
+  * sub-item-6
+
+ordered list:
+
+1. item-1
+   1. sub-item-1
+   2. sub-item-2
+2. item-2
+   1. sub-item-3
+   2. sub-item-4
+3. item-3
+
+## Tables
+
+### With alignment
+
+| Table Header-1            |     Table Header-2    |             Table Header-3 |
+| :------------------------ | :-------------------: | -------------------------: |
+| Table Data-1 Left-aligned | Table Data-2 centered | Table Data-3 right-aligned |
+| TD-4                      |          Td-5         |                       TD-6 |
+| Table Data-7              |      Table Data-8     |               Table Data-9 |
+
+### Without alignment
+
+| Table Header-1 | Table Header-2 | Table Header-3 |
+| -------------- | -------------- | -------------- |
+| Table Data-1   | Table Data-2   | Table Data-3   |
+| TD-4           | Td-5           | TD-6           |
+| Table Data-7   | Table Data-8   | Table Data-9   |
+
+##### Header5
+
+You may also want some images right in here like ![GitHub Logo](https://cloud.githubusercontent.com/assets/5456665/13322882/e74f6626-dc00-11e5-921d-f6d024a01eaa.png "GitHub") - you can do that but I would recommend you to use the component "image" and simply split your text.
+
+###### Header6
+
+Let us do some links - this for example: [https://github.com/MinhasKamal/github-markdown-syntax](https://github.com/MinhasKamal/github-markdown-syntax) is **NOT** a link but this: is [GitHub](https://github.com/MinhasKamal/github-markdown-syntax)

public/test/short-mdx.mdx

@@ -0,0 +1,13 @@
+
+---
+type: knowledge
+product: products/airview_l6za3rlx
+title: MDX Test Page
+---
+
+# H1
+
+Normal text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+consequat.