i18n_feedback 0.8.2 → 0.8.3

data/lib/i18n_feedback/engine.rb

@@ -1,26 +0,0 @@
-# frozen_string_literal: true
-
-module I18nFeedback
-  class Engine < ::Rails::Engine
-    isolate_namespace I18nFeedback
-
-    initializer 'i18n_feedback.middleware' do |app|
-      app.middleware.use I18nFeedback::Middleware
-    end
-
-    # Prepend the key-marking backend once the app (and its I18n backend) is up,
-    # and only in an enabled environment, so production never carries the patch.
-    config.after_initialize do
-      if I18nFeedback.config.environment_enabled? &&
-         !I18n.backend.class.include?(I18nFeedback::Marking::Backend)
-        I18n.backend.class.prepend(I18nFeedback::Marking::Backend)
-      end
-    end
-
-    initializer 'i18n_feedback.helper' do
-      ActiveSupport.on_load(:action_view) do
-        include I18nFeedback::TagHelper
-      end
-    end
-  end
-end

data/lib/i18n_feedback/marking.rb

@@ -1,46 +0,0 @@
-# frozen_string_literal: true
-
-module I18nFeedback
-  # Appends a "⟦namespace.key⟧" marker to each translated string so the widget can
-  # map rendered text back to its i18n key. The marker is never shown to the user:
-  # the widget strips every token out of the DOM on load and stashes the key on the
-  # element. Marking is a per-request, per-thread toggle (see Middleware), so pages
-  # stay clean unless a proofreader has switched the tool on.
-  module Marking
-    LEFT = '⟦'
-    RIGHT = '⟧'
-
-    # Skip format/lookup namespaces — marking these would corrupt number, date,
-    # and currency formatting and interpolation strings. The tool's own
-    # `i18n_feedback.*` strings are skipped too: they aren't part of the host
-    # app's translatable copy, so the widget must never mark (or offer to edit)
-    # its own UI.
-    SKIP = /(\A|\.)(number|date|time|datetime|support|i18n_feedback)(\.|\z)|formats?\z/
-
-    class << self
-      def enabled?
-        Thread.current[:i18n_feedback_marking] || false
-      end
-
-      def enabled=(value)
-        Thread.current[:i18n_feedback_marking] = value
-      end
-    end
-
-    # Prepended onto the active I18n backend class.
-    module Backend
-      def translate(locale, key, options = {})
-        result = super
-        return result unless Marking.enabled? && result.is_a?(String)
-
-        full = [*options[:scope], key].join('.')
-        return result if full.match?(SKIP)
-
-        # `super` returns a plain String even for _html keys (ActionView marks the
-        # helper's output safe after the backend returns), so the marker lands
-        # inside that buffer without changing any html_safe status.
-        "#{result} #{LEFT}#{full}#{RIGHT}"
-      end
-    end
-  end
-end

data/lib/i18n_feedback/middleware.rb

@@ -1,145 +0,0 @@
-# frozen_string_literal: true
-
-require 'rack'
-
-module I18nFeedback
-  # Runs on every request to (1) flip key-marking on for the duration of the
-  # request when a proofreader has the tool switched on, and (2) inject the widget
-  # into HTML responses so the host needs no layout changes. Both are strictly
-  # gated by I18nFeedback.available?, so nothing happens in a disabled environment.
-  class Middleware
-    COOKIE = 'i18n_feedback'
-
-    def initialize(app)
-      @app = app
-    end
-
-    def call(env)
-      request = Rack::Request.new(env)
-      available = I18nFeedback.available?(request)
-
-      # "?i18n_feedback=true|false" is a one-shot command, not a sticky URL state:
-      # set the cookie and redirect to the same URL without the parameter. That
-      # keeps the cookie the single source of truth (so the pill's reload can turn
-      # suggest mode off) and stops the parameter from lingering in the address bar.
-      if available && request.get? && !(desired = toggle_override(request)).nil?
-        return toggle_redirect(request, desired)
-      end
-
-      marking = available && cookie_on?(request)
-      Marking.enabled = marking
-
-      status, headers, body = @app.call(env)
-
-      if available && I18nFeedback.config.auto_inject && html?(headers) && !request.xhr?
-        status, headers, body = inject(status, headers, body, marking, csp_nonce(env))
-      end
-
-      [status, headers, body]
-    ensure
-      Marking.enabled = false
-    end
-
-    private
-
-    def cookie_on?(request)
-      !request.cookies[COOKIE].to_s.empty?
-    end
-
-    def toggle_redirect(request, desired)
-      headers = persist_choice({ 'Content-Type' => 'text/html', 'Location' => url_without_toggle(request) }, desired)
-      [303, headers, []]
-    end
-
-    def url_without_toggle(request)
-      query = Rack::Utils.parse_query(request.query_string)
-      query.delete(I18nFeedback.config.toggle_param)
-      built = Rack::Utils.build_query(query)
-      built.empty? ? request.path : "#{request.path}?#{built}"
-    end
-
-    # The request's CSP nonce, so the injected scripts run under a nonce-based
-    # Content-Security-Policy. Reads the value Rails memoizes on the env, which is
-    # the same nonce the CSP header uses. nil when the app sets no nonce.
-    def csp_nonce(env)
-      return nil unless defined?(ActionDispatch::Request)
-
-      ActionDispatch::Request.new(env).content_security_policy_nonce
-    rescue StandardError
-      nil
-    end
-
-    def toggle_override(request)
-      param = I18nFeedback.config.toggle_param
-      return nil unless request.params.key?(param)
-
-      %w[1 true on yes].include?(request.params[param].to_s.strip.downcase)
-    end
-
-    def persist_choice(headers, desired)
-      headers = headers.dup
-      cookie = if desired
-                 "#{COOKIE}=1; path=/; SameSite=Lax"
-               else
-                 "#{COOKIE}=; path=/; max-age=0; SameSite=Lax"
-               end
-      key = header_key(headers, 'set-cookie') || 'set-cookie'
-      existing = headers[key]
-      headers[key] = case existing
-                     when nil then cookie
-                     when Array then existing + [cookie]
-                     else "#{existing}\n#{cookie}"
-                     end
-      headers
-    end
-
-    def header_key(headers, name)
-      headers.key?(name) ? name : headers.keys.find { |k| k.to_s.casecmp?(name) }
-    end
-
-    def html?(headers)
-      content_type(headers).to_s.include?('text/html')
-    end
-
-    # The locale the page was actually rendered in, read from its `<html lang>`
-    # attribute. Auto-injection runs after the controller action, so I18n.locale
-    # may already have been reset from whatever the request used — the rendered
-    # `lang` is the reliable record of the page's language. Falls back to the
-    # ambient locale when the page declares none.
-    def page_locale(html)
-      lang = html[/<html[^>]*\blang=["']([^"']+)["']/i, 1]
-      (lang && normalize_locale(lang)) || I18n.locale
-    end
-
-    # Map an HTML lang value ("es", "pt-BR") to a locale the app actually offers,
-    # trying the value as-is, its underscore form, then its language subtag. nil
-    # if none match, so the caller can fall back rather than emit an unknown one.
-    def normalize_locale(lang)
-      available = I18n.available_locales.map(&:to_s)
-      [lang, lang.tr('-', '_'), lang.split(/[-_]/).first].uniq.find { |c| available.include?(c) }&.to_sym
-    end
-
-    def content_type(headers)
-      headers['Content-Type'] || headers['content-type']
-    end
-
-    def inject(status, headers, body, marking, nonce)
-      html = +''
-      body.each { |part| html << part.to_s }
-      body.close if body.respond_to?(:close)
-
-      snippet = Widget.snippet(
-        endpoint: I18nFeedback.config.suggestions_endpoint,
-        locale: page_locale(html),
-        active: marking,
-        nonce: nonce
-      )
-      html = html.include?('</body>') ? html.sub('</body>', "#{snippet}</body>") : html + snippet
-
-      headers = headers.dup
-      headers['Content-Length'] = html.bytesize.to_s if headers.key?('Content-Length') || headers.key?('content-length')
-
-      [status, headers, [html]]
-    end
-  end
-end

data/lib/i18n_feedback/version.rb

@@ -1,5 +0,0 @@
-# frozen_string_literal: true
-
-module I18nFeedback
-  VERSION = '0.8.2'
-end

data/lib/i18n_feedback/widget.js

@@ -1,443 +0,0 @@
-/*
- * i18n_feedback widget — self-contained, no framework, no build step.
- *
- * Reads its config from the <script type="application/json"
- * data-i18n-feedback-config> the server injects — re-read on every render so a
- * Turbo visit always reflects the current page's suggest state.
- *
- * A floating pill toggles "suggest mode", which is server state: the pill sets or
- * clears the i18n_feedback cookie and reloads, so the backend only prints the
- * "…text… ⟦some.key.path⟧" markers while proofreading. The markers are never shown
- * to the user — on load the widget strips each ⟦key⟧ token out of the DOM and
- * stashes the key on its element. A click on any such element opens a popover to
- * suggest a wording; navigation is frozen while the popover is open. Esc, or the
- * pill, exits.
- */
-(function () {
-  "use strict";
-
-  var config = readConfig();
-  if (!config || window.__i18nFeedbackLoaded) return;
-  window.__i18nFeedbackLoaded = true;
-
-  var LEFT = "⟦"; // ⟦
-  var RIGHT = "⟧"; // ⟧
-  var TOKEN = new RegExp(LEFT + "([^" + RIGHT + "]+)" + RIGHT);
-  var TOKENS = new RegExp("\\s*" + LEFT + "[^" + RIGHT + "]+" + RIGHT, "g");
-  var COOKIE = "i18n_feedback";
-  var MARKED_ATTRS = ["placeholder", "title", "aria-label", "value"];
-  var Z = 2147483000;
-
-  var overlay = null;
-  var proposedInput = null;
-  var commentInput = null;
-  var errorNode = null;
-  var saveButton = null;
-  var priorNode = null;
-
-  function ready(fn) {
-    if (document.readyState === "loading") {
-      document.addEventListener("DOMContentLoaded", fn);
-    } else {
-      fn();
-    }
-  }
-
-  ready(function () {
-    // Document-level listeners survive Turbo navigations, so register them once.
-    // handleClick is always attached and gates on the *current* config.active, so
-    // toggling suggest mode across a Turbo visit needs no re-registration.
-    document.addEventListener("keydown", handleKeydown);
-    document.addEventListener("click", handleClick, true);
-
-    // Everything else lives in <body>, which Turbo replaces on every visit —
-    // taking the pill and the active-mode highlighting with it. Re-run the
-    // per-page setup on each visit so the widget keeps working without a hard
-    // reload. render() also runs now for the initial (or non-Turbo) load.
-    render();
-    document.addEventListener("turbo:load", render);
-    document.addEventListener("turbo:frame-load", strip);
-  });
-
-  function readConfig() {
-    var el = document.querySelector("script[data-i18n-feedback-config]");
-    if (!el) return null;
-    try {
-      return JSON.parse(el.textContent);
-    } catch (e) {
-      return null;
-    }
-  }
-
-  function render() {
-    // Re-read on each visit: the injected config is data (not an executed
-    // script), so it reflects the page Turbo just rendered.
-    config = readConfig() || config;
-    injectStyles();
-    if (config.showPill !== false) buildPill();
-    document.documentElement.classList.toggle("i18nf-active", !!config.active);
-    if (config.active) strip();
-  }
-
-  // --- suggest-mode toggle --------------------------------------------------
-
-  function toggle() {
-    if (config.active) {
-      document.cookie = COOKIE + "=; path=/; max-age=0";
-    } else {
-      document.cookie = COOKIE + "=1; path=/";
-    }
-    window.location.reload();
-  }
-
-  // --- marker stripping -----------------------------------------------------
-
-  function strip() {
-    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, {
-      acceptNode: function (node) {
-        var tag = node.parentElement && node.parentElement.tagName;
-        if (tag === "SCRIPT" || tag === "STYLE") return NodeFilter.FILTER_REJECT;
-        return TOKEN.test(node.nodeValue) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
-      },
-    });
-
-    var nodes = [];
-    while (walker.nextNode()) nodes.push(walker.currentNode);
-
-    nodes.forEach(function (node) {
-      var match = node.nodeValue.match(TOKEN);
-      if (!match) return;
-      var key = match[1];
-      node.nodeValue = node.nodeValue.replace(TOKENS, "");
-      var element = node.parentElement;
-      if (element) {
-        element.dataset.i18nKey = key;
-        element.dataset.i18nValue = node.nodeValue.trim();
-      }
-    });
-
-    MARKED_ATTRS.forEach(function (attr) {
-      var selector = "[" + attr + '*="' + LEFT + '"]';
-      document.querySelectorAll(selector).forEach(function (element) {
-        element.setAttribute(attr, element.getAttribute(attr).replace(TOKENS, ""));
-      });
-    });
-  }
-
-  // --- interaction ----------------------------------------------------------
-
-  function handleClick(event) {
-    if (!config.active) return;
-    if (overlay && overlay.contains(event.target)) return;
-    if (event.target.closest && event.target.closest(".i18nf-pill")) return;
-    // Let a host's own suggest-mode toggle link through (e.g. "?i18n_feedback=false"
-    // in a nav menu); otherwise navigation-freezing would trap the user in suggest
-    // mode with no way out but the pill.
-    if (event.target.closest && event.target.closest('a[href*="' + config.toggleParam + '="]')) return;
-
-    // Freeze navigation so a stray click can't leave the page mid-proofread.
-    event.preventDefault();
-    event.stopPropagation();
-
-    var element = event.target.closest && event.target.closest("[data-i18n-key]");
-    if (element) open(element.dataset.i18nKey, element.dataset.i18nValue || "");
-  }
-
-  function handleKeydown(event) {
-    if (event.key !== "Escape") return;
-    if (overlay) close();
-    else if (config.active) toggle();
-  }
-
-  // --- pill -----------------------------------------------------------------
-
-  function buildPill() {
-    var existing = document.querySelector(".i18nf-pill");
-    if (existing) existing.remove();
-
-    var pill = document.createElement("button");
-    pill.type = "button";
-    pill.className = "i18nf-pill" + (config.active ? " i18nf-pill-on" : "");
-    pill.textContent = config.active ? "✓ " + t("pillActive", "Suggesting — tap to exit (Esc)") : "✎ " + labelText();
-    pill.addEventListener("click", toggle);
-    document.body.appendChild(pill);
-  }
-
-  function labelText() {
-    return config.pillLabel || t("pill", "Suggest edits");
-  }
-
-  // Resolve a server-translated label, falling back to English if the config
-  // predates the labels payload (e.g. a cached page from an older gem version).
-  function t(name, fallback) {
-    return (config.labels && config.labels[name]) || fallback;
-  }
-
-  // --- popover --------------------------------------------------------------
-
-  function open(key, currentValue) {
-    close();
-
-    overlay = el("div", "i18nf-overlay");
-    overlay.addEventListener("click", function (event) {
-      if (event.target === overlay) close();
-    });
-
-    var panel = el("div", "i18nf-panel");
-    // Mirror the popover for right-to-left locales (Arabic, Urdu, …). The i18n
-    // key stays LTR — it's a code identifier, not prose (see heading()).
-    panel.dir = config.rtl ? "rtl" : "ltr";
-    panel.appendChild(heading(key));
-
-    priorNode = el("div");
-    panel.appendChild(priorNode);
-
-    panel.appendChild(field(t("currentText", "Current text"), readonly(currentValue)));
-
-    proposedInput = textarea(currentValue);
-    panel.appendChild(field(t("suggestedText", "Suggested text"), proposedInput));
-
-    commentInput = input(t("commentPlaceholder", "Optional note for the developer"));
-    panel.appendChild(field(t("comment", "Comment"), commentInput));
-
-    errorNode = el("p", "i18nf-error");
-    errorNode.style.display = "none";
-    panel.appendChild(errorNode);
-
-    panel.appendChild(actions(key, currentValue));
-
-    overlay.appendChild(panel);
-    document.body.appendChild(overlay);
-    proposedInput.focus();
-    loadPrior(key);
-  }
-
-  function close() {
-    if (overlay) {
-      overlay.remove();
-      overlay = null;
-    }
-  }
-
-  function loadPrior(key) {
-    var params = new URLSearchParams({ key: key, locale: config.locale });
-    fetch(config.endpoint + "/context?" + params.toString(), { headers: { Accept: "application/json" } })
-      .then(function (response) {
-        return response.ok ? response.json() : [];
-      })
-      .then(function (items) {
-        if (items && items.length) renderPrior(items);
-      })
-      .catch(function () {
-        // Best-effort context; ignore fetch/parse errors.
-      });
-  }
-
-  function renderPrior(items) {
-    if (!priorNode) return;
-
-    var box = el("div", "i18nf-prior");
-    var title = el("p", "i18nf-prior-title");
-    title.textContent = t("priorTitle", "Already suggested (pending)");
-    box.appendChild(title);
-
-    var list = el("ul", "i18nf-prior-list");
-    items.forEach(function (item) {
-      var row = document.createElement("li");
-      var who = item.author_label ? " — " + item.author_label : "";
-      row.textContent = "“" + item.proposed_value + "”" + who;
-      list.appendChild(row);
-    });
-    box.appendChild(list);
-
-    priorNode.replaceWith(box);
-    priorNode = box;
-  }
-
-  function actions(key, currentValue) {
-    var wrapper = el("div", "i18nf-actions");
-
-    var cancel = el("button", "i18nf-btn i18nf-btn-ghost");
-    cancel.type = "button";
-    cancel.textContent = t("cancel", "Cancel");
-    cancel.addEventListener("click", close);
-
-    saveButton = el("button", "i18nf-btn i18nf-btn-primary");
-    saveButton.type = "button";
-    saveButton.textContent = t("save", "Send suggestion");
-    saveButton.addEventListener("click", function () {
-      submit(key, currentValue);
-    });
-
-    wrapper.appendChild(cancel);
-    wrapper.appendChild(saveButton);
-    return wrapper;
-  }
-
-  function submit(key, currentValue) {
-    var proposed = proposedInput.value.trim();
-    if (!proposed) {
-      showError(t("errorBlank", "Please enter a suggestion."));
-      return;
-    }
-
-    saveButton.disabled = true;
-
-    fetch(config.endpoint, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Accept: "application/json",
-        "X-CSRF-Token": csrfToken(),
-      },
-      body: JSON.stringify({
-        suggestion: {
-          translation_key: key,
-          locale: config.locale,
-          old_value: currentValue,
-          proposed_value: proposed,
-          comment: commentInput.value.trim(),
-          page_url: window.location.href,
-        },
-      }),
-    })
-      .then(function (response) {
-        if (response.ok) {
-          close();
-        } else {
-          saveButton.disabled = false;
-          showError(t("errorSave", "Could not save the suggestion."));
-        }
-      })
-      .catch(function () {
-        saveButton.disabled = false;
-        showError("Could not save the suggestion.");
-      });
-  }
-
-  function showError(message) {
-    errorNode.textContent = message;
-    errorNode.style.display = "";
-  }
-
-  // --- small DOM builders ---------------------------------------------------
-
-  function heading(key) {
-    var wrapper = el("div", "i18nf-heading");
-    var title = el("p", "i18nf-title");
-    title.textContent = t("title", "Suggest a translation fix");
-    var code = el("code", "i18nf-key");
-    code.dir = "ltr"; // the key is a code path, never RTL prose
-    code.textContent = key;
-    wrapper.appendChild(title);
-    wrapper.appendChild(code);
-    return wrapper;
-  }
-
-  function field(label, control) {
-    var wrapper = el("label", "i18nf-field");
-    var text = el("span", "i18nf-label");
-    text.textContent = label;
-    wrapper.appendChild(text);
-    wrapper.appendChild(control);
-    return wrapper;
-  }
-
-  function readonly(value) {
-    var node = el("p", "i18nf-readonly");
-    node.textContent = value;
-    return node;
-  }
-
-  function textarea(value) {
-    var node = el("textarea", "i18nf-input");
-    node.rows = 3;
-    node.value = value;
-    return node;
-  }
-
-  function input(placeholder) {
-    var node = el("input", "i18nf-input");
-    node.type = "text";
-    node.placeholder = placeholder;
-    return node;
-  }
-
-  function el(tag, className) {
-    var node = document.createElement(tag);
-    if (className) node.className = className;
-    return node;
-  }
-
-  function csrfToken() {
-    var meta = document.querySelector('meta[name="csrf-token"]');
-    return meta ? meta.content : "";
-  }
-
-  // --- styles ---------------------------------------------------------------
-
-  function injectStyles() {
-    if (document.getElementById("i18nf-styles")) return;
-    var style = document.createElement("style");
-    style.id = "i18nf-styles";
-    style.textContent = [
-      // Only the strings that actually resolve to a key are editable, so only
-      // those are highlighted. `outline` (not `border`) avoids any layout shift.
-      ".i18nf-active [data-i18n-key] { cursor: copy; outline: 1px dashed rgba(37, 99, 235, 0.5); outline-offset: 2px; }",
-      ".i18nf-active [data-i18n-key]:hover { outline: 2px dashed #2563eb; outline-offset: 2px; background: rgba(37, 99, 235, 0.08); }",
-      ".i18nf-pill { position: fixed; bottom: 16px; left: 16px; z-index: " + (Z + 1) + ";",
-      "  font: 13px/1.2 system-ui, sans-serif; padding: 9px 14px; border-radius: 999px;",
-      "  border: 1px solid rgba(0,0,0,.15); background: #fff; color: #111; cursor: pointer;",
-      "  box-shadow: 0 4px 14px rgba(0,0,0,.18); }",
-      ".i18nf-pill-on { background: #2563eb; color: #fff; border-color: #2563eb; }",
-      ".i18nf-overlay { position: fixed; inset: 0; z-index: " + (Z + 2) + "; display: flex;",
-      "  align-items: center; justify-content: center; padding: 16px;",
-      "  background: rgba(0,0,0,.45); cursor: default; }",
-      ".i18nf-panel { width: 28rem; max-width: 100%; max-height: 90vh; overflow: auto;",
-      "  background: #fff; color: #111; border-radius: 12px; padding: 20px;",
-      "  box-shadow: 0 20px 60px rgba(0,0,0,.35); font: 14px/1.5 system-ui, sans-serif; }",
-      ".i18nf-panel > * + * { margin-top: 14px; }",
-      ".i18nf-title { font-weight: 700; font-size: 15px; margin: 0; }",
-      ".i18nf-key { display: block; margin-top: 2px; font-size: 12px; color: #666;",
-      "  word-break: break-all; font-family: ui-monospace, monospace; }",
-      ".i18nf-field { display: block; }",
-      ".i18nf-label { display: block; margin-bottom: 4px; font-size: 12px; color: #666; }",
-      ".i18nf-readonly { margin: 0; padding: 8px 10px; background: #f4f4f5; border-radius: 8px; }",
-      ".i18nf-input { display: block; width: 100%; box-sizing: border-box; padding: 8px 10px;",
-      "  border: 1px solid #d4d4d8; border-radius: 8px; font: inherit; }",
-      ".i18nf-prior { padding: 10px 12px; background: #f4f4f5; border-radius: 8px; font-size: 13px; }",
-      ".i18nf-prior-title { margin: 0 0 4px; font-weight: 600; color: #555; }",
-      ".i18nf-prior-list { margin: 0; padding-left: 18px; }",
-      ".i18nf-error { margin: 0; color: #dc2626; font-size: 13px; }",
-      ".i18nf-actions { display: flex; justify-content: flex-end; gap: 8px; }",
-      ".i18nf-btn { padding: 8px 14px; border-radius: 8px; border: 1px solid transparent;",
-      "  font: inherit; cursor: pointer; }",
-      ".i18nf-btn-ghost { background: transparent; color: #111; }",
-      ".i18nf-btn-primary { background: #2563eb; color: #fff; }",
-      ".i18nf-btn[disabled] { opacity: .6; cursor: default; }",
-
-      // Follow the OS light/dark/system setting via prefers-color-scheme, so the
-      // widget matches whatever the reviewer's system is set to without any extra
-      // configuration. Only the surfaces that carry their own background/color
-      // above are overridden here — the blue accents stay the same in both themes.
-      "@media (prefers-color-scheme: dark) {",
-      "  .i18nf-pill { background: #1f1f23; color: #f4f4f5; border-color: rgba(255,255,255,.18);",
-      "    box-shadow: 0 4px 14px rgba(0,0,0,.5); }",
-      "  .i18nf-pill-on { background: #2563eb; color: #fff; border-color: #2563eb; }",
-      "  .i18nf-overlay { background: rgba(0,0,0,.65); }",
-      "  .i18nf-panel { background: #1f1f23; color: #f4f4f5;",
-      "    box-shadow: 0 20px 60px rgba(0,0,0,.7); }",
-      "  .i18nf-key { color: #a1a1aa; }",
-      "  .i18nf-label { color: #a1a1aa; }",
-      "  .i18nf-readonly { background: #2a2a30; }",
-      "  .i18nf-input { background: #2a2a30; color: #f4f4f5; border-color: #3f3f46; }",
-      "  .i18nf-input::placeholder { color: #71717a; }",
-      "  .i18nf-prior { background: #2a2a30; }",
-      "  .i18nf-prior-title { color: #d4d4d8; }",
-      "  .i18nf-error { color: #f87171; }",
-      "  .i18nf-btn-ghost { color: #f4f4f5; }",
-      "}",
-    ].join("\n");
-    document.head.appendChild(style);
-  }
-})();