@lobehub/editor 1.0.0

package/es/editor-kernel/react/LexicalErrorBoundary.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { JSX } from 'react';
+export type LexicalErrorBoundaryProps = {
+    children: JSX.Element;
+    onError: (error: Error) => void;
+};
+export declare function LexicalErrorBoundary({ children, onError, }: LexicalErrorBoundaryProps): JSX.Element;

package/es/editor-kernel/react/LexicalErrorBoundary.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function LexicalErrorBoundary(_ref) {
+  var children = _ref.children,
+    onError = _ref.onError;
+  return /*#__PURE__*/_jsx(ReactErrorBoundary, {
+    fallback: /*#__PURE__*/_jsx("div", {
+      style: {
+        border: '1px solid #f00',
+        color: '#f00',
+        padding: '8px'
+      },
+      children: "An error was thrown."
+    }),
+    onError: onError,
+    children: children
+  });
+}

package/es/editor-kernel/react/index.d.ts

@@ -0,0 +1,5 @@
+export { LexicalErrorBoundary } from './LexicalErrorBoundary';
+export { useLexicalComposerContext } from './react-context';
+export { ReactEditor } from './react-editor';
+export { useLexicalEditor } from './useLexicalEditor';
+export { useToolbarState } from './useToolbarState';

package/es/editor-kernel/react/index.js

@@ -0,0 +1,5 @@
+export { LexicalErrorBoundary } from "./LexicalErrorBoundary";
+export { useLexicalComposerContext } from "./react-context";
+export { ReactEditor } from "./react-editor";
+export { useLexicalEditor } from "./useLexicalEditor";
+export { useToolbarState } from "./useToolbarState";

package/es/editor-kernel/react/react-context.d.ts

@@ -0,0 +1,10 @@
+import type { EditorThemeClasses } from 'lexical';
+import { type Context } from 'react';
+import { IEditor } from "../../types";
+export type LexicalComposerContextType = {
+    getTheme: () => EditorThemeClasses | null | undefined;
+};
+export type LexicalComposerContextWithEditor = [IEditor, LexicalComposerContextType];
+export declare const LexicalComposerContext: Context<LexicalComposerContextWithEditor | null | undefined>;
+export declare function createLexicalComposerContext(parent: LexicalComposerContextWithEditor | null | undefined, theme: EditorThemeClasses | null | undefined): LexicalComposerContextType;
+export declare function useLexicalComposerContext(): LexicalComposerContextWithEditor;

package/es/editor-kernel/react/react-context.js

@@ -0,0 +1,25 @@
+import { createContext as createReactContext, use } from 'react';
+import { assert } from "../utils";
+export var LexicalComposerContext = /*#__PURE__*/createReactContext(null);
+export function createLexicalComposerContext(parent, theme) {
+  var parentContext = null;
+  if (parent) {
+    parentContext = parent[1];
+  }
+  function getTheme() {
+    if (theme !== null) {
+      return theme;
+    }
+    return parentContext !== null ? parentContext.getTheme() : null;
+  }
+  return {
+    getTheme: getTheme
+  };
+}
+export function useLexicalComposerContext() {
+  var composerContext = use(LexicalComposerContext);
+  if (!composerContext) {
+    assert(false, 'LexicalComposerContext.useLexicalComposerContext: cannot find a LexicalComposerContext');
+  }
+  return composerContext;
+}

package/es/editor-kernel/react/react-editor.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Support configuration through react children
+ */
+import { type FC, type ReactNode, type Ref } from 'react';
+import type { IEditor } from "../../types";
+export interface IReactEditorProps {
+    children?: ReactNode | undefined;
+    /** Editor configuration */
+    config?: Record<string, any>;
+    editorRef?: Ref<IEditor>;
+}
+export declare const ReactEditor: FC<IReactEditorProps>;

package/es/editor-kernel/react/react-editor.js

@@ -0,0 +1,57 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/**
+ * Support configuration through react children
+ */
+import { useEffect, useMemo } from 'react';
+import Editor from "../";
+import { LexicalComposerContext, createLexicalComposerContext, useLexicalComposerContext } from "./react-context";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function updateRef(ref, value) {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
+
+// Configuration injection component
+var ConfigInjector = function ConfigInjector(_ref) {
+  var config = _ref.config;
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  useEffect(function () {
+    if (config !== null && config !== void 0 && config.locale && Object.keys(config.locale).length > 0) {
+      editor.registerLocale(config.locale);
+    }
+  }, [editor, config]);
+  return null;
+};
+export var ReactEditor = function ReactEditor(_ref2) {
+  var editorRef = _ref2.editorRef,
+    children = _ref2.children,
+    config = _ref2.config;
+  var composerContext = useMemo(function () {
+    var editor = Editor.createEditor();
+    updateRef(editorRef, editor);
+    var theme = createLexicalComposerContext(null, null);
+    return [editor, theme];
+  }, []);
+  useEffect(function () {
+    return function () {
+      updateRef(editorRef, undefined);
+    };
+  }, [editorRef]);
+  return /*#__PURE__*/_jsxs(LexicalComposerContext, {
+    value: composerContext,
+    children: [/*#__PURE__*/_jsx(ConfigInjector, {
+      config: config
+    }), children]
+  });
+};

package/es/editor-kernel/react/useDecorators.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentClass, type FC, type JSX } from 'react';
+import { IEditor } from "../../types";
+type ErrorBoundaryProps = {
+    children: JSX.Element;
+    onError: (error: Error) => void;
+};
+export type ErrorBoundaryType = ComponentClass<ErrorBoundaryProps> | FC<ErrorBoundaryProps>;
+export declare function useDecorators(editor: IEditor, ErrorBoundary: ErrorBoundaryType): Array<JSX.Element>;
+export {};

package/es/editor-kernel/react/useDecorators.js

@@ -0,0 +1,69 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Suspense, useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import { createPortal, flushSync } from 'react-dom';
+import { CAN_USE_DOM } from "../../common/canUseDOM";
+import { jsx as _jsx } from "react/jsx-runtime";
+// This workaround is no longer necessary in React 19,
+// but we currently support React >=17.x
+// https://github.com/facebook/react/pull/26395
+var useLayoutEffectImpl = CAN_USE_DOM ? useLayoutEffect : useEffect;
+export function useDecorators(editor, ErrorBoundary) {
+  var _useState = useState(function () {
+      var _editor$getLexicalEdi;
+      return ((_editor$getLexicalEdi = editor.getLexicalEditor()) === null || _editor$getLexicalEdi === void 0 ? void 0 : _editor$getLexicalEdi.getDecorators()) || {};
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    decorators = _useState2[0],
+    setDecorators = _useState2[1];
+
+  // Subscribe to changes
+  useLayoutEffectImpl(function () {
+    var clears = [];
+    var handleInit = function handleInit(editor) {
+      clears.push(editor.registerDecoratorListener(function (nextDecorators) {
+        flushSync(function () {
+          setDecorators(nextDecorators);
+        });
+      }));
+    };
+    editor.on('initialized', handleInit);
+    clears.push(function () {
+      editor.off('initialized', handleInit);
+    });
+    return function () {
+      clears.forEach(function (clear) {
+        return clear();
+      });
+    };
+  }, [editor]);
+
+  // Return decorators defined as React Portals
+  return useMemo(function () {
+    var decoratedPortals = [];
+    var decoratorKeys = Object.keys(decorators);
+    for (var _i = 0, _decoratorKeys = decoratorKeys; _i < _decoratorKeys.length; _i++) {
+      var _editor$getLexicalEdi3;
+      var nodeKey = _decoratorKeys[_i];
+      var reactDecorator = /*#__PURE__*/_jsx(ErrorBoundary, {
+        onError: function onError(e) {
+          var _editor$getLexicalEdi2;
+          return (_editor$getLexicalEdi2 = editor.getLexicalEditor()) === null || _editor$getLexicalEdi2 === void 0 ? void 0 : _editor$getLexicalEdi2._onError(e);
+        },
+        children: /*#__PURE__*/_jsx(Suspense, {
+          fallback: null,
+          children: decorators[nodeKey]
+        })
+      });
+      var element = (_editor$getLexicalEdi3 = editor.getLexicalEditor()) === null || _editor$getLexicalEdi3 === void 0 ? void 0 : _editor$getLexicalEdi3.getElementByKey(nodeKey);
+      if (element !== null && element !== undefined) {
+        decoratedPortals.push( /*#__PURE__*/createPortal(reactDecorator, element, nodeKey));
+      }
+    }
+    return decoratedPortals;
+  }, [ErrorBoundary, decorators, editor]);
+}

package/es/editor-kernel/react/useLexicalEditor.d.ts

@@ -0,0 +1,2 @@
+import { LexicalEditor } from 'lexical';
+export declare function useLexicalEditor(handleEditor: (lexicalEditor: LexicalEditor) => (() => void) | undefined, deps?: any[]): void;

package/es/editor-kernel/react/useLexicalEditor.js

@@ -0,0 +1,31 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useEffect } from 'react';
+import { useLexicalComposerContext } from "./react-context";
+export function useLexicalEditor(handleEditor) {
+  var deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  useEffect(function () {
+    var lexicalEditor = editor.getLexicalEditor();
+    if (lexicalEditor) {
+      return handleEditor(lexicalEditor);
+    } else {
+      var remove = undefined;
+      var handle = function handle(editor) {
+        remove = handleEditor(editor);
+      };
+      editor.on('initialized', handle);
+      return function () {
+        var _remove;
+        editor.off('initialized', handle);
+        (_remove = remove) === null || _remove === void 0 || _remove();
+      };
+    }
+  }, deps);
+}

package/es/editor-kernel/react/useLexicalNodeSelection.d.ts

@@ -0,0 +1,17 @@
+import type { NodeKey } from 'lexical';
+/**
+ * A custom hook to manage the selection state of a specific node in a Lexical editor.
+ *
+ * This hook provides utilities to:
+ * - Check if a node is selected.
+ * - Update its selection state.
+ * - Clear the selection.
+ *
+ * @param {NodeKey} key - The key of the node to track selection for.
+ * @returns {[boolean, (selected: boolean) => void, () => void]} A tuple containing:
+ * - `isSelected` (boolean): Whether the node is currently selected.
+ * - `setSelected` (function): A function to set the selection state of the node.
+ * - `clearSelected` (function): A function to clear the selection of the node.
+ *
+ */
+export declare function useLexicalNodeSelection(key: NodeKey): [boolean, (selected: boolean) => void, () => void];

package/es/editor-kernel/react/useLexicalNodeSelection.js

@@ -0,0 +1,99 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { $createNodeSelection, $getNodeByKey, $getSelection, $isNodeSelection, $setSelection } from 'lexical';
+import { useCallback, useEffect, useState } from 'react';
+import { useLexicalComposerContext } from "./react-context";
+
+/**
+ * A helper function to determine if a specific node is selected in a Lexical editor.
+ *
+ * @param {LexicalEditor} editor - The LexicalEditor instance.
+ * @param {NodeKey} key - The key of the node to check.
+ * @returns {boolean} Whether the node is selected.
+ */
+
+function isNodeSelected(editor, key) {
+  if (!editor) return false;
+  return editor.getEditorState().read(function () {
+    var node = $getNodeByKey(key);
+    if (node === null) {
+      return false; // Node doesn't exist, so it's not selected.
+    }
+    return node.isSelected(); // Check if the node is selected.
+  });
+}
+
+/**
+ * A custom hook to manage the selection state of a specific node in a Lexical editor.
+ *
+ * This hook provides utilities to:
+ * - Check if a node is selected.
+ * - Update its selection state.
+ * - Clear the selection.
+ *
+ * @param {NodeKey} key - The key of the node to track selection for.
+ * @returns {[boolean, (selected: boolean) => void, () => void]} A tuple containing:
+ * - `isSelected` (boolean): Whether the node is currently selected.
+ * - `setSelected` (function): A function to set the selection state of the node.
+ * - `clearSelected` (function): A function to clear the selection of the node.
+ *
+ */
+
+export function useLexicalNodeSelection(key) {
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var lexicalEditor = editor.getLexicalEditor();
+
+  // State to track whether the node is currently selected.
+  var _useState = useState(function () {
+      return isNodeSelected(lexicalEditor, key);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    isSelected = _useState2[0],
+    setIsSelected = _useState2[1];
+  useEffect(function () {
+    var isMounted = true;
+    if (!lexicalEditor) return;
+    var unregister = lexicalEditor.registerUpdateListener(function () {
+      if (isMounted) {
+        setIsSelected(isNodeSelected(lexicalEditor, key));
+      }
+    });
+    return function () {
+      isMounted = false; // Prevent updates after component unmount.
+      unregister();
+    };
+  }, [lexicalEditor, key]);
+  var setSelected = useCallback(function (selected) {
+    if (!lexicalEditor) return;
+    lexicalEditor.update(function () {
+      var selection = $getSelection();
+      if (!$isNodeSelection(selection)) {
+        selection = $createNodeSelection();
+        $setSelection(selection);
+      }
+      if ($isNodeSelection(selection)) {
+        if (selected) {
+          selection.add(key);
+        } else {
+          selection.delete(key);
+        }
+      }
+    });
+  }, [lexicalEditor, key]);
+  var clearSelected = useCallback(function () {
+    if (!lexicalEditor) return;
+    lexicalEditor.update(function () {
+      var selection = $getSelection();
+      if ($isNodeSelection(selection)) {
+        selection.clear();
+      }
+    });
+  }, [lexicalEditor]);
+  return [isSelected, setSelected, clearSelected];
+}

package/es/editor-kernel/react/useToolbarState.d.ts

@@ -0,0 +1,31 @@
+import { type RefObject } from 'react';
+import { IEditor } from '../types';
+/**
+ * Provide toolbar state and toolbar methods
+ * @returns
+ */
+export declare function useToolbarState(editorRef: RefObject<IEditor | null>): {
+    blockType: string | null;
+    bold: () => void;
+    bulletList: () => void;
+    canRedo: boolean;
+    canUndo: boolean;
+    code: () => void;
+    codeblockLang: string | null | undefined;
+    formatCodeblock: () => void;
+    insertLink: () => void;
+    isBold: boolean;
+    isCode: boolean;
+    isEmpty: boolean;
+    isInCodeblock: boolean;
+    isItalic: boolean;
+    isStrikethrough: boolean;
+    isUnderline: boolean;
+    italic: () => void;
+    numberList: () => void;
+    redo: () => void;
+    strikethrough: () => void;
+    underline: () => void;
+    undo: () => void;
+    updateCodeblockLang: (lang: string) => void;
+};