Coder Social home page Coder Social logo

psfinaki / mirrorsharp Goto Github PK

View Code? Open in Web Editor NEW

This project forked from ashmind/mirrorsharp

0.0 0.0 0.0 4.53 MB

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

License: BSD 2-Clause "Simplified" License

JavaScript 1.33% C# 67.27% PowerShell 0.45% TypeScript 27.58% CSS 3.12% HTML 0.25% Batchfile 0.01%

mirrorsharp's Introduction

Overview

MirrorSharp is a reusable client-server code editor component built on Roslyn and CodeMirror.

Features

Code completion

Code completion

Signature help

Signature help

Quick fixes

Quick fixes

Diagnostics

Diagnostics

Quick info

Quick info

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

MirrorSharp.AspNetCore

NuGet

Install-Package MirrorSharp.AspNetCore

If using Endpoint Routing (3.0+ only):

app.UseEndpoints(endpoints => {
    // ...
    endpoints.MapMirrorSharp("/mirrorsharp");
});

If not using Endpoint Routing:

app.MapMirrorSharp("/mirrosharp");

MirrorSharp.Owin

NuGet

Install-Package MirrorSharp.Owin

In your Startup:

app.MapMirrorSharp("/mirrosharp");

Client

build

Library Type NPM
mirrorsharp-codemirror-6-preview Latest npm
mirrorsharp Stable npm
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 for the full migration guide.

Build

Since mirrorsharp JS files are not bundled, you'll need to use a bundler such as Webpack, Parcel or ESBuild.

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

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.

mirrorsharp's People

Contributors

ashmind avatar baronfel avatar haacked avatar roberthusak avatar lanayx avatar johannesegger avatar kkokosa avatar teo-tsirpanis avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.