feat: add clipboard

Author: leezng

.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
     // 'prettier/prettier': [1, { arrowParens: 'avoid' }],
   },
 };

src/components/Tree/index.tsx

@@ -288,6 +288,8 @@ export default defineComponent({
         state.visibleData.map(item => (
           <TreeNode
             key={item.id}
+            data={props.data}
+            rootPath={props.rootPath}
             node={item}
             collapsed={!!state.hiddenPaths[item.path]}
             theme={props.theme}

src/components/TreeNode/index.tsx

@@ -3,6 +3,7 @@ import Brackets from 'src/components/Brackets';
 import CheckController from 'src/components/CheckController';
 import Carets from 'src/components/Carets';
 import { getDataType, JSONFlattenReturnType, stringToAutoType } from 'src/utils';
+import { useClipboard } from 'src/hooks/useClipboard';
 import './styles.less';
 
 export interface NodeDataType extends JSONFlattenReturnType {
@@ -11,6 +12,16 @@ export interface NodeDataType extends JSONFlattenReturnType {
 
 // The props here will be exposed to the user through the topmost component.
 export const treeNodePropsPass = {
+  // JSONLike data.
+  data: {
+    type: [String, Number, Boolean, Array, Object] as PropType<JSONDataType>,
+    default: null,
+  },
+  // Data root path.
+  rootPath: {
+    type: String,
+    default: 'root',
+  },
   // Whether to display the length of (array|object).
   showLength: {
     type: Boolean,
@@ -214,6 +225,16 @@ export default defineComponent({
       }
     };
 
+    const { copy } = useClipboard();
+
+    const handleCopy = () => {
+      const { key, path } = props.node;
+      const rootPath = props.rootPath;
+      const content = new Function('data', `return data${path.slice(rootPath.length)}`)(props.data);
+      const copiedData = JSON.stringify(key ? { [key]: content } : content, null, 2);
+      copy(copiedData);
+    }
+
     return () => {
       const { node } = props;
 
@@ -305,6 +326,10 @@ export default defineComponent({
               <span class="vjs-comment"> // {node.length} items </span>
             )}
           </span>
+
+          <span class="vjs-tree-node-actions">
+            <span onClick={handleCopy}>copy</span>
+          </span>
         </div>
       );
     };

src/components/TreeNode/styles.less

@@ -21,6 +21,11 @@
   &.is-highlight,
   &:hover {
     background-color: @highlight-bg-color;
+    border-radius: 4px;
+
+    .@{css-prefix}-tree-node-actions {
+      display: block;
+    }
   }
 
   .@{css-prefix}-indent {
@@ -36,11 +41,24 @@
     }
   }
 
+  .@{css-prefix}-tree-node-actions {
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 0 4px;
+    background-color: @highlight-bg-color;
+    border-radius: 4px;
+  }
+
   &.dark {
     &.is-highlight,
     &:hover {
       background-color: @highlight-bg-color-dark;
     }
+    .@{css-prefix}-tree-node-actions {
+      background-color: @highlight-bg-color-dark;
+    }
   }
 }
 

src/hooks/useClipboard.ts

@@ -1,13 +1,9 @@
 import { ref } from 'vue';
 
-export type UseClipboardOptions = {
-  source: string;
-};
-
-export function useClipboard({ source }: UseClipboardOptions) {
+export function useClipboard() {
   const copied = ref(false);
 
-  const copy = async () => {
+  const copy = async (source: string) => {
     try {
       await navigator.clipboard.writeText(source);
       copied.value = true;
@@ -22,4 +18,4 @@ export function useClipboard({ source }: UseClipboardOptions) {
   return {
     copy,
   };
-};
+}