Field Annotation

import { FieldAnnotationPlugin } from '@superdoc/field-annotation';

const plugin = FieldAnnotationPlugin({
  editor: myEditor,
  handleDropOutside: true
});

// 1. Create form fields
const fields = [
  { id: 'name', label: 'Full Name', type: 'text' },
  { id: 'date', label: 'Date', type: 'text' },
  { id: 'signature', label: 'Sign Here', type: 'signature' }
];

// 2. Insert fields into document
fields.forEach((field, i) => {
  editor.commands.addFieldAnnotation(i * 100, {
    fieldId: field.id,
    displayLabel: field.label,
    type: field.type
  });
});

// 3. Handle user interactions
editor.on('fieldAnnotationClicked', ({ node }) => {
  openFieldEditor(node.attrs.fieldId);
});

// 4. Fill and export
editor.annotate([
  { input_id: 'name', input_value: 'John Doe' },
  { input_id: 'date', input_value: '2024-01-15' }
]);

// Find all signature fields
const signatureFields = findFieldAnnotations(
  node => node.attrs.type === 'signature',
  state
);

// Find fields with specific color
const redFields = findFieldAnnotations(
  node => node.attrs.fieldColor === '#FF0000',
  state
);

// Find fields in selection
const { from, to } = state.selection;
const selectedFields = findFieldAnnotationsBetween(from, to, state.doc);

// Find fields in specific range
const rangeFields = findFieldAnnotationsBetween(100, 500, state.doc);
console.log(`Found ${rangeFields.length} fields in range`);

// Find single field
const fields = findFieldAnnotationsByFieldId('field-123', state);

// Find multiple fields
const fields = findFieldAnnotationsByFieldId(['field-1', 'field-2'], state);
fields.forEach(({ pos, node }) => {
  console.log(`Found ${node.attrs.fieldId} at position ${pos}`);
});

const firstField = findFirstFieldAnnotationByFieldId('field-123', state);
if (firstField) {
  console.log(`First occurrence at position ${firstField.pos}`);
}

const headerFooterAnnotations = findHeaderFooterAnnotationsByFieldId('field-123', editor, activeSectionEditor);
headerFooterAnnotations.forEach(({ node, pos }) => {
  console.log(`Field ${node.attrs.fieldId} at position ${pos}`);
});

import { getAllFieldAnnotations } from './fieldAnnotationHelpers';

const annotations = getAllFieldAnnotations(editor.state);
console.log(`Document contains ${annotations.length} field annotations`);

annotations.forEach(({ pos, node }) => {
  console.log(`Field ${node.attrs.fieldId} at position ${pos}`);
});

const annotationsWithRects = getAllFieldAnnotationsWithRect(view, state);
annotationsWithRects.forEach(({ node, rect }) => {
  console.log(`Field ${node.attrs.fieldId} at ${rect.left}, ${rect.top}`);
});

const removedFields = findRemovedFieldAnnotations(transaction);
removedFields.forEach(({ node, pos }) => {
  console.log(`Field ${node.attrs.fieldId} at position ${pos}`);
});

// Delete single field annotation
editor.commands.deleteFieldAnnotations('field-123')

// Delete multiple field annotations
editor.commands.deleteFieldAnnotations(['field-1', 'field-2'])

const annotations = editor.helpers.fieldAnnotation.getAllFieldAnnotations();
editor.commands.deleteFieldAnnotationsByNode(annotations.slice(0, 2));

const annotation = editor.helpers.fieldAnnotation.findFieldAnnotationsByFieldId('field-123')[0];
editor.commands.deleteFieldAnnotation(annotation);

// Remove annotations starting from index 6
editor.commands.sliceFieldAnnotations('field-123', 5)

// Remove from multiple fields
editor.commands.sliceFieldAnnotations(['field-1', 'field-2'], 5)

editor.commands.addFieldAnnotation(10, {
  fieldId: 'field-123',
  displayLabel: 'Enter your name',
  fieldType: 'TEXTINPUT',
  fieldColor: '#980043'
})

editor.commands.addFieldAnnotationAtSelection({
  fieldId: 'field-456',
  displayLabel: 'Signature here'
}, true)

editor.commands.replaceWithFieldAnnotation([{
  from: 20,
  to: 45,
  attrs: {
    fieldId: 'field-789',
    fieldType: 'TEXTINPUT',
    fieldColor: '#980043'
  }
}])

// Replace all annotations in selection with their labels
editor.commands.replaceFieldAnnotationsWithLabelInSelection()

// Replace specific fields with labels
editor.commands.replaceFieldAnnotationsWithLabel(['field-1', 'field-2'])

// Replace only text annotations in selection
editor.commands.replaceFieldAnnotationsWithLabel(null, {
  isInSelection: true,
  types: ['text']
})

// Reset all annotations in document
editor.commands.resetFieldAnnotations()

// Update single field
editor.commands.updateFieldAnnotations('field-123', {
  displayLabel: 'Updated label',
  fieldColor: '#FF0000'
})

// Update multiple fields
editor.commands.updateFieldAnnotations(['field-1', 'field-2'], {
  hidden: true
})

// Update specific annotation instance
const annotation = editor.helpers.fieldAnnotation.findFirstFieldAnnotationByFieldId('field-123', state);
editor.commands.updateFieldAnnotation(annotation, {
  displayLabel: 'New label'
})

const annotations = editor.helpers.fieldAnnotation.getAllFieldAnnotations();
editor.commands.updateFieldAnnotationsAttributes(annotations, {
  fieldColor: '#FF0000',
  hidden: false
});

// Hide specific field IDs
editor.commands.setFieldAnnotationsHiddenByCondition(node => {
  const targetIds = ['field-1', 'field-2', 'field-3'];
  return targetIds.includes(node.attrs.fieldId);
})

// Hide signature fields and show others
editor.commands.setFieldAnnotationsHiddenByCondition(
  node => node.attrs.type === 'signature',
  true
)

// Make all annotations visible
editor.commands.unsetFieldAnnotationsHidden()

// Make all annotations visible
editor.commands.setFieldAnnotationsVisibility('visible')

// Hide all annotations (preserves layout)
editor.commands.setFieldAnnotationsVisibility('hidden')

// Highlight specific field IDs
editor.commands.setFieldAnnotationsHighlighted((node) => {
  const targetIds = ['field-1', 'field-2', 'field-3'];
  return targetIds.includes(node.attrs.fieldId);
}, true)

// Remove highlighting from all annotations
editor.commands.setFieldAnnotationsHighlighted(() => true, false)

// Toggle bold formatting on selected annotations
editor.commands.toggleFieldAnnotationsFormat('bold');

// Toggle italic and update selection
editor.commands.toggleFieldAnnotationsFormat('italic', true);

editor.commands.setFieldAnnotationsFontFamily('Arial', true)

editor.commands.setFieldAnnotationsFontSize('14pt')

editor.commands.setFieldAnnotationsTextHighlight('#ffff00')

editor.commands.setFieldAnnotationsTextColor('#0066cc')

// Listen for field deletions
editor.on('fieldAnnotationDeleted', ({ removedNodes }) => {
  removedNodes.forEach(({ node }) => {
    console.log(`Field ${node.attrs.fieldId} was deleted`);
    // Clean up external references
    removeFieldFromDatabase(node.attrs.fieldId);
  });
});