@atlaskit/editor-plugin-show-diff
Version:
ShowDiff plugin for @atlaskit/editor-core
664 lines (643 loc) • 29.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.wrapBlockNodeView = exports.injectInnerWrapper = exports.createRemovedLozenge = exports.createContentWrapper = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
var _messages = require("@atlaskit/editor-common/messages");
var _nodeTypeUtils = require("@atlaskit/editor-common/utils/node-type-utils");
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _createInlineChangedDecoration = require("../createInlineChangedDecoration");
var _revealStyles = require("../revealStyles");
var _getAttrChangeRanges = require("./getAttrChangeRanges");
var _tableCellEdgeAttrs = require("./tableCellEdgeAttrs");
var _wrapBlockNodeViewStyles = require("./wrapBlockNodeViewStyles");
var shouldShowRemovedLozenge = function shouldShowRemovedLozenge(nodeName) {
switch (nodeName) {
case 'expand':
case 'codeBlock':
case 'mediaSingle':
case 'panel':
case 'decisionList':
case 'embedCard':
case 'blockquote':
return true;
default:
return false;
}
};
var shouldAddShowDiffDeletedNodeClass = function shouldAddShowDiffDeletedNodeClass(nodeName) {
switch (nodeName) {
case 'mediaSingle':
case 'embedCard':
case 'blockquote':
return true;
default:
return false;
}
};
/** Scroll-nav “new” ring (4px red subtlest) for media/embed; styled in editor-core smartCardStyles. */
var maybeAddDeletedOutlineNewClass = function maybeAddDeletedOutlineNewClass(_ref) {
var nodeView = _ref.nodeView,
targetNode = _ref.targetNode,
colorScheme = _ref.colorScheme,
_ref$isActive = _ref.isActive,
isActive = _ref$isActive === void 0 ? false : _ref$isActive;
var name = targetNode.type.name;
if (name !== 'mediaSingle' && name !== 'embedCard') {
return;
}
// Only schemes with a resting ring get the class.
if ((0, _wrapBlockNodeViewStyles.hasRestingDeletedRing)(colorScheme) && !isActive) {
nodeView.classList.add('show-diff-deleted-outline-new');
}
};
/**
* Pre-refactor markup for a deleted media/embed/blockquote nodeview: one class per scheme, and no
* custom properties — the colours come from the matching per-scheme selectors in editor-core.
*
* Delete this together with those selectors at experiment cleanup (EDITOR-8281).
*/
var applyDeletedNodeMarkupLegacy = function applyDeletedNodeMarkupLegacy(_ref2) {
var nodeView = _ref2.nodeView,
targetNode = _ref2.targetNode,
colorScheme = _ref2.colorScheme,
_ref2$isActive = _ref2.isActive,
isActive = _ref2$isActive === void 0 ? false : _ref2$isActive;
nodeView.classList.add(colorScheme === 'traditional' ? 'show-diff-deleted-node-traditional' : 'show-diff-deleted-node');
if (isActive) {
nodeView.classList.add('show-diff-deleted-active');
}
maybeAddDeletedOutlineNewClass({
nodeView: nodeView,
targetNode: targetNode,
colorScheme: colorScheme,
isActive: isActive
});
};
/**
* Registry-driven markup: one scheme-agnostic class, plus the scheme's colours as custom properties,
* so editor-core needs one selector per visual role instead of one per scheme.
*
* `show-diff-deleted-node-vars` *replaces* the legacy classes rather than joining them. Both sets of
* selectors live in editor-core for the life of the experiment, and they have equal specificity, so
* a shared base class would leave the winner up to source order.
*
* The `-vars` suffix names what the class means — this node carries its scheme colours as
* `--diff-delete-*` custom properties — rather than when it arrived, so it still reads correctly
* once the legacy classes are gone.
*/
var applyDeletedNodeMarkupNext = function applyDeletedNodeMarkupNext(_ref3) {
var nodeView = _ref3.nodeView,
targetNode = _ref3.targetNode,
colorScheme = _ref3.colorScheme,
_ref3$isActive = _ref3.isActive,
isActive = _ref3$isActive === void 0 ? false : _ref3$isActive;
nodeView.classList.add('show-diff-deleted-node-vars');
if (isActive) {
nodeView.classList.add('show-diff-deleted-active');
}
maybeAddDeletedOutlineNewClass({
nodeView: nodeView,
targetNode: targetNode,
colorScheme: colorScheme,
isActive: isActive
});
var currentStyle = nodeView.getAttribute('style') || '';
var separator = currentStyle && !currentStyle.trimEnd().endsWith(';') ? ';' : '';
nodeView.setAttribute('style', "".concat(currentStyle).concat(separator).concat((0, _wrapBlockNodeViewStyles.resolveDeletedNodeCSSVariables)(colorScheme)));
};
/** Single gate for the deleted-node classes and custom properties. */
var applyDeletedNodeMarkup = function applyDeletedNodeMarkup(args) {
return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_show_diff_color_scheme_refactor') ? applyDeletedNodeMarkupNext(args) : applyDeletedNodeMarkupLegacy(args);
};
var applyCellOverlayStyles = function applyCellOverlayStyles(_ref4) {
var element = _ref4.element,
colorScheme = _ref4.colorScheme,
isInserted = _ref4.isInserted;
var isRoundedTable = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_diff_rounded_corners');
var overlayStyle = (0, _wrapBlockNodeViewStyles.resolveCellOverlayStyle)({
colorScheme: colorScheme,
isInserted: isInserted,
isRoundedTable: isRoundedTable
});
element.querySelectorAll('td, th').forEach(function (cell) {
var overlay = document.createElement('span');
overlay.setAttribute('style', overlayStyle);
cell.appendChild(overlay);
});
};
/**
* Creates a "Removed" lozenge to be displayed at the top right corner of deleted block nodes
*/
var createRemovedLozenge = exports.createRemovedLozenge = function createRemovedLozenge(intl) {
var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var colorScheme = arguments.length > 2 ? arguments[2] : undefined;
var inCell = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
var container = document.createElement('span');
var containerStyle = (0, _lazyNodeView.convertToInlineCss)({
position: 'absolute',
top: "var(--ds-space-075, 6px)",
right: "var(--ds-space-075, 6px)",
// Rounded table-cell overlays use z-index 2 and are appended after the cell content.
// Keep the lozenge above them so the overlay cannot tint or obscure it.
zIndex: 3,
pointerEvents: 'none',
display: 'flex'
});
// Create vanilla HTML lozenge element with Atlaskit Lozenge styling (visual refresh)
var lozengeElement = document.createElement('span');
// A column label sits over an already-grey deleted cell, so use the red Removed treatment.
var lozengeInnerStyle = (0, _wrapBlockNodeViewStyles.resolveRemovedLozengeStyle)(colorScheme, inCell || isActive);
lozengeElement.setAttribute('style', lozengeInnerStyle);
lozengeElement.textContent = intl.formatMessage(_messages.trackChangesMessages.removed).toUpperCase();
if (inCell) {
lozengeElement.setAttribute('style', "".concat(lozengeInnerStyle, ";").concat(containerStyle));
lozengeElement.setAttribute('data-testid', 'show-diff-removed-lozenge');
lozengeElement.contentEditable = 'false';
return lozengeElement;
}
container.setAttribute('style', containerStyle);
container.setAttribute('data-testid', 'show-diff-removed-lozenge');
container.appendChild(lozengeElement);
return container;
};
/**
* Wraps a block node in a container with relative positioning to support absolute positioned lozenge
*/
var createBlockNodeWrapper = function createBlockNodeWrapper() {
var wrapper = document.createElement('div');
var baseStyle = (0, _lazyNodeView.convertToInlineCss)({
position: 'relative',
display: 'block',
opacity: 1
});
wrapper.setAttribute('style', baseStyle);
return wrapper;
};
var applyMultiContainerLikeStyles = function applyMultiContainerLikeStyles(_ref5) {
var element = _ref5.element,
targetNode = _ref5.targetNode,
colorScheme = _ref5.colorScheme,
isActive = _ref5.isActive,
isInserted = _ref5.isInserted,
_ref5$hideAddedDiffsU = _ref5.hideAddedDiffsUnderline,
hideAddedDiffsUnderline = _ref5$hideAddedDiffsU === void 0 ? false : _ref5$hideAddedDiffsU;
var currentStyle = element.getAttribute('style') || '';
var targetNodeName = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (0, _nodeTypeUtils.getBaseNodeTypeName)(targetNode.type) : targetNode.type.name;
var nodeSpecificStyle = (0, _wrapBlockNodeViewStyles.getChangedNodeStyle)(targetNodeName, colorScheme, isInserted, isActive, hideAddedDiffsUnderline) || '';
if (targetNode.type.name === 'decisionList') {
var nestedInsertedNodeStyle = (0, _wrapBlockNodeViewStyles.resolveNestedInsertedNodeStyle)(colorScheme);
element.querySelectorAll('li').forEach(function (listItem) {
var currentListItemStyle = listItem.getAttribute('style') || '';
listItem.setAttribute('style', (0, _fg.fg)('platform_editor_ai_show_diff_patch_1') ? combineStyles(currentListItemStyle, nestedInsertedNodeStyle) : "".concat(currentListItemStyle).concat(nestedInsertedNodeStyle));
});
} else if (targetNode.type.name === 'layoutSection') {
var _nestedInsertedNodeStyle = (0, _wrapBlockNodeViewStyles.resolveNestedInsertedNodeStyle)(colorScheme);
element.querySelectorAll('[data-layout-column="true"]').forEach(function (section) {
var currentSectionStyle = section.getAttribute('style') || '';
section.setAttribute('style', (0, _fg.fg)('platform_editor_ai_show_diff_patch_1') ? combineStyles(currentSectionStyle, _nestedInsertedNodeStyle) : "".concat(currentSectionStyle).concat(_nestedInsertedNodeStyle));
});
} else if (targetNode.type.name === 'taskList') {
var _nestedInsertedNodeStyle2 = (0, _wrapBlockNodeViewStyles.resolveNestedInsertedNodeStyle)(colorScheme);
element.querySelectorAll('li').forEach(function (listItem) {
var currentListItemStyle = listItem.getAttribute('style') || '';
listItem.setAttribute('style', "".concat(currentListItemStyle).concat(_nestedInsertedNodeStyle2));
});
}
element.setAttribute('style', (0, _fg.fg)('platform_editor_ai_show_diff_patch_1') ? combineStyles(currentStyle, nodeSpecificStyle) : "".concat(currentStyle, ";").concat(nodeSpecificStyle));
};
var combineStyles = function combineStyles(currentStyle, appendedStyle) {
var separator = currentStyle && appendedStyle && !currentStyle.trimEnd().endsWith(';') ? '; ' : '';
return "".concat(currentStyle).concat(separator).concat(appendedStyle);
};
var appendStyleToElement = function appendStyleToElement(element, style) {
var currentStyle = element.getAttribute('style') || '';
element.setAttribute('style', combineStyles(currentStyle, style));
};
var wrapAtomicInlineNode = function wrapAtomicInlineNode(_ref6) {
var element = _ref6.element,
className = _ref6.className,
style = _ref6.style;
var wrapper = document.createElement('span');
wrapper.className = className;
wrapper.setAttribute('style', style);
element.replaceWith(wrapper);
wrapper.append(element);
};
var applyInlineLeafNodeStyles = function applyInlineLeafNodeStyles(_ref7) {
var element = _ref7.element,
targetNode = _ref7.targetNode,
contentStyle = _ref7.contentStyle,
colorScheme = _ref7.colorScheme;
// NodeViewSerializer appends one DOM node per direct ProseMirror child, preserving order.
var childDomNodes = (0, _toConsumableArray2.default)(element.childNodes);
targetNode.content.forEach(function (childNode, _offset, index) {
if (childNode.isText || !childNode.isLeaf) {
return;
}
var childElement = childDomNodes[index];
if (!(childElement instanceof HTMLElement)) {
return;
}
if (!(0, _getAttrChangeRanges.isInlineAttrChangeNodeName)(childNode.type.name)) {
appendStyleToElement(childElement, contentStyle);
return;
}
var _getAtomicInlineChang = (0, _createInlineChangedDecoration.getAtomicInlineChangedAttrs)(childNode.type.name, colorScheme),
className = _getAtomicInlineChang.className,
styleSuffix = _getAtomicInlineChang.styleSuffix;
// Inline decorations use an outer span so node-specific descendant selectors match.
wrapAtomicInlineNode({
element: childElement,
className: className,
style: combineStyles(contentStyle, styleSuffix)
});
});
};
/**
* Editor CSS makes `blockquote` `inline-block` for its block formatting context. Inside a widget
* that collapses the indicator bar: the container is an inline `span`, so its anchor rect comes from
* font metrics, not from an inline-level child. `flow-root` keeps the formatting context but is
* block-level — unlike `block`, which lets the child paragraph's top margin collapse out.
*/
var quoteBlockLevelStyle = (0, _lazyNodeView.convertToInlineCss)({
display: 'flow-root'
});
var applyTextLikeBlockNodeStyles = function applyTextLikeBlockNodeStyles(_ref8) {
var element = _ref8.element,
targetNode = _ref8.targetNode,
colorScheme = _ref8.colorScheme,
isActive = _ref8.isActive,
isInserted = _ref8.isInserted,
_ref8$hideAddedDiffsU = _ref8.hideAddedDiffsUnderline,
hideAddedDiffsUnderline = _ref8$hideAddedDiffsU === void 0 ? false : _ref8$hideAddedDiffsU,
_ref8$highlightInline = _ref8.highlightInlineLeafNodes,
highlightInlineLeafNodes = _ref8$highlightInline === void 0 ? false : _ref8$highlightInline;
var currentStyle = element.getAttribute('style') || '';
var nodeSpecificStyle = (0, _wrapBlockNodeViewStyles.getChangedNodeStyle)(targetNode.type.name, colorScheme, isInserted, isActive, hideAddedDiffsUnderline) || '';
if (nodeSpecificStyle) {
element.setAttribute('style', "".concat(currentStyle).concat(nodeSpecificStyle));
}
var contentStyle = (0, _wrapBlockNodeViewStyles.getChangedContentStyle)(colorScheme, isActive, isInserted, hideAddedDiffsUnderline);
var walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
var textNodesToWrap = [];
var currentNode = walker.nextNode();
while (currentNode) {
if (currentNode instanceof Text && currentNode.textContent !== '' && currentNode.parentElement) {
textNodesToWrap.push(currentNode);
}
currentNode = walker.nextNode();
}
textNodesToWrap.forEach(function (textNode) {
var contentWrapper = document.createElement('span');
contentWrapper.setAttribute('style', contentStyle);
textNode.replaceWith(contentWrapper);
contentWrapper.append(textNode);
});
if (highlightInlineLeafNodes && targetNode.type.inlineContent) {
applyInlineLeafNodeStyles({
element: element,
targetNode: targetNode,
contentStyle: contentStyle,
colorScheme: colorScheme
});
}
};
/**
* Creates a content wrapper with deleted styles for a block node
*/
/**
* The element that spans breakout width, for nodes carrying a `breakout` mark. The wrapper divs
* stay at editor-column width, so anything that should align to the node's visible edges —
* outlines, absolutely positioned lozenges — has to attach here instead.
*/
var findBreakoutElement = function findBreakoutElement(targetNode, nodeView) {
var _targetNode$marks;
var hasBreakoutMark = (_targetNode$marks = targetNode.marks) === null || _targetNode$marks === void 0 ? void 0 : _targetNode$marks.some(function (mark) {
return mark.type.name === 'breakout';
});
if (!hasBreakoutMark || !(nodeView instanceof HTMLElement)) {
return null;
}
return nodeView.matches('[data-node-type]') ? nodeView : nodeView.querySelector('[data-node-type]');
};
var createBlockNodeContentWrapper = function createBlockNodeContentWrapper(_ref9) {
var nodeView = _ref9.nodeView,
targetNode = _ref9.targetNode,
colorScheme = _ref9.colorScheme,
isActive = _ref9.isActive,
isInserted = _ref9.isInserted,
_ref9$hideAddedDiffsU = _ref9.hideAddedDiffsUnderline,
hideAddedDiffsUnderline = _ref9$hideAddedDiffsU === void 0 ? false : _ref9$hideAddedDiffsU;
var contentWrapper = document.createElement('div');
var targetNodeName = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (0, _nodeTypeUtils.getBaseNodeTypeName)(targetNode.type) : targetNode.type.name;
var nodeStyle = (0, _wrapBlockNodeViewStyles.getChangedNodeStyle)(targetNodeName, colorScheme, isInserted, isActive, hideAddedDiffsUnderline);
// When the extended experiment is enabled and the content is inserted,
// block widget nodes that already have dedicated node-level styling (e.g. boxShadow outline)
// should not also get the inline content style (borderBottom underline) on their container.
var shouldSkipContentStyle = isInserted && nodeStyle !== undefined;
var contentStyle = shouldSkipContentStyle ? '' : (0, _wrapBlockNodeViewStyles.getChangedContentStyle)(colorScheme, isActive, isInserted, hideAddedDiffsUnderline);
// A `breakout` node renders wider than the editor column while the wrapper divs
// stay at column width, so paint the outline on the node element that spans that width.
var breakoutTarget = nodeStyle ? findBreakoutElement(targetNode, nodeView) : null;
if ((0, _fg.fg)('platform_editor_ai_show_diff_patch_2') && breakoutTarget) {
appendStyleToElement(breakoutTarget, nodeStyle !== null && nodeStyle !== void 0 ? nodeStyle : '');
contentWrapper.setAttribute('style', contentStyle || '');
} else {
contentWrapper.setAttribute('style', "".concat(contentStyle).concat(nodeStyle || ''));
}
contentWrapper.append(nodeView);
return contentWrapper;
};
/**
* Handles embedCard node rendering with lozenge attached to the rich-media-item container.
* Since embedCard content loads asynchronously, we use a MutationObserver
* to wait for the rich-media-item to appear before attaching the lozenge.
* @returns true if embedCard was handled
*/
var handleEmbedCardWithLozenge = function handleEmbedCardWithLozenge(_ref0) {
var dom = _ref0.dom,
nodeView = _ref0.nodeView,
targetNode = _ref0.targetNode,
lozenge = _ref0.lozenge,
colorScheme = _ref0.colorScheme,
_ref0$isActive = _ref0.isActive,
isActive = _ref0$isActive === void 0 ? false : _ref0$isActive;
if (targetNode.type.name !== 'embedCard' || !(nodeView instanceof HTMLElement)) {
return false;
}
var richMediaItem = nodeView.querySelector('.rich-media-item');
if (richMediaItem instanceof HTMLElement) {
richMediaItem.appendChild(lozenge);
} else {
var observer = new MutationObserver(function (_, obs) {
var loadedRichMedia = nodeView.querySelector('.rich-media-item');
if (loadedRichMedia instanceof HTMLElement) {
loadedRichMedia.appendChild(lozenge);
obs.disconnect();
}
});
observer.observe(nodeView, {
childList: true,
subtree: true
});
}
if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
applyDeletedNodeMarkup({
nodeView: nodeView,
targetNode: targetNode,
colorScheme: colorScheme,
isActive: isActive
});
}
dom.append(nodeView);
return true;
};
/**
* Handles special mediaSingle node rendering with lozenge on child media element
* @returns true if mediaSingle was handled, false otherwise
*/
var handleMediaSingleWithLozenge = function handleMediaSingleWithLozenge(_ref1) {
var dom = _ref1.dom,
nodeView = _ref1.nodeView,
targetNode = _ref1.targetNode,
lozenge = _ref1.lozenge,
colorScheme = _ref1.colorScheme,
_ref1$isActive = _ref1.isActive,
isActive = _ref1$isActive === void 0 ? false : _ref1$isActive;
if (targetNode.type.name !== 'mediaSingle' || !(nodeView instanceof HTMLElement)) {
return false;
}
var mediaNode = nodeView.querySelector('[data-prosemirror-node-name="media"]');
if (!mediaNode || !(mediaNode instanceof HTMLElement)) {
return false;
}
// Add relative positioning to media node to anchor lozenge
var currentStyle = mediaNode.getAttribute('style') || '';
var relativePositionStyle = (0, _lazyNodeView.convertToInlineCss)({
position: 'relative'
});
mediaNode.setAttribute('style', "".concat(currentStyle).concat(relativePositionStyle));
mediaNode.append(lozenge);
// Add deleted node class if needed
if (shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
applyDeletedNodeMarkup({
nodeView: nodeView,
targetNode: targetNode,
colorScheme: colorScheme,
isActive: isActive
});
}
dom.append(nodeView);
return true;
};
/**
* Appends a block node with wrapper, lozenge, and appropriate styling
*/
var wrapBlockNode = function wrapBlockNode(_ref10) {
var dom = _ref10.dom,
nodeView = _ref10.nodeView,
targetNode = _ref10.targetNode,
colorScheme = _ref10.colorScheme,
intl = _ref10.intl,
_ref10$isActive = _ref10.isActive,
isActive = _ref10$isActive === void 0 ? false : _ref10$isActive,
_ref10$isInserted = _ref10.isInserted,
isInserted = _ref10$isInserted === void 0 ? false : _ref10$isInserted,
_ref10$hideAddedDiffs = _ref10.hideAddedDiffsUnderline,
hideAddedDiffsUnderline = _ref10$hideAddedDiffs === void 0 ? false : _ref10$hideAddedDiffs;
var blockWrapper = createBlockNodeWrapper();
var targetNodeName = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (0, _nodeTypeUtils.getBaseNodeTypeName)(targetNode.type) : targetNode.type.name;
if (shouldShowRemovedLozenge(targetNodeName) && !isInserted) {
var lozenge = createRemovedLozenge(intl, isActive, colorScheme);
if (handleEmbedCardWithLozenge({
dom: dom,
nodeView: nodeView,
targetNode: targetNode,
lozenge: lozenge,
colorScheme: colorScheme,
isActive: isActive
})) {
return;
}
if (handleMediaSingleWithLozenge({
dom: dom,
nodeView: nodeView,
targetNode: targetNode,
lozenge: lozenge,
colorScheme: colorScheme,
isActive: isActive
})) {
return;
}
// `lozenge` is absolutely positioned, so it lands on the nearest positioned ancestor. For a
// breakout node that is the column-width wrapper, leaving the pill short of the node's
// right edge — host it on the breakout element, which must establish a containing block.
var breakoutHost = (0, _fg.fg)('platform_editor_ai_show_diff_patch_2') ? findBreakoutElement(targetNode, nodeView) : null;
if (breakoutHost) {
appendStyleToElement(breakoutHost, (0, _lazyNodeView.convertToInlineCss)({
position: 'relative'
}));
breakoutHost.append(lozenge);
} else {
blockWrapper.append(lozenge);
}
}
var contentWrapper = createBlockNodeContentWrapper({
nodeView: nodeView,
targetNode: targetNode,
colorScheme: colorScheme,
isActive: isActive,
isInserted: isInserted,
hideAddedDiffsUnderline: hideAddedDiffsUnderline
});
blockWrapper.append(contentWrapper);
if (nodeView instanceof HTMLElement && shouldAddShowDiffDeletedNodeClass(targetNode.type.name)) {
applyDeletedNodeMarkup({
nodeView: nodeView,
targetNode: targetNode,
colorScheme: colorScheme,
isActive: isActive
});
}
dom.append(blockWrapper);
};
/**
* Handles all block node rendering with appropriate deleted styling.
* For heading nodes, applies styles directly to preserve natural margins.
* For other block nodes, uses wrapper approach with optional lozenge.
*/
var wrapBlockNodeView = exports.wrapBlockNodeView = function wrapBlockNodeView(_ref11) {
var dom = _ref11.dom,
nodeView = _ref11.nodeView,
targetNode = _ref11.targetNode,
colorScheme = _ref11.colorScheme,
intl = _ref11.intl,
_ref11$isActive = _ref11.isActive,
isActive = _ref11$isActive === void 0 ? false : _ref11$isActive,
_ref11$isInserted = _ref11.isInserted,
isInserted = _ref11$isInserted === void 0 ? false : _ref11$isInserted,
_ref11$hideAddedDiffs = _ref11.hideAddedDiffsUnderline,
hideAddedDiffsUnderline = _ref11$hideAddedDiffs === void 0 ? false : _ref11$hideAddedDiffs,
_ref11$highlightInlin = _ref11.highlightInlineLeafNodes,
highlightInlineLeafNodes = _ref11$highlightInlin === void 0 ? false : _ref11$highlightInlin;
if (nodeView instanceof HTMLElement) {
if (isInserted && (0, _wrapBlockNodeViewStyles.isMultiContainerBlockNode)(targetNode.type.name)) {
applyMultiContainerLikeStyles({
element: nodeView,
targetNode: targetNode,
colorScheme: colorScheme,
isActive: isActive,
isInserted: isInserted,
hideAddedDiffsUnderline: hideAddedDiffsUnderline
});
dom.append(nodeView);
return;
}
if ((0, _wrapBlockNodeViewStyles.isTextLikeBlockNode)(targetNode.type.name)) {
applyTextLikeBlockNodeStyles({
element: nodeView,
targetNode: targetNode,
colorScheme: colorScheme,
isActive: isActive,
isInserted: isInserted,
hideAddedDiffsUnderline: hideAddedDiffsUnderline,
highlightInlineLeafNodes: highlightInlineLeafNodes
});
if (targetNode.type.name === 'blockquote' && (0, _fg.fg)('platform_editor_ai_show_diff_patch_1')) {
appendStyleToElement(nodeView, quoteBlockLevelStyle);
}
dom.append(nodeView);
return;
}
if (targetNode.type.name === 'table') {
if ((0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_diff_rounded_corners')) {
(0, _tableCellEdgeAttrs.applyTableCellEdgeAttrs)({
element: nodeView,
tableNode: targetNode
});
}
applyCellOverlayStyles({
element: nodeView,
colorScheme: colorScheme,
isInserted: isInserted
});
dom.append(nodeView);
return;
}
}
wrapBlockNode({
dom: dom,
nodeView: nodeView,
targetNode: targetNode,
colorScheme: colorScheme,
intl: intl,
isActive: isActive,
isInserted: isInserted,
hideAddedDiffsUnderline: hideAddedDiffsUnderline
});
};
/**
* Injects a styled inner wrapper span around the children of a block node element.
* CSS backgrounds don't work when applied to a wrapper around a paragraph, so
* the wrapper needs to be injected inside the node around the child content.
*/
var injectInnerWrapper = exports.injectInnerWrapper = function injectInnerWrapper(_ref12) {
var node = _ref12.node,
colorScheme = _ref12.colorScheme,
isActive = _ref12.isActive,
isInserted = _ref12.isInserted,
reveal = _ref12.reveal;
var wrapper = document.createElement('span');
var revealStyle = (0, _revealStyles.applyRevealToElement)({
colorScheme: colorScheme,
element: wrapper,
isActive: isActive !== null && isActive !== void 0 ? isActive : false,
isInserted: isInserted !== null && isInserted !== void 0 ? isInserted : false,
reveal: reveal
});
wrapper.setAttribute('style', (isInserted ? (0, _wrapBlockNodeViewStyles.getInsertedContentStyle)(colorScheme, isActive) : (0, _wrapBlockNodeViewStyles.getDeletedContentStyle)(colorScheme, isActive, Boolean(revealStyle))) + revealStyle);
(0, _toConsumableArray2.default)(node.childNodes).forEach(function (child) {
var removedChild = node.removeChild(child);
wrapper.append(removedChild);
});
node.appendChild(wrapper);
return node;
};
/**
* Creates a styled span wrapper for inline content within a change decoration.
*/
var createContentWrapper = exports.createContentWrapper = function createContentWrapper(colorScheme) {
var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var isInserted = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var reveal = arguments.length > 3 ? arguments[3] : undefined;
var wrapper = document.createElement('span');
var baseStyle = (0, _lazyNodeView.convertToInlineCss)({
position: 'relative',
width: 'fit-content'
});
// Empty unless the reveal is running, in which case the static highlight below is withheld so
// the animation can wipe it in instead.
var revealStyle = (0, _revealStyles.applyRevealToElement)({
colorScheme: colorScheme,
element: wrapper,
isActive: isActive,
isInserted: isInserted,
reveal: reveal
});
var deletedStyle = (0, _wrapBlockNodeViewStyles.getDeletedContentStyle)(colorScheme, isActive, Boolean(revealStyle));
if (isInserted) {
wrapper.setAttribute('style', "".concat(baseStyle).concat((0, _wrapBlockNodeViewStyles.getInsertedContentStyle)(colorScheme, isActive)).concat(revealStyle));
} else {
wrapper.setAttribute('style', "".concat(baseStyle).concat(deletedStyle).concat(revealStyle));
var strikethrough = document.createElement('span');
strikethrough.setAttribute('style', (0, _wrapBlockNodeViewStyles.getDeletedContentStyleUnbounded)(colorScheme, isActive));
wrapper.append(strikethrough);
}
return wrapper;
};