@adminide-stack/yantra-mobile 12.0.128 → 12.0.129-alpha.1

package/lib/features/docs/DocsEditorExperience.js

@@ -0,0 +1,949 @@
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useMemo,useRef,useState,useCallback,useEffect}from'react';import {useWindowDimensions,Keyboard,Alert,View,ActivityIndicator,Text,TextInput,KeyboardAvoidingView,FlatList,Modal,Platform,StyleSheet}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {useCanvasTheme,themedStyles}from'../canvas/canvasTheme.js';import {ActionButton,Pressable,SPACE,RADIUS,TYPE}from'../canvas/canvasUi.js';import {useSafeInsets}from'../canvas/withRemoteSafeArea.js';import {createDesignImagePicker}from'../design/pickDesignImage.js';import {emptyDocument,serialiseBlocks,flattenBlocks,updateBlock,isTextBlock,findBlock,inlineToRuns,runsText,applyTextChange,activeStyles,newBlock,moveBlock,outdentBlock,indentBlock,linkAt,toggleStyle,splitRuns,setLink,outlineOf,setColor,withTableCellRuns,tableCellRuns}from'./blocks.js';import {backspaceAtStart,applyLines,setBlockRuns,insertBlockAfter,deleteBlock,duplicateBlock,setBlockType}from'./docEdits.js';import {newDocId,loadOwnedDocArtifact,buildDocArtifact,saveDocArtifact}from'./docArtifacts.js';import {blocksToMarkdown,blocksToHtml,standaloneHtml,toWordHtml}from'./docExport.js';import {shareText,shareFile,sharePdf}from'./docShare.js';import {DocBlockRow}from'./DocBlockRow.js';import {ColorRow,DocsToolbar}from'./DocsToolbar.js';var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const SAVE_DEBOUNCE_MS = 1200;
+const HISTORY_LIMIT = 100;
+const TYPING_COALESCE_MS = 1e3;
+const commonAffixes = (a, b) => {
+  let prefix = 0;
+  const max = Math.min(a.length, b.length);
+  while (prefix < max && a[prefix] === b[prefix]) prefix += 1;
+  let suffix = 0;
+  while (suffix < max - prefix && a[a.length - 1 - suffix] === b[b.length - 1 - suffix]) suffix += 1;
+  return {
+    prefix,
+    suffix
+  };
+};
+function statusLabel(save) {
+  if (save.status === "saving") return "Saving...";
+  if (save.status === "saved") return "Saved";
+  if (save.status === "error") return save.error || "Not saved";
+  return "";
+}
+function DocsEditorExperience({
+  token,
+  indexUrl,
+  docId,
+  sessionId,
+  onClose,
+  onPickLocalMedia,
+  uploadMedia,
+  testID
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const insets = useSafeInsets();
+  const {
+    width
+  } = useWindowDimensions();
+  const pageWidth = Math.min(width, 760) - SPACE.lg * 2;
+  const index = useMemo(() => indexUrl ? {
+    url: indexUrl,
+    token
+  } : null, [indexUrl, token]);
+  const pickImage = useMemo(() => createDesignImagePicker(onPickLocalMedia, uploadMedia), [onPickLocalMedia, uploadMedia]);
+  const idRef = useRef(docId && docId.startsWith("doc:") ? docId.trim() : newDocId());
+  const keepRef = useRef(sessionId ? {
+    sessionId
+  } : {});
+  const [phase, setPhase] = useState(docId ? "loading" : "ready");
+  const [loadError, setLoadError] = useState(null);
+  const [doc, setDoc] = useState(() => ({
+    title: "",
+    blocks: emptyDocument()
+  }));
+  const docRef = useRef(doc);
+  const past = useRef([]);
+  const future = useRef([]);
+  const lastEdit = useRef({
+    key: "",
+    at: 0
+  });
+  const [, setHistoryTick] = useState(0);
+  const [nonces, setNonces] = useState({});
+  const [epoch, setEpoch] = useState(0);
+  const savedRef = useRef(doc);
+  const [save, setSave] = useState({
+    status: "idle"
+  });
+  const commit = useCallback((next, coalesceKey) => {
+    const now = Date.now();
+    const last = lastEdit.current;
+    if (!coalesceKey || coalesceKey !== last.key || now - last.at > TYPING_COALESCE_MS) {
+      past.current.push(docRef.current);
+      if (past.current.length > HISTORY_LIMIT) past.current.shift();
+    }
+    lastEdit.current = {
+      key: coalesceKey != null ? coalesceKey : "",
+      at: now
+    };
+    future.current = [];
+    docRef.current = next;
+    setDoc(next);
+    setHistoryTick((n) => n + 1);
+  }, []);
+  const editBlocks = useCallback((blocks, coalesceKey) => {
+    if (blocks === docRef.current.blocks) return;
+    commit(__spreadProps(__spreadValues({}, docRef.current), {
+      blocks
+    }), coalesceKey);
+  }, [commit]);
+  const restore = useCallback((from, to) => {
+    const snap = from.current.pop();
+    if (!snap) return;
+    to.current.push(docRef.current);
+    lastEdit.current = {
+      key: "",
+      at: 0
+    };
+    docRef.current = snap;
+    setDoc(snap);
+    setEpoch((n) => n + 1);
+    setHistoryTick((n) => n + 1);
+  }, []);
+  const undo = useCallback(() => restore(past, future), [restore]);
+  const redo = useCallback(() => restore(future, past), [restore]);
+  const load = useCallback(async () => {
+    var _a;
+    if (!docId) return;
+    if (!index) {
+      setPhase("error");
+      setLoadError("Docs cannot be opened from this build.");
+      return;
+    }
+    setPhase("loading");
+    const result = await loadOwnedDocArtifact(index, docId);
+    if (result.artifact) {
+      const {
+        artifact
+      } = result;
+      idRef.current = artifact.id;
+      keepRef.current = __spreadValues(__spreadValues(__spreadValues({}, artifact.sessionId ? {
+        sessionId: artifact.sessionId
+      } : {}), artifact.thumbUrl ? {
+        thumbUrl: artifact.thumbUrl
+      } : {}), artifact.exportUrl ? {
+        exportUrl: artifact.exportUrl
+      } : {});
+      const snap = {
+        title: (_a = artifact.doc.title) != null ? _a : "",
+        blocks: artifact.doc.blocks.length ? artifact.doc.blocks : emptyDocument()
+      };
+      docRef.current = snap;
+      savedRef.current = snap;
+      past.current = [];
+      future.current = [];
+      setDoc(snap);
+      setEpoch((n) => n + 1);
+      setPhase("ready");
+      return;
+    }
+    setLoadError(result.error);
+    setPhase(result.error ? "error" : "missing");
+  }, [docId, index]);
+  useEffect(() => {
+    void load();
+  }, [load]);
+  const startNew = useCallback(() => {
+    idRef.current = newDocId();
+    const snap = {
+      title: "",
+      blocks: emptyDocument()
+    };
+    docRef.current = snap;
+    savedRef.current = snap;
+    past.current = [];
+    future.current = [];
+    setDoc(snap);
+    setPhase("ready");
+  }, []);
+  const savingRef = useRef(null);
+  const flush = useCallback(async () => {
+    if (savingRef.current) await savingRef.current;
+    const snap = docRef.current;
+    if (snap === savedRef.current) return true;
+    if (!index) {
+      setSave({
+        status: "error",
+        error: "Not saved: this build has no doc index."
+      });
+      return false;
+    }
+    const job = (async () => {
+      setSave({
+        status: "saving"
+      });
+      const artifact = buildDocArtifact(idRef.current, {
+        version: 2,
+        title: snap.title.trim(),
+        blocks: serialiseBlocks(snap.blocks),
+        updatedAt: Date.now()
+      }, keepRef.current);
+      const result = await saveDocArtifact(index, artifact);
+      if (result.ok) {
+        savedRef.current = snap;
+        setSave({
+          status: "saved"
+        });
+      } else {
+        setSave({
+          status: "error",
+          error: result.error
+        });
+      }
+      return result.ok;
+    })();
+    savingRef.current = job;
+    try {
+      return await job;
+    } finally {
+      savingRef.current = null;
+    }
+  }, [index]);
+  useEffect(() => {
+    if (phase !== "ready" || doc === savedRef.current) return void 0;
+    const timer = setTimeout(() => void flush(), SAVE_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [doc, phase, flush]);
+  const close = useCallback(async () => {
+    Keyboard.dismiss();
+    if (phase !== "ready" || docRef.current === savedRef.current) {
+      onClose();
+      return;
+    }
+    const ok = await flush();
+    if (ok) {
+      onClose();
+      return;
+    }
+    Alert.alert("Not saved", "Your latest edits could not be saved. Leave anyway?", [{
+      text: "Stay",
+      style: "cancel"
+    }, {
+      text: "Leave",
+      style: "destructive",
+      onPress: onClose
+    }]);
+  }, [phase, flush, onClose]);
+  const inputs = useRef(/* @__PURE__ */ new Map());
+  const selRef = useRef(null);
+  const [focusedId, setFocusedId] = useState(null);
+  const [selTick, setSelTick] = useState(0);
+  const pendingStyles = useRef(null);
+  const pendingFocus = useRef(null);
+  const listRef = useRef(null);
+  const [colorsOpen, setColorsOpen] = useState(false);
+  const [sheet, setSheet] = useState(null);
+  const [notice, setNotice] = useState(null);
+  useEffect(() => {
+    if (!notice) return void 0;
+    const timer = setTimeout(() => setNotice(null), 3200);
+    return () => clearTimeout(timer);
+  }, [notice]);
+  const flat = useMemo(() => flattenBlocks(doc.blocks), [doc.blocks]);
+  const focusBlock = useCallback((id, at) => {
+    pendingFocus.current = {
+      id,
+      at
+    };
+    setFocusedId(id);
+  }, []);
+  useEffect(() => {
+    const target = pendingFocus.current;
+    if (!target) return void 0;
+    let tries = 0;
+    let frame = null;
+    const attempt = () => {
+      var _a;
+      const input = inputs.current.get(target.id);
+      if (input) {
+        pendingFocus.current = null;
+        input.focus();
+        setTimeout(() => {
+          var _a2;
+          return (_a2 = input.setSelection) == null ? void 0 : _a2.call(input, target.at, target.at);
+        }, 30);
+        selRef.current = {
+          id: target.id,
+          start: target.at,
+          end: target.at
+        };
+        return;
+      }
+      const i = flat.findIndex((f) => f.block.id === target.id);
+      if (tries === 0 && i >= 0) (_a = listRef.current) == null ? void 0 : _a.scrollToIndex({
+        index: i,
+        viewPosition: 0.3,
+        animated: true
+      });
+      tries += 1;
+      if (tries < 10) frame = setTimeout(attempt, 50);
+    };
+    attempt();
+    return () => {
+      if (frame) clearTimeout(frame);
+    };
+  });
+  const handlers = useRef(null);
+  handlers.current = {
+    registerInput: (id, input) => {
+      if (input) inputs.current.set(id, input);
+      else inputs.current.delete(id);
+    },
+    onChangeText: (id, text) => {
+      const block = findBlock(docRef.current.blocks, id);
+      if (!block) return;
+      const prevRuns = inlineToRuns(block.content);
+      const prevText = runsText(prevRuns);
+      const runs = applyTextChange(prevRuns, text, void 0, pendingStyles.current);
+      pendingStyles.current = null;
+      if (block.type !== "codeBlock" && text.includes("\n")) {
+        const {
+          suffix
+        } = commonAffixes(prevText, text);
+        const result = applyLines(docRef.current.blocks, id, runs, suffix);
+        editBlocks(result.blocks);
+        setNonces((n) => {
+          var _a;
+          return __spreadProps(__spreadValues({}, n), {
+            [id]: ((_a = n[id]) != null ? _a : 0) + 1
+          });
+        });
+        if (result.focus) focusBlock(result.focus.id, result.focus.at);
+        return;
+      }
+      editBlocks(setBlockRuns(docRef.current.blocks, id, runs), `type:${id}`);
+    },
+    onSelection: (id, start, end) => {
+      const prev = selRef.current;
+      selRef.current = {
+        id,
+        start,
+        end
+      };
+      if (!prev || prev.id !== id || prev.start !== start || prev.end !== end) setSelTick((n) => n + 1);
+    },
+    onFocusBlock: (id) => {
+      var _a, _b;
+      if (((_a = selRef.current) == null ? void 0 : _a.id) !== id) {
+        pendingStyles.current = null;
+        if (!isTextBlock((_b = findBlock(docRef.current.blocks, id)) != null ? _b : {
+          type: ""
+        })) selRef.current = {
+          id,
+          start: 0,
+          end: 0
+        };
+      }
+      setFocusedId(id);
+      setColorsOpen(false);
+    },
+    onBackspace: (id) => {
+      const sel = selRef.current;
+      if (!sel || sel.id !== id || sel.start !== 0 || sel.end !== 0) return;
+      const result = backspaceAtStart(docRef.current.blocks, id);
+      if (!result) return;
+      editBlocks(result.blocks);
+      if (result.focus) {
+        if (result.focus.id !== id) setNonces((n) => {
+          var _a;
+          return __spreadProps(__spreadValues({}, n), {
+            [result.focus.id]: ((_a = n[result.focus.id]) != null ? _a : 0) + 1
+          });
+        });
+        focusBlock(result.focus.id, result.focus.at);
+      }
+    },
+    onToggleCheck: (id) => {
+      editBlocks(updateBlock(docRef.current.blocks, id, (b) => {
+        var _a;
+        return __spreadProps(__spreadValues({}, b), {
+          props: __spreadProps(__spreadValues({}, b.props), {
+            checked: !((_a = b.props) == null ? void 0 : _a.checked)
+          })
+        });
+      }));
+    },
+    onCaption: (id, caption) => {
+      editBlocks(updateBlock(docRef.current.blocks, id, (b) => __spreadProps(__spreadValues({}, b), {
+        props: __spreadProps(__spreadValues({}, b.props), {
+          caption
+        })
+      })), `caption:${id}`);
+    },
+    onCellText: (id, row, col, text) => {
+      editBlocks(updateBlock(docRef.current.blocks, id, (b) => {
+        const table = b.content;
+        if (!table || !Array.isArray(table.rows)) return b;
+        const rows = table.rows.map((r, ri) => ri !== row ? r : __spreadProps(__spreadValues({}, r), {
+          cells: r.cells.map((cell, ci) => ci !== col ? cell : withTableCellRuns(cell, applyTextChange(tableCellRuns(cell), text)))
+        }));
+        return __spreadProps(__spreadValues({}, b), {
+          content: __spreadProps(__spreadValues({}, table), {
+            rows
+          })
+        });
+      }), `cell:${id}:${row}:${col}`);
+    }
+  };
+  const stableHandlers = useMemo(() => ({
+    registerInput: (...a) => handlers.current.registerInput(...a),
+    onChangeText: (...a) => handlers.current.onChangeText(...a),
+    onSelection: (...a) => handlers.current.onSelection(...a),
+    onFocusBlock: (...a) => handlers.current.onFocusBlock(...a),
+    onBackspace: (...a) => handlers.current.onBackspace(...a),
+    onToggleCheck: (...a) => handlers.current.onToggleCheck(...a),
+    onCaption: (...a) => handlers.current.onCaption(...a),
+    onCellText: (...a) => handlers.current.onCellText(...a)
+  }), []);
+  const focused = focusedId ? findBlock(doc.blocks, focusedId) : null;
+  const toolbarState = useMemo(() => {
+    var _a, _b, _c;
+    if (!focused) return null;
+    const sel = ((_a = selRef.current) == null ? void 0 : _a.id) === focused.id ? selRef.current : null;
+    const runs = inlineToRuns(focused.content);
+    const active = sel ? activeStyles(runs, sel.start, sel.end) : /* @__PURE__ */ new Set();
+    if (pendingStyles.current) {
+      for (const key of ["bold", "italic", "underline", "strike", "code"]) {
+        if (pendingStyles.current[key]) active.add(key);
+        else active.delete(key);
+      }
+    }
+    return {
+      blockType: focused.type,
+      level: focused.type === "heading" ? Number((_b = focused.props) == null ? void 0 : _b.level) || 1 : void 0,
+      textBlock: isTextBlock(focused),
+      active,
+      align: typeof ((_c = focused.props) == null ? void 0 : _c.textAlignment) === "string" ? focused.props.textAlignment : "left",
+      canImage: Boolean(pickImage)
+    };
+  }, [focused, selTick, pickImage]);
+  const applyToSelection = useCallback((fn) => {
+    const sel = selRef.current;
+    if (!sel) return;
+    const block = findBlock(docRef.current.blocks, sel.id);
+    if (!block || !isTextBlock(block)) return;
+    const runs = inlineToRuns(block.content);
+    editBlocks(setBlockRuns(docRef.current.blocks, sel.id, fn(runs, sel.start, sel.end)));
+  }, [editBlocks]);
+  const insertImage = useCallback(async () => {
+    var _a, _b;
+    if (!pickImage) return;
+    try {
+      setNotice("Adding picture...");
+      const picked = await pickImage();
+      if (!picked) {
+        setNotice(null);
+        return;
+      }
+      const block = newBlock("image", {
+        url: picked.src,
+        name: (_b = (_a = picked.src.split("/").pop()) == null ? void 0 : _a.split("?")[0]) != null ? _b : ""
+      });
+      editBlocks(insertBlockAfter(docRef.current.blocks, focusedId, block));
+      setFocusedId(block.id);
+      setNotice(null);
+    } catch (err) {
+      setNotice(err instanceof Error ? err.message : "Could not add that picture.");
+    }
+  }, [pickImage, editBlocks, focusedId]);
+  const onToolbar = useCallback((action) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const id = focusedId;
+    if (action.type === "done") {
+      Keyboard.dismiss();
+      setColorsOpen(false);
+      return;
+    }
+    if (action.type === "image") {
+      void insertImage();
+      return;
+    }
+    if (action.type === "table") {
+      const table = newBlock("table");
+      const after = newBlock("paragraph");
+      let blocks2 = insertBlockAfter(docRef.current.blocks, id, table);
+      blocks2 = insertBlockAfter(blocks2, table.id, after);
+      editBlocks(blocks2);
+      setFocusedId(table.id);
+      return;
+    }
+    if (!id) return;
+    const blocks = docRef.current.blocks;
+    switch (action.type) {
+      case "blockType": {
+        const block = findBlock(blocks, id);
+        if (!block) return;
+        const same = block.type === action.blockType && (action.level === void 0 || Number((_a = block.props) == null ? void 0 : _a.level) === action.level);
+        const type = same && action.blockType !== "paragraph" && action.blockType !== "heading" ? "paragraph" : action.blockType;
+        editBlocks(setBlockType(blocks, id, type, type === "heading" ? {
+          level: (_b = action.level) != null ? _b : 1
+        } : {}));
+        return;
+      }
+      case "style": {
+        const sel = selRef.current;
+        if (sel && sel.id === id && sel.end === sel.start) {
+          const block = findBlock(blocks, id);
+          const on = activeStyles(inlineToRuns(block == null ? void 0 : block.content), sel.start, sel.end);
+          const base = (_c = pendingStyles.current) != null ? _c : {};
+          const armed = __spreadValues({}, base);
+          if (!pendingStyles.current) for (const s of on) armed[s] = true;
+          if (armed[action.style]) delete armed[action.style];
+          else armed[action.style] = true;
+          pendingStyles.current = armed;
+          setSelTick((n) => n + 1);
+          return;
+        }
+        applyToSelection((runs, start, end) => toggleStyle(runs, start, end, action.style));
+        return;
+      }
+      case "link": {
+        const sel = selRef.current;
+        if (!sel || sel.id !== id) return;
+        const block = findBlock(blocks, id);
+        const runs = inlineToRuns(block == null ? void 0 : block.content);
+        let {
+          start,
+          end
+        } = sel;
+        const existing = (_d = linkAt(runs, start)) != null ? _d : start > 0 ? linkAt(runs, start - 1) : null;
+        if (start === end && existing) {
+          let pos = 0;
+          for (const run of runs) {
+            const runEnd = pos + run.text.length;
+            if (run.href === existing && start >= pos && start <= runEnd) {
+              start = pos;
+              end = runEnd;
+              break;
+            }
+            pos = runEnd;
+          }
+        }
+        setSheet({
+          type: "link",
+          id,
+          start,
+          end,
+          href: existing != null ? existing : ""
+        });
+        return;
+      }
+      case "colors":
+        setColorsOpen((open) => !open);
+        return;
+      case "align":
+        editBlocks(updateBlock(blocks, id, (b) => __spreadProps(__spreadValues({}, b), {
+          props: __spreadProps(__spreadValues({}, b.props), {
+            textAlignment: action.align
+          })
+        })));
+        return;
+      case "indent":
+        editBlocks(indentBlock(blocks, id));
+        focusBlock(id, (_f = (_e = selRef.current) == null ? void 0 : _e.start) != null ? _f : 0);
+        return;
+      case "outdent":
+        editBlocks(outdentBlock(blocks, id));
+        focusBlock(id, (_h = (_g = selRef.current) == null ? void 0 : _g.start) != null ? _h : 0);
+        return;
+      case "move":
+        editBlocks(moveBlock(blocks, id, action.dir));
+        return;
+      case "duplicate":
+        editBlocks(duplicateBlock(blocks, id));
+        return;
+      case "delete": {
+        const result = deleteBlock(blocks, id);
+        editBlocks(result.blocks);
+        if (result.focus) focusBlock(result.focus.id, result.focus.at);
+        else setFocusedId(null);
+        return;
+      }
+    }
+  }, [focusedId, editBlocks, applyToSelection, insertImage, focusBlock]);
+  const applyLink = useCallback((href) => {
+    if (!sheet || typeof sheet !== "object") return;
+    const clean = href.trim();
+    const url = clean && !/^[a-z][a-z0-9+.-]*:/i.test(clean) ? `https://${clean}` : clean;
+    const {
+      id,
+      start,
+      end
+    } = sheet;
+    const block = findBlock(docRef.current.blocks, id);
+    if (!block) return;
+    let runs = inlineToRuns(block.content);
+    if (start === end) {
+      if (!url) return;
+      const [before, after] = splitRuns(runs, start);
+      runs = [...before, {
+        text: url,
+        styles: {},
+        href: url
+      }, ...after];
+    } else {
+      runs = setLink(runs, start, end, url || null);
+    }
+    editBlocks(setBlockRuns(docRef.current.blocks, id, runs));
+    setNonces((n) => {
+      var _a;
+      return __spreadProps(__spreadValues({}, n), {
+        [id]: ((_a = n[id]) != null ? _a : 0) + 1
+      });
+    });
+    setSheet(null);
+  }, [sheet, editBlocks]);
+  const outline = useMemo(() => sheet === "outline" ? outlineOf(doc.blocks) : [], [sheet, doc.blocks]);
+  const jumpTo = useCallback((id) => {
+    var _a;
+    setSheet(null);
+    const i = flat.findIndex((f) => f.block.id === id);
+    if (i >= 0) (_a = listRef.current) == null ? void 0 : _a.scrollToIndex({
+      index: i,
+      viewPosition: 0.1,
+      animated: true
+    });
+    const block = findBlock(docRef.current.blocks, id);
+    focusBlock(id, runsText(inlineToRuns(block == null ? void 0 : block.content)).length);
+  }, [flat, focusBlock]);
+  const exportAs = useCallback(async (format) => {
+    setSheet(null);
+    const {
+      title: rawTitle,
+      blocks
+    } = docRef.current;
+    const title = rawTitle.trim() || "Untitled doc";
+    try {
+      if (format === "md") {
+        await shareText(`${rawTitle.trim() ? `# ${rawTitle.trim()}
+
+` : ""}${blocksToMarkdown(blocks)}`, title);
+        return;
+      }
+      const body = blocksToHtml(blocks);
+      if (format === "html") await shareFile(title, "html", standaloneHtml(title, body), "text/html");
+      else if (format === "pdf") await sharePdf(title, standaloneHtml(title, body));
+      else {
+        const outcome = await shareFile(title, "doc", toWordHtml(title, body), "application/msword");
+        if (outcome === "saved") setNotice("Saved for Word.");
+      }
+    } catch (err) {
+      setNotice(err instanceof Error ? err.message : "Could not export this doc.");
+    }
+  }, []);
+  if (phase !== "ready") {
+    return /* @__PURE__ */ jsx(View, { style: [styles.root, styles.center, {
+      paddingTop: insets.top
+    }], testID, children: phase === "loading" ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.edInk }) : /* @__PURE__ */ jsxs(View, { style: styles.message, children: [
+      /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "file-document-outline", size: 36, color: theme.mutedForeground }),
+      /* @__PURE__ */ jsx(Text, { style: styles.messageTitle, children: phase === "missing" ? "This doc is not in your docs" : "Could not open this doc" }),
+      loadError ? /* @__PURE__ */ jsx(Text, { style: styles.messageBody, children: loadError }) : null,
+      phase === "error" && index ? /* @__PURE__ */ jsx(ActionButton, { label: "Try again", onPress: () => void load() }) : null,
+      /* @__PURE__ */ jsx(ActionButton, { label: "Start a new doc", variant: "secondary", onPress: startNew }),
+      /* @__PURE__ */ jsx(ActionButton, { label: "Back", variant: "secondary", onPress: onClose })
+    ] }) });
+  }
+  const header = /* @__PURE__ */ jsx(TextInput, { defaultValue: doc.title, onChangeText: (title) => commit(__spreadProps(__spreadValues({}, docRef.current), {
+    title
+  }), "title"), onFocus: () => setFocusedId(null), placeholder: "Untitled doc", placeholderTextColor: theme.mutedForeground, style: styles.titleInput, multiline: true, scrollEnabled: false, blurOnSubmit: true, returnKeyType: "next", onSubmitEditing: () => {
+    const first = flat.find((f) => isTextBlock(f.block));
+    if (first) focusBlock(first.block.id, 0);
+  }, accessibilityLabel: "Doc title" }, `title-${epoch}`);
+  const footer = /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+    const last = doc.blocks[doc.blocks.length - 1];
+    if (last && isTextBlock(last) && !runsText(inlineToRuns(last.content))) {
+      focusBlock(last.id, 0);
+      return;
+    }
+    const block = newBlock("paragraph");
+    editBlocks([...docRef.current.blocks, block]);
+    focusBlock(block.id, 0);
+  }, style: styles.tail, accessibilityRole: "button", accessibilityLabel: "Write at the end" });
+  const topButton = (icon, label, onPress, disabled) => /* @__PURE__ */ jsx(Pressable, { onPress, disabled, hitSlop: 6, style: [styles.topButton, disabled && styles.disabled], accessibilityRole: "button", accessibilityLabel: label, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 22, color: theme.edInk }) });
+  return /* @__PURE__ */ jsxs(KeyboardAvoidingView, { style: [styles.root, {
+    paddingTop: insets.top
+  }], behavior: Platform.OS === "ios" ? "padding" : void 0, testID, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.topBar, children: [
+      topButton("chevron-left", "Back", () => void close()),
+      /* @__PURE__ */ jsxs(View, { style: styles.titleWrap, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.barTitle, numberOfLines: 1, children: doc.title.trim() || "Untitled doc" }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.status, save.status === "error" && {
+          color: theme.edDanger
+        }], numberOfLines: 1, children: statusLabel(save) })
+      ] }),
+      topButton("undo", "Undo", undo, past.current.length === 0),
+      topButton("redo", "Redo", redo, future.current.length === 0),
+      topButton("format-list-text", "Outline", () => setSheet("outline")),
+      topButton("export-variant", "Export", () => setSheet("export"))
+    ] }),
+    /* @__PURE__ */ jsx(FlatList, { ref: listRef, data: flat, keyExtractor: (item) => item.block.id, renderItem: ({
+      item
+    }) => {
+      var _a;
+      return /* @__PURE__ */ jsx(DocBlockRow, { flat: item, selected: item.block.id === focusedId && !isTextBlock(item.block), nonce: ((_a = nonces[item.block.id]) != null ? _a : 0) + epoch * 1e3, width: pageWidth, theme, handlers: stableHandlers });
+    }, extraData: `${focusedId}:${epoch}:${JSON.stringify(nonces)}`, ListHeaderComponent: header, ListFooterComponent: footer, keyboardShouldPersistTaps: "handled", keyboardDismissMode: "none", removeClippedSubviews: false, contentContainerStyle: [styles.page, {
+      width: pageWidth + SPACE.lg * 2
+    }], style: styles.list, onScrollToIndexFailed: (info) => {
+      var _a;
+      return (_a = listRef.current) == null ? void 0 : _a.scrollToOffset({
+        offset: info.averageItemLength * info.index,
+        animated: true
+      });
+    } }),
+    notice ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles.toast, children: /* @__PURE__ */ jsx(Text, { style: styles.toastText, numberOfLines: 2, children: notice }) }) : null,
+    colorsOpen && (toolbarState == null ? void 0 : toolbarState.textBlock) ? /* @__PURE__ */ jsx(ColorRow, { theme, onPick: (key, color) => {
+      const sel = selRef.current;
+      if (sel && sel.start === sel.end && focusedId) {
+        editBlocks(updateBlock(docRef.current.blocks, focusedId, (b) => __spreadProps(__spreadValues({}, b), {
+          props: __spreadProps(__spreadValues({}, b.props), {
+            [key]: color
+          })
+        })));
+      } else {
+        applyToSelection((runs, start, end) => setColor(runs, start, end, key, color));
+      }
+    } }) : null,
+    toolbarState ? /* @__PURE__ */ jsx(DocsToolbar, { state: toolbarState, theme, onAction: onToolbar }) : /* @__PURE__ */ jsx(View, { style: {
+      height: insets.bottom
+    } }),
+    /* @__PURE__ */ jsx(Modal, { visible: sheet !== null, transparent: true, animationType: "slide", onRequestClose: () => setSheet(null), children: /* @__PURE__ */ jsxs(KeyboardAvoidingView, { style: styles.fill, behavior: Platform.OS === "ios" ? "padding" : void 0, children: [
+      /* @__PURE__ */ jsx(Pressable, { style: styles.scrim, onPress: () => setSheet(null), accessibilityLabel: "Close" }),
+      /* @__PURE__ */ jsxs(View, { style: [styles.sheet, {
+        paddingBottom: insets.bottom + SPACE.lg
+      }], children: [
+        sheet === "outline" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.sheetTitle, children: "Outline" }),
+          outline.length === 0 ? /* @__PURE__ */ jsx(Text, { style: styles.sheetEmpty, children: "Headings you add show here." }) : /* @__PURE__ */ jsx(FlatList, { data: outline, keyExtractor: (e) => e.id, style: styles.outlineList, renderItem: ({
+            item
+          }) => /* @__PURE__ */ jsx(Pressable, { onPress: () => jumpTo(item.id), style: ({
+            pressed
+          }) => [styles.outlineRow, {
+            paddingLeft: SPACE.md + (item.level - 1) * SPACE.lg
+          }, pressed && styles.pressed], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.outlineText, item.level === 1 && styles.outlineH1], numberOfLines: 2, children: item.text }) }) })
+        ] }) : null,
+        sheet === "export" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.sheetTitle, children: "Export" }),
+          [{
+            id: "pdf",
+            icon: "file-pdf-box",
+            label: "PDF",
+            hint: "Print or save as PDF"
+          }, {
+            id: "doc",
+            icon: "file-word-outline",
+            label: "Word",
+            hint: "Opens in Word and Google Docs"
+          }, {
+            id: "html",
+            icon: "language-html5",
+            label: "Web page",
+            hint: "A standalone HTML file"
+          }, {
+            id: "md",
+            icon: "language-markdown-outline",
+            label: "Markdown",
+            hint: "Plain text with formatting marks"
+          }].map((opt) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => void exportAs(opt.id), style: ({
+            pressed
+          }) => [styles.exportRow, pressed && styles.pressed], accessibilityRole: "button", accessibilityLabel: `Export as ${opt.label}`, children: [
+            /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: opt.icon, size: 24, color: theme.edInk }),
+            /* @__PURE__ */ jsxs(View, { style: styles.exportText, children: [
+              /* @__PURE__ */ jsx(Text, { style: styles.exportLabel, children: opt.label }),
+              /* @__PURE__ */ jsx(Text, { style: styles.exportHint, children: opt.hint })
+            ] })
+          ] }, opt.id))
+        ] }) : null,
+        sheet && typeof sheet === "object" ? /* @__PURE__ */ jsx(LinkForm, { sheet, theme, onApply: applyLink, onCancel: () => setSheet(null) }) : null
+      ] })
+    ] }) })
+  ] });
+}
+function LinkForm({
+  sheet,
+  theme,
+  onApply,
+  onCancel
+}) {
+  const styles = makeStyles(theme);
+  const [href, setHref] = useState(sheet.href);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.sheetTitle, children: sheet.href ? "Edit link" : "Add link" }),
+    /* @__PURE__ */ jsx(TextInput, { value: href, onChangeText: setHref, autoFocus: true, autoCapitalize: "none", autoCorrect: false, keyboardType: "url", placeholder: "https://", placeholderTextColor: theme.mutedForeground, style: styles.linkInput, onSubmitEditing: () => onApply(href), returnKeyType: "done" }),
+    /* @__PURE__ */ jsxs(View, { style: styles.linkActions, children: [
+      sheet.href ? /* @__PURE__ */ jsx(ActionButton, { label: "Remove", variant: "secondary", onPress: () => onApply("") }) : null,
+      /* @__PURE__ */ jsx(ActionButton, { label: "Cancel", variant: "secondary", onPress: onCancel }),
+      /* @__PURE__ */ jsx(ActionButton, { label: "Apply", onPress: () => onApply(href), disabled: !href.trim() })
+    ] })
+  ] });
+}
+const makeStyles = themedStyles((t) => StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: t.background
+  },
+  fill: {
+    flex: 1
+  },
+  center: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  message: {
+    alignItems: "center",
+    gap: SPACE.md,
+    padding: SPACE.xl
+  },
+  messageTitle: __spreadProps(__spreadValues({}, TYPE.title), {
+    color: t.foreground,
+    textAlign: "center"
+  }),
+  messageBody: __spreadProps(__spreadValues({}, TYPE.body), {
+    color: t.mutedForeground,
+    textAlign: "center"
+  }),
+  topBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: SPACE.xs,
+    height: 52,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: t.border
+  },
+  topButton: {
+    width: 40,
+    height: 40,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  disabled: {
+    opacity: 0.35
+  },
+  titleWrap: {
+    flex: 1,
+    paddingHorizontal: SPACE.xs
+  },
+  barTitle: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: t.foreground
+  }),
+  status: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: t.mutedForeground
+  }),
+  list: {
+    flex: 1
+  },
+  page: {
+    alignSelf: "center",
+    paddingHorizontal: SPACE.lg,
+    paddingTop: SPACE.lg
+  },
+  titleInput: __spreadProps(__spreadValues({}, TYPE.display), {
+    fontSize: 32,
+    lineHeight: 40,
+    color: t.foreground,
+    padding: 0,
+    marginBottom: SPACE.md
+  }),
+  tail: {
+    minHeight: 240
+  },
+  toast: {
+    position: "absolute",
+    left: SPACE.lg,
+    right: SPACE.lg,
+    bottom: 72,
+    padding: SPACE.md,
+    borderRadius: RADIUS.md,
+    backgroundColor: t.edInk
+  },
+  toastText: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: t.edOnInk,
+    textAlign: "center"
+  }),
+  scrim: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.35)"
+  },
+  sheet: {
+    backgroundColor: t.surface,
+    borderTopLeftRadius: RADIUS.xl,
+    borderTopRightRadius: RADIUS.xl,
+    paddingTop: SPACE.lg,
+    paddingHorizontal: SPACE.lg,
+    maxHeight: "75%"
+  },
+  sheetTitle: __spreadProps(__spreadValues({}, TYPE.title), {
+    color: t.foreground,
+    marginBottom: SPACE.md
+  }),
+  sheetEmpty: __spreadProps(__spreadValues({}, TYPE.body), {
+    color: t.mutedForeground,
+    paddingVertical: SPACE.lg
+  }),
+  outlineList: {
+    flexGrow: 0
+  },
+  outlineRow: {
+    paddingVertical: SPACE.md,
+    paddingRight: SPACE.md,
+    borderRadius: RADIUS.sm
+  },
+  outlineText: __spreadProps(__spreadValues({}, TYPE.body), {
+    color: t.inkSoft
+  }),
+  outlineH1: {
+    fontWeight: "600",
+    color: t.foreground
+  },
+  pressed: {
+    backgroundColor: t.tint(0.06)
+  },
+  exportRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.md,
+    paddingVertical: SPACE.md,
+    paddingHorizontal: SPACE.sm,
+    borderRadius: RADIUS.md
+  },
+  exportText: {
+    flex: 1
+  },
+  exportLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: t.foreground
+  }),
+  exportHint: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: t.mutedForeground
+  }),
+  linkInput: __spreadProps(__spreadValues({}, TYPE.body), {
+    color: t.foreground,
+    borderWidth: 1,
+    borderColor: t.borderStrong,
+    borderRadius: RADIUS.md,
+    paddingHorizontal: SPACE.md,
+    paddingVertical: SPACE.sm,
+    marginBottom: SPACE.md
+  }),
+  linkActions: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    gap: SPACE.sm
+  }
+}));export{DocsEditorExperience};//# sourceMappingURL=DocsEditorExperience.js.map