@kopexa/tiptap 17.8.5 → 17.9.1

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as _tiptap_core from '@tiptap/core';
-import { Node, JSONContent } from '@tiptap/core';
+import { Node, JSONContent, Content as Content$1 } from '@tiptap/core';
 export { Content, JSONContent } from '@tiptap/core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { HocuspocusProvider } from '@hocuspocus/provider';
@@ -646,6 +646,121 @@ type BasicEditorProps = GetExtensionsOptions & EditorBasicVariants & {
 };
 declare const BasicEditor: ({ variant, bordered, content, variables, variableValues, showToolbar, pagesOptions, ...options }: BasicEditorProps) => react_jsx_runtime.JSX.Element;
 
+type EditorViewProps = EditorBasicVariants & Pick<GetExtensionsOptions, "customExtensions" | "disabled"> & {
+    /**
+     * The TipTap content to render.
+     * Accepts JSON, HTML string, Markdown string, or plain text.
+     * Internally parsed via `safeParseContent` — same as the `Editor` component.
+     */
+    content?: Content$1 | undefined;
+    /** Additional CSS class names for the root container. */
+    className?: string;
+};
+/**
+ * Client-side read-only viewer for TipTap content.
+ *
+ * Uses a real TipTap editor instance in `editable: false` mode, so all
+ * NodeViews (images with file-reference resolution, callouts, code blocks,
+ * math, tables, etc.) render exactly as they do in the editor — but
+ * without the toolbar, bubble menus, slash commands, or collaboration.
+ *
+ * **Why not `generateHTML`?** Some node types use React NodeViews that
+ * resolve data at render time (e.g., images stored as file references that
+ * need a signed URL). `generateHTML` produces static HTML and cannot run
+ * these React components, resulting in broken images and missing features.
+ *
+ * **When to use:**
+ * - Detail pages, previews, or anywhere you need to display editor content
+ *   with full NodeView fidelity (image resolution, interactive blocks).
+ * - Must be used inside `EditorFileProvider` if your content contains
+ *   file-reference images.
+ *
+ * **For server-side rendering** (RSC, SSR, Node.js) where no React NodeViews
+ * are needed, use `EditorStaticView` instead. It uses `@tiptap/html` with
+ * a virtual DOM and produces pure HTML — but images must already be resolved.
+ *
+ * @example
+ * ```tsx
+ * import { EditorView } from "@kopexa/tiptap";
+ *
+ * function DocumentPreview({ content }: { content: JSONContent }) {
+ *   return <EditorView content={content} variant="document" />;
+ * }
+ * ```
+ *
+ * @example With file resolution
+ * ```tsx
+ * import { EditorFileProvider, EditorView } from "@kopexa/tiptap";
+ *
+ * function DocumentDetail({ content }: { content: JSONContent }) {
+ *   return (
+ *     <EditorFileProvider onUpload={upload} onResolve={resolve}>
+ *       <EditorView content={content} variant="document" />
+ *     </EditorFileProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function EditorView({ content, variant, bordered, className, customExtensions, disabled, }: EditorViewProps): react_jsx_runtime.JSX.Element | null;
+
+type EditorStaticViewProps = EditorBasicVariants & Pick<GetExtensionsOptions, "customExtensions" | "disabled"> & {
+    /**
+     * The TipTap content to render.
+     * Accepts JSON, HTML string, Markdown string, or plain text.
+     * Internally parsed via `safeParseContent` — same as the `Editor` component.
+     */
+    content?: Content$1 | undefined;
+    /** Additional CSS class names for the root container. */
+    className?: string;
+};
+/**
+ * Static HTML viewer for TipTap content.
+ *
+ * Converts TipTap `JSONContent` to HTML using `generateHTML` from `@tiptap/html`
+ * (virtual DOM — no browser required) and renders it with the same styling as
+ * the `Editor` component. Works in **Server Components (RSC)**, SSR, and
+ * Node.js environments.
+ *
+ * Uses the full set of registered extensions to ensure all node/mark types
+ * produce correct HTML (tables, callouts, code blocks, math, etc.).
+ *
+ * **Limitations:**
+ * - React NodeViews are NOT rendered. Node types that rely on React components
+ *   (e.g., images with file-reference resolution) will output their default
+ *   HTML representation. Images stored as file references will NOT be resolved —
+ *   ensure image `src` values are already displayable URLs before passing content.
+ * - No interactive features (no selection, no cursor, no scroll-to-hash).
+ *
+ * **When to use:**
+ * - Server-rendered pages, email templates, PDF generation, or static exports
+ *   where you need a lightweight, non-interactive HTML representation.
+ * - When all image URLs in the content are already resolved (not file references).
+ *
+ * **For client-side rendering** with full NodeView fidelity (image resolution,
+ * interactive blocks), use `EditorView` instead.
+ *
+ * @example Server Component
+ * ```tsx
+ * // app/documents/[id]/page.tsx (RSC)
+ * import { EditorStaticView } from "@kopexa/tiptap";
+ *
+ * export default async function DocumentPage({ params }) {
+ *   const doc = await fetchDocument(params.id);
+ *   return <EditorStaticView content={doc.content} variant="document" />;
+ * }
+ * ```
+ *
+ * @example Client Component
+ * ```tsx
+ * import { EditorStaticView } from "@kopexa/tiptap";
+ *
+ * function LightweightPreview({ content }: { content: JSONContent }) {
+ *   return <EditorStaticView content={content} variant="inline" />;
+ * }
+ * ```
+ */
+declare function EditorStaticView({ content, variant, bordered, className, customExtensions, disabled, }: EditorStaticViewProps): react_jsx_runtime.JSX.Element | null;
+
 /**
  * Handles image upload with progress tracking and abort capability
  * @param file The file to upload
@@ -689,4 +804,4 @@ declare function sanitizeUrl(inputUrl: string, baseUrl: string, protocols?: Prot
  */
 declare function generateColorFromId(id: string): string;
 
-export { CalloutNode, type CalloutNodeAttrs, type CalloutVariant, type CollabUser, CollaborationProvider, type CollaborationProviderProps, type CollaborationState, type CollaborationStatus, BasicEditor as Editor, type EditorFileHandler, EditorFileProvider, type EditorFileProviderProps, type GetExtensionsOptions, ImageNode, ImageUploadNode, InlineMath, type InlineMathAttrs, MathBlock, type MathBlockAttrs, type ResolvedCollabUser, TocNode, type VariableDefinition, VariableFillerDialog, type VariableFillerDialogProps, VariableNode, type VariableNodeAttrs, type VariableOptions, VariableProvider, type VariableProviderProps, VariableSuggestion, type VariableSuggestionProps, convertFileToBase64, extractVariablesFromContent, generateColorFromId, getExtensions, handleImageUpload, isAllowedUri, sanitizeUrl, useCollaboration, useCollaborationRequired, useDocumentVisibility, useEditorFile, useEditorFileRequired, useIdle, useVariables, useVariablesWithFallback };
+export { CalloutNode, type CalloutNodeAttrs, type CalloutVariant, type CollabUser, CollaborationProvider, type CollaborationProviderProps, type CollaborationState, type CollaborationStatus, BasicEditor as Editor, type EditorFileHandler, EditorFileProvider, type EditorFileProviderProps, EditorStaticView, type EditorStaticViewProps, EditorView, type EditorViewProps, type GetExtensionsOptions, ImageNode, ImageUploadNode, InlineMath, type InlineMathAttrs, MathBlock, type MathBlockAttrs, type ResolvedCollabUser, TocNode, type VariableDefinition, VariableFillerDialog, type VariableFillerDialogProps, VariableNode, type VariableNodeAttrs, type VariableOptions, VariableProvider, type VariableProviderProps, VariableSuggestion, type VariableSuggestionProps, convertFileToBase64, extractVariablesFromContent, generateColorFromId, getExtensions, handleImageUpload, isAllowedUri, sanitizeUrl, useCollaboration, useCollaborationRequired, useDocumentVisibility, useEditorFile, useEditorFileRequired, useIdle, useVariables, useVariablesWithFallback };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _tiptap_core from '@tiptap/core';
-import { Node, JSONContent } from '@tiptap/core';
+import { Node, JSONContent, Content as Content$1 } from '@tiptap/core';
 export { Content, JSONContent } from '@tiptap/core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { HocuspocusProvider } from '@hocuspocus/provider';
@@ -646,6 +646,121 @@ type BasicEditorProps = GetExtensionsOptions & EditorBasicVariants & {
 };
 declare const BasicEditor: ({ variant, bordered, content, variables, variableValues, showToolbar, pagesOptions, ...options }: BasicEditorProps) => react_jsx_runtime.JSX.Element;
 
+type EditorViewProps = EditorBasicVariants & Pick<GetExtensionsOptions, "customExtensions" | "disabled"> & {
+    /**
+     * The TipTap content to render.
+     * Accepts JSON, HTML string, Markdown string, or plain text.
+     * Internally parsed via `safeParseContent` — same as the `Editor` component.
+     */
+    content?: Content$1 | undefined;
+    /** Additional CSS class names for the root container. */
+    className?: string;
+};
+/**
+ * Client-side read-only viewer for TipTap content.
+ *
+ * Uses a real TipTap editor instance in `editable: false` mode, so all
+ * NodeViews (images with file-reference resolution, callouts, code blocks,
+ * math, tables, etc.) render exactly as they do in the editor — but
+ * without the toolbar, bubble menus, slash commands, or collaboration.
+ *
+ * **Why not `generateHTML`?** Some node types use React NodeViews that
+ * resolve data at render time (e.g., images stored as file references that
+ * need a signed URL). `generateHTML` produces static HTML and cannot run
+ * these React components, resulting in broken images and missing features.
+ *
+ * **When to use:**
+ * - Detail pages, previews, or anywhere you need to display editor content
+ *   with full NodeView fidelity (image resolution, interactive blocks).
+ * - Must be used inside `EditorFileProvider` if your content contains
+ *   file-reference images.
+ *
+ * **For server-side rendering** (RSC, SSR, Node.js) where no React NodeViews
+ * are needed, use `EditorStaticView` instead. It uses `@tiptap/html` with
+ * a virtual DOM and produces pure HTML — but images must already be resolved.
+ *
+ * @example
+ * ```tsx
+ * import { EditorView } from "@kopexa/tiptap";
+ *
+ * function DocumentPreview({ content }: { content: JSONContent }) {
+ *   return <EditorView content={content} variant="document" />;
+ * }
+ * ```
+ *
+ * @example With file resolution
+ * ```tsx
+ * import { EditorFileProvider, EditorView } from "@kopexa/tiptap";
+ *
+ * function DocumentDetail({ content }: { content: JSONContent }) {
+ *   return (
+ *     <EditorFileProvider onUpload={upload} onResolve={resolve}>
+ *       <EditorView content={content} variant="document" />
+ *     </EditorFileProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function EditorView({ content, variant, bordered, className, customExtensions, disabled, }: EditorViewProps): react_jsx_runtime.JSX.Element | null;
+
+type EditorStaticViewProps = EditorBasicVariants & Pick<GetExtensionsOptions, "customExtensions" | "disabled"> & {
+    /**
+     * The TipTap content to render.
+     * Accepts JSON, HTML string, Markdown string, or plain text.
+     * Internally parsed via `safeParseContent` — same as the `Editor` component.
+     */
+    content?: Content$1 | undefined;
+    /** Additional CSS class names for the root container. */
+    className?: string;
+};
+/**
+ * Static HTML viewer for TipTap content.
+ *
+ * Converts TipTap `JSONContent` to HTML using `generateHTML` from `@tiptap/html`
+ * (virtual DOM — no browser required) and renders it with the same styling as
+ * the `Editor` component. Works in **Server Components (RSC)**, SSR, and
+ * Node.js environments.
+ *
+ * Uses the full set of registered extensions to ensure all node/mark types
+ * produce correct HTML (tables, callouts, code blocks, math, etc.).
+ *
+ * **Limitations:**
+ * - React NodeViews are NOT rendered. Node types that rely on React components
+ *   (e.g., images with file-reference resolution) will output their default
+ *   HTML representation. Images stored as file references will NOT be resolved —
+ *   ensure image `src` values are already displayable URLs before passing content.
+ * - No interactive features (no selection, no cursor, no scroll-to-hash).
+ *
+ * **When to use:**
+ * - Server-rendered pages, email templates, PDF generation, or static exports
+ *   where you need a lightweight, non-interactive HTML representation.
+ * - When all image URLs in the content are already resolved (not file references).
+ *
+ * **For client-side rendering** with full NodeView fidelity (image resolution,
+ * interactive blocks), use `EditorView` instead.
+ *
+ * @example Server Component
+ * ```tsx
+ * // app/documents/[id]/page.tsx (RSC)
+ * import { EditorStaticView } from "@kopexa/tiptap";
+ *
+ * export default async function DocumentPage({ params }) {
+ *   const doc = await fetchDocument(params.id);
+ *   return <EditorStaticView content={doc.content} variant="document" />;
+ * }
+ * ```
+ *
+ * @example Client Component
+ * ```tsx
+ * import { EditorStaticView } from "@kopexa/tiptap";
+ *
+ * function LightweightPreview({ content }: { content: JSONContent }) {
+ *   return <EditorStaticView content={content} variant="inline" />;
+ * }
+ * ```
+ */
+declare function EditorStaticView({ content, variant, bordered, className, customExtensions, disabled, }: EditorStaticViewProps): react_jsx_runtime.JSX.Element | null;
+
 /**
  * Handles image upload with progress tracking and abort capability
  * @param file The file to upload
@@ -689,4 +804,4 @@ declare function sanitizeUrl(inputUrl: string, baseUrl: string, protocols?: Prot
  */
 declare function generateColorFromId(id: string): string;
 
-export { CalloutNode, type CalloutNodeAttrs, type CalloutVariant, type CollabUser, CollaborationProvider, type CollaborationProviderProps, type CollaborationState, type CollaborationStatus, BasicEditor as Editor, type EditorFileHandler, EditorFileProvider, type EditorFileProviderProps, type GetExtensionsOptions, ImageNode, ImageUploadNode, InlineMath, type InlineMathAttrs, MathBlock, type MathBlockAttrs, type ResolvedCollabUser, TocNode, type VariableDefinition, VariableFillerDialog, type VariableFillerDialogProps, VariableNode, type VariableNodeAttrs, type VariableOptions, VariableProvider, type VariableProviderProps, VariableSuggestion, type VariableSuggestionProps, convertFileToBase64, extractVariablesFromContent, generateColorFromId, getExtensions, handleImageUpload, isAllowedUri, sanitizeUrl, useCollaboration, useCollaborationRequired, useDocumentVisibility, useEditorFile, useEditorFileRequired, useIdle, useVariables, useVariablesWithFallback };
+export { CalloutNode, type CalloutNodeAttrs, type CalloutVariant, type CollabUser, CollaborationProvider, type CollaborationProviderProps, type CollaborationState, type CollaborationStatus, BasicEditor as Editor, type EditorFileHandler, EditorFileProvider, type EditorFileProviderProps, EditorStaticView, type EditorStaticViewProps, EditorView, type EditorViewProps, type GetExtensionsOptions, ImageNode, ImageUploadNode, InlineMath, type InlineMathAttrs, MathBlock, type MathBlockAttrs, type ResolvedCollabUser, TocNode, type VariableDefinition, VariableFillerDialog, type VariableFillerDialogProps, VariableNode, type VariableNodeAttrs, type VariableOptions, VariableProvider, type VariableProviderProps, VariableSuggestion, type VariableSuggestionProps, convertFileToBase64, extractVariablesFromContent, generateColorFromId, getExtensions, handleImageUpload, isAllowedUri, sanitizeUrl, useCollaboration, useCollaborationRequired, useDocumentVisibility, useEditorFile, useEditorFileRequired, useIdle, useVariables, useVariablesWithFallback };

package/dist/index.js

@@ -35,6 +35,8 @@ __export(index_exports, {
   CollaborationProvider: () => CollaborationProvider,
   Editor: () => BasicEditor,
   EditorFileProvider: () => EditorFileProvider,
+  EditorStaticView: () => EditorStaticView,
+  EditorView: () => EditorView,
   ImageNode: () => ImageNode,
   ImageUploadNode: () => ImageUploadNode,
   InlineMath: () => InlineMath,
@@ -4024,6 +4026,7 @@ var useCreateEditor = ({
   const fileHandlerFromContext = useEditorFile();
   const fileHandler = fileHandlerProp != null ? fileHandlerProp : fileHandlerFromContext;
   const collaboration = useCollaboration();
+  const [collabSyncing, setCollabSyncing] = (0, import_react33.useState)(!!collaboration);
   const [extensions] = (0, import_react33.useState)(
     () => getExtensions({
       editable,
@@ -4038,6 +4041,7 @@ var useCreateEditor = ({
       disabled
     })
   );
+  const { onCreate: userOnCreate, ...restOptions } = options;
   const editor = (0, import_react32.useEditor)({
     editorProps: {
       attributes: {
@@ -4055,14 +4059,40 @@ var useCreateEditor = ({
       onChange == null ? void 0 : onChange(editor2.getJSON());
     },
     content: safeParseContent(content),
-    ...options
+    // Seed empty collaborative documents with initial content.
+    // When the Collaboration extension is active, TipTap ignores the `content`
+    // prop entirely — content comes from the Y.Doc. If the Hocuspocus server
+    // delivers an empty doc (e.g. a freshly created version), we populate it
+    // with the `content` prop once after the initial sync.
+    onCreate: (ctx) => {
+      if (collaboration) {
+        const provider = collaboration.provider;
+        if (provider && !provider.isSynced) {
+          provider.on("synced", () => {
+            setTimeout(() => {
+              if (ctx.editor.isEmpty && content) {
+                ctx.editor.commands.setContent(safeParseContent(content));
+              }
+              setCollabSyncing(false);
+            }, 0);
+          });
+        } else {
+          if (ctx.editor.isEmpty && content) {
+            ctx.editor.commands.setContent(safeParseContent(content));
+          }
+          setCollabSyncing(false);
+        }
+      }
+      userOnCreate == null ? void 0 : userOnCreate(ctx);
+    },
+    ...restOptions
   });
   (0, import_react33.useEffect)(() => {
     if (editor && editor.isEditable !== editable) {
       editor.setEditable(editable);
     }
   }, [editor, editable]);
-  return editor;
+  return { editor, collabSyncing };
 };
 function getExtensions({
   editable,
@@ -8190,7 +8220,7 @@ var BasicEditor = ({
   pagesOptions,
   ...options
 }) => {
-  const editor = useCreateEditor({
+  const { editor, collabSyncing } = useCreateEditor({
     content,
     enableVariables: !!(variables == null ? void 0 : variables.length),
     pagesOptions,
@@ -8201,7 +8231,7 @@ var BasicEditor = ({
     (name) => variableValues == null ? void 0 : variableValues[name],
     [variableValues]
   );
-  if (!editor) {
+  if (!editor || collabSyncing) {
     return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(LoadingSpinner, {});
   }
   const isBottomToolbar = variant === "field";
@@ -8338,12 +8368,93 @@ function LoadingSpinner({ text = "Connecting..." }) {
     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: styles.text(), children: text })
   ] }) });
 }
+
+// src/presets/view/index.tsx
+var import_theme10 = require("@kopexa/theme");
+var import_react62 = require("@tiptap/react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function EditorView({
+  content,
+  variant,
+  bordered,
+  className,
+  customExtensions,
+  disabled
+}) {
+  const { editor } = useCreateEditor({
+    content,
+    editable: false,
+    customExtensions,
+    disabled
+  });
+  const styles = (0, import_theme10.editorBasic)({ variant, bordered });
+  if (!editor) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: styles.root({ className }), "data-slot": "editor-view", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react62.EditorContext.Provider, { value: { editor }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: styles.wrapper(), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    import_react62.EditorContent,
+    {
+      editor,
+      role: "presentation",
+      className: styles.content()
+    }
+  ) }) }) });
+}
+
+// src/presets/view/static.tsx
+var import_theme11 = require("@kopexa/theme");
+var import_html = require("@tiptap/html");
+var import_react63 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function EditorStaticView({
+  content,
+  variant,
+  bordered,
+  className,
+  customExtensions,
+  disabled
+}) {
+  const extensions = (0, import_react63.useMemo)(
+    () => getExtensions({
+      editable: false,
+      customExtensions,
+      disabled
+    }),
+    [customExtensions, disabled]
+  );
+  const html = (0, import_react63.useMemo)(() => {
+    const parsed = safeParseContent(content);
+    if (!parsed) return "";
+    const json = parsed;
+    if (json.content && Array.isArray(json.content) && json.content.length === 0) {
+      return "";
+    }
+    try {
+      return (0, import_html.generateHTML)(json, extensions);
+    } catch {
+      return "";
+    }
+  }, [content, extensions]);
+  const styles = (0, import_theme11.editorBasic)({ variant, bordered });
+  if (!html) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: styles.root({ className }), "data-slot": "editor-static-view", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: styles.wrapper(), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: styles.content(), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "div",
+    {
+      className: "tiptap ProseMirror",
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  ) }) }) });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CalloutNode,
   CollaborationProvider,
   Editor,
   EditorFileProvider,
+  EditorStaticView,
+  EditorView,
   ImageNode,
   ImageUploadNode,
   InlineMath,

package/dist/index.mjs

@@ -4022,6 +4022,7 @@ var useCreateEditor = ({
   const fileHandlerFromContext = useEditorFile();
   const fileHandler = fileHandlerProp != null ? fileHandlerProp : fileHandlerFromContext;
   const collaboration = useCollaboration();
+  const [collabSyncing, setCollabSyncing] = useState13(!!collaboration);
   const [extensions] = useState13(
     () => getExtensions({
       editable,
@@ -4036,6 +4037,7 @@ var useCreateEditor = ({
       disabled
     })
   );
+  const { onCreate: userOnCreate, ...restOptions } = options;
   const editor = useEditor({
     editorProps: {
       attributes: {
@@ -4053,14 +4055,40 @@ var useCreateEditor = ({
       onChange == null ? void 0 : onChange(editor2.getJSON());
     },
     content: safeParseContent(content),
-    ...options
+    // Seed empty collaborative documents with initial content.
+    // When the Collaboration extension is active, TipTap ignores the `content`
+    // prop entirely — content comes from the Y.Doc. If the Hocuspocus server
+    // delivers an empty doc (e.g. a freshly created version), we populate it
+    // with the `content` prop once after the initial sync.
+    onCreate: (ctx) => {
+      if (collaboration) {
+        const provider = collaboration.provider;
+        if (provider && !provider.isSynced) {
+          provider.on("synced", () => {
+            setTimeout(() => {
+              if (ctx.editor.isEmpty && content) {
+                ctx.editor.commands.setContent(safeParseContent(content));
+              }
+              setCollabSyncing(false);
+            }, 0);
+          });
+        } else {
+          if (ctx.editor.isEmpty && content) {
+            ctx.editor.commands.setContent(safeParseContent(content));
+          }
+          setCollabSyncing(false);
+        }
+      }
+      userOnCreate == null ? void 0 : userOnCreate(ctx);
+    },
+    ...restOptions
   });
   useEffect14(() => {
     if (editor && editor.isEditable !== editable) {
       editor.setEditable(editable);
     }
   }, [editor, editable]);
-  return editor;
+  return { editor, collabSyncing };
 };
 function getExtensions({
   editable,
@@ -8287,7 +8315,7 @@ var BasicEditor = ({
   pagesOptions,
   ...options
 }) => {
-  const editor = useCreateEditor({
+  const { editor, collabSyncing } = useCreateEditor({
     content,
     enableVariables: !!(variables == null ? void 0 : variables.length),
     pagesOptions,
@@ -8298,7 +8326,7 @@ var BasicEditor = ({
     (name) => variableValues == null ? void 0 : variableValues[name],
     [variableValues]
   );
-  if (!editor) {
+  if (!editor || collabSyncing) {
     return /* @__PURE__ */ jsx34(LoadingSpinner, {});
   }
   const isBottomToolbar = variant === "field";
@@ -8435,11 +8463,92 @@ function LoadingSpinner({ text = "Connecting..." }) {
     /* @__PURE__ */ jsx34("div", { className: styles.text(), children: text })
   ] }) });
 }
+
+// src/presets/view/index.tsx
+import { editorBasic as editorBasic2 } from "@kopexa/theme";
+import { EditorContent as EditorContent2, EditorContext as EditorContext2 } from "@tiptap/react";
+import { jsx as jsx35 } from "react/jsx-runtime";
+function EditorView({
+  content,
+  variant,
+  bordered,
+  className,
+  customExtensions,
+  disabled
+}) {
+  const { editor } = useCreateEditor({
+    content,
+    editable: false,
+    customExtensions,
+    disabled
+  });
+  const styles = editorBasic2({ variant, bordered });
+  if (!editor) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx35("div", { className: styles.root({ className }), "data-slot": "editor-view", children: /* @__PURE__ */ jsx35(EditorContext2.Provider, { value: { editor }, children: /* @__PURE__ */ jsx35("div", { className: styles.wrapper(), children: /* @__PURE__ */ jsx35(
+    EditorContent2,
+    {
+      editor,
+      role: "presentation",
+      className: styles.content()
+    }
+  ) }) }) });
+}
+
+// src/presets/view/static.tsx
+import { editorBasic as editorBasic3 } from "@kopexa/theme";
+import { generateHTML } from "@tiptap/html";
+import { useMemo as useMemo20 } from "react";
+import { jsx as jsx36 } from "react/jsx-runtime";
+function EditorStaticView({
+  content,
+  variant,
+  bordered,
+  className,
+  customExtensions,
+  disabled
+}) {
+  const extensions = useMemo20(
+    () => getExtensions({
+      editable: false,
+      customExtensions,
+      disabled
+    }),
+    [customExtensions, disabled]
+  );
+  const html = useMemo20(() => {
+    const parsed = safeParseContent(content);
+    if (!parsed) return "";
+    const json = parsed;
+    if (json.content && Array.isArray(json.content) && json.content.length === 0) {
+      return "";
+    }
+    try {
+      return generateHTML(json, extensions);
+    } catch {
+      return "";
+    }
+  }, [content, extensions]);
+  const styles = editorBasic3({ variant, bordered });
+  if (!html) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx36("div", { className: styles.root({ className }), "data-slot": "editor-static-view", children: /* @__PURE__ */ jsx36("div", { className: styles.wrapper(), children: /* @__PURE__ */ jsx36("div", { className: styles.content(), children: /* @__PURE__ */ jsx36(
+    "div",
+    {
+      className: "tiptap ProseMirror",
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  ) }) }) });
+}
 export {
   CalloutNode,
   CollaborationProvider,
   BasicEditor as Editor,
   EditorFileProvider,
+  EditorStaticView,
+  EditorView,
   ImageNode,
   ImageUploadNode,
   InlineMath,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/tiptap",
-  "version": "17.8.5",
+  "version": "17.9.1",
   "description": "our tiptap components",
   "keywords": [
     "tiptap"
@@ -28,7 +28,7 @@
     "motion": ">=12.23.6",
     "react": ">=19.0.0-rc.0",
     "react-dom": ">=19.0.0-rc.0",
-    "@kopexa/theme": "17.24.2"
+    "@kopexa/theme": "17.24.5"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.4",
@@ -54,6 +54,7 @@
     "@tiptap/extension-typography": "^3.20.0",
     "@tiptap/extension-unique-id": "^3.20.0",
     "@tiptap/extensions": "^3.20.0",
+    "@tiptap/html": "^3.20.0",
     "@tiptap/pm": "^3.20.0",
     "@tiptap/react": "^3.20.0",
     "@tiptap/starter-kit": "^3.20.0",
@@ -61,34 +62,34 @@
     "dompurify": "^3.3.1",
     "katex": "^0.16.33",
     "jsx-dom-cjs": "^8.1.6",
-    "markdown-it": "^14.1.0",
+    "markdown-it": "^14.1.1",
     "react-hotkeys-hook": "^5.2.4",
     "react-intl": "^7.1.14",
     "y-indexeddb": "^9.0.12",
     "yjs": "^13.6.0",
-    "@kopexa/button": "17.0.54",
-    "@kopexa/callout": "17.0.54",
-    "@kopexa/dialog": "17.2.19",
-    "@kopexa/dropdown-menu": "17.0.54",
-    "@kopexa/editor-utils": "17.1.5",
-    "@kopexa/chip": "17.1.51",
+    "@kopexa/button": "17.0.57",
+    "@kopexa/callout": "17.0.57",
+    "@kopexa/chip": "17.1.54",
+    "@kopexa/dialog": "17.2.22",
     "@kopexa/extension-pages": "17.0.45",
-    "@kopexa/extension-code": "17.0.54",
-    "@kopexa/extension-controlref": "17.1.36",
-    "@kopexa/extension-table": "17.1.6",
-    "@kopexa/input": "17.0.54",
-    "@kopexa/label": "17.0.54",
-    "@kopexa/popover": "17.2.19",
-    "@kopexa/select": "17.2.19",
-    "@kopexa/icons": "17.7.19",
-    "@kopexa/switch": "17.2.19",
-    "@kopexa/react-utils": "17.0.54",
-    "@kopexa/separator": "17.0.54",
-    "@kopexa/shared-utils": "17.0.54",
-    "@kopexa/toolbar": "17.2.19",
-    "@kopexa/use-composed-ref": "17.0.54",
-    "@kopexa/use-is-mobile": "17.0.54",
-    "@kopexa/tabs": "17.0.54"
+    "@kopexa/editor-utils": "17.1.8",
+    "@kopexa/dropdown-menu": "17.0.57",
+    "@kopexa/extension-code": "17.0.57",
+    "@kopexa/extension-controlref": "17.1.39",
+    "@kopexa/extension-table": "17.1.9",
+    "@kopexa/input": "17.0.57",
+    "@kopexa/label": "17.0.57",
+    "@kopexa/icons": "17.7.22",
+    "@kopexa/popover": "17.2.22",
+    "@kopexa/select": "17.2.22",
+    "@kopexa/separator": "17.0.57",
+    "@kopexa/shared-utils": "17.0.57",
+    "@kopexa/switch": "17.2.22",
+    "@kopexa/use-is-mobile": "17.0.57",
+    "@kopexa/use-composed-ref": "17.0.57",
+    "@kopexa/toolbar": "17.2.22",
+    "@kopexa/react-utils": "17.0.57",
+    "@kopexa/tabs": "17.0.57"
   },
   "clean-package": "../../../clean-package.config.json",
   "module": "dist/index.mjs",