@cyberyozh/text-editor 0.1.4 → 0.1.6

package/dist/styles/index.css

@@ -1889,6 +1889,14 @@
   outline: none;
   background-color: transparent;
 }
+.tiptap-content-wrapper.is-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.tiptap-content-wrapper.is-disabled .ProseMirror {
+  background-color: var(--tiptap-color-grey-1, #f5f5f5);
+}
 
 /* src/styles/editor/callout-menu.css */
 .tiptap__drag-handle-color-menu {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberyozh/text-editor",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Rich text editor library based on Tiptap for CyberYozh",
   "author": "CyberYozh",
   "license": "MIT",
@@ -42,10 +42,6 @@
     "release": "npm run build && changeset publish",
     "release:complete": "git add . && git commit -m \"chore: release v$(node -p \"require('./package.json').version\")\" && npm run release && git push --follow-tags"
   },
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  },
   "dependencies": {
     "@floating-ui/dom": "^1.7.4",
     "@tiptap/core": "^3.10.6",

package/src/editor/editor.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 import { EditorState, NodeSelection } from "@tiptap/pm/state";
 import { Slice } from "@tiptap/pm/model";
@@ -39,6 +39,11 @@ import { getTranslations, type SupportedLanguage } from "../utils/get-translatio
 
 interface TiptapProps {
   isEditable?: boolean;
+  /**
+   * When true, makes the editor completely disabled (non-editable with disabled styling)
+   * @default false
+   */
+  isDisabled?: boolean;
   content: string;
   handleChange?: (value: JSONContent) => void;
   /**
@@ -70,6 +75,7 @@ function TiptapContent({
   handleChange,
   imageHandlers,
   isEditable = true,
+  isDisabled = false,
   lang,
   error,
 }: TiptapProps) {
@@ -94,11 +100,11 @@ function TiptapContent({
 
   const editor = useEditor(
     {
-      editable: isEditable,
+      editable: isEditable && !isDisabled,
       extensions: getEditorExtensions({
         translations,
         suggestion: createSuggestions(translations, !!imageHandlers),
-        isEditable,
+        isEditable: isEditable && !isDisabled,
         getImageById: imageHandlers?.getImage,
         onKatexClick: (latex, pos) => {
           setKatexDialogContext({ latex, pos });
@@ -151,6 +157,14 @@ function TiptapContent({
     katexHandler(latex, katexDialogContext?.pos);
   };
 
+  useEffect(() => {
+    if (!editor || editor.isDestroyed) return;
+
+    editor.commands.setContent(safeContent, {
+      emitUpdate: false,
+    });
+  }, [content, editor]);
+
   if (!editor) return null;
 
   const shouldBubbleMenuShow = ({ state }: { state: EditorState }) => {
@@ -171,22 +185,28 @@ function TiptapContent({
 
   return (
     <>
-      <DragHandle editor={editor} />
-      {isEditable && <TableMenu editor={editor} />}
-      <BubbleMenu
-        shouldShow={shouldBubbleMenuShow}
-        editor={editor}
-        options={{ placement: "bottom", offset: 8, flip: true }}
-      >
-        <BubbleMenuContent
+      {!isDisabled && <DragHandle editor={editor} />}
+      {isEditable && !isDisabled && <TableMenu editor={editor} />}
+      {!isDisabled && (
+        <BubbleMenu
+          shouldShow={shouldBubbleMenuShow}
           editor={editor}
-          onLinkClick={(selectedText, url) => setLinkDialogContext({ selectedText, url })}
-        />
-      </BubbleMenu>
+          options={{ placement: "bottom", offset: 8, flip: true }}
+        >
+          <BubbleMenuContent
+            editor={editor}
+            onLinkClick={(selectedText, url) => setLinkDialogContext({ selectedText, url })}
+          />
+        </BubbleMenu>
+      )}
 
-      <div className={`tiptap-content-wrapper ${!!error ? "has-error" : ""}`}>
+      <div
+        className={`tiptap-content-wrapper ${!!error ? "has-error" : ""} ${
+          isDisabled ? "is-disabled" : ""
+        }`}
+      >
         <EditorContent editor={editor} />
-        {isEditable && <CharacterCountComponent editor={editor} />}
+        {isEditable && !isDisabled && <CharacterCountComponent editor={editor} />}
       </div>
       {!!error && <p className="tiptap-error-message">{error}</p>}
 

package/src/styles/editor/states.css

@@ -41,3 +41,14 @@
   outline: none;
   background-color: transparent;
 }
+
+/* Disabled state styles */
+.tiptap-content-wrapper.is-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.tiptap-content-wrapper.is-disabled .ProseMirror {
+  background-color: var(--tiptap-color-grey-1, #f5f5f5);
+}