@cyberyozh/text-editor 0.5.2 → 0.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberyozh/text-editor",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "description": "Rich text editor library based on Tiptap for CyberYozh",
   "author": "CyberYozh",
   "license": "MIT",
@@ -17,6 +17,11 @@
       "import": "./dist/render/client.mjs",
       "require": "./dist/render/client.js"
     },
+    "./html": {
+      "types": "./dist/html.d.ts",
+      "import": "./dist/html.mjs",
+      "require": "./dist/html.js"
+    },
     "./editor": {
       "types": "./dist/editor.d.ts",
       "import": "./dist/editor.mjs",
@@ -74,6 +79,7 @@
     "@tiptap/extension-text-align": "3.31.3",
     "@tiptap/extensions": "3.31.3",
     "@tiptap/html": "3.31.3",
+    "happy-dom": "^20.14.0",
     "@tiptap/pm": "3.31.3",
     "@tiptap/react": "3.31.3",
     "@tiptap/starter-kit": "3.31.3",
@@ -82,13 +88,13 @@
     "@tiptap/y-tiptap": "3.0.9",
     "emoji-picker-react": "4.19.1",
     "highlight.js": "11.12.0",
-    "katex": "0.16.35",
+    "katex": "0.18.10",
     "lowlight": "3.3.0",
     "y-protocols": "1.0.7",
     "yjs": "13.6.30"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.30.0",
+    "@changesets/cli": "^3.0.3",
     "@types/node": "^25.3.3",
     "cross-env": "^10.1.0",
     "eslint": "^10.0.2",

package/src/editor/editor.tsx

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

package/src/extensions/base/code-block.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+import { generateHTML, generateJSON } from "@tiptap/html";
+import StarterKit from "@tiptap/starter-kit";
+import { BaseCodeBlock } from "./code-block";
+
+const extensions = [StarterKit.configure({ codeBlock: false }), BaseCodeBlock];
+
+const codeBlock = (language: string | null) => ({
+  type: "doc",
+  content: [
+    {
+      type: "codeBlock",
+      attrs: { language },
+      content: [{ type: "text", text: "{}" }],
+    },
+  ],
+});
+
+describe("BaseCodeBlock", () => {
+  it("renders the language as a class only, not as a raw attribute", () => {
+    const html = generateHTML(codeBlock("json"), extensions);
+    expect(html).toBe('<pre><code class="language-json">{}</code></pre>');
+  });
+
+  it("keeps the language through an HTML round-trip", () => {
+    const html = generateHTML(codeBlock("json"), extensions);
+    expect(generateJSON(html, extensions)).toEqual(codeBlock("json"));
+  });
+
+  it("reads the legacy data-language attribute", () => {
+    const json = generateJSON('<pre><code data-language="python">x</code></pre>', extensions);
+    expect(json.content?.[0]?.attrs?.language).toBe("python");
+  });
+
+  it("falls back to bash when the language is unknown", () => {
+    const json = generateJSON("<pre><code>x</code></pre>", extensions);
+    expect(json.content?.[0]?.attrs?.language).toBe("bash");
+  });
+});

package/src/extensions/base/code-block.ts

@@ -5,6 +5,13 @@ import { common, createLowlight } from "lowlight";
 const lowlight = createLowlight(common);
 lowlight.register("html", html);
 
+function languageFromClass(code: Element | null, prefix: string): string | null {
+  const languageClass = Array.from(code?.classList ?? []).find((className) =>
+    className.startsWith(prefix),
+  );
+  return languageClass ? languageClass.slice(prefix.length) : null;
+}
+
 export const BaseCodeBlock = CodeBlockLowlight.configure({
   lowlight,
 }).extend({
@@ -12,11 +19,18 @@ export const BaseCodeBlock = CodeBlockLowlight.configure({
   draggable: true,
 
   addAttributes() {
+    const { languageClassPrefix } = this.options;
+
     return {
       language: {
         default: null,
+        rendered: false,
         parseHTML: (element: HTMLElement) => {
-          return element.querySelector("code")?.getAttribute("data-language") || "bash";
+          const code = element.querySelector("code");
+          const fromClass = languageClassPrefix
+            ? languageFromClass(code, languageClassPrefix)
+            : null;
+          return fromClass || code?.getAttribute("data-language") || "bash";
         },
       },
     };

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

@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { isTrustedDomain } from "./link";
+import { isOwnDomain, isTrustedDomain, linkAttributes } from "./link";
 
 describe("isTrustedDomain", () => {
   afterEach(() => {
@@ -58,3 +58,56 @@ describe("isTrustedDomain", () => {
     ).toBe(true);
   });
 });
+
+describe("isOwnDomain", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("matches the own domain and its subdomains", () => {
+    expect(isOwnDomain("https://cyberyozh.com/", ["cyberyozh.com"])).toBe(true);
+    expect(isOwnDomain("https://app.cyberyozh.com/ru/proxy/", ["cyberyozh.com"])).toBe(true);
+    expect(isOwnDomain("https://cyberyozh.pro/", ["cyberyozh.com"])).toBe(false);
+  });
+
+  it("treats the current window hostname as own regardless of the list", () => {
+    vi.stubGlobal("window", { location: { hostname: "app.detect.expert" } });
+    expect(isOwnDomain("https://app.detect.expert/page", [])).toBe(true);
+  });
+
+  it("returns false for unparseable urls", () => {
+    expect(isOwnDomain("/relative/path", ["cyberyozh.com"])).toBe(false);
+  });
+});
+
+describe("linkAttributes", () => {
+  const options = { ownDomains: ["cyberyozh.com"], trustedDomains: ["cyberyozh.pro"] };
+
+  it("opens own links in the same tab without rel", () => {
+    expect(linkAttributes("https://app.cyberyozh.com/ru/catalog/", options)).toEqual({
+      target: "_self",
+      rel: null,
+    });
+  });
+
+  it("opens trusted links in a new tab without rel", () => {
+    expect(linkAttributes("https://cyberyozh.pro/blog/", options)).toEqual({
+      target: "_blank",
+      rel: null,
+    });
+  });
+
+  it("opens external links in a new tab with nofollow", () => {
+    expect(linkAttributes("https://github.com/", options)).toEqual({
+      target: "_blank",
+      rel: "noopener noreferrer nofollow",
+    });
+  });
+
+  it("keeps the previous behaviour when no domains are configured", () => {
+    expect(linkAttributes("https://app.cyberyozh.com/", { ownDomains: [], trustedDomains: [] })).toEqual({
+      target: "_blank",
+      rel: "noopener noreferrer nofollow",
+    });
+  });
+});

package/src/extensions/base/link.ts

@@ -4,6 +4,12 @@ import { Plugin, TextSelection } from "@tiptap/pm/state";
 import { find } from "linkifyjs";
 
 export interface ExtendedLinkOptions extends LinkOptions {
+  /**
+   * Domains (with all their subdomains) of the site the content belongs to:
+   * such links open in the same tab and get no rel on paste / HTML parsing.
+   * The current window hostname is always own.
+   */
+  ownDomains: string[];
   /**
    * Domains (with all their subdomains) whose links are treated as internal:
    * rel="noopener noreferrer nofollow" is not added on paste / HTML parsing.
@@ -12,64 +18,70 @@ export interface ExtendedLinkOptions extends LinkOptions {
   trustedDomains: string[];
 }
 
-const isSameDomain = (url: string): boolean => {
-  if (typeof window === "undefined") return false;
+export type LinkDomains = Pick<ExtendedLinkOptions, "ownDomains" | "trustedDomains">;
+
+const hostnameOf = (url: string): string | null => {
   try {
-    return new URL(url).hostname === window.location.hostname;
+    return new URL(url).hostname.toLowerCase();
   } catch {
-    return false;
+    return null;
   }
 };
 
-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;
-  }
+const isSameDomain = (url: string): boolean => {
+  if (typeof window === "undefined") return false;
+  return hostnameOf(url) === window.location.hostname;
+};
+
+const matchesDomains = (url: string, domains: string[]): boolean => {
+  const hostname = hostnameOf(url);
+  if (hostname === null) return false;
+  return domains.some((candidate) => {
+    const domain = candidate.toLowerCase();
+    return hostname === domain || hostname.endsWith(`.${domain}`);
+  });
+};
+
+export const isOwnDomain = (url: string, ownDomains: string[]): boolean =>
+  isSameDomain(url) || matchesDomains(url, ownDomains);
+
+export const isTrustedDomain = (url: string, trustedDomains: string[]): boolean =>
+  isSameDomain(url) || matchesDomains(url, trustedDomains);
+
+export const linkAttributes = (
+  href: string,
+  { ownDomains, trustedDomains }: LinkDomains,
+): { target: string; rel: string | null } => {
+  const own = isOwnDomain(href, ownDomains);
+  return {
+    target: own ? "_self" : "_blank",
+    rel: own || isTrustedDomain(href, trustedDomains) ? null : "noopener noreferrer nofollow",
+  };
 };
 
 export const LinkExtension = Link.extend<ExtendedLinkOptions>({
   addOptions() {
     return {
       ...(this.parent?.() ?? ({} as ExtendedLinkOptions)),
+      ownDomains: [] as string[],
       trustedDomains: [] as string[],
     };
   },
 
   addAttributes() {
-    const { trustedDomains } = this.options;
+    const domains = this.options;
 
     return {
       ...this.parent?.(),
       target: {
         default: "_blank",
-        parseHTML: (element) => {
-          const href = element.getAttribute("href") ?? "";
-          return isSameDomain(href) ? "_self" : "_blank";
-        },
+        parseHTML: (element) =>
+          linkAttributes(element.getAttribute("href") ?? "", domains).target,
       },
       rel: {
         default: null,
-        parseHTML: (element) => {
-          const href = element.getAttribute("href") ?? "";
-          return isTrustedDomain(href, trustedDomains)
-            ? null
-            : "noopener noreferrer nofollow";
-        },
+        parseHTML: (element) =>
+          linkAttributes(element.getAttribute("href") ?? "", domains).rel,
       },
     };
   },
@@ -105,13 +117,7 @@ export const LinkExtension = Link.extend<ExtendedLinkOptions>({
         type: this.type,
         getAttributes: (match) => {
           const href = match.data?.href ?? "";
-          return {
-            href,
-            target: isSameDomain(href) ? "_self" : "_blank",
-            rel: isTrustedDomain(href, this.options.trustedDomains)
-              ? null
-              : "noopener noreferrer nofollow",
-          };
+          return { href, ...linkAttributes(href, this.options) };
         },
       }),
     ];

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;
+  ownDomains?: string[];
   trustedDomains?: string[];
 }
 
@@ -45,9 +46,10 @@ export function getEditorExtensions(options: GetExtensionsOptions) {
     getImageById,
     onKatexClick,
     onFigureClick,
+    ownDomains,
     trustedDomains,
   } = options;
-  const sharedExtensions = getSharedExtensions({ trustedDomains });
+  const sharedExtensions = getSharedExtensions({ ownDomains, trustedDomains });
 
   return [
     ...sharedExtensions,

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

@@ -15,7 +15,10 @@ import {
   BaseVideo,
   BaseFigure,
 } from "../base";
-import { getSharedExtensions } from "@/utils/get-shared-extensions";
+import {
+  getSharedExtensions,
+  type SharedExtensionsOptions,
+} from "@/utils/get-shared-extensions";
 import {
   BaseLegacyCustomBlockquote,
   BaseLegacyPromptSE,
@@ -28,8 +31,8 @@ import {
   BaseLegacyFigure,
 } from "../base/compatibility";
 
-export function getRenderExtensions() {
-  const sharedExtensions = getSharedExtensions();
+export function getRenderExtensions(options: SharedExtensionsOptions = {}) {
+  const sharedExtensions = getSharedExtensions(options);
 
   return [
     ...sharedExtensions,

package/src/html/html.test.ts

@@ -0,0 +1,154 @@
+import { describe, expect, it } from "vitest";
+import { htmlToTiptapContent, tiptapContentToHtml } from "./index";
+
+const paragraph = (content: object[]) => ({
+  type: "paragraph",
+  attrs: { textAlign: null },
+  content,
+});
+
+const link = (href: string, target: string, rel: string | null) => ({
+  type: "link",
+  attrs: { href, target, rel, class: null, title: null },
+});
+
+const document = {
+  type: "doc",
+  content: [
+    paragraph([
+      { type: "text", text: "Read about " },
+      {
+        type: "text",
+        marks: [link("https://app.cyberyozh.com/ru/proxy/", "_self", null), { type: "bold" }],
+        text: "proxies",
+      },
+      { type: "text", text: " and " },
+      {
+        type: "text",
+        marks: [link("https://cyberyozh.pro/", "_blank", null)],
+        text: "the blog",
+      },
+      { type: "text", text: " or " },
+      {
+        type: "text",
+        marks: [link("https://github.com/", "_blank", "noopener noreferrer nofollow")],
+        text: "GitHub",
+      },
+      { type: "text", text: "." },
+    ]),
+    {
+      type: "callout",
+      attrs: { type: "info", bgColor: "#F6F0FF", emoji: "⭐", calloutType: null, callout: null },
+      content: [
+        {
+          type: "bulletList",
+          content: [
+            { type: "listItem", content: [paragraph([{ type: "text", text: "First" }])] },
+            { type: "listItem", content: [paragraph([{ type: "text", text: "Second" }])] },
+          ],
+        },
+      ],
+    },
+    {
+      type: "table",
+      content: [
+        {
+          type: "tableRow",
+          content: [
+            {
+              type: "tableHeader",
+              attrs: { colspan: 1, rowspan: 1, colwidth: [200], align: null },
+              content: [paragraph([{ type: "text", text: "Access" }])],
+            },
+            {
+              type: "tableCell",
+              attrs: { colspan: 1, rowspan: 1, colwidth: null, align: null },
+              content: [paragraph([{ type: "text", text: "Manual search" }])],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      type: "codeBlock",
+      attrs: { language: "json" },
+      content: [{ type: "text", text: '{ "ok": true }' }],
+    },
+    paragraph([
+      { type: "text", marks: [{ type: "strike" }], text: "struck" },
+      { type: "text", text: " " },
+      { type: "text", marks: [{ type: "highlight", attrs: { color: "#adb79e" } }], text: "marked" },
+      { type: "text", text: " " },
+      { type: "text", marks: [{ type: "copyable-text" }], text: "copyable" },
+      { type: "text", text: " " },
+      {
+        type: "text",
+        marks: [
+          {
+            type: "textStyle",
+            attrs: { backgroundColor: "", color: "#582f95", fontFamily: "", fontSize: "", lineHeight: "" },
+          },
+        ],
+        text: "colored",
+      },
+      { type: "text", text: " " },
+      { type: "inlineMath", attrs: { latex: "\\utilde{AB}" } },
+    ]),
+    {
+      type: "orderedList",
+      attrs: { start: 1, type: null },
+      content: [{ type: "listItem", content: [paragraph([{ type: "text", text: "One" }])] }],
+    },
+    { type: "blockquote", content: [paragraph([{ type: "text", text: "Quote" }])] },
+    {
+      type: "details",
+      attrs: { open: false },
+      content: [
+        { type: "detailsSummary", content: [{ type: "text", text: "Summary" }] },
+        { type: "detailsContent", content: [paragraph([{ type: "text", text: "Hidden" }])] },
+      ],
+    },
+    {
+      type: "customQuote",
+      content: [
+        { type: "customQuoteText", attrs: { open: true }, content: [{ type: "text", text: "Quote" }] },
+        { type: "customQuoteAuthor", content: [{ type: "text", text: "Author" }] },
+        { type: "customQuoteSign", content: [{ type: "text", text: "Sign" }] },
+      ],
+    },
+    {
+      type: "mythReality",
+      content: [
+        { type: "mythRealityBlock", content: [paragraph([{ type: "text", text: "Myth" }])] },
+        { type: "mythRealityBlock", content: [paragraph([{ type: "text", text: "Reality" }])] },
+      ],
+    },
+    {
+      type: "prompt",
+      content: [
+        { type: "promptHeader", content: [{ type: "text", text: "Prompt" }] },
+        { type: "promptContent", content: [{ type: "text", text: "Text of the prompt" }] },
+      ],
+    },
+  ],
+};
+
+const domains = { ownDomains: ["cyberyozh.com"], trustedDomains: ["cyberyozh.pro"] };
+
+describe("html entry point", () => {
+  it("round-trips every node and mark of the content model", () => {
+    const html = tiptapContentToHtml(document, domains);
+    expect(htmlToTiptapContent(html, domains)).toEqual(document);
+  });
+
+  it("writes custom nodes as HTML the parser reads back", () => {
+    const html = tiptapContentToHtml(document, domains);
+    expect(html).toContain('<div data-callout="info"');
+    expect(html).toContain("<table");
+    expect(html).toContain('<code class="language-json">');
+  });
+
+  it("parses empty HTML into an empty document", () => {
+    expect(htmlToTiptapContent("")).toEqual({ type: "doc", content: [{ type: "paragraph", attrs: { textAlign: null } }] });
+  });
+});

package/src/html/index.ts

@@ -0,0 +1,29 @@
+/**
+ * HTML entry point for @cyberyozh/text-editor
+ *
+ * Converts Tiptap JSON content to HTML and back with the full set of content extensions.
+ * Server-side only: parses with happy-dom, no React and no stylesheets, so it is safe for
+ * server code, scripts and tests. Broken HTML throws instead of returning an empty document.
+ */
+
+import type { JSONContent } from "@tiptap/core";
+import { generateHTML, generateJSON } from "@tiptap/html/server";
+import { getRenderExtensions } from "../extensions/render";
+import type { SharedExtensionsOptions } from "../utils/get-shared-extensions";
+
+export type { SharedExtensionsOptions } from "../utils/get-shared-extensions";
+export type { JSONContent };
+
+export function tiptapContentToHtml(
+  content: JSONContent,
+  options: SharedExtensionsOptions = {},
+): string {
+  return generateHTML(content, getRenderExtensions(options));
+}
+
+export function htmlToTiptapContent(
+  html: string,
+  options: SharedExtensionsOptions = {},
+): JSONContent {
+  return generateJSON(html, getRenderExtensions(options));
+}

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

@@ -17,6 +17,11 @@ import { TextStyleKit } from "@tiptap/extension-text-style";
 import { LegacyInlineLatexSE } from "@/extensions/base/compatibility";
 
 export interface SharedExtensionsOptions {
+  /**
+   * Domains (with all their subdomains) of the site the content belongs to —
+   * see the ownDomains option of LinkExtension.
+   */
+  ownDomains?: string[];
   /**
    * Domains (with all their subdomains) whose links are treated as internal —
    * see the trustedDomains option of LinkExtension.
@@ -35,7 +40,10 @@ export function getSharedExtensions(options: SharedExtensionsOptions = {}) {
       link: false,
     }),
     Highlight.configure({ multicolor: true }),
-    LinkExtension.configure({ trustedDomains: options.trustedDomains ?? [] }),
+    LinkExtension.configure({
+      ownDomains: options.ownDomains ?? [],
+      trustedDomains: options.trustedDomains ?? [],
+    }),
     Superscript,
     Subscript,
     TextAlign.configure({

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

@@ -1,11 +1,7 @@
-import { generateJSON, type JSONContent } from "@tiptap/core";
-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";
+import { type JSONContent } from "@tiptap/core";
+import { generateJSON } from "@tiptap/html";
+import { getRenderExtensions } from "@/extensions/render";
+import type { SharedExtensionsOptions } from "./get-shared-extensions";
 
 function isJSONContent(value: unknown): value is JSONContent {
   return (
@@ -39,12 +35,8 @@ export function htmlToTiptapContent(
     return { type: "doc", content: [{ type: "paragraph" }] };
   }
 
-  const sharedExtensions = getSharedExtensions(options);
-
-  const extensions = [...sharedExtensions, BaseFigure, TableKit, BaseCodeBlock];
-
   try {
-    return generateJSON(content, extensions);
+    return generateJSON(content, getRenderExtensions(options));
   } catch (error) {
     console.error("Failed to convert HTML to Tiptap content:", error);
     return { type: "doc", content: [{ type: "paragraph" }] };