@lblod/ember-rdfa-editor-lblod-plugins 8.2.0 → 8.2.1

package/CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [8.2.1] - 2023-06-28
+### Fixed
+ - GN-4200: Fixed bug with TOC scroll in GN and RB
+### Dependencies
+ - Bump `date-fns` from 2.29.3 to 2.30.0 
+
 ## [8.2.0] - 2023-06-26
 ### Added
 - Add a toggle to show the number as words in a number variable
@@ -509,7 +515,7 @@ add onclick handler to pencil icon in variable plugin
 
 # Changelog
 
-[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.2.0...HEAD
+[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.2.1...HEAD
 [8.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.0.0...v8.0.1
 [8.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v7.1.0...v8.0.0
 [7.1.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v7.0.0...v7.1.0
@@ -525,5 +531,6 @@ add onclick handler to pencil icon in variable plugin
 [3.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.2...v3.0.0
 [2.1.2]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.1...v2.1.2
 [2.1.1]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.0...v2.1.1
+[8.2.1]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.2.0...v8.2.1
 [8.2.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.1.0...v8.2.0
 [8.1.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.0.1...v8.1.0

package/README.md

@@ -427,14 +427,17 @@ In order to enable the plugin you need to add the table of contents button to th
 ```
 ### Configuring the plugin with a custom config
 
-You can configure the nodeview with the hiearchy of the nodes
+You can configure the nodeview with the hierarchy of the nodes.  
+For very custom setups, the plugin might be unable to find your scrollContainer (htmlElement providing scroll to your document). You can pass the scrollContainer element via the `scrollContainer()` function in the plugin config options instead.
 
 ```js
 {
   nodeHierarchy: [
     'title|chapter|section|subsection|article',
-  'structure_header|article_header',
-],
+    'structure_header|article_header',
+  ],
+  scrollContainer: () =>
+    document.getElementsByClassName('say-container__main')[0],
 },
 ```
 

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

@@ -88,14 +88,28 @@ export default class TableOfContentsComponent extends Component<EmberNodeArgs> {
           selection.from
         );
         const config = this.config[0];
+        let scrollContainer: HTMLElement | undefined;
         if (config.scrollContainer) {
-          const scrollContainer: HTMLElement = config.scrollContainer;
+          scrollContainer = config.scrollContainer();
+        } else {
+          scrollContainer = this.getScrollContainer();
+        }
+        if (scrollContainer) {
+          /*
+            coords.top = The distance from the top of the page to your element, this changes with the amount you
+            have scrolled so far
+            scrollContainerDistanceToTop = absolute y-coord of the start of the scroll container.
+            The difference between these two plus the alreadyScrolled distance is where we want to scroll
+          */
           const alreadyScrolled = scrollContainer.scrollTop;
-          const MAGIC_NUMBER_TOPBAR_HEIGHT: number =
-            config.scrollingPadding ?? 150;
+          const scrollContainerDistanceToTop =
+            scrollContainer.getBoundingClientRect().y;
+          const topPadding = 10; // We need top padding so the wanted position is not just on top of the page
           scrollContainer.scrollTo(
             0,
-            coords.top + alreadyScrolled - MAGIC_NUMBER_TOPBAR_HEIGHT
+            coords.top +
+              alreadyScrolled -
+              (scrollContainerDistanceToTop + topPadding)
           );
         } else {
           tr.scrollIntoView();
@@ -105,4 +119,22 @@ export default class TableOfContentsComponent extends Component<EmberNodeArgs> {
     });
     this.controller.focus();
   }
+  getScrollContainer(): HTMLElement | undefined {
+    let currentElement = this.controller.mainEditorView.dom;
+    while (currentElement.parentElement) {
+      const parent = currentElement.parentElement;
+      if (this.isScrollable(parent)) {
+        return parent;
+      }
+      currentElement = parent;
+    }
+    return;
+  }
+  isScrollable(element: HTMLElement): boolean {
+    const hasScrollableContent = element.scrollHeight > element.clientHeight;
+    const overflowYStyle = window.getComputedStyle(element).overflowY;
+    const isOverflowHidden = overflowYStyle.indexOf('hidden') !== -1;
+
+    return hasScrollableContent && !isOverflowHidden;
+  }
 }

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

@@ -1,5 +1,4 @@
 export type TableOfContentsConfig = {
   nodeHierarchy: string[];
-  scrollContainer?: HTMLElement;
-  scrollingPadding?: number;
+  scrollContainer?: () => HTMLElement;
 }[];

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

@@ -18,5 +18,7 @@ export default class TableOfContentsComponent extends Component<EmberNodeArgs> {
         pos: number;
     }): OutlineEntry[];
     moveToPosition(pos: number): void;
+    getScrollContainer(): HTMLElement | undefined;
+    isScrollable(element: HTMLElement): boolean;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "8.2.0",
+  "version": "8.2.1",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",
@@ -42,7 +42,7 @@
     "@types/rdfjs__parser-n3": "^2.0.1",
     "buffer": "^6.0.3",
     "codemirror": "^6.0.1",
-    "date-fns": "^2.29.3",
+    "date-fns": "^2.30.0",
     "ember-auto-import": "^2.4.3",
     "ember-cli-babel": "^7.26.11",
     "ember-cli-htmlbars": "^6.1.1",

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

@@ -1,5 +1,4 @@
 export type TableOfContentsConfig = {
     nodeHierarchy: string[];
-    scrollContainer?: HTMLElement;
-    scrollingPadding?: number;
+    scrollContainer?: () => HTMLElement;
 }[];