-
-
Notifications
You must be signed in to change notification settings - Fork 20
/
index.ts
72 lines (67 loc) · 1.88 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import { fade, scale, type TransitionConfig } from 'svelte/transition';
import SlashComponent from './Slash.svelte';
import type { Plugin, ExtensionComponent } from 'carta-md';
import BezierEasing from 'bezier-easing';
import { defaultSnippets, type DefaultSnippetId, type SlashSnippet } from './snippets';
export * from './default.css?inline';
export interface SlashExtensionOptions {
/**
* List of default snippets to disable.
*/
disableDefaultSnippets?: DefaultSnippetId[] | true;
/**
* Additional snippets.
*/
snippets?: SlashSnippet[];
/**
* Custom in transition. See https://svelte.dev/docs#run-time-svelte-transition.
*/
inTransition?: (node: Element) => TransitionConfig;
/**
* Custom out transition. See https://svelte.dev/docs#run-time-svelte-transition.
*/
outTransition?: (node: Element) => TransitionConfig;
}
interface ComponentProps {
snippets: SlashSnippet[];
inTransition: (node: Element) => TransitionConfig;
outTransition: (node: Element) => TransitionConfig;
}
/**
* Carta slash extension.
* @param options Extension options.
* @returns The slash extension.
*/
export const slash = (options?: SlashExtensionOptions): Plugin => {
const snippets: SlashSnippet[] = defaultSnippets.filter((snippet) =>
options?.disableDefaultSnippets === true
? false
: !options?.disableDefaultSnippets?.includes(snippet.id)
);
snippets.push(...(options?.snippets ?? []));
const inTransition =
options?.inTransition ??
((node: Element) =>
scale(node, {
duration: 150,
easing: BezierEasing(0.05, 0.68, 0.2, 1.15)
}));
const outTransition =
options?.inTransition ??
((node: Element) =>
fade(node, {
duration: 100
}));
const slashComponent: ExtensionComponent<ComponentProps> = {
component: SlashComponent,
props: {
snippets,
inTransition,
outTransition
},
parent: 'input'
};
return {
components: [slashComponent]
};
};