feat: ability to ignore certain nodes in the document + locate node i…

…n the doc (#30)

src/main/endpoints/highlightNode.ts

@@ -0,0 +1,16 @@
+import { createEndpoint } from "../utils/createEndpoint";
+
+export type HighlightNodeProps = {
+  id: string;
+};
+
+export const highlightNodeEndpoint = createEndpoint(
+  "HIGHLIGHT_NODE",
+  async ({ id }: HighlightNodeProps) => {
+    const node = figma.getNodeById(id);
+
+    if (node) {
+      figma.viewport.scrollAndZoomIntoView([node]);
+    }
+  }
+);

src/main/main.ts

@@ -1,95 +1,31 @@
 import { showUI } from "@create-figma-plugin/utilities";
 import { on, emit } from "@/utilities";
-import { TOLGEE_PLUGIN_CONFIG_NAME } from "../constants";
 
 import {
   ConfigChangeHandler,
-  CurrentDocumentSettings,
-  CurrentPageSettings,
   DocumentChangeHandler,
-  GlobalSettings,
   ResetHandler,
   ResizeHandler,
   SelectionChangeHandler,
   SetLanguageHandler,
   SetupHandle,
   SyncCompleteHandler,
-  TolgeeConfig,
 } from "../types";
-import { DEFAULT_SIZE } from "../tools/useWindowSize";
 import { getScreenshotsEndpoint } from "./endpoints/getScreenshots";
 import { getSelectedNodesEndpoint } from "./endpoints/getSelectedNodes";
 import { getConnectedNodesEndpoint } from "./endpoints/getConnectedNodes";
-import { setPageData } from "./utils/pages";
 import { copyPageEndpoint } from "./endpoints/copyPage";
 import { updateNodesEndpoint } from "./endpoints/updateNodes";
 import { setNodesDataEndpoint } from "./endpoints/setNodesData";
-
-const getGlobalSettings = async () => {
-  const pluginData = await figma.clientStorage.getAsync(
-    TOLGEE_PLUGIN_CONFIG_NAME
-  );
-  return pluginData ? (JSON.parse(pluginData) as Partial<GlobalSettings>) : {};
-};
-
-const setGlobalSettings = async (data: Partial<GlobalSettings>) => {
-  await figma.clientStorage.setAsync(
-    TOLGEE_PLUGIN_CONFIG_NAME,
-    JSON.stringify(data)
-  );
-};
-
-const deleteGlobalSettings = async () => {
-  await figma.clientStorage.deleteAsync(TOLGEE_PLUGIN_CONFIG_NAME);
-};
-
-const getDocumentData = () => {
-  const pluginData = figma.root.getPluginData(TOLGEE_PLUGIN_CONFIG_NAME);
-  return pluginData
-    ? (JSON.parse(pluginData) as Partial<CurrentDocumentSettings>)
-    : {};
-};
-
-const setDocumentData = (data: Partial<CurrentDocumentSettings>) => {
-  figma.root.setPluginData(TOLGEE_PLUGIN_CONFIG_NAME, JSON.stringify(data));
-};
-
-const deleteDocumentData = () => {
-  figma.root.setPluginData(TOLGEE_PLUGIN_CONFIG_NAME, "");
-};
-
-const getPageData = (page = figma.currentPage) => {
-  const pluginData = page.getPluginData(TOLGEE_PLUGIN_CONFIG_NAME);
-  return pluginData
-    ? (JSON.parse(pluginData) as Partial<CurrentPageSettings>)
-    : {};
-};
-
-const deletePageData = (page = figma.currentPage) => {
-  page.setPluginData(TOLGEE_PLUGIN_CONFIG_NAME, "");
-};
-
-const getPluginData = async () => {
-  return {
-    ...(await getGlobalSettings()),
-    ...getDocumentData(),
-    ...getPageData(),
-  };
-};
-
-const setPluginData = async (data: Partial<TolgeeConfig>) => {
-  const { apiKey, apiUrl, language, namespace, namespacesDisabled } = data;
-  await setGlobalSettings({ apiKey, apiUrl });
-  setDocumentData({
-    apiKey,
-    apiUrl,
-    namespace,
-    namespacesDisabled,
-    documentInfo: true,
-  });
-  setPageData({ language, pageInfo: true });
-  emit<ConfigChangeHandler>("CONFIG_CHANGE", await getPluginData());
-};
+import {
+  deleteDocumentData,
+  deleteGlobalSettings,
+  deletePageData,
+  getPluginData,
+  setPluginData,
+} from "./utils/settingsTools";
+import { DEFAULT_SIZE } from "@/ui/hooks/useWindowSize";
+import { highlightNodeEndpoint } from "./endpoints/highlightNode";
 
 const getAllPages = () => {
   const document = figma.root;
@@ -156,6 +92,7 @@ export default async function () {
   copyPageEndpoint.register();
   updateNodesEndpoint.register();
   setNodesDataEndpoint.register();
+  highlightNodeEndpoint.register();
 
   const config = await getPluginData();
 

src/main/utils/nodeTools.ts

@@ -1,5 +1,6 @@
 import { TOLGEE_NODE_INFO } from "@/constants";
-import { NodeInfo } from "@/types";
+import { CurrentDocumentSettings, NodeInfo } from "@/types";
+import { getDocumentData } from "./settingsTools";
 
 export const getNodeInfo = (node: TextNode): NodeInfo => {
   const pluginData = JSON.parse(
@@ -15,27 +16,40 @@ export const getNodeInfo = (node: TextNode): NodeInfo => {
   };
 };
 
-export function* findTextNodesGenerator(
-  nodes: readonly SceneNode[]
-): Generator<TextNode> {
-  const toExplore = [...nodes].reverse();
-  let node: SceneNode | undefined;
-  while ((node = toExplore.pop())) {
+function shouldIncludeNode(
+  node: TextNode,
+  settings: Partial<CurrentDocumentSettings>
+) {
+  if (settings.ignoreNumbers && /^\d+$/.test(node.characters)) {
+    return false;
+  }
+  if (settings.ignorePrefix && node.name.startsWith(settings.ignorePrefix)) {
+    return false;
+  }
+  if (node.characters.trim().length === 0) {
+    return false;
+  }
+  return true;
+}
+
+export const findTextNodes = (nodes: readonly SceneNode[]): TextNode[] => {
+  const documentSettings = getDocumentData();
+  const result: TextNode[] = [];
+  for (const node of nodes) {
     if (node.type === "TEXT") {
-      yield node;
+      if (shouldIncludeNode(node, documentSettings)) {
+        result.push(node);
+      }
     }
     // @ts-ignore
     if (node.children) {
       // @ts-ignore
-      [...(node.children as SceneNode[])].reverse().forEach((value) => {
-        toExplore.push(value);
-      });
+      findTextNodes(node.children as SceneNode[]).forEach((n) =>
+        result.push(n)
+      );
     }
   }
-}
-
-export const findTextNodes = (nodes: readonly SceneNode[]): TextNode[] => {
-  return [...findTextNodesGenerator(nodes)];
+  return result;
 };
 
 export const findTextNodesInfo = (nodes: readonly SceneNode[]): NodeInfo[] => {

src/main/utils/settingsTools.ts

@@ -0,0 +1,92 @@
+import { TOLGEE_PLUGIN_CONFIG_NAME } from "@/constants";
+import {
+  ConfigChangeHandler,
+  CurrentDocumentSettings,
+  CurrentPageSettings,
+  GlobalSettings,
+  TolgeeConfig,
+} from "@/types";
+import { emit } from "@create-figma-plugin/utilities";
+import { setPageData } from "./pages";
+
+const getGlobalSettings = async () => {
+  const pluginData = await figma.clientStorage.getAsync(
+    TOLGEE_PLUGIN_CONFIG_NAME
+  );
+  return pluginData ? (JSON.parse(pluginData) as Partial<GlobalSettings>) : {};
+};
+
+const setGlobalSettings = async (data: Partial<GlobalSettings>) => {
+  await figma.clientStorage.setAsync(
+    TOLGEE_PLUGIN_CONFIG_NAME,
+    JSON.stringify(data)
+  );
+};
+
+export const deleteGlobalSettings = async () => {
+  await figma.clientStorage.deleteAsync(TOLGEE_PLUGIN_CONFIG_NAME);
+};
+
+export const getDocumentData = (): Partial<CurrentDocumentSettings> => {
+  const pluginData = figma.root.getPluginData(TOLGEE_PLUGIN_CONFIG_NAME);
+  const result = pluginData
+    ? (JSON.parse(pluginData) as Partial<CurrentDocumentSettings>)
+    : {};
+
+  return {
+    ignorePrefix: "_",
+    ignoreNumbers: true,
+    ...result,
+  };
+};
+
+const setDocumentData = (data: Partial<CurrentDocumentSettings>) => {
+  figma.root.setPluginData(TOLGEE_PLUGIN_CONFIG_NAME, JSON.stringify(data));
+};
+
+export const deleteDocumentData = () => {
+  figma.root.setPluginData(TOLGEE_PLUGIN_CONFIG_NAME, "");
+};
+
+const getPageData = (page = figma.currentPage) => {
+  const pluginData = page.getPluginData(TOLGEE_PLUGIN_CONFIG_NAME);
+  return pluginData
+    ? (JSON.parse(pluginData) as Partial<CurrentPageSettings>)
+    : {};
+};
+
+export const deletePageData = (page = figma.currentPage) => {
+  page.setPluginData(TOLGEE_PLUGIN_CONFIG_NAME, "");
+};
+
+export const getPluginData = async () => {
+  return {
+    ...(await getGlobalSettings()),
+    ...getDocumentData(),
+    ...getPageData(),
+  };
+};
+
+export const setPluginData = async (data: Partial<TolgeeConfig>) => {
+  const {
+    apiKey,
+    apiUrl,
+    language,
+    namespace,
+    namespacesDisabled,
+    ignorePrefix,
+    ignoreNumbers,
+  } = data;
+  await setGlobalSettings({ apiKey, apiUrl, ignorePrefix, ignoreNumbers });
+  setDocumentData({
+    apiKey,
+    apiUrl,
+    namespace,
+    namespacesDisabled,
+    ignorePrefix,
+    ignoreNumbers,
+    documentInfo: true,
+  });
+  setPageData({ language, pageInfo: true });
+  emit<ConfigChangeHandler>("CONFIG_CHANGE", await getPluginData());
+};

src/tools/getPushChanges.ts

@@ -52,7 +52,7 @@ export const getPushChanges = (
         compareNs(t.keyNamespace, node.ns) &&
         t.translations[language]?.text
     );
-    const change = {
+    const change: KeyChangeValue = {
       key: node.key,
       ns: node.ns,
       oldValue: key?.translations[language]?.text,

src/types.ts

@@ -87,6 +87,8 @@ export type PartialNodeInfo = Partial<NodeInfo> & {
 export type GlobalSettings = {
   apiUrl: string;
   apiKey: string;
+  ignorePrefix: string;
+  ignoreNumbers: boolean;
 };
 
 export type CurrentDocumentSettings = GlobalSettings & {

src/ui/components/ActionsBottom/ActionsBottom.css

@@ -7,6 +7,7 @@
   flex-direction: column;
   align-items: flex-end;
   background-color: var(--figma-color-bg);
+  z-index: 1000;
 }
 
 .actions {

src/ui/components/LocateNodeButton/LocateNodeButton.css

@@ -0,0 +1,9 @@
+.highlightButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  color: var(--figma-color-text-secondary);
+}

src/ui/components/LocateNodeButton/LocateNodeButton.css.d.ts

@@ -0,0 +1,5 @@
+declare const styles: {
+  readonly "highlightButton": string;
+};
+export = styles;
+

src/ui/components/LocateNodeButton/LocateNodeButton.tsx

@@ -0,0 +1,29 @@
+import { useHighlightNodeMutation } from "@/ui/hooks/useHighlightNodeMutation";
+import { h } from "preact";
+
+import styles from "./LocateNodeButton.css";
+import { MyLocation } from "@/ui/icons/SvgIcons";
+
+type Props = {
+  nodeId: string;
+};
+
+export const LocateNodeButton = ({ nodeId }: Props) => {
+  const highlightMutation = useHighlightNodeMutation();
+
+  const handleHighlight = () => {
+    highlightMutation.mutate({ id: nodeId });
+  };
+
+  return (
+    <div
+      data-cy="index_highlight_button"
+      role="button"
+      title="Locate on the page"
+      onClick={handleHighlight}
+      className={styles.highlightButton}
+    >
+      <MyLocation width={16} height={16} />
+    </div>
+  );
+};