ar-design 0.2.49 → 0.2.50

package/dist/assets/css/components/data-display/dnd/dnd.css

@@ -36,7 +36,7 @@
 }
 .ar-dnd > div.end-item {
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
-  animation: endItem ease-in-out 1000ms 0s 1 normal both;
+  animation: endItem ease-in-out 1s 0s 1 normal both;
 }
 
 .ar-dnd > div > .move {

package/dist/assets/css/components/form/text-editor/styles.css

@@ -55,3 +55,41 @@
   inset: 0;
   cursor: ns-resize;
 }
+
+.ar-alias-panel {
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  background-color: var(--white);
+  width: 200px;
+  max-height: 250px;
+  border: solid 1px var(--gray-200);
+  border-radius: var(--border-radius-lg);
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-shadow: 0 10px 15px -5px rgba(var(--black-rgb), 0.1);
+  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+  animation: opened ease-in-out 250ms 0s 1 normal both;
+}
+.ar-alias-panel > ul > li {
+  display: flex;
+  align-items: center;
+  gap: 0 0.5rem;
+  padding: 0 1rem;
+  height: var(--input-height);
+  cursor: pointer;
+}
+.ar-alias-panel > ul > li:hover {
+  background-color: var(--gray-100);
+}
+
+@keyframes opened {
+  from {
+    visibility: hidden;
+    opacity: 0;
+  }
+  to {
+    visibility: visible;
+    opacity: 1;
+  }
+}

package/dist/components/form/button/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import "../../../assets/css/components/form/button/styles.css";
 import IProps from "./IProps";
-declare const Button: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Button: React.FC<IProps>;
 export default Button;

package/dist/components/form/button/index.js

@@ -1,22 +1,9 @@
 "use client";
-import React, { forwardRef, useRef } from "react";
+import React, { useRef } from "react";
 import "../../../assets/css/components/form/button/styles.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import Tooltip from "../../feedback/tooltip";
-// const Button: React.FC<IProps> = ({
-//   children,
-//   variant = "filled",
-//   shape,
-//   status = "primary",
-//   border,
-//   size = "normal",
-//   tooltip,
-//   position,
-//   icon,
-//   upperCase,
-//   ...attributes
-// }) => {
-const Button = forwardRef(({ children, variant = "filled", shape, status = "primary", border, size = "normal", tooltip, position, icon, upperCase, ...attributes }, ref) => {
+const Button = ({ children, variant = "filled", shape, status = "primary", border, size = "normal", tooltip, position, icon, upperCase, ...attributes }) => {
     // refs
     const _button = useRef(null);
     const _buttonClassName = ["ar-button"];
@@ -29,7 +16,7 @@ const Button = forwardRef(({ children, variant = "filled", shape, status = "prim
         _buttonClassName.push(position.type);
         _buttonClassName.push(position.inset.map((_inset) => _inset).join(" "));
     }
-    const buttonElement = (React.createElement("button", { ref: ref ?? _button, ...attributes, className: _buttonClassName.map((c) => c).join(" "), onClick: (event) => {
+    const buttonElement = (React.createElement("button", { ref: _button, ...attributes, className: _buttonClassName.map((c) => c).join(" "), onClick: (event) => {
             // Disabled gelmesi durumunda işlem yapmasına izin verme...
             if (attributes.disabled)
                 return;
@@ -39,7 +26,7 @@ const Button = forwardRef(({ children, variant = "filled", shape, status = "prim
                 if (_current && !_current.classList.contains(addClass)) {
                     // Sınıf ekleniyor...
                     _current.classList.add(addClass);
-                    // Sınıf 750 milisaniye sonra kaldırlacak.
+                    // Sınıf 500 milisaniye sonra kaldırlacak.
                     setTimeout(() => _current.classList.remove(addClass), 750);
                 }
             })();
@@ -49,6 +36,6 @@ const Button = forwardRef(({ children, variant = "filled", shape, status = "prim
             icon?.element,
             React.createElement("span", null, !shape ? (typeof children === "string" && upperCase ? children.toLocaleUpperCase() : children) : ""))));
     return !tooltip ? (buttonElement) : (React.createElement(Tooltip, { text: tooltip.text, direction: tooltip.direction }, buttonElement));
-});
+};
 Button.displayName = "Button";
 export default Button;

package/dist/components/form/text-editor/IProps.d.ts

@@ -1,8 +1,16 @@
 import { IValidation } from "../../../libs/types/IGlobalProps";
-interface IProps extends IValidation {
+interface IProps<T> extends IValidation {
     name?: string;
     value?: string;
     onChange: (value?: string) => void;
+    dynamicList?: {
+        render: {
+            display: keyof T;
+            items: T[];
+        };
+        triggerKey?: string;
+        onTagged?: (tagged: any[]) => void;
+    };
     placeholder?: string;
     height?: number;
     multilang?: boolean;

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

@@ -1,5 +1,5 @@
 import "../../../assets/css/components/form/text-editor/styles.css";
 import IProps from "./IProps";
 import React from "react";
-declare const TextEditor: React.FC<IProps>;
+declare const TextEditor: <T extends object>({ name, value, onChange, dynamicList, height, validation, }: IProps<T>) => React.JSX.Element;
 export default TextEditor;

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

@@ -4,15 +4,28 @@ import { ARIcon } from "../../icons";
 import Button from "../button";
 import React, { useEffect, useRef, useState } from "react";
 import Utils from "../../../libs/infrastructure/shared/Utils";
-const TextEditor = ({ name, value, onChange, placeholder, height, multilang, validation }) => {
+import ReactDOM from "react-dom";
+const TextEditor = ({ name, value, onChange, dynamicList, 
+// placeholder,
+height, 
+// multilang,
+validation, }) => {
     // refs
     const _container = useRef(null);
     const _arIframe = useRef(null);
     const _onChange = useRef(onChange);
     const _onChangeTimeOut = useRef(null);
+    // refs -> Alias Panel
+    const _target = useRef(null);
+    const _arAliasPanel = useRef(null);
     // states
     const [iframe, setIframe] = useState(null);
     const [iframeDocument, setIframeDocument] = useState(undefined);
+    // states -> Data
+    const [tagged, setTagged] = useState([]);
+    // states -> Alias Panel
+    const [atRect, setAtRect] = useState(null);
+    const [filtered, setFiltered] = useState(null);
     // variables
     const toolbarButtons = [
         { command: "bold", icon: "Bold", tooltip: `Bold (${Utils.GetOSShortCutIcons()} + B)` },
@@ -35,7 +48,10 @@ const TextEditor = ({ name, value, onChange, placeholder, height, multilang, val
             iframeDoc.execCommand(command, true, undefined);
     };
     const handleFocus = () => _arIframe.current?.classList.add("focused");
-    const handleBlur = () => _arIframe.current?.classList.remove("focused");
+    const handleBlur = () => {
+        _arIframe.current?.classList.remove("focused");
+        // setAtRect(null);
+    };
     const handleMouseDown = () => {
         // Resizebar a tıklandığında iframe içerisinde bulunan window'un event listenerı olmadığı için orada resize çalışmayacaktır.
         // Bu yüzden önüne bir duvar örüyoruz ve mevcut sayfanın window'unda işlem yapmaya devam ediyor.
@@ -55,6 +71,44 @@ const TextEditor = ({ name, value, onChange, placeholder, height, multilang, val
             _arIframe.current.style.height = `${height}px`;
         }
     };
+    // methods -> Alias Panel
+    const handleBackSpaceKeydown = (event) => {
+        const key = event.key;
+        if (key === "Backspace" || key === "Delete") {
+            const selection = _arIframe.current?.contentDocument?.getSelection();
+            if (!selection || selection.rangeCount === 0)
+                return;
+            const range = selection.getRangeAt(0);
+            // 1. Çoklu seçim varsa: clone edip span'ları bul.
+            const contents = range.cloneContents();
+            const multiSpans = contents.querySelectorAll("span[data-tag]");
+            if (multiSpans.length > 0) {
+                event.preventDefault();
+                const tagsToRemove = [];
+                multiSpans.forEach((span) => {
+                    const tag = span.getAttribute("data-tag");
+                    if (tag)
+                        tagsToRemove.push(tag);
+                });
+                // DOM'dan temizle
+                range.deleteContents();
+                // State'ten temizle
+                setTagged((prev) => prev.filter((x) => tagsToRemove.every((tag) => !JSON.stringify(x).includes(tag))));
+                return;
+            }
+            // 2. Tekli seçim: caret bir span içindeyse sil
+            const node = selection.anchorNode;
+            const container = node?.parentElement;
+            if (container?.tagName === "SPAN" && container.dataset.tag) {
+                event.preventDefault();
+                const tag = container.dataset.tag;
+                // DOM'dan sil
+                container.remove();
+                // State'ten kaldır
+                setTagged((prev) => prev.filter((x) => !JSON.stringify(x).includes(tag ?? "")));
+            }
+        }
+    };
     // useEffects
     useEffect(() => {
         // Iframe Document yüklendikten sonra çalışacaktır.
@@ -94,7 +148,32 @@ const TextEditor = ({ name, value, onChange, placeholder, height, multilang, val
             if (_onChangeTimeOut.current)
                 clearTimeout(_onChangeTimeOut.current);
             _onChangeTimeOut.current = setTimeout(() => {
-                mutationsList.forEach(() => {
+                mutationsList.forEach((record) => {
+                    const target = record.target;
+                    _target.current = record.target;
+                    if (dynamicList) {
+                        if (target.nodeType === Node.TEXT_NODE) {
+                            const text = target.textContent ?? "";
+                            const atIndex = text.lastIndexOf(dynamicList?.triggerKey ?? "@");
+                            if (atIndex !== -1) {
+                                const afterAt = text.slice(atIndex + 1); // @ sonrası metin.
+                                const hasWhitespace = /\s/.test(afterAt);
+                                if (!hasWhitespace) {
+                                    const selection = _iframeDocument?.getSelection();
+                                    if (selection && selection.rangeCount > 0) {
+                                        const range = selection.getRangeAt(0).cloneRange();
+                                        const rect = range.getBoundingClientRect();
+                                        range.collapse(true);
+                                        setAtRect(rect);
+                                        setFiltered(afterAt);
+                                        return;
+                                    }
+                                }
+                            }
+                            // Eğer @ yoksa ya da boşluk varsa paneli kapat.
+                            setAtRect(null);
+                        }
+                    }
                     _iframeDocument?.body.innerHTML === "<br>"
                         ? _onChange.current(undefined)
                         : _onChange.current(_iframeDocument.body.innerHTML);
@@ -105,12 +184,21 @@ const TextEditor = ({ name, value, onChange, placeholder, height, multilang, val
         observer.observe(_iframeDocument.body, { childList: true, subtree: true, characterData: true, attributes: true });
         _iframeDocument.body.addEventListener("focus", handleFocus);
         _iframeDocument.body.addEventListener("blur", handleBlur);
+        if (dynamicList) {
+            _iframeDocument.body.addEventListener("keydown", handleBackSpaceKeydown);
+        }
         return () => {
             observer.disconnect();
-            _iframeDocument?.body.removeEventListener("focus", handleFocus);
-            _iframeDocument?.body.removeEventListener("blur", handleBlur);
+            _iframeDocument.body.removeEventListener("focus", handleFocus);
+            _iframeDocument.body.removeEventListener("blur", handleBlur);
+            if (dynamicList) {
+                _iframeDocument.body.removeEventListener("keydown", handleBackSpaceKeydown);
+            }
         };
     }, [iframe]);
+    useEffect(() => {
+        dynamicList?.onTagged && dynamicList?.onTagged(tagged);
+    }, [tagged]);
     useEffect(() => {
         if (!_arIframe.current)
             return;
@@ -128,6 +216,67 @@ const TextEditor = ({ name, value, onChange, placeholder, height, multilang, val
                 text: tooltip,
             }, onClick: () => execCommand(command) })))),
         React.createElement("div", { className: "resize", onMouseDown: handleMouseDown }),
-        validation?.text && React.createElement("span", { className: "validation" }, validation.text)));
+        validation?.text && React.createElement("span", { className: "validation" }, validation.text),
+        dynamicList &&
+            atRect &&
+            ReactDOM.createPortal(React.createElement("div", { ref: _arAliasPanel, className: "ar-alias-panel", style: {
+                    top: (_arIframe.current?.getBoundingClientRect().top ?? 0) + atRect.top + 20,
+                    left: (_arIframe.current?.getBoundingClientRect().left ?? 0) + atRect.left,
+                }, onClick: () => {
+                    setAtRect(null);
+                } },
+                React.createElement("ul", null, dynamicList &&
+                    dynamicList.render.items
+                        // .filter((fItem) => !tagged.some((t: T) => JSON.stringify(fItem) === JSON.stringify(t)))
+                        .filter((item) => {
+                        const displayText = item[dynamicList.render.display] ?? "";
+                        return displayText.toLowerCase().includes(filtered.toLowerCase());
+                    })
+                        .map((item, index) => (React.createElement("li", { key: index, onClick: (event) => {
+                            event.stopPropagation();
+                            const selection = iframeDocument?.getSelection();
+                            const target = _target.current;
+                            if (selection && selection.rangeCount > 0 && target && target.nodeType === Node.TEXT_NODE) {
+                                const text = target.textContent ?? "";
+                                const atIndex = text.lastIndexOf(dynamicList?.triggerKey ?? "@");
+                                if (atIndex !== -1) {
+                                    const range = selection.getRangeAt(0).cloneRange();
+                                    range.setStart(target, atIndex);
+                                    range.setEnd(target, text.length);
+                                    range.deleteContents();
+                                    const itemText = item[dynamicList.render.display] ?? "";
+                                    const span = iframeDocument?.createElement("span");
+                                    const spaceNode = iframeDocument?.createTextNode(" \u200B");
+                                    if (span && spaceNode && iframeDocument) {
+                                        span.setAttribute("data-tag", `${itemText}`);
+                                        span.style.backgroundColor = "rgba(114, 15, 103, .1)";
+                                        span.style.padding = "0 5px";
+                                        span.style.borderRadius = "2px";
+                                        span.style.color = "#720f67";
+                                        span.style.fontWeight = "bold";
+                                        span.textContent = `@${itemText}`;
+                                        // Yeni bir wrapper fragment oluştur
+                                        const fragment = iframeDocument.createDocumentFragment();
+                                        fragment.appendChild(span);
+                                        fragment.appendChild(spaceNode); // görünmez boş node, ama yazılabilir
+                                        range.insertNode(fragment);
+                                        // Cursor'u spaceNode’un sonuna yerleştir
+                                        const newRange = iframeDocument.createRange();
+                                        newRange.setStart(spaceNode, spaceNode.length);
+                                        newRange.collapse(true);
+                                        selection.removeAllRanges();
+                                        selection.addRange(newRange);
+                                        // Focus zaten varsa sorun olmayacak
+                                        const activeEl = iframeDocument?.activeElement;
+                                        activeEl?.focus();
+                                    }
+                                    setAtRect(null);
+                                    setTagged((prev) => {
+                                        const exists = prev.some((i) => JSON.stringify(i) === JSON.stringify(item));
+                                        return exists ? prev : [...prev, item];
+                                    });
+                                }
+                            }
+                        } }, item[dynamicList.render.display] ?? ""))))), document.body)));
 };
 export default TextEditor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.2.49",
+  "version": "0.2.50",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",