My Web Editor

Felipe Rohde
2 min readJul 19, 2016

--

O que definem os atuais editores de texto web, aqueles que manipulam o conteúdo via content-editable no browser, mais conhecidos como WISWYG (what you see is what you get) e que meramente utilizam este termo de maneira superficial, o que é uma afronta, uma vez que o termo correto para a maioria deles seria "what you see is what you get, fuck you, I'll behave by my self, and you, fuck you". Irritado com sempre os mesmos problemas na hora de entregar um bom editor, resolvi fazer um por conta própria. Vale ressaltar que até existem alguns razoáveis, porém, a falta de personalização também é um problema para projetos bem específicos.

Os problemas de comportamentos inesperados ocorrem pelo simples fato de não deter controle sobre seus estados internos no código, deixando cada browser fazer a merda manipula-los, criando HTML’s poluídos, e que se for tentar editar, melhor nem tentar.

Para me inspirar, analisei dois, o famoso editor do Medium.com, e o não tão famoso editor do Facebook Notes. Apesar do primeiro ser ótimo e aclamado pelos usuários, optei por criar uma quase cópia do editor do Facebook Notes, por ser mais simples, e não menos funcional (coincidentemente, ambos foram criados pelos mesmos programadores). Com muito código React.js e cinco dias de trabalho e voilà, criei meu próprio editor, com o a capacidade de personalização que desejara, e controlando todos os estados internos, isto é, o browser somente renderiza, não manipula.

O projeto será usado em um produto, portanto, ainda não vou deixa-lo open source, mas o resultado vocês podem conferir em my-editor.herokuapp.com

O que pretendo com este editor, é que seja opcional utilizar o mouse para formatar o texto, assim, criei alguns manipuladores a nível de edição, similares aos utilizados com Markdown, tais quais:

* {space} - Lista não ordenada 1.{space} - Lista ordenada --{space} - Régua horizontal > {space} - Menção # {space} - Título primário (H1) ##{space} - Título secundário (H2)

Além de alguns atalhos:

Cmd + B - Negrito Cmd + I - Itálico Cmd + U - Sublinhado

Logo estarei disponibilizando este editor no Github, provavelmente, até um pouco melhor que o atual.

--

--

Felipe Rohde

A good Javascript and Golang developer. Tech lead at EasyAuth and owner of Simple Image Cloud.