@difizen/libro-code-cell 0.3.20 → 0.3.21

package/es/code-cell-view.d.ts

@@ -6,6 +6,8 @@ import type { LibroCell, CellViewOptions } from '@difizen/libro-core';
 import { CellService, EditorStatus, LibroEditableExecutableCellView, LibroOutputArea } from '@difizen/libro-core';
 import type { ViewSize } from '@difizen/mana-app';
 import { ViewManager, Deferred } from '@difizen/mana-app';
+import 'highlight.js/styles/vs.css';
+import './index.less';
 import type { LibroCodeCellModel } from './code-cell-model.js';
 export declare const CellEditorMemo: import("react").NamedExoticComponent<{}>;
 export declare class LibroCodeCellView extends LibroEditableExecutableCellView {

package/es/code-cell-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-cell-view.d.ts","sourceRoot":"","sources":["../src/code-cell-view.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,KAAK,EAAa,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGhE,OAAO,KAAK,EAEV,SAAS,EACT,eAAe,EAChB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,WAAW,EACX,YAAY,EACZ,+BAA+B,EAC/B,eAAe,EAEhB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAQL,WAAW,EAIX,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAI3B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AA2C/D,eAAO,MAAM,cAAc,0CAAmB,CAAC;AAmB/C,qBAEa,iBAAkB,SAAQ,+BAA+B;IAC3D,IAAI,2FAA2B;IAExC,WAAW,EAAE,WAAW,CAAC;IAEjB,KAAK,EAAE,kBAAkB,CAAC;IAElC,OAAO,EAAE,OAAO,EAAE,CAAC;IAGnB,gBAAgB,SAAK;IAGZ,kBAAkB,SAAK;IAGvB,cAAc,SAAK;IAGnB,YAAY,EAAE,YAAY,CAA0B;IAE7D,SAAS,CAAC,kBAAkB,4BAAmC;IAC/D,IAAI,eAAe,6BAElB;IAEQ,YAAY,uDAKnB;IAEO,YAAY,CAAC,IAAI,EAAE,QAAQ;IAMpC,oBAAoB;gBAqBE,OAAO,EAAE,eAAe,EACvB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EAClB,iBAAiB,EAAE,iBAAiB;IA6BxD,WAAW;IAQX,MAAM,IAAI,SAAS;IAQnB,WAAW;IAKpB,aAAa,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;cAK/B,eAAe,IAAI,qBAAqB;IAclD,cAAc,aAGrB;CACH"}
+{"version":3,"file":"code-cell-view.d.ts","sourceRoot":"","sources":["../src/code-cell-view.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,KAAK,EAAa,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGhE,OAAO,KAAK,EAEV,SAAS,EACT,eAAe,EAChB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,WAAW,EACX,YAAY,EACZ,+BAA+B,EAC/B,eAAe,EAEhB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAQL,WAAW,EAIX,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAM3B,OAAO,4BAA4B,CAAC;AACpC,OAAO,cAAc,CAAC;AAEtB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AA+D/D,eAAO,MAAM,cAAc,0CAAmB,CAAC;AAuB/C,qBAEa,iBAAkB,SAAQ,+BAA+B;IAC3D,IAAI,2FAA2B;IAExC,WAAW,EAAE,WAAW,CAAC;IAEjB,KAAK,EAAE,kBAAkB,CAAC;IAElC,OAAO,EAAE,OAAO,EAAE,CAAC;IAGnB,gBAAgB,SAAK;IAGZ,kBAAkB,SAAK;IAGvB,cAAc,SAAK;IAGnB,YAAY,EAAE,YAAY,CAA0B;IAE7D,SAAS,CAAC,kBAAkB,4BAAmC;IAC/D,IAAI,eAAe,6BAElB;IAEQ,YAAY,uDAKnB;IAEO,YAAY,CAAC,IAAI,EAAE,QAAQ;IAMpC,oBAAoB;gBAqBE,OAAO,EAAE,eAAe,EACvB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EAClB,iBAAiB,EAAE,iBAAiB;IA6BxD,WAAW;IAQX,MAAM,IAAI,SAAS;IAQnB,WAAW;IAKpB,aAAa,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;cAK/B,eAAe,IAAI,qBAAqB;IAclD,cAAc,aAGrB;CACH"}

package/es/code-cell-view.js

@@ -32,7 +32,12 @@ import { isOutput } from '@difizen/libro-common';
 import { CellService, EditorStatus, LibroEditableExecutableCellView, LibroOutputArea, VirtualizedManagerHelper } from '@difizen/libro-core';
 import { getOrigin, inject, prop, transient, useInject, view, ViewInstance, ViewManager, ViewOption, ViewRender, watch, Deferred } from '@difizen/mana-app';
 import { l10n } from '@difizen/mana-l10n'; /* eslint-disable react-hooks/exhaustive-deps */
+import hljs from 'highlight.js';
 import { useEffect, useRef, memo, forwardRef } from 'react';
+
+// 引入高亮样式
+import 'highlight.js/styles/vs.css';
+import "./index.less";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 function countLines(inputString) {
@@ -73,15 +78,34 @@ var CellEditor = function CellEditor() {
     });
   }
 };
+var CellWithoutEditor = function CellWithoutEditor() {
+  var instance = useInject(ViewInstance);
+  var codeRef = useRef(null);
+  useEffect(function () {
+    if (codeRef.current) {
+      // 先高亮代码
+      var hljsValue = hljs.highlight(instance.model.value, {
+        language: 'python'
+      });
+      codeRef.current.innerHTML = hljsValue.value;
+    }
+  }, [instance.model.value]);
+  return /*#__PURE__*/_jsx("pre", {
+    className: "cell-no-editor-input",
+    children: /*#__PURE__*/_jsx("code", {
+      ref: codeRef
+    })
+  });
+};
 export var CellEditorMemo = /*#__PURE__*/memo(CellEditor);
 var CodeEditorViewComponent = /*#__PURE__*/forwardRef(function CodeEditorViewComponent(props, ref) {
   var instance = useInject(ViewInstance);
   return /*#__PURE__*/_jsx("div", {
-    className: "libro-codemirror-cell-editor",
+    className: instance.className,
     ref: ref,
     tabIndex: 10,
     onBlur: instance.blur,
-    children: /*#__PURE__*/_jsx(CellEditorMemo, {})
+    children: instance.parent.model.noEditorMode ? /*#__PURE__*/_jsx(CellWithoutEditor, {}) : /*#__PURE__*/_jsx(CellEditorMemo, {})
   });
 });
 export var LibroCodeCellView = (_dec = transient(), _dec2 = view('code-editor-cell-view'), _dec3 = prop(), _dec4 = prop(), _dec5 = prop(), _dec6 = prop(), _dec(_class = _dec2(_class = (_class2 = /*#__PURE__*/function (_LibroEditableExecuta) {

package/es/index.less

@@ -0,0 +1,6 @@
+.cell-no-editor-input {
+  padding: 12px 12px 18px 20px;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  background: var(--mana-libro-input-background);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@difizen/libro-code-cell",
-  "version": "0.3.20",
+  "version": "0.3.21",
   "description": "",
   "keywords": [
     "libro",
@@ -32,11 +32,12 @@
     "src"
   ],
   "dependencies": {
-    "@difizen/libro-code-editor": "^0.3.20",
-    "@difizen/libro-common": "^0.3.20",
-    "@difizen/libro-core": "^0.3.20",
+    "@difizen/libro-code-editor": "^0.3.21",
+    "@difizen/libro-common": "^0.3.21",
+    "@difizen/libro-core": "^0.3.21",
     "@difizen/mana-app": "latest",
-    "@difizen/mana-l10n": "latest"
+    "@difizen/mana-l10n": "latest",
+    "highlight.js": "^11.11.1"
   },
   "peerDependencies": {
     "react": ">=16"

package/src/code-cell-view.tsx

@@ -33,8 +33,13 @@ import {
   Deferred,
 } from '@difizen/mana-app';
 import { l10n } from '@difizen/mana-l10n'; /* eslint-disable react-hooks/exhaustive-deps */
+import hljs from 'highlight.js';
 import { useEffect, useRef, memo, forwardRef } from 'react';
 
+// 引入高亮样式
+import 'highlight.js/styles/vs.css';
+import './index.less';
+
 import type { LibroCodeCellModel } from './code-cell-model.js';
 
 function countLines(inputString: string) {
@@ -78,6 +83,26 @@ const CellEditor: React.FC = () => {
   }
 };
 
+const CellWithoutEditor: React.FC = () => {
+  const instance = useInject<LibroCodeCellView>(ViewInstance);
+  const codeRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (codeRef.current) {
+      // 先高亮代码
+      const hljsValue = hljs.highlight(instance.model.value, {
+        language: 'python',
+      });
+      codeRef.current.innerHTML = hljsValue.value;
+    }
+  }, [instance.model.value]);
+  return (
+    <pre className="cell-no-editor-input">
+      <code ref={codeRef}></code>
+    </pre>
+  );
+};
+
 export const CellEditorMemo = memo(CellEditor);
 
 const CodeEditorViewComponent = forwardRef<HTMLDivElement>(
@@ -86,12 +111,16 @@ const CodeEditorViewComponent = forwardRef<HTMLDivElement>(
 
     return (
       <div
-        className="libro-codemirror-cell-editor"
+        className={instance.className}
         ref={ref}
         tabIndex={10}
         onBlur={instance.blur}
       >
-        <CellEditorMemo />
+        {instance.parent.model.noEditorMode ? (
+          <CellWithoutEditor />
+        ) : (
+          <CellEditorMemo />
+        )}
       </div>
     );
   },

package/src/index.less

@@ -0,0 +1,6 @@
+.cell-no-editor-input {
+  padding: 12px 12px 18px 20px;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  background: var(--mana-libro-input-background);
+}