@ctzhian/tiptap 0.4.0

package/dist/extension/node/Link/helpers/autolink.d.ts

@@ -0,0 +1,15 @@
+import type { NodeType } from '@tiptap/pm/model';
+import { Plugin } from '@tiptap/pm/state';
+type AutolinkOptions = {
+    type: NodeType;
+    defaultProtocol: string;
+    validate: (url: string) => boolean;
+    shouldAutoLink: (url: string) => boolean;
+};
+/**
+ * This plugin allows you to automatically add links to your editor.
+ * @param options The plugin options
+ * @returns The plugin instance
+ */
+export declare function autolink(options: AutolinkOptions): Plugin;
+export {};

package/dist/extension/node/Link/helpers/autolink.js

@@ -0,0 +1,162 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import { combineTransactionSteps, findChildrenInRange, getChangedRanges } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { tokenize } from 'linkifyjs';
+import { UNICODE_WHITESPACE_REGEX, UNICODE_WHITESPACE_REGEX_END } from "./whitespace";
+
+/**
+ * Check if the provided tokens form a valid link structure, which can either be a single link token
+ * or a link token surrounded by parentheses or square brackets.
+ *
+ * This ensures that only complete and valid text is hyperlinked, preventing cases where a valid
+ * top-level domain (TLD) is immediately followed by an invalid character, like a number. For
+ * example, with the `find` method from Linkify, entering `example.com1` would result in
+ * `example.com` being linked and the trailing `1` left as plain text. By using the `tokenize`
+ * method, we can perform more comprehensive validation on the input text.
+ */
+function isValidLinkStructure(tokens) {
+  if (tokens.length === 1) {
+    return tokens[0].isLink;
+  }
+  if (tokens.length === 3 && tokens[1].isLink) {
+    return ['()', '[]'].includes(tokens[0].value + tokens[2].value);
+  }
+  return false;
+}
+/**
+ * This plugin allows you to automatically add links to your editor.
+ * @param options The plugin options
+ * @returns The plugin instance
+ */
+export function autolink(options) {
+  return new Plugin({
+    key: new PluginKey('autolink'),
+    appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      /**
+       * Does the transaction change the document?
+       */
+      var docChanges = transactions.some(function (transaction) {
+        return transaction.docChanged;
+      }) && !oldState.doc.eq(newState.doc);
+
+      /**
+       * Prevent autolink if the transaction is not a document change or if the transaction has the meta `preventAutolink`.
+       */
+      var preventAutolink = transactions.some(function (transaction) {
+        return transaction.getMeta('preventAutolink');
+      });
+
+      /**
+       * Prevent autolink if the transaction is not a document change
+       * or if the transaction has the meta `preventAutolink`.
+       */
+      if (!docChanges || preventAutolink) {
+        return;
+      }
+      var tr = newState.tr;
+      var transform = combineTransactionSteps(oldState.doc, _toConsumableArray(transactions));
+      var changes = getChangedRanges(transform);
+      changes.forEach(function (_ref) {
+        var newRange = _ref.newRange;
+        // Now let’s see if we can add new links.
+        var nodesInChangedRanges = findChildrenInRange(newState.doc, newRange, function (node) {
+          return node.isTextblock;
+        });
+        var textBlock;
+        var textBeforeWhitespace;
+        if (nodesInChangedRanges.length > 1) {
+          // Grab the first node within the changed ranges (ex. the first of two paragraphs when hitting enter).
+          textBlock = nodesInChangedRanges[0];
+          textBeforeWhitespace = newState.doc.textBetween(textBlock.pos, textBlock.pos + textBlock.node.nodeSize, undefined, ' ');
+        } else if (nodesInChangedRanges.length) {
+          var endText = newState.doc.textBetween(newRange.from, newRange.to, ' ', ' ');
+          if (!UNICODE_WHITESPACE_REGEX_END.test(endText)) {
+            return;
+          }
+          textBlock = nodesInChangedRanges[0];
+          textBeforeWhitespace = newState.doc.textBetween(textBlock.pos, newRange.to, undefined, ' ');
+        }
+        if (textBlock && textBeforeWhitespace) {
+          var wordsBeforeWhitespace = textBeforeWhitespace.split(UNICODE_WHITESPACE_REGEX).filter(Boolean);
+          if (wordsBeforeWhitespace.length <= 0) {
+            return false;
+          }
+          var lastWordBeforeSpace = wordsBeforeWhitespace[wordsBeforeWhitespace.length - 1];
+          var lastWordAndBlockOffset = textBlock.pos + textBeforeWhitespace.lastIndexOf(lastWordBeforeSpace);
+          if (!lastWordBeforeSpace) {
+            return false;
+          }
+          var linksBeforeSpace = tokenize(lastWordBeforeSpace).map(function (t) {
+            return t.toObject(options.defaultProtocol);
+          });
+          if (!isValidLinkStructure(linksBeforeSpace)) {
+            return false;
+          }
+          linksBeforeSpace.filter(function (link) {
+            return link.isLink;
+          })
+          // Calculate link position.
+          .map(function (link) {
+            return _objectSpread(_objectSpread({}, link), {}, {
+              from: lastWordAndBlockOffset + link.start + 1,
+              to: lastWordAndBlockOffset + link.end + 1
+            });
+          })
+          // ignore link inside code node
+          .filter(function (link) {
+            if (!newState.schema.nodes.code) {
+              return true;
+            }
+            var hasCodeNode = false;
+            newState.doc.nodesBetween(link.from, link.to, function (node) {
+              if (node.type === newState.schema.nodes.code) {
+                hasCodeNode = true;
+                return false;
+              }
+            });
+            return !hasCodeNode;
+          })
+          // validate link
+          .filter(function (link) {
+            return options.validate(link.value);
+          })
+          // check whether should autolink
+          .filter(function (link) {
+            return options.shouldAutoLink(link.value);
+          })
+          // Add link node.
+          .forEach(function (link) {
+            var hasLinkNode = false;
+            newState.doc.nodesBetween(link.from, link.to, function (node) {
+              if (node.type === options.type) {
+                hasLinkNode = true;
+                return false;
+              }
+            });
+            if (hasLinkNode) {
+              return;
+            }
+            tr.replaceWith(link.from, link.to, options.type.create({
+              href: link.href
+            }));
+          });
+        }
+      });
+      if (!tr.steps.length) {
+        return;
+      }
+      return tr;
+    }
+  });
+}

package/dist/extension/node/Link/helpers/clickHandler.d.ts

@@ -0,0 +1,10 @@
+import type { Editor } from '@tiptap/core';
+import type { NodeType } from '@tiptap/pm/model';
+import { Plugin } from '@tiptap/pm/state';
+type ClickHandlerOptions = {
+    type: NodeType;
+    editor: Editor;
+    enableClickSelection?: boolean;
+};
+export declare function clickHandler(options: ClickHandlerOptions): Plugin;
+export {};

package/dist/extension/node/Link/helpers/clickHandler.js

@@ -0,0 +1,46 @@
+import { getAttributes } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+export function clickHandler(options) {
+  return new Plugin({
+    key: new PluginKey('handleClickLink'),
+    props: {
+      handleClick: function handleClick(view, pos, event) {
+        var _link$href, _link, _link$target, _link2;
+        if (event.button !== 0) {
+          return false;
+        }
+        if (!view.editable) {
+          return false;
+        }
+        var link = null;
+        if (event.target instanceof HTMLAnchorElement) {
+          link = event.target;
+        } else {
+          var a = event.target;
+          var els = [];
+          while (a.nodeName !== 'DIV') {
+            els.push(a);
+            a = a.parentNode;
+          }
+          link = els.find(function (value) {
+            return value.nodeName === 'A';
+          });
+        }
+        if (!link) {
+          return false;
+        }
+        var attrs = getAttributes(view.state, options.type.name);
+        var href = (_link$href = (_link = link) === null || _link === void 0 ? void 0 : _link.href) !== null && _link$href !== void 0 ? _link$href : attrs.href;
+        var target = (_link$target = (_link2 = link) === null || _link2 === void 0 ? void 0 : _link2.target) !== null && _link$target !== void 0 ? _link$target : attrs.target;
+        if (options.enableClickSelection) {
+          options.editor.commands.selectNodeForward();
+        }
+        if (link && href) {
+          window.open(href, target);
+          return true;
+        }
+        return false;
+      }
+    }
+  });
+}

package/dist/extension/node/Link/helpers/pasteHandler.d.ts

@@ -0,0 +1,10 @@
+import type { Editor } from '@tiptap/core';
+import type { NodeType } from '@tiptap/pm/model';
+import { Plugin } from '@tiptap/pm/state';
+type PasteHandlerOptions = {
+    editor: Editor;
+    defaultProtocol: string;
+    type: NodeType;
+};
+export declare function pasteHandler(options: PasteHandlerOptions): Plugin;
+export {};

package/dist/extension/node/Link/helpers/pasteHandler.js

@@ -0,0 +1,32 @@
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { find } from 'linkifyjs';
+export function pasteHandler(options) {
+  return new Plugin({
+    key: new PluginKey('handlePasteLink'),
+    props: {
+      handlePaste: function handlePaste(view, event, slice) {
+        var state = view.state;
+        var selection = state.selection;
+        var empty = selection.empty;
+        if (empty) {
+          return false;
+        }
+        var textContent = '';
+        slice.content.forEach(function (node) {
+          textContent += node.textContent;
+        });
+        var link = find(textContent, {
+          defaultProtocol: options.defaultProtocol
+        }).find(function (item) {
+          return item.isLink && item.value === textContent;
+        });
+        if (!textContent || !link) {
+          return false;
+        }
+        return options.editor.commands.setNode(options.type, {
+          href: link.href
+        });
+      }
+    }
+  });
+}

package/dist/extension/node/Link/helpers/whitespace.d.ts

@@ -0,0 +1,4 @@
+export declare const UNICODE_WHITESPACE_PATTERN = "[\0- \u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]";
+export declare const UNICODE_WHITESPACE_REGEX: RegExp;
+export declare const UNICODE_WHITESPACE_REGEX_END: RegExp;
+export declare const UNICODE_WHITESPACE_REGEX_GLOBAL: RegExp;

package/dist/extension/node/Link/helpers/whitespace.js

@@ -0,0 +1,6 @@
+// From DOMPurify
+// https://github.com/cure53/DOMPurify/blob/main/src/regexp.ts
+export var UNICODE_WHITESPACE_PATTERN = "[\0- \xA0\u1680\u180E\u2000-\u2029\u205F\u3000]";
+export var UNICODE_WHITESPACE_REGEX = new RegExp(UNICODE_WHITESPACE_PATTERN);
+export var UNICODE_WHITESPACE_REGEX_END = new RegExp("".concat(UNICODE_WHITESPACE_PATTERN, "$"));
+export var UNICODE_WHITESPACE_REGEX_GLOBAL = new RegExp(UNICODE_WHITESPACE_PATTERN, 'g');

package/dist/extension/node/Link/index.d.ts

@@ -0,0 +1,162 @@
+import { Node } from '@tiptap/core';
+export interface LinkProtocolOptions {
+    /**
+     * The protocol scheme to be registered.
+     * @default '''
+     * @example 'ftp'
+     * @example 'git'
+     */
+    scheme: string;
+    /**
+     * If enabled, it allows optional slashes after the protocol.
+     * @default false
+     * @example true
+     */
+    optionalSlashes?: boolean;
+}
+/**
+ * @deprecated The default behavior is now to open links when the editor is not editable.
+ */
+type DeprecatedOpenWhenNotEditable = 'whenNotEditable';
+export interface LinkOptions {
+    /**
+   * If enabled, the extension will automatically add links as you type.
+   * @default true
+   * @example false
+   */
+    autolink: boolean;
+    /**
+     * An array of custom protocols to be registered with linkifyjs.
+     * @default []
+     * @example ['ftp', 'git']
+     */
+    protocols: Array<LinkProtocolOptions | string>;
+    /**
+     * Default protocol to use when no protocol is specified.
+     * @default 'http'
+     */
+    defaultProtocol: string;
+    /**
+     * If enabled, links will be opened on click.
+     * @default true
+     * @example false
+     */
+    openOnClick: boolean | DeprecatedOpenWhenNotEditable;
+    /**
+     * If enabled, the link will be selected when clicked.
+     * @default false
+     * @example true
+     */
+    enableClickSelection: boolean;
+    /**
+     * Adds a link to the current selection if the pasted content only contains an url.
+     * @default true
+     * @example false
+     */
+    linkOnPaste: boolean;
+    /**
+     * HTML attributes to add to the link element.
+     * @default {}
+     * @example { class: 'foo' }
+     */
+    HTMLAttributes: Record<string, any>;
+    /**
+     * @deprecated Use the `shouldAutoLink` option instead.
+     * A validation function that modifies link verification for the auto linker.
+     * @param url - The url to be validated.
+     * @returns - True if the url is valid, false otherwise.
+     */
+    validate: (url: string) => boolean;
+    /**
+     * A validation function which is used for configuring link verification for preventing XSS attacks.
+     * Only modify this if you know what you're doing.
+     *
+     * @returns {boolean} `true` if the URL is valid, `false` otherwise.
+     *
+     * @example
+     * isAllowedUri: (url, { defaultValidate, protocols, defaultProtocol }) => {
+     * return url.startsWith('./') || defaultValidate(url)
+     * }
+     */
+    isAllowedUri: (
+    /**
+     * The URL to be validated.
+     */
+    url: string, ctx: {
+        /**
+         * The default validation function.
+         */
+        defaultValidate: (url: string) => boolean;
+        /**
+         * An array of allowed protocols for the URL (e.g., "http", "https"). As defined in the `protocols` option.
+         */
+        protocols: Array<LinkProtocolOptions | string>;
+        /**
+         * A string that represents the default protocol (e.g., 'http'). As defined in the `defaultProtocol` option.
+         */
+        defaultProtocol: string;
+    }) => boolean;
+    /**
+     * Determines whether a valid link should be automatically linked in the content.
+     *
+     * @param {string} url - The URL that has already been validated.
+     * @returns {boolean} - True if the link should be auto-linked; false if it should not be auto-linked.
+     */
+    shouldAutoLink: (url: string) => boolean;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        inlineLink: {
+            /**
+             * Set a link mark
+             * @param attributes The link attributes
+             * @example editor.commands.setInlineLink({ href: 'https://tiptap.dev' })
+             */
+            setInlineLink: (attributes: {
+                href: string;
+                target?: string | null;
+                rel?: string | null;
+                class?: string | null;
+                title?: string | null;
+                type?: string | null;
+            }) => ReturnType;
+            /**
+             * Toggle a link mark
+             * @param attributes The link attributes
+             * @example editor.commands.toggleInlineLink({ href: 'https://tiptap.dev' })
+             */
+            toggleInlineLink: (attributes?: {
+                href: string;
+                target?: string | null;
+                rel?: string | null;
+                class?: string | null;
+                title?: string | null;
+                type?: string | null;
+            }) => ReturnType;
+            /**
+             * Unset a link mark
+              * @example editor.commands.unsetInlineLink()
+             */
+            unsetInlineLink: () => ReturnType;
+        };
+        blockLink: {
+            /**
+             * Set a block link
+             * @param attributes The link attributes
+             * @example editor.commands.setBlockLink({ href: 'https://tiptap.dev' })
+             */
+            setBlockLink: (attributes: {
+                href: string;
+                target?: string | null;
+                rel?: string | null;
+                class?: string | null;
+                title?: string | null;
+                type?: string | null;
+            }) => ReturnType;
+        };
+    }
+}
+export declare function isAllowedUri(uri: string | undefined, protocols?: LinkOptions['protocols']): true | RegExpMatchArray | null;
+export declare const InlineLinkExtension: Node<LinkOptions, any>;
+export declare const BlockLinkExtension: Node<any, any>;
+export {};