Configurações

Configurações do Editor (`editorConfig`)

A propriedade editorConfig permite configurar diversos aspectos do editor de texto do Widget Iara, como comportamento visual, interação da assistente, fontes, toolbar e espaçamento.

Observação importante: ao utilizar a propriedade editorConfig, todas as configurações visuais e comportamentais do editor passam a ser controladas exclusivamente por ela. Isso significa que os valores padrão do editor serão sobrescritos.

Portanto, caso você deseje manter algum comportamento ou estilo padrão, é necessário redefini-lo manualmente dentro do editorConfig. Por exemplo, se quiser preservar o layout de páginas físicas, o modo da ribbon ou as fontes padrão do editor, esses valores precisam ser explicitamente incluídos na configuração.

Essa abordagem garante total controle sobre o ambiente do editor, mas requer atenção ao declarar todas as propriedades desejadas.

Exemplo básico de uso de `editorConfig`

iframe.contentWindow.postMessage(
  {
    id: "IaraInit",
    speechParams: {
      apiToken: "meuApiToken",
      userId: "meuEmail",
    },
    editorConfig: {
      assistant: {
        enabled: true,
        draggable: {
          containerId:
            "#iara-syncfusion-editor-container_editor_viewerContainer",
          defaultPosition: { x: 30, y: 20 },
        },
      },
      font: {
        availableFamilies: ["Arial", "Times New Roman", "Calibri"],
        availableSizes: [10, 12, 14, 18],
        family: "Times New Roman",
        size: 12,
      },
      ribbon: {
        displayMode: "Classic",
      },
      lineSpacing: 1,
      paragraphSpacing: {
        before: 8,
        after: 12,
      },
      forceTypographyStyles: true,
    },
    templates: [
      {
        speechCommand: "coluna",
        content: "<div>teste coluna</div>",
        name: "Tomografia de Coluna",
      },
    ],
  },
  "https://widget.iarahealth.com"
);

Propriedades disponíveis em `editorConfig`

`layoutType`

Define o tipo de layout do editor. Exemplo:

layoutType: "Continuous";

“Continuous”: ativa o modo webLayout, que remove a quebra de páginas e oferece uma experiência de escrita fluida e contínua.
Se não passar a prop layoutType: o valor padrão será “Print”, que simula um editor com visual de páginas físicas.

`assistant.enabled`

Habilita a assistente Iara.

assistant: {
  enabled: true,
},

enabled: ativa a assistente dentro do editor. Sem esse valor, a assistente não será exibida.

`assistant.draggable`

Configura a assistente Iara como um elemento arrastável.

assistant: {
  enabled: true,
  draggable: {
    containerId:
      "#iara-syncfusion-editor-container_editor_viewerContainer",
    defaultPosition: { x: 30, y: 20 },
  },
},

containerId: Elemento onde a assistente estará contida. o valor recomendado para o containerId é o do exemplo. Esse é o seletor padrão dentro do editor.
defaultPosition: Posição inicial da assistente (x, y).

Importante: containerId é obrigatório para o draggable funcionar corretamente.

`font`

Configurações relacionadas às fontes do editor:

font: {
  availableFamilies: ['Arial', 'Times New Roman', 'Calibri'],
  availableSizes: [10, 12, 14, 18],
  family: 'Times New Roman',
  size: 12
}

availableFamilies: Lista de fontes suportadas.
availableSizes: Tamanhos disponíveis no seletor.
family: Fonte padrão.
size: Tamanho de fonte padrão.

Atenção: O editor suporta apenas as famílias e tamanhos de fonte listados acima. Caso você opte por alterar a fonte padrão (family), é obrigatório informar também as propriedades availableFamilies, availableSizes e size, seguindo exatamente os formatos e valores aceitos.

`ribbon`

Controla o modo de exibição da toolbar:

ribbon: {
  displayMode: "Classic"; // ou "Simplified"
}

"Classic": A toolbar aparece totalmente expandida com todas as opções visíveis (padrão).
"Simplified": A toolbar aparece recolhida, exibindo apenas os ícones principais para uma visualização mais compacta.

`lineSpacing`

Define o espaçamento entre as linhas. Valor deve ser um numero inteiro Exemplo:

lineSpacing: 1;

`paragraphSpacing`

Controla o espaçamento antes e depois de parágrafos:

paragraphSpacing: {
  before: 8,
  after: 12
}

`forceTypographyStyles`

Garante que os templates utilizem os estilos de fonte e espaçamento configurados, mesmo que o template tenha um estilo definido.

forceTypographyStyles: true;

Essas configurações permitem personalizar a aparência e comportamento do editor de forma granular, adaptando-o às necessidades específicas de uso.

Configurações