(ref = el), props.ref)} {...others} />;
24 | }
25 |
26 | function getLineNumbers(showLineNumbers: boolean) {
27 | return showLineNumbers ? lineNumbers() : [];
28 | }
29 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/codemirror/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @solid-codemirror/codemirror
2 |
3 | ## 1.0.4
4 |
5 | ### Patch Changes
6 |
7 | - b7e996c: Roll back to `rollup` for SSR serving
8 |
9 | ## 1.0.3
10 |
11 | ### Patch Changes
12 |
13 | - Fix extension configuration error due to bundling
14 |
15 | ## 1.0.2
16 |
17 | ### Patch Changes
18 |
19 | - Set `@codemirror/state` and `@codemirror/view` as dev dependencies
20 | - Updated dependencies
21 | - @solid-codemirror/core@1.0.1
22 |
23 | ## 1.0.1
24 |
25 | ### Patch Changes
26 |
27 | - Flag `@codemirror/state` and `@codemirror/view` as peer dependencies
28 |
29 | ## 1.0.0
30 |
31 | ### Major Changes
32 |
33 | - Add tests to `createReadOnly` and `createWrapLine`
34 |
35 | ## 0.0.6
36 |
37 | ### Patch Changes
38 |
39 | - Updated dependencies
40 | - @solid-codemirror/core@1.0.0
41 |
42 | ## 0.0.5
43 |
44 | ### Patch Changes
45 |
46 | - Add an optional `theme` prop that accepts an Codemirror Extension object
47 | - Updated dependencies
48 | - @solid-codemirror/core@0.0.4
49 |
50 | ## 0.0.4
51 |
52 | ### Patch Changes
53 |
54 | - 5da6aea: Add optional `extensions` option that takes in an array of extensions
55 |
56 | ## 0.0.2
57 |
58 | ### Patch Changes
59 |
60 | - 9d28f08: Add an optional boolean `wrapLine` option.
61 |
62 | ## 0.0.1
63 |
64 | ### Patch Changes
65 |
66 | - 9ae1cce:
67 | - Add `readOnly` and `showLineNumbers` option to the `CodeMirror` component
68 |
--------------------------------------------------------------------------------
/packages/codemirror/src/CodeMirror.tsx:
--------------------------------------------------------------------------------
1 | import { onMount, splitProps } from "solid-js";
2 | import type { JSX } from "solid-js/jsx-runtime";
3 | import { mergeRefs } from "@solid-primitives/refs";
4 | import { type CodeMirrorProps, createCodeMirror } from "@solid-codemirror/core";
5 | import { createExtensions, createLineNumbers, createReadOnly, createTheme, createWrapLine, ExtensionsProps, LineNumbersProps, ReadOnlyProps, ThemeProps, WrapLineProps } from "./utils";
6 |
7 | export type Props = CodeMirrorProps & LineNumbersProps & ReadOnlyProps & WrapLineProps & ExtensionsProps & ThemeProps & JSX.HTMLAttributes;
8 |
9 | export function CodeMirror(
10 | props: Props
11 | ) {
12 | let ref: HTMLDivElement | undefined;
13 |
14 | const [codemirrorProps, lineNumberProps, readOnlyProps, wrapLineProps, extensionProps, themeProps, others] = splitProps(props, ["value", "onValueChange", "onEditorMount"], ["showLineNumbers"], ["readOnly"], ["wrapLine"], ["extensions"], ["theme"]);
15 |
16 | const { createExtension } = createCodeMirror(codemirrorProps, () => ref);
17 |
18 | createLineNumbers(lineNumberProps, createExtension);
19 | createReadOnly(readOnlyProps, createExtension);
20 | createWrapLine(wrapLineProps, createExtension);
21 | createTheme(themeProps, createExtension);
22 | createExtensions(extensionProps, createExtension);
23 |
24 | return
(ref = el), props.ref)} {...others} />;
25 | }
26 |
27 |
28 |
--------------------------------------------------------------------------------
/packages/core/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@solid-codemirror/core",
3 | "version": "1.0.1",
4 | "main": "dist/index/index.common.js",
5 | "module": "dist/index/index.module.js",
6 | "types": "dist/index/index.d.ts",
7 | "exports": {
8 | ".": {
9 | "import": "./dist/index/index.module.js",
10 | "browser": {
11 | "import": "./dist/index/index.module.js",
12 | "require": "./dist/index/index.common.js"
13 | },
14 | "require": "./dist/index/index.common.js",
15 | "node": "./dist/index/index.common.js"
16 | }
17 | },
18 | "files": [
19 | "dist"
20 | ],
21 | "sideEffects": false,
22 | "repository": {
23 | "type": "git",
24 | "url": "git+https://github.com/nimeshnayaju/solid-codemirror.git"
25 | },
26 | "license": "MIT",
27 | "bugs": {
28 | "url": "https://github.com/nimeshnayaju/solid-codemirror.git/issues"
29 | },
30 | "homepage": "https://github.com/nimeshnayaju/solid-codemirror.git#readme",
31 | "scripts": {
32 | "build": "rollup -c rollup.config.ts",
33 | "dev": "rollup -c rollup.config.ts --watch",
34 | "test": "vitest run",
35 | "test:watch": "vitest watch"
36 | },
37 | "peerDependencies": {
38 | "@codemirror/state": "^6.0.0",
39 | "@codemirror/view": "^6.0.0",
40 | "solid-js": "^1.4.2"
41 | },
42 | "devDependencies": {
43 | "@codemirror/state": "^6.0.0",
44 | "@codemirror/view": "^6.0.0",
45 | "jsdom": "^20.0.0",
46 | "rollup": "^2.76.0",
47 | "rollup-preset-solid": "^1.4.0",
48 | "solid-js": "^1.4.2",
49 | "solid-testing-library": "^0.3.0",
50 | "typescript": "^4.7.3",
51 | "vite-plugin-solid": "^2.2.6",
52 | "vitest": "^0.16.0"
53 | },
54 | "publishConfig": {
55 | "access": "public"
56 | },
57 | "keywords": [
58 | "solid",
59 | "codemirror"
60 | ]
61 | }
62 |
--------------------------------------------------------------------------------
/packages/codemirror/test/CodeMirror.test.tsx:
--------------------------------------------------------------------------------
1 | import { describe, expect, it, vi, afterEach } from "vitest";
2 | import { fireEvent, screen, render } from "solid-testing-library";
3 | import { CodeMirror } from "../src";
4 | import { EditorView } from "@codemirror/view";
5 |
6 | describe("CodeMirror", () => {
7 | afterEach(() => {
8 | vi.restoreAllMocks();
9 | });
10 |
11 | it("renders", () => {
12 | const { container, unmount } = render(() =>
19 | ) {
20 | let view: EditorView | undefined;
21 |
22 | onMount(() => {
23 | const state = EditorState.create({
24 | doc: props.value,
25 | });
26 |
27 | // Construct a new EditorView instance
28 | view = new EditorView({
29 | state,
30 | parent: ref(),
31 | dispatch: (tr): void => {
32 | if (!view) return;
33 |
34 | view.update([tr]);
35 |
36 | if (tr.docChanged) {
37 | const newCode = tr.newDoc.sliceString(0, tr.newDoc.length);
38 | props.onValueChange?.(newCode);
39 | }
40 | },
41 | });
42 |
43 | props.onEditorMount?.(view);
44 |
45 | onCleanup(() => {
46 | if (!view) return;
47 | view.destroy();
48 | });
49 | });
50 |
51 | createEffect(
52 | on(
53 | () => props.value,
54 | (value) => {
55 | if (!view || value === view.state.doc.toString()) {
56 | return;
57 | }
58 | view.dispatch({
59 | changes: {
60 | from: 0,
61 | to: view.state.doc.length,
62 | insert: value,
63 | },
64 | });
65 | },
66 | { defer: true }
67 | )
68 | );
69 |
70 | /**
71 | * Creates a compartment instance with the given extension and appends it to the top-level configuration of the editor.
72 | * See {@link https://codemirror.net/examples/config/| CodeMirror Configuration} and {@link https://codemirror.net/docs/ref/#state.Compartment| Compartment} for details on editor configuration.
73 | * @param extension the extension to append
74 | */
75 | function createExtension(extension: Extension) {
76 | const compartment = new Compartment();
77 |
78 | onMount(() => {
79 | if (!view) return;
80 |
81 | view.dispatch({
82 | effects: StateEffect.appendConfig.of(compartment.of(extension)),
83 | });
84 | });
85 |
86 | /**
87 | * Reconfigures the extension compartment with the given extension.
88 | * @param extension the extension to reconfigure the extension compartment with.
89 | */
90 | function reconfigure(extension: Extension) {
91 | if (!view) return;
92 |
93 | view.dispatch({
94 | effects: compartment.reconfigure(extension),
95 | });
96 | }
97 |
98 | return reconfigure;
99 | }
100 |
101 | return { createExtension };
102 | }
103 |
--------------------------------------------------------------------------------
/packages/core/README.md:
--------------------------------------------------------------------------------
1 |
111 | ): {
112 | createExtension: (extension: Extension) => (extension: Extension) => void;
113 | };
114 | ```
115 |
116 | > **Note** Extensions in `@codemirror/core` are wrapped inside an editor [Comparment](https://codemirror.net/docs/ref/#state.Compartment). Compartments enable [dynamic reconfiguration](https://codemirror.net/examples/config/) (partially reconfigure a tree of extensions) of the editor.
117 |
118 | > **Note** The `@solid-codemirror/codemirror` package is based on `@codemirror/core`. You can view the [source code](https://github.com/nimeshnayaju/solid-codemirror/tree/main/packages/codemirror) of the library here.
119 |
120 | ## License
121 |
122 | This project is licensed under MIT.
123 |
124 | ## Author
125 |
126 | - [@nayajunimesh](https://twitter.com/nayajunimesh)
127 |
--------------------------------------------------------------------------------
/packages/codemirror/README.md:
--------------------------------------------------------------------------------
1 |
22 |
25 |
26 | {/* CodeMirror Example 2 */}
27 | Example 1
23 |
28 |
35 |
36 |
41 |
42 | {/* CodeMirror Example 3 */}
43 | Example 2
29 |
44 |
62 |
63 | );
64 | }
65 |
--------------------------------------------------------------------------------
/packages/core/test/createCodeMirror.test.tsx:
--------------------------------------------------------------------------------
1 | import { describe, expect, it, vi, afterEach } from "vitest";
2 | import { fireEvent, screen, render } from "solid-testing-library";
3 | import { createCodeMirror, CodeMirrorProps } from "../src";
4 | import { createRoot } from "solid-js";
5 | import { EditorView } from "@codemirror/view";
6 |
7 | function CodeMirror(props: CodeMirrorProps) {
8 | let ref: HTMLDivElement | undefined;
9 |
10 | createCodeMirror(props, () => ref);
11 |
12 | return ;
13 | }
14 |
15 | describe("createCodeMirror", () => {
16 | afterEach(() => {
17 | vi.restoreAllMocks();
18 | });
19 |
20 | it("handles default", () => {
21 | createRoot(async (dispose) => {
22 | let ref: HTMLDivElement | undefined;
23 | const { createExtension } = createCodeMirror({}, () => ref);
24 | expect(typeof createExtension).toBe("function");
25 |
26 | dispose();
27 | });
28 | });
29 |
30 | it("handles default value", async () => {
31 | const { unmount } = render(() => Example 3
45 |
2 | 
73 |
74 |
75 | {/* Buttons to show/hide line numbers */}
76 |
85 | );
86 | }
87 | ```
88 |
89 | > **Info** Extensions in `@codemirror/core` are wrapped inside an editor [Comparment](https://codemirror.net/docs/ref/#state.Compartment). Compartments enable [dynamic reconfiguration](https://codemirror.net/examples/config/) (partially reconfigure a tree of extensions) of the editor.
90 |
91 | ## `CodeMirrorProps`
92 |
93 | You can control the CodeMirror editor instance through the following props. **All props are optional.**
94 |
95 | | Prop | Type | Description |
96 | | --------------- | ------------------------------ | ------------------------------------------------------------------------------ |
97 | | `value` | `string` | The initial value of the editor |
98 | | `onValueChange` | `(value: string) => void` | Called whenever the editor code value changes |
99 | | `onEditorMount` | `(editor: EditorView) => void` | Called when the editor first mounts, receiving the current EditorView instance |
100 |
101 | ### Definition
102 |
103 | ```ts
104 | function createCodeMirror(
105 | props: {
106 | value?: string;
107 | onValueChange?: (value: string) => void;
108 | onEditorMount?: (editor: EditorView) => void;
109 | }
110 | ref: Accessor
77 |
80 |
83 |
84 |
2 | 
2 | 
195 |
196 |
197 | {/* Buttons to show/hide line numbers */}
198 |
207 | );
208 | }
209 | ```
210 |
211 | > **Note** Extensions in `@codemirror/core` are wrapped inside an editor [Comparment](https://codemirror.net/docs/ref/#state.Compartment). Compartments enable [dynamic reconfiguration](https://codemirror.net/examples/config/) (partially reconfigure a tree of extensions) of the editor.
212 |
213 | > **Note** The `@solid-codemirror/codemirror` package is based on `@codemirror/core`. You can view the [source code](https://github.com/nimeshnayaju/solid-codemirror/tree/main/packages/codemirror) of the library here.
214 |
215 | For more information on the usage of the `createCodeMirror` function, check out [@solid-codemirror/core](https://github.com/nimeshnayaju/solid-codemirror/tree/main/packages/core).
216 |
217 | ## License
218 |
219 | This project is licensed under MIT.
220 |
221 | ## Author
222 |
223 | - [@nayajunimesh](https://twitter.com/nayajunimesh)
224 |
--------------------------------------------------------------------------------
199 |
202 |
205 |
206 |