@cyberyozh/text-editor 0.1.6 → 0.1.7

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 {