@difizen/libro-toc 0.0.2-alpha.0

package/es/toc-provider.js

@@ -0,0 +1,181 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _dec, _dec2, _dec3, _dec4, _class, _class2, _descriptor, _descriptor2, _descriptor3;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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; }
+function _initializerDefineProperty(target, property, descriptor, context) { if (!descriptor) return; Object.defineProperty(target, property, { enumerable: descriptor.enumerable, configurable: descriptor.configurable, writable: descriptor.writable, value: descriptor.initializer ? descriptor.initializer.call(context) : void 0 }); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) { var desc = {}; Object.keys(descriptor).forEach(function (key) { desc[key] = descriptor[key]; }); desc.enumerable = !!desc.enumerable; desc.configurable = !!desc.configurable; if ('value' in desc || desc.initializer) { desc.writable = true; } desc = decorators.slice().reverse().reduce(function (desc, decorator) { return decorator(target, property, desc) || desc; }, desc); if (context && desc.initializer !== void 0) { desc.value = desc.initializer ? desc.initializer.call(context) : void 0; desc.initializer = undefined; } if (desc.initializer === void 0) { Object.defineProperty(target, property, desc); desc = null; } return desc; }
+function _initializerWarningHelper(descriptor, context) { throw new Error('Decorating class property failed. Please ensure that ' + 'transform-class-properties is enabled and runs after the decorators transform.'); }
+import { inject, notEmpty, prop, transient, watch } from '@difizen/mana-app';
+import { Emitter, DisposableCollection } from '@difizen/mana-app';
+import { LibroCellTOCProvider } from "./cell-toc-provider.js";
+import { TOCProviderOption } from "./toc-protocol.js";
+export var LibroTOCProviderFactory = Symbol('LibroTOCProviderFactory');
+export var LibroTOCProvider = (_dec = transient(), _dec2 = prop(), _dec3 = prop(), _dec4 = prop(), _dec(_class = (_class2 = /*#__PURE__*/function () {
+  function LibroTOCProvider(option, libroCellTOCProvider) {
+    var _this = this;
+    _classCallCheck(this, LibroTOCProvider);
+    _initializerDefineProperty(this, "providerMap", _descriptor, this);
+    _initializerDefineProperty(this, "headings", _descriptor2, this);
+    _initializerDefineProperty(this, "view", _descriptor3, this);
+    this.toDispose = new DisposableCollection();
+    this.toDisposeWatcher = new DisposableCollection();
+    this.disposed = false;
+    this.activeCellChangeEmitter = new Emitter();
+    this.handleActiveCellChange = function () {
+      var header = _this.getHeadingByCellIndex(_this.view.model.activeIndex);
+      if (header) {
+        _this.activeCellChangeEmitter.fire(header);
+      }
+    };
+    this.updateTOC = function () {
+      _this.headings = _this.getHeadings();
+    };
+    this.onActiveCellChanged = function () {
+      _this.updateTOC();
+    };
+    this.onCellsChanged = function () {
+      _this.setupUpdaterWatcher();
+      _this.updateTOC();
+    };
+    this.onContentChanged = function () {
+      _this.updateTOC();
+    };
+    this.view = option.view;
+    this.libroCellTOCProvider = libroCellTOCProvider;
+    this.initUpdateWatch();
+    this.updateTOC();
+  }
+  LibroTOCProvider = inject(LibroCellTOCProvider)(LibroTOCProvider, undefined, 1) || LibroTOCProvider;
+  LibroTOCProvider = inject(TOCProviderOption)(LibroTOCProvider, undefined, 0) || LibroTOCProvider;
+  _createClass(LibroTOCProvider, [{
+    key: "activeCellChange",
+    get: function get() {
+      return this.activeCellChangeEmitter.event;
+    }
+  }, {
+    key: "initUpdateWatch",
+    value: function initUpdateWatch() {
+      this.toDispose.push(watch(this.view.model, 'activeIndex', this.handleActiveCellChange));
+      this.toDispose.push(watch(this.view.model, 'cells', this.onCellsChanged));
+      this.setupUpdaterWatcher();
+    }
+  }, {
+    key: "setupUpdaterWatcher",
+    value: function setupUpdaterWatcher() {
+      var _this2 = this;
+      this.toDisposeWatcher.dispose();
+      this.toDisposeWatcher = new DisposableCollection();
+      this.getCellTocProviders().map(function (item) {
+        _this2.toDisposeWatcher.push(item.updateWatcher(_this2.updateTOC));
+      });
+    }
+  }, {
+    key: "getCellTocProviderList",
+    value: function getCellTocProviderList() {
+      var _this3 = this;
+      if (!this.view) {
+        return [];
+      }
+      var cells = this.view.model.cells;
+      return cells.map(function (cell) {
+        var tocProvider;
+        if (_this3.providerMap.has(cell.id)) {
+          tocProvider = _this3.providerMap.get(cell.id);
+        } else {
+          tocProvider = _this3.libroCellTOCProvider.createCellTOCProvider(cell);
+        }
+        if (tocProvider) {
+          _this3.providerMap.set(cell.id, tocProvider);
+        }
+        return {
+          cellId: cell.model.id,
+          tocProvider: tocProvider
+        };
+      });
+    }
+  }, {
+    key: "getCellTocProviders",
+    value: function getCellTocProviders() {
+      return this.getCellTocProviderList().map(function (item) {
+        return item.tocProvider;
+      }).filter(notEmpty);
+    }
+  }, {
+    key: "getHeadings",
+    value: function getHeadings() {
+      return this.getCellTocProviderList().map(function (item) {
+        if (item.tocProvider !== undefined) {
+          var headings = item.tocProvider.getHeadings();
+          headings.forEach(function (heading) {
+            return heading.dataset = _objectSpread(_objectSpread({}, heading.dataset), {}, {
+              cellId: item.cellId
+            });
+          });
+          return headings;
+        }
+        return;
+      }).filter(notEmpty).flat();
+    }
+  }, {
+    key: "selectCellByHeading",
+    value: function selectCellByHeading(heading) {
+      var _heading$dataset;
+      var cellId = heading === null || heading === void 0 ? void 0 : (_heading$dataset = heading.dataset) === null || _heading$dataset === void 0 ? void 0 : _heading$dataset['cellId'];
+      if (!cellId) {
+        return;
+      }
+      var cell = this.view.model.cells.find(function (item) {
+        return item.model.id === cellId;
+      });
+      if (cell) {
+        this.view.selectCell(cell);
+      }
+    }
+  }, {
+    key: "getHeadingByCellIndex",
+    value: function getHeadingByCellIndex(index) {
+      var cell = this.view.model.cells[index];
+      return this.headings.find(function (item) {
+        var _item$dataset;
+        return (item === null || item === void 0 ? void 0 : (_item$dataset = item.dataset) === null || _item$dataset === void 0 ? void 0 : _item$dataset['cellId']) === cell.model.id;
+      });
+    }
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      if (this.disposed) {
+        return;
+      }
+      this.toDispose.dispose();
+      this.toDisposeWatcher.dispose();
+      this.providerMap.clear();
+      this.disposed = true;
+    }
+  }]);
+  return LibroTOCProvider;
+}(), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, "providerMap", [_dec2], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function initializer() {
+    return new Map();
+  }
+}), _descriptor2 = _applyDecoratedDescriptor(_class2.prototype, "headings", [_dec3], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function initializer() {
+    return [];
+  }
+}), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, "view", [_dec4], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+})), _class2)) || _class);

package/es/toc-view.d.ts

@@ -0,0 +1,33 @@
+import type { DisplayView, LibroView } from '@difizen/libro-core';
+import { ConfigurationService } from '@difizen/mana-app';
+import { BaseView } from '@difizen/mana-app';
+import { LibroTOCManager } from './toc-manager.js';
+import type { IHeading } from './toc-protocol.js';
+import type { LibroTOCProvider } from './toc-provider.js';
+import './index.less';
+interface DisplayHeading extends IHeading {
+    hasChild: boolean;
+    visible: boolean;
+}
+export declare const TocRender: () => import("react/jsx-runtime").JSX.Element;
+export declare class TOCView extends BaseView implements DisplayView {
+    parent: LibroView | undefined;
+    protected configurationService: ConfigurationService;
+    view: () => import("react/jsx-runtime").JSX.Element;
+    isDisplay: boolean;
+    tocProvider?: LibroTOCProvider;
+    activeHeading: IHeading | undefined;
+    protected libroTOCManager: LibroTOCManager;
+    tocTitle: string;
+    headingCollapseState: Map<string, boolean>;
+    constructor(libroTOCManager: LibroTOCManager, configurationService: ConfigurationService);
+    getHeadingIndentSize(level: number): number;
+    onViewMount(): void;
+    getDisplayHeadings(): DisplayHeading[];
+    protected isHeadingVisible(heading: IHeading, index: number, list: IHeading[]): boolean;
+    isHeadingCollapsed(heading: IHeading): boolean;
+    protected hasChildren(current: IHeading, index: number, list: IHeading[]): boolean;
+    dispose(): void;
+}
+export {};
+//# sourceMappingURL=toc-view.d.ts.map

package/es/toc-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toc-view.d.ts","sourceRoot":"","sources":["../src/toc-view.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAsB,MAAM,mBAAmB,CAAC;AAMjE,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,cAAc,CAAC;AAEtB,UAAU,cAAe,SAAQ,QAAQ;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;CAClB;AA6DD,eAAO,MAAM,SAAS,+CA+BrB,CAAC;AAEF,qBAEa,OAAQ,SAAQ,QAAS,YAAW,WAAW;IAC1D,MAAM,EAAE,SAAS,GAAG,SAAS,CAAa;IAC1C,SAAS,CAAC,oBAAoB,EAAE,oBAAoB,CAAC;IAE5C,IAAI,gDAAa;IAG1B,SAAS,EAAE,OAAO,CAAC;IAGnB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAG/B,aAAa,EAAE,QAAQ,GAAG,SAAS,CAAC;IAEpC,SAAS,CAAC,eAAe,EAAE,eAAe,CAAC;IAG3C,QAAQ,EAAE,MAAM,CAAgB;IAGhC,oBAAoB,uBAA8B;gBAGvB,eAAe,EAAE,eAAe,EAC3B,oBAAoB,EAAE,oBAAoB;IAgB1E,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAIlC,WAAW;IAgBpB,kBAAkB,IAAI,cAAc,EAAE;IAYtC,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE;IAoB7E,kBAAkB,CAAC,OAAO,EAAE,QAAQ;IAIpC,SAAS,CAAC,WAAW,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE;IAU/D,OAAO;CAGjB"}

package/es/toc-view.js

@@ -0,0 +1,245 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _dec, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _class, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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; }
+function _initializerDefineProperty(target, property, descriptor, context) { if (!descriptor) return; Object.defineProperty(target, property, { enumerable: descriptor.enumerable, configurable: descriptor.configurable, writable: descriptor.writable, value: descriptor.initializer ? descriptor.initializer.call(context) : void 0 }); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) { var desc = {}; Object.keys(descriptor).forEach(function (key) { desc[key] = descriptor[key]; }); desc.enumerable = !!desc.enumerable; desc.configurable = !!desc.configurable; if ('value' in desc || desc.initializer) { desc.writable = true; } desc = decorators.slice().reverse().reduce(function (desc, decorator) { return decorator(target, property, desc) || desc; }, desc); if (context && desc.initializer !== void 0) { desc.value = desc.initializer ? desc.initializer.call(context) : void 0; desc.initializer = undefined; } if (desc.initializer === void 0) { Object.defineProperty(target, property, desc); desc = null; } return desc; }
+function _initializerWarningHelper(descriptor, context) { throw new Error('Decorating class property failed. Please ensure that ' + 'transform-class-properties is enabled and runs after the decorators transform.'); }
+import { ArrowDown, ArrowRight } from '@difizen/libro-core';
+import { ConfigurationService } from '@difizen/mana-app';
+import { getOrigin, prop, useInject } from '@difizen/mana-app';
+import { BaseView, view, ViewInstance } from '@difizen/mana-app';
+import { inject, transient } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+import React, { useRef } from 'react';
+import { TOCVisible } from "./toc-configuration.js";
+import { LibroTOCManager } from "./toc-manager.js";
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var TocItem = function TocItem(_ref) {
+  var heading = _ref.heading,
+    onClick = _ref.onClick,
+    active = _ref.active,
+    headingCollapsed = _ref.headingCollapsed,
+    onToggle = _ref.onToggle;
+  var instance = useInject(ViewInstance);
+  var id = heading.id,
+    text = heading.text,
+    level = heading.level,
+    hasChild = heading.hasChild,
+    visible = heading.visible;
+  if (!visible) {
+    return null;
+  }
+  var handleClick = function handleClick() {
+    if (!id) {
+      return;
+    }
+    var element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView();
+    }
+    onClick(heading);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "markdown-toc-container-anchor ".concat(active ? 'active' : ''),
+      style: {
+        paddingLeft: instance.getHeadingIndentSize(level) + (hasChild ? 0 : 20)
+      },
+      onClick: handleClick,
+      children: [hasChild && /*#__PURE__*/_jsx("span", {
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          onToggle();
+        },
+        className: "libro-toc-collapsed",
+        children: headingCollapsed ? /*#__PURE__*/_jsx(ArrowRight, {}) : /*#__PURE__*/_jsx(ArrowDown, {})
+      }), text]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "markdown-toc-container-anchor-shot ".concat(active ? 'active' : '')
+    })]
+  });
+};
+export var TocRender = function TocRender() {
+  var instance = useInject(ViewInstance);
+  var containRef = useRef(null);
+  var handleClick = function handleClick(heading) {
+    var _instance$tocProvider;
+    instance.activeHeading = heading;
+    (_instance$tocProvider = instance.tocProvider) === null || _instance$tocProvider === void 0 ? void 0 : _instance$tocProvider.selectCellByHeading(heading);
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: "markdown-toc-container",
+    ref: containRef,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "markdown-toc-container-title",
+      children: instance.tocTitle
+    }), instance.getDisplayHeadings().map(function (heading) {
+      var _instance$activeHeadi;
+      var collapsed = instance.isHeadingCollapsed(heading);
+      return /*#__PURE__*/_jsx(TocItem, {
+        active: ((_instance$activeHeadi = instance.activeHeading) === null || _instance$activeHeadi === void 0 ? void 0 : _instance$activeHeadi.id) === heading.id,
+        heading: heading,
+        onClick: handleClick,
+        headingCollapsed: collapsed,
+        onToggle: function onToggle() {
+          if (heading.id) {
+            instance.headingCollapseState.set(heading.id, !collapsed);
+          }
+        }
+      }, heading.id);
+    })]
+  });
+};
+export var TOCView = (_dec = transient(), _dec2 = view('libro-toc-view'), _dec3 = prop(), _dec4 = prop(), _dec5 = prop(), _dec6 = prop(), _dec7 = prop(), _dec(_class = _dec2(_class = (_class2 = /*#__PURE__*/function (_BaseView) {
+  _inherits(TOCView, _BaseView);
+  var _super = _createSuper(TOCView);
+  function TOCView(libroTOCManager, configurationService) {
+    var _this;
+    _classCallCheck(this, TOCView);
+    _this = _super.call(this);
+    _this.parent = undefined;
+    _this.view = TocRender;
+    _initializerDefineProperty(_this, "isDisplay", _descriptor, _assertThisInitialized(_this));
+    _initializerDefineProperty(_this, "tocProvider", _descriptor2, _assertThisInitialized(_this));
+    _initializerDefineProperty(_this, "activeHeading", _descriptor3, _assertThisInitialized(_this));
+    _initializerDefineProperty(_this, "tocTitle", _descriptor4, _assertThisInitialized(_this));
+    _initializerDefineProperty(_this, "headingCollapseState", _descriptor5, _assertThisInitialized(_this));
+    _this.libroTOCManager = libroTOCManager;
+    _this.configurationService = configurationService;
+    _this.configurationService.get(TOCVisible).then(function (value) {
+      _this.isDisplay = value;
+      return;
+    }).catch(function () {
+      //
+    });
+    return _this;
+  }
+  TOCView = inject(ConfigurationService)(TOCView, undefined, 1) || TOCView;
+  TOCView = inject(LibroTOCManager)(TOCView, undefined, 0) || TOCView;
+  _createClass(TOCView, [{
+    key: "getHeadingIndentSize",
+    value: function getHeadingIndentSize(level) {
+      return level * 12;
+    }
+  }, {
+    key: "onViewMount",
+    value: function onViewMount() {
+      var _this2 = this;
+      if (!this.tocProvider && this.parent) {
+        getOrigin(this.parent.initialized).then(function () {
+          _this2.tocProvider = _this2.libroTOCManager.getTOCProvider(_this2.parent);
+          _this2.tocProvider.activeCellChange(function (header) {
+            _this2.activeHeading = header;
+          });
+          return;
+        }).catch(function () {
+          //
+        });
+      }
+    }
+  }, {
+    key: "getDisplayHeadings",
+    value: function getDisplayHeadings() {
+      var _this$tocProvider$hea,
+        _this$tocProvider,
+        _this3 = this;
+      var headings = (_this$tocProvider$hea = (_this$tocProvider = this.tocProvider) === null || _this$tocProvider === void 0 ? void 0 : _this$tocProvider.headings) !== null && _this$tocProvider$hea !== void 0 ? _this$tocProvider$hea : [];
+      return headings.map(function (item, index) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          visible: _this3.isHeadingVisible(item, index, headings),
+          hasChild: _this3.hasChildren(item, index, headings)
+        });
+      });
+    }
+  }, {
+    key: "isHeadingVisible",
+    value: function isHeadingVisible(heading, index, list) {
+      if (index === 0) {
+        return true;
+      }
+      var headingCollapsed = false;
+      var parent = heading;
+      for (var i = index - 1; i >= 0; i--) {
+        var current = list[i];
+        if (current.level < parent.level) {
+          parent = current;
+          if (this.isHeadingCollapsed(parent)) {
+            headingCollapsed = true;
+            break;
+          }
+        }
+      }
+      return !headingCollapsed;
+    }
+  }, {
+    key: "isHeadingCollapsed",
+    value: function isHeadingCollapsed(heading) {
+      var _this$headingCollapse;
+      return heading.id ? (_this$headingCollapse = this.headingCollapseState.get(heading.id)) !== null && _this$headingCollapse !== void 0 ? _this$headingCollapse : false : false;
+    }
+  }, {
+    key: "hasChildren",
+    value: function hasChildren(current, index, list) {
+      if (index === list.length - 1) {
+        return false;
+      }
+      if (current.level < list[index + 1].level) {
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      var _this$tocProvider2;
+      (_this$tocProvider2 = this.tocProvider) === null || _this$tocProvider2 === void 0 ? void 0 : _this$tocProvider2.dispose();
+    }
+  }]);
+  return TOCView;
+}(BaseView), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, "isDisplay", [_dec3], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+}), _descriptor2 = _applyDecoratedDescriptor(_class2.prototype, "tocProvider", [_dec4], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+}), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, "activeHeading", [_dec5], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+}), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, "tocTitle", [_dec6], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function initializer() {
+    return l10n.t('大纲');
+  }
+}), _descriptor5 = _applyDecoratedDescriptor(_class2.prototype, "headingCollapseState", [_dec7], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function initializer() {
+    return new Map();
+  }
+})), _class2)) || _class) || _class);

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@difizen/libro-toc",
+  "version": "0.0.2-alpha.0",
+  "description": "",
+  "keywords": [
+    "libro",
+    "notebook",
+    "toc"
+  ],
+  "repository": "git@github.com:difizen/libro.git",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "typings": "./es/index.d.ts",
+      "default": "./es/index.js"
+    },
+    "./mock": {
+      "typings": "./es/mock/index.d.ts",
+      "default": "./es/mock/index.js"
+    },
+    "./es/mock": {
+      "typings": "./es/mock/index.d.ts",
+      "default": "./es/mock/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "es/index.js",
+  "module": "es/index.js",
+  "typings": "es/index.d.ts",
+  "files": [
+    "es",
+    "src"
+  ],
+  "dependencies": {
+    "@difizen/libro-common": "^0.0.2-alpha.0",
+    "@difizen/libro-core": "^0.0.2-alpha.0",
+    "@difizen/libro-markdown": "^0.0.2-alpha.0",
+    "@difizen/libro-rendermime": "^0.0.2-alpha.0",
+    "@difizen/mana-app": "alpha",
+    "@difizen/mana-l10n": "alpha"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.25"
+  },
+  "scripts": {
+    "setup": "father build",
+    "build": "father build",
+    "test": ": Note: lint task is delegated to test:* scripts",
+    "test:vitest": "vitest run",
+    "test:jest": "jest",
+    "coverage": ": Note: lint task is delegated to coverage:* scripts",
+    "coverage:vitest": "vitest run --coverage",
+    "coverage:jest": "jest --coverage",
+    "lint": ": Note: lint task is delegated to lint:* scripts",
+    "lint:eslint": "eslint src",
+    "lint:tsc": "tsc --noEmit"
+  }
+}

package/src/cell-toc-provider.ts

@@ -0,0 +1,31 @@
+import type { CellView } from '@difizen/libro-core';
+import type { Contribution } from '@difizen/mana-app';
+import { Priority } from '@difizen/mana-app';
+import { contrib, singleton } from '@difizen/mana-app';
+
+import { CellTOCProviderContribution } from './toc-protocol.js';
+
+@singleton()
+export class LibroCellTOCProvider {
+  @contrib(CellTOCProviderContribution)
+  protected providerContribution: Contribution.Provider<CellTOCProviderContribution>;
+
+  createCellTOCProvider(cell: CellView) {
+    const ctrb = this.findCellTOCProviderContribution(cell);
+    if (ctrb) {
+      return ctrb.factory(cell);
+    }
+    return;
+  }
+
+  protected findCellTOCProviderContribution(
+    cell: CellView,
+  ): CellTOCProviderContribution | undefined {
+    const prioritized = Priority.sortSync(
+      this.providerContribution.getContributions(),
+      (contribution) => contribution.canHandle(cell),
+    );
+    const sorted = prioritized.map((c) => c.value);
+    return sorted[0];
+  }
+}

package/src/index.less

@@ -0,0 +1,66 @@
+.libro-markdown-container {
+  width: 100%;
+  height: 100%;
+  height: 16px;
+  min-height: 16px;
+}
+
+.markdown-toc-container {
+  width: 120px;
+  min-height: 240px;
+  // position: absolute;
+  // top: 12px;
+  // right: 0;
+  // bottom: 0;
+  padding-top: 12px;
+  overflow-y: auto;
+
+  .markdown-toc-container-title {
+    box-sizing: border-box;
+    height: 24px;
+    margin-bottom: 16px;
+    color: var(--mana-libro-toc-title-color);
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    letter-spacing: 0;
+    text-align: left;
+
+    .anticon-eye-invisible,
+    .anticon-eye {
+      padding-left: 4px;
+      cursor: pointer;
+    }
+  }
+
+  .markdown-toc-container-anchor {
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 4px 0;
+    overflow: hidden;
+    color: var(--mana-libro-toc-text-color);
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+    white-space: nowrap;
+    text-align: left;
+    text-overflow: ellipsis;
+    border-left: 2px solid transparent;
+    cursor: pointer;
+
+    &.active {
+      font-weight: 600;
+      border-left: 2px solid rgba(5, 140, 224, 99.9%);
+    }
+
+    &:hover {
+      background-color: var(--mana-libro-toc-hover-color);
+    }
+
+    .libro-toc-collapsed {
+      margin-right: 4px;
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './module.js';
+export * from './toc-configuration.js';
+export * from './toc-protocol.js';
+export * from './toc-view.js';
+export * from './toc-contribution.js';

package/src/libro-toc-color-registry.ts

@@ -0,0 +1,27 @@
+import type { ColorRegistry } from '@difizen/mana-app';
+import { Color, ColorContribution } from '@difizen/mana-app';
+import { singleton } from '@difizen/mana-app';
+
+@singleton({ contrib: ColorContribution })
+export class LibroTocColorRegistry implements ColorContribution {
+  registerColors(colors: ColorRegistry): void {
+    colors.register(
+      // #region antd variable
+      {
+        id: 'libro.toc.title.color',
+        defaults: { dark: '#EDEEEF', light: Color.rgba(0, 0, 0, 0.85) },
+        description: '',
+      },
+      {
+        id: 'libro.toc.text.color',
+        defaults: { dark: '#E3E4E6', light: Color.rgba(0, 10, 26, 0.68) },
+        description: '',
+      },
+      {
+        id: 'libro.toc.hover.color',
+        defaults: { dark: '#515359', light: Color.rgba(206, 211, 211, 0.422) },
+        description: '',
+      },
+    );
+  }
+}