usar Tailwind Typography

This commit is contained in:
Cat /dev/Nulo 2023-08-29 10:00:53 -03:00
parent b86139622c
commit 5dc140a456
5 changed files with 39 additions and 15 deletions

View file

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

View file

@ -46,6 +46,9 @@ devDependencies:
'@sveltejs/vite-plugin-svelte': '@sveltejs/vite-plugin-svelte':
specifier: ^2.0.4 specifier: ^2.0.4
version: 2.0.4(svelte@3.58.0)(vite@4.2.2) 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': '@tsconfig/svelte':
specifier: ^3.0.0 specifier: ^3.0.0
version: 3.0.0 version: 3.0.0
@ -412,6 +415,18 @@ packages:
- supports-color - supports-color
dev: true 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: /@trysound/sax@0.2.0:
resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
engines: {node: '>=10.13.0'} engines: {node: '>=10.13.0'}
@ -921,6 +936,18 @@ packages:
uc.micro: 1.0.6 uc.micro: 1.0.6
dev: true 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: /magic-string@0.25.9:
resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==} resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
dependencies: dependencies:
@ -1146,6 +1173,14 @@ packages:
postcss-selector-parser: 6.0.13 postcss-selector-parser: 6.0.13
dev: true 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: /postcss-selector-parser@6.0.13:
resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==} resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
engines: {node: '>=4'} engines: {node: '>=4'}

View file

@ -66,20 +66,18 @@
} }
</script> </script>
<div class="editor"> <div class="editor min-h-screen">
{#if view} {#if view}
<MenuBar {view} state={updatedState} /> <MenuBar {view} state={updatedState} />
{/if} {/if}
<!-- this element gets replaced with the editor itself when mounted --> <!-- 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} {#if view}
<BubbleMenu {view} {worldY} state={updatedState} /> <BubbleMenu {view} {worldY} state={updatedState} />
{/if} {/if}
</div> </div>
<style> <style>
.editor,
div,
:global(.ProseMirror) { :global(.ProseMirror) {
min-height: 100vh; min-height: 100vh;
} }

View file

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

View file

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