Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WEB-2528] fix: side menu rendering even if created already #5687

Merged
merged 2 commits into from
Sep 24, 2024
Merged

[WEB-2528] fix: side menu rendering even if created already #5687

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bd379f3
fix: side menu rendering even if created already
Palanikannan1437 Sep 24, 2024
a3a3953
fix: drag handles position
Palanikannan1437 Sep 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/editor/src/core/extensions/custom-image/components/image-block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ export const CustomImageBlock: React.FC<CustomImageNodeViewProps> = (props) => {
src={src}
width={size.width}
height={size.height}
className={cn("block rounded-md", {
className={cn("image-component block rounded-md", {
hidden: isShimmerVisible,
"read-only-image": !editor.isEditable,
})}
Expand Down
9 changes: 7 additions & 2 deletions packages/editor/src/core/extensions/side-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,11 @@ const SideMenu = (options: SideMenuPluginProps) => {
hideSideMenu();
view?.dom.parentElement?.appendChild(editorSideMenu);
// side menu elements' initialization
if (handlesConfig.ai) {
if (handlesConfig.ai && !editorSideMenu.querySelector("#ai-handle")) {
aiHandleView(view, editorSideMenu);
}
if (handlesConfig.dragDrop) {

if (handlesConfig.dragDrop && !editorSideMenu.querySelector("#drag-handle")) {
dragHandleView(view, editorSideMenu);
}

Expand Down Expand Up @@ -113,6 +114,10 @@ const SideMenu = (options: SideMenuPluginProps) => {
rect.top += (lineHeight - 20) / 2;
rect.top += paddingTop;

if (handlesConfig.ai) {
rect.left -= 20;
}

if (node.parentElement?.parentElement?.matches("td") || node.parentElement?.parentElement?.matches("th")) {
if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
rect.left -= 5;
Expand Down
37 changes: 2 additions & 35 deletions packages/editor/src/core/plugins/ai-handle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,45 +2,12 @@ import { NodeSelection } from "@tiptap/pm/state";
import { EditorView } from "@tiptap/pm/view";
// extensions
import { SideMenuHandleOptions, SideMenuPluginProps } from "@/extensions";
// plugins
import { nodeDOMAtCoords } from "@/plugins/drag-handle";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Remove unused import nodeDOMAtCoords

The nodeDOMAtCoords function is imported but not used in this file after the recent changes. To maintain clean code and avoid potential confusion, it's recommended to remove unused imports.

Apply this diff to remove the unused import:

-import { nodeDOMAtCoords } from "@/plugins/drag-handle";
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
import { nodeDOMAtCoords } from "@/plugins/drag-handle";


const sparklesIcon =
'<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>';

const nodeDOMAtCoords = (coords: { x: number; y: number }) => {
const elements = document.elementsFromPoint(coords.x, coords.y);
const generalSelectors = [
"li",
"p:not(:first-child)",
".code-block",
"blockquote",
"img",
"h1, h2, h3, h4, h5, h6",
"[data-type=horizontalRule]",
".table-wrapper",
".issue-embed",
].join(", ");

for (const elem of elements) {
if (elem.matches("p:first-child") && elem.parentElement?.matches(".ProseMirror")) {
return elem;
}

// if the element is a <p> tag that is the first child of a td or th
if (
(elem.matches("td > p:first-child") || elem.matches("th > p:first-child")) &&
elem?.textContent?.trim() !== ""
) {
return elem; // Return only if p tag is not empty in td or th
}

// apply general selector
if (elem.matches(generalSelectors)) {
return elem;
}
}
return null;
};

const nodePosAtDOM = (node: Element, view: EditorView, options: SideMenuPluginProps) => {
const boundingRect = node.getBoundingClientRect();

Expand Down
22 changes: 1 addition & 21 deletions packages/editor/src/core/plugins/drag-handle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,39 +37,19 @@ export const nodeDOMAtCoords = (coords: { x: number; y: number }) => {
"p:not(:first-child)",
".code-block",
"blockquote",
"img",
"h1, h2, h3, h4, h5, h6",
"[data-type=horizontalRule]",
".table-wrapper",
".issue-embed",
".image-component",
".image-upload-component",
].join(", ");

const hasNestedImg = (el: Element): boolean => {
if (el.tagName.toLowerCase() === "img") return true;
// @ts-expect-error todo
for (const child of el.children) {
if (hasNestedImg(child)) return true;
}
return false;
};

for (const elem of elements) {
const elemHasNestedImg = hasNestedImg(elem);
if (elem.matches("p:first-child") && elem.parentElement?.matches(".ProseMirror")) {
return elem;
}

// if the element is a <p> tag and has a nested img i.e. the new image
// component
if (elem.matches("p") && elemHasNestedImg) {
return null;
}

if (elem.matches("div") && elemHasNestedImg) {
return elem;
}

// if the element is a <p> tag that is the first child of a td or th
if (
(elem.matches("td > p:first-child") || elem.matches("th > p:first-child")) &&
Expand Down
1 change: 0 additions & 1 deletion packages/editor/src/styles/drag-drop.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
align-items: center;
opacity: 1;
transition: opacity 0.2s ease 0.2s;
transform: translateX(-50%);

&.side-menu-hidden {
opacity: 0;
Expand Down
Loading