542 add copy and paste functionality to schema diagram (#955)

Logende · web-flow · commit 8ebbffd4583c · 2026-04-22T17:25:44.000+02:00
* Make Ace Editor cursor update not change focus

* Add copy and paste functionality to schema diagram

* apply formatting changes

---------

Co-authored-by: Logende &lt;Logende@users.noreply.github.com&gt;
diff --git a/meta_configurator/src/components/panels/code-editor/aceUtility.ts b/meta_configurator/src/components/panels/code-editor/aceUtility.ts
@@ -30,7 +30,9 @@ export function updateCursorPositionBasedOnPath(
   currentPath: Path
 ) {
   const position = determineCursorPosition(editor, editorContent, currentPath);
-  editor.gotoLine(position.row + 1, position.column, true); // row is 1-based, column is 0-based
+  editor.clearSelection();
+  editor.moveCursorToPosition(position);
+  editor.renderer.scrollCursorIntoView();
 }
 
 /**
diff --git a/meta_configurator/src/components/panels/schema-diagram/VueFlowPanel.vue b/meta_configurator/src/components/panels/schema-diagram/VueFlowPanel.vue
@@ -48,7 +48,11 @@ import SchemaExternalReferenceNode from '@/components/panels/schema-diagram/Sche
 import $RefParser from '@apidevtools/json-schema-ref-parser';
 import {useErrorService} from '@/utility/errorServiceInstance.ts';
 import {pathToJsonPointer} from '@/utility/pathUtils.ts';
-import {stringToIdentifier, urlStringToIdentifier} from '@/utility/stringToIdentifier.ts';
+import {urlStringToIdentifier} from '@/utility/stringToIdentifier.ts';
+import {
+  copySelectedSchemaToClipboard,
+  pasteSchemaFromClipboard,
+} from '@/components/panels/schema-diagram/schemaClipboardUtils';
 
 const emit = defineEmits<{
   (e: 'update_current_path', path: Path): void;
@@ -110,6 +114,33 @@ onMounted(() => {
   });
 });
 
+async function handleCopy(event?: ClipboardEvent) {
+  await copyToClipboard(event);
+  event?.preventDefault(); // override default browser copy
+}
+async function handlePaste(event?: ClipboardEvent) {
+  await pasteFromClipboard(event);
+  event?.preventDefault(); // override default browser paste
+}
+
+async function copyToClipboard(event?: ClipboardEvent) {
+  await copySelectedSchemaToClipboard(
+    event,
+    schemaData,
+    selectedData.value,
+    schemaSession.currentSelectedElement.value
+  );
+}
+
+async function pasteFromClipboard(event?: ClipboardEvent) {
+  try {
+    const pastedPath = await pasteSchemaFromClipboard(event, schemaData, selectedData.value);
+    selectElement(pastedPath);
+  } catch (err) {
+    console.error('Failed to read from clipboard:', err);
+  }
+}
+
 // scroll to the current selected element when it changes
 watch(
   schemaSession.currentSelectedElement,
@@ -424,7 +455,7 @@ function updateExternalReferenceValue(
 </script>
 
 <template>
-  <div class="layout-flow">
+  <div class="layout-flow" tabindex="0" @copy="handleCopy" @paste="handlePaste">
     <VueFlow
       :nodes="activeNodes"
       :edges="activeEdges"
diff --git a/meta_configurator/src/components/panels/schema-diagram/schemaClipboardUtils.ts b/meta_configurator/src/components/panels/schema-diagram/schemaClipboardUtils.ts
@@ -0,0 +1,268 @@
+import type {ManagedData} from '@/data/managedData';
+import {
+  SchemaElementData,
+  SchemaObjectAttributeData,
+  SchemaObjectNodeData,
+} from '@/schema/graph-representation/schemaGraphTypes';
+import {findAvailableSchemaId} from '@/schema/schemaReadingUtils';
+import {
+  addSchemaEnum,
+  addSchemaObject,
+  createIdentifierForExtractedElement,
+  extractInlinedSchemaElement,
+} from '@/schema/schemaManipulationUtils';
+import type {Path} from '@/utility/path';
+
+export type ClipboardSchemaPayload = {
+  name: string;
+  schema: any;
+};
+
+export async function copySelectedSchemaToClipboard(
+  event: ClipboardEvent | undefined,
+  schemaData: ManagedData,
+  selectedData: SchemaElementData | undefined,
+  selectedPath: Path
+) {
+  if (!selectedData) {
+    console.log('No element selected to copy');
+    return;
+  }
+
+  const schema = schemaData.dataAt(selectedPath);
+  let metaType = selectedData.getNodeType();
+
+  if (schema.enum != undefined) {
+    metaType = 'schemaenum';
+  }
+
+  const dataToCopy = structuredClone(schema);
+  if (!dataToCopy.type && metaType === 'schemaobject') {
+    dataToCopy.type = 'object';
+  }
+
+  const clipboardText = JSON.stringify(
+    {
+      [getClipboardNameForSelectedSchema(selectedData)]: dataToCopy,
+    },
+    null,
+    2
+  );
+
+  try {
+    if (event?.clipboardData) {
+      event.clipboardData.setData('text/plain', clipboardText);
+      return;
+    }
+    await navigator.clipboard.writeText(clipboardText);
+    console.log('Copied to system clipboard:', dataToCopy);
+  } catch (err) {
+    console.error('Failed to write to clipboard:', err);
+  }
+}
+
+export async function pasteSchemaFromClipboard(
+  event: ClipboardEvent | undefined,
+  schemaData: ManagedData,
+  selectedData: SchemaElementData | undefined
+) {
+  const clipboardText =
+    event?.clipboardData?.getData('text/plain') ?? (await navigator.clipboard.readText());
+  const payload = normalizeClipboardSchemaPayload(JSON.parse(clipboardText));
+
+  if (isComplexSchema(payload.schema)) {
+    return addComplexSchemaToDefinitions(schemaData, payload);
+  }
+
+  return addPrimitiveSchemaAsAttribute(schemaData, selectedData, payload);
+}
+
+export function inferSchemaKind(
+  schema: any
+): 'object' | 'array' | 'enum' | 'attribute' | 'unknown' {
+  if (!schema || typeof schema !== 'object' || Array.isArray(schema)) {
+    return 'unknown';
+  }
+
+  if (schema.enum !== undefined) {
+    return 'enum';
+  }
+  if (isPrimitiveArraySchema(schema)) {
+    return 'attribute';
+  }
+  if (schema.type === 'array' || schema.items !== undefined) {
+    return 'array';
+  }
+  if (schema.type === 'object' || schema.properties || schema.$ref) {
+    return 'object';
+  }
+  if (
+    ['string', 'boolean', 'number', 'null', 'integer'].includes(schema.type) ||
+    schema.const !== undefined
+  ) {
+    return 'attribute';
+  }
+
+  return 'unknown';
+}
+
+function getClipboardNameForSelectedSchema(selectedData: SchemaElementData) {
+  return createIdentifierForExtractedElement(
+    selectedData.name,
+    selectedData.title,
+    selectedData.fallbackDisplayName
+  );
+}
+
+function normalizeClipboardSchemaPayload(data: any): ClipboardSchemaPayload {
+  if (isWrappedSchemaPayload(data)) {
+    const [name, schema] = Object.entries(data)[0] as [string, any];
+    return {
+      name: name.trim() || deriveNameFromSchema(schema),
+      schema,
+    };
+  }
+
+  return {
+    name: defaultNameForSchema(data),
+    schema: data,
+  };
+}
+
+function deriveNameFromSchema(schema: any) {
+  if (schema?.title && typeof schema.title === 'string') {
+    return schema.title;
+  }
+  if (schema?.type === 'object' || schema?.properties || schema?.$ref) {
+    return 'object';
+  }
+  if (schema?.type === 'array' || schema?.items) {
+    return 'array';
+  }
+  if (schema?.enum !== undefined) {
+    return 'enum';
+  }
+  if (typeof schema?.type === 'string') {
+    return schema.type;
+  }
+  return 'schema';
+}
+
+function isWrappedSchemaPayload(data: any) {
+  if (!data || typeof data !== 'object' || Array.isArray(data)) {
+    return false;
+  }
+
+  const entries = Object.entries(data);
+  if (entries.length !== 1) {
+    return false;
+  }
+
+  return inferSchemaKind(data) === 'unknown' && inferSchemaKind(entries[0]![1]) !== 'unknown';
+}
+
+function isComplexSchema(schema: any) {
+  return ['object', 'array', 'enum'].includes(inferSchemaKind(schema));
+}
+
+function defaultNameForSchema(schema: any) {
+  const schemaKind = inferSchemaKind(schema);
+
+  if (schemaKind === 'attribute') {
+    return 'attr';
+  }
+  if (schemaKind === 'object' || schemaKind === 'array') {
+    return 'object';
+  }
+  if (schemaKind === 'enum') {
+    return 'enum';
+  }
+
+  return 'schema';
+}
+
+function addComplexSchemaToDefinitions(schemaData: ManagedData, payload: ClipboardSchemaPayload) {
+  const preferredName = payload.name.trim() || deriveNameFromSchema(payload.schema);
+  const schemaKind = inferSchemaKind(payload.schema);
+
+  if (schemaKind === 'enum') {
+    return addSchemaEnum(schemaData, payload.schema, preferredName);
+  }
+
+  const elementPath = addSchemaObject(schemaData, false, payload.schema, preferredName);
+
+  if (schemaKind === 'array') {
+    return extractArrayItemsToDefinition(schemaData, elementPath, payload);
+  }
+
+  return elementPath;
+}
+
+function addPrimitiveSchemaAsAttribute(
+  schemaData: ManagedData,
+  selectedData: SchemaElementData | undefined,
+  payload: ClipboardSchemaPayload
+) {
+  const targetObjectPath = getSelectedObjectPathForAttributePaste(selectedData);
+  if (!targetObjectPath) {
+    throw new Error('Primitive schemas can only be pasted when an object is selected.');
+  }
+
+  const attributePath = findAvailableSchemaId(
+    schemaData,
+    [...targetObjectPath, 'properties'],
+    payload.name.trim() || 'property',
+    true
+  );
+
+  schemaData.setDataAt(attributePath, payload.schema);
+  return attributePath;
+}
+
+function getSelectedObjectPathForAttributePaste(selectedData: SchemaElementData | undefined) {
+  if (selectedData instanceof SchemaObjectNodeData) {
+    return selectedData.absolutePath;
+  }
+
+  if (selectedData instanceof SchemaObjectAttributeData) {
+    return selectedData.absolutePath.slice(0, -2);
+  }
+
+  return undefined;
+}
+
+function isPrimitiveArraySchema(schema: any) {
+  if (!schema || typeof schema !== 'object' || Array.isArray(schema)) {
+    return false;
+  }
+
+  if (!(schema.type === 'array' || schema.items !== undefined)) {
+    return false;
+  }
+
+  const items = schema.items;
+  if (!items || typeof items !== 'object' || Array.isArray(items)) {
+    return false;
+  }
+
+  return inferSchemaKind(items) === 'attribute';
+}
+
+function extractArrayItemsToDefinition(
+  schemaData: ManagedData,
+  arrayPath: Path,
+  payload: ClipboardSchemaPayload
+) {
+  const arraySchema = schemaData.dataAt(arrayPath);
+  if (!arraySchema?.items || typeof arraySchema.items !== 'object' || arraySchema.items.$ref) {
+    return arrayPath;
+  }
+
+  const itemName = createIdentifierForExtractedElement(
+    undefined,
+    arraySchema.items.title,
+    payload.name + 'Item'
+  );
+
+  return extractInlinedSchemaElement([...arrayPath, 'items'], schemaData, itemName, true);
+}
diff --git a/meta_configurator/src/schema/schemaManipulationUtils.ts b/meta_configurator/src/schema/schemaManipulationUtils.ts
@@ -153,11 +153,26 @@ export function addSchemaObject(
   return objectPath;
 }
 
-export function addSchemaEnum(schemaData: ManagedData) {
-  const enumPath = findAvailableSchemaId(schemaData, ['$defs'], 'enum');
-  schemaData.setDataAt(enumPath, {
-    type: 'string',
-    enum: ['VAL_1', 'VAL_2'],
-  });
+export function addSchemaEnum(
+  schemaData: ManagedData,
+  schema: any = undefined,
+  identifier: string | undefined = undefined
+) {
+  let enumPath: Path;
+
+  if (identifier !== undefined) {
+    enumPath = findAvailableSchemaId(schemaData, ['$defs'], identifier, true);
+  } else {
+    enumPath = findAvailableSchemaId(schemaData, ['$defs'], 'enum');
+  }
+
+  if (schema !== undefined) {
+    schemaData.setDataAt(enumPath, schema);
+  } else {
+    schemaData.setDataAt(enumPath, {
+      type: 'string',
+      enum: ['VAL_1', 'VAL_2'],
+    });
+  }
   return enumPath;
 }
