https://github.com/sibiraj-s/prosemirror-codemirror-6

Prosemirror with Codemirror 6 (demo)
https://github.com/sibiraj-s/prosemirror-codemirror-6

codemirror codemirror-6 codemirror-next prosemirror

Last synced: about 1 month ago
JSON representation

Prosemirror with Codemirror 6 (demo)

• Host: GitHub
• URL: https://github.com/sibiraj-s/prosemirror-codemirror-6
• Owner: sibiraj-s
• License: mit
• Created: 2021-01-25T17:24:50.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2024-09-27T01:53:18.000Z (5 months ago)
• Last Synced: 2024-12-25T00:50:13.015Z (about 2 months ago)
• Topics: codemirror, codemirror-6, codemirror-next, prosemirror
• Language: TypeScript
• Homepage: https://sibiraj-s.github.io/prosemirror-codemirror-6/
• Size: 1 MB
• Stars: 15
• Watchers: 4
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ProseMirror + CodeMirror 6

Based on the example from https://prosemirror.net/examples/codemirror/. This is just an example setup and might not be very reusable. Use this to get something up-and-running quickly.

[![Tests](https://github.com/sibiraj-s/prosemirror-codemirror-6/actions/workflows/test.yml/badge.svg)](https://github.com/sibiraj-s/prosemirror-codemirror-6/actions/workflows/test.yml)

[![NPM Version](https://badgen.net/npm/v/prosemirror-codemirror-6)](https://npm.im/prosemirror-codemirror-6)

## Getting Started

```bash

npm i prosemirror-codemirror-6

```

### Usage

```ts

import { EditorView } from 'prosemirror-view';

import { EditorState } from 'prosemirror-state';

import { Schema } from 'prosemirror-model';

import { nodes as basicNodes, marks } from 'prosemirror-schema-basic';

import { CodeMirrorView, node as codeMirrorNode } from 'prosemirror-codemirror-6';

import { minimalSetup } from 'codemirror';

import { javascript } from '@codemirror/lang-javascript';

const nodes = {

  ...basicNodes,

  code_mirror: codeMirrorNode,

};

const schema = new Schema({

  nodes,

  marks,

});

const editor = new EditorView(element, {

  state: EditorState.create({

    schema,

  }),

  nodeViews: {

    code_mirror: (node, view, getPos) =>

      new CodeMirrorView({

        node,

        view,

        getPos,

        cmOptions: {

          extensions: [minimalSetup, javascript()],

        },

      }),

  },

});

```

## Contributing

Install the dependencies

```bash

npm install

```

Start the development server

```bash

npm run dev

```

### Related Links

- ProseMirror - https://prosemirror.net/

- CodeMirror 6 - https://codemirror.net

- Migrating to CodeMirror 6 - https://codemirror.net/6/docs/migration/