mesdan 1.0.2 → 1.0.3
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/LICENSE.txt +20 -20
- package/README.md +42 -42
- package/package.json +3 -4
- package/talimat-2.md +297 -0
- package/teshir/kanca/use-mesdan.d.ts +3 -3
- package/teshir/kanca/use-mesdan.d.ts.map +1 -1
- package/teshir/kanca/use-mesdan.js +155 -191
- package/teshir/nev/tadili-metin-emri.d.ts +5 -5
- package/teshir/nev/tadili-metin-emri.d.ts.map +1 -1
- package/teshir/nev/tadili-metin-emri.js +5 -5
- package/teshir/nuve/tadil-et-metni.js +5 -5
package/LICENSE.txt
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2024 KadimElifba
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 KadimElifba
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
21
|
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
# Osmani membasının gayesi nedir?
|
|
2
|
-
|
|
3
|
-
Latin harflerinin bulunduğu mesdanla Osmanlı Türkçesi yazabilmek için hazırlanmıştır.
|
|
4
|
-
Mesdandan basılan harfin yerine Osmanî dengini yazar.
|
|
5
|
-
|
|
6
|
-
## Nasıl Kullanılır?
|
|
7
|
-
|
|
8
|
-
Bu memba **React** ile hazırlanan sahifelerde kullanılmak için geliştirilmiştir.
|
|
9
|
-
Sırası ile aşağıdaki adımları takip edelim:
|
|
10
|
-
|
|
11
|
-
Membayı tarhımıza dahil edelim:
|
|
12
|
-
|
|
13
|
-
```
|
|
14
|
-
npm install mesdan
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
**useMesdan** kancasını unsura dahil edelim:
|
|
18
|
-
|
|
19
|
-
```
|
|
20
|
-
const [kelime, metinSahasıİması] = useMesdan<HTMLInputElement>({
|
|
21
|
-
ibtidaiKelime: "",
|
|
22
|
-
tekSatırMı: true,
|
|
23
|
-
});
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
Bu kanca **[kelime, metinSahasıİması]** dizisini cevaben iletir.
|
|
27
|
-
**metinSahasıİması**, **input** unsurunun **ref** hususiyetine tanıtılmalıdır.
|
|
28
|
-
Bu sayede **useMesdan** **input** sahası seçiliyken basılan harfleri dinleyecek ve işbu harfleri
|
|
29
|
-
Osmanî denkleri ile değiştirecektir. Osmani Elifba ile yazılmış **kelime** evvelki dizi ile
|
|
30
|
-
kancaldan alınmıştı. **input** sahasının **value** kısmına işbu **kelime** tanıtılmalıdır.
|
|
31
|
-
İlaveten, **onChange** dinleyicisi de aşağıdaki gibi hazır edilmelidir.
|
|
32
|
-
|
|
33
|
-
```
|
|
34
|
-
<input
|
|
35
|
-
ref={metinSahasıİması}
|
|
36
|
-
dir="rtl"
|
|
37
|
-
type="text"
|
|
38
|
-
placeholder="كلمه"
|
|
39
|
-
value={kelime}
|
|
40
|
-
onChange={hadise => { }}
|
|
41
|
-
/>
|
|
42
|
-
```
|
|
1
|
+
# Osmani membasının gayesi nedir?
|
|
2
|
+
|
|
3
|
+
Latin harflerinin bulunduğu mesdanla Osmanlı Türkçesi yazabilmek için hazırlanmıştır.
|
|
4
|
+
Mesdandan basılan harfin yerine Osmanî dengini yazar.
|
|
5
|
+
|
|
6
|
+
## Nasıl Kullanılır?
|
|
7
|
+
|
|
8
|
+
Bu memba **React** ile hazırlanan sahifelerde kullanılmak için geliştirilmiştir.
|
|
9
|
+
Sırası ile aşağıdaki adımları takip edelim:
|
|
10
|
+
|
|
11
|
+
Membayı tarhımıza dahil edelim:
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
npm install mesdan
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
**useMesdan** kancasını unsura dahil edelim:
|
|
18
|
+
|
|
19
|
+
```
|
|
20
|
+
const [kelime, metinSahasıİması] = useMesdan<HTMLInputElement>({
|
|
21
|
+
ibtidaiKelime: "",
|
|
22
|
+
tekSatırMı: true,
|
|
23
|
+
});
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
Bu kanca **[kelime, metinSahasıİması]** dizisini cevaben iletir.
|
|
27
|
+
**metinSahasıİması**, **input** unsurunun **ref** hususiyetine tanıtılmalıdır.
|
|
28
|
+
Bu sayede **useMesdan** **input** sahası seçiliyken basılan harfleri dinleyecek ve işbu harfleri
|
|
29
|
+
Osmanî denkleri ile değiştirecektir. Osmani Elifba ile yazılmış **kelime** evvelki dizi ile
|
|
30
|
+
kancaldan alınmıştı. **input** sahasının **value** kısmına işbu **kelime** tanıtılmalıdır.
|
|
31
|
+
İlaveten, **onChange** dinleyicisi de aşağıdaki gibi hazır edilmelidir.
|
|
32
|
+
|
|
33
|
+
```
|
|
34
|
+
<input
|
|
35
|
+
ref={metinSahasıİması}
|
|
36
|
+
dir="rtl"
|
|
37
|
+
type="text"
|
|
38
|
+
placeholder="كلمه"
|
|
39
|
+
value={kelime}
|
|
40
|
+
onChange={hadise => { }}
|
|
41
|
+
/>
|
|
42
|
+
```
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mesdan",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "Latinî mesdan ile Osmanî metin yazmak için hazırlanmış bir alettir.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"osmanlıca",
|
|
@@ -18,8 +18,7 @@
|
|
|
18
18
|
"main": "teshir/index.js",
|
|
19
19
|
"types": "teshir/index.d.ts",
|
|
20
20
|
"scripts": {
|
|
21
|
-
"
|
|
22
|
-
"inşa": "npm run öninşa && tsc -p .",
|
|
21
|
+
"kur": "rm -rf teshir && tsc -p .",
|
|
23
22
|
"tecrübe": "tsx watch memba/index.ts",
|
|
24
23
|
"tedkik": "jest"
|
|
25
24
|
},
|
|
@@ -30,7 +29,7 @@
|
|
|
30
29
|
"@types/react": "^18.2.64 || ^19.0.8",
|
|
31
30
|
"@types/react-dom": "^18.2.19 || ^19.0.3",
|
|
32
31
|
"jest": "^29.7.0",
|
|
33
|
-
"prettier": "^3.
|
|
32
|
+
"prettier": "^3.6.2",
|
|
34
33
|
"react": "^18.2.0 || ^19.0.0",
|
|
35
34
|
"react-dom": "^18.2.0 || ^19.0.0",
|
|
36
35
|
"ts-jest": "^29.1.2",
|
package/talimat-2.md
ADDED
|
@@ -0,0 +1,297 @@
|
|
|
1
|
+
Excellent! Setting up a local development workflow to test your NPM package is a crucial step before publishing. It allows you to use your `mesdan` hook in a real application (like one made with Create React App, Vite, or Next.js) as if it were installed from the registry.
|
|
2
|
+
|
|
3
|
+
Here are the best methods to do this, starting with the most common and recommended approach.
|
|
4
|
+
|
|
5
|
+
### Method 1: `npm link` (Recommended for Active Development)
|
|
6
|
+
|
|
7
|
+
This is the standard and most efficient way to test a local package. It works by creating a symbolic link (a "symlink," which is like a shortcut) between your consumer project's `node_modules` folder and your `mesdan` package's source code.
|
|
8
|
+
|
|
9
|
+
This means any changes you make in your `mesdan` project are **instantly** reflected in your test project (after you rebuild, of course), without needing to reinstall anything.
|
|
10
|
+
|
|
11
|
+
**Here's the step-by-step process:**
|
|
12
|
+
|
|
13
|
+
**Step 1: In your `mesdan` package directory**
|
|
14
|
+
|
|
15
|
+
1. **Build your package.** Your `package.json` has a `kur` script that compiles your TypeScript into JavaScript in the `teshir/` directory. This is the code that will actually be used by the other project.
|
|
16
|
+
```bash
|
|
17
|
+
# In your /path/to/mesdan project folder
|
|
18
|
+
npm run kur
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
2. **Register a global link.** This command tells NPM to create a global link on your computer that points to this project directory.
|
|
22
|
+
```bash
|
|
23
|
+
npm link
|
|
24
|
+
```
|
|
25
|
+
You should see a success message confirming the link was created for `mesdan@1.0.2`.
|
|
26
|
+
|
|
27
|
+
**Step 2: In your local test project (e.g., a Create React App)**
|
|
28
|
+
|
|
29
|
+
1. **Create a test project** if you don't have one.
|
|
30
|
+
```bash
|
|
31
|
+
# For example, using Vite (recommended for speed)
|
|
32
|
+
npm create vite@latest my-test-app -- --template react-ts
|
|
33
|
+
cd my-test-app
|
|
34
|
+
npm install
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
2. **Link the `mesdan` package.** This command creates a symlink inside `my-test-app/node_modules/` that points to the global link you created in Step 1.
|
|
38
|
+
```bash
|
|
39
|
+
# In your /path/to/my-test-app folder
|
|
40
|
+
npm link mesdan
|
|
41
|
+
```
|
|
42
|
+
Now, if you look inside `my-test-app/node_modules/`, you'll see that `mesdan` is a shortcut to your original project folder.
|
|
43
|
+
|
|
44
|
+
**Step 3: Use the hook in your test project**
|
|
45
|
+
|
|
46
|
+
Now you can import and use your hook just like any other package.
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
// In my-test-app/src/App.tsx
|
|
50
|
+
|
|
51
|
+
import { useRef } from 'react';
|
|
52
|
+
import { useMesdan } from 'mesdan'; // It works!
|
|
53
|
+
|
|
54
|
+
function App() {
|
|
55
|
+
const inputRef = useRef<HTMLInputElement>(null);
|
|
56
|
+
|
|
57
|
+
const [metin, metinSahasıİması, tebdilMetin, tebdilLatiniMi] = useMesdan<HTMLInputElement>({
|
|
58
|
+
ibtidaiMetin: "",
|
|
59
|
+
tekSatırMı: true,
|
|
60
|
+
latiniMi: false,
|
|
61
|
+
aramaTalepEdilince: () => alert("Arama talep edildi!"),
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
return (
|
|
65
|
+
<div>
|
|
66
|
+
<h1>Mesdan Test Sahası</h1>
|
|
67
|
+
<p>Aşağıdaki sahaya Osmanî metin yazmayı deneyin:</p>
|
|
68
|
+
<input
|
|
69
|
+
ref={metinSahasıİması}
|
|
70
|
+
value={metin}
|
|
71
|
+
onChange={(e) => tebdilMetin(e.target.value)} // Controlled component
|
|
72
|
+
style={{ width: '300px', padding: '8px', direction: 'rtl', fontFamily: 'Amiri, serif', fontSize: '1.5rem' }}
|
|
73
|
+
/>
|
|
74
|
+
<hr />
|
|
75
|
+
<button onClick={() => tebdilLatiniMi(true)}>Latini Moda Geç</button>
|
|
76
|
+
<button onClick={() => tebdilLatiniMi(false)}>Osmanî Moda Geç</button>
|
|
77
|
+
</div>
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
export default App;
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
#### ⚠️ Important Gotcha: The "Invalid Hook Call" Error
|
|
85
|
+
|
|
86
|
+
When using `npm link` with React libraries, you might encounter the dreaded "Invalid Hook Call" error. This happens because the symlink can cause your setup to have **two different copies of React** loaded: one from your test app's `node_modules` and another from your `mesdan` project's `node_modules`.
|
|
87
|
+
|
|
88
|
+
**The Fix:** Tell your `mesdan` project to use the `react` from your test project.
|
|
89
|
+
|
|
90
|
+
From within your `mesdan` project directory, run this command:
|
|
91
|
+
```bash
|
|
92
|
+
# In your /path/to/mesdan project folder
|
|
93
|
+
npm link ../my-test-app/node_modules/react
|
|
94
|
+
```
|
|
95
|
+
This creates a symlink inside `mesdan/node_modules/` pointing to the single React instance in your test app, resolving the conflict.
|
|
96
|
+
|
|
97
|
+
---
|
|
98
|
+
|
|
99
|
+
### Method 2: `npm pack` (The "Real-World Simulation")
|
|
100
|
+
|
|
101
|
+
This method is less convenient for rapid development but is an excellent way to do a final check before publishing. It creates a compressed `.tgz` file, which is the exact file that gets uploaded to the NPM registry.
|
|
102
|
+
|
|
103
|
+
1. **Build your `mesdan` project.**
|
|
104
|
+
```bash
|
|
105
|
+
# In /path/to/mesdan
|
|
106
|
+
npm run kur
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
2. **Pack it.**
|
|
110
|
+
```bash
|
|
111
|
+
# In /path/to/mesdan
|
|
112
|
+
npm pack
|
|
113
|
+
```
|
|
114
|
+
This will create a file named `mesdan-1.0.2.tgz` in your project's root directory.
|
|
115
|
+
|
|
116
|
+
3. **Install the file in your test project.**
|
|
117
|
+
```bash
|
|
118
|
+
# In /path/to/my-test-app
|
|
119
|
+
# Use a relative or absolute path to the .tgz file
|
|
120
|
+
npm install ../mesdan/mesdan-1.0.2.tgz
|
|
121
|
+
```
|
|
122
|
+
This will install the package just as if it came from NPM.
|
|
123
|
+
|
|
124
|
+
**Downside:** Every time you make a change to `mesdan`, you must re-build, re-pack, and re-install it in your test project.
|
|
125
|
+
|
|
126
|
+
---
|
|
127
|
+
|
|
128
|
+
### Summary and Recommendation
|
|
129
|
+
|
|
130
|
+
| Method | Pros | Cons | Best for... |
|
|
131
|
+
| :--- | :--- | :--- | :--- |
|
|
132
|
+
| **`npm link`** | **Instant updates** (after rebuild). Fast development cycle. | Can cause React duplication issues (but it's fixable). Requires cleanup (`npm unlink`). | **Active, day-to-day development and testing.** |
|
|
133
|
+
| **`npm pack`** | **Perfectly simulates** a real NPM installation. No weird dependency issues. | **Slow workflow.** Requires re-packing and re-installing for every change. | **Final sanity check** before you run `npm publish`. |
|
|
134
|
+
|
|
135
|
+
**My advice:**
|
|
136
|
+
Use **`npm link`** for your development. Just be ready to apply the fix for the "Invalid Hook Call" error if it appears. It's the most productive workflow by far. Then, before you publish a new version, use **`npm pack`** once as a final test to be 100% sure everything is configured correctly.
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
---------------------------------------------
|
|
140
|
+
|
|
141
|
+
Of course! This is a very common and essential workflow for package development. Your `tercefzar` project is the perfect "consumer" application to test your local `mesdan` hook.
|
|
142
|
+
|
|
143
|
+
The process involves uninstalling the version from NPM and then creating a symbolic link (`symlink`) to your local `mesdan` project folder. Here's the step-by-step guide using the recommended `npm link` method.
|
|
144
|
+
|
|
145
|
+
### Step 1: Prepare Your Local `mesdan` Package
|
|
146
|
+
|
|
147
|
+
First, go to the directory where you are developing the `mesdan` hook.
|
|
148
|
+
|
|
149
|
+
1. **Build the project:** Make sure your latest TypeScript changes are compiled into JavaScript in the `teshir/` directory. Your `kur` script handles this.
|
|
150
|
+
```bash
|
|
151
|
+
# Navigate to your mesdan project folder
|
|
152
|
+
cd /path/to/your/local/mesdan
|
|
153
|
+
|
|
154
|
+
# Run the build script
|
|
155
|
+
npm run kur
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
2. **Create a global link:** This command tells your computer to create a global "shortcut" to this specific project folder, making it available to be linked by other projects.
|
|
159
|
+
```bash
|
|
160
|
+
npm link
|
|
161
|
+
```
|
|
162
|
+
You should see a success message indicating that a global link for `mesdan` was created.
|
|
163
|
+
|
|
164
|
+
### Step 2: Update Your `tercefzar` Project
|
|
165
|
+
|
|
166
|
+
Now, go to your `tercefzar` project to remove the old package and link the new one.
|
|
167
|
+
|
|
168
|
+
1. **Uninstall the NPM version:** This removes the `mesdan` package from your `node_modules` and its entry from your `package-lock.json`.
|
|
169
|
+
```bash
|
|
170
|
+
# Navigate to your tercefzar project folder
|
|
171
|
+
cd /path/to/your/tercefzar
|
|
172
|
+
|
|
173
|
+
# Uninstall the package
|
|
174
|
+
npm uninstall mesdan
|
|
175
|
+
```
|
|
176
|
+
This step is crucial to avoid conflicts.
|
|
177
|
+
|
|
178
|
+
2. **Link to your local `mesdan`:** This command looks for the global link you created in Step 1 and creates a symlink inside `tercefzar/node_modules/` that points directly to your local `mesdan` project folder.
|
|
179
|
+
```bash
|
|
180
|
+
npm link mesdan
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
### Step 3: Verification and Development
|
|
184
|
+
|
|
185
|
+
1. **Check `node_modules`:** If you look inside `tercefzar/node_modules/`, you will now see that `mesdan` has a small arrow icon next to it (in many terminals and file explorers), indicating it's a symlink.
|
|
186
|
+
|
|
187
|
+
2. **Run your dev server:** Start your `tercefzar` application as usual.
|
|
188
|
+
```bash
|
|
189
|
+
# In the tercefzar folder
|
|
190
|
+
npm run çat
|
|
191
|
+
```
|
|
192
|
+
Your application will now be using the code directly from your local `/path/to/your/local/mesdan` folder.
|
|
193
|
+
|
|
194
|
+
### The Development Workflow From Now On
|
|
195
|
+
|
|
196
|
+
This is where `npm link` is so powerful. To test new changes:
|
|
197
|
+
|
|
198
|
+
1. Make any code changes you want in your `mesdan` project's source files (`.ts` files).
|
|
199
|
+
2. In the `mesdan` project terminal, **re-run your build script**.
|
|
200
|
+
```bash
|
|
201
|
+
# In the mesdan folder
|
|
202
|
+
npm run kur
|
|
203
|
+
```
|
|
204
|
+
3. Vite's development server in your `tercefzar` project will detect the changes in the linked `node_modules` directory and **automatically hot-reload** your application.
|
|
205
|
+
|
|
206
|
+
You **do not** need to run `npm link` again. The link is permanent until you break it.
|
|
207
|
+
|
|
208
|
+
### ⚠️ Important: Fixing the "Invalid Hook Call" Error
|
|
209
|
+
|
|
210
|
+
As mentioned previously, this setup can lead to an "Invalid Hook Call" error because you might have two copies of React—one in `tercefzar/node_modules` and one in `mesdan/node_modules`.
|
|
211
|
+
|
|
212
|
+
**To fix this proactively:**
|
|
213
|
+
Go back to your `mesdan` project folder and tell it to use the `react` from your `tercefzar` project.
|
|
214
|
+
|
|
215
|
+
```bash
|
|
216
|
+
# In your /path/to/your/local/mesdan folder
|
|
217
|
+
npm link ../tercefzar/node_modules/react
|
|
218
|
+
```
|
|
219
|
+
*(Adjust the relative path `../tercefzar` if your projects are in different locations)*.
|
|
220
|
+
|
|
221
|
+
This ensures both your hook and your application are using the exact same React instance.
|
|
222
|
+
|
|
223
|
+
### How to Revert Back to the NPM Version
|
|
224
|
+
|
|
225
|
+
When you're done with local development and want to go back to using the official package from the NPM registry:
|
|
226
|
+
|
|
227
|
+
1. **Unlink the local package** in your `tercefzar` project. The `--no-save` flag is important as it prevents `npm` from removing `mesdan` from your `package.json` dependencies.
|
|
228
|
+
```bash
|
|
229
|
+
# In the tercefzar folder
|
|
230
|
+
npm unlink --no-save mesdan
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
2. **Re-install the package** from the registry.
|
|
234
|
+
```bash
|
|
235
|
+
# In the tercefzar folder
|
|
236
|
+
npm install
|
|
237
|
+
```
|
|
238
|
+
This will read your `package.json` and pull the specified version of `mesdan` from NPM, restoring the original state.
|
|
239
|
+
|
|
240
|
+
|
|
241
|
+
-------------------------------------------
|
|
242
|
+
|
|
243
|
+
Excellent questions. This touches on the core behavior of `npm link` and how it interacts with `package.json` and the `node_modules` directory.
|
|
244
|
+
|
|
245
|
+
### Question 1: "mesdan not visible in package.json. How can we keep track of it?"
|
|
246
|
+
|
|
247
|
+
You are correct, `npm link` **does not** modify your `package.json`. This is by design.
|
|
248
|
+
|
|
249
|
+
The purpose of `npm link` is to create a temporary, local development setup. It's not meant to be a permanent dependency declaration. Your `package.json` should always reflect the dependencies that a user (or a CI/CD pipeline) would install from the NPM registry.
|
|
250
|
+
|
|
251
|
+
**How to keep track of linked packages:**
|
|
252
|
+
|
|
253
|
+
1. **The `ls` command with `-g`:** You can see all globally linked packages on your system.
|
|
254
|
+
```bash
|
|
255
|
+
npm ls -g --depth=0 --link=true
|
|
256
|
+
```
|
|
257
|
+
This command lists all packages that you have run `npm link` on *in their source directories*. It will show you that `mesdan` is available globally for linking.
|
|
258
|
+
|
|
259
|
+
2. **The `ls` command in your project:** Inside your `tercefzar` project, you can see which dependencies are symlinked.
|
|
260
|
+
```bash
|
|
261
|
+
npm ls
|
|
262
|
+
```
|
|
263
|
+
In the output tree, a linked package will be clearly marked, often with an arrow `->` pointing to the absolute path of its source code on your machine. For example:
|
|
264
|
+
```
|
|
265
|
+
tercefzar@0.0.1 /path/to/your/tercefzar
|
|
266
|
+
└── mesdan@1.0.2 -> /path/to/your/local/mesdan
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
3. **Check `node_modules` directly:** In your file explorer or using `ls -l node_modules` in the terminal, you will see that `mesdan` is a symbolic link, not a regular directory.
|
|
270
|
+
|
|
271
|
+
**In summary:** The "source of truth" for knowing a package is linked is the state of your `node_modules` directory, not `package.json`.
|
|
272
|
+
|
|
273
|
+
### Question 2: "What will happen if I run `npm install mesdan` without unlinking?"
|
|
274
|
+
|
|
275
|
+
This is a great "what-if" scenario. If you run `npm install mesdan` while the symlink is active, **npm will overwrite the symlink.**
|
|
276
|
+
|
|
277
|
+
Here's the sequence of events:
|
|
278
|
+
|
|
279
|
+
1. **npm sees `mesdan` in `package.json`:** Your `tercefzar` project's `package.json` still has `"mesdan": "^1.0.2"` listed as a dependency.
|
|
280
|
+
2. **npm checks `node_modules`:** It finds a folder (which is actually a symlink) named `mesdan`.
|
|
281
|
+
3. **npm replaces it:** npm will remove the existing symlink and install the `mesdan` package from the NPM registry, downloading the version specified in your `package.json` (or the latest compatible version).
|
|
282
|
+
4. **`package.json` and `package-lock.json` are updated:** The command will ensure your `package.json` and `package-lock.json` are consistent with the newly installed version from the registry.
|
|
283
|
+
|
|
284
|
+
**The outcome:** Your local development link is broken, and you are back to using the official published version of the package.
|
|
285
|
+
|
|
286
|
+
This is actually a very simple way to revert your setup. Instead of running `npm unlink --no-save mesdan` followed by `npm install`, you could just run `npm install` (or `npm install mesdan`), and it would effectively do the same thing: restore the dependency from the NPM registry.
|
|
287
|
+
|
|
288
|
+
### Recommended Workflow Summary
|
|
289
|
+
|
|
290
|
+
| Action | Command in `tercefzar` | What it Does | Effect on `package.json` |
|
|
291
|
+
| :--- | :--- | :--- | :--- |
|
|
292
|
+
| **Start Local Dev** | 1. `npm uninstall mesdan` <br> 2. `npm link mesdan` | Removes NPM version, creates symlink to local `mesdan`. | `mesdan` is removed from dependencies. |
|
|
293
|
+
| **A Better Start** | 1. `npm link mesdan` | *If `mesdan` is already in `package.json`*, this command just creates the link. No need to uninstall first. | No change. |
|
|
294
|
+
| **End Local Dev** | `npm unlink --no-save mesdan` | Removes the symlink but keeps the dependency listed in `package.json`. | No change. |
|
|
295
|
+
| **Restore from NPM** | `npm install` | Removes the symlink and installs the package from the NPM registry based on `package.json`. | No change. |
|
|
296
|
+
|
|
297
|
+
**Pro Tip:** To avoid accidentally removing the dependency from your `package.json`, it's often best to just run `npm link mesdan` to start. If it's already installed from NPM, the link will replace it. When you're done, running `npm install` is the most reliable way to restore everything to its "official" state based on your `package.json`.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { RefObject } from
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
2
|
type MesdanHususları = {
|
|
3
3
|
ibtidaiMetin: string;
|
|
4
4
|
tekSatırMı: boolean;
|
|
@@ -9,8 +9,8 @@ type MesdanCevabı<T> = [
|
|
|
9
9
|
metin: string,
|
|
10
10
|
metinSahasıİması: RefObject<T | null>,
|
|
11
11
|
tebdilMetin: (yeniMetin: string) => void,
|
|
12
|
-
|
|
12
|
+
tebdilLatiniMi: (latiniMi: boolean) => void
|
|
13
13
|
];
|
|
14
|
-
export declare const useMesdan: <T>({ ibtidaiMetin, tekSatırMı, latiniMi, aramaTalepEdilince, }: MesdanHususları) => MesdanCevabı<T>;
|
|
14
|
+
export declare const useMesdan: <T extends HTMLInputElement | HTMLTextAreaElement>({ ibtidaiMetin, tekSatırMı, latiniMi: ibtidaiLatiniMi, aramaTalepEdilince, }: MesdanHususları) => MesdanCevabı<T>;
|
|
15
15
|
export {};
|
|
16
16
|
//# sourceMappingURL=use-mesdan.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-mesdan.d.ts","sourceRoot":"","sources":["../../memba/kanca/use-mesdan.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"use-mesdan.d.ts","sourceRoot":"","sources":["../../memba/kanca/use-mesdan.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA6D,MAAM,OAAO,CAAC;AAU7F,KAAK,eAAe,GAAG;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC,CAAC;AAEF,KAAK,YAAY,CAAC,CAAC,IAAI;IACrB,KAAK,EAAE,MAAM;IACb,gBAAgB,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC;IACrC,WAAW,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI;IACxC,cAAc,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI;CAC5C,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,gBAAgB,GAAG,mBAAmB,gFAKvE,eAAe,KAAG,YAAY,CAAC,CAAC,CA6LlC,CAAC"}
|
|
@@ -1,209 +1,173 @@
|
|
|
1
|
-
import { useEffect, useRef, useState } from
|
|
2
|
-
import { harfBüyükMü } from
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
const [
|
|
9
|
-
const [metin, tebdilMetin] = useState(ibtidaiMetin);
|
|
1
|
+
import { useEffect, useRef, useState, useLayoutEffect, useCallback } from 'react';
|
|
2
|
+
import { harfBüyükMü } from '../aletler/harf-buyuk-mu';
|
|
3
|
+
import { hazırlaAlemMevkisini, hazırlaAlemMevkisiniMenzilli } from '../nev/alem-mevkisi';
|
|
4
|
+
import { TadiliMetinEmri } from '../nev/tadili-metin-emri';
|
|
5
|
+
import { Talimat_MetniTadilEt } from '../nuve/tadil-et-metni';
|
|
6
|
+
export const useMesdan = ({ ibtidaiMetin = '', tekSatırMı, latiniMi: ibtidaiLatiniMi = false, aramaTalepEdilince, }) => {
|
|
7
|
+
const [metin, setMetin] = useState(ibtidaiMetin);
|
|
8
|
+
const [isLatin, setIsLatin] = useState(ibtidaiLatiniMi);
|
|
10
9
|
const metinSahasıİması = useRef(null);
|
|
11
10
|
const alemMevkisiİması = useRef(hazırlaAlemMevkisini(ibtidaiMetin.length));
|
|
12
|
-
|
|
13
|
-
const tebdilLatiniAramaMı = (_latiniMi) => {
|
|
14
|
-
latiniMi = _latiniMi;
|
|
15
|
-
};
|
|
11
|
+
const aramaTalepEdilinceRef = useRef(aramaTalepEdilince);
|
|
16
12
|
useEffect(() => {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
13
|
+
aramaTalepEdilinceRef.current = aramaTalepEdilince;
|
|
14
|
+
}, [aramaTalepEdilince]);
|
|
15
|
+
const alemMevkisiEvveli = useRef({ baş: 0, son: 0 });
|
|
16
|
+
const handleKeydown = useCallback(async (hadise) => {
|
|
17
|
+
const metinSahası = metinSahasıİması.current;
|
|
20
18
|
if (!metinSahası)
|
|
21
19
|
return;
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
metinSahası.
|
|
25
|
-
metinSahası.
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
20
|
+
hadise.preventDefault();
|
|
21
|
+
hadise.stopPropagation();
|
|
22
|
+
const currentMetin = metinSahası.value;
|
|
23
|
+
const alemMevkisi = hazırlaAlemMevkisiniMenzilli(metinSahası.selectionStart || 0, metinSahası.selectionEnd || 0);
|
|
24
|
+
const mesHadisesi = {
|
|
25
|
+
latiniHarf: hadise.key,
|
|
26
|
+
shiftBasılıMı: hadise.shiftKey,
|
|
27
|
+
altBasılıMı: hadise.altKey,
|
|
28
|
+
capsLockBasılıMı: harfBüyükMü(hadise.key),
|
|
29
|
+
};
|
|
30
|
+
let tadiliMetinEmri = TadiliMetinEmri.EKLE;
|
|
31
|
+
if (tekSatırMı && hadise.key === 'Enter') {
|
|
32
|
+
tadiliMetinEmri = TadiliMetinEmri.ARA;
|
|
33
|
+
aramaTalepEdilinceRef.current?.();
|
|
34
|
+
return;
|
|
29
35
|
}
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
if (aramaTalepEdilince) {
|
|
55
|
-
aramaTalepEdilince();
|
|
56
|
-
}
|
|
57
|
-
return;
|
|
58
|
-
}
|
|
59
|
-
else if (!tekSatırMı && hadise.key === "Enter") {
|
|
60
|
-
tadiliMetinEmri = TadiliMetinEmri.EKLE;
|
|
61
|
-
mesHadisesi.latiniHarf = "\n";
|
|
62
|
-
}
|
|
63
|
-
else if (hadise.key === "Delete") {
|
|
64
|
-
tadiliMetinEmri = TadiliMetinEmri.SİL_AHİRDEN;
|
|
65
|
-
}
|
|
66
|
-
else if (hadise.key === "Backspace") {
|
|
67
|
-
tadiliMetinEmri = TadiliMetinEmri.SİL_EVVELDEN;
|
|
68
|
-
}
|
|
69
|
-
else if (hadise.key === "ArrowRight") {
|
|
70
|
-
tadiliMetinEmri = TadiliMetinEmri.ALEM_SAĞA;
|
|
71
|
-
}
|
|
72
|
-
else if (hadise.key === "ArrowLeft") {
|
|
73
|
-
tadiliMetinEmri = TadiliMetinEmri.ALEM_SOLA;
|
|
74
|
-
}
|
|
75
|
-
else if (hadise.key === "ArrowUp") {
|
|
76
|
-
tadiliMetinEmri = TadiliMetinEmri.ALEM_YUKARI;
|
|
77
|
-
}
|
|
78
|
-
else if (hadise.key === "ArrowDown") {
|
|
79
|
-
tadiliMetinEmri = TadiliMetinEmri.ALEM_AŞAĞI;
|
|
80
|
-
}
|
|
81
|
-
else if (hadise.ctrlKey) {
|
|
82
|
-
if (hadise.key.toLowerCase() === "c") {
|
|
83
|
-
tadiliMetinEmri = TadiliMetinEmri.TENSİH;
|
|
84
|
-
}
|
|
85
|
-
else if (hadise.key.toLowerCase() === "x") {
|
|
86
|
-
tadiliMetinEmri = TadiliMetinEmri.KES;
|
|
87
|
-
}
|
|
88
|
-
else if (hadise.key.toLowerCase() === "v") {
|
|
89
|
-
tadiliMetinEmri = TadiliMetinEmri.YAPIŞTIR;
|
|
90
|
-
}
|
|
91
|
-
else {
|
|
92
|
-
tadiliMetinEmri = TadiliMetinEmri.BOŞ;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
else if (hadise.key === "Shift") {
|
|
96
|
-
tadiliMetinEmri = TadiliMetinEmri.BOŞ;
|
|
97
|
-
}
|
|
98
|
-
else if (hadise.key === "Alt") {
|
|
99
|
-
tadiliMetinEmri = TadiliMetinEmri.BOŞ;
|
|
100
|
-
}
|
|
101
|
-
else if (hadise.key === "AltGraph") {
|
|
102
|
-
tadiliMetinEmri = TadiliMetinEmri.BOŞ;
|
|
103
|
-
}
|
|
104
|
-
else if (hadise.key === "Meta") {
|
|
105
|
-
tadiliMetinEmri = TadiliMetinEmri.BOŞ;
|
|
106
|
-
}
|
|
107
|
-
else if (hadise.key === "Tab") {
|
|
108
|
-
tadiliMetinEmri = TadiliMetinEmri.BOŞ;
|
|
109
|
-
}
|
|
110
|
-
else if (hadise.key === "CapsLock") {
|
|
111
|
-
tadiliMetinEmri = TadiliMetinEmri.BOŞ;
|
|
112
|
-
}
|
|
113
|
-
else if (hadise.key === "Dead") {
|
|
36
|
+
else if (!tekSatırMı && hadise.key === 'Enter') {
|
|
37
|
+
tadiliMetinEmri = TadiliMetinEmri.EKLE;
|
|
38
|
+
mesHadisesi.latiniHarf = '\n';
|
|
39
|
+
}
|
|
40
|
+
else if (hadise.key === 'Delete')
|
|
41
|
+
tadiliMetinEmri = TadiliMetinEmri.SİL_AHİRDEN;
|
|
42
|
+
else if (hadise.key === 'Backspace')
|
|
43
|
+
tadiliMetinEmri = TadiliMetinEmri.SİL_EVVELDEN;
|
|
44
|
+
else if (hadise.key === 'ArrowRight')
|
|
45
|
+
tadiliMetinEmri = TadiliMetinEmri.ALEM_SAĞA;
|
|
46
|
+
else if (hadise.key === 'ArrowLeft')
|
|
47
|
+
tadiliMetinEmri = TadiliMetinEmri.ALEM_SOLA;
|
|
48
|
+
else if (hadise.key === 'ArrowUp')
|
|
49
|
+
tadiliMetinEmri = TadiliMetinEmri.ALEM_ÜSTE;
|
|
50
|
+
else if (hadise.key === 'ArrowDown')
|
|
51
|
+
tadiliMetinEmri = TadiliMetinEmri.ALEM_ALTA;
|
|
52
|
+
else if (hadise.ctrlKey) {
|
|
53
|
+
if (hadise.key.toLowerCase() === 'c')
|
|
54
|
+
tadiliMetinEmri = TadiliMetinEmri.BELLE;
|
|
55
|
+
else if (hadise.key.toLowerCase() === 'x')
|
|
56
|
+
tadiliMetinEmri = TadiliMetinEmri.KOPAR;
|
|
57
|
+
else if (hadise.key.toLowerCase() === 'v')
|
|
58
|
+
tadiliMetinEmri = TadiliMetinEmri.YERLE;
|
|
59
|
+
else
|
|
114
60
|
tadiliMetinEmri = TadiliMetinEmri.BOŞ;
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
61
|
+
}
|
|
62
|
+
else if (['Shift', 'Alt', 'AltGraph', 'Meta', 'Tab', 'CapsLock', 'Dead'].includes(hadise.key)) {
|
|
63
|
+
tadiliMetinEmri = TadiliMetinEmri.BOŞ;
|
|
64
|
+
}
|
|
65
|
+
const netice = await Talimat_MetniTadilEt(metinSahası, currentMetin, alemMevkisi, tadiliMetinEmri, mesHadisesi, true);
|
|
66
|
+
alemMevkisiİması.current = netice.alemMevkisiTadilSonrası;
|
|
67
|
+
setMetin(netice.metinTadilSonrası);
|
|
68
|
+
}, [tekSatırMı]);
|
|
69
|
+
const handlePaste = useCallback(async (hadise) => {
|
|
70
|
+
const metinSahası = metinSahasıİması.current;
|
|
71
|
+
if (!metinSahası)
|
|
72
|
+
return;
|
|
73
|
+
hadise.preventDefault();
|
|
74
|
+
const currentMetin = metinSahası.value;
|
|
75
|
+
const alemMevkisi = hazırlaAlemMevkisiniMenzilli(metinSahası.selectionStart || 0, metinSahası.selectionEnd || 0);
|
|
76
|
+
const netice = await Talimat_MetniTadilEt(metinSahası, currentMetin, alemMevkisi, TadiliMetinEmri.YERLE, { latiniHarf: '', shiftBasılıMı: false, altBasılıMı: false, capsLockBasılıMı: false }, true);
|
|
77
|
+
alemMevkisiİması.current = netice.alemMevkisiTadilSonrası;
|
|
78
|
+
setMetin(netice.metinTadilSonrası);
|
|
79
|
+
}, []);
|
|
80
|
+
const handleBeforeInput = useCallback((hadise) => {
|
|
81
|
+
const metinSahası = metinSahasıİması.current;
|
|
82
|
+
if (!metinSahası)
|
|
83
|
+
return;
|
|
84
|
+
alemMevkisiEvveli.current.baş = metinSahası.selectionStart || 0;
|
|
85
|
+
alemMevkisiEvveli.current.son = metinSahası.selectionEnd || 0;
|
|
86
|
+
}, []);
|
|
87
|
+
const handleInput = useCallback(async (hadise) => {
|
|
88
|
+
const metinSahası = metinSahasıİması.current;
|
|
89
|
+
if (!metinSahası)
|
|
90
|
+
return;
|
|
91
|
+
const harf = hadise.data || '';
|
|
92
|
+
const mesHadisesi = {
|
|
93
|
+
latiniHarf: harf.replace('. ', ' '),
|
|
94
|
+
shiftBasılıMı: false,
|
|
95
|
+
altBasılıMı: false,
|
|
96
|
+
capsLockBasılıMı: harfBüyükMü(harf),
|
|
125
97
|
};
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
mesHadisesi.latiniHarf = "\n";
|
|
151
|
-
tadiliMetinEmri = TadiliMetinEmri.EKLE;
|
|
152
|
-
}
|
|
153
|
-
else if (metinHadisesi.inputType === "deleteContentBackward") {
|
|
154
|
-
tadiliMetinEmri = TadiliMetinEmri.SİL_EVVELDEN;
|
|
155
|
-
}
|
|
156
|
-
else if (metinHadisesi.inputType === "deleteByCut") {
|
|
157
|
-
tadiliMetinEmri = TadiliMetinEmri.KES;
|
|
158
|
-
}
|
|
159
|
-
else if (metinHadisesi.inputType === "insertFromPaste") {
|
|
160
|
-
tadiliMetinEmri = TadiliMetinEmri.YAPIŞTIR;
|
|
161
|
-
}
|
|
162
|
-
const metin = metinSahası.value;
|
|
163
|
-
const alemMevkisi = hazırlaAlemMevkisiniMenzilli(alemMevkisiBaşı, alemMevkisiSonu);
|
|
164
|
-
const netice = await Talimat_MetniTadilEt(metinSahası, metin, alemMevkisi, tadiliMetinEmri, mesHadisesi, false);
|
|
165
|
-
alemMevkisiİması.current = netice.alemMevkisiTadilSonrası;
|
|
166
|
-
tebdilMetin(netice.metinTadilSonrası);
|
|
167
|
-
if (netice.sahneYenidenÇizilsinMi) {
|
|
168
|
-
tebdilYenilemeİbresi((ibre) => ibre + 1);
|
|
98
|
+
let tadiliMetinEmri = TadiliMetinEmri.EKLE;
|
|
99
|
+
if (!tekSatırMı && hadise.inputType === 'insertLineBreak') {
|
|
100
|
+
mesHadisesi.latiniHarf = '\n';
|
|
101
|
+
}
|
|
102
|
+
else if (hadise.inputType === 'deleteContentBackward') {
|
|
103
|
+
tadiliMetinEmri = TadiliMetinEmri.SİL_EVVELDEN;
|
|
104
|
+
}
|
|
105
|
+
else if (hadise.inputType === 'deleteByCut') {
|
|
106
|
+
tadiliMetinEmri = TadiliMetinEmri.KOPAR;
|
|
107
|
+
}
|
|
108
|
+
else if (hadise.inputType === 'insertFromPaste') {
|
|
109
|
+
tadiliMetinEmri = TadiliMetinEmri.YERLE;
|
|
110
|
+
}
|
|
111
|
+
const currentMetin = metinSahası.value;
|
|
112
|
+
const alemMevkisi = hazırlaAlemMevkisiniMenzilli(alemMevkisiEvveli.current.baş, alemMevkisiEvveli.current.son);
|
|
113
|
+
const netice = await Talimat_MetniTadilEt(metinSahası, currentMetin, alemMevkisi, tadiliMetinEmri, mesHadisesi, false);
|
|
114
|
+
alemMevkisiİması.current = netice.alemMevkisiTadilSonrası;
|
|
115
|
+
setMetin(netice.metinTadilSonrası);
|
|
116
|
+
}, [tekSatırMı]);
|
|
117
|
+
useEffect(() => {
|
|
118
|
+
const metinSahası = metinSahasıİması.current;
|
|
119
|
+
if (!metinSahası || isLatin) {
|
|
120
|
+
if (metinSahası) {
|
|
121
|
+
metinSahası.setAttribute('spellcheck', 'true');
|
|
169
122
|
}
|
|
123
|
+
return;
|
|
124
|
+
}
|
|
125
|
+
metinSahası.setAttribute('spellcheck', 'false');
|
|
126
|
+
metinSahası.setAttribute('autocorrect', 'off');
|
|
127
|
+
metinSahası.setAttribute('autocapitalize', 'off');
|
|
128
|
+
metinSahası.setAttribute('autocomplete', 'off');
|
|
129
|
+
if (tekSatırMı) {
|
|
130
|
+
metinSahası.setAttribute('enterkeyhint', 'done');
|
|
131
|
+
}
|
|
132
|
+
const keydownListener = (e) => {
|
|
133
|
+
handleKeydown(e);
|
|
170
134
|
};
|
|
171
|
-
const
|
|
172
|
-
|
|
173
|
-
alemMevkisiBaşı = metinSahası.selectionStart || 0;
|
|
174
|
-
alemMevkisiSonu = metinSahası.selectionEnd || 0;
|
|
135
|
+
const pasteListener = (e) => {
|
|
136
|
+
handlePaste(e);
|
|
175
137
|
};
|
|
176
|
-
const
|
|
177
|
-
|
|
178
|
-
const mesHadisesi = {
|
|
179
|
-
latiniHarf: "",
|
|
180
|
-
shiftBasılıMı: false,
|
|
181
|
-
altBasılıMı: false,
|
|
182
|
-
capsLockBasılıMı: false,
|
|
183
|
-
};
|
|
184
|
-
alemMevkisiBaşı = metinSahası.selectionStart || 0;
|
|
185
|
-
alemMevkisiSonu = metinSahası.selectionEnd || 0;
|
|
186
|
-
const metin = metinSahası.value;
|
|
187
|
-
const alemMevkisi = hazırlaAlemMevkisiniMenzilli(alemMevkisiBaşı, alemMevkisiSonu);
|
|
188
|
-
const tadiliMetinEmri = TadiliMetinEmri.YAPIŞTIR;
|
|
189
|
-
const netice = await Talimat_MetniTadilEt(metinSahası, metin, alemMevkisi, tadiliMetinEmri, mesHadisesi, true);
|
|
190
|
-
alemMevkisiİması.current = netice.alemMevkisiTadilSonrası;
|
|
191
|
-
tebdilMetin(netice.metinTadilSonrası);
|
|
138
|
+
const beforeInputListener = (e) => {
|
|
139
|
+
handleBeforeInput(e);
|
|
192
140
|
};
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
141
|
+
const inputListener = (e) => {
|
|
142
|
+
handleInput(e);
|
|
143
|
+
};
|
|
144
|
+
if (window.matchMedia('(pointer: coarse)').matches) {
|
|
145
|
+
metinSahası.addEventListener('beforeinput', beforeInputListener);
|
|
146
|
+
metinSahası.addEventListener('input', inputListener);
|
|
196
147
|
}
|
|
197
148
|
else {
|
|
198
|
-
metinSahası.addEventListener(
|
|
199
|
-
metinSahası.addEventListener(
|
|
149
|
+
metinSahası.addEventListener('keydown', keydownListener);
|
|
150
|
+
metinSahası.addEventListener('paste', pasteListener);
|
|
200
151
|
}
|
|
201
152
|
return () => {
|
|
202
|
-
metinSahası.removeEventListener(
|
|
203
|
-
metinSahası.removeEventListener(
|
|
204
|
-
metinSahası.removeEventListener(
|
|
205
|
-
metinSahası.removeEventListener(
|
|
153
|
+
metinSahası.removeEventListener('beforeinput', beforeInputListener);
|
|
154
|
+
metinSahası.removeEventListener('input', inputListener);
|
|
155
|
+
metinSahası.removeEventListener('keydown', keydownListener);
|
|
156
|
+
metinSahası.removeEventListener('paste', pasteListener);
|
|
206
157
|
};
|
|
207
|
-
}, [
|
|
208
|
-
|
|
158
|
+
}, [isLatin, tekSatırMı]);
|
|
159
|
+
useLayoutEffect(() => {
|
|
160
|
+
const metinSahası = metinSahasıİması.current;
|
|
161
|
+
if (metinSahası && !isLatin) {
|
|
162
|
+
const { başMevki, sonMevki } = alemMevkisiİması.current;
|
|
163
|
+
if (başMevki <= metinSahası.value.length && sonMevki <= metinSahası.value.length) {
|
|
164
|
+
metinSahası.setSelectionRange(başMevki, sonMevki);
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
}, [metin, isLatin]);
|
|
168
|
+
const DışarıdanMetniTebdilEt = useCallback((yeniMetin) => {
|
|
169
|
+
setMetin(yeniMetin);
|
|
170
|
+
alemMevkisiİması.current = hazırlaAlemMevkisini(yeniMetin.length);
|
|
171
|
+
}, []);
|
|
172
|
+
return [metin, metinSahasıİması, DışarıdanMetniTebdilEt, setIsLatin];
|
|
209
173
|
};
|
|
@@ -4,12 +4,12 @@ export declare enum TadiliMetinEmri {
|
|
|
4
4
|
EKLE = "EKLE",
|
|
5
5
|
SİL_EVVELDEN = "S\u0130L_EVVELDEN",
|
|
6
6
|
SİL_AHİRDEN = "S\u0130L_AH\u0130RDEN",
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
KOPAR = "KOPAR",// CUT
|
|
8
|
+
BELLE = "BELLE",// COPY
|
|
9
|
+
YERLE = "YERLE",// PASTE
|
|
10
10
|
ALEM_SAĞA = "ALEM_SA\u011EA",
|
|
11
11
|
ALEM_SOLA = "ALEM_SOLA",
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
ALEM_ÜSTE = "ALEM_\u00DCSTE",
|
|
13
|
+
ALEM_ALTA = "ALEM_ALTA"
|
|
14
14
|
}
|
|
15
15
|
//# sourceMappingURL=tadili-metin-emri.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tadili-metin-emri.d.ts","sourceRoot":"","sources":["../../memba/nev/tadili-metin-emri.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe;IACzB,GAAG,aAAQ;IACX,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,YAAY,sBAAiB;IAC7B,WAAW,0BAAgB;IAE3B,
|
|
1
|
+
{"version":3,"file":"tadili-metin-emri.d.ts","sourceRoot":"","sources":["../../memba/nev/tadili-metin-emri.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe;IACzB,GAAG,aAAQ;IACX,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,YAAY,sBAAiB;IAC7B,WAAW,0BAAgB;IAE3B,KAAK,UAAU,CAAE,MAAM;IACvB,KAAK,UAAU,CAAE,OAAO;IACxB,KAAK,UAAU,CAAE,QAAQ;IACzB,SAAS,mBAAc;IACvB,SAAS,cAAc;IACvB,SAAS,mBAAc;IACvB,SAAS,cAAc;CACxB"}
|
|
@@ -6,11 +6,11 @@ export var TadiliMetinEmri;
|
|
|
6
6
|
TadiliMetinEmri["S\u0130L_EVVELDEN"] = "S\u0130L_EVVELDEN";
|
|
7
7
|
TadiliMetinEmri["S\u0130L_AH\u0130RDEN"] = "S\u0130L_AH\u0130RDEN";
|
|
8
8
|
// TEMİZLE = "TEMİZLE",
|
|
9
|
-
TadiliMetinEmri["
|
|
10
|
-
TadiliMetinEmri["
|
|
11
|
-
TadiliMetinEmri["
|
|
9
|
+
TadiliMetinEmri["KOPAR"] = "KOPAR";
|
|
10
|
+
TadiliMetinEmri["BELLE"] = "BELLE";
|
|
11
|
+
TadiliMetinEmri["YERLE"] = "YERLE";
|
|
12
12
|
TadiliMetinEmri["ALEM_SA\u011EA"] = "ALEM_SA\u011EA";
|
|
13
13
|
TadiliMetinEmri["ALEM_SOLA"] = "ALEM_SOLA";
|
|
14
|
-
TadiliMetinEmri["
|
|
15
|
-
TadiliMetinEmri["
|
|
14
|
+
TadiliMetinEmri["ALEM_\u00DCSTE"] = "ALEM_\u00DCSTE";
|
|
15
|
+
TadiliMetinEmri["ALEM_ALTA"] = "ALEM_ALTA";
|
|
16
16
|
})(TadiliMetinEmri || (TadiliMetinEmri = {}));
|
|
@@ -27,26 +27,26 @@ export const Talimat_MetniTadilEt = async (metinSahası, metin, alemMevkisi, tad
|
|
|
27
27
|
else if (tadiliMetinEmri === TadiliMetinEmri.ALEM_SOLA) {
|
|
28
28
|
alemMevkisiTadilSonrası = kaydirAlemiSola(metin, alemMevkisi);
|
|
29
29
|
}
|
|
30
|
-
else if (tadiliMetinEmri === TadiliMetinEmri.
|
|
30
|
+
else if (tadiliMetinEmri === TadiliMetinEmri.ALEM_ÜSTE) {
|
|
31
31
|
// alemMevkisiTadilSonrası = hazırlaAlemMevkisini(0);
|
|
32
32
|
alemMevkisiTadilSonrası = kaydirAlemiYukarı(metin, alemMevkisi);
|
|
33
33
|
}
|
|
34
|
-
else if (tadiliMetinEmri === TadiliMetinEmri.
|
|
34
|
+
else if (tadiliMetinEmri === TadiliMetinEmri.ALEM_ALTA) {
|
|
35
35
|
// alemMevkisiTadilSonrası = hazırlaAlemMevkisini(metin.length);
|
|
36
36
|
alemMevkisiTadilSonrası = kaydirAlemiAşağı(metin, alemMevkisi);
|
|
37
37
|
}
|
|
38
|
-
else if (tadiliMetinEmri === TadiliMetinEmri.
|
|
38
|
+
else if (tadiliMetinEmri === TadiliMetinEmri.KOPAR) {
|
|
39
39
|
const kesilecekMetin = metin.slice(alemMevkisi.başMevki, alemMevkisi.sonMevki);
|
|
40
40
|
tensihZihne(kesilecekMetin, (netice) => { });
|
|
41
41
|
const kesilmedenSonraMetin = metin.slice(0, alemMevkisi.başMevki) + metin.slice(alemMevkisi.sonMevki);
|
|
42
42
|
alemMevkisiTadilSonrası = hazırlaAlemMevkisini(alemMevkisi.başMevki);
|
|
43
43
|
metinTadilSonrası = kesilmedenSonraMetin;
|
|
44
44
|
}
|
|
45
|
-
else if (tadiliMetinEmri === TadiliMetinEmri.
|
|
45
|
+
else if (tadiliMetinEmri === TadiliMetinEmri.BELLE) {
|
|
46
46
|
const TENSİHnacakMetin = metin.slice(alemMevkisi.başMevki, alemMevkisi.sonMevki);
|
|
47
47
|
tensihZihne(TENSİHnacakMetin, (netice) => { });
|
|
48
48
|
}
|
|
49
|
-
else if (tadiliMetinEmri === TadiliMetinEmri.
|
|
49
|
+
else if (tadiliMetinEmri === TadiliMetinEmri.YERLE) {
|
|
50
50
|
const hafızadakiMetin = await tensihZihinden();
|
|
51
51
|
if (hafızadakiMetin.length > 0) {
|
|
52
52
|
const ilavedenSonraMetin = metin.slice(0, alemMevkisi.başMevki) + hafızadakiMetin + metin.slice(alemMevkisi.sonMevki);
|