(null);
-
- const handleMouseEnter = () => {
- if (timeoutRef.current) {
- clearTimeout(timeoutRef.current);
- }
-
- const rect = parent.getBoundingClientRect();
- setPopupPosition({
- x: rect.left + rect.width / 2,
- y: rect.top - 8,
- });
- setShowPopup(true);
- };
-
- const handleMouseLeave = (e: MouseEvent) => {
- const relatedTarget = e.relatedTarget as HTMLElement;
- if (relatedTarget && popupRef.current?.contains(relatedTarget)) {
- return;
- }
-
- timeoutRef.current = setTimeout(() => {
- setShowPopup(false);
- }, 150);
- };
-
- const handlePopupMouseEnter = () => {
- if (timeoutRef.current) {
- clearTimeout(timeoutRef.current);
- }
- };
-
- const handlePopupMouseLeave = () => {
- timeoutRef.current = setTimeout(() => {
- setShowPopup(false);
- }, 100);
- };
-
- useEffect(() => {
- parent.addEventListener("mouseenter", handleMouseEnter);
- parent.addEventListener("mouseleave", handleMouseLeave);
- parent.style.cursor = "pointer";
-
- return () => {
- parent.removeEventListener("mouseenter", handleMouseEnter);
- parent.removeEventListener("mouseleave", handleMouseLeave);
- if (timeoutRef.current) {
- clearTimeout(timeoutRef.current);
- }
- };
- }, []);
-
- if (!showPopup) return null;
-
- return ReactDOM.createPortal(
-
-
,
- document.body,
- );
-};
-
export const renderNodeTagPopupButton = (
parent: HTMLSpanElement,
discourseNodes: DiscourseNode[],
@@ -118,8 +15,6 @@ export const renderNodeTagPopupButton = (
if (parent.dataset.attributeButtonRendered === "true") return;
parent.dataset.attributeButtonRendered = "true";
- const isInTable = !!parent.closest("td.relative");
- const isInEmbed = !!parent.closest(".roamjs-query-embed");
const textContent = parent.textContent?.trim() || "";
const tagAttr = parent.getAttribute("data-tag") || textContent;
@@ -136,80 +31,65 @@ export const renderNodeTagPopupButton = (
const rawBlockText = blockUid ? getTextByBlockUid(blockUid) : "";
const cleanedBlockText = rawBlockText.replace(textContent, "").trim();
- if (isInTable && isInEmbed) {
- const reactContainer = document.createElement("div");
- reactContainer.style.display = "none";
- parent.appendChild(reactContainer);
-
- ReactDOM.render(
- ,
- reactContainer,
- );
- } else {
- const wrapper = document.createElement("span");
- wrapper.style.position = "relative";
- wrapper.style.display = "inline-block";
- parent.parentNode?.insertBefore(wrapper, parent);
- wrapper.appendChild(parent);
-
- const reactRoot = document.createElement("span");
- reactRoot.style.position = "absolute";
- reactRoot.style.top = "0";
- reactRoot.style.left = "0";
- reactRoot.style.width = "100%";
- reactRoot.style.height = "100%";
- reactRoot.style.pointerEvents = "none";
- reactRoot.style.zIndex = "10";
- wrapper.appendChild(reactRoot);
-
- ReactDOM.render(
- {
- renderCreateNodeDialog({
- onClose: () => {},
- defaultNodeTypeUid: matchedNode.type,
- extensionAPI,
- sourceBlockUid: blockUid,
- initialTitle: cleanedBlockText,
- });
- }}
- text={`Create ${matchedNode.text}`}
- />
- }
- target={
-
- }
- interactionKind="hover"
- usePortal={true}
- portalClassName="dg-popover"
- position={Position.TOP}
- modifiers={{
- offset: {
- offset: "0, 10",
- },
- arrow: {
- enabled: false,
- },
- }}
- />,
- reactRoot,
- );
- }
+ const wrapper = document.createElement("span");
+ wrapper.style.position = "relative";
+ wrapper.style.display = "inline-block";
+ parent.parentNode?.insertBefore(wrapper, parent);
+ wrapper.appendChild(parent);
+
+ const reactRoot = document.createElement("span");
+ reactRoot.style.position = "absolute";
+ reactRoot.style.top = "0";
+ reactRoot.style.left = "0";
+ reactRoot.style.width = "100%";
+ reactRoot.style.height = "100%";
+ reactRoot.style.pointerEvents = "none";
+ reactRoot.style.zIndex = "10";
+ wrapper.appendChild(reactRoot);
+
+ const rect = parent.getBoundingClientRect();
+
+ ReactDOM.render(
+ {
+ renderCreateNodeDialog({
+ onClose: () => {},
+ defaultNodeTypeUid: matchedNode.type,
+ extensionAPI,
+ sourceBlockUid: blockUid,
+ initialTitle: cleanedBlockText,
+ });
+ }}
+ text={`Create ${matchedNode.text}`}
+ />
+ }
+ target={
+
+ }
+ interactionKind="hover"
+ usePortal={true}
+ portalClassName="dg-popover"
+ position={Position.TOP}
+ modifiers={{
+ offset: {
+ offset: "0, 10",
+ },
+ arrow: {
+ enabled: false,
+ },
+ }}
+ />,
+ reactRoot,
+ );
};