schlechtenburg/packages/core/lib/rich-text/use-formatting-toolbar.ts

59 lines
1.6 KiB
TypeScript

import {
ref,
Ref,
inject,
reactive,
} from 'vue';
import { IFormattingToolLibrary } from '../types';
export const SymFormattingToolbarActiveClient = Symbol('Schlechtenburg inline active client');
export const SymFormattingToolbarClients = Symbol('Schlechtenburg inline toolbar client elements');
export const SymFormattingToolLibrary = Symbol('Schlechtenburg inline tool library');
export const useFormattingToolbar = () => {
const clients: Ref<HTMLElement[]> = inject(SymFormattingToolbarClients, ref([]));
const activeClient: Ref<HTMLElement|null> = inject(SymFormattingToolbarActiveClient, ref(null));
const setActiveClient = (client: HTMLElement|null) => {
activeClient.value = client;
};
const setClients = (newClients: HTMLElement[]) => {
clients.value = newClients;
};
const clientIsRegistered = (el: HTMLElement) => !!clients.value.find(cl => cl === el);
const registerClient = (el: HTMLElement) => {
if (clientIsRegistered(el)) {
console.warn('Not reregistering toolbar client that is already registered:', el);
return;
}
setClients([
...clients.value,
el,
]);
};
const unregisterClient = (el: HTMLElement) => {
setClients(clients.value.filter(cl => cl !== el));
};
const tools: IFormattingToolLibrary = inject(SymFormattingToolLibrary, reactive({}));
const getTool = (name: string) => tools[name];
const getAllTools = () => Object.keys(tools).map(name => tools[name]);
return {
clients,
activeClient,
setActiveClient,
registerClient,
unregisterClient,
tools,
getTool,
getAllTools,
};
};