the-grid / html-flatten Goto Github PK

View Code? Open in Web Editor NEW

9.0 17.0 3.0 167 KB

paste in random html, get something sane back

CoffeeScript 100.00%

html-flatten's Introduction

html-flatten

paste in random html, get something sane back

Examples in spec/Flatten.coffee.

html-flatten's People

Contributors

Stargazers

Watchers

Forkers

rockstox plfort frontenda

html-flatten's Issues

location block converted to interactive

moved from https://github.com/the-grid/apis/issues/530

Testing https://github.com/the-grid/ed-location widget

PUT

{
        "id": "89baa998-936f-4632-8e9c-0cbaf6bb626c",
        "type": "location",
        "html": "<iframe src=\"https://the-grid.github.io/ed-location/?latitude=19.327691&longitude=-99.82173&zoom=7&address=M%C3%A9xico%2C%20Mexico\"></iframe>",
        "metadata": {
            "geo": {
                "latitude": 19.327691,
                "longitude": -99.82173,
                "zoom": 7
            },
            "isBasedOnUrl": "https://the-grid.github.io/ed-location/?latitude=19.327691&longitude=-99.82173&zoom=7&address=M%C3%A9xico%2C%20Mexico",
            "address": "México, Mexico",
            "starred": true
        }
}

GET

{
        "id": "cce61f3d-abaa-4ea9-bb0c-4411bef97c0c",
        "item": "a6839f56-c76e-4814-a7e6-b97a26a3954b",
        "type": "interactive",
        "html": "<iframe src=\"https://the-grid.github.io/ed-location/?latitude=64.997588&longitude=-18.605467&zoom=5&address=Iceland\"></iframe>",
        "created_at": null,
        "updated_at": "2016-08-02T09:03:43.302Z",
        "metadata": {
            "source": "a6839f56-c76e-4814-a7e6-b97a26a3954b",
            "publisher": {},
            "geo": {
                "latitude": 64.997588,
                "longitude": -18.605467,
                "zoom": 5
            },
            "address": "Iceland",
            "isBasedOnUrl": "https://the-grid.github.io/ed-location/?latitude=64.997588&longitude=-18.605467&zoom=5&address=Iceland",
            "starred": true
        },
        "src": null,
        "measurementHash": "6519bbf7e920f0a098dd07cc8ec2f54c",
        "cover": {
            "unsalvageable": true
        },
        "measurementVersion": 16
}

Expected

type stays location
no cover.unsalvageable added

Release to npm as JS not coffeescript

Output interactive blocks for mid and dir gmaps

Such gmaps URLs don't have an unique specific location and some (i.e. mid) has no geo data into URL itself. For those cases we should output interactive blocks instead of location.

Examples:

(from @forresto)

don't strip br

Soft breaks in paragraphs can be semantically important. We shouldn't strip them.

`cta` block type html and metadata correspondance

We need to define how cta blocks are saved, and make sure html-flatten works as expected.

type: 'cta'
html: '<a href="url" data-role="cta" data-cta-modal="true">take an action!</a>'
metadata:
  openAsModal: true
  url: 'url'
  label: 'take an action!'

I like the link way, since the raw html from API will work.

allow <blockquote><p></p></blockquote>

Seems to strip the blockquote when the post saves.

I'll dig.

html-flatten now puts img.title and img.alt to block(.metadata).title and block(.metadata).description. These should go to different keys, to enable saving more-semantic image blocks with different figcaption, img.title, img.alt.

allow child elements in <figcaption>

html-flatten is turning
<figure><img src="http://....jpg"><figcaption><h1>Title</h1><p>Description</p></figcaption></figure>
to
<figure><img src="http://....jpg"><figcaption>TitleDescription</figcaption></figure>

Expected: html survives intact.

the-grid/ed#54

Article tags with only image should become image elements

special-case gifv

Embedly's iframe is dumb (loads a 17mb gif poster for a <1mb mp4)... We can do better and output a <video> tag with mp4 and webm sources (just change .gifv to .mp4, .webm) ... still poster image h.jpg.