@cyberyozh/text-editor 0.1.1

package/src/extensions/base/custom-quote.ts

@@ -0,0 +1,174 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+import { TextSelection } from "@tiptap/pm/state";
+
+export const BaseCustomQuote = Node.create({
+  name: "customQuote",
+  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 isInsideCustomQuote = false;
+
+        while (depth > 0) {
+          const parentNode = $pos.node(depth);
+          if (parentNode.type.name === this.name) {
+            isInsideCustomQuote = true;
+            break;
+          }
+          depth--;
+        }
+
+        if (!isInsideCustomQuote) {
+          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]",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes(HTMLAttributes, { "data-custom-quote": "" }), 0];
+  },
+});
+
+export const BaseCustomQuoteText = Node.create({
+  name: "customQuoteText",
+  group: "block",
+  content: "inline*",
+  draggable: false,
+  selectable: true,
+
+  addAttributes() {
+    return {
+      open: {
+        default: true,
+      },
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => {
+        const { view, state } = this.editor;
+        const { tr, selection } = state;
+        const { $from } = selection;
+
+        if ($from.parent.type.name !== "customQuoteText") {
+          return false;
+        }
+
+        const posAfter = $from.after();
+        const nextNode = state.doc.nodeAt(posAfter);
+        if (!nextNode || nextNode.type.name !== "customQuoteAuthor") return false;
+
+        const nextNodeEnd = posAfter + nextNode.nodeSize - 1;
+        tr.setSelection(TextSelection.create(tr.doc, nextNodeEnd));
+        view.dispatch(tr);
+        return true;
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "div[data-custom-quote-text]",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes(HTMLAttributes, { "data-custom-quote-text": "" }), 0];
+  },
+});
+
+export const BaseCustomQuoteAuthor = Node.create({
+  name: "customQuoteAuthor",
+  group: "block",
+  content: "inline*",
+  selectable: true,
+
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => {
+        const { view, state } = this.editor;
+        const { tr, selection } = state;
+        const { $from } = selection;
+
+        if ($from.parent.type.name !== "customQuoteAuthor") {
+          return false;
+        }
+
+        const posAfter = $from.after();
+        const nextNode = state.doc.nodeAt(posAfter);
+        if (!nextNode || nextNode.type.name !== "customQuoteSign") return false;
+
+        const nextNodeEnd = posAfter + nextNode.nodeSize - 1;
+        tr.setSelection(TextSelection.create(tr.doc, nextNodeEnd));
+        view.dispatch(tr);
+        return true;
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "div[data-custom-quote-author]",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes(HTMLAttributes, { "data-custom-quote-author": "" }), 0];
+  },
+});
+
+export const BaseCustomQuoteSign = Node.create({
+  name: "customQuoteSign",
+  group: "block",
+  content: "inline*",
+  selectable: true,
+
+  parseHTML() {
+    return [
+      {
+        tag: "div[data-custom-quote-sign]",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes(HTMLAttributes, { "data-custom-quote-sign": "" }), 0];
+  },
+});

package/src/extensions/base/figure.ts

@@ -0,0 +1,141 @@
+import { mergeAttributes, nodePasteRule } from "@tiptap/core";
+import Image from "@tiptap/extension-image";
+import { resolveImageSrc } from "../../utils/image-src-resolver";
+import type { FigureAttrs } from "../../types";
+
+export interface FigureOptions {
+  HTMLAttributes: Record<string, unknown>;
+  getImageById?: (fileId: string) => string | null;
+  onFigureClick?: (attrs: FigureAttrs, pos: number) => void;
+}
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    figure: {
+      setFigure: (options: FigureAttrs) => ReturnType;
+      updateFigure: (options: Partial<FigureAttrs>) => ReturnType;
+    };
+  }
+}
+
+export const BaseFigure = Image.extend<FigureOptions>({
+  name: "image",
+  group: "block",
+  content: "",
+  draggable: true,
+  isolating: true,
+  selectable: false,
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+      getImageById: undefined,
+      onFigureClick: undefined,
+    };
+  },
+
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      fileId: {
+        default: null,
+        parseHTML: (element) => {
+          const img = element.querySelector("img") || element;
+          return img.getAttribute("data-file-id") || element.getAttribute("data-file-id");
+        },
+        renderHTML: (attributes) => {
+          if (!attributes.fileId) return {};
+          return { "data-file-id": attributes.fileId };
+        },
+      },
+      caption: {
+        default: null,
+        parseHTML: (element) => element.querySelector("figcaption")?.textContent || null,
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "figure",
+        getAttrs: (element) => {
+          if (typeof element === "string") return false;
+          const img = element.querySelector("img");
+          return img ? {} : false;
+        },
+      },
+      {
+        tag: "img[src]",
+        getAttrs: (element) => {
+          if (typeof element === "string") return false;
+          return {};
+        },
+      },
+    ];
+  },
+
+  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] : []),
+    ];
+  },
+
+  addCommands() {
+    return {
+      ...this.parent?.(),
+      setFigure:
+        (options: FigureAttrs) =>
+        ({ commands }) => {
+          return commands.insertContent({
+            type: this.name,
+            attrs: options,
+          });
+        },
+      updateFigure:
+        (options: Partial<FigureAttrs>) =>
+        ({ commands }) => {
+          return commands.updateAttributes(this.name, options);
+        },
+    };
+  },
+
+  addPasteRules() {
+    return [
+      nodePasteRule({
+        find: /!\[(.*?)\]\((.*?)(?:\s+"(.*?)")?\)/g,
+        type: this.type,
+        getAttributes: (match) => {
+          const [, alt, src, title] = match;
+          return { src, alt, title };
+        },
+      }),
+    ];
+  },
+});

package/src/extensions/base/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Base extensions - core node definitions without UI bindings
+ * Used by both editor and render/server contexts
+ */
+
+export { BaseCallout, type CalloutType } from "./callout";
+export { BaseCodeBlock } from "./code-block";
+export { CopyableText } from "./copyable-text";
+export {
+  BaseCustomQuote,
+  BaseCustomQuoteAuthor,
+  BaseCustomQuoteSign,
+  BaseCustomQuoteText,
+} from "./custom-quote";
+export { LinkExtension } from "./link";
+export { BaseMythReality, BaseMythRealityBlock } from "./myth-reality";
+export { BasePrompt, BasePromptContent, BasePromptHeader } from "./prompt";
+export { BaseVideo } from "./video";
+export { BaseFigure } from "./figure";

package/src/extensions/base/link.ts

@@ -0,0 +1,18 @@
+import Link from '@tiptap/extension-link';
+
+export const LinkExtension = Link.extend({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      openOnClick: false,
+      linkOnPaste: true,
+      autolink: true,
+      protocols: ['http', 'https', 'mailto', 'tel'],
+    };
+  },
+}).configure({
+  openOnClick: false,
+  linkOnPaste: true,
+  autolink: true,
+  protocols: ['http', 'https', 'mailto', 'tel'],
+});

package/src/extensions/base/myth-reality.ts

@@ -0,0 +1,45 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+import { TextSelection } from "@tiptap/pm/state";
+import { handleExitNode } from "../../utils/handle-exit-node";
+
+export const BaseMythRealityBlock = Node.create({
+  name: "mythRealityBlock",
+
+  group: "block",
+  content: "block+",
+
+  parseHTML() {
+    return [{ tag: "div[data-myth-reality-block]" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes(HTMLAttributes, { "data-myth-reality-block": "" }),
+      ["div", { class: "myth-reality-block-content" }, 0],
+    ];
+  },
+});
+
+export const BaseMythReality = Node.create({
+  name: "mythReality",
+  group: "block",
+  content: "(mythRealityBlock) (mythRealityBlock)",
+
+  draggable: true,
+  isolating: true,
+
+  parseHTML() {
+    return [{ tag: "div[data-myth-reality]" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes(HTMLAttributes, { "data-myth-reality": "" }), 0];
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Enter: () => handleExitNode(this.editor, this.name),
+    };
+  },
+});

package/src/extensions/base/prompt.ts

@@ -0,0 +1,109 @@
+import { Node, mergeAttributes } from "@tiptap/core";
+import { TextSelection } from "@tiptap/pm/state";
+
+export const BasePrompt = Node.create({
+  name: "prompt",
+  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 isInsidePrompt = false;
+
+        while (depth > 0) {
+          const parentNode = $pos.node(depth);
+          if (parentNode.type.name === this.name) {
+            isInsidePrompt = true;
+            break;
+          }
+          depth--;
+        }
+
+        if (!isInsidePrompt) {
+          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]",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes(HTMLAttributes, { "data-prompt": "" }), 0];
+  },
+});
+
+export const BasePromptHeader = Node.create({
+  name: "promptHeader",
+  group: "block",
+  content: "inline*",
+  selectable: true,
+  draggable: false,
+
+  parseHTML() {
+    return [
+      {
+        tag: "div[data-prompt-header]",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes(HTMLAttributes, { "data-prompt-header": "" }), 0];
+  },
+
+  // addNodeView() {
+  //   return ReactNodeViewRenderer(PromptHeaderView);
+  // },
+});
+
+export const BasePromptContent = Node.create({
+  name: "promptContent",
+  group: "block",
+  content: "text*",
+  draggable: false,
+  selectable: true,
+
+  parseHTML() {
+    return [
+      {
+        tag: "div[data-prompt-content]",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes(HTMLAttributes, { "data-prompt-content": "" }), 0];
+  },
+
+  // addNodeView() {
+  //   return ReactNodeViewRenderer(PromptContentView);
+  // },
+});

package/src/extensions/base/video.ts

@@ -0,0 +1,29 @@
+import { Node } from "@tiptap/core";
+
+export const BaseVideo = Node.create({
+  name: "video",
+  group: "block",
+  selectable: true,
+  draggable: true,
+  isolating: true,
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "video-embed",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["video-embed", HTMLAttributes];
+  },
+});

package/src/extensions/editor/callout.ts

@@ -0,0 +1,43 @@
+import { ReactNodeViewRenderer } from "@tiptap/react";
+
+import { BaseCallout } from "../base";
+import { BaseLegacyBookAlert, BaseLegacyBookTip } from "../base/compatibility";
+import { CalloutView } from "../views/node-views";
+
+/**
+ * Editor version Callout extension
+ * Extends the base Callout with:
+ * - Interactive NodeView for the editor
+ * - Keyboard shortcuts for better UX
+ */
+export const Callout = BaseCallout.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(CalloutView);
+  },
+});
+
+// ============================================================================
+// Legacy Callout Compatibility Extensions
+// ============================================================================
+
+/**
+ * Legacy callout extension for backward compatibility with old Tiptap content.
+ * @deprecated Use {@link Callout} with `type="error"` instead.
+ * This extension is kept only for rendering old content that uses the `calloutAlert` node type.
+ */
+export const LegacyBookAlert = BaseLegacyBookAlert.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(CalloutView);
+  },
+});
+
+/**
+ * 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 LegacyBookTip = BaseLegacyBookTip.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(CalloutView);
+  },
+});

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

@@ -0,0 +1,9 @@
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { BaseCodeBlock } from "../base";
+import { CodeBlockView } from "../views/node-views/code-block";
+
+export const CodeBlock = BaseCodeBlock.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(CodeBlockView);
+  },
+});

package/src/extensions/editor/commands.ts

@@ -0,0 +1,43 @@
+import type { Editor } from "@tiptap/core";
+import { Extension } from "@tiptap/core";
+import Suggestion from "@tiptap/suggestion";
+
+interface CommandRange {
+  from: number;
+  to: number;
+}
+
+interface CommandCallback {
+  (params: { editor: Editor; range: CommandRange }): void;
+}
+
+export interface CommandsExtensionOptions {
+  suggestion: Record<string, unknown>;
+}
+
+export const Commands = Extension.create<CommandsExtensionOptions>({
+  name: "slashCommands",
+
+  addOptions() {
+    return {
+      suggestion: {},
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const options = this.options;
+    const editor = this.editor;
+
+    return [
+      Suggestion({
+        editor,
+        char: "/",
+        command: ({ editor: e, range, props }) => {
+          const commandFn = props.command as CommandCallback;
+          commandFn({ editor: e, range });
+        },
+        ...options.suggestion,
+      }),
+    ];
+  },
+});

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

@@ -0,0 +1,16 @@
+import { ReactMarkViewRenderer } from "@tiptap/react";
+
+import { CopyableText as BaseCopyableText } from "../base";
+import { CopyableTextView } from "../views/node-views";
+
+/**
+ * Editor version CopyableText extension
+ * Extends the base CopyableText with:
+ * - Interactive MarkView for the editor with copy button
+ * - React-based rendering
+ */
+export const CopyableText = BaseCopyableText.extend({
+  addMarkView() {
+    return ReactMarkViewRenderer(CopyableTextView);
+  },
+});

package/src/extensions/editor/custom-quote.ts

@@ -0,0 +1,54 @@
+import { ReactNodeViewRenderer } from "@tiptap/react";
+
+import {
+  BaseCustomQuote,
+  BaseCustomQuoteText,
+  BaseCustomQuoteAuthor,
+  BaseCustomQuoteSign,
+} from "../base";
+import { BaseLegacySEQuote } from "../base/compatibility";
+import {
+  CustomQuoteView,
+  CustomQuoteTextView,
+  CustomQuoteAuthorView,
+  CustomQuoteSignView,
+} from "../views/node-views";
+
+export const CustomQuote = BaseCustomQuote.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(CustomQuoteView);
+  },
+});
+
+export const CustomQuoteText = BaseCustomQuoteText.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(CustomQuoteTextView);
+  },
+});
+
+export const CustomQuoteAuthor = BaseCustomQuoteAuthor.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(CustomQuoteAuthorView);
+  },
+});
+
+export const CustomQuoteSign = BaseCustomQuoteSign.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(CustomQuoteSignView);
+  },
+});
+
+// ============================================================================
+// Legacy CustomBlockquote Compatibility Extension
+// ============================================================================
+
+/**
+ * Legacy CustomQuoteV2 extension for backward compatibility with old Tiptap copy editor content.
+ * @deprecated Use {@link CustomQuote} instead.
+ * This extension is kept only for rendering old content that uses the `customQuoteV2` node type.
+ */
+export const LegacySEQuote = BaseLegacySEQuote.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(CustomQuoteView);
+  },
+});