@lobehub/editor 4.15.1 → 4.16.0

package/es/plugins/list/react/ReactListPlugin.js

@@ -0,0 +1,21 @@
+"use client";
+import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context.js";
+import { MarkdownPlugin } from "../../markdown/plugin/index.js";
+import { ListPlugin } from "../plugin/index.js";
+import { styles } from "./style.js";
+import { useLayoutEffect } from "react";
+//#region src/plugins/list/react/ReactListPlugin.tsx
+const ReactListPlugin = ({ enableHotkey = true }) => {
+	const [editor] = useLexicalComposerContext();
+	useLayoutEffect(() => {
+		editor.registerPlugin(MarkdownPlugin);
+		editor.registerPlugin(ListPlugin, {
+			enableHotkey,
+			theme: styles
+		});
+	}, [enableHotkey, styles]);
+	return null;
+};
+ReactListPlugin.displayName = "ReactListPlugin";
+//#endregion
+export { ReactListPlugin as default };

package/es/plugins/list/react/index.d.ts

@@ -0,0 +1,2 @@
+import { ReactListPluginProps } from "./type.js";
+import { ReactListPlugin } from "./ReactListPlugin.js";

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

@@ -0,0 +1,123 @@
+import { createStaticStyles } from "antd-style";
+//#region src/plugins/list/react/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => css`
+    .editor_listUnordered&,
+    .editor_listOrdered& {
+      margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);
+      margin-inline-start: 1em;
+      padding-inline-start: 0;
+      list-style-position: outside;
+
+      > .editor_listUnordered,
+      > ol {
+        margin-block: 0;
+      }
+
+      > .editor_listItem {
+        margin-inline-start: 1em;
+      }
+    }
+
+    .editor_listOrdered& {
+      list-style: auto;
+    }
+
+    .editor_listUnordered& {
+      list-style-type: none;
+
+      > .editor_listItem:not(:has(ul)):not([role='checkbox']) {
+        &::before {
+          content: '-';
+          display: inline-block;
+          margin-inline: -1em 0.5em;
+          opacity: 0.5;
+        }
+      }
+    }
+
+    .editor_listItem {
+      margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.33em);
+      font-family: var(--listitem-marker-font-family);
+      font-size: var(--listitem-marker-font-size);
+      background-color: var(--listitem-marker-background-color);
+
+      &::marker {
+        font-family: var(--listitem-marker-font-family);
+        font-size: var(--listitem-marker-font-size);
+        color: var(--listitem-marker-color);
+        background-color: var(--listitem-marker-background-color);
+      }
+
+      p {
+        display: inline;
+      }
+
+      .editor_listUnordered,
+      .editor_listOrdered {
+        margin: 0;
+      }
+    }
+
+    [role='checkbox'] {
+      position: relative;
+    }
+
+    .editor_listItemChecked::before,
+    .editor_listItemUnchecked::before {
+      border: 1px solid ${cssVar.colorBorder};
+      border-radius: 4px;
+    }
+
+    .editor_listItemChecked::before {
+      background: ${cssVar.colorPrimary};
+    }
+
+    .editor_listItemChecked:not(:has(ul))::after {
+      cursor: pointer;
+      content: '';
+
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 0.2em;
+      transform: rotate(45deg) scale(1) translate(-50%, -50%);
+
+      display: block;
+
+      width: 0.3em;
+      height: 0.6em;
+      margin-inline: -1.35em 0.5em;
+      border: 2px solid ${cssVar.colorTextLightSolid};
+      border-block-start: 0;
+      border-inline-start: 0;
+
+      background-size: cover;
+
+      transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+    }
+
+    .editor_listItemUnchecked:not(:has(ul))::before,
+    .editor_listItemChecked:not(:has(ul))::before {
+      cursor: pointer;
+      content: '';
+
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 0;
+      transform: translateY(-50%);
+
+      display: inline-block;
+      display: block;
+
+      width: 1em;
+      height: 1em;
+      margin-inline: -1.4em 0.5em;
+
+      background-size: cover;
+    }
+
+    .editor_listItemNested {
+      list-style-type: none;
+    }
+  `);
+//#endregion
+export { styles };

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

@@ -0,0 +1,7 @@
+//#region src/plugins/list/react/type.d.ts
+interface ReactListPluginProps {
+  className?: string;
+  enableHotkey?: boolean;
+}
+//#endregion
+export { ReactListPluginProps };

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

@@ -0,0 +1,58 @@
+import { $createRangeSelection, $isBlockElementNode, $normalizeSelection__EXPERIMENTAL } from "lexical";
+import { $filter, $getNearestBlockElementAncestorOrThrow } from "@lexical/utils";
+import { $createListItemNode, $createListNode, $isListNode } from "@lexical/list";
+//#region src/plugins/list/utils/index.ts
+const LIST_INDENT_SIZE = 4;
+function getIndent(whitespaces) {
+	const tabs = whitespaces.match(/\t/g);
+	const spaces = whitespaces.match(/ /g);
+	let indent = 0;
+	if (tabs) indent += tabs.length;
+	if (spaces) indent += Math.floor(spaces.length / LIST_INDENT_SIZE);
+	return indent;
+}
+const listReplace = (listType) => {
+	return (parentNode, children, match, isImport) => {
+		const previousNode = parentNode.getPreviousSibling();
+		const nextNode = parentNode.getNextSibling();
+		const listItem = $createListItemNode(listType === "check" ? match[3] === "x" : void 0);
+		if ($isListNode(nextNode) && nextNode.getListType() === listType) {
+			const firstChild = nextNode.getFirstChild();
+			if (firstChild !== null) firstChild.insertBefore(listItem);
+			else nextNode.append(listItem);
+			parentNode.remove();
+		} else if ($isListNode(previousNode) && previousNode.getListType() === listType) {
+			previousNode.append(listItem);
+			parentNode.remove();
+		} else {
+			const list = $createListNode(listType, listType === "number" ? Number(match[2]) : void 0);
+			list.append(listItem);
+			parentNode.replace(list);
+		}
+		listItem.append(...children);
+		if (!isImport) listItem.select(0, 0);
+		const indent = getIndent(match[1]);
+		if (indent) listItem.setIndent(indent);
+	};
+};
+function $indentOverTab(selection) {
+	if ($filter(selection.getNodes(), (node) => {
+		if ($isBlockElementNode(node) && node.canIndent()) return node;
+		return null;
+	}).length > 0) return true;
+	const anchor = selection.anchor;
+	const focus = selection.focus;
+	const first = focus.isBefore(anchor) ? focus : anchor;
+	const firstBlock = $getNearestBlockElementAncestorOrThrow(first.getNode());
+	if (firstBlock.canIndent()) {
+		const firstBlockKey = firstBlock.getKey();
+		let selectionAtStart = $createRangeSelection();
+		selectionAtStart.anchor.set(firstBlockKey, 0, "element");
+		selectionAtStart.focus.set(firstBlockKey, 0, "element");
+		selectionAtStart = $normalizeSelection__EXPERIMENTAL(selectionAtStart);
+		if (selectionAtStart.anchor.is(first)) return true;
+	}
+	return false;
+}
+//#endregion
+export { $indentOverTab, listReplace };

package/es/plugins/litexml/command/diffCommand.d.ts

@@ -0,0 +1,17 @@
+import * as _$lexical from "lexical";
+import { LexicalEditor } from "lexical";
+
+//#region src/plugins/litexml/command/diffCommand.d.ts
+declare enum DiffAction {
+  Reject = 0,
+  Accept = 1
+}
+declare const LITEXML_DIFFNODE_COMMAND: _$lexical.LexicalCommand<{
+  action: DiffAction;
+  nodeKey: string;
+}>;
+declare const LITEXML_DIFFNODE_ALL_COMMAND: _$lexical.LexicalCommand<{
+  action: DiffAction;
+}>;
+//#endregion
+export { DiffAction, LITEXML_DIFFNODE_ALL_COMMAND, LITEXML_DIFFNODE_COMMAND };

package/es/plugins/litexml/command/diffCommand.js

@@ -0,0 +1,97 @@
+import { DiffNode } from "../node/DiffNode.js";
+import { $getNodeByKey, $isElementNode, COMMAND_PRIORITY_EDITOR, createCommand } from "lexical";
+import { mergeRegister } from "@lexical/utils";
+//#region src/plugins/litexml/command/diffCommand.ts
+let DiffAction = /* @__PURE__ */ function(DiffAction) {
+	DiffAction[DiffAction["Reject"] = 0] = "Reject";
+	DiffAction[DiffAction["Accept"] = 1] = "Accept";
+	return DiffAction;
+}({});
+const LITEXML_DIFFNODE_COMMAND = createCommand("LITEXML_DIFFNODE_COMMAND");
+const LITEXML_DIFFNODE_ALL_COMMAND = createCommand("LITEXML_DIFFNODE_ALL_COMMAND");
+function doAction(node, action) {
+	if (node.diffType === "modify") {
+		const children = node.getChildren();
+		if (action === 1) node.replace(children[1], false).selectEnd();
+		else if (action === 0) node.replace(children[0], false).selectEnd();
+	}
+	if (node.diffType === "remove") {
+		if (action === 1) node.remove();
+		else if (action === 0) {
+			const children = node.getChildren();
+			node.replace(children[0], false).selectEnd();
+		}
+	}
+	if (node.diffType === "add") {
+		if (action === 1) {
+			const children = node.getChildren();
+			node.replace(children[0], false).selectEnd();
+		} else if (action === 0) node.remove();
+	}
+	if (node.diffType === "listItemModify") {
+		const children = node.getChildren();
+		if (action === 1) {
+			const lastChild = children[1];
+			if (!$isElementNode(lastChild)) throw new Error("Expected element node as child of DiffNode");
+			const nodeChildrens = lastChild.getChildren();
+			for (let i = nodeChildrens.length - 1; i >= 0; i--) node.insertAfter(nodeChildrens[i]);
+			const parent = node.getParentOrThrow();
+			node.remove();
+			parent.selectEnd();
+		} else if (action === 0) {
+			const firstChild = children[0];
+			if (!$isElementNode(firstChild)) throw new Error("Expected element node as child of DiffNode");
+			const nodeChildrens = firstChild.getChildren();
+			for (let i = nodeChildrens.length - 1; i >= 0; i--) node.insertAfter(nodeChildrens[i]);
+			const parent = node.getParentOrThrow();
+			node.remove();
+			parent.selectEnd();
+		}
+	}
+	if (node.diffType === "listItemRemove") {
+		if (action === 1) node.getParentOrThrow().remove();
+		else if (action === 0) {
+			node.getChildren().forEach((child) => {
+				node.getParentOrThrow().append(child);
+			});
+			node.getParentOrThrow().selectEnd();
+			node.remove();
+		}
+	}
+	if (node.diffType === "listItemAdd") {
+		if (action === 1) {
+			node.getChildren().forEach((child) => {
+				node.getParentOrThrow().append(child);
+			});
+			node.getParentOrThrow().selectEnd();
+			node.remove();
+		} else if (action === 0) node.remove();
+	}
+}
+function registerLiteXMLDiffCommand(editor) {
+	return mergeRegister(editor.registerCommand(LITEXML_DIFFNODE_COMMAND, (payload) => {
+		const { action, nodeKey } = payload;
+		const node = editor.getEditorState().read(() => {
+			return $getNodeByKey(nodeKey);
+		});
+		if (!node) return false;
+		editor.update(() => {
+			doAction(node, action);
+		});
+		return false;
+	}, COMMAND_PRIORITY_EDITOR), editor.registerCommand(LITEXML_DIFFNODE_ALL_COMMAND, (payload) => {
+		const { action } = payload;
+		const nodes = editor.getEditorState().read(() => {
+			return Array.from(editor._editorState._nodeMap.values()).filter((n) => n instanceof DiffNode && !!n.getParent());
+		});
+		if (!nodes.length) return false;
+		editor.update(() => {
+			nodes.forEach((node) => {
+				doAction(node, action);
+			});
+		});
+		return false;
+	}, COMMAND_PRIORITY_EDITOR));
+}
+//#endregion
+export { DiffAction, LITEXML_DIFFNODE_ALL_COMMAND, LITEXML_DIFFNODE_COMMAND, registerLiteXMLDiffCommand };

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

@@ -0,0 +1,38 @@
+import * as _$lexical from "lexical";
+import { LexicalEditor } from "lexical";
+
+//#region src/plugins/litexml/command/index.d.ts
+declare const LITEXML_MODIFY_COMMAND: _$lexical.LexicalCommand<({
+  action: "insert";
+  beforeId: string;
+  litexml: string;
+} | {
+  action: "insert";
+  afterId: string;
+  litexml: string;
+} | {
+  action: "remove";
+  id: string;
+} | {
+  action: "modify";
+  litexml: string | string[];
+})[]>;
+declare const LITEXML_APPLY_COMMAND: _$lexical.LexicalCommand<{
+  delay?: boolean;
+  litexml: string | string[];
+}>;
+declare const LITEXML_REMOVE_COMMAND: _$lexical.LexicalCommand<{
+  delay?: boolean;
+  id: string;
+}>;
+declare const LITEXML_INSERT_COMMAND: _$lexical.LexicalCommand<{
+  beforeId: string;
+  delay?: boolean;
+  litexml: string;
+} | {
+  afterId: string;
+  delay?: boolean;
+  litexml: string;
+}>;
+//#endregion
+export { LITEXML_APPLY_COMMAND, LITEXML_INSERT_COMMAND, LITEXML_MODIFY_COMMAND, LITEXML_REMOVE_COMMAND };