UNPKG

@lobehub/editor

Version:

A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.

636 lines (620 loc) 28.6 kB
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } 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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; } function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } 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 EventEmitter from 'eventemitter3'; import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_CRITICAL, createEditor } from 'lexical'; import { get, merge, template, templateSettings } from 'lodash-es'; import defaultLocale from "../locale"; import { $isRootTextContentEmpty } from "../plugins/common/utils"; import { createDebugLogger } from "../utils/debug"; import { registerEvent } from "./event"; import { KernelPlugin } from "./plugin"; import { createEmptyEditorState } from "./utils"; templateSettings.interpolate = /{{([\S\s]+?)}}/g; export var Kernel = /*#__PURE__*/function (_EventEmitter) { _inherits(Kernel, _EventEmitter); var _super = _createSuper(Kernel); function Kernel() { var _this; _classCallCheck(this, Kernel); _this = _super.call(this); _defineProperty(_assertThisInitialized(_this), "dataTypeMap", void 0); _defineProperty(_assertThisInitialized(_this), "plugins", []); _defineProperty(_assertThisInitialized(_this), "pluginsInstances", []); _defineProperty(_assertThisInitialized(_this), "nodes", []); _defineProperty(_assertThisInitialized(_this), "themes", {}); // Used to store theme configuration _defineProperty(_assertThisInitialized(_this), "decorators", {}); _defineProperty(_assertThisInitialized(_this), "serviceMap", new Map()); _defineProperty(_assertThisInitialized(_this), "localeMap", defaultLocale); _defineProperty(_assertThisInitialized(_this), "hotReloadMode", false); _defineProperty(_assertThisInitialized(_this), "logger", createDebugLogger('kernel')); _defineProperty(_assertThisInitialized(_this), "editor", void 0); _defineProperty(_assertThisInitialized(_this), "_commands", new Map()); _defineProperty(_assertThisInitialized(_this), "_commandsClean", new Map()); _this.dataTypeMap = new Map(); // Enable hot reload mode in development _this.hotReloadMode = _this.detectDevelopmentMode(); _this.logger.info("\uD83D\uDE80 Kernel initialized (hot reload: ".concat(_this.hotReloadMode, ")")); return _this; } _createClass(Kernel, [{ key: "detectDevelopmentMode", value: function detectDevelopmentMode() { var _process$env; // Check global override first if (Kernel.globalHotReloadMode !== undefined) { return Kernel.globalHotReloadMode; } // Multiple ways to detect development mode if (typeof process !== 'undefined' && ((_process$env = process.env) === null || _process$env === void 0 ? void 0 : _process$env.NODE_ENV) === 'development') { return true; } // Check for common development indicators if (typeof window !== 'undefined') { var _NEXT_DATA__; // Webpack HMR if (window.webpackHotUpdate) { return true; } // Vite HMR if (window.__vite_plugin_react_preamble_installed__) { return true; } // Next.js development if (((_NEXT_DATA__ = window.__NEXT_DATA__) === null || _NEXT_DATA__ === void 0 ? void 0 : _NEXT_DATA__.buildId) === 'development') { return true; } } // Check for localhost or development URLs if (typeof window !== 'undefined' && window.location) { var hostname = window.location.hostname; if (hostname === 'localhost' || hostname === '127.0.0.1' || hostname.endsWith('.local')) { return true; } } // Default to development mode for better DX return true; } /** * Globally enable or disable hot reload mode for all kernel instances * @param enabled Whether to enable hot reload mode globally */ }, { key: "getLexicalEditor", value: function getLexicalEditor() { return this.editor || null; } }, { key: "destroy", value: function destroy() { var _this$editor; this.logger.info("\uD83D\uDDD1\uFE0F Destroying editor with ".concat(this.pluginsInstances.length, " plugins")); (_this$editor = this.editor) === null || _this$editor === void 0 || _this$editor.setEditorState(createEmptyEditorState()); this.dataTypeMap.clear(); this.pluginsInstances.forEach(function (plugin) { if (plugin.destroy) { plugin.destroy(); } }); this.pluginsInstances = []; // Clear services to support hot reload this.serviceMap.clear(); // Clear decorators to prevent memory leaks this.decorators = {}; this.logger.info('✅ Editor destroyed'); } }, { key: "getRootElement", value: function getRootElement() { var _this$editor2; return ((_this$editor2 = this.editor) === null || _this$editor2 === void 0 ? void 0 : _this$editor2.getRootElement()) || null; } }, { key: "setRootElement", value: function setRootElement(dom) { var _this2 = this; // Check if editor is already initialized to prevent re-initialization if (this.editor) { this.logger.warn('[Editor] Editor is already initialized, updating root element only'); this.editor.setRootElement(dom); return this.editor; } // Initialize plugins if not already done if (this.pluginsInstances.length === 0) { this.logger.info("\uD83D\uDD0C Initializing ".concat(this.plugins.length, " plugins")); var _iterator = _createForOfIteratorHelper(this.plugins), _step; try { for (_iterator.s(); !(_step = _iterator.n()).done;) { var plugin = _step.value; var instance = new plugin(this, plugin.__config); this.pluginsInstances.push(instance); } } catch (err) { _iterator.e(err); } finally { _iterator.f(); } } this.logger.info("\uD83D\uDCDD Creating editor with ".concat(this.nodes.length, " nodes")); var editor = this.editor = createEditor({ // @ts-expect-error Inject into lexical editor instance __kernel: this, namespace: 'lobehub', nodes: this.nodes, onError: function onError(error) { _this2.logger.error('❌ Lexical editor error:', error); _this2.emit('error', error); }, theme: this.themes }); this.editor.setRootElement(dom); registerEvent(editor, dom); this.pluginsInstances.forEach(function (plugin) { var _plugin$onInit; (_plugin$onInit = plugin.onInit) === null || _plugin$onInit === void 0 || _plugin$onInit.call(plugin, editor); }); this.logger.info("\u2705 Editor ready with ".concat(this.pluginsInstances.length, " plugins")); this.emit('initialized', editor); return this.editor; } }, { key: "setDocument", value: function setDocument(type, content) { var datasource = this.dataTypeMap.get(type); if (!datasource) { this.logger.error("\u274C DataSource for type \"".concat(type, "\" not found")); throw new Error("DataSource for type \"".concat(type, "\" is not registered.")); } if (!this.editor) { this.logger.error('❌ Editor not initialized'); throw new Error("Editor is not initialized."); } datasource.read(this.editor, content); this.logger.debug("\uD83D\uDCE5 Set ".concat(type, " document")); } }, { key: "focus", value: function focus() { var _this$editor3; (_this$editor3 = this.editor) === null || _this$editor3 === void 0 || _this$editor3.focus(); } }, { key: "blur", value: function blur() { var _this$editor4; (_this$editor4 = this.editor) === null || _this$editor4 === void 0 || _this$editor4.blur(); } }, { key: "getDocument", value: function getDocument(type) { var datasource = this.dataTypeMap.get(type); if (!datasource) { this.logger.error("\u274C DataSource for type \"".concat(type, "\" not found")); throw new Error("DataSource for type \"".concat(type, "\" is not registered.")); } if (!this.editor) { this.logger.error('❌ Editor not initialized'); throw new Error("Editor is not initialized."); } var result = datasource.write(this.editor); return result; } }, { key: "getSelectionDocument", value: function getSelectionDocument(type) { var datasource = this.dataTypeMap.get(type); if (!datasource) { throw new Error("DataSource for type \"".concat(type, "\" is not registered.")); } if (!this.editor) { throw new Error("Editor is not initialized."); } return datasource.write(this.editor, { selection: true }); } }, { key: "registerDecorator", value: function registerDecorator(name, decorator) { if (this.decorators[name]) { if (this.hotReloadMode) { // In hot reload mode, allow decorator override with warning this.logger.warn("\uD83D\uDD04 Hot reload: decorator \"".concat(name, "\"")); this.decorators[name] = decorator; return this; } else { // Check if it's the same decorator function var existingDecorator = this.decorators[name]; if (existingDecorator === decorator) { // Same decorator function, no need to re-register this.logger.warn("[Editor] Decorator \"".concat(name, "\" is already registered with the same function")); return this; } // Different decorator function in production mode this.logger.error("[Editor] Attempting to register duplicate decorator \"".concat(name, "\". Enable hot reload mode if this is intended.")); throw new Error("Decorator with name \"".concat(name, "\" is already registered.")); } } this.decorators[name] = decorator; this.logger.debug("\uD83C\uDFAD Decorator: ".concat(name)); return this; } }, { key: "getDecorator", value: function getDecorator(name) { return this.decorators[name]; } /** * Unregister a decorator * @param name Decorator name */ }, { key: "unregisterDecorator", value: function unregisterDecorator(name) { if (this.decorators[name]) { delete this.decorators[name]; this.logger.debug("\uD83D\uDDD1\uFE0F Removed decorator: ".concat(name)); return true; } this.logger.warn("\u26A0\uFE0F Decorator \"".concat(name, "\" not found")); return false; } /** * Get all registered decorator names */ }, { key: "getRegisteredDecorators", value: function getRegisteredDecorators() { return Object.keys(this.decorators); } /** * Support registering target data source * @param dataSource Data source */ }, { key: "registerDataSource", value: function registerDataSource(dataSource) { this.dataTypeMap.set(dataSource.type, dataSource); this.logger.debug("\uD83D\uDCC4 Data source: ".concat(dataSource.type)); } }, { key: "registerThemes", value: function registerThemes(themes) { this.themes = merge(this.themes, themes); } }, { key: "registerPlugin", value: function registerPlugin(plugin, config) { var findPlugin = this.plugins.find(function (p) { return p.pluginName === plugin.pluginName; }); if (findPlugin) { // Error if same name but different plugin if (findPlugin !== plugin) { if (this.hotReloadMode) { this.logger.warn("\uD83D\uDD04 Hot reload: plugin \"".concat(plugin.pluginName, "\"")); // Remove old plugin var index = this.plugins.findIndex(function (p) { return p.pluginName === plugin.pluginName; }); if (index !== -1) { this.plugins.splice(index, 1); // Also remove corresponding plugin instance if it exists var instanceIndex = this.pluginsInstances.findIndex(function (instance) { return instance.constructor.pluginName === plugin.pluginName; }); if (instanceIndex !== -1) { var oldInstance = this.pluginsInstances[instanceIndex]; // Clean up decorators registered by the old plugin instance if (oldInstance instanceof KernelPlugin) { var decoratorNames = oldInstance.getRegisteredDecorators(); var _iterator2 = _createForOfIteratorHelper(decoratorNames), _step2; try { for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) { var decoratorName = _step2.value; this.unregisterDecorator(decoratorName); this.logger.debug("\uD83E\uDDE8 Cleanup: decorator \"".concat(decoratorName, "\"")); } } catch (err) { _iterator2.e(err); } finally { _iterator2.f(); } } if (oldInstance.destroy) { oldInstance.destroy(); } this.pluginsInstances.splice(instanceIndex, 1); } } } else { throw new Error("Plugin with name \"".concat(plugin.pluginName, "\" is already registered with a different implementation.")); } } else { // Same plugin, just update config if provided if (config !== undefined) { // @ts-expect-error not error plugin.__config = config; } return this; // If plugin already exists, don't register again } } // @ts-expect-error not error plugin.__config = config || {}; // @ts-expect-error not error this.plugins.push(plugin); this.logger.debug("\uD83D\uDD0C Plugin: ".concat(plugin.pluginName)); return this; } }, { key: "registerPlugins", value: function registerPlugins(plugins) { var _iterator3 = _createForOfIteratorHelper(plugins), _step3; try { for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) { var plugin = _step3.value; if (Array.isArray(plugin)) { this.registerPlugin(plugin[0], plugin[1]); } else { this.registerPlugin(plugin); } } } catch (err) { _iterator3.e(err); } finally { _iterator3.f(); } this.logger.debug("\uD83D\uDD0C Registered ".concat(plugins.length, " plugins")); return this; } }, { key: "registerNodes", value: function registerNodes(nodes) { var _this$nodes; var nodeTypes = nodes.map(function (node) { // Handle both node classes and node replacements if (typeof node === 'function' && node.getType) { return node.getType(); } else if (_typeof(node) === 'object' && node.replace && typeof node.replace === 'function' && node.replace.getType) { return node.replace.getType(); } return 'unknown'; }).filter(function (type) { return type !== 'unknown'; }); (_this$nodes = this.nodes).push.apply(_this$nodes, _toConsumableArray(nodes)); if (nodeTypes.length > 3) { this.logger.debug("\uD83E\uDDE9 Nodes: ".concat(nodeTypes.length, " types")); } else { this.logger.debug("\uD83E\uDDE9 Nodes: ".concat(nodeTypes.join(', '))); } } }, { key: "registerService", value: function registerService(serviceId, service) { var serviceIdString = serviceId.__serviceId; if (this.serviceMap.has(serviceIdString)) { if (this.hotReloadMode) { // In hot reload mode, allow service override with warning this.logger.warn("\uD83D\uDD04 Hot reload: service \"".concat(serviceIdString, "\"")); this.serviceMap.set(serviceIdString, service); return; } else { // Check if it's the same service instance var existingService = this.serviceMap.get(serviceIdString); if (existingService === service) { // Same service instance, no need to re-register this.logger.warn("[Editor] Service \"".concat(serviceIdString, "\" is already registered with the same instance")); return; } // Different service instance in production mode this.logger.error("[Editor] Attempting to register duplicate service \"".concat(serviceIdString, "\". Enable hot reload mode if this is intended.")); throw new Error("Service with ID \"".concat(serviceIdString, "\" is already registered.")); } } this.serviceMap.set(serviceIdString, service); this.logger.debug("\uD83D\uDD27 Service: ".concat(serviceIdString)); } /** * Register service with hot reload support - allows overriding existing services * @param serviceId Service identifier * @param service Service instance */ }, { key: "registerServiceHotReload", value: function registerServiceHotReload(serviceId, service) { this.serviceMap.set(serviceId.__serviceId, service); this.logger.debug("\uD83D\uDD04 Hot-reload service: ".concat(serviceId.__serviceId)); } /** * Enable or disable hot reload mode * @param enabled Whether to enable hot reload mode */ }, { key: "setHotReloadMode", value: function setHotReloadMode(enabled) { this.hotReloadMode = enabled; } /** * Check if hot reload mode is enabled */ }, { key: "isHotReloadMode", value: function isHotReloadMode() { return this.hotReloadMode; } /** * Get service * @param serviceId Service ID */ }, { key: "requireService", value: function requireService(serviceId) { var service = this.serviceMap.get(serviceId.__serviceId); if (!service) { return null; } return service; } }, { key: "dispatchCommand", value: function dispatchCommand(type, payload) { if (!this.editor) { throw new Error('Editor is not initialized.'); } return this.editor.dispatchCommand(type, payload); } }, { key: "getTheme", value: function getTheme() { return this.themes; } }, { key: "updateTheme", value: function updateTheme(key, value) { this.themes[key] = value; } }, { key: "registerLocale", value: function registerLocale(locale) { var localeKeys = Object.keys(locale); this.localeMap = merge(this.localeMap, locale); this.logger.debug("\uD83C\uDF10 Locale: ".concat(localeKeys.length, " keys")); } }, { key: "t", value: function t(key, params) { var translation = get(this.localeMap, key) || key; if (params) { var compiled = template(translation); translation = compiled(params); } return translation; } }, { key: "isEmpty", get: function get() { var _this3 = this; if (!this.editor) { return true; } return this.editor.getEditorState().read(function () { return $isRootTextContentEmpty(_this3.editor.isComposing(), true); }); } }, { key: "isSelected", get: function get() { if (!this.editor) { return false; } return this.editor.getEditorState().read(function () { var selection = $getSelection(); if ($isRangeSelection(selection)) { return !!selection._cachedNodes; } return false; }); } }, { key: "cleanDocument", value: function cleanDocument() { this.setDocument('text', ''); } }, { key: "registerHighCommand", value: function registerHighCommand(command, listener, priority) { var _this4 = this; var lexicalEditor = this.editor; if (!lexicalEditor) { throw new Error('Editor is not initialized.'); } var commandsMap = this._commands; if (!commandsMap.has(command)) { var _command$type; commandsMap.set(command, [new Set(), new Set(), new Set(), new Set(), new Set()]); this._commandsClean.set(command, lexicalEditor.registerCommand(command, function (payload) { for (var i = 4; i >= 0; i--) { var listenerInPriorityOrder = _this4._commands.get(command); if (listenerInPriorityOrder !== undefined) { var listenersSet = listenerInPriorityOrder[i]; var _iterator4 = _createForOfIteratorHelper(listenersSet), _step4; try { for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) { var _listener = _step4.value; if (_listener(payload, lexicalEditor)) { return true; } } } catch (err) { _iterator4.e(err); } finally { _iterator4.f(); } } } return false; }, COMMAND_PRIORITY_CRITICAL)); // Only log non-keyboard commands to reduce noise if (!((_command$type = command.type) !== null && _command$type !== void 0 && _command$type.includes('KEY'))) { this.logger.debug("\u26A1 Command: ".concat(command.type || 'unknown')); } } var listenersInPriorityOrder = commandsMap.get(command); if (listenersInPriorityOrder === undefined) { return function () {}; } var listeners = listenersInPriorityOrder[priority]; listeners.add(listener); return function () { listeners.delete(listener); if (listenersInPriorityOrder.every(function (listenersSet) { return listenersSet.size === 0; })) { var _this4$_commandsClean; commandsMap.delete(command); (_this4$_commandsClean = _this4._commandsClean.get(command)) === null || _this4$_commandsClean === void 0 || _this4$_commandsClean(); } }; } }], [{ key: "setGlobalHotReloadMode", value: function setGlobalHotReloadMode(enabled) { Kernel.globalHotReloadMode = enabled; } /** * Reset global hot reload mode to automatic detection */ }, { key: "resetGlobalHotReloadMode", value: function resetGlobalHotReloadMode() { Kernel.globalHotReloadMode = undefined; } }]); return Kernel; }(EventEmitter); // Global hot reload flag _defineProperty(Kernel, "globalHotReloadMode", undefined);