fix(HTML): Add data-itemscope=root to top level node

The current use for this is to scope CSS variables in Thema to the lop-level Stencila node.
stencila · Feb 19, 2020 · 2859e32 · 2859e32
1 parent 2b7a011
commit 2859e32
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 7 deletions.
diff --git a/src/codecs/html/__file_snapshots__/article-math.html b/src/codecs/html/__file_snapshots__/article-math.html
@@ -1,4 +1,4 @@
-<article itemscope="" itemtype="http://schema.org/Article">
+<article itemscope="" itemtype="http://schema.org/Article" data-itemscope="root">
   <div itemscope="" itemtype="http://schema.org/Organization" itemprop="publisher">
     <meta itemprop="name" content="Unknown">
     <div itemscope="" itemtype="http://schema.org/ImageObject" itemprop="logo">

diff --git a/src/codecs/html/__file_snapshots__/elife-50356.html b/src/codecs/html/__file_snapshots__/elife-50356.html
@@ -1,4 +1,4 @@
-<article itemscope="" itemtype="http://schema.org/Article">
+<article itemscope="" itemtype="http://schema.org/Article" data-itemscope="root">
   <div itemscope="" itemtype="http://schema.org/Organization" itemprop="publisher">
     <meta itemprop="name" content="Unknown">
     <div itemscope="" itemtype="http://schema.org/ImageObject" itemprop="logo">

diff --git a/src/codecs/html/__file_snapshots__/kitchen-sink.html b/src/codecs/html/__file_snapshots__/kitchen-sink.html
@@ -1,4 +1,4 @@
-<article itemscope="" itemtype="http://schema.org/Article">
+<article itemscope="" itemtype="http://schema.org/Article" data-itemscope="root">
   <div itemscope="" itemtype="http://schema.org/Organization" itemprop="publisher">
     <meta itemprop="name" content="Unknown">
     <div itemscope="" itemtype="http://schema.org/ImageObject" itemprop="logo">

diff --git a/src/codecs/html/index.ts b/src/codecs/html/index.ts
@@ -234,9 +234,13 @@ export class HTMLCodec extends Codec implements Codec {
   }
 
   /**
-   * Encode a `stencila.Node` to a `VFile` with HTML contents.
+   * Encode a Stencila `Node` to a `VFile` with HTML contents.
    *
-   * @param node The `stencila.Node` to encode. Will be mutated to an `Node`.
+   * The attribute `data-itemscope="root"` is added to the root node
+   * of the encoded HTML. This attribute can be used to scope CSS variables
+   * to within the top-level Stencila Node.
+   *
+   * @param node The `Node` to encode.
    * @returns A promise that resolves to a `VFile`
    */
   public readonly encode = async (
@@ -259,12 +263,13 @@ export class HTMLCodec extends Codec implements Codec {
     const nodeToEncode = isBundle
       ? await bundle(node)
       : await toFiles(node, filePath, ['data', 'file'])
-    let dom: HTMLHtmlElement = encodeNode(nodeToEncode) as HTMLHtmlElement
+
+    let dom = encodeNode(nodeToEncode) as HTMLElement
+    dom.setAttribute('data-itemscope', 'root')
 
     const mathjaxCss = await mathJaxFinish()
 
     if (isStandalone) {
-      const nodeToEncode = isBundle ? await bundle(node) : node
       const { title = 'Untitled' } = getArticleMetaData(nodeToEncode)
       dom = await generateHtmlElement(
         stringifyContent(title),