fix: Left click to copy incomplete content

[shaohuzhang1]

fix: Left click to copy incomplete content

[f2c-ci-robot]

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[shaohuzhang1]

The provided code has several improvements to address potential issues and enhance its functionality:

1. Use of ref correctly: Ensure that the properties accessed using ref are properly used within templates or computed functions.

2. Return value handling in getSelection():

   • The original logic returns null when there is no anchor node, which should be handled separately before accessing .textContent.
   • Returning an empty string instead of null improves behavior with whitespace.

3. Conditional opening logic:

   • Added a check to see if isOpen.value is already true before attempting another open operation. This prevents redundant clear operations and ensures only one panel is open at a time.

4. Clearing selected text function:

   • Define a helper function named clearSelectedText(). If you plan on clearing selected text elsewhere, this makes it reusable.

Here's the corrected and optimized version of the code:

import { ref, nextTick, onMounted } from 'vue'
import { t } from '@/locales'

const isOpen = ref(false);
const eventVal = ref<any>({});

function getSelection(): string | undefined {
  const selection = window.getSelection();
  if (selection) {
    if (selection.rangeCount === 0) return undefined;
    const range = selection.getRangeAt(0);
    const fragment = range.cloneContents(); // 复制选区内容
    const div = document.createElement('div');
    div.appendChild(fragment);
    
    const content = div.textContent;
    
    return content ? content.trim() : undefined; 
  }
}

/**
  * 打开控制台
  * @param event
  */
const openControl = (event: any): void => {
  const c = getSelection();
  
  if (c) {
    if (!isOpen.value) {
      clearSelectedText();

      nextTick(() => {
        eventVal.value = event;
        isOpen.value = true;
      });
      
    } else {
      // If open and not clicked again, just clear the selection.
      clearSelectedText();
      isOpen.value = false;
    }
    event.preventDefault();
  }

};

// Helper Function to Clear Selected Text
const clearSelectedText = () => {
  var sel = window.getSelection();
  if (sel && !sel.isCollapsed) {
    sel.removeAllRanges();
  }
};

onMounted(() => {});

Key changes included checking for an empty string in getSelection, simplifying conditional checks, and introducing a utility function to handle clearing selections.