NativeScript / NativeScript/angular
Render unsafe latex html string using Html View
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- TypeScript
- Estrellas
- 55
- Forks
- 13
- Merge medio
- 16 min
- PR fusionados (30 d)
- 1
Descripción
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
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
Comience con la propiedad html de HtmlView y la ruta de binding Angular [html]; el fallo indicado por el informe es value.search is not a function al proporcionar un valor de confianza de DomSanitizer. Reprodúzcalo con el HTML de KaTeX proporcionado y verifique que se ha completado renderizándolo sin la excepción ni la advertencia de valor seguro, preservando el marcado esperado.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- angular, typescript
- Área
- mobile-dev
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Necesita aclaración
- Aptitud para principiantes
- 28/100