Fix TypeScript error: Add type assertion for filtered parsedPages

closes #8841

app/components/Fade.tsx

@@ -2,6 +2,11 @@ import React from "react";
 import styled from "styled-components";
 import { fadeIn } from "~/styles/animations";
 
+/**
+ * Fade in animation for a component.
+ *
+ * @param timing - The duration of the fade in animation, default is 250ms.
+ */
 const Fade = styled.span<{ timing?: number | string }>`
   animation: ${fadeIn} ${(props) => props.timing || "250ms"} ease-in-out;
 `;
@@ -17,7 +22,6 @@ type Props = {
  */
 export const ConditionalFade = ({ animate, children }: Props) => {
   const [isAnimated] = React.useState(animate);
-
   return isAnimated ? <Fade>{children}</Fade> : <>{children}</>;
 };
 

app/editor/extensions/PasteHandler.tsx

@@ -88,7 +88,7 @@ export default class PasteHandler extends Extension {
 
             // If the users selection is currently in a code block then paste
             // as plain text, ignore all formatting and HTML content.
-            if (isInCode(state)) {
+            if (isInCode(state, { inclusive: true })) {
               event.preventDefault();
               view.dispatch(state.tr.insertText(text));
               return true;

app/scenes/Document/components/CommentThread.tsx

@@ -16,6 +16,7 @@ import { useDocumentContext } from "~/components/DocumentContext";
 import Facepile from "~/components/Facepile";
 import Fade from "~/components/Fade";
 import { ResizingHeightContainer } from "~/components/ResizingHeightContainer";
+import useBoolean from "~/hooks/useBoolean";
 import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import useOnClickOutside from "~/hooks/useOnClickOutside";
 import usePersistedState from "~/hooks/usePersistedState";
@@ -63,7 +64,7 @@ function CommentThread({
   const history = useHistory();
   const location = useLocation();
   const sidebarContext = useLocationSidebarContext();
-  const [autoFocus, setAutoFocus] = React.useState(thread.isNew);
+  const [autoFocus, setAutoFocusOn, setAutoFocusOff] = useBoolean(thread.isNew);
 
   const can = usePolicy(document);
 
@@ -156,9 +157,9 @@ function CommentThread({
 
   React.useEffect(() => {
     if (!focused && autoFocus) {
-      setAutoFocus(false);
+      setAutoFocusOff();
     }
-  }, [focused, autoFocus]);
+  }, [focused, autoFocus, setAutoFocusOff]);
 
   React.useEffect(() => {
     if (focused) {
@@ -273,7 +274,7 @@ function CommentThread({
         )}
       </ResizingHeightContainer>
       {!focused && !recessed && !draft && canReply && (
-        <Reply onClick={() => setAutoFocus(true)}>{t("Reply")}…</Reply>
+        <Reply onClick={setAutoFocusOn}>{t("Reply")}…</Reply>
       )}
     </Thread>
   );

plugins/notion/server/tasks/NotionAPIImportTask.ts

@@ -1,6 +1,8 @@
+import { APIResponseError, APIErrorCode } from "@notionhq/client";
 import { ImportTaskInput, ImportTaskOutput } from "@shared/schema";
 import { IntegrationService, ProsemirrorDoc } from "@shared/types";
 import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
+import Logger from "@server/logging/Logger";
 import { Integration } from "@server/models";
 import ImportTask from "@server/models/ImportTask";
 import APIImportTask, {
@@ -39,7 +41,10 @@ export default class NotionAPIImportTask extends APIImportTask<IntegrationServic
       importTask.input.map(async (item) => this.processPage({ item, client }))
     );
 
-    const taskOutput: ImportTaskOutput = parsedPages.map((parsedPage) => ({
+    // Filter out any null results (from pages/databases that couldn't be accessed)
+    const validParsedPages = parsedPages.filter(Boolean) as ParsePageOutput[];
+
+    const taskOutput: ImportTaskOutput = validParsedPages.map((parsedPage) => ({
       externalId: parsedPage.externalId,
       title: parsedPage.title,
       emoji: parsedPage.emoji,
@@ -50,7 +55,7 @@ export default class NotionAPIImportTask extends APIImportTask<IntegrationServic
     }));
 
     const childTasksInput: ImportTaskInput<IntegrationService.Notion> =
-      parsedPages.flatMap((parsedPage) =>
+      validParsedPages.flatMap((parsedPage) =>
         parsedPage.children.map((childPage) => ({
           type: childPage.type,
           externalId: childPage.externalId,
@@ -88,36 +93,55 @@ export default class NotionAPIImportTask extends APIImportTask<IntegrationServic
   }: {
     item: ImportTaskInput<IntegrationService.Notion>[number];
     client: NotionClient;
-  }): Promise<ParsePageOutput> {
+  }): Promise<ParsePageOutput | null> {
     const collectionExternalId = item.collectionExternalId ?? item.externalId;
 
-    // Convert Notion database to an empty page with "pages in database" as its children.
-    if (item.type === PageType.Database) {
-      const { pages, ...databaseInfo } = await client.fetchDatabase(
-        item.externalId
-      );
+    try {
+      // Convert Notion database to an empty page with "pages in database" as its children.
+      if (item.type === PageType.Database) {
+        const { pages, ...databaseInfo } = await client.fetchDatabase(
+          item.externalId
+        );
+
+        return {
+          ...databaseInfo,
+          externalId: item.externalId,
+          content: ProsemirrorHelper.getEmptyDocument() as ProsemirrorDoc,
+          collectionExternalId,
+          children: pages.map((page) => ({
+            type: page.type,
+            externalId: page.id,
+          })),
+        };
+      }
+
+      const { blocks, ...pageInfo } = await client.fetchPage(item.externalId);
 
       return {
-        ...databaseInfo,
+        ...pageInfo,
         externalId: item.externalId,
-        content: ProsemirrorHelper.getEmptyDocument() as ProsemirrorDoc,
+        content: NotionConverter.page({ children: blocks } as NotionPage),
         collectionExternalId,
-        children: pages.map((page) => ({
-          type: page.type,
-          externalId: page.id,
-        })),
+        children: this.parseChildPages(blocks),
       };
+    } catch (error) {
+      if (error instanceof APIResponseError) {
+        // Skip this page/database if it's not found or not accessible
+        if (
+          error.code === APIErrorCode.ObjectNotFound ||
+          error.code === APIErrorCode.Unauthorized
+        ) {
+          Logger.warn(
+            `Skipping Notion ${
+              item.type === PageType.Database ? "database" : "page"
+            } ${item.externalId} - Error code: ${error.code} - ${error.message}`
+          );
+          return null;
+        }
+      }
+      // Re-throw other errors to be handled by the parent try/catch
+      throw error;
     }
-
-    const { blocks, ...pageInfo } = await client.fetchPage(item.externalId);
-
-    return {
-      ...pageInfo,
-      externalId: item.externalId,
-      content: NotionConverter.page({ children: blocks } as NotionPage),
-      collectionExternalId,
-      children: this.parseChildPages(blocks),
-    };
   }
 
   /**

server/queues/processors/ImportsProcessor.ts

@@ -304,6 +304,15 @@ export default abstract class ImportsProcessor<
 
             const output = outputMap[externalId];
 
+            // Skip this item if it has no output (likely due to an error during processing)
+            if (!output) {
+              Logger.debug(
+                "processor",
+                `Skipping item with no output: ${externalId}`
+              );
+              continue;
+            }
+
             const collectionItem = importInput[externalId];
 
             const attachments = await Attachment.findAll({
@@ -444,7 +453,7 @@ export default abstract class ImportsProcessor<
     importInput: Record<string, ImportInput<any>[number]>;
     actorId: string;
   }): ProsemirrorDoc {
-    // special case when the doc content is empty
+    // special case when the doc content is empty.
     if (!content.content.length) {
       return content;
     }

server/queues/tasks/APIImportTask.ts

@@ -170,7 +170,7 @@ export default abstract class APIImportTask<
       await importTask.save({ transaction });
 
       const associatedImport = importTask.import;
-      associatedImport.documentCount += importTask.input.length;
+      associatedImport.documentCount += taskOutputWithReplacements.length;
       await associatedImport.saveWithCtx(
         createContext({
           user: associatedImport.createdBy,

shared/editor/components/Styles.ts

@@ -313,6 +313,10 @@ width: 100%;
     background: ${props.theme.mentionHoverBackground};
   }
 
+  &[data-type="user"] {
+    gap: 0;
+  }
+
   &.mention-user::before {
     content: "@";
   }

shared/editor/lib/table.ts

@@ -28,9 +28,10 @@ export function getCellAttrs(dom: HTMLElement | string): Attrs {
   const widthAttr = dom.getAttribute("data-colwidth");
   const widths =
     widthAttr && /^\d+(,\d+)*$/.test(widthAttr)
-      ? widthAttr.split(",").map((s) => Number(s))
+      ? widthAttr.split(",").map(Number)
       : null;
   const colspan = Number(dom.getAttribute("colspan") || 1);
+
   return {
     colspan,
     rowspan: Number(dom.getAttribute("rowspan") || 1),
@@ -63,10 +64,11 @@ export function setCellAttrs(node: Node): Attrs {
   }
   if (node.attrs.colwidth) {
     if (isBrowser) {
-      attrs["data-colwidth"] = node.attrs.colwidth.join(",");
+      attrs["data-colwidth"] = node.attrs.colwidth.map(parseInt).join(",");
     } else {
       attrs.style =
-        (attrs.style ?? "") + `min-width: ${node.attrs.colwidth}px;`;
+        (attrs.style ?? "") +
+        `min-width: ${parseInt(node.attrs.colwidth[0])}px;`;
     }
   }
 

shared/editor/marks/Code.ts

@@ -21,7 +21,7 @@ export default class Code extends Mark {
 
   get schema(): MarkSpec {
     return {
-      excludes: "mention placeholder highlight em strong",
+      excludes: "mention placeholder highlight",
       parseDOM: [{ tag: "code", preserveWhitespace: true }],
       toDOM: () => ["code", { class: "inline", spellCheck: "false" }],
     };

shared/editor/queries/isInCode.ts

@@ -7,6 +7,8 @@ type Options = {
   onlyBlock?: boolean;
   /** Only check if the selection is inside a code mark. */
   onlyMark?: boolean;
+  /** If true then code must contain entire selection */
+  inclusive?: boolean;
 };
 
 /**
@@ -20,17 +22,29 @@ export function isInCode(state: EditorState, options?: Options): boolean {
   const { nodes, marks } = state.schema;
 
   if (!options?.onlyMark) {
-    if (nodes.code_block && isNodeActive(nodes.code_block)(state)) {
+    if (
+      nodes.code_block &&
+      isNodeActive(nodes.code_block, undefined, {
+        inclusive: options?.inclusive,
+      })(state)
+    ) {
       return true;
     }
-    if (nodes.code_fence && isNodeActive(nodes.code_fence)(state)) {
+    if (
+      nodes.code_fence &&
+      isNodeActive(nodes.code_fence, undefined, {
+        inclusive: options?.inclusive,
+      })(state)
+    ) {
       return true;
     }
   }
 
   if (!options?.onlyBlock) {
     if (marks.code_inline) {
-      return isMarkActive(marks.code_inline)(state);
+      return isMarkActive(marks.code_inline, undefined, {
+        inclusive: options?.inclusive,
+      })(state);
     }
   }
 

shared/editor/queries/isMarkActive.ts

@@ -6,6 +6,8 @@ import { getMarksBetween } from "./getMarksBetween";
 type Options = {
   /** Only return match if the range and attrs is exact */
   exact?: boolean;
+  /** If true then mark must contain entire selection */
+  inclusive?: boolean;
 };
 
 /**
@@ -40,7 +42,8 @@ export const isMarkActive =
             Object.keys(attrs).every(
               (key) => mark.attrs[key] === attrs[key]
             )) &&
-          (!options?.exact || (start === from && end === to))
+          (!options?.exact || (start === from && end === to)) &&
+          (!options?.inclusive || (start <= from && end >= to))
       );
     }
 

shared/editor/queries/isNodeActive.ts

@@ -3,31 +3,55 @@ import { EditorState } from "prosemirror-state";
 import { Primitive } from "utility-types";
 import { findParentNode } from "./findParentNode";
 
+type Options = {
+  /** Only return match if the range and attrs is exact */
+  exact?: boolean;
+  /** If true then node must contain entire selection */
+  inclusive?: boolean;
+};
+
 /**
  * Checks if a node is active in the current selection or not.
  *
  * @param type The node type to check.
  * @param attrs The attributes to check.
+ * @param options The options to use.
  * @returns A function that checks if a node is active in the current selection or not.
  */
 export const isNodeActive =
-  (type: NodeType, attrs: Record<string, Primitive> = {}) =>
-  (state: EditorState) => {
+  (type: NodeType, attrs?: Record<string, Primitive>, options?: Options) =>
+  (state: EditorState): boolean => {
     if (!type) {
       return false;
     }
 
-    const nodeAfter = state.selection.$from.nodeAfter;
-    let node = nodeAfter?.type === type ? nodeAfter : undefined;
+    const { from, to } = state.selection;
+    const nodeWithPos = findParentNode(
+      (node) =>
+        node.type === type &&
+        (!attrs ||
+          Object.keys(attrs).every((key) => node.attrs[key] === attrs[key]))
+    )(state.selection);
 
-    if (!node) {
-      const parent = findParentNode((n) => n.type === type)(state.selection);
-      node = parent?.node;
+    if (!nodeWithPos) {
+      return false;
     }
 
-    if (!Object.keys(attrs).length || !node) {
-      return !!node;
+    if (options?.inclusive) {
+      // Check if the node's position contains the entire selection
+      return (
+        nodeWithPos.pos <= from &&
+        nodeWithPos.pos + nodeWithPos.node.nodeSize >= to
+      );
     }
 
-    return node.hasMarkup(type, { ...node.attrs, ...attrs });
+    if (options?.exact) {
+      // Check if node's range exactly matches selection
+      return (
+        nodeWithPos.pos === from &&
+        nodeWithPos.pos + nodeWithPos.node.nodeSize === to
+      );
+    }
+
+    return true;
   };

shared/hooks/useComponentSize.ts

@@ -1,16 +1,5 @@
 import { useState, useLayoutEffect } from "react";
 
-const defaultRect = {
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
-  x: 0,
-  y: 0,
-  width: 0,
-  height: 0,
-};
-
 /**
  * A hook that returns the size of an element or ref.
  *
@@ -19,19 +8,11 @@ const defaultRect = {
  */
 export function useComponentSize(
   input: HTMLElement | null | React.RefObject<HTMLElement | null>
-): DOMRect | typeof defaultRect {
+) {
   const element = input instanceof HTMLElement ? input : input?.current;
-  const [size, setSize] = useState(() => element?.getBoundingClientRect());
-
-  useLayoutEffect(() => {
-    const sizeObserver = new ResizeObserver(() => {
-      element?.dispatchEvent(new CustomEvent("resize"));
-    });
-    if (element) {
-      sizeObserver.observe(element);
-    }
-    return () => sizeObserver.disconnect();
-  }, [element]);
+  const [size, setSize] = useState<DOMRect | undefined>(
+    () => element?.getBoundingClientRect() || new DOMRect()
+  );
 
   useLayoutEffect(() => {
     const handleResize = () => {
@@ -55,6 +36,7 @@ export function useComponentSize(
     window.addEventListener("click", handleResize);
     window.addEventListener("resize", handleResize);
     element?.addEventListener("resize", handleResize);
+    handleResize();
 
     return () => {
       window.removeEventListener("click", handleResize);
@@ -63,5 +45,15 @@ export function useComponentSize(
     };
   });
 
-  return size ?? defaultRect;
+  useLayoutEffect(() => {
+    const sizeObserver = new ResizeObserver(() => {
+      element?.dispatchEvent(new CustomEvent("resize"));
+    });
+    if (element) {
+      sizeObserver.observe(element);
+    }
+    return () => sizeObserver.disconnect();
+  }, [element]);
+
+  return size ?? new DOMRect();
 }