stripes-template-editor

Copyright (C) 2017-2020 The Open Library Foundation

This software is distributed under the terms of the Apache License, Version 2.0. See the file "LICENSE" for more information.

Introduction

This is a NPM module to aid with embedding the Quill editor in Stripes applications for building templates with token substitution.

Value Sanitization

In any case where a user-created HTML string will be rendered directly to the UI, it should be sanitized to eliminate any issues with malformed tags/attributes. This library exports a sanitize function that should be used within the ui-module prior to passing the value to the form. The function accepts the value to be rendered and an optional overriding configuration for the sanitization library. It will return the sanitized string if any removals were necessary, otherwise it will return the original parameter value.

import { sanitize,  TemplateEditor } from '@folio/stripes-template-editor'


const value = persistedValue // value obtained from backend...

const appliedValue = sanitize(value);

<Form initialValues={{ template: appliedValue }}>
  <Field component="TemplateEditor">
</Form>

If the sanitization needs to be adjusted for specific use-cases, it can be imported and extended...

import { SANITIZE_CONFIG } from '@folio/stripes-template-editor`;

const localConfig = { ...SANITIZE_CONFIG, ...MY_CONFIG, };

const appliedValue = sanitize(value, localConfig);

For the configuration possibilities, reference the DOMPurify configuration details if needed!

Attribution

@skomorokh extracted this from ui-circulation in this commit. The code was largely written by @maximdidenkoepam and @skomorokh probably should have made more of an effort to bring the commit history along. However, you can view it at the originating module.

Additional information

Other modules.

Other FOLIO Developer documentation is at dev.folio.org