@lexical/link 0.3.8 → 0.3.11

package/LexicalLink.dev.js

@@ -22,28 +22,64 @@ class LinkNode extends lexical.ElementNode {
   }
 
   static clone(node) {
-    return new LinkNode(node.__url, node.__key);
+    return new LinkNode(node.__url, {
+      rel: node.__rel,
+      target: node.__target
+    }, node.__key);
   }
 
-  constructor(url, key) {
+  constructor(url, attributes = {}, key) {
     super(key);
+    const {
+      target = null,
+      rel = null
+    } = attributes;
     this.__url = url;
+    this.__target = target;
+    this.__rel = rel;
   }
 
   createDOM(config) {
     const element = document.createElement('a');
     element.href = this.__url;
+
+    if (this.__target !== null) {
+      element.target = this.__target;
+    }
+
+    if (this.__rel !== null) {
+      element.rel = this.__rel;
+    }
+
     utils.addClassNamesToElement(element, config.theme.link);
     return element;
   }
 
   updateDOM(prevNode, anchor, config) {
     const url = this.__url;
+    const target = this.__target;
+    const rel = this.__rel;
 
     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');
+      }
+    }
+
     return false;
   }
 
@@ -57,7 +93,10 @@ class LinkNode extends lexical.ElementNode {
   }
 
   static importJSON(serializedNode) {
-    const node = $createLinkNode(serializedNode.url);
+    const node = $createLinkNode(serializedNode.url, {
+      rel: serializedNode.rel,
+      target: serializedNode.target
+    });
     node.setFormat(serializedNode.format);
     node.setIndent(serializedNode.indent);
     node.setDirection(serializedNode.direction);
@@ -66,6 +105,8 @@ class LinkNode extends lexical.ElementNode {
 
   exportJSON() {
     return { ...super.exportJSON(),
+      rel: this.getRel(),
+      target: this.getTarget(),
       type: 'link',
       url: this.getURL(),
       version: 1
@@ -81,11 +122,32 @@ class LinkNode extends lexical.ElementNode {
     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;
+  }
+
   insertNewAfter(selection) {
     const element = this.getParentOrThrow().insertNewAfter(selection);
 
     if (lexical.$isElementNode(element)) {
-      const linkNode = $createLinkNode(this.__url);
+      const linkNode = $createLinkNode(this.__url, {
+        rel: this.__rel,
+        target: this.__target
+      });
       element.append(linkNode);
       return linkNode;
     }
@@ -125,7 +187,10 @@ function convertAnchorElement(domNode) {
   let node = null;
 
   if (domNode instanceof HTMLAnchorElement) {
-    node = $createLinkNode(domNode.getAttribute('href') || '');
+    node = $createLinkNode(domNode.getAttribute('href') || '', {
+      rel: domNode.getAttribute('rel'),
+      target: domNode.getAttribute('target')
+    });
   }
 
   return {
@@ -133,8 +198,8 @@ function convertAnchorElement(domNode) {
   };
 }
 
-function $createLinkNode(url) {
-  return new LinkNode(url);
+function $createLinkNode(url, attributes) {
+  return new LinkNode(url, attributes);
 }
 function $isLinkNode(node) {
   return node instanceof LinkNode;
@@ -147,11 +212,17 @@ class AutoLinkNode extends LinkNode {
   }
 
   static clone(node) {
-    return new AutoLinkNode(node.__url, node.__key);
+    return new AutoLinkNode(node.__url, {
+      rel: node.__rel,
+      target: node.__target
+    }, node.__key);
   }
 
   static importJSON(serializedNode) {
-    const node = $createAutoLinkNode(serializedNode.url);
+    const node = $createAutoLinkNode(serializedNode.url, {
+      rel: serializedNode.rel,
+      target: serializedNode.target
+    });
     node.setFormat(serializedNode.format);
     node.setIndent(serializedNode.indent);
     node.setDirection(serializedNode.direction);
@@ -174,7 +245,10 @@ class AutoLinkNode extends LinkNode {
     const element = this.getParentOrThrow().insertNewAfter(selection);
 
     if (lexical.$isElementNode(element)) {
-      const linkNode = $createAutoLinkNode(this.__url);
+      const linkNode = $createAutoLinkNode(this.__url, {
+        rel: this._rel,
+        target: this.__target
+      });
       element.append(linkNode);
       return linkNode;
     }
@@ -183,121 +257,142 @@ class AutoLinkNode extends LinkNode {
   }
 
 }
-function $createAutoLinkNode(url) {
-  return new AutoLinkNode(url);
+function $createAutoLinkNode(url, attributes) {
+  return new AutoLinkNode(url, attributes);
 }
 function $isAutoLinkNode(node) {
   return node instanceof AutoLinkNode;
 }
 const TOGGLE_LINK_COMMAND = lexical.createCommand();
-function toggleLink(url) {
+function toggleLink(url, attributes = {}) {
+  const {
+    target,
+    rel
+  } = attributes;
   const selection = lexical.$getSelection();
 
-  if (selection !== null) {
-    lexical.$setSelection(selection);
+  if (!lexical.$isRangeSelection(selection)) {
+    return;
   }
 
-  const sel = lexical.$getSelection();
+  const nodes = selection.extract();
 
-  if (sel !== null) {
-    const nodes = sel.extract();
+  if (url === null) {
+    // Remove LinkNodes
+    nodes.forEach(node => {
+      const parent = node.getParent();
 
-    if (url === null) {
-      // Remove LinkNodes
-      nodes.forEach(node => {
-        const parent = node.getParent();
+      if ($isLinkNode(parent)) {
+        const children = parent.getChildren();
 
-        if ($isLinkNode(parent)) {
-          const children = parent.getChildren();
+        for (let i = 0; i < children.length; i++) {
+          parent.insertBefore(children[i]);
+        }
 
-          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 = $isLinkNode(firstNode) ? firstNode : $getLinkAncestor(firstNode);
 
-          parent.remove();
+      if (linkNode !== null) {
+        linkNode.setURL(url);
+
+        if (target !== undefined) {
+          linkNode.setTarget(target);
         }
-      });
-    } else {
-      // Add or merge LinkNodes
-      if (lexical.$isRangeSelection(sel) && sel.isCollapsed()) {
+
+        if (rel !== undefined) {
+          linkNode.setRel(rel);
+        }
+
         return;
       }
+    }
 
-      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.
+    let prevParent = null;
+    let linkNode = null;
+    nodes.forEach(node => {
+      const parent = node.getParent();
 
-        if ($isLinkNode(firstNode)) {
-          firstNode.setURL(url);
-          return;
-        } else {
-          const parent = firstNode.getParent();
-
-          if ($isLinkNode(parent)) {
-            // set parent to be the current linkNode
-            // so that other nodes in the same parent
-            // aren't handled separately below.
-            parent.setURL(url);
-            return;
-          }
-        }
+      if (parent === linkNode || parent === null || lexical.$isElementNode(node) && !node.isInline()) {
+        return;
       }
 
-      let prevParent = null;
-      let linkNode = null;
-      nodes.forEach(node => {
-        const parent = node.getParent();
+      if ($isLinkNode(parent)) {
+        linkNode = parent;
+        parent.setURL(url);
 
-        if (parent === linkNode || parent === null || lexical.$isElementNode(node) && !node.isInline()) {
-          return;
+        if (target !== undefined) {
+          parent.setTarget(target);
         }
 
-        if ($isLinkNode(parent)) {
-          linkNode = parent;
-          parent.setURL(url);
-          return;
+        if (rel !== undefined) {
+          parent.setRel(rel);
         }
 
-        if (!parent.is(prevParent)) {
-          prevParent = parent;
-          linkNode = $createLinkNode(url);
+        return;
+      }
+
+      if (!parent.is(prevParent)) {
+        prevParent = parent;
+        linkNode = $createLinkNode(url, {
+          rel,
+          target
+        });
 
-          if ($isLinkNode(parent)) {
-            if (node.getPreviousSibling() === null) {
-              parent.insertBefore(linkNode);
-            } else {
-              parent.insertAfter(linkNode);
-            }
+        if ($isLinkNode(parent)) {
+          if (node.getPreviousSibling() === null) {
+            parent.insertBefore(linkNode);
           } else {
-            node.insertBefore(linkNode);
+            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();
+      if ($isLinkNode(node)) {
+        if (node.is(linkNode)) {
           return;
         }
 
         if (linkNode !== null) {
-          linkNode.append(node);
+          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 $getLinkAncestor(node) {
+  return $getAncestor(node, ancestor => $isLinkNode(ancestor));
+}
+
+function $getAncestor(node, predicate) {
+  let parent = node;
+
+  while (parent !== null && (parent = parent.getParent()) !== null && !predicate(parent));
+
+  return parent;
+}
+
 exports.$createAutoLinkNode = $createAutoLinkNode;
 exports.$createLinkNode = $createLinkNode;
 exports.$isAutoLinkNode = $isAutoLinkNode;

package/LexicalLink.js.flow

@@ -18,9 +18,18 @@ import {addClassNamesToElement} from '@lexical/utils';
 import {$isElementNode, ElementNode} from 'lexical';
 declare export class LinkNode extends ElementNode {
   __url: string;
+  __target: null | string;
+  __rel: null | string;
   static getType(): string;
   static clone(node: LinkNode): LinkNode;
-  constructor(url: string, key?: NodeKey): void;
+  constructor(
+    url: string,
+    attributes?: {
+      rel?: null | string,
+      target?: null | string,
+    },
+    key?: NodeKey,
+  ): void;
   createDOM(config: EditorConfig): HTMLElement;
   updateDOM(
     prevNode: LinkNode,
@@ -30,13 +39,23 @@ declare export class LinkNode extends ElementNode {
   static importDOM(): DOMConversionMap | null;
   getURL(): string;
   setURL(url: string): void;
+  getTarget(): null | string;
+  setTarget(target: null | string): void;
+  getRel(): null | string;
+  setRel(rel: null | string): void;
   insertNewAfter(selection: RangeSelection): null | ElementNode;
   canInsertTextBefore(): false;
   canInsertTextAfter(): false;
   canBeEmpty(): false;
   isInline(): true;
 }
-declare export function $createLinkNode(url: string): LinkNode;
+declare export function $createLinkNode(
+  url: string,
+  attributes?: {
+    rel?: null | string,
+    target?: null | string,
+  },
+): LinkNode;
 declare export function $isLinkNode(
   node: ?LexicalNode,
 ): boolean %checks(node instanceof LinkNode);
@@ -51,5 +70,17 @@ declare export function $isAutoLinkNode(
   node: ?LexicalNode,
 ): boolean %checks(node instanceof AutoLinkNode);
 
-declare export var TOGGLE_LINK_COMMAND: LexicalCommand<string | null>;
-declare export function toggleLink(url: null | string): void;
+declare export var TOGGLE_LINK_COMMAND: LexicalCommand<
+  | string
+  | {
+      url: string,
+      target?: null | string,
+      rel?: null | string,
+    }
+  | null,
+>;
+declare export function toggleLink(
+  url: null | string,
+  target?: null | string,
+  rel?: null | string,
+): void;

package/LexicalLink.prod.js

@@ -4,11 +4,12 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-'use strict';var g=require("@lexical/utils"),h=require("lexical");
-class l extends h.ElementNode{static getType(){return"link"}static clone(a){return new l(a.__url,a.__key)}constructor(a,b){super(b);this.__url=a}createDOM(a){let b=document.createElement("a");b.href=this.__url;g.addClassNamesToElement(b,a.theme.link);return b}updateDOM(a,b){let d=this.__url;d!==a.__url&&(b.href=d);return!1}static importDOM(){return{a:()=>({conversion:m,priority:1})}}static importJSON(a){let b=n(a.url);b.setFormat(a.format);b.setIndent(a.indent);b.setDirection(a.direction);return b}exportJSON(){return{...super.exportJSON(),
-type:"link",url:this.getURL(),version:1}}getURL(){return this.getLatest().__url}setURL(a){this.getWritable().__url=a}insertNewAfter(a){a=this.getParentOrThrow().insertNewAfter(a);if(h.$isElementNode(a)){let b=n(this.__url);a.append(b);return b}return null}canInsertTextBefore(){return!1}canInsertTextAfter(){return!1}canBeEmpty(){return!1}isInline(){return!0}extractWithChild(a,b){if(!h.$isRangeSelection(b))return!1;a=b.anchor.getNode();let d=b.focus.getNode();return this.isParentOf(a)&&this.isParentOf(d)&&
-0<b.getTextContent().length}}function m(a){let b=null;a instanceof HTMLAnchorElement&&(b=n(a.getAttribute("href")||""));return{node:b}}function n(a){return new l(a)}function p(a){return a instanceof l}
-class r extends l{static getType(){return"autolink"}static clone(a){return new r(a.__url,a.__key)}static importJSON(a){let b=t(a.url);b.setFormat(a.format);b.setIndent(a.indent);b.setDirection(a.direction);return b}static importDOM(){return null}exportJSON(){return{...super.exportJSON(),type:"autolink",version:1}}insertNewAfter(a){a=this.getParentOrThrow().insertNewAfter(a);if(h.$isElementNode(a)){let b=t(this.__url);a.append(b);return b}return null}}function t(a){return new r(a)}let u=h.createCommand();
-exports.$createAutoLinkNode=t;exports.$createLinkNode=n;exports.$isAutoLinkNode=function(a){return a instanceof r};exports.$isLinkNode=p;exports.AutoLinkNode=r;exports.LinkNode=l;exports.TOGGLE_LINK_COMMAND=u;
-exports.toggleLink=function(a){var b=h.$getSelection();null!==b&&h.$setSelection(b);var d=h.$getSelection();if(null!==d)if(b=d.extract(),null===a)b.forEach(c=>{c=c.getParent();if(p(c)){let e=c.getChildren();for(let k=0;k<e.length;k++)c.insertBefore(e[k]);c.remove()}});else if(!h.$isRangeSelection(d)||!d.isCollapsed()){if(1===b.length){d=b[0];if(p(d)){d.setURL(a);return}d=d.getParent();if(p(d)){d.setURL(a);return}}var q=null,f=null;b.forEach(c=>{var e=c.getParent();if(e!==f&&null!==e&&(!h.$isElementNode(c)||
-c.isInline()))if(p(e))f=e,e.setURL(a);else if(e.is(q)||(q=e,f=n(a),p(e)?null===c.getPreviousSibling()?e.insertBefore(f):e.insertAfter(f):c.insertBefore(f)),p(c)){if(!c.is(f)){if(null!==f){e=c.getChildren();for(let k=0;k<e.length;k++)f.append(e[k])}c.remove()}}else null!==f&&f.append(c)})}}
+'use strict';var l=require("@lexical/utils"),m=require("lexical");
+class n extends m.ElementNode{static getType(){return"link"}static clone(a){return new n(a.__url,{rel:a.__rel,target:a.__target},a.__key)}constructor(a,b={},g){super(g);let {target:h=null,rel:d=null}=b;this.__url=a;this.__target=h;this.__rel=d}createDOM(a){let b=document.createElement("a");b.href=this.__url;null!==this.__target&&(b.target=this.__target);null!==this.__rel&&(b.rel=this.__rel);l.addClassNamesToElement(b,a.theme.link);return b}updateDOM(a,b){let g=this.__url,h=this.__target,d=this.__rel;
+g!==a.__url&&(b.href=g);h!==a.__target&&(h?b.target=h:b.removeAttribute("target"));d!==a.__rel&&(d?b.rel=d:b.removeAttribute("rel"));return!1}static importDOM(){return{a:()=>({conversion:p,priority:1})}}static importJSON(a){let b=q(a.url,{rel:a.rel,target:a.target});b.setFormat(a.format);b.setIndent(a.indent);b.setDirection(a.direction);return b}exportJSON(){return{...super.exportJSON(),rel:this.getRel(),target:this.getTarget(),type:"link",url:this.getURL(),version:1}}getURL(){return this.getLatest().__url}setURL(a){this.getWritable().__url=
+a}getTarget(){return this.getLatest().__target}setTarget(a){this.getWritable().__target=a}getRel(){return this.getLatest().__rel}setRel(a){this.getWritable().__rel=a}insertNewAfter(a){a=this.getParentOrThrow().insertNewAfter(a);if(m.$isElementNode(a)){let b=q(this.__url,{rel:this.__rel,target:this.__target});a.append(b);return b}return null}canInsertTextBefore(){return!1}canInsertTextAfter(){return!1}canBeEmpty(){return!1}isInline(){return!0}extractWithChild(a,b){if(!m.$isRangeSelection(b))return!1;
+a=b.anchor.getNode();let g=b.focus.getNode();return this.isParentOf(a)&&this.isParentOf(g)&&0<b.getTextContent().length}}function p(a){let b=null;a instanceof HTMLAnchorElement&&(b=q(a.getAttribute("href")||"",{rel:a.getAttribute("rel"),target:a.getAttribute("target")}));return{node:b}}function q(a,b){return new n(a,b)}function r(a){return a instanceof n}
+class u extends n{static getType(){return"autolink"}static clone(a){return new u(a.__url,{rel:a.__rel,target:a.__target},a.__key)}static importJSON(a){let b=v(a.url,{rel:a.rel,target:a.target});b.setFormat(a.format);b.setIndent(a.indent);b.setDirection(a.direction);return b}static importDOM(){return null}exportJSON(){return{...super.exportJSON(),type:"autolink",version:1}}insertNewAfter(a){a=this.getParentOrThrow().insertNewAfter(a);if(m.$isElementNode(a)){let b=v(this.__url,{rel:this._rel,target:this.__target});
+a.append(b);return b}return null}}function v(a,b){return new u(a,b)}let w=m.createCommand();function x(a){return y(a,b=>r(b))}function y(a,b){for(;null!==a&&null!==(a=a.getParent())&&!b(a););return a}exports.$createAutoLinkNode=v;exports.$createLinkNode=q;exports.$isAutoLinkNode=function(a){return a instanceof u};exports.$isLinkNode=r;exports.AutoLinkNode=u;exports.LinkNode=n;exports.TOGGLE_LINK_COMMAND=w;
+exports.toggleLink=function(a,b={}){let {target:g,rel:h}=b;b=m.$getSelection();if(m.$isRangeSelection(b))if(b=b.extract(),null===a)b.forEach(k=>{k=k.getParent();if(r(k)){let e=k.getChildren();for(let f=0;f<e.length;f++)k.insertBefore(e[f]);k.remove()}});else{if(1===b.length){var d=b[0];d=r(d)?d:x(d);if(null!==d){d.setURL(a);void 0!==g&&d.setTarget(g);void 0!==h&&d.setRel(h);return}}let k=null,e=null;b.forEach(f=>{var c=f.getParent();if(c!==e&&null!==c&&(!m.$isElementNode(f)||f.isInline()))if(r(c))e=
+c,c.setURL(a),void 0!==g&&c.setTarget(g),void 0!==h&&c.setRel(h);else if(c.is(k)||(k=c,e=q(a,{rel:h,target:g}),r(c)?null===f.getPreviousSibling()?c.insertBefore(e):c.insertAfter(e):f.insertBefore(e)),r(f)){if(!f.is(e)){if(null!==e){c=f.getChildren();for(let t=0;t<c.length;t++)e.append(c[t])}f.remove()}}else null!==e&&e.append(f)})}}

package/index.d.ts

@@ -10,13 +10,20 @@ import { ElementNode, Spread } from 'lexical';
 export declare type SerializedLinkNode = Spread<{
     type: 'link';
     url: string;
+    target?: null | string;
+    rel?: null | string;
     version: 1;
 }, SerializedElementNode>;
 export declare class LinkNode extends ElementNode {
     __url: string;
+    __target: null | string;
+    __rel: null | string;
     static getType(): string;
     static clone(node: LinkNode): LinkNode;
-    constructor(url: string, key?: NodeKey);
+    constructor(url: string, attributes?: {
+        target?: null | string;
+        rel?: null | string;
+    }, key?: NodeKey);
     createDOM(config: EditorConfig): HTMLAnchorElement;
     updateDOM(prevNode: LinkNode, anchor: HTMLAnchorElement, config: EditorConfig): boolean;
     static importDOM(): DOMConversionMap | null;
@@ -24,6 +31,10 @@ export declare class LinkNode extends ElementNode {
     exportJSON(): SerializedLinkNode | SerializedAutoLinkNode;
     getURL(): string;
     setURL(url: string): void;
+    getTarget(): null | string;
+    setTarget(target: null | string): void;
+    getRel(): null | string;
+    setRel(rel: null | string): void;
     insertNewAfter(selection: RangeSelection): null | ElementNode;
     canInsertTextBefore(): false;
     canInsertTextAfter(): false;
@@ -31,7 +42,10 @@ export declare class LinkNode extends ElementNode {
     isInline(): true;
     extractWithChild(child: LexicalNode, selection: RangeSelection | NodeSelection | GridSelection, destination: 'clone' | 'html'): boolean;
 }
-export declare function $createLinkNode(url: string): LinkNode;
+export declare function $createLinkNode(url: string, attributes?: {
+    target?: null | string;
+    rel?: null | string;
+}): LinkNode;
 export declare function $isLinkNode(node: LexicalNode | null | undefined): node is LinkNode;
 export declare type SerializedAutoLinkNode = Spread<{
     type: 'autolink';
@@ -45,7 +59,17 @@ export declare class AutoLinkNode extends LinkNode {
     exportJSON(): SerializedAutoLinkNode;
     insertNewAfter(selection: RangeSelection): null | ElementNode;
 }
-export declare function $createAutoLinkNode(url: string): AutoLinkNode;
+export declare function $createAutoLinkNode(url: string, attributes?: {
+    target?: null | string;
+    rel?: null | string;
+}): AutoLinkNode;
 export declare function $isAutoLinkNode(node: LexicalNode | null | undefined): node is AutoLinkNode;
-export declare const TOGGLE_LINK_COMMAND: LexicalCommand<string | null>;
-export declare function toggleLink(url: null | string): void;
+export declare const TOGGLE_LINK_COMMAND: LexicalCommand<string | {
+    url: string;
+    target?: string;
+    rel?: string;
+} | null>;
+export declare function toggleLink(url: null | string, attributes?: {
+    target?: null | string;
+    rel?: null | string;
+}): void;

package/package.json

@@ -8,13 +8,13 @@
     "link"
   ],
   "license": "MIT",
-  "version": "0.3.8",
+  "version": "0.3.11",
   "main": "LexicalLink.js",
   "peerDependencies": {
-    "lexical": "0.3.8"
+    "lexical": "0.3.11"
   },
   "dependencies": {
-    "@lexical/utils": "0.3.8"
+    "@lexical/utils": "0.3.11"
   },
   "repository": {
     "type": "git",