NativeScript / NativeScript/angular
Render unsafe latex html string using Html View
Nessuno ha ancora preso questa issue.
- Lingua principale
- TypeScript
- Stelle
- 55
- Fork
- 13
- Merge medio
- 16m
- PR unite (30g)
- 1
Descrizione
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
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Iniziare con la proprietà html di HtmlView e il percorso di binding Angular [html]; il fallimento riportato è value.search is not a function quando viene fornito un valore considerato attendibile da DomSanitizer. Riprodurlo con l'HTML KaTeX fornito e verificare il completamento eseguendone il rendering senza l'eccezione o l'avviso relativo al valore sicuro, preservando il markup previsto.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, typescript
- Ambito
- mobile-dev
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Da chiarire
- Idoneità per principianti
- 28/100