fix: insert template note before opening editor menu (#838)

app/assets/javascripts/components/NoteView/NoteView.tsx

@@ -963,6 +963,12 @@ export class NoteView extends PureComponent<Props, State> {
     observer.observe(editor.parentElement as HTMLElement, { childList: true });
   };
 
+  ensureNoteIsInsertedBeforeUIAction = async () => {
+    if (this.controller.isTemplateNote) {
+      await this.controller.insertTemplatedNote();
+    }
+  };
+
   render() {
     if (this.state.showProtectedWarning) {
       return (
@@ -1072,17 +1078,23 @@ export class NoteView extends PureComponent<Props, State> {
                       <div className="desc">{this.state.noteStatus.desc}</div>
                     )}
                   </div>
-                  {this.appState.notes.selectedNotesCount > 0 && (
-                    <>
-                      <div className="mr-3">
-                        <PinNoteButton appState={this.appState} />
-                      </div>
-                      <NotesOptionsPanel
-                        application={this.application}
+                  <>
+                    <div className="mr-3">
+                      <PinNoteButton
                         appState={this.appState}
+                        onClickPreprocessing={
+                          this.ensureNoteIsInsertedBeforeUIAction
+                        }
                       />
-                    </>
-                  )}
+                    </div>
+                    <NotesOptionsPanel
+                      application={this.application}
+                      appState={this.appState}
+                      onClickPreprocessing={
+                        this.ensureNoteIsInsertedBeforeUIAction
+                      }
+                    />
+                  </>
                 </div>
               </div>
               <NoteTagsContainer appState={this.appState} />

app/assets/javascripts/components/NotesOptionsPanel.tsx

@@ -15,10 +15,11 @@ import { WebApplication } from '@/ui_models/application';
 type Props = {
   application: WebApplication;
   appState: AppState;
+  onClickPreprocessing?: () => Promise<void>;
 };
 
 export const NotesOptionsPanel = observer(
-  ({ application, appState }: Props) => {
+  ({ application, appState, onClickPreprocessing }: Props) => {
     const [open, setOpen] = useState(false);
     const [position, setPosition] = useState({
       top: 0,
@@ -37,7 +38,7 @@ export const NotesOptionsPanel = observer(
     return (
       <Disclosure
         open={open}
-        onChange={() => {
+        onChange={async () => {
           const rect = buttonRef.current?.getBoundingClientRect();
           if (rect) {
             const { clientHeight } = document.documentElement;
@@ -52,7 +53,11 @@ export const NotesOptionsPanel = observer(
               top: rect.bottom,
               right: document.body.clientWidth - rect.right,
             });
-            setOpen(!open);
+            const newOpenState = !open;
+            if (newOpenState && onClickPreprocessing) {
+              await onClickPreprocessing();
+            }
+            setOpen(newOpenState);
           }
         }}
       >

app/assets/javascripts/components/PinNoteButton.tsx

@@ -7,14 +7,18 @@ import { Icon } from './Icon';
 type Props = {
   appState: AppState;
   className?: string;
+  onClickPreprocessing?: () => Promise<void>;
 };
 
 export const PinNoteButton: FunctionComponent<Props> = observer(
-  ({ appState, className = '' }) => {
+  ({ appState, className = '', onClickPreprocessing }) => {
     const notes = Object.values(appState.notes.selectedNotes);
     const pinned = notes.some((note) => note.pinned);
 
-    const togglePinned = () => {
+    const togglePinned = async () => {
+      if (onClickPreprocessing) {
+        await onClickPreprocessing();
+      }
       if (!pinned) {
         appState.notes.setPinSelectedNotes(true);
       } else {