Add text-diff view

Author: lahmatiy

CHANGELOG.md

@@ -32,6 +32,7 @@
             - When `src` is not explicitly specified in the config and the input data is a string, the data value is processed through `imagesrc()` and used as the `src`
             - Config entries with a value of `undefined` are ignored
         - Added a default image-like content string detection annotation in the `struct` view: when a string value is identified as image-like content, a badge is displayed before the string, showing an image preview on hover
+- Added `text-diff` view
 - Added support for `diff` syntax in `source` view
 - Added `hideOnTriggerClick` option for popup and tooltip views
 - Reworked the computation graph on the discovery page and related features:

package-lock.json

@@ -66,6 +66,7 @@
     "dependencies": {
         "@discoveryjs/json-ext": "^0.6.3",
         "codemirror": "^5.65.2",
+        "diff": "^8.0.2",
         "github-slugger": "^2.0.0",
         "hitext": "^1.0.0-beta.1",
         "jora": "1.0.0-beta.15",

package.json

@@ -30,6 +30,7 @@
 @import url('./text/indicator.css');
 @import url('./text/markdown.css');
 @import url('./text/source.css');
+@import url('./text/text-diff.css');
 @import url('./text/text-match.css');
 @import url('./text/text-numeric.css');
 @import url('./text-render.css');

src/views/index.css

@@ -42,6 +42,7 @@ export { default as link } from './text/link.js';
 export { default as markdown } from './text/markdown.js';
 export { default as source } from './text/source.js';
 export { default as text } from './text/text.js';
+export { default as textDiff } from './text/text-diff.js';
 export { default as textMatch } from './text/text-match.js';
 export { default as textNumeric } from './text/text-numeric.js';
 

src/views/index.js

@@ -0,0 +1,18 @@
+.view-text-diff {
+    display: inline-block;
+    font-family: var(--discovery-monospace-font-family);
+    font-size: var(--discovery-monospace-font-size, 12px);
+    line-height: var(--discovery-monospace-line-height, 1.5);
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+.view-text-diff .added {
+    padding: 1.5px 0;
+    background-color: color-mix(in srgb, #92da92 70%, var(--discovery-background-color));
+    color: rgba(0, 0, 0, .75);
+}
+.view-text-diff .removed {
+    padding: 1.5px 0;
+    background-color: color-mix(in srgb, #de6666 65%, var(--discovery-background-color));
+    color: rgba(0, 0, 0, .75);
+}

src/views/text/text-diff.css

@@ -0,0 +1,54 @@
+/* eslint-env browser */
+import { createElement } from '../../core/utils';
+import usage from './text-diff.usage.js';
+import {
+    diffChars,
+    diffWords,
+    diffWordsWithSpace,
+    diffSentences,
+    diffLines
+} from 'diff';
+
+const diffType = {
+    char: diffChars,
+    word: diffWords,
+    wordws: diffWordsWithSpace,
+    sentence: diffSentences,
+    line: diffLines
+};
+
+const props = `is not array? | {
+    before,
+    after,
+    delta: undefined,
+    type: undefined
+} | overrideProps() | {
+    before is string ?: '',
+    after is string ?: '',
+    delta | $ in ['added', 'removed', 'both'] ?: 'both',
+    type | $ in ${JSON.stringify(Object.keys(diffType))} ?: 'wordws'
+}`;
+
+export default function(host) {
+    host.view.define('text-diff', function(el, config) {
+        const { type, before, after, delta } = config;
+
+        const diff = diffType[type](before, after);
+        const showAdded = delta === 'both' || delta === 'added';
+        const showRemoved = delta === 'both' || delta === 'removed';
+
+        for (const { added, removed, value } of diff) {
+            let textContainer = el;
+
+            if (added || removed) {
+                if (added ? !showAdded : !showRemoved) {
+                    continue;
+                }
+
+                textContainer = el.appendChild(createElement('span', added ? 'added' : 'removed'));
+            }
+
+            textContainer.append(value);
+        }
+    }, { props, usage });
+}

src/views/text/text-diff.js

@@ -0,0 +1,39 @@
+const types = ['char', 'word', 'wordws', 'sentence', 'line'];
+const deltas = ['both', 'added', 'removed'];
+const sameText = 'The sun is shining brightly. Birds are singing in the trees.';
+const beforeText = 'The quick brown fox jumps over the lazy dog. It lands softly and runs away.\n' + sameText;
+const afterText = 'A quick brown fox jumped over a lazy dog. It landed softly, then ran away.\n' + sameText;
+
+export default {
+    demo: {
+        view: 'text-diff',
+        before: 'Hello world!',
+        after: 'Hello Discovery.js!'
+    },
+    examples: [
+        {
+            title: 'Types',
+            demoData: types.map(type => ({ type, before: beforeText, after: afterText })),
+            demo: {
+                view: 'table',
+                cols: [
+                    { header: 'Type', content: ['text:type', { view: 'text', when: 'type="wordws"', text: ' (default)' }] },
+                    { header: 'Preview', content: 'text-diff{ type }' }
+                    // { header: 'Example', content: { view: 'source', syntax: 'discovery-view', source: '=`{ view: "text-diff", type: "${type}" }`', lineNum: false } }
+                ]
+            }
+        },
+        {
+            title: 'Delta kinds',
+            demoData: deltas.map(delta => ({ delta, before: beforeText, after: afterText })),
+            demo: {
+                view: 'table',
+                cols: [
+                    { header: 'Type', content: ['text:delta', { view: 'text', when: 'delta="both"', text: ' (default)' }] },
+                    { header: 'Preview', content: 'text-diff{ delta }' }
+                    // { header: 'Example', content: { view: 'source', syntax: 'discovery-view', source: '=`{ view: "text-diff", delta: "${delta}" }`', lineNum: false } }
+                ]
+            }
+        }
+    ]
+};