@ptengine/inline-editor 0.1.9 → 0.1.10

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.1.10
+
+新增依赖：`@codemirror/*`（state / view / commands / language / autocomplete / lint / lang-css / lang-javascript）与 `js-beautify`。
+`@ptengine/inline-core` 依赖不变，可以直接发。
+
+**变更**
+
+- 自定义代码面板的输入框换成 CodeMirror 6（与老编辑器同一个库）：语法高亮、行号、括号配对与自动闭合、Tab 缩进、编辑器内撤销。
+- 语法错误提示：按语言解析树标出写错的位置（行号旁 + 波浪线，同一行只报一条），**只提醒不拦**保存（老编辑器同口径）。不引 ESLint / CSSLint。
+- 自动补全：CSS 属性与值；JS 里敲 `ptKit.` 补全六个工具函数（query / queryAll / querySelector / querySelectorAll / observe / moveElement，带片段与说明）。
+- 「格式化」按钮：按两格缩进整理当前页签的代码（js-beautify，老编辑器同款）。
+- CodeMirror 与 js-beautify 都**按需加载**：打开面板才下载，不进宿主首屏 / 编辑器主分块；下载完成前先给等宽文本框，可照常输入。
+- 产物检查的外部依赖清单改为从 package.json 的 dependencies + peerDependencies 读取。
+
 ## 0.1.9
 
 依赖不变（`@ptengine/inline-core` ~0.2.1），可以直接发。

package/dist/locales.d.ts

@@ -101,6 +101,8 @@ export declare const zhCN: {
             title: string;
             desc: string;
             cssHint: string;
+            format: string;
+            formatHint: string;
             jsHint: string;
         };
         version: {
@@ -295,6 +297,8 @@ export declare const enUS: {
             title: string;
             desc: string;
             cssHint: string;
+            format: string;
+            formatHint: string;
             jsHint: string;
         };
         version: {
@@ -489,6 +493,8 @@ export declare const jaJP: {
             title: string;
             desc: string;
             cssHint: string;
+            format: string;
+            formatHint: string;
             jsHint: string;
         };
         version: {
@@ -733,6 +739,8 @@ export declare const inlineEditorLocales: {
                 title: string;
                 desc: string;
                 cssHint: string;
+                format: string;
+                formatHint: string;
                 jsHint: string;
             };
             readonly version: {
@@ -976,6 +984,8 @@ export declare const inlineEditorLocales: {
                 title: string;
                 desc: string;
                 cssHint: string;
+                format: string;
+                formatHint: string;
                 jsHint: string;
             };
             readonly version: {
@@ -1219,6 +1229,8 @@ export declare const inlineEditorLocales: {
                 title: string;
                 desc: string;
                 cssHint: string;
+                format: string;
+                formatHint: string;
                 jsHint: string;
             };
             readonly version: {

package/dist/locales.js

@@ -90,7 +90,9 @@ export const zhCN = {
             button: '追加代码',
             title: '自定义代码',
             desc: '可以追加 CSS / JavaScript 代码，更自由地编辑您的网页。',
-            cssHint: 'CSS 会实时应用到画布。',
+            cssHint: 'CSS 会实时应用到画布。语法错误会在行号旁标出，不会阻止保存。',
+            format: '格式化',
+            formatHint: '按标准缩进整理当前页签的代码',
             jsHint: 'JavaScript 不会在编辑器画布里执行，请通过预览或发布后查看效果。可使用 ptKit 工具函数（如 ptKit.query）等待元素出现。'
         },
         version: {
@@ -284,7 +286,9 @@ export const enUS = {
             button: 'Custom code',
             title: 'Custom code',
             desc: 'Add CSS / JavaScript to customize your page more freely.',
-            cssHint: 'CSS is applied to the canvas in real time.',
+            cssHint: 'CSS is applied to the canvas in real time. Syntax errors are marked next to the line numbers and do not block saving.',
+            format: 'Format',
+            formatHint: 'Re-indent the code in this tab',
             jsHint: 'JavaScript does not run in the editor canvas. Use preview or publish to see its effect. ptKit helpers (e.g. ptKit.query) can wait for elements to appear.'
         },
         version: {
@@ -478,7 +482,9 @@ export const jaJP = {
             button: 'コード追加',
             title: 'カスタムコード',
             desc: 'CSS / JavaScript を追加して、ページをより自由に編集できます。',
-            cssHint: 'CSS はキャンバスにリアルタイムで反映されます。',
+            cssHint: 'CSS はキャンバスにリアルタイムで反映されます。構文エラーは行番号の横に表示されますが、保存は妨げません。',
+            format: '整形',
+            formatHint: 'このタブのコードを標準のインデントで整えます',
             jsHint: 'JavaScript はエディタのキャンバスでは実行されません。プレビューまたは公開後に効果を確認してください。ptKit のヘルパー（例: ptKit.query）で要素の表示を待つことができます。'
         },
         version: {

package/dist/panels/CodeMirrorField.d.ts

@@ -0,0 +1,32 @@
+import { EditorState } from '@codemirror/state';
+import { type CompletionContext, type CompletionResult } from '@codemirror/autocomplete';
+import { type Diagnostic } from '@codemirror/lint';
+/**
+ * 自定义代码面板里的代码编辑器（CodeMirror 6）—— 语法高亮、语法错误提示、自动补全、括号配对、Tab 缩进。
+ *
+ * 与老编辑器（engage-editor `PtCodeMirror.vue`，同样是 CodeMirror 6）对齐的几样：CSS / JS 两种语言、
+ * 错误只**提醒不拦**（老编辑器的 lint 也只出警告、从不挡保存）、JS 里补全 `ptKit.*` 工具函数。
+ * 有意不同的一处：语法检查用语言自带的解析树（Lezer）找出错节点，不引 ESLint / CSSLint ——
+ * 那两个浏览器版加起来上 MB，而面板里要的只是「这里写错了」。
+ *
+ * ⚠️ 本模块**只经 `CodePanel` 的动态 import 加载**：CodeMirror 只在用户打开面板时才下载，
+ * 不进宿主的首屏包。不要从 `index.ts` 或别的模块静态 import 它。
+ */
+export interface CodeMirrorFieldProps {
+    language: 'css' | 'javascript';
+    value: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    placeholder?: string;
+    ariaLabel?: string;
+    'data-testid'?: string;
+}
+/** ptKit 工具函数（与后端 `engagev5/ptkit.ts`、SDK 同一套）—— JS 里敲 `ptKit.` 时补全。 */
+export declare const PT_KIT_COMPLETIONS: import("@codemirror/autocomplete").Completion[];
+export declare function ptKitCompletion(context: CompletionContext): CompletionResult | null;
+/**
+ * 语法错误提示：解析树里的出错节点（Lezer 遇到写不下去的地方会插一个 error 节点）。
+ * 同一行只报一条，免得一处少个括号整片飘红。
+ */
+export declare function findSyntaxErrors(state: EditorState, message: string): Diagnostic[];
+export default function CodeMirrorField({ language, value, onChange, onBlur, placeholder, ariaLabel, 'data-testid': testId }: CodeMirrorFieldProps): import("react").JSX.Element;

package/dist/panels/CodeMirrorField.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { EditorState } from '@codemirror/state';
+import { EditorView, drawSelection, highlightActiveLine, highlightActiveLineGutter, keymap, lineNumbers, placeholder as placeholderExt } from '@codemirror/view';
+import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
+import { bracketMatching, defaultHighlightStyle, foldGutter, indentOnInput, ensureSyntaxTree, syntaxHighlighting, syntaxTree } from '@codemirror/language';
+import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap, snippetCompletion } from '@codemirror/autocomplete';
+import { lintGutter, linter } from '@codemirror/lint';
+import { css } from '@codemirror/lang-css';
+import { javascript, javascriptLanguage } from '@codemirror/lang-javascript';
+export const PT_KIT_COMPLETIONS = [
+    snippetCompletion("query('${selector}').then(function (el) {\n\t${}\n});", {
+        label: 'query',
+        detail: '(selector, options?) → Promise<Element>',
+        info: '轮询等待元素出现（默认最长 60 秒、每 500ms 查一次），找到后 resolve。'
+    }),
+    snippetCompletion("queryAll('${selector}').then(function (list) {\n\t${}\n});", {
+        label: 'queryAll',
+        detail: '(selector, options?) → Promise<Element[]>',
+        info: '轮询等待至少一个匹配元素出现，resolve 全部匹配元素。'
+    }),
+    snippetCompletion("querySelector('${selector}')", {
+        label: 'querySelector',
+        detail: '(selector, context?) → Element | null',
+        info: '立即查找一个元素（含 Ptengine 弹窗的 Shadow DOM）。'
+    }),
+    snippetCompletion("querySelectorAll('${selector}')", {
+        label: 'querySelectorAll',
+        detail: '(selector, context?) → Element[]',
+        info: '立即查找全部匹配元素（含 Ptengine 弹窗的 Shadow DOM）。'
+    }),
+    snippetCompletion("observe('${selector}', function (el) {\n\t${}\n});", {
+        label: 'observe',
+        detail: '(selector, callback, options?)',
+        info: '元素已在或之后被插入页面时执行回调（MutationObserver）。'
+    }),
+    snippetCompletion("moveElement('${target}', '${relative}', '${after}');", {
+        label: 'moveElement',
+        detail: "(target, relative, 'before' | 'after', options?)",
+        info: '等两个元素都出现后，把 target 移到 relative 的前面或后面。'
+    })
+];
+export function ptKitCompletion(context) {
+    const before = context.matchBefore(/ptKit\.\w*/);
+    if (!before)
+        return null;
+    return { from: before.from + 'ptKit.'.length, options: PT_KIT_COMPLETIONS, validFor: /^\w*$/ };
+}
+export function findSyntaxErrors(state, message) {
+    const diagnostics = [];
+    const seenLines = new Set();
+    const tree = ensureSyntaxTree(state, state.doc.length, 200) ?? syntaxTree(state);
+    tree.iterate({
+        enter: node => {
+            if (!node.type.isError)
+                return;
+            const line = state.doc.lineAt(node.from).number;
+            if (seenLines.has(line))
+                return;
+            seenLines.add(line);
+            const to = Math.max(node.to, Math.min(node.from + 1, state.doc.length));
+            diagnostics.push({ from: node.from, to, severity: 'warning', message });
+        }
+    });
+    return diagnostics;
+}
+const syntaxLinter = (message) => linter(view => findSyntaxErrors(view.state, message), { delay: 400 });
+const theme = EditorView.theme({
+    '&': { height: '100%', fontSize: '13px', backgroundColor: '#fff' },
+    '&.cm-focused': { outline: 'none' },
+    '.cm-scroller': {
+        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+        lineHeight: '20px'
+    },
+    '.cm-gutters': {
+        backgroundColor: '#fafbfc',
+        borderRight: '1px solid #EBECF0',
+        color: '#97A0AF'
+    },
+    '.cm-activeLine': { backgroundColor: '#f4f5f7' },
+    '.cm-activeLineGutter': { backgroundColor: '#eef0f3' },
+    '.cm-tooltip': { fontSize: '12px' }
+});
+function languageExtensions(language, errorMessage) {
+    if (language === 'css')
+        return [css(), syntaxLinter(errorMessage)];
+    return [
+        javascript(),
+        javascriptLanguage.data.of({ autocomplete: ptKitCompletion }),
+        syntaxLinter(errorMessage)
+    ];
+}
+export default function CodeMirrorField({ language, value, onChange, onBlur, placeholder, ariaLabel, 'data-testid': testId }) {
+    const hostRef = useRef(null);
+    const viewRef = useRef(null);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const onBlurRef = useRef(onBlur);
+    onBlurRef.current = onBlur;
+    useEffect(() => {
+        if (!hostRef.current)
+            return;
+        const view = new EditorView({
+            parent: hostRef.current,
+            state: EditorState.create({
+                doc: value,
+                extensions: [
+                    lineNumbers(),
+                    highlightActiveLineGutter(),
+                    foldGutter(),
+                    lintGutter(),
+                    history(),
+                    drawSelection(),
+                    indentOnInput(),
+                    bracketMatching(),
+                    closeBrackets(),
+                    autocompletion(),
+                    highlightActiveLine(),
+                    syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+                    EditorState.tabSize.of(2),
+                    keymap.of([
+                        ...closeBracketsKeymap,
+                        ...defaultKeymap,
+                        ...historyKeymap,
+                        ...completionKeymap,
+                        indentWithTab
+                    ]),
+                    ...languageExtensions(language, language === 'css' ? 'CSS 语法错误' : 'JavaScript 语法错误'),
+                    ...(placeholder ? [placeholderExt(placeholder)] : []),
+                    EditorView.contentAttributes.of({
+                        'aria-label': ariaLabel ?? language,
+                        spellcheck: 'false'
+                    }),
+                    EditorView.updateListener.of(update => {
+                        if (update.docChanged)
+                            onChangeRef.current(update.state.doc.toString());
+                        if (update.focusChanged && !update.view.hasFocus)
+                            onBlurRef.current?.();
+                    }),
+                    theme
+                ]
+            })
+        });
+        viewRef.current = view;
+        return () => {
+            view.destroy();
+            viewRef.current = null;
+        };
+    }, [language]);
+    useEffect(() => {
+        const view = viewRef.current;
+        if (!view)
+            return;
+        const current = view.state.doc.toString();
+        if (current === value)
+            return;
+        view.dispatch({ changes: { from: 0, to: current.length, insert: value } });
+    }, [value]);
+    return _jsx("div", { ref: hostRef, "data-testid": testId, className: "h-full min-h-0 overflow-hidden" });
+}

package/dist/panels/CodePanel.d.ts

@@ -1,15 +1,6 @@
 import type { ExperienceCode } from '@ptengine/inline-core/protocol';
-/**
- * 自定义代码面板（老编辑器的「追加代码」/ code mode）：给当前版本追加 CSS 与 JavaScript。
- *
- * - **改即生效，没有「应用」按钮**（与老编辑器一致）：输入停顿 `FLUSH_MS` 后把整份代码交给宿主，
- *   宿主写回 `code` 属性，编辑器据此把 CSS 注入画布。关面板 / 换版本时立即交出未落的那一下。
- * - JavaScript **只保存、画布里不执行**（老编辑器同样关掉了：编辑器里的页面环境不对、
- *   客户页也没有 SDK 的 `ptKit`），预览或发布后才生效 —— 面板里说清楚。
- * - 不进撤销历史（老编辑器也不进）。
- *
- * 编辑控件用包里现成的等宽文本框，不引代码编辑器库（体积）；Tab 键插两个空格而不是跳走焦点。
- */
+/** 格式化（js-beautify，按需加载）。失败（语法错得太离谱）原样返回，不吞用户的代码。 */
+export declare function formatCode(type: 'css' | 'javascript', code: string): Promise<string>;
 export interface CodePanelProps {
     code: ExperienceCode[];
     onChange: (code: ExperienceCode[]) => void;

package/dist/panels/CodePanel.js

@@ -1,10 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { Suspense, lazy, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { X } from 'lucide-react';
+import { AlignLeft, X } from 'lucide-react';
 import { Button } from '@ptengine/design-components';
 import { ChromeSegment, ChromeSegmented } from '../chrome/topbarPrimitives.js';
 import { CodeField } from '../dialogs/CodeField.js';
+const CodeMirrorField = lazy(() => import('./CodeMirrorField.js'));
+export async function formatCode(type, code) {
+    if (!code.trim())
+        return code;
+    const mod = (await import('js-beautify'));
+    const lib = mod.default ?? mod;
+    const opts = {
+        indent_size: 2,
+        end_with_newline: false,
+        preserve_newlines: true,
+        max_preserve_newlines: 2
+    };
+    try {
+        return (type === 'css' ? lib.css : lib.js)(code, opts);
+    }
+    catch {
+        return code;
+    }
+}
+function placeholderOf(type) {
+    return type === 'css'
+        ? '.hero-title { color: #e60012; }'
+        : "ptKit.query('.cta').then(function (el) { el.textContent = '…'; });";
+}
 const FLUSH_MS = 400;
 function textOf(code, type) {
     return code
@@ -63,6 +87,19 @@ export function CodePanel({ code, onChange, onClose }) {
             clearTimeout(timerRef.current);
         timerRef.current = setTimeout(flush, FLUSH_MS);
     };
+    const [formatting, setFormatting] = useState(false);
+    const format = async () => {
+        const type = tab;
+        setFormatting(true);
+        try {
+            const next = await formatCode(type, draftRef.current[type]);
+            if (next !== draftRef.current[type])
+                update(type, next);
+        }
+        finally {
+            setFormatting(false);
+        }
+    };
     const onKeyDown = (event) => {
         if (event.key !== 'Tab' || event.shiftKey)
             return;
@@ -75,15 +112,13 @@ export function CodePanel({ code, onChange, onClose }) {
             el.selectionStart = el.selectionEnd = selectionStart + 2;
         });
     };
-    return (_jsxs("aside", { "data-testid": "inline-editor-code-panel", className: "absolute bottom-3 right-3 top-3 z-30 flex w-[420px] max-w-[calc(100%-24px)] flex-col\n                rounded-lg border border-[#EBECF0] bg-white shadow-[0_8px_24px_rgba(9,30,66,0.16)]", children: [_jsxs("header", { className: "flex h-11 shrink-0 items-center justify-between border-b border-[#f1f2f3] pl-3 pr-1.5", children: [_jsx("span", { className: "text-[13px] font-medium text-[#1a1a1a]", children: t('inlineCanvas.code.title', '自定义代码') }), _jsx(Button, { size: "sm", variant: "ghost", "data-testid": "inline-editor-code-close", "aria-label": t('inlineCanvas.chrome.close', '关闭'), onClick: () => {
+    return (_jsxs("aside", { "data-testid": "inline-editor-code-panel", className: "absolute bottom-3 right-3 top-3 z-30 flex w-[480px] max-w-[calc(100%-24px)] flex-col\n                rounded-lg border border-[#EBECF0] bg-white shadow-[0_8px_24px_rgba(9,30,66,0.16)]", children: [_jsxs("header", { className: "flex h-11 shrink-0 items-center justify-between border-b border-[#f1f2f3] pl-3 pr-1.5", children: [_jsx("span", { className: "text-[13px] font-medium text-[#1a1a1a]", children: t('inlineCanvas.code.title', '自定义代码') }), _jsx(Button, { size: "sm", variant: "ghost", "data-testid": "inline-editor-code-close", "aria-label": t('inlineCanvas.chrome.close', '关闭'), onClick: () => {
                             flush();
                             onClose();
-                        }, children: _jsx(X, { className: "size-4" }) })] }), _jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2 p-3", children: [_jsx("p", { className: "text-xs leading-5 text-[#6B778C]", children: t('inlineCanvas.code.desc', '可以追加 CSS / JavaScript 代码，更自由地编辑您的网页。') }), _jsx(ChromeSegmented, { "data-testid": "inline-editor-code-tabs", className: "self-start", children: [
-                            ['css', 'CSS'],
-                            ['javascript', 'JavaScript']
-                        ].map(([value, label]) => (_jsx(ChromeSegment, { "data-testid": `inline-editor-code-tab-${value}`, active: tab === value, onClick: () => setTab(value), children: label }, value))) }), _jsx(CodeField, { "data-testid": `inline-editor-code-input-${tab}`, "aria-label": tab === 'css' ? 'CSS' : 'JavaScript', className: "min-h-0 flex-1 resize-none", value: draft[tab], placeholder: tab === 'css'
-                            ? '.hero-title { color: #e60012; }'
-                            : "ptKit.query('.cta').then(function (el) { el.textContent = '…'; });", onChange: event => update(tab, event.target.value), onKeyDown: onKeyDown, onBlur: flush }, tab), _jsx("p", { "data-testid": "inline-editor-code-hint", className: "text-xs leading-5 text-[#6B778C]", children: tab === 'css'
-                            ? t('inlineCanvas.code.cssHint', 'CSS 会实时应用到画布。')
+                        }, children: _jsx(X, { className: "size-4" }) })] }), _jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2 p-3", children: [_jsx("p", { className: "text-xs leading-5 text-[#6B778C]", children: t('inlineCanvas.code.desc', '可以追加 CSS / JavaScript 代码，更自由地编辑您的网页。') }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(ChromeSegmented, { "data-testid": "inline-editor-code-tabs", className: "self-start", children: [
+                                    ['css', 'CSS'],
+                                    ['javascript', 'JavaScript']
+                                ].map(([value, label]) => (_jsx(ChromeSegment, { "data-testid": `inline-editor-code-tab-${value}`, active: tab === value, onClick: () => setTab(value), children: label }, value))) }), _jsxs(Button, { size: "sm", variant: "ghost", "data-testid": "inline-editor-code-format", disabled: formatting || !draft[tab].trim(), title: t('inlineCanvas.code.formatHint', '按标准缩进整理当前页签的代码'), onClick: () => void format(), children: [_jsx(AlignLeft, { className: "size-3.5" }), t('inlineCanvas.code.format', '格式化')] })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden rounded-md border border-[#DFE1E6]", children: _jsx(Suspense, { fallback: _jsx(CodeField, { "data-testid": `inline-editor-code-input-${tab}`, "aria-label": tab === 'css' ? 'CSS' : 'JavaScript', className: "h-full resize-none rounded-none border-0", value: draft[tab], placeholder: placeholderOf(tab), onChange: event => update(tab, event.target.value), onKeyDown: onKeyDown, onBlur: flush }, `${tab}-plain`), children: _jsx(CodeMirrorField, { "data-testid": `inline-editor-code-input-${tab}`, language: tab, ariaLabel: tab === 'css' ? 'CSS' : 'JavaScript', value: draft[tab], placeholder: placeholderOf(tab), onChange: value => update(tab, value), onBlur: flush }, tab) }) }), _jsx("p", { "data-testid": "inline-editor-code-hint", className: "text-xs leading-5 text-[#6B778C]", children: tab === 'css'
+                            ? t('inlineCanvas.code.cssHint', 'CSS 会实时应用到画布。语法错误会在行号旁标出，不会阻止保存。')
                             : t('inlineCanvas.code.jsHint', 'JavaScript 不会在编辑器画布里执行，请通过预览或发布后查看效果。可使用 ptKit 工具函数（如 ptKit.query）等待元素出现。') })] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ptengine/inline-editor",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Ptengine Inline 编辑器：画布会话编排、图层树、属性面板与组件库（含内部 canvas-ui）",
   "license": "UNLICENSED",
   "private": false,
@@ -33,6 +33,15 @@
     "react-i18next": ">=13"
   },
   "dependencies": {
+    "@codemirror/autocomplete": "^6.20.4",
+    "@codemirror/commands": "^6.11.1",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/language": "^6.13.1",
+    "@codemirror/lint": "^6.9.7",
+    "@codemirror/state": "^6.7.6",
+    "@codemirror/view": "^6.43.15",
+    "js-beautify": "^2.0.3",
     "lucide-react": "^0.577.0",
     "@ptengine/inline-core": "~0.2.1"
   },
@@ -40,6 +49,7 @@
     "@ptengine/design-components": "^0.10.0",
     "@testing-library/react": "^16.0.0",
     "@types/chrome": "^0.0.268",
+    "@types/js-beautify": "^1.14.3",
     "@types/node": "^22.0.0",
     "@types/react": "^19.1.16",
     "@types/react-dom": "^19.1.9",