@cyberyozh/text-editor 0.1.5 → 0.1.7

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

@@ -2,7 +2,11 @@ import type { Editor } from "@tiptap/react";
 
 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;
 
@@ -19,9 +23,27 @@ export const createHandleImageAdd = (editor: Editor | null, closeDialogCommand:
           tr.replaceWith($from.before(), $from.after(), node);
           return true;
         })
+        .scrollIntoView()
         .run();
     } else {
-      editor?.chain().focus().setFigure(attrs).run();
+      const insertPos = savedPos ?? state.selection.from;
+
+      editor
+        .chain()
+        .focus()
+        .command(({ tr, state }) => {
+          const $pos = state.doc.resolve(insertPos);
+          const figureNode = state.schema.nodes.figure.create({ ...attrs });
+
+          if ($pos.parent.type.name === "paragraph" && $pos.parent.textContent === "") {
+            tr.replaceWith($pos.before(), $pos.after(), figureNode);
+          } else {
+            tr.insert(insertPos, figureNode);
+          }
+          return true;
+        })
+        .scrollIntoView()
+        .run();
     }
     closeDialogCommand();
   };
@@ -40,30 +62,61 @@ 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 text = $from.parent.textContent;
 
-    editor
-      .chain()
-      .focus()
-      .command(({ tr }) => {
-        tr.replaceWith(
-          $from.before(),
-          $from.after(),
-          editor.schema.nodes.video.create({ src: url })
-        );
-        return true;
-      })
-      .run();
+    if (text.lastIndexOf("/") !== -1) {
+      editor
+        .chain()
+        .focus()
+        .command(({ tr }) => {
+          tr.replaceWith(
+            $from.before(),
+            $from.after(),
+            editor.schema.nodes.video.create({ src: url })
+          );
+          return true;
+        })
+        .scrollIntoView()
+        .run();
+    } else {
+      const insertPos = savedPos ?? state.selection.from;
+
+      editor
+        .chain()
+        .focus()
+        .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);
+          } else {
+            tr.insert(insertPos, videoNode);
+          }
+          return true;
+        })
+        .scrollIntoView()
+        .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 +134,50 @@ export const createHandleLinkAdd = (editor: Editor | null, closeDialogCommand: (
         })
         .run();
     } else {
-      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("/");
+      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) {
+      if (slashIndex !== -1) {
+        editor
+          .chain()
+          .focus()
+          .command(({ tr }) => {
             tr.delete(nodeStart + slashIndex, $from.pos);
-          }
-
-          return true;
-        })
-        .extendMarkRange("link")
-        .setLink({ href: url })
-        .insertContent(title)
-        .run();
+            return true;
+          })
+          .extendMarkRange("link")
+          .setLink({ href: url })
+          .insertContent(title)
+          .scrollIntoView()
+          .run();
+      } else {
+        const insertPos = savedPos ?? state.selection.from;
+        editor
+          .chain()
+          .focus()
+          .command(({ tr }) => {
+            const linkMark = editor.schema.marks.link.create({ href: url });
+            const textNode = editor.schema.text(title, [linkMark]);
+            tr.insert(insertPos, textNode);
+            return true;
+          })
+          .scrollIntoView()
+          .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;
 
@@ -132,9 +203,20 @@ export const createHandleKatexAdd = (editor: Editor | null, closeDialogCommand:
             tr.replaceRangeWith(deleteFrom, deleteTo, inlineMathNode);
             return true;
           })
+          .scrollIntoView()
           .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);
+            return true;
+          })
+          .scrollIntoView()
+          .run();
       }
     }
 

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,29 @@
+import type { ReactNode } from "react";
+
+interface TableProps {
+  children: ReactNode;
+  colWidths?: number[];
+}
+
+/**
+ * Table component for static rendering
+ * Applies column widths from Tiptap table cells
+ */
+export function Table({ children, colWidths = [] }: TableProps) {
+  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,40 @@ export const getNodeMapping = (getImageById?: (fileId: string) => string | null)
   video({ node }: any) {
     return <Video src={node.attrs.src} />;
   },
+  table({ children }: any) {
+    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);
+      }
+    }
+
+    return <Table colWidths={colWidths}>{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 {