{"id":19346749,"url":"https://github.com/lume/code-mirror-el","last_synced_at":"2025-03-01T11:23:12.257Z","repository":{"id":209585614,"uuid":"724351709","full_name":"lume/code-mirror-el","owner":"lume","description":"A customizeable \u003ccode-mirror\u003e element that makes a code editor powered by CodeMirror. Demo:","archived":false,"fork":false,"pushed_at":"2024-05-01T23:25:00.000Z","size":56,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-21T08:20:23.083Z","etag":null,"topics":["code-editor","code-mirror","syntax-highlighting","text-editor"],"latest_commit_sha":null,"homepage":"https://codepen.io/trusktr/pen/poGZYOy?editors=1000","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/lume.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}},"created_at":"2023-11-27T22:45:29.000Z","updated_at":"2024-05-06T19:17:15.000Z","dependencies_parsed_at":"2023-11-29T00:23:38.331Z","dependency_job_id":"d49e94a1-65f1-484f-b870-ddc3585e4060","html_url":"https://github.com/lume/code-mirror-el","commit_stats":{"total_commits":14,"total_committers":1,"mean_commits":14.0,"dds":0.0,"last_synced_commit":"255a102cb35388f643d2660908ae796cb0b9426e"},"previous_names":["lume/code-mirror-element","lume/code-mirror-el"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lume%2Fcode-mirror-el","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lume%2Fcode-mirror-el/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lume%2Fcode-mirror-el/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lume%2Fcode-mirror-el/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lume","download_url":"https://codeload.github.com/lume/code-mirror-el/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240565078,"owners_count":19821478,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["code-editor","code-mirror","syntax-highlighting","text-editor"],"created_at":"2024-11-10T04:12:12.333Z","updated_at":"2025-03-01T11:23:12.231Z","avatar_url":"https://github.com/lume.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `\u003ccode-mirror\u003e` element\n\nA customizeable `\u003ccode-mirror\u003e` element that makes a code editor powered by CodeMirror.\n\n\u003cimg width=\"624\" alt=\"Screenshot 2024-05-01 at 4 21 26 PM\" src=\"https://github.com/lume/code-mirror-el/assets/297678/b5176d8a-7029-4683-b741-2eab641677f9\"\u003e\n\nUse it declaratively in plain HTML, or with web frameworks and libraries like Lit, Vue, Svelte, Solid.js, Angular, Ember, jQuery, React, and all others.\n\n\u003ch4\u003e\u003ccode\u003e\u003cstrong\u003enpm install @lume/element\u003c/strong\u003e\u003c/code\u003e\u003c/h4\u003e\n\n## Live demos\n\n- [Example on CodePen](https://codepen.io/trusktr/pen/poGZYOy?editors=1000)\n- [Examples in Lume's Docs](https://docs.lume.io)\n\n## Usage Example\n\nUse `\u003ccode-mirror\u003e` to create a text editor:\n\n```html\n\u003ccode-mirror\n\tid=\"editor\"\n\tbasic-setup\n\tlanguage=\"html\"\n\tstylesheet=\"\n\t\t/* Override the active line background color. */\n\t\t.cm-activeLine {\n\t\t\tbackground-color: #ff660044 !important\n\t\t}\n\t\"\n\u003e\n\t\u003ctemplate\u003e\n\t\t\u003ch1\u003eThis is HTML content that will appear in the text editor.\u003c/h1\u003e\n\t\t\u003cp\u003eThis is a paragraph that you'll be able to edit.\u003c/p\u003e\n\t\u003c/template\u003e\n\u003c/code-mirror\u003e\n```\n\nFor more usage examples, see [./examples/index.html](./examples/index.html). To\nrun the examples, clone the repo, then run `npm install \u0026\u0026 npm run examples`.\n\n\u003cdetails\u003e\u003csummary\u003e\u003ch2\u003eInstall and Setup\u003c/h2\u003e\u003c/summary\u003e\n\n\u003e **STUB:** This section needs expansion, but should be enough for anyone\n\u003e familiar with common build tooling in the webdev/JS ecosystem. Contributions\n\u003e very welcome!\n\n\u003cdetails\u003e\u003csummary\u003e\u003ch3\u003eCDN method (no compiler or command line knowledge needed)\u003c/h3\u003e\u003c/summary\u003e\n\nFollow the guide on [installing `lume` from\nCDN](https://docs.lume.io/guide/install/?id=cdn-easiest), but simply replace\n`lume` with `code-mirror-el`. The process is otherwise the same.\n\nHere's a [live example on\nCodePen](https://codepen.io/trusktr/pen/poGZYOy?editors=1000) based on those\ninstructions.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003ch3\u003eLocal install\u003c/h3\u003e\u003c/summary\u003e\n\nThis assumes some familiarity with command lines and JavScript build tools.\n\nFirst make sure you've installed Node.js so that we have the `npm` package manager avaiable.\n\nInstall the `code-mirror-el` package using the following in a terminal:\n\n```sh\nnpm install code-mirror-el\n```\n\nNow, `import` into your project and start using the element in HTML, JSX, `html` template tags, etc.\n\n```js\nimport 'code-mirror-el'\n\n// Ready to use\n```\n\nOptionally import the classes (especially useful for type annotations in TypeScript).\n\n```js\nimport {CodeMirror, CodeMirrorContentchangedEvent} from 'code-mirror-el'\n\nconst editor = document.querySelector('#editor') as CodeMirror\n\neditor.addEventListener('contentchanged', (event: CodeMirrorContentchangedEvent) =\u003e {\n  // ...\n})\n```\n\n\u003c/details\u003e\n\n\u003c/details\u003e\n\n## Basic Usage\n\nSee the [example on CodePen](https://codepen.io/trusktr/pen/poGZYOy?editors=1000).\n\n## TypeScript\n\n### With Solid.js JSX\n\nIf you've configured [Solid.js](https://solidjs.com) for use with TypeScript,\nthen simply importing `code-mirror-el` will register the JSX types for use\nin Solid.js JSX templates.\n\n```tsx\nimport {createSignal} from 'solid-js'\nimport 'code-mirror-el' // This is all that is needed.\n\nfunction SomeComponent() {\n\tconst [content, setContent] = createSignal('...')\n\t// ...\n\treturn \u003ccode-mirror basic-setup language=\"js\" content={content()} theme={someTheme}\u003e\u003c/code-mirror\u003e\n}\n```\n\n### With React/Preact JSX\n\nTo get type checking in React JSX templates (or Preact JSX with React compat\nenabled in your tsconfig), import the React JSX types directly, as they will not\nbe defined automatically like JSX types for Solid.js.\n\n\u003e [!Note]\n\u003e React still does not yet have syntax for sending non-string data via JS\n\u003e properties to custom elements, so you _must_ use a ref for that in React.\n\n```tsx\nimport {useState, useRef, useEffect} from 'react'\nimport 'code-mirror-el'\n// Import JSX types specifically for React (or Preact with React compat enabled in\n// your tsconfig).\nimport type {} from 'code-mirror-el/dist/CodeMirror.react-jsx'\n\nfunction SomeComponent() {\n\tconst [content, setContent] = useState('...')\n\t// ...\n\treturn \u003ccode-mirror basic-setup language=\"js\" content={content}\u003e\u003c/code-mirror\u003e\n}\n```\n\nNote that in React 18 and below, all types are simply strings, and for\nmulti-word properties use the dash-case attribute name. In React 19 and higher\nwith improved Custom Elements support for setting element JS properties, use the\ncamelCase prop names with full non-string type support.\n\nReact \u003c= 18:\n\n```jsx\nconst styleString = '...CSS code here...'\nreturn \u003ccode-mirror basic-setup language=\"js\" content={content} stylesheet={styleString}\u003e\u003c/code-mirror\u003e\n```\n\nReact \u003e= 19:\n\n```jsx\n// This will not work in React 18 and below!\nconst styleSheet = new CSSStyleSheet()\nstylesheet.replaceSync('...CSS code here...')\nreturn \u003ccode-mirror basicSetup language=\"js\" content={content} stylesheet={styleSheet}\u003e\u003c/code-mirror\u003e\n```\n\n## `\u003ccode-mirror\u003e` API\n\n### Attributes/Properties\n\n\u003e [!Note]\n\u003e Attributes in dash-case have an equivalent camelCase JS property. F.e. the\n\u003e `strip-indent` attribute maps its value to a `stripIndent` property.\n\n\u003e [!Note]\n\u003e Any non-string or non-boolean values described below are passed to the JS property directly,\n\u003e not to the attribute.\n\n#### `basic-setup`\n\nWhen true (when the attribute exists), CM's `basicSetup` will be applied.\n\nNote, use `basicSetup` in React 19+.\n\n#### `content`\n\nA string to set the content of the editor to.\n\n#### `strip-indent`\n\nWhen true (default) common indentation will be removed. Useful for\nexample if the `content` property is being set with a template string and\nthe content is indented to make the outer code more readable but the\nindentation is undersired in the result inside the editor. Set the attribute\n`strip-indent=\"false\"` to disable.\n\nNote, use `stripIndent` in React 19+.\n\n#### `trim`\n\nWhen true (default) trims leading and trailing whitespace from `content`.\n\n#### `language`\n\nThe language to use. It should be a LanguageSupport object, an empty\nextension (for plain text mode), or the strings \"html\", \"js\", or \"text\"\nwhich are shortcuts for `html()`, `javascript()`, and `[]`, respectively.\nDefaults to \"js\".\n\n#### `stylesheet`\n\nCSS styles to apply in `\u003ccode-mirror\u003e`'s ShadowRoot. Useful for overriding\nCM styles. Defaults to a style that hard codes the activeLine style to\novercome issues with selections not being visible on the active line\n(https://github.com/vadimdemedes/thememirror/issues/8).\n\nThe value can be\n\n- a string containing CSS code\n- a `\u003cstyle\u003e` element containing CSS code\n- a `\u003clink\u003e` element linking to a CSS file\n- a `CSSStyleSheet` instance\n\n#### `theme`\n\n**JS Property only.** The theme extension to use. Defaults to `noctisLilac`.\n\n#### `extensions`\n\n**JS Property only.** Any additional CodeMirror Extensions can be supplied here as an array.\n\n#### `editorView`\n\n**JS Property only.** Readonly. The CodeMirror `EditorView` instance. It will be undefined until the `\u003ccode-mirror\u003e` element is connected.\n\n#### `currentContent`\n\n**JS Property only.** Readonly. Shortcut for getting the current text content as a string.\n\n### Children\n\nThe element takes no children except for a `\u003ctemplate\u003e` element to specify\ncontent for the editor. The `content` attribute/property takes precendence over\nthis, and `\u003ctemplate\u003e` content will only be used if `content` is not set (i.e.\nwhen `content` is an empty string, which is the default).\n\nWhen `language` is set to `\"js\"`, content is taken from a `\u003cscript\u003e` child of\nthe `\u003ctemplate\u003e`, otherwise content is taken from the template content. See\n`examples/index.html` for examples of both.\n\n### Events\n\n#### `contentchanged`\n\nThe `\u003ccode-mirror\u003e` element emits a `contentchanged` event (a\n`CodeMirrorContentchangedEvent` object) whenever content of the editor changes.\nThe event has the following propeties beyond those from its base `Event` class:\n\n- `view` - The CodeMirror `EditorView`\n- `content` - Readonly getter that returns a string of the document content. Use sparingly if there are lots of lines (f.e. debounced).\n\n## Resources\n\nSee [`CodeMirror`](https://codemirror.net) for the JavaScript API powering the\nunderlying editor.\n\n`\u003ccode-mirror\u003e` is written with\n[`@lume/element`](https://github.com/lume/element), a custom element library\nwith templating and reactivity powered by Solid.js. Also see\nhttps://solid.js.com, https://primitives.solidjs.community, and\nhttps://github.com/lume/classy-solid for APIs that are useful with\n`@lume/element`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flume%2Fcode-mirror-el","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flume%2Fcode-mirror-el","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flume%2Fcode-mirror-el/lists"}