@cyberyozh/text-editor 0.1.5 → 0.1.7

package/dist/styles/index.css

@@ -81,7 +81,7 @@
 /* src/editor/components/common-modal/common-modal.css */
 .modal-overlay {
   display: flex;
-  z-index: 10000;
+  z-index: 10001;
   position: fixed;
   top: 0;
   right: 0;
@@ -102,6 +102,7 @@
   }
 }
 .modal-content {
+  z-index: 10002;
   position: relative;
   width: 100%;
   max-width: 500px;
@@ -879,6 +880,10 @@
   border: none;
   outline: none;
   background: transparent;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 140%;
+  letter-spacing: -0.36px;
   list-style: none;
   cursor: pointer;
   transition: all 150ms ease-in-out;
@@ -948,11 +953,13 @@
 }
 .myth-reality-block-content p:first-child {
   margin-bottom: 8px;
-  font-weight: 600;
+  font-weight: 600 !important;
 }
+.myth-reality-block-content p,
 .myth-reality-block-content ul p,
 .myth-reality-block-content li p {
   margin-bottom: 0;
+  font-weight: 400;
   font-size: var(--tiptap-font-size);
 }
 
@@ -985,6 +992,11 @@
   flex-direction: column;
   max-width: 700px;
   margin: 0 auto 16px;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 140%;
+  letter-spacing: -0.36px;
 }
 [data-custom-quote-text] .is-empty::before {
   position: absolute;
@@ -1070,18 +1082,12 @@
 }
 .callout-node {
   display: flex;
+  align-items: baseline;
   margin: 32px 0;
   padding: 16px;
   gap: 10px;
   border-radius: 8px;
 }
-.callout-node:has(.callout-content h2),
-.callout-node:has(.callout-content h3),
-.callout-node:has(.callout-content h4),
-.callout-node:has(.callout-content h5),
-.callout-node:has(.callout-content h6) {
-  align-items: baseline;
-}
 .callout-node p {
   font-size: 16px;
   line-height: 22px;
@@ -1134,6 +1140,8 @@
 .callout-content-wrapper {
   flex: 1;
   min-width: 0;
+  font-size: var(--tiptap-font-size);
+  line-height: 1;
 }
 .callout-content {
   color: inherit;
@@ -1226,6 +1234,7 @@
   flex: 1;
   max-width: 50%;
   color: var(--tiptap-code-block-text);
+  font-size: 14px;
   font-family: var(--tiptap-code-block-font-family);
 }
 .tiptap-code-block-copy-button {
@@ -1305,8 +1314,11 @@
   justify-content: space-between;
   margin-bottom: 16px;
   gap: 8px;
+  font-style: normal;
   font-weight: 600;
-  font-size: var(--tiptap-prompt-header-font-size);
+  font-size: var(--tiptap-font-size);
+  line-height: 140%;
+  letter-spacing: -0.36px;
 }
 .prompt-content-wrapper {
   display: flex;
@@ -1416,9 +1428,12 @@
 }
 
 /* src/styles/extensions/commands-list.css */
+.react-renderer:has(.commands-list-container) {
+  z-index: 10000;
+}
 .commands-list-container {
   display: flex;
-  z-index: 50;
+  position: relative;
   flex-direction: column;
   width: 280px;
   max-height: 300px;
@@ -1500,6 +1515,7 @@
   --tiptap-color-link: #0059df;
   --tiptap-color-primary-error: #f04438;
   --tiptap-color-border: #f2f4f7;
+  --tiptap-color-bg-disabled: #f7f7f8;
   --tiptap-color-divider: #aaabb7;
   --tiptap-color-text-disabled: #aaabb7;
   --tiptap-color-text-placeholder: #aaabb7;
@@ -1546,19 +1562,21 @@
 .tiptap-content-wrapper {
   position: relative;
   margin: 0 !important;
-}
-.tiptap {
   padding: var(--tiptap-spacing);
   border: 1px solid var(--tiptap-color-border);
   border-radius: var(--tiptap-radius);
   font-size: var(--tiptap-font-size);
   font-family: var(--tiptap-font-family);
 }
-.tiptap:focus {
+.tiptap-content-wrapper:focus {
   border-color: var(--tiptap-color-primary-light);
   outline: none;
 }
-.tiptap-content-wrapper.has-error .tiptap {
+.tiptap-content-wrapper .ProseMirror {
+  border: none;
+  outline: none;
+}
+.tiptap-content-wrapper.has-error {
   border-color: var(--tiptap-color-primary-error);
 }
 .tiptap-error-message {
@@ -1583,10 +1601,10 @@
   font-weight: 400;
   font-size: var(--tiptap-font-size);
   line-height: 140%;
-  letter-spacing: 0;
+  letter-spacing: normal;
 }
 .tiptap > * {
-  letter-spacing: 0;
+  letter-spacing: normal;
 }
 .tiptap p:not(:last-child),
 .tiptap ul:not(:last-child),
@@ -1594,6 +1612,12 @@
 .tiptap blockquote:not(:last-child) {
   margin-bottom: var(--tiptap-spacing);
 }
+.tiptap h1 {
+  font-weight: 600;
+  font-size: 40px;
+  line-height: 110%;
+  letter-spacing: 0;
+}
 .tiptap h2 {
   font-weight: 600;
   font-size: 36px;
@@ -1645,6 +1669,7 @@
 .tiptap ul,
 .tiptap ol {
   padding-left: 32px;
+  font-size: var(--tiptap-font-size);
 }
 .tiptap ul:not(:last-child),
 .tiptap ol:not(:last-child),
@@ -1890,12 +1915,13 @@
   background-color: transparent;
 }
 .tiptap-content-wrapper.is-disabled {
-  opacity: 0.6;
+  padding: var(--tiptap-spacing);
   cursor: not-allowed;
+  opacity: 0.6;
   pointer-events: none;
 }
-.tiptap-content-wrapper.is-disabled .ProseMirror {
-  background-color: var(--tiptap-color-grey-1, #f5f5f5);
+.tiptap-content-wrapper.is-disabled {
+  background-color: var(--tiptap-color-bg-disabled);
 }
 
 /* src/styles/editor/callout-menu.css */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberyozh/text-editor",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Rich text editor library based on Tiptap for CyberYozh",
   "author": "CyberYozh",
   "license": "MIT",
@@ -42,6 +42,10 @@
     "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/commands/items.ts

@@ -187,7 +187,7 @@ export const getCommandItems = (
         .focus()
         .insertContent({
           type: "callout",
-          attrs: { type: "", bgColor: "#F7F7F8" },
+          attrs: { type: "", bgColor: "#F7F7F8", emoji: "callout-info" },
           content: [
             {
               type: "paragraph",

package/src/editor/components/common-modal/common-modal.css

@@ -1,6 +1,6 @@
 .modal-overlay {
   display: flex;
-  z-index: 10000;
+  z-index: 10001;
   position: fixed;
   top: 0;
   right: 0;
@@ -23,6 +23,7 @@
 }
 
 .modal-content {
+  z-index: 10002;
   position: relative;
   width: 100%;
   max-width: 500px;

package/src/editor/context/dialog-command.tsx

@@ -2,8 +2,6 @@
 
 import { createContext, useContext, useState, ReactNode } from "react";
 
-import type { Editor } from "@tiptap/react";
-
 export type DialogCommandType = "image" | "video" | "link" | "katex";
 
 interface DialogCommandContextType {

package/src/editor/controls/bubble-menu-content.tsx

@@ -68,7 +68,6 @@ export const BubbleMenuContent = ({ editor, onLinkClick }: Props) => {
   } = useEditorState({
     editor,
     selector: (ctx) => {
-      if (!editor) return {};
       return {
         canUndo: ctx.editor.can().undo(),
         canRedo: ctx.editor.can().redo(),
@@ -113,7 +112,12 @@ export const BubbleMenuContent = ({ editor, onLinkClick }: Props) => {
   };
 
   return (
-    <div className={`bubble-menu ${textColor || highlightColor ? "hide-text-selection" : ""}`}>
+    <div
+      className={`bubble-menu ${textColor || highlightColor ? "hide-text-selection" : ""}`}
+      onMouseDown={(e) => {
+        e.preventDefault();
+      }}
+    >
       <div className="tiptap-controls-group">
         <button
           className="tiptap-control-button"

package/src/editor/controls/commands-list.tsx

@@ -78,7 +78,10 @@ export const CommandsList = forwardRef<
     if (item) {
       if (item.dialogCommand) {
         openDialogCommand(item.dialogCommand);
+        // Also call command to ensure menu closes
+        command(item);
       } else {
+        console.log("open video");
         command(item);
       }
     }
@@ -98,6 +101,10 @@ export const CommandsList = forwardRef<
     <div
       ref={listRef}
       className="commands-list-container"
+      onMouseDown={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
     >
       {items.map((item, index) => (
         <button

package/src/editor/dialogs/add-video-dialog/add-video-dialog.tsx

@@ -19,11 +19,7 @@ const SUPPORTED_PLATFORMS = {
   [VideoHosting.VK]: "VK",
 };
 
-export const AddVideoDialog = ({
-  open,
-  onClose,
-  onVideoAdd,
-}: AddVideoDialogProps) => {
+export const AddVideoDialog = ({ open, onClose, onVideoAdd }: AddVideoDialogProps) => {
   const translations = useTiptapTranslations();
   const [url, setUrl] = useState("");
   const [error, setError] = useState<string>("");
@@ -112,6 +108,7 @@ export const AddVideoDialog = ({
           <input
             ref={urlInputRef}
             id="video-url"
+            autoComplete="off"
             type="text"
             className="video-dialog-input"
             placeholder={translations.videoUpload.urlPlaceholder}

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";
@@ -87,6 +87,7 @@ function TiptapContent({
     attrs: FigureAttrs;
     pos?: number;
   } | null>(null);
+  const [savedDialogCursorPos, setSavedDialogCursorPos] = useState<number | undefined>(undefined);
   const { activeDialog, closeDialogCommand, openDialogCommand } = useDialogCommand();
   const translations = useTiptapTranslations();
 
@@ -141,23 +142,37 @@ function TiptapContent({
     [lang]
   );
 
+  useEffect(() => {
+    if (activeDialog && editor && !editor.isDestroyed) {
+      const pos = editor.state.selection.from;
+      setSavedDialogCursorPos(pos);
+    }
+  }, [activeDialog, editor]);
+
   const handleCloseDialog = () => {
     setLinkDialogContext(null);
     setKatexDialogContext(null);
     setEditFigureContext(null);
+    setSavedDialogCursorPos(undefined);
     closeDialogCommand();
   };
 
-  const handleImageAdd = createHandleImageAdd(editor, handleCloseDialog);
+  const handleImageAdd = createHandleImageAdd(editor, handleCloseDialog, savedDialogCursorPos);
   const handleImageEdit = createHandleImageEdit(editor, handleCloseDialog, editFigureContext?.pos);
-  const handleVideoAdd = createHandleVideoAdd(editor, handleCloseDialog);
-  const handleLinkAdd = createHandleLinkAdd(editor, handleCloseDialog);
+  const handleVideoAdd = createHandleVideoAdd(editor, handleCloseDialog, savedDialogCursorPos);
+  const handleLinkAdd = createHandleLinkAdd(editor, handleCloseDialog, savedDialogCursorPos);
   const handleKatexAdd = (latex: string) => {
-    const katexHandler = createHandleKatexAdd(editor, handleCloseDialog);
+    const katexHandler = createHandleKatexAdd(editor, handleCloseDialog, savedDialogCursorPos);
     katexHandler(latex, katexDialogContext?.pos);
   };
 
-  if (!editor) return null;
+  useEffect(() => {
+    if (!editor || editor.isDestroyed) return;
+
+    editor.commands.setContent(safeContent, {
+      emitUpdate: false,
+    });
+  }, [content, editor]);
 
   const shouldBubbleMenuShow = ({ state }: { state: EditorState }) => {
     if (state.selection instanceof NodeSelection) {
@@ -175,11 +190,13 @@ function TiptapContent({
     return true;
   };
 
+  if (!editor) return null;
+
   return (
     <>
-      {!isDisabled && <DragHandle editor={editor} />}
+      {<DragHandle editor={editor} />}
       {isEditable && !isDisabled && <TableMenu editor={editor} />}
-      {!isDisabled && (
+      {isEditable && !isDisabled && (
         <BubbleMenu
           shouldShow={shouldBubbleMenuShow}
           editor={editor}
@@ -192,50 +209,58 @@ function TiptapContent({
         </BubbleMenu>
       )}
 
-      <div className={`tiptap-content-wrapper ${!!error ? "has-error" : ""} ${isDisabled ? "is-disabled" : ""}`}>
+      <div
+        className={`tiptap-content-wrapper ${!!error ? "has-error" : ""} ${
+          isDisabled ? "is-disabled" : ""
+        }`}
+      >
         <EditorContent editor={editor} />
         {isEditable && !isDisabled && <CharacterCountComponent editor={editor} />}
       </div>
       {!!error && <p className="tiptap-error-message">{error}</p>}
 
-      {activeDialog === "image" && isEditable && (
-        <ImageDialog
-          open={true}
-          onClose={handleCloseDialog}
-          onImageAdd={handleImageAdd}
-          onImageEdit={handleImageEdit}
-          uploadHandler={imageHandlers?.upload}
-          getImageById={imageHandlers?.getImage}
-          initialAttrs={editFigureContext?.attrs || undefined}
-          mode={editFigureContext ? "edit" : "add"}
-        />
-      )}
+      {isEditable && (
+        <>
+          {activeDialog === "image" && (
+            <ImageDialog
+              open={true}
+              onClose={handleCloseDialog}
+              onImageAdd={handleImageAdd}
+              onImageEdit={handleImageEdit}
+              uploadHandler={imageHandlers?.upload}
+              getImageById={imageHandlers?.getImage}
+              initialAttrs={editFigureContext?.attrs || undefined}
+              mode={editFigureContext ? "edit" : "add"}
+            />
+          )}
 
-      {activeDialog === "link" && (
-        <AddLinkDialog
-          open={true}
-          onClose={handleCloseDialog}
-          onLinkAdd={handleLinkAdd}
-          initialTitle={linkDialogContext?.selectedText || ""}
-          initialUrl={linkDialogContext?.url || ""}
-        />
-      )}
+          {activeDialog === "link" && (
+            <AddLinkDialog
+              open={true}
+              onClose={handleCloseDialog}
+              onLinkAdd={handleLinkAdd}
+              initialTitle={linkDialogContext?.selectedText || ""}
+              initialUrl={linkDialogContext?.url || ""}
+            />
+          )}
 
-      {activeDialog === "video" && (
-        <AddVideoDialog
-          open={true}
-          onClose={handleCloseDialog}
-          onVideoAdd={handleVideoAdd}
-        />
-      )}
+          {activeDialog === "video" && (
+            <AddVideoDialog
+              open={true}
+              onClose={handleCloseDialog}
+              onVideoAdd={handleVideoAdd}
+            />
+          )}
 
-      {activeDialog === "katex" && (
-        <AddKatexDialog
-          open={true}
-          onClose={handleCloseDialog}
-          onKatexAdd={handleKatexAdd}
-          initialContent={katexDialogContext?.latex || ""}
-        />
+          {activeDialog === "katex" && (
+            <AddKatexDialog
+              open={true}
+              onClose={handleCloseDialog}
+              onKatexAdd={handleKatexAdd}
+              initialContent={katexDialogContext?.latex || ""}
+            />
+          )}
+        </>
       )}
     </>
   );