@scrider/formatter 1.0.0 → 1.1.0

package/README.md

@@ -98,16 +98,37 @@ normalizeDelta(delta)                      // Normalize operations
 
 ### Block Handlers
 
+Block handlers process complex block embeds (tables, alerts, footnotes, etc.) stored in Delta as `{ insert: { block: { type, ... } } }`. Pass them to conversion functions via `createDefaultBlockHandlers()` or register individually:
+
 ```typescript
 import {
-  tableBlockHandler,
-  footnotesBlockHandler,
-  alertBlockHandler,
-  columnsBlockHandler,
-  boxBlockHandler,
+  createDefaultBlockHandlers,
+  deltaToHtml,
+  htmlToDelta,
+  createDefaultRegistry,
 } from '@scrider/formatter';
+
+const registry = createDefaultRegistry();
+const blockHandlers = createDefaultBlockHandlers();
+
+// Delta with an alert block → HTML
+const html = deltaToHtml(delta, { registry, blockHandlers });
+// → '<div class="markdown-alert markdown-alert-note">...</div>'
+
+// HTML with block embeds → Delta
+const delta = htmlToDelta(html, { registry, blockHandlers });
 ```
 
+Built-in handlers:
+
+| Handler | Block type | Description |
+|---------|-----------|-------------|
+| `tableBlockHandler` | `table` | Extended tables with colspan/rowspan, nested Delta cells |
+| `alertBlockHandler` | `alert` | GitHub-style alerts (`[!NOTE]`, `[!TIP]`, `[!WARNING]`, etc.) |
+| `footnotesBlockHandler` | `footnotes` | Footnotes with `[^id]` references |
+| `columnsBlockHandler` | `columns` | Multi-column layout (CSS Grid) |
+| `boxBlockHandler` | `box` | Inline-box with float/overflow |
+
 ## Ecosystem
 
 ```

package/dist/index.cjs

@@ -63,6 +63,7 @@ __export(index_exports, {
   dividerFormat: () => dividerFormat,
   escapeHtml: () => escapeHtml,
   extractBoxOpAttributes: () => extractBoxOpAttributes,
+  fontFormat: () => fontFormat,
   footnoteRefFormat: () => footnoteRefFormat,
   footnotesBlockHandler: () => footnotesBlockHandler,
   formulaFormat: () => formulaFormat,
@@ -89,6 +90,7 @@ __export(index_exports, {
   nodeAdapter: () => nodeAdapter,
   normalizeDelta: () => normalizeDelta,
   sanitizeDelta: () => sanitizeDelta,
+  sizeFormat: () => sizeFormat,
   slugify: () => slugify,
   slugifyWithDedup: () => slugifyWithDedup,
   strikeFormat: () => strikeFormat,
@@ -1663,6 +1665,15 @@ var colorFormat = {
   }
 };
 
+// src/schema/formats/inline/font.ts
+var fontFormat = {
+  name: "font",
+  scope: "inline",
+  validate(value) {
+    return typeof value === "string" && value.length > 0;
+  }
+};
+
 // src/schema/formats/inline/italic.ts
 var italicFormat = {
   name: "italic",
@@ -1720,6 +1731,15 @@ var markFormat = {
   }
 };
 
+// src/schema/formats/inline/size.ts
+var sizeFormat = {
+  name: "size",
+  scope: "inline",
+  validate(value) {
+    return typeof value === "string" && value.length > 0;
+  }
+};
+
 // src/schema/formats/inline/strike.ts
 var strikeFormat = {
   name: "strike",
@@ -1927,7 +1947,9 @@ var INLINE_FORMAT_ORDER = [
 ];
 var INLINE_STYLE_FORMATS = {
   color: "color",
-  background: "background-color"
+  background: "background-color",
+  font: "font-family",
+  size: "font-size"
 };
 var BLOCK_FORMAT_TAGS = {
   header: (value) => `h${String(value)}`,
@@ -2312,6 +2334,8 @@ var defaultInlineFormats = [
   linkFormat,
   colorFormat,
   backgroundFormat,
+  fontFormat,
+  sizeFormat,
   markFormat,
   kbdFormat
 ];
@@ -3342,6 +3366,14 @@ function htmlToDelta(html, options = {}) {
     if (bg) {
       currentAttributes.background = bg;
     }
+    const fontFamily = element.style?.fontFamily || element.style?.getPropertyValue?.("font-family");
+    if (fontFamily) {
+      currentAttributes.font = fontFamily.replace(/^["']|["']$/g, "");
+    }
+    const fontSize = element.style?.fontSize || element.style?.getPropertyValue?.("font-size");
+    if (fontSize) {
+      currentAttributes.size = fontSize;
+    }
     processChildren(element);
     flushText();
     currentAttributes = prevAttrs;
@@ -4043,11 +4075,14 @@ function renderInlineText2(text, attributes) {
   if (link) {
     result = renderLink(result, link);
   }
-  if (typeof attributes.color === "string") {
-    result = `<span style="color: ${attributes.color}">${result}</span>`;
-  }
-  if (typeof attributes.background === "string") {
-    result = `<span style="background-color: ${attributes.background}">${result}</span>`;
+  const styleProps = [];
+  if (typeof attributes.color === "string") styleProps.push(`color: ${attributes.color}`);
+  if (typeof attributes.background === "string")
+    styleProps.push(`background-color: ${attributes.background}`);
+  if (typeof attributes.font === "string") styleProps.push(`font-family: ${attributes.font}`);
+  if (typeof attributes.size === "string") styleProps.push(`font-size: ${attributes.size}`);
+  if (styleProps.length > 0) {
+    result = `<span style="${styleProps.join("; ")}">${result}</span>`;
   }
   return result;
 }
@@ -4789,6 +4824,19 @@ function astToDelta(tree, customHandlers, mathBlock, mermaidBlock, plantumlBlock
         currentInlineAttrs = { ...currentInlineAttrs, background: bgMatch[1].trim() };
         addedKeys.push("background");
       }
+      const fontMatch = style.match(/(?:^|;)\s*font-family\s*:\s*([^;]+)/i);
+      if (fontMatch) {
+        currentInlineAttrs = {
+          ...currentInlineAttrs,
+          font: fontMatch[1].trim().replace(/^["']|["']$/g, "")
+        };
+        addedKeys.push("font");
+      }
+      const sizeMatch = style.match(/(?:^|;)\s*font-size\s*:\s*([^;]+)/i);
+      if (sizeMatch) {
+        currentInlineAttrs = { ...currentInlineAttrs, size: sizeMatch[1].trim() };
+        addedKeys.push("size");
+      }
       spanAttrStack.push(addedKeys);
       return;
     }
@@ -4900,6 +4948,7 @@ function astToDelta(tree, customHandlers, mathBlock, mermaidBlock, plantumlBlock
   dividerFormat,
   escapeHtml,
   extractBoxOpAttributes,
+  fontFormat,
   footnoteRefFormat,
   footnotesBlockHandler,
   formulaFormat,
@@ -4926,6 +4975,7 @@ function astToDelta(tree, customHandlers, mathBlock, mermaidBlock, plantumlBlock
   nodeAdapter,
   normalizeDelta,
   sanitizeDelta,
+  sizeFormat,
   slugify,
   slugifyWithDedup,
   strikeFormat,