@difizen/libro-markdown-cell 0.0.0-snapshot-20241017072317

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-present Difizen Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# libro shared model

package/es/index.d.ts

@@ -0,0 +1,7 @@
+export * from './markdown-cell-contribution.js';
+export * from './markdown-cell-model.js';
+export * from './markdown-cell-module.js';
+export * from './markdown-cell-protocol.js';
+export * from './markdown-cell-view.js';
+export * from './markdown-preview.js';
+//# sourceMappingURL=index.d.ts.map

package/es/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC"}

package/es/index.js

@@ -0,0 +1,6 @@
+export * from "./markdown-cell-contribution.js";
+export * from "./markdown-cell-model.js";
+export * from "./markdown-cell-module.js";
+export * from "./markdown-cell-protocol.js";
+export * from "./markdown-cell-view.js";
+export * from "./markdown-preview.js";

package/es/index.less

@@ -0,0 +1,116 @@
+.libro-dnd-cell-container {
+  .markdown-cell-preview.libro-dnd-cell {
+    border: 1px solid transparent;
+    box-shadow: unset;
+
+    &.active.command-mode {
+      border: 1px solid rgb(55, 147, 239);
+      box-shadow: unset;
+    }
+
+    .libro-dnd-cell-preview {
+      display: block;
+    }
+
+    .libro-markdown-warpper-container {
+      .libro-markdown-preview {
+        min-height: 50px;
+        padding: 0 4px;
+        overflow: hidden;
+
+        img {
+          max-width: 100%;
+          max-height: 100%;
+        }
+
+        a {
+          text-decoration: none;
+        }
+
+        a:hover {
+          text-decoration: underline;
+        }
+
+        a:focus,
+        input:focus,
+        select:focus,
+        textarea:focus {
+          outline: 1px solid -webkit-focus-ring-color;
+          outline-offset: -1px;
+        }
+
+        hr {
+          height: 2px;
+          border: 0;
+          border-bottom: 2px solid;
+        }
+
+        div {
+          width: 100%;
+          min-height: 20px;
+        }
+
+        /* Adjust margin of first item in markdown cell */
+        *:first-child {
+          margin-top: 0;
+        }
+
+        /* h1 tags don't need top margin */
+        h1:first-child {
+          margin-top: 0;
+        }
+
+        /* Removes bottom margin when only one item exists in markdown cell */
+        #preview > *:only-child,
+        #preview > *:last-child {
+          margin-bottom: 0;
+          padding-bottom: 0;
+        }
+
+        table {
+          border-collapse: collapse;
+          border-spacing: 0;
+        }
+
+        table th,
+        table td {
+          border: 1px solid;
+        }
+
+        table > thead > tr > th {
+          text-align: left;
+          border-bottom: 1px solid;
+        }
+
+        table > thead > tr > th,
+        table > thead > tr > td,
+        table > tbody > tr > th,
+        table > tbody > tr > td {
+          padding: 5px 10px;
+        }
+
+        table > tbody > tr + tr > td {
+          border-top: 1px solid;
+        }
+
+        blockquote {
+          margin: 0 7px 0 5px;
+          padding: 0 16px 0 10px;
+          border-left-width: 5px;
+          border-left-style: solid;
+        }
+
+        code {
+          font-size: 1em;
+        }
+
+        pre code {
+          color: var(--mana-libro-text-default-color);
+          font-family: 12px;
+          line-height: 1.357em;
+          white-space: pre-wrap;
+        }
+      }
+    }
+  }
+}

package/es/markdown-cell-contribution.d.ts

@@ -0,0 +1,15 @@
+import type { LanguageSpecRegistry } from '@difizen/libro-code-editor';
+import { LanguageSpecContribution } from '@difizen/libro-code-editor';
+import type { CellMeta, CellOptions, CellModel } from '@difizen/libro-core';
+import { CellModelContribution, CellViewContribution } from '@difizen/libro-core';
+import { MarkdownCellModelFactory } from './markdown-cell-protocol.js';
+import { MarkdownCellView } from './markdown-cell-view.js';
+export declare class MarkdownCellContribution implements CellModelContribution, CellViewContribution, LanguageSpecContribution {
+    markdownCellModelFactory: MarkdownCellModelFactory;
+    cellMeta: CellMeta;
+    canHandle(options: CellOptions): number;
+    createModel(options: CellOptions): CellModel;
+    view: typeof MarkdownCellView;
+    registerLanguageSpec: (register: LanguageSpecRegistry) => void;
+}
+//# sourceMappingURL=markdown-cell-contribution.d.ts.map

package/es/markdown-cell-contribution.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-cell-contribution.d.ts","sourceRoot":"","sources":["../src/markdown-cell-contribution.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AACvE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAC5E,OAAO,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAGlF,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,qBAGa,wBACX,YAAW,qBAAqB,EAAE,oBAAoB,EAAE,wBAAwB;IAE9C,wBAAwB,EAAE,wBAAwB,CAAC;IAErF,QAAQ,EAAE,QAAQ,CAIhB;IAEF,SAAS,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM;IAOvC,WAAW,CAAC,OAAO,EAAE,WAAW,GAAG,SAAS;IAK5C,IAAI,0BAAoB;IAExB,oBAAoB,aAAc,oBAAoB,UAOpD;CACH"}

package/es/markdown-cell-contribution.js

@@ -0,0 +1,59 @@
+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, _class, _class2, _descriptor;
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 { LanguageSpecContribution } from '@difizen/libro-code-editor';
+import { CellModelContribution, CellViewContribution } from '@difizen/libro-core';
+import { singleton, inject } from '@difizen/mana-app';
+import { MarkdownCellModelFactory } from "./markdown-cell-protocol.js";
+import { MarkdownCellView } from "./markdown-cell-view.js";
+export var MarkdownCellContribution = (_dec = singleton({
+  contrib: [CellModelContribution, CellViewContribution, LanguageSpecContribution]
+}), _dec2 = inject(MarkdownCellModelFactory), _dec(_class = (_class2 = /*#__PURE__*/function () {
+  function MarkdownCellContribution() {
+    _classCallCheck(this, MarkdownCellContribution);
+    _initializerDefineProperty(this, "markdownCellModelFactory", _descriptor, this);
+    this.cellMeta = {
+      type: 'markdown',
+      name: 'Markdown',
+      order: 'c'
+    };
+    this.view = MarkdownCellView;
+    this.registerLanguageSpec = function (register) {
+      register.registerLanguageSpec({
+        name: 'Markdown',
+        language: 'markdown',
+        mime: 'text/x-markdown',
+        ext: ['.md', '.markdown', '.mkd', '.sh']
+      });
+    };
+  }
+  _createClass(MarkdownCellContribution, [{
+    key: "canHandle",
+    value: function canHandle(options) {
+      var _options$cell;
+      if ((options === null || options === void 0 || (_options$cell = options.cell) === null || _options$cell === void 0 ? void 0 : _options$cell.cell_type) === this.cellMeta.type) {
+        return 999;
+      }
+      return -1;
+    }
+  }, {
+    key: "createModel",
+    value: function createModel(options) {
+      var model = this.markdownCellModelFactory(options);
+      return model;
+    }
+  }]);
+  return MarkdownCellContribution;
+}(), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, "markdownCellModelFactory", [_dec2], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+})), _class2)) || _class);

package/es/markdown-cell-model.d.ts

@@ -0,0 +1,11 @@
+import type { IMarkdownCell } from '@difizen/libro-common';
+import type { LibroMarkdownCellModel } from '@difizen/libro-core';
+import { CellOptions, LibroCellModel } from '@difizen/libro-core';
+export declare class MarkdownCellModel extends LibroCellModel implements LibroMarkdownCellModel {
+    mimeType: string;
+    constructor(options: CellOptions);
+    isEdit: boolean;
+    preview: string;
+    toJSON(): IMarkdownCell;
+}
+//# sourceMappingURL=markdown-cell-model.d.ts.map

package/es/markdown-cell-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-cell-model.d.ts","sourceRoot":"","sources":["../src/markdown-cell-model.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAIlE,qBACa,iBACX,SAAQ,cACR,YAAW,sBAAsB;IAGxB,QAAQ,SAAqB;gBAEL,OAAO,EAAE,WAAW;IAWrD,MAAM,UAAS;IAGf,OAAO,SAAM;IAEJ,MAAM,IAAI,aAAa;CAQjC"}

package/es/markdown-cell-model.js

@@ -0,0 +1,77 @@
+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, _class, _class2, _descriptor, _descriptor2, _descriptor3;
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 { concatMultilineString } from '@difizen/libro-common';
+import { CellOptions, LibroCellModel } from '@difizen/libro-core';
+import { prop } from '@difizen/mana-app';
+import { inject, transient } from '@difizen/mana-app';
+export var MarkdownCellModel = (_dec = transient(), _dec2 = prop(), _dec3 = prop(), _dec4 = prop(), _dec(_class = (_class2 = /*#__PURE__*/function (_LibroCellModel) {
+  _inherits(MarkdownCellModel, _LibroCellModel);
+  var _super = _createSuper(MarkdownCellModel);
+  function MarkdownCellModel(options) {
+    var _options$cell, _options$cell3;
+    var _this;
+    _classCallCheck(this, MarkdownCellModel);
+    _this = _super.call(this, options);
+    _initializerDefineProperty(_this, "mimeType", _descriptor, _assertThisInitialized(_this));
+    _initializerDefineProperty(_this, "isEdit", _descriptor2, _assertThisInitialized(_this));
+    _initializerDefineProperty(_this, "preview", _descriptor3, _assertThisInitialized(_this));
+    if ((_options$cell = options.cell) !== null && _options$cell !== void 0 && _options$cell.id) {
+      var _options$cell2;
+      _this.id = (_options$cell2 = options.cell) === null || _options$cell2 === void 0 ? void 0 : _options$cell2.id;
+    }
+    if ((_options$cell3 = options.cell) !== null && _options$cell3 !== void 0 && _options$cell3.source) {
+      var _options$cell4;
+      _this.value = concatMultilineString((_options$cell4 = options.cell) === null || _options$cell4 === void 0 ? void 0 : _options$cell4.source);
+    }
+    return _this;
+  }
+  MarkdownCellModel = inject(CellOptions)(MarkdownCellModel, undefined, 0) || MarkdownCellModel;
+  _createClass(MarkdownCellModel, [{
+    key: "toJSON",
+    value: function toJSON() {
+      return {
+        id: this.id,
+        cell_type: 'markdown',
+        source: this.source,
+        metadata: this.metadata
+      };
+    }
+  }]);
+  return MarkdownCellModel;
+}(LibroCellModel), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, "mimeType", [_dec2], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function initializer() {
+    return 'text/x-markdown';
+  }
+}), _descriptor2 = _applyDecoratedDescriptor(_class2.prototype, "isEdit", [_dec3], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function initializer() {
+    return false;
+  }
+}), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, "preview", [_dec4], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function initializer() {
+    return '';
+  }
+})), _class2)) || _class);

package/es/markdown-cell-module.d.ts

@@ -0,0 +1,3 @@
+import { ManaModule } from '@difizen/mana-app';
+export declare const MarkdownCellModule: ManaModule;
+//# sourceMappingURL=markdown-cell-module.d.ts.map

package/es/markdown-cell-module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-cell-module.d.ts","sourceRoot":"","sources":["../src/markdown-cell-module.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAO/C,eAAO,MAAM,kBAAkB,YAgBJ,CAAC"}

package/es/markdown-cell-module.js

@@ -0,0 +1,21 @@
+import { CellOptions } from '@difizen/libro-core';
+import { MarkdownModule } from '@difizen/libro-markdown';
+import { ManaModule } from '@difizen/mana-app';
+import { MarkdownCellContribution } from "./markdown-cell-contribution.js";
+import { MarkdownCellModel } from "./markdown-cell-model.js";
+import { MarkdownCellModelFactory } from "./markdown-cell-protocol.js";
+import { MarkdownCellView } from "./markdown-cell-view.js";
+export var MarkdownCellModule = ManaModule.create().register(MarkdownCellContribution, MarkdownCellView, MarkdownCellModel).register({
+  token: MarkdownCellModelFactory,
+  useFactory: function useFactory(ctx) {
+    return function (options) {
+      var child = ctx.container.createChild();
+      child.register({
+        token: CellOptions,
+        useValue: options
+      });
+      var model = child.get(MarkdownCellModel);
+      return model;
+    };
+  }
+}).dependOn(MarkdownModule);

package/es/markdown-cell-protocol.d.ts

@@ -0,0 +1,5 @@
+import type { CellOptions } from '@difizen/libro-core';
+import type { MarkdownCellModel } from './markdown-cell-model.js';
+export type MarkdownCellModelFactory = (options: CellOptions) => MarkdownCellModel;
+export declare const MarkdownCellModelFactory: unique symbol;
+//# sourceMappingURL=markdown-cell-protocol.d.ts.map

package/es/markdown-cell-protocol.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-cell-protocol.d.ts","sourceRoot":"","sources":["../src/markdown-cell-protocol.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAElE,MAAM,MAAM,wBAAwB,GAAG,CAAC,OAAO,EAAE,WAAW,KAAK,iBAAiB,CAAC;AACnF,eAAO,MAAM,wBAAwB,eAAqC,CAAC"}

package/es/markdown-cell-protocol.js

@@ -0,0 +1 @@
+export var MarkdownCellModelFactory = Symbol('MarkdownCellModelFactory');

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

@@ -0,0 +1,34 @@
+/// <reference types="react" resolution-mode="require"/>
+import type { CodeEditorViewOptions, IEditor } from '@difizen/libro-code-editor';
+import { CodeEditorManager } from '@difizen/libro-code-editor';
+import type { CellCollapsible, CellViewOptions } from '@difizen/libro-core';
+import { CellService, EditorStatus, LibroEditorCellView } from '@difizen/libro-core';
+import { MarkdownParser } from '@difizen/libro-markdown';
+import type { ViewSize } from '@difizen/mana-app';
+import { ViewManager } from '@difizen/mana-app';
+import './index.less';
+import type { MarkdownCellModel } from './markdown-cell-model.js';
+export declare const MarkdownCell: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLDivElement>>;
+export declare class MarkdownCellView extends LibroEditorCellView implements CellCollapsible {
+    get wrapperCls(): "" | "markdown-cell-preview";
+    view: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLDivElement>>;
+    viewManager: ViewManager;
+    editorAreaHeight: number;
+    noEditorAreaHeight: number;
+    editor: IEditor | undefined;
+    headingCollapsed: boolean;
+    collapsibleChildNumber: number;
+    editorStatus: EditorStatus;
+    get isEdit(): boolean | undefined;
+    get cellmodel(): MarkdownCellModel;
+    markdownParser: MarkdownParser;
+    constructor(options: CellViewOptions, cellService: CellService, viewManager: ViewManager, codeEditorManager: CodeEditorManager, markdownParser: MarkdownParser);
+    onViewMount(): void;
+    onViewResize(size: ViewSize): void;
+    calcEditorAreaHeight(): number;
+    protected getEditorOption(): CodeEditorViewOptions;
+    shouldEnterEditorMode(e: React.FocusEvent<HTMLElement>): boolean;
+    focus: (toEdit: boolean) => void;
+    blur: () => void;
+}
+//# sourceMappingURL=markdown-cell-view.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-cell-view.d.ts","sourceRoot":"","sources":["../src/markdown-cell-view.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACjF,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAGL,WAAW,EAGZ,MAAM,mBAAmB,CAAC;AAI3B,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,YAAY,0FAmCxB,CAAC;AAEF,qBAEa,gBAAiB,SAAQ,mBAAoB,YAAW,eAAe;IAClF,IAAa,UAAU,iCAKtB;IACQ,IAAI,2FAAgB;IAE7B,WAAW,EAAE,WAAW,CAAC;IAGzB,gBAAgB,SAAK;IAGZ,kBAAkB,SAAK;IAExB,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAGpC,gBAAgB,UAAS;IAGzB,sBAAsB,SAAK;IAGlB,YAAY,EAAE,YAAY,CAA0B;IAE7D,IAAI,MAAM,wBAIT;IAED,IAAI,SAAS,sBAEZ;IAED,cAAc,EAAE,cAAc,CAAC;gBAGT,OAAO,EAAE,eAAe,EACvB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EAClB,iBAAiB,EAAE,iBAAiB,EACvC,cAAc,EAAE,cAAc;IAS/C,WAAW;IAWX,YAAY,CAAC,IAAI,EAAE,QAAQ;IAMpC,oBAAoB;cAID,eAAe,IAAI,qBAAqB;IAiBlD,qBAAqB,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC;IAOtD,KAAK,WAAY,OAAO,UAS/B;IAEO,IAAI,aAEX;CACH"}

package/es/markdown-cell-view.js

@@ -0,0 +1,210 @@
+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, _class, _class2, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5;
+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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 { CodeEditorManager } from '@difizen/libro-code-editor';
+import { CellUri } from '@difizen/libro-common';
+import { CellService, EditorStatus, LibroEditorCellView } from '@difizen/libro-core';
+import { MarkdownParser } from '@difizen/libro-markdown';
+import { getOrigin, prop, useInject, watch } from '@difizen/mana-app';
+import { view, ViewInstance, ViewManager, ViewOption, ViewRender } from '@difizen/mana-app';
+import { inject, transient } from '@difizen/mana-app';
+import { forwardRef, useEffect } from 'react';
+import "./index.less";
+import { MarkdownPreview } from "./markdown-preview.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var MarkdownCell = /*#__PURE__*/forwardRef(function MarkdownCell(props, ref) {
+  var _instance$editorView3;
+  var instance = useInject(ViewInstance);
+  var isEdit = instance.isEdit;
+  useEffect(function () {
+    var _instance$editorView;
+    if ((_instance$editorView = instance.editorView) !== null && _instance$editorView !== void 0 && _instance$editorView.editor) {
+      var _instance$editorView2;
+      instance.editor = getOrigin((_instance$editorView2 = instance.editorView) === null || _instance$editorView2 === void 0 ? void 0 : _instance$editorView2.editor);
+    }
+  }, [instance, (_instance$editorView3 = instance.editorView) === null || _instance$editorView3 === void 0 ? void 0 : _instance$editorView3.editor]);
+  useEffect(function () {
+    if (instance.cellmodel.isEdit) {
+      instance.createEditor();
+    }
+  }, [instance, instance.cellmodel.isEdit]);
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    tabIndex: 10,
+    onBlur: function onBlur(e) {
+      var _ref$current;
+      if (typeof ref !== 'function' && !(ref !== null && ref !== void 0 && (_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(e.relatedTarget))) {
+        instance.blur();
+      }
+    },
+    className: instance.className,
+    children: isEdit && instance.editorView ? /*#__PURE__*/_jsx(ViewRender, {
+      view: instance.editorView
+    }) : /*#__PURE__*/_jsx(MarkdownPreview, {
+      instance: instance
+    })
+  });
+});
+export var MarkdownCellView = (_dec = transient(), _dec2 = view('libro-markdown-cell-view'), _dec3 = prop(), _dec4 = prop(), _dec5 = prop(), _dec6 = prop(), _dec7 = prop(), _dec(_class = _dec2(_class = (_class2 = /*#__PURE__*/function (_LibroEditorCellView) {
+  _inherits(MarkdownCellView, _LibroEditorCellView);
+  var _super = _createSuper(MarkdownCellView);
+  function MarkdownCellView(options, cellService, viewManager, codeEditorManager, markdownParser) {
+    var _this;
+    _classCallCheck(this, MarkdownCellView);
+    _this = _super.call(this, options, cellService);
+    _this.view = MarkdownCell;
+    _this.viewManager = void 0;
+    _initializerDefineProperty(_this, "editorAreaHeight", _descriptor, _assertThisInitialized(_this));
+    _initializerDefineProperty(_this, "noEditorAreaHeight", _descriptor2, _assertThisInitialized(_this));
+    _initializerDefineProperty(_this, "headingCollapsed", _descriptor3, _assertThisInitialized(_this));
+    _initializerDefineProperty(_this, "collapsibleChildNumber", _descriptor4, _assertThisInitialized(_this));
+    _initializerDefineProperty(_this, "editorStatus", _descriptor5, _assertThisInitialized(_this));
+    _this.markdownParser = void 0;
+    _this.focus = function (toEdit) {
+      if (toEdit) {
+        _this.cellmodel.isEdit = true;
+      } else {
+        var _this$container, _this$container2;
+        if ((_this$container = _this.container) !== null && _this$container !== void 0 && (_this$container = _this$container.current) !== null && _this$container !== void 0 && (_this$container = _this$container.parentElement) !== null && _this$container !== void 0 && _this$container.contains(document.activeElement)) {
+          return;
+        }
+        (_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 () {
+      _this.cellmodel.isEdit = false;
+    };
+    _this.viewManager = viewManager;
+    _this.codeEditorManager = codeEditorManager;
+    _this.markdownParser = markdownParser;
+    _this.className = _this.className + ' markdown';
+    return _this;
+  }
+  MarkdownCellView = inject(MarkdownParser)(MarkdownCellView, undefined, 4) || MarkdownCellView;
+  MarkdownCellView = inject(CodeEditorManager)(MarkdownCellView, undefined, 3) || MarkdownCellView;
+  MarkdownCellView = inject(ViewManager)(MarkdownCellView, undefined, 2) || MarkdownCellView;
+  MarkdownCellView = inject(CellService)(MarkdownCellView, undefined, 1) || MarkdownCellView;
+  MarkdownCellView = inject(ViewOption)(MarkdownCellView, undefined, 0) || MarkdownCellView;
+  _createClass(MarkdownCellView, [{
+    key: "wrapperCls",
+    get: function get() {
+      if (!this.cellmodel.isEdit) {
+        return 'markdown-cell-preview';
+      }
+      return '';
+    }
+  }, {
+    key: "isEdit",
+    get: function get() {
+      var _this$editorView;
+      return ((_this$editorView = this.editorView) === null || _this$editorView === void 0 ? void 0 : _this$editorView.view) && this.cellmodel.isEdit && this.parent.model.inputEditable;
+    }
+  }, {
+    key: "cellmodel",
+    get: function get() {
+      return this.model;
+    }
+  }, {
+    key: "onViewMount",
+    value: function onViewMount() {
+      var _this2 = this;
+      if (this.cellmodel.isEdit) {
+        this.createEditor();
+      }
+      watch(this.parent.model, 'inputEditable', function () {
+        if (!_this2.parent.model.inputEditable) {
+          _this2.cellmodel.isEdit = false;
+        }
+      });
+    }
+  }, {
+    key: "onViewResize",
+    value: function onViewResize(size) {
+      if (size.height) {
+        this.editorAreaHeight = size.height;
+      }
+    }
+  }, {
+    key: "calcEditorAreaHeight",
+    value: function calcEditorAreaHeight() {
+      return this.editorAreaHeight;
+    }
+  }, {
+    key: "getEditorOption",
+    value: function getEditorOption() {
+      var option = {
+        uuid: CellUri.from(this.parent.model.id, this.model.id).toString(),
+        model: this.model,
+        config: {
+          lineNumbers: false,
+          foldGutter: false,
+          lineWrap: 'on',
+          matchBrackets: false,
+          autoClosingBrackets: false
+        },
+        autoFocus: true
+      };
+      return option;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  }, {
+    key: "shouldEnterEditorMode",
+    value: function shouldEnterEditorMode(e) {
+      if (!this.cellmodel.isEdit) {
+        return false;
+      }
+      return true;
+    }
+  }]);
+  return MarkdownCellView;
+}(LibroEditorCellView), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, "editorAreaHeight", [_dec3], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function initializer() {
+    return 0;
+  }
+}), _descriptor2 = _applyDecoratedDescriptor(_class2.prototype, "noEditorAreaHeight", [_dec4], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function initializer() {
+    return 0;
+  }
+}), _descriptor3 = _applyDecoratedDescriptor(_class2.prototype, "headingCollapsed", [_dec5], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function initializer() {
+    return false;
+  }
+}), _descriptor4 = _applyDecoratedDescriptor(_class2.prototype, "collapsibleChildNumber", [_dec6], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function initializer() {
+    return 0;
+  }
+}), _descriptor5 = _applyDecoratedDescriptor(_class2.prototype, "editorStatus", [_dec7], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function initializer() {
+    return EditorStatus.NOTLOADED;
+  }
+})), _class2)) || _class) || _class);

package/es/markdown-preview.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+import './index.less';
+import type { MarkdownCellView } from './markdown-cell-view.js';
+export declare const MarkdownPreview: FC<{
+    instance: MarkdownCellView;
+}>;
+//# sourceMappingURL=markdown-preview.d.ts.map

package/es/markdown-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-preview.d.ts","sourceRoot":"","sources":["../src/markdown-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC;IAAE,QAAQ,EAAE,gBAAgB,CAAA;CAAE,CA4B9D,CAAC"}

package/es/markdown-preview.js

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useRef } from 'react';
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var MarkdownPreview = function MarkdownPreview(_ref) {
+  var instance = _ref.instance;
+  var mktRef = useRef(null);
+  // const instance = useInject<MarkdownCellView>(ViewInstance);
+
+  var enterEdit = useCallback(function (e) {
+    if (!instance.parent.model.inputEditable) {
+      return;
+    }
+    e.preventDefault();
+    instance.focus(true);
+  }, [instance]);
+  useEffect(function () {
+    if (mktRef.current) {
+      mktRef.current.innerHTML = instance.markdownParser.render(instance.model.value, {
+        cellId: instance.model.id
+      });
+    }
+  }, [instance, instance.model.value]);
+  return /*#__PURE__*/_jsx("div", {
+    className: "libro-markdown-warpper-container",
+    onDoubleClick: enterEdit,
+    children: /*#__PURE__*/_jsx("div", {
+      className: "libro-markdown-preview",
+      ref: mktRef
+    })
+  });
+};

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@difizen/libro-markdown-cell",
+  "version": "0.0.0-snapshot-20241017072317",
+  "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"
+  ],
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.25"
+  },
+  "dependencies": {
+    "@difizen/libro-core": "0.0.0-snapshot-20241017072317",
+    "@difizen/libro-common": "0.0.0-snapshot-20241017072317",
+    "@difizen/libro-code-editor": "0.0.0-snapshot-20241017072317",
+    "@difizen/libro-markdown": "0.0.0-snapshot-20241017072317",
+    "@difizen/mana-app": "latest",
+    "@types/markdown-it": "^12.2.3",
+    "markdown-it": "^13.0.1",
+    "markdown-it-anchor": "^8.6.5"
+  },
+  "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",
+    "typecheck:tsc": "tsc --noEmit"
+  }
+}

package/src/index.less

@@ -0,0 +1,116 @@
+.libro-dnd-cell-container {
+  .markdown-cell-preview.libro-dnd-cell {
+    border: 1px solid transparent;
+    box-shadow: unset;
+
+    &.active.command-mode {
+      border: 1px solid rgb(55, 147, 239);
+      box-shadow: unset;
+    }
+
+    .libro-dnd-cell-preview {
+      display: block;
+    }
+
+    .libro-markdown-warpper-container {
+      .libro-markdown-preview {
+        min-height: 50px;
+        padding: 0 4px;
+        overflow: hidden;
+
+        img {
+          max-width: 100%;
+          max-height: 100%;
+        }
+
+        a {
+          text-decoration: none;
+        }
+
+        a:hover {
+          text-decoration: underline;
+        }
+
+        a:focus,
+        input:focus,
+        select:focus,
+        textarea:focus {
+          outline: 1px solid -webkit-focus-ring-color;
+          outline-offset: -1px;
+        }
+
+        hr {
+          height: 2px;
+          border: 0;
+          border-bottom: 2px solid;
+        }
+
+        div {
+          width: 100%;
+          min-height: 20px;
+        }
+
+        /* Adjust margin of first item in markdown cell */
+        *:first-child {
+          margin-top: 0;
+        }
+
+        /* h1 tags don't need top margin */
+        h1:first-child {
+          margin-top: 0;
+        }
+
+        /* Removes bottom margin when only one item exists in markdown cell */
+        #preview > *:only-child,
+        #preview > *:last-child {
+          margin-bottom: 0;
+          padding-bottom: 0;
+        }
+
+        table {
+          border-collapse: collapse;
+          border-spacing: 0;
+        }
+
+        table th,
+        table td {
+          border: 1px solid;
+        }
+
+        table > thead > tr > th {
+          text-align: left;
+          border-bottom: 1px solid;
+        }
+
+        table > thead > tr > th,
+        table > thead > tr > td,
+        table > tbody > tr > th,
+        table > tbody > tr > td {
+          padding: 5px 10px;
+        }
+
+        table > tbody > tr + tr > td {
+          border-top: 1px solid;
+        }
+
+        blockquote {
+          margin: 0 7px 0 5px;
+          padding: 0 16px 0 10px;
+          border-left-width: 5px;
+          border-left-style: solid;
+        }
+
+        code {
+          font-size: 1em;
+        }
+
+        pre code {
+          color: var(--mana-libro-text-default-color);
+          font-family: 12px;
+          line-height: 1.357em;
+          white-space: pre-wrap;
+        }
+      }
+    }
+  }
+}

package/src/index.spec.ts

@@ -0,0 +1,10 @@
+import 'reflect-metadata';
+import assert from 'assert';
+
+import { MarkdownCellModule } from './index.js';
+
+describe('libro-markdown-cell', () => {
+  it('#import', () => {
+    assert(MarkdownCellModule);
+  });
+});

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './markdown-cell-contribution.js';
+export * from './markdown-cell-model.js';
+export * from './markdown-cell-module.js';
+export * from './markdown-cell-protocol.js';
+export * from './markdown-cell-view.js';
+export * from './markdown-preview.js';

package/src/markdown-cell-contribution.ts

@@ -0,0 +1,46 @@
+import type { LanguageSpecRegistry } from '@difizen/libro-code-editor';
+import { LanguageSpecContribution } from '@difizen/libro-code-editor';
+import type { CellMeta, CellOptions, CellModel } from '@difizen/libro-core';
+import { CellModelContribution, CellViewContribution } from '@difizen/libro-core';
+import { singleton, inject } from '@difizen/mana-app';
+
+import { MarkdownCellModelFactory } from './markdown-cell-protocol.js';
+import { MarkdownCellView } from './markdown-cell-view.js';
+
+@singleton({
+  contrib: [CellModelContribution, CellViewContribution, LanguageSpecContribution],
+})
+export class MarkdownCellContribution
+  implements CellModelContribution, CellViewContribution, LanguageSpecContribution
+{
+  @inject(MarkdownCellModelFactory) markdownCellModelFactory: MarkdownCellModelFactory;
+
+  cellMeta: CellMeta = {
+    type: 'markdown',
+    name: 'Markdown',
+    order: 'c',
+  };
+
+  canHandle(options: CellOptions): number {
+    if (options?.cell?.cell_type === this.cellMeta.type) {
+      return 999;
+    }
+    return -1;
+  }
+
+  createModel(options: CellOptions): CellModel {
+    const model = this.markdownCellModelFactory(options);
+    return model;
+  }
+
+  view = MarkdownCellView;
+
+  registerLanguageSpec = (register: LanguageSpecRegistry) => {
+    register.registerLanguageSpec({
+      name: 'Markdown',
+      language: 'markdown',
+      mime: 'text/x-markdown',
+      ext: ['.md', '.markdown', '.mkd', '.sh'],
+    });
+  };
+}

package/src/markdown-cell-model.ts

@@ -0,0 +1,40 @@
+import type { IMarkdownCell } from '@difizen/libro-common';
+import { concatMultilineString } from '@difizen/libro-common';
+import type { LibroMarkdownCellModel } from '@difizen/libro-core';
+import { CellOptions, LibroCellModel } from '@difizen/libro-core';
+import { prop } from '@difizen/mana-app';
+import { inject, transient } from '@difizen/mana-app';
+
+@transient()
+export class MarkdownCellModel
+  extends LibroCellModel
+  implements LibroMarkdownCellModel
+{
+  @prop()
+  override mimeType = 'text/x-markdown';
+
+  constructor(@inject(CellOptions) options: CellOptions) {
+    super(options);
+    if (options.cell?.id) {
+      this.id = options.cell?.id as string;
+    }
+    if (options.cell?.source) {
+      this.value = concatMultilineString(options.cell?.source);
+    }
+  }
+
+  @prop()
+  isEdit = false;
+
+  @prop()
+  preview = '';
+
+  override toJSON(): IMarkdownCell {
+    return {
+      id: this.id,
+      cell_type: 'markdown',
+      source: this.source,
+      metadata: this.metadata,
+    };
+  }
+}

package/src/markdown-cell-module.ts

@@ -0,0 +1,26 @@
+import { CellOptions } from '@difizen/libro-core';
+import { MarkdownModule } from '@difizen/libro-markdown';
+import { ManaModule } from '@difizen/mana-app';
+
+import { MarkdownCellContribution } from './markdown-cell-contribution.js';
+import { MarkdownCellModel } from './markdown-cell-model.js';
+import { MarkdownCellModelFactory } from './markdown-cell-protocol.js';
+import { MarkdownCellView } from './markdown-cell-view.js';
+
+export const MarkdownCellModule = ManaModule.create()
+  .register(MarkdownCellContribution, MarkdownCellView, MarkdownCellModel)
+  .register({
+    token: MarkdownCellModelFactory,
+    useFactory: (ctx) => {
+      return (options: CellOptions) => {
+        const child = ctx.container.createChild();
+        child.register({
+          token: CellOptions,
+          useValue: options,
+        });
+        const model = child.get(MarkdownCellModel);
+        return model;
+      };
+    },
+  })
+  .dependOn(MarkdownModule);

package/src/markdown-cell-protocol.ts

@@ -0,0 +1,6 @@
+import type { CellOptions } from '@difizen/libro-core';
+
+import type { MarkdownCellModel } from './markdown-cell-model.js';
+
+export type MarkdownCellModelFactory = (options: CellOptions) => MarkdownCellModel;
+export const MarkdownCellModelFactory = Symbol('MarkdownCellModelFactory');

package/src/markdown-cell-view.tsx

@@ -0,0 +1,175 @@
+import type { CodeEditorViewOptions, IEditor } from '@difizen/libro-code-editor';
+import { CodeEditorManager } from '@difizen/libro-code-editor';
+import { CellUri } from '@difizen/libro-common';
+import type { CellCollapsible, CellViewOptions } from '@difizen/libro-core';
+import { CellService, EditorStatus, LibroEditorCellView } from '@difizen/libro-core';
+import { MarkdownParser } from '@difizen/libro-markdown';
+import type { ViewSize } from '@difizen/mana-app';
+import { getOrigin, prop, useInject, watch } from '@difizen/mana-app';
+import {
+  view,
+  ViewInstance,
+  ViewManager,
+  ViewOption,
+  ViewRender,
+} from '@difizen/mana-app';
+import { inject, transient } from '@difizen/mana-app';
+import { forwardRef, useEffect } from 'react';
+
+import './index.less';
+import type { MarkdownCellModel } from './markdown-cell-model.js';
+import { MarkdownPreview } from './markdown-preview.js';
+
+export const MarkdownCell = forwardRef<HTMLDivElement>(
+  function MarkdownCell(props, ref) {
+    const instance = useInject<MarkdownCellView>(ViewInstance);
+    const isEdit = instance.isEdit;
+    useEffect(() => {
+      if (instance.editorView?.editor) {
+        instance.editor = getOrigin(instance.editorView?.editor);
+      }
+    }, [instance, instance.editorView?.editor]);
+
+    useEffect(() => {
+      if (instance.cellmodel.isEdit) {
+        instance.createEditor();
+      }
+    }, [instance, instance.cellmodel.isEdit]);
+
+    return (
+      <div
+        ref={ref}
+        tabIndex={10}
+        onBlur={(e) => {
+          if (typeof ref !== 'function' && !ref?.current?.contains(e.relatedTarget)) {
+            instance.blur();
+          }
+        }}
+        className={instance.className}
+      >
+        {isEdit && instance.editorView ? (
+          <ViewRender view={instance.editorView} />
+        ) : (
+          <MarkdownPreview instance={instance} />
+        )}
+      </div>
+    );
+  },
+);
+
+@transient()
+@view('libro-markdown-cell-view')
+export class MarkdownCellView extends LibroEditorCellView implements CellCollapsible {
+  override get wrapperCls() {
+    if (!this.cellmodel.isEdit) {
+      return 'markdown-cell-preview';
+    }
+    return '';
+  }
+  override view = MarkdownCell;
+
+  viewManager: ViewManager;
+
+  @prop()
+  editorAreaHeight = 0;
+
+  @prop()
+  override noEditorAreaHeight = 0;
+
+  declare editor: IEditor | undefined;
+
+  @prop()
+  headingCollapsed = false;
+
+  @prop()
+  collapsibleChildNumber = 0;
+
+  @prop()
+  override editorStatus: EditorStatus = EditorStatus.NOTLOADED;
+
+  get isEdit() {
+    return (
+      this.editorView?.view && this.cellmodel.isEdit && this.parent.model.inputEditable
+    );
+  }
+
+  get cellmodel() {
+    return this.model as MarkdownCellModel;
+  }
+
+  markdownParser: MarkdownParser;
+
+  constructor(
+    @inject(ViewOption) options: CellViewOptions,
+    @inject(CellService) cellService: CellService,
+    @inject(ViewManager) viewManager: ViewManager,
+    @inject(CodeEditorManager) codeEditorManager: CodeEditorManager,
+    @inject(MarkdownParser) markdownParser: MarkdownParser,
+  ) {
+    super(options, cellService);
+    this.viewManager = viewManager;
+    this.codeEditorManager = codeEditorManager;
+    this.markdownParser = markdownParser;
+    this.className = this.className + ' markdown';
+  }
+
+  override onViewMount() {
+    if (this.cellmodel.isEdit) {
+      this.createEditor();
+    }
+    watch(this.parent.model, 'inputEditable', () => {
+      if (!this.parent.model.inputEditable) {
+        this.cellmodel.isEdit = false;
+      }
+    });
+  }
+
+  override onViewResize(size: ViewSize) {
+    if (size.height) {
+      this.editorAreaHeight = size.height;
+    }
+  }
+
+  calcEditorAreaHeight() {
+    return this.editorAreaHeight;
+  }
+
+  protected override getEditorOption(): CodeEditorViewOptions {
+    const option: CodeEditorViewOptions = {
+      uuid: CellUri.from(this.parent.model.id, this.model.id).toString(),
+      model: this.model,
+      config: {
+        lineNumbers: false,
+        foldGutter: false,
+        lineWrap: 'on',
+        matchBrackets: false,
+        autoClosingBrackets: false,
+      },
+      autoFocus: true,
+    };
+    return option;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  override shouldEnterEditorMode(e: React.FocusEvent<HTMLElement>) {
+    if (!this.cellmodel.isEdit) {
+      return false;
+    }
+    return true;
+  }
+
+  override focus = (toEdit: boolean) => {
+    if (toEdit) {
+      this.cellmodel.isEdit = true;
+    } else {
+      if (this.container?.current?.parentElement?.contains(document.activeElement)) {
+        return;
+      }
+      this.container?.current?.parentElement?.focus();
+    }
+  };
+
+  override blur = () => {
+    this.cellmodel.isEdit = false;
+  };
+}

package/src/markdown-preview.tsx

@@ -0,0 +1,35 @@
+import type { FC } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+
+import './index.less';
+import type { MarkdownCellView } from './markdown-cell-view.js';
+
+export const MarkdownPreview: FC<{ instance: MarkdownCellView }> = ({ instance }) => {
+  const mktRef = useRef<HTMLDivElement>(null);
+  // const instance = useInject<MarkdownCellView>(ViewInstance);
+
+  const enterEdit: React.MouseEventHandler<HTMLDivElement> = useCallback(
+    (e) => {
+      if (!instance.parent.model.inputEditable) {
+        return;
+      }
+      e.preventDefault();
+      instance.focus(true);
+    },
+    [instance],
+  );
+
+  useEffect(() => {
+    if (mktRef.current) {
+      mktRef.current.innerHTML = instance.markdownParser.render(instance.model.value, {
+        cellId: instance.model.id,
+      });
+    }
+  }, [instance, instance.model.value]);
+
+  return (
+    <div className="libro-markdown-warpper-container" onDoubleClick={enterEdit}>
+      <div className="libro-markdown-preview" ref={mktRef} />
+    </div>
+  );
+};