@foxui/text 0.4.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License Copyright (c) 2025 flo-bit
+
+Permission is hereby granted, free of
+charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use, copy, modify, merge,
+publish, distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice
+(including the next paragraph) shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
+ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
+EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,16 @@
+# 🦊 fox ui
+
+svelte 5 + tailwind 4 ui kit, text components
+
+- [Plain Text Editor](https://flo-bit.dev/ui-kit/components/text/plain-text-editor)
+- [Rich Text Editor](https://flo-bit.dev/ui-kit/components/text/rich-text-editor)
+
+> **This is a public alpha release. Expect bugs and breaking changes.**
+
+[See all components here](https://flo-bit.dev/ui-kit)
+
+For a guide on how to use this ui kit, see the [Quickstart Guide](https://flo-bit.dev/ui-kit/docs/quick-start).
+
+Read more about [the philosophy/aim of this project here](https://flo-bit.dev/ui-kit/docs/philosophy).
+
+For more information about development, contributing and the like, see the main [README](https://github.com/flo-bit/ui-kit/blob/main/README.md).

package/dist/components/advanced-text-area/AdvancedTextArea.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { Button, ScrollArea } from '@foxui/core';
+	import type { Snippet } from 'svelte';
+
+	let {
+		value = $bindable(),
+		placeholder = 'Write something here...',
+		rows = 3,
+		additionalContent = null,
+		actionButtons = null,
+		submitButton = 'Post',
+		...restProps
+	}: {
+		value?: string;
+		placeholder?: string;
+		rows?: number;
+		additionalContent?: Snippet | null;
+		actionButtons?: Snippet | null;
+		submitButton?: Snippet | string | null;
+	} = $props();
+</script>
+
+<div class="relative min-w-0 flex-1">
+	<div
+		class="outline-base-300 focus-within:outline-accent-600 dark:focus-within:outline-accent-500 dark:bg-base-900/50 rounded-2xl bg-white outline-1 -outline-offset-1 focus-within:outline-2 focus-within:-outline-offset-2 dark:outline-white/10"
+	>
+		<ScrollArea>
+			<textarea
+				{rows}
+				{placeholder}
+				bind:value
+				class="text-base-900 placeholder:text-base-500 dark:placeholder:text-base-400 block w-full resize-none border-none bg-transparent p-3 text-base outline-none focus:border-0 focus:outline-none focus:ring-0 sm:text-sm dark:text-white"
+				{...restProps}
+			></textarea>
+		</ScrollArea>
+
+		{#if additionalContent}
+			{@render additionalContent()}
+		{/if}
+
+		<div class="h-[50px]"></div>
+	</div>
+
+	<div class="absolute inset-x-0 bottom-0 flex justify-between p-2">
+		<div class="flex items-center space-x-2">
+			{#if actionButtons}
+				{@render actionButtons()}
+			{/if}
+		</div>
+		<div class="shrink-0">
+			{#if typeof submitButton === 'string'}
+				<Button type="submit" class="rounded-xl">{submitButton}</Button>
+			{:else if submitButton}
+				{@render submitButton()}
+			{/if}
+		</div>
+	</div>
+</div>

package/dist/components/advanced-text-area/AdvancedTextArea.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    value?: string;
+    placeholder?: string;
+    rows?: number;
+    additionalContent?: Snippet | null;
+    actionButtons?: Snippet | null;
+    submitButton?: Snippet | string | null;
+};
+declare const AdvancedTextArea: import("svelte").Component<$$ComponentProps, {}, "value">;
+type AdvancedTextArea = ReturnType<typeof AdvancedTextArea>;
+export default AdvancedTextArea;

package/dist/components/advanced-text-area/index.d.ts

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

package/dist/components/advanced-text-area/index.js

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

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './plain-text-editor/';
+export * from './rich-text-editor/';
+export * from './advanced-text-area/';

package/dist/components/index.js

@@ -0,0 +1,3 @@
+export * from './plain-text-editor/';
+export * from './rich-text-editor/';
+export * from './advanced-text-area/';

package/dist/components/plain-text-editor/PlainTextEditor.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte';
+	import { Editor, type Extensions, mergeAttributes, Node } from '@tiptap/core';
+	import Placeholder from '@tiptap/extension-placeholder';
+	import { type ParagraphOptions } from '@tiptap/extension-paragraph';
+	import Text from '@tiptap/extension-text';
+	import History from '@tiptap/extension-history';
+	import { cn } from '@foxui/core';
+
+	let {
+		class: className,
+		placeholder = '',
+		value = $bindable(''),
+		ref = $bindable(null),
+		editor = $bindable(null),
+		allowMultiline = false,
+		onupdate,
+		ontransaction,
+		...props
+	}: {
+		class?: string;
+		placeholder?: string;
+		value?: string;
+		ref?: HTMLElement | null;
+		editor?: Editor | null;
+		allowMultiline?: boolean;
+		onupdate?: (value: string) => void;
+		ontransaction?: () => void;
+	} = $props();
+
+	onMount(async () => {
+		if (!ref || editor) return;
+
+		const Document = Node.create({
+			name: 'doc',
+			topNode: true,
+			content: allowMultiline ? 'block+' : 'block'
+		});
+
+		const Paragraph = Node.create<ParagraphOptions>({
+			name: 'paragraph',
+
+			priority: 1000,
+
+			addOptions() {
+				return {
+					HTMLAttributes: {}
+				};
+			},
+
+			group: 'block',
+
+			content: 'text*',
+
+			parseHTML() {
+				return [{ tag: 'p' }];
+			},
+
+			renderHTML({ HTMLAttributes }) {
+				return ['p', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+			},
+
+			addCommands() {
+				return {
+					setParagraph:
+						() =>
+						({ commands }) => {
+							return commands.setNode(this.name);
+						}
+				};
+			},
+
+			addKeyboardShortcuts() {
+				return {
+					'Mod-Alt-0': () => this.editor.commands.setParagraph()
+				};
+			}
+		});
+
+		let extensions: Extensions = [Document.configure(), Paragraph.configure(), Text.configure(), History.configure()];
+
+		if (placeholder) {
+			extensions.push(
+				Placeholder.configure({
+					placeholder: placeholder
+				})
+			);
+		}
+
+		editor = new Editor({
+			element: ref,
+			extensions: extensions,
+			onUpdate: () => {
+				onupdate?.(editor?.getText() ?? '');
+
+				value = editor?.getText() ?? '';
+			},
+			onTransaction: () => {
+				ontransaction?.();
+			},
+
+			content: value,
+
+			editorProps: {
+				attributes: {
+					class: 'outline-none pointer-events-auto'
+				}
+			}
+		});
+	});
+
+	$effect(() => {
+		if (!editor || editor.getText() === value) return;
+
+		editor.commands.setContent(value);
+	});
+
+	onDestroy(() => {
+		editor?.destroy();
+	});
+</script>
+
+<div class={cn('min-h-[1em]', className)} bind:this={ref} {...props}></div>
+
+<style>
+	:global(.tiptap p.is-editor-empty:first-child::before) {
+		color: var(--color-base-500);
+		content: attr(data-placeholder);
+		float: left;
+		height: 0;
+		pointer-events: none;
+	}
+</style>

package/dist/components/plain-text-editor/PlainTextEditor.svelte.d.ts

@@ -0,0 +1,14 @@
+import { Editor } from '@tiptap/core';
+type $$ComponentProps = {
+    class?: string;
+    placeholder?: string;
+    value?: string;
+    ref?: HTMLElement | null;
+    editor?: Editor | null;
+    allowMultiline?: boolean;
+    onupdate?: (value: string) => void;
+    ontransaction?: () => void;
+};
+declare const PlainTextEditor: import("svelte").Component<$$ComponentProps, {}, "value" | "ref" | "editor">;
+type PlainTextEditor = ReturnType<typeof PlainTextEditor>;
+export default PlainTextEditor;

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

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

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

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

package/dist/components/rich-text-editor/Icon.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import type { RichTextTypes } from '.';
+
+	let {
+		name
+	}: {
+		name: RichTextTypes;
+	} = $props();
+</script>
+
+{#if name === 'paragraph'}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		><path d="M13 4v16" /><path d="M17 4v16" /><path d="M19 4H9.5a4.5 4.5 0 0 0 0 9H13" /></svg
+	>
+{:else if name === 'heading-1'}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		><path d="M4 12h8" /><path d="M4 18V6" /><path d="M12 18V6" /><path d="m17 12 3-2v8" /></svg
+	>
+{:else if name === 'heading-2'}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		><path d="M4 12h8" /><path d="M4 18V6" /><path d="M12 18V6" /><path
+			d="M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1"
+		/></svg
+	>
+{:else if name === 'heading-3'}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		><path d="M4 12h8" /><path d="M4 18V6" /><path d="M12 18V6" /><path
+			d="M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2"
+		/><path d="M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2" /></svg
+	>
+{:else if name === 'blockquote'}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		><path d="M17 6H3" /><path d="M21 12H8" /><path d="M21 18H8" /><path d="M3 12v6" /></svg
+	>
+{:else if name === 'code'}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		><polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" /></svg
+	>
+{:else if name === 'bullet-list'}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		><path d="M3 12h.01" /><path d="M3 18h.01" /><path d="M3 6h.01" /><path d="M8 12h13" /><path
+			d="M8 18h13"
+		/><path d="M8 6h13" /></svg
+	>
+{:else if name === 'ordered-list'}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		><path d="M10 12h11" /><path d="M10 18h11" /><path d="M10 6h11" /><path d="M4 10h2" /><path
+			d="M4 6h1v4"
+		/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1" /></svg
+	>
+{:else if name === 'image'}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		><rect width="18" height="18" x="3" y="3" rx="2" ry="2" /><circle cx="9" cy="9" r="2" /><path
+			d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
+		/></svg
+	>
+{/if}

package/dist/components/rich-text-editor/Icon.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { RichTextTypes } from '.';
+type $$ComponentProps = {
+    name: RichTextTypes;
+};
+declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;