@acoustic-content-sdk/edit-api

Inline Edit Provider
Inline Edit Service
API Documentation

General Concepts

The inline edit APIs define how an application can register DOM elements to be inline editable and also an API how an implementor of inline edit functionality can hook into the system. The purpose of the consumer facing interface WchInlineEditServiceV2 is to make it convenient to use the service, the purpose of the provider facing interface WchInlineEditProviderV2 to implement the service. The glue layer between both is a generic implementation by the SDK.

Refer to the framework specific modules to learn how to access the services.

Provider

The edit provider is a piece of javascript code that implements inline edit functionality. It is dynamically loaded by the SPA (typically via the SDK). The provider needs to conform to the following pattern:

Initialization

The edit module implements the WchInlineEditProviderV2 interface, i.e. it exposes a register function. This function will be invoked for each editable HTML element and allows the edit provider to attach the desired edit hooks to the elements. The method is provided with:

a reference to the actual HTML element
an accessor expression that identifies the element on a content item to be edited. This expression is relative to the current rendering context
a reactive stream of rendering contexts. Note that the rendering contexts can change during the lifetime of this registration. Also there is no guarantee that the element pointed to by the accessor actually exists on the context. If a provider subscribes to the sequence of rendering contexts, it needs to make sure to NOT throw an exception in the subscribe block under any circumstances

Result

The result of a registration is an event provider. The purpose of this provider is to communicate inline edit operations on the HTML element to the host, i.e. the host registers for events on that event provider and the edit provider is responsible to firing these events (if the event is supported).

The event provider can optionally implement the Disposable interface. If implemented the host will call its dispose method after registration, before the HTML element gets removed from the DOM (so it's the inverse operation to the registration call).

Notifications

The implementor of the WchInlineEditProviderV2 MAY optionally also implement the EventTargetLike interface, i.e. be an event emitter. This allows the provider to communicate information to the SDK, e.g. about enabled or disabled inline edit mode.

Currently supported notifications are:

wchInlineEditStart to notify about entering inline edit mode
wchInlineEditEnd to notify about leaving inline edit mode

WchInlineEditService

The WchInlineEditServiceV2 interface allows a client to interact with the inline edit implementation. The implementation of this interface makes sure to load the inline edit provider and to fulfill the interface contract with the provider.

A consumer of this interface calls the registerComponent message for each HTML element that is supposed to be edited. The result of this call is an Observable. The inline edit registration begins as soon as someone subscribes to this observable and ends as soon as this subscription ends. It is in the responsibility of the consumer to make sure that the HTML element exists for the duration of the subscription.

Home > @acoustic-content-sdk/edit-api

edit-api package

The edit API defines interfaces for consumers and providers of inline edit functionality.

Interfaces

Interface	Description
DataTransferContentItem	Data transfer format for content items
Disposable	Implemented by objects that expose a life cycle. Calling the dispose method signals the end of this life cycle.
InlineEditSelectionProvider	Service that exposes inline edit info
WchConfig	Exposes server side configuration for the current tenant
WchEditableEvent	Event issued by the edit provider.
WchInlineEditEvent	Event issued by the edit library
WchInlineEditProvider
WchInlineEditProviderV2	Interface exposed by an inline edit provider implementationImplementors may also implement `EventTargetLike` to send item independent events
WchInlineEditRequireMap	Helper interface that defines the mappings from module name to actual type
WchInlineEditRequireMapV2	Helper interface that defines the mappings from module name to actual type. This is a simple dependency injection mechanism from the inline edit host to the inline edit provider.
WchInlineEditService	Implementation of the edit service used by the wchEditable directive.
WchInlineEditServiceV2	Implementation of the edit service used by the wchEditable directive.

Variables

Variable	Description
ACOUSTIC_ACTIVE_PAGE_MODULE	Token used to require the active page service PromiseLike
ACOUSTIC_CONFIG_MODULE	Token used to require the [[WchConfig]] service PromiseLike
ACOUSTIC_HTTP_MODULE	Token used to access the http service PromiseLike
ACOUSTIC_INFO_MODULE	Token used to require the [[WchInfo]] service PromiseLike
ACOUSTIC_LOGGER_MODULE	Token used to require the [[LoggerService]] PromiseLike
ATTR_DATA_SELECTABLE
EVENT_EDIT_END
EVENT_EDIT_START
EVENT_INLINE_EDIT_END
EVENT_INLINE_EDIT_SET_SELECTED_CELL
EVENT_INLINE_EDIT_START
INLINE_EDIT_PROVIDER_ID	Identifier used to identify an WchInlineEditProviderV2 instance on a context, e.g. the window
TRANSFER_FORMAT	Transfer format for our custom dnd components
VERSION	Version and build number of the package
WCH_ACTIVE_PAGE_MODULE
WCH_CONFIG_MODULE
WCH_HTTP_MODULE
WCH_INFO_MODULE
WCH_LOGGER_MODULE

Type Aliases

Type Alias	Description
AccessorType	The accessor string, a property path relative to the root of a content item that points to the element value to be edited. A value of `null` denotes the root level element.
EventTargetLike
WchInlineEditRegistration
WchInlineEditRegistrationResult	Result of an inline edit registration. This is at least an event emitter but may optionally also expose the `Disposable` interface to allow deregistration
WchInlineEditRegistrationV2	Type definition of the register method that allows to register DOM elements with an inline edit provider.
WchInlineEditRequire	Interface of the require function, strongly typed
WchInlineEditRequireV2	Interface of the require function, strongly typed

Home > @acoustic-content-sdk/edit-api > DataTransferContentItem

DataTransferContentItem interface

Data transfer format for content items

Signature:

export interface DataTransferContentItem

Properties

Property	Type	Description
accessor	`AccessorType`	The accessor string
id	`string`	ID of the content item

Home > @acoustic-content-sdk/edit-api > Disposable

Disposable interface

Implemented by objects that expose a life cycle. Calling the dispose method signals the end of this life cycle.

Signature:

export interface Disposable

Properties

Property	Type	Description
dispose	`() => void`

Home > @acoustic-content-sdk/edit-api > InlineEditSelectionProvider

InlineEditSelectionProvider interface

Service that exposes inline edit info

Signature:

export interface InlineEditSelectionProvider

Properties

Property	Type	Description
selectedCell$	`Observable<string \| undefined>`	Captures the currently selected cell. The return value is either just an ID or `ID#accessor`. If a cell is deselected, the service returns i

Home > @acoustic-content-sdk/edit-api > WchConfig

WchConfig interface

Exposes server side configuration for the current tenant

Signature:

export interface WchConfig

Properties

Property	Type	Description
apiUrl	`URL`	API URL for the non-preview host
authoringUIBaseUrl	`URL`	URL of the authoring host
deliveryUrl	`URL`	delivery URL for the non-preview host
previewApiUrl	`URL`	API URL for the preview host
previewDeliveryUrl	`URL`	delivery URL for the preview host

Home > @acoustic-content-sdk/edit-api > WchEditableEvent

WchEditableEvent interface

Event issued by the edit provider.

Signature:

export interface WchEditableEvent

Properties

Property	Type	Description
data	`any`
target	`HTMLElement`
type	`string`

Home > @acoustic-content-sdk/edit-api > WchInlineEditEvent

WchInlineEditEvent interface

Event issued by the edit library

Signature:

export interface WchInlineEditEvent

Properties

Property	Type	Description
data	`any`
type	`string`

Home > @acoustic-content-sdk/edit-api > WchInlineEditProvider

WchInlineEditProvider interface

Warning: This API is now obsolete.

use WchInlineEditProviderV2 instead

Signature:

export interface WchInlineEditProvider

Properties

Property	Type	Description
register	`WchInlineEditRegistration`

Home > @acoustic-content-sdk/edit-api > WchInlineEditProviderV2

WchInlineEditProviderV2 interface

Interface exposed by an inline edit provider implementation

Implementors may also implement EventTargetLike to send item independent events

Signature:

export interface WchInlineEditProviderV2

Properties

Property	Type	Description
register	`WchInlineEditRegistrationV2`	The register method that allows to register DOM elements with the provider

Home > @acoustic-content-sdk/edit-api > WchInlineEditRequireMap

WchInlineEditRequireMap interface

Helper interface that defines the mappings from module name to actual type

Signature:

export interface WchInlineEditRequireMap

Properties

Property	Type	Description
"wch-active-page"	`PromiseLike<ActivePage>`
"wch-config"	`PromiseLike<WchConfig>`
"wch-http"	`PromiseLike<WchHttp>`
"wch-info"	`PromiseLike<UrlConfig>`
"wch-logger"	`PromiseLike<LoggerService>`

Home > @acoustic-content-sdk/edit-api > WchInlineEditRequireMapV2

WchInlineEditRequireMapV2 interface

Helper interface that defines the mappings from module name to actual type. This is a simple dependency injection mechanism from the inline edit host to the inline edit provider.

Signature:

export interface WchInlineEditRequireMapV2

Properties

Property	Type	Description
"wch-active-page"	`PromiseLike<ActivePageV2>`
"wch-config"	`PromiseLike<WchConfig>`
"wch-info"	`PromiseLike<UrlConfig>`
"wch-logger"	`PromiseLike<LoggerService>`

Home > @acoustic-content-sdk/edit-api > WchInlineEditService

WchInlineEditService interface

Implementation of the edit service used by the wchEditable directive.

Signature:

export interface WchInlineEditService

Methods

Method	Description
fromEvent(aName)	Attaches to an event issued by the edit library
registerComponent(nativeElement, accessor, onRenderingContext)	Registers a particular DOM element as editable

Home > @acoustic-content-sdk/edit-api > WchInlineEditServiceV2

WchInlineEditServiceV2 interface

Implementation of the edit service used by the wchEditable directive.

Signature:

export interface WchInlineEditServiceV2

Methods

Method	Description
fromEvent(aName)	Attaches to an event issued by the edit library
registerComponent(nativeElement, accessor, renderingContext$)	Registers a particular DOM element as editable

Home > @acoustic-content-sdk/edit-api > ACOUSTIC_ACTIVE_PAGE_MODULE

ACOUSTIC_ACTIVE_PAGE_MODULE variable

Token used to require the active page service

PromiseLike

Signature:

ACOUSTIC_ACTIVE_PAGE_MODULE = "wch-active-page"

Home > @acoustic-content-sdk/edit-api > ACOUSTIC_CONFIG_MODULE

ACOUSTIC_CONFIG_MODULE variable

Token used to require the [[WchConfig]] service

PromiseLike

Signature:

ACOUSTIC_CONFIG_MODULE = "wch-config"

Home > @acoustic-content-sdk/edit-api > ACOUSTIC_HTTP_MODULE

ACOUSTIC_HTTP_MODULE variable

Token used to access the http service

PromiseLike

Signature:

ACOUSTIC_HTTP_MODULE = "wch-http"

Home > @acoustic-content-sdk/edit-api > ACOUSTIC_INFO_MODULE

ACOUSTIC_INFO_MODULE variable

Token used to require the [[WchInfo]] service

PromiseLike

Signature:

ACOUSTIC_INFO_MODULE = "wch-info"

Home > @acoustic-content-sdk/edit-api > ACOUSTIC_LOGGER_MODULE

ACOUSTIC_LOGGER_MODULE variable

Token used to require the [[LoggerService]]

PromiseLike

Signature:

ACOUSTIC_LOGGER_MODULE = "wch-logger"

Home > @acoustic-content-sdk/edit-api > ATTR_DATA_SELECTABLE

ATTR_DATA_SELECTABLE variable

Signature:

ATTR_DATA_SELECTABLE = "data-wch-selectable"

Home > @acoustic-content-sdk/edit-api > EVENT_EDIT_END

EVENT_EDIT_END variable

Signature:

EVENT_EDIT_END = "EVENT_EDIT_END"

Home > @acoustic-content-sdk/edit-api > EVENT_EDIT_START

EVENT_EDIT_START variable

Signature:

EVENT_EDIT_START = "EVENT_EDIT_START"

Home > @acoustic-content-sdk/edit-api > EVENT_INLINE_EDIT_END

EVENT_INLINE_EDIT_END variable

Signature:

EVENT_INLINE_EDIT_END = "EVENT_INLINE_EDIT_END"

Home > @acoustic-content-sdk/edit-api > EVENT_INLINE_EDIT_SET_SELECTED_CELL

EVENT_INLINE_EDIT_SET_SELECTED_CELL variable

Signature:

EVENT_INLINE_EDIT_SET_SELECTED_CELL = "EVENT_INLINE_EDIT_SET_SELECTED_CELL"

Home > @acoustic-content-sdk/edit-api > EVENT_INLINE_EDIT_START

EVENT_INLINE_EDIT_START variable

Signature:

EVENT_INLINE_EDIT_START = "EVENT_INLINE_EDIT_START"

Home > @acoustic-content-sdk/edit-api > INLINE_EDIT_PROVIDER_ID

INLINE_EDIT_PROVIDER_ID variable

Identifier used to identify an WchInlineEditProviderV2 instance on a context, e.g. the window

Signature:

INLINE_EDIT_PROVIDER_ID = "@acoustic-content-sdk/inline-edit-provider"

Home > @acoustic-content-sdk/edit-api > TRANSFER_FORMAT

TRANSFER_FORMAT variable

Transfer format for our custom dnd components

Signature:

TRANSFER_FORMAT = "application/x-dnd-fragment"

Home > @acoustic-content-sdk/edit-api > VERSION

VERSION variable

Version and build number of the package

Signature:

VERSION: {
    version: {
        major: string;
        minor: string;
        patch: string;
        branch: string;
    };
    build: Date;
}

Home > @acoustic-content-sdk/edit-api > WCH_ACTIVE_PAGE_MODULE

WCH_ACTIVE_PAGE_MODULE variable

Warning: This API is now obsolete.

use ACOUSTIC_ACTIVE_PAGE_MODULE instead

Signature:

WCH_ACTIVE_PAGE_MODULE = "wch-active-page"

Home > @acoustic-content-sdk/edit-api > WCH_CONFIG_MODULE

WCH_CONFIG_MODULE variable

Warning: This API is now obsolete.

use ACOUSTIC_CONFIG_MODULE instead

Signature:

WCH_CONFIG_MODULE = "wch-config"

Home > @acoustic-content-sdk/edit-api > WCH_HTTP_MODULE

WCH_HTTP_MODULE variable

Warning: This API is now obsolete.

use ACOUSTIC_HTTP_MODULE instead

Signature:

WCH_HTTP_MODULE = "wch-http"

Home > @acoustic-content-sdk/edit-api > WCH_INFO_MODULE

WCH_INFO_MODULE variable

Warning: This API is now obsolete.

use ACOUSTIC_INFO_MODULE instead

Signature:

WCH_INFO_MODULE = "wch-info"

Home > @acoustic-content-sdk/edit-api > WCH_LOGGER_MODULE

WCH_LOGGER_MODULE variable

Warning: This API is now obsolete.

use ACOUSTIC_LOGGER_MODULE instead

Signature:

WCH_LOGGER_MODULE = "wch-logger"

Home > @acoustic-content-sdk/edit-api > AccessorType

AccessorType type

The accessor string, a property path relative to the root of a content item that points to the element value to be edited. A value of null denotes the root level element.

Signature:

export declare type AccessorType = string | null;

Home > @acoustic-content-sdk/edit-api > EventTargetLike

EventTargetLike type

Signature:

export declare type EventTargetLike = Parameters<typeof fromEvent>[0];

Home > @acoustic-content-sdk/edit-api > WchInlineEditRegistration

WchInlineEditRegistration type

Warning: This API is now obsolete.

use WchInlineEditRegistrationV2 instead

Signature:

export declare type WchInlineEditRegistration = (nativeElement: any, accessor: AccessorType, onRenderingContext: Observable<RenderingContext>) => WchInlineEditRegistrationResult;

Home > @acoustic-content-sdk/edit-api > WchInlineEditRegistrationResult

WchInlineEditRegistrationResult type

Result of an inline edit registration. This is at least an event emitter but may optionally also expose the Disposable interface to allow deregistration

Signature:

export declare type WchInlineEditRegistrationResult = EventTargetLike | (EventTargetLike & Disposable);

Home > @acoustic-content-sdk/edit-api > WchInlineEditRegistrationV2

WchInlineEditRegistrationV2 type

Type definition of the register method that allows to register DOM elements with an inline edit provider.

Signature:

export declare type WchInlineEditRegistrationV2 = (nativeElement: any, accessor: AccessorType, renderingContext$: Observable<RenderingContextV2>) => WchInlineEditRegistrationResult;

Home > @acoustic-content-sdk/edit-api > WchInlineEditRequire

WchInlineEditRequire type

Interface of the require function, strongly typed

Signature:

export declare type WchInlineEditRequire = (<T extends keyof WchInlineEditRequireMap>(aModule: T) => WchInlineEditRequireMap[T]) & ((aModule: string) => PromiseLike<string>);

Home > @acoustic-content-sdk/edit-api > WchInlineEditRequireV2

WchInlineEditRequireV2 type

Interface of the require function, strongly typed

Signature:

export declare type WchInlineEditRequireV2 = (<T extends keyof WchInlineEditRequireMapV2>(aModule: T) => WchInlineEditRequireMapV2[T]) & ((aModule: string) => PromiseLike<string>);

Home > @acoustic-content-sdk/edit-api > DataTransferContentItem > accessor

DataTransferContentItem.accessor property

The accessor string

Signature:

[KEY_ACCESSOR]: AccessorType;

Home > @acoustic-content-sdk/edit-api > DataTransferContentItem > id

DataTransferContentItem.id property

ID of the content item

Signature:

[KEY_ID]: string;

Home > @acoustic-content-sdk/edit-api > Disposable > dispose

Disposable.dispose property

Signature:

dispose: () => void;

Home > @acoustic-content-sdk/edit-api > InlineEditSelectionProvider > selectedCell$

InlineEditSelectionProvider.selectedCell$ property

Captures the currently selected cell. The return value is either just an ID or ID#accessor. If a cell is deselected, the service returns i

Signature:

selectedCell$: Observable<string | undefined>;

Home > @acoustic-content-sdk/edit-api > WchEditableEvent > data

WchEditableEvent.data property

Signature:

data: any;

Home > @acoustic-content-sdk/edit-api > WchEditableEvent > target

WchEditableEvent.target property

Signature:

target: HTMLElement;

Home > @acoustic-content-sdk/edit-api > WchEditableEvent > type

WchEditableEvent.type property

Signature:

type: string;

Home > @acoustic-content-sdk/edit-api > WchConfig > apiUrl

WchConfig.apiUrl property

API URL for the non-preview host

Signature:

readonly apiUrl: URL;

Home > @acoustic-content-sdk/edit-api > WchConfig > authoringUIBaseUrl

WchConfig.authoringUIBaseUrl property

URL of the authoring host

Signature:

readonly authoringUIBaseUrl: URL;

Home > @acoustic-content-sdk/edit-api > WchConfig > deliveryUrl

WchConfig.deliveryUrl property

delivery URL for the non-preview host

Signature:

readonly deliveryUrl: URL;

Home > @acoustic-content-sdk/edit-api > WchConfig > previewApiUrl

WchConfig.previewApiUrl property

API URL for the preview host

Signature:

readonly previewApiUrl: URL;

Home > @acoustic-content-sdk/edit-api > WchConfig > previewDeliveryUrl

WchConfig.previewDeliveryUrl property

delivery URL for the preview host

Signature:

readonly previewDeliveryUrl: URL;

Home > @acoustic-content-sdk/edit-api > WchInlineEditEvent > data

WchInlineEditEvent.data property

Signature:

data: any;

Home > @acoustic-content-sdk/edit-api > WchInlineEditEvent > type

WchInlineEditEvent.type property

Signature:

type: string;

Home > @acoustic-content-sdk/edit-api > WchInlineEditProvider > register

WchInlineEditProvider.register property

Signature:

register: WchInlineEditRegistration;

Home > @acoustic-content-sdk/edit-api > WchInlineEditProviderV2 > register

WchInlineEditProviderV2.register property

The register method that allows to register DOM elements with the provider

Signature:

register: WchInlineEditRegistrationV2;

Home > @acoustic-content-sdk/edit-api > WchInlineEditRequireMapV2 > "wch-active-page"

WchInlineEditRequireMapV2."wch-active-page" property

Signature:

[ACOUSTIC_ACTIVE_PAGE_MODULE]: PromiseLike<ActivePageV2>;

Home > @acoustic-content-sdk/edit-api > WchInlineEditRequireMapV2 > "wch-config"

WchInlineEditRequireMapV2."wch-config" property

Signature:

[ACOUSTIC_CONFIG_MODULE]: PromiseLike<WchConfig>;

Home > @acoustic-content-sdk/edit-api > WchInlineEditRequireMapV2 > "wch-info"

WchInlineEditRequireMapV2."wch-info" property

Signature:

[ACOUSTIC_INFO_MODULE]: PromiseLike<UrlConfig>;

Home > @acoustic-content-sdk/edit-api > WchInlineEditRequireMapV2 > "wch-logger"

WchInlineEditRequireMapV2."wch-logger" property

Signature:

[ACOUSTIC_LOGGER_MODULE]: PromiseLike<LoggerService>;

Home > @acoustic-content-sdk/edit-api > WchInlineEditServiceV2 > fromEvent

WchInlineEditServiceV2.fromEvent() method

Attaches to an event issued by the edit library

Signature:

fromEvent<T>(aName: string): Observable<T>;

Parameters

Parameter	Type	Description
aName	`string`	name of the event

Returns:

Observable<T>

a stream of events

Home > @acoustic-content-sdk/edit-api > WchInlineEditServiceV2 > registerComponent

WchInlineEditServiceV2.registerComponent() method

Registers a particular DOM element as editable

Signature:

registerComponent(nativeElement: any, accessor: AccessorType, renderingContext$: Observable<RenderingContextV2>): Observable<EventTargetLike>;

Parameters

Parameter	Type	Description
nativeElement	`any`	the DOM element to be edited
accessor	`AccessorType`	string identifying the member in the content item record to be edited. The value of 'null' means the the content item itself will be edited.
renderingContext$	`Observable<RenderingContextV2>`	the rendering context associated with the edit operation. The same DOM element might represent multiple contexts over time

Returns:

Observable<EventTargetLike>

the observable representing the registration result. The observable exposes an event producer that a client can attach to to receive edit events. The registration will only take place when subscribing to the observable and it will end when unsubscribing.

Home > @acoustic-content-sdk/edit-api > WchInlineEditRequireMap > "wch-active-page"

WchInlineEditRequireMap."wch-active-page" property

Signature:

[ACOUSTIC_ACTIVE_PAGE_MODULE]: PromiseLike<ActivePage>;

Home > @acoustic-content-sdk/edit-api > WchInlineEditRequireMap > "wch-config"

WchInlineEditRequireMap."wch-config" property

Signature:

[ACOUSTIC_CONFIG_MODULE]: PromiseLike<WchConfig>;

Home > @acoustic-content-sdk/edit-api > WchInlineEditRequireMap > "wch-http"

WchInlineEditRequireMap."wch-http" property

Signature:

[ACOUSTIC_HTTP_MODULE]: PromiseLike<WchHttp>;

Home > @acoustic-content-sdk/edit-api > WchInlineEditRequireMap > "wch-info"

WchInlineEditRequireMap."wch-info" property

Signature:

[ACOUSTIC_INFO_MODULE]: PromiseLike<UrlConfig>;

Home > @acoustic-content-sdk/edit-api > WchInlineEditRequireMap > "wch-logger"

WchInlineEditRequireMap."wch-logger" property

Signature:

[ACOUSTIC_LOGGER_MODULE]: PromiseLike<LoggerService>;

Home > @acoustic-content-sdk/edit-api > WchInlineEditService > fromEvent

WchInlineEditService.fromEvent() method

Attaches to an event issued by the edit library

Signature:

fromEvent<T>(aName: string): Observable<T>;

Parameters

Parameter	Type	Description
aName	`string`	name of the event

Returns:

Observable<T>

a stream of events

Home > @acoustic-content-sdk/edit-api > WchInlineEditService > registerComponent

WchInlineEditService.registerComponent() method

Registers a particular DOM element as editable

Signature:

registerComponent(nativeElement: any, accessor: AccessorType, onRenderingContext: Observable<RenderingContext>): Observable<EventTargetLike>;

Parameters

Parameter	Type	Description
nativeElement	`any`	the DOM element to be edited
accessor	`AccessorType`	string identifying the member in the content item record to be edited. The value of 'null' means the the content item itself will be edited.
onRenderingContext	`Observable<RenderingContext>`	the rendering context associated with the edit operation. The same DOM element might represent multiple contexts over time

Returns:

Observable<EventTargetLike>