KuroEditor evolui! Por trás das novas funções vol.3
Novidades da última versão do KuroEditor! Explicamos detalhadamente as novas funções, os motivos da implementação e a filosofia de design para otimizar a escrita.
O editor WYSIWYG «KuroEditor», que hoje constitui o núcleo dos produtos da Kuro-Boo (incluindo o código aberto), continua a buscar um desempenho ultrarrápido por meio de JavaScript puro sem dependências de frameworks e com grande facilidade de uso. No anterior «vol.2», apresentamos a formatação básica de text, a colocação de mídia e as tabelas ao estilo do Dropbox Paper. Mas a evolução do KuroEditor não para por aí. Desta vez, destacamos as funções adicionadas desde então, explicando as intenções de desenvolvimento e o contexto para oferecer uma história que você não encontrará nos manuais de usuário habituais. Conheça a visão geral do «KuroEditor vol.3», projetado para expressar suas ideias de forma rica e sem estresse.
Tabelas sem limites: importação do Excel e layout detalhado
Uma das funções às quais se prestou mais atenção no desenvolvimento do KuroEditor foi a das tabelas. Qualquer pessoa que tenha usado editores clássicos sabe o quão rudimentar costuma ser o seu tratamento. Modificar o fundo de uma célula, unir ou dividir células são ações que costumam ser complexas ou não estar disponíveis.
Organizar a informação em tabelas cuidadas é indispensável para clarificar comparativos, tarifas ou síntese de dados. Por isso, o KuroEditor oferece ferramentas avançadas para gerenciar tabelas com grande precisão.
A principal vantagem reside na geração automática de tabelas ao copiar e colar a partir do Excel, Google Sheets ou arquivos CSV. Basta colar as células copiadas diretamente no editor: o KuroEditor analisa o formato em segundo plano e reconstrói instantaneamente uma tabela HTML limpa. Isto evita ter de recriar cada célula à mão. Crie a sua tabela no Excel e cole-a diretamente de forma simples.
O editor também permite ajustar a espessura e a cor das bordas externas, internas, ou de uma linha específica. As opções de união (à direita ou abaixo), divisão, alinhamento vertical e cor de fundo da célula são geridas com o mouse. Este cuidado com o detalhe é o que distingue o KuroEditor de outras soluções.
Diferença entre «Enter» e «Shift+Enter»: a estrutura dos parágrafos
Um aspecto essencial do manual do KuroEditor é la diferença entre quebra de linha e parágrafo. Dependendo de se pressiona «Enter» ou «Shift + Enter» para ir para a linha seguinte, a estrutura HTML gerada é totalmente diferente. Entender esta diferença é primordial para controlar o layout.
Pressionar «Enter» cria um novo parágrafo (tag <p>), tratado como um bloco independente. Como as funções de alinhamento ou recuo se aplicam por parágrafo, pode alinhar à direita uma única linha se ela estiver isolada no seu próprio bloco. Pelo contrário, «Shift + Enter» insere uma quebra de linha (tag <br>) dentro do mesmo parágrafo. Tudo é visto como um bloco único e qualquer mudança de recuo afetará todas as linhas associadas.
Este comportamento evita o espaçamento excessivo involuntário entre linhas e conserva um controle semântico preciso. Use «Shift + Enter» para agrupar linhas curtas como endereços ou poemas, e «Enter» para transições lógicas. Isto resulta útil para estruturar listas complexas sem forçar formatos rígidos.
Esta função revela-se particularmente útil em listas. Em muitas ferramentas como o Microsoft Word ou o Dropbox Paper, as listas numeradas são possíveis, mas muitas vezes é frustrante porque os números não se encadeiam como deseja, ou não pode inserir um bloco de texto plano entre os elementos da lista. O KuroEditor simplifica tudo isso e permite criar listas complexas sem esforço.
O «Bloco arredondado» para dar ritmo ao layout e a distribuição de texto
Os artigos online costumam limitar-se a uma coluna vertical onde se alternam texto e imagens de maneira monótona. Embora a leitura em celulares seja a norma, este layout pode cansar em telas grandes. Para solucionar o problema, foi criada a função de «Bloco arredondado (kuro-roundbox)».
Este bloco é inserido com um clique a partir do menu inferior. Pode conter texto, imagens ou tabelas. Um menu contextual permite ajustar a sua largura (de 30% a 100%) e o seu alinhamento (esquerda, centro, direita).
A vantagem reside na distribuição de texto. Ao alinhar um bloco à direita com uma largura de 45%, o texto seguinte coloca-se de forma natural à esquerda. É ideal para adicionar recuadros ou notas. Para parar esta distribuição, basta inserir uma linha horizontal (hr) que envie o conteúdo posterior para debaixo do bloco. Isto traz dinamismo e melhora o conforto de leitura.
As «Cartões URL» e atalhos de emoji para agilizar a escrita
Os links são indispensáveis, mas os simples links azuis de texto às vezes não se destacam quando se quer realçar uma referência importante. O KuroEditor soluciona isto com os «Cartões URL (kuro-url-card)».
Ao criar um link, marcar a opção cartão recupera os metadatos do site de destino (ícone, título, URL) para gerar um bloco visual elegante. O leitor identifica imediatamente o destino do link. Se o site não estiver disponível, o editor oculta os elementos em falta. Ao contrário de outras ferramentas como o Dropbox Paper, que convertem cada link automaticamente em cartão, o KuroEditor permite escolher entre link clássico, cartão simples ou cartão enriquecido com imagens.
Para não quebrar o ritmo de escrita, o editor integra códigos curtos para emojis. Não procure mais nos menus com o mouse: escreva simplesmente :smile:, :fire: ou :+1: para que se transforme instantaneamente no emoji correspondente. Uma grande poupança de tempo para redatores regulares.
Listas de tarefas e «Cartões de Receita» semânticos
O KuroEditor integra funções práticas para uso pessoal, como as listas de tarefas (Todo), úteis em aplicações de notas.
- Verificar e-mails
- Preparar café
Escrever [] no início da linha gera uma caixa de seleção. O estado guarda-se no código HTML do artigo. Na página pública, estas caixas servem como elemento visual fixo e os leitores não podem marcá-las, mas continuam a ser úteis para estruturar guias ou listas de controle.
Para blogs de culinária, o editor oferece um «Cartão de Receita (kuro-recipe)» estruturado. Reúne porções, tempos, ingredientes e passos. Este cartão gera dados estruturados conformes com as diretrizes SEO do Google. Para maior clareza, limita-se a um cartão por artigo (o botão desativa-se se já houver um). Para saber mais, consulte o artigo sobre receitas do KuroCMS.
Blocos de código otimizados: reorganização através de arrastamento e botão de copiar
Para artigos técnicos, a apresentação de código é crucial. O KuroEditor facilita a vida dos desenvolvedores com blocos de código interativos projetados para simplificar a escrita e a leitura.
É possível mover um bloco de código arrastando-o pela sua área de números de linha. É muito mais seguro e prático do que cortar e colar texto, operação que frequentemente quebra o recuo ou danifica a estrutura HTML.
Além disso, para melhorar a experiência dos leitores, um script dedicado adiciona automaticamente um botão de cópia rápida (📋) no canto superior direito dos blocos de código nas páginas públicas. Uma atenção especial que simplifica o uso dos trechos.
Conclusão: a fidelidade absoluta do WYSIWYG
O KuroEditor não busca apenas alinhar texto, mas oferecer uma experiência WYSIWYG total onde o design em fase de edição corresponde exatamente à página publicada. Conseguir isto em JavaScript puro, sem frameworks ou compromissos com a velocidade de carregamento, representava um grande desafio. Graças ao seu design modular, o KuroEditor integra-se em poucas linhas de código em qualquer CMS. Continuaremos a trabalhar para melhorar a experiência de muitos escritores.