@gouvfr/dsfr-roller 1.0.0

package/src/node/generic/code-node.js

@@ -0,0 +1,37 @@
+import { Node } from '../node.js';
+import { convertHTMLEntities } from '@gouvfr/dsfr-forge';
+
+class CodeNode extends Node {
+  constructor (data) {
+    super(data);
+    this._value = data.value;
+    this._lang = data.lang;
+    this._meta = data.meta;
+  }
+
+  get value () {
+    return this._value;
+  }
+
+  get lang () {
+    return this._lang;
+  }
+
+  get meta () {
+    return this._meta;
+  }
+
+  async render () {
+    if (this.lang) this.attributes.addClass(`language-${this.lang}`);
+    return `
+      <div class="code-snippet">
+        <pre><code${this.renderAttributes()}>${convertHTMLEntities(this.value)}</code></pre>
+        <button type="button" class="code-snippet--copy fr-btn fr-btn--sm fr-btn--tertiary" data-label-copied="${this.data?.fragments?.button?.copied}">${this.data?.fragments?.button?.copy}</button>
+      </div>
+    `;
+  }
+}
+
+CodeNode.TYPE = 'code';
+
+export { CodeNode };

package/src/node/generic/definition-node.js

@@ -0,0 +1,13 @@
+import { Node } from '../node.js';
+import { log } from '@gouvfr/dsfr-forge';
+
+class DefinitionNode extends Node {
+  async render() {
+    log.warn(`Markdown node type 'definition' isn't yet supported`);
+    return '';
+  }
+}
+
+DefinitionNode.TYPE = 'definition';
+
+export { DefinitionNode };

package/src/node/generic/emphasis-node.js

@@ -0,0 +1,11 @@
+import { Node } from '../node.js';
+
+class EmphasisNode extends Node {
+  constructor (data) {
+    super(data, 'i');
+  }
+}
+
+EmphasisNode.TYPE = 'emphasis';
+
+export { EmphasisNode };

package/src/node/generic/heading-node.js

@@ -0,0 +1,56 @@
+import { Node } from '../node.js';
+import { log } from '@gouvfr/dsfr-forge';
+
+class HeadingNode extends Node {
+  constructor (data) {
+    super(data, `h${data.depth}`, false, true);
+    this._depth = data.depth;
+  }
+
+  adjust (map) {
+    if (map.has(this.data.depth)) {
+      this._depth = map.get(this.data.depth);
+      this.tagName = `h${this._depth}`;
+
+      switch (true) {
+        case this._data?.data?.isSemantic:
+        case this.attributes.classes.some(className => className.match(/^fr-h\d$/) || className.match(/__title$/)):
+          break;
+
+        default:
+          this.attributes.addClass(`fr-h${this.data.depth}`);
+      }
+    }
+  }
+}
+
+HeadingNode.TYPE = 'heading';
+
+const adjustHeading = (nodes) => {
+  let isPromoted = false;
+  const headings = nodes.map(node => node.data.depth);
+
+  if (headings.indexOf(1) === -1) {
+    if (headings.filter(heading => heading === 2).length === 1) {
+      log.warn('No h1 found in the document, promoting h2 to h1');
+      isPromoted = true;
+    } else {
+      log.warn('No h1 found in the document');
+    }
+  } else if (!headings.filter(heading => heading === 1).length > 1) {
+    log.warn('Several instance of h1 found in the document');
+  }
+
+  const depths = headings.filter((heading, index, self) => self.indexOf(heading) === index && (heading > 1 || isPromoted) ).sort((a, b) => a - b);
+
+  const mapped = depths.map((depth, index) => [depth, index + (isPromoted ? 1 : 2)]).filter(([depth, index]) => depth !== index);
+  const map = new Map(mapped);
+
+  if (map.size === 0) return;
+
+  log.warn(`Adjusting heading levels : ${Array.from(map).map(([from, to]) => `h${from} -> h${to}`).join(', ')}`);
+
+  nodes.forEach(node => node.adjust(map));
+};
+
+export { HeadingNode, adjustHeading};

package/src/node/generic/html-node.js

@@ -0,0 +1,11 @@
+import { Node } from '../node.js';
+
+class HtmlNode extends Node {
+  async render() {
+    return /^<\//.test(this.data.value) ? this.data.value : this.data.value.replace(/>$/, `${this.renderAttributes()}>`);
+  }
+}
+
+HtmlNode.TYPE = 'html';
+
+export { HtmlNode };

package/src/node/generic/image-node.js

@@ -0,0 +1,14 @@
+import { Node } from '../node.js';
+
+class ImageNode extends Node {
+  constructor(data) {
+    super(data, 'img', true);
+    this.attributes.setAttribute('src', this.data.url);
+    if (this.data.alt) this.attributes.setAttribute('alt', this.data.alt);
+    if (this.data.title) this.attributes.setAttribute('title', this.data.title);
+  }
+}
+
+ImageNode.TYPE = 'image';
+
+export { ImageNode };

package/src/node/generic/image-reference-node.js

@@ -0,0 +1,14 @@
+import { Node } from '../node.js';
+import { log } from '@gouvfr/dsfr-forge';
+
+class ImageReferenceNode extends Node {
+  async render() {
+    log.warn(`Markdown node type 'imageReference' isn't yet supported`);
+    return '';
+  }
+
+}
+
+ImageReferenceNode.TYPE = 'imageReference';
+
+export { ImageReferenceNode };

package/src/node/generic/inline-code-node.js

@@ -0,0 +1,21 @@
+import { Node } from '../node.js';
+import { convertHTMLEntities } from '@gouvfr/dsfr-forge';
+
+class InlineCodeNode extends Node {
+  constructor (data) {
+    super(data);
+    this._value = data.value;
+  }
+
+  get value () {
+    return this._value
+  }
+
+  async render () {
+    return `<code class="dsfr-doc-inline-code">${convertHTMLEntities(this.value)}</code>`;
+  }
+}
+
+InlineCodeNode.TYPE = 'inlineCode';
+
+export { InlineCodeNode };

package/src/node/generic/link-node.js

@@ -0,0 +1,26 @@
+import { Node } from '../node.js';
+import { Action } from '../../component/components/action.js';
+
+class LinkNode extends Node {
+  constructor (data) {
+    super(data);
+    const blank = /^(http|www)/.test(data.url);
+    const actionData = {
+      markup: 'a',
+      href: data.url,
+      blank
+    };
+    if (blank) actionData.attributes = { title: `${this.text} - ${data.fragments.blank}` };
+    this._action = new Action(actionData);
+  }
+  async render () {
+    return this._action.render({
+      label: await super.render(),
+      attributes: this.getAttributes()
+    });
+  }
+}
+
+LinkNode.TYPE = 'link';
+
+export { LinkNode };

package/src/node/generic/link-reference-node.js

@@ -0,0 +1,14 @@
+import { Node } from '../node.js';
+import { log } from '@gouvfr/dsfr-forge';
+
+class LinkReferenceNode extends Node {
+  async render() {
+    log.warn(`Markdown node type 'linkReference' isn't yet supported`);
+    return '';
+  }
+
+}
+
+LinkReferenceNode.TYPE = 'linkReference';
+
+export { LinkReferenceNode };

package/src/node/generic/list-item-node.js

@@ -0,0 +1,11 @@
+import { Node } from '../node.js';
+
+class ListItemNode extends Node {
+  constructor (data) {
+    super(data, 'li');
+  }
+}
+
+ListItemNode.TYPE = 'listItem';
+
+export { ListItemNode };

package/src/node/generic/list-node.js

@@ -0,0 +1,15 @@
+import { Node } from '../node.js';
+
+class ListNode extends Node {
+
+  constructor (data) {
+    super(data, data.ordered === true ? 'ol' : 'ul');
+    if (data.ordered === true && this.data.start !== undefined && !isNaN(this.data.start)) {
+      this.attributes.setAttribute('start', this.data.start);
+    }
+  }
+}
+
+ListNode.TYPE = 'list';
+
+export { ListNode };

package/src/node/generic/paragraph-node.js

@@ -0,0 +1,11 @@
+import { Node } from '../node.js';
+
+class ParagraphNode extends Node {
+  constructor (data) {
+    super(data, 'p');
+  }
+}
+
+ParagraphNode.TYPE = 'paragraph';
+
+export { ParagraphNode };

package/src/node/generic/strong-node.js

@@ -0,0 +1,11 @@
+import { Node } from '../node.js';
+
+class StrongNode extends Node {
+  constructor(data) {
+    super(data, 'b');
+  }
+}
+
+StrongNode.TYPE = 'strong';
+
+export { StrongNode };

package/src/node/generic/text-node.js

@@ -0,0 +1,15 @@
+import { Node } from '../node.js';
+
+class TextNode extends Node {
+  async render () {
+    return this.data.value;
+  }
+
+  get text () {
+    return this.data.value;
+  }
+}
+
+TextNode.TYPE = 'text';
+
+export { TextNode };

package/src/node/generic/thematic-break-node.js

@@ -0,0 +1,12 @@
+import { Node } from '../node.js';
+import { log } from '@gouvfr/dsfr-forge';
+
+class ThematicBreakNode extends Node {
+  constructor(data) {
+    super(data, 'hr', true);
+  }
+}
+
+ThematicBreakNode.TYPE = 'thematicBreak';
+
+export { ThematicBreakNode };

package/src/node/gfm/table-body-node.js

@@ -0,0 +1,11 @@
+import { Node } from '../node.js';
+
+class TableBodyNode extends Node {
+  constructor (data) {
+    super(data, `tbody`);
+  }
+}
+
+TableBodyNode.TYPE = 'tableBody';
+
+export { TableBodyNode };

package/src/node/gfm/table-cell-node.js

@@ -0,0 +1,17 @@
+import { Node } from '../node.js';
+
+const ALIGN = new Map([
+  ['center', 'fr-cell--center'],
+  ['right', 'fr-cell--right']
+]);
+
+class TableCellNode extends Node {
+  constructor (data, tagName = 'td') {
+    super(data, tagName);
+    if (ALIGN.has(this.data?.align)) this.attributes.addClass(ALIGN.get(this.data.align));
+  }
+}
+
+TableCellNode.TYPE = 'tableCell';
+
+export { TableCellNode };

package/src/node/gfm/table-head-node.js

@@ -0,0 +1,11 @@
+import { Node } from '../node.js';
+
+class TableHeadNode extends Node {
+  constructor (data) {
+    super(data, `thead`);
+  }
+}
+
+TableHeadNode.TYPE = 'tableHead';
+
+export { TableHeadNode };

package/src/node/gfm/table-header-node.js

@@ -0,0 +1,16 @@
+import { TableCellNode } from './table-cell-node.js';
+
+class TableHeaderNode extends TableCellNode {
+  constructor (data) {
+    super(data, 'th');
+    if (this.data.scope) {
+      this.attributes.setAttribute('scope', this.data.scope);
+      if (this.data.scope === 'row') this.attributes.addClass('fr-cell--fixed');
+    }
+    if (this.data.isColumnHeader) this.attributes.setAttribute('role', 'columnheader');
+  }
+}
+
+TableHeaderNode.TYPE = 'tableHeader';
+
+export { TableHeaderNode };

package/src/node/gfm/table-node.js

@@ -0,0 +1,91 @@
+import { Node } from '../node.js';
+import { log } from '@gouvfr/dsfr-forge';
+
+class TableNode extends Node {
+  constructor (data) {
+    super(data);
+    this._caption = data.caption;
+    this.attributes.addClass('fr-table');
+  }
+
+  structure (data) {
+    if (!data.children.length) return data;
+
+    const thead = data.children[0];
+    const tbody = data.children.slice(1);
+
+    if (!thead) {
+      log.warn('TableNode: missing thead');
+      return data;
+    }
+
+    if (!tbody.length) {
+      log.warn('TableNode: missing tbody');
+      return data;
+    }
+
+    const isEmptyThead = thead.children.every(child => { return child.type === 'tableCell' && !child.children });
+    const hasColThead = tbody.every(child => { return child.children?.[0]?.children?.some(child => child.type === 'strong') });
+    const children = [];
+
+    if (isEmptyThead) {
+      log.warn('TableNode: thead is empty and is removed');
+    } else {
+      thead.children = thead.children.map((child, index) => ({
+        ...child,
+        type: 'tableHeader',
+        scope: 'col',
+        isColumnHeader: hasColThead && index === 0,
+      }));
+      children.push({
+        type: 'tableHead',
+        children: [thead]
+      });
+    }
+
+    if (hasColThead) {
+      tbody.forEach((row) => {
+        row.children[0] = {
+          ...row.children[0],
+          type: 'tableHeader',
+          scope: 'row'
+        }
+      });
+    }
+
+    children.push({
+      type: 'tableBody',
+      children: tbody
+    });
+
+    data.children = children;
+
+    return data;
+  }
+
+  async render () {
+    const caption = this._caption ? `<caption>${this._caption}</caption>` : '';
+    return `
+      <div ${this.renderAttributes()}>
+        <div class="fr-table__wrapper">
+          <div class="fr-table__container">
+            <div class="fr-table__content">
+              <table>
+                ${caption}
+                ${await this.renderChildren()}
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  get caption () {
+    return this._caption;
+  }
+}
+
+TableNode.TYPE = 'table';
+
+export { TableNode };

package/src/node/gfm/table-row-node.js

@@ -0,0 +1,11 @@
+import { Node } from '../node.js';
+
+class TableRowNode extends Node {
+  constructor (data, tagName = 'tr') {
+    super(data, tagName);
+  }
+}
+
+TableRowNode.TYPE = 'tableRow';
+
+export { TableRowNode };

package/src/node/node-factory.js

@@ -0,0 +1,128 @@
+import { Node } from './node.js';
+import { BlockquoteNode } from './generic/blockquote-node.js';
+import { BreakNode } from './generic/break-node.js';
+import { CodeNode } from './generic/code-node.js';
+import { DefinitionNode } from './generic/definition-node.js';
+import { EmphasisNode } from './generic/emphasis-node.js';
+import { HeadingNode } from './generic/heading-node.js';
+import { HtmlNode } from './generic/html-node.js';
+import { ImageNode } from './generic/image-node.js';
+import { ImageReferenceNode } from './generic/image-reference-node.js';
+import { InlineCodeNode } from './generic/inline-code-node.js';
+import { LinkNode } from './generic/link-node.js';
+import { LinkReferenceNode } from './generic/link-reference-node.js';
+import { ListItemNode } from './generic/list-item-node.js';
+import { ListNode } from './generic/list-node.js';
+import { ParagraphNode } from './generic/paragraph-node.js';
+import { StrongNode } from './generic/strong-node.js';
+import { TextNode } from './generic/text-node.js';
+import { ThematicBreakNode } from './generic/thematic-break-node.js';
+import { TableNode } from './gfm/table-node.js';
+import { TableHeadNode } from './gfm/table-head-node.js';
+import { TableBodyNode } from './gfm/table-body-node.js';
+import { TableRowNode } from './gfm/table-row-node.js';
+import { TableHeaderNode } from './gfm/table-header-node.js';
+import { TableCellNode } from './gfm/table-cell-node.js';
+import { NodeRoot } from './node-root.js';
+import { TabNavigationContainerDirective } from './directive/doc/tab-navigation-container-directive.js';
+import { StorybookLeafDirective } from './directive/doc/storybook-leaf-directive.js';
+import { FigmaLeafDirective } from './directive/doc/figma-leaf-directive.js';
+import { AnatomyContainerDirective } from './directive/doc/anatomy-container-directive.js';
+import { PinLeafDirective } from './directive/doc/pin-leaf-directive.js';
+import { AccordionContainerDirective } from './directive/doc/accordion-container-directive.js';
+import { AccordionsGroupContainerDirective } from './directive/doc/accordions-group-container-directive.js';
+import { GuidelineContainerDirective } from './directive/doc/guideline-container-directive.js';
+import { GuidelinesContainerDirective } from './directive/doc/guidelines-container-directive.js';
+import { TableContainerDirective } from './directive/doc/table-container-directive.js';
+import { TabContainerDirective } from './directive/doc/tab-container-directive.js'
+import { TabsContainerDirective } from './directive/doc/tabs-container-directive.js'
+import { ImageTextDirective } from './directive/doc/image-text-directive.js'
+import { ChangelogLeafDirective } from './directive/doc/changelog-leaf-directive.js'
+import { ButtonLeafDirective } from './directive/doc/button-leaf-directive.js'
+
+
+const NODES = [
+  NodeRoot,
+  BlockquoteNode,
+  BreakNode,
+  CodeNode,
+  DefinitionNode,
+  EmphasisNode,
+  HeadingNode,
+  HtmlNode,
+  ImageNode,
+  ImageReferenceNode,
+  InlineCodeNode,
+  LinkNode,
+  LinkReferenceNode,
+  ListItemNode,
+  ListNode,
+  ParagraphNode,
+  StrongNode,
+  TextNode,
+  ThematicBreakNode,
+  TableNode,
+  TableHeadNode,
+  TableBodyNode,
+  TableHeaderNode,
+  TableRowNode,
+  TableCellNode
+];
+
+const nodesMap = new Map(NODES.map(Node => [Node.TYPE, Node]));
+
+const DIRECTIVE_CONTAINERS = [
+  AccordionContainerDirective,
+  AccordionsGroupContainerDirective,
+  GuidelineContainerDirective,
+  GuidelinesContainerDirective,
+  TabNavigationContainerDirective,
+  TableContainerDirective,
+  TabContainerDirective,
+  TabsContainerDirective,
+  AnatomyContainerDirective
+];
+const DIRECTIVE_LEAFS = [
+  ButtonLeafDirective,
+  StorybookLeafDirective,
+  FigmaLeafDirective,
+  ChangelogLeafDirective,
+  PinLeafDirective
+];
+const DIRECTIVE_TEXTS = [
+  ImageTextDirective
+];
+const containersMap = new Map(DIRECTIVE_CONTAINERS.map(Container => [Container.NAME, Container]));
+const leafsMap = new Map(DIRECTIVE_LEAFS.map(Leaf => [Leaf.NAME, Leaf]));
+const textsMap = new Map(DIRECTIVE_TEXTS.map(Text => [Text.NAME, Text]));
+
+class NodeFactory {
+  populate (fragments) {
+    this._fragments = fragments;
+  }
+
+  decorate (data) {
+    data.fragments = this._fragments;
+  }
+
+  getNodeConstructor (data) {
+    switch (data.type) {
+      case 'containerDirective':
+        return containersMap.get(data.name);
+      case 'leafDirective':
+        return leafsMap.get(data.name);
+      case 'textDirective':
+        return textsMap.get(data.name);
+    }
+    return nodesMap.get(data.type);
+  }
+
+  create (data) {
+    const NodeConstructor = this.getNodeConstructor(data) ?? Node;
+    this.decorate(data);
+    const node = new NodeConstructor(data);
+    return node;
+  }
+}
+
+export const nodeFactory = new NodeFactory();

package/src/node/node-root.js

@@ -0,0 +1,25 @@
+import { Node } from './node.js';
+import { adjustHeading } from './generic/heading-node.js';
+
+const gather = (node) => {
+  const nodes = node.children.map(child => gather(child)).flat();
+  nodes.push(node);
+  return nodes;
+}
+
+class NodeRoot extends Node {
+  constructor (data) {
+    super(data);
+    this._nodes = gather(this);
+  }
+
+  async render () {
+    adjustHeading(this._nodes.filter(node => node.type === 'heading'));
+
+    return await super.render();
+  }
+}
+
+NodeRoot.TYPE = 'root';
+
+export { NodeRoot };