locize 4.0.10 → 4.0.12

package/src/locizePlugin.js

@@ -1,6 +1,6 @@
 import { PostProcessor, unwrap } from 'i18next-subliminal'
 import { start } from './process.js'
-
+import { isInIframe, getQsParameterByName } from './utils.js'
 import * as implementations from './implementations/index.js'
 
 function configurePostProcessor (i18next, options) {
@@ -17,120 +17,120 @@ function configurePostProcessor (i18next, options) {
   options.postProcessPassResolved = true
 }
 
-function getImplementation (i18n) {
-  const impl = {
-    getResource: (lng, ns, key) => {
-      return i18n.getResource && i18n.getResource(lng, ns, key)
-    },
-    setResource: (lng, ns, key, value) => {
-      return i18n.addResource(lng, ns, key, value, { silent: true })
-    },
-    getResourceBundle: (lng, ns, cb) => {
-      i18n.loadNamespaces(ns, () => {
-        cb(i18n.getResourceBundle(lng, ns))
-      })
-    },
-    getDefaultNS: () => {
-      return i18n.options.defaultNS
-    },
-    getLng: () => {
-      return (
-        i18n.resolvedLanguage ||
-        (i18n.languages && i18n.languages[0]) ||
-        i18n.options.lng
-      )
-    },
-    getSourceLng: () => {
-      const fallback = i18n.options.fallbackLng
-      if (typeof fallback === 'string') return fallback
-      if (Array.isArray(fallback)) return fallback[fallback.length - 1]
-
-      if (fallback && fallback.default) {
-        if (typeof fallback.default === 'string') return fallback
-        if (Array.isArray(fallback.default))
-          return fallback.default[fallback.default.length - 1]
-      }
-
-      if (typeof fallback === 'function') {
-        const res = fallback(i18n.resolvedLanguage)
-        if (typeof res === 'string') return res
-        if (Array.isArray(res)) return res[res.length - 1]
-      }
-
-      return 'dev'
-    },
-    getLocizeDetails: () => {
-      let backendName
-      if (
-        i18n.services.backendConnector.backend &&
-        i18n.services.backendConnector.backend.options &&
-        i18n.services.backendConnector.backend.options.loadPath &&
-        i18n.services.backendConnector.backend.options.loadPath.indexOf(
-          '.locize.'
-        ) > 0
-      ) {
-        backendName = 'I18nextLocizeBackend'
-      } else {
-        backendName = i18n.services.backendConnector.backend
-          ? i18n.services.backendConnector.backend.constructor.name
-          : 'options.resources'
-      }
-
-      const opts = {
-        backendName,
-        sourceLng: impl.getSourceLng(),
-        i18nFormat:
-          i18n.options.compatibilityJSON === 'v3' ? 'i18next_v3' : 'i18next_v4',
-        i18nFramework: 'i18next',
-        isLocizify: i18n.options.isLocizify,
-        defaultNS: i18n.options.defaultNS,
-        targetLngs: [
-          ...new Set(
-            [].concat(i18n.options.preload, i18n.options.supportedLngs, [
-              impl.getLng()
-            ])
-          )
-        ].filter(
-          l =>
-            l !== 'cimode' &&
-            l !== false &&
-            l !== 'false' &&
-            l !== undefined &&
-            l !== impl.getSourceLng()
-        ),
-        ns: [
-          ...new Set(
-            [].concat(
-              i18n.options.ns,
-              i18n.options.fallbackNS,
-              i18n.options.defaultNS
-            )
-          )
-        ].filter(n => n !== false && n !== 'false')
-      }
-
-      if (!i18n.options.backend && !i18n.options.editor) return opts
-      const pickFrom = i18n.options.editor || i18n.options.backend
-      return {
-        ...opts,
-        projectId: pickFrom.projectId,
-        version: pickFrom.version
-      }
-    },
-    bindLanguageChange: cb => {
-      i18n.on('languageChanged', cb)
-    },
-    bindMissingKeyHandler: cb => {
-      i18n.options.missingKeyHandler = (lng, ns, k, val, isUpdate, opts) => {
-        if (!isUpdate) cb(lng, ns, k, val)
-      }
-    },
-    triggerRerender: () => {
-      i18n.emit('editorSaved')
-    }
-  }
-  return impl
-}
+// function getImplementation (i18n) {
+//   const impl = {
+//     getResource: (lng, ns, key) => {
+//       return i18n.getResource && i18n.getResource(lng, ns, key)
+//     },
+//     setResource: (lng, ns, key, value) => {
+//       return i18n.addResource(lng, ns, key, value, { silent: true })
+//     },
+//     getResourceBundle: (lng, ns, cb) => {
+//       i18n.loadNamespaces(ns, () => {
+//         cb(i18n.getResourceBundle(lng, ns))
+//       })
+//     },
+//     getDefaultNS: () => {
+//       return i18n.options.defaultNS
+//     },
+//     getLng: () => {
+//       return (
+//         i18n.resolvedLanguage ||
+//         (i18n.languages && i18n.languages[0]) ||
+//         i18n.options.lng
+//       )
+//     },
+//     getSourceLng: () => {
+//       const fallback = i18n.options.fallbackLng
+//       if (typeof fallback === 'string') return fallback
+//       if (Array.isArray(fallback)) return fallback[fallback.length - 1]
+
+//       if (fallback && fallback.default) {
+//         if (typeof fallback.default === 'string') return fallback
+//         if (Array.isArray(fallback.default))
+//           return fallback.default[fallback.default.length - 1]
+//       }
+
+//       if (typeof fallback === 'function') {
+//         const res = fallback(i18n.resolvedLanguage)
+//         if (typeof res === 'string') return res
+//         if (Array.isArray(res)) return res[res.length - 1]
+//       }
+
+//       return 'dev'
+//     },
+//     getLocizeDetails: () => {
+//       let backendName
+//       if (
+//         i18n.services.backendConnector.backend &&
+//         i18n.services.backendConnector.backend.options &&
+//         i18n.services.backendConnector.backend.options.loadPath &&
+//         i18n.services.backendConnector.backend.options.loadPath.indexOf(
+//           '.locize.'
+//         ) > 0
+//       ) {
+//         backendName = 'I18nextLocizeBackend'
+//       } else {
+//         backendName = i18n.services.backendConnector.backend
+//           ? i18n.services.backendConnector.backend.constructor.name
+//           : 'options.resources'
+//       }
+
+//       const opts = {
+//         backendName,
+//         sourceLng: impl.getSourceLng(),
+//         i18nFormat:
+//           i18n.options.compatibilityJSON === 'v3' ? 'i18next_v3' : 'i18next_v4',
+//         i18nFramework: 'i18next',
+//         isLocizify: i18n.options.isLocizify,
+//         defaultNS: i18n.options.defaultNS,
+//         targetLngs: [
+//           ...new Set(
+//             [].concat(i18n.options.preload, i18n.options.supportedLngs, [
+//               impl.getLng()
+//             ])
+//           )
+//         ].filter(
+//           l =>
+//             l !== 'cimode' &&
+//             l !== false &&
+//             l !== 'false' &&
+//             l !== undefined &&
+//             l !== impl.getSourceLng()
+//         ),
+//         ns: [
+//           ...new Set(
+//             [].concat(
+//               i18n.options.ns,
+//               i18n.options.fallbackNS,
+//               i18n.options.defaultNS
+//             )
+//           )
+//         ].filter(n => n !== false && n !== 'false')
+//       }
+
+//       if (!i18n.options.backend && !i18n.options.editor) return opts
+//       const pickFrom = i18n.options.editor || i18n.options.backend
+//       return {
+//         ...opts,
+//         projectId: pickFrom.projectId,
+//         version: pickFrom.version
+//       }
+//     },
+//     bindLanguageChange: cb => {
+//       i18n.on('languageChanged', cb)
+//     },
+//     bindMissingKeyHandler: cb => {
+//       i18n.options.missingKeyHandler = (lng, ns, k, val, isUpdate, opts) => {
+//         if (!isUpdate) cb(lng, ns, k, val)
+//       }
+//     },
+//     triggerRerender: () => {
+//       i18n.emit('editorSaved')
+//     }
+//   }
+//   return impl
+// }
 
 let i18next
 export const locizeEditorPlugin = (opt = {}) => {
@@ -147,7 +147,11 @@ export const locizeEditorPlugin = (opt = {}) => {
 
       const impl = implementations.i18next.getImplementation(i18n)
 
-      configurePostProcessor(i18next, options)
+      const showInContext = opt.show || getQsParameterByName(opt.qsProp) === 'true'
+
+      // do only manipulate html if incontext popup is shown or if website is rendered in iframe in incontext view of locize ui.
+      if (isInIframe || showInContext) configurePostProcessor(i18next, options)
+
       start(impl, opt) // we no longer show the legacy process but use the new way without popup opening
     }
   }

package/src/parser.js

@@ -67,18 +67,18 @@ function extractHiddenMeta (id, type, meta, children) {
       [`${invisibleMeta.lng}`]:
         invisibleMeta.source === 'translation' && i18n
           ? i18n?.getResource(
-              invisibleMeta.lng,
-              invisibleMeta.ns,
-              invisibleMeta.key
-            )
+            invisibleMeta.lng,
+            invisibleMeta.ns,
+            invisibleMeta.key
+          )
           : null,
       [`${currentSourceLng}`]:
         invisibleMeta.source === 'translation' && i18n
           ? i18n?.getResource(
-              currentSourceLng,
-              invisibleMeta.ns,
-              invisibleMeta.key
-            )
+            currentSourceLng,
+            invisibleMeta.ns,
+            invisibleMeta.key
+          )
           : null
     }
   }
@@ -244,13 +244,13 @@ function handleNode (node) {
         // merge and add data-i18n=[html]key
         if (
           nodeI18nMeta &&
-          nodeI18nMeta['html'] &&
+          nodeI18nMeta.html &&
           i < node.childNodes.length - 1
         ) {
           merge.push({ childIndex: i, child, text: txt })
         } else if (
           nodeI18nMeta &&
-          nodeI18nMeta['html'] &&
+          nodeI18nMeta.html &&
           i === node.childNodes.length - 1
         ) {
           merge.push({ childIndex: i, child, text: txt })
@@ -277,7 +277,7 @@ function handleNode (node) {
           // )
 
           // add data-i18n=key (inner text)
-          if (nodeI18nMeta && nodeI18nMeta['text']) {
+          if (nodeI18nMeta && nodeI18nMeta.text) {
             storeIfQualifiedKey(
               node.uniqueID,
               null,

package/src/process.js

@@ -5,18 +5,11 @@ import { initDragElement, initResizeElement } from './ui/popup.js'
 import { Popup, popupId } from './ui/elements/popup.js'
 import { getIframeUrl } from './vars.js'
 import { api } from './api/index.js'
-import { getQsParameterByName } from './utils.js'
+import { isInIframe, getQsParameterByName } from './utils.js'
 import * as implementations from './implementations/index.js'
 
 const dummyImplementation = implementations.dummy.getImplementation()
 
-let isInIframe = typeof window !== 'undefined'
-try {
-  // eslint-disable-next-line no-undef, no-restricted-globals
-  isInIframe = self !== top
-  // eslint-disable-next-line no-empty
-} catch (e) {}
-
 // eslint-disable-next-line no-unused-vars
 let data = []
 
@@ -108,5 +101,5 @@ export function start (
 
   if (document.body) return continueToStart()
 
-  window.addEventListener('load', () => continueToStart())
+  if (typeof window !== 'undefined') window.addEventListener('load', () => continueToStart())
 }

package/src/startStandalone.js

@@ -5,5 +5,4 @@ export function startStandalone (options = {}) {
   start(implementation, Object.keys(rest).length > 0 ? rest : undefined)
 }
 
-if (typeof window !== 'undefined')
-  window.locizeStartStandalone = startStandalone
+if (typeof window !== 'undefined') { window.locizeStartStandalone = startStandalone }

package/src/ui/elements/highlightBox.js

@@ -3,7 +3,7 @@ export function HighlightBox (ele, borderColor, shadowColor) {
 
   const box = document.createElement('div')
   box.classList.add('i18next-editor-highlight')
-  box.style = `position: absolute; z-index: 99999; top: ${
+  box.style = `position: absolute; z-index: 99999; pointer-events: none; top: ${
     rect.top - 2 + window.scrollY
   }px; left: ${rect.left - 2 + window.scrollX}px; height: ${
     rect.height + 4

package/src/ui/highlightNode.js

@@ -4,33 +4,33 @@ import { HighlightBox } from './elements/highlightBox.js'
 import { computePosition, flip, shift, offset, arrow } from '@floating-ui/dom'
 import { getOptimizedBoundingRectEle } from './utils.js'
 
-const eleToOutline = [
-  'DIV',
-  'P',
-  'H1',
-  'H2',
-  'H3',
-  'H4',
-  'H5',
-  'H6',
-  'OL',
-  'UL',
-  'ADDRESS',
-  'BLOCKQUOTE',
-  'DL',
-  'PRE'
-]
-const overriddenStyles = [
-  'outline',
-  'border-radius',
-  'outline-offset',
-  'filter'
-]
-const originalStyles = {}
+// const eleToOutline = [
+//   'DIV',
+//   'P',
+//   'H1',
+//   'H2',
+//   'H3',
+//   'H4',
+//   'H5',
+//   'H6',
+//   'OL',
+//   'UL',
+//   'ADDRESS',
+//   'BLOCKQUOTE',
+//   'DL',
+//   'PRE'
+// ]
+// const overriddenStyles = [
+//   'outline',
+//   'border-radius',
+//   'outline-offset',
+//   'filter'
+// ]
+// const originalStyles = {}
 const selected = {}
 
 export function highlight (item, node, keys) {
-  const { id } = item
+  // const { id } = item
 
   // uncomment below if we do not won't the ribbon box to show on selected
   // if (selected[id]) return
@@ -113,8 +113,8 @@ export function highlight (item, node, keys) {
             side === 'bottom'
               ? 'rotate(90deg)'
               : side === 'left'
-              ? 'rotate(180deg)'
-              : ''
+                ? 'rotate(180deg)'
+                : ''
         })
       }
     })

package/src/ui/popup.js

@@ -25,8 +25,7 @@ export function initDragElement () {
   }
 
   function dragMouseDown (e) {
-    if (!overlay)
-      overlay = document.getElementById('i18next-editor-popup-overlay')
+    if (!overlay) { overlay = document.getElementById('i18next-editor-popup-overlay') }
     if (overlay) overlay.style.display = 'block'
     stopMouseTracking()
 
@@ -63,7 +62,7 @@ export function initDragElement () {
     if (overlay) overlay.style.display = 'none'
 
     const ele = document.getElementById('i18next-editor-popup')
-    localStorage.setItem(
+    window.localStorage.setItem(
       'locize_popup_pos',
       JSON.stringify({
         top: parseInt(document.defaultView.getComputedStyle(ele).top, 10),
@@ -119,8 +118,7 @@ export function initResizeElement () {
 
   function initDrag (e) {
     stopMouseTracking()
-    if (!overlay)
-      overlay = document.getElementById('i18next-editor-popup-overlay')
+    if (!overlay) { overlay = document.getElementById('i18next-editor-popup-overlay') }
     if (overlay) overlay.style.display = 'block'
 
     element = this.parentPopup
@@ -149,7 +147,7 @@ export function initResizeElement () {
     if (overlay) overlay.style.display = 'none'
 
     const ele = document.getElementById('i18next-editor-popup')
-    localStorage.setItem(
+    window.localStorage.setItem(
       'locize_popup_size',
       JSON.stringify({
         width: parseInt(document.defaultView.getComputedStyle(ele).width, 10),

package/src/utils.js

@@ -72,8 +72,7 @@ export function getClickedElement (e) {
     el = e.originalEvent.explicitOriginalTarget
   } else {
     const parent = e.srcElement
-    if (parent.getAttribute && parent.getAttribute('ignorelocizeeditor') === '')
-      return null
+    if (parent.getAttribute && parent.getAttribute('ignorelocizeeditor') === '') { return null }
 
     const left = e.pageX
     const top = e.pageY
@@ -93,13 +92,11 @@ export function getClickedElement (e) {
       if (n.nodeType === 1 && nOffset.bottom < top) topStartsAt = i + 1
 
       // if node is below top click set end index to this node
-      if (!topBreaksAt && nOffset.top + (n.clientHeight || 0) > top)
-        topBreaksAt = i
+      if (!topBreaksAt && nOffset.top + (n.clientHeight || 0) > top) { topBreaksAt = i }
     }
 
     // check we are inside children lenght
-    if (topStartsAt + 1 > parent.childNodes.length)
-      topStartsAt = parent.childNodes.length - 1
+    if (topStartsAt + 1 > parent.childNodes.length) { topStartsAt = parent.childNodes.length - 1 }
     if (!topBreaksAt) topBreaksAt = parent.childNodes.length
     // console.warn('bound', topStartsAt, topBreaksAt)
 
@@ -142,14 +139,14 @@ export function getElementI18nKey (el) {
 function parseAttrFromKey (key) {
   let attr = 'text'
 
-  if (key.indexOf('[') == 0) {
-    var parts = key.split(']')
+  if (key.indexOf('[') === 0) {
+    const parts = key.split(']')
     key = parts[1]
     attr = parts[0].substr(1, parts[0].length - 1)
   }
 
   const newKey =
-    key.indexOf(';') == key.length - 1 ? key.substr(0, key.length - 2) : key
+    key.indexOf(';') === key.length - 1 ? key.substr(0, key.length - 2) : key
 
   return [newKey, attr]
 }
@@ -161,8 +158,9 @@ export function getI18nMetaFromNode (el, hasNamespacePrependToKey = true) {
   const allKeys = {}
 
   if (key && key.indexOf(';') >= 0) {
-    let keys = key.split(';')
-    for (let ix = 0, l_ix = keys.length; ix < l_ix; ix++) {
+    const keys = key.split(';')
+    for (let ix = 0, lix = keys.length; ix < lix; ix++) {
+      // eslint-disable-next-line eqeqeq
       if (keys[ix] != '') {
         const [usedKey, attr] = parseAttrFromKey(keys[ix])
 
@@ -178,7 +176,7 @@ export function getI18nMetaFromNode (el, hasNamespacePrependToKey = true) {
   if (Object.keys(allKeys).length < 1) return null
 
   const res = Object.keys(allKeys).reduce((mem, attr) => {
-    let key = allKeys[attr]
+    const key = allKeys[attr]
     let usedNS = ns
     let usedKey = key
 
@@ -235,3 +233,11 @@ export function getQsParameterByName (name, url) {
   if (!results[2]) return ''
   return decodeURIComponent(results[2].replace(/\+/g, ' '))
 }
+
+let _isInIframe = typeof window !== 'undefined'
+try {
+  // eslint-disable-next-line no-undef, no-restricted-globals
+  _isInIframe = self !== top
+  // eslint-disable-next-line no-empty
+} catch (e) {}
+export const isInIframe = _isInIframe

package/src/vars.js

@@ -15,6 +15,6 @@ export const getIframeUrl = () => {
   return env === 'development'
     ? 'http://localhost:3003/'
     : env === 'staging'
-    ? 'https://incontext-dev.locize.app'
-    : 'https://incontext.locize.app'
+      ? 'https://incontext-dev.locize.app'
+      : 'https://incontext.locize.app'
 }