@adminide-stack/yantra-mobile 12.0.137 → 12.0.139-alpha.0

package/lib/features/notion/NotionPageView.js

@@ -0,0 +1,819 @@
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useState,useRef,useCallback,useEffect,useMemo}from'react';import {View,StyleSheet,ActivityIndicator,Text,Pressable,KeyboardAvoidingView,ScrollView,TextInput,RefreshControl,Keyboard,Platform,Alert}from'react-native';import {Ionicons}from'@expo/vector-icons';import {useNavigation,StackActions}from'@react-navigation/native';import {useApolloClient,useQuery}from'@apollo/client/index.js';import {useSafeAreaInsets}from'react-native-safe-area-context';import {mobileTokens}from'../../theme/mobileTokens.js';import {notionPalette}from'./notionTheme.js';import {NATIVE_NOTION_PAGE_TREE,NATIVE_NOTION_BLOCK,NATIVE_NOTION_UPDATE_BLOCK,NATIVE_NOTION_APPEND_CHILDREN,NATIVE_NOTION_TRANSFORM_BLOCK,NATIVE_NOTION_DELETE_BLOCK}from'./notionDocuments.js';import {blockTitle,blockIcon,toTitleProperty,editedLabel,isPageBlock,pageTitle,richTextToPlain}from'./notionBlocks.js';import {modelFromTree,newBlockId,isTextType,insertAfter,patchBlock,previousLineId,removeBlock,flattenModel,nextTypeAfter,TURN_INTO}from'./notionEditorModel.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_DELAY_MS = 500;
+const PAGE_EMOJIS = ["\u{1F4C4}", "\u{1F4DD}", "\u{1F4CC}", "\u{1F4A1}", "\u{1F3AF}", "\u{1F680}", "\u{1F4DA}", "\u2705", "\u{1F5D3}\uFE0F", "\u{1F4BC}", "\u{1F3E0}", "\u2764\uFE0F", "\u2B50", "\u{1F525}", "\u{1F9E0}", "\u{1F3A8}"];
+const PLACEHOLDER = {
+  heading_1: "Heading 1",
+  heading_2: "Heading 2",
+  heading_3: "Heading 3",
+  bulleted_list: "List",
+  numbered_list: "List",
+  todo: "To-do",
+  toggle: "Toggle",
+  quote: "Quote",
+  callout: "Callout",
+  code: "Code"
+};
+const TEXT_STYLE = {
+  heading_1: {
+    fontSize: 26,
+    lineHeight: 32,
+    fontWeight: "800"
+  },
+  heading_2: {
+    fontSize: 21,
+    lineHeight: 28,
+    fontWeight: "700"
+  },
+  heading_3: {
+    fontSize: 18,
+    lineHeight: 25,
+    fontWeight: "700"
+  }
+};
+function saveLabelOf(save, lastEdited) {
+  if (save === "saving") return "Saving\u2026";
+  if (save === "error") return "Not saved \u2014 check your connection";
+  if (save === "saved") return "Saved";
+  return editedLabel(lastEdited);
+}
+function NotionPageView({
+  orgName,
+  blockId,
+  isDark
+}) {
+  var _a, _b, _c, _d;
+  const palette = notionPalette(isDark);
+  const navigation = useNavigation();
+  const client = useApolloClient();
+  const insets = useSafeAreaInsets();
+  const {
+    data,
+    loading,
+    error,
+    refetch
+  } = useQuery(NATIVE_NOTION_PAGE_TREE, {
+    variables: {
+      input: {
+        blockId: blockId != null ? blockId : "",
+        includeChildren: true,
+        maxDepth: 5
+      }
+    },
+    skip: !blockId,
+    fetchPolicy: "network-only"
+  });
+  const tree = (_a = data == null ? void 0 : data.getBlockTree) != null ? _a : null;
+  const pageQuery = useQuery(NATIVE_NOTION_BLOCK, {
+    variables: {
+      input: {
+        blockId: blockId != null ? blockId : ""
+      }
+    },
+    skip: !blockId,
+    fetchPolicy: "network-only"
+  });
+  const page = (_c = (_b = pageQuery.data) == null ? void 0 : _b.getBlock) != null ? _c : null;
+  const [model, setModel] = useState(null);
+  const [title, setTitle] = useState("");
+  const [icon, setIcon] = useState(null);
+  const [focusedId, setFocusedId] = useState(null);
+  const [pendingFocus, setPendingFocus] = useState(null);
+  const [save, setSave] = useState("idle");
+  const [iconPicker, setIconPicker] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const modelRef = useRef(null);
+  modelRef.current = model;
+  const inputs = useRef(/* @__PURE__ */ new Map());
+  const pending = useRef(/* @__PURE__ */ new Map());
+  const chains = useRef(/* @__PURE__ */ new Map());
+  const savedTitles = useRef(/* @__PURE__ */ new Map());
+  const inFlight = useRef(0);
+  const applyTree = useCallback((next, pageBlock) => {
+    var _a2;
+    setModel(modelFromTree(next));
+    const t = blockTitle(pageBlock);
+    setTitle(t);
+    setIcon(blockIcon(pageBlock));
+    savedTitles.current.set(pageBlock.id, t);
+    const remember = (node) => {
+      var _a3;
+      savedTitles.current.set(node.block.id, blockTitle(node.block));
+      ((_a3 = node.children) != null ? _a3 : []).forEach(remember);
+    };
+    ((_a2 = next.children) != null ? _a2 : []).forEach(remember);
+  }, []);
+  const seeded = useRef(false);
+  useEffect(() => {
+    if (!tree || !page || seeded.current) return;
+    seeded.current = true;
+    applyTree(tree, page);
+  }, [tree, page, applyTree]);
+  useEffect(() => {
+    if (!pendingFocus) return void 0;
+    const id = pendingFocus;
+    const handle = setTimeout(() => {
+      var _a2;
+      (_a2 = inputs.current.get(id)) == null ? void 0 : _a2.focus();
+      setPendingFocus(null);
+    }, 30);
+    return () => clearTimeout(handle);
+  }, [pendingFocus, model]);
+  const write = useCallback(async (options) => {
+    var _a2;
+    const res = await client.mutate(__spreadProps(__spreadValues({}, options), {
+      errorPolicy: "none"
+    }));
+    if ((_a2 = res.errors) == null ? void 0 : _a2.length) throw new Error(res.errors[0].message);
+    if (!res.data) throw new Error("The server returned no data");
+    return res;
+  }, [client]);
+  const enqueue = useCallback((id, op) => {
+    var _a2;
+    inFlight.current += 1;
+    setSave("saving");
+    const prev = (_a2 = chains.current.get(id)) != null ? _a2 : Promise.resolve();
+    const next = prev.catch(() => void 0).then(op).then(() => {
+      inFlight.current -= 1;
+      if (!inFlight.current && !pending.current.size) setSave("saved");
+    }, (err) => {
+      inFlight.current -= 1;
+      setSave("error");
+      if (__DEV__) console.warn("[NotionPage] save failed", err);
+    });
+    chains.current.set(id, next);
+    return next;
+  }, []);
+  const writeTitle = useCallback((id, text) => {
+    var _a2;
+    const baseTitle = (_a2 = savedTitles.current.get(id)) != null ? _a2 : "";
+    savedTitles.current.set(id, text);
+    return enqueue(id, () => write({
+      mutation: NATIVE_NOTION_UPDATE_BLOCK,
+      variables: {
+        input: {
+          id,
+          properties: {
+            title: toTitleProperty(text)
+          },
+          baseTitle
+        }
+      }
+    }));
+  }, [write, enqueue]);
+  const scheduleTitle = useCallback((id, text) => {
+    var _a2;
+    (_a2 = pending.current.get(id)) == null ? void 0 : _a2.cancel();
+    setSave("saving");
+    const handle = setTimeout(() => {
+      pending.current.delete(id);
+      writeTitle(id, text);
+    }, SAVE_DELAY_MS);
+    const cancel = () => {
+      clearTimeout(handle);
+      pending.current.delete(id);
+    };
+    pending.current.set(id, {
+      cancel,
+      flush: () => {
+        cancel();
+        writeTitle(id, text);
+      }
+    });
+  }, [writeTitle]);
+  useEffect(() => () => {
+    [...pending.current.values()].forEach((p) => p.flush());
+  }, []);
+  const updateProps = useCallback((id, properties) => enqueue(id, () => write({
+    mutation: NATIVE_NOTION_UPDATE_BLOCK,
+    variables: {
+      input: {
+        id,
+        properties
+      }
+    }
+  })), [write, enqueue]);
+  const addBlock = useCallback((parentId, afterId, type, extra = {}) => {
+    const id = newBlockId();
+    const properties = __spreadValues(__spreadValues(__spreadValues({}, isTextType(type) || type === "page" ? {
+      title: []
+    } : {}), type === "todo" ? {
+      checked: false
+    } : {}), extra);
+    const block = {
+      id,
+      type,
+      parentId,
+      text: "",
+      properties
+    };
+    setModel((m) => m ? insertAfter(m, block, afterId) : m);
+    savedTitles.current.set(id, "");
+    if (isTextType(type)) setPendingFocus(id);
+    enqueue(id, () => write({
+      mutation: NATIVE_NOTION_APPEND_CHILDREN,
+      variables: {
+        input: __spreadProps(__spreadValues({
+          parentId
+        }, afterId ? {
+          after: afterId
+        } : {}), {
+          children: [{
+            id,
+            type,
+            parent: {
+              type: "block",
+              id: parentId
+            },
+            properties
+          }]
+        })
+      }
+    }));
+    return id;
+  }, [write, enqueue]);
+  const turnInto = useCallback((id, type) => {
+    var _a2;
+    const block = (_a2 = modelRef.current) == null ? void 0 : _a2.blocks[id];
+    if (!block || block.type === type) return;
+    setModel((cur) => cur ? patchBlock(cur, id, {
+      type
+    }) : cur);
+    enqueue(id, async () => {
+      await write({
+        mutation: NATIVE_NOTION_TRANSFORM_BLOCK,
+        variables: {
+          blockId: id,
+          newType: type
+        }
+      });
+      if (type === "todo") {
+        await write({
+          mutation: NATIVE_NOTION_UPDATE_BLOCK,
+          variables: {
+            input: {
+              id,
+              properties: {
+                checked: false
+              }
+            }
+          }
+        });
+      }
+    });
+  }, [write, enqueue]);
+  const deleteLine = useCallback((id) => {
+    var _a2;
+    const m = modelRef.current;
+    if (!m) return;
+    const prev = previousLineId(m, id);
+    (_a2 = pending.current.get(id)) == null ? void 0 : _a2.cancel();
+    setModel(removeBlock(m, id));
+    if (prev) setPendingFocus(prev);
+    else setFocusedId(null);
+    enqueue(id, () => write({
+      mutation: NATIVE_NOTION_DELETE_BLOCK,
+      variables: {
+        blockId: id
+      }
+    }));
+  }, [write, enqueue]);
+  const openPage = useCallback((id) => navigation.dispatch(StackActions.push("MainStack.NotionPage", {
+    orgName,
+    blockId: id
+  })), [navigation, orgName]);
+  const onTitle = (text) => {
+    setTitle(text);
+    if (blockId) scheduleTitle(blockId, text);
+  };
+  const pickIcon = (emoji) => {
+    setIconPicker(false);
+    setIcon(emoji);
+    if (blockId) updateProps(blockId, {
+      icon: emoji ? {
+        type: "emoji",
+        emoji
+      } : null
+    });
+  };
+  const trashPage = () => {
+    if (!blockId) return;
+    Alert.alert("Move to Trash?", "You can restore it from Trash.", [{
+      text: "Cancel",
+      style: "cancel"
+    }, {
+      text: "Move to Trash",
+      style: "destructive",
+      onPress: async () => {
+        try {
+          await write({
+            mutation: NATIVE_NOTION_DELETE_BLOCK,
+            variables: {
+              blockId
+            }
+          });
+          client.refetchQueries({
+            include: ["NativeNotionChildren"]
+          }).catch(() => void 0);
+          navigation.goBack();
+        } catch (err) {
+          Alert.alert("Couldn't move to Trash", err instanceof Error ? err.message : void 0);
+        }
+      }
+    }]);
+  };
+  const onChangeText = (id, text) => {
+    setModel((m) => m ? patchBlock(m, id, {
+      text
+    }) : m);
+    scheduleTitle(id, text);
+  };
+  const onSubmit = (line) => {
+    const {
+      block
+    } = line;
+    if (!block.text && block.type !== "paragraph" && nextTypeAfter(block.type) === block.type) {
+      turnInto(block.id, "paragraph");
+      return;
+    }
+    addBlock(block.parentId, block.id, nextTypeAfter(block.type));
+  };
+  const onBackspace = (line) => {
+    const {
+      block
+    } = line;
+    if (block.text) return;
+    if (block.type !== "paragraph" && block.type !== "text") turnInto(block.id, "paragraph");
+    else deleteLine(block.id);
+  };
+  const toggleTodo = (block) => {
+    const checked = block.properties.checked !== true;
+    setModel((m) => m ? patchBlock(m, block.id, {
+      properties: __spreadProps(__spreadValues({}, block.properties), {
+        checked
+      })
+    }) : m);
+    updateProps(block.id, {
+      checked
+    });
+  };
+  const addSubPage = () => {
+    var _a2, _b2, _c2;
+    const m = modelRef.current;
+    if (!m) return;
+    const anchor = focusedId ? m.blocks[focusedId] : null;
+    const id = addBlock((_a2 = anchor == null ? void 0 : anchor.parentId) != null ? _a2 : m.rootId, (_b2 = anchor == null ? void 0 : anchor.id) != null ? _b2 : null, "page");
+    Keyboard.dismiss();
+    (_c2 = chains.current.get(id)) == null ? void 0 : _c2.then(() => openPage(id));
+  };
+  const appendAtEnd = () => {
+    var _a2;
+    const m = modelRef.current;
+    if (!m) return;
+    const top = (_a2 = m.children[m.rootId]) != null ? _a2 : [];
+    const last = top.length ? m.blocks[top[top.length - 1]] : null;
+    if (last && isTextType(last.type) && !last.text) setPendingFocus(last.id);
+    else addBlock(m.rootId, null, "paragraph");
+  };
+  const lines = useMemo(() => model ? flattenModel(model) : [], [model]);
+  const focused = focusedId && model ? (_d = model.blocks[focusedId]) != null ? _d : null : null;
+  if (!model || !tree || !page) {
+    return /* @__PURE__ */ jsx(View, { style: [styles.center, {
+      backgroundColor: palette.card
+    }], children: loading || pageQuery.loading || !blockId ? /* @__PURE__ */ jsx(ActivityIndicator, { color: palette.primary }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { style: [styles.muted, {
+        color: error || pageQuery.error ? palette.danger : palette.textMuted
+      }], children: error || pageQuery.error ? "Couldn't load this page." : "This page was not found." }),
+      /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", onPress: () => {
+        refetch();
+        pageQuery.refetch();
+      }, style: styles.retry, children: /* @__PURE__ */ jsx(Text, { style: {
+        color: palette.primary,
+        fontWeight: "600"
+      }, children: "Try again" }) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs(KeyboardAvoidingView, { style: [styles.flex, {
+    backgroundColor: palette.card
+  }], behavior: Platform.OS === "ios" ? "padding" : void 0, keyboardVerticalOffset: Platform.OS === "ios" ? insets.top + 56 : 0, children: [
+    /* @__PURE__ */ jsxs(ScrollView, { style: styles.flex, contentContainerStyle: styles.content, keyboardShouldPersistTaps: "handled", refreshControl: /* @__PURE__ */ jsx(RefreshControl, { refreshing, onRefresh: async () => {
+      var _a2, _b2;
+      setRefreshing(true);
+      try {
+        const [res, pageRes] = await Promise.all([refetch(), pageQuery.refetch()]);
+        const next = (_a2 = res.data) == null ? void 0 : _a2.getBlockTree;
+        const nextPage = (_b2 = pageRes.data) == null ? void 0 : _b2.getBlock;
+        if (next && nextPage && !pending.current.size && !inFlight.current) {
+          applyTree(next, nextPage);
+        }
+      } finally {
+        setRefreshing(false);
+      }
+    } }), children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.pageActions, children: [
+        /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: icon ? "Change icon" : "Add icon", onPress: () => setIconPicker((v) => !v), style: ({
+          pressed
+        }) => [styles.pageAction, pressed && {
+          backgroundColor: palette.pressed
+        }], children: icon ? /* @__PURE__ */ jsx(Text, { style: styles.pageEmoji, children: icon }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Ionicons, { name: "happy-outline", size: 16, color: palette.textMuted }),
+          /* @__PURE__ */ jsx(Text, { style: [styles.pageActionLabel, {
+            color: palette.textMuted
+          }], children: "Add icon" })
+        ] }) }),
+        /* @__PURE__ */ jsx(View, { style: styles.flex }),
+        /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Move page to Trash", onPress: trashPage, hitSlop: 8, style: ({
+          pressed
+        }) => [styles.pageAction, pressed && {
+          backgroundColor: palette.pressed
+        }], children: /* @__PURE__ */ jsx(Ionicons, { name: "trash-outline", size: 18, color: palette.textMuted }) })
+      ] }),
+      iconPicker ? /* @__PURE__ */ jsxs(View, { style: [styles.emojiGrid, {
+        backgroundColor: palette.fill
+      }], children: [
+        PAGE_EMOJIS.map((e) => /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", onPress: () => pickIcon(e), style: styles.emojiCell, children: /* @__PURE__ */ jsx(Text, { style: styles.emoji, children: e }) }, e)),
+        icon ? /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", onPress: () => pickIcon(null), style: styles.emojiRemove, children: /* @__PURE__ */ jsx(Text, { style: {
+          color: palette.danger,
+          fontWeight: "600"
+        }, children: "Remove icon" }) }) : null
+      ] }) : null,
+      /* @__PURE__ */ jsx(TextInput, { value: title, onChangeText: onTitle, placeholder: "Untitled", placeholderTextColor: palette.textFaint, multiline: true, scrollEnabled: false, submitBehavior: "submit", returnKeyType: "next", onSubmitEditing: () => {
+        const first = lines.find((l) => isTextType(l.block.type));
+        if (first) setPendingFocus(first.block.id);
+        else addBlock(model.rootId, null, "paragraph");
+      }, onFocus: () => setFocusedId(null), style: [styles.title, {
+        color: palette.text
+      }] }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.meta, {
+        color: save === "error" ? palette.danger : palette.textMuted
+      }], children: saveLabelOf(save, page.lastEditedTime) }),
+      /* @__PURE__ */ jsx(View, { style: styles.body, children: lines.map((line) => /* @__PURE__ */ jsx(BlockLine, { line, palette, focused: line.block.id === focusedId, registerInput: (input) => inputs.current.set(line.block.id, input), onFocus: () => setFocusedId(line.block.id), onChangeText: (t) => onChangeText(line.block.id, t), onSubmit: () => onSubmit(line), onBackspace: () => onBackspace(line), onToggleTodo: () => toggleTodo(line.block), onOpenPage: openPage, onDelete: () => deleteLine(line.block.id) }, line.block.id)) }),
+      /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Add a block", onPress: appendAtEnd, style: styles.appendArea, children: lines.length === 0 ? /* @__PURE__ */ jsx(Text, { style: [styles.startHint, {
+        color: palette.textFaint
+      }], children: "Tap here to start writing\u2026" }) : null })
+    ] }),
+    focused ? /* @__PURE__ */ jsx(EditorToolbar, { palette, block: focused, onTurnInto: (type) => turnInto(focused.id, type), onDivider: () => {
+      addBlock(focused.parentId, focused.id, "divider");
+    }, onSubPage: addSubPage, onDelete: () => deleteLine(focused.id), onDone: () => {
+      Keyboard.dismiss();
+      setFocusedId(null);
+    } }) : null
+  ] });
+}
+function BlockLine({
+  line,
+  palette,
+  focused,
+  registerInput,
+  onFocus,
+  onChangeText,
+  onSubmit,
+  onBackspace,
+  onToggleTodo,
+  onOpenPage,
+  onDelete
+}) {
+  var _a, _b, _c;
+  const {
+    block,
+    depth,
+    number
+  } = line;
+  const indent = {
+    marginLeft: depth * 22
+  };
+  const confirmDelete = () => Alert.alert("Delete block?", void 0, [{
+    text: "Cancel",
+    style: "cancel"
+  }, {
+    text: "Delete",
+    style: "destructive",
+    onPress: onDelete
+  }]);
+  if (isPageBlock(block)) {
+    const emoji = blockIcon(block);
+    return /* @__PURE__ */ jsxs(Pressable, { accessibilityRole: "link", onPress: () => onOpenPage(block.id), onLongPress: confirmDelete, style: ({
+      pressed
+    }) => [styles.row, styles.linkRow, indent, pressed && {
+      backgroundColor: palette.pressed
+    }], children: [
+      emoji ? /* @__PURE__ */ jsx(Text, { style: styles.inlineEmoji, children: emoji }) : /* @__PURE__ */ jsx(Ionicons, { name: block.type === "database" ? "grid-outline" : "document-text-outline", size: 18, color: palette.textMuted }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.text, styles.link, {
+        color: palette.text,
+        borderBottomColor: palette.hairline
+      }], children: block.text.trim() || pageTitle({
+        properties: block.properties
+      }) })
+    ] });
+  }
+  if (block.type === "divider") {
+    return /* @__PURE__ */ jsx(Pressable, { onLongPress: confirmDelete, style: [styles.dividerHit, indent], children: /* @__PURE__ */ jsx(View, { style: [styles.divider, {
+      backgroundColor: palette.hairline
+    }] }) });
+  }
+  if (!isTextType(block.type)) {
+    const caption = block.text || richTextToPlain(block.properties.caption) || block.type.replace(/_/g, " ");
+    return /* @__PURE__ */ jsxs(Pressable, { onLongPress: confirmDelete, style: [styles.row, styles.unsupported, {
+      borderColor: palette.hairline
+    }, indent], children: [
+      /* @__PURE__ */ jsx(Ionicons, { name: "cube-outline", size: 16, color: palette.textMuted }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.unsupportedText, {
+        color: palette.textMuted
+      }], numberOfLines: 2, children: caption }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.webOnly, {
+        color: palette.textFaint
+      }], children: "Web" })
+    ] });
+  }
+  const checked = block.properties.checked === true;
+  let gutter = null;
+  if (block.type === "bulleted_list") {
+    gutter = /* @__PURE__ */ jsx(Text, { style: [styles.text, styles.marker, {
+      color: palette.text
+    }], children: "\u2022" });
+  } else if (block.type === "numbered_list") {
+    gutter = /* @__PURE__ */ jsx(Text, { style: [styles.text, styles.marker, {
+      color: palette.text
+    }], children: `${number != null ? number : 1}.` });
+  } else if (block.type === "todo") {
+    gutter = /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "checkbox", accessibilityState: {
+      checked
+    }, onPress: onToggleTodo, hitSlop: 8, style: styles.check, children: /* @__PURE__ */ jsx(Ionicons, { name: checked ? "checkbox" : "square-outline", size: 21, color: checked ? palette.primary : palette.textMuted }) });
+  } else if (block.type === "toggle") {
+    gutter = /* @__PURE__ */ jsx(Ionicons, { name: "caret-down", size: 14, color: palette.textMuted, style: styles.caret });
+  } else if (block.type === "callout") {
+    gutter = /* @__PURE__ */ jsx(Text, { style: styles.inlineEmoji, children: (_a = blockIcon({
+      properties: block.properties
+    })) != null ? _a : "\u{1F4A1}" });
+  }
+  return /* @__PURE__ */ jsxs(View, { style: [styles.row, indent, block.type === "quote" && [styles.quote, {
+    borderLeftColor: palette.text
+  }], block.type === "callout" && [styles.callout, {
+    backgroundColor: palette.fill
+  }], block.type === "code" && [styles.code, {
+    backgroundColor: palette.fill
+  }], block.type.startsWith("heading") && styles.headingRow], children: [
+    gutter,
+    /* @__PURE__ */ jsx(TextInput, { ref: registerInput, value: block.text, onChangeText, onFocus, multiline: true, scrollEnabled: false, submitBehavior: block.type === "code" ? "newline" : "submit", onSubmitEditing: block.type === "code" ? void 0 : onSubmit, onKeyPress: (e) => {
+      if (e.nativeEvent.key === "Backspace") onBackspace();
+    }, autoCorrect: block.type !== "code", autoCapitalize: block.type === "code" ? "none" : "sentences", placeholder: focused ? (_b = PLACEHOLDER[block.type]) != null ? _b : "Type something\u2026" : PLACEHOLDER[block.type], placeholderTextColor: palette.textFaint, style: [styles.input, (_c = TEXT_STYLE[block.type]) != null ? _c : styles.text, {
+      color: palette.text
+    }, block.type === "todo" && checked && styles.done, block.type === "todo" && checked && {
+      color: palette.textMuted
+    }, block.type === "code" && styles.codeText], textAlignVertical: "top" })
+  ] });
+}
+function EditorToolbar({
+  palette,
+  block,
+  onTurnInto,
+  onDivider,
+  onSubPage,
+  onDelete,
+  onDone
+}) {
+  return /* @__PURE__ */ jsxs(View, { style: [styles.toolbar, {
+    backgroundColor: palette.card,
+    borderTopColor: palette.hairline
+  }], children: [
+    /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, keyboardShouldPersistTaps: "always", contentContainerStyle: styles.toolbarContent, children: [
+      TURN_INTO.map((t) => {
+        const active = t.type === block.type || t.type === "paragraph" && block.type === "text";
+        return /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: `Turn into ${t.label}`, accessibilityState: {
+          selected: active
+        }, onPress: () => onTurnInto(t.type), style: [styles.tool, {
+          backgroundColor: active ? palette.primarySoft : palette.fill
+        }], children: /* @__PURE__ */ jsx(Text, { style: [styles.toolLabel, {
+          color: active ? palette.primary : palette.text
+        }], children: t.short }) }, t.type);
+      }),
+      /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Insert divider", onPress: onDivider, style: [styles.tool, {
+        backgroundColor: palette.fill
+      }], children: /* @__PURE__ */ jsx(Ionicons, { name: "remove-outline", size: 18, color: palette.text }) }),
+      /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Insert sub-page", onPress: onSubPage, style: [styles.tool, {
+        backgroundColor: palette.fill
+      }], children: /* @__PURE__ */ jsx(Ionicons, { name: "document-text-outline", size: 17, color: palette.text }) }),
+      /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Delete block", onPress: onDelete, style: [styles.tool, {
+        backgroundColor: palette.fill
+      }], children: /* @__PURE__ */ jsx(Ionicons, { name: "trash-outline", size: 17, color: palette.danger }) })
+    ] }),
+    /* @__PURE__ */ jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: "Done editing", onPress: onDone, style: styles.toolDone, hitSlop: 6, children: /* @__PURE__ */ jsx(Ionicons, { name: "chevron-down", size: 22, color: palette.text }) })
+  ] });
+}
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1
+  },
+  center: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24
+  },
+  content: {
+    paddingHorizontal: 20,
+    paddingTop: 12,
+    paddingBottom: 40
+  },
+  muted: {
+    fontSize: 15,
+    textAlign: "center"
+  },
+  retry: {
+    marginTop: 12,
+    padding: 8
+  },
+  pageActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 4
+  },
+  pageAction: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderRadius: 8
+  },
+  pageActionLabel: {
+    fontSize: 14,
+    fontWeight: "500"
+  },
+  pageEmoji: {
+    fontSize: 40
+  },
+  emojiGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    padding: 8,
+    borderRadius: 14,
+    marginBottom: 8
+  },
+  emojiCell: {
+    width: "12.5%",
+    aspectRatio: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  emoji: {
+    fontSize: 24
+  },
+  emojiRemove: {
+    width: "100%",
+    alignItems: "center",
+    paddingVertical: 8
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: "800",
+    lineHeight: 38,
+    padding: 0,
+    letterSpacing: -0.5
+  },
+  meta: {
+    fontSize: 12,
+    marginTop: 6
+  },
+  body: {
+    marginTop: 16,
+    gap: 2
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: 8,
+    borderRadius: 6
+  },
+  headingRow: {
+    marginTop: 10
+  },
+  linkRow: {
+    alignItems: "center",
+    paddingVertical: 6
+  },
+  input: {
+    flex: 1,
+    padding: 0,
+    paddingVertical: 3,
+    margin: 0,
+    minHeight: 30
+  },
+  text: {
+    fontSize: 16,
+    lineHeight: 24
+  },
+  done: {
+    textDecorationLine: "line-through"
+  },
+  marker: {
+    minWidth: 18,
+    paddingTop: 3
+  },
+  check: {
+    paddingTop: 4
+  },
+  caret: {
+    paddingTop: 9
+  },
+  link: {
+    fontWeight: "600",
+    borderBottomWidth: 1,
+    flexShrink: 1
+  },
+  quote: {
+    borderLeftWidth: 3,
+    paddingLeft: 12
+  },
+  callout: {
+    padding: 12,
+    borderRadius: mobileTokens.radius.sm
+  },
+  inlineEmoji: {
+    fontSize: 18,
+    lineHeight: 30
+  },
+  code: {
+    padding: 12,
+    borderRadius: mobileTokens.radius.sm
+  },
+  codeText: {
+    fontFamily: Platform.OS === "ios" ? "Menlo" : "monospace",
+    fontSize: 13,
+    lineHeight: 19
+  },
+  dividerHit: {
+    paddingVertical: 10
+  },
+  divider: {
+    height: StyleSheet.hairlineWidth
+  },
+  unsupported: {
+    borderWidth: 1,
+    borderStyle: "dashed",
+    padding: 10,
+    alignItems: "center",
+    marginVertical: 2
+  },
+  unsupportedText: {
+    flex: 1,
+    fontSize: 14,
+    textTransform: "capitalize"
+  },
+  webOnly: {
+    fontSize: 12,
+    fontWeight: "600"
+  },
+  appendArea: {
+    minHeight: 160,
+    paddingTop: 8
+  },
+  startHint: {
+    fontSize: 16
+  },
+  toolbar: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderTopWidth: StyleSheet.hairlineWidth,
+    paddingVertical: 6
+  },
+  toolbarContent: {
+    gap: 6,
+    paddingHorizontal: 10,
+    alignItems: "center"
+  },
+  tool: {
+    minWidth: 40,
+    height: 36,
+    paddingHorizontal: 10,
+    borderRadius: 10,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  toolLabel: {
+    fontSize: 15,
+    fontWeight: "700"
+  },
+  toolDone: {
+    paddingHorizontal: 12,
+    height: 36,
+    justifyContent: "center"
+  }
+});export{NotionPageView};//# sourceMappingURL=NotionPageView.js.map