Skip to content

Commit 48ee0e4

Browse files
rajat1saxenaRajat Saxena
rajat1saxena
and
Rajat Saxena
authored
Triple backticks are crashing the text editor (#641)
* Triple backticks are crashing the text editor Fixes #640 * Custom toolbar * i18n old behavior restored; theme aware custom toolbar; theme aware blocks; ui improvements --------- Co-authored-by: Rajat Saxena <hi@rajatsaxena.dev>
1 parent a0ad57e commit 48ee0e4

File tree

14 files changed

+139
-57
lines changed

14 files changed

+139
-57
lines changed

‎apps/web/app/(with-contexts)/dashboard/(sidebar)/product/[id]/content/section/[section]/lesson/page.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ import {
3838
MANAGE_COURSES_PAGE_HEADING,
3939
TOAST_TITLE_ERROR,
4040
TOAST_TITLE_SUCCESS,
41+
TEXT_EDITOR_PLACEHOLDER,
4142
} from "@ui-config/strings";
4243
import DashboardContent from "@components/admin/dashboard-content";
4344
import useProduct from "@/hooks/use-product";
@@ -219,6 +220,7 @@ export default function LessonPage() {
219220
setTextContent(state);
220221
}}
221222
url={address.backend}
223+
placeholder={TEXT_EDITOR_PLACEHOLDER}
222224
/>
223225
{errors.content && (
224226
<p className="text-sm text-red-500">

‎apps/web/components/admin/blogs/editor/details.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
TOAST_TITLE_ERROR,
1919
FORM_FIELD_FEATURED_IMAGE,
2020
TOAST_TITLE_SUCCESS,
21+
TEXT_EDITOR_PLACEHOLDER,
2122
} from "@/ui-config/strings";
2223
import { MIMETYPE_IMAGE } from "@/ui-config/constants";
2324
import { Media, Profile } from "@courselit/common-models";
@@ -148,6 +149,7 @@ export default function Details({ id }: DetailsProps) {
148149
refresh={refreshDetails}
149150
onChange={(state: any) => setDescription(state)}
150151
url={address.backend}
152+
placeholder={TEXT_EDITOR_PLACEHOLDER}
151153
/>
152154
<div>
153155
<Button type="submit" disabled={loading}>

‎apps/web/next-env.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/// <reference types="next" />
22
/// <reference types="next/image-types/global" />
3+
/// <reference types="next/navigation-types/compat/navigation" />
34
/// <reference path="./.next/types/routes.d.ts" />
45

56
// NOTE: This file should not be edited

‎apps/web/ui-config/strings.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -644,3 +644,4 @@ export const PRODUCT_EMPTY_WARNING =
644644
export const BLOG_UPDATED_PREFIX = "Updated";
645645
export const HEADER_HELP = "Help";
646646
export const CHECKOUT_PAGE_ORDER_SUMMARY = "Order summary";
647+
export const TEXT_EDITOR_PLACEHOLDER = "Type here...";

‎packages/components-library/src/styles.css‎

Lines changed: 48 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -73,19 +73,14 @@
7373
@apply list-decimal ml-6;
7474
}
7575

76-
/* Remove duplicate rule */
77-
/* :is(ol) {
78-
@apply list-decimal;
79-
} */
80-
8176
/* Remove margin from last paragraph in divs */
8277
:is(div) > p:last-of-type {
8378
@apply mb-0;
8479
}
8580

8681
/* Code block styling */
8782
:is(pre) {
88-
@apply mb-6 mt-4 p-4 bg-gray-50 rounded-lg;
83+
@apply mb-6 mt-4 p-4 bg-accent rounded-lg;
8984

9085
:is(code) {
9186
@apply !bg-transparent !px-0 !py-0 !rounded-none !border-none !text-base;
@@ -94,7 +89,7 @@
9489

9590
/* Blockquote with better spacing */
9691
:is(blockquote) {
97-
@apply italic border-l-4 border-slate-200 text-slate-500 pl-6 py-2 mb-6 mt-4;
92+
@apply italic border-l-4 border-border text-muted-foreground pl-6 py-2 mb-6 mt-4;
9893
line-height: 1.6;
9994

10095
:is(p) {
@@ -104,7 +99,7 @@
10499

105100
/* Inline code styling */
106101
:is(code) {
107-
@apply bg-gray-100 px-2 py-1 rounded border border-gray-200 text-sm;
102+
@apply bg-muted px-2 py-1 rounded border border-border text-sm;
108103
}
109104

110105
/* Image spacing for better visual flow */
@@ -114,7 +109,7 @@
114109

115110
/* Link styling */
116111
:is(a) {
117-
@apply underline decoration-dotted decoration-2 underline-offset-2 transition-all duration-200 hover:decoration-solid;
112+
@apply underline decoration-2 underline-offset-2 transition-all duration-200 hover:decoration-dotted;
118113
}
119114

120115
/* Better spacing for content sections */
@@ -128,12 +123,54 @@
128123
}
129124

130125
:is(th, td) {
131-
@apply p-3 border border-gray-200;
126+
@apply p-3 border border-border;
132127
}
133128

134129
/* Horizontal rule spacing */
135130
:is(hr) {
136-
@apply my-8 border-gray-200;
131+
@apply my-8 border-border;
132+
}
133+
134+
.MuiStack-root {
135+
@apply bg-background flex justify-center;
136+
137+
.MuiBox-root {
138+
@apply bg-transparent;
139+
140+
:is(button) {
141+
@apply border border-border hover:cursor-pointer;
142+
143+
:is(svg) {
144+
fill: hsl(var(--foreground));
145+
}
146+
}
147+
}
148+
}
149+
150+
.ProseMirror {
151+
@apply border border-border outline-none overflow-y-auto;
152+
}
153+
154+
.ProseMirror-gapcursor:after {
155+
border-top-color: hsl(var(--foreground));
156+
}
157+
}
158+
}
159+
160+
.MuiPopper-root {
161+
.MuiStack-root {
162+
@apply bg-background;
163+
164+
.MuiBox-root {
165+
@apply bg-transparent;
166+
167+
:is(button) {
168+
@apply border border-border hover:cursor-pointer;
169+
170+
:is(svg) {
171+
fill: hsl(var(--foreground));
172+
}
173+
}
137174
}
138175
}
139176
}

‎packages/components-library/src/text-editor.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export interface WysiwygEditorProps {
99
editable?: boolean;
1010
refresh?: number;
1111
url: string;
12+
placeholder?: string;
1213
}
1314

1415
export default function Editor({
@@ -18,6 +19,7 @@ export default function Editor({
1819
editable,
1920
refresh,
2021
url,
22+
placeholder,
2123
}: WysiwygEditorProps) {
2224
return (
2325
<div className="text-editor">
@@ -29,6 +31,7 @@ export default function Editor({
2931
refresh={refresh}
3032
fontFamily={"inherit"}
3133
url={url}
34+
placeholder={placeholder}
3235
/>
3336
</div>
3437
);

‎packages/text-editor/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,15 @@
4141
},
4242
"dependencies": {
4343
"@codemirror/language-data": "^6.5.1",
44-
"@codemirror/state": "6.4.1",
44+
"@codemirror/state": "^6.5.2",
4545
"@codemirror/theme-one-dark": "^6.1.2",
4646
"@courselit/common-models": "workspace:^",
4747
"@courselit/utils": "workspace:^",
4848
"@remirror/core": "^3.0.2",
4949
"@remirror/core-types": "^3.0.0",
5050
"@remirror/extension-codemirror6": "^2.0.2",
5151
"@remirror/extension-react-tables": "^3.0.3",
52+
"@remirror/i18n": "^3.0.0",
5253
"@remirror/pm": "^3.0.1",
5354
"@remirror/react": "^3.0.3",
5455
"@remirror/react-editors": "^2.0.3",

‎packages/text-editor/src/BubbleMenu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import FloatingLinkCommandGroup from "./FloatingLinkCommandGroup";
77
*/
88
const BubbleMenu: FC = () => {
99
return (
10-
<FloatingToolbar>
10+
<FloatingToolbar style={{ zIndex: 20 }}>
1111
<FormattingButtonGroup />
1212
<FloatingLinkCommandGroup />
1313
</FloatingToolbar>

‎packages/text-editor/src/FloatingLinkCommandGroup.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -214,11 +214,10 @@ const FloatingLinkToolbar = () => {
214214

215215
<FloatingWrapper
216216
positioner="always"
217-
placement="bottom"
217+
placement="auto"
218218
enabled={isEditing}
219219
>
220220
<DelayAutoFocusInput
221-
style={{ zIndex: 20 }}
222221
autoFocus
223222
placeholder="Enter link..."
224223
onChange={(event: ChangeEvent<HTMLInputElement>) =>

‎packages/text-editor/src/Renderer/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ const typeMap: MarkMap = {
2222
codeMirror: CodeMirrorRenderer,
2323
doc: Doc,
2424
hardBreak: "br",
25-
// heading: Heading,
2625
horizontalRule: "hr",
2726
iframe: createIFrameHandler(),
2827
image: "img",
@@ -32,6 +31,7 @@ const typeMap: MarkMap = {
3231
text: TextHandler,
3332
taskList: "ul",
3433
taskListItem: "li",
34+
// add links to headings for table of contents navigation
3535
heading: ({ node, children }) => {
3636
if (!node.content) {
3737
return null;
@@ -53,8 +53,9 @@ const markMap: MarkMap = {
5353
italic: "em",
5454
bold: "strong",
5555
code: "code",
56-
link: createLinkHandler({ target: "_blank" }),
56+
link: createLinkHandler({ target: "_blank", rel: "noopener noreferrer" }),
5757
underline: "u",
58+
strike: "strike",
5859
};
5960

6061
interface RendererProps {

0 commit comments

Comments
 (0)