Skip to content

Commit 49fcc93

Browse files
committed
Fix inline whitespace processing
1 parent 8b03852 commit 49fcc93

File tree

5 files changed

+288
-102
lines changed

5 files changed

+288
-102
lines changed

example/lib/main.dart

Lines changed: 95 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -28,25 +28,19 @@ class MyHomePage extends StatefulWidget {
2828
_MyHomePageState createState() => new _MyHomePageState();
2929
}
3030

31-
class _MyHomePageState extends State<MyHomePage> {
32-
@override
33-
Widget build(BuildContext context) {
34-
return new Scaffold(
35-
appBar: new AppBar(
36-
title: new Text(widget.title),
37-
),
38-
body: SingleChildScrollView(
39-
child: Directionality(
40-
textDirection: TextDirection.ltr,
41-
child: Html(
42-
data: """
43-
<h1>Header 1</h1>
44-
<h2>Header 2</h2>
45-
<h3>Header 3</h3>
46-
<h4>Header 4</h4>
47-
<h5>Header 5</h5>
48-
<h6>Header 6</h6>
49-
<img src='https://example.com/image.jpg' alt='Alt Text' />
31+
const htmlData = """
32+
<p id='whitespace'>
33+
These two lines should have an identical length:<br /><br />
34+
35+
The quick <b> brown </b><u><i> fox </i></u> jumped over the
36+
&nbsp;lazy
37+
38+
39+
40+
41+
&nbsp;dog.<br />
42+
The quick brown fox jumped over the lazy dog.
43+
</p>
5044
<table>
5145
<tr><th>One</th><th>Two</th><th>Three</th></tr>
5246
<tr><td>Data</td><td>Data</td><td>Data</td></tr>
@@ -58,69 +52,94 @@ class _MyHomePageState extends State<MyHomePage> {
5852
</table>
5953
<flutter></flutter>
6054
<svg id='svg1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
61-
<circle r="32" cx="35" cy="65" fill="#F00" opacity="0.5"/>
62-
<circle r="32" cx="65" cy="65" fill="#0F0" opacity="0.5"/>
63-
<circle r="32" cx="50" cy="35" fill="#00F" opacity="0.5"/>
55+
<circle r="32" cx="35" cy="65" fill="#F00" opacity="0.5"/>
56+
<circle r="32" cx="65" cy="65" fill="#0F0" opacity="0.5"/>
57+
<circle r="32" cx="50" cy="35" fill="#00F" opacity="0.5"/>
6458
</svg>
65-
<br />
66-
<a href='https://flutter.dev'>Flutter Website</a><br />
67-
<audio controls>
68-
<source src='https://www.w3schools.com/tags/horse.mp3'>
69-
</audio>
7059
<ol>
71-
<li>This</li>
72-
<li><p>is</p></li>
73-
<li>an</li>
74-
<li>
75-
ordered
76-
<ul>
77-
<li>With<br /><br />...</li>
78-
<li>a</li>
79-
<li>nested</li>
80-
<li>unordered</li>
81-
<li>list</li>
82-
</ul>
83-
</li>
84-
<li>list! Lorem ipsum dolor sit <b>amet cale aaihg aie a gama eia aai aia ia af a</b></li>
85-
<li><h2>Header 2</h2></li>
60+
<li>This</li>
61+
<li><p>is</p></li>
62+
<li>an</li>
63+
<li>
64+
ordered
65+
<ul>
66+
<li>With<br /><br />...</li>
67+
<li>a</li>
68+
<li>nested</li>
69+
<li>unordered</li>
70+
<ol>
71+
<li>With a nested</li>
72+
<li>ordered list.</li>
73+
</ol>
74+
<li>list</li>
75+
</ul>
76+
</li>
77+
<li>list! Lorem ipsum dolor sit <b>amet cale aaihg aie a gama eia aai aia ia af a</b></li>
78+
<li><h2>Header 2</h2></li>
79+
<h2><li>Header 2</li></h2>
8680
</ol>
87-
<hr />
88-
<video controls>
89-
<source src='https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4'>
90-
</video>
91-
<iframe src='https://matthewwhitaker.me'></iframe>
92-
""",
93-
//Optional parameters:
94-
style: {
95-
"html": Style(
96-
backgroundColor: Colors.black,
97-
color: Colors.white,
98-
),
99-
"a": Style(
100-
color: Colors.red,
101-
),
102-
"li": Style(
81+
""";
82+
83+
class _MyHomePageState extends State<MyHomePage> {
84+
@override
85+
Widget build(BuildContext context) {
86+
return new Scaffold(
87+
body: SafeArea(
88+
child: Row(
89+
children: <Widget>[
90+
Expanded(
91+
child: SingleChildScrollView(
92+
child: Html(
93+
data: htmlData,
94+
//Optional parameters:
95+
style: {
96+
"html": Style(
97+
backgroundColor: Colors.black,
98+
color: Colors.white,
99+
),
100+
"a": Style(
101+
color: Colors.red,
102+
),
103+
"li": Style(
103104
// backgroundColor: Colors.red,
104-
fontSize: 20,
105+
// fontSize: 20,
105106
// margin: const EdgeInsets.only(top: 32),
107+
),
108+
"h1, h3, h5": Style(
109+
// backgroundColor: Colors.deepPurple,
110+
// alignment: Alignment.center,
111+
),
112+
"#whitespace": Style(
113+
backgroundColor: Colors.purple,
114+
),
115+
},
116+
customRender: {
117+
"flutter": (RenderContext context, Widget child, attributes) {
118+
return FlutterLogo(
119+
style: (attributes['horizontal'] != null)? FlutterLogoStyle.horizontal: FlutterLogoStyle.markOnly,
120+
textColor: context.style.color,
121+
size: context.style.fontSize * 5,
122+
);
123+
}
124+
},
125+
onLinkTap: (url) {
126+
print("Opening $url...");
127+
},
128+
onImageTap: (src) {
129+
print(src);
130+
},
131+
),
106132
),
107-
},
108-
customRender: {
109-
"flutter": (RenderContext context, Widget child, attributes) {
110-
return FlutterLogo(
111-
style: (attributes['horizontal'] != null)? FlutterLogoStyle.horizontal: FlutterLogoStyle.markOnly,
112-
textColor: context.style.color,
113-
size: context.style.fontSize * 5,
114-
);
115-
}
116-
},
117-
onLinkTap: (url) {
118-
print("Opening $url...");
119-
},
120-
onImageTap: (src) {
121-
print(src);
122-
},
123-
),
133+
),
134+
Expanded(
135+
child: SingleChildScrollView(
136+
child: Text(
137+
HtmlParser.cleanTree(HtmlParser.applyCSS(HtmlParser.lexDomTree(HtmlParser.parseHTML(htmlData), [], []), null)).toString(),
138+
style: TextStyle(fontFamily: 'monospace'),
139+
),
140+
),
141+
)
142+
],
124143
),
125144
),
126145
);

0 commit comments

Comments
 (0)