Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ashmind/mirrorsharp

MirrorSharp is a code editor <textarea> built on Roslyn and CodeMirror
https://github.com/ashmind/mirrorsharp

Last synced: 9 days ago
JSON representation

MirrorSharp is a code editor <textarea> built on Roslyn and CodeMirror

Host: GitHub
URL: https://github.com/ashmind/mirrorsharp
Owner: ashmind
License: bsd-2-clause
Created: 2016-09-13T10:37:03.000Z (about 8 years ago)
Default Branch: main
Last Pushed: 2024-05-16T16:14:18.000Z (6 months ago)
Last Synced: 2024-05-29T07:01:09.903Z (5 months ago)
Language: C#
Homepage:
Size: 4.42 MB
Stars: 218
Watchers: 12
Forks: 41
Open Issues: 41
Metadata Files:
- Readme: README.md
- License: LICENSE.md

Awesome Lists containing this project

awesome - ashmind/mirrorsharp - MirrorSharp is a code editor \<textarea> built on Roslyn and CodeMirror (C\#)
awesome-roslyn - MirrorSharp - Online C#, VB.NET, and F# code editor. Features code completion, method signature help, quick fixes, and diagnostics. (Open Source Projects)

README

        ## Overview

MirrorSharp is a reusable client-server code editor component built on [Roslyn](https://github.com/dotnet/roslyn) and [CodeMirror](https://codemirror.net/).

### Features

#### Code completion

![Code completion](📄readme/code-completion.png)

#### Signature help

![Signature help](📄readme/signature-help.png)

#### Quick fixes

![Quick fixes](📄readme/quick-fixes.png)

#### Diagnostics

![Diagnostics](📄readme/diagnostics.png)

#### Quick info

![Quick info](📄readme/infotips.png)

## Usage

You'll need the following:

- **MirrorSharp.AspNetCore** on the server (MirrorSharp.Owin if .NET Framework)

- **mirrorsharp.js** — client library that provides the user interface

### Server

[![build](https://img.shields.io/github/actions/workflow/status/ashmind/mirrorsharp/dotnet.yml?style=flat-square)](https://github.com/ashmind/mirrorsharp/actions/workflows/dotnet.yml)

#### MirrorSharp.AspNetCore

[![NuGet](https://img.shields.io/nuget/v/MirrorSharp.AspNetCore.svg?style=flat-square)](https://www.nuget.org/packages/MirrorSharp.AspNetCore)

```powershell

Install-Package MirrorSharp.AspNetCore

```

If using Endpoint Routing (3.0+ only):

```csharp

app.UseEndpoints(endpoints => {

    // ...

    endpoints.MapMirrorSharp("/mirrorsharp");

});

```

If not using Endpoint Routing:

```csharp

app.MapMirrorSharp("/mirrosharp");

```

#### MirrorSharp.Owin

[![NuGet](https://img.shields.io/nuget/v/MirrorSharp.Owin.svg?style=flat-square)](https://www.nuget.org/packages/MirrorSharp.Owin)

```powershell

Install-Package MirrorSharp.Owin

```

In your `Startup`:

```csharp

app.MapMirrorSharp("/mirrosharp");

```

### Client

[![build](https://img.shields.io/github/actions/workflow/status/ashmind/mirrorsharp/web-assets.yml?style=flat-square)](https://github.com/ashmind/mirrorsharp/actions/workflows/web-assets.yml)

| Library     | Type   | NPM                                                                                                                                                                                 |

|-------------|--------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|

| mirrorsharp-codemirror-6-preview | Latest  | [![npm](https://img.shields.io/npm/v/mirrorsharp-codemirror-6-preview.svg?style=flat-square)](https://www.npmjs.com/package/mirrorsharp-codemirror-6-preview) |

| mirrorsharp                      | Stable  | [![npm](https://img.shields.io/npm/v/mirrorsharp.svg?style=flat-square)](https://www.npmjs.com/package/mirrorsharp)                                           |

```

npm install mirrorsharp-codemirror-6-preview --save

```

Note: The name is temporary — once all testing on 6-preview is completed, it will become mirrorsharp 3.

#### Breaking Changes

Version `mirrorsharp-codemirror-6-preview` (future mirrorsharp 3.0+) includes a number of breaking changes — see [migration-from-2.md](WebAssets/docs/migration-from-2.md) for the full migration guide.

#### Build

Since mirrorsharp JS files are not bundled, you'll need to use a bundler such as [Webpack](https://webpack.js.org), [Parcel](https://parceljs.org/) or [ESBuild](https://esbuild.github.io/).

You can see a Parcel example in AspNetCore.Demo.  

Note that mirrorsharp is written in TypeScript, and the package includes full TypeScript types.

**Note:** You need to manually require/import `mirrorsharp/mirrorsharp.css` into your bundle.

#### Usage

```javascript

import mirrorsharp from 'mirrorsharp-codemirror-6-preview';

mirrorsharp(container, { serviceUrl: 'wss://your_app_root/mirrorsharp' });

```

If you're not using HTTPS, you'll likely need `ws://` instead of `wss://`.

Note that the container is an actual HTML element, and not a CSS selector.

## API

TODO. In general the idea is that "it just works", however customization is a goal and some options are already available.

## Demos

You can check out the demos if you clone the repository locally.  

After cloning, run `ms setup` to build and prepare everything.

## Testing

TODO, but see MirrorSharp.Testing on NuGet.