NativeScript / NativeScript/angular

Render unsafe latex html string using Html View

Aberta
#138 0 comentários 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Linguagem predominante
TypeScript
Estrelas
55
Forks
13
Merge médio
16min
PRs com merge (30d)
1

Descrição

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

  • CLI: "@angular/compiler-cli": "~18.0.0",
  • Cross-platform modules:
  • Android Runtime: "@nativescript/android": "8.8.1-next.2024-07-19-10014251437",
  • iOS Runtime:
  • Plugin(s): "katex": "^0.16.11",, "@types/katex": "^0.16.7",
  • NativeScript-Angular: "@nativescript/angular": "^18.0.0",
  • Angular: "@angular/core": "~18.0.0",

Describe the bug

I created unsafe html string using

this._safeHtml = this.domSanitizer.bypassSecurityTrustHtml(htmlString);

Attempting to render this content using Html View using property binding like so

<HtmlView [html]="_safeHtml"></HtmlView>

results to the following error

An uncaught Exception occurred on "main" thread.
Calling js method onCreateView failed
TypeError: value.search is not a function

StackTrace:
[html:setNative]...

NB:

  • Using the approach below:
    <HtmlView html="{{_safeHtml}}"></HtmlView>

does not render the string(latex string) as expected and also throws a safevalue must use [property]=binding error on the screen.

  • The string renders as expected in pure angular project using the following code:
    <div [innerHTML]="_safeHtml"></div>

A sample string to be rendered looks like so
<span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mi>s</mi><mi>u</mi><msubsup><mi>m</mi><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></msubsup><mo stretchy="false">(</mo><msubsup><mi>x</mi><mi>i</mi><mn>2</mn></msubsup><mo>−</mo><mi>o</mi><mi>v</mi><mi>e</mi><mi>r</mi><mi>l</mi><mi>i</mi><mi>n</mi><mi>e</mi><msup><mi>x</mi><mn>2</mn></msup><mo stretchy="false">)</mo></mrow><annotation encoding="application/x-tex">sum_{i=1}^n(x_i^2 - overline{x}^2)</annotation></semantics></math></span>

What could be a recommended way to solve this situation or a walkaround?

To Reproduce

Expected behavior

Sample project

Additional context

Guia de contribuição

Abrir o guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Direção de pesquisa

Comece pela propriedade html de HtmlView e pelo caminho de binding Angular [html]; a falha relatada é value.search is not a function quando um valor confiável do DomSanitizer é fornecido. Reproduza com o HTML KaTeX fornecido e verifique a conclusão renderizando-o sem a exceção nem o aviso de valor seguro, preservando a marcação esperada.

Escrita pelo modelo de indexação a partir do texto da issue.

Avaliação

Stack de tecnologia
angular, typescript
Domínio
mobile-dev
Tipo de issue
Bug
Dificuldade
4/5
Tempo estimado
3-5 dias
Status de atividade
Estagnada
Clareza
Precisa de esclarecimento
Facilidade para iniciantes
28/100

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.