Revert "[TEMP] Update OverlayManager story for demo purposes"

This reverts commit 9e3b964.

Author: AbhayVAshokan

Diff for: stories/Examples/Editor-with-overlay-manager.stories.mdx

@@ -15,6 +15,47 @@ import EditorWithOverlayManagerDemo from "./EditorWithOverlayManagerDemo";
   component={Editor}
 />
 
+# With overlay manager
+
+An overlay manager was introduced in neetoUI to handle faulty Webkit animations
+on focussed inputs. If neetoEditor is auto focussed within a neetoUI Pane or
+neetoUI Modal component, it is likely that you would face similar issues.
+Similar to neetoUI you need to use an initialFocusRef to make sure that the
+editor is properly focussed.
+
+```jsx
+import React, { useRef, useState } from "react";
+
+import { Button, Pane, Typography } from "@bigbinary/neetoui";
+
+import Editor from "@bigbinary/neeto-editor/Editor";
+
+const EditorWithOverlayManager = () => {
+  const [showPane, setShowPane] = useState(false);
+  const initialFocusRef = useRef(null);
+
+  return (
+    <>
+      <Button label="Show Pane" onClick={() => setShowPane(true)} />
+      <Pane
+        initialFocusRef={initialFocusRef}
+        isOpen={showPane}
+        onClose={() => setShowPane(false)}
+      >
+        <Pane.Header>
+          <Typography style="h2" weight="semibold">
+            Typography
+          </Typography>
+        </Pane.Header>
+        <Editor ref={initialFocusRef} />
+      </Pane>
+    </>
+  );
+};
+
+export default EditorWithOverlayManager;
+```
+
 <Canvas>
   <EditorWithOverlayManagerDemo />
 </Canvas>

Diff for: stories/Examples/EditorWithOverlayManagerDemo.jsx

@@ -2,43 +2,27 @@ import React, { useRef, useState } from "react";
 
 import { Button, Pane, Typography } from "@bigbinary/neetoui";
 
-import { Editor, EditorContent } from "../../src";
+import { Editor } from "../../src";
 
 const EditorWithOverlayManager = () => {
-  const [content, setContent] = useState(
-    `<pre data-highlighted-lines=""><code class="language-css">mark {
-  border-radius: var(--neeto-editor-rounded-sm);
-  padding: 0px;
-}
-
-[data-type="mention"] {
-  color: rgb(var(--neeto-editor-accent-800));
-}</code></pre>`
-  );
+  const [showPane, setShowPane] = useState(false);
+  const initialFocusRef = useRef(null);
 
   return (
     <>
-      <Editor
-        initialValue={content}
-        onChange={setContent}
-        addons={[
-          "highlight",
-          "emoji",
-          "code-block",
-          "block-quote",
-          "image-upload",
-          "image-upload-unsplash",
-          "video-upload",
-          "video-embed",
-          "paste-unformatted",
-          "undo",
-          "redo",
-          "attachments",
-          "table",
-          "text-color",
-        ]}
-      />
-      <EditorContent content={content} />
+      <Button label="Show Pane" onClick={() => setShowPane(true)} />
+      <Pane
+        initialFocusRef={initialFocusRef}
+        isOpen={showPane}
+        onClose={() => setShowPane(false)}
+      >
+        <Pane.Header>
+          <Typography style="h2" weight="semibold">
+            Typography
+          </Typography>
+        </Pane.Header>
+        <Editor ref={initialFocusRef} />
+      </Pane>
     </>
   );
 };