feat: add copy to clipboard feature for code blocks in md viewer #1433

vilarjp · 2023-06-02T18:30:02Z

Boa tarde a todos!

Esse PR segue como uma sugestão de implementação de código para a [Sugestão] Implementar botão para copiar snippets de código #1422

Screen.Recording.2023-06-02.at.15.37.03.mov

vercel · 2023-06-02T18:30:05Z

Someone is attempting to deploy a commit to the TabNews Team on Vercel.

A member of the Team first needs to authorize it.

vercel · 2023-06-02T23:10:03Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tabnews	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 6, 2023 0:08am

aprendendofelipe · 2023-06-02T23:20:16Z

Fala @vilarjp, obrigado pelo PR! 💪

Muito legal a implementação 👍

Chegou a ver se não era simples fazer como plugin para o ByteMD?

E o que acha de usar os ícones do Primer para ficar igual ao GitHub?

https://primer.style/design/foundations/icons/copy-24
https://primer.style/design/foundations/icons/check-24

Tem algum bug duplicando o ícone. Veja na imagem ou no link abaixo:

https://tabnews-git-fork-vilarjp-feat-add-copy-to-clipbo-80579c-tabnews.vercel.app/FelipeBarso/bb78aaa5-fe66-4e6f-97a0-f64b92f833e5

vilarjp · 2023-06-03T03:43:29Z

Fala @vilarjp, obrigado pelo PR! 💪

Muito legal a implementação 👍

Chegou a ver se não era simples fazer como plugin para o ByteMD?

E o que acha de usar os ícones do Primer para ficar igual ao GitHub?

https://primer.style/design/foundations/icons/copy-24 https://primer.style/design/foundations/icons/check-24

Tem algum bug duplicando o ícone. Veja na imagem ou no link abaixo:

https://tabnews-git-fork-vilarjp-feat-add-copy-to-clipbo-80579c-tabnews.vercel.app/FelipeBarso/bb78aaa5-fe66-4e6f-97a0-f64b92f833e5

boa, @aprendendofelipe, realmente usar os ícones do Primer faz mais sentido, fica com uma aparência mais familiar ao que já estamos acostumados a ver.

Também dei uma atualizada no código, movi para um arquivo separado no formato de um plugin do bytemd.

Fico no aguardo de saber o que você achou 😄

Screen.Recording.2023-06-03.at.00.36.56.mov

aprendendofelipe · 2023-06-05T02:27:38Z

@vilarjp, pensando em manter o site mais clean, além de seguir uma UX que deve ter sido muito bem testada, que tal mostrar o ícone apenas nas mesmas situações em que ele é mostrado no GitHub? Por exemplo ao passar o mouse ou, no celular, ao tocar no trecho de código.

vilarjp · 2023-06-06T01:24:09Z

@vilarjp, pensando em manter o site mais clean, além de seguir uma UX que deve ter sido muito bem testada, que tal mostrar o ícone apenas nas mesmas situações em que ele é mostrado no GitHub? Por exemplo ao passar o mouse ou, no celular, ao tocar no trecho de código.

Screen.Recording.2023-06-05.at.22.18.01.mov

@aprendendofelipe feito 👨🏻‍💻

…plugin

aprendendofelipe

Massa @vilarjp!

Eu só vi um comportamento que imagino que não seja o que você queria, que é no celular o ícone sumir muito rápido após copiar o código.

Acho que só está levando o tempo da transição, e não aguardando o setTimeout. Talvez seja porque o foco que faz o botão aparecer é perdido ao clicar, mas não sei se é isso.

Fora esse probleminha, fiz alguns questionamentos no código, apenas para você pensar se vale a pena mudar 👍

aprendendofelipe · 2023-06-06T16:37:47Z

pages/interface/components/Markdown/copyToClipboardPlugin.js

+const copyIconSvg =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path d="M7.024 3.75c0-.966.784-1.75 1.75-1.75H20.25c.966 0 1.75.784 1.75 1.75v11.498a1.75 1.75 0 0 1-1.75 1.75H8.774a1.75 1.75 0 0 1-1.75-1.75Zm1.75-.25a.25.25 0 0 0-.25.25v11.498c0 .139.112.25.25.25H20.25a.25.25 0 0 0 .25-.25V3.75a.25.25 0 0 0-.25-.25Z"></path><path d="M1.995 10.749a1.75 1.75 0 0 1 1.75-1.751H5.25a.75.75 0 1 1 0 1.5H3.745a.25.25 0 0 0-.25.25L3.5 20.25c0 .138.111.25.25.25h9.5a.25.25 0 0 0 .25-.25v-1.51a.75.75 0 1 1 1.5 0v1.51A1.75 1.75 0 0 1 13.25 22h-9.5A1.75 1.75 0 0 1 2 20.25l-.005-9.501Z"></path></svg>';
+
+const checkIconSvg =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path d="M21.03 5.72a.75.75 0 0 1 0 1.06l-11.5 11.5a.747.747 0 0 1-1.072-.012l-5.5-5.75a.75.75 0 1 1 1.084-1.036l4.97 5.195L19.97 5.72a.75.75 0 0 1 1.06 0Z"></path></svg>';
+
+function copyToClipboard(text, buttonElement) {
+  navigator.clipboard.writeText(text).then(() => {
+    buttonElement.innerHTML = checkIconSvg;
+    buttonElement.title = 'Copiado!';
+    buttonElement.classList.add('copied');
+
+    setTimeout(() => {
+      buttonElement.innerHTML = copyIconSvg;
+      buttonElement.title = 'Copiar';
+      buttonElement.classList.remove('copied');
+    }, 2500);
+  });
+}


Suggested change

const copyIconSvg =

'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path d="M7.024 3.75c0-.966.784-1.75 1.75-1.75H20.25c.966 0 1.75.784 1.75 1.75v11.498a1.75 1.75 0 0 1-1.75 1.75H8.774a1.75 1.75 0 0 1-1.75-1.75Zm1.75-.25a.25.25 0 0 0-.25.25v11.498c0 .139.112.25.25.25H20.25a.25.25 0 0 0 .25-.25V3.75a.25.25 0 0 0-.25-.25Z"></path><path d="M1.995 10.749a1.75 1.75 0 0 1 1.75-1.751H5.25a.75.75 0 1 1 0 1.5H3.745a.25.25 0 0 0-.25.25L3.5 20.25c0 .138.111.25.25.25h9.5a.25.25 0 0 0 .25-.25v-1.51a.75.75 0 1 1 1.5 0v1.51A1.75 1.75 0 0 1 13.25 22h-9.5A1.75 1.75 0 0 1 2 20.25l-.005-9.501Z"></path></svg>';

const checkIconSvg =

'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path d="M21.03 5.72a.75.75 0 0 1 0 1.06l-11.5 11.5a.747.747 0 0 1-1.072-.012l-5.5-5.75a.75.75 0 1 1 1.084-1.036l4.97 5.195L19.97 5.72a.75.75 0 0 1 1.06 0Z"></path></svg>';

function copyToClipboard(text, buttonElement) {

navigator.clipboard.writeText(text).then(() => {

buttonElement.innerHTML = checkIconSvg;

buttonElement.title = 'Copiado!';

buttonElement.classList.add('copied');

setTimeout(() => {

buttonElement.innerHTML = copyIconSvg;

buttonElement.title = 'Copiar';

buttonElement.classList.remove('copied');

}, 2500);

});

}

import octicons from '@primer/octicons';

function copyToClipboard(text, buttonElement) {

navigator.clipboard.writeText(text).then(() => {

buttonElement.innerHTML = octicons.check.toSVG();

buttonElement.title = 'Copiado!';

buttonElement.classList.add('copied');

setTimeout(() => {

buttonElement.innerHTML = octicons.copy.toSVG();

buttonElement.title = 'Copiar';

buttonElement.classList.remove('copied');

}, 2500);

});

}

Não são sugestões, mas sim questionamentos mesmo...

Será que não deveríamos utilizar a biblioteca ao invés de apenas copiar os ícones e deixar fixos no código? Obs. Eu não testei se o código está correto, apenas me baseei na documentação.

Caso seja melhor deixar fixo no código, não seria interessante informar de onde vieram?

Será que ficaria melhor deixar esse arquivo dentro de uma pasta como markdown>plugins?

vilarjp · 2023-06-06T20:57:08Z

Massa @vilarjp!

Eu só vi um comportamento que imagino que não seja o que você queria, que é no celular o ícone sumir muito rápido após copiar o código.

Acho que só está levando o tempo da transição, e não aguardando o setTimeout. Talvez seja porque o foco que faz o botão aparecer é perdido ao clicar, mas não sei se é isso.

Fora esse probleminha, fiz alguns questionamentos no código, apenas para você pensar se vale a pena mudar 👍

fala, @aprendendofelipe, eu não consegui simular esse comportamento aqui, no meu celular achei que ficou tudo ok (é um iphone e testei no chrome e no safari), você consegue fazer uma gravação da sua tela mostrando o que tá rolando?

em relação a parte do SVG, eu copiei o valor deles e deixei como string em uma variável por que a lib que já temos no projeto @primer/octicons-react só funciona em componentes react, que não é o caso desse plugin que criamos, então teríamos que instalar uma lib nova só para isso, no caso a @primer/octicons. Eu prefiro deixar fixo no código e colocarmos essa informação lá.

ficaria algo assim então?

markdown>plugins>icons.js

// font: https://primer.style/design/foundations/icons/copy-16
const COPY_ICON_SVG = "..."
const CHECK_ICON_SVG = "..."

aprendendofelipe · 2023-06-06T21:19:04Z

no caso a @primer/octicons

Isso mesmo, veja que a alteração que fiz no código importa essa biblioteca. A outra opção é deixar comentado de onde copiou 👍

ficaria algo assim então?

markdown>plugins>icons.js

Não não 😅... Sobre a pasta eu não falava dos ícones, mas sim do plugin que você criou. Talvez colocar ele dentro da pasta plugins ao invés de deixar o arquivo solto na pasta markdown.

eu não consegui simular esse comportamento aqui, no meu celular achei que ficou tudo ok (é um iphone e testei no chrome e no safari), você consegue fazer uma gravação da sua tela mostrando o que tá rolando?

Testado no Chrome em Samsung Galaxy, está assim:

Bug.botao.de.copiar.o.codigo.mp4

aprendendofelipe · 2023-06-14T00:12:10Z

@vilarjp, conseguiu reproduzir o comportamento do Android?

Imagino que seja algo simples de resolver na estilização do botão.

Se precisar de algo, manda aqui pra Turma ajudar 🤝

RobertDS07 · 2023-06-22T20:42:43Z

Passando aqui só pois lembrei que já tive muito problema com copiar e colar no navegador, lembro que tinham algumas especificações para isto ocorrer, lembro que haviam alguns navegadores que não aceitavam tal ação... Talvez eu esteja chovendo no molhado, mas bom avisar né 🤣

Achei um link aqui, talvez ajude

aprendendofelipe · 2023-10-06T20:35:43Z

Fechando o PR por inatividade, mas mantendo a issue #1422 aberta para que a solução seja implementada com a correção do bug existente. 🤝

vercel bot deployed to Preview June 2, 2023 23:12 View deployment

vercel bot deployed to Preview June 3, 2023 12:04 View deployment

João Paulo Vilar added 3 commits June 5, 2023 22:49

feat: add copy to clipboard feature for code blocks in md viewer

5f809b4

feat: change icons and transform copy to clipboard logic into bytemd …

206139c

…plugin

feat: make copy icon visible only when user hover/focus the code

03204b8

vilarjp force-pushed the feat/add-copy-to-clipboard-md-codeblock branch from 91bcc41 to 03204b8 Compare June 6, 2023 01:51

vercel bot deployed to Preview June 6, 2023 12:08 View deployment

aprendendofelipe reviewed Jun 6, 2023

View reviewed changes

aprendendofelipe marked this pull request as draft June 22, 2023 14:40

aprendendofelipe added the pendente Aguardando ação do autor do Pull Request label Jun 28, 2023

aprendendofelipe closed this Oct 6, 2023

Rafatcb mentioned this pull request Dec 15, 2023

Vamos preparar o repositório para abertura da Milestone de Revenue Share? #1526

Closed

Rafatcb removed the pendente Aguardando ação do autor do Pull Request label Dec 16, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add copy to clipboard feature for code blocks in md viewer #1433

feat: add copy to clipboard feature for code blocks in md viewer #1433

vilarjp commented Jun 2, 2023 •

edited

Loading

vercel bot commented Jun 2, 2023

vercel bot commented Jun 2, 2023 •

edited

Loading

aprendendofelipe commented Jun 2, 2023 •

edited

Loading

vilarjp commented Jun 3, 2023 •

edited

Loading

aprendendofelipe commented Jun 5, 2023

vilarjp commented Jun 6, 2023

aprendendofelipe left a comment

aprendendofelipe Jun 6, 2023

vilarjp commented Jun 6, 2023

aprendendofelipe commented Jun 6, 2023

aprendendofelipe commented Jun 14, 2023

RobertDS07 commented Jun 22, 2023 •

edited

Loading

aprendendofelipe commented Oct 6, 2023

feat: add copy to clipboard feature for code blocks in md viewer #1433

feat: add copy to clipboard feature for code blocks in md viewer #1433

Conversation

vilarjp commented Jun 2, 2023 • edited Loading

vercel bot commented Jun 2, 2023

vercel bot commented Jun 2, 2023 • edited Loading

aprendendofelipe commented Jun 2, 2023 • edited Loading

vilarjp commented Jun 3, 2023 • edited Loading

aprendendofelipe commented Jun 5, 2023

vilarjp commented Jun 6, 2023

aprendendofelipe left a comment

Choose a reason for hiding this comment

aprendendofelipe Jun 6, 2023

Choose a reason for hiding this comment

vilarjp commented Jun 6, 2023

aprendendofelipe commented Jun 6, 2023

aprendendofelipe commented Jun 14, 2023

RobertDS07 commented Jun 22, 2023 • edited Loading

aprendendofelipe commented Oct 6, 2023

vilarjp commented Jun 2, 2023 •

edited

Loading

vercel bot commented Jun 2, 2023 •

edited

Loading

aprendendofelipe commented Jun 2, 2023 •

edited

Loading

vilarjp commented Jun 3, 2023 •

edited

Loading

RobertDS07 commented Jun 22, 2023 •

edited

Loading