@trafica/editor 1.0.38 → 1.0.40

package/dist/index.mjs

@@ -1637,23 +1637,27 @@ function serializeBlock(node, idCounts = /* @__PURE__ */ new Map(), inCell = fal
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A;
   switch (node.type) {
     case "paragraph": {
-      const align = ((_a = node.attrs) == null ? void 0 : _a.align) ? ` data-align="${node.attrs.align}"` : "";
-      const style = inCell ? ` style="margin:0;min-height:1.2em;"` : "";
-      return `<p${align}${style}>${serializeChildren(node.children)}</p>`;
+      const alignVal = (_a = node.attrs) == null ? void 0 : _a.align;
+      const alignAttrs = alignVal ? ` data-align="${alignVal}" style="text-align:${alignVal};"` : "";
+      const cellStyle = inCell ? ` style="margin:0;min-height:1.2em;${alignVal ? `text-align:${alignVal};` : ""}"` : "";
+      const attrs = inCell ? alignVal ? ` data-align="${alignVal}"${cellStyle}` : cellStyle : alignAttrs;
+      return `<p${attrs}>${serializeChildren(node.children)}</p>`;
     }
     case "heading": {
       const l = (_c = (_b = node.attrs) == null ? void 0 : _b.level) != null ? _c : 1;
-      const align = ((_d = node.attrs) == null ? void 0 : _d.align) ? ` data-align="${node.attrs.align}"` : "";
+      const alignVal = (_d = node.attrs) == null ? void 0 : _d.align;
+      const alignAttrs = alignVal ? ` data-align="${alignVal}" style="text-align:${alignVal};"` : "";
       const rawText = node.children.filter((c) => "text" in c).map((c) => c.text).join("");
       const base = slugify(rawText) || `heading-${l}`;
       const count = (_e = idCounts.get(base)) != null ? _e : 0;
       idCounts.set(base, count + 1);
       const id = count === 0 ? base : `${base}-${count}`;
-      return `<h${l} id="${id}"${align}>${serializeChildren(node.children)}</h${l}>`;
+      return `<h${l} id="${id}"${alignAttrs}>${serializeChildren(node.children)}</h${l}>`;
     }
     case "blockquote": {
-      const align = ((_f = node.attrs) == null ? void 0 : _f.align) ? ` data-align="${node.attrs.align}"` : "";
-      return `<blockquote${align}>${serializeChildren(node.children)}</blockquote>`;
+      const alignVal = (_f = node.attrs) == null ? void 0 : _f.align;
+      const alignAttrs = alignVal ? ` data-align="${alignVal}" style="text-align:${alignVal};"` : "";
+      return `<blockquote${alignAttrs}>${serializeChildren(node.children)}</blockquote>`;
     }
     case "bullet_list":
       return `<ul>${serializeChildren(node.children)}</ul>`;
@@ -1769,6 +1773,14 @@ function escapeHTML(str) {
 function escapeAttr(str) {
   return str.replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
+var VALID_ALIGNS = /* @__PURE__ */ new Set(["left", "center", "right", "justify"]);
+function getAlign(el) {
+  const da = el.getAttribute("data-align");
+  if (da && VALID_ALIGNS.has(da)) return da;
+  const ta = el.style.textAlign;
+  if (ta && VALID_ALIGNS.has(ta)) return ta;
+  return null;
+}
 function parseHTMLBody(body) {
   const children = [];
   for (const child of Array.from(body.childNodes)) {
@@ -1789,35 +1801,35 @@ function parseHTMLNode(node) {
   switch (tag) {
     case "p":
     case "div": {
-      const align = el.getAttribute("data-align");
+      const align = getAlign(el);
       return { type: "paragraph", attrs: align ? { align } : {}, children: parseInlineChildren(el) };
     }
     case "h1": {
-      const align = el.getAttribute("data-align");
+      const align = getAlign(el);
       return { type: "heading", attrs: { level: 1, ...align ? { align } : {} }, children: parseInlineChildren(el) };
     }
     case "h2": {
-      const align = el.getAttribute("data-align");
+      const align = getAlign(el);
       return { type: "heading", attrs: { level: 2, ...align ? { align } : {} }, children: parseInlineChildren(el) };
     }
     case "h3": {
-      const align = el.getAttribute("data-align");
+      const align = getAlign(el);
       return { type: "heading", attrs: { level: 3, ...align ? { align } : {} }, children: parseInlineChildren(el) };
     }
     case "h4": {
-      const align = el.getAttribute("data-align");
+      const align = getAlign(el);
       return { type: "heading", attrs: { level: 4, ...align ? { align } : {} }, children: parseInlineChildren(el) };
     }
     case "h5": {
-      const align = el.getAttribute("data-align");
+      const align = getAlign(el);
       return { type: "heading", attrs: { level: 5, ...align ? { align } : {} }, children: parseInlineChildren(el) };
     }
     case "h6": {
-      const align = el.getAttribute("data-align");
+      const align = getAlign(el);
       return { type: "heading", attrs: { level: 6, ...align ? { align } : {} }, children: parseInlineChildren(el) };
     }
     case "blockquote": {
-      const align = el.getAttribute("data-align");
+      const align = getAlign(el);
       return { type: "blockquote", attrs: align ? { align } : {}, children: parseInlineChildren(el) };
     }
     case "ul": {
@@ -7847,6 +7859,7 @@ function EditorCore({
 }) {
   const containerRef = useRef(null);
   const isRenderingRef = useRef(false);
+  const skipRestoreSelectionRef = useRef(false);
   const scrollCaretIntoView = useCallback(() => {
     var _a, _b;
     const sel = window.getSelection();
@@ -7959,8 +7972,14 @@ function EditorCore({
   useLayoutEffect(() => {
     const container = containerRef.current;
     if (!container || !state.selection) return;
+    if (skipRestoreSelectionRef.current) {
+      skipRestoreSelectionRef.current = false;
+      return;
+    }
+    isRenderingRef.current = true;
     restoreSelection(container, state.selection);
     scrollCaretIntoView();
+    isRenderingRef.current = false;
   }, [state.selection]);
   useEffect(() => {
     const container = containerRef.current;
@@ -8025,6 +8044,7 @@ function EditorCore({
       if (currentSelection && JSON.stringify(currentSelection.anchor) === JSON.stringify(captured.anchor) && JSON.stringify(currentSelection.focus) === JSON.stringify(captured.focus)) {
         return;
       }
+      skipRestoreSelectionRef.current = true;
       const tr = createTransaction();
       tr.steps.push(tr_setSelection(captured));
       engine.dispatch(tr);
@@ -8407,10 +8427,9 @@ function EditorCore({
     if (!container) return;
     const selection = captureSelection(container);
     if (!selection) return;
+    skipRestoreSelectionRef.current = true;
     const tr = createTransaction();
-    tr.steps.push(
-      tr_setSelection(selection)
-    );
+    tr.steps.push(tr_setSelection(selection));
     engine.dispatch(tr);
   }, [engine]);
   const imageResizeRef = useRef(null);