docs: apply standard design to annotation storybook (#1061)

The story for annotation missed the standard design. Applying it makes it more beautiful.
remirror · Aug 16, 2021 · 2099532 · 2099532 · github-actions · Aug 16, 2021
1 parent 163533d
commit 2099532
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/packages/remirror__extension-annotation/__stories__/annotation-extension.stories.tsx b/packages/remirror__extension-annotation/__stories__/annotation-extension.stories.tsx
@@ -1,3 +1,5 @@
+import 'remirror/styles/all.css';
+
 import { FC, useEffect, useMemo, useState } from 'react';
 import { uniqueId } from 'remirror';
 import {
@@ -66,7 +68,7 @@ const Popup: FC = () => {
 };
 
 const SmallEditor: FC = () => {
-  const { getRootProps, setContent, commands, helpers } = useRemirrorContext({
+  const { setContent, commands, helpers } = useRemirrorContext({
     autoUpdate: true,
   });
 
@@ -106,7 +108,7 @@ const SmallEditor: FC = () => {
 
   return (
     <div>
-      <div {...getRootProps()} />
+      <EditorComponent />
       <Popup />
       <div>Annotations:</div>
       <pre>{JSON.stringify(helpers.getAnnotations(), null, '  ')}</pre>
@@ -118,9 +120,11 @@ export const Basic = () => {
   const { manager } = useRemirror({ extensions: () => [new AnnotationExtension()] });
 
   return (
-    <Remirror manager={manager}>
-      <SmallEditor />
-    </Remirror>
+    <ThemeProvider>
+      <Remirror manager={manager}>
+        <SmallEditor />
+      </Remirror>
+    </ThemeProvider>
   );
 };