@cyberyozh/text-editor 0.1.1

package/src/editor/index.ts

@@ -0,0 +1,3 @@
+export { Tiptap } from "./editor";
+export type { SupportedLanguage as TiptapSupportedLanguages } from "../utils/get-translations";
+export { type JSONContent } from "@tiptap/react";

package/src/extensions/base/callout.ts

@@ -0,0 +1,138 @@
+import { handleExitNode } from "@/utils/handle-exit-node";
+import { migrateLegacyCallouts } from "@/utils/migrate-legacy-callouts";
+import { mergeAttributes, Node } from "@tiptap/core";
+
+export type CalloutType = "info" | "warning" | "success" | "error";
+
+const legacyTypeMap: Record<string, CalloutType> = {
+  question: "info",
+  idea: "warning",
+  info: "success",
+  error: "error",
+};
+
+export const BaseCallout = Node.create({
+  name: "callout",
+
+  group: "block",
+  content: "block+",
+
+  draggable: true,
+  isolating: true,
+
+  addAttributes() {
+    return {
+      type: {
+        default: "info" as CalloutType,
+
+        parseHTML: (element) => {
+          if (typeof element === "string") return "info";
+
+          const dataCallout = element.getAttribute("data-callout");
+
+          if (dataCallout) {
+            return dataCallout as CalloutType;
+          }
+
+          const legacyType = element.getAttribute("calloutType");
+          if (legacyType) {
+            return legacyTypeMap[legacyType];
+          }
+
+          if (element.classList) {
+            if (element.classList.contains("callout--error")) return "error";
+            if (element.classList.contains("callout--question")) return "info";
+            if (element.classList.contains("callout--idea")) return "warning";
+            if (element.classList.contains("callout--info")) return "success";
+          }
+
+          return "info";
+        },
+        renderHTML: (attributes) => {
+          return {
+            "data-callout": attributes.type,
+          };
+        },
+      },
+      bgColor: {
+        default: null,
+        parseHTML: (element) => {
+          if (typeof element === "string") return null;
+          return element.getAttribute("data-bg-color");
+        },
+        renderHTML: (attributes) => {
+          if (!attributes.bgColor) return {};
+          return {
+            "data-bg-color": attributes.bgColor,
+          };
+        },
+      },
+      emoji: {
+        default: null,
+        parseHTML: (element) => {
+          if (typeof element === "string") return null;
+          return element.getAttribute("data-emoji");
+        },
+        renderHTML: (attributes) => {
+          if (!attributes.emoji) return {};
+          return {
+            "data-emoji": attributes.emoji,
+          };
+        },
+      },
+      calloutType: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("calloutType"),
+        renderHTML: () => ({}),
+      },
+      callout: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("callout"),
+        renderHTML: () => ({}),
+      },
+    };
+  },
+
+  onCreate() {
+    migrateLegacyCallouts(this.editor);
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => handleExitNode(this.editor, this.name),
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "div[data-callout]",
+      },
+      {
+        tag: "callout",
+        priority: 51,
+      },
+      {
+        tag: "div",
+        priority: 50,
+        getAttrs: (element) => {
+          if (typeof element === "string") return false;
+          if (
+            element.classList.contains("callout") ||
+            element.classList.contains("callout--error") ||
+            element.classList.contains("callout--question") ||
+            element.classList.contains("callout--idea") ||
+            element.classList.contains("callout--info")
+          ) {
+            return {};
+          }
+          return false;
+        },
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes(HTMLAttributes), 0];
+  },
+});

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

@@ -0,0 +1,24 @@
+import { CodeBlockLowlight } from "@tiptap/extension-code-block-lowlight";
+import html from "highlight.js/lib/languages/xml";
+import { common, createLowlight } from "lowlight";
+
+const lowlight = createLowlight(common);
+lowlight.register("html", html);
+
+export const BaseCodeBlock = CodeBlockLowlight.configure({
+  lowlight,
+}).extend({
+  selectable: false,
+  draggable: true,
+
+  addAttributes() {
+    return {
+      language: {
+        default: null,
+        parseHTML: (element: HTMLElement) => {
+          return element.querySelector("code")?.getAttribute("data-language") || "bash";
+        },
+      },
+    };
+  },
+});

package/src/extensions/base/compatibility.ts

@@ -0,0 +1,493 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+import { TextSelection } from "@tiptap/pm/state";
+import { resolveImageSrc } from "../../utils/image-src-resolver";
+import Image from "@tiptap/extension-image";
+import { FigureOptions } from "./figure";
+import { handleExitNode } from "@/utils/handle-exit-node";
+
+/**
+ * Legacy callout extension for backward compatibility with old Tiptap content.
+ * @deprecated Use {@link Callout} with `type="info"` instead.
+ * This extension is kept only for rendering old content that uses the `calloutTip` node type.
+ */
+export const BaseLegacyBookAlert = Node.create({
+  name: "calloutAlert",
+
+  group: "block",
+  content: "block+",
+
+  draggable: true,
+  isolating: true,
+
+  addAttributes() {
+    return {
+      type: {
+        default: "error",
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div[data-type="callout-alert"]',
+      },
+    ];
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => handleExitNode(this.editor, this.name),
+    };
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes(HTMLAttributes, { "data-type": "callout-alert" }), 0];
+  },
+});
+
+/**
+ * Legacy callout extension for backward compatibility with old Tiptap content.
+ * @deprecated Use {@link Callout} with `type="info"` instead.
+ * This extension is kept only for rendering old content that uses the `calloutTip` node type.
+ */
+export const BaseLegacyBookTip = Node.create({
+  name: "calloutTip",
+
+  group: "block",
+  content: "block+",
+
+  draggable: true,
+  isolating: true,
+
+  addAttributes() {
+    return {
+      type: {
+        default: "info",
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div[data-type="callout-tip"]',
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes(HTMLAttributes, { "data-type": "callout-tip" }), 0];
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => handleExitNode(this.editor, this.name),
+    };
+  },
+});
+
+/**
+ * Legacy callout extension for backward compatibility with old Tiptap content.
+ * @deprecated
+ */
+export const BaseLegacySEQuote = Node.create({
+  name: "customQuoteV2",
+  group: "block",
+  content: "customQuoteText customQuoteAuthor customQuoteSign",
+  selectable: false,
+  draggable: true,
+  isolating: true,
+
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => {
+        const { view, schema } = this.editor;
+        const { state } = view;
+        const { selection } = state;
+
+        const $pos = selection.$from;
+        let depth = $pos.depth;
+        let isInsideCustomQuoteV2 = false;
+
+        while (depth > 0) {
+          const parentNode = $pos.node(depth);
+          if (parentNode.type.name === this.name) {
+            isInsideCustomQuoteV2 = true;
+            break;
+          }
+          depth--;
+        }
+
+        if (!isInsideCustomQuoteV2) {
+          return false;
+        }
+
+        const { tr } = state;
+        const posAfter = $pos.after(depth);
+
+        const paragraphNode = schema.nodes.paragraph.createAndFill();
+        if (!paragraphNode) return false;
+
+        tr.insert(posAfter, paragraphNode);
+        tr.setSelection(TextSelection.create(tr.doc, posAfter + 1));
+        view.dispatch(tr);
+
+        return true;
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "div[data-custom-quote-v2]",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes(HTMLAttributes, { "data-custom-quote-v2": "" }), 0];
+  },
+});
+
+/**
+ * Legacy PromptV2 extension for backward compatibility with old Tiptap copy editor content.
+ * @deprecated Use {@link Prompt} instead.
+ * This extension is kept only for rendering old content that uses the `promptV2` node type.
+ */
+export const BaseLegacyPromptSE = Node.create({
+  name: "promptV2",
+  group: "block",
+  content: "(promptHeader | promptV2Header) (promptContent | promptV2Content)",
+  selectable: false,
+  draggable: true,
+
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => {
+        const { view, schema } = this.editor;
+        const { state } = view;
+        const { selection } = state;
+
+        const $pos = selection.$from;
+        let depth = $pos.depth;
+        let isInsidePromptV2 = false;
+
+        while (depth > 0) {
+          const parentNode = $pos.node(depth);
+          if (parentNode.type.name === this.name) {
+            isInsidePromptV2 = true;
+            break;
+          }
+          depth--;
+        }
+
+        if (!isInsidePromptV2) {
+          return false;
+        }
+
+        const { tr } = state;
+        const posAfter = $pos.after(depth);
+
+        const paragraphNode = schema.nodes.paragraph.createAndFill();
+        if (!paragraphNode) return false;
+
+        tr.insert(posAfter, paragraphNode);
+        tr.setSelection(TextSelection.create(tr.doc, posAfter + 1));
+        view.dispatch(tr);
+
+        return true;
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "div[data-prompt-v2]",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes(HTMLAttributes, { "data-prompt": "" }), 0];
+  },
+});
+
+/**
+ * Legacy PromptV2Header extension for backward compatibility with old Tiptap copy editor content.
+ * @deprecated Use {@link PromptHeader} instead.
+ * This extension is kept only for rendering old content that uses the `promptV2Header` node type.
+ */
+export const BaseLegacyPromptSEHeader = Node.create({
+  name: "promptV2Header",
+  group: "block",
+  content: "inline*",
+  selectable: true,
+  draggable: false,
+
+  parseHTML() {
+    return [
+      {
+        tag: "div[data-prompt-v2-header]",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes(HTMLAttributes, { "data-prompt-header": "" }), 0];
+  },
+
+  // addNodeView() {
+  //   return ReactNodeViewRenderer(PromptHeaderView);
+  // },
+});
+
+/**
+ * Legacy PromptV2Content extension for backward compatibility with old Tiptap copy editor content.
+ * @deprecated Use {@link PromptContent} instead.
+ * This extension is kept only for rendering old content that uses the `promptV2Content` node type.
+ */
+export const BaseLegacyPromptSEContent = Node.create({
+  name: "promptV2Content",
+  group: "block",
+  content: "text*",
+  draggable: false,
+  selectable: true,
+
+  parseHTML() {
+    return [
+      {
+        tag: "div[data-prompt-v2-content]",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes(HTMLAttributes, { "data-prompt-content": "" }), 0];
+  },
+});
+
+/**
+ * Legacy Custom Quote extension for backward compatibility with old Tiptap copy editor content.
+ * @deprecated
+ */
+export const BaseLegacyCustomBlockquote = Node.create({
+  name: "customBlockquote",
+
+  group: "block",
+  content: "block+",
+
+  draggable: true,
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div[data-type="custom-blockquote"]',
+      },
+    ];
+  },
+
+  renderHTML() {
+    return ["blockquote", 0];
+  },
+});
+
+/**
+ * Legacy YouTube extension for backward compatibility with old Tiptap content.
+ * @deprecated Use {@link Video} extension instead.
+ * This extension is kept only for rendering old content that uses the `youtube` node type.
+ * Renders using the same VideoView component.
+ */
+export const BaseLegacyYouTube = Node.create({
+  name: "youtube",
+
+  group: "block",
+  selectable: true,
+  draggable: true,
+  isolating: true,
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+      },
+      width: {
+        default: 640,
+      },
+      height: {
+        default: 480,
+      },
+      start: {
+        default: 0,
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'iframe[src*="youtube.com"]',
+      },
+      {
+        tag: 'iframe[src*="youtu.be"]',
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["video-embed", { src: HTMLAttributes.src }];
+  },
+});
+
+/**
+ * Legacy InlineLatex extension for backward compatibility with old Tiptap copy editor content.
+ * @deprecated Use the Mathematics extension instead.
+ * This extension renders old `inlineLatex` nodes as inline code for basic compatibility.
+ */
+export const LegacyInlineLatexSE = Node.create({
+  name: "inlineLatex",
+  group: "inline",
+  inline: true,
+  content: "text*",
+  atom: true,
+
+  addAttributes() {
+    return {
+      latex: {
+        default: "",
+        parseHTML: (element) => element.getAttribute("data-latex") || element.textContent || "",
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "span.inline-latex",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["code", mergeAttributes(HTMLAttributes, { class: "inline-latex" }), 0];
+  },
+});
+
+/**
+ * Legacy figure extension for backward compatibility with old Tiptap copy editor content.
+ * @deprecated Use {@link Figure} instead.
+ * This extension is kept only for rendering old content that uses the `figure` node type.
+ */
+export const BaseLegacyFigure = Image.extend<FigureOptions>({
+  name: "figure",
+  group: "block",
+  content: "inline*",
+  draggable: true,
+  isolating: true,
+  selectable: false,
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      getImageById: undefined,
+    };
+  },
+
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      fileId: {
+        default: null,
+        parseHTML: (element) => {
+          const img = element.querySelector("img");
+          const fileIdFromImg = img?.getAttribute("fileId") || img?.getAttribute("data-file-id");
+          const fileIdFromFigure =
+            element.getAttribute("fileId") || element.getAttribute("data-file-id");
+          return fileIdFromImg ?? fileIdFromFigure;
+        },
+        renderHTML: (attributes) => {
+          if (!attributes.fileId) return {};
+          return { "data-file-id": attributes.fileId };
+        },
+      },
+      src: {
+        default: null,
+        parseHTML: (element) => {
+          const img = element.querySelector("img") || element;
+          return img.getAttribute("src");
+        },
+      },
+      alt: {
+        default: null,
+        parseHTML: (element) => {
+          const img = element.querySelector("img") || element;
+          return img.getAttribute("alt");
+        },
+      },
+      title: {
+        default: null,
+        parseHTML: (element) => {
+          const img = element.querySelector("img") || element;
+          return img.getAttribute("title");
+        },
+      },
+      caption: {
+        default: null,
+        parseHTML: (element) => {
+          const caption = element.querySelector("figcaption");
+          return caption ? caption.innerText : null;
+        },
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "figure",
+        getAttrs: (element) => {
+          if (typeof element === "string") return false;
+          const img = element.querySelector("img");
+          return img ? {} : false;
+        },
+      },
+      {
+        tag: "img[src]",
+      },
+    ];
+  },
+
+  renderHTML({ node }) {
+    const resolvedSrc = resolveImageSrc(
+      {
+        fileId: node.attrs.fileId,
+        src: node.attrs.src,
+      },
+      { getImageById: this.options.getImageById }
+    );
+
+    const figureAttrs = mergeAttributes(this.options.HTMLAttributes);
+
+    const imgAttrs: Record<string, unknown> = {
+      src: resolvedSrc,
+    };
+
+    if (node.attrs.fileId) imgAttrs["data-file-id"] = node.attrs.fileId;
+    if (node.attrs.alt) imgAttrs.alt = node.attrs.alt;
+    if (node.attrs.title) imgAttrs.title = node.attrs.title;
+    if (node.attrs.width) imgAttrs.width = node.attrs.width;
+    if (node.attrs.height) imgAttrs.height = node.attrs.height;
+
+    const hasCaption = node.attrs.caption && node.attrs.caption.trim().length > 0;
+    const figcaptionContent = hasCaption ? ["figcaption", {}, node.attrs.caption] : null;
+
+    return [
+      "figure",
+      figureAttrs,
+      ["img", imgAttrs],
+      ...(figcaptionContent ? [figcaptionContent] : []),
+    ];
+  },
+});

package/src/extensions/base/copyable-text.ts

@@ -0,0 +1,56 @@
+import { Mark, mergeAttributes } from "@tiptap/core";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    copyable: {
+      setCopyable: (attributes?: { class: "copyable" }) => ReturnType;
+      toggleCopyable: (attributes?: { class: "copyable" }) => ReturnType;
+      unsetCopyable: () => ReturnType;
+    };
+  }
+}
+
+export const CopyableText = Mark.create({
+  name: "copyable-text",
+
+  addOptions() {
+    return {
+      HTMLAttributes: {
+        class: "copyable",
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "span",
+        getAttrs: (element) => (element.classList.contains("copyable") ? {} : false),
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["span", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+
+  addCommands() {
+    return {
+      setCopyable:
+        (attributes) =>
+        ({ commands }) => {
+          return commands.setMark(this.name, attributes);
+        },
+      toggleCopyable:
+        (attributes) =>
+        ({ commands }) => {
+          return commands.toggleMark(this.name, attributes);
+        },
+      unsetCopyable:
+        () =>
+        ({ commands }) => {
+          return commands.unsetMark(this.name);
+        },
+    };
+  },
+});