@adminide-stack/yantra-mobile 12.0.141-alpha.1 → 12.0.142-alpha.0

package/lib/features/notion/NotionMediaBlocks.js

@@ -0,0 +1,803 @@
+import {jsx,jsxs}from'react/jsx-runtime';import {useMemo,useState,useEffect,useCallback}from'react';import {View,ScrollView,StyleSheet,Pressable,TextInput,Text,ActivityIndicator,Alert}from'react-native';import {Ionicons}from'@expo/vector-icons';import {Image}from'expo-image';import {useApolloClient}from'@apollo/client/index.js';import {NATIVE_NOTION_OPEN_GRAPH,NATIVE_NOTION_CREATE_UPLOAD_LINK,NATIVE_NOTION_SAVE_UPLOADED_FILE,NATIVE_NOTION_RESOLVE_FILE_URL}from'./notionDocuments.js';import {tableRowsOf,setCell,addRow,addColumn,hostOf,mediaSourceOf,isStreamingSiteUrl,fileNameOf,sizeLabel,removeRow,removeColumn,contentTypeForS3Put,managedFileProps,externalProps}from'./notionMedia.js';const MEDIA_TYPES = ["image", "video", "audio", "file", "bookmark", "embed", "equation", "table"];
+const REF_TYPE = {
+  image: "NotionImageBlock",
+  video: "NotionVideoBlock",
+  file: "NotionFileBlock",
+  audio: "NotionAudioBlock"
+};
+const MONO = "Menlo";
+function useNotionUpload() {
+  const client = useApolloClient();
+  return useCallback(async (file, blockId, blockType) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+    const refType = (_a = REF_TYPE[blockType]) != null ? _a : "NotionFileBlock";
+    const link = await client.mutate({
+      mutation: NATIVE_NOTION_CREATE_UPLOAD_LINK,
+      variables: {
+        input: {
+          filename: file.name,
+          ref: blockId,
+          refType
+        }
+      },
+      errorPolicy: "none"
+    });
+    const uploadUrl = (_c = (_b = link.data) == null ? void 0 : _b.createNotionUploadLink) == null ? void 0 : _c.uploadUrl;
+    if (!((_e = (_d = link.data) == null ? void 0 : _d.createNotionUploadLink) == null ? void 0 : _e.success) || !uploadUrl) {
+      throw new Error(((_g = (_f = link.data) == null ? void 0 : _f.createNotionUploadLink) == null ? void 0 : _g.message) || "Could not get an upload link");
+    }
+    const body = await (await fetch(file.uri)).blob();
+    const putType = contentTypeForS3Put(file.mimeType || "application/octet-stream", file.name);
+    const put = await fetch(uploadUrl, {
+      method: "PUT",
+      headers: {
+        "Content-Type": putType
+      },
+      body
+    });
+    if (!put.ok) throw new Error(`Upload failed (${put.status})`);
+    const saved = await client.mutate({
+      mutation: NATIVE_NOTION_SAVE_UPLOADED_FILE,
+      variables: {
+        input: {
+          file: {
+            name: file.name,
+            url: uploadUrl.split("?")[0],
+            mimeType: putType.split(";")[0].trim(),
+            size: (_h = file.size) != null ? _h : body.size
+          },
+          ref: blockId,
+          refType
+        }
+      },
+      errorPolicy: "none"
+    });
+    const info = (_j = (_i = saved.data) == null ? void 0 : _i.saveNotionUploadedFile) == null ? void 0 : _j.fileInfo;
+    if (!((_l = (_k = saved.data) == null ? void 0 : _k.saveNotionUploadedFile) == null ? void 0 : _l.success) || !info) {
+      throw new Error(((_n = (_m = saved.data) == null ? void 0 : _m.saveNotionUploadedFile) == null ? void 0 : _n.message) || "Upload failed");
+    }
+    return managedFileProps(info);
+  }, [client]);
+}
+function useMediaUrl(props) {
+  const client = useApolloClient();
+  const source = mediaSourceOf(props);
+  const key = (source == null ? void 0 : source.kind) === "managed" ? source.key : null;
+  const [resolved, setResolved] = useState(null);
+  useEffect(() => {
+    if (!key) return void 0;
+    let alive = true;
+    client.query({
+      query: NATIVE_NOTION_RESOLVE_FILE_URL,
+      variables: {
+        s3KeyOrUrl: key,
+        expiresIn: 3600
+      },
+      fetchPolicy: "no-cache"
+    }).then((res) => {
+      var _a, _b;
+      return alive && setResolved({
+        key,
+        url: (_b = (_a = res.data) == null ? void 0 : _a.resolveNotionFileUrl) != null ? _b : null
+      });
+    }).catch(() => alive && setResolved({
+      key,
+      url: null
+    }));
+    return () => {
+      alive = false;
+    };
+  }, [client, key]);
+  if (!source) return {
+    url: null,
+    loading: false
+  };
+  if (source.kind === "external") return {
+    url: source.url,
+    loading: false
+  };
+  return {
+    url: (resolved == null ? void 0 : resolved.key) === key ? resolved.url : null,
+    loading: (resolved == null ? void 0 : resolved.key) !== key
+  };
+}
+async function pickMedia(kind) {
+  var _a;
+  const ImagePicker = require("expo-image-picker");
+  const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();
+  if (!permission.granted) throw new Error("Allow photo access in Settings to add media.");
+  const result = await ImagePicker.launchImageLibraryAsync({
+    mediaTypes: [kind === "image" ? "images" : "videos"],
+    quality: 0.85,
+    exif: false
+  });
+  const asset = result.canceled ? null : (_a = result.assets) == null ? void 0 : _a[0];
+  if (!(asset == null ? void 0 : asset.uri)) return null;
+  const ext = kind === "image" ? "jpg" : "mp4";
+  return {
+    uri: asset.uri,
+    name: asset.fileName || `${kind}-${Date.now()}.${ext}`,
+    mimeType: asset.mimeType || (kind === "image" ? "image/jpeg" : "video/mp4"),
+    size: asset.fileSize
+  };
+}
+async function pickDocument(kind) {
+  var _a;
+  const DocumentPicker = require("expo-document-picker");
+  const result = await DocumentPicker.getDocumentAsync({
+    type: kind === "audio" ? "audio/*" : "*/*",
+    copyToCacheDirectory: true,
+    multiple: false
+  });
+  const asset = result.canceled ? null : (_a = result.assets) == null ? void 0 : _a[0];
+  if (!(asset == null ? void 0 : asset.uri)) return null;
+  return {
+    uri: asset.uri,
+    name: asset.name,
+    mimeType: asset.mimeType || "application/octet-stream",
+    size: asset.size
+  };
+}
+function openInBrowser(url) {
+  const WebBrowser = require("expo-web-browser");
+  WebBrowser.openBrowserAsync(url).catch(() => void 0);
+}
+function MediaBlock({
+  block,
+  palette,
+  locked,
+  onPatch,
+  onCaption,
+  onMenu
+}) {
+  const props = block.properties;
+  switch (block.type) {
+    case "image":
+    case "video":
+    case "audio":
+    case "file":
+      return /* @__PURE__ */ jsx(FileLikeBlock, { block, palette, locked, onPatch, onCaption, onMenu });
+    case "bookmark":
+      return /* @__PURE__ */ jsx(BookmarkBlock, { props, palette, locked, onPatch, onMenu });
+    case "embed":
+      return /* @__PURE__ */ jsx(EmbedBlock, { props, palette, locked, onPatch, onMenu });
+    case "equation":
+      return /* @__PURE__ */ jsx(EquationBlock, { props, palette, locked, onPatch, onMenu });
+    case "table":
+      return /* @__PURE__ */ jsx(TableBlock, { props, palette, locked, onPatch, onMenu });
+    default:
+      return null;
+  }
+}
+const KIND_COPY = {
+  image: {
+    icon: "image-outline",
+    empty: "Add an image",
+    upload: "Upload photo"
+  },
+  video: {
+    icon: "videocam-outline",
+    empty: "Add a video",
+    upload: "Upload video"
+  },
+  audio: {
+    icon: "musical-notes-outline",
+    empty: "Add audio",
+    upload: "Upload audio"
+  },
+  file: {
+    icon: "document-attach-outline",
+    empty: "Add a file",
+    upload: "Upload file"
+  }
+};
+function FileLikeBlock({
+  block,
+  palette,
+  locked,
+  onPatch,
+  onCaption,
+  onMenu
+}) {
+  var _a, _b, _c;
+  const upload = useNotionUpload();
+  const {
+    url,
+    loading
+  } = useMediaUrl(block.properties);
+  const [busy, setBusy] = useState(false);
+  const [linking, setLinking] = useState(false);
+  const [link, setLink] = useState("");
+  const [error, setError] = useState(null);
+  const copy = (_a = KIND_COPY[block.type]) != null ? _a : KIND_COPY.file;
+  const hasSource = Boolean(mediaSourceOf(block.properties));
+  const doUpload = async () => {
+    setError(null);
+    try {
+      const picked = block.type === "image" || block.type === "video" ? await pickMedia(block.type) : await pickDocument(block.type === "audio" ? "audio" : "file");
+      if (!picked) return;
+      setBusy(true);
+      onPatch(await upload(picked, block.id, block.type));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Upload failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+  const saveLink = () => {
+    const u = link.trim();
+    if (!/^https?:\/\//i.test(u)) {
+      setError("Enter a link that starts with http:// or https://");
+      return;
+    }
+    setLinking(false);
+    setError(null);
+    onPatch(externalProps(u));
+  };
+  if (!hasSource) {
+    return /* @__PURE__ */ jsxs(Pressable, { onLongPress: onMenu, style: [styles.emptyCard, {
+      backgroundColor: palette.fill
+    }], children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.emptyHead, children: [
+        /* @__PURE__ */ jsx(Ionicons, { name: copy.icon, size: 20, color: palette.textMuted }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.emptyTitle, {
+          color: palette.textMuted
+        }], children: copy.empty })
+      ] }),
+      locked ? null : linking ? /* @__PURE__ */ jsxs(View, { style: styles.linkRow, children: [
+        /* @__PURE__ */ jsx(TextInput, { value: link, onChangeText: setLink, placeholder: "Paste a link", placeholderTextColor: palette.textFaint, autoCapitalize: "none", autoCorrect: false, keyboardType: "url", autoFocus: true, onSubmitEditing: saveLink, style: [styles.linkInput, {
+          color: palette.text,
+          backgroundColor: palette.card
+        }] }),
+        /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", onPress: saveLink, style: [styles.smallBtn, {
+          backgroundColor: palette.primary
+        }], children: /* @__PURE__ */ jsx(Text, { style: [styles.smallBtnLabel, {
+          color: palette.onPrimary
+        }], children: "Add" }) })
+      ] }) : /* @__PURE__ */ jsxs(View, { style: styles.actionsRow, children: [
+        /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", onPress: doUpload, disabled: busy, style: [styles.smallBtn, {
+          backgroundColor: palette.primary
+        }], children: busy ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: palette.onPrimary }) : /* @__PURE__ */ jsx(Text, { style: [styles.smallBtnLabel, {
+          color: palette.onPrimary
+        }], children: copy.upload }) }),
+        /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", onPress: () => setLinking(true), style: [styles.smallBtn, {
+          backgroundColor: palette.card
+        }], children: /* @__PURE__ */ jsx(Text, { style: [styles.smallBtnLabel, {
+          color: palette.text
+        }], children: "Paste a link" }) })
+      ] }),
+      error ? /* @__PURE__ */ jsx(Text, { style: [styles.error, {
+        color: palette.danger
+      }], children: error }) : null
+    ] });
+  }
+  const caption = block.text.trim();
+  let body = null;
+  if (loading) {
+    body = /* @__PURE__ */ jsx(View, { style: [styles.loadingBox, {
+      backgroundColor: palette.fill
+    }], children: /* @__PURE__ */ jsx(ActivityIndicator, { color: palette.textMuted }) });
+  } else if (!url) {
+    body = /* @__PURE__ */ jsx(View, { style: [styles.loadingBox, {
+      backgroundColor: palette.fill
+    }], children: /* @__PURE__ */ jsxs(Text, { style: [styles.error, {
+      color: palette.textMuted
+    }], children: [
+      "Couldn't load this ",
+      block.type,
+      "."
+    ] }) });
+  } else if (block.type === "image") {
+    body = /* @__PURE__ */ jsx(ImageView, { url });
+  } else if (block.type === "video") {
+    body = isStreamingSiteUrl(url) ? /* @__PURE__ */ jsx(LinkCard, { palette, icon: "play-circle-outline", title: hostOf(url), subtitle: "Opens in the browser", onPress: () => openInBrowser(url) }) : /* @__PURE__ */ jsx(VideoView, { url });
+  } else if (block.type === "audio") {
+    body = /* @__PURE__ */ jsx(AudioView, { url, palette, title: fileNameOf(block.properties) });
+  } else {
+    body = /* @__PURE__ */ jsx(LinkCard, { palette, icon: "document-attach-outline", title: fileNameOf(block.properties), subtitle: sizeLabel((_c = block.properties.size) != null ? _c : (_b = block.properties.file) == null ? void 0 : _b.size) || hostOf(url), onPress: () => openInBrowser(url) });
+  }
+  return /* @__PURE__ */ jsxs(Pressable, { onLongPress: onMenu, delayLongPress: 350, children: [
+    body,
+    caption || !locked ? /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", onPress: locked ? void 0 : onCaption, hitSlop: 4, children: /* @__PURE__ */ jsx(Text, { style: [styles.caption, {
+      color: caption ? palette.textMuted : palette.textFaint
+    }], children: caption || (block.type === "image" || block.type === "video" ? "Add a caption" : "") }) }) : null
+  ] });
+}
+function ImageView({
+  url
+}) {
+  const [ratio, setRatio] = useState(4 / 3);
+  return /* @__PURE__ */ jsx(Image, { source: {
+    uri: url
+  }, style: [styles.image, {
+    aspectRatio: ratio
+  }], contentFit: "contain", transition: 150, onLoad: (e) => {
+    const {
+      width,
+      height
+    } = e.source;
+    if (width && height) setRatio(width / height);
+  } });
+}
+function VideoView({
+  url
+}) {
+  const ExpoVideo = require("expo-video");
+  const player = ExpoVideo.useVideoPlayer(url, (p) => {
+    p.loop = false;
+  });
+  return /* @__PURE__ */ jsx(ExpoVideo.VideoView, { player, style: styles.video, nativeControls: true, allowsFullscreen: true, contentFit: "contain" });
+}
+function AudioView({
+  url,
+  palette,
+  title
+}) {
+  const ExpoAudio = require("expo-audio");
+  const player = ExpoAudio.useAudioPlayer(url);
+  const status = ExpoAudio.useAudioPlayerStatus(player);
+  const progress = status.duration ? Math.min(1, status.currentTime / status.duration) : 0;
+  const fmt = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, "0")}`;
+  return /* @__PURE__ */ jsxs(View, { style: [styles.audio, {
+    backgroundColor: palette.fill
+  }], children: [
+    /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: status.playing ? "Pause" : "Play", onPress: () => {
+      if (status.playing) player.pause();
+      else {
+        if (status.duration && status.currentTime >= status.duration) player.seekTo(0);
+        player.play();
+      }
+    }, style: [styles.playBtn, {
+      backgroundColor: palette.primary
+    }], children: /* @__PURE__ */ jsx(Ionicons, { name: status.playing ? "pause" : "play", size: 18, color: palette.onPrimary }) }),
+    /* @__PURE__ */ jsxs(View, { style: styles.audioBody, children: [
+      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.audioTitle, {
+        color: palette.text
+      }], children: title }),
+      /* @__PURE__ */ jsx(View, { style: [styles.track, {
+        backgroundColor: palette.hairline
+      }], children: /* @__PURE__ */ jsx(View, { style: [styles.trackFill, {
+        width: `${progress * 100}%`,
+        backgroundColor: palette.primary
+      }] }) }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.audioTime, {
+        color: palette.textMuted
+      }], children: `${fmt(status.currentTime || 0)} / ${fmt(status.duration || 0)}` })
+    ] })
+  ] });
+}
+function LinkCard({
+  palette,
+  icon,
+  title,
+  subtitle,
+  image,
+  description,
+  onPress
+}) {
+  return /* @__PURE__ */ jsxs(Pressable, { accessibilityRole: "link", onPress, style: ({
+    pressed
+  }) => [styles.linkCard, {
+    borderColor: palette.hairline,
+    backgroundColor: pressed ? palette.pressed : palette.card
+  }], children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.linkCardBody, children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.linkCardHead, children: [
+        /* @__PURE__ */ jsx(Ionicons, { name: icon, size: 18, color: palette.textMuted }),
+        /* @__PURE__ */ jsx(Text, { numberOfLines: 2, style: [styles.linkCardTitle, {
+          color: palette.text
+        }], children: title })
+      ] }),
+      description ? /* @__PURE__ */ jsx(Text, { numberOfLines: 2, style: [styles.linkCardDesc, {
+        color: palette.textMuted
+      }], children: description }) : null,
+      subtitle ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.linkCardSub, {
+        color: palette.textFaint
+      }], children: subtitle }) : null
+    ] }),
+    image ? /* @__PURE__ */ jsx(Image, { source: {
+      uri: image
+    }, style: styles.linkCardImage, contentFit: "cover" }) : null
+  ] });
+}
+function UrlEntry({
+  palette,
+  placeholder,
+  onSave,
+  busy
+}) {
+  const [value, setValue] = useState("");
+  const [error, setError] = useState(null);
+  const save = () => {
+    const raw = value.trim();
+    if (!raw) return;
+    const url = /^[a-z]+:\/\//i.test(raw) ? raw : `https://${raw}`;
+    if (!/^https?:\/\//i.test(url)) {
+      setError("Enter a web link");
+      return;
+    }
+    setError(null);
+    onSave(url);
+  };
+  return /* @__PURE__ */ jsxs(View, { style: [styles.emptyCard, {
+    backgroundColor: palette.fill
+  }], children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.linkRow, children: [
+      /* @__PURE__ */ jsx(TextInput, { value, onChangeText: setValue, placeholder, placeholderTextColor: palette.textFaint, autoCapitalize: "none", autoCorrect: false, keyboardType: "url", onSubmitEditing: save, style: [styles.linkInput, {
+        color: palette.text,
+        backgroundColor: palette.card
+      }] }),
+      /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", onPress: save, disabled: busy, style: [styles.smallBtn, {
+        backgroundColor: palette.primary
+      }], children: busy ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: palette.onPrimary }) : /* @__PURE__ */ jsx(Text, { style: [styles.smallBtnLabel, {
+        color: palette.onPrimary
+      }], children: "Add" }) })
+    ] }),
+    error ? /* @__PURE__ */ jsx(Text, { style: [styles.error, {
+      color: palette.danger
+    }], children: error }) : null
+  ] });
+}
+function plain(value) {
+  if (typeof value === "string") return value;
+  if (Array.isArray(value)) return value.map((v) => {
+    var _a, _b, _c;
+    return (_c = (_b = v == null ? void 0 : v.plainText) != null ? _b : (_a = v == null ? void 0 : v.text) == null ? void 0 : _a.content) != null ? _c : "";
+  }).join("");
+  return "";
+}
+function BookmarkBlock({
+  props,
+  palette,
+  locked,
+  onPatch,
+  onMenu
+}) {
+  var _a, _b;
+  const client = useApolloClient();
+  const [busy, setBusy] = useState(false);
+  const url = typeof props.url === "string" ? props.url : "";
+  const add = async (target) => {
+    var _a2, _b2, _c, _d;
+    setBusy(true);
+    onPatch({
+      url: target
+    });
+    try {
+      const res = await client.query({
+        query: NATIVE_NOTION_OPEN_GRAPH,
+        variables: {
+          url: target
+        },
+        fetchPolicy: "network-only"
+      });
+      const og = (_a2 = res.data) == null ? void 0 : _a2.fetchOpenGraph;
+      if (og) onPatch({
+        url: target,
+        title: (_b2 = og.title) != null ? _b2 : "",
+        description: (_c = og.description) != null ? _c : "",
+        image: (_d = og.image) != null ? _d : ""
+      });
+    } catch (e) {
+    } finally {
+      setBusy(false);
+    }
+  };
+  if (!url) {
+    return locked ? null : /* @__PURE__ */ jsx(UrlEntry, { palette, placeholder: "Paste a link to bookmark", onSave: add, busy });
+  }
+  const image = typeof props.image === "string" ? props.image : typeof props.ogImage === "string" ? props.ogImage : null;
+  return /* @__PURE__ */ jsx(Pressable, { onLongPress: onMenu, delayLongPress: 350, children: /* @__PURE__ */ jsx(LinkCard, { palette, icon: "bookmark-outline", title: plain((_a = props.title) != null ? _a : props.ogTitle) || hostOf(url), description: plain((_b = props.description) != null ? _b : props.ogDescription), subtitle: url, image, onPress: () => openInBrowser(url) }) });
+}
+function EmbedBlock({
+  props,
+  palette,
+  locked,
+  onPatch,
+  onMenu
+}) {
+  var _a, _b;
+  const url = typeof props.url === "string" ? props.url : "";
+  if (!url) {
+    if (props.embedType && props.embedType !== "url") {
+      return /* @__PURE__ */ jsx(Pressable, { onLongPress: onMenu, style: [styles.emptyCard, {
+        backgroundColor: palette.fill
+      }], children: /* @__PURE__ */ jsxs(View, { style: styles.emptyHead, children: [
+        /* @__PURE__ */ jsx(Ionicons, { name: "apps-outline", size: 18, color: palette.textMuted }),
+        /* @__PURE__ */ jsxs(Text, { style: [styles.emptyTitle, {
+          color: palette.textMuted
+        }], children: [
+          String((_b = (_a = props.fieldSchema) == null ? void 0 : _a.title) != null ? _b : "Widget"),
+          " \xB7 open on the web"
+        ] })
+      ] }) });
+    }
+    return locked ? null : /* @__PURE__ */ jsx(UrlEntry, { palette, placeholder: "Paste a link to embed", onSave: (u) => onPatch({
+      embedType: "url",
+      url: u
+    }) });
+  }
+  return /* @__PURE__ */ jsx(Pressable, { onLongPress: onMenu, delayLongPress: 350, children: /* @__PURE__ */ jsx(LinkCard, { palette, icon: "globe-outline", title: hostOf(url), subtitle: "Embed \xB7 opens in the browser", onPress: () => openInBrowser(url) }) });
+}
+function EquationBlock({
+  props,
+  palette,
+  locked,
+  onPatch,
+  onMenu
+}) {
+  var _a;
+  const expression = String((_a = props.expression) != null ? _a : "");
+  const [draft, setDraft] = useState(expression);
+  useEffect(() => setDraft(expression), [expression]);
+  return /* @__PURE__ */ jsxs(Pressable, { onLongPress: onMenu, delayLongPress: 350, style: [styles.equation, {
+    backgroundColor: palette.fill
+  }], children: [
+    /* @__PURE__ */ jsx(Text, { style: [styles.equationLabel, {
+      color: palette.textMuted
+    }], children: "TeX" }),
+    /* @__PURE__ */ jsx(TextInput, { value: draft, onChangeText: setDraft, onBlur: () => draft !== expression && onPatch({
+      expression: draft
+    }), editable: !locked, multiline: true, placeholder: "E = mc^2", placeholderTextColor: palette.textFaint, autoCapitalize: "none", autoCorrect: false, style: [styles.equationInput, {
+      color: palette.text
+    }] })
+  ] });
+}
+function TableBlock({
+  props,
+  palette,
+  locked,
+  onPatch,
+  onMenu
+}) {
+  const saved = useMemo(() => tableRowsOf(props), [props]);
+  const [rows, setRows] = useState(saved);
+  useEffect(() => setRows(saved), [saved]);
+  const header = props.hasHeaderRow === true;
+  const commit = (next) => {
+    setRows(next);
+    onPatch({
+      rows: next
+    });
+  };
+  const cellMenu = (r, c) => {
+    if (locked) return;
+    Alert.alert("Table", void 0, [{
+      text: "Add row",
+      onPress: () => commit(addRow(rows))
+    }, {
+      text: "Add column",
+      onPress: () => commit(addColumn(rows))
+    }, {
+      text: header ? "Remove header row" : "Header row",
+      onPress: () => onPatch({
+        hasHeaderRow: !header
+      })
+    }, {
+      text: "Delete row",
+      style: "destructive",
+      onPress: () => commit(removeRow(rows, r))
+    }, {
+      text: "Delete column",
+      style: "destructive",
+      onPress: () => commit(removeColumn(rows, c))
+    }, ...onMenu ? [{
+      text: "Block actions\u2026",
+      onPress: onMenu
+    }] : [], {
+      text: "Cancel",
+      style: "cancel"
+    }]);
+  };
+  return /* @__PURE__ */ jsxs(View, { children: [
+    /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: /* @__PURE__ */ jsx(View, { style: [styles.table, {
+      borderColor: palette.hairline
+    }], children: rows.map((row, r) => (
+      // eslint-disable-next-line react/no-array-index-key
+      /* @__PURE__ */ jsx(View, { style: [styles.tableRow, header && r === 0 && {
+        backgroundColor: palette.fill
+      }], children: row.map((cell, c) => (
+        // eslint-disable-next-line react/no-array-index-key
+        /* @__PURE__ */ jsx(Pressable, { onLongPress: () => cellMenu(r, c), delayLongPress: 350, children: /* @__PURE__ */ jsx(TextInput, { value: cell, onChangeText: (v) => setRows((cur) => setCell(cur, r, c, v)), onBlur: () => {
+          if (rows !== saved) onPatch({
+            rows
+          });
+        }, editable: !locked, multiline: true, style: [styles.cell, {
+          color: palette.text,
+          borderColor: palette.hairline
+        }, header && r === 0 && styles.headerCell] }) }, c)
+      )) }, r)
+    )) }) }),
+    locked ? null : /* @__PURE__ */ jsxs(View, { style: styles.tableActions, children: [
+      /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", onPress: () => commit(addRow(rows)), hitSlop: 6, children: /* @__PURE__ */ jsx(Text, { style: [styles.tableAction, {
+        color: palette.primary
+      }], children: "+ Row" }) }),
+      /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", onPress: () => commit(addColumn(rows)), hitSlop: 6, children: /* @__PURE__ */ jsx(Text, { style: [styles.tableAction, {
+        color: palette.primary
+      }], children: "+ Column" }) }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.tableHint, {
+        color: palette.textFaint
+      }], children: "Long-press a cell for more" })
+    ] })
+  ] });
+}
+const styles = StyleSheet.create({
+  emptyCard: {
+    borderRadius: 12,
+    padding: 14,
+    gap: 10
+  },
+  emptyHead: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  emptyTitle: {
+    fontSize: 15,
+    fontWeight: "600"
+  },
+  actionsRow: {
+    flexDirection: "row",
+    gap: 8,
+    flexWrap: "wrap"
+  },
+  linkRow: {
+    flexDirection: "row",
+    gap: 8,
+    alignItems: "center"
+  },
+  linkInput: {
+    flex: 1,
+    height: 40,
+    paddingHorizontal: 12,
+    borderRadius: 10,
+    fontSize: 15
+  },
+  smallBtn: {
+    minHeight: 38,
+    paddingHorizontal: 14,
+    borderRadius: 10,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  smallBtnLabel: {
+    fontSize: 14,
+    fontWeight: "700"
+  },
+  error: {
+    fontSize: 13
+  },
+  loadingBox: {
+    height: 160,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  image: {
+    width: "100%",
+    borderRadius: 10
+  },
+  video: {
+    width: "100%",
+    aspectRatio: 16 / 9,
+    borderRadius: 10,
+    backgroundColor: "#000"
+  },
+  caption: {
+    fontSize: 13,
+    marginTop: 6
+  },
+  audio: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    padding: 12,
+    borderRadius: 12
+  },
+  playBtn: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  audioBody: {
+    flex: 1,
+    gap: 6
+  },
+  audioTitle: {
+    fontSize: 14,
+    fontWeight: "600"
+  },
+  track: {
+    height: 4,
+    borderRadius: 2,
+    overflow: "hidden"
+  },
+  trackFill: {
+    height: 4
+  },
+  audioTime: {
+    fontSize: 11
+  },
+  linkCard: {
+    flexDirection: "row",
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 12,
+    overflow: "hidden"
+  },
+  linkCardBody: {
+    flex: 1,
+    padding: 12,
+    gap: 4
+  },
+  linkCardHead: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  linkCardTitle: {
+    flex: 1,
+    fontSize: 15,
+    fontWeight: "600"
+  },
+  linkCardDesc: {
+    fontSize: 13,
+    lineHeight: 18
+  },
+  linkCardSub: {
+    fontSize: 12
+  },
+  linkCardImage: {
+    width: 96
+  },
+  equation: {
+    borderRadius: 10,
+    padding: 12,
+    gap: 4
+  },
+  equationLabel: {
+    fontSize: 10,
+    fontWeight: "800",
+    letterSpacing: 0.6
+  },
+  equationInput: {
+    fontFamily: MONO,
+    fontSize: 15,
+    padding: 0,
+    minHeight: 24
+  },
+  table: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderLeftWidth: StyleSheet.hairlineWidth
+  },
+  tableRow: {
+    flexDirection: "row"
+  },
+  cell: {
+    width: 140,
+    minHeight: 40,
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+    fontSize: 14,
+    borderRightWidth: StyleSheet.hairlineWidth,
+    borderBottomWidth: StyleSheet.hairlineWidth
+  },
+  headerCell: {
+    fontWeight: "700"
+  },
+  tableActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 16,
+    marginTop: 8
+  },
+  tableAction: {
+    fontSize: 14,
+    fontWeight: "700"
+  },
+  tableHint: {
+    fontSize: 12,
+    marginLeft: "auto"
+  }
+});export{MEDIA_TYPES,MediaBlock,useNotionUpload};//# sourceMappingURL=NotionMediaBlocks.js.map