Remove duplicate mixins
This commit is contained in:
@@ -1,67 +0,0 @@
|
||||
import { onMounted, onBeforeUnmount } from 'vue';
|
||||
import { isActiveElementTypeable, isEscape } from '../helpers/KeyboardHelpers';
|
||||
import { createKeybindingsHandler } from 'tinykeys';
|
||||
|
||||
// Store that stores the handler globally, and only gets reset on reload
|
||||
const taggedHandlers = [];
|
||||
|
||||
/**
|
||||
* Composable for handling keyboard event listeners.
|
||||
* @returns {Object} An object containing methods for managing keyboard event listeners.
|
||||
*/
|
||||
export function useKeyboardEventListener() {
|
||||
let handlerIndex = -1;
|
||||
|
||||
const wrapEventsInKeybindingsHandler = events => {
|
||||
const wrappedEvents = {};
|
||||
Object.keys(events).forEach(eventName => {
|
||||
wrappedEvents[eventName] = keydownWrapper(events[eventName]);
|
||||
});
|
||||
return wrappedEvents;
|
||||
};
|
||||
|
||||
const keydownWrapper = handler => {
|
||||
return e => {
|
||||
const actionToPerform =
|
||||
typeof handler === 'function' ? handler : handler.action;
|
||||
const allowOnFocusedInput =
|
||||
typeof handler === 'function' ? false : handler.allowOnFocusedInput;
|
||||
|
||||
const isTypeable = isActiveElementTypeable(e);
|
||||
|
||||
if (isTypeable) {
|
||||
if (isEscape(e)) {
|
||||
e.target.blur();
|
||||
}
|
||||
|
||||
if (!allowOnFocusedInput) return;
|
||||
}
|
||||
|
||||
actionToPerform(e);
|
||||
};
|
||||
};
|
||||
|
||||
const addEventHandler = events => {
|
||||
const wrappedEvents = wrapEventsInKeybindingsHandler(events);
|
||||
const keydownHandler = createKeybindingsHandler(wrappedEvents);
|
||||
handlerIndex = taggedHandlers.push(keydownHandler) - 1;
|
||||
document.addEventListener('keydown', keydownHandler);
|
||||
};
|
||||
|
||||
const removeEventHandler = () => {
|
||||
if (handlerIndex !== -1) {
|
||||
const handlerToRemove = taggedHandlers[handlerIndex];
|
||||
document.removeEventListener('keydown', handlerToRemove);
|
||||
handlerIndex = -1;
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
removeEventHandler();
|
||||
});
|
||||
|
||||
return {
|
||||
addEventHandler,
|
||||
removeEventHandler,
|
||||
};
|
||||
}
|
||||
@@ -1,89 +0,0 @@
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
import { useKeyboardEventListener } from './useKeyboardEventListener';
|
||||
|
||||
/**
|
||||
* Composable for handling keyboard-based mention selection.
|
||||
* @param {Object} options - Configuration options.
|
||||
* @param {Array} options.items - The list of items to select from.
|
||||
* @param {Function} options.onSelect - Callback function when an item is selected.
|
||||
* @param {Function} options.adjustScroll - Function to adjust scroll position.
|
||||
* @returns {Object} An object containing methods and state for mention selection.
|
||||
*/
|
||||
export function useMentionSelectionKeyboard({ items, onSelect, adjustScroll }) {
|
||||
const selectedIndex = ref(0);
|
||||
|
||||
const moveSelectionUp = () => {
|
||||
if (!selectedIndex.value) {
|
||||
selectedIndex.value = items.length - 1;
|
||||
} else {
|
||||
selectedIndex.value -= 1;
|
||||
}
|
||||
adjustScroll();
|
||||
};
|
||||
|
||||
const moveSelectionDown = () => {
|
||||
if (selectedIndex.value === items.length - 1) {
|
||||
selectedIndex.value = 0;
|
||||
} else {
|
||||
selectedIndex.value += 1;
|
||||
}
|
||||
adjustScroll();
|
||||
};
|
||||
|
||||
const getKeyboardEvents = () => ({
|
||||
ArrowUp: {
|
||||
action: e => {
|
||||
moveSelectionUp();
|
||||
e.preventDefault();
|
||||
},
|
||||
allowOnFocusedInput: true,
|
||||
},
|
||||
'Control+KeyP': {
|
||||
action: e => {
|
||||
moveSelectionUp();
|
||||
e.preventDefault();
|
||||
},
|
||||
allowOnFocusedInput: true,
|
||||
},
|
||||
ArrowDown: {
|
||||
action: e => {
|
||||
moveSelectionDown();
|
||||
e.preventDefault();
|
||||
},
|
||||
allowOnFocusedInput: true,
|
||||
},
|
||||
'Control+KeyN': {
|
||||
action: e => {
|
||||
moveSelectionDown();
|
||||
e.preventDefault();
|
||||
},
|
||||
allowOnFocusedInput: true,
|
||||
},
|
||||
Enter: {
|
||||
action: e => {
|
||||
onSelect();
|
||||
e.preventDefault();
|
||||
},
|
||||
allowOnFocusedInput: true,
|
||||
},
|
||||
});
|
||||
|
||||
const { addEventHandler, removeEventHandler } = useKeyboardEventListener();
|
||||
|
||||
onMounted(() => {
|
||||
const events = getKeyboardEvents();
|
||||
if (events) {
|
||||
addEventHandler(events);
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
removeEventHandler();
|
||||
});
|
||||
|
||||
return {
|
||||
selectedIndex,
|
||||
moveSelectionUp,
|
||||
moveSelectionDown,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user