ui: change highlight style

packages/hydrooj/src/entry/common.ts

@@ -109,7 +109,7 @@ export async function setting(pending: string[], fail: string[], modelSetting: t
                     const category = cfg[key].category || 'system';
                     map[category](
                         modelSetting.Setting(
-                            name, category === 'system' ? `${name}.${key}` : key, val, cfg[key].type || 'text',
+                            cfg[key].family || name, category === 'system' ? `${name}.${key}` : key, val, cfg[key].type || 'text',
                             cfg[key].name || key, cfg[key].desc || '',
                         ),
                     );

packages/hydrooj/src/handler/home.ts

@@ -1,9 +1,11 @@
 import { ObjectID } from 'mongodb';
+import yaml from 'js-yaml';
 import {
     VerifyPasswordError, UserAlreadyExistError, InvalidTokenError,
-    NotFoundError, UserNotFoundError, PermissionError, DomainAlreadyExistsError,
+    NotFoundError, UserNotFoundError, PermissionError,
+    DomainAlreadyExistsError, ValidationError,
 } from '../error';
-import { Mdoc } from '../interface';
+import { Mdoc, Setting } from '../interface';
 import * as bus from '../service/bus';
 import {
     Route, Connection, Handler, ConnectionHandler, param, Types,
@@ -188,6 +190,30 @@ class HomeSecurityHandler extends Handler {
     }
 }
 
+function set(s: Setting, key: string, value: any) {
+    if (s) {
+        if (s.flag & setting.FLAG_DISABLED) return undefined;
+        if ((s.flag & setting.FLAG_SECRET) && !value) return undefined;
+        if (s.type === 'boolean') {
+            if (value === 'on') return true;
+            return false;
+        }
+        if (s.type === 'number') {
+            if (!Number.isSafeInteger(+value)) throw new ValidationError(key);
+            return +value;
+        }
+        if (s.subType === 'yaml') {
+            try {
+                yaml.load(value);
+            } catch (e) {
+                throw new ValidationError(key);
+            }
+        }
+        return value;
+    }
+    return undefined;
+}
+
 class HomeSettingsHandler extends Handler {
     @param('category', Types.Name)
     async get(domainId: string, category: string) {
@@ -213,23 +239,18 @@ class HomeSettingsHandler extends Handler {
 
     async post(args: any) {
         const $set = {};
-        if (args.category === 'domain') {
-            for (const key in args) {
-                if (setting.DOMAIN_USER_SETTINGS_BY_KEY[key]
-                    && !(setting.DOMAIN_USER_SETTINGS_BY_KEY[key].flag & setting.FLAG_DISABLED)) {
-                    $set[key] = args[key];
-                }
-            }
-            await domain.setUserInDomain(args.domainId, this.user._id, $set);
-        } else {
-            for (const key in args) {
-                if (setting.SETTINGS_BY_KEY[key]
-                    && !(setting.SETTINGS_BY_KEY[key].flag & setting.FLAG_DISABLED)) {
-                    $set[key] = args[key];
-                }
-            }
-            await user.setById(this.user._id, $set);
+        const booleanKeys = args.booleanKeys || {};
+        delete args.booleanKeys;
+        const setter = args.category === 'domain'
+            ? (s) => domain.setUserInDomain(args.domainId, this.user._id, s)
+            : (s) => user.setById(this.user._id, s);
+        const settings = args.category === 'domain' ? setting.DOMAIN_USER_SETTINGS_BY_KEY : setting.SETTINGS_BY_KEY;
+        for (const key in args) {
+            const val = set(settings[key], key, args[key]);
+            if (val) $set[key] = val;
         }
+        for (const key in booleanKeys) if (!args[key]) $set[key] = false;
+        await setter($set);
         this.back();
     }
 }

packages/ui-default/components/highlighter/highlighter.page.styl

@@ -1,10 +1,4 @@
-/*
-
-VS theme by Andrew Lock
-
-https://github.com/PrismJS/prism-themes/blob/master/themes/prism-vs.css
-
-*/
+@import 'prismjs/themes/prism.css'
 
 pre, code
   background: $syntax-hl-bg-color
@@ -33,63 +27,22 @@ pre > code
 [data-syntax-hl-show-line-number] pre.line-numbers > code
   white-space: pre
 
-.syntax-hl
-  .token
-    &.comment, &.prolog, &.doctype, &.cdata
-      color: #008000
-      font-style: italic
-    &.namespace
-      opacity: 0.7
-    &.string
-      color: #a31515
-    &.punctuation, &.operator
-      color: #393A34
-    &.url, &.symbol, &.number, &.boolean, &.inserted
-      color: #36acaa
-    &.atrule, &.keyword, &.attr-value, .language-autohotkey&.selector, .language-json&.boolean, .language-json&.number
-      color: #0000ff
-    &.function
-      color: #393A34
-    &.deleted, .language-autohotkey&.tag
-      color: #9a050f
-    &.selector, .language-autohotkey&.keyword
-      color: #00009f
-    &.important, &.bold
-      font-weight: bold
-    &.italic
-      font-style: italic
-    &.class-name, .language-json&.property
-      color: #2B91AF
-    &.tag, &.selector
-      color: #800000
-    &.attr-name, &.property, &.regex, &.entity
-      color: #ff0000
-    &.directive.tag .tag
-      background: #ffff00
-      color: #393A34
-    &.macro
-      &, .token
-        color: #2b91af
-    &.builtin
-      color: #077
+.toolbar
+  position: absolute
+  white-space: no-wrap
+  right: 0 !important
+  top: 0 !important
+  padding: rem(5px)
+  opacity: 1 !important
+  background: rgba($syntax-hl-bg-color, 0.8)
+  font-family: $primary-font-family
+  pointer-events: all
+  user-select: none
 
-  .toolbar
-    position: absolute
-    white-space: no-wrap
-    right: 0
-    top: 0
-    padding: rem(5px)
-    background: rgba($syntax-hl-bg-color, 0.8)
-    font-family: $primary-font-family
-    font-size: rem($font-size-small)
-    opacity: 0
-    pointer-events: none
-    transition: opacity .1s linear
-    user-select: none
-
-  &:hover .toolbar
-    opacity: 1
-    pointer-events: all
+.toolbar-item
+  a
+    font-size: large !important
+    border-radius: 0px !important
 
 [data-syntax-hl-show-line-number]
   pre

packages/ui-default/components/highlighter/prismjs.js

@@ -108,6 +108,7 @@ const prismjsApiWrap = {
       if (format && astyle && astyle[1]) {
         const [success, result] = format($code.text(), `${UserContext.astyleOptions.trim()} mode=${astyle[1]}`);
         console.log(success.result);
+        code.original = $code.text();
         if (!success) Notification.error('Code format fail');
         else $code.text(result.replace(/^#(include|import)[\t ]*(<|")/gm, (match, p1, p2) => `#${p1} ${p2}`));
       }

packages/ui-default/setting.yaml

@@ -83,10 +83,12 @@ lang_monaco_modes:
     jl: julia
 showInvisibleChar:
   type: boolean
+  family: highlight
   desc: show invisible characters when formatting code
   category: preference
 astyleOptions:
   type: text
+  family: highlight
   desc: astyle formatting options
   category: preference
   value: >