EditInPlaceManager

Overview

EditInPlaceManager is a component for inline editing in Now.js Framework. Click to edit text directly in the element.

When to use:

• Need to edit text inline
• Need click-to-edit fields
• Need quick edit without opening modal
• Need spreadsheet-like editing

Why use it:

• ✅ Click to edit
• ✅ Auto-save on blur
• ✅ Keyboard support (Enter/Escape)
• ✅ API integration
• ✅ Validation support
• ✅ Only saves when changed

Basic Usage

HTML Declarative

<span data-edit-in-place
      data-api="/api/users/1"
      data-field="name">
  John Doe
</span>

With Validation

<span data-edit-in-place
      data-api="/api/products/1"
      data-field="price"
      data-min="0"
      data-max="10000"
      data-required="true">
  99.99
</span>

JavaScript API

const editable = EditInPlaceManager.create(element, {
  api: '/api/users/1',
  field: 'name',
  onSave: (value) => {
    console.log('Saved:', value);
  }
});

Data Attributes

Options

EditInPlaceManager.create(element, {
  // API endpoint
  api: '/api/resource/1',

  // Field name
  field: 'title',

  // HTTP method
  method: 'PATCH',

  // Select text on edit
  selectOnEdit: true,

  // Validation rules
  required: false,
  min: null,
  max: null,
  pattern: null,

  // Callbacks
  onSave: (value) => {},
  onError: (error) => {},
  onCancel: () => {}
});

API Reference

EditInPlaceManager.create(element, options)

Create editable element

Returns: Object - Instance

EditInPlaceManager.getInstance(element)

Get instance from element

Returns: Object|null

instance.destroy()

Destroy instance

Events

element.addEventListener('edit:save', (e) => {
  console.log(`Changed from "${e.detail.oldValue}" to "${e.detail.value}"`);
});

Keyboard Shortcuts

CSS Styling

/* Editable element */
[data-edit-in-place] {
  cursor: pointer;
  border-bottom: 1px dashed #9ca3af;
}

[data-edit-in-place]:hover {
  background: rgba(59, 130, 246, 0.1);
}

/* Editing state */
[data-edit-in-place].editing {
  border-bottom: none;
}

[data-edit-in-place].editing input {
  font: inherit;
  border: 1px solid #3b82f6;
  border-radius: 4px;
  padding: 2px 6px;
  outline: none;
}

/* Saving state */
[data-edit-in-place].saving {
  opacity: 0.7;
  pointer-events: none;
}

/* Error state */
[data-edit-in-place].error {
  color: #ef4444;
  border-bottom-color: #ef4444;
}

Real-World Examples

Editable Table Cell

<table>
  <tr>
    <td>Name:</td>
    <td data-edit-in-place
        data-api="/api/profile"
        data-field="name">
      John Doe
    </td>
  </tr>
  <tr>
    <td>Email:</td>
    <td data-edit-in-place
        data-api="/api/profile"
        data-field="email"
        data-pattern="[^@]+@[^@]+\.[^@]+">
      john@example.com
    </td>
  </tr>
</table>

Editable Title

<h1 data-edit-in-place
    data-api="/api/articles/123"
    data-field="title"
    data-required="true">
  My Article Title
</h1>

With Custom Callback

document.querySelectorAll('[data-edit-in-place]').forEach(el => {
  el.addEventListener('edit:save', async (e) => {
    // Custom save logic
    try {
      await customSaveFunction(e.detail.value);
      NotificationManager.success('Saved successfully');
    } catch (error) {
      NotificationManager.error('Save failed');
      // Revert to old value
      e.target.textContent = e.detail.oldValue;
    }
  });
});

Kanban Card Title

<div class="kanban-card">
  <h4 data-edit-in-place
      data-api="/api/tasks/456"
      data-field="title">
    Task Title
  </h4>
  <p data-edit-in-place
     data-api="/api/tasks/456"
     data-field="description">
    Task description goes here...
  </p>
</div>

Common Pitfalls

⚠️ 1. API Response Format

// API should return new value
{
  "success": true,
  "data": {
    "name": "New Value"  // Use this value to display
  }
}

// Or return formatted value
{
  "value": "New Value"
}

⚠️ 2. Content Must Be Text

<!-- ❌ Has HTML inside -->
<span data-edit-in-place>
  <strong>Text</strong>
</span>

<!-- ✅ Text only -->
<span data-edit-in-place>Text</span>

⚠️ 3. Multiple Lines

<!-- ❌ EditInPlace doesn't support multiline -->
<p data-edit-in-place>
  Line 1
  Line 2
</p>

<!-- ✅ Use textarea mode or modal instead -->

Related Documentation

• FormManager - Form handling
• ApiService - API calls