@lexical/mark 0.13.1 → 0.14.2

package/LexicalMark.dev.esm.js

@@ -0,0 +1,268 @@
+/**
+ * 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 { ElementNode, $applyNodeReplacement, $isRangeSelection, $isElementNode, $isTextNode } from 'lexical';
+import { addClassNamesToElement, removeClassNamesFromElement } from '@lexical/utils';
+
+/**
+ * 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.
+ *
+ */
+/** @noInheritDoc */
+class MarkNode extends ElementNode {
+  /** @internal */
+
+  static getType() {
+    return 'mark';
+  }
+  static clone(node) {
+    return new MarkNode(Array.from(node.__ids), node.__key);
+  }
+  static importDOM() {
+    return null;
+  }
+  static importJSON(serializedNode) {
+    const node = $createMarkNode(serializedNode.ids);
+    node.setFormat(serializedNode.format);
+    node.setIndent(serializedNode.indent);
+    node.setDirection(serializedNode.direction);
+    return node;
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      ids: this.getIDs(),
+      type: 'mark',
+      version: 1
+    };
+  }
+  constructor(ids, key) {
+    super(key);
+    this.__ids = ids || [];
+  }
+  createDOM(config) {
+    const element = document.createElement('mark');
+    addClassNamesToElement(element, config.theme.mark);
+    if (this.__ids.length > 1) {
+      addClassNamesToElement(element, config.theme.markOverlap);
+    }
+    return element;
+  }
+  updateDOM(prevNode, element, config) {
+    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) {
+    const ids = this.getIDs();
+    for (let i = 0; i < ids.length; i++) {
+      if (id === ids[i]) {
+        return true;
+      }
+    }
+    return false;
+  }
+  getIDs() {
+    const self = this.getLatest();
+    return $isMarkNode(self) ? self.__ids : [];
+  }
+  addID(id) {
+    const self = this.getWritable();
+    if ($isMarkNode(self)) {
+      const ids = self.__ids;
+      self.__ids = ids;
+      for (let i = 0; i < ids.length; i++) {
+        // If we already have it, don't add again
+        if (id === ids[i]) {
+          return;
+        }
+      }
+      ids.push(id);
+    }
+  }
+  deleteID(id) {
+    const self = this.getWritable();
+    if ($isMarkNode(self)) {
+      const ids = self.__ids;
+      self.__ids = ids;
+      for (let i = 0; i < ids.length; i++) {
+        if (id === ids[i]) {
+          ids.splice(i, 1);
+          return;
+        }
+      }
+    }
+  }
+  insertNewAfter(selection, restoreSelection = true) {
+    const markNode = $createMarkNode(this.__ids);
+    this.insertAfter(markNode, restoreSelection);
+    return markNode;
+  }
+  canInsertTextBefore() {
+    return false;
+  }
+  canInsertTextAfter() {
+    return false;
+  }
+  canBeEmpty() {
+    return false;
+  }
+  isInline() {
+    return true;
+  }
+  extractWithChild(child, selection, destination) {
+    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) {
+    return destination !== 'clone';
+  }
+}
+function $createMarkNode(ids) {
+  return $applyNodeReplacement(new MarkNode(ids));
+}
+function $isMarkNode(node) {
+  return node instanceof MarkNode;
+}
+
+/** @module @lexical/mark */
+function $unwrapMarkNode(node) {
+  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();
+}
+function $wrapSelectionInMarkNode(selection, isBackward, id, createNode) {
+  const nodes = selection.getNodes();
+  const anchorOffset = selection.anchor.offset;
+  const focusOffset = selection.focus.offset;
+  const nodesLength = nodes.length;
+  const startOffset = isBackward ? focusOffset : anchorOffset;
+  const endOffset = isBackward ? anchorOffset : focusOffset;
+  let currentNodeParent;
+  let lastCreatedMarkNode;
+
+  // 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 (let i = 0; i < nodesLength; i++) {
+    const node = nodes[i];
+    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;
+    }
+    const isFirstNode = i === 0;
+    const isLastNode = i === nodesLength - 1;
+    let targetNode = null;
+    if ($isTextNode(node)) {
+      // Case 1: The node is a text node and we can split it
+      const textContentSize = node.getTextContentSize();
+      const startTextOffset = isFirstNode ? startOffset : 0;
+      const endTextOffset = isLastNode ? endOffset : textContentSize;
+      if (startTextOffset === 0 && endTextOffset === 0) {
+        continue;
+      }
+      const splitNodes = node.splitText(startTextOffset, endTextOffset);
+      targetNode = splitNodes.length > 1 && (splitNodes.length === 3 || isFirstNode && !isLastNode || endTextOffset === textContentSize) ? splitNodes[1] : splitNodes[0];
+    } 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 utlimately be unnested by a call to
+      // `registerNestedElementResolver<MarkNode>` somewhere else in the
+      // codebase.
+
+      continue;
+    } else if ($isElementNode(node) && node.isInline()) {
+      // Case 3: inline element 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)) {
+    // eslint-disable-next-line no-unused-expressions
+    isBackward ? lastCreatedMarkNode.selectStart() : lastCreatedMarkNode.selectEnd();
+  }
+}
+function $getMarkIDs(node, offset) {
+  let currentNode = 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;
+}
+
+export { $createMarkNode, $getMarkIDs, $isMarkNode, $unwrapMarkNode, $wrapSelectionInMarkNode, MarkNode };

package/LexicalMark.dev.js

@@ -93,7 +93,9 @@ class MarkNode extends lexical.ElementNode {
       self.__ids = ids;
       for (let i = 0; i < ids.length; i++) {
         // If we already have it, don't add again
-        if (id === ids[i]) return;
+        if (id === ids[i]) {
+          return;
+        }
       }
       ids.push(id);
     }

package/LexicalMark.esm.js

@@ -0,0 +1,15 @@
+/**
+ * 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 * as modDev from './LexicalMark.dev.esm.js';
+import * as modProd from './LexicalMark.prod.esm.js';
+const mod = process.env.NODE_ENV === 'development' ? modDev : modProd;
+export const $createMarkNode = mod.$createMarkNode;
+export const $getMarkIDs = mod.$getMarkIDs;
+export const $isMarkNode = mod.$isMarkNode;
+export const $unwrapMarkNode = mod.$unwrapMarkNode;
+export const $wrapSelectionInMarkNode = mod.$wrapSelectionInMarkNode;
+export const MarkNode = mod.MarkNode;

package/LexicalMark.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict'
-const LexicalMark = process.env.NODE_ENV === 'development' ? require('./LexicalMark.dev.js') : require('./LexicalMark.prod.js')
+const LexicalMark = process.env.NODE_ENV === 'development' ? require('./LexicalMark.dev.js') : require('./LexicalMark.prod.js');
 module.exports = LexicalMark;

package/LexicalMark.prod.esm.js

@@ -0,0 +1,7 @@
+/**
+ * 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{ElementNode as t,$applyNodeReplacement as e,$isRangeSelection as n,$isElementNode as r,$isTextNode as i}from"lexical";import{addClassNamesToElement as s,removeClassNamesFromElement as o}from"@lexical/utils";class l extends t{static getType(){return"mark"}static clone(t){return new l(Array.from(t.__ids),t.__key)}static importDOM(){return null}static importJSON(t){const e=c(t.ids);return e.setFormat(t.format),e.setIndent(t.indent),e.setDirection(t.direction),e}exportJSON(){return{...super.exportJSON(),ids:this.getIDs(),type:"mark",version:1}}constructor(t,e){super(e),this.__ids=t||[]}createDOM(t){const e=document.createElement("mark");return s(e,t.theme.mark),this.__ids.length>1&&s(e,t.theme.markOverlap),e}updateDOM(t,e,n){const r=t.__ids,i=this.__ids,l=r.length,c=i.length,f=n.theme.markOverlap;return l!==c&&(1===l?2===c&&s(e,f):1===c&&o(e,f)),!1}hasID(t){const e=this.getIDs();for(let n=0;n<e.length;n++)if(t===e[n])return!0;return!1}getIDs(){const t=this.getLatest();return f(t)?t.__ids:[]}addID(t){const e=this.getWritable();if(f(e)){const n=e.__ids;e.__ids=n;for(let e=0;e<n.length;e++)if(t===n[e])return;n.push(t)}}deleteID(t){const e=this.getWritable();if(f(e)){const n=e.__ids;e.__ids=n;for(let e=0;e<n.length;e++)if(t===n[e])return void n.splice(e,1)}}insertNewAfter(t,e=!0){const n=c(this.__ids);return this.insertAfter(n,e),n}canInsertTextBefore(){return!1}canInsertTextAfter(){return!1}canBeEmpty(){return!1}isInline(){return!0}extractWithChild(t,e,r){if(!n(e)||"html"===r)return!1;const i=e.anchor,s=e.focus,o=i.getNode(),l=s.getNode(),c=e.isBackward()?i.offset-s.offset:s.offset-i.offset;return this.isParentOf(o)&&this.isParentOf(l)&&this.getTextContent().length===c}excludeFromCopy(t){return"clone"!==t}}function c(t){return e(new l(t))}function f(t){return t instanceof l}function u(t){const e=t.getChildren();let n=null;for(let r=0;r<e.length;r++){const i=e[r];null===n?t.insertBefore(i):n.insertAfter(i),n=i}t.remove()}function a(t,e,n,s){const o=t.getNodes(),l=t.anchor.offset,u=t.focus.offset,a=o.length,d=e?u:l,h=e?l:u;let g,m;for(let t=0;t<a;t++){const e=o[t];if(r(m)&&m.isParentOf(e))continue;const l=0===t,u=t===a-1;let _=null;if(i(e)){const t=e.getTextContentSize(),n=l?d:0,r=u?h:t;if(0===n&&0===r)continue;const i=e.splitText(n,r);_=i.length>1&&(3===i.length||l&&!u||r===t)?i[1]:i[0]}else{if(f(e))continue;r(e)&&e.isInline()&&(_=e)}if(null!==_){if(_&&_.is(g))continue;const t=_.getParent();if(null!=t&&t.is(g)||(m=void 0),g=t,void 0===m){m=(s||c)([n]),_.insertBefore(m)}m.append(_)}else g=void 0,m=void 0}r(m)&&(e?m.selectStart():m.selectEnd())}function d(t,e){let n=t;for(;null!==n;){if(f(n))return n.getIDs();if(i(n)&&e===n.getTextContentSize()){const t=n.getNextSibling();if(f(t))return t.getIDs()}n=n.getParent()}return null}export{c as $createMarkNode,d as $getMarkIDs,f as $isMarkNode,u as $unwrapMarkNode,a as $wrapSelectionInMarkNode,l as MarkNode};

package/README.md

@@ -1,3 +1,5 @@
 # `@lexical/mark`
 
+[![See API Documentation](https://lexical.dev/img/see-api-documentation.svg)](https://lexical.dev/docs/api/modules/lexical_mark)
+
 This package contains helpers and nodes for wrapping content in marks for Lexical.

package/package.json

@@ -8,17 +8,19 @@
     "mark"
   ],
   "license": "MIT",
-  "version": "0.13.1",
+  "version": "0.14.2",
   "main": "LexicalMark.js",
   "peerDependencies": {
-    "lexical": "0.13.1"
+    "lexical": "0.14.2"
   },
   "dependencies": {
-    "@lexical/utils": "0.13.1"
+    "@lexical/utils": "0.14.2"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/lexical",
     "directory": "packages/lexical-mark"
-  }
+  },
+  "module": "LexicalMark.esm.js",
+  "sideEffects": false
 }