Function PageBlock

packages/blocks/src/PageBlock.tsx:27–403

({ blockId } : Props)

}

export function PageBlock({ blockId } : Props) {
    const {
        getTextInputProps,
        getValue,
        getSelection
    } = useTextInput(blockId);
    const {
        blocks,
        insertBlock,
        updateBlock,
        updateBlockV2,
        blocksOrder,
    } = useBlocksContext();
    const {
        inputRefs
    } = useTextBlocksContext();
    const { properties } = useBlock(blockId);

    // This condition should be renamed to "isFirstBlock" or sth like that.
    const isRootBlock = blocks["root"].content[0] === blockId;
    const [showEmojiSelector, setShowEmojiSelector] = useState(false);
    const [pageIcon, setPageIcon] = useState<string | null>(blocks[blockId]?.format?.page_icon || null);
    const [pageCover, setPageCover] = useState<string | null>(blocks[blockId]?.format?.page_cover || null);
    const placeholder = "New page";

    const pickCover = async () => {
        let result = await ImagePicker.launchImageLibraryAsync({
          mediaTypes: ['images'],
          allowsEditing: false,
          quality: 1,
        });
    
        if (!result.canceled) {
          setPageCover(result.assets[0].uri);
    
          const updatedBlock = updateBlockData(blocks[blockId], {
            format: {
                page_cover: result.assets[0].uri
                /* page_cover_position */
            }
          });
    
          updateBlock(updatedBlock);
        }
    }

    const pickIcon = async () => {
        let result = await ImagePicker.launchImageLibraryAsync({
          mediaTypes: ['images'],
          allowsEditing: true,
          quality: 1,
          aspect: [4, 3]
        });
    
        if (!result.canceled) {
          setPageIcon(result.assets[0].uri);
          /* setAspectRatio(result.assets[0].width / result.assets[0].height); */
            setShowEmojiSelector(false);