Repository navigation
feat(markdown): colar imagem no editor de markdown - #56
Merged
Merged
Conversation
O campo de markdown (usado no corpo de marcos de trilha, entre outros) era um textarea puro sem handler de colar imagem — colar uma imagem copiada simplesmente nao fazia nada, porque textarea so aceita texto. - onPaste intercepta imagem do clipboard, converte pra data URL (base64) via FileReader e insere  na posicao do cursor. Guarda de 2MB no arquivo original pra nao inflar o campo de texto demais. - preview ja renderizava <img> nativamente via ReactMarkdown, so faltava a regra CSS pra nao estourar o layout (max-width: 100%) Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
2 tasks done
leo-nardo
added a commit
that referenced
this pull request
Jul 31, 2026
- scrollbar padrao do navegador (grosso, cinza, quadrado) trocado por um fino e discreto em toda a aplicacao (Firefox + Chrome/Edge/Safari), sem precisar caçar cada modal/textarea com scroll individualmente - editor de markdown ganha botao visivel "Inserir imagem" (input de arquivo) alem do paste — mais descobrivel que so colar via Ctrl+V Nota: o PR anterior que adicionava o paste de imagem (#56) foi mesclado mas a Vercel nunca disparou o deploy de producao pra esse commit (confirmado via GitHub Deployments API — nao existe deployment registrado). Nao e' bug de codigo, e' falha do lado da integracao Vercel/GitHub. Esse commit deve reacionar o webhook. Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
3 of 4 tasks
leo-nardo
added a commit
that referenced
this pull request
Jul 31, 2026
…#58) Dois problemas na abordagem anterior (PR #56): 1. react-markdown bloqueia data: URI por padrao (defaultUrlTransform sanitiza e zera a URL) — por isso a imagem aparecia quebrada no preview. 2. Base64 embutido no texto nao e' o padrao certo pra isso (infla o campo, duplica em todo fetch do conteudo). O jeito certo, como em qualquer editor decente (TinyMCE etc.), e' fazer upload de verdade e guardar so a URL — que e' exatamente o que ja fazemos no comprovante de prova (ProofSubmissionForm / useFileUploadService). Reaproveita esse mesmo pipeline: paste ou clique em "Inserir imagem" sobem o arquivo pro storage (R2/S3, mesmo endpoint /files/upload) e o markdown so guarda , que passa normal pelo sanitizador do react-markdown. Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Resumo
Resposta a pergunta: o editor de markdown ja renderizava
no preview (react-markdown padrao), mas o textarea nao tinha handler de colar imagem — por isso colar uma imagem copiada nao fazia nada.onPasteno textarea intercepta imagem do clipboard, converte pra data URL base64 viaFileReader, inserena posicao do cursor.textsem limite no banco mas ainda assim vale ter um guarda)..markdown-body img { max-width: 100% }pra imagem nao estourar o layout no preview/exibicao publica.Uso pretendido: campo de corpo de marco de trilha, pra admin colar exemplo visual (print) de como cumprir a prova.
Test plan
npx tsc --noEmitnpx eslint src/components/markdown-editor.tsx— limpoCo-Authored-By: Claude Sonnet 5 noreply@anthropic.com