Comments (6)
Hey! This is a feature. The actual behavior is the expected behavior. text
notes should not contain “character references” but the actual characters
from hast-util-to-html.
Any suggestions on how I can avoid this behaviour.
I was converting an svg to hast, doing some processing and then turning it back to an svg with your library. The text nodes are already html encoded, I just want to preserve that and. The extra encoding step mangles them.
from hast-util-to-html.
There should not be an extra encoding step. I need to see your code if I’m going to be able to help you.
from hast-util-to-html.
Well here is an example in node
import { parse } from 'svg-parser';
import { toHtml } from 'hast-util-to-html';
let svg = '<text x="243" y="326" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">-
</text>'
let hast = parse(svg)
console.log(svg)
console.log(JSON.stringify(hast, null, 4))
console.log(toHtml(hast, {space: 'svg', allowDangerousCharacters: true, allowDangerousHtml: true}))
npm install esm svg-parser hast-util-to-html
node -r esm demo.js
This gives the output
<text x="243" y="326" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">-
</text>
{
"type": "root",
"children": [
{
"type": "element",
"tagName": "text",
"properties": {
"x": 243,
"y": 326,
"fill": "#000000",
"font-family": "Helvetica",
"font-size": "12px",
"text-anchor": "middle"
},
"children": [
{
"type": "text",
"value": "-
"
}
]
}
]
}
<text x="243" y="326" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">-&#xa;</text>
That text node is taken out of a much larger and compliant svg file, but this is enought to demonstrate the problem.
from hast-util-to-html.
svg-parser
is unfortunately not compliant. It says it produces hast but it doesn‘t. This is a bug there.
rehype-parse
can mostly parse SVG well (though it is an HTML parser, so is lenient with its input)
xast-util-from-xml
is an actual XML parser (SVG is typically in XML format) that produces an XML specific AST: https://github.com/syntax-tree/xast-util-from-xml.
from hast-util-to-html.
BTW it’s not recommended to use such character references in XML. If you have any control over the input, I’d recommend to change it to the actual character (a line ending right?)
from hast-util-to-html.
Related Issues (20)
- Better SVG minification HOT 1
- allowDangerousCharacters is still encoding '&' when its set to true HOT 3
- Head elements are not wrapped in a Head tag HOT 3
- Head elements are not wrapped in a Head tag HOT 7
- Support minifying comments further
- Do not use `Omit` type HOT 9
- Prevent kebab case datatype? HOT 7
- Circular dependencies breaks rollup and vite builds HOT 4
- failed to compile ts code using hast-util-to-html HOT 5
- Add support to format the HTML in a tidy fashion HOT 9
- `list-style-type` is stringified incorrectly HOT 1
- Force self-closing tags to be manually closed tags HOT 8
- Add missing "type": "module" to package.json for Vite resolution HOT 3
- missing whitespace in root node HOT 2
- re: missing whitespace in root node HOT 5
- Request more control over escaping HOT 6
- Reduce dependencies size HOT 3
- How do I allow camel cased properties? HOT 4
- Do not output unneeded entities in `<script>` or `<style>` HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hast-util-to-html.