@lobehub/editor 1.24.0 → 1.26.0

package/es/plugins/image/node/block-image-node.d.ts

@@ -0,0 +1,31 @@
+import { DOMConversionMap, EditorConfig, LexicalNode } from 'lexical';
+import { BaseImageNode, ImagePayload, SerializedImageNode } from './basie-image-node';
+export declare class BlockImageNode extends BaseImageNode {
+    private static _decorate;
+    static setDecorate(decorate: (node: BlockImageNode) => any): void;
+    static getType(): string;
+    private __loading;
+    private __status;
+    private __message;
+    private __extra;
+    get isLoading(): boolean;
+    get status(): 'uploaded' | 'loading' | 'error';
+    get message(): string | null;
+    get src(): string;
+    get altText(): string;
+    get maxWidth(): number;
+    get width(): number | string;
+    get height(): number | string;
+    isInline(): boolean;
+    setMaxWidth(maxWidth: number): void;
+    setWidth(width: number): void;
+    setUploaded(url: string): void;
+    setError(message: string): void;
+    static clone(node: BlockImageNode): BlockImageNode;
+    static importJSON(serializedNode: SerializedImageNode): BlockImageNode;
+    static importDOM(): DOMConversionMap | null;
+    decorate(): any;
+    createDOM(config: EditorConfig): HTMLElement;
+}
+export declare function $createBlockImageNode({ altText, height, maxWidth, captionsEnabled, src, width, showCaption, caption, key, }: ImagePayload): BlockImageNode;
+export declare function $isBlockImageNode(node: LexicalNode): node is BlockImageNode;

package/es/plugins/image/node/block-image-node.js

@@ -0,0 +1,209 @@
+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); }
+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 _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 _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 _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); }
+import { $applyNodeReplacement } from 'lexical';
+import { BaseImageNode } from "./basie-image-node";
+export var BlockImageNode = /*#__PURE__*/function (_BaseImageNode) {
+  _inherits(BlockImageNode, _BaseImageNode);
+  var _super = _createSuper(BlockImageNode);
+  function BlockImageNode() {
+    var _this;
+    _classCallCheck(this, BlockImageNode);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "__loading", true);
+    _defineProperty(_assertThisInitialized(_this), "__status", 'uploaded');
+    _defineProperty(_assertThisInitialized(_this), "__message", null);
+    _defineProperty(_assertThisInitialized(_this), "__extra", null);
+    return _this;
+  }
+  _createClass(BlockImageNode, [{
+    key: "isLoading",
+    get: function get() {
+      return this.__loading;
+    }
+  }, {
+    key: "status",
+    get: function get() {
+      return this.__status;
+    }
+  }, {
+    key: "message",
+    get: function get() {
+      return this.__message;
+    }
+  }, {
+    key: "src",
+    get: function get() {
+      return this.__src;
+    }
+  }, {
+    key: "altText",
+    get: function get() {
+      return this.__altText;
+    }
+  }, {
+    key: "maxWidth",
+    get: function get() {
+      return this.__maxWidth;
+    }
+  }, {
+    key: "width",
+    get: function get() {
+      return this.__width;
+    }
+  }, {
+    key: "height",
+    get: function get() {
+      return this.__height;
+    }
+  }, {
+    key: "isInline",
+    value: function isInline() {
+      return false;
+    }
+  }, {
+    key: "setMaxWidth",
+    value: function setMaxWidth(maxWidth) {
+      var writable = this.getWritable();
+      writable.__maxWidth = maxWidth;
+    }
+  }, {
+    key: "setWidth",
+    value: function setWidth(width) {
+      var writable = this.getWritable();
+      writable.__width = width;
+    }
+  }, {
+    key: "setUploaded",
+    value: function setUploaded(url) {
+      var writable = this.getWritable();
+      writable.__loading = false;
+      writable.__src = url;
+      writable.__status = 'uploaded';
+    }
+  }, {
+    key: "setError",
+    value: function setError(message) {
+      var writable = this.getWritable();
+      writable.__loading = false;
+      writable.__status = 'error';
+      writable.__message = message;
+    }
+  }, {
+    key: "decorate",
+    value: function decorate() {
+      return BlockImageNode._decorate(this);
+    }
+  }, {
+    key: "createDOM",
+    value: function createDOM(config) {
+      var span = document.createElement('div');
+      var theme = config.theme;
+      var className = theme.blockImage;
+      if (className !== undefined) {
+        span.className = className;
+      }
+      return span;
+    }
+  }], [{
+    key: "setDecorate",
+    value: function setDecorate(decorate) {
+      BlockImageNode._decorate = decorate;
+    }
+  }, {
+    key: "getType",
+    value: function getType() {
+      return 'block-image';
+    }
+  }, {
+    key: "clone",
+    value: function clone(node) {
+      return new BlockImageNode(node.__src, node.__altText, node.__maxWidth, node.__width, node.__height, node.__showCaption, node.__caption, node.__captionsEnabled, node.__key);
+    }
+  }, {
+    key: "importJSON",
+    value: function importJSON(serializedNode) {
+      var altText = serializedNode.altText,
+        height = serializedNode.height,
+        width = serializedNode.width,
+        maxWidth = serializedNode.maxWidth,
+        src = serializedNode.src,
+        showCaption = serializedNode.showCaption;
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      return $createBlockImageNode({
+        altText: altText,
+        height: height,
+        maxWidth: maxWidth,
+        showCaption: showCaption,
+        src: src,
+        width: width
+      }).updateFromJSON(serializedNode);
+    }
+  }, {
+    key: "importDOM",
+    value: function importDOM() {
+      return {
+        img: function img() {
+          return {
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            conversion: $convertImageElement,
+            priority: 0
+          };
+        }
+      };
+    }
+  }]);
+  return BlockImageNode;
+}(BaseImageNode);
+_defineProperty(BlockImageNode, "_decorate", function () {
+  return null;
+});
+export function $createBlockImageNode(_ref) {
+  var altText = _ref.altText,
+    height = _ref.height,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? 500 : _ref$maxWidth,
+    captionsEnabled = _ref.captionsEnabled,
+    src = _ref.src,
+    width = _ref.width,
+    showCaption = _ref.showCaption,
+    caption = _ref.caption,
+    key = _ref.key;
+  return $applyNodeReplacement(new BlockImageNode(src, altText, maxWidth, width, height, showCaption, caption, captionsEnabled, key));
+}
+function $convertImageElement(domNode) {
+  var img = domNode;
+  if (img.src.startsWith('file:///')) {
+    return null;
+  }
+  var altText = img.alt,
+    src = img.src,
+    width = img.width,
+    height = img.height;
+  var node = $createBlockImageNode({
+    altText: altText,
+    height: height,
+    src: src,
+    width: width
+  });
+  return {
+    node: node
+  };
+}
+export function $isBlockImageNode(node) {
+  return node.getType() === BlockImageNode.getType();
+}

package/es/plugins/image/node/image-node.d.ts

@@ -15,6 +15,9 @@ export declare class ImageNode extends BaseImageNode {
     get altText(): string;
     get maxWidth(): number;
     get width(): number | string;
+    get height(): number | string;
+    setMaxWidth(maxWidth: number): void;
+    setWidth(width: number): void;
     setUploaded(url: string): void;
     setError(message: string): void;
     static clone(node: ImageNode): ImageNode;

package/es/plugins/image/node/image-node.js

@@ -65,6 +65,23 @@ export var ImageNode = /*#__PURE__*/function (_BaseImageNode) {
     get: function get() {
       return this.__width;
     }
+  }, {
+    key: "height",
+    get: function get() {
+      return this.__height;
+    }
+  }, {
+    key: "setMaxWidth",
+    value: function setMaxWidth(maxWidth) {
+      var writable = this.getWritable();
+      writable.__maxWidth = maxWidth;
+    }
+  }, {
+    key: "setWidth",
+    value: function setWidth(width) {
+      var writable = this.getWritable();
+      writable.__width = width;
+    }
   }, {
     key: "setUploaded",
     value: function setUploaded(url) {

package/es/plugins/image/plugin/index.d.ts

@@ -1,12 +1,15 @@
 import type { JSX } from 'react';
 import { IEditorPluginConstructor } from "../../../types";
+import { BlockImageNode } from '../node/block-image-node';
 import { ImageNode } from '../node/image-node';
 export interface ImagePluginOptions {
+    defaultBlockImage?: boolean;
     handleUpload: (file: File) => Promise<{
         url: string;
     }>;
-    renderImage: (node: ImageNode) => JSX.Element | null;
+    renderImage: (node: ImageNode | BlockImageNode) => JSX.Element | null;
     theme?: {
+        blockImage?: string;
         image?: string;
     };
 }

package/es/plugins/image/plugin/index.js

@@ -20,44 +20,60 @@ import { KernelPlugin } from "../../../editor-kernel/plugin";
 import { IMarkdownShortCutService } from "../../markdown/service/shortcut";
 import { IUploadService, UPLOAD_PRIORITY_HIGH } from "../../upload";
 import { INSERT_IMAGE_COMMAND, registerImageCommand } from "../command";
+import { $isBlockImageNode, BlockImageNode } from "../node/block-image-node";
 import { $isImageNode, ImageNode } from "../node/image-node";
 export var ImagePlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
   _inherits(ImagePlugin, _KernelPlugin);
   var _super = _createSuper(ImagePlugin);
   function ImagePlugin(kernel, config) {
-    var _kernel$requireServic;
     var _this;
     _classCallCheck(this, ImagePlugin);
     _this = _super.call(this);
     _this.kernel = kernel;
     _this.config = config;
-    kernel.registerNodes([ImageNode]);
+    kernel.registerNodes([ImageNode, BlockImageNode]);
     ImageNode.setDecorate(config.renderImage);
+    BlockImageNode.setDecorate(config.renderImage);
     if (config !== null && config !== void 0 && config.theme) {
       kernel.registerThemes(config.theme);
     }
-    (_kernel$requireServic = kernel.requireService(IMarkdownShortCutService)) === null || _kernel$requireServic === void 0 || _kernel$requireServic.registerMarkdownWriter(ImageNode.getType(), function (ctx, node) {
-      if ($isImageNode(node)) {
-        ctx.appendLine("![".concat(node.altText, "](").concat(node.src, ")"));
-      }
-    });
     return _this;
   }
   _createClass(ImagePlugin, [{
     key: "onInit",
     value: function onInit(editor) {
-      var _this$kernel$requireS;
-      // Register the upload handler if provided
-      (_this$kernel$requireS = this.kernel.requireService(IUploadService)) === null || _this$kernel$requireS === void 0 || _this$kernel$requireS.registerUpload( /*#__PURE__*/function () {
+      var _this$kernel$requireS,
+        _this$kernel$requireS2,
+        _this$kernel$requireS3,
+        _this2 = this;
+      (_this$kernel$requireS = this.kernel.requireService(IMarkdownShortCutService)) === null || _this$kernel$requireS === void 0 || _this$kernel$requireS.registerMarkdownWriter(ImageNode.getType(), function (ctx, node) {
+        if ($isImageNode(node)) {
+          ctx.appendLine("![".concat(node.altText, "](").concat(node.src, ")"));
+        }
+      });
+      (_this$kernel$requireS2 = this.kernel.requireService(IMarkdownShortCutService)) === null || _this$kernel$requireS2 === void 0 || _this$kernel$requireS2.registerMarkdownWriter(BlockImageNode.getType(), function (ctx, node) {
+        if ($isBlockImageNode(node)) {
+          ctx.appendLine("![".concat(node.altText, "](").concat(node.src, ")\n\n"));
+        }
+      });
+      (_this$kernel$requireS3 = this.kernel.requireService(IUploadService)) === null || _this$kernel$requireS3 === void 0 || _this$kernel$requireS3.registerUpload( /*#__PURE__*/function () {
         var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(file, from, range) {
+          var _this2$config;
+          var imageWidth;
           return _regeneratorRuntime().wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
+                _context.next = 2;
+                return _this2.getImageWidth(file);
+              case 2:
+                imageWidth = _context.sent;
                 return _context.abrupt("return", editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+                  block: (_this2$config = _this2.config) === null || _this2$config === void 0 ? void 0 : _this2$config.defaultBlockImage,
                   file: file,
+                  maxWidth: imageWidth,
                   range: range
                 }));
-              case 1:
+              case 4:
               case "end":
                 return _context.stop();
             }
@@ -69,6 +85,30 @@ export var ImagePlugin = (_class = /*#__PURE__*/function (_KernelPlugin) {
       }(), UPLOAD_PRIORITY_HIGH);
       this.register(registerImageCommand(editor, this.config.handleUpload));
     }
+  }, {
+    key: "getImageWidth",
+    value: function getImageWidth(file) {
+      return new Promise(function (resolve) {
+        var reader = new FileReader();
+        reader.addEventListener('load', function (e) {
+          var _e$target;
+          var img = new Image();
+          img.addEventListener('load', function () {
+            resolve(img.naturalWidth);
+          });
+          img.addEventListener('error', function () {
+            // Default width if image fails to load
+            resolve(800);
+          });
+          img.src = (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.result;
+        });
+        reader.addEventListener('error', function () {
+          // Default width if file reading fails
+          resolve(800);
+        });
+        reader.readAsDataURL(file);
+      });
+    }
   }]);
   return ImagePlugin;
 }(KernelPlugin), _defineProperty(_class, "pluginName", 'ImagePlugin'), _class);

package/es/plugins/image/react/ReactImagePlugin.js

@@ -15,7 +15,8 @@ import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ReactImagePlugin = function ReactImagePlugin(_ref) {
   var theme = _ref.theme,
-    className = _ref.className;
+    className = _ref.className,
+    defaultBlockImage = _ref.defaultBlockImage;
   var _useLexicalComposerCo = useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
@@ -24,6 +25,7 @@ var ReactImagePlugin = function ReactImagePlugin(_ref) {
   useLayoutEffect(function () {
     editor.registerPlugin(UploadPlugin);
     editor.registerPlugin(ImagePlugin, {
+      defaultBlockImage: defaultBlockImage,
       handleUpload: function handleUpload(file) {
         return new Promise(function (resolve) {
           setTimeout(function () {

package/es/plugins/image/react/components/Image.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
+import { BlockImageNode } from '../../node/block-image-node';
 import { ImageNode } from '../../node/image-node';
-declare const Image: import("react").NamedExoticComponent<{
+declare const Image: React.NamedExoticComponent<{
     className?: string | undefined;
-    node: ImageNode;
+    node: ImageNode | BlockImageNode;
 }>;
 export default Image;