@cyberyozh/text-editor 0.1.6 → 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.6",
+  "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

@@ -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,19 +142,27 @@ 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);
   };
 
@@ -165,8 +174,6 @@ function TiptapContent({
     });
   }, [content, editor]);
 
-  if (!editor) return null;
-
   const shouldBubbleMenuShow = ({ state }: { state: EditorState }) => {
     if (state.selection instanceof NodeSelection) {
       return false;
@@ -183,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}
@@ -210,44 +219,48 @@ function TiptapContent({
       </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 || ""}
+            />
+          )}
+        </>
       )}
     </>
   );

package/src/editor/handlers/dialog-handlers.ts

@@ -2,7 +2,11 @@ import type { Editor } from "@tiptap/react";
 
 import type { FigureAttrs, TiptapImageAttrs } from "../../types";
 
-export const createHandleImageAdd = (editor: Editor | null, closeDialogCommand: () => void) => {
+export const createHandleImageAdd = (
+  editor: Editor | null,
+  closeDialogCommand: () => void,
+  savedPos?: number
+) => {
   return (attrs: TiptapImageAttrs) => {
     if (!editor) return;
 
@@ -19,9 +23,27 @@ export const createHandleImageAdd = (editor: Editor | null, closeDialogCommand:
           tr.replaceWith($from.before(), $from.after(), node);
           return true;
         })
+        .scrollIntoView()
         .run();
     } else {
-      editor?.chain().focus().setFigure(attrs).run();
+      const insertPos = savedPos ?? state.selection.from;
+
+      editor
+        .chain()
+        .focus()
+        .command(({ tr, state }) => {
+          const $pos = state.doc.resolve(insertPos);
+          const figureNode = state.schema.nodes.figure.create({ ...attrs });
+
+          if ($pos.parent.type.name === "paragraph" && $pos.parent.textContent === "") {
+            tr.replaceWith($pos.before(), $pos.after(), figureNode);
+          } else {
+            tr.insert(insertPos, figureNode);
+          }
+          return true;
+        })
+        .scrollIntoView()
+        .run();
     }
     closeDialogCommand();
   };
@@ -40,30 +62,61 @@ export const createHandleImageEdit = (
   };
 };
 
-export const createHandleVideoAdd = (editor: Editor | null, closeDialogCommand: () => void) => {
+export const createHandleVideoAdd = (
+  editor: Editor | null,
+  closeDialogCommand: () => void,
+  savedPos?: number
+) => {
   return (url: string) => {
     if (!editor) return;
 
     const { state } = editor;
     const { $from } = state.selection;
+    const text = $from.parent.textContent;
 
-    editor
-      .chain()
-      .focus()
-      .command(({ tr }) => {
-        tr.replaceWith(
-          $from.before(),
-          $from.after(),
-          editor.schema.nodes.video.create({ src: url })
-        );
-        return true;
-      })
-      .run();
+    if (text.lastIndexOf("/") !== -1) {
+      editor
+        .chain()
+        .focus()
+        .command(({ tr }) => {
+          tr.replaceWith(
+            $from.before(),
+            $from.after(),
+            editor.schema.nodes.video.create({ src: url })
+          );
+          return true;
+        })
+        .scrollIntoView()
+        .run();
+    } else {
+      const insertPos = savedPos ?? state.selection.from;
+
+      editor
+        .chain()
+        .focus()
+        .command(({ tr, state }) => {
+          const $pos = state.doc.resolve(insertPos);
+          const videoNode = state.schema.nodes.video.create({ src: url });
+
+          if ($pos.parent.type.name === "paragraph" && $pos.parent.textContent === "") {
+            tr.replaceWith($pos.before(), $pos.after(), videoNode);
+          } else {
+            tr.insert(insertPos, videoNode);
+          }
+          return true;
+        })
+        .scrollIntoView()
+        .run();
+    }
     closeDialogCommand();
   };
 };
 
-export const createHandleLinkAdd = (editor: Editor | null, closeDialogCommand: () => void) => {
+export const createHandleLinkAdd = (
+  editor: Editor | null,
+  closeDialogCommand: () => void,
+  savedPos?: number
+) => {
   return (title: string, url: string) => {
     if (!editor) return;
 
@@ -81,32 +134,50 @@ export const createHandleLinkAdd = (editor: Editor | null, closeDialogCommand: (
         })
         .run();
     } else {
-      editor
-        .chain()
-        .focus()
-        .command(({ tr, state }) => {
-          const { $from } = state.selection;
-          const text = $from.parent.textContent;
-          const nodeStart = $from.start();
-          const beforeCursor = text.substring(0, $from.pos - nodeStart);
-          const slashIndex = beforeCursor.lastIndexOf("/");
+      const { state } = editor;
+      const { $from } = state.selection;
+      const text = $from.parent.textContent;
+      const nodeStart = $from.start();
+      const beforeCursor = text.substring(0, $from.pos - nodeStart);
+      const slashIndex = beforeCursor.lastIndexOf("/");
 
-          if (slashIndex !== -1) {
+      if (slashIndex !== -1) {
+        editor
+          .chain()
+          .focus()
+          .command(({ tr }) => {
             tr.delete(nodeStart + slashIndex, $from.pos);
-          }
-
-          return true;
-        })
-        .extendMarkRange("link")
-        .setLink({ href: url })
-        .insertContent(title)
-        .run();
+            return true;
+          })
+          .extendMarkRange("link")
+          .setLink({ href: url })
+          .insertContent(title)
+          .scrollIntoView()
+          .run();
+      } else {
+        const insertPos = savedPos ?? state.selection.from;
+        editor
+          .chain()
+          .focus()
+          .command(({ tr }) => {
+            const linkMark = editor.schema.marks.link.create({ href: url });
+            const textNode = editor.schema.text(title, [linkMark]);
+            tr.insert(insertPos, textNode);
+            return true;
+          })
+          .scrollIntoView()
+          .run();
+      }
     }
     closeDialogCommand();
   };
 };
 
-export const createHandleKatexAdd = (editor: Editor | null, closeDialogCommand: () => void) => {
+export const createHandleKatexAdd = (
+  editor: Editor | null,
+  closeDialogCommand: () => void,
+  savedPos?: number
+) => {
   return (latex: string, pos?: number) => {
     if (!editor) return;
 
@@ -132,9 +203,20 @@ export const createHandleKatexAdd = (editor: Editor | null, closeDialogCommand:
             tr.replaceRangeWith(deleteFrom, deleteTo, inlineMathNode);
             return true;
           })
+          .scrollIntoView()
           .run();
       } else {
-        editor.chain().insertInlineMath({ latex }).focus().run();
+        const insertPos = savedPos ?? state.selection.from;
+        editor
+          .chain()
+          .focus()
+          .command(({ tr, state }) => {
+            const inlineMathNode = state.schema.nodes.inlineMath.create({ latex });
+            tr.insert(insertPos, inlineMathNode);
+            return true;
+          })
+          .scrollIntoView()
+          .run();
       }
     }
 

package/src/extensions/views/components/index.ts

@@ -4,4 +4,5 @@ export { CopyableText } from "./copyable-text";
 export { CustomQuote, CustomQuoteText, CustomQuoteAuthor, CustomQuoteSign } from "./custom-quote";
 export { Figure } from "./figure";
 export { PromptHeader, PromptContent } from "./prompt";
+export { Table } from "./table";
 export { Video } from "./video";