Add files

.github/workflows/publish_demo.yml

@@ -0,0 +1,20 @@
+name: Publish Demo
+on:
+  push:
+    branches:
+      - main
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "16"
+          cache: "npm"
+      - run: npm ci
+      - run: npm run build
+      - uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist

.github/workflows/publish_package.yml

@@ -0,0 +1,29 @@
+name: Publish Package
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "16"
+          cache: "npm"
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NODE_AUTH_TOKEN}}
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "16"
+          cache: "npm"
+          registry-url: https://npm.pkg.github.com/
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx pretty-quick

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 kazk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,24 @@
+# codemirror-riscv
+
+RISC-V mode for CodeMirror.
+
+- `defineMode(CodeMirror)`: Define `riscv` mode and MIME `text/x-riscv`
+
+## Usage
+
+```javascript
+import CodeMirror from "codemirror";
+import "codemirror/addon/mode/simple.js"; // `CodeMirror.defineSimpleMode`
+
+import { defineMode } from "@codewars/codemirror-riscv";
+
+defineMode(CodeMirror);
+```
+
+## Demo
+
+See https://codewars.github.io/codemirror-riscv/
+
+## Development
+
+Run `npm run dev` to start a local dev server.

codewars.css

@@ -0,0 +1,148 @@
+/* The demo uses dark theme. Remove `.dark` from body to see the light theme */
+/* Codewars CodeMirror Theme: Light */
+:root {
+  --color-cm-editor-bg: #ffffff;
+  --color-cm-editor-fg: #000000;
+
+  --color-cm-editor-selection: #e0e0e0;
+  --color-cm-editor-gutter: #f9f9f9;
+  --color-cm-editor-gutter-border: #ebebeb;
+  --color-cm-editor-line-number: #b0b0b0;
+  --color-cm-editor-cursor: #505050;
+  --color-cm-editor-fat-cursor: #7e7;
+  --color-cm-editor-active-line-bg: #fafafa;
+  --color-cm-editor-dialog-bg: var(--color-cm-editor-bg);
+  --color-cm-editor-dialog-fg: var(--color-cm-editor-fg);
+  --color-cm-editor-hint-bg: var(--color-cm-editor-bg);
+  --color-cm-editor-hint-fg: var(--color-cm-editor-fg);
+  --color-cm-editor-hint-active-bg: var(--color-cm-editor-hint-fg);
+  --color-cm-editor-hint-active-fg: var(--color-cm-editor-hint-bg);
+  --color-cm-editor-matching-bracket: #000000;
+  --color-cm-editor-matching-bracket-outline: #bbbbbb;
+
+  --color-cm-atom: #7b007b;
+  --color-cm-attribute: #7b007b;
+  --color-cm-bracket: #333;
+  --color-cm-builtin: #46438f;
+  --color-cm-comment: #8e8e8e;
+  --color-cm-def: #aa6c0b;
+  --color-cm-error: #fdd;
+  --color-cm-keyword: #850921;
+  --color-cm-link: #448844;
+  --color-cm-meta: #6b6bbc;
+  --color-cm-number: #a34503;
+  --color-cm-operator: #445358;
+  --color-cm-placeholder: #bbb;
+  --color-cm-property: #3a4f4a;
+  --color-cm-qualifier: #555;
+  --color-cm-string: #887836;
+  --color-cm-symbol: #2aa198;
+  --color-cm-tag: #850921;
+  --color-cm-variable-2: #0d5a72;
+  --color-cm-variable-3: #006c47;
+  --color-cm-variable: #000000;
+}
+
+/* Codewars CodeMirror Theme: Dark */
+.dark {
+  --color-cm-editor-bg: #131414;
+  --color-cm-editor-fg: #cccccc;
+
+  --color-cm-editor-selection: #4a5964;
+  --color-cm-editor-gutter: #131414;
+  --color-cm-editor-gutter-border: #222222;
+  --color-cm-editor-line-number: #515151;
+  --color-cm-editor-cursor: #999999;
+  --color-cm-editor-fat-cursor: #7e7;
+  --color-cm-editor-active-line-bg: rgba(255, 255, 255, 0.05);
+  --color-cm-editor-matching-bracket: #cccccc;
+  --color-cm-editor-matching-bracket-outline: #555555;
+  --color-cm-editor-dialog-bg: var(--color-cm-editor-bg);
+  --color-cm-editor-dialog-fg: var(--color-cm-editor-fg);
+  --color-cm-editor-hint-bg: var(--color-cm-editor-bg);
+  --color-cm-editor-hint-fg: #cccccc;
+  --color-cm-editor-hint-active-bg: var(--color-cm-editor-hint-fg);
+  --color-cm-editor-hint-active-fg: var(--color-cm-editor-hint-bg);
+
+  --color-cm-atom: #dc7069;
+  --color-cm-attribute: #dc7069;
+  --color-cm-bracket: #cccccc;
+  --color-cm-builtin: #fff0f6;
+  --color-cm-comment: #969896;
+  --color-cm-def: #de935f;
+  --color-cm-error: #b15255;
+  --color-cm-keyword: #b294bb;
+  --color-cm-link: #a16a94;
+  --color-cm-meta: var(--color-cm-editor-fg);
+  --color-cm-number: #de935f;
+  --color-cm-operator: #ddd;
+  --color-cm-placeholder: #444;
+  --color-cm-property: #81a2be;
+  --color-cm-qualifier: #bbb;
+  --color-cm-string: #b5bd68;
+  --color-cm-symbol: #ddd;
+  --color-cm-tag: #f0c674;
+  --color-cm-variable-2: #89b6c5;
+  --color-cm-variable-3: #6abe79;
+  --color-cm-variable: #eee;
+}
+
+/* prettier-ignore */
+.cm-s-codewars {
+  background: var(--color-cm-editor-bg);
+  color: var(--color-cm-editor-fg);
+
+  & span.cm-atom { color: var(--color-cm-atom); }
+  & span.cm-attribute { color: var(--color-cm-attribute); }
+  & span.cm-bracket { color: var(--color-cm-bracket); }
+  & span.cm-builtin { color: var(--color-cm-builtin); }
+  & span.cm-comment { color: var(--color-cm-comment); }
+  & span.cm-def { color: var(--color-cm-def); }
+  & span.cm-error { background: var(--color-cm-error); }
+  & span.cm-keyword, & span.cm-type { color: var(--color-cm-keyword); }
+  & span.cm-link { color: var(--color-cm-link); }
+  & span.cm-meta { color: var(--color-cm-meta); }
+  & span.cm-number { color: var(--color-cm-number); }
+  & span.cm-operator { color: var(--color-cm-operator); }
+  & span.cm-property { color: var(--color-cm-property); }
+  & span.cm-qualifier { color: var(--color-cm-qualifier); }
+  & span.cm-string, & span.cm-string-2 { color: var(--color-cm-string); }
+  & span.cm-tag { color: var(--color-cm-tag); }
+  & span.cm-variable { color: var(--color-cm-variable); }
+  & span.cm-variable-2 { color: var(--color-cm-variable-2); }
+  & span.cm-variable-3 { color: var(--color-cm-variable-3); }
+
+  & .CodeMirror-scrollbar-filler {
+    background: var(--color-cm-editor-bg);
+  }
+
+  & .CodeMirror-selected {
+    background: var(--color-cm-editor-selection) !important;
+  }
+
+  & .CodeMirror-gutters {
+    background: var(--color-cm-editor-gutter);
+    border-right: 1px solid var(--color-cm-editor-gutter-border);
+  }
+
+  & .CodeMirror-linenumber {
+    color: var(--color-cm-editor-line-number);
+  }
+
+  & .CodeMirror-activeline-background {
+    background: var(--color-cm-editor-active-line-bg) !important;
+  }
+
+  & .CodeMirror-matchingbracket {
+    color: var(--color-cm-editor-matching-bracket) !important;
+    outline: 1px solid var(--color-cm-editor-matching-bracket-outline) !important;
+  }
+
+  &:not(.cm-fat-cursor) .CodeMirror-cursor {
+    border-left: 1px solid var(--color-cm-editor-cursor) !important;
+  }
+
+  &.cm-fat-cursor .CodeMirror-cursor {
+    background: var(--color-cm-editor-fat-cursor);
+  }
+}

index.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>CodeMirror: RISC-V Mode</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link rel="stylesheet" href="https://unpkg.com/awsm.css@3.0.7/dist/awsm_theme_black.min.css">
+    <style>
+      .CodeMirror { margin: auto; }
+      .text-center { text-align: center; }
+      .mb-8 { margin-bottom: 2rem; }
+      .my-4 { margin-top: 1rem; margin-bottom: 1rem; }
+      .mx-auto { margin-left: auto; margin-right: auto; }
+    </style>
+  </head>
+
+  <body class="dark">
+    <header class="text-center mb-8">
+      <img class="my-4 mx-auto" src="./riscv.svg" alt="RISC-V" width="64" height="64">
+      <h1>RISC-V mode for CodeMirror</h1>
+      <p><code>text/x-riscv</code></p>
+      <p><a href="https://github.com/codewars/codemirror-riscv">codewars/codemirror-riscv</a></p>
+    </header>
+
+    <main>
+      <textarea id="editor">
+# comment
+.globl multiply
+multiply:
+  mulw a0, a0, a1
+  ret
+</textarea>
+    </main>
+
+    <script type="module">
+      import CodeMirror from "codemirror";
+      import "codemirror/addon/mode/simple.js";
+      import "codemirror/lib/codemirror.css";
+      import "./codewars.css";
+
+      import { defineMode } from "./riscv.js";
+      defineMode(CodeMirror);
+      const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
+        mode: "riscv",
+        lineNumbers: true,
+        theme: "codewars",
+      });
+      editor.setSize(650, 500);
+    </script>
+  </body>
+</html>