feat: improved styling of editor

- removed the paragraph plugin as it was causing problems

src/components/Editor.module.css

@@ -0,0 +1,29 @@
+.editor {
+  :global .bangle-editor {
+    @apply outline-none;
+  }
+
+  :global pre {
+    @apply bg-secondary rounded-md px-6;
+  }
+
+  :global blockquote {
+    @apply flex flex-col justify-center border-l-8 bg-secondary/50 text-secondary-foreground px-3 py-3 gap-2;
+
+    > * {
+      @apply leading-none;
+    }
+  }
+
+  :global li[data-bangle-is-todo] {
+    @apply flex gap-2;
+
+    > span:first-child > input {
+      @apply m-0;
+    }
+  }
+
+  :global img {
+    @apply rounded-md border-none;
+  }
+}

src/components/Editor.tsx

@@ -1,3 +1,4 @@
+import { cn } from '@/lib/utils';
 import {
   blockquote,
   bold,
@@ -12,7 +13,6 @@ import {
   link,
   listItem,
   orderedList,
-  paragraph,
   strike,
   underline,
 } from '@bangle.dev/base-components';
@@ -21,6 +21,7 @@ import '@bangle.dev/core/style.css';
 import { markdownParser, markdownSerializer } from '@bangle.dev/markdown';
 import { BangleEditor, useEditorState } from '@bangle.dev/react';
 import { ComponentProps, useMemo } from 'react';
+import styles from './Editor.module.css';
 
 // TODO: Remove this when https://github.com/bangle-io/bangle-editor/pull/272 is merged
 ((has) => {
@@ -45,7 +46,6 @@ const specRegistry = new SpecRegistry([
   link.spec(),
   listItem.spec(),
   orderedList.spec(),
-  paragraph.spec(),
   strike.spec(),
   underline.spec(),
 ]);
@@ -93,20 +93,15 @@ export function DevkitEditor({ initialValue: externalInitialValue, onChange, ...
         link.plugins(),
         listItem.plugins(),
         orderedList.plugins(),
-        paragraph.plugins(),
         strike.plugins(),
         underline.plugins(),
       ] as any,
     initialValue: initialValue,
   });
 
   return (
-    <div {...props} className="flex flex-1" id="bangle-editor">
-      <BangleEditor
-        className="flex-1 grid grid-cols-1"
-        state={editorState}
-        onReady={(editor) => editor.view.state.doc}
-      />
+    <div {...props} className={cn('flex flex-1', styles.editor)} id="bangle-editor">
+      <BangleEditor className="flex-1 grid grid-cols-1" state={editorState} />
     </div>
   );
 }

src/global.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const content: Record<string, string>;
+  export default content;
+}