shipmentpage setting

2025-09-30 14:13:23 +03:30
parent 3a5d38fe33
commit 456797f63f
12 changed files with 417 additions and 17 deletions
@@ -0,0 +1,52 @@
+/* TextEditor RTL and Placeholder Styles */
+
+[dir="rtl"] .ql-editor {
+  text-align: right;
+  direction: rtl;
+}
+
+[dir="rtl"] .ql-toolbar {
+  direction: rtl;
+}
+
+[dir="rtl"] .ql-toolbar .ql-picker-label {
+  text-align: right;
+}
+
+[dir="rtl"] .ql-toolbar .ql-formats {
+  margin-left: 0;
+  margin-right: 15px;
+}
+
+[dir="rtl"] .ql-toolbar .ql-formats:first-child {
+  margin-right: 0;
+}
+
+/* Enhanced placeholder styles for RTL */
+.ql-editor.ql-blank::before {
+  color: #6b7280 !important;
+  content: var(--placeholder-text, "متن خود را وارد کنید...") !important;
+  font-style: normal !important;
+  pointer-events: none !important;
+  position: absolute !important;
+  right: 15px !important;
+  top: 12px !important;
+  left: auto !important;
+  font-size: 14px !important;
+  line-height: 1.5 !important;
+}
+
+[dir="rtl"] .ql-editor.ql-blank::before {
+  right: 15px !important;
+  left: auto !important;
+}
+
+/* Ensure placeholder shows when editor is focused but empty */
+.ql-editor.ql-blank.ql-has-focus::before {
+  display: none;
+}
+
+/* Custom height for editor */
+.h-64 .ql-editor {
+  min-height: 160px;
+}
@@ -0,0 +1,65 @@
+import { type FC } from 'react'
+import ReactQuill from 'react-quill-new'
+import 'react-quill-new/dist/quill.snow.css'
+import './TextEditor.css'
+
+interface TextEditorProps {
+    value: string
+    onChange: (value: string) => void
+    placeholder?: string
+    className?: string
+    height?: string
+}
+
+const TextEditor: FC<TextEditorProps> = ({
+    value,
+    onChange,
+    placeholder = 'متن خود را وارد کنید...',
+    className = '',
+    height = 'h-[200px]'
+}) => {
+    const modules = {
+        toolbar: [
+            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+            [{ 'font': [] }],
+            [{ 'size': [] }],
+            ['bold', 'italic', 'underline', 'strike', 'blockquote'],
+            [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
+            ['link', 'image', 'video'],
+            [{ 'color': [] }, { 'background': [] }],
+            [{ 'align': [] }],
+            ['clean']
+        ],
+        clipboard: {
+            matchVisual: false,
+        },
+    }
+
+    const formats = [
+        'header', 'font', 'size',
+        'bold', 'italic', 'underline', 'strike', 'blockquote',
+        'list', 'bullet', 'indent',
+        'link', 'image', 'video',
+        'color', 'background',
+        'align'
+    ]
+
+    return (
+        <div
+            className={`${className} mb-14`}
+            dir="rtl"
+            style={{ '--placeholder-text': `"${placeholder}"` } as React.CSSProperties}
+        >
+            <ReactQuill
+                theme="snow"
+                value={value}
+                onChange={onChange}
+                modules={modules}
+                formats={formats}
+                className={height}
+            />
+        </div>
+    )
+}
+
+export default TextEditor