Skip to content
This repository has been archived by the owner on Feb 28, 2022. It is now read-only.

fix(sections): show sections in DOM #301

Closed
wants to merge 5 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src/html/split-sections.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const _ = require('lodash/fp');

function section(children) {
return {
type: 'root',
type: 'section',
children,
};
}
Expand All @@ -40,7 +40,11 @@ function split({ content: { mdast = { children: [] } } }) {
return section(between(mdast, index, end));
});

return { content: { sections } };
// FIXME: dirty hack until we disable pipeline merging
for (let i = sections.length; i < mdast.children.length; i += 1) {
sections.push({ type: 'null' });
}
return { content: { sections, mdast: { children: sections } } };
}

module.exports = split;
4 changes: 3 additions & 1 deletion src/schemas/mdast.schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,9 @@
"imageReference",
"footnote",
"footnoteReference",
"embed"
"embed",
"section",
"null"
],
"meta:enum": {
"root": "The root node, representing a document or section",
Expand Down
2 changes: 1 addition & 1 deletion src/schemas/section.schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
}
},
"type": {
"const": "root",
"enum": ["root", "section", "null"],
"description": "The MDAST node type. Each section can be treated as a standalone document."
},
"position": {
Expand Down
3 changes: 3 additions & 0 deletions src/utils/mdast-to-vdom.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const HeadingHandler = require('./heading-handler');
const image = require('./image-handler');
const embed = require('./embed-handler');
const link = require('./link-handler');
const section = require('./section-handler');
const types = require('../schemas/mdast.schema.json').properties.type.enum;

/**
Expand Down Expand Up @@ -67,6 +68,8 @@ class VDOMTransformer {
this.match('image', image(options));
this.match('embed', embed(options));
this.match('link', link(options));
this.match('section', section(options));
this.match('null', () => {});
}

/**
Expand Down
22 changes: 22 additions & 0 deletions src/utils/section-handler.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/*
* Copyright 2019 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
function section() {
return function handler(h, node, _, handlechild) {
const sectionnode = h(node, 'div', { class: 'section' });
Copy link
Contributor

@ramboz ramboz May 10, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe sectioNode?

Also, should we prefix the class to avoid potential collisions with other frameworks or the customer classes?

What about following something like https://suitcss.github.io/ and use hlx-Section or hlx-section?

if (node.children && node.children.length) {
node.children.forEach(childnode => handlechild(h, childnode, node, sectionnode));
}
return sectionnode;
};
}

module.exports = section;
18 changes: 18 additions & 0 deletions test/testHTMLFromMarkdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,24 @@ describe('Testing Markdown conversion', () => {
`);
});

it('HTML sections', async () => {
await assertMd(`
# First Section

---

# Second Section

---

# Third Section

Hello World [link](λ)
`, `
<body><section><h1 id="first-section">First Section</h1></section><section><h1 id="second-section">Second Section</h1></section><section><h1 id="third-section">Third Section</h1><p>Hello World <a href="%CE%BB">link</a></p></section></body>
`);
});

it('GFM', async () => {
await assertMd(`
Hello World.
Expand Down