urpanels-ui-pack 0.0.2

package/dist/RichTextEditor/RichTextEditor.svelte

@@ -0,0 +1,575 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { Editor } from '@tiptap/core';
+	import StarterKit from '@tiptap/starter-kit';
+	import { Table } from '@tiptap/extension-table';
+	import { TableRow } from '@tiptap/extension-table-row';
+	import { TableCell } from '@tiptap/extension-table-cell';
+	import { TableHeader } from '@tiptap/extension-table-header';
+
+	interface Props {
+		content?: string;
+		placeholder?: string;
+		onchange?: (html: string) => void;
+		minHeight?: string;
+		disabled?: boolean;
+	}
+
+	let { 
+		content = '', 
+		placeholder = 'İçeriğinizi buraya yazın...', 
+		onchange,
+		minHeight = '200px',
+		disabled = false
+	}: Props = $props();
+
+	let editorElement: HTMLElement;
+	let editor: Editor | null = $state(null);
+
+	// Toolbar button states
+	let isBold = $state(false);
+	let isItalic = $state(false);
+	let isStrike = $state(false);
+	let isBulletList = $state(false);
+	let isOrderedList = $state(false);
+	let isBlockquote = $state(false);
+	let currentHeading = $state(0);
+	let isInTable = $state(false);
+
+	// Word'den gelen kirli HTML'i temizle
+	function cleanWordHtml(html: string): string {
+		// MSO (Microsoft Office) class ve style'larını temizle
+		let cleaned = html
+			// MSO specific tags
+			.replace(/<o:p[^>]*>[\s\S]*?<\/o:p>/gi, '')
+			// MSO class'ları
+			.replace(/class="?Mso[^">\s]+"?/gi, '')
+			// MSO style'ları
+			.replace(/style="[^"]*mso-[^"]*"/gi, '')
+			// Inline style'ları temizle (font-family, font-size, color vs.)
+			.replace(/style="[^"]*"/gi, '')
+			// Boş span'ları temizle
+			.replace(/<span[^>]*>\s*<\/span>/gi, '')
+			// Gereksiz attribute'ları temizle
+			.replace(/\s+(lang|xml:lang|class)="[^"]*"/gi, '')
+			// Birden fazla boşluğu tek boşluğa indir
+			.replace(/\s+/g, ' ')
+			// Boş paragraph'ları temizle
+			.replace(/<p[^>]*>\s*(&nbsp;)?\s*<\/p>/gi, '')
+			// &nbsp; karakterlerini normal boşluğa çevir (ardışık olanlar hariç)
+			.replace(/(&nbsp;)+/g, ' ')
+			// Trim
+			.trim();
+
+		return cleaned;
+	}
+
+	function updateToolbarState() {
+		if (!editor) return;
+		
+		isBold = editor.isActive('bold');
+		isItalic = editor.isActive('italic');
+		isStrike = editor.isActive('strike');
+		isBulletList = editor.isActive('bulletList');
+		isOrderedList = editor.isActive('orderedList');
+		isBlockquote = editor.isActive('blockquote');
+		isInTable = editor.isActive('table');
+		
+		if (editor.isActive('heading', { level: 1 })) currentHeading = 1;
+		else if (editor.isActive('heading', { level: 2 })) currentHeading = 2;
+		else if (editor.isActive('heading', { level: 3 })) currentHeading = 3;
+		else currentHeading = 0;
+	}
+
+	onMount(() => {
+		editor = new Editor({
+			element: editorElement,
+			extensions: [
+				StarterKit.configure({
+					heading: {
+						levels: [1, 2, 3]
+					}
+				}),
+				Table.configure({
+					resizable: true,
+					HTMLAttributes: {
+						class: 'editor-table'
+					}
+				}),
+				TableRow,
+				TableHeader,
+				TableCell
+			],
+			content: content,
+			editable: !disabled,
+			editorProps: {
+				attributes: {
+					class: 'prose prose-sm max-w-none focus:outline-none',
+					style: `min-height: ${minHeight}; padding: 1rem;`
+				},
+				// Word paste handler
+				transformPastedHTML(html) {
+					return cleanWordHtml(html);
+				}
+			},
+			onUpdate: ({ editor }) => {
+				const html = editor.getHTML();
+				onchange?.(html);
+			},
+			onSelectionUpdate: () => {
+				updateToolbarState();
+			},
+			onTransaction: () => {
+				updateToolbarState();
+			}
+		});
+
+		updateToolbarState();
+	});
+
+	onDestroy(() => {
+		editor?.destroy();
+	});
+
+	// Content değişirse editörü güncelle
+	$effect(() => {
+		if (editor && content !== editor.getHTML()) {
+			editor.commands.setContent(content);
+		}
+	});
+
+	// Toolbar actions
+	function toggleBold() {
+		editor?.chain().focus().toggleBold().run();
+	}
+
+	function toggleItalic() {
+		editor?.chain().focus().toggleItalic().run();
+	}
+
+	function toggleStrike() {
+		editor?.chain().focus().toggleStrike().run();
+	}
+
+	function toggleBulletList() {
+		editor?.chain().focus().toggleBulletList().run();
+	}
+
+	function toggleOrderedList() {
+		editor?.chain().focus().toggleOrderedList().run();
+	}
+
+	function toggleBlockquote() {
+		editor?.chain().focus().toggleBlockquote().run();
+	}
+
+	function setHeading(level: 0 | 1 | 2 | 3) {
+		if (level === 0) {
+			editor?.chain().focus().setParagraph().run();
+		} else {
+			editor?.chain().focus().toggleHeading({ level }).run();
+		}
+	}
+
+	function clearFormatting() {
+		editor?.chain().focus().clearNodes().unsetAllMarks().run();
+	}
+
+	function undo() {
+		editor?.chain().focus().undo().run();
+	}
+
+	function redo() {
+		editor?.chain().focus().redo().run();
+	}
+
+	// Table actions
+	function insertTable() {
+		editor?.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+	}
+
+	function addColumnBefore() {
+		editor?.chain().focus().addColumnBefore().run();
+	}
+
+	function addColumnAfter() {
+		editor?.chain().focus().addColumnAfter().run();
+	}
+
+	function deleteColumn() {
+		editor?.chain().focus().deleteColumn().run();
+	}
+
+	function addRowBefore() {
+		editor?.chain().focus().addRowBefore().run();
+	}
+
+	function addRowAfter() {
+		editor?.chain().focus().addRowAfter().run();
+	}
+
+	function deleteRow() {
+		editor?.chain().focus().deleteRow().run();
+	}
+
+	function deleteTable() {
+		editor?.chain().focus().deleteTable().run();
+	}
+
+	function mergeCells() {
+		editor?.chain().focus().mergeCells().run();
+	}
+
+	function splitCell() {
+		editor?.chain().focus().splitCell().run();
+	}
+</script>
+
+<div class="rich-text-editor rounded-lg border border-gray-300 bg-white">
+	<!-- Toolbar -->
+	{#if !disabled}
+		<div class="flex flex-wrap items-center gap-1 border-b border-gray-200 bg-gray-50 p-2">
+			<!-- Undo/Redo -->
+			<div class="flex items-center gap-1 border-r border-gray-300 pr-2">
+				<button
+					type="button"
+					onclick={undo}
+					class="rounded p-1.5 text-gray-600 hover:bg-gray-200"
+					title="Geri Al"
+				>
+					<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
+					</svg>
+				</button>
+				<button
+					type="button"
+					onclick={redo}
+					class="rounded p-1.5 text-gray-600 hover:bg-gray-200"
+					title="Yinele"
+				>
+					<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 10h-10a8 8 0 00-8 8v2M21 10l-6 6m6-6l-6-6" />
+					</svg>
+				</button>
+			</div>
+
+			<!-- Heading Selector -->
+			<div class="border-r border-gray-300 pr-2">
+				<select
+					onchange={(e) => setHeading(parseInt(e.currentTarget.value) as 0 | 1 | 2 | 3)}
+					class="rounded border border-gray-300 bg-white px-2 py-1 text-sm"
+					value={currentHeading}
+				>
+					<option value="0">Normal</option>
+					<option value="1">Başlık 1</option>
+					<option value="2">Başlık 2</option>
+					<option value="3">Başlık 3</option>
+				</select>
+			</div>
+
+			<!-- Text Formatting -->
+			<div class="flex items-center gap-1 border-r border-gray-300 pr-2">
+				<button
+					type="button"
+					onclick={toggleBold}
+					class="rounded p-1.5 font-bold {isBold ? 'bg-blue-100 text-blue-600' : 'text-gray-600 hover:bg-gray-200'}"
+					title="Kalın (Ctrl+B)"
+				>
+					B
+				</button>
+				<button
+					type="button"
+					onclick={toggleItalic}
+					class="rounded p-1.5 italic {isItalic ? 'bg-blue-100 text-blue-600' : 'text-gray-600 hover:bg-gray-200'}"
+					title="İtalik (Ctrl+I)"
+				>
+					I
+				</button>
+				<button
+					type="button"
+					onclick={toggleStrike}
+					class="rounded p-1.5 line-through {isStrike ? 'bg-blue-100 text-blue-600' : 'text-gray-600 hover:bg-gray-200'}"
+					title="Üstü Çizili"
+				>
+					S
+				</button>
+			</div>
+
+			<!-- Lists -->
+			<div class="flex items-center gap-1 border-r border-gray-300 pr-2">
+				<button
+					type="button"
+					onclick={toggleBulletList}
+					class="rounded p-1.5 {isBulletList ? 'bg-blue-100 text-blue-600' : 'text-gray-600 hover:bg-gray-200'}"
+					title="Madde İşaretli Liste"
+				>
+					<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+					</svg>
+				</button>
+				<button
+					type="button"
+					onclick={toggleOrderedList}
+					class="rounded p-1.5 {isOrderedList ? 'bg-blue-100 text-blue-600' : 'text-gray-600 hover:bg-gray-200'}"
+					title="Numaralı Liste"
+				>
+					<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
+						<text x="2" y="8" font-size="8" font-weight="bold">1.</text>
+						<text x="2" y="16" font-size="8" font-weight="bold">2.</text>
+						<text x="2" y="24" font-size="8" font-weight="bold">3.</text>
+						<line x1="12" y1="5" x2="22" y2="5" stroke="currentColor" stroke-width="2"/>
+						<line x1="12" y1="12" x2="22" y2="12" stroke="currentColor" stroke-width="2"/>
+						<line x1="12" y1="19" x2="22" y2="19" stroke="currentColor" stroke-width="2"/>
+					</svg>
+				</button>
+			</div>
+
+			<!-- Blockquote -->
+			<div class="flex items-center gap-1 border-r border-gray-300 pr-2">
+				<button
+					type="button"
+					onclick={toggleBlockquote}
+					class="rounded p-1.5 {isBlockquote ? 'bg-blue-100 text-blue-600' : 'text-gray-600 hover:bg-gray-200'}"
+					title="Alıntı"
+				>
+					<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
+						<path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>
+					</svg>
+				</button>
+			</div>
+
+			<!-- Table -->
+			<div class="flex items-center gap-1 border-r border-gray-300 pr-2">
+				{#if !isInTable}
+					<button
+						type="button"
+						onclick={insertTable}
+						class="rounded p-1.5 text-gray-600 hover:bg-gray-200"
+						title="Tablo Ekle"
+					>
+						<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18M10 3v18M14 3v18M3 6a3 3 0 013-3h12a3 3 0 013 3v12a3 3 0 01-3 3H6a3 3 0 01-3-3V6z" />
+						</svg>
+					</button>
+				{:else}
+					<!-- Table controls when inside table -->
+					<button
+						type="button"
+						onclick={addColumnBefore}
+						class="rounded p-1 text-xs text-gray-600 hover:bg-gray-200"
+						title="Sola Sütun Ekle"
+					>
+						←+
+					</button>
+					<button
+						type="button"
+						onclick={addColumnAfter}
+						class="rounded p-1 text-xs text-gray-600 hover:bg-gray-200"
+						title="Sağa Sütun Ekle"
+					>
+						+→
+					</button>
+					<button
+						type="button"
+						onclick={addRowBefore}
+						class="rounded p-1 text-xs text-gray-600 hover:bg-gray-200"
+						title="Üste Satır Ekle"
+					>
+						↑+
+					</button>
+					<button
+						type="button"
+						onclick={addRowAfter}
+						class="rounded p-1 text-xs text-gray-600 hover:bg-gray-200"
+						title="Alta Satır Ekle"
+					>
+						+↓
+					</button>
+					<button
+						type="button"
+						onclick={deleteColumn}
+						class="rounded p-1 text-xs text-red-600 hover:bg-red-100"
+						title="Sütunu Sil"
+					>
+						|✕
+					</button>
+					<button
+						type="button"
+						onclick={deleteRow}
+						class="rounded p-1 text-xs text-red-600 hover:bg-red-100"
+						title="Satırı Sil"
+					>
+						—✕
+					</button>
+					<button
+						type="button"
+						onclick={deleteTable}
+						class="rounded p-1 text-xs text-red-600 hover:bg-red-100"
+						title="Tabloyu Sil"
+					>
+						🗑️
+					</button>
+				{/if}
+			</div>
+
+			<!-- Clear Formatting -->
+			<div class="flex items-center gap-1">
+				<button
+					type="button"
+					onclick={clearFormatting}
+					class="rounded p-1.5 text-gray-600 hover:bg-gray-200"
+					title="Formatı Temizle"
+				>
+					<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+					</svg>
+				</button>
+			</div>
+		</div>
+	{/if}
+
+	<!-- Editor Content -->
+	<div 
+		bind:this={editorElement}
+		class="editor-content"
+		class:opacity-60={disabled}
+	></div>
+</div>
+
+<style>
+	.editor-content :global(.ProseMirror) {
+		outline: none;
+	}
+
+	.editor-content :global(.ProseMirror p) {
+		margin: 0.5em 0;
+	}
+
+	.editor-content :global(.ProseMirror h1) {
+		font-size: 1.875rem;
+		font-weight: 700;
+		margin: 1em 0 0.5em;
+	}
+
+	.editor-content :global(.ProseMirror h2) {
+		font-size: 1.5rem;
+		font-weight: 600;
+		margin: 0.75em 0 0.5em;
+	}
+
+	.editor-content :global(.ProseMirror h3) {
+		font-size: 1.25rem;
+		font-weight: 600;
+		margin: 0.5em 0 0.25em;
+	}
+
+	.editor-content :global(.ProseMirror ul) {
+		list-style-type: disc;
+		padding-left: 1.5em;
+		margin: 0.5em 0;
+	}
+
+	.editor-content :global(.ProseMirror ol) {
+		list-style-type: decimal;
+		padding-left: 1.5em;
+		margin: 0.5em 0;
+	}
+
+	.editor-content :global(.ProseMirror li) {
+		margin: 0.25em 0;
+	}
+
+	.editor-content :global(.ProseMirror blockquote) {
+		border-left: 3px solid #e5e7eb;
+		padding-left: 1em;
+		margin: 0.5em 0;
+		color: #6b7280;
+		font-style: italic;
+	}
+
+	.editor-content :global(.ProseMirror code) {
+		background-color: #f3f4f6;
+		padding: 0.125em 0.25em;
+		border-radius: 0.25em;
+		font-family: monospace;
+		font-size: 0.875em;
+	}
+
+	.editor-content :global(.ProseMirror pre) {
+		background-color: #1f2937;
+		color: #f9fafb;
+		padding: 1em;
+		border-radius: 0.5em;
+		overflow-x: auto;
+		margin: 0.5em 0;
+	}
+
+	.editor-content :global(.ProseMirror pre code) {
+		background: none;
+		padding: 0;
+		color: inherit;
+	}
+
+	.editor-content :global(.ProseMirror-focused) {
+		outline: none;
+	}
+
+	/* Placeholder */
+	.editor-content :global(.ProseMirror p.is-editor-empty:first-child::before) {
+		content: attr(data-placeholder);
+		color: #9ca3af;
+		pointer-events: none;
+		position: absolute;
+	}
+
+	/* Table Styles */
+	.editor-content :global(.ProseMirror table) {
+		border-collapse: collapse;
+		margin: 1em 0;
+		overflow: hidden;
+		width: 100%;
+		table-layout: fixed;
+	}
+
+	.editor-content :global(.ProseMirror table td),
+	.editor-content :global(.ProseMirror table th) {
+		border: 1px solid #d1d5db;
+		box-sizing: border-box;
+		min-width: 1em;
+		padding: 0.5em 0.75em;
+		position: relative;
+		vertical-align: top;
+	}
+
+	.editor-content :global(.ProseMirror table th) {
+		background-color: #f3f4f6;
+		font-weight: 600;
+		text-align: left;
+	}
+
+	.editor-content :global(.ProseMirror table .selectedCell:after) {
+		background: rgba(59, 130, 246, 0.1);
+		content: "";
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		pointer-events: none;
+		position: absolute;
+		z-index: 2;
+	}
+
+	.editor-content :global(.ProseMirror table .column-resize-handle) {
+		background-color: #3b82f6;
+		bottom: -2px;
+		pointer-events: none;
+		position: absolute;
+		right: -2px;
+		top: 0;
+		width: 4px;
+	}
+
+	.editor-content :global(.ProseMirror.resize-cursor) {
+		cursor: col-resize;
+	}
+</style>

package/dist/RichTextEditor/RichTextEditor.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    content?: string;
+    placeholder?: string;
+    onchange?: (html: string) => void;
+    minHeight?: string;
+    disabled?: boolean;
+}
+declare const RichTextEditor: import("svelte").Component<Props, {}, "">;
+type RichTextEditor = ReturnType<typeof RichTextEditor>;
+export default RichTextEditor;

package/dist/RichTextEditor/index.d.ts

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

package/dist/RichTextEditor/index.js

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

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './PageLayout';
+export * from './InfoCard';
+export * from './Pagination';
+export * from './LoadingSpinner';
+export * from './Modal';

package/dist/index.js

@@ -0,0 +1,12 @@
+// Components
+export * from './PageLayout';
+export * from './InfoCard';
+export * from './Pagination';
+export * from './LoadingSpinner';
+export * from './Modal';
+export * from './RichTextEditor';
+export * from './Button';
+// Sections
+export * from './sections';
+// Utils
+export * from './utils/translations.svelte';