Feat(core): Fast-Form supports control CodeEditor

Author: obgnail

plugin/global/core/components/fast-form.js

@@ -402,7 +402,7 @@ class FastForm extends HTMLElement {
                     const state = this.states.init(name, initialState)
                     if (typeof clear !== "function") {
                         clear = (state && typeof state.values === "function")
-                            ? () => Array.from(state.values()).forEach(val => val && typeof val.clear === "function" && val.clear())
+                            ? () => Array.from(state.values()).forEach(s => s && typeof s.clear === "function" && s.clear())
                             : () => void 0
                     }
                     this.registerCleanup(() => clear(state))
@@ -1449,74 +1449,30 @@ const Feature_Watchers = (() => {
     }
 })()
 
-function compileMatchers({ source, strategy, processValue, errorContext }) {
-    if (!source || typeof source !== "object") {
-        return []
-    }
-    const escapeRegex = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
-    return Object.entries(source).map(([key, rawValue]) => {
-        const payload = processValue(rawValue, key)
-        if (payload == null) return
-        try {
-            const exp = (strategy === "regex")
-                ? key
-                : (strategy === "wildcard")
-                    ? `^${escapeRegex(key).replace(/\\\*/g, ".*")}$`
-                    : `^${escapeRegex(key)}$`
-            const regex = new RegExp(exp)
-            return { key, regex, ...payload }
-        } catch (e) {
-            throw new TypeError(`Invalid ${errorContext} pattern for '${strategy}' mode: '${key}'.`)
-        }
-    }).filter(Boolean)
-}
-
 const Feature_Parsing = {
     featureOptions: {
         parsers: {},
-        parserMatchStrategy: "exact", // "exact", "wildcard", "regex"
     },
     configure: ({ hooks, initState, registerApi }) => {
-        const state = initState(
-            { rawParsers: new Map(), compiledParsers: [] },
-            state => {
-                state.rawParsers.clear()
-                state.compiledParsers = []
-            },
-        )
+        const parsers = initState(new Map(), s => s.clear())
         registerApi("parsing", {
-            setParser: (key, parserToAdd) => {
+            set: (key, parserToAdd) => {
                 if (key && typeof parserToAdd === "function") {
-                    state.rawParsers.set(key, parserToAdd)
+                    parsers.set(key, parserToAdd)
                 } else {
                     console.warn(`FastForm Warning: Parser for key '${key}' is not a function.`)
                 }
-            }
+            },
+            get: (key) => parsers.get(key),
         })
         hooks.on("onProcessValue", (value, changeContext) => {
-            const newChangeContext = { ...changeContext, value }
-            const matchedParsers = state.compiledParsers.filter(p => p.regex.test(newChangeContext.key))
-            if (matchedParsers.length === 0) {
-                return value
-            }
-            if (matchedParsers.length > 1) {
-                matchedParsers.sort((a, b) => b.key.length - a.key.length)
-            }
-            return matchedParsers[0].parser(value, newChangeContext)
+            const parser = parsers.get(changeContext.key)
+            return parser ? parser(value, changeContext) : value
         })
     },
-    compile: ({ state, options, form }) => {
-        const { parsers, parserMatchStrategy } = options
-
+    compile: ({ options, form }) => {
         const api = form.getApi("parsing")
-        Object.entries(parsers).forEach(([key, rule]) => api.setParser(key, rule))
-
-        state.compiledParsers = compileMatchers({
-            source: Object.fromEntries(state.rawParsers),
-            strategy: parserMatchStrategy,
-            errorContext: "parser",
-            processValue: (parser) => ({ parser })
-        })
+        Object.entries(options.parsers).forEach(([key, rule]) => api.set(key, rule))
     },
 }
 
@@ -1580,13 +1536,7 @@ const Feature_Validation = {
         }).filter(Boolean)
     },
     configure: ({ initState, hooks, registerApi, form }) => {
-        const state = initState(
-            { rawRules: new Map(), compiledRules: new Map() },
-            state => {
-                state.rawRules.clear()
-                state.compiledRules.clear()
-            }
-        )
+        const state = initState({ rawRules: new Map(), compiledRules: new Map() })
         registerApi("validation", {
             addRule: (key, ruleConfig) => {
                 if (!key || !ruleConfig) return
@@ -2222,7 +2172,7 @@ const Control_Color = {
         const input = element.querySelector(".color-input")
         const display = element.querySelector(".color-display")
         if (input && display) {
-            value = value || "#000000"
+            value = value || "#FFFFFF"
             updateInputState(input, field, value)
             display.textContent = value.toUpperCase()
         }
@@ -2507,6 +2457,86 @@ const Control_Textarea = {
     },
 }
 
+const Control_CodeEditor = {
+    controlOptions: {
+        tabSize: 4,
+        lineNumbers: true,
+    },
+    setup: ({ field }) => defaultBlockLayout(field),
+    create: ({ field, controlOptions }) => {
+        const { lineNumbers } = controlOptions
+        const { key, placeholder } = getCommonHTMLAttrs(field)
+        const gutterClass = lineNumbers ? "code-gutter" : "code-gutter plugin-common-hidden"
+        const textarea = `<textarea class="code-textarea" ${placeholder} spellcheck="false" autocomplete="off" autocapitalize="off"></textarea>`
+        return `<div class="code-editor-wrap" ${key}><div class="${gutterClass}"></div><div class="code-grow-wrap"><div class="code-ghost"></div>${textarea}</div></div>`
+    },
+    update: ({ element, value, field, controlOptions }) => {
+        const textarea = element.querySelector(".code-textarea")
+        if (!textarea) return
+        const ghost = element.querySelector(".code-ghost")
+        const gutter = element.querySelector(".code-gutter")
+        const val = value || ""
+        if (textarea.value !== val) textarea.value = val
+        if (ghost) ghost.textContent = val + "\n"
+        updateInputState(textarea, field, val)
+        if (controlOptions.lineNumbers && gutter) {
+            Control_CodeEditor._updateLineNumbers(textarea, gutter)
+        }
+    },
+    bindEvents: ({ form }) => {
+        const syncState = (textarea) => {
+            const wrap = textarea.closest(".code-editor-wrap")
+            const ghost = wrap.querySelector(".code-ghost")
+            const gutter = wrap.querySelector(".code-gutter")
+            ghost.textContent = textarea.value + "\n"
+            if (gutter && !gutter.classList.contains("plugin-common-hidden")) {
+                Control_CodeEditor._updateLineNumbers(textarea, gutter)
+            }
+        }
+
+        form.onEvent("input", ".code-textarea", function () {
+            syncState(this)
+        }).onEvent("change", ".code-textarea", function () {
+            form.validateAndCommit(this.closest(".code-editor-wrap").dataset.key, this.value)
+        }).onEvent("scroll", ".code-textarea", function () {
+            const gutter = this.closest(".code-editor-wrap").querySelector(".code-gutter")
+            if (gutter) gutter.scrollTop = this.scrollTop
+        }).onEvent("keydown", ".code-textarea", function (ev) {
+            const key = this.closest(".code-editor-wrap").dataset.key
+            const { tabSize } = form.getControlOptionsFromKey(key)
+            if (ev.key === "Tab") {
+                ev.preventDefault()
+                const spaces = " ".repeat(tabSize)
+                Control_CodeEditor._insertText(this, spaces)
+                syncState(this)
+                form.validateAndCommit(key, this.value)
+            } else if (ev.key === "Enter") {
+                ev.preventDefault()
+                const cursor = this.selectionStart
+                const currentLineStart = this.value.lastIndexOf("\n", cursor - 1) + 1
+                const currentLine = this.value.substring(currentLineStart, cursor)
+                const match = currentLine.match(/^\s+/)
+                const indentation = match ? match[0] : ""
+                Control_CodeEditor._insertText(this, "\n" + indentation)
+                syncState(this)
+                this.blur()
+                this.focus()
+                form.validateAndCommit(key, this.value)
+            }
+        }, true)
+    },
+    _updateLineNumbers: (textarea, gutter) => {
+        const lineCount = textarea.value.split("\n").length
+        if (gutter.childElementCount === lineCount) return
+        gutter.innerHTML = Array.from({ length: lineCount }, (_, i) => `<div>${i + 1}</div>`).join("")
+    },
+    _insertText: (textarea, text) => {
+        const start = textarea.selectionStart
+        const end = textarea.selectionEnd
+        textarea.setRangeText(text, start, end, "end")
+    },
+}
+
 const Control_Object = {
     controlOptions: {
         format: "JSON",
@@ -3114,11 +3144,7 @@ const Control_Transfer = {
                 item.animate([
                     { transform: `translate(${dx}px, ${dy}px)` },
                     { transform: "translate(0, 0)" }
-                ], {
-                    duration: 200,
-                    easing: "cubic-bezier(0.2, 0, 0, 1)",
-                    fill: "both"
-                })
+                ], { duration: 200, easing: "cubic-bezier(0.2, 0, 0, 1)", fill: "both" })
             }
         })
     },
@@ -3632,6 +3658,7 @@ FastForm.registerControl("custom", Control_Custom)
 FastForm.registerControl("hint", Control_Hint)
 FastForm.registerControl("hotkey", Control_Hotkey)
 FastForm.registerControl("textarea", Control_Textarea)
+FastForm.registerControl("code", Control_CodeEditor)
 FastForm.registerControl("object", Control_Object)
 FastForm.registerControl("array", Control_Array)
 FastForm.registerControl("select", Control_Select)

plugin/global/settings/settings.default.toml

@@ -989,6 +989,7 @@ Note that if blocks and lists appear at the same level, the lists will be ignore
 |-|-|
 | Apple | 4 |
 | Banana | 2 |
+```
 """
 
 

plugin/global/styles/plugin-fast-form.css

@@ -729,6 +729,87 @@ textarea:disabled {
     }
 }
 
+/* Code */
+.code-editor-wrap {
+    display: flex;
+    position: relative;
+    width: 100%;
+    border: 1px solid var(--ff-border);
+    border-radius: var(--ff-radius);
+    background-color: var(--ff-bg-white);
+    transition: border-color 0.2s, box-shadow 0.2s;
+    font-family: "Menlo", "Monaco", "Consolas", "Courier New", monospace;
+    font-size: 13px;
+    line-height: 1.5;
+    align-items: stretch;
+    min-width: 0;
+}
+
+.code-editor-wrap:focus-within {
+    border-color: var(--ff-primary);
+    box-shadow: 0 0 0 2px var(--ff-focus-ring);
+}
+
+.code-gutter {
+    flex-shrink: 0;
+    min-width: 36px;
+    background-color: var(--ff-bg-block);
+    border-right: 1px solid var(--ff-border);
+    color: var(--ff-text-placeholder);
+    text-align: right;
+    padding: 8px 6px;
+    user-select: none;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+.code-grow-wrap {
+    flex: 1;
+    display: grid;
+    grid-template-columns: 100%;
+    margin: 0;
+    padding: 8px;
+    min-height: 100px;
+    min-width: 0;
+}
+
+.code-ghost, .code-textarea {
+    grid-area: 1 / 1 / 2 / 2;
+    font: inherit;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    white-space: pre;
+    word-break: break-all;
+    overflow-wrap: break-word;
+    line-height: inherit;
+}
+
+.code-ghost {
+    visibility: hidden;
+    pointer-events: none;
+    width: 0;
+    overflow: hidden;
+    padding-bottom: 1.2em;
+}
+
+.code-textarea {
+    display: block;
+    border: 0;
+    outline: none;
+    background: transparent;
+    resize: none;
+    color: var(--ff-text-main);
+    overflow-y: hidden;
+    overflow-x: auto;
+    width: 100%;
+}
+
+.code-textarea:focus {
+    box-shadow: none;
+    border-color: transparent;
+}
+
 /* Object */
 .object-wrap {
     display: flex;

plugin/preferences/actions.js

@@ -42,7 +42,7 @@ module.exports = (plugin) => {
         },
         invokeMarkdownLintSettings: async () => utils.callPluginFunction("markdownLint", "settings"),
         installPlantUMLServer: async () => {
-            const dockerFields = [{ key: "dockerCommand", type: "textarea", readonly: true, rows: 3 }]
+            const dockerFields = [{ key: "dockerCommand", type: "code", readonly: true }]
             const actionFields = [
                 { key: "viewWebsite", type: "action", label: "Official Website" },
                 { key: "viewDockerHub", type: "action", label: "Docker Hub" },
@@ -79,7 +79,7 @@ module.exports = (plugin) => {
             const settings = await plugin._getSettings(fixedName)
             const op = {
                 title: i18n._t("settings", "$label.runtimeSettings") + `（${i18n.t("readonly")}）`,
-                schema: [{ fields: [{ key: "runtimeSettings", type: "textarea", readonly: true, rows: 14 }] }],
+                schema: [{ fields: [{ key: "runtimeSettings", type: "code", readonly: true }] }],
                 data: { runtimeSettings: JSON.stringify(settings, null, "\t") },
             }
             await utils.formDialog.modal(op)