fix(code-viewer): get rid of trailing lines (#188)

Author: P0lip

setupTests.ts

@@ -5,3 +5,14 @@ Enzyme.configure({ adapter: new Adapter() });
 jest.mock('lodash');
 jest.mock('lodash/debounce');
 jest.mock('react-window');
+
+window.IntersectionObserver = class implements IntersectionObserver {
+  readonly root!: Element | null;
+  readonly rootMargin!: string;
+  readonly thresholds!: ReadonlyArray<number>;
+
+  public readonly observe = jest.fn();
+  public readonly unobserve = jest.fn();
+  public readonly disconnect = jest.fn();
+  public readonly takeRecords = jest.fn();
+};

src/CodeViewer/__tests__/Viewer.spec.tsx

@@ -14,6 +14,15 @@ jest.mock('../components/BlockCodeViewer', () => ({
   BlockCodeViewer: jest.requireActual('../components/BlockCodeViewer/BlockCodeViewer').default,
 }));
 
+jest.mock('../components/BlockCodeViewer/ObservableSet', () => ({
+  ObservableSet: class extends Set {
+    public readonly addListener = jest.fn().mockImplementation((node, listener) => {
+      listener();
+      return jest.fn();
+    });
+  },
+}));
+
 jest.mock('use-resize-observer', () => ({
   default: jest.fn(),
 }));

src/CodeViewer/components/BlockCodeViewer/BlockCodeViewer.tsx

@@ -22,7 +22,8 @@ function calculateMaxLines(height: number) {
 const BlockCodeViewer: React.FC<IBlockCodeViewerProps> = ({ className, language, value, showLineNumbers, ...rest }) => {
   const nodeRef = React.useRef<HTMLPreElement | null>(null);
   const [maxLines, setMaxLines] = React.useState<number | null>(null);
-  const observerRef = React.useRef(new ObservableSet());
+  const [observer, setObserver] = React.useState<IntersectionObserver>();
+  const viewportSet = React.useRef(new ObservableSet());
   const slicedBlocks = useSlicedBlocks(value, maxLines === null ? null : Math.max(0, maxLines - 1));
   const lineNumberCharacterCount = String(
     slicedBlocks !== null && maxLines !== null ? slicedBlocks.length * maxLines : 0,
@@ -31,67 +32,60 @@ const BlockCodeViewer: React.FC<IBlockCodeViewerProps> = ({ className, language,
   React.useLayoutEffect(() => {
     if (nodeRef.current !== null) {
       setMaxLines(calculateMaxLines(window.innerHeight)); // we have to use window here, as element may not ave any height at this time
-      highlightRelevantParts(nodeRef.current);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [nodeRef]);
 
-  useResizeObserver({
-    onResize: debounce(({ height }) => {
-      const newMaxLines = calculateMaxLines(height);
-      if (newMaxLines !== maxLines) {
-        setMaxLines(newMaxLines);
-      }
-    }, 250),
-    ref: nodeRef,
-  });
-
-  function highlightRelevantParts(target: EventTarget) {
-    if (slicedBlocks === null || maxLines === null) return;
-
-    const value =
-      (target === nodeRef.current ? nodeRef.current.scrollTop : window.pageYOffset) /
-      (SINGLE_LINE_SIZE * maxLines - SINGLE_LINE_SIZE);
-    const blockNo = Math.round(value);
-
-    // see https://github.com/stoplightio/ui-kit/pull/180 for the reasoning
-    observerRef.current.add(blockNo);
-    observerRef.current.add(Math.min(slicedBlocks.length - 1, blockNo + 1));
-    observerRef.current.add(Math.max(0, blockNo - 1));
-
-    if (value > blockNo) {
-      observerRef.current.add(Math.min(slicedBlocks.length - 1, blockNo + 2));
-    } else {
-      observerRef.current.add(Math.max(0, blockNo - 2));
-    }
-  }
-
   React.useEffect(() => {
-    observerRef.current.clear();
-  }, [maxLines]);
+    const { current: viewport } = viewportSet;
+    if (nodeRef.current === null || maxLines === null) {
+      return;
+    }
 
-  React.useEffect(() => {
-    const { current: root } = nodeRef;
+    const observer = new IntersectionObserver(
+      entries => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting) continue;
 
-    if (root === null || maxLines === null) return;
+          viewport.add(entry.target);
+          const { previousElementSibling, nextElementSibling } = entry.target;
 
-    const handler: EventListener = debounce(e => {
-      if (e.target !== null) {
-        highlightRelevantParts(e.target);
-      }
-    }, 32);
+          // highlight siblings to reduce flickering while scrolling using page up/down
+          if (previousElementSibling?.tagName === 'DIV') {
+            viewport.add(previousElementSibling);
+          }
 
-    highlightRelevantParts(root.offsetHeight > window.innerHeight ? window : root);
+          if (nextElementSibling?.tagName === 'DIV') {
+            viewport.add(nextElementSibling);
+          }
+        }
+      },
+      {
+        root: null,
+        threshold: 0,
+      },
+    );
 
-    window.addEventListener('scroll', handler, { passive: true });
-    root.addEventListener('scroll', handler, { passive: true });
+    setObserver(observer);
 
     return () => {
-      root.removeEventListener('scroll', handler);
-      window.removeEventListener('scroll', handler);
+      setObserver(void 0);
+      observer.disconnect();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [observerRef, nodeRef, maxLines]);
+  }, [nodeRef, maxLines]);
+
+  useResizeObserver({
+    onResize: debounce(
+      ({ height }) => {
+        const newMaxLines = calculateMaxLines(height);
+        if (newMaxLines !== maxLines) {
+          setMaxLines(newMaxLines);
+        }
+      },
+      250,
+      { leading: true },
+    ),
+    ref: nodeRef,
+  });
 
   return (
     <pre
@@ -101,15 +95,15 @@ const BlockCodeViewer: React.FC<IBlockCodeViewerProps> = ({ className, language,
       })}
       {...rest}
     >
-      {slicedBlocks?.map((value, index) => (
+      {slicedBlocks?.map(({ id, value }, index, blocks) => (
         <SingleCodeBlock
-          key={index}
+          key={id}
           value={value}
           language={language}
           showLineNumbers={showLineNumbers}
-          index={index}
-          lineNumber={maxLines === null ? 0 : index * maxLines + 1}
-          observer={observerRef.current}
+          lineNumber={(index > 0 ? blocks[index - 1].lineCount : 0) + 1}
+          observer={observer}
+          viewport={viewportSet.current}
         />
       ))}
     </pre>

src/CodeViewer/components/BlockCodeViewer/ObservableSet.ts

@@ -1,15 +1,15 @@
-export class ObservableSet extends Set<number> {
-  private readonly listeners = new Map<number, Function>();
+export class ObservableSet extends WeakSet<Element> {
+  private readonly listeners = new WeakMap<Element, Function>();
 
-  addListener(item: number, cb: Function) {
+  addListener(item: Element, cb: Function) {
     this.listeners.set(item, cb);
 
     return () => {
       this.listeners.delete(item);
     };
   }
 
-  add(item: number) {
+  add(item: Element) {
     if (super.has(item)) return this;
 
     super.add(item);

src/CodeViewer/components/BlockCodeViewer/SingleCodeBlock.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { RefractorNode } from 'refractor/core';
 
 import { astToReact } from '../../utils/astToReact';
 import { lineNumberify } from '../../utils/lineNumberify';
@@ -10,44 +11,69 @@ interface IBlockProps {
   language: string | undefined;
   showLineNumbers: boolean;
   lineNumber: number;
-  index: number;
-  observer: ObservableSet;
+  observer: IntersectionObserver | undefined;
+  viewport: ObservableSet;
+}
+
+const WHITESPACE_REGEX = /^[\s\n]+$/;
+
+function isWhitespace(str: string) {
+  return WHITESPACE_REGEX.test(str);
+}
+
+function isTrailingWhiteLine(node: RefractorNode) {
+  if (node.type === 'text') {
+    return isWhitespace(node.value);
+  }
+
+  if ('children' in node && node.children.length === 1 && 'value' in node.children[0]) {
+    return isWhitespace(node.children[0].value);
+  }
+
+  return false;
 }
 
 export const SingleCodeBlock: React.FC<IBlockProps> = ({
   value,
   language,
   showLineNumbers,
-  index,
   lineNumber,
   observer,
+  viewport,
 }) => {
   const [markup, setMarkup] = React.useState<React.ReactNode[]>();
   const [isVisible, setIsVisible] = React.useState(false);
+  const nodeRef = React.useRef<HTMLDivElement | null>(null);
 
   React.useEffect(() => {
-    return observer.addListener(index, () => {
+    const { current: node } = nodeRef;
+
+    if (node === null || observer === void 0) {
+      return;
+    }
+
+    observer.observe(node);
+
+    const removeListener = viewport.addListener(node, () => {
       setIsVisible(true);
+      observer.unobserve(node);
     });
-  }, [observer, index, setIsVisible]);
+
+    return () => {
+      observer.unobserve(node);
+      removeListener();
+    };
+  }, [viewport, observer, nodeRef]);
 
   React.useEffect(() => {
     if (isVisible) {
       try {
         const tree = parseCode(value, language);
         const processedTree = showLineNumbers ? lineNumberify(tree, lineNumber - 1) : tree;
 
-        if (tree.length > 0) {
-          const lastTreeNode = tree[tree.length - 1];
-          if (
-            'children' in lastTreeNode &&
-            lastTreeNode.children.length === 1 &&
-            'value' in lastTreeNode.children[0] &&
-            lastTreeNode.children[0].value === '\n'
-          ) {
-            // this is to get rid of trailing new lines
-            processedTree.pop();
-          }
+        if (showLineNumbers && tree.length > 0 && isTrailingWhiteLine(tree[tree.length - 1])) {
+          // this is to get rid of trailing new lines
+          processedTree.pop();
         }
 
         setMarkup(processedTree.map(astToReact(0)));
@@ -61,5 +87,5 @@ export const SingleCodeBlock: React.FC<IBlockProps> = ({
     return markup as any;
   }
 
-  return value;
+  return <div ref={nodeRef}>{value}</div>;
 };

src/CodeViewer/components/BlockCodeViewer/hooks/useSlicedBlocks.ts

@@ -1,22 +1,37 @@
 import * as React from 'react';
 
+type SlicedBlock = {
+  id: string;
+  value: string;
+  lineCount: number;
+};
+
+function createSlicedBlock(): SlicedBlock {
+  return {
+    id: Math.random().toString(36),
+    value: '',
+    lineCount: 0,
+  };
+}
+
 export const useSlicedBlocks = (value: string, maxLines: number | null) => {
-  return React.useMemo<string[] | null>(() => {
+  return React.useMemo<SlicedBlock[] | null>(() => {
     if (maxLines === null) {
       return null;
     }
 
-    const blocks: string[] = [''];
+    const blocks: SlicedBlock[] = [createSlicedBlock()];
 
     for (let i = 0, n = 0; i < value.length; i++) {
       const char = value[i];
-      blocks[blocks.length - 1] += char;
+      blocks[blocks.length - 1].value += char;
 
       if (char === '\n') {
         n++;
 
         if (n % maxLines === 0 && i + 1 !== value.length) {
-          blocks.push('');
+          blocks[blocks.length - 1].lineCount = n;
+          blocks.push(createSlicedBlock());
         }
       }
     }

src/styles/components/Code/_base.scss

@@ -2,7 +2,7 @@
 @import 'theme-dark';
 @import '../../blueprint/colors.scss';
 
-$line-number-char-width: 15px;
+$line-number-char-width: 10px;
 $line-padding-left: 10px;
 
 .CodeEditor,