feat(i18n): allow debugging i18n by using right-to-left modifier

package.json

@@ -28,6 +28,7 @@
     "deploy:test": "yarn build && cd dev/test-studio && sanity deploy",
     "dev": "yarn start",
     "dev:i18n": "SANITY_STUDIO_DEBUG_I18N=true yarn start",
+    "dev:i18n:reverse": "SANITY_STUDIO_DEBUG_I18N=reverse yarn start",
     "dev:design-studio": "yarn --cwd dev/design-studio dev",
     "dev:starter-studio": "yarn --cwd dev/starter-studio dev",
     "dev:strict-studio": "yarn --cwd dev/strict-studio dev",

packages/sanity/src/core/i18n/debug.ts

@@ -8,6 +8,15 @@ import type {TFunction} from 'i18next'
  */
 export const DEBUG_I18N = Boolean(process.env.SANITY_STUDIO_DEBUG_I18N)
 
+/**
+ * Wrapper function use for debugging. The "reverse" approach is less disruptive to the layout, but
+ * may be hard to use since it is hard to read labels. The "triangles" approach is easy to spot.
+ */
+const debugWrapper =
+  process.env.SANITY_STUDIO_DEBUG_I18N === 'reverse'
+    ? (str: string) => `‮${str}`
+    : (str: string) => `◤ ${str} ◢`
+
 /**
  * If in debug mode, wrap the given `t` function in a function that adds a prefix and suffix to the
  * translated string. If not, return the original `t` function as-is.
@@ -17,5 +26,5 @@ export const DEBUG_I18N = Boolean(process.env.SANITY_STUDIO_DEBUG_I18N)
  * @internal
  */
 export function maybeWrapT(t: TFunction): TFunction {
-  return DEBUG_I18N ? (((...args: any) => `◤ ${t(...args)} ◢`) as any as TFunction) : t
+  return DEBUG_I18N ? (((...args: any) => debugWrapper(t(...args)) as any) as TFunction) : t
 }