locize/dist/esm/api/postMessage.js

This package adds the incontext editor to your i18next setup.

import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
import { getIframeUrl } from '../vars.js';
import { store } from '../store.js';
import { uninstrumentedStore } from '../uninstrumentedStore.js';
import { debounce } from '../utils.js';

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var legacyEventMapping = {
  committed: 'commitKeys'
};
function getMappedLegacyEvent(msg) {
  if (legacyEventMapping[msg]) return legacyEventMapping[msg];
  return msg;
}
function addLocizeSavedHandler(handler) {
  api.locizeSavedHandler = handler;
}
function setEditorLng(lng) {
  api.sendCurrentTargetLanguage(lng);
}
var pendingMsgs = [];
var allowedActionsBeforeInit = ['locizeIsEnabled', 'requestInitialize'];
function sendMessage(action, payload) {
  var _document$getElementB;
  var currentSource = (_document$getElementB = document.getElementById('i18next-editor-iframe')) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.contentWindow;
  if (currentSource) {
    if (api.source && api.source !== currentSource) {
      api.initialized = false;
    }
    api.source = currentSource;
  }
  if (!api.origin) api.origin = getIframeUrl();
  if (!api.source || !api.source.postMessage || !api.initialized && allowedActionsBeforeInit.indexOf(action) < 0) {
    pendingMsgs.push({
      action: action,
      payload: payload
    });
    return;
  }
  if (api.legacy) {
    api.source.postMessage(_objectSpread({
      message: action
    }, payload), api.origin);
  } else {
    api.source.postMessage({
      sender: 'i18next-editor',
      senderAPIVersion: 'v2',
      action: action,
      message: action,
      payload: payload
    }, api.origin);
  }
  var todo = pendingMsgs;
  pendingMsgs = [];
  todo.forEach(function (_ref) {
    var action = _ref.action,
      payload = _ref.payload;
    sendMessage(action, payload);
  });
}
var sendCurrentParsedContentDebounced = function sendCurrentParsedContentDebounced() {
  sendMessage('sendCurrentParsedContent', {
    content: Object.values(store.data).map(function (item) {
      return {
        id: item.id,
        keys: item.keys
      };
    }),
    uninstrumented: Object.values(uninstrumentedStore.data).map(function (item) {
      return {
        id: item.id,
        keys: item.keys
      };
    })
  });
};
var handlers = {};
var repeat = 5;
var api = {
  init: function init(implementation, clickHandler) {
    api.i18n = implementation;
    api.clickHandler = clickHandler;
  },
  requestInitialize: function requestInitialize(payload) {
    sendMessage('requestInitialize', payload);
    if (api.initInterval) return;
    repeat = 5;
    api.initInterval = setInterval(function () {
      repeat = repeat - 1;
      api.requestInitialize(payload);
      if (repeat < 0 && api.initInterval) {
        clearInterval(api.initInterval);
        delete api.initInterval;
      }
    }, 2000);
  },
  selectKey: function selectKey(meta) {
    sendMessage('selectKey', meta);
  },
  confirmResourceBundle: function confirmResourceBundle(payload) {
    sendMessage('confirmResourceBundle', payload);
  },
  sendCurrentParsedContent: debounce(sendCurrentParsedContentDebounced, 500),
  sendCurrentTargetLanguage: function sendCurrentTargetLanguage(lng) {
    sendMessage('sendCurrentTargetLanguage', {
      targetLng: lng || api.i18n && api.i18n.getLng && api.i18n.getLng()
    });
  },
  sendHrefchanged: function sendHrefchanged(href) {
    sendMessage('hrefChanged', {
      href: href
    });
  },
  addHandler: function addHandler(action, fc) {
    if (!handlers[action]) handlers[action] = [];
    handlers[action].push(fc);
  },
  sendLocizeIsEnabled: function sendLocizeIsEnabled(payload) {
    sendMessage('locizeIsEnabled', _objectSpread(_objectSpread({}, payload), {}, {
      enabled: true
    }));
  },
  onAddedKey: function onAddedKey(lng, ns, key, value) {
    var msg = {
      lng: lng,
      ns: ns,
      key: key,
      value: value
    };
    sendMessage('added', msg);
  }
};
var getExpectedIframeOrigin = function getExpectedIframeOrigin() {
  try {
    return new URL(getIframeUrl()).origin;
  } catch (err) {
    return null;
  }
};
if (typeof window !== 'undefined') {
  window.addEventListener('message', function (e) {
    var expectedOrigin = getExpectedIframeOrigin();
    if (!expectedOrigin || e.origin !== expectedOrigin) return;
    var _e$data = e.data,
      sender = _e$data.sender,
      action = _e$data.action,
      message = _e$data.message,
      payload = _e$data.payload;
    if (message) {
      var usedEventName = getMappedLegacyEvent(message);
      if (handlers[usedEventName]) {
        handlers[usedEventName].forEach(function (fc) {
          fc(payload, e);
        });
      }
    } else if (sender === 'i18next-editor-frame' && handlers[action]) {
      handlers[action].forEach(function (fc) {
        fc(payload, e);
      });
    }
  });
}

export { addLocizeSavedHandler, api, sendMessage, setEditorLng };