grapesjs/docs/api/data_source_manager.md

DataSources

This module manages data sources within the editor. You can initialize the module with the editor by passing an instance of EditorModel.

const editor = new EditorModel();
const dsm = new DataSourceManager(editor);

Once the editor is instantiated, you can use the following API to manage data sources:

const dsm = editor.DataSources;

• add - Add a new data source.
• get - Retrieve a data source by its ID.
• getAll - Retrieve all data sources.
• remove - Remove a data source by its ID.
• clear - Remove all data sources.

Example of adding a data source:

const ds = dsm.add({
  id: 'my_data_source_id',
  records: [
    { id: 'id1', name: 'value1' },
    { id: 'id2', name: 'value2' }
  ]
});

Parameters

• em EditorModel Editor model.

add

Add new data source.

Parameters

• props Object Data source properties.
• opts AddOptions (optional, default {})

Examples

const ds = dsm.add({
 id: 'my_data_source_id',
 records: [
   { id: 'id1', name: 'value1' },
   { id: 'id2', name: 'value2' }
 ]
});

Returns [DataSource] Added data source.

get

Get data source.

Parameters

• id String Data source id.

Examples

const ds = dsm.get('my_data_source_id');

Returns [DataSource] Data source.

getValue

Get value from data sources by key

Parameters

• key String Path to value.
• defValue any

Returns any const value = dsm.getValue('ds_id.record_id.propName', 'defaultValue');

remove

Remove data source.

Parameters

• id (String | [DataSource]) Id of the data source.
• opts RemoveOptions?

Examples

const removed = dsm.remove('DS_ID');

Returns [DataSource] Removed data source.

fromPath

Retrieve a data source, data record, and optional property path based on a string path. This method parses a string path to identify and retrieve the corresponding data source and data record. If a property path is included in the input, it will also be returned. The method is useful for accessing nested data within data sources.

Parameters

• path String The string path in the format 'dataSourceId.recordId.property'.

Examples

const [dataSource, dataRecord, propPath] = dsm.fromPath('my_data_source_id.record_id.myProp');
// e.g., [DataSource, DataRecord, 'myProp']

Returns [DataSource?, DataRecord?, String?] An array containing the data source, data record, and optional property path.