Skip to content

Commit 52ff92c

Browse files
rajveermalviyarajveermalviya
committed
content: Support parsing and handling inline styles for KaTeX content
1 parent 98d3ae6 commit 52ff92c

File tree

3 files changed

+107
-13
lines changed

3 files changed

+107
-13
lines changed

‎lib/model/katex.dart‎

Lines changed: 82 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import 'package:csslib/parser.dart' as css_parser;
2+
import 'package:csslib/visitor.dart' as css_visitor;
13
import 'package:flutter/foundation.dart';
24
import 'package:html/dom.dart' as dom;
35

@@ -404,11 +406,67 @@ class _KatexParser {
404406
}
405407
if (text == null && spans == null) throw KatexHtmlParseError();
406408

409+
final inlineStyles = _parseSpanInlineStyles(element);
410+
407411
return KatexNode(
408-
styles: styles,
412+
styles: inlineStyles != null
413+
? styles.merge(inlineStyles)
414+
: styles,
409415
text: text,
410416
nodes: spans);
411417
}
418+
419+
KatexSpanStyles? _parseSpanInlineStyles(dom.Element element) {
420+
if (element.attributes case {'style': final styleStr}) {
421+
// `package:csslib` doesn't seem to have a way to parse inline styles:
422+
// https://github.com/dart-lang/tools/issues/1173
423+
// So, workaround that by wrapping it in a universal declaration.
424+
final stylesheet = css_parser.parse('*{$styleStr}');
425+
if (stylesheet.topLevels case [css_visitor.RuleSet() && final rule]) {
426+
double? heightEm;
427+
double? verticalAlignEm;
428+
429+
for (final declaration in rule.declarationGroup.declarations) {
430+
if (declaration case css_visitor.Declaration(
431+
:final property,
432+
expression: css_visitor.Expressions(
433+
expressions: [css_visitor.Expression() && final expression]),
434+
)) {
435+
switch (property) {
436+
case 'height':
437+
heightEm = _getEm(expression);
438+
if (heightEm != null) continue;
439+
440+
case 'vertical-align':
441+
verticalAlignEm = _getEm(expression);
442+
if (verticalAlignEm != null) continue;
443+
}
444+
445+
// TODO handle more CSS properties
446+
_logError('KaTeX: Unsupported CSS property: $property of '
447+
'type ${expression.runtimeType}');
448+
} else {
449+
throw KatexHtmlParseError();
450+
}
451+
}
452+
453+
return KatexSpanStyles(
454+
heightEm: heightEm,
455+
verticalAlignEm: verticalAlignEm,
456+
);
457+
} else {
458+
throw KatexHtmlParseError();
459+
}
460+
}
461+
return null;
462+
}
463+
464+
double? _getEm(css_visitor.Expression expression) {
465+
if (expression is css_visitor.EmTerm && expression.value is num) {
466+
return (expression.value as num).toDouble();
467+
}
468+
return null;
469+
}
412470
}
413471

414472
enum KatexSpanFontWeight {
@@ -427,13 +485,18 @@ enum KatexSpanTextAlign {
427485
}
428486

429487
class KatexSpanStyles {
488+
double? heightEm;
489+
double? verticalAlignEm;
490+
430491
String? fontFamily;
431492
double? fontSizeEm;
432493
KatexSpanFontStyle? fontStyle;
433494
KatexSpanFontWeight? fontWeight;
434495
KatexSpanTextAlign? textAlign;
435496

436497
KatexSpanStyles({
498+
this.heightEm,
499+
this.verticalAlignEm,
437500
this.fontFamily,
438501
this.fontSizeEm,
439502
this.fontStyle,
@@ -444,6 +507,8 @@ class KatexSpanStyles {
444507
@override
445508
int get hashCode => Object.hash(
446509
'KatexSpanStyles',
510+
heightEm,
511+
verticalAlignEm,
447512
fontFamily,
448513
fontSizeEm,
449514
fontStyle,
@@ -454,6 +519,8 @@ class KatexSpanStyles {
454519
@override
455520
bool operator ==(Object other) {
456521
return other is KatexSpanStyles &&
522+
other.heightEm == heightEm &&
523+
other.verticalAlignEm == verticalAlignEm &&
457524
other.fontFamily == fontFamily &&
458525
other.fontSizeEm == fontSizeEm &&
459526
other.fontStyle == fontStyle &&
@@ -468,13 +535,27 @@ class KatexSpanStyles {
468535
if (this == _zero) return '${objectRuntimeType(this, 'KatexSpanStyles')}()';
469536

470537
final args = <String>[];
538+
if (heightEm != null) args.add('heightEm: $heightEm');
539+
if (verticalAlignEm != null) args.add('verticalAlignEm: $verticalAlignEm');
471540
if (fontFamily != null) args.add('fontFamily: $fontFamily');
472541
if (fontSizeEm != null) args.add('fontSizeEm: $fontSizeEm');
473542
if (fontStyle != null) args.add('fontStyle: $fontStyle');
474543
if (fontWeight != null) args.add('fontWeight: $fontWeight');
475544
if (textAlign != null) args.add('textAlign: $textAlign');
476545
return '${objectRuntimeType(this, 'KatexSpanStyles')}(${args.join(', ')})';
477546
}
547+
548+
KatexSpanStyles merge(KatexSpanStyles other) {
549+
return KatexSpanStyles(
550+
heightEm: other.heightEm ?? heightEm,
551+
verticalAlignEm: other.verticalAlignEm ?? verticalAlignEm,
552+
fontFamily: other.fontFamily ?? fontFamily,
553+
fontSizeEm: other.fontSizeEm ?? fontSizeEm,
554+
fontStyle: other.fontStyle ?? fontStyle,
555+
fontWeight: other.fontWeight ?? fontWeight,
556+
textAlign: other.textAlign ?? textAlign,
557+
);
558+
}
478559
}
479560

480561
class KatexSpanStylesProperty extends DiagnosticsProperty<KatexSpanStyles> {

‎lib/widgets/content.dart‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -921,7 +921,18 @@ class _KatexSpan extends StatelessWidget {
921921
textAlign: textAlign,
922922
child: widget);
923923
}
924-
return widget;
924+
925+
if (styles.verticalAlignEm != null) {
926+
widget = Baseline(
927+
baseline: styles.verticalAlignEm! * em,
928+
baselineType: TextBaseline.alphabetic,
929+
child: widget);
930+
}
931+
932+
return SizedBox(
933+
height: styles.heightEm != null ? styles.heightEm! * em : null,
934+
child: widget,
935+
);
925936
}
926937
}
927938

‎test/model/content_test.dart‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -519,7 +519,7 @@ class ContentExample {
519519
'<span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6944em;"></span><span class="mord mathnormal">λ</span></span></span></span></p>',
520520
MathInlineNode(texSource: r'\lambda', nodes: [
521521
KatexNode(styles: KatexSpanStyles(), text: null, nodes: [
522-
KatexNode(styles: KatexSpanStyles(), text: null, nodes: []),
522+
KatexNode(styles: KatexSpanStyles(heightEm: 0.6944), text: null, nodes: []),
523523
KatexNode(
524524
styles: KatexSpanStyles(
525525
fontFamily: 'KaTeX_Math',
@@ -539,7 +539,7 @@ class ContentExample {
539539
'<span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6944em;"></span><span class="mord mathnormal">λ</span></span></span></span></span></p>',
540540
[MathBlockNode(texSource: r'\lambda', nodes: [
541541
KatexNode(styles: KatexSpanStyles(), text: null, nodes: [
542-
KatexNode(styles: KatexSpanStyles(), text: null, nodes: []),
542+
KatexNode(styles: KatexSpanStyles(heightEm: 0.6944), text: null, nodes: []),
543543
KatexNode(
544544
styles: KatexSpanStyles(
545545
fontFamily: 'KaTeX_Math',
@@ -564,7 +564,7 @@ class ContentExample {
564564
'<span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6944em;"></span><span class="mord mathnormal">b</span></span></span></span></span></p>', [
565565
MathBlockNode(texSource: 'a', nodes: [
566566
KatexNode(styles: KatexSpanStyles(), text: null, nodes: [
567-
KatexNode(styles: KatexSpanStyles(), text: null, nodes: []),
567+
KatexNode(styles: KatexSpanStyles(heightEm: 0.4306), text: null, nodes: []),
568568
KatexNode(
569569
styles: KatexSpanStyles(
570570
fontFamily: 'KaTeX_Math',
@@ -575,7 +575,7 @@ class ContentExample {
575575
]),
576576
MathBlockNode(texSource: 'b', nodes: [
577577
KatexNode(styles: KatexSpanStyles(), text: null, nodes: [
578-
KatexNode(styles: KatexSpanStyles(), text: null, nodes: []),
578+
KatexNode(styles: KatexSpanStyles(heightEm: 0.6944), text: null, nodes: []),
579579
KatexNode(
580580
styles: KatexSpanStyles(
581581
fontFamily: 'KaTeX_Math',
@@ -603,7 +603,7 @@ class ContentExample {
603603
[QuotationNode([
604604
MathBlockNode(texSource: r'\lambda', nodes: [
605605
KatexNode(styles: KatexSpanStyles(), text: null, nodes: [
606-
KatexNode(styles: KatexSpanStyles(), text: null, nodes: []),
606+
KatexNode(styles: KatexSpanStyles(heightEm: 0.6944), text: null, nodes: []),
607607
KatexNode(
608608
styles: KatexSpanStyles(
609609
fontFamily: 'KaTeX_Math',
@@ -632,7 +632,7 @@ class ContentExample {
632632
[QuotationNode([
633633
MathBlockNode(texSource: 'a', nodes: [
634634
KatexNode(styles: KatexSpanStyles(), text: null, nodes: [
635-
KatexNode(styles: KatexSpanStyles(), text: null, nodes: []),
635+
KatexNode(styles: KatexSpanStyles(heightEm: 0.4306), text: null, nodes: []),
636636
KatexNode(
637637
styles: KatexSpanStyles(
638638
fontFamily: 'KaTeX_Math',
@@ -643,7 +643,7 @@ class ContentExample {
643643
]),
644644
MathBlockNode(texSource: 'b', nodes: [
645645
KatexNode(styles: KatexSpanStyles(), text: null, nodes: [
646-
KatexNode(styles: KatexSpanStyles(), text: null, nodes: []),
646+
KatexNode(styles: KatexSpanStyles(heightEm: 0.6944), text: null, nodes: []),
647647
KatexNode(
648648
styles: KatexSpanStyles(
649649
fontFamily: 'KaTeX_Math',
@@ -681,7 +681,7 @@ class ContentExample {
681681
]),
682682
MathBlockNode(texSource: 'a', nodes: [
683683
KatexNode(styles: KatexSpanStyles(), text: null, nodes: [
684-
KatexNode(styles: KatexSpanStyles(),text: null, nodes: []),
684+
KatexNode(styles: KatexSpanStyles(heightEm: 0.4306),text: null, nodes: []),
685685
KatexNode(
686686
styles: KatexSpanStyles(
687687
fontFamily: 'KaTeX_Math',
@@ -741,7 +741,7 @@ class ContentExample {
741741
text: null,
742742
nodes: [
743743
KatexNode(
744-
styles: KatexSpanStyles(),
744+
styles: KatexSpanStyles(heightEm: 1.7278),
745745
text: null,
746746
nodes: []),
747747
KatexNode(
@@ -772,7 +772,7 @@ class ContentExample {
772772
text: null,
773773
nodes: [
774774
KatexNode(
775-
styles: KatexSpanStyles(),
775+
styles: KatexSpanStyles(heightEm: 1.7278),
776776
text: null,
777777
nodes: []),
778778
KatexNode(
@@ -877,7 +877,9 @@ class ContentExample {
877877
text: null,
878878
nodes: [
879879
KatexNode(
880-
styles: KatexSpanStyles(),
880+
styles: KatexSpanStyles(
881+
heightEm: 3.0,
882+
verticalAlignEm: -1.25),
881883
text: null,
882884
nodes: []),
883885
KatexNode(

0 commit comments

Comments
 (0)