Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/novacbn/svelte-codejar
Svelte Binding for the embeddable code editor CodeJar
https://github.com/novacbn/svelte-codejar
code-editor codejar svelte svelte-components
Last synced: 10 days ago
JSON representation
Svelte Binding for the embeddable code editor CodeJar
- Host: GitHub
- URL: https://github.com/novacbn/svelte-codejar
- Owner: novacbn
- License: mit
- Created: 2020-12-01T05:37:32.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-03-05T09:49:55.000Z (over 2 years ago)
- Last Synced: 2024-10-22T11:02:32.575Z (15 days ago)
- Topics: code-editor, codejar, svelte, svelte-components
- Language: TypeScript
- Homepage: https://novacbn.github.io/svelte-codejar
- Size: 704 KB
- Stars: 23
- Watchers: 3
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# `svelte-codejar`
## Description
Svelte Binding for the embeddable code editor CodeJar
## Demo
See a demo at [novacbn.github.io/svelte-codejar/demo](https://novacbn.github.io/svelte-codejar/demo)
## Sample
```html
import {CodeJar} from "@novacbn/svelte-codejar";
let value = `console.log("Hello World!");`;
```
## Syntax Highlighting
### highlight.js
> **NOTE**: The sample below uses [highlight.js](https://highlightjs.org/), see the link for more information.
```html
// We need to configure highlight.js for Javascript, and then alias the
// exports to match the function signatures that `CodeJar` Component expects
import hljs from "highlight.js/lib/core";
import javascript from "highlight.js/lib/languages/javascript";
hljs.registerLanguage("javascript", javascript);
// `highlight` takes the input code and returns the highlighted HTML markup
const highlight = (code, syntax) =>
hljs.highlight(code, {
language: syntax,
}).value;
import {CodeJar} from "@novacbn/svelte-codejar";
let value = `console.log("Hello World!");`;
```
### PrismJS
> **NOTE**: The code is the same as above, but with [PrismJS](https://prismjs.com/) calls instead of highlight.js
```html
import Prism from "prismjs";
const highlight = (code, syntax) => Prism.highlight(code, Prism.languages[syntax], syntax);
import {CodeJar} from "@novacbn/svelte-codejar";
let value = `console.log("Hello World!");`;
```
## FAQ
### SvelteKit — `ReferenceError: window is not defined`
When using the library with [SvelteKit](https://kit.svelte.dev) with SSR (serverside rendering) enabled you might get this error:
```
[vite] Error when evaluating SSR module /node_modules/codejar/codejar.js?v=4f67a3d5:
ReferenceError: window is not defined
```
Nothing much can do about that, CodeJar [makes a `window` assignment](https://github.com/antonmedv/codejar/blob/b037e29b6565269a2f797e62f51966d77cdf3978/codejar.ts#L1) in its module scope. However you can do a workaround via [`onMount`](https://svelte.dev/docs#onMount) or other similar workflows:
```html
import {onMount} from "@novacbn/svelte-codejar";
export let value = "";
// **NOTE:** Since `onMount` is only called on the client, we can just
// make our import there. And assign to our Component's scope
let CodeJar;
onMount(async () => {
({CodeJar} = await import("@novacbn/svelte-codejar"));
});
{#if CodeJar}
{:else}
{value}
{/if}
```
Only downside being you have to manually syntax highlight your code in the `{:else}` block for SSR / non-JS enabled clients.
## Developer
### Installation
Open your terminal and install via `npm`:
```bash
npm install @novacbn/svelte-codejar
```
### Properties
| Name | Typing | Default | Description |
| ---------- | ------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------- |
| addClosing | `boolean` | `true` | Sets whether the Editor automatically adds closing delimiters, like brackets, quotes, etc... |
| indentOn | `RegExp` | `/{$/` | Represents what expression is used to detect when the Editor needs to auto indent with the configured tab characters |
| spellcheck | `boolean` | `false` | Sets whether to enable the Browser's spellcheck or not |
| tab | `string` | `\t` | Sets the characters inserted whenever the end-user pressed the tab key |
| highlight | `(code: string, syntax?: string) => string` | `null` | Callback is called to highlight the current code and return the rendered HTML markup |
| syntax | `string` | `undefined` | Sets the current language mode of the Editor |
| value | `string` | `""` | Sets the current text of the Editor |
| class | `string` | `""` | Applies `class=""` to the `
` container element |
| style | `string` | `undefined` | Applies `style=""` to the `` container element |
### Events
| Name | Typing | Description |
| -------- | ------------------------------ | --------------------------------------------- |
| `change` | `CustomEvent<{value: string}>` | Fires whenever the end-user changes the input |
### API
- Components
- `CodeJar`