@ptengine/inline-editor 0.1.10 → 0.1.12

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 0.1.12
+
+依赖不变，可以直接发。
+
+**变更**
+
+- 代码框 JS 补全补齐到老编辑器的口径：还没敲到 `ptKit.`、敲标识符（如 `pt`）时就列出 `ptKit.query(...)` 等整句片段，
+  选中插入完整模板（此前只有敲完 `ptKit.` 才有成员补全，用户敲 `pt` 看不到任何提示）。按常用程度排序，`query` 在前。
+- 新增常用浏览器全局对象的补全（`document` / `window` / `console` / `setTimeout` / `localStorage` / `MutationObserver` …）
+  及其成员（`document.querySelector` 等）；用白名单作用域，不把编辑器所在页面的全局与 Object.prototype 成员补出来。
+- 字符串、注释里与别的对象的成员访问（`foo.pt`）不出 ptKit 整句补全。
+
+## 0.1.11
+
+依赖不变，可以直接发。
+
+**修复**
+
+- 代码框输入被吞、补全不出：宿主回传值是异步的，回传落后于编辑器时（用户已经又敲了字）旧值会整篇覆盖编辑器 ——
+  刚敲的字丢失、光标重置、补全弹层被关掉，每次覆盖还要整篇重新解析（真机：敲 `ptKit.` 只剩 `p`）。
+  现在记住自己交出去过的值，落后的回传不再覆盖；格式化 / AI 追加 / 宿主回填等真正的外部写入照常生效。
+- 全选看不到选区：当前行高亮改成半透明（不透明时会盖住光标所在行的选区，单行代码全选什么都看不见），选区颜色加深。
+
 ## 0.1.10
 
 新增依赖：`@codemirror/*`（state / view / commands / language / autocomplete / lint / lang-css / lang-javascript）与 `js-beautify`。

package/dist/panels/CodeMirrorField.d.ts

@@ -21,8 +21,13 @@ export interface CodeMirrorFieldProps {
     ariaLabel?: string;
     'data-testid'?: string;
 }
-/** ptKit 工具函数（与后端 `engagev5/ptkit.ts`、SDK 同一套）—— JS 里敲 `ptKit.` 时补全。 */
+/** 敲 `ptKit.` 之后：成员补全。 */
 export declare const PT_KIT_COMPLETIONS: import("@codemirror/autocomplete").Completion[];
+/**
+ * 敲标识符时（如 `pt`）：整句补全 `ptKit.query(...)` 等 —— 老编辑器（`ptKitConfig.js`）就是这样提示的，
+ * 用户不知道有 `ptKit` 时也能从这里发现它。`boost` 让它们排在关键字片段前面。
+ */
+export declare const PT_KIT_IDENT_COMPLETIONS: import("@codemirror/autocomplete").Completion[];
 export declare function ptKitCompletion(context: CompletionContext): CompletionResult | null;
 /**
  * 语法错误提示：解析树里的出错节点（Lezer 遇到写不下去的地方会插一个 error 节点）。

package/dist/panels/CodeMirrorField.js

@@ -7,44 +7,131 @@ import { bracketMatching, defaultHighlightStyle, foldGutter, indentOnInput, ensu
 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',
+import { javascript, javascriptLanguage, scopeCompletionSource } from '@codemirror/lang-javascript';
+const PT_KIT_DEFS = [
+    {
+        name: 'query',
+        template: "query('${selector}').then(function (el) {\n\t${}\n});",
         detail: '(selector, options?) → Promise<Element>',
         info: '轮询等待元素出现（默认最长 60 秒、每 500ms 查一次），找到后 resolve。'
-    }),
-    snippetCompletion("queryAll('${selector}').then(function (list) {\n\t${}\n});", {
-        label: 'queryAll',
+    },
+    {
+        name: 'queryAll',
+        template: "queryAll('${selector}').then(function (list) {\n\t${}\n});",
         detail: '(selector, options?) → Promise<Element[]>',
         info: '轮询等待至少一个匹配元素出现，resolve 全部匹配元素。'
-    }),
-    snippetCompletion("querySelector('${selector}')", {
-        label: 'querySelector',
+    },
+    {
+        name: 'querySelector',
+        template: "querySelector('${selector}')",
         detail: '(selector, context?) → Element | null',
         info: '立即查找一个元素（含 Ptengine 弹窗的 Shadow DOM）。'
-    }),
-    snippetCompletion("querySelectorAll('${selector}')", {
-        label: 'querySelectorAll',
+    },
+    {
+        name: 'querySelectorAll',
+        template: "querySelectorAll('${selector}')",
         detail: '(selector, context?) → Element[]',
         info: '立即查找全部匹配元素（含 Ptengine 弹窗的 Shadow DOM）。'
-    }),
-    snippetCompletion("observe('${selector}', function (el) {\n\t${}\n});", {
-        label: 'observe',
+    },
+    {
+        name: 'observe',
+        template: "observe('${selector}', function (el) {\n\t${}\n});",
         detail: '(selector, callback, options?)',
         info: '元素已在或之后被插入页面时执行回调（MutationObserver）。'
-    }),
-    snippetCompletion("moveElement('${target}', '${relative}', '${after}');", {
-        label: 'moveElement',
+    },
+    {
+        name: 'moveElement',
+        template: "moveElement('${target}', '${relative}', '${after}');",
         detail: "(target, relative, 'before' | 'after', options?)",
         info: '等两个元素都出现后，把 target 移到 relative 的前面或后面。'
-    })
+    }
 ];
+export const PT_KIT_COMPLETIONS = PT_KIT_DEFS.map((d, i) => snippetCompletion(d.template, {
+    label: d.name,
+    detail: d.detail,
+    info: d.info,
+    boost: 6 - i,
+    type: 'function'
+}));
+export const PT_KIT_IDENT_COMPLETIONS = PT_KIT_DEFS.map((d, i) => snippetCompletion(`ptKit.${d.template}`, {
+    label: `ptKit.${d.name}`,
+    detail: d.detail,
+    info: d.info,
+    type: 'function',
+    boost: 20 - i
+}));
+function inStringOrComment(context) {
+    const tree = ensureSyntaxTree(context.state, context.pos, 20) ?? syntaxTree(context.state);
+    const node = tree.resolveInner(context.pos, -1);
+    return /String|Comment|TemplateString/.test(node.type.name);
+}
 export function ptKitCompletion(context) {
-    const before = context.matchBefore(/ptKit\.\w*/);
-    if (!before)
+    if (inStringOrComment(context))
+        return null;
+    const member = context.matchBefore(/ptKit\.\w*/);
+    if (member)
+        return {
+            from: member.from + 'ptKit.'.length,
+            options: PT_KIT_COMPLETIONS,
+            validFor: /^\w*$/
+        };
+    const word = context.matchBefore(/[\w$]+/);
+    const from = word ? word.from : context.pos;
+    if (from > 0 && context.state.sliceDoc(from - 1, from) === '.')
         return null;
-    return { from: before.from + 'ptKit.'.length, options: PT_KIT_COMPLETIONS, validFor: /^\w*$/ };
+    if (!word)
+        return context.explicit ? { from, options: PT_KIT_IDENT_COMPLETIONS } : null;
+    return { from, options: PT_KIT_IDENT_COMPLETIONS, validFor: /^[\w$]*$/ };
+}
+function browserScope() {
+    if (typeof window === 'undefined')
+        return {};
+    const names = [
+        'window',
+        'document',
+        'console',
+        'location',
+        'navigator',
+        'history',
+        'localStorage',
+        'sessionStorage',
+        'JSON',
+        'Math',
+        'Date',
+        'Promise',
+        'Array',
+        'Object',
+        'String',
+        'Number',
+        'Boolean',
+        'RegExp',
+        'setTimeout',
+        'clearTimeout',
+        'setInterval',
+        'clearInterval',
+        'requestAnimationFrame',
+        'fetch',
+        'MutationObserver',
+        'IntersectionObserver',
+        'ResizeObserver',
+        'Event',
+        'CustomEvent',
+        'URL',
+        'URLSearchParams',
+        'encodeURIComponent',
+        'decodeURIComponent',
+        'parseInt',
+        'parseFloat'
+    ];
+    const scope = Object.create(null);
+    for (const name of names) {
+        try {
+            scope[name] = window[name];
+        }
+        catch {
+        }
+    }
+    return scope;
 }
 export function findSyntaxErrors(state, message) {
     const diagnostics = [];
@@ -77,8 +164,11 @@ const theme = EditorView.theme({
         borderRight: '1px solid #EBECF0',
         color: '#97A0AF'
     },
-    '.cm-activeLine': { backgroundColor: '#f4f5f7' },
-    '.cm-activeLineGutter': { backgroundColor: '#eef0f3' },
+    '.cm-activeLine': { backgroundColor: 'rgba(9, 30, 66, 0.04)' },
+    '.cm-activeLineGutter': { backgroundColor: 'rgba(9, 30, 66, 0.06)' },
+    '.cm-selectionBackground': { backgroundColor: '#c7dbf7 !important' },
+    '&.cm-focused .cm-selectionBackground': { backgroundColor: '#a9c8f5 !important' },
+    '.cm-content ::selection': { backgroundColor: '#a9c8f5' },
     '.cm-tooltip': { fontSize: '12px' }
 });
 function languageExtensions(language, errorMessage) {
@@ -87,6 +177,7 @@ function languageExtensions(language, errorMessage) {
     return [
         javascript(),
         javascriptLanguage.data.of({ autocomplete: ptKitCompletion }),
+        javascriptLanguage.data.of({ autocomplete: scopeCompletionSource(browserScope()) }),
         syntaxLinter(errorMessage)
     ];
 }
@@ -94,6 +185,7 @@ export default function CodeMirrorField({ language, value, onChange, onBlur, pla
     const hostRef = useRef(null);
     const viewRef = useRef(null);
     const onChangeRef = useRef(onChange);
+    const emittedRef = useRef(new Set());
     onChangeRef.current = onChange;
     const onBlurRef = useRef(onBlur);
     onBlurRef.current = onBlur;
@@ -132,8 +224,14 @@ export default function CodeMirrorField({ language, value, onChange, onBlur, pla
                         spellcheck: 'false'
                     }),
                     EditorView.updateListener.of(update => {
-                        if (update.docChanged)
-                            onChangeRef.current(update.state.doc.toString());
+                        if (update.docChanged) {
+                            const next = update.state.doc.toString();
+                            const emitted = emittedRef.current;
+                            emitted.add(next);
+                            if (emitted.size > 64)
+                                emitted.delete(emitted.values().next().value);
+                            onChangeRef.current(next);
+                        }
                         if (update.focusChanged && !update.view.hasFocus)
                             onBlurRef.current?.();
                     }),
@@ -152,8 +250,13 @@ export default function CodeMirrorField({ language, value, onChange, onBlur, pla
         if (!view)
             return;
         const current = view.state.doc.toString();
-        if (current === value)
+        if (current === value) {
+            emittedRef.current.clear();
+            return;
+        }
+        if (emittedRef.current.has(value))
             return;
+        emittedRef.current.clear();
         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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ptengine/inline-editor",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "Ptengine Inline 编辑器：画布会话编排、图层树、属性面板与组件库（含内部 canvas-ui）",
   "license": "UNLICENSED",
   "private": false,