@atlaskit/editor-plugin-show-diff 4.1.2 → 4.1.3

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

@@ -2,38 +2,11 @@ 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';
-const editingStyle = convertToInlineCss({
-  background: "var(--ds-background-accent-purple-subtlest, #F8EEFE)",
-  textDecoration: 'underline',
-  textDecorationStyle: 'dotted',
-  textDecorationThickness: "var(--ds-space-025, 2px)",
-  textDecorationColor: "var(--ds-border-accent-purple, #AF59E1)"
-});
-const editingStyleActive = convertToInlineCss({
-  background: "var(--ds-background-accent-purple-subtler, #EED7FC)",
-  textDecoration: 'underline',
-  textDecorationStyle: 'dotted',
-  textDecorationThickness: "var(--ds-space-025, 2px)",
-  textDecorationColor: "var(--ds-text-accent-purple, #803FA5)"
-});
-const traditionalInsertStyle = convertToInlineCss({
-  background: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
-  textDecoration: 'underline',
-  textDecorationStyle: 'solid',
-  textDecorationThickness: "var(--ds-space-025, 2px)",
-  textDecorationColor: "var(--ds-border-accent-green, #22A06B)"
-});
-const traditionalInsertStyleActive = convertToInlineCss({
-  background: "var(--ds-background-accent-green-subtler, #BAF3DB)",
-  textDecoration: 'underline',
-  textDecorationStyle: 'solid',
-  textDecorationThickness: "var(--ds-space-025, 2px)",
-  textDecorationColor: "var(--ds-text-accent-green, #216E4E)"
-});
-
 /**
  * Inline decoration used for insertions as the content already exists in the document
  *
@@ -52,124 +25,6 @@ export const createInlineChangedDecoration = (change, colourScheme, isActive = f
     'data-testid': 'show-diff-changed-decoration'
   }, {});
 };
-const getEditorStyleNode = (nodeName, colourScheme) => {
-  switch (nodeName) {
-    case 'blockquote':
-      return colourScheme === 'traditional' ? traditionalStyleQuoteNode : editingStyleQuoteNode;
-    case 'mediaSingle':
-    case 'mediaGroup':
-    case 'table':
-    case 'tableRow':
-    case 'tableCell':
-    case 'tableHeader':
-      return undefined;
-    // Handle table separately to avoid border issues
-    case 'paragraph':
-    case 'heading':
-    case 'hardBreak':
-      return undefined;
-    // Paragraph and heading nodes do not need special styling
-    case 'decisionList':
-    case 'taskList':
-    case 'taskItem':
-    case 'bulletList':
-    case 'orderedList':
-      return undefined;
-    case 'extension':
-    case 'embedCard':
-    case 'listItem':
-      return convertToInlineCss({
-        '--diff-decoration-marker-color': colourScheme === 'traditional' ? "var(--ds-border-accent-green, #22A06B)" : "var(--ds-border-accent-purple, #AF59E1)"
-      });
-    case 'layoutSection':
-      return undefined;
-    // Layout nodes do not need special styling
-    case 'rule':
-      return colourScheme === 'traditional' ? traditionalStyleRuleNode : editingStyleRuleNode;
-    case 'blockCard':
-      return colourScheme === 'traditional' ? traditionalStyleCardBlockNode : editingStyleCardBlockNode;
-    default:
-      return colourScheme === 'traditional' ? traditionalStyleNode : editingStyleNode;
-  }
-};
-const editingStyleQuoteNode = convertToInlineCss({
-  borderLeft: `2px solid ${"var(--ds-border-accent-purple, #AF59E1)"}`
-});
-const traditionalStyleQuoteNode = convertToInlineCss({
-  borderLeft: `2px solid ${"var(--ds-border-accent-green, #22A06B)"}`
-});
-const editingStyleRuleNode = convertToInlineCss({
-  backgroundColor: "var(--ds-border-accent-purple, #AF59E1)"
-});
-const traditionalStyleRuleNode = convertToInlineCss({
-  backgroundColor: "var(--ds-border-accent-green, #22A06B)"
-});
-const editingStyleNode = convertToInlineCss({
-  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-purple, #AF59E1)"}`,
-  borderRadius: "var(--ds-radius-small, 4px)"
-});
-const traditionalStyleNode = convertToInlineCss({
-  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-green, #22A06B)"}`,
-  borderRadius: "var(--ds-radius-small, 4px)"
-});
-const editingStyleCardBlockNode = convertToInlineCss({
-  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-purple, #AF59E1)"}`,
-  borderRadius: "var(--ds-radius-medium, 6px)"
-});
-const traditionalStyleCardBlockNode = convertToInlineCss({
-  boxShadow: `0 0 0 1px ${"var(--ds-border-accent-green, #22A06B)"}`,
-  borderRadius: "var(--ds-radius-medium, 6px)"
-});
-const deletedContentStyle = convertToInlineCss({
-  color: "var(--ds-text-accent-gray, #505258)",
-  textDecoration: 'line-through',
-  position: 'relative',
-  opacity: 0.6
-});
-const deletedContentStyleActive = convertToInlineCss({
-  color: "var(--ds-text, #292A2E)",
-  textDecoration: 'line-through',
-  textDecorationColor: "var(--ds-text-accent-gray, #505258)",
-  position: 'relative',
-  opacity: 1
-});
-const deletedContentStyleNew = convertToInlineCss({
-  color: "var(--ds-text-accent-gray, #505258)",
-  textDecoration: 'line-through',
-  position: 'relative',
-  opacity: 0.8
-});
-const deletedContentStyleNewActive = convertToInlineCss({
-  color: "var(--ds-text, #292A2E)",
-  textDecoration: 'line-through',
-  textDecorationColor: "var(--ds-text-accent-gray, #505258)",
-  position: 'relative',
-  opacity: 1
-});
-const deletedContentStyleUnbounded = convertToInlineCss({
-  position: 'absolute',
-  top: '50%',
-  width: '100%',
-  display: 'inline-block',
-  borderTop: `1px solid ${"var(--ds-text-accent-gray, #505258)"}`,
-  pointerEvents: 'none',
-  zIndex: 1
-});
-const deletedTraditionalContentStyle = convertToInlineCss({
-  textDecorationColor: "var(--ds-border-accent-red, #E2483D)",
-  textDecoration: 'line-through',
-  position: 'relative',
-  opacity: 1
-});
-const deletedTraditionalContentStyleUnbounded = convertToInlineCss({
-  position: 'absolute',
-  top: '50%',
-  width: '100%',
-  display: 'inline-block',
-  borderTop: `1px solid ${"var(--ds-border-accent-red, #E2483D)"}`,
-  pointerEvents: 'none',
-  zIndex: 1
-});
 export const getDeletedContentStyleUnbounded = colourScheme => colourScheme === 'traditional' ? deletedTraditionalContentStyleUnbounded : deletedContentStyleUnbounded;
 export const getDeletedContentStyle = (colourScheme, isActive = false) => {
   if (colourScheme === 'traditional') {
@@ -188,6 +43,9 @@ const getNodeClass = name => {
       return undefined;
   }
 };
+const getBlockNodeStyle = (name, colourScheme) => {
+  return colourScheme === 'traditional' ? getTraditionalNodeStyle(name) : getStandardNodeStyle(name);
+};
 
 /**
  * Inline decoration used for insertions as the content already exists in the document
@@ -196,10 +54,22 @@ const getNodeClass = name => {
  * @returns Prosemirror inline decoration
  */
 export const createBlockChangedDecoration = (change, colourScheme) => Decoration.node(change.from, change.to, {
-  style: getEditorStyleNode(change.name, colourScheme),
+  style: getBlockNodeStyle(change.name, colourScheme),
   'data-testid': 'show-diff-changed-decoration-node',
   class: getNodeClass(change.name)
 }, {});
+const createContentWrapper = (colourScheme, isActive = false) => {
+  const wrapper = document.createElement('span');
+  const baseStyle = convertToInlineCss({
+    position: 'relative',
+    width: 'fit-content'
+  });
+  wrapper.setAttribute('style', `${baseStyle}${getDeletedContentStyle(colourScheme, isActive)}`);
+  const strikethrough = document.createElement('span');
+  strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colourScheme));
+  wrapper.append(strikethrough);
+  return wrapper;
+};
 export const createDeletedContentDecoration = ({
   change,
   doc,
@@ -238,20 +108,6 @@ export const createDeletedContentDecoration = ({
    * or sliced End depth is and match only the entire node.
    */
   slice.content.forEach(node => {
-    // Create a wrapper for each node with strikethrough
-    const createWrapperWithStrikethrough = () => {
-      const wrapper = document.createElement('span');
-      const baseStyle = convertToInlineCss({
-        position: 'relative',
-        width: 'fit-content'
-      });
-      wrapper.setAttribute('style', `${baseStyle}${getDeletedContentStyle(colourScheme, isActive)}`);
-      const strikethrough = document.createElement('span');
-      strikethrough.setAttribute('style', getDeletedContentStyleUnbounded(colourScheme));
-      wrapper.append(strikethrough);
-      return wrapper;
-    };
-
     // Helper function to handle multiple child nodes
     const handleMultipleChildNodes = node => {
       if (node.content.childCount > 1 && node.type.inlineContent) {
@@ -259,16 +115,15 @@ export const createDeletedContentDecoration = ({
           const childNodeView = serializer.tryCreateNodeView(childNode);
           if (childNodeView) {
             const lineBreak = document.createElement('br');
-            targetNode = node;
             dom.append(lineBreak);
-            const wrapper = createWrapperWithStrikethrough();
+            const wrapper = createContentWrapper(colourScheme, isActive);
             wrapper.append(childNodeView);
             dom.append(wrapper);
           } else {
             // Fallback to serializing the individual child node
             const serializedChild = serializer.serializeNode(childNode);
             if (serializedChild) {
-              const wrapper = createWrapperWithStrikethrough();
+              const wrapper = createContentWrapper(colourScheme, isActive);
               wrapper.append(serializedChild);
               dom.append(wrapper);
             }
@@ -283,19 +138,13 @@ export const createDeletedContentDecoration = ({
     const isFirst = slice.content.firstChild === node;
     const isLast = slice.content.lastChild === node;
     const hasInlineContent = node.content.childCount > 0 && node.type.inlineContent === true;
-    let targetNode;
     let fallbackSerialization;
+    if (handleMultipleChildNodes(node)) {
+      return;
+    }
     if ((isFirst || isLast && slice.content.childCount > 2) && hasInlineContent) {
-      if (handleMultipleChildNodes(node)) {
-        return;
-      }
-      targetNode = node;
       fallbackSerialization = () => serializer.serializeFragment(node.content);
     } else if (isLast && slice.content.childCount === 2) {
-      if (handleMultipleChildNodes(node)) {
-        return;
-      }
-      targetNode = node;
       fallbackSerialization = () => {
         if (node.type.name === 'text') {
           return document.createTextNode(node.text || '');
@@ -308,25 +157,21 @@ export const createDeletedContentDecoration = ({
         return serializer.serializeFragment(node.content);
       };
     } else {
-      if (handleMultipleChildNodes(node)) {
-        return;
-      }
-      targetNode = node;
       fallbackSerialization = () => serializer.serializeNode(node);
     }
 
     // Try to create node view, fallback to serialization
-    const nodeView = serializer.tryCreateNodeView(targetNode);
+    const nodeView = serializer.tryCreateNodeView(node);
     if (nodeView) {
-      if (targetNode.isInline) {
-        const wrapper = createWrapperWithStrikethrough();
+      if (node.isInline) {
+        const wrapper = createContentWrapper(colourScheme, isActive);
         wrapper.append(nodeView);
         dom.append(wrapper);
       } else {
         // Handle all block nodes with unified function
-        handleBlockNodeView(dom, nodeView, targetNode, colourScheme, intl);
+        handleBlockNodeView(dom, nodeView, node, colourScheme, intl);
       }
-    } else if (nodeViewSerializer.getFilteredNodeViewBlocklist(['paragraph', 'tableRow']).has(targetNode.type.name)) {
+    } 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
       return;
     } else {

package/dist/esm/pm-plugins/colorSchemes/standard.js

@@ -0,0 +1,90 @@
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+export var editingStyle = convertToInlineCss({
+  background: "var(--ds-background-accent-purple-subtlest, #F8EEFE)",
+  textDecoration: 'underline',
+  textDecorationStyle: 'dotted',
+  textDecorationThickness: "var(--ds-space-025, 2px)",
+  textDecorationColor: "var(--ds-border-accent-purple, #AF59E1)"
+});
+export var editingStyleActive = convertToInlineCss({
+  background: "var(--ds-background-accent-purple-subtler, #EED7FC)",
+  textDecoration: 'underline',
+  textDecorationStyle: 'dotted',
+  textDecorationThickness: "var(--ds-space-025, 2px)",
+  textDecorationColor: "var(--ds-text-accent-purple, #803FA5)"
+});
+export var deletedContentStyle = convertToInlineCss({
+  color: "var(--ds-text-accent-gray, #505258)",
+  textDecoration: 'line-through',
+  position: 'relative',
+  opacity: 0.6
+});
+export var deletedContentStyleActive = convertToInlineCss({
+  color: "var(--ds-text, #292A2E)",
+  textDecoration: 'line-through',
+  textDecorationColor: "var(--ds-text-accent-gray, #505258)",
+  position: 'relative',
+  opacity: 1
+});
+export var deletedContentStyleNew = convertToInlineCss({
+  color: "var(--ds-text-accent-gray, #505258)",
+  textDecoration: 'line-through',
+  position: 'relative',
+  opacity: 0.8
+});
+export var deletedContentStyleNewActive = convertToInlineCss({
+  color: "var(--ds-text, #292A2E)",
+  textDecoration: 'line-through',
+  textDecorationColor: "var(--ds-text-accent-gray, #505258)",
+  position: 'relative',
+  opacity: 1
+});
+export var deletedContentStyleUnbounded = convertToInlineCss({
+  position: 'absolute',
+  top: '50%',
+  width: '100%',
+  display: 'inline-block',
+  borderTop: "1px solid ".concat("var(--ds-text-accent-gray, #505258)"),
+  pointerEvents: 'none',
+  zIndex: 1
+});
+var editingStyleQuoteNode = convertToInlineCss({
+  borderLeft: "2px solid ".concat("var(--ds-border-accent-purple, #AF59E1)")
+});
+var editingStyleRuleNode = convertToInlineCss({
+  backgroundColor: "var(--ds-border-accent-purple, #AF59E1)"
+});
+var editingStyleNode = convertToInlineCss({
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-purple, #AF59E1)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
+var editingStyleCardBlockNode = convertToInlineCss({
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-purple, #AF59E1)"),
+  borderRadius: "var(--ds-radius-medium, 6px)"
+});
+var standardDecorationMarkerVariableName = convertToInlineCss({
+  '--diff-decoration-marker-color': "var(--ds-border-accent-purple, #AF59E1)"
+});
+export var getStandardNodeStyle = function getStandardNodeStyle(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 standardDecorationMarkerVariableName;
+  }
+  if (nodeName === 'blockquote') {
+    return editingStyleQuoteNode;
+  }
+  if (nodeName === 'rule') {
+    return editingStyleRuleNode;
+  }
+  if (nodeName === 'blockCard') {
+    return editingStyleCardBlockNode;
+  }
+  return editingStyleNode;
+};

package/dist/esm/pm-plugins/colorSchemes/traditional.js

@@ -0,0 +1,70 @@
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+export var traditionalInsertStyle = convertToInlineCss({
+  background: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
+  textDecoration: 'underline',
+  textDecorationStyle: 'solid',
+  textDecorationThickness: "var(--ds-space-025, 2px)",
+  textDecorationColor: "var(--ds-border-accent-green, #22A06B)"
+});
+export var traditionalInsertStyleActive = convertToInlineCss({
+  background: "var(--ds-background-accent-green-subtler, #BAF3DB)",
+  textDecoration: 'underline',
+  textDecorationStyle: 'solid',
+  textDecorationThickness: "var(--ds-space-025, 2px)",
+  textDecorationColor: "var(--ds-text-accent-green, #216E4E)"
+});
+export var deletedTraditionalContentStyle = convertToInlineCss({
+  textDecorationColor: "var(--ds-border-accent-red, #E2483D)",
+  textDecoration: 'line-through',
+  position: 'relative',
+  opacity: 1
+});
+export var deletedTraditionalContentStyleUnbounded = convertToInlineCss({
+  position: 'absolute',
+  top: '50%',
+  width: '100%',
+  display: 'inline-block',
+  borderTop: "1px solid ".concat("var(--ds-border-accent-red, #E2483D)"),
+  pointerEvents: 'none',
+  zIndex: 1
+});
+var traditionalStyleQuoteNode = convertToInlineCss({
+  borderLeft: "2px solid ".concat("var(--ds-border-accent-green, #22A06B)")
+});
+var traditionalStyleRuleNode = convertToInlineCss({
+  backgroundColor: "var(--ds-border-accent-green, #22A06B)"
+});
+var traditionalStyleNode = convertToInlineCss({
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-green, #22A06B)"),
+  borderRadius: "var(--ds-radius-small, 4px)"
+});
+var traditionalStyleCardBlockNode = convertToInlineCss({
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-green, #22A06B)"),
+  borderRadius: "var(--ds-radius-medium, 6px)"
+});
+var traditionalDecorationMarkerVariable = convertToInlineCss({
+  '--diff-decoration-marker-color': "var(--ds-border-accent-green, #22A06B)"
+});
+export var getTraditionalNodeStyle = function 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;
+};