@atlaskit/editor-plugin-show-diff 5.0.4 → 5.0.6

package/dist/es2019/pm-plugins/{colorSchemes → decorations/colorSchemes}/traditional.js

@@ -28,43 +28,42 @@ export const deletedTraditionalContentStyleUnbounded = convertToInlineCss({
   pointerEvents: 'none',
   zIndex: 1
 });
-const traditionalStyleQuoteNode = convertToInlineCss({
+export const deletedTraditionalStyleQuoteNode = convertToInlineCss({
+  marginTop: "var(--ds-space-150, 12px)",
+  paddingTop: "var(--ds-space-025, 2px)",
+  paddingBottom: "var(--ds-space-025, 2px)",
+  paddingLeft: "var(--ds-space-025, 2px)",
+  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-red, #E2483D)"}`,
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
+export const deletedTraditionalBlockOutline = convertToInlineCss({
+  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-red, #E2483D)"}`,
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
+export const deletedTraditionalBlockOutlineRounded = convertToInlineCss({
+  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-red, #E2483D)"}`,
+  borderRadius: `calc(${"var(--ds-radius-xsmall, 2px)"} + 1px)`
+});
+export const deletedTraditionalRowStyle = convertToInlineCss({
+  textDecorationColor: "var(--ds-border-accent-red, #E2483D)",
+  textDecoration: 'line-through',
+  opacity: 0.6,
+  display: 'table-row'
+});
+export const traditionalStyleQuoteNode = convertToInlineCss({
   borderLeft: `2px solid ${"var(--ds-border-accent-green, #22A06B)"}`
 });
-const traditionalStyleRuleNode = convertToInlineCss({
+export const traditionalStyleRuleNode = convertToInlineCss({
   backgroundColor: "var(--ds-border-accent-green, #22A06B)"
 });
-const traditionalStyleNode = convertToInlineCss({
+export const traditionalStyleNode = convertToInlineCss({
   boxShadow: `0 0 0 1px ${"var(--ds-border-accent-green, #22A06B)"}`,
   borderRadius: "var(--ds-radius-small, 4px)"
 });
-const traditionalStyleCardBlockNode = convertToInlineCss({
+export const traditionalStyleCardBlockNode = convertToInlineCss({
   boxShadow: `0 0 0 1px ${"var(--ds-border-accent-green, #22A06B)"}`,
   borderRadius: "var(--ds-radius-medium, 6px)"
 });
-const traditionalDecorationMarkerVariable = convertToInlineCss({
+export const traditionalDecorationMarkerVariable = convertToInlineCss({
   '--diff-decoration-marker-color': "var(--ds-border-accent-green, #22A06B)"
-});
-export const getTraditionalNodeStyle = nodeName => {
-  if (['mediaSingle', 'mediaGroup', 'table',
-  // Handle table separately to avoid border issues
-  'tableRow', 'tableCell', 'tableHeader', 'paragraph',
-  // Paragraph and heading nodes do not need special styling
-  'heading', 'hardBreak', 'decisionList', 'taskList', 'taskItem', 'bulletList', 'orderedList', 'layoutSection'].includes(nodeName)) {
-    // Layout nodes do not need special styling
-    return undefined;
-  }
-  if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
-    return traditionalDecorationMarkerVariable;
-  }
-  if (nodeName === 'blockquote') {
-    return traditionalStyleQuoteNode;
-  }
-  if (nodeName === 'rule') {
-    return traditionalStyleRuleNode;
-  }
-  if (nodeName === 'blockCard') {
-    return traditionalStyleCardBlockNode;
-  }
-  return traditionalStyleNode;
-};
+});

package/dist/es2019/pm-plugins/decorations/createBlockChangedDecoration.js

@@ -0,0 +1,70 @@
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { standardDecorationMarkerVariable, editingStyleQuoteNode, editingStyleRuleNode, editingStyleCardBlockNode, editingStyleNode } from './colorSchemes/standard';
+import { traditionalDecorationMarkerVariable, traditionalStyleQuoteNode, traditionalStyleRuleNode, traditionalStyleCardBlockNode, traditionalStyleNode } from './colorSchemes/traditional';
+const getNodeClass = name => {
+  switch (name) {
+    case 'extension':
+      return 'show-diff-changed-decoration-node';
+    default:
+      return undefined;
+  }
+};
+const getBlockNodeStyle = (nodeName, colorScheme) => {
+  const isTraditional = colorScheme === 'traditional';
+  if (['mediaSingle', 'mediaGroup', 'table',
+  // Handle table separately to avoid border issues
+  'tableRow', 'tableCell', 'tableHeader', 'paragraph',
+  // Paragraph and heading nodes do not need special styling
+  'heading', 'hardBreak', 'decisionList', 'taskList', 'taskItem', 'bulletList', 'orderedList', 'layoutSection'].includes(nodeName)) {
+    // Layout nodes do not need special styling
+    return undefined;
+  }
+  if (['extension', 'embedCard', 'listItem'].includes(nodeName)) {
+    return isTraditional ? traditionalDecorationMarkerVariable : standardDecorationMarkerVariable;
+  }
+  if (nodeName === 'blockquote') {
+    return isTraditional ? traditionalStyleQuoteNode : editingStyleQuoteNode;
+  }
+  if (nodeName === 'rule') {
+    return isTraditional ? traditionalStyleRuleNode : editingStyleRuleNode;
+  }
+  if (nodeName === 'blockCard') {
+    return isTraditional ? traditionalStyleCardBlockNode : editingStyleCardBlockNode;
+  }
+  return isTraditional ? traditionalStyleNode : editingStyleNode;
+};
+
+/**
+ * Inline decoration used for insertions as the content already exists in the document
+ *
+ * @param change Changeset "change" containing information about the change content + range
+ * @returns Prosemirror inline decoration
+ */
+export const createBlockChangedDecoration = ({
+  change,
+  colorScheme
+}) => {
+  if (fg('platform_editor_show_diff_scroll_navigation')) {
+    const style = getBlockNodeStyle(change.name, colorScheme);
+    const className = getNodeClass(change.name);
+    if (style || className) {
+      return Decoration.node(change.from, change.to, {
+        style: style,
+        'data-testid': 'show-diff-changed-decoration-node',
+        class: className
+      }, {
+        key: 'diff-block'
+      });
+    }
+    return undefined;
+  } else {
+    return Decoration.node(change.from, change.to, {
+      style: getBlockNodeStyle(change.name, colorScheme),
+      'data-testid': 'show-diff-changed-decoration-node',
+      class: getNodeClass(change.name)
+    }, {
+      key: 'diff-block'
+    });
+  }
+};

package/dist/es2019/pm-plugins/{deletedRowsHandler.js → decorations/createChangedRowDecorationWidgets.js}

@@ -1,32 +1,21 @@
-import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { areNodesEqualIgnoreAttrs } from '@atlaskit/editor-common/utils/document';
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { findSafeInsertPos } from './findSafeInsertPos';
-const deletedRowStyle = convertToInlineCss({
-  color: "var(--ds-text-accent-gray, #505258)",
-  textDecoration: 'line-through',
-  opacity: 0.6,
-  display: 'table-row'
-});
-const deletedTraditionalRowStyle = convertToInlineCss({
-  textDecorationColor: "var(--ds-border-accent-red, #E2483D)",
-  textDecoration: 'line-through',
-  opacity: 0.6,
-  display: 'table-row'
-});
+import { deletedRowStyle } from './colorSchemes/standard';
+import { deletedTraditionalRowStyle } from './colorSchemes/traditional';
+import { findSafeInsertPos } from './utils/findSafeInsertPos';
 /**
  * Extracts information about deleted table rows from a change
  */
-const extractDeletedRows = (change, originalDoc, newDoc) => {
-  const deletedRows = [];
+const extractChangedRows = (change, originalDoc, newDoc) => {
+  const changedRows = [];
 
   // Find the table in the original document
   const $fromPos = originalDoc.resolve(change.fromA);
   const tableOld = findParentNodeClosestToPos($fromPos, node => node.type.name === 'table');
   if (!tableOld) {
-    return deletedRows;
+    return changedRows;
   }
   const oldTableMap = TableMap.get(tableOld.node);
 
@@ -34,18 +23,18 @@ const extractDeletedRows = (change, originalDoc, newDoc) => {
   const $newPos = newDoc.resolve(change.fromB);
   const tableNew = findParentNodeClosestToPos($newPos, node => node.type.name === 'table');
   if (!tableNew) {
-    return deletedRows;
+    return changedRows;
   }
   const newTableMap = TableMap.get(tableNew.node);
 
-  // If no rows were deleted, return empty
+  // If no rows were changed, return empty
   if (oldTableMap.height <= newTableMap.height ||
   // For now ignore if there are column deletions as well
   oldTableMap.width !== newTableMap.width) {
-    return deletedRows;
+    return changedRows;
   }
 
-  // Find which rows were deleted by analyzing the change range
+  // Find which rows were changed by analyzing the change range
   const changeStartInTable = change.fromA - tableOld.pos - 1;
   const changeEndInTable = change.toA - tableOld.pos - 1;
   let currentOffset = 0;
@@ -58,7 +47,7 @@ const extractDeletedRows = (change, originalDoc, newDoc) => {
     const rowOverlapsChange = rowStart >= changeStartInTable && rowStart < changeEndInTable || rowEnd > changeStartInTable && rowEnd <= changeEndInTable || rowStart < changeStartInTable && rowEnd > changeEndInTable;
     if (rowOverlapsChange && rowNode.type.name === 'tableRow' && !isEmptyRow(rowNode)) {
       const startOfRow = newTableMap.mapByRow.slice().reverse().find(row => row[0] + tableNew.pos < change.fromB && change.fromB < row[row.length - 1] + tableNew.pos);
-      deletedRows.push({
+      changedRows.push({
         rowIndex,
         rowNode,
         fromA: tableOld.pos + 1 + rowStart,
@@ -73,8 +62,8 @@ const extractDeletedRows = (change, originalDoc, newDoc) => {
   });
 
   // Filter changes that never truly got deleted
-  return deletedRows.filter(deletedRow => {
-    return !tableNew.node.children.some(newRow => areNodesEqualIgnoreAttrs(newRow, deletedRow.rowNode));
+  return changedRows.filter(changedRow => {
+    return !tableNew.node.children.some(newRow => areNodesEqualIgnoreAttrs(newRow, changedRow.rowNode));
   });
 };
 
@@ -107,7 +96,7 @@ const isEmptyRow = rowNode => {
 /**
  * Creates a DOM representation of a deleted table row
  */
-const createDeletedRowDOM = (rowNode, nodeViewSerializer, colorScheme) => {
+const createChangedRowDOM = (rowNode, nodeViewSerializer, colorScheme) => {
   const tr = document.createElement('tr');
   tr.setAttribute('style', colorScheme === 'traditional' ? deletedTraditionalRowStyle : deletedRowStyle);
   tr.setAttribute('data-testid', 'show-diff-deleted-row');
@@ -131,55 +120,39 @@ const createDeletedRowDOM = (rowNode, nodeViewSerializer, colorScheme) => {
 };
 
 /**
- * Expands a diff to include whole deleted rows when table rows are affected
+ * Expands a diff to include whole changed rows when table rows are affected
  */
-const expandDiffForDeletedRows = (changes, originalDoc, newDoc) => {
-  const deletedRowInfo = [];
+const expandDiffForChangedRows = (changes, originalDoc, newDoc) => {
+  const rowInfo = [];
   for (const change of changes) {
     // Check if this change affects table content
-    const deletedRows = extractDeletedRows(change, originalDoc, newDoc);
-    if (deletedRows.length > 0) {
-      deletedRowInfo.push(...deletedRows);
+    const changedRows = extractChangedRows(change, originalDoc, newDoc);
+    if (changedRows.length > 0) {
+      rowInfo.push(...changedRows);
     }
   }
-  return deletedRowInfo;
+  return rowInfo;
 };
 
 /**
- * Creates decorations for deleted table rows
+ * Main function to handle deleted rows - computes diff and creates decorations
  */
-export const createDeletedRowsDecorations = ({
-  deletedRows,
+export const createChangedRowDecorationWidgets = ({
+  changes,
   originalDoc,
   newDoc,
   nodeViewSerializer,
   colorScheme
 }) => {
-  return deletedRows.map(deletedRow => {
-    const rowDOM = createDeletedRowDOM(deletedRow.rowNode, nodeViewSerializer, colorScheme);
+  // First, expand the changes to include complete deleted rows
+  const changedRows = expandDiffForChangedRows(changes.filter(change => change.deleted.length > 0), originalDoc, newDoc);
+  return changedRows.map(changedRow => {
+    const rowDOM = createChangedRowDOM(changedRow.rowNode, nodeViewSerializer, colorScheme);
 
     // Find safe insertion position for the deleted row
-    const safeInsertPos = findSafeInsertPos(newDoc, deletedRow.fromB - 1,
+    const safeInsertPos = findSafeInsertPos(newDoc, changedRow.fromB - 1,
     // -1 to find the first safe position from the table
-    originalDoc.slice(deletedRow.fromA, deletedRow.toA));
+    originalDoc.slice(changedRow.fromA, changedRow.toA));
     return Decoration.widget(safeInsertPos, rowDOM, {});
   });
-};
-
-/**
- * Main function to handle deleted rows - computes diff and creates decorations
- */
-export const handleDeletedRows = (changes, originalDoc, newDoc, nodeViewSerializer, colorScheme) => {
-  // First, expand the changes to include complete deleted rows
-  const deletedRows = expandDiffForDeletedRows(changes.filter(change => change.deleted.length > 0), originalDoc, newDoc);
-  const allDecorations = createDeletedRowsDecorations({
-    deletedRows,
-    originalDoc,
-    newDoc,
-    nodeViewSerializer,
-    colorScheme
-  });
-  return {
-    decorations: allDecorations
-  };
 };

package/dist/es2019/pm-plugins/decorations/createInlineChangedDecoration.js

@@ -0,0 +1,28 @@
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { editingStyle, editingStyleActive } from './colorSchemes/standard';
+import { traditionalInsertStyle, traditionalInsertStyleActive } from './colorSchemes/traditional';
+
+/**
+ * Inline decoration used for insertions as the content already exists in the document
+ *
+ * @param change Changeset "change" containing information about the change content + range
+ * @returns Prosemirror inline decoration
+ */
+export const createInlineChangedDecoration = ({
+  change,
+  colorScheme,
+  isActive = false
+}) => {
+  let style;
+  if (colorScheme === 'traditional') {
+    style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
+  } else {
+    style = isActive ? editingStyleActive : editingStyle;
+  }
+  return Decoration.inline(change.fromB, change.toB, {
+    style,
+    'data-testid': 'show-diff-changed-decoration'
+  }, {
+    key: 'diff-inline'
+  });
+};

package/dist/es2019/pm-plugins/{decorations.js → decorations/createNodeChangedDecorationWidget.js}

@@ -2,33 +2,13 @@ import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { getStandardNodeStyle, deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleNewActive, editingStyle, editingStyleActive, deletedContentStyleUnbounded } from './colorSchemes/standard';
-import { getTraditionalNodeStyle, deletedTraditionalContentStyle, deletedTraditionalContentStyleUnbounded, traditionalInsertStyle, traditionalInsertStyleActive } from './colorSchemes/traditional';
-import { createDeletedStyleWrapperWithoutOpacity, handleBlockNodeView } from './deletedBlocksHandler';
-import { handleDeletedRows } from './deletedRowsHandler';
-import { findSafeInsertPos } from './findSafeInsertPos';
-/**
- * Inline decoration used for insertions as the content already exists in the document
- *
- * @param change Changeset "change" containing information about the change content + range
- * @returns Prosemirror inline decoration
- */
-export const createInlineChangedDecoration = (change, colorScheme, isActive = false) => {
-  let style;
-  if (colorScheme === 'traditional') {
-    style = isActive ? traditionalInsertStyleActive : traditionalInsertStyle;
-  } else {
-    style = isActive ? editingStyleActive : editingStyle;
-  }
-  return Decoration.inline(change.fromB, change.toB, {
-    style,
-    'data-testid': 'show-diff-changed-decoration'
-  }, {
-    key: 'diff-inline'
-  });
-};
-export const getDeletedContentStyleUnbounded = colorScheme => colorScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
-export const getDeletedContentStyle = (colorScheme, isActive = false) => {
+import { deletedContentStyle, deletedContentStyleActive, deletedContentStyleNew, deletedContentStyleNewActive, deletedContentStyleUnbounded } from './colorSchemes/standard';
+import { deletedTraditionalContentStyle, deletedTraditionalContentStyleUnbounded } from './colorSchemes/traditional';
+import { createChangedRowDecorationWidgets } from './createChangedRowDecorationWidgets';
+import { findSafeInsertPos } from './utils/findSafeInsertPos';
+import { wrapBlockNodeView } from './utils/wrapBlockNodeView';
+const getDeletedContentStyleUnbounded = colorScheme => colorScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
+const getDeletedContentStyle = (colorScheme, isActive = false) => {
   if (colorScheme === 'traditional') {
     return deletedTraditionalContentStyle;
   }
@@ -37,47 +17,14 @@ export const getDeletedContentStyle = (colorScheme, isActive = false) => {
   }
   return expValEquals('platform_editor_enghealth_a11y_jan_fixes', 'isEnabled', true) ? deletedContentStyleNew : deletedContentStyle;
 };
-const getNodeClass = name => {
-  switch (name) {
-    case 'extension':
-      return 'show-diff-changed-decoration-node';
-    default:
-      return undefined;
-  }
-};
-const getBlockNodeStyle = (name, colorScheme) => {
-  return colorScheme === 'traditional' ? getTraditionalNodeStyle(name) : getStandardNodeStyle(name);
-};
 
 /**
- * Inline decoration used for insertions as the content already exists in the document
- *
- * @param change Changeset "change" containing information about the change content + range
- * @returns Prosemirror inline decoration
+ * Wraps content with deleted styling without opacity (for use when content is a direct child of dom)
  */
-export const createBlockChangedDecoration = (change, colorScheme) => {
-  if (fg('platform_editor_show_diff_scroll_navigation')) {
-    const style = getBlockNodeStyle(change.name, colorScheme);
-    const className = getNodeClass(change.name);
-    if (style || className) {
-      return Decoration.node(change.from, change.to, {
-        style: style,
-        'data-testid': 'show-diff-changed-decoration-node',
-        class: className
-      }, {
-        key: 'diff-block'
-      });
-    }
-    return undefined;
-  } else {
-    return Decoration.node(change.from, change.to, {
-      style: getBlockNodeStyle(change.name, colorScheme),
-      'data-testid': 'show-diff-changed-decoration-node',
-      class: getNodeClass(change.name)
-    }, {
-      key: 'diff-block'
-    });
-  }
+const createDeletedStyleWrapperWithoutOpacity = (colorScheme, isActive) => {
+  const wrapper = document.createElement('span');
+  wrapper.setAttribute('style', getDeletedContentStyle(colorScheme, isActive));
+  return wrapper;
 };
 const createContentWrapper = (colorScheme, isActive = false) => {
   const wrapper = document.createElement('span');
@@ -91,7 +38,7 @@ const createContentWrapper = (colorScheme, isActive = false) => {
   wrapper.append(strikethrough);
   return wrapper;
 };
-export const createDeletedContentDecoration = ({
+export const createNodeChangedDecorationWidget = ({
   change,
   doc,
   nodeViewSerializer,
@@ -113,10 +60,13 @@ export const createDeletedContentDecoration = ({
     if (!fg('platform_editor_ai_aifc_patch_ga')) {
       return;
     }
-    const {
-      decorations
-    } = handleDeletedRows([change], doc, newDoc, nodeViewSerializer, colorScheme);
-    return decorations;
+    return createChangedRowDecorationWidgets({
+      changes: [change],
+      originalDoc: doc,
+      newDoc,
+      nodeViewSerializer,
+      colorScheme
+    });
   }
   const serializer = nodeViewSerializer;
 
@@ -190,7 +140,13 @@ export const createDeletedContentDecoration = ({
         dom.append(wrapper);
       } else {
         // Handle all block nodes with unified function
-        handleBlockNodeView(dom, nodeView, node, colorScheme, intl);
+        wrapBlockNodeView({
+          dom,
+          nodeView,
+          targetNode: node,
+          colorScheme,
+          intl
+        });
       }
     } else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(node.type.name)) {
       // Skip the case where the node is a paragraph or table row that way it can still be rendered and delete the entire table

package/dist/es2019/pm-plugins/{attributeDecorations.js → decorations/utils/getAttrChangeRanges.js}

@@ -39,7 +39,7 @@ export const stepIsValidAttrChange = (step, beforeDoc, afterDoc) => {
       }
     }
     return false;
-  } catch (e) {
+  } catch {
     return false;
   }
 };