@cyberyozh/text-editor 0.4.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberyozh/text-editor",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Rich text editor library based on Tiptap for CyberYozh",
   "author": "CyberYozh",
   "license": "MIT",

package/src/editor/editor.tsx

@@ -60,6 +60,12 @@ export interface TiptapProps {
    */
   lang?: SupportedLanguage;
   error?: string;
+  /**
+   * Domains (with all their subdomains) whose links are treated as internal:
+   * rel="noopener noreferrer nofollow" is not added on paste / HTML parsing.
+   * Read once when the editor instance is created.
+   */
+  trustedDomains?: string[];
 }
 
 export interface KatexDialogContextProps {
@@ -75,6 +81,7 @@ function TiptapContent({
   isDisabled = false,
   lang,
   error,
+  trustedDomains,
 }: TiptapProps) {
   const [linkDialogContext, setLinkDialogContext] = useState<LinkDialogContextProps | null>(null);
   const [katexDialogContext, setKatexDialogContext] = useState<KatexDialogContextProps | null>(
@@ -117,6 +124,7 @@ function TiptapContent({
         suggestion: createSuggestions(translations, !!imageHandlers),
         isEditable: isEditable && !disabled,
         getImageById: imageHandlers?.getImage,
+        trustedDomains,
         onKatexClick: (latex, pos) => {
           setKatexDialogContext({ latex, pos });
           openDialogCommand("katex");

package/src/editor/handlers/insertion-handlers.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, it, vi } from "vitest";
+import { shouldHandleInsertedFile } from "./markup-insertion";
+
+function fakeEvent() {
+  return {
+    preventDefault: vi.fn(),
+    stopPropagation: vi.fn(),
+  } as unknown as Event & {
+    preventDefault: ReturnType<typeof vi.fn>;
+    stopPropagation: ReturnType<typeof vi.fn>;
+  };
+}
+
+describe("shouldHandleInsertedFile", () => {
+  it("leaves the event untouched when clipboard has no files (plain text / html paste)", () => {
+    const event = fakeEvent();
+    expect(shouldHandleInsertedFile(undefined, event)).toBe(false);
+    expect(event.preventDefault).not.toHaveBeenCalled();
+    expect(event.stopPropagation).not.toHaveBeenCalled();
+  });
+
+  it("blocks the event for a non-image file and does not handle it", () => {
+    const event = fakeEvent();
+    const file = new File(["data"], "doc.pdf", { type: "application/pdf" });
+    expect(shouldHandleInsertedFile(file, event)).toBe(false);
+    expect(event.preventDefault).toHaveBeenCalledOnce();
+    expect(event.stopPropagation).toHaveBeenCalledOnce();
+  });
+
+  it("blocks the event for an image file and handles it", () => {
+    const event = fakeEvent();
+    const file = new File(["data"], "pic.png", { type: "image/png" });
+    expect(shouldHandleInsertedFile(file, event)).toBe(true);
+    expect(event.preventDefault).toHaveBeenCalledOnce();
+    expect(event.stopPropagation).toHaveBeenCalledOnce();
+  });
+});

package/src/editor/handlers/insertion-handlers.ts

@@ -3,7 +3,12 @@ import { useDialogCommand } from "../context";
 import { EditorView } from "@tiptap/pm/view";
 import { Slice } from "@tiptap/pm/model";
 import { ImageHandlers } from "@/types";
-import { applyUploadResultsToNodes, collectRehostableImages, removeImagesFromSlice } from "./markup-insertion";
+import {
+  applyUploadResultsToNodes,
+  collectRehostableImages,
+  removeImagesFromSlice,
+  shouldHandleInsertedFile,
+} from "./markup-insertion";
 
 export function useInsertionHandlers(imageHandlers?: ImageHandlers) {
   const [insertedImage, setInsertedImage] = useState<File | null>(null);
@@ -17,10 +22,7 @@ export function useInsertionHandlers(imageHandlers?: ImageHandlers) {
   }, [insertedImage, activeDialog]);
 
   function genericInsertionHandler(file: File | undefined, event: Event) {
-    event.preventDefault();
-    event.stopPropagation();
-
-    if (!file || !file.type.startsWith("image/")) return;
+    if (!file || !shouldHandleInsertedFile(file, event)) return;
     if (!imageHandlers?.upload) return;
 
     setInsertedImage(file);
@@ -48,7 +50,7 @@ export function useInsertionHandlers(imageHandlers?: ImageHandlers) {
     if (
       "clipboardData" in event &&
       Array.from(event.clipboardData?.items ?? []).some(
-        (item) => item.type === "text/html"
+        (item) => item.type === "text/html",
       )
     ) {
       hasMarkupInsertion = true;
@@ -57,7 +59,7 @@ export function useInsertionHandlers(imageHandlers?: ImageHandlers) {
     if (
       "dataTransfer" in event &&
       Array.from(event.dataTransfer?.items ?? []).some(
-        (item) => item.type === "text/html"
+        (item) => item.type === "text/html",
       )
     ) {
       hasMarkupInsertion = true;
@@ -69,7 +71,8 @@ export function useInsertionHandlers(imageHandlers?: ImageHandlers) {
 
         const imagesToNodes = collectRehostableImages(slice);
 
-        imageHandlers.uploadMultipleByURL(imagesToNodes.map(([url]) => url))
+        imageHandlers
+          .uploadMultipleByURL(imagesToNodes.map(([url]) => url))
           .then((results) => {
             applyUploadResultsToNodes(imagesToNodes, results);
             view.dispatch(view.state.tr.replaceSelection(slice));
@@ -78,7 +81,9 @@ export function useInsertionHandlers(imageHandlers?: ImageHandlers) {
             setDisabled(false);
           });
       } else {
-        view.dispatch(view.state.tr.replaceSelection(removeImagesFromSlice(slice)));
+        view.dispatch(
+          view.state.tr.replaceSelection(removeImagesFromSlice(slice)),
+        );
       }
 
       return true;

package/src/editor/handlers/markup-insertion.ts

@@ -70,3 +70,12 @@ export function applyUploadResultsToNodes(
     node.attrs.storageKey = result.storageKey;
   });
 }
+
+export function shouldHandleInsertedFile(file: File | undefined, event: Event): boolean {
+  if (!file) return false;
+
+  event.preventDefault();
+  event.stopPropagation();
+
+  return file.type.startsWith("image/");
+}

package/src/extensions/base/link.test.ts

@@ -0,0 +1,60 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { isTrustedDomain } from "./link";
+
+describe("isTrustedDomain", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("returns false for external urls when no trusted domains configured", () => {
+    expect(isTrustedDomain("https://example.com/page", [])).toBe(false);
+  });
+
+  it("matches an exact trusted domain", () => {
+    expect(
+      isTrustedDomain("https://cyberyozh.com/blog", ["cyberyozh.com"]),
+    ).toBe(true);
+  });
+
+  it("matches subdomains of a trusted domain", () => {
+    expect(
+      isTrustedDomain("https://app.cyberyozh.com/account", ["cyberyozh.com"]),
+    ).toBe(true);
+    expect(
+      isTrustedDomain("https://www.deep.cyberyozh.pro/", ["cyberyozh.pro"]),
+    ).toBe(true);
+  });
+
+  it("does not match lookalike domains sharing a suffix without a dot boundary", () => {
+    expect(
+      isTrustedDomain("https://evilcyberyozh.com/", ["cyberyozh.com"]),
+    ).toBe(false);
+    expect(
+      isTrustedDomain("https://cyberyozh.com.attacker.io/", ["cyberyozh.com"]),
+    ).toBe(false);
+  });
+
+  it("matches any domain from the list", () => {
+    const trusted = ["cyberyozh.com", "cyberyozh.pro", "scriptrun.ai"];
+    expect(isTrustedDomain("https://scriptrun.ai/docs", trusted)).toBe(true);
+    expect(isTrustedDomain("https://cyberyozh.pro/", trusted)).toBe(true);
+    expect(isTrustedDomain("https://github.com/", trusted)).toBe(false);
+  });
+
+  it("treats the current window hostname as trusted regardless of the list", () => {
+    vi.stubGlobal("window", { location: { hostname: "app.detect.expert" } });
+    expect(isTrustedDomain("https://app.detect.expert/page", [])).toBe(true);
+    expect(isTrustedDomain("https://other.detect.expert/page", [])).toBe(false);
+  });
+
+  it("returns false for unparseable urls", () => {
+    expect(isTrustedDomain("not a url", ["cyberyozh.com"])).toBe(false);
+    expect(isTrustedDomain("/relative/path", ["cyberyozh.com"])).toBe(false);
+  });
+
+  it("is case-insensitive for the hostname", () => {
+    expect(
+      isTrustedDomain("https://App.CyberYozh.com/", ["cyberyozh.com"]),
+    ).toBe(true);
+  });
+});

package/src/extensions/base/link.ts

@@ -1,8 +1,17 @@
-import Link, { isAllowedUri } from "@tiptap/extension-link";
+import Link, { isAllowedUri, type LinkOptions } from "@tiptap/extension-link";
 import { getMarkRange, markPasteRule } from "@tiptap/core";
 import { Plugin, TextSelection } from "@tiptap/pm/state";
 import { find } from "linkifyjs";
 
+export interface ExtendedLinkOptions extends LinkOptions {
+  /**
+   * Domains (with all their subdomains) whose links are treated as internal:
+   * rel="noopener noreferrer nofollow" is not added on paste / HTML parsing.
+   * The current window hostname is always trusted.
+   */
+  trustedDomains: string[];
+}
+
 const isSameDomain = (url: string): boolean => {
   if (typeof window === "undefined") return false;
   try {
@@ -12,8 +21,38 @@ const isSameDomain = (url: string): boolean => {
   }
 };
 
-export const LinkExtension = Link.extend({
+export const isTrustedDomain = (
+  url: string,
+  trustedDomains: string[],
+): boolean => {
+  try {
+    const { hostname } = new URL(url);
+    if (
+      typeof window !== "undefined" &&
+      hostname === window.location.hostname
+    ) {
+      return true;
+    }
+    return trustedDomains.some((trusted) => {
+      const domain = trusted.toLowerCase();
+      return hostname === domain || hostname.endsWith(`.${domain}`);
+    });
+  } catch {
+    return false;
+  }
+};
+
+export const LinkExtension = Link.extend<ExtendedLinkOptions>({
+  addOptions() {
+    return {
+      ...(this.parent?.() ?? ({} as ExtendedLinkOptions)),
+      trustedDomains: [] as string[],
+    };
+  },
+
   addAttributes() {
+    const { trustedDomains } = this.options;
+
     return {
       ...this.parent?.(),
       target: {
@@ -27,7 +66,9 @@ export const LinkExtension = Link.extend({
         default: null,
         parseHTML: (element) => {
           const href = element.getAttribute("href") ?? "";
-          return isSameDomain(href) ? null : "noopener noreferrer nofollow";
+          return isTrustedDomain(href, trustedDomains)
+            ? null
+            : "noopener noreferrer nofollow";
         },
       },
     };
@@ -53,16 +94,23 @@ export const LinkExtension = Link.extend({
                   defaultProtocol,
                 }),
             )
-            .filter((link) => this.options.shouldAutoLink?.(link.value) !== false)
-            .map((link) => ({ text: link.value, data: { href: link.href }, index: link.start })),
+            .filter(
+              (link) => this.options.shouldAutoLink?.(link.value) !== false,
+            )
+            .map((link) => ({
+              text: link.value,
+              data: { href: link.href },
+              index: link.start,
+            })),
         type: this.type,
         getAttributes: (match) => {
           const href = match.data?.href ?? "";
-          const sameDomain = isSameDomain(href);
           return {
             href,
-            target: sameDomain ? "_self" : "_blank",
-            rel: sameDomain ? null : "noopener noreferrer nofollow",
+            target: isSameDomain(href) ? "_self" : "_blank",
+            rel: isTrustedDomain(href, this.options.trustedDomains)
+              ? null
+              : "noopener noreferrer nofollow",
           };
         },
       }),
@@ -80,7 +128,11 @@ export const LinkExtension = Link.extend({
             const range = getMarkRange(view.state.doc.resolve(pos), this.type);
             if (!range) return false;
 
-            const selection = TextSelection.create(view.state.doc, range.from, range.to);
+            const selection = TextSelection.create(
+              view.state.doc,
+              range.from,
+              range.to,
+            );
             view.dispatch(view.state.tr.setSelection(selection));
             return true;
           },

package/src/extensions/editor/get-editor-extensions.ts

@@ -29,6 +29,7 @@ interface GetExtensionsOptions {
   getImageById?: (fileId: string) => string | null;
   onKatexClick?: (latex: string, pos?: number) => void;
   onFigureClick?: (attrs: any, pos: number) => void;
+  trustedDomains?: string[];
 }
 
 /**
@@ -44,8 +45,9 @@ export function getEditorExtensions(options: GetExtensionsOptions) {
     getImageById,
     onKatexClick,
     onFigureClick,
+    trustedDomains,
   } = options;
-  const sharedExtensions = getSharedExtensions();
+  const sharedExtensions = getSharedExtensions({ trustedDomains });
 
   return [
     ...sharedExtensions,

package/src/utils/get-shared-extensions.ts

@@ -1,25 +1,41 @@
 import StarterKit from "@tiptap/starter-kit";
-import { Details, DetailsContent, DetailsSummary } from "@tiptap/extension-details";
+import {
+  Details,
+  DetailsContent,
+  DetailsSummary,
+} from "@tiptap/extension-details";
 import Highlight from "@tiptap/extension-highlight";
-import { LinkExtension, BaseMythReality, BaseMythRealityBlock } from "@/extensions/base";
+import {
+  LinkExtension,
+  BaseMythReality,
+  BaseMythRealityBlock,
+} from "@/extensions/base";
 import Subscript from "@tiptap/extension-subscript";
 import Superscript from "@tiptap/extension-superscript";
 import TextAlign from "@tiptap/extension-text-align";
 import { TextStyleKit } from "@tiptap/extension-text-style";
 import { LegacyInlineLatexSE } from "@/extensions/base/compatibility";
 
+export interface SharedExtensionsOptions {
+  /**
+   * Domains (with all their subdomains) whose links are treated as internal —
+   * see the trustedDomains option of LinkExtension.
+   */
+  trustedDomains?: string[];
+}
+
 /**
  * Get all Tiptap extensions for editing and rendering without ReactNodeViewRenderer for Editor
  * Can be used for both static render and editor
  */
-export function getSharedExtensions() {
+export function getSharedExtensions(options: SharedExtensionsOptions = {}) {
   return [
     StarterKit.configure({
       codeBlock: false,
       link: false,
     }),
     Highlight.configure({ multicolor: true }),
-    LinkExtension,
+    LinkExtension.configure({ trustedDomains: options.trustedDomains ?? [] }),
     Superscript,
     Subscript,
     TextAlign.configure({

package/src/utils/html-to-tiptap-content.ts

@@ -1,16 +1,25 @@
 import { generateJSON, type JSONContent } from "@tiptap/core";
-import { getSharedExtensions } from "./get-shared-extensions";
+import {
+  getSharedExtensions,
+  type SharedExtensionsOptions,
+} from "./get-shared-extensions";
 import { BaseFigure } from "@/extensions/base/figure";
 import { TableKit } from "@tiptap/extension-table";
 import { BaseCodeBlock } from "@/extensions/base";
 
 function isJSONContent(value: unknown): value is JSONContent {
   return (
-    typeof value === "object" && value !== null && "type" in value && typeof value.type === "string"
+    typeof value === "object" &&
+    value !== null &&
+    "type" in value &&
+    typeof value.type === "string"
   );
 }
 
-export function htmlToTiptapContent(content: string | JSONContent): JSONContent {
+export function htmlToTiptapContent(
+  content: string | JSONContent,
+  options: SharedExtensionsOptions = {},
+): JSONContent {
   if (isJSONContent(content)) {
     return content;
   }
@@ -30,7 +39,7 @@ export function htmlToTiptapContent(content: string | JSONContent): JSONContent
     return { type: "doc", content: [{ type: "paragraph" }] };
   }
 
-  const sharedExtensions = getSharedExtensions();
+  const sharedExtensions = getSharedExtensions(options);
 
   const extensions = [...sharedExtensions, BaseFigure, TableKit, BaseCodeBlock];