1a2a36f0b8
Extracts the Ace integration #2094 carried inline into a shared `elements/JsonEditor`, and renders it on every surface where the web client types or displays JSON. The element is deliberately text in, text out. The two editing contracts above it disagree about what an unparseable draft means — JsonObjectInput keeps the last valid object and says nothing to its parent, SchemaJsonField reports `undefined` and blocks submission (#2020) — so parsing, and the draft/value split that goes with it, stays with each caller. Surfaces: SchemaJsonField (inherited by all four SchemaForm consumers), a new "Edit as JSON" switch for the whole arguments object, the server.json File Contents box, the raw JSON-RPC request box, ContentViewer's JSON branch (read-only, inherited by its eleven consumers), and a new "Edit and replay" modal on a Protocol entry. Ace read-only replaces the CodeHighlight JSON path and the Prism `json` grammar loader is dropped: folding, not colorization, is what it adds, and two highlighters for one language drift. `wrap={false}` callers and untyped text that only looks like JSON keep the plain renderer. Closes #2151 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UL9retfvAXRgvi6EWk4SY4 Signed-off-by: cliffhall <cliff@futurescale.com>
39 lines
923 B
TypeScript
39 lines
923 B
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite";
|
|
import { CodeHighlight } from "./CodeHighlight";
|
|
|
|
const meta: Meta<typeof CodeHighlight> = {
|
|
title: "Elements/CodeHighlight",
|
|
component: CodeHighlight,
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof CodeHighlight>;
|
|
|
|
// No JSON story: JSON is rendered by `JsonEditor` (read-only), not here (#2151).
|
|
export const Yaml: Story = {
|
|
args: {
|
|
language: "yaml",
|
|
code: "name: my-app\nversion: 1.0.0\ntags:\n - a\n - b",
|
|
},
|
|
};
|
|
|
|
export const Xml: Story = {
|
|
args: {
|
|
language: "xml",
|
|
code: '<root>\n <item id="1">first</item>\n <item id="2">second</item>\n</root>',
|
|
},
|
|
};
|
|
|
|
export const Css: Story = {
|
|
args: {
|
|
language: "css",
|
|
code: ".card {\n color: var(--text);\n padding: 1rem;\n}",
|
|
},
|
|
};
|
|
|
|
export const UnknownLanguage: Story = {
|
|
args: {
|
|
language: "brainfuck",
|
|
code: "++++++++[>++++[>++>+++<<-]>+>->]",
|
|
},
|
|
};
|