@open-slide/core 1.2.0 → 1.4.0

package/src/app/components/inspector/inspect-overlay.tsx

@@ -31,7 +31,7 @@ export function InspectOverlay() {
     };
 
     const onMove = (e: PointerEvent) => {
-      const el = pickElement(e.clientX, e.clientY);
+      const el = pickInspectorTarget(pickElement(e.clientX, e.clientY));
       if (!el) return setHover(null);
       const hit = findSlideSource(el, slideId, { hostOnly: true });
       if (!hit) return setHover(null);
@@ -40,7 +40,7 @@ export function InspectOverlay() {
 
     const onClick = (e: MouseEvent) => {
       if (e.target instanceof Element && e.target.closest('[data-inspector-ui]')) return;
-      const el = pickElement(e.clientX, e.clientY);
+      const el = pickInspectorTarget(pickElement(e.clientX, e.clientY));
       if (!el) return;
       const hit = findSlideSource(el, slideId, { hostOnly: true });
       if (!hit) return;
@@ -52,7 +52,7 @@ export function InspectOverlay() {
 
     const onDblClick = (e: MouseEvent) => {
       if (e.target instanceof Element && e.target.closest('[data-inspector-ui]')) return;
-      const el = pickElement(e.clientX, e.clientY);
+      const el = pickInspectorTarget(pickElement(e.clientX, e.clientY));
       if (!el) return;
       const hit = findSlideSource(el, slideId, { hostOnly: true });
       if (!hit) return;
@@ -221,3 +221,49 @@ function pickElement(x: number, y: number): HTMLElement | null {
   }
   return null;
 }
+
+const INLINE_TEXT_TAGS = new Set([
+  'B',
+  'CODE',
+  'DEL',
+  'EM',
+  'I',
+  'INS',
+  'MARK',
+  'S',
+  'SMALL',
+  'SPAN',
+  'STRONG',
+  'SUB',
+  'SUP',
+  'U',
+]);
+
+function pickInspectorTarget(el: HTMLElement | null): HTMLElement | null {
+  if (!el) return null;
+  const root = el.closest('[data-inspector-root]');
+  const startedOnInlineText = INLINE_TEXT_TAGS.has(el.tagName);
+  for (let cur: HTMLElement | null = el; cur && root?.contains(cur); cur = cur.parentElement) {
+    if (startedOnInlineText && INLINE_TEXT_TAGS.has(cur.tagName)) continue;
+    if (isEditableTextContainer(cur)) return cur;
+  }
+  return el;
+}
+
+function isEditableTextContainer(el: HTMLElement): boolean {
+  if (!el.textContent?.trim()) return false;
+  return hasOnlyInlineTextChildren(el);
+}
+
+function hasOnlyInlineTextChildren(el: HTMLElement): boolean {
+  for (const child of Array.from(el.childNodes)) {
+    if (child.nodeType === Node.TEXT_NODE) {
+      continue;
+    } else if (child instanceof HTMLElement) {
+      if (child.tagName === 'BR') continue;
+      if (INLINE_TEXT_TAGS.has(child.tagName) && hasOnlyInlineTextChildren(child)) continue;
+    }
+    return false;
+  }
+  return true;
+}

package/src/app/components/inspector/inspector-panel.tsx

@@ -3,13 +3,17 @@ import {
   AlignJustify,
   AlignLeft,
   AlignRight,
+  ArrowDownToLine,
   Bold,
   Crop,
   ImageIcon,
   Italic,
+  Loader2,
+  Upload,
   X,
 } from 'lucide-react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { toast } from 'sonner';
 import { Field, NumberField, Section } from '@/components/panel/panel-fields';
 import { PANEL_TRANSITION_MS, PanelShell, useAnimatedOpen } from '@/components/panel/panel-shell';
 import { Button } from '@/components/ui/button';
@@ -30,14 +34,16 @@ import {
 } from '@/components/ui/select';
 import { Separator } from '@/components/ui/separator';
 import { Slider } from '@/components/ui/slider';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Textarea } from '@/components/ui/textarea';
 import { Toggle } from '@/components/ui/toggle';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { type AssetEntry, useAssets } from '@/lib/assets';
+import { type AssetEntry, uploadWithAutoRename, useAssets } from '@/lib/assets';
 import { findSlideSource } from '@/lib/inspector/fiber';
 import type { EditOp } from '@/lib/inspector/use-editor';
-import { useLocale } from '@/lib/use-locale';
+import { useAgentSocketConnected } from '@/lib/use-agent-socket';
+import { format, useLocale } from '@/lib/use-locale';
 import { cn } from '@/lib/utils';
 import type { Locale } from '../../../locale/types';
 import { type SelectedTarget, useInspector } from './inspector-provider';
@@ -56,13 +62,41 @@ type ElementSnapshot = {
   placeholder: { hint: string; width?: number; height?: number } | null;
 };
 
+type ContentSelection = { start: number; end: number };
+type StylePreview = Partial<
+  Pick<ElementSnapshot, 'fontSize' | 'fontWeight' | 'fontStyle' | 'color'>
+>;
+type RangeStylePreview = {
+  anchor: HTMLElement;
+  start: number;
+  end: number;
+  values: StylePreview;
+};
+
+function resolveSelectedTarget(target: SelectedTarget, slideId: string): SelectedTarget {
+  const hit = findSlideSource(target.anchor, slideId, { hostOnly: true });
+  if (!hit) return target;
+  if (hit.line === target.line && hit.column === target.column && hit.anchor === target.anchor) {
+    return target;
+  }
+  return { line: hit.line, column: hit.column, anchor: hit.anchor };
+}
+
 export function InspectorPanel() {
   const { active, slideId, selected, setSelected, bufferOps, pendingCount, add, applyEdit } =
     useInspector();
   const [snapshot, setSnapshot] = useState<ElementSnapshot | null>(null);
+  const [contentSelection, setContentSelection] = useState<ContentSelection | null>(null);
+  const [rangeStylePreview, setRangeStylePreview] = useState<RangeStylePreview | null>(null);
   const reloadCounter = useReloadCounter();
   const t = useLocale();
 
+  useEffect(() => {
+    void selected;
+    setContentSelection(null);
+    setRangeStylePreview(null);
+  }, [selected]);
+
   useEffect(() => {
     void reloadCounter;
     void pendingCount;
@@ -110,10 +144,12 @@ export function InspectorPanel() {
   const apply = useCallback(
     (ops: EditOp[]) => {
       if (!selected) return;
-      bufferOps(selected.line, selected.column, selected.anchor, ops);
-      if (selected.anchor.isConnected) setSnapshot(readSnapshot(selected.anchor));
+      const target = resolveSelectedTarget(selected, slideId);
+      if (target !== selected) setSelected(target);
+      bufferOps(target.line, target.column, target.anchor, ops);
+      if (target.anchor.isConnected) setSnapshot(readSnapshot(target.anchor));
     },
-    [selected, bufferOps],
+    [selected, setSelected, slideId, bufferOps],
   );
 
   // `pinned` keeps the last selection rendered through the close-out
@@ -135,6 +171,76 @@ export function InspectorPanel() {
 
   if (!pinned) return null;
   const { s: pinSelected, n: pinSnapshot } = pinned;
+  const contentRange =
+    pinSnapshot.text !== null && contentSelection && contentSelection.end > contentSelection.start
+      ? contentSelection
+      : null;
+  const rangePreviewApplies =
+    contentRange &&
+    rangeStylePreview &&
+    rangeStylePreview.anchor === pinSelected.anchor &&
+    rangeStylePreview.start === contentRange.start &&
+    rangeStylePreview.end === contentRange.end;
+  const typographySnapshot = rangePreviewApplies
+    ? withStylePreview(pinSnapshot, rangeStylePreview.values)
+    : pinSnapshot;
+  const applyTextStyle = (ops: EditOp[]) => {
+    const styleOps = ops.flatMap((op) => (op.kind === 'set-style' ? [op] : []));
+    const target = resolveSelectedTarget(pinSelected, slideId);
+    if (target !== pinSelected) setSelected(target);
+    if (
+      contentRange &&
+      pinSnapshot.text !== null &&
+      styleOps.length === 1 &&
+      styleOps.length === ops.length &&
+      styleOps.every((op) => INLINE_CONTENT_STYLE_KEYS.has(op.key))
+    ) {
+      bufferOps(
+        target.line,
+        target.column,
+        target.anchor,
+        styleOps.map((op) => ({
+          kind: 'set-text-range-style',
+          start: contentRange.start,
+          end: contentRange.end,
+          key: op.key,
+          value: op.value,
+          prevText: pinSnapshot.text ?? undefined,
+        })),
+      );
+      setRangeStylePreview((current) => ({
+        anchor: target.anchor,
+        start: contentRange.start,
+        end: contentRange.end,
+        values: {
+          ...(current?.anchor === target.anchor &&
+          current.start === contentRange.start &&
+          current.end === contentRange.end
+            ? current.values
+            : {}),
+          ...stylePreviewFromOps(styleOps),
+        },
+      }));
+      if (target.anchor.isConnected) setSnapshot(readSnapshot(target.anchor));
+      return;
+    }
+    if (
+      pinSnapshot.text !== null &&
+      styleOps.length > 0 &&
+      styleOps.length === ops.length &&
+      styleOps.every((op) => INLINE_CONTENT_STYLE_KEYS.has(op.key))
+    ) {
+      bufferOps(
+        target.line,
+        target.column,
+        target.anchor,
+        styleOps.map((op) => ({ ...op, prevText: pinSnapshot.text ?? undefined })),
+      );
+      if (target.anchor.isConnected) setSnapshot(readSnapshot(target.anchor));
+      return;
+    }
+    apply(ops);
+  };
 
   return (
     <PanelShell
@@ -169,16 +275,20 @@ export function InspectorPanel() {
     >
       {pinSnapshot.text !== null && (
         <Section title={t.inspector.contentSection}>
-          <ContentField snapshot={pinSnapshot} apply={apply} />
+          <ContentField
+            snapshot={pinSnapshot}
+            apply={apply}
+            onSelectionChange={setContentSelection}
+          />
         </Section>
       )}
 
       <Separator />
 
       <Section title={t.inspector.typographySection}>
-        <FontSizeField snapshot={pinSnapshot} apply={apply} />
-        <FontWeightField snapshot={pinSnapshot} apply={apply} />
-        <StyleToggles snapshot={pinSnapshot} apply={apply} />
+        <FontSizeField snapshot={typographySnapshot} apply={applyTextStyle} />
+        <FontWeightField snapshot={typographySnapshot} apply={applyTextStyle} />
+        <StyleToggles snapshot={typographySnapshot} apply={applyTextStyle} />
         <LineHeightField snapshot={pinSnapshot} apply={apply} />
         <LetterSpacingField snapshot={pinSnapshot} apply={apply} />
         <TextAlignField snapshot={pinSnapshot} apply={apply} />
@@ -189,8 +299,8 @@ export function InspectorPanel() {
       <Section title={t.inspector.colorSection}>
         <ColorField
           label={t.inspector.textColor}
-          value={pinSnapshot.color}
-          onChange={(v) => apply([{ kind: 'set-style', key: 'color', value: v }])}
+          value={typographySnapshot.color}
+          onChange={(v) => applyTextStyle([{ kind: 'set-style', key: 'color', value: v }])}
           clearable={false}
         />
         <ColorField
@@ -249,12 +359,43 @@ const EDITING_FREEZE_CSS = `
 }
 `;
 
+const INLINE_CONTENT_STYLE_KEYS = new Set([
+  'fontSize',
+  'fontWeight',
+  'fontStyle',
+  'fontFamily',
+  'color',
+]);
+
+function stylePreviewFromOps(ops: Array<Extract<EditOp, { kind: 'set-style' }>>): StylePreview {
+  const preview: StylePreview = {};
+  for (const op of ops) {
+    if (op.key === 'fontSize' && op.value) {
+      const n = parseFloat(op.value);
+      if (Number.isFinite(n)) preview.fontSize = n;
+    } else if (op.key === 'fontWeight') {
+      preview.fontWeight = op.value ? Number(op.value) || 400 : 400;
+    } else if (op.key === 'fontStyle') {
+      preview.fontStyle = op.value === 'italic' ? 'italic' : 'normal';
+    } else if (op.key === 'color' && op.value) {
+      preview.color = op.value;
+    }
+  }
+  return preview;
+}
+
+function withStylePreview(snapshot: ElementSnapshot, preview: StylePreview): ElementSnapshot {
+  return { ...snapshot, ...preview };
+}
+
 function ContentField({
   snapshot,
   apply,
+  onSelectionChange,
 }: {
   snapshot: ElementSnapshot;
   apply: (ops: EditOp[]) => void;
+  onSelectionChange?: (selection: ContentSelection | null) => void;
 }) {
   // Mirror the value locally and skip syncs during IME composition;
   // a re-render mid-composition would otherwise clobber in-progress
@@ -267,6 +408,12 @@ function ContentField({
     if (!composingRef.current) setLocal(snapshot.text ?? '');
   }, [snapshot.text]);
 
+  const reportSelection = (el: HTMLTextAreaElement) => {
+    const start = el.selectionStart ?? 0;
+    const end = el.selectionEnd ?? start;
+    onSelectionChange?.(end > start ? { start, end } : null);
+  };
+
   return (
     <Textarea
       value={local}
@@ -277,17 +424,23 @@ function ContentField({
         composingRef.current = false;
         const v = e.currentTarget.value;
         setLocal(v);
+        reportSelection(e.currentTarget);
         apply([{ kind: 'set-text', value: v }]);
       }}
       onChange={(e) => {
         const v = e.target.value;
         setLocal(v);
+        reportSelection(e.currentTarget);
         if (!composingRef.current) {
           apply([{ kind: 'set-text', value: v }]);
         }
       }}
+      onKeyUp={(e) => reportSelection(e.currentTarget)}
+      onMouseUp={(e) => reportSelection(e.currentTarget)}
+      onSelect={(e) => reportSelection(e.currentTarget)}
+      wrap="off"
       rows={3}
-      className="min-h-16 resize-none text-xs"
+      className="field-sizing-fixed min-h-16 w-full resize-none overflow-x-auto whitespace-pre text-xs"
       placeholder={t.inspector.elementTextPlaceholder}
     />
   );
@@ -652,13 +805,15 @@ function ImageField({
         <AssetPickerDialog
           slideId={slideId}
           onClose={() => setOpen(false)}
-          onPick={(asset) => {
+          onPick={(asset, scope) => {
             setOpen(false);
+            const assetPath =
+              scope === 'global' ? `@assets/${asset.name}` : `./assets/${asset.name}`;
             const ops: EditOp[] = [
               {
                 kind: 'set-attr-asset',
                 attr: 'src',
-                assetPath: `./assets/${asset.name}`,
+                assetPath,
                 previewUrl: asset.url,
               },
             ];
@@ -717,14 +872,16 @@ function PlaceholderField({
         <AssetPickerDialog
           slideId={slideId}
           onClose={() => setOpen(false)}
-          onPick={async (asset) => {
+          onPick={async (asset, scope) => {
             setOpen(false);
             setSubmitting(true);
             try {
+              const assetPath =
+                scope === 'global' ? `@assets/${asset.name}` : `./assets/${asset.name}`;
               await applyEdit(line, column, [
                 {
                   kind: 'replace-placeholder-with-image',
-                  assetPath: `./assets/${asset.name}`,
+                  assetPath,
                 },
               ]);
             } finally {
@@ -737,6 +894,9 @@ function PlaceholderField({
   );
 }
 
+type PickerScope = 'slide' | 'global';
+const GLOBAL_PICKER_SLIDE_ID = '@global';
+
 function AssetPickerDialog({
   slideId,
   onClose,
@@ -744,13 +904,39 @@ function AssetPickerDialog({
 }: {
   slideId: string;
   onClose: () => void;
-  onPick: (asset: AssetEntry) => void;
+  onPick: (asset: AssetEntry, scope: PickerScope) => void;
 }) {
-  const { assets, loading } = useAssets(slideId);
+  const [scope, setScope] = useState<PickerScope>('slide');
+  const effectiveSlideId = scope === 'global' ? GLOBAL_PICKER_SLIDE_ID : slideId;
+  const { assets, loading, refresh } = useAssets(effectiveSlideId);
   const images = assets.filter((a) => a.mime.startsWith('image/'));
   const t = useLocale();
-  const path = `slides/${slideId}/assets/`;
+  const path = scope === 'global' ? 'assets/' : `slides/${slideId}/assets/`;
   const [descPrefix, descSuffix] = t.inspector.replaceImageDescription.split('{path}');
+  const [uploading, setUploading] = useState(false);
+  const [dragActive, setDragActive] = useState(false);
+  const dragDepth = useRef(0);
+  const inputId = useId();
+
+  const handleFile = useCallback(
+    async (file: File) => {
+      if (!file.type.startsWith('image/')) return;
+      setUploading(true);
+      try {
+        const { ok, status, entry } = await uploadWithAutoRename(effectiveSlideId, file);
+        if (!ok || !entry) {
+          toast.error(format(t.asset.toastUploadFailed, { status }));
+          return;
+        }
+        await refresh().catch(() => {});
+        onPick(entry, scope);
+      } finally {
+        setUploading(false);
+      }
+    },
+    [effectiveSlideId, scope, refresh, onPick, t],
+  );
+
   return (
     <Dialog open onOpenChange={(o) => !o && onClose()}>
       <DialogContent className="sm:max-w-xl">
@@ -762,7 +948,66 @@ function AssetPickerDialog({
             {descSuffix}
           </DialogDescription>
         </DialogHeader>
-        <div className="max-h-[60vh] overflow-y-auto">
+        <Tabs value={scope} onValueChange={(next) => setScope(next as PickerScope)}>
+          <TabsList>
+            <TabsTrigger value="slide">{t.asset.scopeSlide}</TabsTrigger>
+            <TabsTrigger value="global">{t.asset.scopeGlobal}</TabsTrigger>
+          </TabsList>
+        </Tabs>
+        <label
+          htmlFor={inputId}
+          className={cn(
+            'absolute right-12 top-3.5 inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-[5px] border border-border bg-card px-2 text-[12px] font-medium transition-colors',
+            'hover:bg-muted/60 hover:border-foreground/20 active:translate-y-px',
+            uploading && 'pointer-events-none opacity-60',
+          )}
+        >
+          {uploading ? (
+            <Loader2 className="size-3.5 animate-spin" />
+          ) : (
+            <Upload className="size-3.5" />
+          )}
+          <span>{t.asset.upload}</span>
+        </label>
+        <input
+          id={inputId}
+          type="file"
+          accept="image/*"
+          className="sr-only"
+          disabled={uploading}
+          onChange={(e) => {
+            const file = e.target.files?.[0];
+            e.target.value = '';
+            if (file) handleFile(file).catch(() => {});
+          }}
+        />
+        <section
+          aria-label={t.inspector.replaceImageDialogTitle}
+          className="relative max-h-[60vh] overflow-y-auto"
+          onDragEnter={(e) => {
+            if (uploading || !hasFiles(e)) return;
+            e.preventDefault();
+            dragDepth.current += 1;
+            setDragActive(true);
+          }}
+          onDragOver={(e) => {
+            if (uploading || !hasFiles(e)) return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'copy';
+          }}
+          onDragLeave={() => {
+            dragDepth.current = Math.max(0, dragDepth.current - 1);
+            if (dragDepth.current === 0) setDragActive(false);
+          }}
+          onDrop={(e) => {
+            if (uploading || !hasFiles(e)) return;
+            e.preventDefault();
+            dragDepth.current = 0;
+            setDragActive(false);
+            const file = e.dataTransfer.files?.[0];
+            if (file) handleFile(file).catch(() => {});
+          }}
+        >
           {loading ? (
             <p className="px-1 py-6 text-center text-xs text-muted-foreground">
               {t.inspector.pickerLoading}
@@ -777,7 +1022,7 @@ function AssetPickerDialog({
                 <button
                   key={asset.name}
                   type="button"
-                  onClick={() => onPick(asset)}
+                  onClick={() => onPick(asset, scope)}
                   className={cn(
                     'group flex flex-col overflow-hidden rounded-lg border bg-card text-left shadow-sm transition-all',
                     'hover:-translate-y-0.5 hover:shadow-md focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none',
@@ -800,14 +1045,39 @@ function AssetPickerDialog({
               ))}
             </div>
           )}
-        </div>
+          {dragActive && (
+            <div
+              className="pointer-events-none absolute inset-0 z-10 animate-in fade-in-0 duration-200"
+              aria-hidden
+            >
+              <div className="absolute inset-0 bg-brand/5" />
+              <div className="absolute inset-1 rounded-[8px] border border-dashed border-brand/40" />
+              <div className="absolute inset-x-0 bottom-4 flex justify-center">
+                <div className="flex items-center gap-2 rounded-[6px] border border-border bg-card px-3 py-1.5 text-[12px] font-medium shadow-floating">
+                  <ArrowDownToLine className="size-3.5 text-brand" />
+                  <span>{t.asset.dropToUpload}</span>
+                </div>
+              </div>
+            </div>
+          )}
+        </section>
       </DialogContent>
     </Dialog>
   );
 }
 
+function hasFiles(e: React.DragEvent): boolean {
+  const types = e.dataTransfer?.types;
+  if (!types) return false;
+  for (let i = 0; i < types.length; i++) {
+    if (types[i] === 'Files') return true;
+  }
+  return false;
+}
+
 function AgentWatchingBadge() {
   const t = useLocale();
+  const connected = useAgentSocketConnected();
   return (
     <TooltipProvider delayDuration={200}>
       <Tooltip>
@@ -817,14 +1087,20 @@ function AgentWatchingBadge() {
             className="flex shrink-0 cursor-help items-center gap-1.5 rounded-[3px] border border-hairline bg-card px-1.5 py-px text-[10.5px] text-foreground/85 outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
           >
             <span aria-hidden className="relative flex size-1.5 items-center justify-center">
-              <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-500 opacity-60" />
-              <span className="relative inline-flex size-1.5 rounded-full bg-emerald-500" />
+              {connected ? (
+                <>
+                  <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-500 opacity-60" />
+                  <span className="relative inline-flex size-1.5 rounded-full bg-emerald-500" />
+                </>
+              ) : (
+                <span className="relative inline-flex size-1.5 rounded-full bg-rose-500" />
+              )}
             </span>
-            {t.inspector.agentWatching}
+            {connected ? t.inspector.agentWatching : t.inspector.agentNotWatching}
           </button>
         </TooltipTrigger>
         <TooltipContent side="bottom" align="end" className="max-w-[260px] leading-relaxed">
-          {t.inspector.agentWatchingTooltip}
+          {connected ? t.inspector.agentWatchingTooltip : t.inspector.agentNotWatchingTooltip}
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>
@@ -886,7 +1162,7 @@ function CommentsSection({
 
 function readSnapshot(el: HTMLElement): ElementSnapshot {
   const cs = getComputedStyle(el);
-  const text = isSimpleTextElement(el) ? (el.textContent ?? '') : null;
+  const text = isSimpleTextElement(el) ? readEditableText(el) : null;
   const imageSrc =
     el.tagName === 'IMG'
       ? (el as HTMLImageElement).currentSrc || (el as HTMLImageElement).src || null
@@ -918,8 +1194,72 @@ function readSnapshot(el: HTMLElement): ElementSnapshot {
 
 function isSimpleTextElement(el: HTMLElement): boolean {
   if (el.childNodes.length === 0) return true;
-  if (el.childNodes.length === 1 && el.firstChild?.nodeType === Node.TEXT_NODE) return true;
-  return false;
+  return hasOnlyInlineTextChildren(el);
+}
+
+const INLINE_TEXT_TAGS = new Set([
+  'B',
+  'CODE',
+  'DEL',
+  'EM',
+  'I',
+  'INS',
+  'MARK',
+  'S',
+  'SMALL',
+  'SPAN',
+  'STRONG',
+  'SUB',
+  'SUP',
+  'U',
+]);
+
+function hasOnlyInlineTextChildren(el: HTMLElement): boolean {
+  for (const child of Array.from(el.childNodes)) {
+    if (child.nodeType === Node.TEXT_NODE) {
+      continue;
+    } else if (child instanceof HTMLElement) {
+      if (child.tagName === 'BR') continue;
+      if (INLINE_TEXT_TAGS.has(child.tagName) && hasOnlyInlineTextChildren(child)) continue;
+    }
+    return false;
+  }
+  return true;
+}
+
+function readEditableText(el: HTMLElement): string {
+  const parts: string[] = [];
+  for (const child of Array.from(el.childNodes)) {
+    if (child.nodeType === Node.TEXT_NODE) {
+      parts.push(renderedTextNodeValue(child as Text));
+    } else if (child instanceof HTMLBRElement) {
+      parts.push('\n');
+    } else if (child instanceof HTMLElement) {
+      parts.push(readEditableText(child));
+    }
+  }
+  return normalizeRenderedText(parts);
+}
+
+function normalizeRenderedText(parts: string[]): string {
+  return parts
+    .map((part, index) => {
+      if (part === '\n') return part;
+      let next = part;
+      if (parts[index - 1] === '\n') next = next.replace(/^\s+/, '');
+      if (parts[index + 1] === '\n') next = next.replace(/\s+$/, '');
+      return next;
+    })
+    .join('');
+}
+
+function renderedTextNodeValue(node: Text): string {
+  const value = node.textContent ?? '';
+  const whiteSpace = node.parentElement ? getComputedStyle(node.parentElement).whiteSpace : '';
+  if (whiteSpace === 'pre' || whiteSpace === 'pre-wrap' || whiteSpace === 'break-spaces') {
+    return value;
+  }
+  return value.replace(/\s+/g, ' ');
 }
 
 function rgbToHex(value: string): string | null {