Executando verificação de segurança...
5

[Ideia] Um Editor Markdown sem ter que escrever em Markdown

Opa, olá Comunidade! Aqui é o Poveii! (se lê Pô véi mesmo)
A ideia desse tópico é eu apresentar a vocês uma ideia que eu tive a algumas semanas que pode ser muito útil para todo mundo que escreve em geral (tipo a gente aqui haha).

Primeiro, preciso contar uma pequena história, então lá vai!

Pouca Produtividade, Quebra de Experiência

Quando eu descobri que tinha uma tecnologia que fazia os meus textos ficarem mais bonitos e gostosos de ler, eu fiquei super feliz! (bem, é assim que via o Markdown hehe) Percebi de cara que ali, eu poderia ser mais produtivo em digitar coisas dos mais diversos assuntos. Mas não funcionou bem pra mim...

Percebi que uns aplicativos tinham o famoso modo de escrita com preview e já outros era só um botão para "habilitar" o markdown. Me coloquei numa situação de que precisava aprender markdown o quanto antes, e que fazer isso me ajudaria a chegar no meu objetivo de escrever textos bonitos.
A minha experiência foi quebrada quando eu comecei a escrever neles. Aprender não bastava, pra falar a verdade até complicava a minha escrita, perdia total a produtividade. Eu não gostava de ver uma "#" antes de um texto tirando o foco total de como esse texto ficaria no final, não gostava mesmo!

Mas depois de anos sem mexer com programação a fundo, só aquelas automações meio toscas e inacabadas que eu fazia com Python. Resolvi fazer algo útil, algo simples mas super útil que resolveria esse problema, quem sabe de uma vez por todas...

Um editor markdown sem ter escrever em markdown

A ideia

Eu tive essa brilhante ideia e nunca fiquei tão feliz com uma dessas. E o projeto que eu queria era simples, dessa forma: você abre o app, começa um novo arquivo markdown e começa a escrever (só texto).
É, só isso! Seria escrever e formatar as linhas de textos como se estivesse no Word. Nada de ver "#", "---", "_", "*", somente o texto com os botões para você modificá-los. Sim, pode ser uma ideia mixuruca, mas eu quero fazer mesmo assim.
Queria até saber de vocês, se existe algum editor Markdown assim, se houver falem aí. Mas o fato de eu contar isso pra vocês, é que eu preciso de ajuda com isso.

Pedindo ajuda aos "universitários"

Eu sou uma pessoa muito complicada com estudos, não consigo reter o conteúdo de aulas por aí, é bem difícil. Mas em relação a programação, eu sempre parto pra prática, digo, sempre quebro a cabeça haha!
Por isso venho aqui pedir ajuda de vocês com conselhos, planos de estudo, atalhos para que essa ideia venha sair do papel e esteja na lista de aplicativos (seja pra celular, Linux, Windows, e até macOS) preferidos de várias pessoas!
Se quiserem, pode escrever aí embaixo como vocês fariam esse aplicativo. Eu pretendo usar HTML, CSS e JavaScript como base e quem sabe usar o ElectronJS para criar o aplicativo multi-plataforma desktop. Não sei mexer muito neles, ainda estou aprendendo, mas que eu sei fazer um sitezinho com o Live Server eu sei hehe!!

E por fim, não importa seu nível de conhecimento, se você sabe de algo que ninguém mencionou aqui embaixo, fale! Não deixe de falar! Seu comentário pode me ajudar e ajudar pessoas que também têm ideias parecidas com a minha!!

E eu espero que esse tópico possa ser o começo de uma leva de publicações pedindo ajuda dos "universitários" aqui na comunidade. Se você tem uma ideia, coloque ela em prática, não tem problema fazer uma versão sua da roda já criada.

2

Sensacional sua idéia Poveii e lhe apoio total, pois vai ser um excelente projeto para treinar programação.

Então o que pretende fazer e um editor WYSIWYG (What You See Is What You Get). Caso esteja procurando inspiração, tem um que foi recomendado no passado para ser usado aqui no TabNews que se entitula o Markdown WYSIWYG Editor e se chama TOAST UI Editor: https://github.com/nhn/tui.editor

2

Sim, sim!
Haha esse termo (WYSIWYG) só me lembra a música do The Dramatics que por sinal, música muito boa, recomendo!!

É incrível como esse app implementa essa ideia mas não "larga" a que eu mencionei que (pra mim) diminui a produtividade. Será que é difícil "mudar" (se for necessário, é claro...) a comunidade markdown para esse modelo mais simples? O que você acha, Filipe?🤔️

1

O Markdown continua, pois é a base usada em tudo no GitHub. Mas não vejo problema em ter algo WYSIWYG, eu só me pergunto porque no GitHub até hoje não implementaram isso... talvez pelo público lá ser super técnico (na sua maioria)?

2

É verdade, estranho isso né!
Pelo menos, legal pra mim, por construir uma ideia que possa mudar essa situação!! Vou seguir codando por aqui!

Sim, eu tive pesquisando sobre como eu faria essa aplicação em JS, me deparei com uma biblioteca que dá a possibilidade de salvar arquivos do lado do usuário, chamado FileSaver.js (link Github). Aí me deparei com uma situação, salvar o texto como arquivo no pc do usuário seria como criar um arquivo de texto? E também, se isso seria uma possibilidade do projeto andar...?

1

Show de bola! Quem usa isso é o https://www.photopea.com/ onde ele trabalha com arquivos de imagem (incluindo o PSD do Photoshop) e consegue salvar de forma "transparente" no file system do usuário. Coloco "transparente" entre aspas, pois você precisa salvar uma vez para ele criar uma espécie de ponteiro, e depois disso, fica realmente transparente.

Mas se você usar abstrações como o Electron, acho que nem disso precisa. Só tem esse desafio se a aplicação estiver rodando no navegador.

1

Uau, cada resposta um mind-blowing hahaha!
Não sabia que o Photopea usa o FileSaver, massa, eu uso ele às vezes! Antes de estar aqui, eu era um aspirante a designer hehe agora sou um a programação, espero não largar e continuar por aqui.🤝️

Então o ElectronJS resolveria esse problema facilmente?

1
1

Massa!! Vou dar uma estudada no Electron pra ver como realmente funciona. Qualquer coisa eu volto aqui para dar notícias!

2

Oi Poveii

Pior q já pensei muito nisso, às vezes é muito chato escrever markdown.

Cara, não é exatamente oq vc está pensando, mas te indico dar uma olhada em 2 editores:

  • Obsidian
  • Notion
  • OneNote

Obsidian

Ele usa markdown msm, mas só aparece o símbolo # ou ** se vc estiver com o cursor na msm linha. Que eu saiba é só pra desktop.

Tirei dois prints:

Eu tentei gravar um video curto de 20 minuto e transformar em gif, mas tá demorando pra fazer upload no tenor.com (se quiser mando depois de outro jeito)

Notion

O notion eu sinceramente não sei que formato de texto é por traz, mas tem a versão web e desktop.

Uma coisa que é diferente que ele usa comandos, então quando vc escreve "/" aparece uma lista de comandos

Se quiser ver um print

OneNote

O OneNote é da Microsoft, mas não é dão avançado por ser pouco usado acho. E não é um formato aberto como markdown (suponho que seja .xml como os outros do pacote office).

Mas ele é bem mais tranquilo em questão de não usar símbolos estranhos pra formatar, mas eu queria que ele tivesse mais atalhos pro teclado, e fosse mais configurável.

Uma das coisas que mais gosto do OneNote é que se vc usar Tab pra identar ele automaticamente torna o texto abaixo colapsável, oq eu uso muito.

E dá pra arrastar um grupo de texto com facilidade tbm (tipo VSCode com Alt + Arrow)


Sempre quis um q fosse fácil de usar, mas tbm fácil extrair dados por algum script. Pra script o melhor entre os 3 é o Obsidian, pq ele é local, e é tudo markdown puro.

Boa sorte no seu projeto, espero eu consiga contribuir


Não esqueça do café c[_]
DBL

1

Legal, que massa cara!! Até o momento eu não comecei o projeto, espero um dia começar de fato, mas tudo que eu tenho feito tem me ajudado a pensar melhor em como fazer esse projeto dar certo!! Obrigado.

1
2
1
1

Sim, sim, tenho visto isso com o jogo da cobrinha hehe! Beleza, primeiro passo aprender a criar um arquivo de texto com JavaScript.
Se eu conseguir eu volto aqui para dar notícias. Obrigado, Felipe!