feat: support props.enableClipboard

Author: himself65

src/components/DataKeyPair.tsx

@@ -68,12 +68,8 @@ export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
   const rootName = useJsonViewerStore(store => store.rootName)
   const isRoot = root === value
   const isNumberKey = Number.isInteger(Number(key))
-  const downstreamProps: DataItemProps = useMemo(() => ({
-    path,
-    inspect,
-    setInspect,
-    value
-  }), [inspect, path, setInspect, value])
+
+  const enableClipboard = useJsonViewerStore(store => store.enableClipboard)
   const { copy, copied } = useClipboard()
 
   const actionIcons = useMemo(() => {
@@ -109,36 +105,45 @@ export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
     }
     return (
         <>
-          <IconBox
-            onClick={event => {
-              copy(
-                JSON.stringify(
-                  value,
-                  null,
-                  '  '
-                )
-              )
-              event.preventDefault()
-            }}
-          >
-            {
-              copied
-                ? (
-                  <CheckIcon
-                    sx={{
-                      fontSize: '.8rem'
-                    }}
-                  />
+          {enableClipboard && (
+            <IconBox
+              onClick={event => {
+                event.preventDefault()
+                try {
+                  copy(
+                    JSON.stringify(
+                      value,
+                      null,
+                      '  '
+                    )
                   )
-                : (
-                  <ContentCopyIcon
-                    sx={{
-                      fontSize: '.8rem'
-                    }}
-                  />
-                  )
-            }
-          </IconBox>
+                } catch (e) {
+                  // in some case, this will throw error
+                  // for example: circular structure
+                  // fixme: `useAlert` hook
+                  console.error(e)
+                }
+              }}
+            >
+              {
+                copied
+                  ? (
+                    <CheckIcon
+                      sx={{
+                        fontSize: '.8rem'
+                      }}
+                    />
+                    )
+                  : (
+                    <ContentCopyIcon
+                      sx={{
+                        fontSize: '.8rem'
+                      }}
+                    />
+                    )
+              }
+            </IconBox>
+          )}
           {/* todo: support edit object */}
           {(Editor && editable) &&
             (
@@ -159,10 +164,16 @@ export const DataKeyPair: React.FC<DataKeyPairProps> = (props) => {
         </>
     )
   },
-  [Editor, copied, copy, editable, editing, onChange, path, tempValue, value])
+  [Editor, copied, copy, editable, editing, enableClipboard, onChange, path, tempValue, value])
 
   const expandable = !!(PreComponent && PostComponent)
   const KeyRenderer = useJsonViewerStore(store => store.keyRenderer)
+  const downstreamProps: DataItemProps = useMemo(() => ({
+    path,
+    inspect,
+    setInspect,
+    value
+  }), [inspect, path, setInspect, value])
   return (
     <Box className='data-key-pair'
          onMouseEnter={

src/index.tsx

@@ -49,6 +49,7 @@ const JsonViewerInner: React.FC<JsonViewerProps> = (props) => {
   useSetIfNotUndefinedEffect('groupArraysAfterLength', props.groupArraysAfterLength)
   useSetIfNotUndefinedEffect('keyRenderer', props.keyRenderer)
   useSetIfNotUndefinedEffect('maxDisplayLength', props.maxDisplayLength)
+  useSetIfNotUndefinedEffect('enableClipboard', props.enableClipboard)
   useEffect(() => {
     if (props.theme === 'light') {
       api.setState({

src/stores/JsonViewerStore.ts

@@ -16,11 +16,11 @@ export type JsonViewerState<T = unknown> = {
   hoverPath: { path: Path; nestedIndex?: number } | null
   indentWidth: number
   groupArraysAfterLength: number
+  enableClipboard: boolean
   maxDisplayLength: number
   defaultInspectDepth: number
   collapseStringsAfterLength: number
   colorNamespace: ColorNamespace
-  expanded: string[]
   editable: boolean | (<U>(path: Path, currentValue: U) => boolean)
   rootName: false | string
   value: T
@@ -39,20 +39,22 @@ export const createJsonViewerStore = <T = unknown>(props: JsonViewerProps<T>) =>
   create(
     combine<JsonViewerState<T>, JsonViewerActions>(
       {
-        inspectCache: {},
-        hoverPath: null,
+        // provided by user
+        enableClipboard: props.enableClipboard ?? true,
         indentWidth: props.indentWidth ?? 3,
         groupArraysAfterLength: props.groupArraysAfterLength ?? 100,
         collapseStringsAfterLength: props.collapseStringsAfterLength ?? 50,
         maxDisplayLength: props.maxDisplayLength ?? 30,
         rootName: props.rootName ?? 'root',
+        onChange: props.onChange ?? (() => {}),
+        keyRenderer: props.keyRenderer ?? DefaultKeyRenderer,
+        editable: props.editable ?? true,
+        // internal state
+        inspectCache: {},
+        hoverPath: null,
         defaultInspectDepth: 5,
         colorNamespace: lightColorNamespace,
-        editable: props.editable ?? true,
-        expanded: ['data-viewer-root'],
-        value: props.value,
-        onChange: props.onChange ?? (() => {}),
-        keyRenderer: props.keyRenderer ?? DefaultKeyRenderer
+        value: props.value
       },
       (set, get) => ({
         getInspectCache: (path, nestedIndex) => {

src/type.ts

@@ -61,6 +61,12 @@ export type JsonViewerProps<T = unknown> = {
    * @param newValue
    */
   onChange?: <U>(path: Path, oldValue: U, newValue: U) => void
+  /**
+   * Whether enable clipboard feature.
+   *
+   * @default true
+   */
+  enableClipboard?: boolean
   /**
    * Whether this value can be edited.
    *