[{"data":1,"prerenderedAt":6300},["ShallowReactive",2],{"search-de":3,"content-de-developer\u002Femail-renderer":4,"surround-de-\u002Fdeveloper\u002Femail-renderer":6291},[],{"id":5,"title":6,"body":7,"description":6284,"extension":6285,"meta":6286,"navigation":79,"path":6287,"seo":6288,"stem":6289,"__hash__":6290},"content_de\u002F3.developer\u002F7.email-renderer.md","Email Renderer",{"type":8,"value":9,"toc":6221},"minimark",[10,19,24,267,271,279,283,290,703,707,1087,1090,1101,1105,1108,1112,1173,1177,1239,1243,1285,1289,1347,1351,1362,1412,1422,1442,1445,1493,1497,1504,1508,1548,1645,1665,1669,1721,1725,1735,1739,1746,1798,1802,1809,1813,1823,1827,1831,1837,1929,1933,1943,1976,1980,1987,2049,2053,2064,2068,2071,2190,2208,2212,2215,2387,2407,2410,2414,2420,2625,2639,2643,2646,2768,2771,2775,2778,2854,2860,2877,2880,2884,2887,2928,2931,3051,3055,3058,3176,3180,3254,3258,3261,3287,3290,3326,3330,3333,3375,3379,3518,3546,3561,3587,3591,3605,3660,3664,3728,3732,3799,3803,3823,3827,3830,3834,3837,3905,3919,3929,3935,3939,3942,4126,4163,4167,4193,4208,4472,4476,4490,4667,4701,4705,4727,4730,4734,4740,4914,4918,4973,4991,4995,4998,5084,5088,5091,5318,5348,5352,5363,5427,5444,5450,5592,5601,5605,5608,5703,5721,5725,6170,6187,6191,6197,6218],[11,12,13,14,18],"p",{},"Das Paket ",[15,16,17],"code",{},"@owlat\u002Femail-renderer"," wandelt JSON-Blöcke aus dem Editor in produktionsreife HTML-E-Mails um — mit Client-übergreifender Kompatibilität, CSS-Inlining, Unterstützung für den Dark Mode und VML-Fallbacks für Outlook.",[20,21,23],"h2",{"id":22},"schnellstart","Schnellstart",[25,26,31],"pre",{"className":27,"code":28,"language":29,"meta":30,"style":30},"language-typescript shiki shiki-themes github-light github-dark-dimmed","import { renderEmailHtml } from '@owlat\u002Femail-renderer';\nimport type { EditorBlock } from '@owlat\u002Fshared';\n\nconst blocks: EditorBlock[] = [\n {\n id: 'block-1',\n type: 'text',\n content: {\n html: '\u003Cp>Hello {{firstName}}\u003C\u002Fp>',\n blockType: 'paragraph',\n fontSize: 16,\n textColor: '#333333',\n },\n },\n];\n\nconst html = renderEmailHtml(blocks, {\n theme: { primaryColor: '#4f46e5' },\n preheaderText: 'Your weekly update is here',\n inlineCss: true,\n});\n","typescript","",[15,32,33,56,74,81,107,113,125,136,142,153,164,175,186,192,198,204,209,227,239,250,261],{"__ignoreMap":30},[34,35,38,42,46,49,53],"span",{"class":36,"line":37},"line",1,[34,39,41],{"class":40},"s7YZ4","import",[34,43,45],{"class":44},"sYgZi"," { renderEmailHtml } ",[34,47,48],{"class":40},"from",[34,50,52],{"class":51},"s-HuK"," '@owlat\u002Femail-renderer'",[34,54,55],{"class":44},";\n",[34,57,59,61,64,67,69,72],{"class":36,"line":58},2,[34,60,41],{"class":40},[34,62,63],{"class":40}," type",[34,65,66],{"class":44}," { EditorBlock } ",[34,68,48],{"class":40},[34,70,71],{"class":51}," '@owlat\u002Fshared'",[34,73,55],{"class":44},[34,75,77],{"class":36,"line":76},3,[34,78,80],{"emptyLinePlaceholder":79},true,"\n",[34,82,84,87,91,94,98,101,104],{"class":36,"line":83},4,[34,85,86],{"class":40},"const",[34,88,90],{"class":89},"sviXB"," blocks",[34,92,93],{"class":40},":",[34,95,97],{"class":96},"sOLd2"," EditorBlock",[34,99,100],{"class":44},"[] ",[34,102,103],{"class":40},"=",[34,105,106],{"class":44}," [\n",[34,108,110],{"class":36,"line":109},5,[34,111,112],{"class":44}," {\n",[34,114,116,119,122],{"class":36,"line":115},6,[34,117,118],{"class":44}," id: ",[34,120,121],{"class":51},"'block-1'",[34,123,124],{"class":44},",\n",[34,126,128,131,134],{"class":36,"line":127},7,[34,129,130],{"class":44}," type: ",[34,132,133],{"class":51},"'text'",[34,135,124],{"class":44},[34,137,139],{"class":36,"line":138},8,[34,140,141],{"class":44}," content: {\n",[34,143,145,148,151],{"class":36,"line":144},9,[34,146,147],{"class":44}," html: ",[34,149,150],{"class":51},"'\u003Cp>Hello {{firstName}}\u003C\u002Fp>'",[34,152,124],{"class":44},[34,154,156,159,162],{"class":36,"line":155},10,[34,157,158],{"class":44}," blockType: ",[34,160,161],{"class":51},"'paragraph'",[34,163,124],{"class":44},[34,165,167,170,173],{"class":36,"line":166},11,[34,168,169],{"class":44}," fontSize: ",[34,171,172],{"class":89},"16",[34,174,124],{"class":44},[34,176,178,181,184],{"class":36,"line":177},12,[34,179,180],{"class":44}," textColor: ",[34,182,183],{"class":51},"'#333333'",[34,185,124],{"class":44},[34,187,189],{"class":36,"line":188},13,[34,190,191],{"class":44}," },\n",[34,193,195],{"class":36,"line":194},14,[34,196,197],{"class":44}," },\n",[34,199,201],{"class":36,"line":200},15,[34,202,203],{"class":44},"];\n",[34,205,207],{"class":36,"line":206},16,[34,208,80],{"emptyLinePlaceholder":79},[34,210,212,214,217,220,224],{"class":36,"line":211},17,[34,213,86],{"class":40},[34,215,216],{"class":89}," html",[34,218,219],{"class":40}," =",[34,221,223],{"class":222},"sPO5f"," renderEmailHtml",[34,225,226],{"class":44},"(blocks, {\n",[34,228,230,233,236],{"class":36,"line":229},18,[34,231,232],{"class":44}," theme: { primaryColor: ",[34,234,235],{"class":51},"'#4f46e5'",[34,237,238],{"class":44}," },\n",[34,240,242,245,248],{"class":36,"line":241},19,[34,243,244],{"class":44}," preheaderText: ",[34,246,247],{"class":51},"'Your weekly update is here'",[34,249,124],{"class":44},[34,251,253,256,259],{"class":36,"line":252},20,[34,254,255],{"class":44}," inlineCss: ",[34,257,258],{"class":89},"true",[34,260,124],{"class":44},[34,262,264],{"class":36,"line":263},21,[34,265,266],{"class":44},"});\n",[20,268,270],{"id":269},"render-pipeline","Render-Pipeline",[25,272,277],{"className":273,"code":275,"language":276},[274],"language-text","EditorBlock[]\n │\n ▼ Conditional content filtering (variable-based show\u002Fhide)\n ▼ Theme defaults applied (heading styles, button styles, body text)\n ▼ Mobile font size rules collected\n │\n ▼ Per-block rendering (table-based HTML with VML fallbacks)\n │\n ▼ Document wrapping (DOCTYPE, head, styles, boilerplate)\n ▼ CSS inlining (styles onto elements for Gmail\u002FYahoo)\n ▼ Optional HTML minification\n │\n ▼ Final HTML string\n","text",[15,278,275],{"__ignoreMap":30},[20,280,282],{"id":281},"render-optionen","Render-Optionen",[11,284,285,286,289],{},"Alle Optionen werden als zweites Argument an ",[15,287,288],{},"renderEmailHtml()"," übergeben:",[291,292,293,312],"table",{},[294,295,296],"thead",{},[297,298,299,303,306,309],"tr",{},[300,301,302],"th",{},"Option",[300,304,305],{},"Typ",[300,307,308],{},"Standard",[300,310,311],{},"Beschreibung",[313,314,315,334,354,374,392,412,431,451,472,490,508,528,548,568,586,604,620,654,686],"tbody",{},[297,316,317,323,328,331],{},[318,319,320],"td",{},[15,321,322],{},"theme",[318,324,325],{},[15,326,327],{},"EmailTheme",[318,329,330],{},"siehe unten",[318,332,333],{},"Design-Tokens (Farben, Schriften, Abstände)",[297,335,336,341,346,351],{},[318,337,338],{},[15,339,340],{},"darkMode",[318,342,343],{},[15,344,345],{},"boolean",[318,347,348],{},[15,349,350],{},"false",[318,352,353],{},"Rendering der Dark-Mode-Vorschau aktivieren",[297,355,356,361,366,371],{},[318,357,358],{},[15,359,360],{},"preheaderText",[318,362,363],{},[15,364,365],{},"string",[318,367,368],{},[15,369,370],{},"''",[318,372,373],{},"Verborgener Vorschautext im Posteingang",[297,375,376,381,385,389],{},[318,377,378],{},[15,379,380],{},"title",[318,382,383],{},[15,384,365],{},[318,386,387],{},[15,388,370],{},[318,390,391],{},"Dokumenttitel (Browser-Tab)",[297,393,394,399,404,409],{},[318,395,396],{},[15,397,398],{},"baseWidth",[318,400,401],{},[15,402,403],{},"number",[318,405,406],{},[15,407,408],{},"600",[318,410,411],{},"Inhaltsbreite in px (typisch 500–700)",[297,413,414,419,423,428],{},[318,415,416],{},[15,417,418],{},"breakpoint",[318,420,421],{},[15,422,403],{},[318,424,425],{},[15,426,427],{},"480",[318,429,430],{},"Responsiver Mobil-Breakpoint in px",[297,432,433,438,443,448],{},[318,434,435],{},[15,436,437],{},"direction",[318,439,440],{},[15,441,442],{},"'ltr' | 'rtl'",[318,444,445],{},[15,446,447],{},"'ltr'",[318,449,450],{},"Textrichtung für RTL-Sprachen",[297,452,453,458,462,467],{},[318,454,455],{},[15,456,457],{},"lang",[318,459,460],{},[15,461,365],{},[318,463,464],{},[15,465,466],{},"'en'",[318,468,469,470],{},"HTML-Attribut ",[15,471,457],{},[297,473,474,479,483,487],{},[318,475,476],{},[15,477,478],{},"inlineCss",[318,480,481],{},[15,482,345],{},[318,484,485],{},[15,486,258],{},[318,488,489],{},"CSS für Gmail\u002FYahoo inline in die Elemente schreiben",[297,491,492,497,501,505],{},[318,493,494],{},[15,495,496],{},"minify",[318,498,499],{},[15,500,345],{},[318,502,503],{},[15,504,350],{},[318,506,507],{},"Ausgabe-HTML minifizieren (MSO-Kommentare bleiben erhalten)",[297,509,510,515,520,525],{},[318,511,512],{},[15,513,514],{},"variableType",[318,516,517],{},[15,518,519],{},"VariableType",[318,521,522],{},[15,523,524],{},"'personalization'",[318,526,527],{},"Rendermodus für Variablen",[297,529,530,535,540,545],{},[318,531,532],{},[15,533,534],{},"variableValues",[318,536,537],{},[15,538,539],{},"Record\u003Cstring, string>",[318,541,542],{},[15,543,544],{},"{}",[318,546,547],{},"Werte für die Auswertung bedingter Inhalte",[297,549,550,555,560,565],{},[318,551,552],{},[15,553,554],{},"fontUrls",[318,556,557],{},[15,558,559],{},"string[]",[318,561,562],{},[15,563,564],{},"[]",[318,566,567],{},"URLs von Webfonts, die importiert werden sollen",[297,569,570,575,579,583],{},[318,571,572],{},[15,573,574],{},"customCss",[318,576,577],{},[15,578,365],{},[318,580,581],{},[15,582,370],{},[318,584,585],{},"Eigenes CSS, das in den Style-Block eingefügt wird",[297,587,588,593,598,601],{},[318,589,590],{},[15,591,592],{},"linkTransform",[318,594,595],{},[15,596,597],{},"Function",[318,599,600],{},"—",[318,602,603],{},"Alle Link-URLs transformieren (UTM, Klick-Tracking)",[297,605,606,611,615,617],{},[318,607,608],{},[15,609,610],{},"onWarning",[318,612,613],{},[15,614,597],{},[318,616,600],{},[318,618,619],{},"Callback für nicht fatale Render-Warnungen",[297,621,622,627,632,634],{},[318,623,624],{},[15,625,626],{},"targetClient",[318,628,629],{},[15,630,631],{},"TargetClient",[318,633,600],{},[318,635,636,637,640,641,640,644,640,647,640,650,653],{},"Rendering für einen bestimmten E-Mail-Client simulieren (",[15,638,639],{},"gmail",", ",[15,642,643],{},"outlookDesktop",[15,645,646],{},"outlookNew",[15,648,649],{},"appleMail",[15,651,652],{},"yahooMail",")",[297,655,656,661,666,671],{},[318,657,658],{},[15,659,660],{},"validationLevel",[318,662,663],{},[15,664,665],{},"ValidationLevel",[318,667,668],{},[15,669,670],{},"'soft'",[318,672,673,674,677,678,681,682,685],{},"Strenge der Validierung: ",[15,675,676],{},"skip"," (keine), ",[15,679,680],{},"soft"," (warnen), ",[15,683,684],{},"strict"," (Fehler werfen)",[297,687,688,693,698,700],{},[318,689,690],{},[15,691,692],{},"gmailAnnotations",[318,694,695],{},[15,696,697],{},"GmailAnnotations",[318,699,600],{},[318,701,702],{},"Annotationen für den Gmail-Werbetab (Schema.org-JSON-LD für Rich Cards)",[704,705,327],"h3",{"id":706},"emailtheme",[25,708,710],{"className":27,"code":709,"language":29,"meta":30,"style":30},"interface EmailTheme {\n primaryColor?: string;\n fontFamily?: string;\n backgroundColor?: string;\n headingFontFamily?: string;\n bodyFontSize?: number;\n bodyTextColor?: string;\n linkColor?: string;\n borderRadius?: number;\n spacingUnit?: number;\n buttonDefaults?: {\n backgroundColor?: string;\n textColor?: string;\n borderRadius?: number;\n fontSize?: number;\n fontFamily?: string;\n fontWeight?: number;\n paddingX?: number;\n paddingY?: number;\n };\n headingDefaults?: {\n h1?: HeadingStyle;\n h2?: HeadingStyle;\n h3?: HeadingStyle;\n };\n blockDefaults?: Partial\u003CRecord\u003CBlockType, Record\u003Cstring, unknown>>>;\n darkModeBackgroundColor?: string; \u002F\u002F default '#121212'\n darkModeTextColor?: string; \u002F\u002F default '#e4e4e7'\n darkModeLinkColor?: string; \u002F\u002F default '#93c5fd'\n baseWidth?: number; \u002F\u002F default 600 (min 400, max 800)\n}\n",[15,711,712,723,737,748,759,770,782,793,804,815,826,835,846,857,868,879,890,901,912,923,928,937,950,962,974,979,1017,1034,1050,1065,1081],{"__ignoreMap":30},[34,713,714,717,720],{"class":36,"line":37},[34,715,716],{"class":40},"interface",[34,718,719],{"class":96}," EmailTheme",[34,721,722],{"class":44}," {\n",[34,724,725,729,732,735],{"class":36,"line":58},[34,726,728],{"class":727},"stnAF"," primaryColor",[34,730,731],{"class":40},"?:",[34,733,734],{"class":89}," string",[34,736,55],{"class":44},[34,738,739,742,744,746],{"class":36,"line":76},[34,740,741],{"class":727}," fontFamily",[34,743,731],{"class":40},[34,745,734],{"class":89},[34,747,55],{"class":44},[34,749,750,753,755,757],{"class":36,"line":83},[34,751,752],{"class":727}," backgroundColor",[34,754,731],{"class":40},[34,756,734],{"class":89},[34,758,55],{"class":44},[34,760,761,764,766,768],{"class":36,"line":109},[34,762,763],{"class":727}," headingFontFamily",[34,765,731],{"class":40},[34,767,734],{"class":89},[34,769,55],{"class":44},[34,771,772,775,777,780],{"class":36,"line":115},[34,773,774],{"class":727}," bodyFontSize",[34,776,731],{"class":40},[34,778,779],{"class":89}," number",[34,781,55],{"class":44},[34,783,784,787,789,791],{"class":36,"line":127},[34,785,786],{"class":727}," bodyTextColor",[34,788,731],{"class":40},[34,790,734],{"class":89},[34,792,55],{"class":44},[34,794,795,798,800,802],{"class":36,"line":138},[34,796,797],{"class":727}," linkColor",[34,799,731],{"class":40},[34,801,734],{"class":89},[34,803,55],{"class":44},[34,805,806,809,811,813],{"class":36,"line":144},[34,807,808],{"class":727}," borderRadius",[34,810,731],{"class":40},[34,812,779],{"class":89},[34,814,55],{"class":44},[34,816,817,820,822,824],{"class":36,"line":155},[34,818,819],{"class":727}," spacingUnit",[34,821,731],{"class":40},[34,823,779],{"class":89},[34,825,55],{"class":44},[34,827,828,831,833],{"class":36,"line":166},[34,829,830],{"class":727}," buttonDefaults",[34,832,731],{"class":40},[34,834,722],{"class":44},[34,836,837,840,842,844],{"class":36,"line":177},[34,838,839],{"class":727}," backgroundColor",[34,841,731],{"class":40},[34,843,734],{"class":89},[34,845,55],{"class":44},[34,847,848,851,853,855],{"class":36,"line":188},[34,849,850],{"class":727}," textColor",[34,852,731],{"class":40},[34,854,734],{"class":89},[34,856,55],{"class":44},[34,858,859,862,864,866],{"class":36,"line":194},[34,860,861],{"class":727}," borderRadius",[34,863,731],{"class":40},[34,865,779],{"class":89},[34,867,55],{"class":44},[34,869,870,873,875,877],{"class":36,"line":200},[34,871,872],{"class":727}," fontSize",[34,874,731],{"class":40},[34,876,779],{"class":89},[34,878,55],{"class":44},[34,880,881,884,886,888],{"class":36,"line":206},[34,882,883],{"class":727}," fontFamily",[34,885,731],{"class":40},[34,887,734],{"class":89},[34,889,55],{"class":44},[34,891,892,895,897,899],{"class":36,"line":211},[34,893,894],{"class":727}," fontWeight",[34,896,731],{"class":40},[34,898,779],{"class":89},[34,900,55],{"class":44},[34,902,903,906,908,910],{"class":36,"line":229},[34,904,905],{"class":727}," paddingX",[34,907,731],{"class":40},[34,909,779],{"class":89},[34,911,55],{"class":44},[34,913,914,917,919,921],{"class":36,"line":241},[34,915,916],{"class":727}," paddingY",[34,918,731],{"class":40},[34,920,779],{"class":89},[34,922,55],{"class":44},[34,924,925],{"class":36,"line":252},[34,926,927],{"class":44}," };\n",[34,929,930,933,935],{"class":36,"line":263},[34,931,932],{"class":727}," headingDefaults",[34,934,731],{"class":40},[34,936,722],{"class":44},[34,938,940,943,945,948],{"class":36,"line":939},22,[34,941,942],{"class":727}," h1",[34,944,731],{"class":40},[34,946,947],{"class":96}," HeadingStyle",[34,949,55],{"class":44},[34,951,953,956,958,960],{"class":36,"line":952},23,[34,954,955],{"class":727}," h2",[34,957,731],{"class":40},[34,959,947],{"class":96},[34,961,55],{"class":44},[34,963,965,968,970,972],{"class":36,"line":964},24,[34,966,967],{"class":727}," h3",[34,969,731],{"class":40},[34,971,947],{"class":96},[34,973,55],{"class":44},[34,975,977],{"class":36,"line":976},25,[34,978,927],{"class":44},[34,980,982,985,987,990,993,996,998,1001,1003,1005,1007,1009,1011,1014],{"class":36,"line":981},26,[34,983,984],{"class":727}," blockDefaults",[34,986,731],{"class":40},[34,988,989],{"class":96}," Partial",[34,991,992],{"class":44},"\u003C",[34,994,995],{"class":96},"Record",[34,997,992],{"class":44},[34,999,1000],{"class":96},"BlockType",[34,1002,640],{"class":44},[34,1004,995],{"class":96},[34,1006,992],{"class":44},[34,1008,365],{"class":89},[34,1010,640],{"class":44},[34,1012,1013],{"class":89},"unknown",[34,1015,1016],{"class":44},">>>;\n",[34,1018,1020,1023,1025,1027,1030],{"class":36,"line":1019},27,[34,1021,1022],{"class":727}," darkModeBackgroundColor",[34,1024,731],{"class":40},[34,1026,734],{"class":89},[34,1028,1029],{"class":44},"; ",[34,1031,1033],{"class":1032},"sDN9O","\u002F\u002F default '#121212'\n",[34,1035,1037,1040,1042,1044,1047],{"class":36,"line":1036},28,[34,1038,1039],{"class":727}," darkModeTextColor",[34,1041,731],{"class":40},[34,1043,734],{"class":89},[34,1045,1046],{"class":44},"; ",[34,1048,1049],{"class":1032},"\u002F\u002F default '#e4e4e7'\n",[34,1051,1053,1056,1058,1060,1062],{"class":36,"line":1052},29,[34,1054,1055],{"class":727}," darkModeLinkColor",[34,1057,731],{"class":40},[34,1059,734],{"class":89},[34,1061,1046],{"class":44},[34,1063,1064],{"class":1032},"\u002F\u002F default '#93c5fd'\n",[34,1066,1068,1071,1073,1075,1078],{"class":36,"line":1067},30,[34,1069,1070],{"class":727}," baseWidth",[34,1072,731],{"class":40},[34,1074,779],{"class":89},[34,1076,1077],{"class":44},"; ",[34,1079,1080],{"class":1032},"\u002F\u002F default 600 (min 400, max 800)\n",[34,1082,1084],{"class":36,"line":1083},31,[34,1085,1086],{"class":44},"}\n",[11,1088,1089],{},"Theme-Standardwerte werden mit den Eigenschaften auf Blockebene zusammengeführt. Werte auf Blockebene haben immer Vorrang.",[11,1091,1092,1093,1096,1097,1100],{},"Das Feld ",[15,1094,1095],{},"blockDefaults"," funktioniert wie ",[15,1098,1099],{},"mj-attributes"," in MJML — damit setzen Sie Standardeigenschaften für beliebige Blocktypen (z. B. Standard-Padding für alle Textblöcke, Standard-Border-Radius für alle Buttons). Diese werden vor dem Rendern flach in den Blockinhalt gemischt.",[20,1102,1104],{"id":1103},"blocktypen","Blocktypen",[11,1106,1107],{},"Der Renderer unterstützt 17 Blocktypen:",[704,1109,1111],{"id":1110},"inhaltsblöcke","Inhaltsblöcke",[291,1113,1114,1122],{},[294,1115,1116],{},[297,1117,1118,1120],{},[300,1119,305],{},[300,1121,311],{},[313,1123,1124,1133,1143,1153,1163],{},[297,1125,1126,1130],{},[318,1127,1128],{},[15,1129,276],{},[318,1131,1132],{},"Rich Text (Absatz, h1, h2, h3) mit Schriftgröße, Farbe, Ausrichtung, Zeilenhöhe",[297,1134,1135,1140],{},[318,1136,1137],{},[15,1138,1139],{},"image",[318,1141,1142],{},"Responsives Bild mit Alt-Text, Link, srcset\u002FRetina, Bildaustausch im Dark Mode",[297,1144,1145,1150],{},[318,1146,1147],{},[15,1148,1149],{},"button",[318,1151,1152],{},"CTA mit kugelsicherem VML-Rendering für Outlook, konfigurierbare Breite (px\u002F%)",[297,1154,1155,1160],{},[318,1156,1157],{},[15,1158,1159],{},"video",[318,1161,1162],{},"Thumbnail mit SVG-Play-Button-Overlay, verlinkt auf die Video-URL",[297,1164,1165,1170],{},[318,1166,1167],{},[15,1168,1169],{},"rawHtml",[318,1171,1172],{},"Einfügen von rohem HTML (mit Bedacht verwenden)",[704,1174,1176],{"id":1175},"layoutblöcke","Layoutblöcke",[291,1178,1179,1187],{},[294,1180,1181],{},[297,1182,1183,1185],{},[300,1184,305],{},[300,1186,311],{},[313,1188,1189,1199,1209,1219,1229],{},[297,1190,1191,1196],{},[318,1192,1193],{},[15,1194,1195],{},"columns",[318,1197,1198],{},"Layouts mit 1–4 Spalten, Verhältnis-Presets, Styling je Spalte, Abstand, kein Stapeln, umgekehrte Reihenfolge auf Mobilgeräten",[297,1200,1201,1206],{},[318,1202,1203],{},[15,1204,1205],{},"container",[318,1207,1208],{},"Verschachtelte Blockgruppierung mit Hintergrund, Rahmen, Border-Radius",[297,1210,1211,1216],{},[318,1212,1213],{},[15,1214,1215],{},"hero",[318,1217,1218],{},"Abschnitt mit Hintergrundbild samt VML-Fallback für Outlook, Overlay, vertikaler Ausrichtung",[297,1220,1221,1226],{},[318,1222,1223],{},[15,1224,1225],{},"divider",[318,1227,1228],{},"Horizontale Linie mit Farbe, Stärke, Breite, Stil",[297,1230,1231,1236],{},[318,1232,1233],{},[15,1234,1235],{},"spacer",[318,1237,1238],{},"Vertikaler Abstand",[704,1240,1242],{"id":1241},"interaktive-blöcke","Interaktive Blöcke",[291,1244,1245,1253],{},[294,1246,1247],{},[297,1248,1249,1251],{},[300,1250,305],{},[300,1252,311],{},[313,1254,1255,1265,1275],{},[297,1256,1257,1262],{},[318,1258,1259],{},[15,1260,1261],{},"accordion",[318,1263,1264],{},"Ausklappbare Abschnitte, nur mit CSS (interaktiv in Apple Mail\u002FiOS, ~40 % der Clients; anderswo ausgeklappter Fallback)",[297,1266,1267,1272],{},[318,1268,1269],{},[15,1270,1271],{},"menu",[318,1273,1274],{},"Horizontale Navigation mit reinem CSS-Hamburger-Umschalter auf Mobilgeräten",[297,1276,1277,1282],{},[318,1278,1279],{},[15,1280,1281],{},"carousel",[318,1283,1284],{},"Bilder-Slideshow, nur mit CSS, mit Navigationspunkten (interaktiv in Apple Mail\u002FiOS, sonst wird das erste Bild gezeigt)",[704,1286,1288],{"id":1287},"datenblöcke","Datenblöcke",[291,1290,1291,1299],{},[294,1292,1293],{},[297,1294,1295,1297],{},[300,1296,305],{},[300,1298,311],{},[313,1300,1301,1310,1320,1337],{},[297,1302,1303,1307],{},[318,1304,1305],{},[15,1306,291],{},[318,1308,1309],{},"Datentabelle mit Rich-Zellen, Spaltenbreiten, colSpan\u002FrowSpan, Kopf, Fuß, Beschriftung, gestreiften Zeilen",[297,1311,1312,1317],{},[318,1313,1314],{},[15,1315,1316],{},"social",[318,1318,1319],{},"Icon-Links zu sozialen Netzwerken (gefüllt\u002FOutline) mit Text-Fallback aus Initialen",[297,1321,1322,1327],{},[318,1323,1324],{},[15,1325,1326],{},"list",[318,1328,1329,1330,1333,1334],{},"Tabellenbasierte Liste (Aufzählung, nummeriert, Häkchen, Icon) — vermeidet Client-Inkonsistenzen bei ",[15,1331,1332],{},"\u003Cul>","\u002F",[15,1335,1336],{},"\u003Col>",[297,1338,1339,1344],{},[318,1340,1341],{},[15,1342,1343],{},"progressBar",[318,1345,1346],{},"Visueller Fortschrittsbalken mit Label, vollständig tabellenbasiert",[20,1348,1350],{"id":1349},"css-inlining","CSS-Inlining",[11,1352,1353,1354,1357,1358,1361],{},"Gmail, Yahoo und mehrere weitere Clients entfernen ",[15,1355,1356],{},"\u003Cstyle>","-Tags aus E-Mails. Die CSS-Inlining-Engine schreibt die berechneten Styles direkt als Inline-",[15,1359,1360],{},"style","-Attribute auf die HTML-Elemente.",[25,1363,1365],{"className":27,"code":1364,"language":29,"meta":30,"style":30},"\u002F\u002F Enabled by default\nconst html = renderEmailHtml(blocks);\n\n\u002F\u002F Disable for debugging\nconst html = renderEmailHtml(blocks, { inlineCss: false });\n",[15,1366,1367,1372,1385,1389,1394],{"__ignoreMap":30},[34,1368,1369],{"class":36,"line":37},[34,1370,1371],{"class":1032},"\u002F\u002F Enabled by default\n",[34,1373,1374,1376,1378,1380,1382],{"class":36,"line":58},[34,1375,86],{"class":40},[34,1377,216],{"class":89},[34,1379,219],{"class":40},[34,1381,223],{"class":222},[34,1383,1384],{"class":44},"(blocks);\n",[34,1386,1387],{"class":36,"line":76},[34,1388,80],{"emptyLinePlaceholder":79},[34,1390,1391],{"class":36,"line":83},[34,1392,1393],{"class":1032},"\u002F\u002F Disable for debugging\n",[34,1395,1396,1398,1400,1402,1404,1407,1409],{"class":36,"line":109},[34,1397,86],{"class":40},[34,1399,216],{"class":89},[34,1401,219],{"class":40},[34,1403,223],{"class":222},[34,1405,1406],{"class":44},"(blocks, { inlineCss: ",[34,1408,350],{"class":89},[34,1410,1411],{"class":44}," });\n",[11,1413,1414,1418,1419,1421],{},[1415,1416,1417],"strong",{},"Was inline geschrieben wird:"," Basis-Styles (font-size, color, background-color, padding usw.) aus dem generierten ",[15,1420,1356],{},"-Block werden Elementen zugeordnet und inline angewendet.",[11,1423,1424,1430,1431,1434,1435,1438,1439,1441],{},[1415,1425,1426,1427,1429],{},"Was in ",[15,1428,1356],{}," bleibt:"," Media Queries (responsiv), ",[15,1432,1433],{},"@media (prefers-color-scheme:dark)"," (Dark Mode), ",[15,1436,1437],{},"@keyframes"," (Animationen) und Regeln mit Pseudoselektoren. Diese benötigen den ",[15,1440,1356],{},"-Block und degradieren in Clients, die ihn entfernen, sauber.",[11,1443,1444],{},"Der Inliner wird auch eigenständig exportiert:",[25,1446,1448],{"className":27,"code":1447,"language":29,"meta":30,"style":30},"import { inlineCss } from '@owlat\u002Femail-renderer';\n\nconst inlined = inlineCss('\u003Cstyle>.foo{color:red}\u003C\u002Fstyle>\u003Cdiv class=\"foo\">Hi\u003C\u002Fdiv>');\n\u002F\u002F \u003Cdiv class=\"foo\" style=\"color:red\">Hi\u003C\u002Fdiv>\n",[15,1449,1450,1463,1467,1488],{"__ignoreMap":30},[34,1451,1452,1454,1457,1459,1461],{"class":36,"line":37},[34,1453,41],{"class":40},[34,1455,1456],{"class":44}," { inlineCss } ",[34,1458,48],{"class":40},[34,1460,52],{"class":51},[34,1462,55],{"class":44},[34,1464,1465],{"class":36,"line":58},[34,1466,80],{"emptyLinePlaceholder":79},[34,1468,1469,1471,1474,1476,1479,1482,1485],{"class":36,"line":76},[34,1470,86],{"class":40},[34,1472,1473],{"class":89}," inlined",[34,1475,219],{"class":40},[34,1477,1478],{"class":222}," inlineCss",[34,1480,1481],{"class":44},"(",[34,1483,1484],{"class":51},"'\u003Cstyle>.foo{color:red}\u003C\u002Fstyle>\u003Cdiv class=\"foo\">Hi\u003C\u002Fdiv>'",[34,1486,1487],{"class":44},");\n",[34,1489,1490],{"class":36,"line":83},[34,1491,1492],{"class":1032},"\u002F\u002F \u003Cdiv class=\"foo\" style=\"color:red\">Hi\u003C\u002Fdiv>\n",[20,1494,1496],{"id":1495},"dark-mode","Dark Mode",[11,1498,1499,1500,1503],{},"Der Renderer erzeugt vollständige Dark-Mode-Unterstützung über CSS-Regeln mit ",[15,1501,1502],{},"@media (prefers-color-scheme: dark)",".",[704,1505,1507],{"id":1506},"funktionen","Funktionen",[1509,1510,1511,1522,1525,1532,1538],"ul",{},[1512,1513,1514,1515,640,1518,1521],"li",{},"Meta-Tags (",[15,1516,1517],{},"color-scheme",[15,1519,1520],{},"supported-color-schemes",") zur Erkennung durch den Client",[1512,1523,1524],{},"Automatische Umkehrung der Textfarben (dunkle Hintergründe, helle Schrift)",[1512,1526,1527,1528,1531],{},"Anpassung der Linkfarbe (",[15,1529,1530],{},"#93c5fd"," im Dark Mode)",[1512,1533,1534,1535,653],{},"Reduzierte Bilddeckkraft (",[15,1536,1537],{},"opacity: 0.9",[1512,1539,1540,1543,1544,1547],{},[1415,1541,1542],{},"Bildaustausch im Dark Mode",": Setzen Sie ",[15,1545,1546],{},"darkSrc"," an Bildblöcken, um im Dark Mode ein anderes Bild anzuzeigen",[25,1549,1551],{"className":27,"code":1550,"language":29,"meta":30,"style":30},"const imageBlock: EditorBlock = {\n id: 'img-1',\n type: 'image',\n content: {\n src: '\u002Flogo-light.png',\n darkSrc: '\u002Flogo-dark.png', \u002F\u002F Shown in dark mode\n alt: 'Logo',\n width: 100,\n },\n};\n",[15,1552,1553,1568,1578,1588,1593,1603,1616,1626,1636,1640],{"__ignoreMap":30},[34,1554,1555,1557,1560,1562,1564,1566],{"class":36,"line":37},[34,1556,86],{"class":40},[34,1558,1559],{"class":89}," imageBlock",[34,1561,93],{"class":40},[34,1563,97],{"class":96},[34,1565,219],{"class":40},[34,1567,722],{"class":44},[34,1569,1570,1573,1576],{"class":36,"line":58},[34,1571,1572],{"class":44}," id: ",[34,1574,1575],{"class":51},"'img-1'",[34,1577,124],{"class":44},[34,1579,1580,1583,1586],{"class":36,"line":76},[34,1581,1582],{"class":44}," type: ",[34,1584,1585],{"class":51},"'image'",[34,1587,124],{"class":44},[34,1589,1590],{"class":36,"line":83},[34,1591,1592],{"class":44}," content: {\n",[34,1594,1595,1598,1601],{"class":36,"line":109},[34,1596,1597],{"class":44}," src: ",[34,1599,1600],{"class":51},"'\u002Flogo-light.png'",[34,1602,124],{"class":44},[34,1604,1605,1608,1611,1613],{"class":36,"line":115},[34,1606,1607],{"class":44}," darkSrc: ",[34,1609,1610],{"class":51},"'\u002Flogo-dark.png'",[34,1612,640],{"class":44},[34,1614,1615],{"class":1032},"\u002F\u002F Shown in dark mode\n",[34,1617,1618,1621,1624],{"class":36,"line":127},[34,1619,1620],{"class":44}," alt: ",[34,1622,1623],{"class":51},"'Logo'",[34,1625,124],{"class":44},[34,1627,1628,1631,1634],{"class":36,"line":138},[34,1629,1630],{"class":44}," width: ",[34,1632,1633],{"class":89},"100",[34,1635,124],{"class":44},[34,1637,1638],{"class":36,"line":144},[34,1639,197],{"class":44},[34,1641,1642],{"class":36,"line":155},[34,1643,1644],{"class":44},"};\n",[1509,1646,1647],{},[1512,1648,1649,1652,1653,1656,1657,1660,1661,1664],{},[1415,1650,1651],{},"Dark-Overrides je Block",": Blöcke können ",[15,1654,1655],{},"darkOverrides"," mit eigenen Werten für ",[15,1658,1659],{},"backgroundColor"," und ",[15,1662,1663],{},"textColor"," angeben, die über CSS Custom Properties angewendet werden",[704,1666,1668],{"id":1667},"client-unterstützung","Client-Unterstützung",[291,1670,1671,1681],{},[294,1672,1673],{},[297,1674,1675,1678],{},[300,1676,1677],{},"Client",[300,1679,1680],{},"Dark-Mode-Unterstützung",[313,1682,1683,1691,1698,1706,1714],{},[297,1684,1685,1688],{},[318,1686,1687],{},"Apple Mail \u002F iOS",[318,1689,1690],{},"Vollständig (Media Query)",[297,1692,1693,1696],{},[318,1694,1695],{},"Outlook.com",[318,1697,1690],{},[297,1699,1700,1703],{},[318,1701,1702],{},"Gmail (mobil)",[318,1704,1705],{},"Teilweise (erzwingt eigenen Dark Mode)",[297,1707,1708,1711],{},[318,1709,1710],{},"Outlook Desktop",[318,1712,1713],{},"Keine",[297,1715,1716,1719],{},[318,1717,1718],{},"Gmail (Web)",[318,1720,1713],{},[20,1722,1724],{"id":1723},"vml-unterstützung-für-outlook","VML-Unterstützung für Outlook",[11,1726,1727,1728,640,1731,1734],{},"Outlook Desktop ignoriert CSS-",[15,1729,1730],{},"border-radius",[15,1732,1733],{},"background-image"," auf Divs und viele moderne CSS-Eigenschaften. Der Renderer erzeugt VML-Fallbacks (Vector Markup Language), eingebettet in bedingte MSO-Kommentare.",[704,1736,1738],{"id":1737},"kugelsichere-buttons","Kugelsichere Buttons",[11,1740,1741,1742,1745],{},"Buttons werden mit ",[15,1743,1744],{},"v:roundrect","-VML-Elementen gerendert, die abgerundete Ecken und Hintergrundfarben in Outlook unterstützen:",[25,1747,1751],{"className":1748,"code":1749,"language":1750,"meta":30,"style":30},"language-html shiki shiki-themes github-light github-dark-dimmed","\u003C!--[if mso]>\n\u003Cv:roundrect xmlns:v=\"urn:schemas-microsoft-com:vml\" href=\"https:\u002F\u002F...\"\n style=\"height:44px;v-text-anchor:middle;width:200px\"\n arcsize=\"18%\" fillcolor=\"#4f46e5\" stroke=\"f\">\n \u003Cv:textbox inset=\"0,0,0,0\">\n \u003Ccenter style=\"color:#ffffff;font-size:16px\">Click here\u003C\u002Fcenter>\n \u003C\u002Fv:textbox>\n\u003C\u002Fv:roundrect>\n\u003C![endif]-->\n","html",[15,1752,1753,1758,1763,1768,1773,1778,1783,1788,1793],{"__ignoreMap":30},[34,1754,1755],{"class":36,"line":37},[34,1756,1757],{"class":1032},"\u003C!--[if mso]>\n",[34,1759,1760],{"class":36,"line":58},[34,1761,1762],{"class":1032},"\u003Cv:roundrect xmlns:v=\"urn:schemas-microsoft-com:vml\" href=\"https:\u002F\u002F...\"\n",[34,1764,1765],{"class":36,"line":76},[34,1766,1767],{"class":1032}," style=\"height:44px;v-text-anchor:middle;width:200px\"\n",[34,1769,1770],{"class":36,"line":83},[34,1771,1772],{"class":1032}," arcsize=\"18%\" fillcolor=\"#4f46e5\" stroke=\"f\">\n",[34,1774,1775],{"class":36,"line":109},[34,1776,1777],{"class":1032}," \u003Cv:textbox inset=\"0,0,0,0\">\n",[34,1779,1780],{"class":36,"line":115},[34,1781,1782],{"class":1032}," \u003Ccenter style=\"color:#ffffff;font-size:16px\">Click here\u003C\u002Fcenter>\n",[34,1784,1785],{"class":36,"line":127},[34,1786,1787],{"class":1032}," \u003C\u002Fv:textbox>\n",[34,1789,1790],{"class":36,"line":138},[34,1791,1792],{"class":1032},"\u003C\u002Fv:roundrect>\n",[34,1794,1795],{"class":36,"line":144},[34,1796,1797],{"class":1032},"\u003C![endif]-->\n",[704,1799,1801],{"id":1800},"hintergrundbilder","Hintergrundbilder",[11,1803,1804,1805,1808],{},"Hero-Blöcke und Container mit Hintergrundbildern nutzen ",[15,1806,1807],{},"v:image","-VML für die Outlook-Kompatibilität.",[704,1810,1812],{"id":1811},"tabellen-mit-fester-breite","Tabellen mit fester Breite",[11,1814,1815,1816,1818,1819,1822],{},"Das Boilerplate umschließt den Inhalt mit MSO-bedingten Tabellen fester Breite, um ",[15,1817,398],{}," in Outlook durchzusetzen (das ",[15,1820,1821],{},"max-width"," ignoriert).",[20,1824,1826],{"id":1825},"responsives-design","Responsives Design",[704,1828,1830],{"id":1829},"stapeln-auf-mobilgeräten","Stapeln auf Mobilgeräten",[11,1832,1833,1834,1836],{},"Spaltenlayouts stapeln sich auf Mobilgeräten automatisch (unterhalb des konfigurierten ",[15,1835,418],{},"). Das lässt sich je Block steuern:",[25,1838,1840],{"className":27,"code":1839,"language":29,"meta":30,"style":30},"\u002F\u002F Entire columns block\ncontent.mobileStacking = true; \u002F\u002F default: true\n\n\u002F\u002F Per-column override\ncontent.columnStyles = [\n { stackOnMobile: false }, \u002F\u002F This column won't stack\n {}, \u002F\u002F This column follows parent setting\n];\n\n\u002F\u002F Reverse stack order on mobile\ncontent.mobileStackOrder = 'reverse'; \u002F\u002F Image-right becomes image-first on mobile\n",[15,1841,1842,1847,1862,1866,1871,1880,1893,1901,1905,1909,1914],{"__ignoreMap":30},[34,1843,1844],{"class":36,"line":37},[34,1845,1846],{"class":1032},"\u002F\u002F Entire columns block\n",[34,1848,1849,1852,1854,1857,1859],{"class":36,"line":58},[34,1850,1851],{"class":44},"content.mobileStacking ",[34,1853,103],{"class":40},[34,1855,1856],{"class":89}," true",[34,1858,1029],{"class":44},[34,1860,1861],{"class":1032},"\u002F\u002F default: true\n",[34,1863,1864],{"class":36,"line":76},[34,1865,80],{"emptyLinePlaceholder":79},[34,1867,1868],{"class":36,"line":83},[34,1869,1870],{"class":1032},"\u002F\u002F Per-column override\n",[34,1872,1873,1876,1878],{"class":36,"line":109},[34,1874,1875],{"class":44},"content.columnStyles ",[34,1877,103],{"class":40},[34,1879,106],{"class":44},[34,1881,1882,1885,1887,1890],{"class":36,"line":115},[34,1883,1884],{"class":44}," { stackOnMobile: ",[34,1886,350],{"class":89},[34,1888,1889],{"class":44}," }, ",[34,1891,1892],{"class":1032},"\u002F\u002F This column won't stack\n",[34,1894,1895,1898],{"class":36,"line":127},[34,1896,1897],{"class":44}," {}, ",[34,1899,1900],{"class":1032},"\u002F\u002F This column follows parent setting\n",[34,1902,1903],{"class":36,"line":138},[34,1904,203],{"class":44},[34,1906,1907],{"class":36,"line":144},[34,1908,80],{"emptyLinePlaceholder":79},[34,1910,1911],{"class":36,"line":155},[34,1912,1913],{"class":1032},"\u002F\u002F Reverse stack order on mobile\n",[34,1915,1916,1919,1921,1924,1926],{"class":36,"line":166},[34,1917,1918],{"class":44},"content.mobileStackOrder ",[34,1920,103],{"class":40},[34,1922,1923],{"class":51}," 'reverse'",[34,1925,1029],{"class":44},[34,1927,1928],{"class":1032},"\u002F\u002F Image-right becomes image-first on mobile\n",[704,1930,1932],{"id":1931},"responsive-sichtbarkeit","Responsive Sichtbarkeit",[11,1934,1935,1936,1660,1939,1942],{},"Jeder Block unterstützt die Flags ",[15,1937,1938],{},"hideOnMobile",[15,1940,1941],{},"hideOnDesktop"," für responsives Ein- und Ausblenden:",[25,1944,1946],{"className":27,"code":1945,"language":29,"meta":30,"style":30},"content.hideOnMobile = true; \u002F\u002F Hidden below breakpoint\ncontent.hideOnDesktop = true; \u002F\u002F Hidden above breakpoint\n",[15,1947,1948,1962],{"__ignoreMap":30},[34,1949,1950,1953,1955,1957,1959],{"class":36,"line":37},[34,1951,1952],{"class":44},"content.hideOnMobile ",[34,1954,103],{"class":40},[34,1956,1856],{"class":89},[34,1958,1029],{"class":44},[34,1960,1961],{"class":1032},"\u002F\u002F Hidden below breakpoint\n",[34,1963,1964,1967,1969,1971,1973],{"class":36,"line":58},[34,1965,1966],{"class":44},"content.hideOnDesktop ",[34,1968,103],{"class":40},[34,1970,1856],{"class":89},[34,1972,1029],{"class":44},[34,1974,1975],{"class":1032},"\u002F\u002F Hidden above breakpoint\n",[704,1977,1979],{"id":1978},"responsive-schriftgröße","Responsive Schriftgröße",[11,1981,1982,1983,1986],{},"Textblöcke unterstützen eine separate ",[15,1984,1985],{},"mobileFontSize",", die über eine Media Query angewendet wird:",[25,1988,1990],{"className":27,"code":1989,"language":29,"meta":30,"style":30},"const textBlock = {\n type: 'text',\n content: {\n fontSize: 18, \u002F\u002F Desktop\n mobileFontSize: 14, \u002F\u002F Mobile\n },\n};\n",[15,1991,1992,2003,2011,2015,2028,2041,2045],{"__ignoreMap":30},[34,1993,1994,1996,1999,2001],{"class":36,"line":37},[34,1995,86],{"class":40},[34,1997,1998],{"class":89}," textBlock",[34,2000,219],{"class":40},[34,2002,722],{"class":44},[34,2004,2005,2007,2009],{"class":36,"line":58},[34,2006,1582],{"class":44},[34,2008,133],{"class":51},[34,2010,124],{"class":44},[34,2012,2013],{"class":36,"line":76},[34,2014,1592],{"class":44},[34,2016,2017,2020,2023,2025],{"class":36,"line":83},[34,2018,2019],{"class":44}," fontSize: ",[34,2021,2022],{"class":89},"18",[34,2024,640],{"class":44},[34,2026,2027],{"class":1032},"\u002F\u002F Desktop\n",[34,2029,2030,2033,2036,2038],{"class":36,"line":109},[34,2031,2032],{"class":44}," mobileFontSize: ",[34,2034,2035],{"class":89},"14",[34,2037,640],{"class":44},[34,2039,2040],{"class":1032},"\u002F\u002F Mobile\n",[34,2042,2043],{"class":36,"line":115},[34,2044,197],{"class":44},[34,2046,2047],{"class":36,"line":127},[34,2048,1644],{"class":44},[704,2050,2052],{"id":2051},"fluide-bilder","Fluide Bilder",[11,2054,2055,2056,2059,2060,2063],{},"Bilder werden auf Mobilgeräten über die CSS-Klasse ",[15,2057,2058],{},"owlat-fluid-img"," automatisch fluide (",[15,2061,2062],{},"width: 100%; height: auto",").",[20,2065,2067],{"id":2066},"bedingte-inhalte","Bedingte Inhalte",[11,2069,2070],{},"Blöcke lassen sich zur Renderzeit anhand von Variablenwerten ein- oder ausblenden:",[25,2072,2074],{"className":27,"code":2073,"language":29,"meta":30,"style":30},"const block: EditorBlock = {\n type: 'text',\n content: {\n html: '\u003Cp>Premium member content\u003C\u002Fp>',\n condition: {\n variable: 'plan',\n operator: 'equals',\n value: 'premium',\n },\n },\n};\n\n\u002F\u002F Only renders if plan === 'premium'\nrenderEmailHtml([block], {\n variableValues: { plan: 'premium' },\n});\n",[15,2075,2076,2091,2099,2103,2113,2118,2128,2138,2148,2152,2156,2160,2164,2169,2177,2186],{"__ignoreMap":30},[34,2077,2078,2080,2083,2085,2087,2089],{"class":36,"line":37},[34,2079,86],{"class":40},[34,2081,2082],{"class":89}," block",[34,2084,93],{"class":40},[34,2086,97],{"class":96},[34,2088,219],{"class":40},[34,2090,722],{"class":44},[34,2092,2093,2095,2097],{"class":36,"line":58},[34,2094,1582],{"class":44},[34,2096,133],{"class":51},[34,2098,124],{"class":44},[34,2100,2101],{"class":36,"line":76},[34,2102,1592],{"class":44},[34,2104,2105,2108,2111],{"class":36,"line":83},[34,2106,2107],{"class":44}," html: ",[34,2109,2110],{"class":51},"'\u003Cp>Premium member content\u003C\u002Fp>'",[34,2112,124],{"class":44},[34,2114,2115],{"class":36,"line":109},[34,2116,2117],{"class":44}," condition: {\n",[34,2119,2120,2123,2126],{"class":36,"line":115},[34,2121,2122],{"class":44}," variable: ",[34,2124,2125],{"class":51},"'plan'",[34,2127,124],{"class":44},[34,2129,2130,2133,2136],{"class":36,"line":127},[34,2131,2132],{"class":44}," operator: ",[34,2134,2135],{"class":51},"'equals'",[34,2137,124],{"class":44},[34,2139,2140,2143,2146],{"class":36,"line":138},[34,2141,2142],{"class":44}," value: ",[34,2144,2145],{"class":51},"'premium'",[34,2147,124],{"class":44},[34,2149,2150],{"class":36,"line":144},[34,2151,191],{"class":44},[34,2153,2154],{"class":36,"line":155},[34,2155,197],{"class":44},[34,2157,2158],{"class":36,"line":166},[34,2159,1644],{"class":44},[34,2161,2162],{"class":36,"line":177},[34,2163,80],{"emptyLinePlaceholder":79},[34,2165,2166],{"class":36,"line":188},[34,2167,2168],{"class":1032},"\u002F\u002F Only renders if plan === 'premium'\n",[34,2170,2171,2174],{"class":36,"line":194},[34,2172,2173],{"class":222},"renderEmailHtml",[34,2175,2176],{"class":44},"([block], {\n",[34,2178,2179,2182,2184],{"class":36,"line":200},[34,2180,2181],{"class":44}," variableValues: { plan: ",[34,2183,2145],{"class":51},[34,2185,238],{"class":44},[34,2187,2188],{"class":36,"line":206},[34,2189,266],{"class":44},[11,2191,2192,2193,640,2196,640,2199,640,2202,640,2205,1503],{},"Unterstützte Operatoren: ",[15,2194,2195],{},"exists",[15,2197,2198],{},"notExists",[15,2200,2201],{},"equals",[15,2203,2204],{},"notEquals",[15,2206,2207],{},"contains",[20,2209,2211],{"id":2210},"wiederholungsblöcke","Wiederholungsblöcke",[11,2213,2214],{},"Über Array-Variablen iterieren und einen Block einmal je Element rendern — nützlich für Produktlisten im E-Commerce, Bestellpositionen und Empfehlungszeilen:",[25,2216,2218],{"className":27,"code":2217,"language":29,"meta":30,"style":30},"const block: EditorBlock = {\n type: 'text',\n content: {\n html: '\u003Cp>{{product.name}} — {{product.price}}\u003C\u002Fp>',\n repeat: {\n variable: 'products', \u002F\u002F Key in variableValues (JSON-encoded array)\n itemAlias: 'product', \u002F\u002F Alias for {{product.field}} interpolation\n maxItems: 5, \u002F\u002F Optional cap on iterations\n },\n },\n};\n\nrenderEmailHtml([block], {\n variableValues: {\n products: JSON.stringify([\n { name: 'Widget', price: '$9.99' },\n { name: 'Gadget', price: '$19.99' },\n ]),\n },\n});\n",[15,2219,2220,2234,2242,2246,2255,2260,2273,2287,2301,2305,2309,2313,2317,2323,2328,2344,2360,2374,2379,2383],{"__ignoreMap":30},[34,2221,2222,2224,2226,2228,2230,2232],{"class":36,"line":37},[34,2223,86],{"class":40},[34,2225,2082],{"class":89},[34,2227,93],{"class":40},[34,2229,97],{"class":96},[34,2231,219],{"class":40},[34,2233,722],{"class":44},[34,2235,2236,2238,2240],{"class":36,"line":58},[34,2237,1582],{"class":44},[34,2239,133],{"class":51},[34,2241,124],{"class":44},[34,2243,2244],{"class":36,"line":76},[34,2245,1592],{"class":44},[34,2247,2248,2250,2253],{"class":36,"line":83},[34,2249,2107],{"class":44},[34,2251,2252],{"class":51},"'\u003Cp>{{product.name}} — {{product.price}}\u003C\u002Fp>'",[34,2254,124],{"class":44},[34,2256,2257],{"class":36,"line":109},[34,2258,2259],{"class":44}," repeat: {\n",[34,2261,2262,2264,2267,2270],{"class":36,"line":115},[34,2263,2122],{"class":44},[34,2265,2266],{"class":51},"'products'",[34,2268,2269],{"class":44},", ",[34,2271,2272],{"class":1032},"\u002F\u002F Key in variableValues (JSON-encoded array)\n",[34,2274,2275,2278,2281,2284],{"class":36,"line":127},[34,2276,2277],{"class":44}," itemAlias: ",[34,2279,2280],{"class":51},"'product'",[34,2282,2283],{"class":44},", ",[34,2285,2286],{"class":1032},"\u002F\u002F Alias for {{product.field}} interpolation\n",[34,2288,2289,2292,2295,2298],{"class":36,"line":138},[34,2290,2291],{"class":44}," maxItems: ",[34,2293,2294],{"class":89},"5",[34,2296,2297],{"class":44},", ",[34,2299,2300],{"class":1032},"\u002F\u002F Optional cap on iterations\n",[34,2302,2303],{"class":36,"line":144},[34,2304,191],{"class":44},[34,2306,2307],{"class":36,"line":155},[34,2308,197],{"class":44},[34,2310,2311],{"class":36,"line":166},[34,2312,1644],{"class":44},[34,2314,2315],{"class":36,"line":177},[34,2316,80],{"emptyLinePlaceholder":79},[34,2318,2319,2321],{"class":36,"line":188},[34,2320,2173],{"class":222},[34,2322,2176],{"class":44},[34,2324,2325],{"class":36,"line":194},[34,2326,2327],{"class":44}," variableValues: {\n",[34,2329,2330,2333,2336,2338,2341],{"class":36,"line":200},[34,2331,2332],{"class":44}," products: ",[34,2334,2335],{"class":89},"JSON",[34,2337,1503],{"class":44},[34,2339,2340],{"class":222},"stringify",[34,2342,2343],{"class":44},"([\n",[34,2345,2346,2349,2352,2355,2358],{"class":36,"line":206},[34,2347,2348],{"class":44}," { name: ",[34,2350,2351],{"class":51},"'Widget'",[34,2353,2354],{"class":44},", price: ",[34,2356,2357],{"class":51},"'$9.99'",[34,2359,238],{"class":44},[34,2361,2362,2364,2367,2369,2372],{"class":36,"line":211},[34,2363,2348],{"class":44},[34,2365,2366],{"class":51},"'Gadget'",[34,2368,2354],{"class":44},[34,2370,2371],{"class":51},"'$19.99'",[34,2373,238],{"class":44},[34,2375,2376],{"class":36,"line":229},[34,2377,2378],{"class":44}," ]),\n",[34,2380,2381],{"class":36,"line":241},[34,2382,197],{"class":44},[34,2384,2385],{"class":36,"line":252},[34,2386,266],{"class":44},[11,2388,2389,2390,2396,2397,2402,2403,2406],{},"Innerhalb wiederholter Blöcke referenzieren Sie Elementeigenschaften mit ",[15,2391,2392],{"v-pre":30},[2393,2394],"binding",{"value":2395},"itemAlias.key"," und den nullbasierten Iterationsindex mit ",[15,2398,2399],{"v-pre":30},[2393,2400],{"value":2401},"$index",". Ist ",[15,2404,2405],{},"maxItems"," gesetzt, werden nur die ersten N Elemente gerendert.",[11,2408,2409],{},"Wiederholungsblöcke lassen sich mit bedingten Inhalten kombinieren — die Bedingung wird einmal für den Block ausgewertet, während die Wiederholung über das Array iteriert.",[20,2411,2413],{"id":2412},"verlaufshintergründe","Verlaufshintergründe",[11,2415,2416,2417,93],{},"Buttons, Container und Hero-Blöcke unterstützen Verlaufshintergründe über das Interface ",[15,2418,2419],{},"GradientBackground",[25,2421,2423],{"className":27,"code":2422,"language":29,"meta":30,"style":30},"interface GradientBackground {\n direction: string; \u002F\u002F CSS direction, e.g. 'to right', '135deg'\n stops: Array\u003C{ color: string; position: number }>;\n}\n\n\u002F\u002F Example: gradient button\nconst buttonBlock: EditorBlock = {\n type: 'button',\n content: {\n text: 'Get Started',\n url: 'https:\u002F\u002Fexample.com',\n backgroundColor: '#4f46e5', \u002F\u002F Solid fallback\n backgroundGradient: {\n direction: 'to right',\n stops: [\n { color: '#4f46e5', position: 0 },\n { color: '#7c3aed', position: 100 },\n ],\n },\n \u002F\u002F ...other button props\n },\n};\n",[15,2424,2425,2434,2449,2481,2485,2489,2494,2509,2518,2522,2532,2542,2555,2560,2570,2575,2590,2603,2608,2612,2617,2621],{"__ignoreMap":30},[34,2426,2427,2429,2432],{"class":36,"line":37},[34,2428,716],{"class":40},[34,2430,2431],{"class":96}," GradientBackground",[34,2433,722],{"class":44},[34,2435,2436,2439,2441,2443,2446],{"class":36,"line":58},[34,2437,2438],{"class":727}," direction",[34,2440,93],{"class":40},[34,2442,734],{"class":89},[34,2444,2445],{"class":44},"; ",[34,2447,2448],{"class":1032},"\u002F\u002F CSS direction, e.g. 'to right', '135deg'\n",[34,2450,2451,2454,2456,2459,2462,2465,2467,2469,2471,2474,2476,2478],{"class":36,"line":76},[34,2452,2453],{"class":727}," stops",[34,2455,93],{"class":40},[34,2457,2458],{"class":96}," Array",[34,2460,2461],{"class":44},"\u003C{ ",[34,2463,2464],{"class":727},"color",[34,2466,93],{"class":40},[34,2468,734],{"class":89},[34,2470,1029],{"class":44},[34,2472,2473],{"class":727},"position",[34,2475,93],{"class":40},[34,2477,779],{"class":89},[34,2479,2480],{"class":44}," }>;\n",[34,2482,2483],{"class":36,"line":83},[34,2484,1086],{"class":44},[34,2486,2487],{"class":36,"line":109},[34,2488,80],{"emptyLinePlaceholder":79},[34,2490,2491],{"class":36,"line":115},[34,2492,2493],{"class":1032},"\u002F\u002F Example: gradient button\n",[34,2495,2496,2498,2501,2503,2505,2507],{"class":36,"line":127},[34,2497,86],{"class":40},[34,2499,2500],{"class":89}," buttonBlock",[34,2502,93],{"class":40},[34,2504,97],{"class":96},[34,2506,219],{"class":40},[34,2508,722],{"class":44},[34,2510,2511,2513,2516],{"class":36,"line":138},[34,2512,1582],{"class":44},[34,2514,2515],{"class":51},"'button'",[34,2517,124],{"class":44},[34,2519,2520],{"class":36,"line":144},[34,2521,1592],{"class":44},[34,2523,2524,2527,2530],{"class":36,"line":155},[34,2525,2526],{"class":44}," text: ",[34,2528,2529],{"class":51},"'Get Started'",[34,2531,124],{"class":44},[34,2533,2534,2537,2540],{"class":36,"line":166},[34,2535,2536],{"class":44}," url: ",[34,2538,2539],{"class":51},"'https:\u002F\u002Fexample.com'",[34,2541,124],{"class":44},[34,2543,2544,2547,2549,2552],{"class":36,"line":177},[34,2545,2546],{"class":44}," backgroundColor: ",[34,2548,235],{"class":51},[34,2550,2551],{"class":44},", ",[34,2553,2554],{"class":1032},"\u002F\u002F Solid fallback\n",[34,2556,2557],{"class":36,"line":188},[34,2558,2559],{"class":44}," backgroundGradient: {\n",[34,2561,2562,2565,2568],{"class":36,"line":194},[34,2563,2564],{"class":44}," direction: ",[34,2566,2567],{"class":51},"'to right'",[34,2569,124],{"class":44},[34,2571,2572],{"class":36,"line":200},[34,2573,2574],{"class":44}," stops: [\n",[34,2576,2577,2580,2582,2585,2588],{"class":36,"line":206},[34,2578,2579],{"class":44}," { color: ",[34,2581,235],{"class":51},[34,2583,2584],{"class":44},", position: ",[34,2586,2587],{"class":89},"0",[34,2589,238],{"class":44},[34,2591,2592,2594,2597,2599,2601],{"class":36,"line":211},[34,2593,2579],{"class":44},[34,2595,2596],{"class":51},"'#7c3aed'",[34,2598,2584],{"class":44},[34,2600,1633],{"class":89},[34,2602,238],{"class":44},[34,2604,2605],{"class":36,"line":229},[34,2606,2607],{"class":44}," ],\n",[34,2609,2610],{"class":36,"line":241},[34,2611,191],{"class":44},[34,2613,2614],{"class":36,"line":252},[34,2615,2616],{"class":1032}," \u002F\u002F ...other button props\n",[34,2618,2619],{"class":36,"line":263},[34,2620,197],{"class":44},[34,2622,2623],{"class":36,"line":939},[34,2624,1644],{"class":44},[11,2626,2627,2628,2631,2632,2634,2635,2638],{},"Der Renderer gibt ein CSS-",[15,2629,2630],{},"linear-gradient"," mit der einfarbigen ",[15,2633,1659],{}," als Fallback aus. Für Outlook sorgt ein VML-Element ",[15,2636,2637],{},"\u003Cv:fill type=\"gradient\">"," für die Verlaufsdarstellung, wo CSS-Verläufe nicht unterstützt werden.",[20,2640,2642],{"id":2641},"link-transformation","Link-Transformation",[11,2644,2645],{},"Wenden Sie UTM-Parameter, Klick-Tracking oder beliebiges URL-Rewriting auf alle Links in der E-Mail an:",[25,2647,2649],{"className":27,"code":2648,"language":29,"meta":30,"style":30},"const html = renderEmailHtml(blocks, {\n linkTransform: (url, { blockType, blockId }) => {\n const u = new URL(url);\n u.searchParams.set('utm_source', 'email');\n u.searchParams.set('utm_medium', blockType);\n return u.toString();\n },\n});\n",[15,2650,2651,2663,2693,2712,2732,2746,2760,2764],{"__ignoreMap":30},[34,2652,2653,2655,2657,2659,2661],{"class":36,"line":37},[34,2654,86],{"class":40},[34,2656,216],{"class":89},[34,2658,219],{"class":40},[34,2660,223],{"class":222},[34,2662,226],{"class":44},[34,2664,2665,2668,2671,2674,2677,2680,2682,2685,2688,2691],{"class":36,"line":58},[34,2666,2667],{"class":222}," linkTransform",[34,2669,2670],{"class":44},": (",[34,2672,2673],{"class":727},"url",[34,2675,2676],{"class":44},", { ",[34,2678,2679],{"class":727},"blockType",[34,2681,640],{"class":44},[34,2683,2684],{"class":727},"blockId",[34,2686,2687],{"class":44}," }) ",[34,2689,2690],{"class":40},"=>",[34,2692,722],{"class":44},[34,2694,2695,2698,2701,2703,2706,2709],{"class":36,"line":76},[34,2696,2697],{"class":40}," const",[34,2699,2700],{"class":89}," u",[34,2702,219],{"class":40},[34,2704,2705],{"class":40}," new",[34,2707,2708],{"class":222}," URL",[34,2710,2711],{"class":44},"(url);\n",[34,2713,2714,2717,2720,2722,2725,2727,2730],{"class":36,"line":83},[34,2715,2716],{"class":44}," u.searchParams.",[34,2718,2719],{"class":222},"set",[34,2721,1481],{"class":44},[34,2723,2724],{"class":51},"'utm_source'",[34,2726,640],{"class":44},[34,2728,2729],{"class":51},"'email'",[34,2731,1487],{"class":44},[34,2733,2734,2736,2738,2740,2743],{"class":36,"line":109},[34,2735,2716],{"class":44},[34,2737,2719],{"class":222},[34,2739,1481],{"class":44},[34,2741,2742],{"class":51},"'utm_medium'",[34,2744,2745],{"class":44},", blockType);\n",[34,2747,2748,2751,2754,2757],{"class":36,"line":115},[34,2749,2750],{"class":40}," return",[34,2752,2753],{"class":44}," u.",[34,2755,2756],{"class":222},"toString",[34,2758,2759],{"class":44},"();\n",[34,2761,2762],{"class":36,"line":127},[34,2763,197],{"class":44},[34,2765,2766],{"class":36,"line":138},[34,2767,266],{"class":44},[11,2769,2770],{},"Die Transformation wird auf Links in Buttons, Bildern, Social-Icons, Menüpunkten und Karussells angewendet.",[20,2772,2774],{"id":2773},"css-animationen","CSS-Animationen",[11,2776,2777],{},"Animationen als Progressive Enhancement, die nur abgespielt werden, wenn die Nutzerin oder der Nutzer Bewegung zulässt:",[25,2779,2783],{"className":2780,"code":2781,"language":2782,"meta":30,"style":30},"language-css shiki shiki-themes github-light github-dark-dimmed","\u002F* Generated automatically *\u002F\n@media (prefers-reduced-motion: no-preference) {\n .owlat-animate-fade-in { animation: owlat-fade-in 0.6s ease-out both; }\n .owlat-animate-slide-up { animation: owlat-slide-up 0.6s ease-out both; }\n}\n","css",[15,2784,2785,2790,2798,2828,2850],{"__ignoreMap":30},[34,2786,2787],{"class":36,"line":37},[34,2788,2789],{"class":1032},"\u002F* Generated automatically *\u002F\n",[34,2791,2792,2795],{"class":36,"line":58},[34,2793,2794],{"class":40},"@media",[34,2796,2797],{"class":44}," (prefers-reduced-motion: no-preference) {\n",[34,2799,2800,2804,2807,2810,2813,2816,2819,2822,2825],{"class":36,"line":76},[34,2801,2803],{"class":2802},"sMOND"," .owlat-animate-fade-in",[34,2805,2806],{"class":44}," { ",[34,2808,2809],{"class":89},"animation",[34,2811,2812],{"class":44},": owlat-fade-in ",[34,2814,2815],{"class":89},"0.6",[34,2817,2818],{"class":40},"s",[34,2820,2821],{"class":89}," ease-out",[34,2823,2824],{"class":89}," both",[34,2826,2827],{"class":44},"; }\n",[34,2829,2830,2833,2835,2837,2840,2842,2844,2846,2848],{"class":36,"line":83},[34,2831,2832],{"class":2802}," .owlat-animate-slide-up",[34,2834,2806],{"class":44},[34,2836,2809],{"class":89},[34,2838,2839],{"class":44},": owlat-slide-up ",[34,2841,2815],{"class":89},[34,2843,2818],{"class":40},[34,2845,2821],{"class":89},[34,2847,2824],{"class":89},[34,2849,2827],{"class":44},[34,2851,2852],{"class":36,"line":109},[34,2853,1086],{"class":44},[11,2855,2856,2857,93],{},"Anwendung an Blöcken über ",[15,2858,2859],{},"cssClass",[25,2861,2863],{"className":27,"code":2862,"language":29,"meta":30,"style":30},"content.cssClass = 'owlat-animate-fade-in';\n",[15,2864,2865],{"__ignoreMap":30},[34,2866,2867,2870,2872,2875],{"class":36,"line":37},[34,2868,2869],{"class":44},"content.cssClass ",[34,2871,103],{"class":40},[34,2873,2874],{"class":51}," 'owlat-animate-fade-in'",[34,2876,55],{"class":44},[11,2878,2879],{},"Funktioniert in Apple Mail und iOS Mail. Anderswo wird es stillschweigend ignoriert.",[20,2881,2883],{"id":2882},"klartext-renderer","Klartext-Renderer",[11,2885,2886],{},"Multipart-Klartext für Barrierefreiheit und Zustellbarkeit erzeugen:",[25,2888,2890],{"className":27,"code":2889,"language":29,"meta":30,"style":30},"import { renderPlainText } from '@owlat\u002Femail-renderer';\n\nconst text = renderPlainText(blocks, { baseWidth: 600 });\n",[15,2891,2892,2905,2909],{"__ignoreMap":30},[34,2893,2894,2896,2899,2901,2903],{"class":36,"line":37},[34,2895,41],{"class":40},[34,2897,2898],{"class":44}," { renderPlainText } ",[34,2900,48],{"class":40},[34,2902,52],{"class":51},[34,2904,55],{"class":44},[34,2906,2907],{"class":36,"line":58},[34,2908,80],{"emptyLinePlaceholder":79},[34,2910,2911,2913,2916,2918,2921,2924,2926],{"class":36,"line":76},[34,2912,86],{"class":40},[34,2914,2915],{"class":89}," text",[34,2917,219],{"class":40},[34,2919,2920],{"class":222}," renderPlainText",[34,2922,2923],{"class":44},"(blocks, { baseWidth: ",[34,2925,408],{"class":89},[34,2927,1411],{"class":44},[11,2929,2930],{},"Alle Blocktypen haben eine Klartextdarstellung:",[291,2932,2933,2943],{},[294,2934,2935],{},[297,2936,2937,2940],{},[300,2938,2939],{},"Block",[300,2941,2942],{},"Klartextausgabe",[313,2944,2945,2954,2965,2980,2992,3001,3010,3028,3039],{},[297,2946,2947,2951],{},[318,2948,2949],{},[15,2950,276],{},[318,2952,2953],{},"HTML entfernt, Links extrahiert",[297,2955,2956,2960],{},[318,2957,2958],{},[15,2959,1149],{},[318,2961,2962],{},[15,2963,2964],{},"[Button Text] (URL)",[297,2966,2967,2971],{},[318,2968,2969],{},[15,2970,1139],{},[318,2972,2973,2976,2977],{},[15,2974,2975],{},"[Image: alt text]"," oder ",[15,2978,2979],{},"[Image: alt text] (link)",[297,2981,2982,2986],{},[318,2983,2984],{},[15,2985,1225],{},[318,2987,2988,2989],{},"Trenner ",[15,2990,2991],{},"---",[297,2993,2994,2998],{},[318,2995,2996],{},[15,2997,291],{},[318,2999,3000],{},"Zeilen mit Pipe-Trennung, samt Kopf\u002FFuß",[297,3002,3003,3007],{},[318,3004,3005],{},[15,3006,1316],{},[318,3008,3009],{},"Plattformname + URL je Zeile",[297,3011,3012,3016],{},[318,3013,3014],{},[15,3015,1326],{},[318,3017,3018,3021,3022,3021,3025],{},[15,3019,3020],{},"- item"," \u002F ",[15,3023,3024],{},"1. item",[15,3026,3027],{},"[x] item",[297,3029,3030,3034],{},[318,3031,3032],{},[15,3033,1343],{},[318,3035,3036],{},[15,3037,3038],{},"[Progress: 75%]",[297,3040,3041,3045],{},[318,3042,3043],{},[15,3044,1281],{},[318,3046,3047,3050],{},[15,3048,3049],{},"[Image 1: alt] (link)"," je Bild",[20,3052,3054],{"id":3053},"block-validator","Block-Validator",[11,3056,3057],{},"Die strukturelle Validierung vor dem Rendern findet Probleme, bevor gerendert wird:",[25,3059,3061],{"className":27,"code":3060,"language":29,"meta":30,"style":30},"import { validateBlocks } from '@owlat\u002Femail-renderer';\n\nconst { valid, issues } = validateBlocks(blocks);\n\nfor (const issue of issues) {\n console.log(`[${issue.severity}] ${issue.code}: ${issue.message}`);\n}\n",[15,3062,3063,3076,3080,3104,3108,3127,3172],{"__ignoreMap":30},[34,3064,3065,3067,3070,3072,3074],{"class":36,"line":37},[34,3066,41],{"class":40},[34,3068,3069],{"class":44}," { validateBlocks } ",[34,3071,48],{"class":40},[34,3073,52],{"class":51},[34,3075,55],{"class":44},[34,3077,3078],{"class":36,"line":58},[34,3079,80],{"emptyLinePlaceholder":79},[34,3081,3082,3084,3086,3089,3091,3094,3097,3099,3102],{"class":36,"line":76},[34,3083,86],{"class":40},[34,3085,2806],{"class":44},[34,3087,3088],{"class":89},"valid",[34,3090,640],{"class":44},[34,3092,3093],{"class":89},"issues",[34,3095,3096],{"class":44}," } ",[34,3098,103],{"class":40},[34,3100,3101],{"class":222}," validateBlocks",[34,3103,1384],{"class":44},[34,3105,3106],{"class":36,"line":83},[34,3107,80],{"emptyLinePlaceholder":79},[34,3109,3110,3113,3116,3118,3121,3124],{"class":36,"line":109},[34,3111,3112],{"class":40},"for",[34,3114,3115],{"class":44}," (",[34,3117,86],{"class":40},[34,3119,3120],{"class":89}," issue",[34,3122,3123],{"class":40}," of",[34,3125,3126],{"class":44}," issues) {\n",[34,3128,3129,3132,3135,3137,3140,3143,3145,3148,3151,3153,3155,3157,3160,3162,3164,3167,3170],{"class":36,"line":115},[34,3130,3131],{"class":44}," console.",[34,3133,3134],{"class":222},"log",[34,3136,1481],{"class":44},[34,3138,3139],{"class":51},"`[${",[34,3141,3142],{"class":44},"issue",[34,3144,1503],{"class":51},[34,3146,3147],{"class":44},"severity",[34,3149,3150],{"class":51},"}] ${",[34,3152,3142],{"class":44},[34,3154,1503],{"class":51},[34,3156,15],{"class":44},[34,3158,3159],{"class":51},"}: ${",[34,3161,3142],{"class":44},[34,3163,1503],{"class":51},[34,3165,3166],{"class":44},"message",[34,3168,3169],{"class":51},"}`",[34,3171,1487],{"class":44},[34,3173,3174],{"class":36,"line":127},[34,3175,1086],{"class":44},[704,3177,3179],{"id":3178},"validierungsprüfungen","Validierungsprüfungen",[1509,3181,3182,3188,3202,3211,3217,3223,3229,3239,3245,3251],{},[1512,3183,3184,3187],{},[1415,3185,3186],{},"Text",": Erkennung leerer Inhalte",[1512,3189,3190,3193,3194,3197,3198,3201],{},[1415,3191,3192],{},"Bild",": fehlendes ",[15,3195,3196],{},"src",", fehlender ",[15,3199,3200],{},"alt","-Text, ungültige Abmessungen",[1512,3203,3204,3207,3208,653],{},[1415,3205,3206],{},"Button",": leerer Text, leere URL, Platzhalter-URL (",[15,3209,3210],{},"#",[1512,3212,3213,3216],{},[1415,3214,3215],{},"Video",": fehlende Video-URL, fehlendes Thumbnail",[1512,3218,3219,3222],{},[1415,3220,3221],{},"Spalten",": leere Spalten, zu tiefe Verschachtelung",[1512,3224,3225,3228],{},[1415,3226,3227],{},"Tabelle",": leere Kopfzeilen, leere Zeilen",[1512,3230,3231,3234,3235,2976,3237],{},[1415,3232,3233],{},"Karussell",": keine Bilder, Bilder ohne ",[15,3236,3196],{},[15,3238,3200],{},[1512,3240,3241,3244],{},[1415,3242,3243],{},"Liste",": leere Einträge, Icon-Typ ohne Icon-URL",[1512,3246,3247,3250],{},[1415,3248,3249],{},"ProgressBar",": Wert außerhalb des Bereichs 0–100, zu geringer Kontrast zwischen Balken- und Schienenfarbe",[1512,3252,3253],{},"Allgemein: zu hohe Blockanzahl, tief verschachtelte Strukturen",[704,3255,3257],{"id":3256},"barrierefreiheits-audit","Barrierefreiheits-Audit",[11,3259,3260],{},"Aktivieren Sie das Barrierefreiheits-Audit für WCAG-orientierte Prüfungen:",[25,3262,3264],{"className":27,"code":3263,"language":29,"meta":30,"style":30},"const { issues } = validateBlocks(blocks, { accessibilityAudit: true });\n",[15,3265,3266],{"__ignoreMap":30},[34,3267,3268,3270,3272,3274,3276,3278,3280,3283,3285],{"class":36,"line":37},[34,3269,86],{"class":40},[34,3271,2806],{"class":44},[34,3273,3093],{"class":89},[34,3275,3096],{"class":44},[34,3277,103],{"class":40},[34,3279,3101],{"class":222},[34,3281,3282],{"class":44},"(blocks, { accessibilityAudit: ",[34,3284,258],{"class":89},[34,3286,1411],{"class":44},[11,3288,3289],{},"Zusätzliche Prüfungen umfassen:",[1509,3291,3292,3298,3304,3310,3320],{},[1512,3293,3294,3297],{},[1415,3295,3296],{},"Farbkontrast",": Kontrastverhältnis zwischen Buttontext und -hintergrund unter 4,5:1 (WCAG AA)",[1512,3299,3300,3303],{},[1415,3301,3302],{},"Überschriftenhierarchie",": übersprungene Überschriftenebenen (z. B. h1 gefolgt von h3)",[1512,3305,3306,3309],{},[1415,3307,3308],{},"Qualität von Linktexten",": erkennt vage Linktexte wie „click here“ oder „read more“",[1512,3311,3312,3315,3316,3319],{},[1415,3313,3314],{},"Tabellenbeschriftungen",": Tabellen ohne ",[15,3317,3318],{},"captionText"," für Screenreader",[1512,3321,3322,3325],{},[1415,3323,3324],{},"Alt-Texte von Bildern",": Karussellbilder ohne beschreibenden Alt-Text",[20,3327,3329],{"id":3328},"e-mail-analyse","E-Mail-Analyse",[11,3331,3332],{},"Analyse nach dem Rendern für Zustellbarkeit und Qualität:",[25,3334,3336],{"className":27,"code":3335,"language":29,"meta":30,"style":30},"import { analyzeEmail } from '@owlat\u002Femail-renderer';\n\nconst analysis = analyzeEmail(html, { subjectLine: 'Your order' });\n",[15,3337,3338,3351,3355],{"__ignoreMap":30},[34,3339,3340,3342,3345,3347,3349],{"class":36,"line":37},[34,3341,41],{"class":40},[34,3343,3344],{"class":44}," { analyzeEmail } ",[34,3346,48],{"class":40},[34,3348,52],{"class":51},[34,3350,55],{"class":44},[34,3352,3353],{"class":36,"line":58},[34,3354,80],{"emptyLinePlaceholder":79},[34,3356,3357,3359,3362,3364,3367,3370,3373],{"class":36,"line":76},[34,3358,86],{"class":40},[34,3360,3361],{"class":89}," analysis",[34,3363,219],{"class":40},[34,3365,3366],{"class":222}," analyzeEmail",[34,3368,3369],{"class":44},"(html, { subjectLine: ",[34,3371,3372],{"class":51},"'Your order'",[34,3374,1411],{"class":44},[704,3376,3378],{"id":3377},"metriken","Metriken",[291,3380,3381,3390],{},[294,3382,3383],{},[297,3384,3385,3388],{},[300,3386,3387],{},"Metrik",[300,3389,311],{},[313,3391,3392,3402,3412,3422,3432,3442,3452,3462,3472,3485,3498,3508],{},[297,3393,3394,3399],{},[318,3395,3396],{},[15,3397,3398],{},"htmlSizeBytes",[318,3400,3401],{},"Gesamtgröße des HTML",[297,3403,3404,3409],{},[318,3405,3406],{},[15,3407,3408],{},"exceedsGmailClip",[318,3410,3411],{},"Ob die E-Mail Gmails Clipping-Schwelle von 102 KB überschreitet",[297,3413,3414,3419],{},[318,3415,3416],{},[15,3417,3418],{},"tableNestingDepth",[318,3420,3421],{},"Maximale Tabellenverschachtelung (>10 kann zu Renderproblemen führen)",[297,3423,3424,3429],{},[318,3425,3426],{},[15,3427,3428],{},"imageCount",[318,3430,3431],{},"Gesamtzahl der Bilder (>20 löst eine Warnung aus)",[297,3433,3434,3439],{},[318,3435,3436],{},[15,3437,3438],{},"linkCount",[318,3440,3441],{},"Gesamtzahl der Links (>60 löst eine Spamfilter-Warnung aus)",[297,3443,3444,3449],{},[318,3445,3446],{},[15,3447,3448],{},"hasTextContent",[318,3450,3451],{},"Ob die E-Mail nennenswerten Text enthält (nicht nur Bilder)",[297,3453,3454,3459],{},[318,3455,3456],{},[15,3457,3458],{},"textToImageRatio",[318,3460,3461],{},"Zeichen je Bild (höher ist besser für die Zustellbarkeit)",[297,3463,3464,3469],{},[318,3465,3466],{},[15,3467,3468],{},"displayNoneCount",[318,3470,3471],{},"Verborgene Elemente über den Preheader hinaus (übermäßig = Spamsignal)",[297,3473,3474,3479],{},[318,3475,3476],{},[15,3477,3478],{},"styleBlockSizeBytes",[318,3480,3481,3482,3484],{},"Summierte Größe des Inhalts aller ",[15,3483,1356],{},"-Blöcke",[297,3486,3487,3492],{},[318,3488,3489],{},[15,3490,3491],{},"exceedsGmailCssLimit",[318,3493,3494,3495,3497],{},"Ob der ",[15,3496,1356],{},"-Block Gmails Grenze von ~8 KB überschreitet (Gmail entfernt dann den gesamten Block, wodurch responsives Layout und Dark Mode brechen)",[297,3499,3500,3505],{},[318,3501,3502],{},[15,3503,3504],{},"cssValidationIssues",[318,3506,3507],{},"Grundlegende CSS-Syntaxprobleme (unausgeglichene Klammern, nicht geschlossene Strings); entfällt, wenn keine vorliegen",[297,3509,3510,3515],{},[318,3511,3512],{},[15,3513,3514],{},"warnings",[318,3516,3517],{},"Array mit umsetzbaren Empfehlungen",[11,3519,3520,3521,3524,3525,3527,3528,3531,3532,1333,3535,3538,3539,1333,3542,3545],{},"Übergeben Sie eine ",[15,3522,3523],{},"subjectLine",", damit zusätzlich Betreffzeilen über 70 Zeichen (Gmail-Kürzung)\nund Betreffzeilen in GROSSBUCHSTABEN (Spamsignal) markiert werden. Das Array ",[15,3526,3514],{}," weist\ndarüber hinaus auf HTML hin, das in gängigen Clients bricht: ",[15,3529,3530],{},"position:absolute"," (von Gmail\nentfernt), ",[15,3533,3534],{},"\u003Cform>",[15,3536,3537],{},"\u003Cinput>","-Elemente (außerhalb von Apple Mail\u002FiOS entfernt) und\n",[15,3540,3541],{},"\u003Cvideo>",[15,3543,3544],{},"\u003Caudio>","-Tags (nur Apple Mail\u002FiOS).",[11,3547,3548,3549,3552,3553,3556,3557,3560],{},"Übergeben Sie ",[15,3550,3551],{},"{ includeBreakdown: true }",", um im Ergebnis ",[15,3554,3555],{},"sizeBreakdown"," (Größe je\nInhaltskategorie) und ",[15,3558,3559],{},"optimizations"," (Vorschläge mit geschätzter Byte-Ersparnis) zu\nbefüllen:",[25,3562,3564],{"className":27,"code":3563,"language":29,"meta":30,"style":30},"const analysis = analyzeEmail(html, { subjectLine: 'Your order', includeBreakdown: true });\n",[15,3565,3566],{"__ignoreMap":30},[34,3567,3568,3570,3572,3574,3576,3578,3580,3583,3585],{"class":36,"line":37},[34,3569,86],{"class":40},[34,3571,3361],{"class":89},[34,3573,219],{"class":40},[34,3575,3366],{"class":222},[34,3577,3369],{"class":44},[34,3579,3372],{"class":51},[34,3581,3582],{"class":44},", includeBreakdown: ",[34,3584,258],{"class":89},[34,3586,1411],{"class":44},[20,3588,3590],{"id":3589},"kompatibilitätsdaten-der-clients","Kompatibilitätsdaten der Clients",[11,3592,3593,3594,3597,3598,3600,3601,3604],{},"Die Feature- und Property-Kompatibilität je Block liegt in dem jeweiligen\nBlock-Modul (unter ",[15,3595,3596],{},"packages\u002Femail-renderer\u002Fsrc\u002Fblocks\u002F\u003Ctype>\u002F",") und wird über den\nCompatibility-Walker bereitgestellt, den ",[15,3599,17],{}," exportiert.\nDas Paket ",[15,3602,3603],{},"@owlat\u002Fshared"," besitzt weiterhin die übergreifenden Typen, die\nClient-Metadaten und die Erweiterungs-Registries für Plugins.",[25,3606,3608],{"className":27,"code":3607,"language":29,"meta":30,"style":30},"import {\n getBlockCompatibility,\n getPropertyCompatibility,\n getCriticalProperties,\n getClientPropertyIssues,\n} from '@owlat\u002Femail-renderer';\nimport { emailClients, registerBlockCompatibility } from '@owlat\u002Fshared';\n",[15,3609,3610,3616,3621,3626,3631,3636,3647],{"__ignoreMap":30},[34,3611,3612,3614],{"class":36,"line":37},[34,3613,41],{"class":40},[34,3615,722],{"class":44},[34,3617,3618],{"class":36,"line":58},[34,3619,3620],{"class":44}," getBlockCompatibility,\n",[34,3622,3623],{"class":36,"line":76},[34,3624,3625],{"class":44}," getPropertyCompatibility,\n",[34,3627,3628],{"class":36,"line":83},[34,3629,3630],{"class":44}," getCriticalProperties,\n",[34,3632,3633],{"class":36,"line":109},[34,3634,3635],{"class":44}," getClientPropertyIssues,\n",[34,3637,3638,3641,3643,3645],{"class":36,"line":115},[34,3639,3640],{"class":44},"} ",[34,3642,48],{"class":40},[34,3644,52],{"class":51},[34,3646,55],{"class":44},[34,3648,3649,3651,3654,3656,3658],{"class":36,"line":127},[34,3650,41],{"class":40},[34,3652,3653],{"class":44}," { emailClients, registerBlockCompatibility } ",[34,3655,48],{"class":40},[34,3657,71],{"class":51},[34,3659,55],{"class":44},[704,3661,3663],{"id":3662},"kompatibilität-je-block","Kompatibilität je Block",[25,3665,3667],{"className":27,"code":3666,"language":29,"meta":30,"style":30},"const compat = getBlockCompatibility('accordion');\n\u002F\u002F [{\n\u002F\u002F feature: 'CSS-only toggle',\n\u002F\u002F description: 'Expandable\u002Fcollapsible sections using :checked selector',\n\u002F\u002F support: { gmail: 'none', outlookDesktop: 'none', appleMail: 'full', ... },\n\u002F\u002F fallback: 'Falls back to all sections expanded in unsupported clients — content always visible',\n\u002F\u002F owlatHandled: true,\n\u002F\u002F canIEmailSlug: 'css-pseudo-class-checked',\n\u002F\u002F }, ...]\n",[15,3668,3669,3688,3693,3698,3703,3708,3713,3718,3723],{"__ignoreMap":30},[34,3670,3671,3673,3676,3678,3681,3683,3686],{"class":36,"line":37},[34,3672,86],{"class":40},[34,3674,3675],{"class":89}," compat",[34,3677,219],{"class":40},[34,3679,3680],{"class":222}," getBlockCompatibility",[34,3682,1481],{"class":44},[34,3684,3685],{"class":51},"'accordion'",[34,3687,1487],{"class":44},[34,3689,3690],{"class":36,"line":58},[34,3691,3692],{"class":1032},"\u002F\u002F [{\n",[34,3694,3695],{"class":36,"line":76},[34,3696,3697],{"class":1032},"\u002F\u002F feature: 'CSS-only toggle',\n",[34,3699,3700],{"class":36,"line":83},[34,3701,3702],{"class":1032},"\u002F\u002F description: 'Expandable\u002Fcollapsible sections using :checked selector',\n",[34,3704,3705],{"class":36,"line":109},[34,3706,3707],{"class":1032},"\u002F\u002F support: { gmail: 'none', outlookDesktop: 'none', appleMail: 'full', ... },\n",[34,3709,3710],{"class":36,"line":115},[34,3711,3712],{"class":1032},"\u002F\u002F fallback: 'Falls back to all sections expanded in unsupported clients — content always visible',\n",[34,3714,3715],{"class":36,"line":127},[34,3716,3717],{"class":1032},"\u002F\u002F owlatHandled: true,\n",[34,3719,3720],{"class":36,"line":138},[34,3721,3722],{"class":1032},"\u002F\u002F canIEmailSlug: 'css-pseudo-class-checked',\n",[34,3724,3725],{"class":36,"line":144},[34,3726,3727],{"class":1032},"\u002F\u002F }, ...]\n",[704,3729,3731],{"id":3730},"kompatibilität-je-eigenschaft","Kompatibilität je Eigenschaft",[25,3733,3735],{"className":27,"code":3734,"language":29,"meta":30,"style":30},"const props = getPropertyCompatibility('image', 'borderRadius');\n\u002F\u002F [{\n\u002F\u002F property: 'borderRadius',\n\u002F\u002F description: 'Rounded corners on images',\n\u002F\u002F support: { gmail: 'full', outlookDesktop: 'none', appleMail: 'full', ... },\n\u002F\u002F severity: 'warning',\n\u002F\u002F recommendation: 'Use PNG with baked-in corners for Outlook',\n\u002F\u002F owlatHandled: false,\n\u002F\u002F }]\n",[15,3736,3737,3760,3764,3769,3774,3779,3784,3789,3794],{"__ignoreMap":30},[34,3738,3739,3741,3744,3746,3749,3751,3753,3755,3758],{"class":36,"line":37},[34,3740,86],{"class":40},[34,3742,3743],{"class":89}," props",[34,3745,219],{"class":40},[34,3747,3748],{"class":222}," getPropertyCompatibility",[34,3750,1481],{"class":44},[34,3752,1585],{"class":51},[34,3754,640],{"class":44},[34,3756,3757],{"class":51},"'borderRadius'",[34,3759,1487],{"class":44},[34,3761,3762],{"class":36,"line":58},[34,3763,3692],{"class":1032},[34,3765,3766],{"class":36,"line":76},[34,3767,3768],{"class":1032},"\u002F\u002F property: 'borderRadius',\n",[34,3770,3771],{"class":36,"line":83},[34,3772,3773],{"class":1032},"\u002F\u002F description: 'Rounded corners on images',\n",[34,3775,3776],{"class":36,"line":109},[34,3777,3778],{"class":1032},"\u002F\u002F support: { gmail: 'full', outlookDesktop: 'none', appleMail: 'full', ... },\n",[34,3780,3781],{"class":36,"line":115},[34,3782,3783],{"class":1032},"\u002F\u002F severity: 'warning',\n",[34,3785,3786],{"class":36,"line":127},[34,3787,3788],{"class":1032},"\u002F\u002F recommendation: 'Use PNG with baked-in corners for Outlook',\n",[34,3790,3791],{"class":36,"line":138},[34,3792,3793],{"class":1032},"\u002F\u002F owlatHandled: false,\n",[34,3795,3796],{"class":36,"line":144},[34,3797,3798],{"class":1032},"\u002F\u002F }]\n",[704,3800,3802],{"id":3801},"schweregrade","Schweregrade",[1509,3804,3805,3811,3817],{},[1512,3806,3807,3810],{},[1415,3808,3809],{},"critical"," — Funktion in großen Clients vollständig kaputt, kein Fallback",[1512,3812,3813,3816],{},[1415,3814,3815],{},"warning"," — in manchen Clients eingeschränkt, Fallback vorhanden",[1512,3818,3819,3822],{},[1415,3820,3821],{},"info"," — geringfügige visuelle Unterschiede, unbedenklich",[704,3824,3826],{"id":3825},"unterstützte-clients","Unterstützte Clients",[11,3828,3829],{},"Gmail (Web), Gmail (mobile App), Outlook Desktop (Classic), Outlook 365 (Web), Outlook (New), Outlook (Mac), Apple Mail, iOS Mail, Yahoo Mail, Samsung Mail, Thunderbird, ProtonMail.",[20,3831,3833],{"id":3832},"amp-for-email","AMP for Email",[11,3835,3836],{},"Erzeugen Sie AMP4Email-kompatibles HTML als drittes Format neben HTML und Klartext. AMP-E-Mails unterstützen interaktive Komponenten (Accordion, Karussell) in den entsprechenden Clients nativ.",[25,3838,3840],{"className":27,"code":3839,"language":29,"meta":30,"style":30},"import { renderAmpEmail } from '@owlat\u002Femail-renderer';\n\nconst amp = renderAmpEmail(blocks, {\n title: 'Your weekly update',\n baseWidth: 600,\n lang: 'en',\n});\n",[15,3841,3842,3855,3859,3873,3883,3892,3901],{"__ignoreMap":30},[34,3843,3844,3846,3849,3851,3853],{"class":36,"line":37},[34,3845,41],{"class":40},[34,3847,3848],{"class":44}," { renderAmpEmail } ",[34,3850,48],{"class":40},[34,3852,52],{"class":51},[34,3854,55],{"class":44},[34,3856,3857],{"class":36,"line":58},[34,3858,80],{"emptyLinePlaceholder":79},[34,3860,3861,3863,3866,3868,3871],{"class":36,"line":76},[34,3862,86],{"class":40},[34,3864,3865],{"class":89}," amp",[34,3867,219],{"class":40},[34,3869,3870],{"class":222}," renderAmpEmail",[34,3872,226],{"class":44},[34,3874,3875,3878,3881],{"class":36,"line":83},[34,3876,3877],{"class":44}," title: ",[34,3879,3880],{"class":51},"'Your weekly update'",[34,3882,124],{"class":44},[34,3884,3885,3888,3890],{"class":36,"line":109},[34,3886,3887],{"class":44}," baseWidth: ",[34,3889,408],{"class":89},[34,3891,124],{"class":44},[34,3893,3894,3897,3899],{"class":36,"line":115},[34,3895,3896],{"class":44}," lang: ",[34,3898,466],{"class":51},[34,3900,124],{"class":44},[34,3902,3903],{"class":36,"line":127},[34,3904,266],{"class":44},[11,3906,3907,3908,640,3911,3914,3915,3918],{},"Der AMP-Renderer ersetzt die rein CSS-basierten interaktiven Komponenten (Accordion, Karussell) durch ihre AMP-Entsprechungen (",[15,3909,3910],{},"amp-accordion",[15,3912,3913],{},"amp-carousel","). Layoutblöcke (columns, hero, container) rekursieren in ihre Kinder; tabellenbasierte Blöcke (table, list, progress bar, menu) verwenden ihr AMP-gültiges Markup weiter; und bildhaltige Blöcke (image, social, video) geben ",[15,3916,3917],{},"\u003Camp-img>"," aus. Der einzige Block ohne AMP-Entsprechung ist der Raw-HTML-Block — AMP verbietet beliebiges HTML, daher entfällt er in der AMP-Ausgabe.",[11,3920,3921,3924,3925,3928],{},[1415,3922,3923],{},"Zustellung:"," Wenn Sie eine blockbasiert gestaltete Postbox-E-Mail senden, die einen interaktiven Block (Accordion\u002FKarussell) verwendet, wird das AMP-Rendering automatisch als alternativer Teil ",[15,3926,3927],{},"text\u002Fx-amp-html"," neben den HTML- und Klartextteilen angehängt. AMP-fähige Clients zeigen die interaktive Fassung, alle anderen fallen auf das HTML zurück. (Designs ohne interaktiven Block werden nur mit HTML + Text ausgeliefert — die AMP-Variante wäre Byte für Byte gleichwertig.)",[11,3930,3931,3934],{},[1415,3932,3933],{},"Client-Unterstützung:"," Gmail (Web & mobil), Yahoo Mail, Mail.ru, FairEmail. Die meisten anderen Clients zeigen den HTML-Fallback aus der Multipart-Nachricht.",[20,3936,3938],{"id":3937},"template-diff","Template-Diff",[11,3940,3941],{},"Vergleichen Sie zwei gerenderte HTML-Strings und erkennen Sie strukturelle Änderungen. Nützlich für die Versionierung von Templates, die Überprüfung von A\u002FB-Tests und die Regressionserkennung.",[25,3943,3945],{"className":27,"code":3944,"language":29,"meta":30,"style":30},"import { diffEmails } from '@owlat\u002Femail-renderer';\n\nconst diff = diffEmails(oldHtml, newHtml);\n\nif (!diff.identical) {\n console.log(`${diff.changes.length} changes detected (${diff.sizeDelta > 0 ? '+' : ''}${diff.sizeDelta} bytes)`);\n for (const change of diff.changes) {\n console.log(`[${change.type}] ${change.category}: ${change.description}`);\n }\n}\n",[15,3946,3947,3960,3964,3979,3983,3996,4059,4076,4117,4122],{"__ignoreMap":30},[34,3948,3949,3951,3954,3956,3958],{"class":36,"line":37},[34,3950,41],{"class":40},[34,3952,3953],{"class":44}," { diffEmails } ",[34,3955,48],{"class":40},[34,3957,52],{"class":51},[34,3959,55],{"class":44},[34,3961,3962],{"class":36,"line":58},[34,3963,80],{"emptyLinePlaceholder":79},[34,3965,3966,3968,3971,3973,3976],{"class":36,"line":76},[34,3967,86],{"class":40},[34,3969,3970],{"class":89}," diff",[34,3972,219],{"class":40},[34,3974,3975],{"class":222}," diffEmails",[34,3977,3978],{"class":44},"(oldHtml, newHtml);\n",[34,3980,3981],{"class":36,"line":83},[34,3982,80],{"emptyLinePlaceholder":79},[34,3984,3985,3988,3990,3993],{"class":36,"line":109},[34,3986,3987],{"class":40},"if",[34,3989,3115],{"class":44},[34,3991,3992],{"class":40},"!",[34,3994,3995],{"class":44},"diff.identical) {\n",[34,3997,3998,4000,4002,4004,4007,4010,4012,4015,4017,4020,4023,4025,4027,4030,4033,4036,4039,4042,4045,4048,4050,4052,4054,4057],{"class":36,"line":115},[34,3999,3131],{"class":44},[34,4001,3134],{"class":222},[34,4003,1481],{"class":44},[34,4005,4006],{"class":51},"`${",[34,4008,4009],{"class":44},"diff",[34,4011,1503],{"class":51},[34,4013,4014],{"class":44},"changes",[34,4016,1503],{"class":51},[34,4018,4019],{"class":89},"length",[34,4021,4022],{"class":51},"} changes detected (${",[34,4024,4009],{"class":44},[34,4026,1503],{"class":51},[34,4028,4029],{"class":44},"sizeDelta",[34,4031,4032],{"class":40}," >",[34,4034,4035],{"class":89}," 0",[34,4037,4038],{"class":40}," ?",[34,4040,4041],{"class":51}," '+'",[34,4043,4044],{"class":40}," :",[34,4046,4047],{"class":51}," ''}${",[34,4049,4009],{"class":44},[34,4051,1503],{"class":51},[34,4053,4029],{"class":44},[34,4055,4056],{"class":51},"} bytes)`",[34,4058,1487],{"class":44},[34,4060,4061,4064,4066,4068,4071,4073],{"class":36,"line":127},[34,4062,4063],{"class":40}," for",[34,4065,3115],{"class":44},[34,4067,86],{"class":40},[34,4069,4070],{"class":89}," change",[34,4072,3123],{"class":40},[34,4074,4075],{"class":44}," diff.changes) {\n",[34,4077,4078,4081,4083,4085,4087,4090,4092,4095,4097,4099,4101,4104,4106,4108,4110,4113,4115],{"class":36,"line":138},[34,4079,4080],{"class":44}," console.",[34,4082,3134],{"class":222},[34,4084,1481],{"class":44},[34,4086,3139],{"class":51},[34,4088,4089],{"class":44},"change",[34,4091,1503],{"class":51},[34,4093,4094],{"class":44},"type",[34,4096,3150],{"class":51},[34,4098,4089],{"class":44},[34,4100,1503],{"class":51},[34,4102,4103],{"class":44},"category",[34,4105,3159],{"class":51},[34,4107,4089],{"class":44},[34,4109,1503],{"class":51},[34,4111,4112],{"class":44},"description",[34,4114,3169],{"class":51},[34,4116,1487],{"class":44},[34,4118,4119],{"class":36,"line":144},[34,4120,4121],{"class":44}," }\n",[34,4123,4124],{"class":36,"line":155},[34,4125,1086],{"class":44},[11,4127,4128,4129,3115,4131,640,4134,640,4137,4140,4141,3115,4143,640,4145,640,4147,640,4149,640,4152,640,4155,4158,4159,4162],{},"Jede Änderung enthält einen ",[15,4130,4094],{},[15,4132,4133],{},"added",[15,4135,4136],{},"removed",[15,4138,4139],{},"modified","), eine ",[15,4142,4103],{},[15,4144,276],{},[15,4146,1360],{},[15,4148,1139],{},[15,4150,4151],{},"link",[15,4153,4154],{},"structure",[15,4156,4157],{},"meta",") und zusammenfassende ",[15,4160,4161],{},"stats"," mit Zählern je Kategorie.",[20,4164,4166],{"id":4165},"block-module","Block-Module",[11,4168,4169,4170,4173,4174,4177,4178,4181,4182,4185,4186,4189,4190,1503],{},"Jeder eingebaute Blocktyp ist ein ",[1415,4171,4172],{},"Block-Modul"," — eine einzelne Vertikale, die\nHTML, Klartext, AMP, Validierung, die Factory für Standardinhalte, Platzierungs-\nMetadaten und Kompatibilitätsdaten dieses Typs besitzt. Module registrieren sich beim\nLaden des Pakets selbst (siehe ",[15,4175,4176],{},"packages\u002Femail-renderer\u002Fsrc\u002Fblocks\u002F_builtin-modules.ts","),\nund der Walker in ",[15,4179,4180],{},"packages\u002Femail-renderer\u002Fsrc\u002Fblocks\u002Findex.ts"," verteilt nach\n",[15,4183,4184],{},"block.type",". Jedes Modul liegt in einem eigenen Verzeichnis, z. B. exportiert\n",[15,4187,4188],{},"packages\u002Femail-renderer\u002Fsrc\u002Fblocks\u002Ftext\u002Findex.ts"," das ",[15,4191,4192],{},"textModule",[11,4194,4195,4196,4199,4200,4203,4204,4207],{},"Das ist die moderne Erweiterungs-API. Um einen eigenen Blocktyp auszuliefern, implementieren\nSie ",[15,4197,4198],{},"BlockModule\u003CT>"," (definiert in ",[15,4201,4202],{},"packages\u002Femail-renderer\u002Fsrc\u002Fblocks\u002F_module.ts",")\nund registrieren ihn mit ",[15,4205,4206],{},"registerBlockModule()",", bevor die Registry eingefroren wird:",[25,4209,4211],{"className":27,"code":4210,"language":29,"meta":30,"style":30},"import {\n registerBlockModule,\n finalizeBlockRegistry,\n} from '@owlat\u002Femail-renderer';\nimport type { BlockModule } from '@owlat\u002Femail-renderer';\n\nconst ratingModule: BlockModule\u003C'rating'> = {\n type: 'rating',\n \u002F\u002F Inner HTML only — the Walker wraps it for the placement.\n html({ content, ctx }) {\n const { value, maxValue } = content as { value: number; maxValue: number };\n const stars = '★'.repeat(value) + '☆'.repeat(maxValue - value);\n return `\u003Ctr>\u003Ctd align=\"center\" style=\"font-size:24px;padding:${ctx.theme.spacingUnit ?? 8}px 0\">${stars}\u003C\u002Ftd>\u003C\u002Ftr>`;\n },\n \u002F\u002F Optional: plaintext, amp, validate, isEmpty, layout, applyTheme,\n \u002F\u002F responsiveCss, compatibility, createDefault, placements.\n};\n\nregisterBlockModule(ratingModule);\nfinalizeBlockRegistry(); \u002F\u002F prevents further registration\n",[15,4212,4213,4219,4224,4229,4239,4254,4258,4282,4290,4295,4314,4357,4396,4431,4435,4440,4445,4449,4453,4461],{"__ignoreMap":30},[34,4214,4215,4217],{"class":36,"line":37},[34,4216,41],{"class":40},[34,4218,722],{"class":44},[34,4220,4221],{"class":36,"line":58},[34,4222,4223],{"class":44}," registerBlockModule,\n",[34,4225,4226],{"class":36,"line":76},[34,4227,4228],{"class":44}," finalizeBlockRegistry,\n",[34,4230,4231,4233,4235,4237],{"class":36,"line":83},[34,4232,3640],{"class":44},[34,4234,48],{"class":40},[34,4236,52],{"class":51},[34,4238,55],{"class":44},[34,4240,4241,4243,4245,4248,4250,4252],{"class":36,"line":109},[34,4242,41],{"class":40},[34,4244,63],{"class":40},[34,4246,4247],{"class":44}," { BlockModule } ",[34,4249,48],{"class":40},[34,4251,52],{"class":51},[34,4253,55],{"class":44},[34,4255,4256],{"class":36,"line":115},[34,4257,80],{"emptyLinePlaceholder":79},[34,4259,4260,4262,4265,4267,4270,4272,4275,4278,4280],{"class":36,"line":127},[34,4261,86],{"class":40},[34,4263,4264],{"class":89}," ratingModule",[34,4266,93],{"class":40},[34,4268,4269],{"class":96}," BlockModule",[34,4271,992],{"class":44},[34,4273,4274],{"class":51},"'rating'",[34,4276,4277],{"class":44},"> ",[34,4279,103],{"class":40},[34,4281,722],{"class":44},[34,4283,4284,4286,4288],{"class":36,"line":138},[34,4285,1582],{"class":44},[34,4287,4274],{"class":51},[34,4289,124],{"class":44},[34,4291,4292],{"class":36,"line":144},[34,4293,4294],{"class":1032}," \u002F\u002F Inner HTML only — the Walker wraps it for the placement.\n",[34,4296,4297,4300,4303,4306,4308,4311],{"class":36,"line":155},[34,4298,4299],{"class":222}," html",[34,4301,4302],{"class":44},"({ ",[34,4304,4305],{"class":727},"content",[34,4307,640],{"class":44},[34,4309,4310],{"class":727},"ctx",[34,4312,4313],{"class":44}," }) {\n",[34,4315,4316,4318,4320,4323,4325,4328,4330,4332,4335,4338,4340,4342,4344,4346,4348,4350,4352,4354],{"class":36,"line":166},[34,4317,2697],{"class":40},[34,4319,2806],{"class":44},[34,4321,4322],{"class":89},"value",[34,4324,640],{"class":44},[34,4326,4327],{"class":89},"maxValue",[34,4329,3096],{"class":44},[34,4331,103],{"class":40},[34,4333,4334],{"class":44}," content ",[34,4336,4337],{"class":40},"as",[34,4339,2806],{"class":44},[34,4341,4322],{"class":727},[34,4343,93],{"class":40},[34,4345,779],{"class":89},[34,4347,1029],{"class":44},[34,4349,4327],{"class":727},[34,4351,93],{"class":40},[34,4353,779],{"class":89},[34,4355,4356],{"class":44}," };\n",[34,4358,4359,4361,4364,4366,4369,4371,4374,4377,4380,4383,4385,4387,4390,4393],{"class":36,"line":177},[34,4360,2697],{"class":40},[34,4362,4363],{"class":89}," stars",[34,4365,219],{"class":40},[34,4367,4368],{"class":51}," '★'",[34,4370,1503],{"class":44},[34,4372,4373],{"class":222},"repeat",[34,4375,4376],{"class":44},"(value) ",[34,4378,4379],{"class":40},"+",[34,4381,4382],{"class":51}," '☆'",[34,4384,1503],{"class":44},[34,4386,4373],{"class":222},[34,4388,4389],{"class":44},"(maxValue ",[34,4391,4392],{"class":40},"-",[34,4394,4395],{"class":44}," value);\n",[34,4397,4398,4400,4403,4405,4407,4409,4411,4414,4417,4420,4423,4426,4429],{"class":36,"line":188},[34,4399,2750],{"class":40},[34,4401,4402],{"class":51}," `\u003Ctr>\u003Ctd align=\"center\" style=\"font-size:24px;padding:${",[34,4404,4310],{"class":44},[34,4406,1503],{"class":51},[34,4408,322],{"class":44},[34,4410,1503],{"class":51},[34,4412,4413],{"class":44},"spacingUnit",[34,4415,4416],{"class":40}," ??",[34,4418,4419],{"class":89}," 8",[34,4421,4422],{"class":51},"}px 0\">${",[34,4424,4425],{"class":44},"stars",[34,4427,4428],{"class":51},"}\u003C\u002Ftd>\u003C\u002Ftr>`",[34,4430,55],{"class":44},[34,4432,4433],{"class":36,"line":194},[34,4434,197],{"class":44},[34,4436,4437],{"class":36,"line":200},[34,4438,4439],{"class":1032}," \u002F\u002F Optional: plaintext, amp, validate, isEmpty, layout, applyTheme,\n",[34,4441,4442],{"class":36,"line":206},[34,4443,4444],{"class":1032}," \u002F\u002F responsiveCss, compatibility, createDefault, placements.\n",[34,4446,4447],{"class":36,"line":211},[34,4448,1644],{"class":44},[34,4450,4451],{"class":36,"line":229},[34,4452,80],{"emptyLinePlaceholder":79},[34,4454,4455,4458],{"class":36,"line":241},[34,4456,4457],{"class":222},"registerBlockModule",[34,4459,4460],{"class":44},"(ratingModule);\n",[34,4462,4463,4466,4469],{"class":36,"line":252},[34,4464,4465],{"class":222},"finalizeBlockRegistry",[34,4467,4468],{"class":44},"(); ",[34,4470,4471],{"class":1032},"\u002F\u002F prevents further registration\n",[704,4473,4475],{"id":4474},"oberfläche-eines-moduls","Oberfläche eines Moduls",[11,4477,4478,4479,4481,4482,4484,4485,1660,4487,4489],{},"Ein ",[15,4480,4198],{}," ist generisch über seinen Blocktyp, sodass ",[15,4483,4305],{}," auf\ndiese Variante eingegrenzt wird. Nur ",[15,4486,4094],{},[15,4488,1750],{}," sind erforderlich, alles andere ist optional.",[291,4491,4492,4502],{},[294,4493,4494],{},[297,4495,4496,4499],{},[300,4497,4498],{},"Member",[300,4500,4501],{},"Zweck",[313,4503,4504,4513,4523,4547,4557,4571,4585,4595,4605,4624,4634,4644,4657],{},[297,4505,4506,4510],{},[318,4507,4508],{},[15,4509,4094],{},[318,4511,4512],{},"Diskriminante des Blocktyps (erforderlich)",[297,4514,4515,4520],{},[318,4516,4517],{},[15,4518,4519],{},"html(args)",[318,4521,4522],{},"Inneres HTML des Blocks (erforderlich); das Umschließen für die Platzierung übernimmt der Walker",[297,4524,4525,4530],{},[318,4526,4527],{},[15,4528,4529],{},"placements",[318,4531,4532,4533,640,4536,640,4539,640,4541,4543,4544,653],{},"Platzierungen, die der Block zulässt: ",[15,4534,4535],{},"root",[15,4537,4538],{},"column",[15,4540,1205],{},[15,4542,1215],{}," (Standard ",[15,4545,4546],{},"['root']",[297,4548,4549,4554],{},[318,4550,4551],{},[15,4552,4553],{},"plaintext(args)",[318,4555,4556],{},"Klartextdarstellung für Multipart-E-Mails",[297,4558,4559,4564],{},[318,4560,4561],{},[15,4562,4563],{},"amp(args)",[318,4565,4566,4567,4570],{},"AMP4Email-Variante; ein Block wird aus der AMP-Ausgabe ausgeschlossen, indem ",[15,4568,4569],{},"undefined"," zurückgegeben wird",[297,4572,4573,4578],{},[318,4574,4575],{},[15,4576,4577],{},"validate(args)",[318,4579,4580,4581,4584],{},"Fachliche Validierung; wird automatisch in ",[15,4582,4583],{},"validateBlocks()"," eingebunden",[297,4586,4587,4592],{},[318,4588,4589],{},[15,4590,4591],{},"preflight(args)",[318,4593,4594],{},"Nicht fatale Warnungen zur Renderzeit",[297,4596,4597,4602],{},[318,4598,4599],{},[15,4600,4601],{},"isEmpty(content)",[318,4603,4604],{},"Lässt den Walker leere Blöcke vor dem Umschließen überspringen",[297,4606,4607,4612],{},[318,4608,4609],{},[15,4610,4611],{},"layout(content)",[318,4613,4614,4615,640,4618,640,4621,653],{},"Overrides für das Abschnittslayout (",[15,4616,4617],{},"background",[15,4619,4620],{},"padding",[15,4622,4623],{},"sectionMode",[297,4625,4626,4631],{},[318,4627,4628],{},[15,4629,4630],{},"applyTheme(content, theme)",[318,4632,4633],{},"Wendet vom Theme abgeleitete Standardwerte an; Werte auf Blockebene gewinnen immer",[297,4635,4636,4641],{},[318,4637,4638],{},[15,4639,4640],{},"responsiveCss(args)",[318,4642,4643],{},"Gibt responsives CSS je Block aus (z. B. mobile Schriftgröße)",[297,4645,4646,4651],{},[318,4647,4648],{},[15,4649,4650],{},"compatibility",[318,4652,4653,4656],{},[15,4654,4655],{},"{ features, properties }",", gelesen vom Compatibility-Walker",[297,4658,4659,4664],{},[318,4660,4661],{},[15,4662,4663],{},"createDefault(theme)",[318,4665,4666],{},"Standardinhalt für die „Block hinzufügen“-Aktion des Editors",[11,4668,4669,4670,640,4672,640,4674,4676,4677,4680,4681,4684,4685,124,4687,640,4690,640,4692,124,4695,1660,4698,1503],{},"Zusammengesetzte Blöcke (",[15,4671,1195],{},[15,4673,1205],{},[15,4675,1215],{},") rekursieren über den in ",[15,4678,4679],{},"args","\nübergebenen Rekursionseinstieg ",[15,4682,4683],{},"walk"," in ihre Kinder — sie rufen nie direkt andere\nModule auf. Die Helfer der Registry sind ",[15,4686,4457],{},[15,4688,4689],{},"unregisterBlockModule",[15,4691,4465],{},[15,4693,4694],{},"isBlockRegistryFrozen",[15,4696,4697],{},"moduleFor(type)",[15,4699,4700],{},"registeredBlockTypes()",[20,4702,4704],{"id":4703},"registry-für-eigene-blöcke-legacy","Registry für eigene Blöcke (Legacy)",[4706,4707,4709],"callout",{"title":4708,"type":3821},"Block-Module bevorzugen",[11,4710,4711,4712,4715,4716,4719,4720,4722,4723,4726],{},"Der Weg über ",[15,4713,4714],{},"registerBlock(type, renderer)"," weiter unten ist der Legacy-Fallback für\neigene Renderer, der aus Gründen der Abwärtskompatibilität erhalten bleibt. Neuer Code sollte\nstattdessen ein ",[15,4717,4718],{},"BlockModule"," implementieren und ",[15,4721,4206],{}," (siehe oben) aufrufen —\nein Modul besitzt HTML, Klartext, AMP, Validierung und Kompatibilität in einer Einheit, während ein\n",[15,4724,4725],{},"BlockRenderer"," nur HTML erzeugt.",[11,4728,4729],{},"Registrieren Sie eigene Block-Renderer für Blocktypen von Drittanbietern oder für anwendungsspezifische Typen. Eigene Blöcke werden neben den eingebauten Blöcken gerendert, können diese aber nicht überschreiben.",[704,4731,4733],{"id":4732},"einen-block-renderer-definieren","Einen Block-Renderer definieren",[11,4735,4736,4737,4739],{},"Eine ",[15,4738,4725],{},"-Funktion erhält den Blockinhalt, den Render-Kontext und das vollständige Blockobjekt und liefert einen HTML-String zurück:",[25,4741,4743],{"className":27,"code":4742,"language":29,"meta":30,"style":30},"import type { BlockRenderer, RenderContext } from '@owlat\u002Femail-renderer';\nimport type { EditorBlock } from '@owlat\u002Fshared';\n\nconst renderRating: BlockRenderer = (content, ctx, block) => {\n const { value, maxValue } = content as { value: number; maxValue: number };\n const stars = '★'.repeat(value) + '☆'.repeat(maxValue - value);\n return `\u003Ctr>\u003Ctd align=\"center\" style=\"font-size:24px;padding:${ctx.theme.spacingUnit ?? 8}px 0\">${stars}\u003C\u002Ftd>\u003C\u002Ftr>`;\n};\n",[15,4744,4745,4760,4774,4778,4812,4851,4881,4910],{"__ignoreMap":30},[34,4746,4747,4749,4751,4754,4756,4758],{"class":36,"line":37},[34,4748,41],{"class":40},[34,4750,63],{"class":40},[34,4752,4753],{"class":44}," { BlockRenderer, RenderContext } ",[34,4755,48],{"class":40},[34,4757,52],{"class":51},[34,4759,55],{"class":44},[34,4761,4762,4764,4766,4768,4770,4772],{"class":36,"line":58},[34,4763,41],{"class":40},[34,4765,63],{"class":40},[34,4767,66],{"class":44},[34,4769,48],{"class":40},[34,4771,71],{"class":51},[34,4773,55],{"class":44},[34,4775,4776],{"class":36,"line":76},[34,4777,80],{"emptyLinePlaceholder":79},[34,4779,4780,4782,4785,4787,4790,4792,4794,4796,4798,4800,4802,4805,4808,4810],{"class":36,"line":83},[34,4781,86],{"class":40},[34,4783,4784],{"class":222}," renderRating",[34,4786,93],{"class":40},[34,4788,4789],{"class":96}," BlockRenderer",[34,4791,219],{"class":40},[34,4793,3115],{"class":44},[34,4795,4305],{"class":727},[34,4797,640],{"class":44},[34,4799,4310],{"class":727},[34,4801,640],{"class":44},[34,4803,4804],{"class":727},"block",[34,4806,4807],{"class":44},") ",[34,4809,2690],{"class":40},[34,4811,722],{"class":44},[34,4813,4814,4817,4819,4821,4823,4825,4827,4829,4831,4833,4835,4837,4839,4841,4843,4845,4847,4849],{"class":36,"line":109},[34,4815,4816],{"class":40}," const",[34,4818,2806],{"class":44},[34,4820,4322],{"class":89},[34,4822,640],{"class":44},[34,4824,4327],{"class":89},[34,4826,3096],{"class":44},[34,4828,103],{"class":40},[34,4830,4334],{"class":44},[34,4832,4337],{"class":40},[34,4834,2806],{"class":44},[34,4836,4322],{"class":727},[34,4838,93],{"class":40},[34,4840,779],{"class":89},[34,4842,1029],{"class":44},[34,4844,4327],{"class":727},[34,4846,93],{"class":40},[34,4848,779],{"class":89},[34,4850,4356],{"class":44},[34,4852,4853,4855,4857,4859,4861,4863,4865,4867,4869,4871,4873,4875,4877,4879],{"class":36,"line":115},[34,4854,4816],{"class":40},[34,4856,4363],{"class":89},[34,4858,219],{"class":40},[34,4860,4368],{"class":51},[34,4862,1503],{"class":44},[34,4864,4373],{"class":222},[34,4866,4376],{"class":44},[34,4868,4379],{"class":40},[34,4870,4382],{"class":51},[34,4872,1503],{"class":44},[34,4874,4373],{"class":222},[34,4876,4389],{"class":44},[34,4878,4392],{"class":40},[34,4880,4395],{"class":44},[34,4882,4883,4886,4888,4890,4892,4894,4896,4898,4900,4902,4904,4906,4908],{"class":36,"line":127},[34,4884,4885],{"class":40}," return",[34,4887,4402],{"class":51},[34,4889,4310],{"class":44},[34,4891,1503],{"class":51},[34,4893,322],{"class":44},[34,4895,1503],{"class":51},[34,4897,4413],{"class":44},[34,4899,4416],{"class":40},[34,4901,4419],{"class":89},[34,4903,4422],{"class":51},[34,4905,4425],{"class":44},[34,4907,4428],{"class":51},[34,4909,55],{"class":44},[34,4911,4912],{"class":36,"line":138},[34,4913,1644],{"class":44},[704,4915,4917],{"id":4916},"registrieren-und-einfrieren","Registrieren und Einfrieren",[25,4919,4921],{"className":27,"code":4920,"language":29,"meta":30,"style":30},"import { registerBlock, finalizeRegistry } from '@owlat\u002Femail-renderer';\n\n\u002F\u002F Register during application setup\nregisterBlock('rating', renderRating);\n\n\u002F\u002F Freeze the registry to prevent runtime mutation\nfinalizeRegistry();\n",[15,4922,4923,4936,4940,4945,4957,4961,4966],{"__ignoreMap":30},[34,4924,4925,4927,4930,4932,4934],{"class":36,"line":37},[34,4926,41],{"class":40},[34,4928,4929],{"class":44}," { registerBlock, finalizeRegistry } ",[34,4931,48],{"class":40},[34,4933,52],{"class":51},[34,4935,55],{"class":44},[34,4937,4938],{"class":36,"line":58},[34,4939,80],{"emptyLinePlaceholder":79},[34,4941,4942],{"class":36,"line":76},[34,4943,4944],{"class":1032},"\u002F\u002F Register during application setup\n",[34,4946,4947,4950,4952,4954],{"class":36,"line":83},[34,4948,4949],{"class":222},"registerBlock",[34,4951,1481],{"class":44},[34,4953,4274],{"class":51},[34,4955,4956],{"class":44},", renderRating);\n",[34,4958,4959],{"class":36,"line":109},[34,4960,80],{"emptyLinePlaceholder":79},[34,4962,4963],{"class":36,"line":115},[34,4964,4965],{"class":1032},"\u002F\u002F Freeze the registry to prevent runtime mutation\n",[34,4967,4968,4971],{"class":36,"line":127},[34,4969,4970],{"class":222},"finalizeRegistry",[34,4972,2759],{"class":44},[11,4974,4975,4976,4979,4980,2976,4983,4986,4987,4990],{},"Nach dem Aufruf von ",[15,4977,4978],{},"finalizeRegistry()"," werfen weitere Aufrufe von ",[15,4981,4982],{},"registerBlock()",[15,4984,4985],{},"unregisterBlock()"," einen Fehler. Mit ",[15,4988,4989],{},"isRegistryFinalized()"," prüfen Sie den Einfrierzustand.",[704,4992,4994],{"id":4993},"eigene-blöcke-verwenden","Eigene Blöcke verwenden",[11,4996,4997],{},"Einmal registriert, rendern eigene Blöcke wie jeder eingebaute Block:",[25,4999,5001],{"className":27,"code":5000,"language":29,"meta":30,"style":30},"const blocks: EditorBlock[] = [\n {\n id: 'block-1',\n type: 'rating' as any,\n content: { value: 4, maxValue: 5 },\n },\n];\n\nconst html = renderEmailHtml(blocks);\n",[15,5002,5003,5019,5023,5031,5045,5060,5064,5068,5072],{"__ignoreMap":30},[34,5004,5005,5007,5009,5011,5013,5015,5017],{"class":36,"line":37},[34,5006,86],{"class":40},[34,5008,90],{"class":89},[34,5010,93],{"class":40},[34,5012,97],{"class":96},[34,5014,100],{"class":44},[34,5016,103],{"class":40},[34,5018,106],{"class":44},[34,5020,5021],{"class":36,"line":58},[34,5022,112],{"class":44},[34,5024,5025,5027,5029],{"class":36,"line":76},[34,5026,118],{"class":44},[34,5028,121],{"class":51},[34,5030,124],{"class":44},[34,5032,5033,5035,5037,5040,5043],{"class":36,"line":83},[34,5034,130],{"class":44},[34,5036,4274],{"class":51},[34,5038,5039],{"class":40}," as",[34,5041,5042],{"class":89}," any",[34,5044,124],{"class":44},[34,5046,5047,5050,5053,5056,5058],{"class":36,"line":109},[34,5048,5049],{"class":44}," content: { value: ",[34,5051,5052],{"class":89},"4",[34,5054,5055],{"class":44},", maxValue: ",[34,5057,2294],{"class":89},[34,5059,238],{"class":44},[34,5061,5062],{"class":36,"line":115},[34,5063,197],{"class":44},[34,5065,5066],{"class":36,"line":127},[34,5067,203],{"class":44},[34,5069,5070],{"class":36,"line":138},[34,5071,80],{"emptyLinePlaceholder":79},[34,5073,5074,5076,5078,5080,5082],{"class":36,"line":144},[34,5075,86],{"class":40},[34,5077,216],{"class":89},[34,5079,219],{"class":40},[34,5081,223],{"class":222},[34,5083,1384],{"class":44},[20,5085,5087],{"id":5086},"e-mail-gesundheitswert","E-Mail-Gesundheitswert",[11,5089,5090],{},"Berechnen Sie einen Gesamt-Gesundheitswert (0–100) über Kompatibilität, Barrierefreiheit, Zustellbarkeit und die Outlook-spezifische Unterstützung hinweg:",[25,5092,5094],{"className":27,"code":5093,"language":29,"meta":30,"style":30},"import { getEmailHealthScore, renderEmailHtml } from '@owlat\u002Femail-renderer';\n\nconst html = renderEmailHtml(blocks);\nconst health = getEmailHealthScore(blocks, html);\n\nconsole.log(`Score: ${health.overall}\u002F100`);\nconsole.log(`Compatibility: ${health.compatibility}`);\nconsole.log(`Accessibility: ${health.accessibility}`);\nconsole.log(`Deliverability: ${health.deliverability}`);\nconsole.log(`Outlook support: ${health.outlookSupport}`);\n\nfor (const rec of health.recommendations) {\n console.log(`[${rec.impact}] ${rec.category}: ${rec.message}`);\n}\n",[15,5095,5096,5109,5113,5125,5140,5144,5169,5190,5212,5234,5256,5260,5276,5314],{"__ignoreMap":30},[34,5097,5098,5100,5103,5105,5107],{"class":36,"line":37},[34,5099,41],{"class":40},[34,5101,5102],{"class":44}," { getEmailHealthScore, renderEmailHtml } ",[34,5104,48],{"class":40},[34,5106,52],{"class":51},[34,5108,55],{"class":44},[34,5110,5111],{"class":36,"line":58},[34,5112,80],{"emptyLinePlaceholder":79},[34,5114,5115,5117,5119,5121,5123],{"class":36,"line":76},[34,5116,86],{"class":40},[34,5118,216],{"class":89},[34,5120,219],{"class":40},[34,5122,223],{"class":222},[34,5124,1384],{"class":44},[34,5126,5127,5129,5132,5134,5137],{"class":36,"line":83},[34,5128,86],{"class":40},[34,5130,5131],{"class":89}," health",[34,5133,219],{"class":40},[34,5135,5136],{"class":222}," getEmailHealthScore",[34,5138,5139],{"class":44},"(blocks, html);\n",[34,5141,5142],{"class":36,"line":109},[34,5143,80],{"emptyLinePlaceholder":79},[34,5145,5146,5149,5151,5153,5156,5159,5161,5164,5167],{"class":36,"line":115},[34,5147,5148],{"class":44},"console.",[34,5150,3134],{"class":222},[34,5152,1481],{"class":44},[34,5154,5155],{"class":51},"`Score: ${",[34,5157,5158],{"class":44},"health",[34,5160,1503],{"class":51},[34,5162,5163],{"class":44},"overall",[34,5165,5166],{"class":51},"}\u002F100`",[34,5168,1487],{"class":44},[34,5170,5171,5173,5175,5177,5180,5182,5184,5186,5188],{"class":36,"line":127},[34,5172,5148],{"class":44},[34,5174,3134],{"class":222},[34,5176,1481],{"class":44},[34,5178,5179],{"class":51},"`Compatibility: ${",[34,5181,5158],{"class":44},[34,5183,1503],{"class":51},[34,5185,4650],{"class":44},[34,5187,3169],{"class":51},[34,5189,1487],{"class":44},[34,5191,5192,5194,5196,5198,5201,5203,5205,5208,5210],{"class":36,"line":138},[34,5193,5148],{"class":44},[34,5195,3134],{"class":222},[34,5197,1481],{"class":44},[34,5199,5200],{"class":51},"`Accessibility: ${",[34,5202,5158],{"class":44},[34,5204,1503],{"class":51},[34,5206,5207],{"class":44},"accessibility",[34,5209,3169],{"class":51},[34,5211,1487],{"class":44},[34,5213,5214,5216,5218,5220,5223,5225,5227,5230,5232],{"class":36,"line":144},[34,5215,5148],{"class":44},[34,5217,3134],{"class":222},[34,5219,1481],{"class":44},[34,5221,5222],{"class":51},"`Deliverability: ${",[34,5224,5158],{"class":44},[34,5226,1503],{"class":51},[34,5228,5229],{"class":44},"deliverability",[34,5231,3169],{"class":51},[34,5233,1487],{"class":44},[34,5235,5236,5238,5240,5242,5245,5247,5249,5252,5254],{"class":36,"line":155},[34,5237,5148],{"class":44},[34,5239,3134],{"class":222},[34,5241,1481],{"class":44},[34,5243,5244],{"class":51},"`Outlook support: ${",[34,5246,5158],{"class":44},[34,5248,1503],{"class":51},[34,5250,5251],{"class":44},"outlookSupport",[34,5253,3169],{"class":51},[34,5255,1487],{"class":44},[34,5257,5258],{"class":36,"line":166},[34,5259,80],{"emptyLinePlaceholder":79},[34,5261,5262,5264,5266,5268,5271,5273],{"class":36,"line":177},[34,5263,3112],{"class":40},[34,5265,3115],{"class":44},[34,5267,86],{"class":40},[34,5269,5270],{"class":89}," rec",[34,5272,3123],{"class":40},[34,5274,5275],{"class":44}," health.recommendations) {\n",[34,5277,5278,5280,5282,5284,5286,5289,5291,5294,5296,5298,5300,5302,5304,5306,5308,5310,5312],{"class":36,"line":188},[34,5279,3131],{"class":44},[34,5281,3134],{"class":222},[34,5283,1481],{"class":44},[34,5285,3139],{"class":51},[34,5287,5288],{"class":44},"rec",[34,5290,1503],{"class":51},[34,5292,5293],{"class":44},"impact",[34,5295,3150],{"class":51},[34,5297,5288],{"class":44},[34,5299,1503],{"class":51},[34,5301,4103],{"class":44},[34,5303,3159],{"class":51},[34,5305,5288],{"class":44},[34,5307,1503],{"class":51},[34,5309,3166],{"class":44},[34,5311,3169],{"class":51},[34,5313,1487],{"class":44},[34,5315,5316],{"class":36,"line":194},[34,5317,1086],{"class":44},[11,5319,5320,5322,5323,5325,5326,640,5328,640,5330,5332,5333,5336,5337,5325,5339,640,5342,2976,5345,1503],{},[15,5321,5163],{}," ist eine gewichtete Zusammenfassung der vier Teilwerte. Jede Empfehlung\nträgt eine ",[15,5324,4103],{}," aus ",[15,5327,4650],{},[15,5329,5207],{},[15,5331,5229],{}," oder\n",[15,5334,5335],{},"outlook"," sowie ein ",[15,5338,5293],{},[15,5340,5341],{},"high",[15,5343,5344],{},"medium",[15,5346,5347],{},"low",[20,5349,5351],{"id":5350},"client-simulatoren","Client-Simulatoren",[11,5353,5354,5355,5357,5358,5362],{},"Die Render-Option ",[15,5356,626],{}," (siehe ",[5359,5360,282],"a",{"href":5361},"#render-options",")\ndegradiert die Ausgabe bereits im Renderaufruf. Dieselben Degradierungs-Transformationen\nsind auch eigenständig verfügbar, sodass Sie jeden HTML-String nachbearbeiten können —\netwa um eine Vorschaugalerie nebeneinander zu erzeugen, ohne neu zu rendern:",[25,5364,5366],{"className":27,"code":5365,"language":29,"meta":30,"style":30},"import { simulateClient } from '@owlat\u002Femail-renderer';\n\nconst gmailView = simulateClient(html, 'gmail'); \u002F\u002F strips \u003Cstyle>, etc.\nconst outlookView = simulateClient(html, 'outlookDesktop');\n",[15,5367,5368,5381,5385,5409],{"__ignoreMap":30},[34,5369,5370,5372,5375,5377,5379],{"class":36,"line":37},[34,5371,41],{"class":40},[34,5373,5374],{"class":44}," { simulateClient } ",[34,5376,48],{"class":40},[34,5378,52],{"class":51},[34,5380,55],{"class":44},[34,5382,5383],{"class":36,"line":58},[34,5384,80],{"emptyLinePlaceholder":79},[34,5386,5387,5389,5392,5394,5397,5400,5403,5406],{"class":36,"line":76},[34,5388,86],{"class":40},[34,5390,5391],{"class":89}," gmailView",[34,5393,219],{"class":40},[34,5395,5396],{"class":222}," simulateClient",[34,5398,5399],{"class":44},"(html, ",[34,5401,5402],{"class":51},"'gmail'",[34,5404,5405],{"class":44},"); ",[34,5407,5408],{"class":1032},"\u002F\u002F strips \u003Cstyle>, etc.\n",[34,5410,5411,5413,5416,5418,5420,5422,5425],{"class":36,"line":83},[34,5412,86],{"class":40},[34,5414,5415],{"class":89}," outlookView",[34,5417,219],{"class":40},[34,5419,5396],{"class":222},[34,5421,5399],{"class":44},[34,5423,5424],{"class":51},"'outlookDesktop'",[34,5426,1487],{"class":44},[11,5428,5429,5430,640,5432,640,5434,124,5436,1660,5438,5440,5441,5443],{},"Eingebaute Simulatoren gibt es für ",[15,5431,639],{},[15,5433,643],{},[15,5435,646],{},[15,5437,649],{},[15,5439,652],{}," (die Union ",[15,5442,631],{},"). Unbekannte Clients reichen\ndas HTML unverändert durch.",[11,5445,5446,5447,93],{},"Die Registry ist erweiterbar. Installieren oder ersetzen Sie einen Simulator vor der Nutzung; die\nHelfer liegen in ",[15,5448,5449],{},"packages\u002Femail-renderer\u002Fsrc\u002Fsimulators\u002Fregistry.ts",[25,5451,5453],{"className":27,"code":5452,"language":29,"meta":30,"style":30},"import {\n registerClientSimulator,\n unregisterClientSimulator,\n clientSimulators,\n} from '@owlat\u002Femail-renderer';\nimport type { ClientSimulator } from '@owlat\u002Femail-renderer';\n\nconst myGmail: ClientSimulator = (html) => html.replace(\u002F\u003Cstyle[^>]*>[\\s\\S]*?\u003C\\\u002Fstyle>\u002Fgi, '');\nregisterClientSimulator('gmail', myGmail); \u002F\u002F replaces the built-in\n",[15,5454,5455,5461,5466,5471,5476,5486,5501,5505,5577],{"__ignoreMap":30},[34,5456,5457,5459],{"class":36,"line":37},[34,5458,41],{"class":40},[34,5460,722],{"class":44},[34,5462,5463],{"class":36,"line":58},[34,5464,5465],{"class":44}," registerClientSimulator,\n",[34,5467,5468],{"class":36,"line":76},[34,5469,5470],{"class":44}," unregisterClientSimulator,\n",[34,5472,5473],{"class":36,"line":83},[34,5474,5475],{"class":44}," clientSimulators,\n",[34,5477,5478,5480,5482,5484],{"class":36,"line":109},[34,5479,3640],{"class":44},[34,5481,48],{"class":40},[34,5483,52],{"class":51},[34,5485,55],{"class":44},[34,5487,5488,5490,5492,5495,5497,5499],{"class":36,"line":115},[34,5489,41],{"class":40},[34,5491,63],{"class":40},[34,5493,5494],{"class":44}," { ClientSimulator } ",[34,5496,48],{"class":40},[34,5498,52],{"class":51},[34,5500,55],{"class":44},[34,5502,5503],{"class":36,"line":127},[34,5504,80],{"emptyLinePlaceholder":79},[34,5506,5507,5509,5512,5514,5517,5519,5521,5523,5525,5527,5530,5533,5535,5538,5541,5544,5547,5550,5553,5556,5559,5561,5565,5568,5571,5573,5575],{"class":36,"line":138},[34,5508,86],{"class":40},[34,5510,5511],{"class":222}," myGmail",[34,5513,93],{"class":40},[34,5515,5516],{"class":96}," ClientSimulator",[34,5518,219],{"class":40},[34,5520,3115],{"class":44},[34,5522,1750],{"class":727},[34,5524,4807],{"class":44},[34,5526,2690],{"class":40},[34,5528,5529],{"class":44}," html.",[34,5531,5532],{"class":222},"replace",[34,5534,1481],{"class":44},[34,5536,5537],{"class":51},"\u002F\u003Cstyle",[34,5539,5540],{"class":89},"[",[34,5542,5543],{"class":40},"^",[34,5545,5546],{"class":89},">]",[34,5548,5549],{"class":40},"*",[34,5551,5552],{"class":51},">",[34,5554,5555],{"class":89},"[\\s\\S]",[34,5557,5558],{"class":40},"*?",[34,5560,992],{"class":51},[34,5562,5564],{"class":5563},"sT6gE","\\\u002F",[34,5566,5567],{"class":51},"style>\u002F",[34,5569,5570],{"class":40},"gi",[34,5572,640],{"class":44},[34,5574,370],{"class":51},[34,5576,1487],{"class":44},[34,5578,5579,5582,5584,5586,5589],{"class":36,"line":144},[34,5580,5581],{"class":222},"registerClientSimulator",[34,5583,1481],{"class":44},[34,5585,5402],{"class":51},[34,5587,5588],{"class":44},", myGmail); ",[34,5590,5591],{"class":1032},"\u002F\u002F replaces the built-in\n",[11,5593,4478,5594,5597,5598,1503],{},[15,5595,5596],{},"ClientSimulator"," ist eine Transformation ",[15,5599,5600],{},"(html: string) => string",[20,5602,5604],{"id":5603},"optimierungsvorschläge","Optimierungsvorschläge",[11,5606,5607],{},"Erhalten Sie umsetzbare Vorschläge zur Reduzierung der E-Mail-Größe:",[25,5609,5611],{"className":27,"code":5610,"language":29,"meta":30,"style":30},"import { suggestOptimizations } from '@owlat\u002Femail-renderer';\n\nconst suggestions = suggestOptimizations(html);\nfor (const s of suggestions) {\n console.log(`[${s.category}] ${s.description} (save ~${s.estimatedSavings} bytes)`);\n}\n",[15,5612,5613,5626,5630,5645,5661,5699],{"__ignoreMap":30},[34,5614,5615,5617,5620,5622,5624],{"class":36,"line":37},[34,5616,41],{"class":40},[34,5618,5619],{"class":44}," { suggestOptimizations } ",[34,5621,48],{"class":40},[34,5623,52],{"class":51},[34,5625,55],{"class":44},[34,5627,5628],{"class":36,"line":58},[34,5629,80],{"emptyLinePlaceholder":79},[34,5631,5632,5634,5637,5639,5642],{"class":36,"line":76},[34,5633,86],{"class":40},[34,5635,5636],{"class":89}," suggestions",[34,5638,219],{"class":40},[34,5640,5641],{"class":222}," suggestOptimizations",[34,5643,5644],{"class":44},"(html);\n",[34,5646,5647,5649,5651,5653,5656,5658],{"class":36,"line":83},[34,5648,3112],{"class":40},[34,5650,3115],{"class":44},[34,5652,86],{"class":40},[34,5654,5655],{"class":89}," s",[34,5657,3123],{"class":40},[34,5659,5660],{"class":44}," suggestions) {\n",[34,5662,5663,5665,5667,5669,5671,5673,5675,5677,5679,5681,5683,5685,5688,5690,5692,5695,5697],{"class":36,"line":109},[34,5664,3131],{"class":44},[34,5666,3134],{"class":222},[34,5668,1481],{"class":44},[34,5670,3139],{"class":51},[34,5672,2818],{"class":44},[34,5674,1503],{"class":51},[34,5676,4103],{"class":44},[34,5678,3150],{"class":51},[34,5680,2818],{"class":44},[34,5682,1503],{"class":51},[34,5684,4112],{"class":44},[34,5686,5687],{"class":51},"} (save ~${",[34,5689,2818],{"class":44},[34,5691,1503],{"class":51},[34,5693,5694],{"class":44},"estimatedSavings",[34,5696,4056],{"class":51},[34,5698,1487],{"class":44},[34,5700,5701],{"class":36,"line":115},[34,5702,1086],{"class":44},[11,5704,5705,5706,5709,5710,5713,5714,5716,5717,5720],{},"Zu den Kategorien der Vorschläge zählen ",[15,5707,5708],{},"minification"," (Entfernen von Leerraum), ",[15,5711,5712],{},"vml"," (bedingte Outlook-Blöcke), ",[15,5715,2782],{}," (Inlining des Style-Blocks) und ",[15,5718,5719],{},"images"," (nicht optimierte Bilder).",[20,5722,5724],{"id":5723},"exporte","Exporte",[25,5726,5728],{"className":27,"code":5727,"language":29,"meta":30,"style":30},"\u002F\u002F Rendering\nexport { renderEmailHtml, renderBlockFragment } from '.\u002Frenderer';\nexport { renderAmpEmail } from '.\u002Famp';\nexport { renderPlainText } from '.\u002Fplaintext';\nexport { inlineCss } from '.\u002Finliner';\n\n\u002F\u002F Analysis & validation\nexport { analyzeEmail, getEmailHealthScore, suggestOptimizations } from '.\u002Fanalyzer';\nexport { validateBlocks, ValidationError } from '.\u002Fvalidator';\nexport { diffEmails } from '.\u002Fdiff';\n\n\u002F\u002F Block module API (modern extension path)\nexport {\n registerBlockModule, unregisterBlockModule, finalizeBlockRegistry,\n isBlockRegistryFrozen, moduleFor, registeredBlockTypes,\n} from '.\u002Fblocks\u002F_registry';\nexport type {\n BlockModule, BlockOf, ContentOf, Placement, RenderArgs,\n PlainArgs, AmpArgs, ValidateArgs, HtmlWalk, PlaintextWalk,\n} from '.\u002Fblocks\u002F_module';\n\n\u002F\u002F Legacy custom block registry (HTML-only renderers)\nexport { registerBlock, unregisterBlock, getRegisteredBlocks, finalizeRegistry, isRegistryFinalized } from '.\u002Fblocks';\nexport type { BlockRenderer } from '.\u002Fblocks';\n\n\u002F\u002F Client simulators\nexport {\n simulateClient, registerClientSimulator,\n unregisterClientSimulator, clientSimulators,\n} from '.\u002Fsimulators';\nexport type { ClientSimulator } from '.\u002Fsimulators';\n\n\u002F\u002F Compatibility (per-block data lives in Block modules, surfaced via the walker)\nexport {\n getBlockCompatibility, getPropertyCompatibility, getCriticalProperties,\n getHandledFeatures, getClientIssues, getClientPropertyIssues, getAudienceReach,\n scoreBlockCompatibility, getBlockLimitationSummary, getSafeBlockConfig,\n checkPropertyCompatibility, featuresFor, propertiesFor,\n allBlockTypes, allFeatures, allProperties,\n} from '.\u002Fcompatibility';\nexport type { BlockTaggedFeature, BlockTaggedProperty, BlockLimitation } from '.\u002Fcompatibility';\n\n\u002F\u002F Sanitization utilities\nexport { escapeHtml, escapeAttr, sanitizeUrl, sanitizeCss, sanitizeRawHtml } from '.\u002Fsanitize';\n\n\u002F\u002F Types\nexport type { RenderOptions, RenderContext, TargetClient, ValidationLevel, EmailHealthScore, EmailHealthRecommendation, GmailAnnotations } from '.\u002Ftypes';\nexport type { EmailAnalysis, EmailSizeBreakdown, OptimizationSuggestion } from '.\u002Fanalyzer';\nexport type { ValidationIssue, ValidateOptions } from '.\u002Fvalidator';\nexport type { EmailDiff, EmailDiffChange } from '.\u002Fdiff';\n",[15,5729,5730,5735,5750,5763,5776,5789,5793,5798,5812,5826,5839,5843,5848,5854,5859,5864,5875,5883,5888,5893,5904,5908,5913,5927,5942,5946,5951,5957,5962,5967,5978,5992,5997,6003,6010,6016,6022,6028,6034,6040,6052,6068,6073,6079,6094,6099,6105,6122,6138,6154],{"__ignoreMap":30},[34,5731,5732],{"class":36,"line":37},[34,5733,5734],{"class":1032},"\u002F\u002F Rendering\n",[34,5736,5737,5740,5743,5745,5748],{"class":36,"line":58},[34,5738,5739],{"class":40},"export",[34,5741,5742],{"class":44}," { renderEmailHtml, renderBlockFragment } ",[34,5744,48],{"class":40},[34,5746,5747],{"class":51}," '.\u002Frenderer'",[34,5749,55],{"class":44},[34,5751,5752,5754,5756,5758,5761],{"class":36,"line":76},[34,5753,5739],{"class":40},[34,5755,3848],{"class":44},[34,5757,48],{"class":40},[34,5759,5760],{"class":51}," '.\u002Famp'",[34,5762,55],{"class":44},[34,5764,5765,5767,5769,5771,5774],{"class":36,"line":83},[34,5766,5739],{"class":40},[34,5768,2898],{"class":44},[34,5770,48],{"class":40},[34,5772,5773],{"class":51}," '.\u002Fplaintext'",[34,5775,55],{"class":44},[34,5777,5778,5780,5782,5784,5787],{"class":36,"line":109},[34,5779,5739],{"class":40},[34,5781,1456],{"class":44},[34,5783,48],{"class":40},[34,5785,5786],{"class":51}," '.\u002Finliner'",[34,5788,55],{"class":44},[34,5790,5791],{"class":36,"line":115},[34,5792,80],{"emptyLinePlaceholder":79},[34,5794,5795],{"class":36,"line":127},[34,5796,5797],{"class":1032},"\u002F\u002F Analysis & validation\n",[34,5799,5800,5802,5805,5807,5810],{"class":36,"line":138},[34,5801,5739],{"class":40},[34,5803,5804],{"class":44}," { analyzeEmail, getEmailHealthScore, suggestOptimizations } ",[34,5806,48],{"class":40},[34,5808,5809],{"class":51}," '.\u002Fanalyzer'",[34,5811,55],{"class":44},[34,5813,5814,5816,5819,5821,5824],{"class":36,"line":144},[34,5815,5739],{"class":40},[34,5817,5818],{"class":44}," { validateBlocks, ValidationError } ",[34,5820,48],{"class":40},[34,5822,5823],{"class":51}," '.\u002Fvalidator'",[34,5825,55],{"class":44},[34,5827,5828,5830,5832,5834,5837],{"class":36,"line":155},[34,5829,5739],{"class":40},[34,5831,3953],{"class":44},[34,5833,48],{"class":40},[34,5835,5836],{"class":51}," '.\u002Fdiff'",[34,5838,55],{"class":44},[34,5840,5841],{"class":36,"line":166},[34,5842,80],{"emptyLinePlaceholder":79},[34,5844,5845],{"class":36,"line":177},[34,5846,5847],{"class":1032},"\u002F\u002F Block module API (modern extension path)\n",[34,5849,5850,5852],{"class":36,"line":188},[34,5851,5739],{"class":40},[34,5853,722],{"class":44},[34,5855,5856],{"class":36,"line":194},[34,5857,5858],{"class":44}," registerBlockModule, unregisterBlockModule, finalizeBlockRegistry,\n",[34,5860,5861],{"class":36,"line":200},[34,5862,5863],{"class":44}," isBlockRegistryFrozen, moduleFor, registeredBlockTypes,\n",[34,5865,5866,5868,5870,5873],{"class":36,"line":206},[34,5867,3640],{"class":44},[34,5869,48],{"class":40},[34,5871,5872],{"class":51}," '.\u002Fblocks\u002F_registry'",[34,5874,55],{"class":44},[34,5876,5877,5879,5881],{"class":36,"line":211},[34,5878,5739],{"class":40},[34,5880,63],{"class":40},[34,5882,722],{"class":44},[34,5884,5885],{"class":36,"line":229},[34,5886,5887],{"class":44}," BlockModule, BlockOf, ContentOf, Placement, RenderArgs,\n",[34,5889,5890],{"class":36,"line":241},[34,5891,5892],{"class":44}," PlainArgs, AmpArgs, ValidateArgs, HtmlWalk, PlaintextWalk,\n",[34,5894,5895,5897,5899,5902],{"class":36,"line":252},[34,5896,3640],{"class":44},[34,5898,48],{"class":40},[34,5900,5901],{"class":51}," '.\u002Fblocks\u002F_module'",[34,5903,55],{"class":44},[34,5905,5906],{"class":36,"line":263},[34,5907,80],{"emptyLinePlaceholder":79},[34,5909,5910],{"class":36,"line":939},[34,5911,5912],{"class":1032},"\u002F\u002F Legacy custom block registry (HTML-only renderers)\n",[34,5914,5915,5917,5920,5922,5925],{"class":36,"line":952},[34,5916,5739],{"class":40},[34,5918,5919],{"class":44}," { registerBlock, unregisterBlock, getRegisteredBlocks, finalizeRegistry, isRegistryFinalized } ",[34,5921,48],{"class":40},[34,5923,5924],{"class":51}," '.\u002Fblocks'",[34,5926,55],{"class":44},[34,5928,5929,5931,5933,5936,5938,5940],{"class":36,"line":964},[34,5930,5739],{"class":40},[34,5932,63],{"class":40},[34,5934,5935],{"class":44}," { BlockRenderer } ",[34,5937,48],{"class":40},[34,5939,5924],{"class":51},[34,5941,55],{"class":44},[34,5943,5944],{"class":36,"line":976},[34,5945,80],{"emptyLinePlaceholder":79},[34,5947,5948],{"class":36,"line":981},[34,5949,5950],{"class":1032},"\u002F\u002F Client simulators\n",[34,5952,5953,5955],{"class":36,"line":1019},[34,5954,5739],{"class":40},[34,5956,722],{"class":44},[34,5958,5959],{"class":36,"line":1036},[34,5960,5961],{"class":44}," simulateClient, registerClientSimulator,\n",[34,5963,5964],{"class":36,"line":1052},[34,5965,5966],{"class":44}," unregisterClientSimulator, clientSimulators,\n",[34,5968,5969,5971,5973,5976],{"class":36,"line":1067},[34,5970,3640],{"class":44},[34,5972,48],{"class":40},[34,5974,5975],{"class":51}," '.\u002Fsimulators'",[34,5977,55],{"class":44},[34,5979,5980,5982,5984,5986,5988,5990],{"class":36,"line":1083},[34,5981,5739],{"class":40},[34,5983,63],{"class":40},[34,5985,5494],{"class":44},[34,5987,48],{"class":40},[34,5989,5975],{"class":51},[34,5991,55],{"class":44},[34,5993,5995],{"class":36,"line":5994},32,[34,5996,80],{"emptyLinePlaceholder":79},[34,5998,6000],{"class":36,"line":5999},33,[34,6001,6002],{"class":1032},"\u002F\u002F Compatibility (per-block data lives in Block modules, surfaced via the walker)\n",[34,6004,6006,6008],{"class":36,"line":6005},34,[34,6007,5739],{"class":40},[34,6009,722],{"class":44},[34,6011,6013],{"class":36,"line":6012},35,[34,6014,6015],{"class":44}," getBlockCompatibility, getPropertyCompatibility, getCriticalProperties,\n",[34,6017,6019],{"class":36,"line":6018},36,[34,6020,6021],{"class":44}," getHandledFeatures, getClientIssues, getClientPropertyIssues, getAudienceReach,\n",[34,6023,6025],{"class":36,"line":6024},37,[34,6026,6027],{"class":44}," scoreBlockCompatibility, getBlockLimitationSummary, getSafeBlockConfig,\n",[34,6029,6031],{"class":36,"line":6030},38,[34,6032,6033],{"class":44}," checkPropertyCompatibility, featuresFor, propertiesFor,\n",[34,6035,6037],{"class":36,"line":6036},39,[34,6038,6039],{"class":44}," allBlockTypes, allFeatures, allProperties,\n",[34,6041,6043,6045,6047,6050],{"class":36,"line":6042},40,[34,6044,3640],{"class":44},[34,6046,48],{"class":40},[34,6048,6049],{"class":51}," '.\u002Fcompatibility'",[34,6051,55],{"class":44},[34,6053,6055,6057,6059,6062,6064,6066],{"class":36,"line":6054},41,[34,6056,5739],{"class":40},[34,6058,63],{"class":40},[34,6060,6061],{"class":44}," { BlockTaggedFeature, BlockTaggedProperty, BlockLimitation } ",[34,6063,48],{"class":40},[34,6065,6049],{"class":51},[34,6067,55],{"class":44},[34,6069,6071],{"class":36,"line":6070},42,[34,6072,80],{"emptyLinePlaceholder":79},[34,6074,6076],{"class":36,"line":6075},43,[34,6077,6078],{"class":1032},"\u002F\u002F Sanitization utilities\n",[34,6080,6082,6084,6087,6089,6092],{"class":36,"line":6081},44,[34,6083,5739],{"class":40},[34,6085,6086],{"class":44}," { escapeHtml, escapeAttr, sanitizeUrl, sanitizeCss, sanitizeRawHtml } ",[34,6088,48],{"class":40},[34,6090,6091],{"class":51}," '.\u002Fsanitize'",[34,6093,55],{"class":44},[34,6095,6097],{"class":36,"line":6096},45,[34,6098,80],{"emptyLinePlaceholder":79},[34,6100,6102],{"class":36,"line":6101},46,[34,6103,6104],{"class":1032},"\u002F\u002F Types\n",[34,6106,6108,6110,6112,6115,6117,6120],{"class":36,"line":6107},47,[34,6109,5739],{"class":40},[34,6111,63],{"class":40},[34,6113,6114],{"class":44}," { RenderOptions, RenderContext, TargetClient, ValidationLevel, EmailHealthScore, EmailHealthRecommendation, GmailAnnotations } ",[34,6116,48],{"class":40},[34,6118,6119],{"class":51}," '.\u002Ftypes'",[34,6121,55],{"class":44},[34,6123,6125,6127,6129,6132,6134,6136],{"class":36,"line":6124},48,[34,6126,5739],{"class":40},[34,6128,63],{"class":40},[34,6130,6131],{"class":44}," { EmailAnalysis, EmailSizeBreakdown, OptimizationSuggestion } ",[34,6133,48],{"class":40},[34,6135,5809],{"class":51},[34,6137,55],{"class":44},[34,6139,6141,6143,6145,6148,6150,6152],{"class":36,"line":6140},49,[34,6142,5739],{"class":40},[34,6144,63],{"class":40},[34,6146,6147],{"class":44}," { ValidationIssue, ValidateOptions } ",[34,6149,48],{"class":40},[34,6151,5823],{"class":51},[34,6153,55],{"class":44},[34,6155,6157,6159,6161,6164,6166,6168],{"class":36,"line":6156},50,[34,6158,5739],{"class":40},[34,6160,63],{"class":40},[34,6162,6163],{"class":44}," { EmailDiff, EmailDiffChange } ",[34,6165,48],{"class":40},[34,6167,5836],{"class":51},[34,6169,55],{"class":44},[11,6171,6172,6173,124,6176,6179,6180,6183,6184,6186],{},"Die Erweiterungspunkte für Plugins rund um Kompatibilitätsmetadaten — ",[15,6174,6175],{},"registerEmailClient",[15,6177,6178],{},"registerBlockCompatibility"," und die Registry ",[15,6181,6182],{},"emailClients"," — leben in\n",[15,6185,3603],{},", nicht in diesem Paket.",[20,6188,6190],{"id":6189},"dateistruktur","Dateistruktur",[25,6192,6195],{"className":6193,"code":6194,"language":276},[274],"packages\u002Femail-renderer\u002Fsrc\u002F\n├── index.ts # Public package surface (see Exports)\n├── renderer.ts # Main entry: renderEmailHtml, renderBlockFragment\n├── boilerplate.ts # HTML document wrapper (DOCTYPE, head, MSO tables)\n├── styles.ts # CSS generation (resets, media queries, dark mode)\n├── inliner.ts # CSS inlining engine\n├── outlook.ts # VML helpers (roundrect, background images)\n├── plaintext.ts # Plain text renderer\n├── amp.ts # AMP for Email renderer\n├── diff.ts # Template diff\u002Fchange detection\n├── analyzer.ts # Post-render email analysis\n├── validator.ts # validateBlocks() orchestrator\n├── sanitize.ts # HTML\u002FCSS\u002FURL sanitization utilities\n├── types.ts # RenderOptions, RenderContext, EmailHealthScore, ...\n├── helpers\u002F\n│ ├── index.ts\n│ ├── table.ts # Table column width helpers\n│ ├── gradient.ts # Gradient CSS\u002FVML generation\n│ ├── dimensions.ts # Width\u002Fheight calculation helpers\n│ ├── padding.ts # Padding shorthand helpers\n│ ├── inline-styles.ts # Inline style string builders\n│ ├── linkTransform.ts # Link URL rewriting\n│ ├── text.ts # Text\u002FHTML helpers\n│ └── validation.ts # Shared validation helpers\n├── validators\u002F\n│ ├── index.ts\n│ └── registry.ts # Block validator registry (bridges module.validate)\n├── compatibility\u002F\n│ ├── index.ts # getBlockCompatibility, scoreBlockCompatibility, ...\n│ ├── scoring.ts # Compatibility\u002Faudience-reach scoring\n│ ├── ui.ts # Builder-UI limitation summaries & fix suggestions\n│ └── walker.ts # Dispatches over registered Block modules\n├── simulators\u002F\n│ ├── index.ts # simulateClient + registry re-exports\n│ ├── registry.ts # registerClientSimulator \u002F clientSimulators\n│ ├── gmail.ts\n│ ├── outlookDesktop.ts\n│ ├── outlookNew.ts\n│ ├── appleMail.ts\n│ └── yahooMail.ts\n├── preview\u002F\n│ ├── fixtures.ts # Sample blocks for preview generation\n│ ├── generate.ts\n│ └── assets\u002F\n└── blocks\u002F\n ├── index.ts # Walker: dispatches by block.type, owns placement wrapping\n ├── _module.ts # BlockModule\u003CT> interface + arg\u002Fwalk types\n ├── _registry.ts # registerBlockModule, moduleFor, finalizeBlockRegistry\n ├── _builtin-modules.ts # Side-effect registration of all 17 built-in modules\n ├── text\u002Findex.ts # exports textModule\n ├── image\u002Findex.ts # exports imageModule (srcset, dark swap)\n ├── button\u002Findex.ts # exports buttonModule (VML bulletproof)\n ├── divider\u002Findex.ts\n ├── spacer\u002Findex.ts\n ├── columns\u002Findex.ts # stacking, reverse, gap\n ├── social\u002Findex.ts\n ├── container\u002Findex.ts # nesting, VML bg\n ├── hero\u002Findex.ts # VML bg image\n ├── table\u002Findex.ts # rich cells, colSpan\u002FrowSpan\n ├── accordion\u002Findex.ts # CSS-only toggle\n ├── menu\u002Findex.ts # hamburger\n ├── carousel\u002Findex.ts # CSS-only radio nav\n ├── list\u002Findex.ts # table-based\n ├── progressBar\u002Findex.ts\n ├── rawHtml\u002Findex.ts\n └── video\u002Findex.ts\n",[15,6196,6194],{"__ignoreMap":30},[11,6198,6199,6200,6203,6204,6207,6208,4189,6211,6213,6214,6217],{},"Jedes Blockverzeichnis enthält eine ",[15,6201,6202],{},"index.ts",", die ein ",[15,6205,6206],{},"\u003Ctype>Module"," exportiert\n(z. B. exportiert ",[15,6209,6210],{},"text\u002Findex.ts",[15,6212,4192],{},"). Sie werden beim Laden des Pakets\ngesammelt von ",[15,6215,6216],{},"_builtin-modules.ts"," registriert.",[1360,6219,6220],{},"html pre.shiki code .s7YZ4, html code.shiki .s7YZ4{--shiki-default:#D73A49;--shiki-dark:#F47067}html pre.shiki code .sYgZi, html code.shiki .sYgZi{--shiki-default:#24292E;--shiki-dark:#ADBAC7}html pre.shiki code .s-HuK, html code.shiki .s-HuK{--shiki-default:#032F62;--shiki-dark:#96D0FF}html pre.shiki code .sviXB, html code.shiki .sviXB{--shiki-default:#005CC5;--shiki-dark:#6CB6FF}html pre.shiki code .sOLd2, html code.shiki .sOLd2{--shiki-default:#6F42C1;--shiki-dark:#F69D50}html pre.shiki code .sPO5f, html code.shiki .sPO5f{--shiki-default:#6F42C1;--shiki-dark:#DCBDFB}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .stnAF, html code.shiki .stnAF{--shiki-default:#E36209;--shiki-dark:#F69D50}html pre.shiki code .sDN9O, html code.shiki .sDN9O{--shiki-default:#6A737D;--shiki-dark:#768390}html pre.shiki code .sMOND, html code.shiki .sMOND{--shiki-default:#6F42C1;--shiki-dark:#6CB6FF}html pre.shiki code .sT6gE, html code.shiki .sT6gE{--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#8DDB8C;--shiki-dark-font-weight:bold}",{"title":30,"searchDepth":58,"depth":58,"links":6222},[6223,6224,6225,6228,6234,6235,6239,6244,6250,6251,6252,6253,6254,6255,6256,6260,6263,6269,6270,6271,6274,6279,6280,6281,6282,6283],{"id":22,"depth":58,"text":23},{"id":269,"depth":58,"text":270},{"id":281,"depth":58,"text":282,"children":6226},[6227],{"id":706,"depth":76,"text":327},{"id":1103,"depth":58,"text":1104,"children":6229},[6230,6231,6232,6233],{"id":1110,"depth":76,"text":1111},{"id":1175,"depth":76,"text":1176},{"id":1241,"depth":76,"text":1242},{"id":1287,"depth":76,"text":1288},{"id":1349,"depth":58,"text":1350},{"id":1495,"depth":58,"text":1496,"children":6236},[6237,6238],{"id":1506,"depth":76,"text":1507},{"id":1667,"depth":76,"text":1668},{"id":1723,"depth":58,"text":1724,"children":6240},[6241,6242,6243],{"id":1737,"depth":76,"text":1738},{"id":1800,"depth":76,"text":1801},{"id":1811,"depth":76,"text":1812},{"id":1825,"depth":58,"text":1826,"children":6245},[6246,6247,6248,6249],{"id":1829,"depth":76,"text":1830},{"id":1931,"depth":76,"text":1932},{"id":1978,"depth":76,"text":1979},{"id":2051,"depth":76,"text":2052},{"id":2066,"depth":58,"text":2067},{"id":2210,"depth":58,"text":2211},{"id":2412,"depth":58,"text":2413},{"id":2641,"depth":58,"text":2642},{"id":2773,"depth":58,"text":2774},{"id":2882,"depth":58,"text":2883},{"id":3053,"depth":58,"text":3054,"children":6257},[6258,6259],{"id":3178,"depth":76,"text":3179},{"id":3256,"depth":76,"text":3257},{"id":3328,"depth":58,"text":3329,"children":6261},[6262],{"id":3377,"depth":76,"text":3378},{"id":3589,"depth":58,"text":3590,"children":6264},[6265,6266,6267,6268],{"id":3662,"depth":76,"text":3663},{"id":3730,"depth":76,"text":3731},{"id":3801,"depth":76,"text":3802},{"id":3825,"depth":76,"text":3826},{"id":3832,"depth":58,"text":3833},{"id":3937,"depth":58,"text":3938},{"id":4165,"depth":58,"text":4166,"children":6272},[6273],{"id":4474,"depth":76,"text":4475},{"id":4703,"depth":58,"text":4704,"children":6275},[6276,6277,6278],{"id":4732,"depth":76,"text":4733},{"id":4916,"depth":76,"text":4917},{"id":4993,"depth":76,"text":4994},{"id":5086,"depth":58,"text":5087},{"id":5350,"depth":58,"text":5351},{"id":5603,"depth":58,"text":5604},{"id":5723,"depth":58,"text":5724},{"id":6189,"depth":58,"text":6190},"Das Paket @owlat\u002Femail-renderer wandelt JSON-Blöcke aus dem Editor in produktionsreife HTML-E-Mails um — mit Client-übergreifender Kompatibilität, CSS-Inlining, Dark Mode und VML-Fallbacks für Outlook.","md",{},"\u002Fdeveloper\u002Femail-renderer",{"title":6,"description":6284},"3.developer\u002F7.email-renderer","b8a3J0TmtYLqG4sVe9qTXtUU6vzV2awi4Ya5IUi-FBc",[6292,6296],{"title":6293,"path":6294,"stem":6295,"children":-1},"E-Mail-System","\u002Fdeveloper\u002Femail-system","3.developer\u002F6.email-system",{"title":6297,"path":6298,"stem":6299,"children":-1},"Umgebungsvariablen","\u002Fdeveloper\u002Fenvironment-variables","3.developer\u002F8.environment-variables",1786915108155]