@difizen/libro-sql-cell 0.2.34 → 0.2.35

package/es/index.less

@@ -16,14 +16,10 @@
   border-right: 1px solid var(--mana-libro-cell-border-color);
 }
 
-.libro-sql-input-warning-text,
-.libro-sql-variable-name-input {
-  display: block !important;
-}
-
 .libro-sql-variable-name-input {
   width: 120px !important;
   height: 32px;
+  margin-left: 6px;
   border: 1px solid #d6d8da !important;
   border-radius: 6px !important;
   box-shadow: unset !important;
@@ -53,8 +49,14 @@
   letter-spacing: 0;
 }
 
+.libro-sql-variable-content {
+  padding-left: 18px;
+}
+
 .libro-sql-variable-name {
+  display: flex;
   margin-left: 8px;
+  align-items: center;
 
   svg {
     margin-left: 4px;
@@ -99,8 +101,8 @@
 }
 
 .libro-sql-input-warning-text {
-  width: 112px;
-  height: 20px;
+  display: flex;
+  align-items: center;
   margin-top: 4px;
   color: #faad14;
   font-weight: 400;

package/es/libro-sql-cell-view.d.ts

@@ -1,25 +1,20 @@
-import type { CodeEditorView } from '@difizen/libro-code-editor';
 import { CodeEditorManager } from '@difizen/libro-code-editor';
 import type { IOutput } from '@difizen/libro-common';
 import type { CellViewOptions, LibroCell, KernelMessage } from '@difizen/libro-jupyter';
-import { CellService, EditorStatus, LibroContextKey, LibroExecutableCellView, LibroViewTracker, LibroOutputArea } from '@difizen/libro-jupyter';
+import { CellService, EditorStatus, LibroEditableExecutableCellView, LibroViewTracker, LibroOutputArea } from '@difizen/libro-jupyter';
 import type { ViewSize } from '@difizen/mana-app';
-import { Deferred, DisposableCollection, ViewManager } from '@difizen/mana-app';
+import { Deferred, ViewManager } from '@difizen/mana-app';
 import React from 'react';
 import './index.less';
 import { LibroSqlCellModel } from './libro-sql-cell-model.js';
 import type { DatabaseConfig } from './libro-sql-cell-protocol.js';
 import { SqlScript } from './libro-sql-cell-script.js';
 export declare const LibroSqlCell: React.ForwardRefExoticComponent<React.RefAttributes<HTMLDivElement>>;
-export declare class LibroSqlCellView extends LibroExecutableCellView {
+export declare class LibroSqlCellView extends LibroEditableExecutableCellView {
     view: React.ForwardRefExoticComponent<React.RefAttributes<HTMLDivElement>>;
     model: LibroSqlCellModel;
     libroViewTracker: LibroViewTracker;
-    codeEditorManager: CodeEditorManager;
-    protected toDisposeOnEditor: DisposableCollection;
-    protected readonly libroContextKey: LibroContextKey;
     outputs: IOutput[];
-    editorView?: CodeEditorView;
     databaseConfig?: DatabaseConfig;
     editorStatus: EditorStatus;
     editorAreaHeight: number;
@@ -35,18 +30,13 @@ export declare class LibroSqlCellView extends LibroExecutableCellView {
     constructor(options: CellViewOptions, cellService: CellService, viewManager: ViewManager, libroViewTracker: LibroViewTracker, codeEditorManager: CodeEditorManager);
     onViewMount: () => Promise<void>;
     setEditorHost(ref: any): void;
-    createEditor(): Promise<void>;
-    protected afterEditorReady(): Promise<void>;
-    protected focusEditor(): void;
     onViewResize: (size: ViewSize) => void;
     toJSON(): LibroCell;
     focus: (toEdit: boolean) => void;
-    blur: () => void;
     clearExecution: () => void;
     run(): Promise<boolean>;
     fetch: (content: KernelMessage.IExecuteRequestMsg['content'], ioCallback: (msg: KernelMessage.IIOPubMessage) => any) => Promise<KernelMessage.IExecuteReplyMsg>;
     handleQueryResponse: (response: KernelMessage.IIOPubMessage, cb: (result: string) => void) => void;
     getDatabaseConfig: () => Promise<KernelMessage.IExecuteReplyMsg>;
-    shouldEnterEditorMode(e: React.FocusEvent<HTMLElement>): boolean;
 }
 //# sourceMappingURL=libro-sql-cell-view.d.ts.map

package/es/libro-sql-cell-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"libro-sql-cell-view.d.ts","sourceRoot":"","sources":["../src/libro-sql-cell-view.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAyB,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACxF,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,KAAK,EAAa,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,KAAK,EACV,eAAe,EAGf,SAAS,EACT,aAAa,EACd,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,WAAW,EACX,YAAY,EACZ,eAAe,EACf,uBAAuB,EACvB,gBAAgB,EAIhB,eAAe,EAChB,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EACL,QAAQ,EAER,oBAAoB,EAQpB,WAAW,EAIZ,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAgHvD,eAAO,MAAM,YAAY,sEAgExB,CAAC;AAEF,qBAEa,gBAAiB,SAAQ,uBAAuB;IAClD,IAAI,uEAAgB;IACrB,KAAK,EAAE,iBAAiB,CAAC;IACjC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,SAAS,CAAC,iBAAiB,uBAA8B;IAEhC,SAAS,CAAC,QAAQ,CAAC,eAAe,EAAE,eAAe,CAAC;IAE7E,OAAO,EAAE,OAAO,EAAE,CAAC;IAGnB,UAAU,CAAC,EAAE,cAAc,CAAC;IAG5B,cAAc,CAAC,EAAE,cAAc,CAAC;IAGvB,YAAY,EAAE,YAAY,CAA0B;IAG7D,gBAAgB,SAAK;IAGZ,kBAAkB,SAAK;IAEb,SAAS,EAAE,SAAS,CAAC;IAExC,SAAS,CAAC,uBAAuB,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAwB;IAEzE,IAAI,WAAW,kBAEd;IAEQ,YAAY,uDAMnB;IAGO,gBAAgB;IAIzB,oBAAoB;IAuBpB,SAAS,CAAC,kBAAkB,4BAAmC;IAC/D,IAAI,eAAe,6BAElB;gBAGqB,OAAO,EAAE,eAAe,EACvB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACnB,gBAAgB,EAAE,gBAAgB,EACjC,iBAAiB,EAAE,iBAAiB;IAsCxD,WAAW,sBAElB;IAEF,aAAa,CAAC,GAAG,EAAE,GAAG;IAKhB,YAAY;cAgCF,gBAAgB;IAoBhC,SAAS,CAAC,WAAW;IAgBZ,YAAY,SAAU,QAAQ,KAAG,IAAI,CAK5C;IAEO,MAAM,IAAI,SAAS;IASnB,KAAK,WAAY,OAAO,UAU/B;IAEO,IAAI,aAGX;IAEO,cAAc,aAGrB;IAEa,GAAG;IAqElB,KAAK,YACM,cAAc,kBAAkB,CAAC,SAAS,CAAC,oBAClC,cAAc,aAAa,KAAK,GAAG,6CAUrD;IAEF,mBAAmB,aACP,cAAc,aAAa,eACxB,MAAM,KAAK,IAAI,UA6B5B;IAEF,iBAAiB,gDAef;IAEO,qBAAqB,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC;CAKhE"}
+{"version":3,"file":"libro-sql-cell-view.d.ts","sourceRoot":"","sources":["../src/libro-sql-cell-view.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,KAAK,EAAa,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,KAAK,EACV,eAAe,EAGf,SAAS,EACT,aAAa,EACd,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,WAAW,EACX,YAAY,EAEZ,+BAA+B,EAC/B,gBAAgB,EAIhB,eAAe,EAChB,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EACL,QAAQ,EAQR,WAAW,EAGZ,MAAM,mBAAmB,CAAC;AAI3B,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAsHvD,eAAO,MAAM,YAAY,sEAsDxB,CAAC;AAEF,qBAEa,gBAAiB,SAAQ,+BAA+B;IAC1D,IAAI,uEAAgB;IACrB,KAAK,EAAE,iBAAiB,CAAC;IACjC,gBAAgB,EAAE,gBAAgB,CAAC;IAEnC,OAAO,EAAE,OAAO,EAAE,CAAC;IAGnB,cAAc,CAAC,EAAE,cAAc,CAAC;IAGvB,YAAY,EAAE,YAAY,CAA0B;IAG7D,gBAAgB,SAAK;IAGZ,kBAAkB,SAAK;IAEb,SAAS,EAAE,SAAS,CAAC;IAExC,SAAS,CAAC,uBAAuB,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAwB;IAEzE,IAAI,WAAW,kBAEd;IAEQ,YAAY,uDAMnB;IAGO,gBAAgB;IAIzB,oBAAoB;IAuBpB,SAAS,CAAC,kBAAkB,4BAAmC;IAC/D,IAAI,eAAe,6BAElB;gBAGqB,OAAO,EAAE,eAAe,EACvB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACnB,gBAAgB,EAAE,gBAAgB,EACjC,iBAAiB,EAAE,iBAAiB;IAsCxD,WAAW,sBAElB;IAEF,aAAa,CAAC,GAAG,EAAE,GAAG;IAKb,YAAY,SAAU,QAAQ,KAAG,IAAI,CAK5C;IAEO,MAAM,IAAI,SAAS;IASnB,KAAK,WAAY,OAAO,UAU/B;IAEO,cAAc,aAGrB;IAEa,GAAG;IAqElB,KAAK,YACM,cAAc,kBAAkB,CAAC,SAAS,CAAC,oBAClC,cAAc,aAAa,KAAK,GAAG,6CAUrD;IAEF,mBAAmB,aACP,cAAc,aAAa,eACxB,MAAM,KAAK,IAAI,UA6B5B;IAEF,iBAAiB,gDAef;CACH"}

package/es/libro-sql-cell-view.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _dec, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _dec9, _class, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7;
+var _dec, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _class, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -31,11 +31,11 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { EditFilled, DatabaseOutlined } from '@ant-design/icons';
 import { CodeEditorManager } from '@difizen/libro-code-editor';
-import { CellUri, isOutput } from '@difizen/libro-common';
-import { CellService, EditorStatus, LibroContextKey, LibroExecutableCellView, LibroViewTracker, VirtualizedManagerHelper, KernelError, LibroJupyterModel, LibroOutputArea } from '@difizen/libro-jupyter';
-import { Deferred, Disposable, DisposableCollection, getOrigin, inject, prop, transient, useInject, view, ViewInstance, ViewManager, ViewOption, ViewRender, watch } from '@difizen/mana-app';
+import { isOutput } from '@difizen/libro-common';
+import { CellService, EditorStatus, LibroContextKey, LibroEditableExecutableCellView, LibroViewTracker, VirtualizedManagerHelper, KernelError, LibroJupyterModel, LibroOutputArea } from '@difizen/libro-jupyter';
+import { Deferred, getOrigin, inject, prop, transient, useInject, view, ViewInstance, ViewManager, ViewOption, ViewRender } from '@difizen/mana-app';
 import { l10n } from '@difizen/mana-l10n';
-import { Input, Popover } from 'antd';
+import { Input } from 'antd';
 import React from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import "./index.less";
@@ -86,6 +86,8 @@ var CellEditor = function CellEditor() {
 var LibroSqlVariableNameInput = function LibroSqlVariableNameInput(_ref) {
   var handCancel = _ref.handCancel;
   var cellView = useInject(ViewInstance);
+  var contextKey = useInject(LibroContextKey);
+  var inputRef = useRef(null);
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     resultVariableAvailable = _useState2[0],
@@ -104,6 +106,13 @@ var LibroSqlVariableNameInput = function LibroSqlVariableNameInput(_ref) {
     }
     setVariableName(e.target.value);
   }, [cellView.parent.model.cells]);
+  useEffect(function () {
+    if (inputRef.current !== null) {
+      inputRef.current.focus({
+        cursor: 'end'
+      });
+    }
+  });
   var handValueSave = useCallback(function () {
     cellView.model.resultVariable = getDfVariableName(cellView.parent.model.cells.filter(function (cell) {
       return cell.model.type === 'sql';
@@ -119,34 +128,28 @@ var LibroSqlVariableNameInput = function LibroSqlVariableNameInput(_ref) {
       status: "".concat(resultVariableAvailable ? '' : 'warning'),
       className: "libro-sql-variable-name-input",
       onChange: handleValueChange,
+      onBlur: handValueSave,
+      onFocus: function onFocus() {
+        contextKey.disableCommandMode();
+      },
+      ref: inputRef,
       defaultValue: cellView.model.resultVariable
     }), !resultVariableAvailable && /*#__PURE__*/_jsx("span", {
       className: "libro-sql-input-warning-text",
       children: l10n.t('当前变量名已存在')
-    }), /*#__PURE__*/_jsxs("div", {
-      className: "libro-sql-input-button",
-      children: [/*#__PURE__*/_jsx("span", {
-        onClick: handCancel,
-        className: "libro-sql-input-cancel",
-        children: l10n.t('取消')
-      }), /*#__PURE__*/_jsx("span", {
-        onClick: handValueSave,
-        className: "libro-sql-input-save",
-        children: l10n.t('保存')
-      })]
     })]
   });
 };
 export var LibroSqlCell = /*#__PURE__*/React.forwardRef(function SqlEditorViewComponent(props, ref) {
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isVariableNameEdit = _useState6[0],
-    setIsVariableNameEdit = _useState6[1];
   var instance = useInject(ViewInstance);
   var contextKey = useInject(LibroContextKey);
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    edit = _useState6[0],
+    setEdit = _useState6[1];
   var handCancelEdit = function handCancelEdit() {
     contextKey.enableCommandMode();
-    setIsVariableNameEdit(false);
+    setEdit(false);
   };
   return /*#__PURE__*/_jsxs("div", {
     tabIndex: 10,
@@ -168,45 +171,26 @@ export var LibroSqlCell = /*#__PURE__*/React.forwardRef(function SqlEditorViewCo
         children: [/*#__PURE__*/_jsx("span", {
           className: "libro-sql-variable-name-title",
           children: "Name: "
-        }), /*#__PURE__*/_jsx("span", {
+        }), edit ? /*#__PURE__*/_jsx(LibroSqlVariableNameInput, {
+          handCancel: handCancelEdit
+        }) : /*#__PURE__*/_jsx("span", {
           className: "libro-sql-variable-content",
-          children: instance.model.resultVariable
-        }), /*#__PURE__*/_jsx("div", {
-          className: "libro-sql-variable-name-popover",
-          style: {
-            display: 'inline-block'
+          onDoubleClick: function onDoubleClick() {
+            setEdit(true);
           },
-          children: /*#__PURE__*/_jsx(Popover, {
-            content: /*#__PURE__*/_jsx(LibroSqlVariableNameInput, {
-              handCancel: handCancelEdit
-            }),
-            placement: "bottomLeft",
-            open: instance.parent.model.inputEditable ? isVariableNameEdit : false,
-            onOpenChange: function onOpenChange(visible) {
-              if (visible) {
-                contextKey.disableCommandMode();
-              } else {
-                contextKey.enableCommandMode();
-              }
-              setIsVariableNameEdit(visible);
-            },
-            getPopupContainer: function getPopupContainer() {
-              var _instance$container;
-              return (_instance$container = instance.container) === null || _instance$container === void 0 || (_instance$container = _instance$container.current) === null || _instance$container === void 0 ? void 0 : _instance$container.getElementsByClassName('libro-sql-variable-name')[0];
-            },
-            trigger: "click",
-            overlayClassName: "libro-sql-popover-container",
-            children: /*#__PURE__*/_jsx(EditFilled, {
-              className: "libro-sql-edit-icon"
-            })
-          })
+          children: instance.model.resultVariable
+        }), !edit && /*#__PURE__*/_jsx(EditFilled, {
+          className: "libro-sql-edit-icon",
+          onClick: function onClick() {
+            setEdit(true);
+          }
         })]
       })]
     }), /*#__PURE__*/_jsx(CellEditor, {})]
   });
 });
-export var LibroSqlCellView = (_dec = transient(), _dec2 = view('libro-sql-cell-view'), _dec3 = inject(LibroContextKey), _dec4 = prop(), _dec5 = prop(), _dec6 = prop(), _dec7 = prop(), _dec8 = prop(), _dec9 = inject(SqlScript), _dec(_class = _dec2(_class = (_class2 = /*#__PURE__*/function (_LibroExecutableCellV) {
-  _inherits(LibroSqlCellView, _LibroExecutableCellV);
+export var LibroSqlCellView = (_dec = transient(), _dec2 = view('libro-sql-cell-view'), _dec3 = prop(), _dec4 = prop(), _dec5 = prop(), _dec6 = prop(), _dec7 = inject(SqlScript), _dec(_class = _dec2(_class = (_class2 = /*#__PURE__*/function (_LibroEditableExecuta) {
+  _inherits(LibroSqlCellView, _LibroEditableExecuta);
   var _super = _createSuper(LibroSqlCellView);
   function LibroSqlCellView(options, cellService, viewManager, libroViewTracker, codeEditorManager) {
     var _options$cell;
@@ -215,16 +199,12 @@ export var LibroSqlCellView = (_dec = transient(), _dec2 = view('libro-sql-cell-
     _this = _super.call(this, options, cellService);
     _this.view = LibroSqlCell;
     _this.libroViewTracker = void 0;
-    _this.codeEditorManager = void 0;
-    _this.toDisposeOnEditor = new DisposableCollection();
-    _initializerDefineProperty(_this, "libroContextKey", _descriptor, _assertThisInitialized(_this));
     _this.outputs = void 0;
-    _initializerDefineProperty(_this, "editorView", _descriptor2, _assertThisInitialized(_this));
-    _initializerDefineProperty(_this, "databaseConfig", _descriptor3, _assertThisInitialized(_this));
-    _initializerDefineProperty(_this, "editorStatus", _descriptor4, _assertThisInitialized(_this));
-    _initializerDefineProperty(_this, "editorAreaHeight", _descriptor5, _assertThisInitialized(_this));
-    _initializerDefineProperty(_this, "noEditorAreaHeight", _descriptor6, _assertThisInitialized(_this));
-    _initializerDefineProperty(_this, "sqlScript", _descriptor7, _assertThisInitialized(_this));
+    _initializerDefineProperty(_this, "databaseConfig", _descriptor, _assertThisInitialized(_this));
+    _initializerDefineProperty(_this, "editorStatus", _descriptor2, _assertThisInitialized(_this));
+    _initializerDefineProperty(_this, "editorAreaHeight", _descriptor3, _assertThisInitialized(_this));
+    _initializerDefineProperty(_this, "noEditorAreaHeight", _descriptor4, _assertThisInitialized(_this));
+    _initializerDefineProperty(_this, "sqlScript", _descriptor5, _assertThisInitialized(_this));
     _this.editorViewReadyDeferred = new Deferred();
     _this.renderEditor = function () {
       if (_this.editorView) {
@@ -266,11 +246,6 @@ export var LibroSqlCellView = (_dec = transient(), _dec2 = view('libro-sql-cell-
         (_this$container2 = _this.container) === null || _this$container2 === void 0 || (_this$container2 = _this$container2.current) === null || _this$container2 === void 0 || (_this$container2 = _this$container2.parentElement) === null || _this$container2 === void 0 || _this$container2.focus();
       }
     };
-    _this.blur = function () {
-      var _this$editorView, _this$editorView2;
-      (_this$editorView = _this.editorView) === null || _this$editorView === void 0 || (_this$editorView = _this$editorView.editor) === null || _this$editorView === void 0 || _this$editorView.setOption('styleActiveLine', false);
-      (_this$editorView2 = _this.editorView) === null || _this$editorView2 === void 0 || (_this$editorView2 = _this$editorView2.editor) === null || _this$editorView2 === void 0 || _this$editorView2.setOption('highlightActiveLineGutter', false);
-    };
     _this.clearExecution = function () {
       _this.model.clearExecution();
       _this.outputArea.clear();
@@ -448,110 +423,6 @@ export var LibroSqlCellView = (_dec = transient(), _dec2 = view('libro-sql-cell-
       var editorHostId = this.parent.id + this.id;
       this.codeEditorManager.setEditorHostRef(editorHostId, ref);
     }
-  }, {
-    key: "createEditor",
-    value: function () {
-      var _createEditor = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
-        var _this2 = this;
-        var editorHostId, option, editorView;
-        return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-          while (1) switch (_context5.prev = _context5.next) {
-            case 0:
-              editorHostId = this.parent.id + this.id;
-              option = {
-                uuid: CellUri.from(this.parent.model.id, this.model.id).toString(),
-                editorHostId: editorHostId,
-                model: this.model,
-                config: {
-                  readOnly: !this.parent.model.inputEditable,
-                  editable: this.parent.model.inputEditable
-                }
-              }; // 防止虚拟滚动中编辑器被频繁创建
-              if (!this.editorView) {
-                _context5.next = 5;
-                break;
-              }
-              this.editorStatus = EditorStatus.LOADED;
-              return _context5.abrupt("return");
-            case 5:
-              _context5.next = 7;
-              return this.codeEditorManager.getOrCreateEditorView(option);
-            case 7:
-              editorView = _context5.sent;
-              this.editorView = editorView;
-              this.editorStatus = EditorStatus.LOADED;
-              this.editorViewReadyDeferred.resolve();
-              editorView.onEditorStatusChange(function (e) {
-                if (e.status === 'ready') {
-                  _this2.editor = _this2.editorView.editor;
-                  _this2.afterEditorReady();
-                } else if (e.status === 'disposed') {
-                  _this2.toDisposeOnEditor.dispose();
-                }
-              });
-            case 12:
-            case "end":
-              return _context5.stop();
-          }
-        }, _callee5, this);
-      }));
-      function createEditor() {
-        return _createEditor.apply(this, arguments);
-      }
-      return createEditor;
-    }()
-  }, {
-    key: "afterEditorReady",
-    value: function () {
-      var _afterEditorReady = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
-        var _this3 = this,
-          _this$editorView$onMo,
-          _this$editorView3,
-          _this$editor$onModelC,
-          _this$editor,
-          _this$editor$onModelC2;
-        return _regeneratorRuntime().wrap(function _callee6$(_context6) {
-          while (1) switch (_context6.prev = _context6.next) {
-            case 0:
-              this.focusEditor();
-              this.toDisposeOnEditor.push(watch(this.parent.model, 'inputEditable', function () {
-                var _this3$editorView;
-                (_this3$editorView = _this3.editorView) === null || _this3$editorView === void 0 || (_this3$editorView = _this3$editorView.editor) === null || _this3$editorView === void 0 || _this3$editorView.setOption('readOnly', getOrigin(!_this3.parent.model.inputEditable));
-              }));
-              this.toDisposeOnEditor.push((_this$editorView$onMo = (_this$editorView3 = this.editorView) === null || _this$editorView3 === void 0 ? void 0 : _this$editorView3.onModalChange(function (val) {
-                return _this3.hasModal = val;
-              })) !== null && _this$editorView$onMo !== void 0 ? _this$editorView$onMo : Disposable.NONE);
-              this.toDisposeOnEditor.push((_this$editor$onModelC = (_this$editor = this.editor) === null || _this$editor === void 0 || (_this$editor$onModelC2 = _this$editor.onModelContentChanged) === null || _this$editor$onModelC2 === void 0 ? void 0 : _this$editor$onModelC2.call(_this$editor, function (e) {
-                _this3.parent.model.onCellContentChange({
-                  cell: _this3,
-                  changes: e
-                });
-              })) !== null && _this$editor$onModelC !== void 0 ? _this$editor$onModelC : Disposable.NONE);
-            case 4:
-            case "end":
-              return _context6.stop();
-          }
-        }, _callee6, this);
-      }));
-      function afterEditorReady() {
-        return _afterEditorReady.apply(this, arguments);
-      }
-      return afterEditorReady;
-    }()
-  }, {
-    key: "focusEditor",
-    value: function focusEditor() {
-      var _this$editorView4, _this$parent$model$ac;
-      //选中cell、编辑模式、非只读时才focus
-      if ((_this$editorView4 = this.editorView) !== null && _this$editorView4 !== void 0 && _this$editorView4.editor && this.editorView.editorStatus === 'ready' && ((_this$parent$model$ac = this.parent.model.active) === null || _this$parent$model$ac === void 0 ? void 0 : _this$parent$model$ac.id) === this.id && !this.parent.model.commandMode && this.libroContextKey.commandModeEnabled === true &&
-      // 排除弹窗等情况
-      this.parent.model.inputEditable) {
-        var _this$editorView5, _this$editorView6, _this$editorView7;
-        (_this$editorView5 = this.editorView) === null || _this$editorView5 === void 0 || _this$editorView5.editor.setOption('styleActiveLine', true);
-        (_this$editorView6 = this.editorView) === null || _this$editorView6 === void 0 || _this$editorView6.editor.setOption('highlightActiveLineGutter', true);
-        (_this$editorView7 = this.editorView) === null || _this$editorView7 === void 0 || _this$editorView7.editor.focus();
-      }
-    }
   }, {
     key: "toJSON",
     value: function toJSON() {
@@ -565,22 +436,22 @@ export var LibroSqlCellView = (_dec = transient(), _dec2 = view('libro-sql-cell-
   }, {
     key: "run",
     value: function () {
-      var _run = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
-        var _this4 = this;
+      var _run = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+        var _this2 = this;
         var libroModel, kernelConnection, cellContent, future, startTimeStr, msgPromise, endTimeStr;
-        return _regeneratorRuntime().wrap(function _callee7$(_context7) {
-          while (1) switch (_context7.prev = _context7.next) {
+        return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
             case 0:
               libroModel = this.parent.model;
               if (!(!libroModel || !(libroModel instanceof LibroJupyterModel) || !libroModel.kernelConnection || libroModel.kernelConnection.isDisposed)) {
-                _context7.next = 3;
+                _context5.next = 3;
                 break;
               }
-              return _context7.abrupt("return", false);
+              return _context5.abrupt("return", false);
             case 3:
               kernelConnection = getOrigin(libroModel.kernelConnection);
               cellContent = this.model.source;
-              _context7.prev = 5;
+              _context5.prev = 5;
               // Promise.resolve().then(() => {
               this.clearExecution();
               // });
@@ -596,26 +467,26 @@ export var LibroSqlCellView = (_dec = transient(), _dec2 = view('libro-sql-cell-
               };
               // Handle iopub messages
               future.onIOPub = function (msg) {
-                _this4.model.msgChangeEmitter.fire(msg);
+                _this2.model.msgChangeEmitter.fire(msg);
                 if (msg.header.msg_type === 'execute_input') {
-                  _this4.model.kernelExecuting = true;
+                  _this2.model.kernelExecuting = true;
                   startTimeStr = msg.header.date;
-                  var meta = _this4.model.metadata['execution'];
+                  var meta = _this2.model.metadata['execution'];
                   if (meta) {
                     meta['shell.execute_reply.started'] = startTimeStr;
                   }
                 }
                 if (msg.header.msg_type === 'execute_result') {
-                  _this4.model.metadata['isVariableSaved'] = msg.content.data['application/vnd.libro.sql+json'].isVariableSaved;
+                  _this2.model.metadata['isVariableSaved'] = msg.content.data['application/vnd.libro.sql+json'].isVariableSaved;
                 }
                 if (msg.header.msg_type === 'error') {
-                  _this4.model.hasExecutedError = true;
+                  _this2.model.hasExecutedError = true;
                 }
               };
-              _context7.next = 14;
+              _context5.next = 14;
               return future.done;
             case 14:
-              msgPromise = _context7.sent;
+              msgPromise = _context5.sent;
               this.model.executing = false;
               this.model.kernelExecuting = false;
               this.model.hasExecutedSuccess = !this.model.hasExecutedError;
@@ -624,87 +495,71 @@ export var LibroSqlCellView = (_dec = transient(), _dec2 = view('libro-sql-cell-
               this.model.metadata['execution']['shell.execute_reply.started'] = startTimeStr;
               this.model.metadata['execution']['shell.execute_reply.end'] = endTimeStr;
               if (msgPromise) {
-                _context7.next = 24;
+                _context5.next = 24;
                 break;
               }
-              return _context7.abrupt("return", true);
+              return _context5.abrupt("return", true);
             case 24:
               if (!(msgPromise.content.status === 'ok')) {
-                _context7.next = 28;
+                _context5.next = 28;
                 break;
               }
-              return _context7.abrupt("return", true);
+              return _context5.abrupt("return", true);
             case 28:
               throw new KernelError(msgPromise.content);
             case 29:
-              _context7.next = 36;
+              _context5.next = 36;
               break;
             case 31:
-              _context7.prev = 31;
-              _context7.t0 = _context7["catch"](5);
-              if (!_context7.t0.message.startsWith('Canceled')) {
-                _context7.next = 35;
+              _context5.prev = 31;
+              _context5.t0 = _context5["catch"](5);
+              if (!_context5.t0.message.startsWith('Canceled')) {
+                _context5.next = 35;
                 break;
               }
-              return _context7.abrupt("return", false);
+              return _context5.abrupt("return", false);
             case 35:
-              throw _context7.t0;
+              throw _context5.t0;
             case 36:
             case "end":
-              return _context7.stop();
+              return _context5.stop();
           }
-        }, _callee7, this, [[5, 31]]);
+        }, _callee5, this, [[5, 31]]);
       }));
       function run() {
         return _run.apply(this, arguments);
       }
       return run;
     }()
-  }, {
-    key: "shouldEnterEditorMode",
-    value: function shouldEnterEditorMode(e) {
-      var _getOrigin;
-      return (_getOrigin = getOrigin(this.editorView)) !== null && _getOrigin !== void 0 && (_getOrigin = _getOrigin.editor) !== null && _getOrigin !== void 0 && (_getOrigin = _getOrigin.host) !== null && _getOrigin !== void 0 && _getOrigin.contains(e.target) ? true : false;
-    }
   }]);
   return LibroSqlCellView;
-}(LibroExecutableCellView), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, "libroContextKey", [_dec3], {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  initializer: null
-}), _descriptor2 = _applyDecoratedDescriptor(_class2.prototype, "editorView", [_dec4], {
-  configurable: true,
-  enumerable: true,
-  writable: true,
-  initializer: null
-}), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, "databaseConfig", [_dec5], {
+}(LibroEditableExecutableCellView), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, "databaseConfig", [_dec3], {
   configurable: true,
   enumerable: true,
   writable: true,
   initializer: null
-}), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, "editorStatus", [_dec6], {
+}), _descriptor2 = _applyDecoratedDescriptor(_class2.prototype, "editorStatus", [_dec4], {
   configurable: true,
   enumerable: true,
   writable: true,
   initializer: function initializer() {
     return EditorStatus.NOTLOADED;
   }
-}), _descriptor5 = _applyDecoratedDescriptor(_class2.prototype, "editorAreaHeight", [_dec7], {
+}), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, "editorAreaHeight", [_dec5], {
   configurable: true,
   enumerable: true,
   writable: true,
   initializer: function initializer() {
     return 0;
   }
-}), _descriptor6 = _applyDecoratedDescriptor(_class2.prototype, "noEditorAreaHeight", [_dec8], {
+}), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, "noEditorAreaHeight", [_dec6], {
   configurable: true,
   enumerable: true,
   writable: true,
   initializer: function initializer() {
     return 0;
   }
-}), _descriptor7 = _applyDecoratedDescriptor(_class2.prototype, "sqlScript", [_dec9], {
+}), _descriptor5 = _applyDecoratedDescriptor(_class2.prototype, "sqlScript", [_dec7], {
   configurable: true,
   enumerable: true,
   writable: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@difizen/libro-sql-cell",
-  "version": "0.2.34",
+  "version": "0.2.35",
   "description": "",
   "keywords": [
     "libro",
@@ -32,10 +32,10 @@
     "src"
   ],
   "dependencies": {
-    "@difizen/libro-code-editor": "^0.2.34",
-    "@difizen/libro-jupyter": "^0.2.34",
-    "@difizen/libro-rendermime": "^0.2.34",
-    "@difizen/libro-common": "^0.2.34",
+    "@difizen/libro-code-editor": "^0.2.35",
+    "@difizen/libro-jupyter": "^0.2.35",
+    "@difizen/libro-rendermime": "^0.2.35",
+    "@difizen/libro-common": "^0.2.35",
     "@ant-design/icons": "^5.1.0",
     "@difizen/mana-app": "latest",
     "@difizen/mana-l10n": "latest"

package/src/index.less

@@ -16,14 +16,10 @@
   border-right: 1px solid var(--mana-libro-cell-border-color);
 }
 
-.libro-sql-input-warning-text,
-.libro-sql-variable-name-input {
-  display: block !important;
-}
-
 .libro-sql-variable-name-input {
   width: 120px !important;
   height: 32px;
+  margin-left: 6px;
   border: 1px solid #d6d8da !important;
   border-radius: 6px !important;
   box-shadow: unset !important;
@@ -53,8 +49,14 @@
   letter-spacing: 0;
 }
 
+.libro-sql-variable-content {
+  padding-left: 18px;
+}
+
 .libro-sql-variable-name {
+  display: flex;
   margin-left: 8px;
+  align-items: center;
 
   svg {
     margin-left: 4px;
@@ -99,8 +101,8 @@
 }
 
 .libro-sql-input-warning-text {
-  width: 112px;
-  height: 20px;
+  display: flex;
+  align-items: center;
   margin-top: 4px;
   color: #faad14;
   font-weight: 400;

package/src/libro-sql-cell-view.tsx

@@ -1,8 +1,7 @@
 import { EditFilled, DatabaseOutlined } from '@ant-design/icons';
-import type { CodeEditorViewOptions, CodeEditorView } from '@difizen/libro-code-editor';
 import { CodeEditorManager } from '@difizen/libro-code-editor';
 import type { ICodeCell, IOutput } from '@difizen/libro-common';
-import { CellUri, isOutput } from '@difizen/libro-common';
+import { isOutput } from '@difizen/libro-common';
 import type {
   CellViewOptions,
   ExecutionMeta,
@@ -14,7 +13,7 @@ import {
   CellService,
   EditorStatus,
   LibroContextKey,
-  LibroExecutableCellView,
+  LibroEditableExecutableCellView,
   LibroViewTracker,
   VirtualizedManagerHelper,
   KernelError,
@@ -24,8 +23,6 @@ import {
 import type { ViewSize } from '@difizen/mana-app';
 import {
   Deferred,
-  Disposable,
-  DisposableCollection,
   getOrigin,
   inject,
   prop,
@@ -36,10 +33,10 @@ import {
   ViewManager,
   ViewOption,
   ViewRender,
-  watch,
 } from '@difizen/mana-app';
 import { l10n } from '@difizen/mana-l10n';
-import { Input, Popover } from 'antd';
+import type { InputRef } from 'antd';
+import { Input } from 'antd';
 import React from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
@@ -98,6 +95,8 @@ const LibroSqlVariableNameInput: React.FC<LibroSqlVariableProps> = ({
   handCancel,
 }: LibroSqlVariableProps) => {
   const cellView = useInject<LibroSqlCellView>(ViewInstance);
+  const contextKey = useInject<LibroContextKey>(LibroContextKey);
+  const inputRef = useRef<InputRef>(null);
   const [resultVariableAvailable, setVariableNameAvailable] = useState(true);
   const [resultVariable, setVariableName] = useState(cellView.model.resultVariable);
   const handleValueChange = useCallback(
@@ -118,6 +117,14 @@ const LibroSqlVariableNameInput: React.FC<LibroSqlVariableProps> = ({
     [cellView.parent.model.cells],
   );
 
+  useEffect(() => {
+    if (inputRef.current !== null) {
+      inputRef.current.focus({
+        cursor: 'end',
+      });
+    }
+  });
+
   const handValueSave = useCallback(() => {
     cellView.model.resultVariable = getDfVariableName(
       cellView.parent.model.cells.filter(
@@ -137,6 +144,11 @@ const LibroSqlVariableNameInput: React.FC<LibroSqlVariableProps> = ({
         status={`${resultVariableAvailable ? '' : 'warning'}`}
         className="libro-sql-variable-name-input"
         onChange={handleValueChange}
+        onBlur={handValueSave}
+        onFocus={() => {
+          contextKey.disableCommandMode();
+        }}
+        ref={inputRef}
         defaultValue={cellView.model.resultVariable}
       />
 
@@ -145,28 +157,19 @@ const LibroSqlVariableNameInput: React.FC<LibroSqlVariableProps> = ({
           {l10n.t('当前变量名已存在')}
         </span>
       )}
-
-      <div className="libro-sql-input-button">
-        <span onClick={handCancel} className="libro-sql-input-cancel">
-          {l10n.t('取消')}
-        </span>
-        <span onClick={handValueSave} className="libro-sql-input-save">
-          {l10n.t('保存')}
-        </span>
-      </div>
     </>
   );
 };
 
 export const LibroSqlCell = React.forwardRef<HTMLDivElement>(
   function SqlEditorViewComponent(props, ref) {
-    const [isVariableNameEdit, setIsVariableNameEdit] = useState(false);
     const instance = useInject<LibroSqlCellView>(ViewInstance);
     const contextKey = useInject(LibroContextKey);
+    const [edit, setEdit] = useState(false);
 
     const handCancelEdit = () => {
       contextKey.enableCommandMode();
-      setIsVariableNameEdit(false);
+      setEdit(false);
     };
 
     return (
@@ -186,36 +189,26 @@ export const LibroSqlCell = React.forwardRef<HTMLDivElement>(
           </div>
           <div className="libro-sql-variable-name">
             <span className="libro-sql-variable-name-title">Name: </span>
-            <span className="libro-sql-variable-content">
-              {instance.model.resultVariable}
-            </span>
-            <div
-              className="libro-sql-variable-name-popover"
-              style={{ display: 'inline-block' }}
-            >
-              <Popover
-                content={<LibroSqlVariableNameInput handCancel={handCancelEdit} />}
-                placement="bottomLeft"
-                open={instance.parent.model.inputEditable ? isVariableNameEdit : false}
-                onOpenChange={(visible) => {
-                  if (visible) {
-                    contextKey.disableCommandMode();
-                  } else {
-                    contextKey.enableCommandMode();
-                  }
-                  setIsVariableNameEdit(visible);
+            {edit ? (
+              <LibroSqlVariableNameInput handCancel={handCancelEdit} />
+            ) : (
+              <span
+                className="libro-sql-variable-content"
+                onDoubleClick={() => {
+                  setEdit(true);
                 }}
-                getPopupContainer={() => {
-                  return instance.container?.current?.getElementsByClassName(
-                    'libro-sql-variable-name',
-                  )[0] as HTMLElement;
-                }}
-                trigger="click"
-                overlayClassName="libro-sql-popover-container"
               >
-                <EditFilled className="libro-sql-edit-icon" />
-              </Popover>
-            </div>
+                {instance.model.resultVariable}
+              </span>
+            )}
+            {!edit && (
+              <EditFilled
+                className="libro-sql-edit-icon"
+                onClick={() => {
+                  setEdit(true);
+                }}
+              />
+            )}
           </div>
         </div>
         <CellEditor />
@@ -226,20 +219,13 @@ export const LibroSqlCell = React.forwardRef<HTMLDivElement>(
 
 @transient()
 @view('libro-sql-cell-view')
-export class LibroSqlCellView extends LibroExecutableCellView {
+export class LibroSqlCellView extends LibroEditableExecutableCellView {
   override view = LibroSqlCell;
   declare model: LibroSqlCellModel;
   libroViewTracker: LibroViewTracker;
-  codeEditorManager: CodeEditorManager;
-  protected toDisposeOnEditor = new DisposableCollection();
-
-  @inject(LibroContextKey) protected readonly libroContextKey: LibroContextKey;
 
   outputs: IOutput[];
 
-  @prop()
-  editorView?: CodeEditorView;
-
   @prop()
   databaseConfig?: DatabaseConfig;
 
@@ -353,74 +339,6 @@ export class LibroSqlCellView extends LibroExecutableCellView {
     this.codeEditorManager.setEditorHostRef(editorHostId, ref);
   }
 
-  async createEditor() {
-    const editorHostId = this.parent.id + this.id;
-    const option: CodeEditorViewOptions = {
-      uuid: CellUri.from(this.parent.model.id, this.model.id).toString(),
-      editorHostId: editorHostId,
-      model: this.model,
-      config: {
-        readOnly: !this.parent.model.inputEditable,
-        editable: this.parent.model.inputEditable,
-      },
-    };
-    // 防止虚拟滚动中编辑器被频繁创建
-    if (this.editorView) {
-      this.editorStatus = EditorStatus.LOADED;
-      return;
-    }
-
-    const editorView = await this.codeEditorManager.getOrCreateEditorView(option);
-
-    this.editorView = editorView;
-    this.editorStatus = EditorStatus.LOADED;
-    this.editorViewReadyDeferred.resolve();
-    editorView.onEditorStatusChange((e) => {
-      if (e.status === 'ready') {
-        this.editor = this.editorView!.editor;
-        this.afterEditorReady();
-      } else if (e.status === 'disposed') {
-        this.toDisposeOnEditor.dispose();
-      }
-    });
-  }
-
-  protected async afterEditorReady() {
-    this.focusEditor();
-    this.toDisposeOnEditor.push(
-      watch(this.parent.model, 'inputEditable', () => {
-        this.editorView?.editor?.setOption(
-          'readOnly',
-          getOrigin(!this.parent.model.inputEditable),
-        );
-      }),
-    );
-    this.toDisposeOnEditor.push(
-      this.editorView?.onModalChange((val) => (this.hasModal = val)) ?? Disposable.NONE,
-    );
-    this.toDisposeOnEditor.push(
-      this.editor?.onModelContentChanged?.((e) => {
-        this.parent.model.onCellContentChange({ cell: this, changes: e });
-      }) ?? Disposable.NONE,
-    );
-  }
-
-  protected focusEditor() {
-    //选中cell、编辑模式、非只读时才focus
-    if (
-      this.editorView?.editor &&
-      this.editorView.editorStatus === 'ready' &&
-      this.parent.model.active?.id === this.id &&
-      !this.parent.model.commandMode &&
-      this.libroContextKey.commandModeEnabled === true && // 排除弹窗等情况
-      this.parent.model.inputEditable
-    ) {
-      this.editorView?.editor.setOption('styleActiveLine', true);
-      this.editorView?.editor.setOption('highlightActiveLineGutter', true);
-      this.editorView?.editor.focus();
-    }
-  }
-
   override onViewResize = (size: ViewSize): void => {
     // 把 header 部分高度也放在这部分，用来撑开高度
     if (size.height) {
@@ -449,11 +367,6 @@ export class LibroSqlCellView extends LibroExecutableCellView {
     }
   };
 
-  override blur = () => {
-    this.editorView?.editor?.setOption('styleActiveLine', false);
-    this.editorView?.editor?.setOption('highlightActiveLineGutter', false);
-  };
-
   override clearExecution = () => {
     this.model.clearExecution();
     this.outputArea.clear();
@@ -591,10 +504,4 @@ export class LibroSqlCellView extends LibroExecutableCellView {
         }),
     );
   };
-
-  override shouldEnterEditorMode(e: React.FocusEvent<HTMLElement>) {
-    return getOrigin(this.editorView)?.editor?.host?.contains(e.target as HTMLElement)
-      ? true
-      : false;
-  }
 }