Textbox

src/Components/InterpolatedMarkup.razor → src/Components/InterpolatedMarkup.cs

@@ -1,18 +1,7 @@
-@namespace BlaTeX.Components
+using Microsoft.AspNetCore.Components.Rendering;
 
-@{
-    Index prevEnd = 0;
-    @foreach (var range in Selector(Markup))
-    {
-        @((MarkupString)Markup[prevEnd..range.Start])
-        @Substitute(Markup[range])
-
-        prevEnd = range.End;
-    }
-    @((MarkupString)Markup[prevEnd..])
-}
-
-@code {
+public class InterpolatedMarkup : ComponentBase
+{
     /// <summary> Markup of which parts may be replaced by fragment renderers. </summary>
     [Parameter]
     public required string Markup { get; init; }
@@ -33,4 +22,20 @@
 
         return base.SetParametersAsync(parameters);
     }
+    protected override void BuildRenderTree(RenderTreeBuilder builder)
+    {
+        int seq = 0;
+        Index prevEnd = 0;
+
+        foreach (var range in Selector(Markup))
+        {
+            builder.AddMarkupContent(seq++, Markup[prevEnd..range.Start]);
+            builder.AddMarkupContent(seq++, Substitute(Markup[range.Start..range.End]));
+            prevEnd = range.End;
+        }
+
+        builder.AddMarkupContent(seq++, Markup[prevEnd..]);
+
+        Console.WriteLine(builder.ToString());
+    }
 }

src/KaTeX/Internal/LiteralChildComponentMarkupService.cs

@@ -0,0 +1,39 @@
+
+/// <summary>
+/// Represents substituting of a literal by another simple renderer.
+/// </summary>
+public class LiteralChildComponentMarkupService : IChildComponentMarkupService
+{
+    private readonly string literal;
+    private readonly RenderFragment substitute;
+
+    public LiteralChildComponentMarkupService(string literal, RenderFragment substitute)
+    {
+        this.literal = literal ?? throw new ArgumentNullException(nameof(literal));
+        this.substitute = substitute ?? throw new ArgumentNullException(nameof(substitute));
+    }
+
+    public IEnumerable<Range> Select(string markup)
+    {
+        int previousIndex = markup.IndexOf("katex-html"); // skip "katex-mathml"
+        Console.WriteLine($"previousIndex={previousIndex}");
+        while (true)
+        {
+            int index = markup.IndexOf(literal, previousIndex);
+            if (index == -1)
+            {
+                yield break;
+            }
+            yield return new Range(index, index + literal.Length);
+            Console.WriteLine($"index={index}");
+            Console.WriteLine($"Replacing={markup[index..(index + literal.Length)]}");
+
+            previousIndex = index + literal.Length;
+        }
+    }
+
+    public RenderFragment Substitute(string markupFragment)
+    {
+        return substitute;
+    }
+}

src/Shared/HomePage.razor

@@ -9,8 +9,8 @@
 
 
 <p data-test="loaded">Regular KaTeX component:</p>
-<KaTeX Math=@math />
-<p>Interactive KaTeX component:</p>
+<KaTeX Math=@math ChildComponentMarkupService=inputReplacer/>
+<p>Interactive KaTeX component3:</p>
 
 <p>
     🚧
@@ -21,8 +21,9 @@
 
 
 @code {
-    private const string initialValue = "c = \\pm \\sqrt{a^2 + b^2}";
+    private const string initialValue = "c = \\pm \\sqrt{a^2 + b^2} \\blatex{input}";
     private string math = initialValue;
+    private IChildComponentMarkupService inputReplacer => new LiteralChildComponentMarkupService("input", @<input>);
 
     private void onInputChanged(ChangeEventArgs e)
     {

tests/Static/BlatexFunction/Textbox_in_blatex.razor

@@ -0,0 +1,32 @@
+@using BlaTeX.Components
+@inherits KaTeXTestComponentBase
+
+<KaTeXTest math="c \blatex{C#input}"
+           ChildComponentMarkupService=inputReplacer>
+    <span class="katex">
+      <span class="katex-mathml">
+        <math xmlns="http://www.w3.org/1998/Math/MathML">
+          <semantics>
+            <mrow>
+              <mi>c</mi>
+              <annotation>C#input</annotation>
+            </mrow>
+            <annotation encoding="application/x-tex">c \blatex{C#input}</annotation>
+          </semantics>
+        </math>
+      </span>
+      <span class="katex-html" aria-hidden="true">
+        <span class="base">
+          <span class="strut" style="height:0.6833em;"></span>
+          <span class="mord mathnormal" data-loc="0,1">c</span>
+          <span data-loc="2,18">
+            <input>
+          </span>
+        </span>
+      </span>
+    </span>
+</KaTeXTest>
+
+@code {
+    private IChildComponentMarkupService inputReplacer => new LiteralChildComponentMarkupService("C#input", @<input>);
+}