usar Tailwind Typography

package.json

@@ -13,6 +13,7 @@
   "devDependencies": {
     "@poppanator/sveltekit-svg": "^2.1.2",
     "@sveltejs/vite-plugin-svelte": "^2.0.4",
+    "@tailwindcss/typography": "^0.5.9",
     "@tsconfig/svelte": "^3.0.0",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "autoprefixer": "^10.4.15",

pnpm-lock.yaml

@@ -46,6 +46,9 @@ devDependencies:
   '@sveltejs/vite-plugin-svelte':
     specifier: ^2.0.4
     version: 2.0.4(svelte@3.58.0)(vite@4.2.2)
+  '@tailwindcss/typography':
+    specifier: ^0.5.9
+    version: 0.5.9(tailwindcss@3.3.3)
   '@tsconfig/svelte':
     specifier: ^3.0.0
     version: 3.0.0
@@ -412,6 +415,18 @@ packages:
       - supports-color
     dev: true
 
+  /@tailwindcss/typography@0.5.9(tailwindcss@3.3.3):
+    resolution: {integrity: sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 3.3.3
+    dev: true
+
   /@trysound/sax@0.2.0:
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
@@ -921,6 +936,18 @@ packages:
       uc.micro: 1.0.6
     dev: true
 
+  /lodash.castarray@4.4.0:
+    resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
+    dev: true
+
+  /lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+    dev: true
+
+  /lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+    dev: true
+
   /magic-string@0.25.9:
     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
     dependencies:
@@ -1146,6 +1173,14 @@ packages:
       postcss-selector-parser: 6.0.13
     dev: true
 
+  /postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+    dev: true
+
   /postcss-selector-parser@6.0.13:
     resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
     engines: {node: '>=4'}

src/editor/Editor.svelte

@@ -66,20 +66,18 @@
   }
 </script>
 
-<div class="editor">
+<div class="editor min-h-screen">
   {#if view}
     <MenuBar {view} state={updatedState} />
   {/if}
   <!-- this element gets replaced with the editor itself when mounted -->
-  <div bind:this={wrapperEl} />
+  <div class="prose before:prose-p:content-none after:prose-p:content-none prose-blockquote:font-normal prose-blockquote:not-italic max-w-none min-h-screen" bind:this={wrapperEl} />
   {#if view}
     <BubbleMenu {view} {worldY} state={updatedState} />
   {/if}
 </div>
 
 <style>
-  .editor,
-  div,
   :global(.ProseMirror) {
     min-height: 100vh;
   }

src/editor/editor.css

@@ -47,10 +47,6 @@
   outline: lightskyblue solid;
 }
 
-.ProseMirror img {
-  max-width: 100%;
-}
-
 .ProseMirror figure {
   margin: 0;
   padding: 0.5em 2em;
@@ -60,9 +56,3 @@
   color: #666;
 }
 
-.ProseMirror blockquote {
-  background-color: var(--transparentish);
-  border-left: 5px solid var(--foreground);
-  padding: 1.25em 1.5em;
-  margin: 0.5em;
-}

tailwind.config.js

@@ -4,5 +4,5 @@ export default {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [require("@tailwindcss/typography")],
 };