fix: safe editor

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

@@ -23,7 +23,7 @@ import {
 } from "@/features/comment/atoms/comment-atom";
 import { useAtom, useAtomValue } from "jotai";
 import { v7 as uuid7 } from "uuid";
-import { isCellSelection, isTextSelected } from "@docmost/editor-ext";
+import { isCellSelection, isEditorReady, isTextSelected } from "@docmost/editor-ext";
 import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector.tsx";
 import { useTranslation } from "react-i18next";
 import { showAiMenuAtom, showLinkMenuAtom } from "@/features/editor/atoms/editor-atoms";
@@ -226,7 +226,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
                     aria-label={t(item.name)}
                     className={clsx({ [classes.active]: item.isActive() })}
                     style={{ border: "none" }}
-                    onClick={item.command}
+                    onClick={() => isEditorReady(props.editor) && item.command()}
                   >
                     <item.icon style={{ width: rem(16) }} stroke={2} />
                   </ActionIcon>
@@ -256,7 +256,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
               radius="6px"
               aria-label={t(commentItem.name)}
               style={{ border: "none" }}
-              onClick={commentItem.command}
+              onClick={() => isEditorReady(props.editor) && commentItem.command()}
             >
               <IconMessage size={16} stroke={2} />
             </ActionIcon>

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

@@ -13,6 +13,7 @@ import {
 import type { Editor } from "@tiptap/react";
 import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
+import { isEditorReady } from "@docmost/editor-ext";
 import clsx from "clsx";
 import classes from "./bubble-menu.module.css";
 
@@ -253,6 +254,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
               <SimpleGrid cols={5} spacing="xs">
                 {TEXT_COLORS.map(({ name, color }, index) => {
                   const applyTextColor = () => {
+                    if (!isEditorReady(editor)) return;
                     if (name === "Default") {
                       editor.commands.unsetColor();
                     } else {
@@ -316,6 +318,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
               <SimpleGrid cols={5} spacing="xs">
                 {HIGHLIGHT_COLORS.map(({ name, color }, index) => {
                   const applyHighlight = () => {
+                    if (!isEditorReady(editor)) return;
                     if (name === "Default") {
                       editor.commands.unsetHighlight();
                     } else {
@@ -386,8 +389,10 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
               data-color-grid="remove"
               className={classes.removeColor}
               onClick={() => {
-                editor.commands.unsetColor();
-                editor.commands.unsetHighlight();
+                if (isEditorReady(editor)) {
+                  editor.commands.unsetColor();
+                  editor.commands.unsetHighlight();
+                }
                 setIsOpen(false);
               }}
               onKeyDown={(e) => {

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

@@ -19,6 +19,7 @@ import { Popover, Button, ScrollArea, Tooltip } from "@mantine/core";
 import type { Editor } from "@tiptap/react";
 import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
+import { isEditorReady } from "@docmost/editor-ext";
 import classes from "./bubble-menu.module.css";
 
 interface NodeSelectorProps {
@@ -193,7 +194,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
                 justify="left"
                 fullWidth
                 onClick={() => {
-                  item.command();
+                  if (isEditorReady(editor)) item.command();
                   setIsOpen(false);
                 }}
                 style={{ border: "none" }}

apps/client/src/features/editor/components/bubble-menu/text-alignment-selector.tsx

@@ -11,6 +11,7 @@ import { Menu, Button, Tooltip, rem } from "@mantine/core";
 import type { Editor } from "@tiptap/react";
 import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
+import { isEditorReady } from "@docmost/editor-ext";
 
 interface TextAlignmentProps {
   editor: Editor | null;
@@ -117,7 +118,7 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
               activeItem.name === item.name ? <IconCheck size={16} /> : null
             }
             onClick={() => {
-              item.command();
+              if (isEditorReady(editor)) item.command();
               setIsOpen(false);
             }}
           >

apps/client/src/features/editor/components/common/editor-paste-handler.tsx

@@ -183,6 +183,7 @@ async function reuploadPastedAttachments(
   );
 
   if (reuploadResults.size === 0) return;
+  if (editor.isDestroyed) return;
 
   editor.chain().command(({ tr }) => {
     const sorted = [...nodesToReupload].sort((a, b) => b.pos - a.pos);

apps/client/src/features/editor/components/fixed-toolbar/groups/block-type-group.tsx

@@ -25,11 +25,11 @@ export const BlockTypeGroup: FC<Props> = ({ editor }) => {
   const state = useEditorState({
     editor,
     selector: (ctx) => ({
-      isHeading1: ctx.editor.isActive("heading", { level: 1 }),
-      isHeading2: ctx.editor.isActive("heading", { level: 2 }),
-      isHeading3: ctx.editor.isActive("heading", { level: 3 }),
-      isBlockquote: ctx.editor.isActive("blockquote"),
-      isCodeBlock: ctx.editor.isActive("codeBlock"),
+      isHeading1: !!ctx.editor?.isActive("heading", { level: 1 }),
+      isHeading2: !!ctx.editor?.isActive("heading", { level: 2 }),
+      isHeading3: !!ctx.editor?.isActive("heading", { level: 3 }),
+      isBlockquote: !!ctx.editor?.isActive("blockquote"),
+      isCodeBlock: !!ctx.editor?.isActive("codeBlock"),
     }),
   });
 

apps/client/src/features/editor/components/fixed-toolbar/use-toolbar-state.ts

@@ -21,7 +21,7 @@ export interface ToolbarState {
 // static editor (mainExtensions only, undoRedo disabled), neither is loaded
 // and editor.can().undo/redo is undefined.
 function safeCan(editor: Editor, command: "undo" | "redo"): boolean {
-  const can = editor.can() as Record<string, unknown>;
+  const can = editor?.can() as Record<string, unknown>;
   const fn = can[command];
   return typeof fn === "function" ? (fn as () => boolean)() : false;
 }
@@ -30,7 +30,7 @@ export function useToolbarState(editor: Editor | null): ToolbarState | null {
   return useEditorState({
     editor,
     selector: (ctx) => {
-      if (!ctx.editor) return null;
+      if (!ctx.editor || ctx.editor.isDestroyed) return null;
       return {
         isBold: ctx.editor.isActive("bold"),
         isItalic: ctx.editor.isActive("italic"),

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

@@ -25,7 +25,7 @@ const recalculateLinks = (nodePos: NodePos[]) => {
     (acc, item) => {
       const label = item.node.textContent;
       const level = Number(item.node.attrs.level);
-      if (label.length && level <= 4) {
+      if (label.length && level <= 6) {
         acc.push({
           label,
           level,

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

@@ -8,6 +8,7 @@ import { useTranslation } from "react-i18next";
 import { useTableHandleDrag } from "./hooks/use-table-handle-drag";
 import { useColumnRowMenuLifecycle } from "./hooks/use-column-row-menu-lifecycle";
 import { ColumnHandleMenu } from "./menus/column-handle-menu";
+import { isEditorReady } from "@docmost/editor-ext";
 import classes from "./handle.module.css";
 
 interface ColumnHandleProps {
@@ -35,7 +36,9 @@ export const ColumnHandle = React.memo(function ColumnHandle({
   // an external drop reflows the doc before the plugin re-emits
   // hoveringCell), it can resolve to a Text node, on which `.closest` is
   // undefined. Filter to HTMLElement so downstream consumers stay safe.
-  const lookupDom = editor.view.nodeDOM(anchorPos);
+  const lookupDom = isEditorReady(editor)
+    ? editor.view.nodeDOM(anchorPos)
+    : null;
   const lookupCellDom = lookupDom instanceof HTMLElement ? lookupDom : null;
   const [cellDom, setCellDom] = useState<HTMLElement | null>(lookupCellDom);
   const lastCellDomRef = useRef<HTMLElement | null>(lookupCellDom);

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

@@ -101,14 +101,14 @@ export const CellChevronMenu = React.memo(function CellChevronMenu({
       <Menu.Item
         leftSection={<IconBoxMargin size={16} />}
         onClick={() => editor.chain().focus().mergeCells().run()}
-        disabled={!editor.can().mergeCells()}
+        disabled={!editor?.can().mergeCells()}
       >
         {t("Merge cells")}
       </Menu.Item>
       <Menu.Item
         leftSection={<IconSquareToggle size={16} />}
         onClick={() => editor.chain().focus().splitCell().run()}
-        disabled={!editor.can().splitCell()}
+        disabled={!editor?.can().splitCell()}
       >
         {t("Split cell")}
       </Menu.Item>

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

@@ -8,6 +8,7 @@ import { useTranslation } from "react-i18next";
 import { useTableHandleDrag } from "./hooks/use-table-handle-drag";
 import { useColumnRowMenuLifecycle } from "./hooks/use-column-row-menu-lifecycle";
 import { RowHandleMenu } from "./menus/row-handle-menu";
+import { isEditorReady } from "@docmost/editor-ext";
 import classes from "./handle.module.css";
 
 interface RowHandleProps {
@@ -33,7 +34,9 @@ export const RowHandle = React.memo(function RowHandle({
   // an external drop reflows the doc before the plugin re-emits
   // hoveringCell), it can resolve to a Text node, on which `.closest` is
   // undefined. Filter to HTMLElement so downstream consumers stay safe.
-  const lookupDom = editor.view.nodeDOM(anchorPos);
+  const lookupDom = isEditorReady(editor)
+    ? editor.view.nodeDOM(anchorPos)
+    : null;
   const lookupCellDom = lookupDom instanceof HTMLElement ? lookupDom : null;
   const [cellDom, setCellDom] = useState<HTMLElement | null>(lookupCellDom);
   const lastCellDomRef = useRef<HTMLElement | null>(lookupCellDom);

apps/client/src/features/editor/components/transclusion/transclusion-reference-view.tsx

@@ -105,6 +105,7 @@ function TransclusionReferenceBody({
         sourcePageId,
         transclusionId,
       });
+      if (editor.isDestroyed) return;
       const pos = getPos();
       if (typeof pos !== "number") return;
       const from = pos;

apps/client/src/features/editor/hooks/use-editor-scroll.ts

@@ -42,6 +42,10 @@ export const useEditorScroll = ({
         return;
       }
 
+      if (editor.isDestroyed) {
+        resolve(false);
+        return;
+      }
       const dom = editor.view.dom.querySelector(`[id="${targetId}"], [data-id="${targetId}"]`);
       if (dom) {
         dom.scrollIntoView({ behavior: 'smooth', block: 'start' });

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

@@ -458,7 +458,9 @@ export default function PageEditor({
             )}
           </div>
           <div
-            onClick={() => editor.commands.focus("end")}
+            onClick={() => {
+              if (editor && !editor.isDestroyed) editor.commands.focus("end");
+            }}
             style={{ paddingBottom: "20vh" }}
           ></div>
         </div>

apps/client/src/features/page-history/hooks/use-history-restore.tsx

@@ -42,6 +42,14 @@ export function useHistoryRestore() {
 
   const handleRestore = useCallback(() => {
     if (!activeHistoryData) return;
+    if (
+      !mainEditor ||
+      mainEditor.isDestroyed ||
+      !mainEditorTitle ||
+      mainEditorTitle.isDestroyed
+    ) {
+      return;
+    }
 
     mainEditorTitle
       .chain()