diff --git a/examples/05-interoperability/05-converting-blocks-to-pdf/src/App.tsx b/examples/05-interoperability/05-converting-blocks-to-pdf/src/App.tsx index 49da735428..d910886113 100644 --- a/examples/05-interoperability/05-converting-blocks-to-pdf/src/App.tsx +++ b/examples/05-interoperability/05-converting-blocks-to-pdf/src/App.tsx @@ -98,6 +98,7 @@ export default function App() { backgroundColor: "red", }, }, + { type: "divider" }, { type: "paragraph", content: [ diff --git a/examples/05-interoperability/06-converting-blocks-to-docx/src/App.tsx b/examples/05-interoperability/06-converting-blocks-to-docx/src/App.tsx index 6b1fa6f42c..9c91a99aff 100644 --- a/examples/05-interoperability/06-converting-blocks-to-docx/src/App.tsx +++ b/examples/05-interoperability/06-converting-blocks-to-docx/src/App.tsx @@ -92,6 +92,7 @@ export default function App() { backgroundColor: "red", }, }, + { type: "divider" }, { type: "paragraph", content: [ diff --git a/examples/05-interoperability/07-converting-blocks-to-odt/src/App.tsx b/examples/05-interoperability/07-converting-blocks-to-odt/src/App.tsx index 4f0eb846a4..9ece22d905 100644 --- a/examples/05-interoperability/07-converting-blocks-to-odt/src/App.tsx +++ b/examples/05-interoperability/07-converting-blocks-to-odt/src/App.tsx @@ -92,6 +92,7 @@ export default function App() { backgroundColor: "red", }, }, + { type: "divider" }, { type: "paragraph", content: [ diff --git a/examples/05-interoperability/08-converting-blocks-to-react-email/src/App.tsx b/examples/05-interoperability/08-converting-blocks-to-react-email/src/App.tsx index ba2fec5510..9b46d8e927 100644 --- a/examples/05-interoperability/08-converting-blocks-to-react-email/src/App.tsx +++ b/examples/05-interoperability/08-converting-blocks-to-react-email/src/App.tsx @@ -88,6 +88,7 @@ export default function App() { backgroundColor: "red", }, }, + { type: "divider" }, { type: "paragraph", content: [ diff --git a/packages/core/src/blocks/Divider/block.ts b/packages/core/src/blocks/Divider/block.ts new file mode 100644 index 0000000000..3de2211d3f --- /dev/null +++ b/packages/core/src/blocks/Divider/block.ts @@ -0,0 +1,49 @@ +import { createBlockNoteExtension } from "../../editor/BlockNoteExtension.js"; +import { createBlockConfig, createBlockSpec } from "../../schema/index.js"; + +export type DividerBlockConfig = ReturnType; + +export const createDividerBlockConfig = createBlockConfig( + () => + ({ + type: "divider" as const, + propSchema: {}, + content: "none", + }) as const, +); + +export const createDividerBlockSpec = createBlockSpec( + createDividerBlockConfig, + { + meta: { + isolating: false, + }, + parse(element) { + if (element.tagName === "HR") { + return {}; + } + + return undefined; + }, + render() { + const dom = document.createElement("hr"); + + return { + dom, + }; + }, + }, + [ + createBlockNoteExtension({ + key: "divider-block-shortcuts", + inputRules: [ + { + find: new RegExp(`^---$`), + replace() { + return { type: "divider", props: {}, content: [] }; + }, + }, + ], + }), + ], +); diff --git a/packages/core/src/blocks/defaultBlocks.ts b/packages/core/src/blocks/defaultBlocks.ts index a2d01b92df..459b987f00 100644 --- a/packages/core/src/blocks/defaultBlocks.ts +++ b/packages/core/src/blocks/defaultBlocks.ts @@ -3,11 +3,26 @@ import Code from "@tiptap/extension-code"; import Italic from "@tiptap/extension-italic"; import Strike from "@tiptap/extension-strike"; import Underline from "@tiptap/extension-underline"; +import { COLORS_DEFAULT } from "../editor/defaultColors.js"; +import { + BlockNoDefaults, + BlockSchema, + InlineContentSchema, + InlineContentSpecs, + PartialBlockNoDefaults, + StyleSchema, + StyleSpecs, + createStyleSpec, + createStyleSpecFromTipTapMark, + getInlineContentSchemaFromSpecs, + getStyleSchemaFromSpecs, +} from "../schema/index.js"; import { createAudioBlockSpec, createBulletListItemBlockSpec, createCheckListItemBlockSpec, createCodeBlockSpec, + createDividerBlockSpec, createFileBlockSpec, createHeadingBlockSpec, createImageBlockSpec, @@ -18,27 +33,14 @@ import { createVideoBlockSpec, defaultProps, } from "./index.js"; -import { - BlockNoDefaults, - BlockSchema, - InlineContentSchema, - InlineContentSpecs, - PartialBlockNoDefaults, - StyleSchema, - StyleSpecs, - createStyleSpec, - createStyleSpecFromTipTapMark, - getInlineContentSchemaFromSpecs, - getStyleSchemaFromSpecs, -} from "../schema/index.js"; import { createTableBlockSpec } from "./Table/block.js"; -import { COLORS_DEFAULT } from "../editor/defaultColors.js"; export const defaultBlockSpecs = { audio: createAudioBlockSpec(), bulletListItem: createBulletListItemBlockSpec(), checkListItem: createCheckListItemBlockSpec(), codeBlock: createCodeBlockSpec(), + divider: createDividerBlockSpec(), file: createFileBlockSpec(), heading: createHeadingBlockSpec(), image: createImageBlockSpec(), diff --git a/packages/core/src/blocks/index.ts b/packages/core/src/blocks/index.ts index 7d8a9fc3c4..56f4c6de3c 100644 --- a/packages/core/src/blocks/index.ts +++ b/packages/core/src/blocks/index.ts @@ -1,6 +1,7 @@ export * from "./Audio/block.js"; export * from "./Audio/parseAudioElement.js"; export * from "./Code/block.js"; +export * from "./Divider/block.js"; export * from "./File/block.js"; export * from "./Heading/block.js"; export * from "./Image/block.js"; diff --git a/packages/core/src/editor/Block.css b/packages/core/src/editor/Block.css index f882ba0559..fdf4d31123 100644 --- a/packages/core/src/editor/Block.css +++ b/packages/core/src/editor/Block.css @@ -184,6 +184,14 @@ NESTED BLOCKS padding-left: 1em; } +/* DIVIDERS */ +[data-content-type="divider"] hr { + border: none; + border-top: 1px solid rgb(125, 121, 122); + margin: 0.5em 0; + flex: 1; +} + /* LISTS */ .bn-block-content::before { diff --git a/packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts b/packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts index 26748a35dd..921d181d1a 100644 --- a/packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts +++ b/packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts @@ -215,6 +215,16 @@ export function getDefaultSlashMenuItems< }); } + if (editorHasBlockWithType(editor, "divider")) { + items.push({ + onItemClick: () => { + insertOrUpdateBlock(editor, { type: "divider" }); + }, + key: "divider", + ...editor.dictionary.slash_menu.divider, + }); + } + if (editorHasBlockWithType(editor, "table")) { items.push({ onItemClick: () => { diff --git a/packages/core/src/i18n/locales/ar.ts b/packages/core/src/i18n/locales/ar.ts index ef9632ff23..00574debed 100644 --- a/packages/core/src/i18n/locales/ar.ts +++ b/packages/core/src/i18n/locales/ar.ts @@ -156,6 +156,12 @@ export const ar: Dictionary = { aliases: ["رمز تعبيري", "إيموجي", "إيموت", "عاطفة", "وجه"], group: "آخرون", }, + divider: { + title: "فاصل", + subtext: "يستخدم لفصل الكتل", + aliases: ["فاصل", "فاصل", "فاصل", "فاصل"], + group: "الكتل الأساسية", + }, }, placeholders: { default: "أدخل نصًا أو اكتب '/' للأوامر", diff --git a/packages/core/src/i18n/locales/de.ts b/packages/core/src/i18n/locales/de.ts index 511e8a1fb3..cac48dd80a 100644 --- a/packages/core/src/i18n/locales/de.ts +++ b/packages/core/src/i18n/locales/de.ts @@ -191,6 +191,12 @@ export const de: Dictionary = { aliases: ["emoji", "emote", "emotion", "gesicht"], group: "Andere", }, + divider: { + title: "Trennlinie", + subtext: "Trennlinie zwischen Blöcken", + aliases: ["trennlinie", "hr", "horizontal rule"], + group: "Grundlegende Blöcke", + }, }, placeholders: { default: "Text eingeben oder '/' für Befehle tippen", diff --git a/packages/core/src/i18n/locales/en.ts b/packages/core/src/i18n/locales/en.ts index fee176d7e8..af7927d207 100644 --- a/packages/core/src/i18n/locales/en.ts +++ b/packages/core/src/i18n/locales/en.ts @@ -170,6 +170,12 @@ export const en = { aliases: ["emoji", "emote", "emotion", "face"], group: "Others", }, + divider: { + title: "Divider", + subtext: "Visually divide blocks", + aliases: ["divider", "hr", "line", "horizontal rule"], + group: "Basic blocks", + }, }, placeholders: { default: "Enter text or type '/' for commands", diff --git a/packages/core/src/i18n/locales/es.ts b/packages/core/src/i18n/locales/es.ts index ab9b2882b7..9e830b406b 100644 --- a/packages/core/src/i18n/locales/es.ts +++ b/packages/core/src/i18n/locales/es.ts @@ -171,6 +171,12 @@ export const es: Dictionary = { aliases: ["emoji", "emoticono", "emoción", "cara"], group: "Otros", }, + divider: { + title: "Divisor", + subtext: "Divisor de bloques", + aliases: ["divisor", "hr", "horizontal rule"], + group: "Bloques básicos", + }, }, placeholders: { default: "Escribe o teclea '/' para comandos", diff --git a/packages/core/src/i18n/locales/fr.ts b/packages/core/src/i18n/locales/fr.ts index a3f22ebada..b56e6942f6 100644 --- a/packages/core/src/i18n/locales/fr.ts +++ b/packages/core/src/i18n/locales/fr.ts @@ -216,6 +216,12 @@ export const fr: Dictionary = { aliases: ["emoji", "émoticône", "émotion", "visage", "smiley"], group: "Autres", }, + divider: { + title: "Diviseur", + subtext: "Utilisé pour diviser les blocs", + aliases: ["diviseur", "hr", "horizontal rule"], + group: "Blocs de base", + }, }, placeholders: { default: diff --git a/packages/core/src/i18n/locales/he.ts b/packages/core/src/i18n/locales/he.ts index 98f73573d3..553fc42941 100644 --- a/packages/core/src/i18n/locales/he.ts +++ b/packages/core/src/i18n/locales/he.ts @@ -172,6 +172,12 @@ export const he: Dictionary = { aliases: ["emoji", "emote", "emotion", "face"], group: "אחר", }, + divider: { + title: "מחיצה", + subtext: "מחיצה בין בלוקים", + aliases: ["divider", "hr", "horizontal rule"], + group: "בלוקים בסיסיים", + }, }, placeholders: { default: "הזן טקסט או הקלד '/' לפקודות", diff --git a/packages/core/src/i18n/locales/hr.ts b/packages/core/src/i18n/locales/hr.ts index 34c353c009..31c0b71159 100644 --- a/packages/core/src/i18n/locales/hr.ts +++ b/packages/core/src/i18n/locales/hr.ts @@ -184,6 +184,12 @@ export const hr: Dictionary = { aliases: ["emoji", "emotikon", "emocija", "lice"], group: "Ostalo", }, + divider: { + title: "Razdjelnik", + subtext: "Razdjelnik blokova", + aliases: ["razdjelnik", "hr", "horizontal rule"], + group: "Osnovni blokovi", + }, }, placeholders: { default: "Unesi tekst ili upiši ‘/’ za naredbe", diff --git a/packages/core/src/i18n/locales/is.ts b/packages/core/src/i18n/locales/is.ts index c141c5f7a0..25060d651f 100644 --- a/packages/core/src/i18n/locales/is.ts +++ b/packages/core/src/i18n/locales/is.ts @@ -185,6 +185,12 @@ export const is: Dictionary = { aliases: ["emoji", "andlitsávísun", "tilfinningar", "andlit"], group: "Annað", }, + divider: { + title: "Razdjelnik", + subtext: "Razdjelnik blokova", + aliases: ["razdjelnik", "hr", "horizontal rule"], + group: "Osnovni blokovi", + }, }, placeholders: { default: "Sláðu inn texta eða skrifaðu '/' fyrir skipanir", diff --git a/packages/core/src/i18n/locales/it.ts b/packages/core/src/i18n/locales/it.ts index 2b654c4396..45d9dcd277 100644 --- a/packages/core/src/i18n/locales/it.ts +++ b/packages/core/src/i18n/locales/it.ts @@ -193,6 +193,12 @@ export const it: Dictionary = { aliases: ["emoji", "emote", "emozione", "faccia"], group: "Altri", }, + divider: { + title: "Divisore", + subtext: "Divisore di blocchi", + aliases: ["divisore", "hr", "horizontal rule"], + group: "Blocchi base", + }, }, placeholders: { default: "Inserisci testo o digita '/' per i comandi", diff --git a/packages/core/src/i18n/locales/ja.ts b/packages/core/src/i18n/locales/ja.ts index 8fcbbd6306..236b834443 100644 --- a/packages/core/src/i18n/locales/ja.ts +++ b/packages/core/src/i18n/locales/ja.ts @@ -211,6 +211,12 @@ export const ja: Dictionary = { aliases: ["絵文字", "顔文字", "感情表現", "顔"], group: "その他", }, + divider: { + title: "区切り", + subtext: "区切りを表示するために使用", + aliases: ["divider", "hr", "horizontal rule"], + group: "基本ブロック", + }, }, placeholders: { default: "テキストを入力するか'/' を入力してコマンド選択", diff --git a/packages/core/src/i18n/locales/ko.ts b/packages/core/src/i18n/locales/ko.ts index 4b5e9dbc6c..cce4c8f7c6 100644 --- a/packages/core/src/i18n/locales/ko.ts +++ b/packages/core/src/i18n/locales/ko.ts @@ -184,6 +184,12 @@ export const ko: Dictionary = { ], group: "기타", }, + divider: { + title: "구분선", + subtext: "구분선 블록", + aliases: ["divider", "hr", "horizontal rule"], + group: "기본 블록", + }, }, placeholders: { default: "텍스트를 입력하거나 /를 입력하여 명령을 입력하세요.", diff --git a/packages/core/src/i18n/locales/nl.ts b/packages/core/src/i18n/locales/nl.ts index 9f5160f24e..6d1f48cde2 100644 --- a/packages/core/src/i18n/locales/nl.ts +++ b/packages/core/src/i18n/locales/nl.ts @@ -172,6 +172,12 @@ export const nl: Dictionary = { ], group: "Overig", }, + divider: { + title: "Scheidingslijn", + subtext: "Scheidingslijn tussen blokken", + aliases: ["scheidingslijn", "hr", "horizontal rule"], + group: "Basisblokken", + }, }, placeholders: { default: "Voer tekst in of type '/' voor commando's", diff --git a/packages/core/src/i18n/locales/no.ts b/packages/core/src/i18n/locales/no.ts index d9001ef6d5..c28cac2b9f 100644 --- a/packages/core/src/i18n/locales/no.ts +++ b/packages/core/src/i18n/locales/no.ts @@ -190,6 +190,12 @@ export const no: Dictionary = { aliases: ["emoji", "emote", "emosjon", "ansikt"], group: "Andre", }, + divider: { + title: "Delingslinje", + subtext: "Delingslinje mellom blokker", + aliases: ["delingslinje", "hr", "horizontal rule"], + group: "Grunnleggende blokker", + }, }, placeholders: { default: "Skriv tekst eller skriv '/' for å vise kommandoer", diff --git a/packages/core/src/i18n/locales/pl.ts b/packages/core/src/i18n/locales/pl.ts index 20d02de609..35bf1f255a 100644 --- a/packages/core/src/i18n/locales/pl.ts +++ b/packages/core/src/i18n/locales/pl.ts @@ -162,6 +162,12 @@ export const pl: Dictionary = { aliases: ["emoji", "emotka", "wyrażenie emocji", "twarz"], group: "Inne", }, + divider: { + title: "Separator", + subtext: "Separator bloków", + aliases: ["separator", "hr", "horizontal rule"], + group: "Podstawowe bloki", + }, }, placeholders: { default: "Wprowadź tekst lub wpisz '/' aby użyć poleceń", diff --git a/packages/core/src/i18n/locales/pt.ts b/packages/core/src/i18n/locales/pt.ts index c935b3201e..7801cd2d36 100644 --- a/packages/core/src/i18n/locales/pt.ts +++ b/packages/core/src/i18n/locales/pt.ts @@ -163,6 +163,12 @@ export const pt: Dictionary = { aliases: ["emoji", "emoticon", "expressão emocional", "rosto"], group: "Outros", }, + divider: { + title: "Separador", + subtext: "Separador de blocos", + aliases: ["separador", "hr", "horizontal rule"], + group: "Blocos básicos", + }, }, placeholders: { default: "Digite texto ou use '/' para comandos", diff --git a/packages/core/src/i18n/locales/ru.ts b/packages/core/src/i18n/locales/ru.ts index 728db913e0..b150359714 100644 --- a/packages/core/src/i18n/locales/ru.ts +++ b/packages/core/src/i18n/locales/ru.ts @@ -214,6 +214,12 @@ export const ru: Dictionary = { aliases: ["эмодзи", "смайлик", "выражение эмоций", "лицо"], group: "Прочее", }, + divider: { + title: "Разделитель", + subtext: "Разделитель блоков", + aliases: ["divider", "hr", "horizontal rule"], + group: "Базовые блоки", + }, }, placeholders: { default: "Введите текст или введите «/» для команд", diff --git a/packages/core/src/i18n/locales/sk.ts b/packages/core/src/i18n/locales/sk.ts index 78474b0183..cbdd0b706f 100644 --- a/packages/core/src/i18n/locales/sk.ts +++ b/packages/core/src/i18n/locales/sk.ts @@ -170,6 +170,12 @@ export const sk = { aliases: ["emoji", "emócia", "tvár"], group: "Ostatné", }, + divider: { + title: "Oddelovač", + subtext: "Oddelovač blokov", + aliases: ["oddelovač", "hr", "horizontal rule"], + group: "Základné bloky", + }, }, placeholders: { default: "Zadajte text alebo napíšte '/' pre príkazy", diff --git a/packages/core/src/i18n/locales/uk.ts b/packages/core/src/i18n/locales/uk.ts index 45f1e46391..a99a4259c6 100644 --- a/packages/core/src/i18n/locales/uk.ts +++ b/packages/core/src/i18n/locales/uk.ts @@ -196,6 +196,12 @@ export const uk: Dictionary = { aliases: ["emoji", "emote", "emotion", "face", "смайлик", "емодзі"], group: "Інше", }, + divider: { + title: "Розділювач", + subtext: "Розділювач блоків", + aliases: ["divider", "hr", "horizontal rule"], + group: "Базові блоки", + }, }, placeholders: { default: "Введіть текст або наберіть '/' для команд", diff --git a/packages/core/src/i18n/locales/vi.ts b/packages/core/src/i18n/locales/vi.ts index 9532d7214b..b300fdcfd0 100644 --- a/packages/core/src/i18n/locales/vi.ts +++ b/packages/core/src/i18n/locales/vi.ts @@ -170,6 +170,12 @@ export const vi: Dictionary = { ], group: "Khác", }, + divider: { + title: "Phân cách", + subtext: "Phân cách khối", + aliases: ["divider", "hr", "horizontal rule"], + group: "Khối cơ bản", + }, }, placeholders: { default: "Nhập văn bản hoặc gõ '/' để thêm định dạng", diff --git a/packages/core/src/i18n/locales/zh-tw.ts b/packages/core/src/i18n/locales/zh-tw.ts index e1babf3980..e9aa1e8ac6 100644 --- a/packages/core/src/i18n/locales/zh-tw.ts +++ b/packages/core/src/i18n/locales/zh-tw.ts @@ -212,6 +212,12 @@ export const zhTW: Dictionary = { ], group: "其他", }, + divider: { + title: "分隔線", + subtext: "分隔線區塊", + aliases: ["divider", "hr", "horizontal rule"], + group: "基礎區塊", + }, }, placeholders: { default: "輸入 '/' 以使用指令", diff --git a/packages/core/src/i18n/locales/zh.ts b/packages/core/src/i18n/locales/zh.ts index 1794096830..b44c81aa36 100644 --- a/packages/core/src/i18n/locales/zh.ts +++ b/packages/core/src/i18n/locales/zh.ts @@ -212,6 +212,12 @@ export const zh: Dictionary = { ], group: "其他", }, + divider: { + title: "分隔线", + subtext: "分隔线区块", + aliases: ["divider", "hr", "horizontal rule"], + group: "基础区块", + }, }, placeholders: { default: "输入 '/' 以使用命令", diff --git a/packages/react/src/components/SuggestionMenu/getDefaultReactSlashMenuItems.tsx b/packages/react/src/components/SuggestionMenu/getDefaultReactSlashMenuItems.tsx index 62adf03b18..17bc55a293 100644 --- a/packages/react/src/components/SuggestionMenu/getDefaultReactSlashMenuItems.tsx +++ b/packages/react/src/components/SuggestionMenu/getDefaultReactSlashMenuItems.tsx @@ -22,6 +22,7 @@ import { RiListUnordered, RiPlayList2Fill, RiQuoteText, + RiSubtractLine, RiTable2, RiText, RiVolumeUpFill, @@ -53,6 +54,7 @@ const icons: Record = { file: RiFile2Line, emoji: RiEmotionFill, code_block: RiCodeBlock, + divider: RiSubtractLine, }; export function getDefaultReactSlashMenuItems< diff --git a/packages/xl-ai/src/api/schema/__snapshots__/schemaToJSONSchema.test.ts.snap b/packages/xl-ai/src/api/schema/__snapshots__/schemaToJSONSchema.test.ts.snap index 683fd3b9c9..8c393501e5 100644 --- a/packages/xl-ai/src/api/schema/__snapshots__/schemaToJSONSchema.test.ts.snap +++ b/packages/xl-ai/src/api/schema/__snapshots__/schemaToJSONSchema.test.ts.snap @@ -128,6 +128,27 @@ exports[`creates json schema 1`] = ` ], "type": "object", }, + { + "additionalProperties": false, + "properties": { + "content": undefined, + "props": { + "additionalProperties": false, + "properties": {}, + "type": "object", + }, + "type": { + "enum": [ + "divider", + ], + "type": "string", + }, + }, + "required": [ + "type", + ], + "type": "object", + }, { "additionalProperties": false, "properties": { diff --git a/packages/xl-docx-exporter/src/docx/__snapshots__/basic/document.xml b/packages/xl-docx-exporter/src/docx/__snapshots__/basic/document.xml index 06e915d628..b26b4d789b 100644 --- a/packages/xl-docx-exporter/src/docx/__snapshots__/basic/document.xml +++ b/packages/xl-docx-exporter/src/docx/__snapshots__/basic/document.xml @@ -736,6 +736,13 @@ }; + + + + + + + diff --git a/packages/xl-docx-exporter/src/docx/defaultSchema/blocks.ts b/packages/xl-docx-exporter/src/docx/defaultSchema/blocks.ts index 5f0d9ac9c4..c80818fb96 100644 --- a/packages/xl-docx-exporter/src/docx/defaultSchema/blocks.ts +++ b/packages/xl-docx-exporter/src/docx/defaultSchema/blocks.ts @@ -192,6 +192,18 @@ export const docxBlockMappingForDefaultSchema: BlockMapping< children: [new PageBreak()], }); }, + divider: () => { + return new Paragraph({ + border: { + top: { + color: "auto", + space: 1, + style: "single", + size: 1, + }, + }, + }); + }, column: (block, _exporter, _nestingLevel, _numberedListIndex, children) => { return new TableCell({ width: { diff --git a/packages/xl-email-exporter/src/react-email/__snapshots__/reactEmailExporter.test.tsx.snap b/packages/xl-email-exporter/src/react-email/__snapshots__/reactEmailExporter.test.tsx.snap index 5334c2cd62..d4554d6689 100644 --- a/packages/xl-email-exporter/src/react-email/__snapshots__/reactEmailExporter.test.tsx.snap +++ b/packages/xl-email-exporter/src/react-email/__snapshots__/reactEmailExporter.test.tsx.snap @@ -1,10 +1,10 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`react email exporter > should export a document (HTML snapshot) > __snapshots__/reactEmailExporter 1`] = `"

Welcome to this demo 🙌!

Hello World nested

Hello World double nested

This paragraph has a background color

Paragraph

Heading

Heading right

justified paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    • Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    • Bullet List Item right. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    1. Numbered List Item 1

    2. Numbered List Item 2

      1. Numbered List Item Nested 1

      2. Numbered List Item Nested 2

      3. Numbered List Item Nested funky right

      4. Numbered List Item Nested funky center

  1. Numbered List Item

Check List Item

Wide CellTable CellTable Cell
Wide CellTable CellTable Cell
Wide CellTable CellTable Cell
From https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg
Open video file

From https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm

Open audio file

From https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3

audio.mp3

Audio file caption

Inline Content:

Styled Text Link

Table Cell 1Table Cell 2Table Cell 3
Table Cell 4Table Cell Bold 5Table Cell 6
Table Cell 7Table Cell 8Table Cell 9
const helloWorld = (message) => {
  console.log("Hello World", message);
};
"`; +exports[`react email exporter > should export a document (HTML snapshot) > __snapshots__/reactEmailExporter 1`] = `"

Welcome to this demo 🙌!

Hello World nested

Hello World double nested

This paragraph has a background color

Paragraph

Heading

Heading right

justified paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    • Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    • Bullet List Item right. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    1. Numbered List Item 1

    2. Numbered List Item 2

      1. Numbered List Item Nested 1

      2. Numbered List Item Nested 2

      3. Numbered List Item Nested funky right

      4. Numbered List Item Nested funky center

  1. Numbered List Item

Check List Item

Wide CellTable CellTable Cell
Wide CellTable CellTable Cell
Wide CellTable CellTable Cell
From https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg
Open video file

From https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm

Open audio file

From https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3

audio.mp3

Audio file caption

Inline Content:

Styled Text Link

Table Cell 1Table Cell 2Table Cell 3
Table Cell 4Table Cell Bold 5Table Cell 6
Table Cell 7Table Cell 8Table Cell 9
const helloWorld = (message) => {
  console.log("Hello World", message);
};
"`; -exports[`react email exporter > should export a document with multiple preview lines > __snapshots__/reactEmailExporterWithMultiplePreview 1`] = `"
First preview lineSecond preview line
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏

Welcome to this demo 🙌!

Hello World nested

Hello World double nested

This paragraph has a background color

Paragraph

Heading

Heading right

justified paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    • Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    • Bullet List Item right. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    1. Numbered List Item 1

    2. Numbered List Item 2

      1. Numbered List Item Nested 1

      2. Numbered List Item Nested 2

      3. Numbered List Item Nested funky right

      4. Numbered List Item Nested funky center

  1. Numbered List Item

Check List Item

Wide CellTable CellTable Cell
Wide CellTable CellTable Cell
Wide CellTable CellTable Cell
From https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg
Open video file

From https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm

Open audio file

From https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3

audio.mp3

Audio file caption

Inline Content:

Styled Text Link

Table Cell 1Table Cell 2Table Cell 3
Table Cell 4Table Cell Bold 5Table Cell 6
Table Cell 7Table Cell 8Table Cell 9
const helloWorld = (message) => {
  console.log("Hello World", message);
};
"`; +exports[`react email exporter > should export a document with multiple preview lines > __snapshots__/reactEmailExporterWithMultiplePreview 1`] = `"
First preview lineSecond preview line
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏

Welcome to this demo 🙌!

Hello World nested

Hello World double nested

This paragraph has a background color

Paragraph

Heading

Heading right

justified paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    • Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    • Bullet List Item right. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    1. Numbered List Item 1

    2. Numbered List Item 2

      1. Numbered List Item Nested 1

      2. Numbered List Item Nested 2

      3. Numbered List Item Nested funky right

      4. Numbered List Item Nested funky center

  1. Numbered List Item

Check List Item

Wide CellTable CellTable Cell
Wide CellTable CellTable Cell
Wide CellTable CellTable Cell
From https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg
Open video file

From https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm

Open audio file

From https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3

audio.mp3

Audio file caption

Inline Content:

Styled Text Link

Table Cell 1Table Cell 2Table Cell 3
Table Cell 4Table Cell Bold 5Table Cell 6
Table Cell 7Table Cell 8Table Cell 9
const helloWorld = (message) => {
  console.log("Hello World", message);
};
"`; -exports[`react email exporter > should export a document with preview > __snapshots__/reactEmailExporterWithPreview 1`] = `"
This is a preview of the email content
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏

Welcome to this demo 🙌!

Hello World nested

Hello World double nested

This paragraph has a background color

Paragraph

Heading

Heading right

justified paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    • Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    • Bullet List Item right. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    1. Numbered List Item 1

    2. Numbered List Item 2

      1. Numbered List Item Nested 1

      2. Numbered List Item Nested 2

      3. Numbered List Item Nested funky right

      4. Numbered List Item Nested funky center

  1. Numbered List Item

Check List Item

Wide CellTable CellTable Cell
Wide CellTable CellTable Cell
Wide CellTable CellTable Cell
From https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg
Open video file

From https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm

Open audio file

From https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3

audio.mp3

Audio file caption

Inline Content:

Styled Text Link

Table Cell 1Table Cell 2Table Cell 3
Table Cell 4Table Cell Bold 5Table Cell 6
Table Cell 7Table Cell 8Table Cell 9
const helloWorld = (message) => {
  console.log("Hello World", message);
};
"`; +exports[`react email exporter > should export a document with preview > __snapshots__/reactEmailExporterWithPreview 1`] = `"
This is a preview of the email content
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏

Welcome to this demo 🙌!

Hello World nested

Hello World double nested

This paragraph has a background color

Paragraph

Heading

Heading right

justified paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    • Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    • Bullet List Item right. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    1. Numbered List Item 1

    2. Numbered List Item 2

      1. Numbered List Item Nested 1

      2. Numbered List Item Nested 2

      3. Numbered List Item Nested funky right

      4. Numbered List Item Nested funky center

  1. Numbered List Item

Check List Item

Wide CellTable CellTable Cell
Wide CellTable CellTable Cell
Wide CellTable CellTable Cell
From https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg
Open video file

From https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm

Open audio file

From https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3

audio.mp3

Audio file caption

Inline Content:

Styled Text Link

Table Cell 1Table Cell 2Table Cell 3
Table Cell 4Table Cell Bold 5Table Cell 6
Table Cell 7Table Cell 8Table Cell 9
const helloWorld = (message) => {
  console.log("Hello World", message);
};
"`; exports[`react email exporter > should handle document with background colors > __snapshots__/reactEmailExporterBackgroundColor 1`] = `"

Text with background color

"`; diff --git a/packages/xl-email-exporter/src/react-email/defaultSchema/blocks.tsx b/packages/xl-email-exporter/src/react-email/defaultSchema/blocks.tsx index 1c1a58fae9..a0befbcb32 100644 --- a/packages/xl-email-exporter/src/react-email/defaultSchema/blocks.tsx +++ b/packages/xl-email-exporter/src/react-email/defaultSchema/blocks.tsx @@ -491,6 +491,17 @@ export const createReactEmailBlockMappingForDefaultSchema = ( /> ); }, + divider: () => { + return ( +
+ ); + }, }); // Export the original mapping for backward compatibility diff --git a/packages/xl-odt-exporter/src/odt/__snapshots__/basic/content.xml b/packages/xl-odt-exporter/src/odt/__snapshots__/basic/content.xml index 07d23ec74e..ac2fee74ad 100644 --- a/packages/xl-odt-exporter/src/odt/__snapshots__/basic/content.xml +++ b/packages/xl-odt-exporter/src/odt/__snapshots__/basic/content.xml @@ -92,6 +92,9 @@ + + + @@ -443,6 +446,7 @@ }; + \ No newline at end of file diff --git a/packages/xl-odt-exporter/src/odt/__snapshots__/withCustomOptions/content.xml b/packages/xl-odt-exporter/src/odt/__snapshots__/withCustomOptions/content.xml index 986e87756c..a938523f64 100644 --- a/packages/xl-odt-exporter/src/odt/__snapshots__/withCustomOptions/content.xml +++ b/packages/xl-odt-exporter/src/odt/__snapshots__/withCustomOptions/content.xml @@ -92,6 +92,9 @@ + + + @@ -457,6 +460,7 @@ }; + \ No newline at end of file diff --git a/packages/xl-odt-exporter/src/odt/defaultSchema/blocks.tsx b/packages/xl-odt-exporter/src/odt/defaultSchema/blocks.tsx index b9fd80a97c..85fa80d0ff 100644 --- a/packages/xl-odt-exporter/src/odt/defaultSchema/blocks.tsx +++ b/packages/xl-odt-exporter/src/odt/defaultSchema/blocks.tsx @@ -313,6 +313,24 @@ export const odtBlockMappingForDefaultSchema: BlockMapping< return ; }, + divider: (block, exporter) => { + const styleName = createParagraphStyle( + exporter as ODTExporter, + block.props, + "Standard", + {}, + { + "fo:border-top": "1pt solid #cccccc", + "fo:margin-top": "11pt", + "fo:margin-bottom": "12pt", + "fo:padding-top": "0pt", + "fo:padding-bottom": "0pt", + }, + ); + + return ; + }, + column: (_block, exporter, _nestingLevel, _numberedListIndex, children) => { const ex = exporter as ODTExporter; const style = ex.registerStyle((name) => ( diff --git a/packages/xl-pdf-exporter/src/pdf/__snapshots__/example.jsx b/packages/xl-pdf-exporter/src/pdf/__snapshots__/example.jsx index a9b3f7ef67..bf68e3e9af 100644 --- a/packages/xl-pdf-exporter/src/pdf/__snapshots__/example.jsx +++ b/packages/xl-pdf-exporter/src/pdf/__snapshots__/example.jsx @@ -1117,5 +1117,24 @@ + + + + + \ No newline at end of file diff --git a/packages/xl-pdf-exporter/src/pdf/__snapshots__/exampleWithHeaderAndFooter.jsx b/packages/xl-pdf-exporter/src/pdf/__snapshots__/exampleWithHeaderAndFooter.jsx index 89d1d756ea..ee30e0587a 100644 --- a/packages/xl-pdf-exporter/src/pdf/__snapshots__/exampleWithHeaderAndFooter.jsx +++ b/packages/xl-pdf-exporter/src/pdf/__snapshots__/exampleWithHeaderAndFooter.jsx @@ -1125,6 +1125,25 @@ + + + + + { return ; }, + divider: () => { + return ( + + ); + }, column: (block, _exporter, _nestingLevel, _numberedListIndex, children) => { return {children}; }, diff --git a/shared/testDocument.ts b/shared/testDocument.ts index 5c082b6adf..22c57bb192 100644 --- a/shared/testDocument.ts +++ b/shared/testDocument.ts @@ -282,5 +282,6 @@ export const testDocument = partialBlocksToBlocksForTesting( console.log("Hello World", message); };`, }, + { type: "divider" }, ], );