{"id":51182057,"url":"https://github.com/gepheum/skir-codemirror-plugin","last_synced_at":"2026-06-27T07:30:43.414Z","repository":{"id":347581394,"uuid":"1194549191","full_name":"gepheum/skir-codemirror-plugin","owner":"gepheum","description":"CodeMirror-based JSON editor for Skir values","archived":false,"fork":false,"pushed_at":"2026-04-19T20:30:32.000Z","size":550,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-19T21:32:49.124Z","etag":null,"topics":["codemirror","json","skir"],"latest_commit_sha":null,"homepage":"https://skir.build/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gepheum.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-28T14:05:22.000Z","updated_at":"2026-04-19T20:30:21.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/gepheum/skir-codemirror-plugin","commit_stats":null,"previous_names":["gepheum/skir-codemirror-plugin"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/gepheum/skir-codemirror-plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gepheum%2Fskir-codemirror-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gepheum%2Fskir-codemirror-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gepheum%2Fskir-codemirror-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gepheum%2Fskir-codemirror-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gepheum","download_url":"https://codeload.github.com/gepheum/skir-codemirror-plugin/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gepheum%2Fskir-codemirror-plugin/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34845749,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-27T02:00:06.362Z","response_time":126,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codemirror","json","skir"],"created_at":"2026-06-27T07:30:42.940Z","updated_at":"2026-06-27T07:30:43.407Z","avatar_url":"https://github.com/gepheum.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# skir-codemirror-plugin\n\nThis library provides a CodeMirror-based editor for editing Skir value in readable JSON format.\n\nDemo: `npx skir-studio-demo`\n\n## What It Provides\n\n- A ready-to-use `createEditorState(...)` factory for CodeMirror.\n- Schema-driven JSON template generation (when no JSON value is provided).\n- JSON validation and lint diagnostics.\n- In-editor hints and completions informed by the Skir type schema.\n- Read-only mode support for response viewing.\n- Built-in theme support:\n\t- all presets from `@uiw/codemirror-themes-all`\n\t- custom theme object\n- Optional `otherExtension` hook to append your own CodeMirror extension(s).\n\nTheme previews and names:\nhttps://www.npmjs.com/package/@uiw/codemirror-themes-all?activeTab=readme\n\n## Install\n\n```sh\nnpm install skir-codemirror-plugin\n```\n\n## Public API\n\nThe package root exports:\n\n- `createEditorState`\n- `ensureJsonState`\n- `toJson`\n- `CreateEditorStateParams` (type)\n- `BuiltinThemeName` (type)\n- `CustomTheme` (type)\n- `JsonState` (type)\n- all types from `./json/types`\n\n## Usage\n\n```ts\nimport { EditorView } from \"@codemirror/view\";\nimport {\n\tcreateEditorState,\n\ttype CreateEditorStateParams,\n} from \"skir-codemirror-plugin\";\n\nconst params: CreateEditorStateParams = {\n\tschema: {\n\t\ttype: { kind: \"primitive\", value: \"string\" },\n\t\trecords: [],\n\t},\n\t// Optional:\n\t// readOnly: true,\n\t// json: \"hello\",\n\t// theme: \"github-light\",\n\t// otherExtension: EditorView.lineWrapping,\n};\n\nconst state = createEditorState(params);\n\nnew EditorView({\n\tstate,\n\tparent: document.getElementById(\"editor\")!,\n});\n```\n\n## Read Current JSON Value\n\nUse `ensureJsonState(view, schema)` to force parse/validation against the current\ndocument and retrieve the latest state. Then call `toJson(...)` on\n`parseResult.value` when it exists.\n\n```ts\nimport { EditorView } from \"@codemirror/view\";\nimport {\n\tcreateEditorState,\n\tensureJsonState,\n\ttoJson,\n\ttype TypeDefinition,\n} from \"skir-codemirror-plugin\";\n\nconst schema: TypeDefinition = {\n\ttype: { kind: \"primitive\", value: \"string\" },\n\trecords: [],\n};\n\nconst view = new EditorView({\n\tstate: createEditorState({ schema }),\n\tparent: document.getElementById(\"editor\")!,\n});\n\nconst jsonState = ensureJsonState(view, schema);\n\nif (jsonState.parseResult.value) {\n\tconst jsonValue = toJson(jsonState.parseResult.value);\n\tconsole.log(\"Current JSON value:\", jsonValue);\n} else {\n\tconsole.log(\"Cannot convert to JSON:\", jsonState.parseResult.errors);\n}\n```\n\n## createEditorState Parameters\n\n```ts\n{\n\tschema: TypeDefinition,\n\treadOnly?: true,\n\tjson?: Json,\n\ttheme?: BuiltinThemeName | CustomTheme,\n\totherExtension?: Extension,\n}\n```\n\nBehavior:\n\n- `schema` is required and drives validation/completion.\n- If `json` is omitted, a JSON template is generated from the schema.\n- `readOnly: true` enables non-editable mode.\n- `theme` defaults to `tokyo-night`.\n- `theme` accepts any built-in preset name from `BuiltinThemeName` (powered by `@uiw/codemirror-themes-all`) or a custom theme object.\n\tSee available theme previews in the package README:\n\thttps://www.npmjs.com/package/@uiw/codemirror-themes-all?activeTab=readme\n- `otherExtension` appends extra CodeMirror extension(s) at the end of the editor extension list.\n\n## Local Dev Flow\n\nThis repository includes a minimal local dev page for previewing the editor state produced by `createEditorState`.\n\n### Run It\n\n```sh\nnpm run dev\n```\n\nThis does three things:\n\n1. Builds TypeScript sources into `dist/`.\n2. Builds the dev entry point from `dev/main.ts` into `dev-dist/main.js`.\n3. Starts `web-dev-server` and opens `/dev/index.html`.\n\nDev URL:\n\n```text\nhttp://localhost:8080/dev/index.html\n```\n\n### Dev Files\n\n- `dev/index.html`: minimal host page containing only `#editor` and module import.\n- `dev/main.ts`: creates `EditorView` with `createEditorState(...)`.\n- `dev-dist/main.js`: generated browser output from `dev/main.ts`.\n\nTo try your own schema/JSON inputs, edit `dev/main.ts` and change the `params` object.\n\n### Auto Rebuild and Reload\n\n`npm run dev` watches both:\n\n- `src/**/*.ts` -\u003e rebuilds the library into `dist/`\n- `dev/**/*.ts` -\u003e rebuilds the dev entry into `dev-dist/`\n\n`web-dev-server --watch` reloads the page when served files change.\n\n### Dev-Only Note\n\nThis flow is for local development only.\n\n- Dev sources are in `dev/`.\n- Dev compiled output is in `dev-dist/`.\n- Package distribution uses `dist/` as the runtime entrypoint.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgepheum%2Fskir-codemirror-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgepheum%2Fskir-codemirror-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgepheum%2Fskir-codemirror-plugin/lists"}