@lobehub/editor 4.15.1 → 4.16.0

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

@@ -0,0 +1,206 @@
+import { createStaticStyles, cx, keyframes } from "antd-style";
+//#region src/plugins/common/react/style.ts
+const cursorBlink = keyframes`
+  to {
+    visibility: hidden;
+  }
+`;
+const themeStyles = createStaticStyles(({ css, cssVar }) => ({
+	quote: "editor_quote",
+	textBold_false: css`
+    font-weight: unset;
+  `,
+	textBold_true: css`
+    font-weight: bold;
+  `,
+	textCode: "editor_code",
+	textItalic_false: css`
+    font-style: unset;
+  `,
+	textItalic_true: css`
+    font-style: italic;
+  `,
+	textStrikethrough_false: css`
+    text-decoration: unset;
+  `,
+	textStrikethrough_true: css`
+    color: ${cssVar.colorTextDescription};
+    text-decoration: line-through;
+  `,
+	textUnderlineStrikethrough_false: css`
+    text-decoration: unset;
+  `,
+	textUnderlineStrikethrough_true: css`
+    text-decoration: underline line-through;
+  `,
+	textUnderline_false: css`
+    text-decoration: unset;
+  `,
+	textUnderline_true: css`
+    text-decoration: underline;
+  `
+}));
+const styles = createStaticStyles(({ css, cssVar }) => {
+	const __root = css`
+    --lobe-markdown-font-size: var(--common-font-size, 16px);
+    --lobe-markdown-header-multiple: var(--common-header-multiple, 1);
+    --lobe-markdown-margin-multiple: var(--common-margin-multiple, 2);
+    --lobe-markdown-line-height: var(--common-line-height, 1.6);
+    --lobe-markdown-border-radius: ${cssVar.borderRadiusLG};
+    --lobe-markdown-border-color: ${cssVar.colorFillQuaternary};
+
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+
+    font-size: var(--lobe-markdown-font-size);
+    line-height: var(--lobe-markdown-line-height);
+    word-break: break-word;
+
+    [data-placeholder] {
+      position: relative;
+    }
+
+    [data-placeholder]::after {
+      pointer-events: none;
+      content: attr(data-placeholder);
+      user-select: none;
+
+      position: absolute;
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+
+      padding-inline-start: 2px;
+
+      color: ${cssVar.colorTextDescription};
+      white-space: nowrap;
+    }
+
+    [data-lexical-cursor='true'] {
+      pointer-events: none;
+      position: absolute;
+      display: block;
+
+      &::after {
+        content: '';
+
+        position: absolute;
+        inset-block-start: -2px;
+
+        display: block;
+
+        width: 20px;
+        border-block-start: 1px solid ${cssVar.colorText};
+
+        animation: ${cursorBlink} 1.1s steps(2, start) infinite;
+      }
+    }
+  `;
+	const header = css`
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin-block: max(
+        calc(var(--lobe-markdown-header-multiple) * var(--lobe-markdown-margin-multiple) * 0.4em),
+        var(--lobe-markdown-font-size)
+      );
+      font-weight: bold;
+      line-height: 1.25;
+    }
+
+    h1 {
+      font-size: calc(
+        var(--lobe-markdown-font-size) * (1 + 1.5 * var(--lobe-markdown-header-multiple))
+      );
+    }
+
+    h2 {
+      font-size: calc(var(--lobe-markdown-font-size) * (1 + var(--lobe-markdown-header-multiple)));
+    }
+
+    h3 {
+      font-size: calc(
+        var(--lobe-markdown-font-size) * (1 + 0.5 * var(--lobe-markdown-header-multiple))
+      );
+    }
+
+    h4 {
+      font-size: calc(
+        var(--lobe-markdown-font-size) * (1 + 0.25 * var(--lobe-markdown-header-multiple))
+      );
+    }
+
+    h5,
+    h6 {
+      font-size: calc(var(--lobe-markdown-font-size) * 1);
+    }
+  `;
+	const p = css`
+    p {
+      margin-block: 4px;
+      line-height: var(--lobe-markdown-line-height);
+      letter-spacing: 0.02em;
+
+      &:not(:first-child) {
+        margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 0.5em);
+      }
+
+      &:not(:last-child) {
+        margin-block-end: calc(var(--lobe-markdown-margin-multiple) * 0.5em);
+      }
+    }
+  `;
+	const blockquote = css`
+    .editor_quote {
+      margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);
+      margin-inline: 0;
+      padding-block: 0;
+      padding-inline: 1em;
+      border-inline-start: solid 4px ${cssVar.colorBorder};
+
+      color: ${cssVar.colorTextSecondary};
+    }
+  `;
+	const code = css`
+    .editor_code {
+      display: inline;
+
+      margin-inline: 0.25em;
+      padding-block: 0.2em;
+      padding-inline: 0.4em;
+      border: 1px solid var(--lobe-markdown-border-color);
+      border-radius: 0.25em;
+
+      font-family: ${cssVar.fontFamilyCode};
+      font-size: 0.875em;
+      line-height: 1;
+      word-break: break-word;
+      white-space: break-spaces;
+
+      background: ${cssVar.colorFillSecondary};
+    }
+  `;
+	return {
+		blockquote,
+		code,
+		editorContent: css`
+    flex: 1;
+    min-height: 0;
+    outline: none;
+  `,
+		header,
+		p,
+		root: __root,
+		variant: cx(header, p, blockquote, code)
+	};
+});
+//#endregion
+export { styles, themeStyles };

package/es/plugins/common/react/type.d.ts

@@ -0,0 +1,94 @@
+import { IEditor } from "../../../types/kernel.js";
+import { CommonPluginOptions } from "../plugin/index.js";
+import { CSSProperties, CompositionEvent, FocusEvent, MouseEvent, ReactElement, ReactNode } from "react";
+
+//#region src/plugins/common/react/type.d.ts
+interface ReactEditorContentProps {
+  content: any;
+  lineEmptyPlaceholder?: string;
+  placeholder?: ReactNode;
+  type: string;
+}
+interface ReactPlainTextProps {
+  autoFocus?: boolean;
+  /**
+   * Automatically convert pasted markdown once the detection threshold is reached
+   * @default true
+   */
+  autoFormatMarkdown?: boolean;
+  children: ReactElement<ReactEditorContentProps>;
+  className?: string;
+  editable?: boolean;
+  enableHotkey?: boolean;
+  /**
+   * Enable automatic markdown conversion for pasted content
+   * @default true
+   */
+  enablePasteMarkdown?: boolean;
+  /**
+   * Enable/disable markdown shortcuts
+   * @default true - all formats enabled
+   */
+  markdownOption?: CommonPluginOptions['markdownOption'];
+  onBlur?: (props: {
+    editor: IEditor;
+    event: FocusEvent<HTMLDivElement>;
+  }) => void;
+  onChange?: (editor: IEditor) => void;
+  onCompositionEnd?: (props: {
+    editor: IEditor;
+    event: CompositionEvent<HTMLDivElement>;
+  }) => void;
+  onCompositionStart?: (props: {
+    editor: IEditor;
+    event: CompositionEvent<HTMLDivElement>;
+  }) => void;
+  onContextMenu?: (props: {
+    editor: IEditor;
+    event: MouseEvent<HTMLDivElement>;
+  }) => void;
+  onFocus?: (props: {
+    editor: IEditor;
+    event: FocusEvent<HTMLDivElement>;
+  }) => void;
+  onKeyDown?: (props: {
+    editor: IEditor;
+    event: KeyboardEvent;
+  }) => boolean | void;
+  onPressEnter?: (props: {
+    editor: IEditor;
+    event: KeyboardEvent;
+  }) => boolean | void;
+  /**
+   * Callback triggered only when text content changes
+   * Unlike onChange, this won't trigger on cursor movement or selection changes
+   */
+  onTextChange?: (editor: IEditor) => void;
+  /**
+   * Force paste as plain text, stripping all rich text formatting
+   * @default false
+   */
+  pasteAsPlainText?: boolean;
+  /**
+   * Minimum markdown score required before auto conversion runs
+   * @default 5
+   */
+  pasteMarkdownAutoConvertThreshold?: number;
+  /**
+   * When pasting VS Code content (detected via vscode-editor-data clipboard type),
+   * create a code block with the language from VS Code instead of pasting as plain text.
+   * This option only takes effect when pasteAsPlainText is enabled.
+   * @default true
+   */
+  pasteVSCodeAsCodeBlock?: boolean;
+  style?: CSSProperties;
+  theme?: CommonPluginOptions['theme'] & {
+    fontSize?: number;
+    headerMultiple?: number;
+    lineHeight?: number;
+    marginMultiple?: number;
+  };
+  variant?: 'default' | 'chat';
+}
+//#endregion
+export { ReactEditorContentProps, ReactPlainTextProps };

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

@@ -0,0 +1,135 @@
+import { __esmMin } from "../../../_virtual/_rolldown/runtime.js";
+import { INodeHelper, init_helper } from "../../../editor-kernel/inode/helper.js";
+import { $isTableCellNode, $isTableNode } from "@lexical/table";
+import { $getRoot, $isDecoratorNode, $isElementNode, $isParagraphNode, $isRangeSelection, $isTextNode } from "lexical";
+import { $isQuoteNode } from "@lexical/rich-text";
+//#region src/plugins/common/utils/index.ts
+/**
+* Returns the root's text content.
+* @returns The root's text content.
+*/
+function $rootTextContent() {
+	return $getRoot().getTextContent();
+}
+/**
+* Determines if the root has any text content and can trim any whitespace if it does.
+* @param isEditorComposing - Is the editor in composition mode due to an active Input Method Editor?
+* @param trim - Should the root text have its whitespaced trimmed? Defaults to true.
+* @returns true if text content is empty, false if there is text or isEditorComposing is true.
+*/
+function $isRootTextContentEmpty(isEditorComposing, trim = true) {
+	if (isEditorComposing) return false;
+	let text = $rootTextContent();
+	if (trim) text = text.trim();
+	return text === "";
+}
+/**
+* Determines if the input should show the placeholder. If anything is in
+* in the root the placeholder should not be shown.
+* @param isComposing - Is the editor in composition mode due to an active Input Method Editor?
+* @returns true if the input should show the placeholder, false otherwise.
+*/
+function $canShowPlaceholder(isComposing) {
+	if (!$isRootTextContentEmpty(isComposing, false)) return false;
+	const children = $getRoot().getChildren();
+	const childrenLength = children.length;
+	if (childrenLength > 1) return false;
+	for (let i = 0; i < childrenLength; i++) {
+		const topBlock = children[i];
+		if ($isDecoratorNode(topBlock)) return false;
+		if ($isElementNode(topBlock)) {
+			if (!$isParagraphNode(topBlock)) return false;
+			if (topBlock.__indent !== 0) return false;
+			const topBlockChildren = topBlock.getChildren();
+			const topBlockChildrenLength = topBlockChildren.length;
+			for (let s = 0; s < topBlockChildrenLength; s++) {
+				const child = topBlockChildren[i];
+				if (!$isTextNode(child)) return false;
+			}
+		}
+	}
+	return true;
+}
+/**
+* Returns a function that executes {@link $canShowPlaceholder}
+* @param isEditorComposing - Is the editor in composition mode due to an active Input Method Editor?
+* @returns A function that executes $canShowPlaceholder with arguments.
+*/
+function $canShowPlaceholderCurry(isEditorComposing) {
+	return () => $canShowPlaceholder(isEditorComposing);
+}
+function $isCursorInTable(selection) {
+	if (!$isRangeSelection(selection)) return {
+		inCell: false,
+		inTable: false
+	};
+	let currentNode = selection.focus.getNode();
+	let inTable = false;
+	let inCell = false;
+	while (currentNode) {
+		if ($isTableCellNode(currentNode)) {
+			inCell = true;
+			inTable = true;
+			break;
+		}
+		if ($isTableNode(currentNode)) {
+			inTable = true;
+			break;
+		}
+		const parent = currentNode.getParent();
+		if (!parent) break;
+		currentNode = parent;
+	}
+	return {
+		inCell,
+		inTable
+	};
+}
+function $isCursorInQuote(selection) {
+	if (!$isRangeSelection(selection)) return false;
+	let currentNode = selection.focus.getNode();
+	while (currentNode) {
+		if ($isQuoteNode(currentNode)) return true;
+		const parent = currentNode.getParent();
+		if (!parent) break;
+		currentNode = parent;
+	}
+	return false;
+}
+function exportNodeToJSON(node) {
+	const serializedNode = node.exportJSON();
+	const nodeClass = node.constructor;
+	serializedNode.id = node.getKey();
+	if (serializedNode.type !== nodeClass.getType()) throw new Error(`LexicalNode: Node ${nodeClass.name} does not match the serialized type. Check if .exportJSON() is implemented and it is returning the correct type.`);
+	if ($isElementNode(node)) {
+		const serializedChildren = serializedNode.children;
+		if (!Array.isArray(serializedChildren)) throw new Error(`LexicalNode: Node ${nodeClass.name} is an element but .exportJSON() does not have a children array.`);
+		const children = node.getChildren();
+		for (const child of children) {
+			const serializedChildNode = exportNodeToJSON(child);
+			serializedChildren.push(serializedChildNode);
+		}
+	}
+	return serializedNode;
+}
+var sampleReader, createBlockNode;
+var init_utils = __esmMin((() => {
+	init_helper();
+	sampleReader = (format, xmlElement, children) => {
+		children.forEach((child) => {
+			if (INodeHelper.isTextNode(child)) child.format = (child.format || 0) | format;
+		});
+		return children;
+	};
+	createBlockNode = (createNode) => {
+		return (parentNode, children, match, isImport) => {
+			const node = createNode(match, parentNode);
+			node.append(...children);
+			parentNode.replace(node);
+			if (!isImport) node.select(0, 0);
+		};
+	};
+}));
+//#endregion
+init_utils();
+export { $canShowPlaceholderCurry, $isCursorInQuote, $isCursorInTable, $isRootTextContentEmpty, createBlockNode, exportNodeToJSON, init_utils, sampleReader };

package/es/plugins/content-blocks/data-source/content-blocks-data-source.d.ts

@@ -0,0 +1,15 @@
+import { DataSource } from "../../../editor-kernel/data-source.js";
+import { IMarkdownShortCutService } from "../../markdown/service/shortcut.js";
+import { ContentBlock, ExtractContentBlocksOptions } from "../types.js";
+import { LexicalEditor } from "lexical";
+
+//#region src/plugins/content-blocks/data-source/content-blocks-data-source.d.ts
+declare class ContentBlocksDataSource extends DataSource {
+  private getMarkdownService;
+  private defaultOptions;
+  constructor(getMarkdownService: () => IMarkdownShortCutService | null, defaultOptions?: ExtractContentBlocksOptions);
+  read(): void;
+  write(editor: LexicalEditor): ContentBlock[];
+}
+//#endregion
+export { ContentBlocksDataSource };

package/es/plugins/content-blocks/data-source/content-blocks-data-source.js

@@ -0,0 +1,21 @@
+import DataSource from "../../../editor-kernel/data-source.js";
+import { CONTENT_BLOCKS_DATA_TYPE } from "../types.js";
+import { extractContentBlocks } from "../utils/extract.js";
+//#region src/plugins/content-blocks/data-source/content-blocks-data-source.ts
+var ContentBlocksDataSource = class extends DataSource {
+	constructor(getMarkdownService, defaultOptions = {}) {
+		super(CONTENT_BLOCKS_DATA_TYPE);
+		this.getMarkdownService = getMarkdownService;
+		this.defaultOptions = defaultOptions;
+	}
+	read() {
+		throw new Error("'content-blocks' data source is write-only (editor → blocks).");
+	}
+	write(editor) {
+		const service = this.getMarkdownService();
+		if (!service) throw new Error("ContentBlocksPlugin requires MarkdownPlugin to be registered first; markdown writer service is missing.");
+		return extractContentBlocks(editor, service, this.defaultOptions);
+	}
+};
+//#endregion
+export { ContentBlocksDataSource };

package/es/plugins/content-blocks/index.d.ts

@@ -0,0 +1,6 @@
+import { FileListItem, ImageListItem, MediaLists } from "../../headless/extract-media-from-editor-state.js";
+import { CONTENT_BLOCKS_DATA_TYPE, ContentBlock, ExtractContentBlocksOptions, FileContentBlock, ImageContentBlock, TextContentBlock } from "./types.js";
+import { ContentBlocksDataSource } from "./data-source/content-blocks-data-source.js";
+import { ContentBlocksPlugin, ContentBlocksPluginOptions } from "./plugin/index.js";
+import { extractContentBlocks } from "./utils/extract.js";
+import { extractMediaLists } from "./utils/extract-media-lists.js";

package/es/plugins/content-blocks/plugin/index.d.ts

@@ -0,0 +1,10 @@
+import { IEditorPluginConstructor } from "../../../types/kernel.js";
+import { ExtractContentBlocksOptions } from "../types.js";
+
+//#region src/plugins/content-blocks/plugin/index.d.ts
+interface ContentBlocksPluginOptions {
+  defaultOptions?: ExtractContentBlocksOptions;
+}
+declare const ContentBlocksPlugin: IEditorPluginConstructor<ContentBlocksPluginOptions>;
+//#endregion
+export { ContentBlocksPlugin, ContentBlocksPluginOptions };

package/es/plugins/content-blocks/plugin/index.js

@@ -0,0 +1,24 @@
+import { createDebugLogger, init_debug } from "../../../utils/debug.js";
+import { KernelPlugin, init_plugin } from "../../../editor-kernel/plugin.js";
+import { IMarkdownShortCutService } from "../../markdown/service/shortcut.js";
+import { ContentBlocksDataSource } from "../data-source/content-blocks-data-source.js";
+//#region src/plugins/content-blocks/plugin/index.ts
+init_plugin();
+init_debug();
+const ContentBlocksPlugin = class extends KernelPlugin {
+	static {
+		this.pluginName = "ContentBlocksPlugin";
+	}
+	constructor(kernel, config) {
+		super();
+		this.kernel = kernel;
+		this.config = config;
+		this.logger = createDebugLogger("plugin", "content-blocks");
+		kernel.registerDataSource(new ContentBlocksDataSource(() => kernel.requireService(IMarkdownShortCutService), config?.defaultOptions));
+	}
+	onInit() {
+		if (!this.kernel.requireService(IMarkdownShortCutService)) this.logger.warn("MarkdownPlugin is not registered; content-blocks extraction will throw on demand.");
+	}
+};
+//#endregion
+export { ContentBlocksPlugin };

package/es/plugins/content-blocks/types.d.ts

@@ -0,0 +1,33 @@
+import { FileListItem, ImageListItem, MediaLists } from "../../headless/extract-media-from-editor-state.js";
+
+//#region src/plugins/content-blocks/types.d.ts
+interface TextContentBlock {
+  text: string;
+  type: 'text';
+}
+interface ImageContentBlock {
+  alt: string;
+  height?: number;
+  type: 'image';
+  url: string;
+  width?: number;
+}
+interface FileContentBlock {
+  name: string;
+  size?: number;
+  type: 'file';
+  url: string;
+}
+type ContentBlock = TextContentBlock | ImageContentBlock | FileContentBlock;
+interface ExtractContentBlocksOptions {
+  /**
+   * When an image/file is in `loading` / `pending` / `error` state and thus has no
+   * usable URL, emit a textual placeholder into the surrounding text block instead
+   * of dropping the node silently.
+   * @default true
+   */
+  emitPlaceholderForUnuploaded?: boolean;
+}
+declare const CONTENT_BLOCKS_DATA_TYPE = "content-blocks";
+//#endregion
+export { CONTENT_BLOCKS_DATA_TYPE, ContentBlock, ExtractContentBlocksOptions, FileContentBlock, ImageContentBlock, TextContentBlock };

package/es/plugins/content-blocks/types.js

@@ -0,0 +1,4 @@
+//#region src/plugins/content-blocks/types.ts
+const CONTENT_BLOCKS_DATA_TYPE = "content-blocks";
+//#endregion
+export { CONTENT_BLOCKS_DATA_TYPE };

package/es/plugins/content-blocks/utils/extract-media-lists.d.ts

@@ -0,0 +1,7 @@
+import { MediaLists } from "../../../headless/extract-media-from-editor-state.js";
+import { ContentBlock } from "../types.js";
+
+//#region src/plugins/content-blocks/utils/extract-media-lists.d.ts
+declare const extractMediaLists: (blocks: ContentBlock[]) => MediaLists;
+//#endregion
+export { extractMediaLists };

package/es/plugins/content-blocks/utils/extract-media-lists.js

@@ -0,0 +1,32 @@
+//#region src/plugins/content-blocks/utils/extract-media-lists.ts
+const generateId = () => {
+	if (typeof globalThis.crypto?.randomUUID === "function") return globalThis.crypto.randomUUID();
+	return `id-${Math.random().toString(36).slice(2)}-${Date.now().toString(36)}`;
+};
+const inferFileType = (name) => {
+	const dotIndex = name.lastIndexOf(".");
+	if (dotIndex < 0 || dotIndex === name.length - 1) return "unknown";
+	return name.slice(dotIndex + 1).toLowerCase() || "unknown";
+};
+const extractMediaLists = (blocks) => {
+	const imageList = [];
+	const fileList = [];
+	for (const block of blocks) if (block.type === "image") imageList.push({
+		alt: block.alt,
+		id: generateId(),
+		url: block.url
+	});
+	else if (block.type === "file") fileList.push({
+		fileType: inferFileType(block.name),
+		id: generateId(),
+		name: block.name,
+		size: typeof block.size === "number" ? block.size : 0,
+		url: block.url
+	});
+	return {
+		fileList,
+		imageList
+	};
+};
+//#endregion
+export { extractMediaLists };

package/es/plugins/content-blocks/utils/extract.d.ts

@@ -0,0 +1,8 @@
+import { IMarkdownShortCutService } from "../../markdown/service/shortcut.js";
+import { ContentBlock, ExtractContentBlocksOptions } from "../types.js";
+import { LexicalEditor } from "lexical";
+
+//#region src/plugins/content-blocks/utils/extract.d.ts
+declare const extractContentBlocks: (editor: LexicalEditor, service: IMarkdownShortCutService, options?: ExtractContentBlocksOptions) => ContentBlock[];
+//#endregion
+export { extractContentBlocks };