mirror of
https://github.com/shishantbiswas/bknd.git
synced 2026-03-19 05:46:04 +00:00
public commit
This commit is contained in:
dswbx
27
app/src/ui/components/code/CodeEditor.tsx
Normal file
27
app/src/ui/components/code/CodeEditor.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import type { ReactCodeMirrorProps } from "@uiw/react-codemirror";
|
||||
import { Suspense, lazy } from "react";
|
||||
import { useBknd } from "ui/client";
|
||||
const CodeMirror = lazy(() => import("@uiw/react-codemirror"));
|
||||
|
||||
export default function CodeEditor({ editable, basicSetup, ...props }: ReactCodeMirrorProps) {
|
||||
const b = useBknd();
|
||||
const theme = b.app.getAdminConfig().color_scheme;
|
||||
const _basicSetup: Partial<ReactCodeMirrorProps["basicSetup"]> = !editable
|
||||
? {
|
||||
...(typeof basicSetup === "object" ? basicSetup : {}),
|
||||
highlightActiveLine: false,
|
||||
highlightActiveLineGutter: false
|
||||
}
|
||||
: basicSetup;
|
||||
|
||||
return (
|
||||
<Suspense>
|
||||
<CodeMirror
|
||||
theme={theme === "dark" ? "dark" : "light"}
|
||||
editable={editable}
|
||||
basicSetup={_basicSetup}
|
||||
{...props}
|
||||
/>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
22
app/src/ui/components/code/JsonEditor.tsx
Normal file
22
app/src/ui/components/code/JsonEditor.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
import { json } from "@codemirror/lang-json";
|
||||
import type { ReactCodeMirrorProps } from "@uiw/react-codemirror";
|
||||
import { Suspense, lazy } from "react";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
const CodeEditor = lazy(() => import("./CodeEditor"));
|
||||
|
||||
export function JsonEditor({ editable, className, ...props }: ReactCodeMirrorProps) {
|
||||
return (
|
||||
<Suspense fallback={null}>
|
||||
<CodeEditor
|
||||
className={twMerge(
|
||||
"flex w-full border border-muted",
|
||||
!editable && "opacity-70",
|
||||
className
|
||||
)}
|
||||
editable={editable}
|
||||
extensions={[json()]}
|
||||
{...props}
|
||||
/>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
71
app/src/ui/components/code/JsonViewer.tsx
Normal file
71
app/src/ui/components/code/JsonViewer.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import { IconCopy } from "@tabler/icons-react";
|
||||
import { TbCopy } from "react-icons/tb";
|
||||
import { JsonView } from "react-json-view-lite";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { IconButton } from "../buttons/IconButton";
|
||||
|
||||
export const JsonViewer = ({
|
||||
json,
|
||||
title,
|
||||
expand = 0,
|
||||
showSize = false,
|
||||
showCopy = false,
|
||||
className
|
||||
}: {
|
||||
json: object;
|
||||
title?: string;
|
||||
expand?: number;
|
||||
showSize?: boolean;
|
||||
showCopy?: boolean;
|
||||
className?: string;
|
||||
}) => {
|
||||
const size = showSize ? JSON.stringify(json).length : undefined;
|
||||
const showContext = size || title || showCopy;
|
||||
|
||||
function onCopy() {
|
||||
navigator.clipboard?.writeText(JSON.stringify(json, null, 2));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={twMerge("bg-primary/5 py-3 relative overflow-hidden", className)}>
|
||||
{showContext && (
|
||||
<div className="absolute right-4 top-4 font-mono text-zinc-400 flex flex-row gap-2 items-center">
|
||||
{(title || size) && (
|
||||
<div className="flex flex-row">
|
||||
{title && <span>{title}</span>} {size && <span>({size} Bytes)</span>}
|
||||
</div>
|
||||
)}
|
||||
{showCopy && (
|
||||
<div>
|
||||
<IconButton Icon={TbCopy} onClick={onCopy} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<JsonView
|
||||
data={json}
|
||||
shouldExpandNode={(level) => level < expand}
|
||||
style={
|
||||
{
|
||||
basicChildStyle: "pl-5 ml-1 border-l border-muted hover:border-primary/20",
|
||||
container: "ml-[-10px]",
|
||||
label: "text-primary/90 font-bold font-mono mr-2",
|
||||
stringValue: "text-emerald-500 font-mono select-text",
|
||||
numberValue: "text-sky-400 font-mono",
|
||||
nullValue: "text-zinc-400 font-mono",
|
||||
undefinedValue: "text-zinc-400 font-mono",
|
||||
otherValue: "text-zinc-400 font-mono",
|
||||
booleanValue: "text-orange-400 font-mono",
|
||||
punctuation: "text-zinc-400 font-bold font-mono m-0.5",
|
||||
collapsedContent: "text-zinc-400 font-mono after:content-['...']",
|
||||
collapseIcon:
|
||||
"text-zinc-400 font-mono font-bold text-lg after:content-['▾'] mr-1.5",
|
||||
expandIcon:
|
||||
"text-zinc-400 font-mono font-bold text-lg after:content-['▸'] mr-1.5",
|
||||
noQuotesForStringValues: false
|
||||
} as any
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
123
app/src/ui/components/code/LiquidJsEditor.tsx
Normal file
123
app/src/ui/components/code/LiquidJsEditor.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import { liquid } from "@codemirror/lang-liquid";
|
||||
import type { ReactCodeMirrorProps } from "@uiw/react-codemirror";
|
||||
import { Suspense, lazy } from "react";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
const CodeEditor = lazy(() => import("./CodeEditor"));
|
||||
|
||||
const filters = [
|
||||
{ label: "abs" },
|
||||
{ label: "append" },
|
||||
{ label: "array_to_sentence_string" },
|
||||
{ label: "at_least" },
|
||||
{ label: "at_most" },
|
||||
{ label: "capitalize" },
|
||||
{ label: "ceil" },
|
||||
{ label: "cgi_escape" },
|
||||
{ label: "compact" },
|
||||
{ label: "concat" },
|
||||
{ label: "date" },
|
||||
{ label: "date_to_long_string" },
|
||||
{ label: "date_to_rfc822" },
|
||||
{ label: "date_to_string" },
|
||||
{ label: "date_to_xmlschema" },
|
||||
{ label: "default" },
|
||||
{ label: "divided_by" },
|
||||
{ label: "downcase" },
|
||||
{ label: "escape" },
|
||||
{ label: "escape_once" },
|
||||
{ label: "find" },
|
||||
{ label: "find_exp" },
|
||||
{ label: "first" },
|
||||
{ label: "floor" },
|
||||
{ label: "group_by" },
|
||||
{ label: "group_by_exp" },
|
||||
{ label: "inspect" },
|
||||
{ label: "join" },
|
||||
{ label: "json" },
|
||||
{ label: "jsonify" },
|
||||
{ label: "last" },
|
||||
{ label: "lstrip" },
|
||||
{ label: "map" },
|
||||
{ label: "minus" },
|
||||
{ label: "modulo" },
|
||||
{ label: "newline_to_br" },
|
||||
{ label: "normalize_whitespace" },
|
||||
{ label: "number_of_words" },
|
||||
{ label: "plus" },
|
||||
{ label: "pop" },
|
||||
{ label: "push" },
|
||||
{ label: "prepend" },
|
||||
{ label: "raw" },
|
||||
{ label: "remove" },
|
||||
{ label: "remove_first" },
|
||||
{ label: "remove_last" },
|
||||
{ label: "replace" },
|
||||
{ label: "replace_first" },
|
||||
{ label: "replace_last" },
|
||||
{ label: "reverse" },
|
||||
{ label: "round" },
|
||||
{ label: "rstrip" },
|
||||
{ label: "shift" },
|
||||
{ label: "size" },
|
||||
{ label: "slice" },
|
||||
{ label: "slugify" },
|
||||
{ label: "sort" },
|
||||
{ label: "sort_natural" },
|
||||
{ label: "split" },
|
||||
{ label: "strip" },
|
||||
{ label: "strip_html" },
|
||||
{ label: "strip_newlines" },
|
||||
{ label: "sum" },
|
||||
{ label: "times" },
|
||||
{ label: "to_integer" },
|
||||
{ label: "truncate" },
|
||||
{ label: "truncatewords" },
|
||||
{ label: "uniq" },
|
||||
{ label: "unshift" },
|
||||
{ label: "upcase" },
|
||||
{ label: "uri_escape" },
|
||||
{ label: "url_decode" },
|
||||
{ label: "url_encode" },
|
||||
{ label: "where" },
|
||||
{ label: "where_exp" },
|
||||
{ label: "xml_escape" }
|
||||
];
|
||||
|
||||
const tags = [
|
||||
{ label: "assign" },
|
||||
{ label: "capture" },
|
||||
{ label: "case" },
|
||||
{ label: "comment" },
|
||||
{ label: "cycle" },
|
||||
{ label: "decrement" },
|
||||
{ label: "echo" },
|
||||
{ label: "else" },
|
||||
{ label: "elsif" },
|
||||
{ label: "for" },
|
||||
{ label: "if" },
|
||||
{ label: "include" },
|
||||
{ label: "increment" },
|
||||
{ label: "layout" },
|
||||
{ label: "liquid" },
|
||||
{ label: "raw" },
|
||||
{ label: "render" },
|
||||
{ label: "tablerow" },
|
||||
{ label: "unless" },
|
||||
{ label: "when" }
|
||||
];
|
||||
|
||||
export function LiquidJsEditor({ editable, ...props }: ReactCodeMirrorProps) {
|
||||
return (
|
||||
<Suspense fallback={null}>
|
||||
<CodeEditor
|
||||
className={twMerge(
|
||||
"flex w-full border border-muted bg-white rounded-lg",
|
||||
!editable && "opacity-70"
|
||||
)}
|
||||
editable={editable}
|
||||
extensions={[liquid({ filters, tags })]}
|
||||
{...props}
|
||||
/>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user