fix: move row can't trigger re-render

src/main.ts

@@ -140,21 +140,22 @@ export default class SuperPlan extends Plugin {
 
     this.registerEditorExtension(
       EditorView.updateListener.of((update) => {
-        const doc = update.view.state.doc
-        if (!update.docChanged || !(doc as any).text) return
+        if (!update.docChanged) return
+
+        const doc = update.state.doc
         update.changes.iterChanges((fromA, toA, fromB, toB) => {
           // Get the starting and ending line numbers for the changed lines
           const changedLineStart = doc.lineAt(fromB).number - 1
           const changedLineEnd = doc.lineAt(toB).number - 1
-
+          
           // Notify the change to the sync.
           if (activeFile && filesMap.has(activeFile)) {
             const { sync } = filesMap.get(activeFile)!
             const { lineStart, lineEnd } = sync.getInfo()
 
             if (changedLineStart >= lineStart + 1 && changedLineEnd <= lineEnd - 1) {
               sync.notify({
-                source: ((doc as any).text as string[]).slice(lineStart + 1, lineEnd).join('\n'),
+                source: [...doc.iterLines(lineStart + 2, lineEnd + 1)].join('\n')
               })
             }
           }

src/ui/plan/Plan.tsx

@@ -1,15 +1,7 @@
 import { MdTableParser } from 'src/parser'
 import { planDataSchema, type PlanData } from 'src/schemas'
 import { render } from 'preact'
-import {
-  useEffect,
-  useReducer,
-  useRef,
-  useState,
-  useSyncExternalStore,
-  type FC,
-  memo,
-} from 'preact/compat'
+import { useRef, useSyncExternalStore, type FC, memo } from 'preact/compat'
 import { PlanTable } from './PlanTable'
 import { MdTableEditor } from 'src/editor/md-table-editor'
 import type { Table } from '@tgrosinger/md-advanced-tables'
@@ -20,9 +12,7 @@ import type { CodeBlockSync } from 'src/editor/code-block-sync'
 import { Scheduler } from 'src/scheduler'
 import type { ColumnKeys } from 'src/constants'
 import { shallowCompare } from 'src/util/helper'
-import { Events, GlobalMediator } from 'src/mediator'
 import type { SuperPlanSettings } from 'src/setting/settings'
-
 /**
  * Markdown Table Editor Loader
  */

src/ui/plan/PlanTable.tsx

@@ -103,8 +103,6 @@ export const PlanTable: FC<PlanTableProps> = (props) => {
   }
 
   const handleCellKeyDown = async (e: KeyboardEvent, rowIndex: number, columnKey: ColumnKeys) => {
-    console.log(e)
-
     switch (e.key) {
       case Keys.Enter:
         // Move to next column or create new row

src/ui/plan/hooks.ts

@@ -0,0 +1,45 @@
+import {
+  useEffect,
+  useRef,
+} from 'preact/compat';
+
+/**
+ * Helps tracking the props changes made in a react functional component.
+ *
+ * Prints the name of the properties/states variables causing a render (or re-render).
+ * For debugging purposes only.
+ *
+ * @usage You can simply track the props of the components like this:
+ *  useRenderingTrace('MyComponent', props);
+ *
+ * @usage You can also track additional state like this:
+ *  const [someState] = useState(null);
+ *  useRenderingTrace('MyComponent', { ...props, someState });
+ *
+ * @param componentName Name of the component to display
+ * @param propsAndStates
+ * @param level
+ *
+ * @see https://stackoverflow.com/a/51082563/2391795
+ */
+export const useRenderingTrace = (componentName: string, propsAndStates: any, level: 'debug' | 'info' | 'log' = 'debug') => {
+  const prev = useRef(propsAndStates);
+
+  useEffect(() => {
+    const changedProps: { [key: string]: { old: any, new: any } } = Object.entries(propsAndStates).reduce((property: any, [key, value]: [string, any]) => {
+      if (prev.current[key] !== value) {
+        property[key] = {
+          old: prev.current[key],
+          new: value,
+        };
+      }
+      return property;
+    }, {});
+
+    if (Object.keys(changedProps).length > 0) {
+      console[level](`[${componentName}] Changed props:`, changedProps);
+    }
+
+    prev.current = propsAndStates;
+  });
+};