fix: duplicate element id

standardnotes · Feb 1, 2022 · b1022cd · b1022cd
1 parent a477281
commit b1022cd
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 19 deletions.
diff --git a/app/assets/javascripts/components/NoteGroupView.tsx b/app/assets/javascripts/components/NoteGroupView.tsx
@@ -3,6 +3,7 @@ import { PureComponent } from '@/components/Abstract/PureComponent';
 import { WebApplication } from '@/ui_models/application';
 import { MultipleSelectedNotes } from '@/components/MultipleSelectedNotes';
 import { NoteView } from '@/components/NoteView/NoteView';
+import { ElementIds } from '@/element_ids';
 
 type State = {
   showMultipleSelectedNotes: boolean;
@@ -40,7 +41,10 @@ export class NoteGroupView extends PureComponent<Props, State> {
 
   render() {
     return (
-      <div id="editor-column" className="h-full app-column app-column-third">
+      <div
+        id={ElementIds.EditorColumn}
+        className="h-full app-column app-column-third"
+      >
         {this.state.showMultipleSelectedNotes && (
           <MultipleSelectedNotes
             application={this.application}

diff --git a/app/assets/javascripts/components/NoteView/NoteView.tsx b/app/assets/javascripts/components/NoteView/NoteView.tsx
@@ -37,16 +37,11 @@ import { ActionsMenu } from '../ActionsMenu';
 import { HistoryMenu } from '../HistoryMenu';
 import { ComponentView } from '../ComponentView';
 import { PanelSide, PanelResizer, PanelResizeType } from '../PanelResizer';
+import { ElementIds } from '@/element_ids';
 
 const MINIMUM_STATUS_DURATION = 400;
 const TEXTAREA_DEBOUNCE = 100;
 
-const ElementIds = {
-  NoteTextEditor: 'note-text-editor',
-  NoteTitleEditor: 'note-title-editor',
-  EditorContent: 'editor-content',
-};
-
 type NoteStatus = {
   message?: string;
   desc?: string;
@@ -982,11 +977,7 @@ export class NoteView extends PureComponent<Props, State> {
   render() {
     if (this.state.showProtectedWarning) {
       return (
-        <div
-          id="editor-column"
-          aria-label="Note"
-          className="section editor sn-component"
-        >
+        <div aria-label="Note" className="section editor sn-component">
           {this.state.showProtectedWarning && (
             <div className="h-full flex justify-center items-center">
               <ProtectedNoteOverlay
@@ -1001,11 +992,7 @@ export class NoteView extends PureComponent<Props, State> {
     }
 
     return (
-      <div
-        id="editor-column"
-        aria-label="Note"
-        className="section editor sn-component"
-      >
+      <div aria-label="Note" className="section editor sn-component">
         <div className="flex-grow flex flex-col">
           <div className="sn-component">
             {this.state.noteLocked && (

diff --git a/app/assets/javascripts/element_ids.ts b/app/assets/javascripts/element_ids.ts
@@ -0,0 +1,6 @@
+export const ElementIds = {
+  NoteTextEditor: 'note-text-editor',
+  NoteTitleEditor: 'note-title-editor',
+  EditorContent: 'editor-content',
+  EditorColumn: 'editor-column',
+};
diff --git a/app/assets/javascripts/ui_models/app_state/note_tags_state.ts b/app/assets/javascripts/ui_models/app_state/note_tags_state.ts
@@ -1,3 +1,4 @@
+import { ElementIds } from '@/element_ids';
 import { ContentType, SNNote, SNTag, UuidString } from '@standardnotes/snjs';
 import { action, computed, makeObservable, observable } from 'mobx';
 import { WebApplication } from '../application';
@@ -167,8 +168,9 @@ export class NoteTagsState {
   }
 
   reloadTagsContainerMaxWidth(): void {
-    const EDITOR_ELEMENT_ID = 'editor-column';
-    const editorWidth = document.getElementById(EDITOR_ELEMENT_ID)?.clientWidth;
+    const editorWidth = document.getElementById(
+      ElementIds.EditorColumn
+    )?.clientWidth;
     if (editorWidth) {
       this.setTagsContainerMaxWidth(editorWidth);
     }