graphdb-workbench 3.0.0-TR7 → 3.0.0-TR9

package/dist/assets/graphiql.min.js

@@ -68358,6 +68358,14 @@ function getTypeInfo(variableToType, tokenState) {
 
 
 
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 Object.defineProperty(exports, Symbol.toStringTag, {
   value: "Module"
 });
@@ -69412,6 +69420,754 @@ function TooltipRoot({
 const Tooltip = createComponentGroup(TooltipRoot, {
   Provider: T__namespace.Provider
 });
+class TranslationService {
+  /**
+   * Initializes the translation service with predefined translation bundles.
+   *
+   * @param {Record<string, TranslationBundle>} [translationBundles={}] - A record of language codes mapped to their respective translation bundles.
+   * @param {string} [defaultLanguage='en'] - The default language to use when a translation is missing.
+   *
+   * @example
+   * ```typescript
+   * const service = new TranslationService({
+   *   en: new TranslationBundle({ "plugin.btn.show_plugin": "Show {{pluginTitle}}" }),
+   *   fr: new TranslationBundle({ "plugin.btn.show_plugin": "Afficher {{pluginTitle}}" })
+   * }, 'en');
+   * ```
+   */
+  constructor(translationBundles = {}, defaultLanguage = "en") {
+    /**
+     * Stores translation bundles for different languages.
+     */
+    __publicField(this, "translationBundles", {});
+    /**
+     * The default language used as a fallback when a translation is not found.
+     */
+    __publicField(this, "defaultLanguage");
+    this.translationBundles = translationBundles;
+    this.defaultLanguage = defaultLanguage;
+  }
+  /**
+   * Retrieves the translated text for a given key in the specified language.
+   * Falls back to the default language if the key is not found in the selected language.
+   *
+   * @param {string} key - The translation key.
+   * @param {string} language - The language code (e.g., "en", "fr").
+   * @param {Record<string, string>} [params={}] - Optional parameters to replace placeholders in the translation.
+   * @returns {string} The translated string, or the key itself if no translation is found.
+   *
+   * @example
+   * ```typescript
+   * const service = new TranslationService({
+   *   en: new TranslationBundle({ "plugin.btn.show_plugin": "Show {{pluginTitle}}" }),
+   *   fr: new TranslationBundle({ "plugin.btn.show_plugin": "Afficher {{pluginTitle}}" })
+   * }, 'en');
+   *
+   * service.translate("plugin.btn.show_plugin", "fr", { pluginTitle: "GraphiQL Explorer" });
+   * // Returns: "Afficher GraphiQL Explorer"
+   *
+   * service.translate("plugin.btn.unknown_key", "fr");
+   * // Falls back to English, returns: "plugin.btn.unknown_key"
+   * ```
+   */
+  translate(key, language, params = {}) {
+    var _a;
+    const translationBundle = this.translationBundles[language];
+    let translation = void 0;
+    if (translationBundle) {
+      translation = translationBundle.getTranslation(key);
+    }
+    translation || (translation = (_a = this.translationBundles[this.defaultLanguage]) == null ? void 0 : _a.getTranslation(key));
+    return translation ? this.applyParameters(translation, params) : key;
+  }
+  /**
+   * Replaces placeholders in a translation string with actual parameter values.
+   *
+   * @param {string} translation - The translation string with placeholders (e.g., "Show {{pluginTitle}}").
+   * @param {Record<string, string>} [parameters={}] - The key-value pairs for replacing placeholders.
+   * @returns {string} The translation with placeholders replaced.
+   *
+   * @example
+   * ```typescript
+   * const service = new TranslationService({
+   *   en: new TranslationBundle({ "plugin.btn.show_plugin": "Show {{pluginTitle}}" })
+   * }, 'en');
+   *
+   * service.translate("plugin.btn.show_plugin", "en", { pluginTitle: "GraphiQL Explorer" });
+   * // Returns: "Show GraphiQL Explorer"
+   * ```
+   */
+  applyParameters(translation, parameters = {}) {
+    if (!parameters || Object.keys(parameters).length === 0) {
+      return translation;
+    }
+    let filledTranslation = translation;
+    for (const key in parameters) {
+      filledTranslation = filledTranslation.replaceAll(`{{${key}}}`, parameters[key]);
+    }
+    return filledTranslation;
+  }
+  /**
+   * Retrieves the list of supported language codes.
+   *
+   * @returns {string[]} An array of supported language codes.
+   *
+   * @example
+   * ```typescript
+   * const service = new TranslationService({
+   *   en: new TranslationBundle({ "plugin.btn.show_plugin": "Show {{pluginTitle}}" }),
+   *   fr: new TranslationBundle({ "plugin.btn.show_plugin": "Afficher {{pluginTitle}}" })
+   * }, 'en');
+   *
+   * service.getSupportedLanguages(); // Returns: ["en", "fr"]
+   * ```
+   */
+  getSupportedLanguages() {
+    return Object.keys(this.translationBundles);
+  }
+}
+const TranslationContext = React.createContext({
+  currentLanguage: "en",
+  supportedLanguages: [],
+  setCurrentLanguage() {},
+  setSupportedLanguages() {},
+  translationService: new TranslationService()
+});
+const LanguageSelector = () => {
+  const {
+    currentLanguage,
+    setCurrentLanguage,
+    supportedLanguages,
+    translationService
+  } = React.useContext(TranslationContext);
+  const [isOpen, setOpen] = React.useState(false);
+  const buttonProps = {
+    type: "button",
+    className: "language-selector graphiql-button",
+    children: isOpen ? /* @__PURE__ */jsxRuntime.jsx(ChevronUpIcon, {
+      className: "graphiql-chevron-icon",
+      "aria-hidden": "true"
+    }) : /* @__PURE__ */jsxRuntime.jsx(ChevronDownIcon, {
+      className: "graphiql-chevron-icon",
+      "aria-hidden": "true"
+    }),
+    "aria-label": translationService.translate("dialog.settings.language.btn.language_selector.aria_label", currentLanguage)
+  };
+  return /* @__PURE__ */jsxRuntime.jsxs(DropdownMenu, {
+    onOpenChange: () => setOpen(isOpen),
+    children: [/* @__PURE__ */jsxRuntime.jsx(DropdownMenu.Button, {
+      ...buttonProps,
+      className: "language-selector graphiql-button",
+      children: currentLanguage.toUpperCase()
+    }), /* @__PURE__ */jsxRuntime.jsx(DropdownMenu.Content, {
+      align: "end",
+      className: "language-selector-content",
+      children: supportedLanguages.map(language => /* @__PURE__ */jsxRuntime.jsx(DropdownMenu.Item, {
+        onSelect: () => setCurrentLanguage(language),
+        "aria-label": translationService.translate("dialog.settings.language.btn.language_selector.item_aria_label", language),
+        children: language
+      }, language))
+    })]
+  });
+};
+const graphiql$1 = {
+  sidebar: {
+    btn: {
+      refresh_graphql_schema: "Re-fetch GraphQL schema",
+      open_short_keys_dialog: "Open short keys dialog",
+      open_settings_dialog: "Open settings dialog"
+    }
+  },
+  editor: {
+    tools: {
+      btn: {
+        variables: {
+          label: "Variables"
+        },
+        headers: {
+          label: "Headers"
+        },
+        open_editor: {
+          tooltip: "Show editor tools"
+        },
+        close_editor: {
+          tooltip: "Hide editor tools"
+        }
+      }
+    }
+  },
+  toolbar: {
+    btn: {
+      copy_query: {
+        tooltip: "Copy query (Shift-Ctrl-C)"
+      },
+      merge_fragment: {
+        tooltip: "Merge fragments into query (Shift-Ctrl-M)"
+      },
+      prettify_query: {
+        tooltip: "Prettify query (Shift-Ctrl-P)"
+      },
+      execute_query: {
+        tooltip: "Execute query (Ctrl-Enter)"
+      },
+      stop_query: {
+        tooltip: "Stop query (Ctrl-Enter)"
+      }
+    }
+  },
+  tab: {
+    default_title: "<untitled>",
+    btn: {
+      close_tab: {
+        tooltip: "Close tab"
+      },
+      add_tab: {
+        tooltip: "Add tab"
+      }
+    }
+  }
+};
+const dialog$1 = {
+  settings: {
+    title: "Settings",
+    language: {
+      title: "Language",
+      description: "Select your preferred language.",
+      btn: {
+        language_selector: {
+          aria_label: "Current language: English (click to change)",
+          item_aria_label: "Select English as the current language"
+        }
+      }
+    },
+    persisted_headers: {
+      title: "Persist headers",
+      description: 'Save headers upon reloading. <span class="graphiql-warning-text">Only enable if you trust this device.</span>',
+      btn: {
+        on: "On",
+        off: "Off"
+      }
+    },
+    theme: {
+      title: "Theme",
+      description: "Adjust how the interface appears.",
+      btn: {
+        system: "System",
+        light: "Light",
+        dark: "Dark"
+      }
+    },
+    clear_storage: {
+      title: "Clear storage",
+      description: "Remove all locally stored data and start fresh.",
+      btn: {
+        clear_data: "Clear data",
+        cleared_data: "Cleared data",
+        error: "Failed"
+      }
+    }
+  },
+  short_keys: {
+    title: "Short Keys",
+    header: {
+      short_key: "Short key",
+      "function": "Function"
+    },
+    "function": {
+      search_in_editor: "Search in editor",
+      search_in_documentation: "Search in documentation",
+      execute_query: "Execute query",
+      prettify_editors: "Prettify editors",
+      merge_fragments_into_definition: "Merge fragments definitions into operation definition",
+      copy_query: "Copy query",
+      refresh_schema: "Re-fetch schema using introspection"
+    },
+    footer: 'The editors use <a href="https://codemirror.net/5/doc/manual.html#keymaps" target="_blank" rel="noopener noreferrer" >CodeMirror Key Maps</a> that add more short keys. This instance of Graph<em>i</em>QL uses <code>{{keyMap}}</code>.'
+  }
+};
+const plugin$1 = {
+  history: {
+    title: "History",
+    name: {
+      placeholder: "Type a label",
+      tooltip: "Set active"
+    },
+    btn: {
+      save: "Save",
+      edit_label: {
+        tooltip: "Edit label"
+      },
+      add_favorite: {
+        tooltip: "Add favorite"
+      },
+      remove_favorite: {
+        tooltip: "Remove favorite"
+      },
+      delete_from_history: {
+        tooltip: "Delete from history"
+      },
+      clear: {
+        label: "Clear",
+        status: {
+          cleared: "Cleared",
+          failed_to_clear: "Failed to Clear"
+        }
+      }
+    }
+  },
+  documentation_explorer: {
+    title: "Documentation Explorer",
+    section: {
+      root_types: {
+        title: "Root Types"
+      },
+      fields: {
+        title: "Fields"
+      },
+      deprecated_fields: {
+        title: "Deprecated Fields"
+      },
+      type: {
+        title: "Type"
+      },
+      "arguments": {
+        title: "Arguments"
+      },
+      deprecated_arguments: {
+        title: "Deprecated Arguments"
+      },
+      "implements": {
+        title: "Implements"
+      },
+      implementations: {
+        title: "Implementations"
+      },
+      possible_types: {
+        title: "Possible Types"
+      },
+      enum_values: {
+        title: "Enum Values"
+      },
+      deprecated_enum_values: {
+        title: "Deprecated Enum Values"
+      },
+      directives: {
+        title: "Directives"
+      },
+      all_schema_types: {
+        title: "All Schema Types"
+      }
+    },
+    root_type: {
+      default_description: "A GraphQL schema provides a root type for each kind of operation.",
+      query: "query",
+      mutation: "mutation",
+      subscription: "subscription"
+    },
+    argument: {
+      deprecated: "Deprecated"
+    },
+    deprecation_reason: {
+      deprecated: "Deprecated"
+    },
+    search: {
+      no_result_found: "No results found",
+      other_results: "Other results"
+    },
+    btn: {
+      show_deprecated_arguments: "Show Deprecated Arguments",
+      show_deprecated_fields: "Show Deprecated Fields"
+    },
+    error: {
+      fetching_schema: "Error fetching schema",
+      invalid_schema: "Schema is invalid: {{errorMessage}}",
+      schema_not_available: "No GraphQL schema available"
+    }
+  },
+  graphiql_explorer: {
+    title: "GraphiQL Explorer"
+  },
+  "graphiql-plugin-code-exporter": {
+    title: "GraphiQL Code Exporter"
+  },
+  btn: {
+    show_plugin: "Show {{pluginTitle}}",
+    hide_plugin: "Hide {{pluginTitle}}"
+  }
+};
+const en = {
+  graphiql: graphiql$1,
+  dialog: dialog$1,
+  plugin: plugin$1
+};
+const graphiql = {
+  sidebar: {
+    btn: {
+      refresh_graphql_schema: "Recharger le schéma GraphQL",
+      open_short_keys_dialog: "Ouvrir la boîte de dialogue des raccourcis clavier",
+      open_settings_dialog: "Ouvrir la boîte de dialogue des paramètres"
+    }
+  },
+  editor: {
+    tools: {
+      btn: {
+        variables: {
+          label: "Variables"
+        },
+        headers: {
+          label: "En-têtes"
+        },
+        open_editor: {
+          tooltip: "Afficher les outils de l'éditeur"
+        },
+        close_editor: {
+          tooltip: "Masquer les outils de l'éditeur"
+        }
+      }
+    }
+  },
+  toolbar: {
+    btn: {
+      copy_query: {
+        tooltip: "Copier la requête (Shift-Ctrl-C)"
+      },
+      merge_fragment: {
+        tooltip: "Fusionner les fragments dans la requête (Shift-Ctrl-M)"
+      },
+      prettify_query: {
+        tooltip: "Embellir la requête (Shift-Ctrl-P)"
+      },
+      execute_query: {
+        tooltip: "Exécuter la requête (Ctrl-Entrée)"
+      },
+      stop_query: {
+        tooltip: "Arrêter la requête (Ctrl-Entrée)"
+      }
+    }
+  },
+  tab: {
+    default_title: "<sans titre>",
+    btn: {
+      close_tab: {
+        tooltip: "Fermer l'onglet"
+      },
+      add_tab: {
+        tooltip: "Ajouter un onglet"
+      }
+    }
+  }
+};
+const dialog = {
+  settings: {
+    title: "Paramètres",
+    language: {
+      title: "Langue",
+      description: "Sélectionnez votre langue préférée.",
+      btn: {
+        language_selector: {
+          aria_label: "Langue actuelle : Anglais (cliquez pour changer)",
+          item_aria_label: "Sélectionner le français comme langue actuelle"
+        }
+      }
+    },
+    persisted_headers: {
+      title: "Conserver les en-têtes",
+      description: 'Sauvegardez les en-têtes lors du rechargement. <span class="graphiql-warning-text">Activez uniquement si vous faites confiance à cet appareil.</span>',
+      btn: {
+        on: "Activé",
+        off: "Désactivé"
+      }
+    },
+    theme: {
+      title: "Thème",
+      description: "Ajustez l'apparence de l'interface.",
+      btn: {
+        system: "Système",
+        light: "Clair",
+        dark: "Sombre"
+      }
+    },
+    clear_storage: {
+      title: "Effacer le stockage",
+      description: "Supprimez toutes les données stockées localement et recommencez à zéro.",
+      btn: {
+        clear_data: "Effacer les données",
+        cleared_data: "Données effacées",
+        error: "Échec"
+      }
+    }
+  },
+  short_keys: {
+    title: "Raccourcis clavier",
+    header: {
+      short_key: "Raccourci",
+      "function": "Fonction"
+    },
+    "function": {
+      search_in_editor: "Rechercher dans l'éditeur",
+      search_in_documentation: "Rechercher dans la documentation",
+      execute_query: "Exécuter la requête",
+      prettify_editors: "Embellir les éditeurs",
+      merge_fragments_into_definition: "Fusionner les fragments dans la définition de l'opération",
+      copy_query: "Copier la requête",
+      refresh_schema: "Rafraîchir le schéma avec l'introspection"
+    },
+    footer: 'Les éditeurs utilisent les <a href="https://codemirror.net/5/doc/manual.html#keymaps" target="_blank" rel="noopener noreferrer">mappages de touches de CodeMirror</a>, qui ajoutent davantage de raccourcis clavier. Cette instance de Graph<em>i</em>QL utilise <code>{{keyMap}}</code>.'
+  }
+};
+const plugin = {
+  history: {
+    title: "Historique",
+    name: {
+      placeholder: "Saisissez une étiquette",
+      tooltip: "Définir comme actif"
+    },
+    btn: {
+      save: "Enregistrer",
+      edit_label: {
+        tooltip: "Modifier l'étiquette"
+      },
+      add_favorite: {
+        tooltip: "Ajouter aux favoris"
+      },
+      remove_favorite: {
+        tooltip: "Retirer des favoris"
+      },
+      delete_from_history: {
+        tooltip: "Supprimer de l'historique"
+      },
+      clear: {
+        label: "Effacer",
+        status: {
+          cleared: "Effacé",
+          failed_to_clear: "Échec de l'effacement"
+        }
+      }
+    }
+  },
+  documentation_explorer: {
+    title: "Explorateur de documentation",
+    section: {
+      root_types: {
+        title: "Types Racines"
+      },
+      fields: {
+        title: "Champs"
+      },
+      deprecated_fields: {
+        title: "Champs Obsolètes"
+      },
+      type: {
+        title: "Type"
+      },
+      "arguments": {
+        title: "Arguments"
+      },
+      deprecated_arguments: {
+        title: "Arguments Obsolètes"
+      },
+      "implements": {
+        title: "Implémente"
+      },
+      implementations: {
+        title: "Implémentations"
+      },
+      possible_types: {
+        title: "Types Possibles"
+      },
+      enum_values: {
+        title: "Valeurs Enum"
+      },
+      deprecated_enum_values: {
+        title: "Valeurs Enum Obsolètes"
+      },
+      directives: {
+        title: "Directives"
+      },
+      all_schema_types: {
+        title: "Tous les Types de Schéma"
+      }
+    },
+    root_type: {
+      default_description: "Un schéma GraphQL fournit un type racine pour chaque type d'opération.",
+      query: "requête",
+      mutation: "mutation",
+      subscription: "abonnement"
+    },
+    argument: {
+      deprecated: "Obsolète"
+    },
+    deprecation_reason: {
+      deprecated: "Obsolète"
+    },
+    search: {
+      no_result_found: "Aucun résultat trouvé",
+      other_results: "Autres résultats"
+    },
+    btn: {
+      show_deprecated_arguments: "Afficher les arguments obsolètes",
+      show_deprecated_fields: "Afficher les champs obsolètes"
+    },
+    error: {
+      fetching_schema: "Erreur lors de la récupération du schéma",
+      invalid_schema: "Le schéma est invalide : {{errorMessage}}",
+      schema_not_available: "Aucun schéma GraphQL disponible"
+    }
+  },
+  graphiql_explorer: {
+    title: "Explorateur GraphiQL"
+  },
+  "graphiql-plugin-code-exporter": {
+    title: "Exportateur de Code GraphiQL"
+  },
+  btn: {
+    show_plugin: "Afficher {{pluginTitle}}",
+    hide_plugin: "Masquer {{pluginTitle}}"
+  }
+};
+const fr = {
+  graphiql,
+  dialog,
+  plugin
+};
+class TranslationBundle {
+  /**
+   * Creates a new TranslationBundle instance.
+   * @param {Record<string, string | Translation>} translationBundle - The initial translation bundle.
+   */
+  constructor(translationBundle) {
+    /**
+     * Stores the flattened translation key-value pairs.
+     *
+     * Example:
+     * {
+     *   "graphiql.editor.btn.headers.label": "Headers"
+     * }
+     */
+    __publicField(this, "translationBundle");
+    this.translationBundle = this.flattenObject(translationBundle);
+  }
+  /**
+   * Retrieves a translation string by key.
+   *
+   * @param {string} key - The translation key.
+   * @returns {string | undefined} The translated string, or undefined if the key is not found.
+   */
+  getTranslation(key) {
+    return this.translationBundle[key];
+  }
+  /**
+   * Merges a new translation bundle into the existing one.
+   *
+   * @param {Record<string, string | Translation>} translationBundle - The translation bundle to merge.
+   */
+  merge(translationBundle) {
+    this.translationBundle = {
+      ...this.translationBundle,
+      ...this.flattenObject(translationBundle)
+    };
+  }
+  /**
+   * Flattens a nested translation object into a key-value map.
+   *
+   * @param {any} obj - The object to flatten.
+   * @param {string} [prefix=''] - The prefix for nested keys.
+   * @returns {Record<string, string>} The flattened object.
+   *
+   * @example
+   * If the <code>obj</code> is:
+   * ```json
+   * {
+   *   "editor": {
+   *     "btn": {
+   *       "headers": {
+   *         "label": "Headers"
+   *       }
+   *     }
+   *   }
+   * }
+   * ```
+   * then the result is:
+   * ```json
+   * {
+   *   "editor.btn.headers.label": "Headers"
+   * }
+   * ```
+   */
+  flattenObject(obj, prefix = "") {
+    const result = {};
+    for (const key in obj) {
+      const newKey = prefix ? `${prefix}.${key}` : key;
+      if (typeof obj[key] === "object" && obj[key] !== null && !Array.isArray(obj[key])) {
+        Object.assign(result, this.flattenObject(obj[key], newKey));
+      } else {
+        result[newKey] = obj[key];
+      }
+    }
+    return result;
+  }
+}
+const TranslationProvider = props => {
+  const translationService = new TranslationService(getTranslationBundles(props.translations));
+  const allSupportedLanguages = translationService.getSupportedLanguages();
+  const selectedLanguage = allSupportedLanguages.find(language => language === props.selectedLanguage);
+  const [currentLanguage, setCurrentLanguage] = React.useState(selectedLanguage || "en");
+  const [supportedLanguages, setSupportedLanguages] = React.useState(allSupportedLanguages);
+  React.useEffect(() => {
+    if (selectedLanguage && selectedLanguage !== currentLanguage) {
+      setCurrentLanguage(selectedLanguage);
+    }
+  }, [selectedLanguage]);
+  return /* @__PURE__ */jsxRuntime.jsx(TranslationContext.Provider, {
+    value: {
+      currentLanguage,
+      supportedLanguages,
+      setCurrentLanguage,
+      setSupportedLanguages,
+      translationService
+    },
+    children: props.children
+  });
+};
+const getTranslationBundles = translations => {
+  const translationBundles = getInternalTranslationBundles();
+  if (!translations) {
+    return translationBundles;
+  }
+  for (const language of Object.keys(translations)) {
+    const internalTranslationBundle = translationBundles[language];
+    const translationConfiguration = translations[language];
+    if (internalTranslationBundle) {
+      internalTranslationBundle.merge(translationConfiguration);
+    } else {
+      translationBundles[language] = new TranslationBundle(translationConfiguration);
+    }
+  }
+  return translationBundles;
+};
+const getInternalTranslationBundles = () => {
+  const translationBundles = {};
+  translationBundles.en = new TranslationBundle(en);
+  translationBundles.fr = new TranslationBundle(fr);
+  return translationBundles;
+};
+const TranslateText = ({
+  translationKey,
+  translationParams
+}) => {
+  const {
+    currentLanguage,
+    translationService
+  } = React.useContext(TranslationContext);
+  const translation = translationService.translate(translationKey, currentLanguage, translationParams);
+  return translation ? /* @__PURE__ */jsxRuntime.jsx("span", {
+    dangerouslySetInnerHTML: {
+      __html: translation
+    }
+  }) : /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: "translationKey"
+  });
+};
 const TabRoot = React.forwardRef(({
   isActive,
   value,
@@ -69436,17 +70192,24 @@ const TabButton = React.forwardRef((props, ref) => /* @__PURE__ */jsxRuntime.jsx
   children: props.children
 }));
 TabButton.displayName = "Tab.Button";
-const TabClose = React.forwardRef((props, ref) => /* @__PURE__ */jsxRuntime.jsx(Tooltip, {
-  label: "Close Tab",
-  children: /* @__PURE__ */jsxRuntime.jsx(UnStyledButton, {
-    "aria-label": "Close Tab",
-    ...props,
-    ref,
-    type: "button",
-    className: clsx.clsx("graphiql-tab-close", props.className),
-    children: /* @__PURE__ */jsxRuntime.jsx(CloseIcon, {})
-  })
-}));
+const TabClose = React.forwardRef((props, ref) => {
+  const {
+    currentLanguage,
+    translationService
+  } = React.useContext(TranslationContext);
+  const btnCloseTabeTooltip = translationService.translate("graphiql.tab.btn.close_tab.tooltip", currentLanguage);
+  return /* @__PURE__ */jsxRuntime.jsx(Tooltip, {
+    label: btnCloseTabeTooltip,
+    children: /* @__PURE__ */jsxRuntime.jsx(UnStyledButton, {
+      "aria-label": btnCloseTabeTooltip,
+      ...props,
+      ref,
+      type: "button",
+      className: clsx.clsx("graphiql-tab-close", props.className),
+      children: /* @__PURE__ */jsxRuntime.jsx(CloseIcon, {})
+    })
+  });
+});
 TabClose.displayName = "Tab.Close";
 const Tab = createComponentGroup(TabRoot, {
   Button: TabButton,
@@ -69539,20 +70302,28 @@ function History() {
       setClearStatus("error");
     }
   }, [deleteFromHistory, items]);
+  const {
+    currentLanguage,
+    translationService
+  } = React.useContext(TranslationContext);
   return /* @__PURE__ */jsxRuntime.jsxs("section", {
-    "aria-label": "History",
+    "aria-label": translationService.translate("plugin.history.title", currentLanguage),
     className: "graphiql-history",
     children: [/* @__PURE__ */jsxRuntime.jsxs("div", {
       className: "graphiql-history-header",
-      children: ["History", (clearStatus || items.length > 0) && /* @__PURE__ */jsxRuntime.jsx(Button$1, {
+      children: [/* @__PURE__ */jsxRuntime.jsx(TranslateText, {
+        translationKey: "plugin.history.title"
+      }), (clearStatus || items.length > 0) && /* @__PURE__ */jsxRuntime.jsx(Button$1, {
         type: "button",
         state: clearStatus || void 0,
         disabled: !items.length,
         onClick: handleClearStatus,
         children: {
-          success: "Cleared",
-          error: "Failed to Clear"
-        }[clearStatus] || "Clear"
+          success: translationService.translate("plugin.history.btn.clear.status.cleared", currentLanguage),
+          error: translationService.translate("plugin.history.btn.clear.status.failed_to_clear", currentLanguage)
+        }[clearStatus] || /* @__PURE__ */jsxRuntime.jsx(TranslateText, {
+          translationKey: "plugin.history.btn.clear.label"
+        })
       })]
     }), Boolean(favorites.length) && /* @__PURE__ */jsxRuntime.jsx("ul", {
       className: "graphiql-history-items",
@@ -69635,6 +70406,14 @@ function HistoryItem(props) {
     e.stopPropagation();
     toggleFavorite(props.item);
   }, [props.item, toggleFavorite]);
+  const {
+    currentLanguage,
+    translationService
+  } = React.useContext(TranslationContext);
+  const pluginTitle = translationService.translate("plugin.history.name.tooltip", currentLanguage);
+  const btnEditLabel = translationService.translate("plugin.history.btn.edit_label.tooltip", currentLanguage);
+  const btnFavoriteTooltip = translationService.translate(props.item.favorite ? "plugin.history.btn.remove_favorite.tooltip" : "plugin.history.btn.add_favorite.tooltip", currentLanguage);
+  const btnDeleteFromTooltip = translationService.translate("plugin.history.btn.delete_from_history.tooltip", currentLanguage);
   return /* @__PURE__ */jsxRuntime.jsx("li", {
     className: clsx.clsx("graphiql-history-item", isEditable && "editable"),
     children: isEditable ? /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -69653,12 +70432,14 @@ function HistoryItem(props) {
             });
           }
         },
-        placeholder: "Type a label"
+        placeholder: translationService.translate("plugin.history.name.placeholder", currentLanguage)
       }), /* @__PURE__ */jsxRuntime.jsx(UnStyledButton, {
         type: "button",
         ref: buttonRef,
         onClick: handleSave,
-        children: "Save"
+        children: /* @__PURE__ */jsxRuntime.jsx(TranslateText, {
+          translationKey: "plugin.history.btn.save"
+        })
       }), /* @__PURE__ */jsxRuntime.jsx(UnStyledButton, {
         type: "button",
         ref: buttonRef,
@@ -69667,32 +70448,32 @@ function HistoryItem(props) {
       })]
     }) : /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/* @__PURE__ */jsxRuntime.jsx(Tooltip, {
-        label: "Set active",
+        label: pluginTitle,
         children: /* @__PURE__ */jsxRuntime.jsx(UnStyledButton, {
           type: "button",
           className: "graphiql-history-item-label",
           onClick: handleHistoryItemClick,
-          "aria-label": "Set active",
+          "aria-label": pluginTitle,
           children: displayName
         })
       }), /* @__PURE__ */jsxRuntime.jsx(Tooltip, {
-        label: "Edit label",
+        label: btnEditLabel,
         children: /* @__PURE__ */jsxRuntime.jsx(UnStyledButton, {
           type: "button",
           className: "graphiql-history-item-action",
           onClick: handleEditLabel,
-          "aria-label": "Edit label",
+          "aria-label": btnEditLabel,
           children: /* @__PURE__ */jsxRuntime.jsx(PenIcon, {
             "aria-hidden": "true"
           })
         })
       }), /* @__PURE__ */jsxRuntime.jsx(Tooltip, {
-        label: props.item.favorite ? "Remove favorite" : "Add favorite",
+        label: btnFavoriteTooltip,
         children: /* @__PURE__ */jsxRuntime.jsx(UnStyledButton, {
           type: "button",
           className: "graphiql-history-item-action",
           onClick: handleToggleFavorite,
-          "aria-label": props.item.favorite ? "Remove favorite" : "Add favorite",
+          "aria-label": btnFavoriteTooltip,
           children: props.item.favorite ? /* @__PURE__ */jsxRuntime.jsx(StarFilledIcon, {
             "aria-hidden": "true"
           }) : /* @__PURE__ */jsxRuntime.jsx(StarIcon, {
@@ -69700,12 +70481,12 @@ function HistoryItem(props) {
           })
         })
       }), /* @__PURE__ */jsxRuntime.jsx(Tooltip, {
-        label: "Delete from history",
+        label: btnDeleteFromTooltip,
         children: /* @__PURE__ */jsxRuntime.jsx(UnStyledButton, {
           type: "button",
           className: "graphiql-history-item-action",
           onClick: handleDeleteItemFromHistory,
-          "aria-label": "Delete from history",
+          "aria-label": btnDeleteFromTooltip,
           children: /* @__PURE__ */jsxRuntime.jsx(TrashIcon, {
             "aria-hidden": "true"
           })
@@ -70386,7 +71167,9 @@ function Argument({
       className: "graphiql-doc-explorer-argument-deprecation",
       children: [/* @__PURE__ */jsxRuntime.jsx("div", {
         className: "graphiql-doc-explorer-argument-deprecation-label",
-        children: "Deprecated"
+        children: /* @__PURE__ */jsxRuntime.jsx(TranslateText, {
+          translationKey: "plugin.documentation_explorer.argument.deprecated"
+        })
       }), /* @__PURE__ */jsxRuntime.jsx(MarkdownContent, {
         type: "deprecation",
         children: arg.deprecationReason
@@ -70400,7 +71183,9 @@ function DeprecationReason(props) {
     className: "graphiql-doc-explorer-deprecation",
     children: [/* @__PURE__ */jsxRuntime.jsx("div", {
       className: "graphiql-doc-explorer-deprecation-label",
-      children: "Deprecated"
+      children: /* @__PURE__ */jsxRuntime.jsx(TranslateText, {
+        translationKey: "plugin.documentation_explorer.deprecation_reason.deprecated"
+      })
     }), /* @__PURE__ */jsxRuntime.jsx(MarkdownContent, {
       type: "deprecation",
       onlyShowFirstChild: (_props$preview = props.preview) !== null && _props$preview !== void 0 ? _props$preview : true,
@@ -70421,7 +71206,9 @@ function ExplorerSection(props) {
   return /* @__PURE__ */jsxRuntime.jsxs("div", {
     children: [/* @__PURE__ */jsxRuntime.jsxs("div", {
       className: "graphiql-doc-explorer-section-title",
-      children: [/* @__PURE__ */jsxRuntime.jsx(Icon2, {}), props.title]
+      children: [/* @__PURE__ */jsxRuntime.jsx(Icon2, {}), /* @__PURE__ */jsxRuntime.jsx(TranslateText, {
+        translationKey: `plugin.documentation_explorer.section.${normalizeJsonKey(props.title)}.title`
+      })]
     }), /* @__PURE__ */jsxRuntime.jsx("div", {
       className: "graphiql-doc-explorer-section-content",
       children: props.children
@@ -70443,6 +71230,9 @@ const TYPE_TO_ICON = {
   Type: TypeIcon,
   "All Schema Types": TypeIcon
 };
+const normalizeJsonKey = (key = "") => {
+  return key.trim().replaceAll(" ", "_").toLowerCase();
+};
 function FieldDocumentation(props) {
   return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [props.field.description ? /* @__PURE__ */jsxRuntime.jsx(MarkdownContent, {
@@ -70496,7 +71286,9 @@ function Arguments({
     }) : /* @__PURE__ */jsxRuntime.jsx(Button$1, {
       type: "button",
       onClick: handleShowDeprecated,
-      children: "Show Deprecated Arguments"
+      children: /* @__PURE__ */jsxRuntime.jsx(TranslateText, {
+        translationKey: "plugin.documentation_explorer.btn.show_deprecated_arguments"
+      })
     }) : null]
   });
 }
@@ -70525,29 +71317,39 @@ function SchemaDocumentation(props) {
   const typeMap = props.schema.getTypeMap();
   const ignoreTypesInAllSchema = [queryType == null ? void 0 : queryType.name, mutationType == null ? void 0 : mutationType.name, subscriptionType == null ? void 0 : subscriptionType.name];
   return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/* @__PURE__ */jsxRuntime.jsx(MarkdownContent, {
+    children: [props.schema.description ? /* @__PURE__ */jsxRuntime.jsx(MarkdownContent, {
       type: "description",
-      children: props.schema.description || "A GraphQL schema provides a root type for each kind of operation."
+      children: props.schema.description
+    }) : /* @__PURE__ */jsxRuntime.jsx("div", {
+      children: /* @__PURE__ */jsxRuntime.jsx(TranslateText, {
+        translationKey: "plugin.documentation_explorer.root_type.default_description"
+      })
     }), /* @__PURE__ */jsxRuntime.jsxs(ExplorerSection, {
       title: "Root Types",
       children: [queryType ? /* @__PURE__ */jsxRuntime.jsxs("div", {
         children: [/* @__PURE__ */jsxRuntime.jsx("span", {
           className: "graphiql-doc-explorer-root-type",
-          children: "query"
+          children: /* @__PURE__ */jsxRuntime.jsx(TranslateText, {
+            translationKey: "plugin.documentation_explorer.root_type.query"
+          })
         }), ": ", /* @__PURE__ */jsxRuntime.jsx(TypeLink, {
           type: queryType
         })]
       }) : null, mutationType && /* @__PURE__ */jsxRuntime.jsxs("div", {
         children: [/* @__PURE__ */jsxRuntime.jsx("span", {
           className: "graphiql-doc-explorer-root-type",
-          children: "mutation"
+          children: /* @__PURE__ */jsxRuntime.jsx(TranslateText, {
+            translationKey: "plugin.documentation_explorer.root_type.mutation"
+          })
         }), ": ", /* @__PURE__ */jsxRuntime.jsx(TypeLink, {
           type: mutationType
         })]
       }), subscriptionType && /* @__PURE__ */jsxRuntime.jsxs("div", {
         children: [/* @__PURE__ */jsxRuntime.jsx("span", {
           className: "graphiql-doc-explorer-root-type",
-          children: "subscription"
+          children: /* @__PURE__ */jsxRuntime.jsx(TranslateText, {
+            translationKey: "plugin.documentation_explorer.root_type.subscription"
+          })
         }), ": ", /* @__PURE__ */jsxRuntime.jsx(TypeLink, {
           type: subscriptionType
         })]
@@ -70653,7 +71455,9 @@ function Search() {
       "data-cy": "doc-explorer-list",
       children: [results.within.length + results.types.length + results.fields.length === 0 ? /* @__PURE__ */jsxRuntime.jsx("li", {
         className: "graphiql-doc-explorer-search-empty",
-        children: "No results found"
+        children: /* @__PURE__ */jsxRuntime.jsx(TranslateText, {
+          translationKey: "plugin.documentation_explorer.search.no_result_found"
+        })
       }) : results.within.map((result, i) => /* @__PURE__ */jsxRuntime.jsx(react.Combobox.Option, {
         value: result,
         "data-cy": "doc-explorer-option",
@@ -70663,7 +71467,9 @@ function Search() {
         })
       }, `within-${i}`)), results.within.length > 0 && results.types.length + results.fields.length > 0 ? /* @__PURE__ */jsxRuntime.jsx("div", {
         className: "graphiql-doc-explorer-search-divider",
-        children: "Other results"
+        children: /* @__PURE__ */jsxRuntime.jsx(TranslateText, {
+          translationKey: "plugin.documentation_explorer.search.other_results"
+        })
       }) : null, results.types.map((result, i) => /* @__PURE__ */jsxRuntime.jsx(react.Combobox.Option, {
         value: result,
         "data-cy": "doc-explorer-option",
@@ -70870,7 +71676,9 @@ function Fields({
     }) : /* @__PURE__ */jsxRuntime.jsx(Button$1, {
       type: "button",
       onClick: handleShowDeprecated,
-      children: "Show Deprecated Fields"
+      children: /* @__PURE__ */jsxRuntime.jsx(TranslateText, {
+        translationKey: "plugin.documentation_explorer.btn.show_deprecated_fields"
+      })
     }) : null]
   });
 }
@@ -71006,19 +71814,28 @@ function DocExplorer() {
   if (fetchError) {
     content = /* @__PURE__ */jsxRuntime.jsx("div", {
       className: "graphiql-doc-explorer-error",
-      children: "Error fetching schema"
+      children: /* @__PURE__ */jsxRuntime.jsx(TranslateText, {
+        translationKey: "plugin.documentation_explorer.error.fetching_schema"
+      })
     });
   } else if (validationErrors.length > 0) {
-    content = /* @__PURE__ */jsxRuntime.jsxs("div", {
+    content = /* @__PURE__ */jsxRuntime.jsx("div", {
       className: "graphiql-doc-explorer-error",
-      children: ["Schema is invalid: ", validationErrors[0].message]
+      children: /* @__PURE__ */jsxRuntime.jsx(TranslateText, {
+        translationKey: "plugin.documentation_explorer.error.invalid_schema",
+        translationParams: {
+          errorMessage: validationErrors[0].message
+        }
+      })
     });
   } else if (isFetching) {
     content = /* @__PURE__ */jsxRuntime.jsx(Spinner, {});
   } else if (!schema) {
     content = /* @__PURE__ */jsxRuntime.jsx("div", {
       className: "graphiql-doc-explorer-error",
-      children: "No GraphQL schema available"
+      children: /* @__PURE__ */jsxRuntime.jsx(TranslateText, {
+        translationKey: "plugin.documentation_explorer.error.schema_not_available"
+      })
     });
   } else if (explorerNavStack.length === 1) {
     content = /* @__PURE__ */jsxRuntime.jsx(SchemaDocumentation, {
@@ -71065,6 +71882,7 @@ function DocExplorer() {
   });
 }
 const DOC_EXPLORER_PLUGIN = {
+  id: "documentation_explorer",
   title: "Documentation Explorer",
   icon: function Icon() {
     const pluginContext = usePluginContext();
@@ -71073,6 +71891,7 @@ const DOC_EXPLORER_PLUGIN = {
   content: DocExplorer
 };
 const HISTORY_PLUGIN = {
+  id: "history",
   title: "History",
   icon: HistoryIcon,
   content: History
@@ -71095,22 +71914,22 @@ function PluginContextProvider(props) {
       pluginList.push(HISTORY_PLUGIN);
       pluginTitles[HISTORY_PLUGIN.title] = true;
     }
-    for (const plugin of props.plugins || []) {
-      if (typeof plugin.title !== "string" || !plugin.title) {
+    for (const plugin2 of props.plugins || []) {
+      if (typeof plugin2.title !== "string" || !plugin2.title) {
         throw new Error("All GraphiQL plugins must have a unique title");
       }
-      if (pluginTitles[plugin.title]) {
-        throw new Error(`All GraphiQL plugins must have a unique title, found two plugins with the title '${plugin.title}'`);
+      if (pluginTitles[plugin2.title]) {
+        throw new Error(`All GraphiQL plugins must have a unique title, found two plugins with the title '${plugin2.title}'`);
       } else {
-        pluginList.push(plugin);
-        pluginTitles[plugin.title] = true;
+        pluginList.push(plugin2);
+        pluginTitles[plugin2.title] = true;
       }
     }
     return pluginList;
   }, [hasExplorerContext, hasHistoryContext, props.plugins]);
   const [visiblePlugin, internalSetVisiblePlugin] = React.useState(() => {
     const storedValue = storage == null ? void 0 : storage.get(STORAGE_KEY$4);
-    const pluginForStoredValue = plugins.find(plugin => plugin.title === storedValue);
+    const pluginForStoredValue = plugins.find(plugin2 => plugin2.title === storedValue);
     if (pluginForStoredValue) {
       return pluginForStoredValue;
     }
@@ -71120,14 +71939,14 @@ function PluginContextProvider(props) {
     if (!props.visiblePlugin) {
       return null;
     }
-    return plugins.find(plugin => (typeof props.visiblePlugin === "string" ? plugin.title : plugin) === props.visiblePlugin) || null;
+    return plugins.find(plugin2 => (typeof props.visiblePlugin === "string" ? plugin2.title : plugin2) === props.visiblePlugin) || null;
   });
   const {
     onTogglePluginVisibility,
     children
   } = props;
-  const setVisiblePlugin = React.useCallback(plugin => {
-    const newVisiblePlugin = plugin ? plugins.find(p => (typeof plugin === "string" ? p.title : p) === plugin) || null : null;
+  const setVisiblePlugin = React.useCallback(plugin2 => {
+    const newVisiblePlugin = plugin2 ? plugins.find(p => (typeof plugin2 === "string" ? p.title : p) === plugin2) || null : null;
     internalSetVisiblePlugin(current => {
       if (newVisiblePlugin === current) {
         return current;
@@ -71153,7 +71972,7 @@ function PluginContextProvider(props) {
 }
 const usePluginContext = createContextHook(PluginContext);
 const STORAGE_KEY$4 = "visiblePlugin";
-function onHasCompletion(_cm, data, schema, explorer, plugin, callback) {
+function onHasCompletion(_cm, data, schema, explorer, plugin2, callback) {
   void importCodeMirror([], {
     useCommonAddons: false
   }).then(CodeMirror => {
@@ -71285,13 +72104,13 @@ function onHasCompletion(_cm, data, schema, explorer, plugin, callback) {
     });
   });
   function onClickHintInformation(event) {
-    if (!schema || !explorer || !plugin || !(event.currentTarget instanceof HTMLElement)) {
+    if (!schema || !explorer || !plugin2 || !(event.currentTarget instanceof HTMLElement)) {
       return;
     }
     const typeName = event.currentTarget.textContent || "";
     const type = schema.getType(typeName);
     if (type) {
-      plugin.setVisiblePlugin(DOC_EXPLORER_PLUGIN);
+      plugin2.setVisiblePlugin(DOC_EXPLORER_PLUGIN);
       explorer.push({
         name: type.name,
         def: type
@@ -71358,13 +72177,13 @@ function useCompletion(editor, callback, caller) {
     caller
   });
   const explorer = useExplorerContext();
-  const plugin = usePluginContext();
+  const plugin2 = usePluginContext();
   React.useEffect(() => {
     if (!editor) {
       return;
     }
     const handleCompletion = (instance, changeObj) => {
-      onHasCompletion(instance, changeObj, schema, explorer, plugin, type => {
+      onHasCompletion(instance, changeObj, schema, explorer, plugin2, type => {
         callback == null ? void 0 : callback({
           kind: "Type",
           type,
@@ -71378,7 +72197,7 @@ function useCompletion(editor, callback, caller) {
     return () => editor.off(
     // @ts-expect-error @TODO additional args for hasCompletion event
     "hasCompletion", handleCompletion);
-  }, [callback, editor, explorer, plugin, schema]);
+  }, [callback, editor, explorer, plugin2, schema]);
 }
 function useKeyMap(editor, keys, callback) {
   React.useEffect(() => {
@@ -71738,7 +72557,7 @@ function useQueryEditor({
   const executionContext = useExecutionContext();
   const storage = useStorageContext();
   const explorer = useExplorerContext();
-  const plugin = usePluginContext();
+  const plugin2 = usePluginContext();
   const copy = useCopyQuery({
     caller: caller || useQueryEditor,
     onCopyQuery
@@ -71754,10 +72573,10 @@ function useQueryEditor({
   const onClickReferenceRef = React.useRef(() => {});
   React.useEffect(() => {
     onClickReferenceRef.current = reference => {
-      if (!explorer || !plugin) {
+      if (!explorer || !plugin2) {
         return;
       }
-      plugin.setVisiblePlugin(DOC_EXPLORER_PLUGIN);
+      plugin2.setVisiblePlugin(DOC_EXPLORER_PLUGIN);
       switch (reference.kind) {
         case "Type":
           {
@@ -71798,7 +72617,7 @@ function useQueryEditor({
       }
       onClickReference == null ? void 0 : onClickReference(reference);
     };
-  }, [explorer, onClickReference, plugin]);
+  }, [explorer, onClickReference, plugin2]);
   React.useEffect(() => {
     let isActive = true;
     void importCodeMirror([Promise.resolve().then(() => __webpack_require__(/*! ./comment.cjs.js */ "../../graphiql-react/dist/comment.cjs.js")).then(n => n.comment), Promise.resolve().then(() => __webpack_require__(/*! ./search.cjs.js */ "../../graphiql-react/dist/search.cjs.js")).then(n => n.search), Promise.resolve().then(() => __webpack_require__(/*! ./hint.cjs.js */ "../../graphiql-react/dist/hint.cjs.js")), Promise.resolve().then(() => __webpack_require__(/*! ./lint.cjs2.js */ "../../graphiql-react/dist/lint.cjs2.js")), Promise.resolve().then(() => __webpack_require__(/*! ./info.cjs.js */ "../../graphiql-react/dist/info.cjs.js")), Promise.resolve().then(() => __webpack_require__(/*! ./jump.cjs.js */ "../../graphiql-react/dist/jump.cjs.js")), Promise.resolve().then(() => __webpack_require__(/*! ./mode.cjs.js */ "../../graphiql-react/dist/mode.cjs.js"))]).then(CodeMirror => {
@@ -72058,7 +72877,8 @@ function getDefaultTabState({
   query,
   variables,
   storage,
-  shouldPersistHeaders
+  shouldPersistHeaders,
+  defaultTabTitle
 }) {
   const storedState = storage == null ? void 0 : storage.get(STORAGE_KEY$2);
   try {
@@ -72092,7 +72912,7 @@ function getDefaultTabState({
         parsed.tabs.push({
           id: guid(),
           hash: expectedHash,
-          title: operationName || DEFAULT_TITLE,
+          title: operationName || defaultTabTitle || DEFAULT_TITLE,
           query,
           variables,
           headers,
@@ -72189,7 +73009,8 @@ function useSetEditorValues({
 function createTab({
   query = null,
   variables = null,
-  headers = null
+  headers = null,
+  defaultTabTitle = void 0
 } = {}) {
   return {
     id: guid(),
@@ -72198,7 +73019,7 @@ function createTab({
       variables,
       headers
     }),
-    title: query && fuzzyExtractOperationName(query) || DEFAULT_TITLE,
+    title: query && fuzzyExtractOperationName(query) || defaultTabTitle || DEFAULT_TITLE,
     query,
     variables,
     headers,
@@ -72220,7 +73041,7 @@ function setPropertiesInActiveTab(state, partialTab) {
       return {
         ...newTab,
         hash: hashFromTabContents(newTab),
-        title: newTab.operationName || (newTab.query ? fuzzyExtractOperationName(newTab.query) : void 0) || DEFAULT_TITLE
+        title: newTab.operationName || (newTab.query ? fuzzyExtractOperationName(newTab.query) : void 0) || newTab.title || DEFAULT_TITLE
       };
     })
   };
@@ -72382,6 +73203,10 @@ function EditorContextProvider(props) {
     storage,
     shouldPersistHeaders
   });
+  const {
+    currentLanguage,
+    translationService
+  } = React.useContext(TranslationContext);
   const [initialState] = React.useState(() => {
     var _ref13, _props$query, _ref14, _props$variables, _ref15, _props$headers, _props$response, _ref16, _ref17;
     const query = (_ref13 = (_props$query = props.query) !== null && _props$query !== void 0 ? _props$query : storage == null ? void 0 : storage.get(STORAGE_KEY_QUERY)) !== null && _ref13 !== void 0 ? _ref13 : null;
@@ -72454,7 +73279,8 @@ function EditorContextProvider(props) {
       const updated = {
         tabs: [...updatedValues.tabs, createTab({
           headers: defaultHeaders,
-          query: defaultQuery !== null && defaultQuery !== void 0 ? defaultQuery : DEFAULT_QUERY
+          query: defaultQuery !== null && defaultQuery !== void 0 ? defaultQuery : DEFAULT_QUERY,
+          defaultTabTitle: translationService.translate("graphiql.tab.default_title", currentLanguage)
         })],
         activeTabIndex: updatedValues.tabs.length
       };
@@ -72463,7 +73289,7 @@ function EditorContextProvider(props) {
       onTabChange == null ? void 0 : onTabChange(updated);
       return updated;
     });
-  }, [defaultHeaders, defaultQuery, onTabChange, setEditorValues, storeTabs, synchronizeActiveTabValues]);
+  }, [defaultHeaders, defaultQuery, onTabChange, setEditorValues, storeTabs, synchronizeActiveTabValues, currentLanguage]);
   const changeTab = React.useCallback(index => {
     setTabState(current => {
       const updated = {
@@ -73094,9 +73920,14 @@ const HIDE_SECOND = "hide-second";
 const ToolbarButton = React.forwardRef(({
   label,
   onClick,
+  labelKey,
   ...props
 }, ref) => {
   const [error, setError] = React.useState(null);
+  const {
+    currentLanguage,
+    translationService
+  } = React.useContext(TranslationContext);
   const handleClick = React.useCallback(event => {
     try {
       onClick == null ? void 0 : onClick(event);
@@ -73105,15 +73936,16 @@ const ToolbarButton = React.forwardRef(({
       setError(err instanceof Error ? err : new Error(`Toolbar button click failed: ${err}`));
     }
   }, [onClick]);
+  const translatedLabel = label || (labelKey ? translationService.translate(labelKey, currentLanguage) : "");
   return /* @__PURE__ */jsxRuntime.jsx(Tooltip, {
-    label,
+    label: translatedLabel,
     children: /* @__PURE__ */jsxRuntime.jsx(UnStyledButton, {
       ...props,
       ref,
       type: "button",
       className: clsx.clsx("graphiql-toolbar-button", error && "error", props.className),
       onClick: handleClick,
-      "aria-label": error ? error.message : label,
+      "aria-label": error ? error.message : translatedLabel,
       "aria-invalid": error ? "true" : props["aria-invalid"]
     })
   });
@@ -73137,10 +73969,15 @@ function ExecuteButton() {
     nonNull: true,
     caller: ExecuteButton
   });
+  const {
+    currentLanguage,
+    translationService
+  } = React.useContext(TranslationContext);
   const operations = (queryEditor == null ? void 0 : queryEditor.operations) || [];
   const hasOptions = operations.length > 1 && typeof operationName !== "string";
   const isRunning = isFetching || isSubscribed;
-  const label = `${isRunning ? "Stop" : "Execute"} query (Ctrl-Enter)`;
+  const buttonTranslationKey = isRunning ? "graphiql.toolbar.btn.stop_query.tooltip" : "graphiql.toolbar.btn.execute_query.tooltip";
+  const label = translationService.translate(buttonTranslationKey, currentLanguage);
   const buttonProps = {
     type: "button",
     className: "graphiql-execute-button",
@@ -73249,6 +74086,7 @@ exports.HistoryIcon = HistoryIcon;
 exports.ImagePreview = ImagePreview;
 exports.ImplementsIcon = ImplementsIcon;
 exports.KeyboardShortcutIcon = KeyboardShortcutIcon;
+exports.LanguageSelector = LanguageSelector;
 exports.MagnifyingGlassIcon = MagnifyingGlassIcon;
 exports.MarkdownContent = MarkdownContent;
 exports.MergeIcon = MergeIcon;
@@ -73279,6 +74117,9 @@ exports.ToolbarButton = ToolbarButton;
 exports.ToolbarMenu = ToolbarMenu;
 exports.Tooltip = Tooltip;
 exports.TooltipRoot = TooltipRoot;
+exports.TranslateText = TranslateText;
+exports.TranslationContext = TranslationContext;
+exports.TranslationProvider = TranslationProvider;
 exports.TrashIcon = TrashIcon;
 exports.TypeDocumentation = TypeDocumentation;
 exports.TypeIcon = TypeIcon;
@@ -79269,7 +80110,7 @@ function GraphiQL({
   if (typeof fetcher !== 'function') {
     throw new TypeError('The `GraphiQL` component requires a `fetcher` function to be passed as prop.');
   }
-  return /*#__PURE__*/_react.default.createElement(_react2.GraphiQLProvider, {
+  return /*#__PURE__*/_react.default.createElement(_react2.TranslationProvider, props, /*#__PURE__*/_react.default.createElement(_react2.GraphiQLProvider, {
     getDefaultFieldNames: getDefaultFieldNames,
     dangerouslyAssumeSchemaIsValid: dangerouslyAssumeSchemaIsValid,
     defaultQuery: defaultQuery,
@@ -79301,7 +80142,7 @@ function GraphiQL({
     showPersistHeadersSettings: shouldPersistHeaders !== false,
     disableTabs: (_props$disableTabs = props.disableTabs) !== null && _props$disableTabs !== void 0 ? _props$disableTabs : false,
     forcedTheme: props.forcedTheme
-  }, props)));
+  }, props))));
 }
 
 // Export main windows/panes to be used separately if desired.
@@ -79330,6 +80171,10 @@ function GraphiQLInterface(props) {
   });
   const merge = (0, _react2.useMergeQuery)();
   const prettify = (0, _react2.usePrettifyEditors)();
+  const {
+    currentLanguage,
+    translationService
+  } = (0, _react.useContext)(_react2.TranslationContext);
   const {
     theme,
     setTheme
@@ -79385,19 +80230,19 @@ function GraphiQLInterface(props) {
   const logo = children.find(child => isChildComponentType(child, GraphiQL.Logo)) || /*#__PURE__*/_react.default.createElement(GraphiQL.Logo, null);
   const toolbar = children.find(child => isChildComponentType(child, GraphiQL.Toolbar)) || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.ToolbarButton, {
     onClick: prettify,
-    label: "Prettify query (Shift-Ctrl-P)"
+    labelKey: "graphiql.toolbar.btn.prettify_query.tooltip"
   }, /*#__PURE__*/_react.default.createElement(_react2.PrettifyIcon, {
     className: "graphiql-toolbar-icon",
     "aria-hidden": "true"
   })), /*#__PURE__*/_react.default.createElement(_react2.ToolbarButton, {
     onClick: merge,
-    label: "Merge fragments into query (Shift-Ctrl-M)"
+    labelKey: "graphiql.toolbar.btn.merge_fragment.tooltip"
   }, /*#__PURE__*/_react.default.createElement(_react2.MergeIcon, {
     className: "graphiql-toolbar-icon",
     "aria-hidden": "true"
   })), /*#__PURE__*/_react.default.createElement(_react2.ToolbarButton, {
     onClick: copy,
-    label: "Copy query (Shift-Ctrl-C)"
+    labelKey: "graphiql.toolbar.btn.copy_query.tooltip"
   }, /*#__PURE__*/_react.default.createElement(_react2.CopyIcon, {
     className: "graphiql-toolbar-icon",
     "aria-hidden": "true"
@@ -79462,13 +80307,14 @@ function GraphiQLInterface(props) {
       setClearStorageStatus(null);
     }
   }, []);
+  const addTabLabel = translationService.translate('graphiql.tab.btn.add_tab.tooltip', currentLanguage);
   const addTab = /*#__PURE__*/_react.default.createElement(_react2.Tooltip, {
-    label: "Add tab"
+    label: addTabLabel
   }, /*#__PURE__*/_react.default.createElement(_react2.UnStyledButton, {
     type: "button",
     className: "graphiql-tab-add",
     onClick: handleAddTab,
-    "aria-label": "Add tab"
+    "aria-label": addTabLabel
   }, /*#__PURE__*/_react.default.createElement(_react2.PlusIcon, {
     "aria-hidden": "true"
   })));
@@ -79511,7 +80357,11 @@ function GraphiQLInterface(props) {
     className: "graphiql-sidebar-section"
   }, pluginContext === null || pluginContext === void 0 ? void 0 : pluginContext.plugins.map((plugin, index) => {
     const isVisible = plugin === pluginContext.visiblePlugin;
-    const label = `${isVisible ? 'Hide' : 'Show'} ${plugin.title}`;
+    const pluginTitle = translationService.translate(`plugin.${plugin.id}.title`, currentLanguage);
+    const labelKey = 'plugin.btn.' + (isVisible ? 'hide_plugin' : 'show_plugin');
+    const label = translationService.translate(labelKey, currentLanguage, {
+      pluginTitle
+    });
     return /*#__PURE__*/_react.default.createElement(_react2.Tooltip, {
       key: plugin.title,
       label: label
@@ -79527,31 +80377,37 @@ function GraphiQLInterface(props) {
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "graphiql-sidebar-section"
   }, /*#__PURE__*/_react.default.createElement(_react2.Tooltip, {
-    label: "Re-fetch GraphQL schema"
+    label: /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+      translationKey: "graphiql.sidebar.btn.refresh_graphql_schema"
+    })
   }, /*#__PURE__*/_react.default.createElement(_react2.UnStyledButton, {
     type: "button",
     disabled: schemaContext.isFetching,
     onClick: handleRefetchSchema,
-    "aria-label": "Re-fetch GraphQL schema"
+    "aria-label": translationService.translate('graphiql.sidebar.btn.refresh_graphql_schema', currentLanguage)
   }, /*#__PURE__*/_react.default.createElement(_react2.ReloadIcon, {
     className: schemaContext.isFetching ? 'graphiql-spin' : '',
     "aria-hidden": "true"
   }))), /*#__PURE__*/_react.default.createElement(_react2.Tooltip, {
-    label: "Open short keys dialog"
+    label: /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+      translationKey: "graphiql.sidebar.btn.open_short_keys_dialog"
+    })
   }, /*#__PURE__*/_react.default.createElement(_react2.UnStyledButton, {
     type: "button",
     "data-value": "short-keys",
     onClick: handleShowDialog,
-    "aria-label": "Open short keys dialog"
+    "aria-label": translationService.translate('graphiql.sidebar.btn.open_short_keys_dialog', currentLanguage)
   }, /*#__PURE__*/_react.default.createElement(_react2.KeyboardShortcutIcon, {
     "aria-hidden": "true"
   }))), /*#__PURE__*/_react.default.createElement(_react2.Tooltip, {
-    label: "Open settings dialog"
+    label: /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+      translationKey: "graphiql.sidebar.btn.open_settings_dialog"
+    })
   }, /*#__PURE__*/_react.default.createElement(_react2.UnStyledButton, {
     type: "button",
     "data-value": "settings",
     onClick: handleShowDialog,
-    "aria-label": "Open settings dialog"
+    "aria-label": translationService.translate('graphiql.sidebar.btn.open_settings_dialog', currentLanguage)
   }, /*#__PURE__*/_react.default.createElement(_react2.SettingsIcon, {
     "aria-hidden": "true"
   }))))), /*#__PURE__*/_react.default.createElement("div", {
@@ -79624,13 +80480,21 @@ function GraphiQLInterface(props) {
     className: activeSecondaryEditor === 'variables' && editorToolsResize.hiddenElement !== 'second' ? 'active' : '',
     onClick: handleToolsTabClick,
     "data-name": "variables"
-  }, "Variables"), isHeadersEditorEnabled && /*#__PURE__*/_react.default.createElement(_react2.UnStyledButton, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+    translationKey: "graphiql.editor.tools.btn.variables.label"
+  })), isHeadersEditorEnabled && /*#__PURE__*/_react.default.createElement(_react2.UnStyledButton, {
     type: "button",
     className: activeSecondaryEditor === 'headers' && editorToolsResize.hiddenElement !== 'second' ? 'active' : '',
     onClick: handleToolsTabClick,
     "data-name": "headers"
-  }, "Headers"), /*#__PURE__*/_react.default.createElement(_react2.Tooltip, {
-    label: editorToolsResize.hiddenElement === 'second' ? 'Show editor tools' : 'Hide editor tools'
+  }, /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+    translationKey: "graphiql.editor.tools.btn.headers.label"
+  })), /*#__PURE__*/_react.default.createElement(_react2.Tooltip, {
+    label: editorToolsResize.hiddenElement === 'second' ? /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+      translationKey: "graphiql.editor.tools.btn.open_editor.tooltip"
+    }) : /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+      translationKey: "graphiql.editor.tools.btn.close_editor.tooltip"
+    })
   }, /*#__PURE__*/_react.default.createElement(_react2.UnStyledButton, {
     type: "button",
     onClick: toggleEditorTools,
@@ -79678,7 +80542,9 @@ function GraphiQLInterface(props) {
     className: "graphiql-dialog-header"
   }, /*#__PURE__*/_react.default.createElement(_react2.Dialog.Title, {
     className: "graphiql-dialog-title"
-  }, "Short Keys"), /*#__PURE__*/_react.default.createElement(_react2.Dialog.Close, null)), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+    translationKey: "dialog.short_keys.title"
+  })), /*#__PURE__*/_react.default.createElement(_react2.Dialog.Close, null)), /*#__PURE__*/_react.default.createElement("div", {
     className: "graphiql-dialog-section"
   }, /*#__PURE__*/_react.default.createElement(ShortKeys, {
     keyMap: props.keyMap || 'sublime'
@@ -79689,87 +80555,132 @@ function GraphiQLInterface(props) {
     className: "graphiql-dialog-header"
   }, /*#__PURE__*/_react.default.createElement(_react2.Dialog.Title, {
     className: "graphiql-dialog-title"
-  }, "Settings"), /*#__PURE__*/_react.default.createElement(_react2.Dialog.Close, null)), props.showPersistHeadersSettings ? /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+    translationKey: "dialog.settings.title"
+  })), /*#__PURE__*/_react.default.createElement(_react2.Dialog.Close, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "graphiql-dialog-section"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "graphiql-dialog-section-title"
+  }, /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+    translationKey: "dialog.settings.language.title"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "graphiql-dialog-section-caption"
+  }, /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+    translationKey: "dialog.settings.language.description"
+  }))), /*#__PURE__*/_react.default.createElement(_react2.LanguageSelector, null)), props.showPersistHeadersSettings ? /*#__PURE__*/_react.default.createElement("div", {
     className: "graphiql-dialog-section"
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: "graphiql-dialog-section-title"
-  }, "Persist headers"), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+    translationKey: "dialog.settings.persisted_headers.title"
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "graphiql-dialog-section-caption"
-  }, "Save headers upon reloading.", ' ', /*#__PURE__*/_react.default.createElement("span", {
-    className: "graphiql-warning-text"
-  }, "Only enable if you trust this device."))), /*#__PURE__*/_react.default.createElement(_react2.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_react2.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+    translationKey: "dialog.settings.persisted_headers.description"
+  }))), /*#__PURE__*/_react.default.createElement(_react2.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_react2.Button, {
     type: "button",
     id: "enable-persist-headers",
     className: editorContext.shouldPersistHeaders ? 'active' : '',
     "data-value": "true",
     onClick: handlePersistHeaders
-  }, "On"), /*#__PURE__*/_react.default.createElement(_react2.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+    translationKey: "dialog.settings.persisted_headers.btn.on"
+  })), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     type: "button",
     id: "disable-persist-headers",
     className: editorContext.shouldPersistHeaders ? '' : 'active',
     onClick: handlePersistHeaders
-  }, "Off"))) : null, !forcedTheme && /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+    translationKey: "dialog.settings.persisted_headers.btn.off"
+  })))) : null, !forcedTheme && /*#__PURE__*/_react.default.createElement("div", {
     className: "graphiql-dialog-section"
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: "graphiql-dialog-section-title"
-  }, "Theme"), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+    translationKey: "dialog.settings.theme.title"
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "graphiql-dialog-section-caption"
-  }, "Adjust how the interface appears.")), /*#__PURE__*/_react.default.createElement(_react2.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_react2.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+    translationKey: "dialog.settings.theme.description"
+  }))), /*#__PURE__*/_react.default.createElement(_react2.ButtonGroup, null, /*#__PURE__*/_react.default.createElement(_react2.Button, {
     type: "button",
     className: theme === null ? 'active' : '',
     onClick: handleChangeTheme
-  }, "System"), /*#__PURE__*/_react.default.createElement(_react2.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+    translationKey: "dialog.settings.theme.btn.system"
+  })), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     type: "button",
     className: theme === 'light' ? 'active' : '',
     "data-theme": "light",
     onClick: handleChangeTheme
-  }, "Light"), /*#__PURE__*/_react.default.createElement(_react2.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+    translationKey: "dialog.settings.theme.btn.light"
+  })), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     type: "button",
     className: theme === 'dark' ? 'active' : '',
     "data-theme": "dark",
     onClick: handleChangeTheme
-  }, "Dark"))), storageContext ? /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+    translationKey: "dialog.settings.theme.btn.dark"
+  })))), storageContext ? /*#__PURE__*/_react.default.createElement("div", {
     className: "graphiql-dialog-section"
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: "graphiql-dialog-section-title"
-  }, "Clear storage"), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+    translationKey: "dialog.settings.clear_storage.title"
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "graphiql-dialog-section-caption"
-  }, "Remove all locally stored data and start fresh.")), /*#__PURE__*/_react.default.createElement(_react2.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+    translationKey: "dialog.settings.clear_storage.description"
+  }))), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     type: "button",
     state: clearStorageStatus || undefined,
     disabled: clearStorageStatus === 'success',
     onClick: handleClearData
   }, {
-    success: 'Cleared data',
-    error: 'Failed'
-  }[clearStorageStatus] || 'Clear data')) : null)));
+    success: /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+      translationKey: "dialog.settings.clear_storage.btn.cleared_data"
+    }),
+    error: /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+      translationKey: "dialog.settings.clear_storage.btn.error"
+    })
+  }[clearStorageStatus] || /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+    translationKey: "dialog.settings.clear_storage.btn.clear_data"
+  }))) : null)));
 }
 const modifier = _react2.isMacOs ? '⌘' : 'Ctrl';
 const SHORT_KEYS = Object.entries({
-  'Search in editor': [modifier, 'F'],
-  'Search in documentation': [modifier, 'K'],
-  'Execute query': [modifier, 'Enter'],
-  'Prettify editors': ['Ctrl', 'Shift', 'P'],
-  'Merge fragments definitions into operation definition': ['Ctrl', 'Shift', 'M'],
-  'Copy query': ['Ctrl', 'Shift', 'C'],
-  'Re-fetch schema using introspection': ['Ctrl', 'Shift', 'R']
+  'dialog.short_keys.function.search_in_editor': [modifier, 'F'],
+  'dialog.short_keys.function.search_in_documentation': [modifier, 'K'],
+  'dialog.short_keys.function.execute_query': [modifier, 'Enter'],
+  'dialog.short_keys.function.prettify_editors': ['Ctrl', 'Shift', 'P'],
+  'dialog.short_keys.function.merge_fragments_into_definition': ['Ctrl', 'Shift', 'M'],
+  'dialog.short_keys.function.copy_query': ['Ctrl', 'Shift', 'C'],
+  'dialog.short_keys.function.refresh_schema': ['Ctrl', 'Shift', 'R']
 });
 function ShortKeys({
   keyMap
 }) {
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("table", {
     className: "graphiql-table"
-  }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", null, "Short Key"), /*#__PURE__*/_react.default.createElement("th", null, "Function"))), /*#__PURE__*/_react.default.createElement("tbody", null, SHORT_KEYS.map(([title, keys]) => /*#__PURE__*/_react.default.createElement("tr", {
+  }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", null, /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+    translationKey: "dialog.short_keys.header.short_key"
+  })), /*#__PURE__*/_react.default.createElement("th", null, /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+    translationKey: "dialog.short_keys.header.function"
+  })))), /*#__PURE__*/_react.default.createElement("tbody", null, SHORT_KEYS.map(([title, keys]) => /*#__PURE__*/_react.default.createElement("tr", {
     key: title
   }, /*#__PURE__*/_react.default.createElement("td", null, keys.map((key, index, array) => /*#__PURE__*/_react.default.createElement(_react.Fragment, {
     key: key
   }, /*#__PURE__*/_react.default.createElement("code", {
     className: "graphiql-key"
-  }, key), index !== array.length - 1 && ' + '))), /*#__PURE__*/_react.default.createElement("td", null, title))))), /*#__PURE__*/_react.default.createElement("p", null, "The editors use", ' ', /*#__PURE__*/_react.default.createElement("a", {
-    href: "https://codemirror.net/5/doc/manual.html#keymaps",
-    target: "_blank",
-    rel: "noopener noreferrer"
-  }, "CodeMirror Key Maps"), ' ', "that add more short keys. This instance of Graph", /*#__PURE__*/_react.default.createElement("em", null, "i"), "QL uses", ' ', /*#__PURE__*/_react.default.createElement("code", null, keyMap), "."));
+  }, key), index !== array.length - 1 && ' + '))), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+    translationKey: title
+  })))))), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_react2.TranslateText, {
+    translationKey: "dialog.short_keys.footer",
+    translationParams: {
+      keyMap
+    }
+  })));
 }
 
 // Configure the UI by providing this Component as a child of GraphiQL.