#501

src/_node/apis.ts

@@ -1,4 +1,5 @@
-import { doFileActions, doNodeActions } from "./";
+import { doNodeActions } from "./node";
+import { doFileActions } from "./file";
 
 export const callNodeApi = doNodeActions;
 export const callFileApi = doFileActions;

src/_redux/main/context.ts

@@ -27,6 +27,10 @@ export const MainContext: Context<TMainContext> = createContext<TMainContext>({
  current: false,
  },
  setIsContentProgrammaticallyChanged: () => {},
+ isCodeTyping: {
+ current: false,
+ },
+ setIsCodeTyping: () => {},
 
  importProject: () => {},
  onUndo: () => {},

src/_redux/main/nodeTree/slice.ts

@@ -3,12 +3,14 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
 import { TUpdateTreeViewStatePayload } from "../types";
 import { TNodeTreeReducerState } from "./types";
+import { TCodeSelection } from "@_components/main/codeView";
 
 const nodeTreeReducerInitialState: TNodeTreeReducerState = {
  nodeTree: {},
  validNodeTree: {},
 
- needToSelectNodePaths: [],
+ needToSelectNodePaths: null,
+ needToSelectCode: null,
 
  nodeTreeViewState: {
  focusedItem: "",
@@ -32,10 +34,14 @@ const nodeTreeSlice = createSlice({
  state.validNodeTree = validNodeTree;
  },
 
- setNeedToSelectNodePaths(state, action: PayloadAction<string[]>) {
+ setNeedToSelectNodePaths(state, action: PayloadAction<string[] | null>) {
  const needToSelectNodePaths = action.payload;
  state.needToSelectNodePaths = needToSelectNodePaths;
  },
+ setNeedToSelectCode(state, action: PayloadAction<TCodeSelection | null>) {
+ const needToSelectCode = action.payload;
+ state.needToSelectCode = needToSelectCode;
+ },
 
  focusNodeTreeNode(state, action: PayloadAction<TNodeUid>) {
  const focusedItem = action.payload;
@@ -146,6 +152,7 @@ export const {
  setValidNodeTree,
 
  setNeedToSelectNodePaths,
+ setNeedToSelectCode,
 
  focusNodeTreeNode,
  setExpandedNodeTreeNodes,

src/_redux/main/nodeTree/types.ts

@@ -1,12 +1,14 @@
 import { TNodeTreeData, TNodeUid } from "@_node/types";
 
 import { TTreeViewState } from "../types";
+import { TCodeSelection } from "@_components/main/codeView";
 
 export type TNodeTreeReducerState = {
  nodeTree: TNodeTreeData;
  validNodeTree: TNodeTreeData;
 
- needToSelectNodePaths: string[];
+ needToSelectNodePaths: string[] | null;
+ needToSelectCode: TCodeSelection | null;
 
  nodeTreeViewState: TTreeViewState;
  hoveredNodeUid: TNodeUid;

src/_redux/main/types.ts

@@ -58,6 +58,8 @@ export type TMainContext = {
  setIframeRefRef: (iframeRef: HTMLIFrameElement | null) => void;
  isContentProgrammaticallyChanged: React.RefObject<boolean>;
  setIsContentProgrammaticallyChanged: (value: boolean) => void;
+ isCodeTyping: React.RefObject<boolean>;
+ setIsCodeTyping: (value: boolean) => void;
 
  importProject: (
  fsType: TProjectContext,

src/_redux/useAppState.tsx

@@ -34,6 +34,7 @@ export const useAppState = () => {
  nodeTree,
  validNodeTree,
  needToSelectNodePaths,
+ needToSelectCode,
  nodeTreeViewState: {
  focusedItem: nFocusedItem,
  expandedItems: nExpandedItems,
@@ -116,6 +117,7 @@ export const useAppState = () => {
  validNodeTree,
 
  needToSelectNodePaths,
+ needToSelectCode,
 
  nFocusedItem,
  nExpandedItems,

src/components/main/actionsPanel/nodeTreeView/NodeTreeView.tsx

@@ -221,12 +221,14 @@ const NodeTreeView = () => {
  }),
  [],
  );
-
- const searchConfig = {
- canSearch: false,
- canSearchByStartingTyping: false,
- canRename: false,
- };
+ const searchConfig = useMemo(
+ () => ({
+ canSearch: false,
+ canSearchByStartingTyping: false,
+ canRename: false,
+ }),
+ [],
+ );
 
  return currentFileUid !== "" ? (
  <div

src/components/main/actionsPanel/nodeTreeView/hooks/useCmdk.ts

@@ -4,11 +4,10 @@ import { isAddNodeAction, isRenameNodeAction } from "@_node/helpers";
 import { MainContext } from "@_redux/main";
 import { useAppState } from "@_redux/useAppState";
 
-import { useNodeActionsHandlers } from "./useNodeActionsHandlers";
+import { useNodeActionHandlers } from "./useNodeActionHandlers";
 
 export const useCmdk = () => {
  const { activePanel, currentCommand } = useAppState();
- const {} = useContext(MainContext);
 
  const {
  onAddNode,
@@ -20,7 +19,7 @@ export const useCmdk = () => {
  onTurnInto,
  onGroup,
  onUngroup,
- } = useNodeActionsHandlers();
+ } = useNodeActionHandlers();
 
  useEffect(() => {
  if (!currentCommand) return;

src/components/main/actionsPanel/nodeTreeView/hooks/useNodeActionsHandlers.ts → src/components/main/actionsPanel/nodeTreeView/hooks/useNodeActionHandlers.ts

@@ -3,12 +3,13 @@ import { useCallback, useContext } from "react";
 import { useDispatch } from "react-redux";
 
 import { LogAllow } from "@_constants/global";
-import { callNodeApi } from "@_node/apis";
 import { TNodeUid } from "@_node/types";
 import { MainContext } from "@_redux/main";
 import { useAppState } from "@_redux/useAppState";
+import { doNodeActions } from "@_node/node";
+import { callNodeApi } from "@_node/apis";
 
-export const useNodeActionsHandlers = () => {
+export const useNodeActionHandlers = () => {
  const dispatch = useDispatch();
  const {
  nodeTree,
@@ -57,7 +58,6 @@ export const useNodeActionsHandlers = () => {
  },
  [nodeTree, focusedItem],
  );
-
  const onCut = useCallback(() => {
  if (selectedItems.length === 0) return;
 
@@ -83,7 +83,6 @@ export const useNodeActionsHandlers = () => {
  () => setIsContentProgrammaticallyChanged(false),
  );
  }, [selectedItems, nodeTree]);
-
  const onCopy = useCallback(() => {
  if (selectedItems.length === 0) return;
 
@@ -109,7 +108,6 @@ export const useNodeActionsHandlers = () => {
  () => setIsContentProgrammaticallyChanged(false),
  );
  }, [selectedItems, nodeTree]);
-
  const onPaste = useCallback(() => {
  const focusedNode = validNodeTree[focusedItem];
  if (!focusedNode || !focusedNode.data.sourceCodeLocation) {
@@ -140,7 +138,6 @@ export const useNodeActionsHandlers = () => {
  () => setIsContentProgrammaticallyChanged(false),
  );
  }, [validNodeTree, focusedItem]);
-
  const onDelete = useCallback(() => {
  if (selectedItems.length === 0) return;
 
@@ -166,7 +163,6 @@ export const useNodeActionsHandlers = () => {
  () => setIsContentProgrammaticallyChanged(false),
  );
  }, [selectedItems, nodeTree]);
-
  const onDuplicate = useCallback(() => {
  if (selectedItems.length === 0) return;
 
@@ -192,7 +188,6 @@ export const useNodeActionsHandlers = () => {
  () => setIsContentProgrammaticallyChanged(false),
  );
  }, [selectedItems, nodeTree]);
-
  const onMove = useCallback(
  ({
  selectedUids,
@@ -232,7 +227,6 @@ export const useNodeActionsHandlers = () => {
  },
  [nodeTree],
  );
-
  const onTurnInto = useCallback(
  (actionName: string) => {
  const focusedNode = nodeTree[focusedItem];
@@ -264,7 +258,6 @@ export const useNodeActionsHandlers = () => {
  },
  [nodeTree, focusedItem],
  );
-
  const onGroup = useCallback(() => {
  if (selectedItems.length === 0) return;
 

src/components/main/actionsPanel/nodeTreeView/hooks/useNodeTreeCallback.ts

@@ -7,7 +7,7 @@ import { TNodeUid } from "@_node/types";
 import { MainContext } from "@_redux/main";
 import { useAppState } from "@_redux/useAppState";
 
-import { useNodeActionsHandlers } from "./useNodeActionsHandlers";
+import { useNodeActionHandlers } from "./useNodeActionHandlers";
 import { useNodeViewState } from "./useNodeViewState";
 
 export const useNodeTreeCallback = (
@@ -17,7 +17,7 @@ export const useNodeTreeCallback = (
  const { validNodeTree } = useAppState();
  const { htmlReferenceData } = useContext(MainContext);
 
- const { onMove } = useNodeActionsHandlers();
+ const { onMove } = useNodeActionHandlers();
  const { cb_focusNode, cb_selectNode, cb_expandNode, cb_collapseNode } =
  useNodeViewState();
 

src/components/main/actionsPanel/workspaceTreeView/WorkspaceTreeView.tsx

@@ -197,11 +197,7 @@ export default function WorkspaceTreeView() {
  // open default initial html file
  useEffect(() => {
  if (initialFileUidToOpen !== "" && fileTree[initialFileUidToOpen]) {
- addRunningActions([
- "fileTreeView-focus",
- "fileTreeView-select",
- "fileTreeView-read",
- ]);
+ addRunningActions(["fileTreeView-read"]);
 
  cb_focusNode(initialFileUidToOpen);
  cb_selectNode([initialFileUidToOpen]);

src/components/main/codeView/CodeView.tsx

@@ -19,6 +19,7 @@ import { Editor, loader } from "@monaco-editor/react";
 
 import { useCmdk, useEditor } from "./hooks";
 import { CodeViewProps } from "./types";
+import { getNodeUidByCodeSelection } from "./helpers";
 
 loader.config({ monaco });
 
@@ -35,11 +36,7 @@ export default function CodeView(props: CodeViewProps) {
  activePanel,
  showCodeView,
  } = useAppState();
- const {
- isContentProgrammaticallyChanged,
- setIsContentProgrammaticallyChanged,
- monacoEditorRef,
- } = useContext(MainContext);
+ const { isCodeTyping, monacoEditorRef } = useContext(MainContext);
 
  const {
  handleEditorDidMount,
@@ -54,7 +51,6 @@ export default function CodeView(props: CodeViewProps) {
  setWordWrap,
 
  codeSelection,
- getNodeUidByCodeSelection,
  } = useEditor();
  useCmdk();
 
@@ -126,7 +122,7 @@ export default function CodeView(props: CodeViewProps) {
 
  // code select -> selectedUids
  useEffect(() => {
- if (!codeSelection) return;
+ if (!codeSelection || isCodeTyping.current) return;
 
  const file = fileTree[currentFileUid];
  if (!file) return;

src/components/main/codeView/helpers.ts

@@ -1,5 +1,9 @@
 import { TTheme } from "@_redux/global";
 import { getSystemTheme } from "@_services/global";
+import { TCodeSelection } from "./types";
+import { TNodeTreeData, TNodeUid } from "@_node/types";
+import { getSubNodeUidsByBfs } from "@_node/helpers";
+import { RootNodeUid } from "@_constants/main";
 
 export const getLanguageFromExtension = (extension: string) => {
  if (!!extension) return extension;
@@ -18,3 +22,41 @@ export const getCodeViewTheme = (theme: TTheme) => {
  return "light";
  }
 };
+
+export const getNodeUidByCodeSelection = (
+ selection: TCodeSelection,
+ validNodeTree: TNodeTreeData,
+): TNodeUid | null => {
+ let focusedItem: TNodeUid | null = null;
+ if (selection) {
+ const uids = getSubNodeUidsByBfs(RootNodeUid, validNodeTree);
+ uids.reverse();
+ for (const uid of uids) {
+ const node = validNodeTree[uid];
+ const sourceCodeLocation = node.data.sourceCodeLocation;
+ if (!sourceCodeLocation) continue;
+
+ const {
+ startLine: startLineNumber,
+ startCol: startColumn,
+ endCol: endColumn,
+ endLine: endLineNumber,
+ } = sourceCodeLocation;
+
+ const containFront =
+ selection.startLineNumber === startLineNumber
+ ? selection.startColumn > startColumn
+ : selection.startLineNumber > startLineNumber;
+ const containBack =
+ selection.endLineNumber === endLineNumber
+ ? selection.endColumn < endColumn
+ : selection.endLineNumber < endLineNumber;
+
+ if (containFront && containBack) {
+ focusedItem = uid;
+ break;
+ }
+ }
+ }
+ return focusedItem;
+};