i18n old behavior restored; theme aware custom toolbar; theme aware blocks; ui improvements

Rajat Saxena · Rajat Saxena · commit e86f3c3c1c0c · 2025-10-03T00:29:16.000+05:30
diff --git a/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/content/section/[section]/lesson/page.tsx b/apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/content/section/[section]/lesson/page.tsx
@@ -38,6 +38,7 @@ import {
     MANAGE_COURSES_PAGE_HEADING,
     TOAST_TITLE_ERROR,
     TOAST_TITLE_SUCCESS,
+    TEXT_EDITOR_PLACEHOLDER,
 } from "@ui-config/strings";
 import DashboardContent from "@components/admin/dashboard-content";
 import useProduct from "@/hooks/use-product";
@@ -219,6 +220,7 @@ export default function LessonPage() {
                                 setTextContent(state);
                             }}
                             url={address.backend}
+                            placeholder={TEXT_EDITOR_PLACEHOLDER}
                         />
                         {errors.content && (
                             <p className="text-sm text-red-500">
diff --git a/apps/web/components/admin/blogs/editor/details.tsx b/apps/web/components/admin/blogs/editor/details.tsx
@@ -18,6 +18,7 @@ import {
     TOAST_TITLE_ERROR,
     FORM_FIELD_FEATURED_IMAGE,
     TOAST_TITLE_SUCCESS,
+    TEXT_EDITOR_PLACEHOLDER,
 } from "@/ui-config/strings";
 import { MIMETYPE_IMAGE } from "@/ui-config/constants";
 import { Media, Profile } from "@courselit/common-models";
@@ -148,6 +149,7 @@ export default function Details({ id }: DetailsProps) {
                     refresh={refreshDetails}
                     onChange={(state: any) => setDescription(state)}
                     url={address.backend}
+                    placeholder={TEXT_EDITOR_PLACEHOLDER}
                 />
                 <div>
                     <Button type="submit" disabled={loading}>
diff --git a/apps/web/ui-config/strings.ts b/apps/web/ui-config/strings.ts
@@ -644,3 +644,4 @@ export const PRODUCT_EMPTY_WARNING =
 export const BLOG_UPDATED_PREFIX = "Updated";
 export const HEADER_HELP = "Help";
 export const CHECKOUT_PAGE_ORDER_SUMMARY = "Order summary";
+export const TEXT_EDITOR_PLACEHOLDER = "Type here...";
diff --git a/packages/components-library/src/styles.css b/packages/components-library/src/styles.css
@@ -80,7 +80,7 @@
 
         /* Code block styling */
         :is(pre) {
-            @apply mb-6 mt-4 p-4 bg-gray-50 rounded-lg;
+            @apply mb-6 mt-4 p-4 bg-accent rounded-lg;
 
             :is(code) {
                 @apply !bg-transparent !px-0 !py-0 !rounded-none !border-none !text-base;
@@ -89,7 +89,7 @@
 
         /* Blockquote with better spacing */
         :is(blockquote) {
-            @apply italic border-l-4 border-slate-200 text-slate-500 pl-6 py-2 mb-6 mt-4;
+            @apply italic border-l-4 border-border text-muted-foreground pl-6 py-2 mb-6 mt-4;
             line-height: 1.6;
 
             :is(p) {
@@ -99,7 +99,7 @@
 
         /* Inline code styling */
         :is(code) {
-            @apply bg-gray-100 px-2 py-1 rounded border border-gray-200 text-sm;
+            @apply bg-muted px-2 py-1 rounded border border-border text-sm;
         }
 
         /* Image spacing for better visual flow */
@@ -123,12 +123,54 @@
         }
 
         :is(th, td) {
-            @apply p-3 border border-gray-200;
+            @apply p-3 border border-border;
         }
 
         /* Horizontal rule spacing */
         :is(hr) {
-            @apply my-8 border-gray-200;
+            @apply my-8 border-border;
+        }
+
+        .MuiStack-root {
+            @apply bg-background flex justify-center;
+
+            .MuiBox-root {
+                @apply bg-transparent;
+
+                :is(button) {
+                    @apply border border-border hover:cursor-pointer;
+
+                    :is(svg) {
+                        fill: hsl(var(--foreground));
+                    }
+                }
+            }
+        }
+
+        .ProseMirror {
+            @apply border border-border outline-none overflow-y-auto;
+        }
+
+        .ProseMirror-gapcursor:after {
+            border-top-color: hsl(var(--foreground));
+        }
+    }
+}
+
+.MuiPopper-root {
+    .MuiStack-root {
+        @apply bg-background;
+
+        .MuiBox-root {
+            @apply bg-transparent;
+
+            :is(button) {
+                @apply border border-border hover:cursor-pointer;
+
+                :is(svg) {
+                    fill: hsl(var(--foreground));
+                }
+            }
         }
     }
 }
diff --git a/packages/components-library/src/text-editor.tsx b/packages/components-library/src/text-editor.tsx
@@ -9,6 +9,7 @@ export interface WysiwygEditorProps {
     editable?: boolean;
     refresh?: number;
     url: string;
+    placeholder?: string;
 }
 
 export default function Editor({
@@ -18,6 +19,7 @@ export default function Editor({
     editable,
     refresh,
     url,
+    placeholder,
 }: WysiwygEditorProps) {
     return (
         <div className="text-editor">
@@ -29,6 +31,7 @@ export default function Editor({
                 refresh={refresh}
                 fontFamily={"inherit"}
                 url={url}
+                placeholder={placeholder}
             />
         </div>
     );
diff --git a/packages/text-editor/package.json b/packages/text-editor/package.json
@@ -49,6 +49,7 @@
         "@remirror/core-types": "^3.0.0",
         "@remirror/extension-codemirror6": "^2.0.2",
         "@remirror/extension-react-tables": "^3.0.3",
+        "@remirror/i18n": "^3.0.0",
         "@remirror/pm": "^3.0.1",
         "@remirror/react": "^3.0.3",
         "@remirror/react-editors": "^2.0.3",
diff --git a/packages/text-editor/src/BubbleMenu.tsx b/packages/text-editor/src/BubbleMenu.tsx
@@ -7,7 +7,7 @@ import FloatingLinkCommandGroup from "./FloatingLinkCommandGroup";
  */
 const BubbleMenu: FC = () => {
     return (
-        <FloatingToolbar>
+        <FloatingToolbar style={{ zIndex: 20 }}>
             <FormattingButtonGroup />
             <FloatingLinkCommandGroup />
         </FloatingToolbar>
diff --git a/packages/text-editor/src/FloatingLinkCommandGroup.tsx b/packages/text-editor/src/FloatingLinkCommandGroup.tsx
@@ -214,11 +214,10 @@ const FloatingLinkToolbar = () => {
 
             <FloatingWrapper
                 positioner="always"
-                placement="bottom"
+                placement="auto"
                 enabled={isEditing}
             >
                 <DelayAutoFocusInput
-                    style={{ zIndex: 20 }}
                     autoFocus
                     placeholder="Enter link..."
                     onChange={(event: ChangeEvent<HTMLInputElement>) =>
diff --git a/packages/text-editor/src/Renderer/index.tsx b/packages/text-editor/src/Renderer/index.tsx
@@ -22,7 +22,6 @@ const typeMap: MarkMap = {
     codeMirror: CodeMirrorRenderer,
     doc: Doc,
     hardBreak: "br",
-    // heading: Heading,
     horizontalRule: "hr",
     iframe: createIFrameHandler(),
     image: "img",
diff --git a/packages/text-editor/src/Toolbar.tsx b/packages/text-editor/src/Toolbar.tsx
@@ -2,6 +2,7 @@ import React, { FC } from "react";
 import {
     FormattingButtonGroup,
     HeadingLevelButtonGroup,
+    InsertHorizontalRuleButton,
     ListButtonGroup,
     RedoButton,
     Toolbar as RemirrorToolbar,
@@ -19,6 +20,7 @@ const Toolbar: FC = () => {
                 <ToggleBlockquoteButton />
             </FormattingButtonGroup>
             <ListButtonGroup />
+            <InsertHorizontalRuleButton />
         </RemirrorToolbar>
     );
 };
diff --git a/packages/text-editor/src/WysiwygEditor.tsx b/packages/text-editor/src/WysiwygEditor.tsx
@@ -22,6 +22,7 @@ import Toolbar from "./Toolbar";
 import { ReactEditorProps } from "./types";
 import emptyDoc from "./empty-doc";
 import { getExtensions } from "./extensions";
+import { i18nFormat } from "@remirror/i18n";
 
 export interface WysiwygEditorProps {
     onChange: (json: unknown) => void;
@@ -114,13 +115,27 @@ const WysiwygEditor: WysiwygEditorType = Object.assign(
                         onChangeFunc(data);
                     }}
                     editable={editable}
+                    i18nFormat={i18nFormat}
                     {...rest}
                 >
-                    {editable && showToolbar && <Toolbar />}
-                    <EditorComponent />
-                    <BubbleMenu />
-                    <TableComponents />
-                    {children}
+                    <div style={{ position: "relative" }}>
+                        {editable && showToolbar && (
+                            <div
+                                style={{
+                                    position: "sticky",
+                                    top: 0,
+                                    left: 0,
+                                    zIndex: 10,
+                                }}
+                            >
+                                <Toolbar />
+                            </div>
+                        )}
+                        <EditorComponent />
+                        <BubbleMenu />
+                        <TableComponents />
+                        {children}
+                    </div>
                 </Remirror>
             </ThemeProvider>
         );
diff --git a/packages/text-editor/src/extensions.ts b/packages/text-editor/src/extensions.ts
@@ -115,7 +115,9 @@ export const getExtensions = (placeholder, url) => () => [
         enableResizing: true,
         uploadHandler: getUploadHandler(url),
     }),
-    new DropCursorExtension(),
+    new DropCursorExtension({
+        color: "hsl(var(--foreground))",
+    }),
     new CodeMirrorExtension({
         extensions: [basicSetup, oneDark],
     }),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
