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);
             }}
           >