ar-design 0.2.6 → 0.2.8
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.
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
.ar-text-editor {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
gap: 0;
|
|
2
5
|
width: 100%;
|
|
3
6
|
}
|
|
4
7
|
.ar-text-editor > .toolbar {
|
|
@@ -8,9 +11,44 @@
|
|
|
8
11
|
}
|
|
9
12
|
.ar-text-editor > iframe {
|
|
10
13
|
width: 100%;
|
|
14
|
+
border-bottom: none;
|
|
15
|
+
border-bottom-left-radius: 0 !important;
|
|
16
|
+
border-bottom-right-radius: 0 !important;
|
|
17
|
+
}
|
|
18
|
+
.ar-text-editor > .resize {
|
|
19
|
+
position: relative;
|
|
20
|
+
background-color: var(--gray-200);
|
|
21
|
+
width: 100%;
|
|
22
|
+
height: 1.5rem;
|
|
23
|
+
border: solid 1px transparent;
|
|
24
|
+
border-top-color: var(--gray-400);
|
|
25
|
+
border-left-color: var(--gray-300);
|
|
26
|
+
border-right-color: var(--gray-300);
|
|
27
|
+
border-bottom-color: var(--gray-300);
|
|
28
|
+
border-bottom-left-radius: var(--border-radius-sm);
|
|
29
|
+
border-bottom-right-radius: var(--border-radius-sm);
|
|
30
|
+
cursor: ns-resize;
|
|
11
31
|
}
|
|
32
|
+
.ar-text-editor > .resize::before {
|
|
33
|
+
content: "";
|
|
34
|
+
position: absolute;
|
|
35
|
+
top: 50%;
|
|
36
|
+
left: 50%;
|
|
37
|
+
transform: translate(-50%, -50%);
|
|
38
|
+
background-color: var(--gray-500);
|
|
39
|
+
width: 2rem;
|
|
40
|
+
height: 0.1rem;
|
|
41
|
+
box-shadow: 0px -5px 0 0px var(--gray-500), 0px 5px 0 0px var(--gray-500);
|
|
42
|
+
}
|
|
43
|
+
|
|
12
44
|
.ar-text-editor > .validation {
|
|
13
45
|
color: var(--danger);
|
|
14
46
|
font-size: 0.8rem;
|
|
15
47
|
font-weight: 600;
|
|
16
48
|
}
|
|
49
|
+
|
|
50
|
+
.ar-text-editor--block-item {
|
|
51
|
+
position: absolute;
|
|
52
|
+
inset: 0;
|
|
53
|
+
cursor: ns-resize;
|
|
54
|
+
}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import Utils from "../../../libs/infrastructure/shared/Utils";
|
|
2
3
|
import React, { useEffect, useRef, useState } from "react";
|
|
3
|
-
import { ARIcon } from "../../icons";
|
|
4
4
|
import Button from "../button";
|
|
5
|
+
import { ARIcon } from "../../icons";
|
|
5
6
|
import "../../../assets/css/components/form/text-editor/styles.css";
|
|
6
|
-
import Utils from "../../../libs/infrastructure/shared/Utils";
|
|
7
7
|
const TextEditor = ({ name, value, onChange, placeholder, validation }) => {
|
|
8
8
|
// refs
|
|
9
9
|
const _firstLoad = useRef(false);
|
|
10
|
+
const _container = useRef(null);
|
|
10
11
|
const _arIframe = useRef(null);
|
|
11
12
|
// states
|
|
12
13
|
const [iframe, setIframe] = useState(null);
|
|
@@ -34,6 +35,25 @@ const TextEditor = ({ name, value, onChange, placeholder, validation }) => {
|
|
|
34
35
|
};
|
|
35
36
|
const handleFocus = () => _arIframe.current?.classList.add("focused");
|
|
36
37
|
const handleBlur = () => _arIframe.current?.classList.remove("focused");
|
|
38
|
+
const handleMouseDown = () => {
|
|
39
|
+
// Resizebar a tıklandığında iframe içerisinde bulunan window'un event listenerı olmadığı için orada resize çalışmayacaktır.
|
|
40
|
+
// Bu yüzden önüne bir duvar örüyoruz ve mevcut sayfanın window'unda işlem yapmaya devam ediyor.
|
|
41
|
+
const resizeItem = document.createElement("div");
|
|
42
|
+
resizeItem.classList.add("ar-text-editor--block-item");
|
|
43
|
+
_container.current?.appendChild(resizeItem);
|
|
44
|
+
window.addEventListener("mousemove", handleResize);
|
|
45
|
+
window.addEventListener("mouseup", () => {
|
|
46
|
+
resizeItem.remove();
|
|
47
|
+
window.removeEventListener("mousemove", handleResize);
|
|
48
|
+
});
|
|
49
|
+
};
|
|
50
|
+
const handleResize = (event) => {
|
|
51
|
+
if (_arIframe.current) {
|
|
52
|
+
const rect = _arIframe.current.getBoundingClientRect();
|
|
53
|
+
const height = (rect.height += event.movementY);
|
|
54
|
+
_arIframe.current.style.height = `${height}px`;
|
|
55
|
+
}
|
|
56
|
+
};
|
|
37
57
|
// useEffects
|
|
38
58
|
// Iframe Document yüklendikten sonra çalışacaktır. (Bir defa çalışır.)
|
|
39
59
|
useEffect(() => {
|
|
@@ -76,11 +96,12 @@ const TextEditor = ({ name, value, onChange, placeholder, validation }) => {
|
|
|
76
96
|
}
|
|
77
97
|
};
|
|
78
98
|
}, []);
|
|
79
|
-
return (React.createElement("div", { className: "ar-text-editor" },
|
|
99
|
+
return (React.createElement("div", { ref: _container, className: "ar-text-editor" },
|
|
80
100
|
React.createElement("div", { className: "toolbar" }, toolbarButtons.map(({ command, icon, tooltip }) => (React.createElement(Button, { key: command, variant: "borderless", status: "secondary", icon: { element: React.createElement(ARIcon, { icon: icon, size: 18, fill: "var(--gray-700)" }) }, tooltip: {
|
|
81
101
|
text: tooltip,
|
|
82
102
|
}, onClick: () => execCommand(command) })))),
|
|
83
103
|
React.createElement("iframe", { ref: _arIframe, name: name, className: _iframeClassName.map((c) => c).join(" ") }),
|
|
104
|
+
React.createElement("div", { className: "resize", onMouseDown: handleMouseDown }),
|
|
84
105
|
validation?.text && React.createElement("span", { className: "validation" }, validation.text)));
|
|
85
106
|
};
|
|
86
107
|
export default TextEditor;
|