AimdRecorderEditor

Use AimdRecorderEditor when the user needs to keep editing AIMD protocol structure while continuing to fill recorder data on the same screen.

Example

<script setup lang="ts">
import { ref } from "vue"
import {
  AimdRecorderEditor,
  createEmptyProtocolRecordData,
  type AimdProtocolRecordData,
} from "@airalogy/aimd-recorder"

const content = ref(`# Protocol

Sample: {{var|sample_name: str}}
Temperature: {{var|temperature: float}}
`)
const record = ref<AimdProtocolRecordData>(createEmptyProtocolRecordData())
</script>

<template>
  <AimdRecorderEditor
    v-model="record"
    v-model:content="content"
    locale="en-US"
    :show-record-data="true"
    :allow-raw-field-source-editing="false"
  />
</template>

Workspace Behavior

AimdRecorderEditor binds the source editor, recorder, and record state to the same content / record model.

By default it also:

• keeps Recorder, Record Data, and detached-data inspection near the main workflow instead of pushing them below long documents
• stretches both columns to the remaining viewport height
• uses internal scroll areas so the editor and recorder stay visually aligned

If the host prefers fixed-height behavior, set :fit-viewport="false" and continue sizing with editorMinHeight / recorderMinHeight.

If the host already owns the available height, such as a route-level flex workspace or split-pane app, place the editor in a bounded parent and set :fill-parent="true" together with :fit-viewport="false". In that mode AimdRecorderEditor fills the parent instead of measuring the viewport, and the source editor plus recorder side scroll inside their own panels.

If the host still wants the extra structure helper panel, pass :show-field-structure="true".

Recorder-Aware WYSIWYG Mode

The recorder side can switch into a recorder-aware WYSIWYG AIMD editor for non-technical users.

In this mode:

• var, var_table, step, check, and quiz render as their real recorder widgets instead of generic chips
• users can place the caret anywhere and keep writing headings, lists, and normal Markdown around those widgets
• rendered fields can be dragged to any caret-valid position
• a visible drop indicator helps place dragged fields more precisely
• each rendered field gets contextual hover/focus actions for edit, delete, and drag

When the host does not want recorder-side raw AIMD editing, set :allow-raw-field-source-editing="false" so the field dialog keeps only the structured field controls.

If the current protocol no longer contains previously recorded field ids, the editor can surface detached data in a dedicated view so users can migrate values into newly created fields.