@lblod/ember-rdfa-editor-lblod-plugins 6.0.0 → 6.1.0

package/CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [6.1.0] - 2023-05-11
+
+### Added
+- make static TOC look the same in dynamic content
 ## [6.0.0] - 2023-05-05
 ### Changed
 - Use plugin configuration instead of ember environment in all the plugins
@@ -423,7 +427,8 @@ add onclick handler to pencil icon in variable plugin
 
 # Changelog
 
-[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v6.0.0...HEAD
+[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v6.1.0...HEAD
+[6.1.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v6.0.0...v6.1.0
 [6.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v5.0.1...v6.0.0
 [5.0.1]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v5.0.0...v5.0.1
 [5.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v4.0.2...v5.0.0

package/addon/components/table-of-contents-plugin/ember-nodes/table-of-contents.ts

@@ -24,6 +24,7 @@ export default class TableOfContentsComponent extends Component<EmberNodeArgs> {
       node: this.controller.mainEditorState.doc,
       pos: -1,
     });
+
     return {
       entries,
     };

package/addon/plugins/table-of-contents-plugin/nodes/table-of-contents.ts

@@ -4,6 +4,7 @@ import {
   EmberNodeConfig,
 } from '@lblod/ember-rdfa-editor/utils/ember-node';
 import { TableOfContentsConfig } from '..';
+import { createTableOfContents } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/table-of-contents-plugin/utils';
 
 export const emberNodeConfig: (
   config: TableOfContentsConfig
@@ -18,6 +19,30 @@ export const emberNodeConfig: (
       config: {
         default: config,
       },
+      entries: {
+        default: null,
+      },
+    },
+    toDOM(node) {
+      const { entries } = node.attrs;
+
+      if (!entries) {
+        return [
+          'div',
+          {
+            'data-ember-node': 'table-of-contents',
+            class: 'table-of-contents',
+          },
+          ['h3', {}, 'Table Of Contents'],
+        ];
+      }
+
+      return [
+        'div',
+        { 'data-ember-node': 'table-of-contents', class: 'table-of-contents' },
+        ['h3', {}, 'Table Of Contents'],
+        createTableOfContents(entries),
+      ];
     },
     parseDOM: [
       {

package/addon/plugins/table-of-contents-plugin/utils/index.ts

@@ -0,0 +1,101 @@
+import { DOMOutputSpec, PNode } from '@lblod/ember-rdfa-editor';
+import { NodeWithPos } from '@curvenote/prosemirror-utils';
+
+type OutlineEntry = {
+  content: string;
+  pos: number;
+  children?: OutlineEntry[];
+};
+
+type Mutable<T> = {
+  -readonly [P in keyof T]: T[P];
+};
+
+export function createTableOfContents(entries: OutlineEntry[]) {
+  const tableOfContents: Mutable<DOMOutputSpec> = [
+    'ul',
+    {
+      class: 'au-u-background-gray-100 au-u-padding-tiny table-of-contents',
+    },
+  ];
+
+  for (let i = 0; i < entries.length; i++) {
+    const item: OutlineEntry = entries[i];
+    const li: Mutable<DOMOutputSpec> = [
+      'li',
+      { class: 'au-c-list__item' },
+      [
+        'button',
+        {
+          class: 'au-c-button au-c-button--link-secondary au-c-button--wrap',
+          type: 'button',
+        },
+        item.content,
+      ],
+    ];
+
+    if (item.children?.length) {
+      const children = createTableOfContents(item.children);
+      li.push(children);
+    }
+    tableOfContents.push(li);
+  }
+  return tableOfContents;
+}
+
+type Config = { nodeHierarchy: string[] }[];
+
+export function extractOutline({
+  node,
+  pos,
+  config,
+}: {
+  node: PNode;
+  pos: number;
+  config: Config;
+}): OutlineEntry[] {
+  let result: OutlineEntry[] = [];
+  let parent: OutlineEntry | undefined;
+  for (const option of config) {
+    const { nodeHierarchy } = option;
+    if (RegExp(`^${nodeHierarchy[0]}$`).exec(node.type.name)) {
+      let i = 1;
+      let currentNode: NodeWithPos | undefined = { node, pos };
+      while (currentNode && i < nodeHierarchy.length) {
+        let newCurrentNode: NodeWithPos | undefined;
+        currentNode.node.forEach((child, offset) => {
+          if (RegExp(`^${nodeHierarchy[i]}$`).exec(child.type.name)) {
+            newCurrentNode = { pos: pos + offset, node: child };
+            return;
+          }
+        });
+        currentNode = newCurrentNode;
+        i++;
+      }
+      if (currentNode) {
+        const outlineText = currentNode.node.type.spec.outlineText as
+          | ((node: PNode) => string)
+          | undefined;
+        const content =
+          outlineText?.(currentNode.node) ?? currentNode.node.textContent;
+        parent = {
+          pos: currentNode.pos,
+          content,
+        };
+      }
+    }
+  }
+  const subResults: OutlineEntry[] = [];
+  node.forEach((child, offset) => {
+    subResults.push(
+      ...extractOutline({ node: child, pos: pos + 1 + offset, config })
+    );
+  });
+  if (parent) {
+    parent.children = subResults;
+    result = [parent];
+  } else {
+    result = subResults;
+  }
+  return result;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",

package/plugins/table-of-contents-plugin/utils/index.d.ts

@@ -0,0 +1,16 @@
+import { PNode } from '@lblod/ember-rdfa-editor';
+type OutlineEntry = {
+    content: string;
+    pos: number;
+    children?: OutlineEntry[];
+};
+export declare function createTableOfContents(entries: OutlineEntry[]): [string, ...any[]];
+type Config = {
+    nodeHierarchy: string[];
+}[];
+export declare function extractOutline({ node, pos, config, }: {
+    node: PNode;
+    pos: number;
+    config: Config;
+}): OutlineEntry[];
+export {};