locize 2.4.6 → 3.0.0

package/src/parser.js

@@ -0,0 +1,162 @@
+import { unwrap, containsHiddenMeta, containsHiddenStartMarker } from 'i18next-subliminal'
+import { store } from './store.js'
+import { uninstrumentedStore } from './uninstrumentedStore.js'
+import { validAttributes } from './vars.js'
+
+import './shims/uniqueID.js'
+
+let currentSourceLng
+let i18n
+let ignoreMergedEleUniqueIds = [] // ignore elements that are part of a translation containing html
+
+export function setImplementation (impl) {
+  i18n = impl
+}
+
+function walk (node, func) {
+  if (node.dataset && node.dataset.i18nextEditorElement === 'true') return
+  func(node)
+
+  const children = node.childNodes
+
+  for (
+    let i = 0;
+    i < children.length;
+    i++ // Children are siblings to each other
+  ) { walk(children[i], func) }
+}
+
+function extractMeta (id, type, meta, children) {
+  const { invisibleMeta, text } = meta
+  if (!invisibleMeta || !invisibleMeta.key || !invisibleMeta.ns) return
+
+  if (!currentSourceLng) currentSourceLng = i18n?.getSourceLng()
+
+  return {
+    eleUniqueID: id,
+    textType: type,
+    children: children ? children.map(c => c.childIndex).join(',') : null,
+    qualifiedKey: `${invisibleMeta.ns}:${invisibleMeta.key}`,
+    ...invisibleMeta,
+    extractedText: text,
+    i18nTargetLng: i18n?.getLng(),
+    i18nSourceLng: currentSourceLng,
+    i18nRawText: {
+      [`${invisibleMeta.lng}`]:
+        invisibleMeta.source === 'translation' && i18n
+          ? i18n.getResource(invisibleMeta.lng, invisibleMeta.ns, invisibleMeta.key)
+          : null,
+      [`${currentSourceLng}`]:
+        invisibleMeta.source === 'translation' && i18n
+          ? i18n.getResource(currentSourceLng, invisibleMeta.ns, invisibleMeta.key)
+          : null
+    }
+  }
+}
+
+function containsOnlySpaces (str) {
+  return /^\s*$/.test(str)
+}
+
+function handleNode (node) {
+  // test for inner text - but ignore text for elements merged to html containing translation
+  if (node.childNodes && !ignoreMergedEleUniqueIds.includes(node.uniqueID)) {
+    let merge = []
+    node.childNodes.forEach((child, i) => {
+      if (merge.length && child.nodeName !== '#text') {
+        ignoreMergedEleUniqueIds.push(child.uniqueID)
+        merge.push({ childIndex: i, child })
+      }
+      if (child.nodeName !== '#text') return
+
+      const txt = child.textContent
+      if (containsOnlySpaces(txt)) return
+
+      const hasHiddenMeta = containsHiddenMeta(txt)
+      const hasHiddenStartMarker = containsHiddenStartMarker(txt)
+
+      // console.warn(
+      //   'child',
+      //   child,
+      //   child.nodeName,
+      //   child.innerText,
+      //   hasHiddenStartMarker,
+      //   hasHiddenMeta,
+      // );
+
+      if (hasHiddenStartMarker && hasHiddenMeta) {
+        const meta = unwrap(txt)
+
+        store.save(
+          node.uniqueID,
+          meta.invisibleMeta,
+          'text',
+          extractMeta(node.uniqueID, 'text', meta),
+          node
+        )
+      } else if (hasHiddenStartMarker) {
+        merge.push({ childIndex: i, child, text: txt })
+      } else if (merge.length && !hasHiddenMeta) {
+        merge.push({ childIndex: i, child, text: txt })
+      } else if (merge.length && hasHiddenMeta) {
+        merge.push({ childIndex: i, child, text: txt })
+
+        const meta = unwrap(
+          merge.reduce((mem, item) => {
+            return mem + item.text
+          }, '')
+        )
+
+        store.save(
+          node.uniqueID,
+          meta.invisibleMeta,
+          'html',
+          extractMeta(node.uniqueID, 'html', meta, merge),
+          node,
+          merge
+        )
+
+        // reset
+        merge = []
+      } else if (txt) {
+        uninstrumentedStore.save(node.uniqueID, 'text', node)
+      }
+    })
+  }
+
+  // test attibutes
+  if (!node.getAttribute) return
+
+  validAttributes.forEach(attr => {
+    const txt = node.getAttribute(attr)
+    if (containsHiddenMeta(txt)) {
+      const meta = unwrap(txt)
+
+      store.save(
+        node.uniqueID,
+        meta.invisibleMeta,
+        `attr:${attr}`,
+        extractMeta(node.uniqueID, `attr:${attr}`, meta),
+        node
+      )
+    } else if (txt) {
+      uninstrumentedStore.save(node.uniqueID, `attr:${attr}`, node)
+    }
+  })
+
+  // TODO: how to handle react Trans things?!?
+}
+
+export function parseTree (node) {
+  // reset
+  currentSourceLng = undefined
+
+  // walk
+  walk(node, handleNode)
+  store.clean()
+
+  // cleanup
+  ignoreMergedEleUniqueIds = []
+
+  return store.data
+}

package/src/process.js

@@ -0,0 +1,55 @@
+import { parseTree, setImplementation } from './parser.js'
+import { createObserver } from './observer.js'
+import { startMouseTracking } from './ui/mouseDistance.js'
+import { initDragElement, initResizeElement } from './ui/popup.js'
+import { Popup } from './ui/elements/popup.js'
+import { getIframeUrl } from './vars.js'
+import { api } from './api/index.js'
+
+// eslint-disable-next-line no-unused-vars
+let data = []
+
+export function start (implementation = {}) {
+  if (typeof document === 'undefined') return
+  // get locize id, version
+  const scriptEle = document.getElementById('locize')
+
+  let config = {};
+  ['projectId', 'version'].forEach(attr => {
+    if (!scriptEle) return
+    let value =
+      scriptEle.getAttribute(attr.toLowerCase()) ||
+      scriptEle.getAttribute('data-' + attr.toLowerCase())
+    if (value === 'true') value = true
+    if (value === 'false') value = false
+    if (value !== undefined && value !== null) config[attr] = value
+  })
+  config = { ...implementation.getLocizeDetails(), ...config }
+
+  // init stuff
+  api.init(implementation)
+  setImplementation(implementation)
+
+  // start stuff
+  implementation?.bindLanguageChange(lng => {
+    api.sendCurrentTargetLanguage(implementation.getLng())
+  })
+  const observer = createObserver(document.body, eles => {
+    eles.forEach(ele => {
+      data = parseTree(ele)
+    })
+    api.sendCurrentParsedContent()
+  })
+  observer.start()
+
+  startMouseTracking(observer)
+
+  // append popup
+  document.body.append(
+    Popup(getIframeUrl(), () => {
+      api.requestInitialize(config)
+    })
+  )
+  initDragElement()
+  initResizeElement()
+}

package/src/processLegacy.js

@@ -0,0 +1,69 @@
+import { api, sendMessage } from './api/index.js'
+import { createClickHandler } from './clickHandler.js'
+
+export function startLegacy (implementation = {}) {
+  if (typeof document === 'undefined') return
+  // get locize id, version
+  const scriptEle = document.getElementById('locize')
+
+  let config = {};
+  ['projectId', 'version'].forEach(attr => {
+    if (!scriptEle) return
+    let value =
+      scriptEle.getAttribute(attr.toLowerCase()) ||
+      scriptEle.getAttribute('data-' + attr.toLowerCase())
+    if (value === 'true') value = true
+    if (value === 'false') value = false
+    if (value !== undefined && value !== null) config[attr] = value
+  })
+  config = { ...implementation.getLocizeDetails(), ...config }
+
+  // init stuff
+  api.init(
+    implementation,
+    createClickHandler(payload => {
+      sendMessage('clickedElement', { payload })
+    }, implementation.getLocizeDetails())
+  )
+
+  // changes to api to reflect legacy
+  api.sendCurrentTargetLanguage = lng => {
+    sendMessage('setLng', { lng: lng || implementation.getLng() })
+  }
+
+  // propagate url changes
+  if (typeof window !== 'undefined') {
+    let oldHref = window.document.location.href
+    window.addEventListener('load', () => {
+      sendMessage('hrefChanged', { href: window.document.location.href })
+
+      const bodyList = window.document.querySelector('body')
+
+      const observer = new window.MutationObserver(mutations => {
+        mutations.forEach(mutation => {
+          if (oldHref !== window.document.location.href) {
+            // console.warn('url changed', oldHref, document.location.href);
+            oldHref = window.document.location.href
+
+            sendMessage('hrefChanged', { href: oldHref })
+          }
+        })
+      })
+
+      const config = {
+        childList: true,
+        subtree: true
+      }
+
+      observer.observe(bodyList, config)
+    })
+  }
+
+  // start stuff
+  implementation?.bindLanguageChange(lng => {
+    api.sendCurrentTargetLanguage(implementation.getLng())
+  })
+  implementation?.bindMissingKeyHandler((lng, ns, k, val) => {
+    api.onAddedKey(lng, ns, k, val)
+  })
+}

package/src/shims/uniqueID.js

@@ -0,0 +1,49 @@
+/* eslint-disable */
+/**
+ * @file Returns the unique identifier generated by the browser for the object.
+ *       The uniqueID property of the document works as an identifier generator in Internet Explorer.
+ *       Each time when the value of this uniqueID property is retrieved, the browser generates
+ *       a new unique identifier and returns it.
+ *       HTML elements also support the uniqueID property. The first time when the value of any of these
+ *       properties is retrieved, the browser generates a new identifier for the element.
+ * @author Renaat De Muynck <renaat.demuynck@gmail.com>
+ */
+
+;(function () {
+  'use strict'
+  if (typeof Document === 'undefined') return
+
+  var nextID = 1
+
+  if (Document.prototype.hasOwnProperty('uniqueID')) {
+    return
+  }
+
+  console.info('"document.uniqueID" not implemented; creating shim')
+
+  // define a property on the document that will generate a unique id each time it is called
+  Object.defineProperty(Document.prototype, 'uniqueID', {
+    get: function () {
+      return nextID++
+    },
+    enumerable: false,
+    configurable: false
+  })
+
+  // define a property on the element that will return a unique id the first time it is called
+  Object.defineProperty(Element.prototype, 'uniqueID', {
+    get: function () {
+      // redefine the property so that the generator will not be called again
+      Object.defineProperty(this, 'uniqueID', {
+        value: document.uniqueID,
+        writable: false,
+        enumerable: false,
+        configurable: false
+      })
+
+      return this.uniqueID
+    },
+    enumerable: false,
+    configurable: true
+  })
+})()

package/src/startStandalone.js

@@ -0,0 +1,19 @@
+import { startLegacy } from './processLegacy.js'
+
+export function startStandalone () {
+  startLegacy({
+    getLocizeDetails: () => {
+      return {}
+    },
+    getLng: () => {
+      return undefined
+    },
+    setResource: () => {},
+    triggerRerender: () => {},
+    getResourceBundle: () => {
+      return {}
+    }
+  })
+}
+
+if (typeof window !== 'undefined') window.locizeStartStandalone = startStandalone

package/src/store.js

@@ -0,0 +1,47 @@
+import { resetHighlight } from './ui/highlightNode.js'
+
+const data = {}
+
+function clean () {
+  Object.values(data).forEach(item => {
+    if (!document.body.contains(item.node)) {
+      resetHighlight(item.id, item.node)
+      delete data[item.id]
+    }
+  })
+}
+
+function save (id, subliminal, type, meta, node, children) {
+  if (!id || !type || !meta || !node) return
+
+  if (!data[id]) {
+    data[id] = {
+      id,
+      node,
+      subliminal
+    }
+  }
+
+  data[id].keys = {
+    ...data[id].keys,
+    [`${type}`]: meta
+  }
+
+  if (children) {
+    data[id].children = {
+      ...data[id].children,
+      [`${type}-${children.map(c => c.childIndex).join(',')}`]: children
+    }
+  }
+}
+
+function get (id) {
+  return data[id]
+}
+
+export const store = {
+  save,
+  clean,
+  get,
+  data
+}

package/src/ui/elements/icons.js

@@ -0,0 +1,92 @@
+import { colors } from '../../vars.js'
+
+const iconEdit =
+  '<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" fill="#FFFFFF"><g></g><g><g><g><path d="M3,21l3.75,0L17.81,9.94l-3.75-3.75L3,17.25L3,21z M5,18.08l9.06-9.06l0.92,0.92L5.92,19L5,19L5,18.08z"/></g><g><path d="M18.37,3.29c-0.39-0.39-1.02-0.39-1.41,0l-1.83,1.83l3.75,3.75l1.83-1.83c0.39-0.39,0.39-1.02,0-1.41L18.37,3.29z"/></g></g></g></svg>'
+const i18nextIcon = `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210 304" stroke="#000" stroke-linecap="round" stroke-linejoin="round" fill="#fff" fill-rule="evenodd">
+  <g stroke="none" class="B">
+    <path d="M 142 31.5 v 57.2 l 64.3 165.1 s 19.6 40.3 -36.5 50.1 h -128 s -52.3 -5.5 -39.8 -46.9 L 69.5 88.7 V 31.5 z" fill="#009688"/>
+    <path d="M 143.3 24.8 H 66.2 c -6.2 0 -11.3 -5.6 -11.3 -12.4 S 60 0 66.2 0 h 77.1 c 6.3 0 11.3 5.6 11.3 12.4 s -5.1 12.4 -11.3 12.4 z" class="C" fill="#004d40"/>
+    <path d="M 123 124.9 c 8.3 0 15 8.1 15 18.1 c 0 10 -6.8 18.1 -15 18.1 c -8.3 0 -15 -8.1 -15 -18.1 c 0 -10 6.7 -18.1 15 -18.1 z m -58.8 31.7 c 0 -8.5 5.6 -15.3 12.7 -15.3 s 12.7 6.8 12.7 15.3 s -5.6 15.3 -12.7 15.3 s -12.7 -6.8 -12.7 -15.3 z" fill="white"/>
+    <path d="M 147.7 84.9 V 57.7 s 34.5 -7.6 51.7 32.5 c 0 0 -26.9 19.6 -51.7 -5.3 z m -84.5 0 V 57.7 s -34.5 -7.6 -51.7 32.5 c 0 0 26.8 19.6 51.7 -5.3 z" class="C" fill="#004d40"/>
+    <path d="M 168.4 197.5 c -56.1 -17.4 -103.3 -8.1 -126.3 -1 l -23.2 56 c -10.5 33.4 33.2 37.8 33.2 37.8 h 106.9 c 46.9 -7.9 30.5 -40.4 30.5 -40.4 z" fill="white"/>
+    <path d="M 87.6 218.3 c 0 6 -8.1 10.9 -18.1 10.9 s -18.1 -4.9 -18.1 -10.9 c 0 -6.1 8.1 -10.9 18.1 -10.9 s 18.1 4.9 18.1 10.9 z m 64.4 0 c 0 6 -8.1 10.9 -18.1 10.9 c -10 0 -18.1 -4.9 -18.1 -10.9 c 0 -6.1 8.1 -10.9 18.1 -10.9 c 10 0 18.1 4.9 18.1 10.9 z" class="C" fill="#004d40"/>
+  </g>
+</svg>
+`
+const locizeIcon = `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 194.667 196" height="196" width="194.667" xml:space="preserve">
+  <defs>
+    <clipPath id="a" clipPathUnits="userSpaceOnUse">
+      <path d="M5.5 74.048C5.5 36.98 35.551 6.93 72.619 6.93c37.069 0 67.119 30.05 67.119 67.118 0 37.07-30.05 67.12-67.119 67.12-37.068 0-67.119-30.05-67.119-67.12"/>
+    </clipPath>
+    <clipPath id="b" clipPathUnits="userSpaceOnUse">
+      <path d="M0 147h146V0H0Z"/>
+    </clipPath>
+    <clipPath id="c" clipPathUnits="userSpaceOnUse">
+      <path d="M88.756 55.055h50.982l4.512 88.195-64 1.25z"/>
+    </clipPath>
+  </defs>
+  <g clip-path="url(#a)" transform="matrix(1.33333 0 0 -1.33333 0 196)">
+    <path style="fill:#2196f3;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M0 0c-.766-5.554 1.148-8.427 0-11.107-1.149-2.681-2.49-7.469-1.341-10.724 1.149-3.255 2.872-10.34 4.404-10.533 1.532-.19-1.148 7.66.383 5.171 1.533-2.49 1.533-6.193 4.214-8.746 2.68-2.553 6.319-2.17 9.192-4.658 2.872-2.49 5.744-6.129 8.425-5.746 0 0-.192-1.914-1.532-5.17-1.34-3.255-1.532-7.084.192-9.383 1.723-2.298 3.446-5.746 4.979-7.469 1.532-1.723 2.681-10.915 2.297-15.51-.382-4.596 1.724-14.937 6.511-17.236 4.787-2.298 0 1.15-.957 4.022-.958 2.872.739 9.575 3.052 10.533 2.309.958 4.416 4.787 6.139 7.469 1.724 2.68 6.128 3.83 7.469 7.084 1.341 3.255.766 7.085 1.532 8.809.766 1.724 2.873 5.554-1.724 7.852-4.595 2.298-6.51 1.148-6.702 3.255-.192 2.107-1.341 4.404-4.595 5.361-3.256.959-6.129 2.816-9.768 3.227-3.638.412-4.404-2.461-6.319-.928-1.914 1.531-3.446 3.064-4.213 4.978-.765 1.915-3.064.766-2.871 1.915.19 1.15 3.254 4.404-.193 3.255-3.446-1.148-6.51-.765-6.319 2.298.193 3.064 4.405 4.214 6.129 4.597 1.722.383 3.063-1.723 5.17-3.065 2.106-1.34.191 1.915 1.34 4.214 1.149 2.298 5.554 2.106 6.128 5.361.575 3.255-.191 5.937 3.256 6.32 3.446.383 7.084-.191 7.468 1.533.382 1.722-4.022-.576-4.213 1.531-.192 2.106 3.829 4.978 4.978 2.872 1.149-2.106 4.022-2.298 4.405-1.531.383.765 0 2.105-1.341 5.361-1.34 3.256-2.681 2.298-3.829 5.936-1.149 3.639-3.064-.191-4.979 1.724s-4.213 5.937-4.597 2.489c-.382-3.446-.382-5.361-2.105-8.042-1.724-2.682-2.489-.575-4.022 1.149-1.532 1.723-4.979 3.447-3.83 4.978C23.362 4.979 24.511 9 26.234 7.85c1.724-1.149 4.405-1.149 4.022.767-.383 1.914 0 2.681.766 3.638.766.958 3.447 2.682 3.447-.766 0-3.447-.384-4.405 2.298-4.788 2.681-.383 5.744-.574 5.554 1.149-.193 1.724.766 1.341 0 4.214-.767 2.873-3.065 3.063-5.554 4.405-2.489 1.34-3.83 3.446-5.936 2.68s-2.299-1.531-2.49-3.638c-.192-2.107-1.341-2.873-2.107-1.915-.765.957.192 4.022-2.68 2.106-2.873-1.914-4.021-5.171-5.553-2.872-1.533 2.297 2.297 6.319-1.724 4.595-4.022-1.723-6.895-3.637-4.788-4.404 2.107-.766 4.214-2.107 2.107-2.873-2.107-.765-6.32.575-7.852-.957C4.212 7.66 0 0 0 0" transform="translate(13.926 109.38)"/>
+    <path style="fill:none;stroke:#2196f3;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="M0 0c-.766-5.554 1.148-8.427 0-11.107-1.149-2.681-2.49-7.469-1.341-10.724 1.149-3.255 2.872-10.34 4.404-10.533 1.532-.19-1.148 7.66.383 5.171 1.533-2.49 1.533-6.193 4.214-8.746 2.68-2.553 6.319-2.17 9.192-4.658 2.872-2.49 5.744-6.129 8.425-5.746 0 0-.192-1.914-1.532-5.17-1.34-3.255-1.532-7.084.192-9.383 1.723-2.298 3.446-5.746 4.979-7.469 1.532-1.723 2.681-10.915 2.297-15.51-.382-4.596 1.724-14.937 6.511-17.236 4.787-2.298 0 1.15-.957 4.022-.958 2.872.739 9.575 3.052 10.533 2.309.958 4.416 4.787 6.139 7.469 1.724 2.68 6.128 3.83 7.469 7.084 1.341 3.255.766 7.085 1.532 8.809.766 1.724 2.873 5.554-1.724 7.852-4.595 2.298-6.51 1.148-6.702 3.255-.192 2.107-1.341 4.404-4.595 5.361-3.256.959-6.129 2.816-9.768 3.227-3.638.412-4.404-2.461-6.319-.928-1.914 1.531-3.446 3.064-4.213 4.978-.765 1.915-3.064.766-2.871 1.915.19 1.15 3.254 4.404-.193 3.255-3.446-1.148-6.51-.765-6.319 2.298.193 3.064 4.405 4.214 6.129 4.597 1.722.383 3.063-1.723 5.17-3.065 2.106-1.34.191 1.915 1.34 4.214 1.149 2.298 5.554 2.106 6.128 5.361.575 3.255-.191 5.937 3.256 6.32 3.446.383 7.084-.191 7.468 1.533.382 1.722-4.022-.576-4.213 1.531-.192 2.106 3.829 4.978 4.978 2.872 1.149-2.106 4.022-2.298 4.405-1.531.383.765 0 2.105-1.341 5.361-1.34 3.256-2.681 2.298-3.829 5.936-1.149 3.639-3.064-.191-4.979 1.724s-4.213 5.937-4.597 2.489c-.382-3.446-.382-5.361-2.105-8.042-1.724-2.682-2.489-.575-4.022 1.149-1.532 1.723-4.979 3.447-3.83 4.978C23.362 4.979 24.511 9 26.234 7.85c1.724-1.149 4.405-1.149 4.022.767-.383 1.914 0 2.681.766 3.638.766.958 3.447 2.682 3.447-.766 0-3.447-.384-4.405 2.298-4.788 2.681-.383 5.744-.574 5.554 1.149-.193 1.724.766 1.341 0 4.214-.767 2.873-3.065 3.063-5.554 4.405-2.489 1.34-3.83 3.446-5.936 2.68s-2.299-1.531-2.49-3.638c-.192-2.107-1.341-2.873-2.107-1.915-.765.957.192 4.022-2.68 2.106-2.873-1.914-4.021-5.171-5.553-2.872-1.533 2.297 2.297 6.319-1.724 4.595-4.022-1.723-6.895-3.637-4.788-4.404 2.107-.766 4.214-2.107 2.107-2.873-2.107-.765-6.32.575-7.852-.957C4.212 7.66 0 0 0 0Z" transform="translate(13.926 109.38)"/>
+    <path style="fill:#2196f3;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M0 0c-.01-2.141.575-3.829 2.49-1.915C4.405 0 5.553 2.298 6.895 1.341c1.34-.958 3.638-.703 4.594-.639.959.064 1.15 2.937 3.831 2.554s1.724.574 4.596 2.107c2.873 1.532 9.001 4.212 2.681 3.446-6.32-.766-6.703.958-11.108-1.914-4.403-2.873-5.36-2.873-6.509-3.639-1.149-.766-2.49 2.298-4.022 0C-.575.958.011 2.182 0 0" transform="translate(36.522 130.061)"/>
+    <path style="fill:none;stroke:#2196f3;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="M0 0c-.01-2.141.575-3.829 2.49-1.915C4.405 0 5.553 2.298 6.895 1.341c1.34-.958 3.638-.703 4.594-.639.959.064 1.15 2.937 3.831 2.554s1.724.574 4.596 2.107c2.873 1.532 9.001 4.212 2.681 3.446-6.32-.766-6.703.958-11.108-1.914-4.403-2.873-5.36-2.873-6.509-3.639-1.149-.766-2.49 2.298-4.022 0C-.575.958.011 2.182 0 0Z" transform="translate(36.522 130.061)"/>
+    <path style="fill:#2196f3;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M0 0c-2.263-1.956-5.744-4.788-3.064-4.788 2.681 0 3.983 1.404 5.439-.447 1.456-1.85.88-4.723.88-6.063 0-1.341-.766-4.406 1.15-8.235 1.915-3.829 2.106-6.319 4.022-3.829 1.914 2.488 6.51 7.276 8.808 7.658 2.298.384 4.597 1.342 5.746 3.257 1.148 1.915 0 3.773 1.914 5.141 1.914 1.369 1.531 3.093 2.107 5.199C27.575 0 32.747 0 30.448 1.148c-2.297 1.15-6.51 1.916-11.49 1.341C13.979 1.915 4.213 3.638 0 0" transform="translate(59.502 135.998)"/>
+    <path style="fill:none;stroke:#2196f3;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="M0 0c-2.263-1.956-5.744-4.788-3.064-4.788 2.681 0 3.983 1.404 5.439-.447 1.456-1.85.88-4.723.88-6.063 0-1.341-.766-4.406 1.15-8.235 1.915-3.829 2.106-6.319 4.022-3.829 1.914 2.488 6.51 7.276 8.808 7.658 2.298.384 4.597 1.342 5.746 3.257 1.148 1.915 0 3.773 1.914 5.141 1.914 1.369 1.531 3.093 2.107 5.199C27.575 0 32.747 0 30.448 1.148c-2.297 1.15-6.51 1.916-11.49 1.341C13.979 1.915 4.213 3.638 0 0Z" transform="translate(59.502 135.998)"/>
+    <path style="fill:#2196f3;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M0 0c-1.218-1.986-.575-2.107.766-2.49 1.34-.383-.575-2.68.957-2.872 1.532-.193 4.979-1.15 5.936 0 .959 1.148-1.531.7-3.255 1.977C2.682-2.107.865 1.41 0 0" transform="translate(38.438 76.826)"/>
+    <path style="fill:none;stroke:#2196f3;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="M0 0c-1.218-1.986-.575-2.107.766-2.49 1.34-.383-.575-2.68.957-2.872 1.532-.193 4.979-1.15 5.936 0 .959 1.148-1.531.7-3.255 1.977C2.682-2.107.865 1.41 0 0Z" transform="translate(38.438 76.826)"/>
+    <path style="fill:#2196f3;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M0 0c-2.063-1.033-1.148-2.682-3.064-3.831-1.915-1.148-1.149-1.531-1.723-4.213-.575-2.68.191-4.212 1.532-2.106S2.298 1.148 0 0" transform="translate(131.121 45.612)"/>
+    <path style="fill:none;stroke:#2196f3;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="M0 0c-2.063-1.033-1.148-2.682-3.064-3.831-1.915-1.148-1.149-1.531-1.723-4.213-.575-2.68.191-4.212 1.532-2.106S2.298 1.148 0 0Z" transform="translate(131.121 45.612)"/>
+    <path style="fill:#2196f3;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M0 0c-.575-.575-1.532 2.681-2.106 4.213-.575 1.532-.561 4.195 1.056 5.675C.964 11.734 0 7.469 0 5.17 0 2.873.574.575 0 0m-6.704 5.936c-1.341.766-3.828 0-6.892-.957-3.065-.958-.613 2.131.766 4.213 1.233 1.861.574-.574 3.256-.766 2.68-.192 4.213-3.256 2.87-2.49m-4.402-6.511c-.192-1.531.574-4.021-3.639-3.064-4.213.958-4.213 3.256-5.936 1.533-1.723-1.724-3.83-3.255-6.32-.575C-29.49 0-29.107.766-30.447.958c-.955.135-4.138.846-6.792.074.206.123.426.285.663.5 1.915 1.723 1.532 2.298 3.638 4.213 2.108 1.916 3.639 3.638 5.171 1.916 1.532-1.725 4.788-2.108 3.639-4.023-1.149-1.914-.383-3.063.958-1.914 1.339 1.149 3.255 1.914 1.915 3.446-1.342 1.532-2.682 5.554-.766 2.873 1.915-2.681 2.489-4.022 3.637-5.553C-17.234.958-16.085 0-15.702.958c.383.957-.192 3.063.383 3.446.574.383 0-3.255 1.723-3.446 1.723-.192 2.681 0 2.49-1.533M9.192-8.81c-.574 3.257-4.787 32.747-4.787 32.747s-11.299 7.277-13.213 5.746c-1.916-1.533-5.171-1.302-4.788.21s2.872 1.128-1.341 4.002c-4.212 2.873-4.978 5.362-8.233 1.724-3.257-3.639-4.022-6.703-5.937-7.661-1.915-.957-3.447-4.021-1.34-4.787 2.106-.765 2.298 0 4.02-1.531 1.725-1.533 4.023-1.149 4.406-.193.383.959.766 4.022.957 5.171.192 1.149 2.138 4.979 1.93 1.915-.207-3.064 2.665-3.064.75-5.17-1.914-2.106-.765-3.831-4.595-4.214-3.831-.382-4.022 1.915-6.128.766-2.107-1.148-1.915-1.915-2.681-3.063-.766-1.149-4.788-3.447-4.788-3.447s-3.255 1.149-1.724-.958c1.533-2.106 2.873-4.595 1.533-4.786-1.341-.192-4.98 1.914-4.98-.384s-.573-4.787.959-5.362c1.081-.405 1.783-1.284 2.775-1.161-.769-.332-1.468-.813-2.009-1.52-1.491-1.947-.575-5.362-3.639-6.511-3.063-1.15-3.063-2.489-3.639-4.979-.573-2.489 0-8.808.766-9.383.765-.574 2.107-5.362 5.363-4.978 3.256.383 6.702.53 7.851-.023 1.149-.551 3.063 1.171 3.638-3.233.575-4.404 1.915-4.979 2.681-7.277.766-2.297-.383-7.086 0-9.958s3.064-7.852 3.064-10.341c0-2.489 2.873-3.638 4.405-2.681 1.532.958 4.787 2.873 6.127 5.937 1.342 3.063 1.342 4.595 3.447 8.617 2.106 4.021 1.533 6.894 2.489 9.958.958 3.064 3.262 5.171 6.419 8.617 3.156 3.446 2.588 5.362 0 5.171-2.588-.191-4.314 2.297-5.654 5.361-1.338 3.065-2.87 10.724-1.721 8.235 1.149-2.491 3.446-9.384 5.744-10.533 2.298-1.149 6.512 1.953 7.469 3.083.957 1.131.574 4.385-1.916 5.726C.383-8.617 1.915-7.469 4.405-9c2.489-1.532 5.362-3.064 4.787.19" transform="translate(132.845 86.592)"/>
+    <path style="fill:none;stroke:#2196f3;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="M0 0c-.575-.575-1.532 2.681-2.106 4.213-.575 1.532-.561 4.195 1.056 5.675C.964 11.734 0 7.469 0 5.17 0 2.873.574.575 0 0Zm-6.704 5.936c-1.341.766-3.828 0-6.892-.957-3.065-.958-.613 2.131.766 4.213 1.233 1.861.574-.574 3.256-.766 2.68-.192 4.213-3.256 2.87-2.49zm-4.402-6.511c-.192-1.531.574-4.021-3.639-3.064-4.213.958-4.213 3.256-5.936 1.533-1.723-1.724-3.83-3.255-6.32-.575C-29.49 0-29.107.766-30.447.958c-.955.135-4.138.846-6.792.074.206.123.426.285.663.5 1.915 1.723 1.532 2.298 3.638 4.213 2.108 1.916 3.639 3.638 5.171 1.916 1.532-1.725 4.788-2.108 3.639-4.023-1.149-1.914-.383-3.063.958-1.914 1.339 1.149 3.255 1.914 1.915 3.446-1.342 1.532-2.682 5.554-.766 2.873 1.915-2.681 2.489-4.022 3.637-5.553C-17.234.958-16.085 0-15.702.958c.383.957-.192 3.063.383 3.446.574.383 0-3.255 1.723-3.446 1.723-.192 2.681 0 2.49-1.533zM9.192-8.81c-.574 3.257-4.787 32.747-4.787 32.747s-11.299 7.277-13.213 5.746c-1.916-1.533-5.171-1.302-4.788.21s2.872 1.128-1.341 4.002c-4.212 2.873-4.978 5.362-8.233 1.724-3.257-3.639-4.022-6.703-5.937-7.661-1.915-.957-3.447-4.021-1.34-4.787 2.106-.765 2.298 0 4.02-1.531 1.725-1.533 4.023-1.149 4.406-.193.383.959.766 4.022.957 5.171.192 1.149 2.138 4.979 1.93 1.915-.207-3.064 2.665-3.064.75-5.17-1.914-2.106-.765-3.831-4.595-4.214-3.831-.382-4.022 1.915-6.128.766-2.107-1.148-1.915-1.915-2.681-3.063-.766-1.149-4.788-3.447-4.788-3.447s-3.255 1.149-1.724-.958c1.533-2.106 2.873-4.595 1.533-4.786-1.341-.192-4.98 1.914-4.98-.384s-.573-4.787.959-5.362c1.081-.405 1.783-1.284 2.775-1.161-.769-.332-1.468-.813-2.009-1.52-1.491-1.947-.575-5.362-3.639-6.511-3.063-1.15-3.063-2.489-3.639-4.979-.573-2.489 0-8.808.766-9.383.765-.574 2.107-5.362 5.363-4.978 3.256.383 6.702.53 7.851-.023 1.149-.551 3.063 1.171 3.638-3.233.575-4.404 1.915-4.979 2.681-7.277.766-2.297-.383-7.086 0-9.958s3.064-7.852 3.064-10.341c0-2.489 2.873-3.638 4.405-2.681 1.532.958 4.787 2.873 6.127 5.937 1.342 3.063 1.342 4.595 3.447 8.617 2.106 4.021 1.533 6.894 2.489 9.958.958 3.064 3.262 5.171 6.419 8.617 3.156 3.446 2.588 5.362 0 5.171-2.588-.191-4.314 2.297-5.654 5.361-1.338 3.065-2.87 10.724-1.721 8.235 1.149-2.491 3.446-9.384 5.744-10.533 2.298-1.149 6.512 1.953 7.469 3.083.957 1.131.574 4.385-1.916 5.726C.383-8.617 1.915-7.469 4.405-9c2.489-1.532 5.362-3.064 4.787.19z" transform="translate(132.845 86.592)"/>
+    <path style="fill:#2196f3;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M0 0c-1.173-.353-2.106-2.681-1.532-3.831.576-1.148-.574.576-2.106-.382-1.533-.957-3.808-3.639-1.713-3.829 2.096-.193 1.713 1.531 3.628.765 1.915-.765 4.021-.575 4.021 1.34C2.298-4.021 1.915.574 0 0" transform="translate(95.886 109.955)"/>
+    <path style="fill:none;stroke:#2196f3;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="M0 0c-1.173-.353-2.106-2.681-1.532-3.831.576-1.148-.574.576-2.106-.382-1.533-.957-3.808-3.639-1.713-3.829 2.096-.193 1.713 1.531 3.628.765 1.915-.765 4.021-.575 4.021 1.34C2.298-4.021 1.915.574 0 0Z" transform="translate(95.886 109.955)"/>
+    <path style="fill:#2196f3;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M0 0c-1.154-.165-1.533-3.064.957-3.447 2.49-.383 6.947.575 5.293 2.107C4.596.191 2.682.383 0 0" transform="translate(83.44 118.763)"/>
+    <path style="fill:none;stroke:#2196f3;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="M0 0c-1.154-.165-1.533-3.064.957-3.447 2.49-.383 6.947.575 5.293 2.107C4.596.191 2.682.383 0 0Z" transform="translate(83.44 118.763)"/>
+  </g>
+  <g clip-path="url(#b)" transform="matrix(1.33333 0 0 -1.33333 0 196)">
+    <path style="fill:none;stroke:#2196f3;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="M0 0c0-37.068-30.05-67.119-67.119-67.119S-134.238-37.068-134.238 0c0 37.069 30.05 67.119 67.119 67.119S0 37.069 0 0Z" transform="translate(139.738 74.049)"/>
+    <path style="fill:none;stroke:#2196f3;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="M0 0c0-36.731-29.777-66.509-66.509-66.509S-133.019-36.731-133.019 0c0 36.733 29.778 66.51 66.51 66.51C-29.777 66.51 0 36.733 0 0Z" transform="translate(139.438 73.186)"/>
+  </g>
+  <g clip-path="url(#c)" transform="matrix(1.33333 0 0 -1.33333 0 196)">
+    <path style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M0 0c-1.542-1.541-3.386-2.311-5.533-2.311-2.148 0-3.991.77-5.532 2.311s-2.313 3.387-2.313 5.533c0 2.147.772 3.963 2.313 5.45 1.541 1.486 3.384 2.23 5.532 2.23 2.147 0 3.991-.744 5.533-2.23 1.54-1.487 2.312-3.303 2.312-5.45C2.312 3.387 1.54 1.541 0 0m12.551 23.039c-4.954 4.9-10.954 7.35-18.001 7.35-7.047 0-13.047-2.45-18.002-7.35-4.955-4.898-7.432-10.817-7.432-17.754 0-4.183 2.119-11.176 6.359-20.974 4.238-9.799 8.477-18.717 12.715-26.754 4.241-8.037 6.36-11.946 6.36-11.727.66 1.211 1.568 2.863 2.724 4.955 1.157 2.092 3.194 6.029 6.112 11.809 2.917 5.781 5.477 11.094 7.678 15.935a203.312 203.312 0 0 1 6.111 15.032c1.873 5.173 2.807 9.082 2.807 11.724 0 6.937-2.477 12.856-7.431 17.754" transform="translate(119.64 109.307)"/>
+    <path style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M0 0c-1.542-1.541-3.386-2.311-5.533-2.311-2.148 0-3.991.77-5.532 2.311s-2.313 3.387-2.313 5.533c0 2.147.772 3.963 2.313 5.45 1.541 1.486 3.384 2.23 5.532 2.23 2.147 0 3.991-.744 5.533-2.23 1.54-1.487 2.312-3.303 2.312-5.45C2.312 3.387 1.54 1.541 0 0m12.551 23.039c-4.954 4.9-10.954 7.35-18.001 7.35-7.047 0-13.047-2.45-18.002-7.35-4.955-4.898-7.432-10.817-7.432-17.754 0-4.183 2.119-11.176 6.359-20.974 4.238-9.799 8.477-18.717 12.715-26.754 4.241-8.037 6.36-11.946 6.36-11.727.66 1.211 1.568 2.863 2.724 4.955 1.157 2.092 3.194 6.029 6.112 11.809 2.917 5.781 5.477 11.094 7.678 15.935a203.312 203.312 0 0 1 6.111 15.032c1.873 5.173 2.807 9.082 2.807 11.724 0 6.937-2.477 12.856-7.431 17.754" transform="translate(119.64 109.307)"/>
+    <path style="fill:none;stroke:#2196f3;stroke-width:5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="M0 0c-1.542-1.541-3.386-2.311-5.533-2.311-2.148 0-3.991.77-5.532 2.311s-2.313 3.387-2.313 5.533c0 2.147.772 3.963 2.313 5.45 1.541 1.486 3.384 2.23 5.532 2.23 2.147 0 3.991-.744 5.533-2.23 1.54-1.487 2.312-3.303 2.312-5.45C2.312 3.387 1.54 1.541 0 0Zm12.551 23.039c-4.954 4.9-10.954 7.35-18.001 7.35-7.047 0-13.047-2.45-18.002-7.35-4.955-4.898-7.432-10.817-7.432-17.754 0-4.183 2.119-11.176 6.359-20.974 4.238-9.799 8.477-18.717 12.715-26.754 4.241-8.037 6.36-11.946 6.36-11.727.66 1.211 1.568 2.863 2.724 4.955 1.157 2.092 3.194 6.029 6.112 11.809 2.917 5.781 5.477 11.094 7.678 15.935a203.312 203.312 0 0 1 6.111 15.032c1.873 5.173 2.807 9.082 2.807 11.724 0 6.937-2.477 12.856-7.431 17.754z" transform="translate(119.64 109.307)"/>
+  </g>
+</svg>
+`
+const minimizeIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"  fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 19h12v2H6v-2z"/></svg>'
+
+export const editIconUrl = URL.createObjectURL(new Blob([iconEdit], { type: 'image/svg+xml' }))
+export const i18nextIconUrl = URL.createObjectURL(
+  new Blob([i18nextIcon], { type: 'image/svg+xml' })
+)
+export const minimizeIconUrl = URL.createObjectURL(
+  new Blob([minimizeIcon], { type: 'image/svg+xml' })
+)
+export const locizeIconUrl = URL.createObjectURL(new Blob([locizeIcon], { type: 'image/svg+xml' }))
+
+export function EditIcon () {
+  const image = document.createElement('img')
+  image.setAttribute('data-i18next-editor-element', 'true')
+  image.src = editIconUrl
+  image.style.width = '15px'
+
+  return image
+}
+
+export function RibbonLogo (circleSize = '18px', logoSize = '15px') {
+  const ribbon = document.createElement('div')
+  ribbon.setAttribute('data-i18next-editor-element', 'true')
+  ribbon.style = `display: inline-flex; align-items: center; justify-content: center; width: ${circleSize}; height: ${circleSize}; box-shadow: inset 0 0 5px ${colors.highlight}; border: 2px solid ${colors.highlight}; border-radius: 50%`
+
+  // i18next Logo
+  const image = document.createElement('img')
+  image.src = i18nextIconUrl
+  image.style.width = logoSize
+
+  ribbon.appendChild(image)
+
+  return ribbon
+}