How to use roosterjs-html-sanitizer - 7 common examples

// the list exist before the itertor element. Then insert the list element before
            // iterator
            listContainerParent.insertBefore(convertedListElement, currentListContainer);
        } else {
            // If the iterator doesn't exist, it means that the list element is the last element
            // of the parent, so simply append list element into the parent.
            listContainerParent.appendChild(convertedListElement);
        }

        // After previous code finish executing,
        listContainerElement = wrapperElement.getElementsByClassName(LIST_CONTAINER_ELEMENT_CLASS_NAME)[0];
    }

    doc.body.innerHTML = wrapperElement.innerHTML

    let sanitizer = new HtmlSanitizer({
        elementCallbacks: {
            ['O:P']: () => false,
        },
        additionalAllowAttributes: ['class'],
    });
    sanitizer.sanitize(doc.body);
}

export default function convertPastedContentFromWord(doc: HTMLDocument) {
    let sanitizer = new HtmlSanitizer({
        elementCallbacks: {
            ['O:P']: element => element.innerHTML == ' ', // Preserve  when its innerHTML is " " to avoid dropping an empty line
        },
        additionalAllowAttributes: ['class'],
    });
    sanitizer.sanitize(doc.body);

    let wordConverter = createWordConverter();

    // First find all the nodes that we need to check for list item information
    // This call will return all the p and header elements under the root node.. These are the elements that
    // Word uses a list items, so we'll only process them and avoid walking the whole tree.
    let elements = doc.querySelectorAll('p');
    if (elements.length > 0) {
        wordConverter.wordConverterArgs = createWordConverterArguments(elements);
        if (processNodesDiscovery(wordConverter)) {

export default function fragmentHandler(doc: HTMLDocument, source: string) {
    let [html, before] = splitWithFragment(source);
    let firstNode = doc && doc.body && (doc.querySelector('html') as HTMLElement);
    if (getTagOfNode(firstNode) == 'HTML') {
        if (firstNode.getAttribute(WORD_ATTRIBUTE_NAME) == WORD_ATTRIBUTE_VALUE) {
            // Handle HTML copied from MS Word
            doc.body.innerHTML = html;
            convertPastedContentFromWord(doc);
        } else if (isWAC(firstNode)) {
            // The WAC converter only supports word for now.
            convertPastedContentFromWac(doc);
        } else if (firstNode.getAttribute(EXCEL_ATTRIBUTE_NAME) == EXCEL_ATTRIBUTE_VALUE) {
            // Handle HTML copied from MS Excel
            if (html.match(LAST_TD_END_REGEX)) {
                let trMatch = before.match(LAST_TR_REGEX);
                let tr = trMatch ? trMatch[0] : '';
                html = tr + html + '';
            }

private getEditorOptions(): EditorOptions {
        let { plugins, viewState, undo, hyperlinkToolTipCallback, defaultFormat } = this.props;
        let allPlugins: EditorPlugin[] = [new ContentEdit(), new HyperLink(hyperlinkToolTipCallback), new Paste(true /*useDirectPaste*/)];

        if (plugins) {
            allPlugins = allPlugins.concat(plugins);
        }

        let initialContent = HtmlSanitizer.convertInlineCss(viewState.content);
        let options: EditorOptions = {
            plugins: allPlugins,
            defaultFormat: defaultFormat,
            undo: undo,
            initialContent: initialContent
        };

        return options;
    }

export default function convertPastedContentFromExcel(doc: HTMLDocument) {
    let sanitizer = new HtmlSanitizer({
        styleCallbacks: {
            border: (value, element) => value != 'none' || element.style.border != 'none',
        },
        additionalAllowAttributes: ['class'],
    });
    sanitizer.sanitize(doc.body);

    let styleNode = doc.createElement('style');
    doc.body.appendChild(styleNode);
    styleNode.innerHTML = 'td {border: solid 1px #d4d4d4}';
    sanitizer.convertGlobalCssToInlineCss(doc);
}

private sanitize = () => {
        this.result.current.value = HtmlSanitizer.sanitizeHtml(this.source.current.value);
    };
}

export default function sanitizeHtml(
    html: string,
    additionalStyleNodes?: HTMLStyleElement[],
    convertInlineCssOnly?: boolean,
    propertyCallbacks?: SanitizeHtmlPropertyCallback,
    preserveFragmentOnly?: boolean,
    currentStyle?: StyleMap
): string {
    return HtmlSanitizer.sanitizeHtml(html, {
        additionalGlobalStyleNodes: additionalStyleNodes,
        convertCssOnly: convertInlineCssOnly,
        attributeCallbacks: propertyCallbacks,
        currentElementOrStyle: currentStyle,
        preserveFragmentOnly,
    });
}