I know that it is possible to include a hyperlink in an Apple News Format article using markdown by doing the following:
{
"version": "1.0",
"identifier": "sketchyTech_Demo",
"title": "My First Article",
"language": "en",
"layout": {},
"components": [
{
"role": "title",
"text": "My First Article",
"textStyle": "titleStyle"
},
{
"role": "body",
"format": "markdown",
"text": "Here's a [hyperlink](http://sketchytech.blogspot.co.uk).",
"textStyle": "bodyStyle"
}
],
"componentTextStyles": {
"titleStyle": {
"textAlignment": "center",
"fontName": "HelveticaNeue-Bold",
"fontSize": 64,
"lineHeight": 74,
"textColor": "#000"
},
"bodyStyle": {
"textAlignment": "left",
"fontName": "Georgia",
"fontSize": 18,
"lineHeight": 26,
"textColor": "#000"
}
}
}
but in Apple News Format there is also a Link Addition type, which I presume should work in a similar way to inline text styles, which are placed inside a component like this:
{
"role": "title",
"text": "My First Article",
"textStyle": "titleStyle",
"inlineTextStyles": [{
"rangeStart": 3,
"rangeLength": 5,
"textStyle": {
"textColor": "#FF00007F"
}
}
}
Apple provides sample code:
{
"type": "link",
"URL": "http://www.apple.com",
"rangeStart": 0,
"rangeLength": 20
}
But it doesn't give any instructions on where it should be placed like the other elements do. It is also rather mysterious that it has a "type" key, which is unlike other elements. Not only this but in the type description it is described as a LinkAddition
in all uppercase. I have tried various combinations, the most obvious of which I would guess to be
"linkAdditions": [{
"type": "link",
"URL": "http://www.apple.com",
"rangeStart": 0,
"rangeLength": 20
}]
added to a component in the same way as inlineTextStyles
(because a block of text could have multiple links, just as it can have multiple styles) but I can't get this or any variants that I've tried to work. Is it perhaps that News Preview isn't yet capable of rendering this?
Add it under the "additions" property instead of under "linkAdditions" inside of the component as you expected.
For example, this should work:
...
"role": "body",
"text": "Article text goes here and here",
"additions": [{
"type": "link",
"URL": "http://www.apple.com",
"rangeStart": 0,
"rangeLength": 20
}],
...
Note: if the format is markdown it will ignore the additions property.