feat(ui): improve JSON copy functionality in state explorer - AB-242 (#1107)

* refactor: replace inline object checks with isPlainObject utility function

* feat(selectionToJson): implement selection parsing logic for JSON subset extraction - AB-242

* feat(SharedJsonViewer): add copy to clipboard selection functionality

* fix(SharedJsonViewer): avoid copying empty objects when a simple value is selected

* fix(SharedJsonViewer): remove unnecessary space argument in prettyJson

Author: VladKrasny

src/ui/src/builder/useComponentClipboard.ts

@@ -1,3 +1,4 @@
+import { isPlainObject } from "@/utils/object";
 import { useLogger } from "@/composables/useLogger";
 import { Component } from "@/writerTypes";
 
@@ -8,8 +9,7 @@ type ClipboardData = {
 
 function isClipboardData(data: unknown): data is ClipboardData {
 	return (
-		typeof data === "object" &&
-		data !== null &&
+		isPlainObject(data) &&
 		"type" in data &&
 		data.type === "writer/clipboard" &&
 		"components" in data &&

src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewer.utils.ts

@@ -1,3 +1,4 @@
+import { isPlainObject } from "@/utils/object";
 import type {
 	JsonData,
 	JsonValue,
@@ -18,7 +19,7 @@ export function isJSONArray(data: JsonData): data is JsonData[] {
 export function isJSONObject(
 	data: JsonData,
 ): data is { [x: string]: JsonData } {
-	return !isJSONArray(data) && typeof data === "object" && data !== null;
+	return isPlainObject(data);
 }
 
 export function getJSONLength(data: JsonData): number {

src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewer.vue

@@ -6,6 +6,7 @@
 				:open="isRootOpen"
 				:data="data"
 				@toggle="$emit('toggle', { path: [], open: $event })"
+				@copy="onCopyToClipboard($event, data)"
 			>
 				<SharedJsonViewerObject
 					:data="data"
@@ -20,6 +21,7 @@
 				:path="path"
 				:initial-depth="initialDepth"
 				@toggle="$emit('toggle', $event)"
+				@copy="onCopyToClipboard($event, data)"
 			/>
 		</template>
 		<SharedJsonViewerValue v-else-if="isJSONValue(data)" :data="data" />
@@ -50,6 +52,8 @@ export type JsonViewerTogglePayload = { path: JsonPath; open: boolean };
  * This component will detect the shape of the JSON and redirect the right dedicated component.
  */
 import { PropType, computed } from "vue";
+import { useClipboard } from "@vueuse/core";
+import { isPlainObject } from "@/utils/object";
 import {
 	isJSONArray,
 	isJSONObject,
@@ -62,6 +66,7 @@ import SharedJsonViewerValue from "./SharedJsonViewerValue.vue";
 import SharedJsonViewerChildrenCounter from "./SharedJsonViewerChildrenCounter.vue";
 import SharedControlBar from "../SharedControlBar.vue";
 import { defineAsyncComponentWithLoader } from "@/utils/defineAsyncComponentWithLoader";
+import { selectionToJson } from "./selectionToJson";
 
 const SharedCopyClipboardButton = defineAsyncComponentWithLoader({
 	loader: () => import("@/components/shared/SharedCopyClipboardButton.vue"),
@@ -99,8 +104,49 @@ const isRoot = computed(() => props.path.length === 0 && !props.hideRoot);
 const isRootOpen = computed(
 	() => props.initialDepth === -1 || props.initialDepth > 0,
 );
-const dataAsString = computed(() => {
-	if (props.data === undefined) return JSON.stringify(null);
-	return JSON.stringify(props.data);
-});
+
+function prettyJson(input: unknown) {
+	if (input === undefined) {
+		return JSON.stringify(null);
+	}
+
+	try {
+		return JSON.stringify(input, null, 2);
+	} catch {
+		return JSON.stringify(null);
+	}
+}
+
+const dataAsString = computed(() => prettyJson(props.data));
+
+const { copy } = useClipboard();
+
+function isEmptySubset(subset: Record<string, unknown> | unknown[]): boolean {
+	if (Array.isArray(subset)) return subset.length === 0;
+	if (isPlainObject(subset)) return Object.keys(subset).length === 0;
+	return false;
+}
+
+function onCopyToClipboard(
+	event: ClipboardEvent,
+	arrayOrObject: Record<string, JsonData> | JsonData[],
+) {
+	event.stopPropagation();
+
+	const selectionText = (window.getSelection()?.toString() ?? "").trim();
+
+	if (!selectionText) {
+		return; // no selection → do nothing
+	}
+
+	const subset = selectionToJson(arrayOrObject, selectionText);
+
+	if (isEmptySubset(subset)) {
+		return; // nothing meaningful recognized → allow native copy of raw text
+	}
+
+	event.preventDefault();
+
+	copy(prettyJson(subset)); // copy subset
+}
 </script>

src/ui/src/components/shared/SharedJsonViewer/SharedJsonViewerObject.vue

@@ -47,7 +47,9 @@ import SharedJsonViewerValue from "./SharedJsonViewerValue.vue";
 
 const props = defineProps({
 	data: {
-		type: [Object, Array] as PropType<JsonData>,
+		type: [Object, Array] as PropType<
+			Record<string, JsonData> | JsonData[]
+		>,
 		required: true,
 	},
 	path: {