@foxui/text 0.4.0

package/dist/components/rich-text-editor/image-upload/ImageUploadNode.js

@@ -0,0 +1,56 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import { SvelteNodeViewRenderer } from 'svelte-tiptap';
+import ImageUploadComponent from './ImageUploadComponent.svelte';
+export const ImageUploadNode = Node.create({
+    name: 'imageUpload',
+    group: 'block',
+    atom: true,
+    draggable: true,
+    selectable: false,
+    inline: false,
+    addAttributes() {
+        return {
+            accept: {
+                default: this.options.accept
+            },
+            limit: {
+                default: this.options.limit
+            },
+            maxSize: {
+                default: this.options.maxSize
+            },
+            preview: {
+                default: this.options.preview
+            }
+        };
+    },
+    addOptions() {
+        return {
+            accept: 'image/*',
+            limit: 1,
+            maxSize: 0,
+            upload: undefined,
+            onError: undefined,
+            onSuccess: undefined
+        };
+    },
+    addCommands() {
+        return {
+            setImageUploadNode: (options = {}) => ({ commands }) => {
+                return commands.insertContent({
+                    type: this.name,
+                    attrs: options
+                });
+            }
+        };
+    },
+    parseHTML() {
+        return [{ tag: 'div[data-type="image-upload"]' }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return ['div', mergeAttributes({ 'data-type': 'image-upload' }, HTMLAttributes)];
+    },
+    addNodeView() {
+        return SvelteNodeViewRenderer(ImageUploadComponent);
+    }
+});

package/dist/components/rich-text-editor/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RichTextEditor } from './RichTextEditor.svelte';
+export type RichTextTypes = 'paragraph' | 'heading-1' | 'heading-2' | 'heading-3' | 'blockquote' | 'code' | 'bullet-list' | 'ordered-list';

package/dist/components/rich-text-editor/index.js

@@ -0,0 +1 @@
+export { default as RichTextEditor } from './RichTextEditor.svelte';

package/dist/components/rich-text-editor/slash-menu/SuggestionSelect.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { cn } from '@foxui/core';
+	import type { Editor, Range } from '@tiptap/core';
+	import Icon from '../Icon.svelte';
+	import type { RichTextTypes } from '..';
+
+	type Props = {
+		items: {
+			value: RichTextTypes;
+			label: string;
+			command: ({ editor, range }: { editor: Editor; range: Range }) => void;
+		}[];
+		range: Range;
+		editor: Editor;
+		active?: number;
+	};
+
+	let { items, range, editor, active }: Props = $props();
+
+	let activeIndex = $state(active ?? 0);
+
+	export function setItems(value: any[]) {
+		items = value;
+	}
+
+	export function setRange(value: Range) {
+		range = value;
+	}
+
+	export function onKeyDown(event: KeyboardEvent) {
+		if (event.repeat) {
+			return false;
+		}
+		switch (event.key) {
+			case 'ArrowUp': {
+				if (activeIndex <= 0) {
+					activeIndex = items.length - 1;
+				} else {
+					activeIndex--;
+				}
+				return true;
+			}
+			case 'ArrowDown': {
+				if (activeIndex >= items.length - 1) {
+					activeIndex = 0;
+				} else {
+					activeIndex++;
+				}
+				return true;
+			}
+			case 'Enter': {
+				const selected = items[activeIndex];
+
+				if (selected) {
+					selected.command({ editor, range });
+					return true;
+				}
+			}
+		}
+
+		return false;
+	}
+</script>
+
+<menu
+	class={cn(
+		'bg-base-50/50 border-base-500/20 overflow-hidden rounded-2xl border shadow-lg backdrop-blur-xl',
+		'dark:bg-base-900/50 dark:border-base-500/10',
+		'motion-safe:animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+		"divide-base-300/30 dark:divide-base-800 divide-y text-sm"
+	)}
+>
+
+	{#each items as item, index}
+		<button
+			onclick={() => item.command({ editor, range })}
+			class={cn(
+				'text-base-900 dark:text-base-200 group relative isolate flex min-w-28 w-full cursor-pointer items-center gap-3 px-3 py-2 font-medium [&_svg]:size-3.5',
+				activeIndex === index
+					? 'text-accent-700 dark:text-accent-400 bg-accent-500/10'
+					: 'hover:bg-accent-500/10'
+			)}
+		>
+			<Icon name={item.value} />
+			{item.label}
+		</button>
+	{/each}
+</menu>

package/dist/components/rich-text-editor/slash-menu/SuggestionSelect.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Editor, Range } from '@tiptap/core';
+import type { RichTextTypes } from '..';
+type Props = {
+    items: {
+        value: RichTextTypes;
+        label: string;
+        command: ({ editor, range }: {
+            editor: Editor;
+            range: Range;
+        }) => void;
+    }[];
+    range: Range;
+    editor: Editor;
+    active?: number;
+};
+declare const SuggestionSelect: import("svelte").Component<Props, {
+    setItems: (value: any[]) => void;
+    setRange: (value: Range) => void;
+    onKeyDown: (event: KeyboardEvent) => boolean;
+}, "">;
+type SuggestionSelect = ReturnType<typeof SuggestionSelect>;
+export default SuggestionSelect;

package/dist/components/rich-text-editor/slash-menu/index.d.ts

@@ -0,0 +1,32 @@
+import { Extension } from '@tiptap/core';
+import type { Editor, Range } from '@tiptap/core';
+import { PluginKey } from '@tiptap/pm/state';
+import type { SuggestionKeyDownProps, SuggestionProps } from '@tiptap/suggestion';
+import type { RichTextTypes } from '..';
+declare const _default: Extension<any, any>;
+export default _default;
+export declare function suggestion({ char, pluginKey, switchTo, processImageFile }: {
+    char: string;
+    pluginKey: string;
+    switchTo: (value: RichTextTypes) => void;
+    processImageFile: (file: File) => void;
+}): {
+    char: string;
+    pluginKey: PluginKey<any>;
+    items: ({ query }: {
+        query: string;
+    }) => {
+        value: string;
+        label: string;
+        command: ({ editor, range }: {
+            editor: Editor;
+            range: Range;
+        }) => void;
+    }[];
+    render: () => {
+        onStart: (props: SuggestionProps) => void;
+        onUpdate: (props: SuggestionProps) => void;
+        onKeyDown: (props: SuggestionKeyDownProps) => boolean;
+        onExit: () => void;
+    };
+};

package/dist/components/rich-text-editor/slash-menu/index.js

@@ -0,0 +1,168 @@
+import { Extension } from '@tiptap/core';
+import Suggestion from '@tiptap/suggestion';
+import { PluginKey } from '@tiptap/pm/state';
+import SuggestionSelect from './SuggestionSelect.svelte';
+import { mount, unmount } from 'svelte';
+import tippy, {} from 'tippy.js';
+export default Extension.create({
+    name: 'slash',
+    addOptions() {
+        return {
+            suggestion: {
+                char: '/',
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                command: ({ editor, range, props }) => {
+                    props.command({ editor, range });
+                }
+            }
+        };
+    },
+    addProseMirrorPlugins() {
+        return [
+            Suggestion({
+                editor: this.editor,
+                ...this.options.suggestion
+            })
+        ];
+    }
+});
+export function suggestion({ char, pluginKey, switchTo, processImageFile }) {
+    return {
+        char,
+        pluginKey: new PluginKey(pluginKey),
+        items: ({ query }) => {
+            return [
+                {
+                    value: 'paragraph',
+                    label: 'Paragraph',
+                    command: ({ editor, range }) => {
+                        editor.chain().focus().deleteRange(range).run();
+                        switchTo('paragraph');
+                    }
+                },
+                {
+                    value: 'heading-1',
+                    label: 'Heading 1',
+                    command: ({ editor, range }) => {
+                        editor.chain().focus().deleteRange(range).run();
+                        switchTo('heading-1');
+                    }
+                },
+                {
+                    value: 'heading-2',
+                    label: 'Heading 2',
+                    command: ({ editor, range }) => {
+                        editor.chain().focus().deleteRange(range).run();
+                        switchTo('heading-2');
+                    }
+                },
+                {
+                    value: 'heading-3',
+                    label: 'Heading 3',
+                    command: ({ editor, range }) => {
+                        editor.chain().focus().deleteRange(range).run();
+                        switchTo('heading-3');
+                    }
+                },
+                {
+                    value: 'blockquote',
+                    label: 'Blockquote',
+                    command: ({ editor, range }) => {
+                        editor.chain().focus().deleteRange(range).run();
+                        switchTo('blockquote');
+                    }
+                },
+                {
+                    value: 'code',
+                    label: 'Code Block',
+                    command: ({ editor, range }) => {
+                        editor.chain().focus().deleteRange(range).run();
+                        switchTo('code');
+                    }
+                },
+                {
+                    value: 'bullet-list',
+                    label: 'Bullet List',
+                    command: ({ editor, range }) => {
+                        editor.chain().focus().deleteRange(range).run();
+                        switchTo('bullet-list');
+                    }
+                },
+                {
+                    value: 'ordered-list',
+                    label: 'Ordered List',
+                    command: ({ editor, range }) => {
+                        editor.chain().focus().deleteRange(range).run();
+                        switchTo('ordered-list');
+                    }
+                },
+                {
+                    value: 'image',
+                    label: 'Add Image',
+                    command: ({ editor, range }) => {
+                        editor.chain().focus().deleteRange(range).run();
+                        const fileInput = document.createElement('input');
+                        fileInput.type = 'file';
+                        fileInput.click();
+                        fileInput.addEventListener('change', (event) => {
+                            const input = event.target;
+                            if (!input.files?.length)
+                                return;
+                            const file = input.files[0];
+                            if (!file?.type.startsWith('image/'))
+                                return;
+                            processImageFile(file);
+                            input.remove();
+                        });
+                    }
+                }
+            ].filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));
+        },
+        render: () => {
+            let component;
+            let popup;
+            return {
+                onStart: (props) => {
+                    const element = document.createElement('div');
+                    component = mount(SuggestionSelect, {
+                        target: element,
+                        props
+                    });
+                    if (!props.clientRect) {
+                        return;
+                    }
+                    popup = tippy('body', {
+                        getReferenceClientRect: props.clientRect,
+                        appendTo: () => document.body,
+                        content: element,
+                        showOnCreate: true,
+                        interactive: true,
+                        trigger: 'manual',
+                        placement: 'bottom-start'
+                    });
+                },
+                onUpdate: (props) => {
+                    component.setItems(props.items);
+                    component.setRange(props.range);
+                    if (!props.clientRect) {
+                        return;
+                    }
+                    popup[0].setProps({
+                        getReferenceClientRect: props.clientRect
+                    });
+                },
+                onKeyDown: (props) => {
+                    if (props.event.key === 'Escape') {
+                        popup[0].hide();
+                        return true;
+                    }
+                    return component.onKeyDown(props.event);
+                },
+                onExit: () => {
+                    popup[0].destroy();
+                    unmount(component);
+                }
+            };
+        }
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/types.d.ts

@@ -0,0 +1 @@
+export * from './index';

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@foxui/text",
+  "private": false,
+  "version": "0.4.0",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "types": "./dist/types.d.ts",
+  "svelte": "./dist/index.js",
+  "devDependencies": {
+    "@eslint/compat": "^1.2.5",
+    "@eslint/js": "^9.18.0",
+    "@sveltejs/adapter-auto": "^6.0.0",
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.16.0",
+    "@sveltejs/package": "^2.3.11",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/vite": "^4.1.5",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-svelte": "^3.0.0",
+    "globals": "^16.0.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "tailwindcss": "^4.1.5",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^6.2.6"
+  },
+  "dependencies": {
+    "@tiptap/core": "^2.12.0",
+    "@tiptap/extension-bubble-menu": "^2.12.0",
+    "@tiptap/extension-code-block-lowlight": "^2.12.0",
+    "@tiptap/extension-document": "^2.12.0",
+    "@tiptap/extension-dropcursor": "^2.12.0",
+    "@tiptap/extension-history": "^2.12.0",
+    "@tiptap/extension-image": "^2.12.0",
+    "@tiptap/extension-link": "^2.12.0",
+    "@tiptap/extension-paragraph": "^2.12.0",
+    "@tiptap/extension-placeholder": "^2.12.0",
+    "@tiptap/extension-strike": "^2.12.0",
+    "@tiptap/extension-text": "^2.12.0",
+    "@tiptap/extension-typography": "^2.12.0",
+    "@tiptap/extension-underline": "^2.12.0",
+    "@tiptap/pm": "^2.12.0",
+    "@tiptap/starter-kit": "^2.12.0",
+    "@tiptap/suggestion": "^2.12.0",
+    "bits-ui": "^1.4.3",
+    "lowlight": "^3.3.0",
+    "state": "link:@tiptap/pm/state",
+    "svelte-tiptap": "^2.1.0",
+    "tippy.js": "^6.3.7",
+    "@foxui/core": "0.4.0"
+  },
+  "peerDependencies": {
+    "svelte": ">=5",
+    "tailwindcss": ">=3"
+  },
+  "description": "ui kit - svelte 5 + tailwind 4 - text components",
+  "homepage": "https://flo-bit.dev/ui-kit",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/flo-bit/ui-kit.git"
+  },
+  "author": "flo-bit (http://flo-bit.dev/)",
+  "bugs": "https://github.com/flo-bit/ui-kit/issues",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run prepack",
+    "build:package": "vite build && npm run prepack",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint ."
+  }
+}