diff --git a/packages/admin/admin-rte/src/core/translation/htmlToState.spec.ts b/packages/admin/admin-rte/src/core/translation/htmlToState.spec.ts index 299792cdba..094f5f15e3 100644 --- a/packages/admin/admin-rte/src/core/translation/htmlToState.spec.ts +++ b/packages/admin/admin-rte/src/core/translation/htmlToState.spec.ts @@ -4,12 +4,13 @@ import { convertFromRaw, EditorState, RawDraftContentState } from "draft-js"; -import { IRteOptions } from "../Rte"; +import { defaultOptions, IRteOptions } from "../Rte"; import { htmlToState } from "./htmlToState"; import { stateToHtml } from "./stateToHtml"; describe("htmlToState", () => { - const options = { + const options: IRteOptions = { + ...defaultOptions, supports: [ "bold", "italic", @@ -30,161 +31,8 @@ describe("htmlToState", () => { "non-breaking-space", "soft-hyphen", ], - listLevelMax: 4, - customToolbarButtons: [], - draftJsProps: { spellCheck: true }, - standardBlockType: "unstyled", - blocktypeMap: { - unstyled: { - label: { - type: {}, - key: null, - ref: null, - props: { id: "comet.rte.controls.blockType.default", defaultMessage: "Default" }, - _owner: null, - _store: {}, - }, - renderConfig: { element: { propTypes: {}, options: { name: "CometAdminRteBlockElement" } }, aliasedElements: ["p"] }, - }, - "header-one": { - supportedBy: "header-one", - label: { - type: {}, - key: null, - ref: null, - props: { id: "comet.rte.controls.blockType.heading", defaultMessage: "Heading {level}", values: { level: 1 } }, - _owner: null, - _store: {}, - }, - group: "dropdown", - renderConfig: { aliasedElements: ["h1"] }, - }, - "header-two": { - supportedBy: "header-two", - label: { - type: {}, - key: null, - ref: null, - props: { id: "comet.rte.controls.blockType.heading", defaultMessage: "Heading {level}", values: { level: 2 } }, - _owner: null, - _store: {}, - }, - group: "dropdown", - renderConfig: { aliasedElements: ["h2"] }, - }, - "header-three": { - supportedBy: "header-three", - label: { - type: {}, - key: null, - ref: null, - props: { id: "comet.rte.controls.blockType.heading", defaultMessage: "Heading {level}", values: { level: 3 } }, - _owner: null, - _store: {}, - }, - group: "dropdown", - renderConfig: { aliasedElements: ["h3"] }, - }, - "header-four": { - supportedBy: "header-four", - label: { - type: {}, - key: null, - ref: null, - props: { id: "comet.rte.controls.blockType.heading", defaultMessage: "Heading {level}", values: { level: 4 } }, - _owner: null, - _store: {}, - }, - group: "dropdown", - renderConfig: { aliasedElements: ["h4"] }, - }, - "header-five": { - supportedBy: "header-five", - label: { - type: {}, - key: null, - ref: null, - props: { id: "comet.rte.controls.blockType.heading", defaultMessage: "Heading {level}", values: { level: 5 } }, - _owner: null, - _store: {}, - }, - group: "dropdown", - renderConfig: { aliasedElements: ["h5"] }, - }, - "header-six": { - supportedBy: "header-six", - label: { - type: {}, - key: null, - ref: null, - props: { id: "comet.rte.controls.blockType.heading", defaultMessage: "Heading {level}", values: { level: 6 } }, - _owner: null, - _store: {}, - }, - group: "dropdown", - renderConfig: { aliasedElements: ["h6"] }, - }, - blockquote: { - supportedBy: "blockquote", - label: { - type: {}, - key: null, - ref: null, - props: { id: "comet.rte.controls.blockType.blockquote", defaultMessage: "Blockquote" }, - _owner: null, - _store: {}, - }, - renderConfig: { aliasedElements: ["blockquote"] }, - }, - "unordered-list-item": { - supportedBy: "unordered-list", - group: "button", - label: { - type: {}, - key: null, - ref: null, - props: { id: "comet.rte.controls.blockType.unorderedList", defaultMessage: "Bulletpoints" }, - _owner: null, - _store: {}, - }, - renderConfig: { - wrapper: { - type: { propTypes: {}, options: { name: "CometAdminRteBlockElement" } }, - key: null, - ref: null, - props: { type: "unordered-list", component: "ul" }, - _owner: null, - _store: {}, - }, - element: "li", - }, - }, - "ordered-list-item": { - supportedBy: "ordered-list", - group: "button", - label: { - type: {}, - key: null, - ref: null, - props: { id: "comet.rte.controls.blockType.orderedList", defaultMessage: "Numbering" }, - _owner: null, - _store: {}, - }, - renderConfig: { - wrapper: { - type: { propTypes: {}, options: { name: "CometAdminRteBlockElement" } }, - key: null, - ref: null, - props: { type: "ordered-list", component: "ol" }, - _owner: null, - _store: {}, - }, - element: "li", - }, - }, - }, - customInlineStyles: { HIGHLIGHT: { label: "Highlight!", icon: { type: {}, compare: null }, style: { backgroundColor: "yellow" } } }, - } as unknown as IRteOptions; + customInlineStyles: { HIGHLIGHT: { label: "Highlight!", style: { backgroundColor: "yellow" } } }, + }; it("should convert html to state to html with the html staying the same", () => { const blocks = [ diff --git a/packages/admin/admin-rte/src/core/translation/stateToHtml.spec.ts b/packages/admin/admin-rte/src/core/translation/stateToHtml.spec.ts index 160dbfb5ea..33d52a1216 100644 --- a/packages/admin/admin-rte/src/core/translation/stateToHtml.spec.ts +++ b/packages/admin/admin-rte/src/core/translation/stateToHtml.spec.ts @@ -1,10 +1,11 @@ import { convertFromRaw, EditorState, RawDraftContentState } from "draft-js"; -import { IRteOptions } from "../Rte"; +import { defaultOptions, IRteOptions } from "../Rte"; import { stateToHtml } from "./stateToHtml"; describe("stateToHtml", () => { - const options = { + const options: IRteOptions = { + ...defaultOptions, supports: [ "bold", "italic", @@ -25,161 +26,8 @@ describe("stateToHtml", () => { "non-breaking-space", "soft-hyphen", ], - listLevelMax: 4, - customToolbarButtons: [], - draftJsProps: { spellCheck: true }, - standardBlockType: "unstyled", - blocktypeMap: { - unstyled: { - label: { - type: {}, - key: null, - ref: null, - props: { id: "comet.rte.controls.blockType.default", defaultMessage: "Default" }, - _owner: null, - _store: {}, - }, - renderConfig: { element: { propTypes: {}, options: { name: "CometAdminRteBlockElement" } }, aliasedElements: ["p"] }, - }, - "header-one": { - supportedBy: "header-one", - label: { - type: {}, - key: null, - ref: null, - props: { id: "comet.rte.controls.blockType.heading", defaultMessage: "Heading {level}", values: { level: 1 } }, - _owner: null, - _store: {}, - }, - group: "dropdown", - renderConfig: { aliasedElements: ["h1"] }, - }, - "header-two": { - supportedBy: "header-two", - label: { - type: {}, - key: null, - ref: null, - props: { id: "comet.rte.controls.blockType.heading", defaultMessage: "Heading {level}", values: { level: 2 } }, - _owner: null, - _store: {}, - }, - group: "dropdown", - renderConfig: { aliasedElements: ["h2"] }, - }, - "header-three": { - supportedBy: "header-three", - label: { - type: {}, - key: null, - ref: null, - props: { id: "comet.rte.controls.blockType.heading", defaultMessage: "Heading {level}", values: { level: 3 } }, - _owner: null, - _store: {}, - }, - group: "dropdown", - renderConfig: { aliasedElements: ["h3"] }, - }, - "header-four": { - supportedBy: "header-four", - label: { - type: {}, - key: null, - ref: null, - props: { id: "comet.rte.controls.blockType.heading", defaultMessage: "Heading {level}", values: { level: 4 } }, - _owner: null, - _store: {}, - }, - group: "dropdown", - renderConfig: { aliasedElements: ["h4"] }, - }, - "header-five": { - supportedBy: "header-five", - label: { - type: {}, - key: null, - ref: null, - props: { id: "comet.rte.controls.blockType.heading", defaultMessage: "Heading {level}", values: { level: 5 } }, - _owner: null, - _store: {}, - }, - group: "dropdown", - renderConfig: { aliasedElements: ["h5"] }, - }, - "header-six": { - supportedBy: "header-six", - label: { - type: {}, - key: null, - ref: null, - props: { id: "comet.rte.controls.blockType.heading", defaultMessage: "Heading {level}", values: { level: 6 } }, - _owner: null, - _store: {}, - }, - group: "dropdown", - renderConfig: { aliasedElements: ["h6"] }, - }, - blockquote: { - supportedBy: "blockquote", - label: { - type: {}, - key: null, - ref: null, - props: { id: "comet.rte.controls.blockType.blockquote", defaultMessage: "Blockquote" }, - _owner: null, - _store: {}, - }, - renderConfig: { aliasedElements: ["blockquote"] }, - }, - "unordered-list-item": { - supportedBy: "unordered-list", - group: "button", - label: { - type: {}, - key: null, - ref: null, - props: { id: "comet.rte.controls.blockType.unorderedList", defaultMessage: "Bulletpoints" }, - _owner: null, - _store: {}, - }, - renderConfig: { - wrapper: { - type: { propTypes: {}, options: { name: "CometAdminRteBlockElement" } }, - key: null, - ref: null, - props: { type: "unordered-list", component: "ul" }, - _owner: null, - _store: {}, - }, - element: "li", - }, - }, - "ordered-list-item": { - supportedBy: "ordered-list", - group: "button", - label: { - type: {}, - key: null, - ref: null, - props: { id: "comet.rte.controls.blockType.orderedList", defaultMessage: "Numbering" }, - _owner: null, - _store: {}, - }, - renderConfig: { - wrapper: { - type: { propTypes: {}, options: { name: "CometAdminRteBlockElement" } }, - key: null, - ref: null, - props: { type: "ordered-list", component: "ol" }, - _owner: null, - _store: {}, - }, - element: "li", - }, - }, - }, - customInlineStyles: { HIGHLIGHT: { label: "Highlight!", icon: { type: {}, compare: null }, style: { backgroundColor: "yellow" } } }, - } as unknown as IRteOptions; + customInlineStyles: { HIGHLIGHT: { label: "Highlight!", style: { backgroundColor: "yellow" } } }, + }; it("should convert the rte editor state with styling into html while keeping the format via tags - formats part 1", () => { const blocks = [