Git Product home page Git Product logo

tw5-monaco's Introduction

tw5-monaco

Supercharged code and text editor component using the excellent Monaco Editor - the editor that powers Visual Studio Code.

The integration is somewhat basic right now. See below.

Inspired by the CodeMirror plugin. Monaco Editor is licensed under MIT, copyright Microsoft.

Disclaimer

This is very alpha-level code for now, so no guarantee that it will not delete all your text and tiddlers randomly, brick and/or otherwise corrupt your installation.

Of course I don't expect that to happen and for what it's worth, I wrote this readme with it, so it seems to work alright for what it is.

Features

A lot of the out-of-the-box features of Monaco already work well.

  • Syntax highlighting and formatting for TiddlyWiki wikitext, HTML, JS, Markdown
  • Advanced multiselections and editing
  • Scrollbar minimap
  • Tiddler autocompletion
  • Hover tooltips with tiddler contents

Limitations

  • Online only. The Monaco editor source itself will be loaded remotely from unpkg.com, so editing while offline isn't possible at this point.
  • No configuration. Yet?
  • Highlighting heuristics. Wikitext highlighting might not always be accurate due to missing TiddlyWiki parser text ranges.

tw5-monaco's People

Contributors

smilyorg avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

tw5-monaco's Issues

Add better documentation / feature list

Right now most of the information is kind-of scattered around the "Editor Example" tiddler. It would be better to present the features as tiddlers with inline editors for examples. 🤔

Ask for collaboration

Hello, I am the author of TW5-CodeMirror-Enhanced. First of all, thank you very much for the work you've done!

Secondly, I've always wanted to try to bring Monaco to TiddlyWiki, because during the development process, I gradually found that CodeMirror was difficult to adapt and required some extra work; at the same time, CodeMirror didn't provide a good syntax parser generation tool, which caused many features that required parsing syntax to work to be delayed. This resulted in many features that require parsing to work being delayed.

I am also a heavy user of VSCode, so I approve of Monaco, and I am happy that someone has the same idea as me and put it into practice. So I'm going to abandon my previous CME project and work with you on this one.

Can we have further discussions?

Integrate TiddlyWiki keyboard shortcuts

Only default Monaco-provided shortcuts work right now. Integrating the shortcuts / commands provided by TiddlyWiki into the editor would make it feel more native.

VSCode plugin?

Can you pack the syntax highlighting & formatting to a vscode plugin?

Integrate TiddlyWiki palettes

Right now the Monaco theme is a default vs light theme with specific colors for wikitext highlighting. Using the TiddlyWiki color palette for the editor theme would made the editor more integrated with the rest of TW.

Package Monaco code for offline use

Somehow packaging the Monaco source code into the plugin itself would make it more portable and open to offline uses. This seems tricky as Monaco does not expect the somewhat special / vanilla JS environment of TiddlyWiki.

I'm sure it's possible with Webpack or a similar bundler 🤔

An easier intermediate step would be #5

Autocomplete on Android Phone doesn't move the cursor/caret

When I use the soft keyboard's autocomplete on my pretty new Android phone (Chrome browser, SwiftKey keyboard), the cursor/caret ends up before the inserted word, as if it didn't move at all.

Example:

I press in turn the suggested words at the top of my soft keyboard: "I", "am", "currently", "working on", "the", "next". This is what I end up with:

 am currently working on the next I

Note the leading space. The cursor/caret is blinking just to the left of "I".

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.