@ptengine/inline-editor 0.1.11 → 0.1.12

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # 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
 
 依赖不变，可以直接发。

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;
-    return { from: before.from + 'ptKit.'.length, options: PT_KIT_COMPLETIONS, validFor: /^\w*$/ };
+    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;
+    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 = [];
@@ -90,6 +177,7 @@ function languageExtensions(language, errorMessage) {
     return [
         javascript(),
         javascriptLanguage.data.of({ autocomplete: ptKitCompletion }),
+        javascriptLanguage.data.of({ autocomplete: scopeCompletionSource(browserScope()) }),
         syntaxLinter(errorMessage)
     ];
 }

package/package.json

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