diff --git a/packages/roosterjs-content-model-core/lib/command/createModelFromHtml/createModelFromHtml.ts b/packages/roosterjs-content-model-core/lib/command/createModelFromHtml/createModelFromHtml.ts index 1505427ae3c..714cad17fb6 100644 --- a/packages/roosterjs-content-model-core/lib/command/createModelFromHtml/createModelFromHtml.ts +++ b/packages/roosterjs-content-model-core/lib/command/createModelFromHtml/createModelFromHtml.ts @@ -1,7 +1,7 @@ import { convertInlineCss, retrieveCssRules } from './convertInlineCss'; +import { createDOMCreator } from '../../utils/domCreator'; import { createDomToModelContextForSanitizing } from './createDomToModelContextForSanitizing'; import { createEmptyModel, domToContentModel, parseFormat } from 'roosterjs-content-model-dom'; -import { domCreator } from '../../utils/domCreator'; import type { ContentModelDocument, ContentModelSegmentFormat, @@ -22,7 +22,7 @@ export function createModelFromHtml( trustedHTMLHandler?: TrustedHTMLHandler, defaultSegmentFormat?: ContentModelSegmentFormat ): ContentModelDocument { - const doc = html ? domCreator(trustedHTMLHandler).htmlToDOM(html) : null; + const doc = html ? createDOMCreator(trustedHTMLHandler).htmlToDOM(html) : null; if (doc?.body) { const context = createDomToModelContextForSanitizing( diff --git a/packages/roosterjs-content-model-core/lib/editor/core/createEditorCore.ts b/packages/roosterjs-content-model-core/lib/editor/core/createEditorCore.ts index daabda5152d..73e33595118 100644 --- a/packages/roosterjs-content-model-core/lib/editor/core/createEditorCore.ts +++ b/packages/roosterjs-content-model-core/lib/editor/core/createEditorCore.ts @@ -1,9 +1,9 @@ import { coreApiMap } from '../../coreApi/coreApiMap'; import { createDarkColorHandler } from './DarkColorHandlerImpl'; +import { createDOMCreator, createTrustedHTMLHandler } from '../../utils/domCreator'; import { createDOMHelper } from './DOMHelperImpl'; import { createDomToModelSettings, createModelToDomSettings } from './createEditorDefaultSettings'; import { createEditorCorePlugins } from '../../corePlugin/createEditorCorePlugins'; -import { defaultTrustHtmlHandler, domCreator, isDOMCreator } from '../../utils/domCreator'; import type { EditorEnvironment, PluginState, @@ -19,6 +19,9 @@ import type { */ export function createEditorCore(contentDiv: HTMLDivElement, options: EditorOptions): EditorCore { const corePlugins = createEditorCorePlugins(options, contentDiv); + const domCreator = createDOMCreator(options.trustedHTMLHandler); + const trustedHTMLHandler = createTrustedHTMLHandler(domCreator); + return { physicalRoot: contentDiv, logicalRoot: contentDiv, @@ -43,11 +46,8 @@ export function createEditorCore(contentDiv: HTMLDivElement, options: EditorOpti options.knownColors, options.generateColorKey ), - trustedHTMLHandler: - options.trustedHTMLHandler && !isDOMCreator(options.trustedHTMLHandler) - ? options.trustedHTMLHandler - : defaultTrustHtmlHandler, - domCreator: domCreator(options.trustedHTMLHandler), + trustedHTMLHandler: trustedHTMLHandler, + domCreator: domCreator, domHelper: createDOMHelper(contentDiv), ...getPluginState(corePlugins), disposeErrorHandler: options.disposeErrorHandler, diff --git a/packages/roosterjs-content-model-core/lib/utils/domCreator.ts b/packages/roosterjs-content-model-core/lib/utils/domCreator.ts index a45f509e027..d9432630d52 100644 --- a/packages/roosterjs-content-model-core/lib/utils/domCreator.ts +++ b/packages/roosterjs-content-model-core/lib/utils/domCreator.ts @@ -7,7 +7,14 @@ import type { /** * @internal */ -export function domCreator(trustedHTMLHandler?: TrustedHTMLHandler): DOMCreator { +export const createTrustedHTMLHandler = (domCreator: DOMCreator): LegacyTrustedHTMLHandler => { + return (html: string) => domCreator.htmlToDOM(html).body.innerHTML; +}; + +/** + * @internal + */ +export function createDOMCreator(trustedHTMLHandler?: TrustedHTMLHandler): DOMCreator { return trustedHTMLHandler && isDOMCreator(trustedHTMLHandler) ? trustedHTMLHandler : trustedHTMLHandlerToDOMCreator(trustedHTMLHandler as LegacyTrustedHTMLHandler); diff --git a/packages/roosterjs-content-model-core/test/editor/core/createEditorCoreTest.ts b/packages/roosterjs-content-model-core/test/editor/core/createEditorCoreTest.ts index 3731f579c9f..ce01f1e758c 100644 --- a/packages/roosterjs-content-model-core/test/editor/core/createEditorCoreTest.ts +++ b/packages/roosterjs-content-model-core/test/editor/core/createEditorCoreTest.ts @@ -4,8 +4,8 @@ import * as DarkColorHandlerImpl from '../../../lib/editor/core/DarkColorHandler import * as domCreator from '../../../lib/utils/domCreator'; import * as DOMHelperImpl from '../../../lib/editor/core/DOMHelperImpl'; import { coreApiMap } from '../../../lib/coreApi/coreApiMap'; -import { EditorCore, EditorOptions } from 'roosterjs-content-model-types'; import { createEditorCore, getDarkColorFallback } from '../../../lib/editor/core/createEditorCore'; +import { DOMCreator, EditorCore, EditorOptions } from 'roosterjs-content-model-types'; describe('createEditorCore', () => { function createMockedPlugin(stateName: string): any { @@ -38,7 +38,10 @@ describe('createEditorCore', () => { const mockedDomToModelSettings = 'DOMTOMODEL' as any; const mockedModelToDomSettings = 'MODELTODOM' as any; const mockedDOMHelper = 'DOMHELPER' as any; - const mockedHtmlToDOM = 'HTMLTODOM' as any; + const mockedDOMCreator: DOMCreator = { + htmlToDOM: mockedDOMHelper, + }; + const mockedTrustHtmlHandler = 'TRUSTED' as any; beforeEach(() => { spyOn(createEditorCorePlugins, 'createEditorCorePlugins').and.returnValue(mockedPlugins); @@ -52,7 +55,8 @@ describe('createEditorCore', () => { mockedModelToDomSettings ); spyOn(DOMHelperImpl, 'createDOMHelper').and.returnValue(mockedDOMHelper); - spyOn(domCreator, 'domCreator').and.returnValue(mockedHtmlToDOM); + spyOn(domCreator, 'createDOMCreator').and.returnValue(mockedDOMCreator); + spyOn(domCreator, 'createTrustedHTMLHandler').and.returnValue(mockedTrustHtmlHandler); }); function runTest( @@ -87,8 +91,8 @@ describe('createEditorCore', () => { modelToDomSettings: mockedModelToDomSettings, }, darkColorHandler: mockedDarkColorHandler, - trustedHTMLHandler: domCreator.defaultTrustHtmlHandler, - domCreator: mockedHtmlToDOM, + trustedHTMLHandler: mockedTrustHtmlHandler, + domCreator: mockedDOMCreator, cache: 'cache' as any, format: 'format' as any, copyPaste: 'copyPaste' as any, @@ -146,7 +150,7 @@ describe('createEditorCore', () => { const mockedPlugin1 = 'P1' as any; const mockedPlugin2 = 'P2' as any; const mockedGetDarkColor = 'DARK' as any; - const mockedTrustHtmlHandler = 'TRUST' as any; + const mockedTrustHtmlHandler = 'OPTIONAL TRUSTED' as any; const mockedDisposeErrorHandler = 'DISPOSE' as any; const mockedGenerateColorKey = 'KEY' as any; const mockedKnownColors = 'COLORS' as any; @@ -164,6 +168,8 @@ describe('createEditorCore', () => { onFixUpModel: mockedOnFixUpModel, } as any; + spyOn(domCreator, 'createTrustedHTMLHandler').and.returnValue(mockedTrustHtmlHandler); + runTest(mockedDiv, mockedOptions, { physicalRoot: mockedDiv, logicalRoot: mockedDiv, diff --git a/packages/roosterjs-content-model-core/test/utils/domCreatorTest.ts b/packages/roosterjs-content-model-core/test/utils/domCreatorTest.ts index c3393bc4783..48d35e60e84 100644 --- a/packages/roosterjs-content-model-core/test/utils/domCreatorTest.ts +++ b/packages/roosterjs-content-model-core/test/utils/domCreatorTest.ts @@ -1,4 +1,4 @@ -import { domCreator, isDOMCreator } from '../../lib/utils/domCreator'; +import { createDOMCreator, isDOMCreator } from '../../lib/utils/domCreator'; describe('domCreator', () => { it('isDOMCreator - True', () => { @@ -13,26 +13,26 @@ describe('domCreator', () => { expect(isDOMCreator(trustedHTMLHandler)).toBe(false); }); - it('domCreator - isDOMCreator', () => { + it('createDOMCreator - isDOMCreator', () => { const trustedHTMLHandler = { htmlToDOM: (html: string) => new DOMParser().parseFromString(html, 'text/html'), }; - const result = domCreator(trustedHTMLHandler); + const result = createDOMCreator(trustedHTMLHandler); expect(result).toEqual(trustedHTMLHandler); }); - it('domCreator - undefined', () => { + it('createDOMCreator - undefined', () => { const doc = document.implementation.createHTMLDocument(); doc.body.appendChild(document.createTextNode('test')); - const result = domCreator(undefined).htmlToDOM('test'); + const result = createDOMCreator(undefined).htmlToDOM('test'); expect(result.lastChild).toEqual(doc.lastChild); }); - it('domCreator - trustedHTML', () => { + it('createDOMCreator - trustedHTML', () => { const doc = document.implementation.createHTMLDocument(); doc.body.appendChild(document.createTextNode('test trusted')); const trustedHTMLHandler = (html: string) => html + ' trusted'; - const result = domCreator(trustedHTMLHandler).htmlToDOM('test'); + const result = createDOMCreator(trustedHTMLHandler).htmlToDOM('test'); expect(result.lastChild).toEqual(doc.lastChild); }); }); diff --git a/packages/roosterjs-content-model-types/lib/parameter/TrustedHTMLHandler.ts b/packages/roosterjs-content-model-types/lib/parameter/TrustedHTMLHandler.ts index 80db39130a3..16c678ee01e 100644 --- a/packages/roosterjs-content-model-types/lib/parameter/TrustedHTMLHandler.ts +++ b/packages/roosterjs-content-model-types/lib/parameter/TrustedHTMLHandler.ts @@ -1,4 +1,5 @@ /** + * @deprecated Use DOMCreator instead * A handler type to convert HTML string to a trust HTML string */ export type LegacyTrustedHTMLHandler = (html: string) => string;