Giter VIP home page Giter VIP logo

codemirror-lang-spreadsheet's Introduction

CodeMirror Spreadsheet plugin

Implements spreadsheet functions support for the CodeMirror v6 code editor ๐Ÿ“œ

To build this I used the paper "A Grammar for Spreadsheet Formulas Evaluated on Two Large Datasets" and XLParser as a basis.

Features

๐Ÿ”  Support for different idioms โ€‹โ€‹(and easily extensible to include new ones)

๐Ÿงฎ Support for different decimal separators

Installation

npm install codemirror-lang-spreadsheet

Usage

First import as shown below:

import {spreadsheet} from "codemirror-lang-spreadsheet";

Call the spreadsheet function inside the editor instance. This function expects an options object as an argument. Available options are idiom(string with desired language, eg "en-US") and decimalSeparator (string with decimal separator: "." or ";")

new EditorView({
  extensions: [
    // ... your other CodeMirror extensions
    // ...
    spreadsheet({
        idiom: "en-US"
        decimalSeparator: "."
    })
  ],
  parent: document.getElementById("editor")
});

๐Ÿ‘‰ For a complete demo with highlighting, autocomplete and prettier go to: codemirror-app-spreadsheet

Supported idioms ๐Ÿ—ฃ๏ธ

Idioms are used for keywords like booleans (TRUE, FALSE) and error tokens (like #REF!, #NAME!, ...).

Currently supported:

  • en-US
  • pt-BR

It's pretty simple to add support for other idioms. See the contribution section.

Contribution

Contributions are welcome, but for every feature added, tests must be added.

To build:

npm run build

Running the tests:

npm run test

Extending idiom

To add support for a new idiom follow the steps below:

In the tokens.ts file, add the idiom as a new supported type:

TsupportedIdioms = 'en-US' | 'pt-BR'; 

Still in this file, for each of the i18n object keys, add a value with the respective idiom translation. There is no fallback to a default idiom, so even if a token is the same in another idiom, it has to be repeated.

const i18n = {
  BoolToken: {
    'en-US': ['TRUE', 'FALSE'],
    'pt-BR': ['VERDADEIRO', 'FALSO']
  },
  RefErrorToken: { // repeated token
    'en-US': '#REF!',
    'pt-BR': '#REF!'
  },
  //...
}

Now it is necessary to create tests. Create a new folder named after the idiom inside the test/i18n folder. Copy the boolean.txt and errors.txt files from another idiom and adapt them to the new idiom.

This site is a good reference for translations.

When extending support for a new idiom open a PR ๐Ÿ’™

To Do:

  • Add fallback to default idiom (en-US) when tokens are the same across idioms. This will reduce the packet size.

codemirror-lang-spreadsheet's People

Contributors

jared-hughes avatar luizzappa avatar marijnh avatar sachinraja avatar shenlu89 avatar stonecypher avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

sleiphur

codemirror-lang-spreadsheet's Issues

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.