diff --git a/src/components/Editor/Menu/Bubble/TableOption.jsx b/src/components/Editor/Menu/Bubble/TableOption.jsx
index 38f9b3f7..10ea6605 100644
--- a/src/components/Editor/Menu/Bubble/TableOption.jsx
+++ b/src/components/Editor/Menu/Bubble/TableOption.jsx
@@ -5,7 +5,7 @@ import { Check, Close } from "neetoicons";
import { Button, Dropdown } from "neetoui";
import { useTranslation } from "react-i18next";
-import { TABLE_ACTIONS } from "../Fixed/constants";
+import { tableActions } from "../Fixed/utils";
const TableOption = ({ editor, handleClose }) => {
const { t } = useTranslation();
@@ -65,8 +65,8 @@ const TableOption = ({ editor, handleClose }) => {
) : (
)}
diff --git a/src/components/Editor/Menu/Fixed/LinkAddPopOver.jsx b/src/components/Editor/Menu/Fixed/LinkAddPopOver.jsx
new file mode 100644
index 00000000..a194b952
--- /dev/null
+++ b/src/components/Editor/Menu/Fixed/LinkAddPopOver.jsx
@@ -0,0 +1,178 @@
+import React, { useState, useEffect, useRef } from "react";
+
+import { useOnClickOutside } from "neetocommons/react-utils";
+import { Button, Input } from "neetoui";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+
+import { validateAndFormatUrl } from "components/Editor/utils";
+import { URL_REGEXP } from "src/common/constants";
+import { isNilOrEmpty } from "utils/common";
+
+const LinkAddPopOver = ({ isAddLinkActive, setIsAddLinkActive, editor }) => {
+ const { from, to } = editor.state.selection;
+ const text = editor.state.doc.textBetween(from, to, "");
+
+ const [linkText, setLinkText] = useState(text);
+ const [linkUrl, setLinkUrl] = useState("");
+ const [error, setError] = useState("");
+ const [popoverPosition, setPopoverPosition] = useState({ top: 0, left: 0 });
+ const [arrowPosition, setArrowPosition] = useState({ top: 0, left: 0 });
+
+ const popOverRef = useRef(null);
+
+ const { t } = useTranslation();
+
+ const isLinkTextPresent = !isNilOrEmpty(linkText);
+ const isLinlUrlPresent = !isNilOrEmpty(linkUrl);
+ const isSubmitDisabled = !isLinkTextPresent || !isLinlUrlPresent;
+
+ const popoverStyle = {
+ display: "block",
+ position: "fixed",
+ top: popoverPosition.top,
+ left: popoverPosition.left,
+ transform: "translateY(52px) translateX(8px)",
+ };
+
+ const handleAddLink = () => {
+ const { state, dispatch } = editor.view;
+ const { from, to } = state.selection;
+ const formattedUrl = validateAndFormatUrl(linkUrl);
+
+ if (!URL_REGEXP.test(formattedUrl)) {
+ setError(t("error.invalidUrl"));
+
+ return;
+ }
+ const attrs = { href: formattedUrl };
+
+ const linkMark = state.schema.marks.link.create(attrs);
+ const linkTextWithMark = state.schema.text(linkText, [linkMark]);
+
+ const tr = state.tr.replaceWith(from, to, linkTextWithMark);
+ dispatch(tr);
+ removePopover();
+ };
+
+ const removePopover = () => {
+ editor.view.focus();
+ setIsAddLinkActive(false);
+ };
+
+ const handleKeyDown = e => {
+ e.stopPropagation();
+ if (e.key === "Enter") {
+ e.preventDefault();
+ handleAddLink();
+ } else if (e.key === "Escape") {
+ removePopover();
+ }
+ };
+
+ const updatePopoverPosition = () => {
+ if (popOverRef.current) {
+ const newPos = editor.view.coordsAtPos(
+ editor.view.state.selection.$to.pos
+ );
+
+ setArrowPosition({
+ top: `${newPos.top + 20}px`,
+ left: `${newPos.left - 10}px`,
+ });
+
+ const popoverRect = popOverRef.current?.getBoundingClientRect();
+
+ const screenWidth = window.innerWidth;
+ const screenHeight = window.innerHeight;
+
+ const maxLeft = screenWidth - popoverRect.width;
+ const maxTop = screenHeight - popoverRect.height - 50;
+
+ const adjustedLeft = newPos?.left
+ ? Math.min(newPos.left - 50, maxLeft)
+ : 0;
+ const adjustedTop = newPos?.top ? Math.min(newPos.top - 22, maxTop) : 0;
+
+ setPopoverPosition({
+ top: `${adjustedTop}px`,
+ left: `${adjustedLeft}px`,
+ });
+ }
+ };
+
+ useOnClickOutside(popOverRef, removePopover);
+
+ useEffect(() => {
+ if (editor && isAddLinkActive) {
+ updatePopoverPosition();
+ }
+ window.addEventListener("resize", removePopover);
+ window.addEventListener("wheel", removePopover);
+
+ return () => {
+ window.removeEventListener("resize", removePopover);
+ window.removeEventListener("wheel", removePopover);
+ };
+ }, []);
+
+ return isAddLinkActive
+ ? createPortal(
+ <>
+
+
+ ,
+ document.body
+ )
+ : null;
+};
+
+export default LinkAddPopOver;
diff --git a/src/components/Editor/Menu/Fixed/LinkOption.jsx b/src/components/Editor/Menu/Fixed/LinkOption.jsx
deleted file mode 100644
index e03d6c77..00000000
--- a/src/components/Editor/Menu/Fixed/LinkOption.jsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import React, { useEffect, useState, useRef } from "react";
-
-import { Link } from "neetoicons";
-import { Button, Dropdown, Input } from "neetoui";
-import { min } from "ramda";
-import { useTranslation } from "react-i18next";
-
-import { URL_REGEXP } from "common/constants";
-
-const { Menu } = Dropdown;
-
-const LinkOption = ({ editor, tooltipContent, menuRef }) => {
- const [error, setError] = useState("");
- const [urlString, setUrlString] = useState("");
- const [isOpen, setIsOpen] = useState(false);
-
- const { t } = useTranslation();
-
- const linkOptionRef = useRef(null);
-
- const isActive = editor.isActive("link");
-
- const handleDropDownClick = () => {
- setUrlString(editor.getAttributes("link").href);
- setIsOpen(open => !open);
- };
-
- const handleClose = () => {
- setIsOpen(false);
- setUrlString("");
- setError("");
- };
-
- const handleKeyDown = event => {
- if (event.key === "Escape") {
- handleClose();
- } else if (event.key === "Enter") {
- handleLink();
- }
- };
-
- const handleLink = () => {
- if (URL_REGEXP.test(urlString)) {
- editor
- .chain()
- .focus()
- .extendMarkRange("link")
- .setLink({ href: urlString })
- .run();
- handleClose();
- } else {
- setError(t("error.invalidUrl"));
- }
- };
-
- const handleUnlink = () => {
- editor.chain().focus().extendMarkRange("link").unsetLink().run();
- setUrlString("");
- handleClose();
- };
-
- const handleWidthChange = () => {
- if (!linkOptionRef.current) return;
-
- linkOptionRef.current.style.width = "auto";
- linkOptionRef.current.style.width = `${min(
- 550,
- min(
- menuRef.current?.offsetWidth * 0.5,
- linkOptionRef.current?.scrollWidth
- )
- )}px`;
- };
-
- useEffect(() => {
- editor.commands.setHighlightInternal("#ACCEF7");
-
- if (!isOpen) {
- editor.commands.unsetHighlightInternal();
- editor.commands.removeEmptyTextStyle();
- }
- }, [isOpen, editor]);
-
- useEffect(() => {
- isOpen && handleWidthChange();
- }, [linkOptionRef.current]);
-
- return (
-
-
-
- );
-};
-
-export default LinkOption;
diff --git a/src/components/Editor/Menu/Fixed/TableActions.jsx b/src/components/Editor/Menu/Fixed/TableActions.jsx
index 91dc89e3..a5d66b90 100644
--- a/src/components/Editor/Menu/Fixed/TableActions.jsx
+++ b/src/components/Editor/Menu/Fixed/TableActions.jsx
@@ -3,7 +3,7 @@ import React from "react";
import { Settings } from "neetoicons";
import { Button, Dropdown } from "neetoui";
-import { TABLE_ACTIONS } from "./constants";
+import { tableActions } from "./utils";
const { Menu } = Dropdown;
@@ -25,10 +25,10 @@ const TableActions = ({ editor, tooltipContent }) => {
}}
>