refine src/lib/react-codemirror/extensions/color-yaml/index.ts

yuiseki · Nov 7, 2024 · 74a8a1b · 74a8a1b
1 parent 30ee469
commit 74a8a1b
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 11 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -11,11 +11,13 @@
     "Chuo",
     "codegemma",
     "codemirror",
+    "colorraw",
     "datetime",
     "dirents",
     "ducanh",
     "duckdb",
     "Genale",
+    "hexs",
     "hnswlib",
     "intelligentes",
     "interactives",

diff --git a/src/app/charites/TridentFileSystem.tsx b/src/app/charites/TridentFileSystem.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import CodeMirror from "@uiw/react-codemirror";
-import { color } from "@/lib/react-codemirror/extensions/color-yaml/index.ts";
+import { colorForYaml } from "@/lib/react-codemirror/extensions/color-yaml/index.ts";
 import { vscodeDark } from "@uiw/codemirror-theme-vscode";
 import { yaml } from "@codemirror/lang-yaml";
 import { useKeyBind } from "@/hooks/keybind";
@@ -457,7 +457,7 @@ export const TridentFileSystem: React.FC = () => {
             <div
               style={{
                 marginRight: "2px",
-                width: "340px",
+                width: "300px",
                 backgroundColor: "#2b2b2b",
                 color: "white",
               }}
@@ -507,10 +507,10 @@ export const TridentFileSystem: React.FC = () => {
               <CodeMirror
                 value={content}
                 theme={vscodeDark}
-                extensions={[yaml(), color]}
+                extensions={[yaml(), colorForYaml]}
                 onChange={(value) => setContent(value)}
                 height="80vh"
-                width="600px"
+                width="550px"
               />
             </div>
           </div>

diff --git a/src/lib/react-codemirror/extensions/color-yaml/index.ts b/src/lib/react-codemirror/extensions/color-yaml/index.ts
@@ -134,8 +134,6 @@ function colorDecorations(view: EditorView) {
           (type.name === "QuotedLiteral" && callExp.startsWith("'#"))
         ) {
           const [color, alpha] = toFullHex(callExp);
-          console.log(color);
-          // FIXME: YAML対応なのでCSSとの互換性がなくなる
           const colorRaw = callExp.startsWith("'#")
             ? callExp.slice(1, -1)
             : callExp;
@@ -167,8 +165,6 @@ function colorDecorations(view: EditorView) {
             });
             widgets.push(widget.range(from));
           }
-        } else {
-          //console.info(type.name, callExp);
         }
       },
     });
@@ -221,7 +217,7 @@ class ColorWidget extends WidgetType {
   }
 }
 
-export const colorView = (showPicker: boolean = true) =>
+export const colorViewForYaml = (showPicker: boolean = true) =>
   ViewPlugin.fromClass(
     class ColorView {
       decorations: DecorationSet;
@@ -299,7 +295,6 @@ export const colorView = (showPicker: boolean = true) =>
               })`;
             }
           }
-          // FIXMI: YAML対応なのでCSSで壊れる
           if (converted.startsWith("#")) {
             converted = converted.replace("#", "'#") + "'";
           }
@@ -342,4 +337,4 @@ export const colorTheme = EditorView.baseTheme({
   },
 });
 
-export const color: Extension = [colorView(), colorTheme];
+export const colorForYaml: Extension = [colorViewForYaml(), colorTheme];