@lobehub/editor 4.7.0 → 4.8.0

package/es/renderer.d.ts

@@ -2,6 +2,9 @@ import { Klass, LexicalNode, SerializedEditorState, SerializedLexicalNode } from
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { CSSProperties, JSX, ReactElement, ReactNode } from "react";
 
+//#region src/renderer/diff/style.d.ts
+type DiffAppearance = 'borderless' | 'default';
+//#endregion
 //#region src/renderer/diff/types.d.ts
 type LexicalDiffRowKind = 'delete' | 'equal' | 'insert' | 'modify';
 interface LexicalDiffCell {
@@ -60,6 +63,7 @@ interface LexicalRendererProps {
 //#endregion
 //#region src/renderer/LexicalDiff.d.ts
 interface LexicalDiffProps {
+  appearance?: DiffAppearance;
   blockRenderers?: Record<string, LexicalDiffBlockRenderer>;
   className?: string;
   extraNodes?: LexicalRendererProps['extraNodes'];
@@ -79,6 +83,7 @@ declare function LexicalDiff({
   oldValue,
   newValue,
   variant,
+  appearance,
   extraNodes,
   overrides,
   renderContext,
@@ -107,4 +112,4 @@ declare const rendererNodes: Array<Klass<LexicalNode>>;
 //#region src/renderer/renderers/index.d.ts
 declare function createDefaultRenderers(): RendererRegistry;
 //#endregion
-export { type HeadlessRenderContext, type HeadlessRenderableNode, LexicalDiff, type LexicalDiffBlockRenderContext, type LexicalDiffBlockRenderer, type LexicalDiffCell, type LexicalDiffProps, type LexicalDiffRow, type LexicalDiffRowKind, LexicalRenderer, type LexicalRendererContext, type LexicalRendererProps, type NodeRenderer, type RendererRegistry, createDefaultRenderers, loadLanguage, rendererNodes };
+export { type DiffAppearance, type HeadlessRenderContext, type HeadlessRenderableNode, LexicalDiff, type LexicalDiffBlockRenderContext, type LexicalDiffBlockRenderer, type LexicalDiffCell, type LexicalDiffProps, type LexicalDiffRow, type LexicalDiffRowKind, LexicalRenderer, type LexicalRendererContext, type LexicalRendererProps, type NodeRenderer, type RendererRegistry, createDefaultRenderers, loadLanguage, rendererNodes };

package/es/renderer.js

@@ -1,5 +1,5 @@
-import { E as CodeNode, L as CursorNode, M as CodeMirrorNode, O as styles$1, _ as AutoLinkNode, b as LinkNode, c as MathBlockNode, f as LinkHighlightNode, i as MentionNode, l as MathInlineNode, t as styles$2 } from "./style-Ub1LiKko.js";
-import { S as PlaceholderNode, a as styles$6, b as DiffNode, c as ImageNode, d as BlockImageNode, h as styles$7, m as HorizontalRuleNode, n as styles$5, r as styles$3, t as styles$4, v as FileNode, x as PlaceholderBlockNode } from "./style-CFkese2R.js";
+import { E as CodeNode, L as CursorNode, M as CodeMirrorNode, O as styles, _ as AutoLinkNode, b as LinkNode, c as MathBlockNode, f as LinkHighlightNode, i as MentionNode, l as MathInlineNode, t as styles$1 } from "./style-Ub1LiKko.js";
+import { S as PlaceholderNode, a as styles$5, b as DiffNode, c as ImageNode, d as BlockImageNode, h as styles$6, m as HorizontalRuleNode, n as styles$4, r as styles$2, t as styles$3, v as FileNode, x as PlaceholderBlockNode } from "./style-CFkese2R.js";
 import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
 import { $getRoot, $isElementNode, $isTextNode } from "lexical";
 import { HeadingNode, QuoteNode } from "@lexical/rich-text";
@@ -44,28 +44,28 @@ const tableHeaderFix = createStaticStyles(({ css, cssVar }) => css`
     }
   `);
 function getRendererClassName(className) {
-	return cx(styles$1.root, styles$1.variant, className);
+	return cx(styles.root, styles.variant, className);
 }
 function getListClassName(listType) {
-	return cx(listType === "number" ? "editor_listOrdered" : "editor_listUnordered", styles$3);
+	return cx(listType === "number" ? "editor_listOrdered" : "editor_listUnordered", styles$2);
 }
 function getTableWrapperClassName() {
-	return cx("editor_table_scrollable_wrapper", styles$4, tableHeaderFix);
+	return cx("editor_table_scrollable_wrapper", styles$3, tableHeaderFix);
 }
 function getMathInlineClassName() {
-	return styles$5.mathInline;
+	return styles$4.mathInline;
 }
 function getMathBlockClassName() {
-	return styles$5.mathBlock;
+	return styles$4.mathBlock;
 }
 function getImageClassName() {
-	return styles$6.image;
+	return styles$5.image;
 }
 function getBlockImageClassName() {
-	return styles$6.blockImage;
+	return styles$5.blockImage;
 }
 function getMentionClassName() {
-	return cx("editor_mention", styles$2.mention);
+	return cx("editor_mention", styles$1.mention);
 }
 function getCSSVariables(variant) {
 	const isChat = variant === "chat";
@@ -343,7 +343,7 @@ function renderCodeBlock(node, key) {
 //#region src/renderer/renderers/file.tsx
 function renderFile(node, key) {
 	const { name, fileUrl, status, message } = node;
-	const cls = styles$7.file;
+	const cls = styles$6.file;
 	if (status === "error") return /* @__PURE__ */ jsxs("span", {
 		className: cls,
 		"data-file-status": "error",
@@ -901,7 +901,7 @@ function computeLexicalDiffRows(oldState, newState) {
 }
 //#endregion
 //#region src/renderer/diff/style.ts
-const styles = createStaticStyles(({ css, cssVar }) => ({
+const base = createStaticStyles(({ css, cssVar }) => ({
 	body: css`
     display: flex;
     flex-direction: column;
@@ -917,13 +917,22 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       min-width: 0;
     }
   `,
-	cellOld: css``,
 	deleteCell: css`
     background: color-mix(in srgb, ${cssVar.colorError} 10%, transparent);
   `,
 	emptyCell: css`
     background: ${cssVar.colorFillQuaternary};
   `,
+	insertCell: css`
+    background: color-mix(in srgb, ${cssVar.colorSuccess} 10%, transparent);
+  `,
+	row: css`
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  `
+}));
+const defaultOverrides = createStaticStyles(({ css, cssVar }) => ({
+	cellOld: css``,
 	header: css`
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
@@ -942,9 +951,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
   `,
 	headerOld: css`
     border-inline-end: 1px solid ${cssVar.colorBorderSecondary};
-  `,
-	insertCell: css`
-    background: color-mix(in srgb, ${cssVar.colorSuccess} 10%, transparent);
   `,
 	root: css`
     overflow: hidden;
@@ -955,12 +961,50 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     font-size: 14px;
 
     background: ${cssVar.colorBgContainer};
+  `
+}));
+const borderlessOverrides = createStaticStyles(({ css, cssVar }) => ({
+	body: css`
+    & > *:nth-child(odd) {
+      background: ${cssVar.colorFillQuaternary};
+    }
   `,
-	row: css`
+	cellOld: css``,
+	header: css`
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    column-gap: 12px;
+  `,
+	headerCell: css`
+    padding-block: 8px;
+    padding-inline: 16px;
+
+    font-size: 12px;
+    font-weight: 600;
+    color: ${cssVar.colorTextSecondary};
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  `,
+	headerOld: css``,
+	root: css`
+    overflow: hidden;
+    font-size: 14px;
+    background: ${cssVar.colorBgContainer};
+  `,
+	row: css`
+    column-gap: 12px;
   `
 }));
+function merge(baseSet, overrides) {
+	const result = {};
+	const allKeys = new Set([...Object.keys(baseSet), ...Object.keys(overrides)]);
+	for (const key of allKeys) result[key] = cx(baseSet[key], overrides[key]);
+	return result;
+}
+const diffStyles = {
+	borderless: merge(base, borderlessOverrides),
+	default: merge(base, defaultOverrides)
+};
 //#endregion
 //#region src/renderer/LexicalDiff.tsx
 function wrapBlock(block) {
@@ -979,7 +1023,8 @@ function RowCell({ className, content }) {
 		children: content
 	});
 }
-function LexicalDiff({ oldValue, newValue, variant = "default", extraNodes, overrides, renderContext, labels, blockRenderers, renderBlockDiff, className, style }) {
+function LexicalDiff({ oldValue, newValue, variant = "default", appearance = "default", extraNodes, overrides, renderContext, labels, blockRenderers, renderBlockDiff, className, style }) {
+	const styles = diffStyles[appearance];
 	const rows = useMemo(() => computeLexicalDiffRows(oldValue, newValue), [oldValue, newValue]);
 	const renderDefaultCell = (block) => {
 		if (!block) return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "4.7.0",
+  "version": "4.8.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",