@cyberyozh/text-editor 0.1.6 → 0.1.8

package/src/editor/handlers/dialog-handlers.ts

@@ -1,28 +1,37 @@
 import type { Editor } from "@tiptap/react";
+import { TextSelection } from "@tiptap/pm/state";
 
 import type { FigureAttrs, TiptapImageAttrs } from "../../types";
 
-export const createHandleImageAdd = (editor: Editor | null, closeDialogCommand: () => void) => {
+export const createHandleImageAdd = (
+  editor: Editor | null,
+  closeDialogCommand: () => void,
+  savedPos?: number
+) => {
   return (attrs: TiptapImageAttrs) => {
     if (!editor) return;
 
     const { state } = editor;
-    const { $from } = state.selection;
-    const text = $from.parent.textContent;
+    const insertPos = savedPos ?? state.selection.from;
+
+    editor
+      .chain()
+      .focus()
+      .command(({ tr, state }) => {
+        const $pos = state.doc.resolve(insertPos);
+        const imageNode = state.schema.nodes.image.create({ ...attrs });
+
+        if ($pos.parent.type.name === "paragraph" && $pos.parent.textContent === "") {
+          tr.replaceWith($pos.before(), $pos.after(), imageNode);
+          tr.setSelection(TextSelection.near(tr.doc.resolve($pos.before())));
+        } else {
+          tr.insert(insertPos, imageNode);
+          tr.setSelection(TextSelection.near(tr.doc.resolve(insertPos)));
+        }
+        return true;
+      })
+      .run();
 
-    if (text.lastIndexOf("/") !== -1) {
-      editor
-        .chain()
-        .focus()
-        .command(({ tr }) => {
-          const node = editor.schema.nodes.image.create({ ...attrs });
-          tr.replaceWith($from.before(), $from.after(), node);
-          return true;
-        })
-        .run();
-    } else {
-      editor?.chain().focus().setFigure(attrs).run();
-    }
     closeDialogCommand();
   };
 };
@@ -33,6 +42,7 @@ export const createHandleImageEdit = (
   pos?: number
 ) => {
   return (attrs: Partial<FigureAttrs>) => {
+    console.log("👀 ~ createHandleImageEdit ~ attrs:", attrs);
     if (!editor || pos === undefined) return;
 
     editor.chain().focus().setNodeSelection(pos).updateFigure(attrs).run();
@@ -40,30 +50,44 @@ export const createHandleImageEdit = (
   };
 };
 
-export const createHandleVideoAdd = (editor: Editor | null, closeDialogCommand: () => void) => {
+export const createHandleVideoAdd = (
+  editor: Editor | null,
+  closeDialogCommand: () => void,
+  savedPos?: number
+) => {
   return (url: string) => {
     if (!editor) return;
 
     const { state } = editor;
-    const { $from } = state.selection;
+    const insertPos = savedPos ?? state.selection.from;
 
     editor
       .chain()
       .focus()
-      .command(({ tr }) => {
-        tr.replaceWith(
-          $from.before(),
-          $from.after(),
-          editor.schema.nodes.video.create({ src: url })
-        );
+      .command(({ tr, state }) => {
+        const $pos = state.doc.resolve(insertPos);
+        const videoNode = state.schema.nodes.video.create({ src: url });
+
+        if ($pos.parent.type.name === "paragraph" && $pos.parent.textContent === "") {
+          tr.replaceWith($pos.before(), $pos.after(), videoNode);
+          tr.setSelection(TextSelection.near(tr.doc.resolve($pos.before())));
+        } else {
+          tr.insert(insertPos, videoNode);
+          tr.setSelection(TextSelection.near(tr.doc.resolve(insertPos)));
+        }
         return true;
       })
       .run();
+
     closeDialogCommand();
   };
 };
 
-export const createHandleLinkAdd = (editor: Editor | null, closeDialogCommand: () => void) => {
+export const createHandleLinkAdd = (
+  editor: Editor | null,
+  closeDialogCommand: () => void,
+  savedPos?: number
+) => {
   return (title: string, url: string) => {
     if (!editor) return;
 
@@ -81,32 +105,30 @@ export const createHandleLinkAdd = (editor: Editor | null, closeDialogCommand: (
         })
         .run();
     } else {
+      const { state } = editor;
+      const insertPos = savedPos ?? state.selection.from;
+
       editor
         .chain()
         .focus()
-        .command(({ tr, state }) => {
-          const { $from } = state.selection;
-          const text = $from.parent.textContent;
-          const nodeStart = $from.start();
-          const beforeCursor = text.substring(0, $from.pos - nodeStart);
-          const slashIndex = beforeCursor.lastIndexOf("/");
-
-          if (slashIndex !== -1) {
-            tr.delete(nodeStart + slashIndex, $from.pos);
-          }
-
+        .command(({ tr }) => {
+          const linkMark = editor.schema.marks.link.create({ href: url });
+          const textNode = editor.schema.text(title, [linkMark]);
+          tr.insert(insertPos, textNode);
+          tr.setSelection(TextSelection.create(tr.doc, insertPos, insertPos + title.length));
           return true;
         })
-        .extendMarkRange("link")
-        .setLink({ href: url })
-        .insertContent(title)
         .run();
     }
     closeDialogCommand();
   };
 };
 
-export const createHandleKatexAdd = (editor: Editor | null, closeDialogCommand: () => void) => {
+export const createHandleKatexAdd = (
+  editor: Editor | null,
+  closeDialogCommand: () => void,
+  savedPos?: number
+) => {
   return (latex: string, pos?: number) => {
     if (!editor) return;
 
@@ -114,28 +136,18 @@ export const createHandleKatexAdd = (editor: Editor | null, closeDialogCommand:
       editor.chain().setNodeSelection(pos).updateInlineMath({ latex }).focus().run();
     } else {
       const { state } = editor;
-      const { $from } = state.selection;
-      const text = $from.parent.textContent;
-      const nodeStart = $from.start();
-      const beforeCursor = text.substring(0, $from.pos - nodeStart);
-      const slashIndex = beforeCursor.lastIndexOf("/");
-
-      if (slashIndex !== -1) {
-        const deleteFrom = nodeStart + slashIndex;
-        const deleteTo = $from.pos;
-
-        editor
-          .chain()
-          .focus()
-          .command(({ tr, state }) => {
-            const inlineMathNode = state.schema.nodes.inlineMath.create({ latex });
-            tr.replaceRangeWith(deleteFrom, deleteTo, inlineMathNode);
-            return true;
-          })
-          .run();
-      } else {
-        editor.chain().insertInlineMath({ latex }).focus().run();
-      }
+      const insertPos = savedPos ?? state.selection.from;
+
+      editor
+        .chain()
+        .focus()
+        .command(({ tr, state }) => {
+          const inlineMathNode = state.schema.nodes.inlineMath.create({ latex });
+          tr.insert(insertPos, inlineMathNode);
+          tr.setSelection(TextSelection.near(tr.doc.resolve(insertPos)));
+          return true;
+        })
+        .run();
     }
 
     closeDialogCommand();

package/src/editor/handlers/index.ts

@@ -1,8 +1,7 @@
-export { createImageUploadHandler } from './create-image-upload-handler';
 export {
   createHandleImageAdd,
   createHandleKatexAdd,
   createHandleLinkAdd,
   createHandleVideoAdd,
   createHandleImageEdit,
-} from './dialog-handlers';
+} from "./dialog-handlers";

package/src/extensions/views/components/index.ts

@@ -4,4 +4,5 @@ export { CopyableText } from "./copyable-text";
 export { CustomQuote, CustomQuoteText, CustomQuoteAuthor, CustomQuoteSign } from "./custom-quote";
 export { Figure } from "./figure";
 export { PromptHeader, PromptContent } from "./prompt";
+export { Table } from "./table";
 export { Video } from "./video";

package/src/extensions/views/components/table.tsx

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+
+interface TableProps {
+  children: ReactNode;
+}
+
+/**
+ * Table component for static rendering
+ * Applies column widths from Tiptap table cells
+ */
+export function Table({ children }: TableProps) {
+  let colWidths: number[] = [];
+
+  if (Array.isArray(children) && children.length > 0) {
+    const firstRow = children[0];
+
+    if (firstRow?.props?.children) {
+      const cells = Array.isArray(firstRow.props.children)
+        ? firstRow.props.children
+        : [firstRow.props.children];
+
+      colWidths = cells
+        .map((cell: any) => cell?.props?.node?.attrs?.colwidth?.[0])
+        .filter((width: number | undefined) => width !== undefined);
+    }
+  }
+
+  const tableWidth =
+    colWidths.length > 0 ? colWidths.reduce((total, width) => total + width, 0) : null;
+
+  return (
+    <div className="tableWrapper">
+      <table style={tableWidth ? { width: `${tableWidth}px` } : undefined}>
+        {colWidths.length > 0 && (
+          <colgroup>
+            {colWidths.map((width, index) => (
+              <col
+                key={index}
+                style={{ width: `${width}px` }}
+              />
+            ))}
+          </colgroup>
+        )}
+        <tbody>{children}</tbody>
+      </table>
+    </div>
+  );
+}

package/src/render/static-renderer-config.tsx

@@ -24,6 +24,7 @@ import {
   CustomQuoteSign,
   PromptHeader,
   PromptContent,
+  Table,
   Video,
   Figure,
 } from "@/extensions/views/components";
@@ -94,11 +95,24 @@ export const getNodeMapping = (getImageById?: (fileId: string) => string | null)
   video({ node }: any) {
     return <Video src={node.attrs.src} />;
   },
+  table({ children }: any) {
+    return <Table>{children}</Table>;
+  },
   figure({ node }: any) {
-    return <Figure {...node.attrs} getImageById={getImageById} />;
+    return (
+      <Figure
+        {...node.attrs}
+        getImageById={getImageById}
+      />
+    );
   },
   image({ node }: any) {
-    return <Figure {...node.attrs} getImageById={getImageById} />;
+    return (
+      <Figure
+        {...node.attrs}
+        getImageById={getImageById}
+      />
+    );
   },
   inlineMath({ node }: any) {
     const latex = node.attrs.latex || "";

package/src/styles/editor/base.css

@@ -1,9 +1,6 @@
 .tiptap-content-wrapper {
   position: relative;
   margin: 0 !important;
-}
-
-.tiptap {
   padding: var(--tiptap-spacing);
   border: 1px solid var(--tiptap-color-border);
   border-radius: var(--tiptap-radius);
@@ -11,12 +8,17 @@
   font-family: var(--tiptap-font-family);
 }
 
-.tiptap:focus {
+.tiptap-content-wrapper:focus {
   border-color: var(--tiptap-color-primary-light);
   outline: none;
 }
 
-.tiptap-content-wrapper.has-error .tiptap {
+.tiptap-content-wrapper .ProseMirror {
+  border: none;
+  outline: none;
+}
+
+.tiptap-content-wrapper.has-error {
   border-color: var(--tiptap-color-primary-error);
 }
 

package/src/styles/editor/states.css

@@ -44,11 +44,12 @@
 
 /* Disabled state styles */
 .tiptap-content-wrapper.is-disabled {
-  opacity: 0.6;
+  padding: var(--tiptap-spacing);
   cursor: not-allowed;
+  opacity: 0.6;
   pointer-events: none;
 }
 
-.tiptap-content-wrapper.is-disabled .ProseMirror {
-  background-color: var(--tiptap-color-grey-1, #f5f5f5);
+.tiptap-content-wrapper.is-disabled {
+  background-color: var(--tiptap-color-bg-disabled);
 }

package/src/styles/editor/typography.css

@@ -3,11 +3,11 @@
   font-weight: 400;
   font-size: var(--tiptap-font-size);
   line-height: 140%;
-  letter-spacing: 0;
+  letter-spacing: normal;
 }
 
 .tiptap > * {
-  letter-spacing: 0;
+  letter-spacing: normal;
 }
 
 .tiptap p:not(:last-child),
@@ -17,6 +17,13 @@
   margin-bottom: var(--tiptap-spacing);
 }
 
+.tiptap h1 {
+  font-weight: 600;
+  font-size: 40px;
+  line-height: 110%;
+  letter-spacing: 0;
+}
+
 .tiptap h2 {
   font-weight: 600;
   font-size: 36px;
@@ -76,6 +83,7 @@
 .tiptap ul,
 .tiptap ol {
   padding-left: 32px;
+  font-size: var(--tiptap-font-size);
 }
 
 .tiptap ul:not(:last-child),

package/src/styles/editor/variables.css

@@ -8,6 +8,7 @@
   --tiptap-color-link: #0059df;
   --tiptap-color-primary-error: #f04438;
   --tiptap-color-border: #f2f4f7;
+  --tiptap-color-bg-disabled: #f7f7f8;
   --tiptap-color-divider: #aaabb7;
   --tiptap-color-text-disabled: #aaabb7;
   --tiptap-color-text-placeholder: #aaabb7;

package/src/styles/extensions/callout.css

@@ -22,19 +22,20 @@
 
 .callout-node {
   display: flex;
+  align-items: baseline;
   margin: 32px 0;
   padding: 16px;
   gap: 10px;
   border-radius: 8px;
 }
-
+/* 
 .callout-node:has(.callout-content h2),
 .callout-node:has(.callout-content h3),
 .callout-node:has(.callout-content h4),
 .callout-node:has(.callout-content h5),
 .callout-node:has(.callout-content h6) {
   align-items: baseline;
-}
+} */
 
 .callout-node p {
   font-size: 16px;
@@ -103,6 +104,8 @@
 .callout-content-wrapper {
   flex: 1;
   min-width: 0;
+  font-size: var(--tiptap-font-size);
+  line-height: 1;
 }
 
 .callout-content {

package/src/styles/extensions/code-block.css

@@ -4,7 +4,7 @@
   --tiptap-code-block-text: #e0e0e0;
   --tiptap-code-block-copy-button: #eaecef;
   --tiptap-code-block-copy-button-hover: #cdc8c8;
-  --tiptap-code-block-font-family: 'Fira Code', monospace;
+  --tiptap-code-block-font-family: "Fira Code", monospace;
 }
 
 .tiptap-code-block-wrapper {
@@ -55,6 +55,7 @@
   flex: 1;
   max-width: 50%;
   color: var(--tiptap-code-block-text);
+  font-size: 14px;
   font-family: var(--tiptap-code-block-font-family);
 }
 

package/src/styles/extensions/commands-list.css

@@ -1,6 +1,10 @@
+.react-renderer:has(.commands-list-container) {
+  z-index: 10000;
+}
+
 .commands-list-container {
   display: flex;
-  z-index: 50;
+  position: relative;
   flex-direction: column;
   width: 280px;
   max-height: 300px;

package/src/styles/extensions/custom-quote.css

@@ -30,6 +30,11 @@
   flex-direction: column;
   max-width: 700px;
   margin: 0 auto 16px;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 140%;
+  letter-spacing: -0.36px;
 }
 
 [data-custom-quote-text] .is-empty::before {

package/src/styles/extensions/details.css

@@ -1,4 +1,3 @@
-/* Editor view with custom button */
 [data-type="details"] {
   display: flex;
   align-items: baseline;
@@ -35,7 +34,6 @@
   transform: rotate(90deg);
 }
 
-/* Native HTML details element (server-rendered) */
 .tiptap details.details {
   align-items: baseline;
   margin: 24px 0;
@@ -53,12 +51,15 @@
   border: none;
   outline: none;
   background: transparent;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 140%;
+  letter-spacing: -0.36px;
   list-style: none;
   cursor: pointer;
   transition: all 150ms ease-in-out;
 }
 
-/* Custom marker styling using ::before since ::marker doesn't support transform */
 .tiptap details.details summary::before {
   display: inline-block;
   flex-shrink: 0;
@@ -72,7 +73,6 @@
   transform: rotate(90deg);
 }
 
-/* Hide the default marker */
 .tiptap details.details summary::-webkit-details-marker {
   display: none;
 }

package/src/styles/extensions/myth-reality.css

@@ -49,11 +49,13 @@
 
 .myth-reality-block-content p:first-child {
   margin-bottom: 8px;
-  font-weight: 600;
+  font-weight: 600 !important;
 }
 
+.myth-reality-block-content p,
 .myth-reality-block-content ul p,
 .myth-reality-block-content li p {
   margin-bottom: 0;
+  font-weight: 400;
   font-size: var(--tiptap-font-size);
 }

package/src/styles/extensions/prompt.css

@@ -37,8 +37,11 @@
   justify-content: space-between;
   margin-bottom: 16px;
   gap: 8px;
+  font-style: normal;
   font-weight: 600;
-  font-size: var(--tiptap-prompt-header-font-size);
+  font-size: var(--tiptap-font-size);
+  line-height: 140%;
+  letter-spacing: -0.36px;
 }
 
 .prompt-content-wrapper {

package/src/editor/handlers/create-image-upload-handler.ts

@@ -1,24 +0,0 @@
-import { ImageUploadHandler } from "../../types";
-
-/**
- * Creates an image upload handler that wraps a custom upload action
- * Supports two patterns:
- * 1. Backend with fileId: { fileId: "file-123" }
- * 2. Direct CDN: { fileUrl: "https://cdn.com/image.jpg" }
- */
-export function createImageUploadHandler(
-  uploadAction: (file: File) => Promise<{ data?: { fileId?: string; fileUrl?: string } }>
-): ImageUploadHandler {
-  return async (file: File) => {
-    const { data } = await uploadAction(file);
-
-    if (!data?.fileId && !data?.fileUrl) {
-      throw new Error("Failed to upload file: must return fileId or fileUrl");
-    }
-
-    return {
-      fileId: data.fileId,
-      fileUrl: data.fileUrl,
-    };
-  };
-}