refactor: extract shared logic to active note state

app/assets/javascripts/components/AutocompleteTagInput.tsx

@@ -1,6 +1,6 @@
 import { WebApplication } from '@/ui_models/application';
 import { SNTag } from '@standardnotes/snjs';
-import { FunctionalComponent, RefObject } from 'preact';
+import { FunctionalComponent } from 'preact';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { Icon } from './Icon';
 import { Disclosure, DisclosurePanel } from '@reach/disclosure';
@@ -10,15 +10,13 @@ import { AppState } from '@/ui_models/app_state';
 type Props = {
   application: WebApplication;
   appState: AppState;
-  tagsRef: RefObject<HTMLButtonElement[]>;
 };
 
 export const AutocompleteTagInput: FunctionalComponent<Props> = ({
   application,
   appState,
-  tagsRef,
 }) => {
-  const { tags, tagsContainerMaxWidth, tagsOverflowed } = appState.activeNote;
+  const { tagElements, tags, tagsContainerMaxWidth, tagsOverflowed } = appState.activeNote;
 
   const [searchQuery, setSearchQuery] = useState('');
   const [dropdownVisible, setDropdownVisible] = useState(false);
@@ -85,13 +83,9 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
   };
 
   const reloadInputOverflowed = useCallback(() => {
-    let overflowed = false;
-    if (!tagsOverflowed && tagsRef.current && tagsRef.current.length > 0) {
-      const firstTagTop = tagsRef.current[0].offsetTop;
-      overflowed = inputRef.current.offsetTop > firstTagTop;
-    }
+    const overflowed = !tagsOverflowed && appState.activeNote.isElementOverflowed(inputRef.current);
     appState.activeNote.setInputOverflowed(overflowed);
-  }, [appState.activeNote, tagsOverflowed, tagsRef]);
+  }, [appState.activeNote, tagsOverflowed]);
 
   useEffect(() => {
     reloadInputOverflowed();
@@ -124,10 +118,9 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
             if (
               event.key === 'Backspace' &&
               searchQuery === '' &&
-              tagsRef.current &&
-              tagsRef.current.length > 1
+              tagElements.length > 0
             ) {
-              tagsRef.current[tagsRef.current.length - 1].focus();
+              tagElements[tagElements.length - 1]?.focus();
             }
           }}
         />

app/assets/javascripts/components/NoteTag.tsx

@@ -1,34 +1,34 @@
 import { Icon } from './Icon';
 import { FunctionalComponent, RefObject } from 'preact';
-import { useRef, useState } from 'preact/hooks';
+import { useCallback, useRef, useState } from 'preact/hooks';
 import { AppState } from '@/ui_models/app_state';
 import { SNTag } from '@standardnotes/snjs/dist/@types';
+import { useEffect } from 'react';
 
 type Props = {
   appState: AppState;
-  index: number;
-  tagsRef: RefObject<HTMLButtonElement[]>;
   tag: SNTag;
-  overflowed: boolean;
-  maxWidth: number | 'auto';
+  overflowButtonRef: RefObject<HTMLButtonElement>;
 };
 
-export const NoteTag: FunctionalComponent<Props> = ({
-  appState,
-  index,
-  tagsRef,
-  tag,
-  overflowed,
-  maxWidth,
-}) => {
+export const NoteTag: FunctionalComponent<Props> = ({ appState, tag, overflowButtonRef }) => {
+  const {
+    tags,
+    tagsContainerMaxWidth,
+  } = appState.activeNote;
+
+  const [overflowed, setOverflowed] = useState(false);
   const [showDeleteButton, setShowDeleteButton] = useState(false);
+
   const deleteTagRef = useRef<HTMLButtonElement>();
 
   const deleteTag = async () => {
     await appState.activeNote.removeTagFromActiveNote(tag);
+    const previousTag = appState.activeNote.getPreviousTag(tag);
 
-    if (index > 0 && tagsRef.current) {
-      tagsRef.current[index - 1].focus();
+    if (previousTag) {
+      const previousTagElement = appState.activeNote.getTagElement(previousTag);
+      previousTagElement?.focus();
     }
   };
 
@@ -42,21 +42,33 @@ export const NoteTag: FunctionalComponent<Props> = ({
   };
 
   const onBlur = (event: FocusEvent) => {
-    appState.activeNote.setTagFocused(false);
-    if ((event.relatedTarget as Node) !== deleteTagRef.current) {
+    const relatedTarget = event.relatedTarget as Node;
+    if (relatedTarget === overflowButtonRef.current) {
+      (event.target as HTMLButtonElement).focus();
+    } else if (relatedTarget !== deleteTagRef.current) {
+      appState.activeNote.setTagFocused(false);
       setShowDeleteButton(false);
     }
   };
 
+  const reloadOverflowed = useCallback(() => {
+    const overflowed = appState.activeNote.isTagOverflowed(tag);
+    setOverflowed(overflowed);
+  }, [appState.activeNote, tag]);
+
+  useEffect(() => {
+    reloadOverflowed();
+  }, [reloadOverflowed, tags, tagsContainerMaxWidth]);
+
   return (
     <button
       ref={(element) => {
-        if (element && tagsRef.current) {
-          tagsRef.current[index] = element;
+        if (element) {
+          appState.activeNote.setTagElement(tag, element);
         }
       }}
       className="sn-tag pl-1 pr-2 mr-2"
-      style={{ maxWidth }}
+      style={{ maxWidth: tagsContainerMaxWidth }}
       onClick={onTagClick}
       onKeyUp={(event) => {
         if (event.key === 'Backspace') {

app/assets/javascripts/components/NoteTagsContainer.tsx

@@ -4,7 +4,6 @@ import { toDirective, useCloseOnClickOutside } from './utils';
 import { AutocompleteTagInput } from './AutocompleteTagInput';
 import { WebApplication } from '@/ui_models/application';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
-import { SNTag } from '@standardnotes/snjs';
 import { NoteTag } from './NoteTag';
 
 type Props = {
@@ -15,7 +14,9 @@ type Props = {
 const NoteTagsContainer = observer(({ application, appState }: Props) => {
   const {
     inputOverflowed,
+    overflowCountPosition,
     overflowedTagsCount,
+    tagElements,
     tags,
     tagsContainerMaxWidth,
     tagsContainerExpanded,
@@ -23,15 +24,9 @@ const NoteTagsContainer = observer(({ application, appState }: Props) => {
   } = appState.activeNote;
 
   const [expandedContainerHeight, setExpandedContainerHeight] = useState(0);
-  const [lastVisibleTagIndex, setLastVisibleTagIndex] =
-    useState<number | null>(null);
-  const [overflowCountPosition, setOverflowCountPosition] = useState(0);
 
-  const containerRef = useRef<HTMLDivElement>();
   const tagsContainerRef = useRef<HTMLDivElement>();
-  const tagsRef = useRef<HTMLButtonElement[]>([]);
-
-  tagsRef.current = [];
+  const overflowButtonRef = useRef<HTMLButtonElement>();
 
   useCloseOnClickOutside(tagsContainerRef, (expanded: boolean) => {
     if (tagsContainerExpanded) {
@@ -39,88 +34,29 @@ const NoteTagsContainer = observer(({ application, appState }: Props) => {
     }
   });
 
-  const isTagOverflowed = useCallback(
-    (tagElement?: HTMLButtonElement): boolean | undefined => {
-      if (!tagElement) {
-        return;
-      }
-      if (tagsContainerExpanded) {
-        return false;
-      }
-      const firstTagTop = tagsRef.current[0].offsetTop;
-      return tagElement.offsetTop > firstTagTop;
-    },
-    [tagsContainerExpanded]
-  );
-
-  const reloadLastVisibleTagIndex = useCallback(() => {
-    if (tagsContainerExpanded) {
-      return tags.length - 1;
-    }
-    const firstOverflowedTagIndex = tagsRef.current.findIndex((tagElement) =>
-      isTagOverflowed(tagElement)
-    );
-    if (firstOverflowedTagIndex > -1) {
-      setLastVisibleTagIndex(firstOverflowedTagIndex - 1);
-    } else {
-      setLastVisibleTagIndex(null);
-    }
-  }, [isTagOverflowed, tags, tagsContainerExpanded]);
-
-  const reloadExpandedContainersHeight = useCallback(() => {
+  const reloadExpandedContainerHeight = useCallback(() => {
     setExpandedContainerHeight(tagsContainerRef.current.scrollHeight);
   }, []);
 
-  const reloadOverflowCount = useCallback(() => {
-    const count = tagsRef.current.filter((tagElement) =>
-      isTagOverflowed(tagElement)
-    ).length;
-    appState.activeNote.setOverflowedTagsCount(count);
-  }, [appState.activeNote, isTagOverflowed]);
-
-  const reloadOverflowCountPosition = useCallback(() => {
-    if (tagsContainerExpanded || !lastVisibleTagIndex) {
-      return;
-    }
-    if (tagsRef.current[lastVisibleTagIndex]) {
-      const {
-        offsetLeft: lastVisibleTagLeft,
-        clientWidth: lastVisibleTagWidth,
-      } = tagsRef.current[lastVisibleTagIndex];
-      setOverflowCountPosition(lastVisibleTagLeft + lastVisibleTagWidth);
-    }
-  }, [lastVisibleTagIndex, tagsContainerExpanded]);
-
-  const expandTags = () => {
-    appState.activeNote.setTagsContainerExpanded(true);
-  };
-
-  const reloadTagsContainerLayout = useCallback(() => {
+  useEffect(() => {
     appState.activeNote.reloadTagsContainerLayout();
-    reloadLastVisibleTagIndex();
-    reloadExpandedContainersHeight();
-    reloadOverflowCount();
-    reloadOverflowCountPosition();
+    reloadExpandedContainerHeight();
   }, [
     appState.activeNote,
-    reloadLastVisibleTagIndex,
-    reloadExpandedContainersHeight,
-    reloadOverflowCount,
-    reloadOverflowCountPosition,
+    reloadExpandedContainerHeight,
+    tags,
+    tagsContainerMaxWidth,
   ]);
 
-  useEffect(() => {
-    reloadTagsContainerLayout();
-  }, [reloadTagsContainerLayout, tags, tagsContainerMaxWidth]);
-
   useEffect(() => {
     let tagResizeObserver: ResizeObserver;
     if (ResizeObserver) {
       tagResizeObserver = new ResizeObserver(() => {
-        reloadTagsContainerLayout();
+        appState.activeNote.reloadTagsContainerLayout();
+        reloadExpandedContainerHeight();
       });
-      tagsRef.current.forEach((tagElement) =>
-        tagResizeObserver.observe(tagElement)
+      tagElements.forEach(
+        (tagElement) => tagElement && tagResizeObserver.observe(tagElement)
       );
     }
 
@@ -129,14 +65,13 @@ const NoteTagsContainer = observer(({ application, appState }: Props) => {
         tagResizeObserver.disconnect();
       }
     };
-  }, [reloadTagsContainerLayout]);
+  }, [appState.activeNote, reloadExpandedContainerHeight, tagElements]);
 
   return (
     <div
       className={`flex transition-height duration-150 relative ${
         inputOverflowed ? 'h-18' : 'h-9'
       }`}
-      ref={containerRef}
       style={tagsContainerExpanded ? { height: expandedContainerHeight } : {}}
     >
       <div
@@ -148,31 +83,22 @@ const NoteTagsContainer = observer(({ application, appState }: Props) => {
           maxWidth: tagsContainerMaxWidth,
         }}
       >
-        {tags.map((tag: SNTag, index: number) => (
+        {tags.map((tag) => (
           <NoteTag
+            key={tag.uuid}
             appState={appState}
-            tagsRef={tagsRef}
-            index={index}
             tag={tag}
-            maxWidth={tagsContainerMaxWidth}
-            overflowed={
-              !tagsContainerExpanded &&
-              !!lastVisibleTagIndex &&
-              index > lastVisibleTagIndex
-            }
+            overflowButtonRef={overflowButtonRef}
           />
         ))}
-        <AutocompleteTagInput
-          application={application}
-          appState={appState}
-          tagsRef={tagsRef}
-        />
+        <AutocompleteTagInput application={application} appState={appState} />
       </div>
       {tagsOverflowed && (
         <button
+          ref={overflowButtonRef}
           type="button"
-          className="sn-tag ml-1 px-2 absolute"
-          onClick={expandTags}
+          className="sn-tag ml-1 absolute"
+          onClick={() => appState.activeNote.setTagsContainerExpanded(true)}
           style={{ left: overflowCountPosition }}
         >
           +{overflowedTagsCount}

app/assets/javascripts/directives/views/panelResizer.ts

@@ -54,7 +54,7 @@ class PanelResizerCtrl implements PanelResizerScope {
   index!: number
   minWidth!: number
   onResizeFinish!: () => ResizeFinishCallback
-  onWidthEvent?: () => () => void
+  onMouseMoveEvent?: () => () => void
   panelId!: string
   property!: PanelSide
 
@@ -104,7 +104,7 @@ class PanelResizerCtrl implements PanelResizerScope {
 
   $onDestroy() {
     (this.onResizeFinish as any) = undefined;
-    (this.onWidthEvent as any) = undefined;
+    (this.onMouseMoveEvent as any) = undefined;
     (this.control as any) = undefined;
     window.removeEventListener(WINDOW_EVENT_RESIZE, this.handleResize);
     document.removeEventListener(MouseEventType.Move, this.onMouseMove);
@@ -245,13 +245,13 @@ class PanelResizerCtrl implements PanelResizerScope {
       return;
     }
     event.preventDefault();
+    if (this.onMouseMoveEvent) {
+      this.onMouseMoveEvent()();
+    }
     if (this.property && this.property === PanelSide.Left) {
       this.handleLeftEvent(event);
     } else {
       this.handleWidthEvent(event);
-      if (this.onWidthEvent) {
-        this.onWidthEvent()();
-      }
     }
   }
 
@@ -393,7 +393,7 @@ export class PanelResizer extends WebDirective {
       index: '=',
       minWidth: '=',
       onResizeFinish: '&',
-      onWidthEvent: '&',
+      onMouseMoveEvent: '&',
       panelId: '=',
       property: '='
     };

app/assets/javascripts/ui_models/app_state/active_note_state.ts

@@ -14,10 +14,12 @@ import { AppState } from './app_state';
 
 export class ActiveNoteState {
   inputOverflowed = false;
+  overflowCountPosition = 0;
   overflowedTagsCount = 0;
+  tagElements: (HTMLButtonElement | undefined)[] = [];
+  tagFocused = false;
   tags: SNTag[] = [];
   tagsContainerMaxWidth: number | 'auto' = 0;
-  tagFocused = false;
   tagsContainerExpanded = false;
 
   constructor(
@@ -27,29 +29,31 @@ export class ActiveNoteState {
   ) {
     makeObservable(this, {
       inputOverflowed: observable,
+      overflowCountPosition: observable,
       overflowedTagsCount: observable,
-      tags: observable,
+      tagElements: observable,
       tagFocused: observable,
+      tags: observable,
       tagsContainerExpanded: observable,
       tagsContainerMaxWidth: observable,
 
       tagsOverflowed: computed,
-      
+
       setInputOverflowed: action,
+      setOverflowCountPosition: action,
       setOverflowedTagsCount: action,
+      setTagElement: action,
       setTagFocused: action,
+      setTags: action,
       setTagsContainerExpanded: action,
       setTagsContainerMaxWidth: action,
       reloadTags: action,
     });
 
     appEventListeners.push(
-      application.streamItems(
-        ContentType.Tag,
-        () => {
-          this.reloadTags();
-        }
-      )
+      application.streamItems(ContentType.Tag, () => {
+        this.reloadTags();
+      })
     );
   }
 
@@ -65,14 +69,33 @@ export class ActiveNoteState {
     this.inputOverflowed = overflowed;
   }
 
+  setOverflowCountPosition(position: number): void {
+    this.overflowCountPosition = position;
+  }
+
   setOverflowedTagsCount(count: number): void {
     this.overflowedTagsCount = count;
   }
 
+  setTagElement(tag: SNTag, element: HTMLButtonElement): void {
+    const tagIndex = this.getTagIndex(tag);
+    if (tagIndex > -1) {
+      this.tagElements.splice(tagIndex, 1, element);
+    }
+  }
+
   setTagFocused(focused: boolean): void {
     this.tagFocused = focused;
   }
 
+  setTagElements(elements: (HTMLButtonElement | undefined)[]): void {
+    this.tagElements = elements;
+  }
+
+  setTags(tags: SNTag[]): void {
+    this.tags = tags;
+  }
+
   setTagsContainerExpanded(expanded: boolean): void {
     this.tagsContainerExpanded = expanded;
   }
@@ -81,28 +104,86 @@ export class ActiveNoteState {
     this.tagsContainerMaxWidth = width;
   }
 
+  getTagElement(tag: SNTag): HTMLButtonElement | undefined {
+    const tagIndex = this.getTagIndex(tag);
+    if (tagIndex > -1 && this.tagElements.length > tagIndex) {
+      return this.tagElements[tagIndex];
+    }
+  }
+
+  getTagIndex(tag: SNTag): number {
+    return this.tags.findIndex(t => t.uuid === tag.uuid);
+  }
+
+  getPreviousTag(tag: SNTag): SNTag | undefined {
+    const previousTagIndex = this.getTagIndex(tag) - 1;
+    if (previousTagIndex > -1 && this.tags.length > previousTagIndex) {
+      return this.tags[previousTagIndex];
+    }
+  }
+
+  isElementOverflowed(element: HTMLElement): boolean {
+    if (
+      this.tagElements.length === 0 ||
+      !this.tagElements[0]
+    ) {
+      return false;
+    }
+    const firstTagTop = this.tagElements[0].offsetTop;
+    return element.offsetTop > firstTagTop;
+  }
+
+  isTagOverflowed(tag: SNTag): boolean {
+    const tagElement = this.getTagElement(tag);
+    return tagElement ? this.isElementOverflowed(tagElement) : false;
+  }
+
   reloadTags(): void {
     const { activeNote } = this;
     if (activeNote) {
-      this.tags = this.application.getSortedTagsForNote(activeNote);
-    } 
+      const tags = this.application.getSortedTagsForNote(activeNote);
+      const tagElements: (HTMLButtonElement | undefined)[] = [];
+      this.setTags(tags);
+      this.setTagElements(tagElements.fill(undefined, tags.length));
+    }
+  }
+
+  reloadOverflowCountPosition(): void {
+    const lastVisibleTagIndex = this.tagElements.findIndex(tagElement => tagElement && this.isElementOverflowed(tagElement)) - 1;
+    if (lastVisibleTagIndex > -1 && this.tagElements.length > lastVisibleTagIndex) {
+      const lastVisibleTagElement = this.tagElements[lastVisibleTagIndex];
+      if (lastVisibleTagElement) {
+        const { offsetLeft, offsetWidth } = lastVisibleTagElement;
+        this.setOverflowCountPosition(offsetLeft + offsetWidth);
+      }
+    }
+  }
+
+  reloadOverflowedTagsCount(): void {
+    const count = this.tagElements.filter((tagElement) =>
+      tagElement && this.isElementOverflowed(tagElement)
+    ).length;
+    this.setOverflowedTagsCount(count);
+  }
+
+  reloadTagsContainerMaxWidth(): void {
+    const EDITOR_ELEMENT_ID = 'editor-column';
+    const defaultFontSize = parseFloat(window.getComputedStyle(
+      document.documentElement
+    ).fontSize);
+    const overflowMargin = defaultFontSize * 5;
+    const editorWidth = document.getElementById(EDITOR_ELEMENT_ID)?.clientWidth;
+    if (editorWidth) {
+      this.appState.activeNote.setTagsContainerMaxWidth(
+        editorWidth - overflowMargin
+      );
+    }
   }
 
   reloadTagsContainerLayout(): void {
-    const EDITOR_ELEMENT_ID = 'editor-column';
-    const defaultFontSize = window.getComputedStyle(
-      document.documentElement
-    ).fontSize;
-    const containerMargins = parseFloat(defaultFontSize) * 6;
-    const deleteButtonMargin = this.tagFocused ? parseFloat(defaultFontSize) * 1.25 : 0;
-    const editorWidth =
-      document.getElementById(EDITOR_ELEMENT_ID)?.clientWidth;
-
-    if (editorWidth) {
-      this.appState.activeNote.setTagsContainerMaxWidth(
-        editorWidth - containerMargins + deleteButtonMargin
-      );
-    }
+    this.reloadTagsContainerMaxWidth();
+    this.reloadOverflowedTagsCount();
+    this.reloadOverflowCountPosition();
   }
 
   async addTagToActiveNote(tag: SNTag): Promise<void> {

app/assets/javascripts/views/notes/notes-view.pug

@@ -169,6 +169,6 @@
     default-width="300"
     hoverable="true"
     on-resize-finish="self.onPanelResize"
-    on-width-event="self.onPanelWidthEvent"
+    on-mouse-move-event="self.onPanelMouseMoveEvent"
     panel-id="'notes-column'"
     )

app/assets/javascripts/views/notes/notes_view.ts

@@ -93,7 +93,7 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
     };
     this.onWindowResize = this.onWindowResize.bind(this);
     this.onPanelResize = this.onPanelResize.bind(this);
-    this.onPanelWidthEvent = this.onPanelWidthEvent.bind(this);
+    this.onPanelMouseMoveEvent = this.onPanelMouseMoveEvent.bind(this);
     window.addEventListener('resize', this.onWindowResize, true);
     this.registerKeyboardShortcuts();
     this.autorun(async () => {
@@ -134,7 +134,7 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
     window.removeEventListener('resize', this.onWindowResize, true);
     (this.onWindowResize as any) = undefined;
     (this.onPanelResize as any) = undefined;
-    (this.onPanelWidthEvent as any) = undefined;
+    (this.onPanelMouseMoveEvent as any) = undefined;
     this.newNoteKeyObserver();
     this.nextNoteKeyObserver();
     this.previousNoteKeyObserver();
@@ -659,8 +659,8 @@ class NotesViewCtrl extends PureViewCtrl<unknown, NotesCtrlState> {
     );
   }
 
-  onPanelWidthEvent(): void {
-    this.appState.activeNote.reloadTagsContainerLayout();
+  onPanelMouseMoveEvent(): void {
+    this.appState.activeNote.reloadTagsContainerMaxWidth();
   }
 
   paginate() {

app/assets/stylesheets/_sn.scss

@@ -162,6 +162,10 @@
   line-height: 2.25rem;
 }
 
+.w-0 {
+  width: 0;
+}
+
 .w-3\.5 {
   width: 0.875rem;
 }
@@ -190,6 +194,10 @@
   height: 1px;
 }
 
+.h-0 {
+  height: 0;
+}
+
 .h-3\.5 {
   height: 0.875rem;
 }