feat: checkbox list conversion to web html

Author: hejsztynx

apps/example-web/src/App.tsx

@@ -233,6 +233,7 @@ function App() {
     ref.current
       ?.getHTML()
       .then((html) => {
+        console.log('getHtml', html);
         setEnrichedTextValue(html);
       })
       .catch((error: unknown) => {

src/web/EnrichedText.css

@@ -251,3 +251,48 @@
   flex-shrink: 0;
   accent-color: var(--et-checkbox-box-color, #0000ff);
 }
+
+.et-view ul[data-type="checkbox"] {
+  margin: 0;
+  list-style: none;
+  padding: 0;
+  padding-left: calc(
+    var(--et-checkbox-margin-left, 16px) + var(--et-checkbox-gap-width, 16px)
+  );
+}
+
+.et-view ul[data-type="checkbox"] > li {
+  position: relative;
+  list-style: none;
+  pointer-events: none;
+}
+
+.et-view ul[data-type="checkbox"] > li > p {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  user-select: none;
+}
+
+.et-view ul[data-type="checkbox"] > li > input[type='checkbox'] {
+  position: absolute;
+  left: calc(
+    -1 * var(--et-checkbox-gap-width, 16px) - var(--et-checkbox-box-size, 24px)
+  );
+  width: var(--et-checkbox-box-size, 24px);
+  height: var(--et-checkbox-box-size, 24px);
+  margin: 0 var(--et-checkbox-gap-width, 16px) 0 0;
+  flex-shrink: 0;
+  accent-color: var(--et-checkbox-box-color, #0000ff);
+}
+
+.et-view ul[data-type="checkbox"] > li > label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  user-select: none;
+}

src/web/EnrichedText.tsx

@@ -6,13 +6,16 @@ import { htmlStyleToCSSVariables } from './styleConversion/htmlStyleToCSSVariabl
 import { ENRICHED_TEXT_CLASSNAME } from './consts/classNames';
 import { enrichedInputThemingToCSSProperties } from './styleConversion/enrichedInputThemingToCSSProperties';
 import { buildMentionRulesCSS } from './styleConversion/buildMentionRulesCSS';
+import { checkboxHtmlToWeb } from './checkboxHtmlToWeb';
 
 export const EnrichedText = ({
   children,
   htmlStyle,
   style,
   selectionColor,
 }: EnrichedTextProps) => {
+  const html = useMemo(() => checkboxHtmlToWeb(children), [children]);
+
   const textStyle: CSSProperties = useMemo(
     () => enrichedTextStyleToCSSProperties(style ?? {}),
     [style]
@@ -44,7 +47,7 @@ export const EnrichedText = ({
       <div
         style={finalStyle}
         className={ENRICHED_TEXT_CLASSNAME}
-        dangerouslySetInnerHTML={{ __html: children }}
+        dangerouslySetInnerHTML={{ __html: html }}
       />
     </>
   );

src/web/checkboxHtmlToWeb.ts

@@ -0,0 +1,40 @@
+/*
+ * Native checkbox format (as produced by the editor):
+ *   <ul data-type="checkbox">
+ *     <li checked>foo</li>
+ *     <li>bar</li>
+ *   </ul>
+ *
+ * Web-native, display-only format:
+ *   <ul data-type="checkbox">
+ *     <li>
+ *       <input type="checkbox" id="…" checked>
+ *       <label for="…">foo</label>
+ *     </li>
+ *     <li>
+ *       <input type="checkbox" id="…">
+ *       <label for="…">bar</label>
+ *     </li>
+ *   </ul>
+ */
+export function checkboxHtmlToWeb(html: string): string {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, 'text/html');
+
+  let idCounter = 0;
+
+  doc.querySelectorAll('ul[data-type="checkbox"]').forEach((ul) => {
+    ul.querySelectorAll('li').forEach((li) => {
+      const checked = li.hasAttribute('checked');
+      const id = `enriched-checkbox-${idCounter++}`;
+      const labelContent = li.innerHTML;
+
+      li.removeAttribute('checked');
+      li.innerHTML =
+        `<input type="checkbox" id="${id}"${checked ? ' checked' : ''}>` +
+        `<label for="${id}">${labelContent}</label>`;
+    });
+  });
+
+  return doc.body.innerHTML;
+}