workaround to show nested translations for phraseapp on-page editor

page.css

.no_view_translation {
    display: none; position: relative;
    margin: 0; padding: 0;
}

body.tranlating_phrase .no_view_translation {
    display: block;
    width: auto; height: auto;
    opacity: .5;
}

page.en.yml

en:
  signup_form:
    work_for_with: "Work %{for} %{app_name}"
    for: "for"
    with: "with"

page.html.erb

..
<h2 class="loud">
  <%= t(  "signup_form.work_for_with", for: "<span class='crossed' data-text='#{t("signup_form.with")}'>#{t("signup_form.for")}</span>") %>
  <%= pt("signup_form.with") %>
  <%= pt("signup_form.for") %>
</h2>
..

page_helper.rb

..

  # override default helper to get site-wide variables
  def t(*args)
    options = args.extract_options!
    key = args.first
    raw( I18n.t(key, options.merge({ app_name: CONFIG[:app_name] })) )
  end
  
  # little helper to make nested translation editable
  def pt(*args)
    if !Rails.env.production? && session[:tranlating_mode]
      options = args.extract_options!
      key = args.first
      content_tag :span, I18n.t(key, options.merge({ app_name: CONFIG[:app_name] })), class: "no_view_translation"
    else
      ""
    end
  end

..

translation_result.jpg