feat: package updates (#2300)

* package updates
* update tiptap
* fix editor crash
* fix
* update list
* fix(theme): size badges to their content
* fix mantine avatar color regression

apps/client/src/features/editor/components/bubble-menu/readonly-bubble-menu.tsx

@@ -11,6 +11,7 @@ import {
 } from "@/features/comment/atoms/comment-atom";
 import { useTranslation } from "react-i18next";
 import { getRelativeSelection, ySyncPluginKey } from "@tiptap/y-tiptap";
+import { isEditorReady } from "@docmost/editor-ext";
 
 type ReadonlyBubbleMenuProps = {
   editor: Editor;
@@ -29,6 +30,10 @@ export const ReadonlyBubbleMenu: FC<ReadonlyBubbleMenuProps> = ({ editor }) => {
 
   const updateMenuPosition = useCallback(() => {
     if (isInteractingRef.current) return;
+    if (!isEditorReady(editor)) {
+      setVisible(false);
+      return;
+    }
 
     const pmSelection = editor.state.selection;
     if (!(pmSelection instanceof TextSelection) || pmSelection.empty) {
@@ -97,7 +102,7 @@ export const ReadonlyBubbleMenu: FC<ReadonlyBubbleMenuProps> = ({ editor }) => {
   }, [showReadOnlyCommentPopup]);
 
   const handleCommentClick = () => {
-    if (!editor) return;
+    if (!isEditorReady(editor)) return;
 
     const view = editor.view;
     const ystate = ySyncPluginKey.getState(view.state);

apps/client/src/features/editor/components/fixed-toolbar/groups/more-inserts-group.tsx

@@ -96,7 +96,7 @@ export const MoreInsertsGroup: FC<Props> = ({ editor, templateMode }) => {
           <Menu.Item
             leftSection={<IconRotate2 size={16} />}
             onClick={() =>
-              editor.chain().focus().insertTransclusionSource().run()
+              editor.chain().focus().toggleTransclusionSource().run()
             }
           >
             {t("Synced block")}

apps/client/src/features/editor/components/link/link-view.tsx

@@ -28,7 +28,7 @@ import { usePageQuery } from "@/features/page/queries/page-query.ts";
 import { useSharePageQuery } from "@/features/share/queries/share-query.ts";
 import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
 import { extractPageSlugId } from "@/lib";
-import { sanitizeUrl, copyToClipboard } from "@docmost/editor-ext";
+import { sanitizeUrl, copyToClipboard, isEditorReady } from "@docmost/editor-ext";
 import { normalizeUrl } from "@/lib/utils";
 
 const parseInternalLink = (
@@ -313,7 +313,9 @@ export default function LinkView(props: MarkViewProps) {
   );
 
   const handleRemoveLink = useCallback(() => {
-    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    if (isEditorReady(editor)) {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    }
     setPopoverState("closed");
   }, [editor]);
 
@@ -345,7 +347,7 @@ export default function LinkView(props: MarkViewProps) {
               NodeFilter.SHOW_TEXT,
             );
             const textNode = walker.nextNode();
-            if (textNode) {
+            if (textNode && isEditorReady(editor)) {
               const view = editor.view as any;
               view.domObserver.stop();
               textNode.nodeValue = val;

apps/client/src/features/editor/components/search-and-replace/search-and-replace-dialog.tsx

@@ -17,6 +17,7 @@ import {
   IconX,
 } from "@tabler/icons-react";
 import { useEditor } from "@tiptap/react";
+import { isEditorReady } from "@docmost/editor-ext";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { searchAndReplaceStateAtom } from "@/features/editor/components/search-and-replace/atoms/search-and-replace-state-atom.ts";
 import { useAtom } from "jotai";
@@ -64,13 +65,13 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
       replaceButtonToggle();
     }
     // Clear search term in editor
-    if (editor) {
+    if (isEditorReady(editor)) {
       editor.commands.setSearchTerm("");
     }
   };
 
   const goToSelection = () => {
-    if (!editor) return;
+    if (!isEditorReady(editor)) return;
 
     const { results, resultIndex } = editor.storage.searchAndReplace;
     //TODO: check type error
@@ -90,27 +91,32 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
   };
 
   const next = () => {
+    if (!isEditorReady(editor)) return;
     editor.commands.nextSearchResult();
     goToSelection();
   };
 
   const previous = () => {
+    if (!isEditorReady(editor)) return;
     editor.commands.previousSearchResult();
     goToSelection();
   };
 
   const replace = () => {
+    if (!isEditorReady(editor)) return;
     editor.commands.setReplaceTerm(replaceText);
     editor.commands.replace();
     goToSelection();
   };
 
   const replaceAll = () => {
+    if (!isEditorReady(editor)) return;
     editor.commands.setReplaceTerm(replaceText);
     editor.commands.replaceAll();
   };
 
   useEffect(() => {
+    if (!isEditorReady(editor)) return;
     editor.commands.setSearchTerm(searchText);
     editor.commands.resetIndex();
     editor.commands.selectCurrentItem();
@@ -118,6 +124,7 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
 
   const handleOpenEvent = (e) => {
     setPageFindState({ isOpen: true });
+    if (!isEditorReady(editor)) return;
     const selectedText = editor.state.doc.textBetween(
       editor.state.selection.from,
       editor.state.selection.to,
@@ -149,6 +156,7 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
   }, [pageFindState.isOpen]);
 
   useEffect(() => {
+    if (!isEditorReady(editor)) return;
     editor.commands.setCaseSensitive(caseSensitive.isCaseSensitive);
     editor.commands.resetIndex();
     goToSelection();

apps/client/src/features/editor/components/table-of-contents/table-of-contents.tsx

@@ -50,6 +50,7 @@ export const TableOfContents: FC<TableOfContentsProps> = (props) => {
   const headerPaddingRef = useRef<HTMLDivElement | null>(null);
 
   const handleScrollToHeading = (position: number) => {
+    if (!props.editor || props.editor.isDestroyed) return;
     const { view } = props.editor;
 
     const headerOffset = parseInt(
@@ -73,16 +74,21 @@ export const TableOfContents: FC<TableOfContentsProps> = (props) => {
   };
 
   const handleUpdate = () => {
-    const result = recalculateLinks(props.editor?.$nodes("heading"));
+    if (!props.editor || props.editor.isDestroyed) return;
+
+    const result = recalculateLinks(props.editor.$nodes("heading"));
 
     setLinks(result.links);
     setHeadingDOMNodes(result.nodes);
   };
 
   useEffect(() => {
+    // "create" repopulates once the editor view mounts after this component
+    props.editor?.on("create", handleUpdate);
     props.editor?.on("update", handleUpdate);
 
     return () => {
+      props.editor?.off("create", handleUpdate);
       props.editor?.off("update", handleUpdate);
     };
   }, [props.editor]);

apps/client/src/features/editor/components/table/handle/cell-chevron.tsx

@@ -9,7 +9,7 @@ import { Menu, UnstyledButton } from "@mantine/core";
 import { IconChevronDown } from "@tabler/icons-react";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
-import { isCellSelection } from "@docmost/editor-ext";
+import { isCellSelection, isEditorReady } from "@docmost/editor-ext";
 import { CellChevronMenu } from "./menus/cell-chevron-menu";
 import classes from "./handle.module.css";
 
@@ -27,7 +27,9 @@ export const CellChevron = React.memo(function CellChevron({
   tablePos,
 }: CellChevronProps) {
   const { t } = useTranslation();
-  const cellDom = editor.view.nodeDOM(cellPos) as HTMLElement | null;
+  const cellDom = isEditorReady(editor)
+    ? (editor.view.nodeDOM(cellPos) as HTMLElement | null)
+    : null;
 
   const { refs, floatingStyles, middlewareData } = useFloating({
     placement: "top-end",
@@ -61,6 +63,7 @@ export const CellChevron = React.memo(function CellChevron({
   });
 
   const onOpen = useCallback(() => {
+    if (!isEditorReady(editor)) return;
     const current = editor.state.selection;
 
     // Preserve an existing multi-cell CellSelection that already covers
@@ -86,6 +89,7 @@ export const CellChevron = React.memo(function CellChevron({
   }, [editor, cellPos]);
 
   const onClose = useCallback(() => {
+    if (!isEditorReady(editor)) return;
     editor.commands.unfreezeHandles();
   }, [editor]);
 

apps/client/src/features/editor/components/table/handle/hooks/use-column-row-menu-lifecycle.ts

@@ -1,6 +1,7 @@
 import { useCallback } from "react";
 import type { Editor } from "@tiptap/react";
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { isEditorReady } from "@docmost/editor-ext";
 import { buildRowOrColumnSelection, Orientation } from "../lib/select-row-column";
 
 interface Args {
@@ -19,6 +20,7 @@ export function useColumnRowMenuLifecycle({
   tablePos,
 }: Args) {
   const onOpen = useCallback(() => {
+    if (!isEditorReady(editor)) return;
     const selection = buildRowOrColumnSelection(
       editor.state,
       tableNode,
@@ -33,6 +35,7 @@ export function useColumnRowMenuLifecycle({
   }, [editor, orientation, index, tableNode, tablePos]);
 
   const onClose = useCallback(() => {
+    if (!isEditorReady(editor)) return;
     editor.commands.unfreezeHandles();
   }, [editor]);
 

apps/client/src/features/editor/components/table/handle/hooks/use-table-clear.ts

@@ -2,6 +2,7 @@ import { useCallback } from "react";
 import type { Editor } from "@tiptap/react";
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import { TableMap } from "@tiptap/pm/tables";
+import { isEditorReady } from "@docmost/editor-ext";
 
 type Scope =
   | { kind: "col"; index: number }
@@ -15,6 +16,7 @@ export function useTableClear(
   scope: Scope,
 ) {
   return useCallback(() => {
+    if (!isEditorReady(editor)) return;
     const tr = editor.state.tr;
     const tableStart = tablePos + 1;
     const map = TableMap.get(tableNode);

apps/client/src/features/editor/components/table/handle/hooks/use-table-move-row-column.ts

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from "react";
 import type { Editor } from "@tiptap/react";
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import { TableMap } from "@tiptap/pm/tables";
-import { moveColumn, moveRow } from "@docmost/editor-ext";
+import { isEditorReady, moveColumn, moveRow } from "@docmost/editor-ext";
 
 export type MoveDirection = "left" | "right" | "up" | "down";
 
@@ -25,7 +25,7 @@ export function useTableMoveRowColumn(
   const canMove = target >= 0 && target <= maxIndex;
 
   const handleMove = useCallback(() => {
-    if (!canMove) return;
+    if (!canMove || !isEditorReady(editor)) return;
     const tr = editor.state.tr;
     const moved =
       orientation === "col"

apps/client/src/features/editor/components/table/handle/hooks/use-table-sort.ts

@@ -4,6 +4,7 @@ import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import {
   convertArrayOfRowsToTableNode,
   convertTableNodeToArrayOfRows,
+  isEditorReady,
   transpose,
 } from "@docmost/editor-ext";
 import {
@@ -63,7 +64,7 @@ export function useTableSort({
   }, [tableNode, orientation, index]);
 
   const handleSort = useCallback(() => {
-    if (!canSort) return;
+    if (!canSort || !isEditorReady(editor)) return;
 
     const rows = convertTableNodeToArrayOfRows(tableNode);
     const axes = orientation === "col" ? rows : transpose(rows);

apps/client/src/features/editor/title-editor.tsx

@@ -152,7 +152,11 @@ export function TitleEditor({
   const debounceUpdate = useDebouncedCallback(saveTitle, 500);
 
   useEffect(() => {
-    if (titleEditor && title !== titleEditor.getText()) {
+    if (
+      titleEditor &&
+      !titleEditor.isDestroyed &&
+      title !== titleEditor.getText()
+    ) {
       titleEditor.commands.setContent(title);
     }
   }, [pageId, title, titleEditor]);