Created a storybook with EditorContent to try out the EditorContent o…

…utput.

stories/Walkthroughs/Output/EditorContentDemo.jsx

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+
+import { Editor, EditorContent } from "src";
+
+import { INITIAL_CONTENT, ADDONS, MENTIONS } from "./constants";
+
+const EditorContentDemo = () => {
+  const [content, setContent] = useState(INITIAL_CONTENT);
+
+  return (
+    <div className="neeto-ui-flex neeto-ui-flex-col neeto-ui-gap-4">
+      <div
+        className="neeto-ui-border-gray-400 neeto-ui-rounded neeto-ui-border"
+        style={{ border: "1px solid rgb(var(--neeto-ui-gray-400))" }}
+      >
+        <EditorContent {...{ content }} className="neeto-ui-p-4" />
+      </div>
+      <div>
+        <h3>Editor</h3>
+        <Editor
+          addons={ADDONS}
+          initialValue={content}
+          mentions={MENTIONS}
+          onChange={setContent}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default EditorContentDemo;

stories/Walkthroughs/Output/EditorContentDemo.stories.mdx

@@ -0,0 +1,27 @@
+import { Meta } from "@storybook/addon-docs";
+import {
+  EDITOR_PROP_TABLE_COLUMNS,
+  EDITOR_CONTENT_PROP_TABLE_ROWS,
+} from "../../constants";
+import Table from "../../components/Table";
+
+import EditorContentDemo from "./EditorContentDemo";
+
+<Meta
+  title="Walkthroughs/Output/EditorContent demo"
+  parameters={{
+    layout: "padded",
+    viewMode: "docs",
+    previewTabs: {
+      canvas: {
+        hidden: true,
+      },
+    },
+  }}
+/>
+
+# EditorContent demo
+
+To update the preview content, make use of the editor below. The changes will be instantly updated in the preview.
+
+<EditorContentDemo />