Skip to content

Commit

Permalink
fix: 🐛 emoji-filter-position (#802)
Browse files Browse the repository at this point in the history
  • Loading branch information
@iHaPBoy
iHaPBoy committed Nov 9, 2022
1 parent d2ca521 commit d9e442d
Show file tree
Hide file tree
Showing 5 changed files with 21 additions and 26 deletions.
35 changes: 17 additions & 18 deletions packages/plugin-emoji/src/filter/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ export const filter = (utils: ThemeUtils, maxListSize: number, twemojiOptions?:
},
twemojiOptions,
);
calculateNodePosition(view, dropDown, (selected, target, parent) => {
calculateNodePosition(view, dropDown, (_selected, target, parent) => {
const $editor = dropDown.parentElement;
if (!$editor) {
throw missingRootElement();
Expand All @@ -168,41 +168,40 @@ export const filter = (utils: ThemeUtils, maxListSize: number, twemojiOptions?:
left = 0;
}

const scrollbarWidth = $editor.offsetWidth - $editor.clientWidth;
const maxLeft = parent.width - scrollbarWidth - (target.width + 4);
if (left > maxLeft) {
left = maxLeft;
}

let direction: 'top' | 'bottom';
let maxHeight: number | undefined;
const selectedToTop = selected.top - parent.top;
const selectedToBottom = parent.height + parent.top - selected.bottom;
if (selectedToBottom >= target.height + 28) {
const startToTop = start.top - parent.top;
const startToBottom = parent.height + parent.top - start.bottom;
if (startToBottom >= target.height + 28) {
direction = 'bottom';
} else if (selectedToTop >= target.height + 28) {
} else if (startToTop >= target.height + 28) {
direction = 'top';
} else if (selectedToBottom >= selectedToTop) {
} else if (startToBottom >= startToTop) {
direction = 'bottom';
maxHeight = selectedToBottom - 28;
maxHeight = startToBottom - 28;
} else {
direction = 'top';
maxHeight = selectedToTop - 28;
maxHeight = startToTop - 28;
}
if (selectedToTop < 0 || selectedToBottom < 0) {
maxHeight = parent.height - selected.height - 28;
if (startToTop < 0 || startToBottom < 0) {
maxHeight = parent.height - (start.bottom - start.top) - 28;
if (maxHeight > target.height) {
maxHeight = undefined;
}
}

const top =
direction === 'top'
? selected.top - parent.top - (maxHeight ?? target.height) - 14 + $editor.scrollTop
: selected.bottom - parent.top + 14 + $editor.scrollTop;
? start.top - parent.top - (maxHeight ?? target.height) - 14 + $editor.scrollTop
: start.bottom - parent.top + 14 + $editor.scrollTop;

dropDown.style.maxHeight = maxHeight !== undefined && maxHeight > 0 ? `${maxHeight}px` : '';

const maxLeft = $editor.clientWidth - (dropDown.offsetWidth + 4);
if (left > maxLeft) {
left = maxLeft;
}

return [top, left];
});

Expand Down
3 changes: 1 addition & 2 deletions packages/plugin-tooltip/src/button-manager/calc-button-pos.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,7 @@ export const calcButtonPos = (buttons: HTMLElement, view: EditorView, isBottom:

if (left < 0) left = 0;

const scrollbarWidth = $editor.offsetWidth - $editor.clientWidth;
const maxLeft = parent.width - scrollbarWidth - (target.width + 4);
const maxLeft = $editor.clientWidth - (target.width + 4);
if (left > maxLeft) {
left = maxLeft;
}
Expand Down
3 changes: 1 addition & 2 deletions packages/preset-commonmark/src/mark/link.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,8 +128,7 @@ export const link = createMark<string, LinkOptions>((utils, options) => {

if (left < 0) left = 0;

const scrollbarWidth = $editor.offsetWidth - $editor.clientWidth;
const maxLeft = parent.width - scrollbarWidth - (target.width + 4);
const maxLeft = $editor.clientWidth - (target.width + 4);
if (left > maxLeft) {
left = maxLeft;
}
Expand Down
3 changes: 1 addition & 2 deletions packages/preset-gfm/src/table/operator-plugin/calc-pos.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,7 @@ export const calculatePosition = (view: EditorView, dom: HTMLElement) => {
left = 0;
}

const scrollbarWidth = $editor.offsetWidth - $editor.clientWidth;
const maxLeft = parent.width - scrollbarWidth - (target.width + 4);
const maxLeft = $editor.clientWidth - (target.width + 4);
if (left > maxLeft) {
left = maxLeft;
}
Expand Down
3 changes: 1 addition & 2 deletions packages/theme-pack-helper/src/renderer-preset/input-chip.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,7 @@ const calcInputPos = (view: EditorView, input: HTMLDivElement) => {

if (left < 0) left = 0;

const scrollbarWidth = $editor.offsetWidth - $editor.clientWidth;
const maxLeft = parent.width - scrollbarWidth - (target.width + 4);
const maxLeft = $editor.clientWidth - (target.width + 4);
if (left > maxLeft) {
left = maxLeft;
}
Expand Down

1 comment on commit d9e442d

@vercel
Copy link

@vercel vercel bot commented on d9e442d Nov 9, 2022

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

milkdown – ./

milkdown.vercel.app
milkdown.dev
www.milkdown.dev
milkdown-git-main-saul-mirone.vercel.app
milkdown-saul-mirone.vercel.app

Please sign in to comment.