silegismg-editor-articulacao v1.0.10

Editor de Articulação

O editor de articulação é uma biblioteca javascript elaborada pela Assembleia Legislativa de Minas Gerais, como parte do Sistema de Informação Legislativa de Minas Gerais (Silegis-MG).

Ele permite a edição de texto articulado, formatando e numerando automaticamente artigos, parágrafos, incisos, alíneas e itens, bem como as divisões em títulos, capítulos, seções e subseções. O texto articulado é estruturado em formato XML, conforme elemento Articulacao definido pelo schema do LexML.

Demonstração

Acesse https://silegis-mg.github.io/editor-articulacao/ para ver uma simples demonstração do editor de articulação funcionando em seu navegador.

Funcionalidades

• Criação de rótulo e numeração automática para dispositivos (artigo, parágrafo, inciso, alínea e item);

• Formatação padrão dos dispositivos, conforme regras de redação definidas no art. 12 da LCP 78/2004.

  • A formatação pode ser configurada, para atender ao padrão de redação federal, sem alteração no código.

• Divisão dos artigos em títulos, capítulos, seções e subseções;

• Validação automática de:
  • caixa alta: artigos e parágrafos não devem ser escritos usando apenas caixa alta;
  • uso de aspas: citações devem estar entre aspas e terminar com ponto final (.);
  • enumerações: enumerações devem possuir mais de um elemento;
  • letra maiúscula: artigos e parágrafos devem ser iniciados com letra maiúscula;
  • pontuação: artigos e parágrafos devem ser terminados com ponto final (.) ou dois pontos (:), sem espaço antes da pontuação, e enumerações devem ser terminadas com ponto final (.), ponto e vírgula (;) ou dois pontos (:), sem espaço antes da pontuação.;
  • sentença única: dispositivos devem conter uma única sentença.
• Auto-formatação:
  • ao abrir aspas, formata-se automaticamente como um texto dentro do caput, permitindo múltiplas linhas dentro das aspas;
  • ao fechar aspas, formata-se a próxima linha como um novo artigo;
  • ao finalizar com dois pontos, inicia-se uma enumeração (de artigo ou parágrafo para inciso, de inciso para alínea e de alínea para item);
  • ao finalizar com ponto final, finaliza-se a enumeração (de item para alínea, de alínea para inciso, de inciso para artigo ou parágrafo);
  • ao dar enter em uma linha vazia, troca a formatação da linha vazia para artigo, quando formatado como parágrafo, ou encerra a enumeração, quando formatado como inciso, alínea ou item.
• Articulação pode ser importada/exportada de/para XML, seguindo especificação do LexML;
• Interpretação de conteúdo colado, de forma a permitir a formatação e numeração automática em dispositivos estruturados.

Como usar a partir do código fonte

Pré-requisitos para compilação

• NodeJS com npm

Baixando o editor

git clone https://github.com/silegis-mg/editor-articulacao.git

Instalação das dependências

Após baixar o editor, mude para o diretório onde encontram os fontes e instale as dependências:

cd editor-articulacao
npm install

Executando exemplo

Finalizado o passo anterior, execute:

npm start

Em seguida, basta abrir o navegador no endereço http://localhost:8080/exemplo.html

Testando

O editor de articulação possui testes automatizados utilizando karma e protractor.

npm test

Se estiver utlizando proxy, defina a variável de ambiente http_proxy para que o teste consiga baixar o webdriver do Chrome mais atual.

Gerando pacote para aplicações finais em ES5

O javascript minificado é gerado por meio do webpack, a partir de uma tarefa do grunt. Existem dois empacotamentos para uso em aplicações finais:

Plain-JS

O empacotamento plain-js define silegismgEditorArticulacao como uma função global para transformar um elemento no DOM em um editor de articulação. Também define a função silegismgEditorArticulacaoController para criar o controller, caso o utilizador queira maior controle da interface de usuário.

Também é definida a função global silegismgInterpretadorArticulacao.interpretar para interpretação de texto articulado.

Gerando pacote

npx grunt build-plain

É possível incluir o polyfill do babel também, utilizando:

npx grunt build-plain-polyfill

Utilizando plain-js

Existem duas possibilidades para criar o editor de articulação. Uma que incorpora a barra de ferramentas e outra que apenas vincula o controlador do editor de articulação, permitindo ao utilizador personalizar por completo a interface de usuário.

Para criar o editor de articulação com barra de ferramentas padrão, utilize a sintaxe silegismgEditorArticulacao(elemento, opcoes). Para criar o editor de articulação personalizando por completa a interface de usuário, utilize a sintaxe silegismgEditorArticulacaoController(elemento, opcoes), que retornará o controlador, cujos métodos estão descritos na API do controlador. Para exemplo de como personalizar a interface, veja o arquivo de teste do protractor.

Veja também a API do interpretador de articulação.

Exemplo

<script src="build/silegismg-editor-articulacao-plain-js.js"></script>
<div id="editor"></div>
<script>
  silegismgEditorArticulacao(document.getElementById('editor'));
</script>

Angular 1

O empacotamento angular1 registra a diretiva silegismgEditorArticulacaoConteudo no módulo silegismg-editor-articulacao para AngularJS 1.x.

Gerando pacote

npx grunt build-angular1

Exemplo

<script src="build/silegismg-editor-articulacao-angular1.js"></script>
<silegismg-editor-articulacao-conteudo id="editor" opcoes="opcoes"></silegismg-editor-articulacao-conteudo>

Utilizando como módulo ES6 e webpack

npm install silegismg-editor-articulacao

JS:

import { ComponenteEdicao, EditorArticulacaoController, interpretadorArticulacao } from 'silegismg-editor-articulacao';

const opcoes = { /* ... */ };
var elemento = document.getElementById('exemplo');
var ctrl = new EditorArticulacaoController(elemento, opcoes);

HTML:

<div id="exemplo"></div>

Configuração do webpack

O editor de articulação importa o conteúdo do CSS e manipula em tempo de execução, a fim de aplicar os parâmetros de configuração. Para tanto, deve-se utilizar o seguinte loader para os arquivos CSS deste módulo:

{
    test: /\.css$/,
    use: {
        loader: 'css-loader',
        options: {
            minimize: true,
            sourceMap: true
        }
    }
}

Opções do editor de articulação

Opções de rótulo

Todos os atributos de rótulo são do tipo literal (String).

Opções de validação

Todas as opções de validação são habilitadas (valor true) por padrão.

API do controlador

Eventos do controlador

API do interpretador

Para interpretar um texto puro, transformando em um texto estruturado utilizando LexML, utilize a função interpretar (veja código-fonte), com a seguinte sintaxe:

interpretadorArticulacao.interpretar(texto, formatoDestino, formatoOrigem);

onde texto é uma string, formatoDestino é uma das opções "json", "lexml" (padrão) ou "lexmlString" e formatoOrigem é "texto" (padrão) ou "html".

Contribuições desejadas

• Identificação de remissões;
• Renumeração automática de remissões, em caso de alterações nos dispositivos;
• Modo de edição de norma, em que alterações a um texto original são consideradas emendas.

Limitações conhecidas (aceita-se contribuições)

As limitações conhecidas correspondem a um conjunto de funcionalidade que não funciona como deveria, mas seu comportamento é aceitável para a proposta do editor. Contribuições são bem-vindas.

• Copiar do editor de articulação e colar em editor externo omite os rótulos;
• Interpretação de artigo com emenda (exemplo: Art. 283-A da Constituição do Estado de Minas Gerais), apesar de haver suporte para importação de LexML com este tipo de dispositivo.

Compatibilidade com navegadores

1: Considera-se compatibilidade com navegador mantida aquela que é constantemente testada pela equipe de desenvolvimento.