@lexical/link 0.13.1 → 0.14.1

package/LexicalLink.dev.esm.js

@@ -0,0 +1,412 @@
+/**
+ * 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 { addClassNamesToElement, isHTMLAnchorElement } from '@lexical/utils';
+import { createCommand, ElementNode, $applyNodeReplacement, $isRangeSelection, $isElementNode, $getSelection } from 'lexical';
+
+/** @module @lexical/link */
+const SUPPORTED_URL_PROTOCOLS = new Set(['http:', 'https:', 'mailto:', 'sms:', 'tel:']);
+
+/** @noInheritDoc */
+class LinkNode extends ElementNode {
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  static getType() {
+    return 'link';
+  }
+  static clone(node) {
+    return new LinkNode(node.__url, {
+      rel: node.__rel,
+      target: node.__target,
+      title: node.__title
+    }, node.__key);
+  }
+  constructor(url, attributes = {}, key) {
+    super(key);
+    const {
+      target = null,
+      rel = null,
+      title = null
+    } = attributes;
+    this.__url = url;
+    this.__target = target;
+    this.__rel = rel;
+    this.__title = title;
+  }
+  createDOM(config) {
+    const element = document.createElement('a');
+    element.href = this.sanitizeUrl(this.__url);
+    if (this.__target !== null) {
+      element.target = this.__target;
+    }
+    if (this.__rel !== null) {
+      element.rel = this.__rel;
+    }
+    if (this.__title !== null) {
+      element.title = this.__title;
+    }
+    addClassNamesToElement(element, config.theme.link);
+    return element;
+  }
+  updateDOM(prevNode, anchor, config) {
+    const url = this.__url;
+    const target = this.__target;
+    const rel = this.__rel;
+    const title = this.__title;
+    if (url !== prevNode.__url) {
+      anchor.href = url;
+    }
+    if (target !== prevNode.__target) {
+      if (target) {
+        anchor.target = target;
+      } else {
+        anchor.removeAttribute('target');
+      }
+    }
+    if (rel !== prevNode.__rel) {
+      if (rel) {
+        anchor.rel = rel;
+      } else {
+        anchor.removeAttribute('rel');
+      }
+    }
+    if (title !== prevNode.__title) {
+      if (title) {
+        anchor.title = title;
+      } else {
+        anchor.removeAttribute('title');
+      }
+    }
+    return false;
+  }
+  static importDOM() {
+    return {
+      a: node => ({
+        conversion: convertAnchorElement,
+        priority: 1
+      })
+    };
+  }
+  static importJSON(serializedNode) {
+    const node = $createLinkNode(serializedNode.url, {
+      rel: serializedNode.rel,
+      target: serializedNode.target,
+      title: serializedNode.title
+    });
+    node.setFormat(serializedNode.format);
+    node.setIndent(serializedNode.indent);
+    node.setDirection(serializedNode.direction);
+    return node;
+  }
+  sanitizeUrl(url) {
+    try {
+      const parsedUrl = new URL(url);
+      // eslint-disable-next-line no-script-url
+      if (!SUPPORTED_URL_PROTOCOLS.has(parsedUrl.protocol)) {
+        return 'about:blank';
+      }
+    } catch (_unused) {
+      return url;
+    }
+    return url;
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      rel: this.getRel(),
+      target: this.getTarget(),
+      title: this.getTitle(),
+      type: 'link',
+      url: this.getURL(),
+      version: 1
+    };
+  }
+  getURL() {
+    return this.getLatest().__url;
+  }
+  setURL(url) {
+    const writable = this.getWritable();
+    writable.__url = url;
+  }
+  getTarget() {
+    return this.getLatest().__target;
+  }
+  setTarget(target) {
+    const writable = this.getWritable();
+    writable.__target = target;
+  }
+  getRel() {
+    return this.getLatest().__rel;
+  }
+  setRel(rel) {
+    const writable = this.getWritable();
+    writable.__rel = rel;
+  }
+  getTitle() {
+    return this.getLatest().__title;
+  }
+  setTitle(title) {
+    const writable = this.getWritable();
+    writable.__title = title;
+  }
+  insertNewAfter(_, restoreSelection = true) {
+    const linkNode = $createLinkNode(this.__url, {
+      rel: this.__rel,
+      target: this.__target,
+      title: this.__title
+    });
+    this.insertAfter(linkNode, restoreSelection);
+    return linkNode;
+  }
+  canInsertTextBefore() {
+    return false;
+  }
+  canInsertTextAfter() {
+    return false;
+  }
+  canBeEmpty() {
+    return false;
+  }
+  isInline() {
+    return true;
+  }
+  extractWithChild(child, selection, destination) {
+    if (!$isRangeSelection(selection)) {
+      return false;
+    }
+    const anchorNode = selection.anchor.getNode();
+    const focusNode = selection.focus.getNode();
+    return this.isParentOf(anchorNode) && this.isParentOf(focusNode) && selection.getTextContent().length > 0;
+  }
+}
+function convertAnchorElement(domNode) {
+  let node = null;
+  if (isHTMLAnchorElement(domNode)) {
+    const content = domNode.textContent;
+    if (content !== null && content !== '' || domNode.children.length > 0) {
+      node = $createLinkNode(domNode.getAttribute('href') || '', {
+        rel: domNode.getAttribute('rel'),
+        target: domNode.getAttribute('target'),
+        title: domNode.getAttribute('title')
+      });
+    }
+  }
+  return {
+    node
+  };
+}
+
+/**
+ * Takes a URL and creates a LinkNode.
+ * @param url - The URL the LinkNode should direct to.
+ * @param attributes - Optional HTML a tag attributes { target, rel, title }
+ * @returns The LinkNode.
+ */
+function $createLinkNode(url, attributes) {
+  return $applyNodeReplacement(new LinkNode(url, attributes));
+}
+
+/**
+ * Determines if node is a LinkNode.
+ * @param node - The node to be checked.
+ * @returns true if node is a LinkNode, false otherwise.
+ */
+function $isLinkNode(node) {
+  return node instanceof LinkNode;
+}
+// Custom node type to override `canInsertTextAfter` that will
+// allow typing within the link
+class AutoLinkNode extends LinkNode {
+  static getType() {
+    return 'autolink';
+  }
+  static clone(node) {
+    return new AutoLinkNode(node.__url, {
+      rel: node.__rel,
+      target: node.__target,
+      title: node.__title
+    }, node.__key);
+  }
+  static importJSON(serializedNode) {
+    const node = $createAutoLinkNode(serializedNode.url, {
+      rel: serializedNode.rel,
+      target: serializedNode.target,
+      title: serializedNode.title
+    });
+    node.setFormat(serializedNode.format);
+    node.setIndent(serializedNode.indent);
+    node.setDirection(serializedNode.direction);
+    return node;
+  }
+  static importDOM() {
+    // TODO: Should link node should handle the import over autolink?
+    return null;
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: 'autolink',
+      version: 1
+    };
+  }
+  insertNewAfter(selection, restoreSelection = true) {
+    const element = this.getParentOrThrow().insertNewAfter(selection, restoreSelection);
+    if ($isElementNode(element)) {
+      const linkNode = $createAutoLinkNode(this.__url, {
+        rel: this.__rel,
+        target: this.__target,
+        title: this.__title
+      });
+      element.append(linkNode);
+      return linkNode;
+    }
+    return null;
+  }
+}
+
+/**
+ * Takes a URL and creates an AutoLinkNode. AutoLinkNodes are generally automatically generated
+ * during typing, which is especially useful when a button to generate a LinkNode is not practical.
+ * @param url - The URL the LinkNode should direct to.
+ * @param attributes - Optional HTML a tag attributes. { target, rel, title }
+ * @returns The LinkNode.
+ */
+function $createAutoLinkNode(url, attributes) {
+  return $applyNodeReplacement(new AutoLinkNode(url, attributes));
+}
+
+/**
+ * Determines if node is an AutoLinkNode.
+ * @param node - The node to be checked.
+ * @returns true if node is an AutoLinkNode, false otherwise.
+ */
+function $isAutoLinkNode(node) {
+  return node instanceof AutoLinkNode;
+}
+const TOGGLE_LINK_COMMAND = createCommand('TOGGLE_LINK_COMMAND');
+
+/**
+ * Generates or updates a LinkNode. It can also delete a LinkNode if the URL is null,
+ * but saves any children and brings them up to the parent node.
+ * @param url - The URL the link directs to.
+ * @param attributes - Optional HTML a tag attributes. { target, rel, title }
+ */
+function toggleLink(url, attributes = {}) {
+  const {
+    target,
+    title
+  } = attributes;
+  const rel = attributes.rel === undefined ? 'noreferrer' : attributes.rel;
+  const selection = $getSelection();
+  if (!$isRangeSelection(selection)) {
+    return;
+  }
+  const nodes = selection.extract();
+  if (url === null) {
+    // Remove LinkNodes
+    nodes.forEach(node => {
+      const parent = node.getParent();
+      if ($isLinkNode(parent)) {
+        const children = parent.getChildren();
+        for (let i = 0; i < children.length; i++) {
+          parent.insertBefore(children[i]);
+        }
+        parent.remove();
+      }
+    });
+  } else {
+    // Add or merge LinkNodes
+    if (nodes.length === 1) {
+      const firstNode = nodes[0];
+      // if the first node is a LinkNode or if its
+      // parent is a LinkNode, we update the URL, target and rel.
+      const linkNode = $getAncestor(firstNode, $isLinkNode);
+      if (linkNode !== null) {
+        linkNode.setURL(url);
+        if (target !== undefined) {
+          linkNode.setTarget(target);
+        }
+        if (rel !== null) {
+          linkNode.setRel(rel);
+        }
+        if (title !== undefined) {
+          linkNode.setTitle(title);
+        }
+        return;
+      }
+    }
+    let prevParent = null;
+    let linkNode = null;
+    nodes.forEach(node => {
+      const parent = node.getParent();
+      if (parent === linkNode || parent === null || $isElementNode(node) && !node.isInline()) {
+        return;
+      }
+      if ($isLinkNode(parent)) {
+        linkNode = parent;
+        parent.setURL(url);
+        if (target !== undefined) {
+          parent.setTarget(target);
+        }
+        if (rel !== null) {
+          linkNode.setRel(rel);
+        }
+        if (title !== undefined) {
+          linkNode.setTitle(title);
+        }
+        return;
+      }
+      if (!parent.is(prevParent)) {
+        prevParent = parent;
+        linkNode = $createLinkNode(url, {
+          rel,
+          target,
+          title
+        });
+        if ($isLinkNode(parent)) {
+          if (node.getPreviousSibling() === null) {
+            parent.insertBefore(linkNode);
+          } else {
+            parent.insertAfter(linkNode);
+          }
+        } else {
+          node.insertBefore(linkNode);
+        }
+      }
+      if ($isLinkNode(node)) {
+        if (node.is(linkNode)) {
+          return;
+        }
+        if (linkNode !== null) {
+          const children = node.getChildren();
+          for (let i = 0; i < children.length; i++) {
+            linkNode.append(children[i]);
+          }
+        }
+        node.remove();
+        return;
+      }
+      if (linkNode !== null) {
+        linkNode.append(node);
+      }
+    });
+  }
+}
+function $getAncestor(node, predicate) {
+  let parent = node;
+  while (parent !== null && parent.getParent() !== null && !predicate(parent)) {
+    parent = parent.getParentOrThrow();
+  }
+  return predicate(parent) ? parent : null;
+}
+
+export { $createAutoLinkNode, $createLinkNode, $isAutoLinkNode, $isLinkNode, AutoLinkNode, LinkNode, TOGGLE_LINK_COMMAND, toggleLink };

package/LexicalLink.esm.js

@@ -0,0 +1,17 @@
+/**
+ * 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 './LexicalLink.dev.esm.js';
+import * as modProd from './LexicalLink.prod.esm.js';
+const mod = process.env.NODE_ENV === 'development' ? modDev : modProd;
+export const $createAutoLinkNode = mod.$createAutoLinkNode;
+export const $createLinkNode = mod.$createLinkNode;
+export const $isAutoLinkNode = mod.$isAutoLinkNode;
+export const $isLinkNode = mod.$isLinkNode;
+export const AutoLinkNode = mod.AutoLinkNode;
+export const LinkNode = mod.LinkNode;
+export const TOGGLE_LINK_COMMAND = mod.TOGGLE_LINK_COMMAND;
+export const toggleLink = mod.toggleLink;

package/LexicalLink.js

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

package/LexicalLink.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{addClassNamesToElement as t,isHTMLAnchorElement as e}from"@lexical/utils";import{createCommand as r,ElementNode as i,$applyNodeReplacement as n,$isRangeSelection as l,$isElementNode as s,$getSelection as u}from"lexical";const o=new Set(["http:","https:","mailto:","sms:","tel:"]);class _ extends i{static getType(){return"link"}static clone(t){return new _(t.__url,{rel:t.__rel,target:t.__target,title:t.__title},t.__key)}constructor(t,e={},r){super(r);const{target:i=null,rel:n=null,title:l=null}=e;this.__url=t,this.__target=i,this.__rel=n,this.__title=l}createDOM(e){const r=document.createElement("a");return r.href=this.sanitizeUrl(this.__url),null!==this.__target&&(r.target=this.__target),null!==this.__rel&&(r.rel=this.__rel),null!==this.__title&&(r.title=this.__title),t(r,e.theme.link),r}updateDOM(t,e,r){const i=this.__url,n=this.__target,l=this.__rel,s=this.__title;return i!==t.__url&&(e.href=i),n!==t.__target&&(n?e.target=n:e.removeAttribute("target")),l!==t.__rel&&(l?e.rel=l:e.removeAttribute("rel")),s!==t.__title&&(s?e.title=s:e.removeAttribute("title")),!1}static importDOM(){return{a:t=>({conversion:a,priority:1})}}static importJSON(t){const e=g(t.url,{rel:t.rel,target:t.target,title:t.title});return e.setFormat(t.format),e.setIndent(t.indent),e.setDirection(t.direction),e}sanitizeUrl(t){try{const e=new URL(t);if(!o.has(e.protocol))return"about:blank"}catch(e){return t}return t}exportJSON(){return{...super.exportJSON(),rel:this.getRel(),target:this.getTarget(),title:this.getTitle(),type:"link",url:this.getURL(),version:1}}getURL(){return this.getLatest().__url}setURL(t){this.getWritable().__url=t}getTarget(){return this.getLatest().__target}setTarget(t){this.getWritable().__target=t}getRel(){return this.getLatest().__rel}setRel(t){this.getWritable().__rel=t}getTitle(){return this.getLatest().__title}setTitle(t){this.getWritable().__title=t}insertNewAfter(t,e=!0){const r=g(this.__url,{rel:this.__rel,target:this.__target,title:this.__title});return this.insertAfter(r,e),r}canInsertTextBefore(){return!1}canInsertTextAfter(){return!1}canBeEmpty(){return!1}isInline(){return!0}extractWithChild(t,e,r){if(!l(e))return!1;const i=e.anchor.getNode(),n=e.focus.getNode();return this.isParentOf(i)&&this.isParentOf(n)&&e.getTextContent().length>0}}function a(t){let r=null;if(e(t)){const e=t.textContent;(null!==e&&""!==e||t.children.length>0)&&(r=g(t.getAttribute("href")||"",{rel:t.getAttribute("rel"),target:t.getAttribute("target"),title:t.getAttribute("title")}))}return{node:r}}function g(t,e){return n(new _(t,e))}function c(t){return t instanceof _}class h extends _{static getType(){return"autolink"}static clone(t){return new h(t.__url,{rel:t.__rel,target:t.__target,title:t.__title},t.__key)}static importJSON(t){const e=f(t.url,{rel:t.rel,target:t.target,title:t.title});return e.setFormat(t.format),e.setIndent(t.indent),e.setDirection(t.direction),e}static importDOM(){return null}exportJSON(){return{...super.exportJSON(),type:"autolink",version:1}}insertNewAfter(t,e=!0){const r=this.getParentOrThrow().insertNewAfter(t,e);if(s(r)){const t=f(this.__url,{rel:this.__rel,target:this.__target,title:this.__title});return r.append(t),t}return null}}function f(t,e){return n(new h(t,e))}function p(t){return t instanceof h}const d=r("TOGGLE_LINK_COMMAND");function m(t,e={}){const{target:r,title:i}=e,n=void 0===e.rel?"noreferrer":e.rel,o=u();if(!l(o))return;const _=o.extract();if(null===t)_.forEach((t=>{const e=t.getParent();if(c(e)){const t=e.getChildren();for(let r=0;r<t.length;r++)e.insertBefore(t[r]);e.remove()}}));else{if(1===_.length){const e=function(t,e){let r=t;for(;null!==r&&null!==r.getParent()&&!e(r);)r=r.getParentOrThrow();return e(r)?r:null}(_[0],c);if(null!==e)return e.setURL(t),void 0!==r&&e.setTarget(r),null!==n&&e.setRel(n),void(void 0!==i&&e.setTitle(i))}let e=null,l=null;_.forEach((u=>{const o=u.getParent();if(o!==l&&null!==o&&(!s(u)||u.isInline())){if(c(o))return l=o,o.setURL(t),void 0!==r&&o.setTarget(r),null!==n&&l.setRel(n),void(void 0!==i&&l.setTitle(i));if(o.is(e)||(e=o,l=g(t,{rel:n,target:r,title:i}),c(o)?null===u.getPreviousSibling()?o.insertBefore(l):o.insertAfter(l):u.insertBefore(l)),c(u)){if(u.is(l))return;if(null!==l){const t=u.getChildren();for(let e=0;e<t.length;e++)l.append(t[e])}u.remove()}else null!==l&&l.append(u)}}))}}export{f as $createAutoLinkNode,g as $createLinkNode,p as $isAutoLinkNode,c as $isLinkNode,h as AutoLinkNode,_ as LinkNode,d as TOGGLE_LINK_COMMAND,m as toggleLink};

package/README.md

@@ -1,5 +1,7 @@
 # `@lexical/link`
 
+[![See API Documentation](https://lexical.dev/img/see-api-documentation.svg)](https://lexical.dev/docs/api/modules/lexical_link)
+
 This package contains the functionality for Lexical links.
 
 More documentation coming soon.

package/package.json

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