@flexiui/svelte-rich-text 0.0.72 → 0.0.73
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/RichText.svelte
CHANGED
|
@@ -21,10 +21,11 @@
|
|
|
21
21
|
createEditor,
|
|
22
22
|
Editor,
|
|
23
23
|
// EditorContent,
|
|
24
|
-
BubbleMenu,
|
|
24
|
+
// BubbleMenu,
|
|
25
25
|
} from "svelte-tiptap";
|
|
26
26
|
|
|
27
27
|
import EditorContent from "./svelte-tiptap-extends/EditorContent.svelte";
|
|
28
|
+
import BubbleMenu from "./svelte-tiptap-extends/BubbleMenu.svelte";
|
|
28
29
|
import { getRichTextExtensions } from "./getExtensions";
|
|
29
30
|
import { rgbToHex } from "./utils";
|
|
30
31
|
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { onMount } from 'svelte';
|
|
3
|
+
import { BubbleMenuPlugin, type BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
|
|
4
|
+
|
|
5
|
+
import type { ComponentInputProps } from './types';
|
|
6
|
+
import { invariant } from './utils';
|
|
7
|
+
|
|
8
|
+
type Props = ComponentInputProps<BubbleMenuPluginProps>;
|
|
9
|
+
|
|
10
|
+
const {
|
|
11
|
+
editor,
|
|
12
|
+
options = {},
|
|
13
|
+
pluginKey = 'SvelteTiptapBubbleMenu',
|
|
14
|
+
shouldShow = null,
|
|
15
|
+
updateDelay = 250,
|
|
16
|
+
appendTo = null,
|
|
17
|
+
children,
|
|
18
|
+
class: className,
|
|
19
|
+
}: Props = $props();
|
|
20
|
+
|
|
21
|
+
invariant(editor, 'Missing editor instance.');
|
|
22
|
+
|
|
23
|
+
let element: HTMLElement;
|
|
24
|
+
|
|
25
|
+
onMount(() => {
|
|
26
|
+
element.style.visibility = 'hidden';
|
|
27
|
+
element.style.position = 'absolute';
|
|
28
|
+
|
|
29
|
+
const plugin = BubbleMenuPlugin({
|
|
30
|
+
pluginKey,
|
|
31
|
+
editor,
|
|
32
|
+
element,
|
|
33
|
+
options,
|
|
34
|
+
shouldShow,
|
|
35
|
+
updateDelay,
|
|
36
|
+
appendTo,
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
editor.registerPlugin(plugin);
|
|
40
|
+
|
|
41
|
+
return () => {
|
|
42
|
+
editor?.unregisterPlugin(pluginKey);
|
|
43
|
+
window.requestAnimationFrame(() => {
|
|
44
|
+
if (element && element.parentNode) {
|
|
45
|
+
element.parentNode.removeChild(element);
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
};
|
|
49
|
+
});
|
|
50
|
+
</script>
|
|
51
|
+
|
|
52
|
+
<div bind:this={element} class={className} style="visibility: hidden;">
|
|
53
|
+
{#if children}
|
|
54
|
+
{@render children()}
|
|
55
|
+
{/if}
|
|
56
|
+
</div>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: Record<string, never>;
|
|
4
|
+
events: {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
};
|
|
7
|
+
slots: {};
|
|
8
|
+
};
|
|
9
|
+
export type BubbleMenuProps = typeof __propDef.props;
|
|
10
|
+
export type BubbleMenuEvents = typeof __propDef.events;
|
|
11
|
+
export type BubbleMenuSlots = typeof __propDef.slots;
|
|
12
|
+
export default class BubbleMenu extends SvelteComponentTyped<BubbleMenuProps, BubbleMenuEvents, BubbleMenuSlots> {
|
|
13
|
+
}
|
|
14
|
+
export {};
|