Merge pull request #304 from rtfpessoa/implement-smart-selection-in-css

feature: Implement smart selection in CSS

Author: rtfpessoa

README.md

@@ -308,7 +308,6 @@ draw(): void
 synchronisedScroll(): void
 fileListToggle(startVisible: boolean): void
 highlightCode(): void
-smartSelection(): void
 ```
 
 > Check out the [docs/demo.html](./docs/demo.html) for a demo example.
@@ -319,8 +318,6 @@ smartSelection(): void
 - `highlight`: syntax highlight the code on the diff: `true` or `false`, default is `true`
 - `fileListToggle`: allow the file summary list to be toggled: `true` or `false`, default is `true`
 - `fileListStartVisible`: choose if the file summary list starts visible: `true` or `false`, default is `false`
-- `smartSelection`: allow selection of the code without including line numbers of line prefixes: `true` or `false`,
-  default is `true`
 
 > NOTE: All the options from Diff2Html are also valid configurations in Diff2HtmlUI
 

src/ui/css/diff2html.css

@@ -335,41 +335,8 @@
   border: #3572b0 1px solid;
 }
 
-/*
- * Selection util.
- */
-
-.selecting-left .d2h-code-line,
-.selecting-left .d2h-code-line *,
-.selecting-right td.d2h-code-linenumber,
-.selecting-right td.d2h-code-linenumber *,
-.selecting-left .d2h-code-side-line,
-.selecting-left .d2h-code-side-line *,
-.selecting-right td.d2h-code-side-linenumber,
-.selecting-right td.d2h-code-side-linenumber * {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
+.d2h-code-linenumber,
+.d2h-code-side-linenumber,
+.d2h-code-line-prefix {
   user-select: none;
 }
-
-.selecting-left .d2h-code-line::-moz-selection,
-.selecting-left .d2h-code-line *::-moz-selection,
-.selecting-right td.d2h-code-linenumber::-moz-selection,
-.selecting-left .d2h-code-side-line::-moz-selection,
-.selecting-left .d2h-code-side-line *::-moz-selection,
-.selecting-right td.d2h-code-side-linenumber::-moz-selection,
-.selecting-right td.d2h-code-side-linenumber *::-moz-selection {
-  background: transparent;
-}
-
-.selecting-left .d2h-code-line::selection,
-.selecting-left .d2h-code-line *::selection,
-.selecting-right td.d2h-code-linenumber::selection,
-.selecting-left .d2h-code-side-line::selection,
-.selecting-left .d2h-code-side-line *::selection,
-.selecting-right td.d2h-code-side-linenumber::selection,
-.selecting-right td.d2h-code-side-linenumber *::selection {
-  background: transparent;
-}

src/ui/js/diff2html-ui-base.ts

@@ -10,6 +10,10 @@ export interface Diff2HtmlUIConfig extends Diff2HtmlConfig {
   highlight?: boolean;
   fileListToggle?: boolean;
   fileListStartVisible?: boolean;
+  /**
+   * @deprecated since version 3.1.0
+   * Smart selection is now enabled by default with vanilla CSS
+   */
   smartSelection?: boolean;
 }
 
@@ -19,6 +23,10 @@ export const defaultDiff2HtmlUIConfig = {
   highlight: true,
   fileListToggle: true,
   fileListStartVisible: false,
+  /**
+   * @deprecated since version 3.1.0
+   * Smart selection is now enabled by default with vanilla CSS
+   */
   smartSelection: true,
 };
 
@@ -44,7 +52,6 @@ export class Diff2HtmlUI {
 
   draw(): void {
     this.targetElement.innerHTML = this.diffHtml;
-    if (this.config.smartSelection) this.smartSelection();
     if (this.config.synchronisedScroll) this.synchronisedScroll();
     if (this.config.highlight) this.highlightCode();
     if (this.config.fileListToggle) this.fileListToggle(this.config.fileListStartVisible);
@@ -156,38 +163,11 @@ export class Diff2HtmlUI {
     });
   }
 
+  /**
+   * @deprecated since version 3.1.0
+   */
   smartSelection(): void {
-    const body = document.getElementsByTagName('body')[0];
-    const diffTable = body.getElementsByClassName('d2h-diff-table')[0];
-
-    diffTable.addEventListener('mousedown', event => {
-      if (event === null || !this.isElement(event.target)) return;
-
-      const table = event.target.closest('.d2h-diff-table');
-      if (table !== null) {
-        if (event.target.closest('.d2h-code-line,.d2h-code-side-line') !== null) {
-          table.classList.remove('selecting-left');
-          table.classList.add('selecting-right');
-          this.currentSelectionColumnId = 1;
-        } else if (event.target.closest('.d2h-code-linenumber,.d2h-code-side-linenumber') !== null) {
-          table.classList.remove('selecting-right');
-          table.classList.add('selecting-left');
-          this.currentSelectionColumnId = 0;
-        }
-      }
-    });
-
-    diffTable.addEventListener('copy', event => {
-      if (!this.isClipboardEvent(event)) return;
-
-      const clipboardData = event.clipboardData;
-      const text = this.getSelectedText();
-
-      if (clipboardData === null || text === undefined) return;
-
-      clipboardData.setData('text', text);
-      event.preventDefault();
-    });
+    console.warn('Smart selection is now enabled by default with CSS. No need to call this method anymore.');
   }
 
   private instanceOfIHighlightResult(object: IHighlightResult | IAutoHighlightResult): object is IHighlightResult {
@@ -206,37 +186,7 @@ export class Diff2HtmlUI {
     return hashTag;
   }
 
-  private getSelectedText(): string | undefined {
-    const sel = window.getSelection();
-
-    if (sel === null) return;
-
-    const range = sel.getRangeAt(0);
-    const doc = range.cloneContents();
-    const nodes = doc.querySelectorAll('tr');
-    const idx = this.currentSelectionColumnId;
-
-    let text = '';
-    if (nodes.length === 0) {
-      text = doc.textContent || '';
-    } else {
-      nodes.forEach((tr, i) => {
-        const td = tr.cells[tr.cells.length === 1 ? 0 : idx];
-
-        if (td === undefined || td.textContent === null) return;
-
-        text += (i ? '\n' : '') + td.textContent.replace(/\r\n|\r|\n/g, '');
-      });
-    }
-
-    return text;
-  }
-
   private isElement(arg?: unknown): arg is Element {
     return arg !== null && (arg as Element)?.classList !== undefined;
   }
-
-  private isClipboardEvent(arg?: unknown): arg is ClipboardEvent {
-    return arg !== null && (arg as ClipboardEvent)?.clipboardData !== undefined;
-  }
 }

website/templates/pages/demo/content.handlebars

@@ -112,7 +112,7 @@
         <p>Just copy the url from the page, which should contain all the customizations and reference for the diff you
           introduced.</p>
         <p>ex: <a
-            href="demo.html?matching=none&matchWordsThreshold=0.25&maxLineLengthHighlight=10000&diffStyle=word&renderNothingWhenEmpty=0&matchingMaxComparisons=2500&maxLineSizeInBlockForComparison=200&outputFormat=line-by-line&drawFileList=1&synchronisedScroll=1&highlight=1&fileListToggle=1&fileListStartVisible=0&smartSelection=1&diff=https://github.com/rtfpessoa/diff2html/pull/106">https://diff2html.xyz/demo.html?matching=none&matchWordsThreshold=0.25&maxLineLengthHighlight=10000&diffStyle=word&renderNothingWhenEmpty=0&matchingMaxComparisons=2500&maxLineSizeInBlockForComparison=200&outputFormat=line-by-line&drawFileList=1&synchronisedScroll=1&highlight=1&fileListToggle=1&fileListStartVisible=0&smartSelection=1&diff=https://github.com/rtfpessoa/diff2html/pull/106</a>
+            href="demo.html?matching=none&matchWordsThreshold=0.25&maxLineLengthHighlight=10000&diffStyle=word&renderNothingWhenEmpty=0&matchingMaxComparisons=2500&maxLineSizeInBlockForComparison=200&outputFormat=line-by-line&drawFileList=1&synchronisedScroll=1&highlight=1&fileListToggle=1&fileListStartVisible=0&diff=https://github.com/rtfpessoa/diff2html/pull/106">https://diff2html.xyz/demo.html?matching=none&matchWordsThreshold=0.25&maxLineLengthHighlight=10000&diffStyle=word&renderNothingWhenEmpty=0&matchingMaxComparisons=2500&maxLineSizeInBlockForComparison=200&outputFormat=line-by-line&drawFileList=1&synchronisedScroll=1&highlight=1&fileListToggle=1&fileListStartVisible=0&diff=https://github.com/rtfpessoa/diff2html/pull/106</a>
         </p>
       </li>
       <li class="block">