@webiny/lexical-nodes 6.0.0-beta.0 → 6.0.0-rc.0

package/LinkNode.js

@@ -1,23 +1,3 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.$createAutoLinkNode = $createAutoLinkNode;
-exports.$createLinkNode = $createLinkNode;
-exports.$isAutoLinkNode = $isAutoLinkNode;
-exports.$isLinkNode = $isLinkNode;
-exports.TOGGLE_LINK_COMMAND = exports.LinkNode = exports.AutoLinkNode = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _utils = require("@lexical/utils");
-var _lexical = require("lexical");
 /** @module @lexical/link */
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -27,279 +7,219 @@ var _lexical = require("lexical");
  *
  */
 
-var SUPPORTED_URL_PROTOCOLS = new Set(["http:", "https:", "mailto:", "sms:", "tel:"]);
+import { $applyNodeReplacement, $isElementNode, $isRangeSelection, createCommand, ElementNode, addClassNamesToElement, isHTMLAnchorElement } from "lexical";
+const SUPPORTED_URL_PROTOCOLS = new Set(["http:", "https:", "mailto:", "sms:", "tel:"]);
 
 /** @noInheritDoc */
-var LinkNode = exports.LinkNode = /*#__PURE__*/function (_ElementNode) {
-  function LinkNode(url) {
-    var _this;
-    var attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var key = arguments.length > 2 ? arguments[2] : undefined;
-    (0, _classCallCheck2.default)(this, LinkNode);
-    _this = (0, _callSuper2.default)(this, LinkNode, [key]);
-    var _attributes$target = attributes.target,
-      target = _attributes$target === void 0 ? null : _attributes$target,
-      _attributes$rel = attributes.rel,
-      rel = _attributes$rel === void 0 ? null : _attributes$rel,
-      _attributes$title = attributes.title,
-      title = _attributes$title === void 0 ? null : _attributes$title,
-      _attributes$alt = attributes.alt,
-      alt = _attributes$alt === void 0 ? null : _attributes$alt;
-    _this.__url = url;
-    _this.__target = target;
-    _this.__rel = rel;
-    _this.__title = title;
-    _this.__alt = alt;
-    return _this;
-  }
-  (0, _inherits2.default)(LinkNode, _ElementNode);
-  return (0, _createClass2.default)(LinkNode, [{
-    key: "createDOM",
-    value: function createDOM(config) {
-      var 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;
-      }
-      if (this.__alt) {
-        element.setAttribute("alt", this.__alt);
-      }
-      (0, _utils.addClassNamesToElement)(element, config.theme.link);
-      return element;
-    }
-  }, {
-    key: "updateDOM",
-    value: function updateDOM(prevNode, anchor) {
-      var url = this.__url;
-      var target = this.__target;
-      var rel = this.__rel;
-      var title = this.__title;
-      var alt = this.__alt;
-      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");
-        }
-      }
-      if (alt !== prevNode.__alt) {
-        if (alt) {
-          anchor.setAttribute("alt", alt);
-        } else {
-          anchor.removeAttribute("alt");
-        }
-      }
-      return false;
-    }
-  }, {
-    key: "sanitizeUrl",
-    value: function sanitizeUrl(url) {
-      try {
-        var 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;
-    }
-  }, {
-    key: "exportJSON",
-    value: function exportJSON() {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _get2.default)((0, _getPrototypeOf2.default)(LinkNode.prototype), "exportJSON", this).call(this)), {}, {
-        rel: this.getRel(),
-        target: this.getTarget(),
-        title: this.getTitle(),
-        alt: this.getAlt(),
-        type: "link",
-        url: this.getURL(),
-        version: 1
-      });
-    }
-  }, {
-    key: "getURL",
-    value: function getURL() {
-      return this.getLatest().__url;
-    }
-  }, {
-    key: "setURL",
-    value: function setURL(url) {
-      var writable = this.getWritable();
-      writable.__url = url;
-    }
-  }, {
-    key: "getTarget",
-    value: function getTarget() {
-      return this.getLatest().__target;
-    }
-  }, {
-    key: "setTarget",
-    value: function setTarget(target) {
-      var writable = this.getWritable();
-      writable.__target = target;
-    }
-  }, {
-    key: "getRel",
-    value: function getRel() {
-      return this.getLatest().__rel;
-    }
-  }, {
-    key: "setRel",
-    value: function setRel(rel) {
-      var writable = this.getWritable();
-      writable.__rel = rel;
+export class LinkNode extends ElementNode {
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  static getType() {
+    return "wby-link";
+  }
+  static clone(node) {
+    return new LinkNode(node.__url, {
+      rel: node.__rel,
+      target: node.__target,
+      title: node.__title,
+      alt: node.__alt
+    }, node.__key);
+  }
+  constructor(url, attributes = {}, key) {
+    super(key);
+    const {
+      target = null,
+      rel = null,
+      title = null,
+      alt = null
+    } = attributes;
+    this.__url = url;
+    this.__target = target;
+    this.__rel = rel;
+    this.__title = title;
+    this.__alt = alt;
+  }
+  createDOM(config) {
+    const element = document.createElement("a");
+    element.href = this.sanitizeUrl(this.__url);
+    if (this.__target !== null) {
+      element.target = this.__target;
     }
-  }, {
-    key: "getTitle",
-    value: function getTitle() {
-      return this.getLatest().__title;
+    if (this.__rel !== null) {
+      element.rel = this.__rel;
     }
-  }, {
-    key: "setTitle",
-    value: function setTitle(title) {
-      var writable = this.getWritable();
-      writable.__title = title;
+    if (this.__title !== null) {
+      element.title = this.__title;
     }
-  }, {
-    key: "getAlt",
-    value: function getAlt() {
-      return this.__alt;
+    if (this.__alt) {
+      element.setAttribute("alt", this.__alt);
     }
-  }, {
-    key: "setAlt",
-    value: function setAlt(text) {
-      var writable = (0, _get2.default)((0, _getPrototypeOf2.default)(LinkNode.prototype), "getWritable", this).call(this);
-      writable.__alt = text;
+    addClassNamesToElement(element, config.theme.link);
+    return element;
+  }
+  updateDOM(prevNode, anchor) {
+    const url = this.__url;
+    const target = this.__target;
+    const rel = this.__rel;
+    const title = this.__title;
+    const alt = this.__alt;
+    if (url !== prevNode.__url) {
+      anchor.href = url;
     }
-  }, {
-    key: "insertNewAfter",
-    value: function insertNewAfter(selection) {
-      var restoreSelection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-      var element = this.getParentOrThrow().insertNewAfter(selection, restoreSelection);
-      if ((0, _lexical.$isElementNode)(element)) {
-        var linkNode = $createLinkNode(this.__url, {
-          rel: this.__rel,
-          target: this.__target,
-          title: this.__title,
-          alt: this.__alt
-        });
-        element.append(linkNode);
-        return linkNode;
+    if (target !== prevNode.__target) {
+      if (target) {
+        anchor.target = target;
+      } else {
+        anchor.removeAttribute("target");
       }
-      return null;
-    }
-  }, {
-    key: "canInsertTextBefore",
-    value: function canInsertTextBefore() {
-      return false;
-    }
-  }, {
-    key: "canInsertTextAfter",
-    value: function canInsertTextAfter() {
-      return false;
-    }
-  }, {
-    key: "canBeEmpty",
-    value: function canBeEmpty() {
-      return false;
-    }
-  }, {
-    key: "isInline",
-    value: function isInline() {
-      return true;
     }
-  }, {
-    key: "extractWithChild",
-    value: function extractWithChild(_, selection) {
-      if (!(0, _lexical.$isRangeSelection)(selection)) {
-        return false;
+    if (rel !== prevNode.__rel) {
+      if (rel) {
+        anchor.rel = rel;
+      } else {
+        anchor.removeAttribute("rel");
       }
-      var anchorNode = selection.anchor.getNode();
-      var focusNode = selection.focus.getNode();
-      return this.isParentOf(anchorNode) && this.isParentOf(focusNode) && selection.getTextContent().length > 0;
     }
-  }], [{
-    key: "getType",
-    value: /** @internal */
-
-    /** @internal */
-
-    /** @internal */
-
-    /** @internal */
-
-    /** @internal */
-
-    function getType() {
-      return "link";
+    if (title !== prevNode.__title) {
+      if (title) {
+        anchor.title = title;
+      } else {
+        anchor.removeAttribute("title");
+      }
     }
-  }, {
-    key: "clone",
-    value: function clone(node) {
-      return new LinkNode(node.__url, {
-        rel: node.__rel,
-        target: node.__target,
-        title: node.__title,
-        alt: node.__alt
-      }, node.__key);
+    if (alt !== prevNode.__alt) {
+      if (alt) {
+        anchor.setAttribute("alt", alt);
+      } else {
+        anchor.removeAttribute("alt");
+      }
     }
-  }, {
-    key: "importDOM",
-    value: function importDOM() {
-      return {
-        a: function a() {
-          return {
-            conversion: convertAnchorElement,
-            priority: 1
-          };
-        }
-      };
+    return false;
+  }
+  static importDOM() {
+    return {
+      a: () => ({
+        conversion: convertAnchorElement,
+        priority: 1
+      })
+    };
+  }
+  static importJSON(serializedNode) {
+    const node = $createLinkNode(serializedNode.url, {
+      rel: serializedNode.rel,
+      target: serializedNode.target,
+      title: serializedNode.title,
+      alt: serializedNode.alt
+    });
+    node.setFormat(serializedNode.format);
+    node.setIndent(serializedNode.indent);
+    node.setDirection(serializedNode.direction);
+    return node;
+  }
+  sanitizeUrl(url) {
+    try {
+      const parsedUrl = new URL(url);
+      if (!SUPPORTED_URL_PROTOCOLS.has(parsedUrl.protocol)) {
+        return "about:blank";
+      }
+    } catch {
+      return url;
     }
-  }, {
-    key: "importJSON",
-    value: function importJSON(serializedNode) {
-      var node = $createLinkNode(serializedNode.url, {
-        rel: serializedNode.rel,
-        target: serializedNode.target,
-        title: serializedNode.title,
-        alt: serializedNode.alt
+    return url;
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      rel: this.getRel(),
+      target: this.getTarget(),
+      title: this.getTitle(),
+      alt: this.getAlt(),
+      type: "wby-link",
+      url: this.getURL()
+    };
+  }
+  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;
+  }
+  getAlt() {
+    return this.__alt;
+  }
+  setAlt(text) {
+    const writable = super.getWritable();
+    writable.__alt = text;
+  }
+  insertNewAfter(selection, restoreSelection = true) {
+    const element = this.getParentOrThrow().insertNewAfter(selection, restoreSelection);
+    if ($isElementNode(element)) {
+      const linkNode = $createLinkNode(this.__url, {
+        rel: this.__rel,
+        target: this.__target,
+        title: this.__title,
+        alt: this.__alt
       });
-      node.setFormat(serializedNode.format);
-      node.setIndent(serializedNode.indent);
-      node.setDirection(serializedNode.direction);
-      return node;
+      element.append(linkNode);
+      return linkNode;
     }
-  }]);
-}(_lexical.ElementNode);
+    return null;
+  }
+  canInsertTextBefore() {
+    return false;
+  }
+  canInsertTextAfter() {
+    return false;
+  }
+  canBeEmpty() {
+    return false;
+  }
+  isInline() {
+    return true;
+  }
+  extractWithChild(_, selection) {
+    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) {
-  var node = null;
-  if ((0, _utils.isHTMLAnchorElement)(domNode)) {
-    var content = domNode.textContent;
+  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"),
@@ -310,7 +230,7 @@ function convertAnchorElement(domNode) {
     }
   }
   return {
-    node: node
+    node
   };
 }
 
@@ -320,8 +240,8 @@ function convertAnchorElement(domNode) {
  * @param attributes - Optional HTML a tag attributes { target, rel, title }
  * @returns The LinkNode.
  */
-function $createLinkNode(url, attributes) {
-  return (0, _lexical.$applyNodeReplacement)(new LinkNode(url, attributes));
+export function $createLinkNode(url, attributes) {
+  return $applyNodeReplacement(new LinkNode(url, attributes));
 }
 
 /**
@@ -329,76 +249,58 @@ function $createLinkNode(url, attributes) {
  * @param node - The node to be checked.
  * @returns true if node is a LinkNode, false otherwise.
  */
-function $isLinkNode(node) {
+export function $isLinkNode(node) {
   return node instanceof LinkNode;
 }
 // Custom node type to override `canInsertTextAfter` that will
 // allow typing within the link
-var AutoLinkNode = exports.AutoLinkNode = /*#__PURE__*/function (_LinkNode) {
-  function AutoLinkNode() {
-    (0, _classCallCheck2.default)(this, AutoLinkNode);
-    return (0, _callSuper2.default)(this, AutoLinkNode, arguments);
-  }
-  (0, _inherits2.default)(AutoLinkNode, _LinkNode);
-  return (0, _createClass2.default)(AutoLinkNode, [{
-    key: "exportJSON",
-    value: function exportJSON() {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _get2.default)((0, _getPrototypeOf2.default)(AutoLinkNode.prototype), "exportJSON", this).call(this)), {}, {
-        type: "autolink",
-        version: 1
-      });
-    }
-  }, {
-    key: "insertNewAfter",
-    value: function insertNewAfter(selection) {
-      var restoreSelection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-      var element = this.getParentOrThrow().insertNewAfter(selection, restoreSelection);
-      if ((0, _lexical.$isElementNode)(element)) {
-        var linkNode = $createAutoLinkNode(this.__url, {
-          rel: this._rel,
-          target: this.__target,
-          title: this.__title
-        });
-        element.append(linkNode);
-        return linkNode;
-      }
-      return null;
-    }
-  }], [{
-    key: "getType",
-    value: function getType() {
-      return "autolink";
-    }
-  }, {
-    key: "clone",
-    value: function clone(node) {
-      return new AutoLinkNode(node.__url, {
-        rel: node.__rel,
-        target: node.__target,
-        title: node.__title
-      }, node.__key);
-    }
-  }, {
-    key: "importJSON",
-    value: function importJSON(serializedNode) {
-      var node = $createAutoLinkNode(serializedNode.url, {
-        rel: serializedNode.rel,
-        target: serializedNode.target,
-        title: serializedNode.title
+export 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"
+    };
+  }
+  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
       });
-      node.setFormat(serializedNode.format);
-      node.setIndent(serializedNode.indent);
-      node.setDirection(serializedNode.direction);
-      return node;
-    }
-  }, {
-    key: "importDOM",
-    value: function importDOM() {
-      // TODO: Should link node should handle the import over autolink?
-      return null;
+      element.append(linkNode);
+      return linkNode;
     }
-  }]);
-}(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.
@@ -406,8 +308,8 @@ var AutoLinkNode = exports.AutoLinkNode = /*#__PURE__*/function (_LinkNode) {
  * @param attributes - Optional HTML a tag attributes. { target, rel, title }
  * @returns The LinkNode.
  */
-function $createAutoLinkNode(url, attributes) {
-  return (0, _lexical.$applyNodeReplacement)(new AutoLinkNode(url, attributes));
+export function $createAutoLinkNode(url, attributes) {
+  return $applyNodeReplacement(new AutoLinkNode(url, attributes));
 }
 
 /**
@@ -415,9 +317,9 @@ function $createAutoLinkNode(url, attributes) {
  * @param node - The node to be checked.
  * @returns true if node is an AutoLinkNode, false otherwise.
  */
-function $isAutoLinkNode(node) {
+export function $isAutoLinkNode(node) {
   return node instanceof AutoLinkNode;
 }
-var TOGGLE_LINK_COMMAND = exports.TOGGLE_LINK_COMMAND = (0, _lexical.createCommand)("TOGGLE_LINK_COMMAND");
+export const TOGGLE_LINK_COMMAND = createCommand("TOGGLE_LINK_COMMAND");
 
 //# sourceMappingURL=LinkNode.js.map