@adecore/editor-react 0.31.12 → 0.33.0

package/dist/SplitDiffView.js

@@ -1,276 +1,366 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { parseChord } from '@adecore/editor/keymap';
-import { DiffOverlays } from './diff-overlays.js';
+import { DiffOverlays } from "./diff-overlays.js";
 import { wordMarks } from './diff-wordmarks.js';
 import { RowHost, LineActionHost } from './row-host.js';
 import { splitAlignment } from './split-alignment.js';
 import { SplitScroll } from './split-scroll.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SIDES = ['old', 'new'];
-export function SplitDiffView({ engine, document, display, unfold, blocked, theme, tokens, wrap = true, fill = false, maxHeight, label, className, ref, onMount }) {
-    const { t } = useTranslation('editor');
-    const emphasis = useMemo(() => wordMarks(document), [document]);
-    const oldElement = useRef(null);
-    const newElement = useRef(null);
-    const current = useRef({ display, tokens, theme, wrap, label });
-    const applied = useRef({ theme, wrap, label });
-    const [failure, setFailure] = useState(null);
-    const [mounted, setMounted] = useState(null);
-    const [height, setHeight] = useState(0);
-    useLayoutEffect(() => {
-        current.current = { display, tokens, theme, wrap, label };
+export function SplitDiffView({
+  engine,
+  document,
+  display,
+  unfold,
+  blocked,
+  theme,
+  tokens,
+  wrap = true,
+  fill = false,
+  maxHeight,
+  label,
+  className,
+  ref,
+  onMount
+}) {
+  const {
+    t
+  } = useTranslation('editor');
+  const emphasis = useMemo(() => wordMarks(document), [document]);
+  const oldElement = useRef(null);
+  const newElement = useRef(null);
+  const current = useRef({
+    display,
+    tokens,
+    theme,
+    wrap,
+    label
+  });
+  const applied = useRef({
+    theme,
+    wrap,
+    label
+  });
+  const [failure, setFailure] = useState(null);
+  const [mounted, setMounted] = useState(null);
+  const [height, setHeight] = useState(0);
+  useLayoutEffect(() => {
+    current.current = {
+      display,
+      tokens,
+      theme,
+      wrap,
+      label
+    };
+  });
+  useLayoutEffect(() => {
+    const oldHost = oldElement.current;
+    const newHost = newElement.current;
+    if (oldHost === null || newHost === null) {
+      return;
+    }
+    const initial = current.current;
+    applied.current = {
+      theme: initial.theme,
+      wrap: initial.wrap,
+      label: initial.label
+    };
+    const mount = (side, host) => {
+      const initial_0 = current.current;
+      const editor = engine.mount(host, {
+        text: initial_0.display[side].text,
+        theme: initial_0.theme,
+        wrap: initial_0.wrap,
+        label: initial_0.label,
+        readOnly: true,
+        guides: false,
+        folding: false,
+        foldOutline: 'off',
+        handBack: [parseChord('Mod+Enter')]
+      });
+      editor.setBlocks([]);
+      editor.setLineTokens(line => {
+        const row = current.current.display[side].rows[line];
+        return row === undefined ? null : current.current.tokens?.get(side, row[side].index);
+      });
+      return {
+        engine,
+        editor,
+        rows: new RowHost(editor, 'diff-alignment'),
+        actions: new LineActionHost(editor, 'diff-status')
+      };
+    };
+    const old = mount('old', oldHost);
+    let fresh;
+    try {
+      fresh = mount('new', newHost);
+    } catch (error) {
+      old.editor.dispose();
+      throw error;
+    }
+    const sides = {
+      old,
+      new: fresh
+    };
+    let stopped = false;
+    let pending = false;
+    let failed = false;
+    const scroll = new SplitScroll({
+      old: old.editor,
+      new: fresh.editor
     });
-    useLayoutEffect(() => {
-        const oldHost = oldElement.current;
-        const newHost = newElement.current;
-        if (oldHost === null || newHost === null) {
-            return;
+    let aligning = false;
+    let updating = false;
+    const fail = error_0 => {
+      failed = true;
+      setFailure({
+        error: error_0
+      });
+    };
+    const measure = () => setHeight(Math.max(sides.old.editor.getContentHeight(), sides.new.editor.getContentHeight()));
+    const align = () => {
+      if (pending || stopped || failed) {
+        return;
+      }
+      pending = true;
+      // Intrinsic measurements arrive after each render; align both editors before the next paint.
+      queueMicrotask(() => {
+        pending = false;
+        if (stopped || failed) {
+          return;
         }
-        const initial = current.current;
-        applied.current = { theme: initial.theme, wrap: initial.wrap, label: initial.label };
-        const mount = (side, host) => {
-            const initial = current.current;
-            const editor = engine.mount(host, {
-                text: initial.display[side].text,
-                theme: initial.theme,
-                wrap: initial.wrap,
-                label: initial.label,
-                readOnly: true,
-                guides: false,
-                folding: false,
-                foldOutline: 'off',
-                handBack: [parseChord('Mod+Enter')]
-            });
-            editor.setBlocks([]);
-            editor.setLineTokens((line) => {
-                const row = current.current.display[side].rows[line];
-                return row === undefined ? null : current.current.tokens?.get(side, row[side].index);
-            });
-            return { engine, editor, rows: new RowHost(editor, 'diff-alignment'), actions: new LineActionHost(editor, 'diff-status') };
-        };
-        const old = mount('old', oldHost);
-        let fresh;
+        aligning = true;
         try {
-            fresh = mount('new', newHost);
+          const rows = splitAlignment(current.current.display.aligned, line_0 => sides.old.editor.getLineHeight(line_0), line_1 => sides.new.editor.getLineHeight(line_1));
+          sides.old.rows.set(rows.old);
+          sides.new.rows.set(rows.new);
+        } catch (error_1) {
+          fail(error_1);
+          return;
+        } finally {
+          aligning = false;
         }
-        catch (error) {
-            old.editor.dispose();
-            throw error;
+        try {
+          measure();
+          scroll.sync();
+        } catch (error_2) {
+          fail(error_2);
         }
-        const sides = { old, new: fresh };
-        let stopped = false;
-        let pending = false;
-        let failed = false;
-        const scroll = new SplitScroll({ old: old.editor, new: fresh.editor });
-        let aligning = false;
-        let updating = false;
-        const fail = (error) => {
-            failed = true;
-            setFailure({ error });
-        };
-        const measure = () => setHeight(Math.max(sides.old.editor.getContentHeight(), sides.new.editor.getContentHeight()));
-        const align = () => {
-            if (pending || stopped || failed) {
-                return;
-            }
-            pending = true;
-            // Intrinsic measurements arrive after each render; align both editors before the next paint.
-            queueMicrotask(() => {
-                pending = false;
-                if (stopped || failed) {
-                    return;
-                }
-                aligning = true;
-                try {
-                    const rows = splitAlignment(current.current.display.aligned, (line) => sides.old.editor.getLineHeight(line), (line) => sides.new.editor.getLineHeight(line));
-                    sides.old.rows.set(rows.old);
-                    sides.new.rows.set(rows.new);
-                }
-                catch (error) {
-                    fail(error);
-                    return;
-                }
-                finally {
-                    aligning = false;
-                }
-                try {
-                    measure();
-                    scroll.sync();
-                }
-                catch (error) {
-                    fail(error);
-                }
-            });
-        };
-        const update = (run) => {
-            updating = true;
-            try {
-                run();
-            }
-            finally {
-                updating = false;
-            }
-            align();
-        };
-        const stops = SIDES.flatMap((side) => [
-            sides[side].editor.onLineHeights(align),
-            sides[side].editor.onViewChange(() => {
-                if (stopped || failed || aligning || updating) {
-                    return;
-                }
-                try {
-                    measure();
-                    scroll.changed(side);
-                }
-                catch (error) {
-                    fail(error);
-                }
-            })
-        ]);
-        setMounted({ old: sides.old, new: sides.new, align, update, drive: (side) => scroll.drive(side) });
+      });
+    };
+    const update = run => {
+      updating = true;
+      try {
+        run();
+      } finally {
+        updating = false;
+      }
+      align();
+    };
+    const stops = SIDES.flatMap(side_0 => [sides[side_0].editor.onLineHeights(align), sides[side_0].editor.onViewChange(() => {
+      if (stopped || failed || aligning || updating) {
+        return;
+      }
+      try {
         measure();
-        return () => {
-            stopped = true;
-            for (const stop of stops) {
-                stop();
-            }
-            for (const side of SIDES) {
-                sides[side].editor.dispose();
-            }
-        };
-    }, [engine]);
-    useLayoutEffect(() => {
-        if (mounted === null || mounted.old.engine !== engine) {
-            return;
+        scroll.changed(side_0);
+      } catch (error_3) {
+        fail(error_3);
+      }
+    })]);
+    setMounted({
+      old: sides.old,
+      new: sides.new,
+      align,
+      update,
+      drive: side_1 => scroll.drive(side_1)
+    });
+    measure();
+    return () => {
+      stopped = true;
+      for (const stop of stops) {
+        stop();
+      }
+      for (const side_2 of SIDES) {
+        sides[side_2].editor.dispose();
+      }
+    };
+  }, [engine]);
+  useLayoutEffect(() => {
+    if (mounted === null || mounted.old.engine !== engine) {
+      return;
+    }
+    mounted.update(() => {
+      for (const side_3 of SIDES) {
+        const {
+          editor: editor_0,
+          actions
+        } = mounted[side_3];
+        editor_0.setText(display[side_3].text);
+        editor_0.setLineNumbers(line_2 => {
+          const row_0 = current.current.display[side_3].rows[line_2];
+          return row_0 === undefined ? null : String(row_0[side_3].number);
+        });
+        const highlights = [];
+        for (const [index, row_1] of display[side_3].rows.entries()) {
+          if (row_1.change === 'context') {
+            continue;
+          }
+          highlights.push({
+            startLine: index + 1,
+            endLine: index + 1,
+            color: side_3 === 'old' ? '--editor-deleted' : '--editor-added',
+            bar: side_3 === 'old' ? 'hatched' : 'solid',
+            emphasis: [emphasis[side_3].get(row_1[side_3].index) ?? []]
+          });
         }
-        mounted.update(() => {
-            for (const side of SIDES) {
-                const { editor, actions } = mounted[side];
-                editor.setText(display[side].text);
-                editor.setLineNumbers((line) => {
-                    const row = current.current.display[side].rows[line];
-                    return row === undefined ? null : String(row[side].number);
-                });
-                const highlights = [];
-                for (const [index, row] of display[side].rows.entries()) {
-                    if (row.change === 'context') {
-                        continue;
-                    }
-                    highlights.push({
-                        startLine: index + 1,
-                        endLine: index + 1,
-                        color: side === 'old' ? '--editor-deleted' : '--editor-added',
-                        bar: side === 'old' ? 'hatched' : 'solid',
-                        emphasis: [emphasis[side].get(row[side].index) ?? []]
-                    });
-                }
-                editor.setLineHighlights(highlights);
-                editor.setChangeMarks(highlights.map((highlight) => ({ startLine: highlight.startLine, endLine: highlight.endLine, kind: side === 'old' ? 'deleted' : 'added' })));
-                actions.set(display[side].rows.flatMap((row, line) => (row.noNewline === undefined ? [] : [{ id: `no-newline-${line}`, line }])));
-            }
+        editor_0.setLineHighlights(highlights);
+        editor_0.setChangeMarks(highlights.map(highlight => ({
+          startLine: highlight.startLine,
+          endLine: highlight.endLine,
+          kind: side_3 === 'old' ? 'deleted' : 'added'
+        })));
+        actions.set(display[side_3].rows.flatMap((row_2, line_3) => row_2.noNewline === undefined ? [] : [{
+          id: `no-newline-${line_3}`,
+          line: line_3
+        }]));
+      }
+    });
+  }, [mounted, engine, display, emphasis]);
+  useLayoutEffect(() => {
+    if (mounted === null || mounted.old.engine !== engine) {
+      return;
+    }
+    for (const side_4 of SIDES) {
+      mounted[side_4].editor.setLineLabels(line_4 => {
+        const row_3 = display[side_4].rows[line_4];
+        if (row_3 === undefined || row_3.change === 'context') {
+          return null;
+        }
+        return t(side_4 === 'old' ? 'diff.removed' : 'diff.added', {
+          number: row_3[side_4].number
         });
-    }, [mounted, engine, display, emphasis]);
-    useLayoutEffect(() => {
-        if (mounted === null || mounted.old.engine !== engine) {
-            return;
+      });
+    }
+  }, [mounted, engine, display, t]);
+  useLayoutEffect(() => {
+    if (mounted === null || mounted.old.engine !== engine) {
+      return;
+    }
+    mounted.update(() => {
+      for (const side_5 of SIDES) {
+        const previous = applied.current;
+        if (previous.theme !== theme) {
+          mounted[side_5].editor.setTheme(theme);
         }
-        for (const side of SIDES) {
-            mounted[side].editor.setLineLabels((line) => {
-                const row = display[side].rows[line];
-                if (row === undefined || row.change === 'context') {
-                    return null;
-                }
-                return t(side === 'old' ? 'diff.removed' : 'diff.added', { number: row[side].number });
-            });
+        if (previous.wrap !== wrap) {
+          mounted[side_5].editor.setWrap(wrap);
         }
-    }, [mounted, engine, display, t]);
-    useLayoutEffect(() => {
-        if (mounted === null || mounted.old.engine !== engine) {
-            return;
+        if (previous.label !== label) {
+          mounted[side_5].editor.setLabel(label);
         }
-        mounted.update(() => {
-            for (const side of SIDES) {
-                const previous = applied.current;
-                if (previous.theme !== theme) {
-                    mounted[side].editor.setTheme(theme);
-                }
-                if (previous.wrap !== wrap) {
-                    mounted[side].editor.setWrap(wrap);
-                }
-                if (previous.label !== label) {
-                    mounted[side].editor.setLabel(label);
-                }
-            }
+      }
+    });
+    applied.current = {
+      theme,
+      wrap,
+      label
+    };
+  }, [mounted, engine, theme, wrap, label]);
+  useLayoutEffect(() => {
+    if (mounted === null || mounted.old.engine !== engine) {
+      return;
+    }
+    const refresh = () => {
+      for (const side_6 of SIDES) {
+        mounted[side_6].editor.setLineTokens(line_5 => {
+          const row_4 = current.current.display[side_6].rows[line_5];
+          return row_4 === undefined ? null : current.current.tokens?.get(side_6, row_4[side_6].index);
         });
-        applied.current = { theme, wrap, label };
-    }, [mounted, engine, theme, wrap, label]);
-    useLayoutEffect(() => {
-        if (mounted === null || mounted.old.engine !== engine) {
-            return;
-        }
-        const refresh = () => {
-            for (const side of SIDES) {
-                mounted[side].editor.setLineTokens((line) => {
-                    const row = current.current.display[side].rows[line];
-                    return row === undefined ? null : current.current.tokens?.get(side, row[side].index);
-                });
-            }
-        };
-        refresh();
-        const ownerWindow = oldElement.current?.ownerDocument.defaultView;
-        let frame;
-        let pending = false;
-        let stopped = false;
-        const schedule = () => {
-            if (pending) {
-                return;
-            }
-            pending = true;
-            const paint = () => {
-                pending = false;
-                if (!stopped) {
-                    refresh();
-                }
-            };
-            if (ownerWindow?.requestAnimationFrame !== undefined) {
-                frame = ownerWindow.requestAnimationFrame(paint);
-            }
-            else {
-                queueMicrotask(paint);
-            }
-        };
-        const stop = tokens?.subscribe(schedule);
-        return () => {
-            stopped = true;
-            stop?.();
-            if (frame !== undefined) {
-                ownerWindow?.cancelAnimationFrame?.(frame);
-            }
-        };
-    }, [mounted, engine, display, tokens]);
-    useLayoutEffect(() => {
-        if (mounted === null || mounted.old.engine !== engine) {
-            return;
+      }
+    };
+    refresh();
+    const ownerWindow = oldElement.current?.ownerDocument.defaultView;
+    let frame;
+    let pending_0 = false;
+    let stopped_0 = false;
+    const schedule = () => {
+      if (pending_0) {
+        return;
+      }
+      pending_0 = true;
+      const paint = () => {
+        pending_0 = false;
+        if (!stopped_0) {
+          refresh();
         }
-        const stops = SIDES.map((side) => onMount?.(mounted[side].editor, side));
-        return () => {
-            for (const stop of stops) {
-                stop?.();
-            }
-        };
-    }, [mounted, engine, onMount]);
-    const limit = maxHeight !== undefined && Number.isFinite(maxHeight) && maxHeight > 0 ? maxHeight : Infinity;
-    if (failure !== null) {
-        throw failure.error;
+      };
+      if (ownerWindow?.requestAnimationFrame !== undefined) {
+        frame = ownerWindow.requestAnimationFrame(paint);
+      } else {
+        queueMicrotask(paint);
+      }
+    };
+    const stop_0 = tokens?.subscribe(schedule);
+    return () => {
+      stopped_0 = true;
+      stop_0?.();
+      if (frame !== undefined) {
+        ownerWindow?.cancelAnimationFrame?.(frame);
+      }
+    };
+  }, [mounted, engine, display, tokens]);
+  useLayoutEffect(() => {
+    if (mounted === null || mounted.old.engine !== engine) {
+      return;
     }
-    return (_jsx("div", { className: `adecore-editor-diff adecore-editor-diff-split ${className ?? ''}`, ref: ref, role: "group", "aria-label": label, "data-scroll": fill || height > limit, style: { height: fill ? '100%' : Math.min(height, limit) }, children: SIDES.map((side) => (_jsxs("div", { className: "adecore-editor-diff-side", "data-side": side, role: "group", "aria-label": t(`diff.${side}Side`), onWheelCapture: () => {
-                mounted?.drive(side);
-            }, onFocusCapture: () => {
-                mounted?.drive(side);
-            }, onPointerDownCapture: () => {
-                mounted?.drive(side);
-            }, onKeyDownCapture: () => {
-                mounted?.drive(side);
-            }, children: [_jsx("div", { ref: side === 'old' ? oldElement : newElement, className: "adecore-editor-diff-surface" }), mounted !== null && mounted[side].engine === engine && (_jsx(DiffOverlays, { mounted: mounted[side], display: display[side], unfold: unfold, blocked: blocked }))] }, side))) }));
-}
+    const stops_0 = SIDES.map(side_7 => onMount?.(mounted[side_7].editor, side_7));
+    return () => {
+      for (const stop_1 of stops_0) {
+        stop_1?.();
+      }
+    };
+  }, [mounted, engine, onMount]);
+  const limit = maxHeight !== undefined && Number.isFinite(maxHeight) && maxHeight > 0 ? maxHeight : Infinity;
+  if (failure !== null) {
+    throw failure.error;
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: `adecore-editor-diff adecore-editor-diff-split ${className ?? ''}`,
+    ref: ref,
+    role: "group",
+    "aria-label": label,
+    "data-scroll": fill || height > limit,
+    style: {
+      height: fill ? '100%' : Math.min(height, limit)
+    },
+    children: SIDES.map(side_8 => /*#__PURE__*/_jsxs("div", {
+      className: "adecore-editor-diff-side",
+      "data-side": side_8,
+      role: "group",
+      "aria-label": t(`diff.${side_8}Side`),
+      onWheelCapture: () => {
+        mounted?.drive(side_8);
+      },
+      onFocusCapture: () => {
+        mounted?.drive(side_8);
+      },
+      onPointerDownCapture: () => {
+        mounted?.drive(side_8);
+      },
+      onKeyDownCapture: () => {
+        mounted?.drive(side_8);
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        ref: side_8 === 'old' ? oldElement : newElement,
+        className: "adecore-editor-diff-surface"
+      }), mounted !== null && mounted[side_8].engine === engine && /*#__PURE__*/_jsx(DiffOverlays, {
+        mounted: mounted[side_8],
+        display: display[side_8],
+        unfold: unfold,
+        blocked: blocked
+      })]
+    }, side_8))
+  });
+}