@cyberyozh/text-editor 0.3.2 → 0.5.0

package/dist/styles/index.css

@@ -158,6 +158,40 @@
   padding: 24px;
 }
 
+/* src/editor/components/dialog-error/dialog-error.css */
+.dialog-error {
+  position: relative;
+  padding: 8px 12px;
+  border: 1px solid var(--ui-error-border);
+  border-radius: 4px;
+  background-color: var(--ui-error-bg);
+  color: var(--ui-error-text);
+  font-size: 13px;
+}
+.dialog-error-list {
+  margin: 0;
+  padding-left: 16px;
+}
+.dialog-error-clear-button {
+  display: flex;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+.dialog-error-clear-button svg {
+  width: 14px;
+  height: 14px;
+  color: var(--ui-error-text);
+}
+
 /* src/editor/dialogs/add-katex-dialog/add-katex-dialog.css */
 .katex-dialog-title {
   margin: 0 0 16px 0;
@@ -298,14 +332,6 @@
 .link-dialog-input::placeholder {
   color: var(--tiptap-color-text-placeholder);
 }
-.link-dialog-error {
-  padding: 8px 12px;
-  border: 1px solid var(--ui-error-border);
-  border-radius: 4px;
-  background-color: var(--ui-error-bg);
-  color: var(--ui-error-text);
-  font-size: 13px;
-}
 .link-dialog-actions {
   display: flex;
   justify-content: flex-end;
@@ -423,14 +449,6 @@
 .video-dialog-platform-list li {
   margin: 4px 0;
 }
-.video-dialog-error {
-  padding: 8px 12px;
-  border: 1px solid var(--ui-error-border);
-  border-radius: 4px;
-  background-color: var(--ui-error-bg);
-  color: var(--ui-error-text);
-  font-size: 13px;
-}
 .video-dialog-actions {
   display: flex;
   justify-content: flex-end;
@@ -563,34 +581,8 @@
   background: var(--ui-secondary-bg);
   color: var(--ui-text-primary);
 }
-.image-dialog-error {
-  position: relative;
+.image-dialog-error-spacing {
   margin-bottom: 16px;
-  padding: 8px 12px;
-  border: 1px solid var(--ui-error-border);
-  border-radius: 4px;
-  background-color: var(--ui-error-bg);
-  color: var(--ui-error-text);
-  font-size: 13px;
-}
-.image-dialog-error-clear-button {
-  display: flex;
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-}
-.image-dialog-error-clear-button svg {
-  width: 14px;
-  height: 14px;
-  color: var(--ui-error-text);
 }
 
 /* src/styles/components.css */

package/package.json

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

package/src/editor/components/dialog-error/dialog-error.css

@@ -0,0 +1,35 @@
+.dialog-error {
+  position: relative;
+  padding: 8px 12px;
+  border: 1px solid var(--ui-error-border);
+  border-radius: 4px;
+  background-color: var(--ui-error-bg);
+  color: var(--ui-error-text);
+  font-size: 13px;
+}
+
+.dialog-error-list {
+  margin: 0;
+  padding-left: 16px;
+}
+
+.dialog-error-clear-button {
+  display: flex;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.dialog-error-clear-button svg {
+  width: 14px;
+  height: 14px;
+  color: var(--ui-error-text);
+}

package/src/editor/components/dialog-error/dialog-error.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { isCombinedError } from "@/utils";
+
+import { TiptapX } from "../../../icons";
+import { useTiptapTranslations } from "../../context";
+import { useMemo } from "react";
+
+interface DialogErrorProps {
+  error: unknown;
+  onClose?: () => void;
+  className?: string;
+}
+
+export const DialogError = ({ error, onClose, className }: DialogErrorProps) => {
+  const translations = useTiptapTranslations();
+
+  const renderedMessage = useMemo(() => {
+    if (typeof error === "string") {
+      return error || translations.common.unknownError;
+    }
+
+    if (isCombinedError(error)) {
+      const safeErrors = error.cause.filter((e) => Boolean(e.message));
+      const errorsToDisplay =
+        safeErrors.length === error.cause.length
+          ? safeErrors
+          : [new Error(translations.common.unknownError), ...safeErrors];
+
+      if (errorsToDisplay.length === 1) {
+        return errorsToDisplay[0].message;
+      }
+
+      return (
+        <ul className="dialog-error-list">
+          {errorsToDisplay.map((cause, index) => (
+            <li key={`${index}_${cause.message}`}>{cause.message}</li>
+          ))}
+        </ul>
+      );
+    }
+
+    if (error instanceof Error) {
+      return error.message || translations.common.unknownError;
+    }
+
+    return translations.common.unknownError;
+  }, [error, translations]);
+
+  return (
+    <div className={`dialog-error ${className || ""}`}>
+      {renderedMessage}
+      {onClose && (
+        <button
+          type="button"
+          className="dialog-error-clear-button"
+          onClick={onClose}
+          aria-label={translations.common.clearError}
+        >
+          <TiptapX />
+        </button>
+      )}
+    </div>
+  );
+};

package/src/editor/components/dialog-error/index.ts

@@ -0,0 +1 @@
+export { DialogError } from './dialog-error';

package/src/editor/components/index.ts

@@ -1,3 +1,4 @@
 export { Button } from './button';
 export { Input } from './input';
 export { CommonModal } from './common-modal';
+export { DialogError } from './dialog-error';

package/src/editor/dialogs/add-link-dialog/add-link-dialog.css

@@ -48,15 +48,6 @@
   color: var(--tiptap-color-text-placeholder);
 }
 
-.link-dialog-error {
-  padding: 8px 12px;
-  border: 1px solid var(--ui-error-border);
-  border-radius: 4px;
-  background-color: var(--ui-error-bg);
-  color: var(--ui-error-text);
-  font-size: 13px;
-}
-
 .link-dialog-actions {
   display: flex;
   justify-content: flex-end;

package/src/editor/dialogs/add-link-dialog/add-link-dialog.tsx

@@ -2,7 +2,7 @@
 
 import { ChangeEvent, useEffect, useRef, useState } from "react";
 
-import { CommonModal } from "../../components";
+import { CommonModal, DialogError } from "../../components";
 import { useTiptapTranslations } from "../../context";
 import { LinkDialogContextProps } from "@/types/link";
 
@@ -186,7 +186,7 @@ export const AddLinkDialog = ({
           <p className="link-dialog-help-text">{translations.link.addNofollowHelp}</p>
         </div>
 
-        {error && <div className="link-dialog-error">{error}</div>}
+        {error && <DialogError error={error} />}
       </div>
 
       <div className="link-dialog-actions">

package/src/editor/dialogs/add-video-dialog/add-video-dialog.css

@@ -83,15 +83,6 @@
   margin: 4px 0;
 }
 
-.video-dialog-error {
-  padding: 8px 12px;
-  border: 1px solid var(--ui-error-border);
-  border-radius: 4px;
-  background-color: var(--ui-error-bg);
-  color: var(--ui-error-text);
-  font-size: 13px;
-}
-
 .video-dialog-actions {
   display: flex;
   justify-content: flex-end;

package/src/editor/dialogs/add-video-dialog/add-video-dialog.tsx

@@ -2,7 +2,7 @@
 
 import { ChangeEvent, useEffect, useRef, useState } from "react";
 
-import { CommonModal } from "../../components";
+import { CommonModal, DialogError } from "../../components";
 import { detectVideoHosting, VideoHosting } from "../../../utils/detect-video-hosting";
 import { useTiptapTranslations } from "../../context";
 
@@ -128,7 +128,7 @@ export const AddVideoDialog = ({ open, onClose, onVideoAdd }: AddVideoDialogProp
           </ul>
         </div>
 
-        {error && <div className="video-dialog-error">{error}</div>}
+        {error && <DialogError error={error} />}
       </div>
 
       <div className="video-dialog-actions">

package/src/editor/dialogs/image-dialog/image-dialog.css

@@ -101,34 +101,6 @@
   color: var(--ui-text-primary);
 }
 
-.image-dialog-error {
-  position: relative;
+.image-dialog-error-spacing {
   margin-bottom: 16px;
-  padding: 8px 12px;
-  border: 1px solid var(--ui-error-border);
-  border-radius: 4px;
-  background-color: var(--ui-error-bg);
-  color: var(--ui-error-text);
-  font-size: 13px;
-}
-
-.image-dialog-error-clear-button {
-  display: flex;
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-}
-
-.image-dialog-error-clear-button svg {
-  width: 14px;
-  height: 14px;
-  color: var(--ui-error-text);
 }

package/src/editor/dialogs/image-dialog/image-dialog.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useRef, useState } from "react";
 
 import { TiptapX } from "../../../icons";
 
-import { Button, CommonModal, Input } from "../../components";
+import { Button, CommonModal, DialogError, Input } from "../../components";
 import { ImageUploadHandler, TiptapImageAttrs, ImageGetHandler, FigureAttrs } from "../../../types";
 import { resolveImageSrc } from "../../../utils/image-src-resolver";
 import { useTiptapTranslations } from "../../context";
@@ -219,7 +219,7 @@ export const ImageDialog = ({
 
       handleClose();
     } catch (error) {
-      setFileUploadError(error instanceof Error ? error : new Error(translations.imageDialog.unknownError));
+      setFileUploadError(error instanceof Error ? error : new Error(translations.common.unknownError));
     } finally {
       setIsUploading(false);
     }
@@ -334,17 +334,11 @@ export const ImageDialog = ({
         </div>
       </div>
       {fileUploadError && (
-        <div className="image-dialog-error">
-          {fileUploadError.message || translations.imageDialog.unknownError}
-          <button
-            type="button"
-            className="image-dialog-error-clear-button"
-            onClick={() => setFileUploadError(null)}
-            aria-label={translations.imageDialog.clearError}
-          >
-            <TiptapX />
-          </button>
-        </div>
+        <DialogError
+          error={fileUploadError}
+          onClose={() => setFileUploadError(null)}
+          className="image-dialog-error-spacing"
+        />
       )}
       <div className="image-dialog-actions">
         <Button

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/index.ts

@@ -2,3 +2,4 @@ export { Tiptap, type TiptapProps, type KatexDialogContextProps } from "./editor
 export type { SupportedLanguage as TiptapSupportedLanguages } from "../utils/get-translations";
 export { type JSONContent } from "@tiptap/react";
 export { htmlToTiptapContent } from "../utils/html-to-tiptap-content";
+export { type CombinedErrors as TipTapCombinedErrors  } from '@/types/common'

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/styles/components.css

@@ -2,6 +2,7 @@
 @import "../editor/components/button/button.css";
 @import "../editor/components/input/input.css";
 @import "../editor/components/common-modal/common-modal.css";
+@import "../editor/components/dialog-error/dialog-error.css";
 
 /* Dialog Styles */
 @import "../editor/dialogs/add-katex-dialog/add-katex-dialog.css";

package/src/translations/en.json

@@ -113,9 +113,7 @@
     "captionPlaceholder": "Description under image...",
     "save": "Save",
     "add": "Add",
-    "invalidFileType": "File is not an image",
-    "unknownError": "Unknown error",
-    "clearError": "Clear error"
+    "invalidFileType": "Invalid file format."
   },
   "videoUpload": {
     "title": "Add video",
@@ -160,6 +158,8 @@
     "words": ["word", "words", "words"]
   },
   "common": {
-    "cancel": "Cancel"
+    "cancel": "Cancel",
+    "unknownError": "Unknown error",
+    "clearError": "Clear error"
   }
 }

package/src/translations/ru.json

@@ -113,9 +113,7 @@
     "captionPlaceholder": "Описание под изображением...",
     "save": "Сохранить",
     "add": "Добавить",
-    "invalidFileType": "Файл не является изображением",
-    "unknownError": "Неизвестная ошибка",
-    "clearError": "Сбросить ошибку"
+    "invalidFileType": "Неверный формат файла."
   },
   "videoUpload": {
     "title": "Добавить видео",
@@ -160,6 +158,8 @@
     "words": ["слово", "слова", "слов"]
   },
   "common": {
-    "cancel": "Отменить"
+    "cancel": "Отменить",
+    "unknownError": "Неизвестная ошибка",
+    "clearError": "Сбросить ошибку"
   }
 }

package/src/types/common.ts

@@ -0,0 +1,3 @@
+export interface CombinedErrors extends Error {
+  cause: Array<Error>
+}

package/src/types/index.ts

@@ -1 +1,2 @@
+export * from './common';
 export * from './image-handler';