@lexical/mark 0.44.1-nightly.20260519.0 → 0.45.1-dev.0

package/package.json

@@ -8,35 +8,49 @@
     "mark"
   ],
   "license": "MIT",
-  "version": "0.44.1-nightly.20260519.0",
-  "main": "LexicalMark.js",
-  "types": "index.d.ts",
+  "version": "0.45.1-dev.0",
+  "main": "./dist/LexicalMark.js",
+  "types": "./dist/index.d.ts",
   "dependencies": {
-    "@lexical/utils": "0.44.1-nightly.20260519.0",
-    "lexical": "0.44.1-nightly.20260519.0"
+    "@lexical/utils": "0.45.1-dev.0",
+    "lexical": "0.45.1-dev.0"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/facebook/lexical.git",
     "directory": "packages/lexical-mark"
   },
-  "module": "LexicalMark.mjs",
+  "module": "./dist/LexicalMark.mjs",
   "sideEffects": false,
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "import": {
-        "types": "./index.d.ts",
-        "development": "./LexicalMark.dev.mjs",
-        "production": "./LexicalMark.prod.mjs",
-        "node": "./LexicalMark.node.mjs",
-        "default": "./LexicalMark.mjs"
+        "types": "./dist/index.d.ts",
+        "development": "./dist/LexicalMark.dev.mjs",
+        "production": "./dist/LexicalMark.prod.mjs",
+        "node": "./dist/LexicalMark.node.mjs",
+        "default": "./dist/LexicalMark.mjs"
       },
       "require": {
-        "types": "./index.d.ts",
-        "development": "./LexicalMark.dev.js",
-        "production": "./LexicalMark.prod.js",
-        "default": "./LexicalMark.js"
+        "types": "./dist/index.d.ts",
+        "development": "./dist/LexicalMark.dev.js",
+        "production": "./dist/LexicalMark.prod.js",
+        "default": "./dist/LexicalMark.js"
       }
     }
-  }
+  },
+  "files": [
+    "dist",
+    "src",
+    "!src/__tests__",
+    "!src/__bench__",
+    "!src/__mocks__",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!src/**/*.bench.ts",
+    "!src/**/*.bench.tsx",
+    "README.md",
+    "LICENSE"
+  ]
 }

package/src/MarkNode.ts

@@ -0,0 +1,198 @@
+/**
+ * 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 {
+  BaseSelection,
+  EditorConfig,
+  LexicalNode,
+  LexicalUpdateJSON,
+  NodeKey,
+  RangeSelection,
+  SerializedElementNode,
+  Spread,
+} from 'lexical';
+
+import {
+  addClassNamesToElement,
+  removeClassNamesFromElement,
+} from '@lexical/utils';
+import {$applyNodeReplacement, $isRangeSelection, ElementNode} from 'lexical';
+
+export type SerializedMarkNode = Spread<
+  {
+    ids: Array<string>;
+  },
+  SerializedElementNode
+>;
+
+const NO_IDS: readonly string[] = [];
+
+/** @noInheritDoc */
+export class MarkNode extends ElementNode {
+  /** @internal */
+  __ids: readonly string[];
+
+  static getType(): string {
+    return 'mark';
+  }
+
+  static clone(node: MarkNode): MarkNode {
+    return new MarkNode(node.__ids, node.__key);
+  }
+
+  afterCloneFrom(prevNode: this): void {
+    super.afterCloneFrom(prevNode);
+    this.__ids = prevNode.__ids;
+  }
+
+  static importDOM(): null {
+    return null;
+  }
+
+  static importJSON(serializedNode: SerializedMarkNode): MarkNode {
+    return $createMarkNode().updateFromJSON(serializedNode);
+  }
+
+  updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedMarkNode>): this {
+    return super.updateFromJSON(serializedNode).setIDs(serializedNode.ids);
+  }
+
+  exportJSON(): SerializedMarkNode {
+    return {
+      ...super.exportJSON(),
+      ids: this.getIDs(),
+    };
+  }
+
+  constructor(ids: readonly string[] = NO_IDS, key?: NodeKey) {
+    super(key);
+    this.__ids = ids;
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const element = document.createElement('mark');
+    addClassNamesToElement(element, config.theme.mark);
+    if (this.__ids.length > 1) {
+      addClassNamesToElement(element, config.theme.markOverlap);
+    }
+    return element;
+  }
+
+  updateDOM(
+    prevNode: this,
+    element: HTMLElement,
+    config: EditorConfig,
+  ): boolean {
+    const prevIDs = prevNode.__ids;
+    const nextIDs = this.__ids;
+    const prevIDsCount = prevIDs.length;
+    const nextIDsCount = nextIDs.length;
+    const overlapTheme = config.theme.markOverlap;
+
+    if (prevIDsCount !== nextIDsCount) {
+      if (prevIDsCount === 1) {
+        if (nextIDsCount === 2) {
+          addClassNamesToElement(element, overlapTheme);
+        }
+      } else if (nextIDsCount === 1) {
+        removeClassNamesFromElement(element, overlapTheme);
+      }
+    }
+    return false;
+  }
+
+  hasID(id: string): boolean {
+    return this.getIDs().includes(id);
+  }
+
+  getIDs(): Array<string> {
+    return Array.from(this.getLatest().__ids);
+  }
+
+  setIDs(ids: readonly string[]): this {
+    const self = this.getWritable();
+    self.__ids = ids;
+    return self;
+  }
+
+  addID(id: string): this {
+    const self = this.getWritable();
+    return self.__ids.includes(id) ? self : self.setIDs([...self.__ids, id]);
+  }
+
+  deleteID(id: string): this {
+    const self = this.getWritable();
+    const idx = self.__ids.indexOf(id);
+    if (idx === -1) {
+      return self;
+    }
+    const ids = Array.from(self.__ids);
+    ids.splice(idx, 1);
+    return self.setIDs(ids);
+  }
+
+  insertNewAfter(
+    selection: RangeSelection,
+    restoreSelection = true,
+  ): null | ElementNode {
+    const markNode = $createMarkNode(this.__ids);
+    this.insertAfter(markNode, restoreSelection);
+    return markNode;
+  }
+
+  canInsertTextBefore(): false {
+    return false;
+  }
+
+  canInsertTextAfter(): false {
+    return false;
+  }
+
+  canBeEmpty(): false {
+    return false;
+  }
+
+  isInline(): true {
+    return true;
+  }
+
+  extractWithChild(
+    child: LexicalNode,
+    selection: BaseSelection,
+    destination: 'clone' | 'html',
+  ): boolean {
+    if (!$isRangeSelection(selection) || destination === 'html') {
+      return false;
+    }
+    const anchor = selection.anchor;
+    const focus = selection.focus;
+    const anchorNode = anchor.getNode();
+    const focusNode = focus.getNode();
+    const isBackward = selection.isBackward();
+    const selectionLength = isBackward
+      ? anchor.offset - focus.offset
+      : focus.offset - anchor.offset;
+    return (
+      this.isParentOf(anchorNode) &&
+      this.isParentOf(focusNode) &&
+      this.getTextContent().length === selectionLength
+    );
+  }
+
+  excludeFromCopy(destination: 'clone' | 'html'): boolean {
+    return destination !== 'clone';
+  }
+}
+
+export function $createMarkNode(ids: readonly string[] = NO_IDS): MarkNode {
+  return $applyNodeReplacement(new MarkNode(ids));
+}
+
+export function $isMarkNode(node: LexicalNode | null): node is MarkNode {
+  return node instanceof MarkNode;
+}

package/src/index.ts

@@ -0,0 +1,168 @@
+/**
+ * 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 {SerializedMarkNode} from './MarkNode';
+import type {ElementNode, LexicalNode, RangeSelection, TextNode} from 'lexical';
+
+import {
+  $createRangeSelection,
+  $isDecoratorNode,
+  $isElementNode,
+  $isTextNode,
+  defineExtension,
+} from 'lexical';
+
+import {$createMarkNode, $isMarkNode, MarkNode} from './MarkNode';
+
+export function $unwrapMarkNode(node: MarkNode): void {
+  const children = node.getChildren();
+  let target = null;
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    if (target === null) {
+      node.insertBefore(child);
+    } else {
+      target.insertAfter(child);
+    }
+    target = child;
+  }
+  node.remove();
+}
+
+export function $wrapSelectionInMarkNode(
+  selection: RangeSelection,
+  isBackward: boolean,
+  id: string,
+  createNode?: (ids: Array<string>) => MarkNode,
+): void {
+  // Force a forwards selection since append is used, ignore the argument.
+  // A new selection is used to avoid side-effects of flipping the given
+  // selection
+  const forwardSelection = $createRangeSelection();
+  const [startPoint, endPoint] = selection.isBackward()
+    ? [selection.focus, selection.anchor]
+    : [selection.anchor, selection.focus];
+  forwardSelection.anchor.set(
+    startPoint.key,
+    startPoint.offset,
+    startPoint.type,
+  );
+  forwardSelection.focus.set(endPoint.key, endPoint.offset, endPoint.type);
+
+  let currentNodeParent: ElementNode | null | undefined;
+  let lastCreatedMarkNode: MarkNode | undefined;
+
+  // Note that extract will split text nodes at the boundaries
+  const nodes = forwardSelection.extract();
+  // We only want wrap adjacent text nodes, line break nodes
+  // and inline element nodes. For decorator nodes and block
+  // element nodes, we step out of their boundary and start
+  // again after, if there are more nodes.
+  for (const node of nodes) {
+    if (
+      $isElementNode(lastCreatedMarkNode) &&
+      lastCreatedMarkNode.isParentOf(node)
+    ) {
+      // If the current node is a child of the last created mark node, there is nothing to do here
+      continue;
+    }
+    let targetNode: LexicalNode | null = null;
+
+    if ($isTextNode(node)) {
+      // Case 1: The node is a text node and we can include it
+      targetNode = node;
+    } else if ($isMarkNode(node)) {
+      // Case 2: the node is a mark node and we can ignore it as a target,
+      // moving on to its children. Note that when we make a mark inside
+      // another mark, it may ultimately be unnested by a call to
+      // `registerNestedElementResolver<MarkNode>` somewhere else in the
+      // codebase.
+      continue;
+    } else if (
+      ($isElementNode(node) || $isDecoratorNode(node)) &&
+      node.isInline()
+    ) {
+      // Case 3: inline element/decorator nodes can be added in their entirety
+      // to the new mark
+      targetNode = node;
+    }
+
+    if (targetNode !== null) {
+      // Now that we have a target node for wrapping with a mark, we can run
+      // through special cases.
+      if (targetNode && targetNode.is(currentNodeParent)) {
+        // The current node is a child of the target node to be wrapped, there
+        // is nothing to do here.
+        continue;
+      }
+      const parentNode = targetNode.getParent();
+      if (parentNode == null || !parentNode.is(currentNodeParent)) {
+        // If the parent node is not the current node's parent node, we can
+        // clear the last created mark node.
+        lastCreatedMarkNode = undefined;
+      }
+
+      currentNodeParent = parentNode;
+
+      if (lastCreatedMarkNode === undefined) {
+        // If we don't have a created mark node, we can make one
+        const createMarkNode = createNode || $createMarkNode;
+        lastCreatedMarkNode = createMarkNode([id]);
+        targetNode.insertBefore(lastCreatedMarkNode);
+      }
+
+      // Add the target node to be wrapped in the latest created mark node
+      lastCreatedMarkNode.append(targetNode);
+    } else {
+      // If we don't have a target node to wrap we can clear our state and
+      // continue on with the next node
+      currentNodeParent = undefined;
+      lastCreatedMarkNode = undefined;
+    }
+  }
+  // Make selection collapsed at the end
+  if ($isElementNode(lastCreatedMarkNode)) {
+    if (isBackward) {
+      lastCreatedMarkNode.selectStart();
+    } else {
+      lastCreatedMarkNode.selectEnd();
+    }
+  }
+}
+
+export function $getMarkIDs(
+  node: TextNode,
+  offset: number,
+): null | Array<string> {
+  let currentNode: LexicalNode | null = node;
+  while (currentNode !== null) {
+    if ($isMarkNode(currentNode)) {
+      return currentNode.getIDs();
+    } else if (
+      $isTextNode(currentNode) &&
+      offset === currentNode.getTextContentSize()
+    ) {
+      const nextSibling = currentNode.getNextSibling();
+      if ($isMarkNode(nextSibling)) {
+        return nextSibling.getIDs();
+      }
+    }
+    currentNode = currentNode.getParent();
+  }
+  return null;
+}
+
+/**
+ * Configures {@link MarkNode}
+ */
+export const MarkExtension = defineExtension({
+  name: '@lexical/mark',
+  nodes: () => [MarkNode],
+});
+
+export {$createMarkNode, $isMarkNode, MarkNode, SerializedMarkNode};