@lobehub/editor 1.32.0 → 1.33.0

package/es/plugins/litexml/react/DiffNodeToolbar.js

@@ -0,0 +1,47 @@
+import { Check, X } from 'lucide-react';
+import { memo } from 'react';
+import { LexicalPortalContainer } from "../../../editor-kernel/react";
+import { DiffAction, LITEXML_DIFFNODE_COMMAND } from "../command/diffCommand";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ReactDiffNodeToolbar = /*#__PURE__*/memo(function (_ref) {
+  var editor = _ref.editor,
+    node = _ref.node;
+  return /*#__PURE__*/_jsxs(LexicalPortalContainer, {
+    editor: editor,
+    node: node,
+    children: [/*#__PURE__*/_jsx("button", {
+      "aria-label": "Accept change",
+      className: "toolbarButton accept",
+      onClick: function onClick() {
+        console.log('Accept change');
+        editor.dispatchCommand(LITEXML_DIFFNODE_COMMAND, {
+          action: DiffAction.Accept,
+          nodeKey: node.getKey()
+        });
+      },
+      title: "Accept",
+      type: "button",
+      children: /*#__PURE__*/_jsx(Check, {
+        size: 16
+      })
+    }), /*#__PURE__*/_jsx("button", {
+      "aria-label": "Reject change",
+      className: "toolbarButton reject",
+      onClick: function onClick() {
+        console.log('Reject change');
+        editor.dispatchCommand(LITEXML_DIFFNODE_COMMAND, {
+          action: DiffAction.Reject,
+          nodeKey: node.getKey()
+        });
+      },
+      title: "Reject",
+      type: "button",
+      children: /*#__PURE__*/_jsx(X, {
+        size: 16
+      })
+    })]
+  });
+});
+ReactDiffNodeToolbar.displayName = 'ReactDiffNodeToolbar';
+export default ReactDiffNodeToolbar;

package/es/plugins/litexml/react/index.js

@@ -10,13 +10,26 @@ import { useLayoutEffect } from 'react';
 import { useLexicalComposerContext } from "../../../editor-kernel/react";
 import { INodePlugin } from "../../inode";
 import { LitexmlPlugin } from "../plugin";
+import ReactDiffNodeToolbar from "./DiffNodeToolbar";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
 export var ReactLiteXmlPlugin = function ReactLiteXmlPlugin() {
   var _useLexicalComposerCo = useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     editor = _useLexicalComposerCo2[0];
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
   useLayoutEffect(function () {
     editor.registerPlugin(INodePlugin);
-    editor.registerPlugin(LitexmlPlugin);
+    editor.registerPlugin(LitexmlPlugin, {
+      decorator: function decorator(node, editor) {
+        return /*#__PURE__*/_jsx(ReactDiffNodeToolbar, {
+          editor: editor,
+          node: node
+        });
+      },
+      theme: styles
+    });
   }, [editor]);
   return null;
 };

package/es/plugins/litexml/react/style.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<import("antd-style").SerializedStyles>;

package/es/plugins/litexml/react/style.js

@@ -0,0 +1,8 @@
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    border: 1px solid ", ";\n\n    .toolbar {\n      position: absolute;\n      z-index: 10;\n      inset-block-start: 0;\n      inset-inline-end: 0;\n\n      display: flex;\n      gap: 4px;\n      align-items: center;\n\n      padding: 4px;\n      border: 1px solid #eee;\n      border-radius: 4px;\n\n      background: #fff;\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 10%);\n    }\n\n    .toolbarButton {\n      cursor: pointer;\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      padding: 2px;\n      border: none;\n\n      background: none;\n    }\n\n    .toolbarButton:focus {\n      border-radius: 3px;\n      outline: 2px solid ", ";\n      outline-offset: 2px;\n    }\n\n    .accept {\n      color: ", ";\n    }\n\n    .reject {\n      color: ", ";\n    }\n\n    &[data-diff-type='add'] .content {\n      position: relative;\n      background-color: ", ";\n    }\n\n    &[data-diff-type='remove'] .content {\n      position: relative;\n      background-color: ", ";\n\n      > *:first-child p,\n      > *:first-child span {\n        text-decoration: line-through;\n      }\n    }\n\n    &[data-diff-type='modify'] .content {\n      position: relative;\n\n      /* first child: original (deleted) */\n      > *:first-child {\n        opacity: 0.6;\n      }\n\n      /* visually indicate deletion with strike-through for text nodes */\n      > *:first-child p,\n      > *:first-child span {\n        text-decoration: line-through;\n      }\n\n      /* second child: modified/new - normal appearance */\n      > *:nth-child(2) {\n        color: inherit;\n        opacity: 1;\n      }\n    }\n  "])), token.colorBorderSecondary, token.colorPrimary, token.colorSuccess, token.colorError, token.colorSuccessBgHover, token.colorErrorBgHover);
+});

package/es/plugins/litexml/utils/index.d.ts

@@ -1,4 +1,5 @@
 import { LexicalEditor, LexicalNode } from 'lexical';
 export declare function $parseSerializedNodeImpl(serializedNode: any, editor: LexicalEditor): LexicalNode;
+export declare function $cloneNode(node: LexicalNode, editor: LexicalEditor): LexicalNode;
 export declare function idToChar(id: string | number): string;
 export declare function charToId(char: string): string;

package/es/plugins/litexml/utils/index.js

@@ -31,6 +31,40 @@ export function $parseSerializedNodeImpl(serializedNode, editor) {
   }
   return node;
 }
+function exportNodeToJSON(node) {
+  var serializedNode = node.exportJSON();
+  var nodeClass = node.constructor;
+  if (serializedNode.type !== nodeClass.getType()) {
+    throw new Error("LexicalNode: Node ".concat(nodeClass.name, " does not match the serialized type. Check if .exportJSON() is implemented and it is returning the correct type."));
+  }
+  if ($isElementNode(node)) {
+    var serializedChildren = serializedNode.children;
+    if (!Array.isArray(serializedChildren)) {
+      throw new Error("LexicalNode: Node ".concat(nodeClass.name, " is an element but .exportJSON() does not have a children array."));
+    }
+    var children = node.getChildren();
+    var _iterator2 = _createForOfIteratorHelper(children),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var child = _step2.value;
+        var serializedChildNode = exportNodeToJSON(child);
+        serializedChildren.push(serializedChildNode);
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+  }
+
+  // @ts-expect-error
+  return serializedNode;
+}
+export function $cloneNode(node, editor) {
+  var json = exportNodeToJSON(node);
+  return $parseSerializedNodeImpl(json, editor);
+}
 var maxId = 1679616; // 36^4
 var startId = 1000000; // to avoid short ids
 var step = 7211; // a prime number to reduce collisions

package/es/plugins/math/node/index.js

@@ -92,8 +92,18 @@ export var MathInlineNode = /*#__PURE__*/function (_DecoratorNode) {
   }, {
     key: "decorate",
     value: function decorate(editor) {
-      var _getKernelFromEditor, _getKernelFromEditor$;
-      return ((_getKernelFromEditor = getKernelFromEditor(editor)) === null || _getKernelFromEditor === void 0 || (_getKernelFromEditor$ = _getKernelFromEditor.getDecorator(MathInlineNode.getType())) === null || _getKernelFromEditor$ === void 0 ? void 0 : _getKernelFromEditor$(this, editor)) || null;
+      var _getKernelFromEditor;
+      var decorator = (_getKernelFromEditor = getKernelFromEditor(editor)) === null || _getKernelFromEditor === void 0 ? void 0 : _getKernelFromEditor.getDecorator(MathInlineNode.getType());
+      if (!decorator) {
+        return null;
+      }
+      if (typeof decorator === 'function') {
+        return decorator(this, editor);
+      }
+      return {
+        queryDOM: decorator.queryDOM,
+        render: decorator.render(this, editor)
+      };
     }
   }], [{
     key: "getType",
@@ -200,8 +210,18 @@ export var MathBlockNode = /*#__PURE__*/function (_DecoratorNode2) {
   }, {
     key: "decorate",
     value: function decorate(editor) {
-      var _getKernelFromEditor2, _getKernelFromEditor3;
-      return ((_getKernelFromEditor2 = getKernelFromEditor(editor)) === null || _getKernelFromEditor2 === void 0 || (_getKernelFromEditor3 = _getKernelFromEditor2.getDecorator(MathBlockNode.getType())) === null || _getKernelFromEditor3 === void 0 ? void 0 : _getKernelFromEditor3(this, editor)) || null;
+      var _getKernelFromEditor2;
+      var decorator = (_getKernelFromEditor2 = getKernelFromEditor(editor)) === null || _getKernelFromEditor2 === void 0 ? void 0 : _getKernelFromEditor2.getDecorator(MathBlockNode.getType());
+      if (!decorator) {
+        return null;
+      }
+      if (typeof decorator === 'function') {
+        return decorator(this, editor);
+      }
+      return {
+        queryDOM: decorator.queryDOM,
+        render: decorator.render(this, editor)
+      };
     }
   }], [{
     key: "getType",

package/es/plugins/mention/node/MentionNode.js

@@ -94,8 +94,18 @@ export var MentionNode = /*#__PURE__*/function (_DecoratorNode) {
   }, {
     key: "decorate",
     value: function decorate(editor) {
-      var _getKernelFromEditor, _getKernelFromEditor$;
-      return ((_getKernelFromEditor = getKernelFromEditor(editor)) === null || _getKernelFromEditor === void 0 || (_getKernelFromEditor$ = _getKernelFromEditor.getDecorator('mention')) === null || _getKernelFromEditor$ === void 0 ? void 0 : _getKernelFromEditor$(this, editor)) || null;
+      var _getKernelFromEditor;
+      var decorator = (_getKernelFromEditor = getKernelFromEditor(editor)) === null || _getKernelFromEditor === void 0 ? void 0 : _getKernelFromEditor.getDecorator(MentionNode.getType());
+      if (!decorator) {
+        return null;
+      }
+      if (typeof decorator === 'function') {
+        return decorator(this, editor);
+      }
+      return {
+        queryDOM: decorator.queryDOM,
+        render: decorator.render(this, editor)
+      };
     }
   }], [{
     key: "getType",

package/es/types/kernel.d.ts

@@ -1,11 +1,16 @@
 import type { HistoryState, HistoryStateEntry } from '@lexical/history';
-import type { CommandListener, CommandListenerPriority, CommandPayloadType, DecoratorNode, EditorState, LexicalCommand, LexicalEditor, LexicalNodeConfig } from 'lexical';
+import type { CommandListener, CommandListenerPriority, CommandPayloadType, EditorState, LexicalCommand, LexicalEditor, LexicalNode, LexicalNodeConfig } from 'lexical';
 import type DataSource from "../editor-kernel/data-source";
 import type { HotkeyId } from "./hotkey";
 import type { HotkeyOptions, HotkeysEvent } from "../utils/hotkey/registerHotkey";
 import type { ILocaleKeys } from './locale';
 export type Commands = Map<LexicalCommand<unknown>, Array<Set<CommandListener<unknown>>>>;
 export type CommandsClean = Map<LexicalCommand<unknown>, () => void>;
+export type IDecoratorFunc = (_node: LexicalNode, _editor: LexicalEditor) => any;
+export type IDecorator = {
+    queryDOM: (_element: HTMLElement) => HTMLElement;
+    render: IDecoratorFunc;
+} | IDecoratorFunc;
 /**
  * Service ID type
  */
@@ -206,7 +211,7 @@ export interface IEditorKernel extends IEditor {
      * Get editor Node decorator for specific Node rendering
      * @param name
      */
-    getDecorator(name: string): ((_node: DecoratorNode<any>, _editor: LexicalEditor) => any) | undefined;
+    getDecorator(name: string): IDecorator | undefined;
     /**
      * Get editor history state
      */
@@ -229,7 +234,7 @@ export interface IEditorKernel extends IEditor {
      * @param name
      * @param decorator
      */
-    registerDecorator(name: string, decorator: (_node: DecoratorNode<any>, _editor: LexicalEditor) => any): void;
+    registerDecorator(name: string, decorator: IDecorator): void;
     /**
      * Register Lexical Node
      * @param nodes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "1.32.0",
+  "version": "1.33.0",
   "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
   "keywords": [
     "lobehub",