// ============================================================ // Editor - éditeur de code avec coloration syntaxique // ============================================================ const Icon = ({ name, size = 14, className, style, ...extra }) => { const isDiscord = name === "discord"; const stroke = isDiscord ? "none" : "currentColor"; const fill = isDiscord ? "currentColor" : "none"; const strokeWidth = isDiscord ? 0 : 2; const props = { width: size, height: size, viewBox: "0 0 24 24", fill, stroke, strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", className, style, ...extra, }; const paths = { logs: <>, cart: <>, folder: <>, folderOpen: <>, file: <>, image: <>, code: <>, upload: <>, edit: <>, trash: <>, pencil: <>, download: <>, chevR: <>, chevD: <>, save: <>, logout: <>, search: <>, refresh: <>, eye: <>, lock: <>, warn: <>, check: <>, x: <>, arrowLeft: <>, plus: <>, discord: , database: <>, copy: <>, terminal: <>, link: <>, user: <>, menu: <>, calendar: <>, globe: <>, camera: <>, zoom: <>, heart: <>, shield: <>, mapPin: <>, }; return ; }; window.Icon = Icon; // ================================================================= // Syntax highlighter - basé sur des regex, par langage // ================================================================= function escapeHtml(s) { return s.replace(/[&<>]/g, (c) => ({ "&": "&", "<": "<", ">": ">" })[c]); } const _PAT = { lua: [ [/--\[\[[\s\S]*?\]\]/, "cmt"], [/--[^\n]*/, "cmt"], [/\[\[[\s\S]*?\]\]/, "str"], [/"(?:\\.|[^"\\\n])*"/, "str"], [/'(?:\\.|[^'\\\n])*'/, "str"], [/\b(and|break|do|else|elseif|end|false|for|function|goto|if|in|local|nil|not|or|repeat|return|then|true|until|while)\b/, "kw"], [/\b(print|require|pairs|ipairs|next|type|tostring|tonumber|setmetatable|getmetatable|select|rawget|rawset|rawequal|error|assert|pcall|xpcall|unpack|table|string|math|os|io|coroutine|debug|RegisterCommand|RegisterNetEvent|AddEventHandler|TriggerEvent|TriggerClientEvent|TriggerServerEvent|CreateThread|Wait|Citizen|MySQL|DropPlayer|GetPlayerPed|PlayerPedId)\b/, "fn"], [/[A-Za-z_][\w]*(?=\s*$)/, "call"], [/\b[A-Z_][A-Z0-9_]{2,}\b/, "const"], [/\b\d+\.?\d*(?:e[+-]?\d+)?\b/i, "num"], [/[+\-*/%=<>~^#]+/, "op"], [/[{}\[\]\($,:;.]/, "punc"], ], json: [ [/"(?:\\.|[^"\\])*"(?=\s*:)/, "key"], [/"(?:\\.|[^"\\])*"/, "str"], [/\b(true|false|null)\b/, "kw"], [/-?\d+\.?\d*(?:e[+-]?\d+)?/i, "num"], [/[{}\[\]]/, "punc"], [/[,:]/, "op"], ], javascript: [ [/\/\*[\s\S]*?\*\//, "cmt"], [/\/\/[^\n]*/, "cmt"], [/`(?:\\.|[^`\\])*`/, "str"], [/"(?:\\.|[^"\\\n])*"/, "str"], [/'(?:\\.|[^'\\\n])*'/, "str"], [/\b(var|let|const|function|return|if|else|for|while|do|switch|case|break|continue|new|class|extends|this|super|import|export|from|default|async|await|try|catch|finally|throw|typeof|instanceof|in|of|null|undefined|true|false|void|delete|yield)\b/, "kw"], [/\b(console|window|document|Math|Object|Array|String|Number|JSON|Promise|Date|setTimeout|setInterval|fetch|require|module|exports|React)\b/, "fn"], [/[A-Za-z_$][\w$]*(?=\s*$)/, "call"], [/\b\d+\.?\d*(?:e[+-]?\d+)?\b/i, "num"], [/[+\-*/%=<>!&|^~?]+/, "op"], [/[{}\[\]\($,.;:]/, "punc"], ], ini: [ [/[;#][^\n]*/, "cmt"], [/\/\/[^\n]*/, "cmt"], [/\[[^\]\n]+\]/, "sect"], [/"(?:\\.|[^"\\\n])*"/, "str"], [/'(?:\\.|[^'\\\n])*'/, "str"], [/\b(set|sets|setr|sv_[\w]+|endpoint_add_tcp|endpoint_add_udp)\b/, "kw"], [/\b\d+\.?\d*\b/, "num"], [/=/, "op"], ], log: [ [/^\[[^\]\n]+\]/m, "cmt"], [/\b(ERROR|FAIL|FATAL)\b/, "err"], [/\b(WARN|WARNING)\b/, "warn"], [/\b(INFO|OK|SUCCESS)\b/, "kw"], [/\b(DEBUG|TRACE)\b/, "punc"], ], }; // pre-compile each pattern with sticky flag const _PREP = Object.fromEntries( Object.entries(_PAT).map(([k, arr]) => [ k, arr.map(([re, t]) => { const flags = re.flags.replace(/[gy]/g, "") + "y"; return [new RegExp(re.source, flags), t]; }), ]) ); function highlight(code, lang) { const pats = _PREP[lang]; if (!pats) return escapeHtml(code); let out = ""; let i = 0; const n = code.length; while (i < n) { let matched = null; for (const [re, t] of pats) { re.lastIndex = i; const m = re.exec(code); if (m && m.index === i && m[0].length > 0) { matched = { text: m[0], t }; break; } } if (matched) { out += `${escapeHtml(matched.text)}`; i += matched.text.length; } else { // Pass through unmatched char (escape it) const c = code[i]; out += c === "&" ? "&" : c === "<" ? "<" : c === ">" ? ">" : c; i++; } } return out; } // ================================================================= // Code editor - pré coloré derrière, textarea transparent au-dessus // ================================================================= function CodeEditor({ value, onChange, language = "text", readOnly = false }) { const taRef = React.useRef(null); const gutterRef = React.useRef(null); const hlRef = React.useRef(null); const lines = (value || "").split("\n").length; const gutter = Array.from({ length: lines }, (_, i) => (i + 1).toString()).join("\n"); const highlighted = React.useMemo( () => highlight(value || "", language) + "\n", [value, language] ); const onKeyDown = (e) => { if (readOnly) return; if (e.key === "Tab") { e.preventDefault(); const ta = e.currentTarget; const s = ta.selectionStart, en = ta.selectionEnd; const next = value.slice(0, s) + " " + value.slice(en); onChange(next); requestAnimationFrame(() => { ta.selectionStart = ta.selectionEnd = s + 2; }); } }; const onScroll = (e) => { const ta = e.target; if (gutterRef.current) gutterRef.current.scrollTop = ta.scrollTop; if (hlRef.current) { hlRef.current.style.transform = `translate(${-ta.scrollLeft}px, ${-ta.scrollTop}px)`; } }; return (

{gutter}

         onChange(e.target.value)}
          onKeyDown={onKeyDown}
          onScroll={onScroll}
          spellCheck={false}
          readOnly={readOnly}
          wrap="off"
        />
      </div>
    </div>
  );
}

window.CodeEditor = CodeEditor;