@halloverden/ngx-directus-content-handler

This package simplifies handling the content delivered from the Flexible Editor Extension for Directus. It supports some of the most common content and mark types, and allows you to provide your own implementations of both content handlers and mark handlers for any content type you like.

The flexible editor content service

This service is used when handling content from the Flexible Editor Extension. It has the following public methods:

| Signature | Description | |---------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | static prioritySorterFunction(a: ContentHandlerInterface | MarkHandlerInterface, b: ContentHandlerInterface | MarkHandlerInterface): 0 | 1 | -1 | An array sorter function used for sorting by the priority property. | | static getTypeName(content: any): string | Returns the type name of any given content. | | getSupportedContentHandler(type: string, contentHandlers: ContentHandlerInterface[]): ContentHandlerInterface | Returns the first content handler, by priority, that supports the given type. Throws an error if no content handler was found for the given type. | | getSupportedMarkHandler(type: string, markHandlers: MarkHandlerInterface[]): MarkHandlerInterface | Returns the first mark handler, by priority, that supports the given type. Throws an error if no mark handler was found for the given type. | | static getCommentPlaceholder(comment: string, sanitizer: DomSanitizer): DynamicContentInterface | Returns an instance of DynamicContentInterface with a safeHtml comment instance. Used internally when handlers are missing. | | addContentHandler(contentHandler: ContentHandlerInterface): void | Adds a content handler to the service. Use this if you want to add a content handler without providing it through the config. | | removeContentHandler(contentHandler: ContentHandlerInterface): void | Removes a content handler from the service. | | getContentHandlers(): ContentHandlerInterface[] | Returns all content handlers. | | addMarkHandler(markHandler: MarkHandlerInterface): void | Adds a mark handler to the service. Use this if you want to add a mark handler without providing it through the config. | | removeMarkHandler(markHandler: MarkHandlerInterface): void | Removes a mark handler from the service. | | getMarkHandlers(): MarkHandlerInterface[] | Returns all mark handlers. | | handleFlexibleEditorDoc(doc: any, editorNodes?: EditorNode[]): DynamicContentInterface[] | Takes the doc and editor nodes from the Flexible Editor, and returns an array of DynamicContentInterface. This array can be provided directly to the dynamic container component. |

The dynamic container component

This component has a single input, content, that is an array of DynamicContentInterface. The interface looks like this:

interface DynamicContentInterface {
  component?: {
    type: Type<any>,
    inputs?: { [key: string]: any }
  };
  htmlElement?: HTMLElement;
  safeHtml?: SafeHtml;
  text?: string;
}

The component will output to the DOM, an instance of whatever component or SafeHtml the interface contains. It can even handle instances of the interface that contain a component reference to itself:

const content = {
  component: {
    type: DynamicContainerComponent,
    inputs: {
      content: somethingSomethingContent,
    },
  },
};

<hv-ngx-directus-dynamic-content-container [content]="content" />

Content Handlers

Provided by using the NGX_DIRECTUS_CONTENT_HANDLER_CONTENT_HANDLERS_INJECTION_TOKEN injection token:

export function provideContentHandlers(): EnvironmentProviders {
  return makeEnvironmentProviders([
    {
      provide: NGX_DIRECTUS_CONTENT_HANDLER_CONTENT_HANDLERS_INJECTION_TOKEN,
      multi: true,
      useClass: ImageWithAltTextContentHandler
    },
    {
      provide: NGX_DIRECTUS_CONTENT_HANDLER_CONTENT_HANDLERS_INJECTION_TOKEN,
      multi: true,
      useClass: SalaryTableReferenceContentHandler
    }
  ]);
}

If you've got a lot of custom content types, you can provide a single content handler that has support for all your custom content types, that delegates to whatever classes or functions you might want to use.

Mark Handlers

Provided by using the NGX_DIRECTUS_CONTENT_HANDLER_MARK_HANDLERS_INJECTION_TOKEN injection token:

export function provideContentHandlers(): EnvironmentProviders {
  return makeEnvironmentProviders([
    {
      provide: NGX_DIRECTUS_CONTENT_HANDLER_MARK_HANDLERS_INJECTION_TOKEN,
      multi: true,
      useClass: MyMarkHandler
    },
  ]);
}

If you've got a lot of custom mark types, you can provide a single mark handler that has support for all your custom mark types, that delegates to whatever classes or functions you might want to use.