@atlaskit/editor-common/dist/cjs/transforms/sync-block.js

A package that contains common classes and components for editor and renderer

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.removeBreakoutFromRendererSyncBlockHTML = void 0;
var _styles = require("../styles");
var _syncBlock = require("../sync-block");
/**
 * Remove breakout mark from renderer sync block.
 *
 * When copying from renderer, we want to paste the content and not the sync block.
 *
 * If the renderer sync block is interpreted as a sync block node by Prosemirror's parser,
 * then since syncBlock is a leaf node, it will stop looking for any nested content and so the content inside the sync block,
 * and so what we actually want will be gone from the pasted slice
 *
 * So we make sure the sync block is not interpreted as a sync block node, by using data-sync-block-renderer instead of data-sync-block
 * However, sync blocks can have breakout marks. When Prosemirror skips over the sync block node, it will then apply that breakout mark to the next node (incorrectly)
 *
 * So we need to strip out all of the breakout marks around renderer sync blocks beforehand while parsing the HTML.
 */
var removeBreakoutFromRendererSyncBlockHTML = exports.removeBreakoutFromRendererSyncBlockHTML = function removeBreakoutFromRendererSyncBlockHTML(html) {
  var parser = new DOMParser();
  var doc = parser.parseFromString(html, 'text/html');
  doc.querySelectorAll("div.".concat(_styles.BreakoutCssClassName.BREAKOUT_MARK)).forEach(function (breakoutDiv) {
    // Check if this breakout div directly contains a renderer sync block
    var rendererDiv = breakoutDiv.querySelector(":scope > div[".concat(_syncBlock.SyncBlockRendererDataAttributeName, "]"));
    if (rendererDiv) {
      breakoutDiv.replaceWith(rendererDiv);
    }
  });
  return doc.body.innerHTML;
};