@acoustic-content-sdk/edit-api
TypeScript icon, indicating that this package has built-in type declarations

9.0.10076 • Public • Published

npm

Table of Contents

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>

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.

Dependents (18)

Package Sidebar

Install

npm i @acoustic-content-sdk/edit-api

Weekly Downloads

8

Version

9.0.10076

License

MIT

Unpacked Size

209 kB

Total Files

102

Last publish

Collaborators

  • marcin-pasiewicz
  • nikodem.graczewski.acoustic
  • pawel.galias-ac
  • orenaksakal
  • marcin.konopka-ac