diff --git a/apps/web/components/community/info.tsx b/apps/web/components/community/info.tsx
index fb609f036..b185274d2 100644
--- a/apps/web/components/community/info.tsx
+++ b/apps/web/components/community/info.tsx
@@ -14,13 +14,14 @@ import {
FormField,
getSymbolFromCurrency,
Link,
- TextRenderer,
useToast,
} from "@courselit/components-library";
+import { TextRenderer } from "@courselit/page-blocks";
import {
AddressContext,
ProfileContext,
SiteInfoContext,
+ ThemeContext,
} from "@components/contexts";
import {
Dialog,
@@ -33,6 +34,7 @@ import {
} from "@components/ui/dialog";
import { COMMUNITY_SETTINGS, TOAST_TITLE_SUCCESS } from "@ui-config/strings";
import { Share2 } from "lucide-react";
+import WidgetErrorBoundary from "@components/public/base-layout/template/widget-error-boundary";
const { permissions } = UIConstants;
interface CommunityInfoProps {
@@ -74,6 +76,7 @@ export function CommunityInfo({
const currencySymbol =
getSymbolFromCurrency(siteinfo.currencyISOCode || "USD") || "$";
const { toast } = useToast();
+ const { theme } = useContext(ThemeContext);
const handleJoinSubmit = async (e: FormEvent) => {
e.preventDefault();
@@ -121,7 +124,14 @@ export function CommunityInfo({
/>
- {description &&
+
+ )}
{memberCount.toLocaleString()} members
diff --git a/apps/web/components/public/lesson-viewer/index.tsx b/apps/web/components/public/lesson-viewer/index.tsx
index 03973794b..af1e76480 100644
--- a/apps/web/components/public/lesson-viewer/index.tsx
+++ b/apps/web/components/public/lesson-viewer/index.tsx
@@ -19,12 +19,12 @@ import {
NOT_ENROLLED_HEADER,
} from "@/ui-config/strings";
import {
- TextRenderer,
Link,
Button2,
Skeleton,
useToast,
} from "@courselit/components-library";
+import { TextRenderer } from "@courselit/page-blocks";
import {
Constants,
type Address,
@@ -38,6 +38,7 @@ import { isEnrolled } from "../../../ui-lib/utils";
import LessonEmbedViewer from "./embed-viewer";
import QuizViewer from "./quiz-viewer";
import { getUserProfile } from "@/app/(with-contexts)/helpers";
+import WidgetErrorBoundary from "../base-layout/template/widget-error-boundary";
interface CaptionProps {
text: string;
@@ -299,14 +300,16 @@ export const LessonViewer = ({
{String.prototype.toUpperCase.call(LESSON_TYPE_TEXT) ===
lesson.type &&
lesson.content && (
-
- }
- />
+
+
+ }
+ />
+
)}
{String.prototype.toUpperCase.call(
LESSON_TYPE_EMBED,
diff --git a/apps/web/components/table-of-content.tsx b/apps/web/components/table-of-content.tsx
new file mode 100644
index 000000000..2ab56dd82
--- /dev/null
+++ b/apps/web/components/table-of-content.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { extractHeadings } from "@courselit/text-editor";
+import { Header2, Link } from "@courselit/page-primitives";
+import type { ThemeStyle } from "@courselit/page-models";
+
+interface TableOfContentProps {
+ json: Record;
+ contentTableHeader?: string;
+ theme?: ThemeStyle;
+}
+
+export function TableOfContent({
+ json,
+ contentTableHeader = "Table of Contents",
+ theme,
+}: TableOfContentProps) {
+ let headings: { text: string; id: string }[] = [];
+
+ try {
+ headings = json ? extractHeadings(json as any) : [];
+ } catch (err) {
+ // eslint-disable-next-line no-console
+ console.error("Error extracting headings", err);
+ }
+
+ if (headings.length === 0) {
+ return null;
+ }
+
+ return (
+
+ {contentTableHeader && (
+
+ {contentTableHeader}
+
+ )}
+
+ {headings.map(({ text, id }) => (
+ {text}
+
+ ))}
+
+
+ );
+}
diff --git a/apps/web/graphql/pages/logic.ts b/apps/web/graphql/pages/logic.ts
index fe80764bc..b58ed1a22 100644
--- a/apps/web/graphql/pages/logic.ts
+++ b/apps/web/graphql/pages/logic.ts
@@ -472,3 +472,44 @@ export const deletePageInternal = async (ctx: GQLContext, id: string) => {
pageId: id,
});
};
+
+export const deleteBlock = async ({
+ context: ctx,
+ pageId,
+ blockId,
+}: {
+ context: GQLContext;
+ pageId: string;
+ blockId: string;
+}) => {
+ checkIfAuthenticated(ctx);
+ if (!checkPermission(ctx.user.permissions, [permissions.manageSite])) {
+ throw new Error(responses.action_not_allowed);
+ }
+ const page: Page | null = await PageModel.findOne({
+ pageId,
+ domain: ctx.subdomain._id,
+ });
+
+ if (!page) {
+ return null;
+ }
+
+ const block = page.draftLayout.find(
+ (block: any) => block.widgetId === blockId,
+ );
+ if (!block) {
+ return null;
+ }
+
+ const deletedMediaIds = extractMediaIDs(JSON.stringify(block));
+ for (const mediaId of Array.from(deletedMediaIds)) {
+ await deleteMedia(mediaId);
+ }
+
+ page.draftLayout = page.draftLayout.filter(
+ (block: any) => block.widgetId !== blockId,
+ );
+ await (page as any).save();
+ return getPageResponse(page!, ctx);
+};
diff --git a/apps/web/graphql/pages/mutation.ts b/apps/web/graphql/pages/mutation.ts
index 1871aa103..2d698ba45 100644
--- a/apps/web/graphql/pages/mutation.ts
+++ b/apps/web/graphql/pages/mutation.ts
@@ -1,6 +1,12 @@
import { GraphQLBoolean, GraphQLNonNull, GraphQLString } from "graphql";
import GQLContext from "../../models/GQLContext";
-import { updatePage, createPage, deletePage, publish } from "./logic";
+import {
+ updatePage,
+ createPage,
+ deletePage,
+ publish,
+ deleteBlock,
+} from "./logic";
import types from "./types";
import constants from "../../config/constants";
const { defaultPages } = constants;
@@ -89,6 +95,18 @@ const mutations = {
context: GQLContext,
) => deletePage(context, id),
},
+ deleteBlock: {
+ type: types.page,
+ args: {
+ pageId: { type: new GraphQLNonNull(GraphQLString) },
+ blockId: { type: new GraphQLNonNull(GraphQLString) },
+ },
+ resolve: async (
+ _: any,
+ { pageId, blockId }: { pageId: string; blockId: string },
+ context: GQLContext,
+ ) => deleteBlock({ context, pageId, blockId }),
+ },
};
export default mutations;
diff --git a/apps/web/next-env.d.ts b/apps/web/next-env.d.ts
index 9edff1c7c..c4b7818fb 100644
--- a/apps/web/next-env.d.ts
+++ b/apps/web/next-env.d.ts
@@ -1,6 +1,6 @@
///
-
- );
-}
diff --git a/packages/components-library/src/text-renderer.tsx b/packages/components-library/src/text-renderer.tsx
deleted file mode 100644
index 75c55d28c..000000000
--- a/packages/components-library/src/text-renderer.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from "react";
-import { Renderer, extractHeadings } from "@courselit/text-editor";
-
-interface RendererProps {
- json: Record;
- showTableOfContent?: boolean;
- contentTableHeader?: string;
-}
-
-export default function TextRenderer({
- json,
- showTableOfContent = false,
- contentTableHeader = "Table of Contents",
-}: RendererProps) {
- let headings;
-
- try {
- headings = json && extractHeadings(json as any);
- } catch (err) {
- console.error("Error extracting headings", err); // eslint-disable-line no-console
- }
-
- return (
-
- {showTableOfContent && headings.length > 0 && (
-
- {contentTableHeader && (
-
- {contentTableHeader}
-
- )}
-
- {headings.map(
- ({ text, id }: { text: string; id: string }) => (
-
- {text}
-
- ),
- )}
-
-
- )}
-
-
-
- );
-}
diff --git a/packages/page-blocks/package.json b/packages/page-blocks/package.json
index a34e87883..cc6aa2ed5 100644
--- a/packages/page-blocks/package.json
+++ b/packages/page-blocks/package.json
@@ -60,6 +60,9 @@
"dependencies": {
"@courselit/common-models": "workspace:^",
"@courselit/components-library": "workspace:^",
+ "@courselit/text-editor": "workspace:^",
+ "@tiptap/core": "^3.0.0",
+ "@tiptap/static-renderer": "^3.10.7",
"@courselit/icons": "workspace:^",
"@courselit/page-models": "workspace:^",
"@courselit/page-primitives": "workspace:^",
diff --git a/packages/page-blocks/src/blocks/banner/admin-widget/custom-settings.tsx b/packages/page-blocks/src/blocks/banner/admin-widget/custom-settings.tsx
index ec9b070fa..6593a51a0 100644
--- a/packages/page-blocks/src/blocks/banner/admin-widget/custom-settings.tsx
+++ b/packages/page-blocks/src/blocks/banner/admin-widget/custom-settings.tsx
@@ -2,7 +2,6 @@ import * as React from "react";
import { useState, useEffect } from "react";
import Settings from "../settings";
import {
- TextEditor,
Select,
AdminWidgetPanel,
AdminWidgetPanelContainer,
@@ -20,6 +19,8 @@ import {
} from "@courselit/common-models";
import { DEFAULT_FAILURE_MESSAGE, DEFAULT_SUCCESS_MESSAGE } from "../constants";
import { ThemeStyle } from "@courselit/page-models";
+import { Editor } from "@courselit/text-editor";
+import { TextEditorContent } from "@courselit/common-models";
interface CustomSettingsProps {
name: string;
@@ -133,7 +134,7 @@ export default function CustomSettings({
/>
Custom description
-
setDescription(state)}
showToolbar={false}
@@ -162,8 +163,10 @@ export default function CustomSettings({
Success message
-
setSuccessMessage(state)
}
diff --git a/packages/page-blocks/src/blocks/banner/widget.tsx b/packages/page-blocks/src/blocks/banner/widget.tsx
index 84b512ef6..a212a1522 100644
--- a/packages/page-blocks/src/blocks/banner/widget.tsx
+++ b/packages/page-blocks/src/blocks/banner/widget.tsx
@@ -2,11 +2,11 @@ import { FormEvent, useState } from "react";
import { Constants, Media, WidgetProps } from "@courselit/common-models";
import {
Image,
- TextRenderer,
Link,
useToast,
getSymbolFromCurrency,
} from "@courselit/components-library";
+import { TextRenderer } from "../../components";
import { FetchBuilder, getPlanPrice } from "@courselit/utils";
import { DEFAULT_FAILURE_MESSAGE, DEFAULT_SUCCESS_MESSAGE } from "./constants";
import Settings from "./settings";
@@ -244,7 +244,10 @@ export default function Widget({
theme={overiddenTheme}
component="span"
>
-
)}
@@ -259,6 +262,7 @@ export default function Widget({
successMessage ||
defaultSuccessMessage
}
+ theme={overiddenTheme}
/>
)}
diff --git a/packages/page-blocks/src/blocks/content/admin-widget.tsx b/packages/page-blocks/src/blocks/content/admin-widget.tsx
index 164938a15..e9b9e6a15 100644
--- a/packages/page-blocks/src/blocks/content/admin-widget.tsx
+++ b/packages/page-blocks/src/blocks/content/admin-widget.tsx
@@ -6,7 +6,6 @@ import {
AdminWidgetPanel,
AdminWidgetPanelContainer,
Select,
- TextEditor,
Form,
FormField,
CssIdField,
@@ -14,6 +13,7 @@ import {
VerticalPaddingSelector,
} from "@courselit/components-library";
import { Theme, ThemeStyle } from "@courselit/page-models";
+import { Editor } from "@courselit/text-editor";
interface AdminWidgetProps {
settings: Settings;
@@ -66,7 +66,7 @@ export default function AdminWidget({
Description
-
setDescription(state)}
showToolbar={false}
diff --git a/packages/page-blocks/src/blocks/content/widget.tsx b/packages/page-blocks/src/blocks/content/widget.tsx
index 03224bb98..354d07f9e 100644
--- a/packages/page-blocks/src/blocks/content/widget.tsx
+++ b/packages/page-blocks/src/blocks/content/widget.tsx
@@ -12,7 +12,6 @@ import { FetchBuilder } from "@courselit/utils";
import {
Link,
LessonIcon,
- TextRenderer,
Skeleton,
useToast,
Badge,
@@ -21,6 +20,7 @@ import {
AccordionTrigger,
AccordionContent,
} from "@courselit/components-library";
+import { TextRenderer } from "../../components";
import {
Header1,
Text1,
@@ -162,7 +162,10 @@ export default function Widget({
}`}
>
-
)}
diff --git a/packages/page-blocks/src/blocks/faq/admin-widget/index.tsx b/packages/page-blocks/src/blocks/faq/admin-widget/index.tsx
index c5e69b412..826227b08 100644
--- a/packages/page-blocks/src/blocks/faq/admin-widget/index.tsx
+++ b/packages/page-blocks/src/blocks/faq/admin-widget/index.tsx
@@ -7,7 +7,6 @@ import {
AdminWidgetPanel,
AdminWidgetPanelContainer,
Select,
- TextEditor,
Button,
Form,
FormField,
@@ -19,6 +18,7 @@ import {
} from "@courselit/components-library";
import { Edit } from "@courselit/icons";
import { generateUniqueId } from "@courselit/utils";
+import { Editor } from "@courselit/text-editor";
export interface AdminWidgetProps {
settings: Settings;
@@ -179,7 +179,7 @@ export default function AdminWidget({
/>
Description
-
setDescription(state)}
showToolbar={false}
diff --git a/packages/page-blocks/src/blocks/faq/admin-widget/item-editor.tsx b/packages/page-blocks/src/blocks/faq/admin-widget/item-editor.tsx
index 718bf4a14..e00850d71 100644
--- a/packages/page-blocks/src/blocks/faq/admin-widget/item-editor.tsx
+++ b/packages/page-blocks/src/blocks/faq/admin-widget/item-editor.tsx
@@ -1,7 +1,6 @@
import { useState } from "react";
import { Item } from "../settings";
import {
- TextEditor,
Button,
Form,
FormField,
@@ -11,6 +10,7 @@ import {
} from "@courselit/components-library";
import { Address, Auth, Profile } from "@courselit/common-models";
import { AlertCircle } from "lucide-react";
+import { Editor } from "@courselit/text-editor";
interface ItemProps {
item: Item;
@@ -54,7 +54,7 @@ export default function ItemEditor({
/>
Description
-
setDescription(state)}
showToolbar={false}
diff --git a/packages/page-blocks/src/blocks/faq/widget.tsx b/packages/page-blocks/src/blocks/faq/widget.tsx
index 50342a98f..7489fd19f 100644
--- a/packages/page-blocks/src/blocks/faq/widget.tsx
+++ b/packages/page-blocks/src/blocks/faq/widget.tsx
@@ -2,12 +2,12 @@ import React from "react";
import { WidgetProps } from "@courselit/common-models";
import Settings, { Item } from "./settings";
import {
- TextRenderer,
Accordion,
AccordionItem,
AccordionTrigger,
AccordionContent,
} from "@courselit/components-library";
+import { TextRenderer } from "../../components";
import {
Header1,
Section,
@@ -68,7 +68,10 @@ export default function Widget({
}`}
>
-
)}
@@ -101,7 +104,10 @@ export default function Widget({
-
))}
diff --git a/packages/page-blocks/src/blocks/featured/admin-widget.tsx b/packages/page-blocks/src/blocks/featured/admin-widget.tsx
index 0e6e6bd41..eb922bddb 100644
--- a/packages/page-blocks/src/blocks/featured/admin-widget.tsx
+++ b/packages/page-blocks/src/blocks/featured/admin-widget.tsx
@@ -6,7 +6,6 @@ import {
AdminWidgetPanel,
AdminWidgetPanelContainer,
Select,
- TextEditor,
IconButton,
Form,
FormField,
@@ -17,6 +16,7 @@ import {
} from "@courselit/components-library";
import { Delete } from "@courselit/icons";
import { Alignment, Address } from "@courselit/common-models";
+import { Editor } from "@courselit/text-editor";
interface AdminWidgetProps {
settings: Settings;
@@ -145,7 +145,7 @@ export default function AdminWidget({
Description
-
setDescription(state)}
showToolbar={false}
diff --git a/packages/page-blocks/src/blocks/featured/widget.tsx b/packages/page-blocks/src/blocks/featured/widget.tsx
index f003b234e..b1fc86680 100644
--- a/packages/page-blocks/src/blocks/featured/widget.tsx
+++ b/packages/page-blocks/src/blocks/featured/widget.tsx
@@ -1,10 +1,10 @@
import React, { useEffect, useState } from "react";
import { Course, SiteInfo, WidgetProps } from "@courselit/common-models";
import {
- TextRenderer,
SkeletonCard,
getSymbolFromCurrency,
} from "@courselit/components-library";
+import { TextRenderer } from "../../components";
import { FetchBuilder, getPlanPrice } from "@courselit/utils";
import Settings from "./settings";
import { Header1, Subheader1, Section } from "@courselit/page-primitives";
@@ -110,7 +110,10 @@ export default function Widget({
{description && (
-
)}
diff --git a/packages/page-blocks/src/blocks/grid/admin-widget/index.tsx b/packages/page-blocks/src/blocks/grid/admin-widget/index.tsx
index f980605b0..37d4fc20b 100644
--- a/packages/page-blocks/src/blocks/grid/admin-widget/index.tsx
+++ b/packages/page-blocks/src/blocks/grid/admin-widget/index.tsx
@@ -6,7 +6,6 @@ import {
AdminWidgetPanel,
AdminWidgetPanelContainer,
Select,
- TextEditor,
Button,
Form,
FormField,
@@ -22,6 +21,7 @@ import { columns as defaultColumns } from "../defaults";
import { Theme, ThemeStyle } from "@courselit/page-models";
import { PencilIcon, WandSparkles, HelpCircle } from "lucide-react";
import SvgStyleEditor from "./svg-style-editor";
+import { Editor } from "@courselit/text-editor";
export interface AdminWidgetProps {
settings: Settings;
@@ -220,7 +220,7 @@ export default function AdminWidget({
Description
-
setDescription(state)}
showToolbar={false}
diff --git a/packages/page-blocks/src/blocks/grid/admin-widget/item-editor.tsx b/packages/page-blocks/src/blocks/grid/admin-widget/item-editor.tsx
index 2d3b4917b..e57ef97ac 100644
--- a/packages/page-blocks/src/blocks/grid/admin-widget/item-editor.tsx
+++ b/packages/page-blocks/src/blocks/grid/admin-widget/item-editor.tsx
@@ -2,7 +2,6 @@ import React, { useState } from "react";
import { Item, SvgStyle } from "../settings";
import {
MediaSelector,
- TextEditor,
Button,
Form,
FormField,
@@ -16,6 +15,8 @@ import {
VerticalAlignment,
} from "@courselit/common-models";
import SvgEditor from "./svg-editor";
+import { Editor } from "@courselit/text-editor";
+
interface ItemProps {
item: Item;
svgStyle: SvgStyle;
@@ -65,7 +66,7 @@ export default function ItemEditor({
/>
Description
-
setDescription(state)}
showToolbar={false}
diff --git a/packages/page-blocks/src/blocks/grid/widget/index.tsx b/packages/page-blocks/src/blocks/grid/widget/index.tsx
index 605ccbeb8..f1f3c0137 100644
--- a/packages/page-blocks/src/blocks/grid/widget/index.tsx
+++ b/packages/page-blocks/src/blocks/grid/widget/index.tsx
@@ -1,7 +1,8 @@
import React from "react";
import { WidgetProps } from "@courselit/common-models";
import Settings from "../settings";
-import { TextRenderer, Link } from "@courselit/components-library";
+import { Link } from "@courselit/components-library";
+import { TextRenderer } from "../../../components";
import Itemm from "./item";
import { columns as defaultColumns } from "../defaults";
import {
@@ -63,7 +64,10 @@ export default function Widget({
}`}
>
-
)}
diff --git a/packages/page-blocks/src/blocks/grid/widget/item.tsx b/packages/page-blocks/src/blocks/grid/widget/item.tsx
index 5940d8543..c1704e550 100644
--- a/packages/page-blocks/src/blocks/grid/widget/item.tsx
+++ b/packages/page-blocks/src/blocks/grid/widget/item.tsx
@@ -1,6 +1,7 @@
import React from "react";
import { Item, SvgStyle } from "../settings";
-import { TextRenderer, Link } from "@courselit/components-library";
+import { Link } from "@courselit/components-library";
+import { TextRenderer } from "../../../components";
import { Alignment } from "@courselit/common-models";
import { ThemeStyle } from "@courselit/page-models";
import {
@@ -101,7 +102,10 @@ export default function Itemm({
}`}
>
-
)}
diff --git a/packages/page-blocks/src/blocks/hero/admin-widget.tsx b/packages/page-blocks/src/blocks/hero/admin-widget.tsx
index f4c6b400a..5a24cd156 100644
--- a/packages/page-blocks/src/blocks/hero/admin-widget.tsx
+++ b/packages/page-blocks/src/blocks/hero/admin-widget.tsx
@@ -12,7 +12,6 @@ import {
AdminWidgetPanelContainer,
MediaSelector,
Select,
- TextEditor,
Form,
FormField,
Accordion,
@@ -29,8 +28,8 @@ import {
MaxWidthSelector,
SectionBackgroundPanel,
} from "@courselit/components-library";
-
import { isVideo } from "@courselit/utils";
+import { Editor } from "@courselit/text-editor";
interface AdminWidgetProps {
name: string;
@@ -181,7 +180,7 @@ export default function AdminWidget({
Description
-
setDescription(state)}
showToolbar={false}
diff --git a/packages/page-blocks/src/blocks/hero/widget.tsx b/packages/page-blocks/src/blocks/hero/widget.tsx
index 10ec6e784..028b90096 100644
--- a/packages/page-blocks/src/blocks/hero/widget.tsx
+++ b/packages/page-blocks/src/blocks/hero/widget.tsx
@@ -1,12 +1,8 @@
import React from "react";
import { WidgetProps } from "@courselit/common-models";
import Settings from "./settings";
-import {
- Image,
- TextRenderer,
- VideoWithPreview,
- Link,
-} from "@courselit/components-library";
+import { Image, VideoWithPreview, Link } from "@courselit/components-library";
+import { TextRenderer } from "../../components";
import { isVideo } from "@courselit/utils";
import clsx from "clsx";
import {
@@ -168,7 +164,10 @@ export default function Widget({
)}
>
-
)}
diff --git a/packages/page-blocks/src/blocks/pricing/admin-widget/index.tsx b/packages/page-blocks/src/blocks/pricing/admin-widget/index.tsx
index ef097d2ad..a19ed4456 100644
--- a/packages/page-blocks/src/blocks/pricing/admin-widget/index.tsx
+++ b/packages/page-blocks/src/blocks/pricing/admin-widget/index.tsx
@@ -6,7 +6,6 @@ import {
AdminWidgetPanel,
AdminWidgetPanelContainer,
Select,
- TextEditor,
Form,
FormField,
CssIdField,
@@ -20,6 +19,7 @@ import { columns as defaultColumns } from "../defaults";
import { PageBuilderSlider } from "@courselit/components-library";
import { Theme, ThemeStyle } from "@courselit/page-models";
import { PencilIcon } from "lucide-react";
+import { Editor } from "@courselit/text-editor";
export interface AdminWidgetProps {
settings: Settings;
@@ -200,7 +200,7 @@ export default function AdminWidget({
/>
Description
-
setDescription(state)}
showToolbar={false}
diff --git a/packages/page-blocks/src/blocks/pricing/admin-widget/item-editor.tsx b/packages/page-blocks/src/blocks/pricing/admin-widget/item-editor.tsx
index 23bc3e0e3..2eb34e06c 100644
--- a/packages/page-blocks/src/blocks/pricing/admin-widget/item-editor.tsx
+++ b/packages/page-blocks/src/blocks/pricing/admin-widget/item-editor.tsx
@@ -1,7 +1,6 @@
import { useState } from "react";
import { Item } from "../settings";
import {
- TextEditor,
Button,
Form,
FormField,
@@ -9,6 +8,7 @@ import {
} from "@courselit/components-library";
import { Address } from "@courselit/common-models";
import { Checkbox } from "@courselit/components-library";
+import { Editor } from "@courselit/text-editor";
interface ItemProps {
item: Item;
@@ -57,7 +57,7 @@ export default function ItemEditor({
/>
Description
-
setDescription(state)}
showToolbar={false}
diff --git a/packages/page-blocks/src/blocks/pricing/widget.tsx b/packages/page-blocks/src/blocks/pricing/widget.tsx
index 17ec46016..5da4ec1a2 100644
--- a/packages/page-blocks/src/blocks/pricing/widget.tsx
+++ b/packages/page-blocks/src/blocks/pricing/widget.tsx
@@ -2,7 +2,8 @@ import React from "react";
import { useState } from "react";
import { WidgetProps } from "@courselit/common-models";
import Settings from "./settings";
-import { Link, TextRenderer } from "@courselit/components-library";
+import { Link } from "@courselit/components-library";
+import { TextRenderer } from "../../components";
import { columns as defaultColumns } from "./defaults";
import {
Button,
@@ -71,7 +72,10 @@ export default function Widget({
}`}
>
-
)}
@@ -138,6 +142,7 @@ export default function Widget({
>
diff --git a/packages/page-blocks/src/blocks/rich-text/admin-widget.tsx b/packages/page-blocks/src/blocks/rich-text/admin-widget.tsx
index ee418cca0..7e840b4e5 100644
--- a/packages/page-blocks/src/blocks/rich-text/admin-widget.tsx
+++ b/packages/page-blocks/src/blocks/rich-text/admin-widget.tsx
@@ -3,8 +3,6 @@ import {
AdminWidgetPanel,
AdminWidgetPanelContainer,
Select,
- TextEditor,
- // PageBuilderSlider,
VerticalPaddingSelector,
MaxWidthSelector,
} from "@courselit/components-library";
@@ -13,6 +11,7 @@ import { Address, HorizontalAlignment } from "@courselit/common-models";
import { fontSize as defaultFontSize } from "./defaults";
import { CssIdField } from "@courselit/components-library";
import type { Theme, ThemeStyle } from "@courselit/page-models";
+import { Editor } from "@courselit/text-editor";
export interface AboutWidgetProps {
onChange: (...args: any[]) => void;
@@ -75,7 +74,7 @@ const AdminWidget = ({
Text
-
setContent(state)}
showToolbar={false}
diff --git a/packages/page-blocks/src/blocks/rich-text/widget.tsx b/packages/page-blocks/src/blocks/rich-text/widget.tsx
index 48d31e3ee..161cb05d7 100644
--- a/packages/page-blocks/src/blocks/rich-text/widget.tsx
+++ b/packages/page-blocks/src/blocks/rich-text/widget.tsx
@@ -1,5 +1,5 @@
import React from "react";
-import { TextRenderer } from "@courselit/components-library";
+import { TextRenderer } from "../../components";
import type { WidgetProps } from "@courselit/common-models";
import Settings from "./settings";
import { fontSize as defaultFontSize } from "./defaults";
@@ -54,7 +54,7 @@ const Widget = ({
className={`${twFontSize[fontSize]}`}
component="span"
>
- ;
+ className?: string;
+ theme?: ThemeStyle;
+}
+
+export function TextRenderer({ json, className, theme }: TextRendererProps) {
+ const extensions = createExtensions();
+ const content = (json as any) ?? (emptyDoc as any);
+
+ const rendered = renderToReactElement({
+ extensions,
+ content,
+ options: {
+ nodeMapping: {
+ paragraph: ({ children }) => {
+ if (theme) {
+ return (
+
+ {children}
+
+ );
+ }
+ return {children}
;
+ },
+ heading: ({ node, children }) => {
+ const level = node?.attrs?.level ?? 1;
+ // Extract text from the node structure (same as extractHeadings does)
+ const textContent = extractTextFromNode(node);
+ const id = createId(textContent);
+
+ if (!theme) {
+ const Tag =
+ `h${level}` as unknown as keyof JSX.IntrinsicElements;
+ return {children} ;
+ }
+
+ if (level === 1) {
+ return (
+
+ {children}
+
+ );
+ }
+ if (level === 2) {
+ return (
+
+ {children}
+
+ );
+ }
+ return (
+
+ {children}
+
+ );
+ },
+ codeMirror: ({ children }) => (
+
+ {children}
+
+ ),
+ },
+ markMapping: {
+ link: ({ mark, children, node }) => {
+ const href = mark?.attrs?.href;
+ return (
+
+ {children}
+
+
+ );
+ },
+ highlight: ({ children }) => (
+
+ {children}
+
+ ),
+ },
+ },
+ });
+
+ const combinedClassName = ["tiptap-renderer", className]
+ .filter(Boolean)
+ .join(" ");
+
+ return (
+
+ );
+}
+
+export default TextRenderer;
diff --git a/packages/page-blocks/src/styles.css b/packages/page-blocks/src/styles.css
index b5c61c956..4bd3bd471 100644
--- a/packages/page-blocks/src/styles.css
+++ b/packages/page-blocks/src/styles.css
@@ -1,3 +1,120 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+.tiptap-renderer {
+ line-height: 1.7;
+ color: inherit;
+}
+
+.tiptap-renderer p {
+ margin: 0.75rem 0;
+}
+
+.tiptap-renderer h1,
+.tiptap-renderer h2,
+.tiptap-renderer h3,
+.tiptap-renderer h4,
+.tiptap-renderer h5,
+.tiptap-renderer h6 {
+ /* font-weight: 600; */
+ line-height: 1.25;
+ margin: 1.5rem 0 0.75rem;
+}
+
+/* .tiptap-renderer h1 {
+ font-size: clamp(2rem, 3vw, 2.5rem);
+}
+
+.tiptap-renderer h2 {
+ font-size: clamp(1.75rem, 2.5vw, 2rem);
+}
+
+.tiptap-renderer h3 {
+ font-size: clamp(1.5rem, 2vw, 1.75rem);
+} */
+
+.tiptap-renderer ul,
+.tiptap-renderer ol {
+ padding-left: 1.5rem;
+ margin: 0.75rem 0;
+}
+
+.tiptap-renderer ul li {
+ list-style: disc;
+}
+
+.tiptap-renderer ol li {
+ list-style: decimal;
+}
+
+.tiptap-renderer blockquote {
+ border-left: 3px solid hsl(var(--border));
+ margin: 0.75rem 0;
+ padding-left: 1rem;
+ color: hsl(var(--muted-foreground));
+ font-style: italic;
+}
+
+.tiptap-renderer pre {
+ background-color: hsl(var(--muted));
+ border-radius: 0.5rem;
+ color: hsl(var(--foreground));
+ font-family:
+ ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+ "Liberation Mono", monospace;
+ font-size: 0.875rem;
+ margin: 0.75rem 0;
+ padding: 1rem;
+ overflow-x: auto;
+}
+
+.tiptap-renderer pre code {
+ background: none;
+ color: inherit;
+ padding: 0;
+}
+
+.tiptap-renderer code {
+ background-color: hsl(var(--muted));
+ border-radius: 0.375rem;
+ padding: 0.125rem 0.375rem;
+ font-size: 0.875em;
+ font-family:
+ ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+ "Liberation Mono", monospace;
+}
+
+.tiptap-renderer hr {
+ border: none;
+ border-top: 1px solid hsl(var(--border));
+ margin: 1.5rem 0;
+}
+
+.tiptap-renderer table {
+ border-collapse: collapse;
+ border: 1px solid hsl(var(--border));
+ margin: 1rem 0;
+ width: 100%;
+ table-layout: fixed;
+}
+
+.tiptap-renderer table th,
+.tiptap-renderer table td {
+ border: 1px solid hsl(var(--border));
+ padding: 0.5rem;
+}
+
+.tiptap-renderer table th {
+ background-color: hsl(var(--muted));
+ font-weight: 600;
+ text-align: left;
+}
+
+.tiptap-renderer img {
+ display: block;
+ max-width: 100%;
+ height: auto;
+ border-radius: 0.5rem;
+ margin: 1rem auto;
+}
diff --git a/packages/page-primitives/src/link.tsx b/packages/page-primitives/src/link.tsx
index d1702827e..4266f0ce3 100644
--- a/packages/page-primitives/src/link.tsx
+++ b/packages/page-primitives/src/link.tsx
@@ -23,7 +23,7 @@ export const Link: React.FC = ({
const linkStyles = theme?.interactives?.link;
const classes = cn(
// Base styles
- "font-medium",
+ "font-medium cursor-pointer",
// Theme typography
typographyStyles?.fontFamily,
typographyStyles?.fontSize,
diff --git a/packages/page-primitives/src/section.tsx b/packages/page-primitives/src/section.tsx
index a6a70cab0..332440d1d 100644
--- a/packages/page-primitives/src/section.tsx
+++ b/packages/page-primitives/src/section.tsx
@@ -130,14 +130,6 @@ export const Section: React.FC = ({
theme?.structure?.section?.padding?.y || "py-4",
)}
>
-
- {nextTheme}
-
{" "}
- {/** This is used to force re-render the component when the theme changes */}
{children}
,
diff --git a/packages/text-editor/.eslintrc.js b/packages/text-editor/.eslintrc.cjs
similarity index 100%
rename from packages/text-editor/.eslintrc.js
rename to packages/text-editor/.eslintrc.cjs
diff --git a/packages/text-editor/README.md b/packages/text-editor/README.md
index ee47cbd1f..861380330 100644
--- a/packages/text-editor/README.md
+++ b/packages/text-editor/README.md
@@ -1,6 +1,6 @@
# CourseLit's Text Editor
-This is a rich text editor, based on [Remirror](https://remirror.io).
+This is a rich text editor built on top of [TipTap v3](https://tiptap.dev/).
## Installation
@@ -10,7 +10,13 @@ To install this package, use the following command.
npm install @courselit/text-editor
```
-> You need to install [remirror](https://www.npmjs.com/package/remirror) package in your application and import Remirror's CSS file in your application using the following command `import 'remirror/styles/all.css'`.
+After installing, import the bundled styles once in your app (for example, in your root layout).
+
+```ts
+import "@courselit/text-editor/styles.css";
+```
+
+> TipTap relies on ProseMirror. The editor ships with all required extensions, so no additional peer dependencies are needed.
## Shortcut keys
@@ -20,9 +26,7 @@ npm install @courselit/text-editor
`Ctrl + u`: Underline
-`Ctrl + d`: Strikethrough
-
-`Ctrl + k`: Create/edit a link
+`Ctrl + Shift + s`: Strikethrough
`Ctrl + z`: Undo
@@ -30,12 +34,12 @@ npm install @courselit/text-editor
`Ctrl + v`: Paste
-`Ctrl + Shift + 8`: Bulleted list
+`Ctrl + Shift + 7`: Ordered list
-`Ctrl + Shift + 9`: Ordered list
+`Ctrl + Shift + 8`: Bulleted list
-`Ctrl + Shift + 7`: Tasked list
+`Ctrl + Shift + H`: Highlight (or type `==two equal signs==` and it will be converted to highlight)
## Images
-Simply drag and drop images in the editor window to put it as a `data:` embed in your content.
+Use the _Image_ button in the toolbar to upload assets to CourseLit. Uploads are limited to `2 Mega bytes` per file.
diff --git a/packages/text-editor/additional.d.ts b/packages/text-editor/additional.d.ts
new file mode 100644
index 000000000..03ee8baef
--- /dev/null
+++ b/packages/text-editor/additional.d.ts
@@ -0,0 +1 @@
+declare module "@tiptap/react/menus";
diff --git a/packages/text-editor/package.json b/packages/text-editor/package.json
index 03aef8162..a6d7f40fa 100644
--- a/packages/text-editor/package.json
+++ b/packages/text-editor/package.json
@@ -1,7 +1,7 @@
{
"name": "@courselit/text-editor",
"version": "0.34.10",
- "description": "A text editor based on Remirror",
+ "description": "A text editor based on TipTap",
"private": true,
"keywords": [
"text editor",
@@ -13,12 +13,21 @@
"license": "MIT",
"main": "dist/index.js",
"types": "dist/index.d.ts",
+ "exports": {
+ ".": {
+ "types": "./dist/index.d.ts",
+ "import": "./dist/index.js",
+ "require": "./dist/index.js"
+ },
+ "./styles.css": "./styles.css"
+ },
"directories": {
"lib": "src",
"test": "__tests__"
},
"files": [
- "dist"
+ "dist",
+ "styles.css"
],
"publishConfig": {
"access": "public"
@@ -40,23 +49,26 @@
"react": "^17.0.2"
},
"dependencies": {
- "@codemirror/language-data": "^6.5.1",
- "@codemirror/state": "^6.5.2",
- "@codemirror/theme-one-dark": "^6.1.2",
"@courselit/common-models": "workspace:^",
"@courselit/utils": "workspace:^",
- "@remirror/core": "^3.0.2",
- "@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",
- "@remirror/react-ui": "^1.0.3",
- "codemirror": "^6.0.2",
- "prosemirror-model": "^1.25.3",
- "remirror": "^3.0.3"
+ "@floating-ui/dom": "^1.6.0",
+ "@tiptap/core": "^3.0.0",
+ "@tiptap/extension-bubble-menu": "^3.10.4",
+ "@tiptap/extension-code-block-lowlight": "^3.0.0",
+ "@tiptap/extension-dropcursor": "^3.0.0",
+ "@tiptap/extension-gapcursor": "^3.0.0",
+ "@tiptap/extension-heading": "^3.0.0",
+ "@tiptap/extension-highlight": "^3.11.0",
+ "@tiptap/extension-image": "^3.0.0",
+ "@tiptap/extension-link": "^3.0.0",
+ "@tiptap/extension-placeholder": "^3.0.0",
+ "@tiptap/extension-table": "^3.10.7",
+ "@tiptap/react": "^3.0.0",
+ "@tiptap/starter-kit": "^3.0.0",
+ "@tiptap/static-renderer": "^3.10.7",
+ "highlight.js": "^11.10.0",
+ "lowlight": "^2.9.0",
+ "lucide-react": "^0.544.0"
},
"devDependencies": {
"@types/node": "^18.8.0",
diff --git a/packages/text-editor/src/BubbleMenu.tsx b/packages/text-editor/src/BubbleMenu.tsx
deleted file mode 100644
index b21e2368c..000000000
--- a/packages/text-editor/src/BubbleMenu.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React, { FC } from "react";
-import { FloatingToolbar, FormattingButtonGroup } from "@remirror/react-ui";
-import FloatingLinkCommandGroup from "./FloatingLinkCommandGroup";
-
-/**
- * Bubble menu for the pre-packaged editors
- */
-const BubbleMenu: FC = () => {
- return (
-
-
- );
-};
-
-export default BubbleMenu;
diff --git a/packages/text-editor/src/FloatingLinkCommandGroup.tsx b/packages/text-editor/src/FloatingLinkCommandGroup.tsx
deleted file mode 100644
index 0881eda30..000000000
--- a/packages/text-editor/src/FloatingLinkCommandGroup.tsx
+++ /dev/null
@@ -1,244 +0,0 @@
-import type { ChangeEvent, HTMLProps, KeyboardEvent } from "react";
-import React, {
- useCallback,
- useEffect,
- useLayoutEffect,
- useMemo,
- useRef,
- useState,
-} from "react";
-import type { AnyExtensionConstructor } from "@remirror/core";
-import {
- createMarkPositioner,
- LinkExtension,
- ShortcutHandlerProps,
-} from "remirror/extensions";
-import {
- FloatingWrapper,
- useActive,
- useAttrs,
- useChainedCommands,
- useCurrentSelection,
- useExtensionEvent,
- useUpdateReason,
-} from "@remirror/react";
-import { CommandButton, CommandButtonGroup } from "@remirror/react-ui";
-
-function useLinkShortcut() {
- const [linkShortcut, setLinkShortcut] = useState<
- ShortcutHandlerProps | undefined
- >();
- const [isEditing, setIsEditing] = useState(false);
-
- useExtensionEvent(
- LinkExtension as unknown as AnyExtensionConstructor,
- "onShortcut",
- useCallback(
- (props) => {
- if (!isEditing) {
- setIsEditing(true);
- }
-
- return setLinkShortcut(props);
- },
- [isEditing],
- ),
- );
-
- return { linkShortcut, isEditing, setIsEditing };
-}
-
-function useFloatingLinkState() {
- // @ts-ignore
- const chain = useChainedCommands();
- const { isEditing, linkShortcut, setIsEditing } = useLinkShortcut();
- const { to, empty } = useCurrentSelection();
-
- const url = (useAttrs().link()?.href as string) ?? "";
- const [href, setHref] = useState(url);
-
- // A positioner which only shows for links.
- const linkPositioner = useMemo(
- () => createMarkPositioner({ type: "link" }),
- [],
- );
-
- const onRemove = useCallback(() => {
- return chain.removeLink().focus().run();
- }, [chain]);
-
- const updateReason = useUpdateReason();
-
- useLayoutEffect(() => {
- if (!isEditing) {
- return;
- }
-
- if (updateReason.doc || updateReason.selection) {
- setIsEditing(false);
- }
- }, [isEditing, setIsEditing, updateReason.doc, updateReason.selection]);
-
- useEffect(() => {
- setHref(url);
- }, [url]);
-
- const submitHref = useCallback(() => {
- setIsEditing(false);
- const range = linkShortcut ?? undefined;
-
- if (href === "") {
- chain.removeLink();
- } else {
- chain.updateLink({ href, auto: false }, range);
- }
-
- chain.focus(range?.to ?? to).run();
- }, [setIsEditing, linkShortcut, chain, href, to]);
-
- const cancelHref = useCallback(() => {
- setIsEditing(false);
- }, [setIsEditing]);
-
- const clickEdit = useCallback(() => {
- if (empty) {
- chain.selectLink();
- }
-
- setIsEditing(true);
- }, [chain, empty, setIsEditing]);
-
- return useMemo(
- () => ({
- href,
- setHref,
- linkShortcut,
- linkPositioner,
- isEditing,
- clickEdit,
- onRemove,
- submitHref,
- cancelHref,
- }),
- [
- href,
- linkShortcut,
- linkPositioner,
- isEditing,
- clickEdit,
- onRemove,
- submitHref,
- cancelHref,
- ],
- );
-}
-
-const DelayAutoFocusInput = ({
- autoFocus,
- ...rest
-}: HTMLProps) => {
- const inputRef = useRef(null);
-
- useEffect(() => {
- if (!autoFocus) {
- return;
- }
-
- const frame = window.requestAnimationFrame(() => {
- inputRef.current?.focus();
- });
-
- return () => {
- window.cancelAnimationFrame(frame);
- };
- }, [autoFocus]);
-
- return {linkEditButtons}
- )}
- {!isEditing && empty && (
- {linkEditButtons}
- )}
-
-
- ) =>
- setHref(event.target.value)
- }
- value={href}
- onKeyPress={(event: KeyboardEvent) => {
- const { code } = event;
-
- if (code === "Enter") {
- submitHref();
- }
-
- if (code === "Escape") {
- cancelHref();
- }
- }}
- />
-
-
- );
-};
-
-export default FloatingLinkToolbar;
diff --git a/packages/text-editor/src/Renderer/code-mirror-renderer.tsx b/packages/text-editor/src/Renderer/code-mirror-renderer.tsx
deleted file mode 100644
index 993c00415..000000000
--- a/packages/text-editor/src/Renderer/code-mirror-renderer.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { MarkMap, TextHandler } from "@remirror/react";
-import React, { FC } from "react";
-import { RemirrorJSON } from "remirror";
-
-export const CodeMirrorRenderer: FC<{
- node: RemirrorJSON;
- markMap: MarkMap;
-}> = (props) => {
- const content = props.node.content;
- if (!content) {
- return null;
- }
-
- const children = content.map((node, ii) => {
- return
- {children}
-
- );
-};
diff --git a/packages/text-editor/src/Renderer/index.tsx b/packages/text-editor/src/Renderer/index.tsx
deleted file mode 100644
index 2e9ad93c8..000000000
--- a/packages/text-editor/src/Renderer/index.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from "react";
-import {
- Callout,
- CodeBlock,
- createIFrameHandler,
- createLinkHandler,
- Doc,
- MarkMap,
- RemirrorRenderer,
- TextHandler,
- ThemeProvider,
-} from "@remirror/react";
-import { RemirrorJSON } from "@remirror/core-types";
-import { CodeMirrorRenderer } from "./code-mirror-renderer";
-import { createId } from "../create-id";
-
-const typeMap: MarkMap = {
- blockquote: "blockquote",
- bulletList: "ul",
- callout: Callout,
- codeBlock: CodeBlock,
- codeMirror: CodeMirrorRenderer,
- doc: Doc,
- hardBreak: "br",
- horizontalRule: "hr",
- iframe: createIFrameHandler(),
- image: "img",
- listItem: "li",
- paragraph: "p",
- orderedList: "ol",
- text: TextHandler,
- taskList: "ul",
- taskListItem: "li",
- // add links to headings for table of contents navigation
- heading: ({ node, children }) => {
- if (!node.content) {
- return null;
- }
-
- let textContent = "";
- for (const child of node.content) {
- textContent += child.text;
- }
- const id = createId(textContent);
- const HeadingTag =
- `h${node.attrs.level}` as keyof JSX.IntrinsicElements;
-
- return {children} ;
- },
-};
-
-const markMap: MarkMap = {
- italic: "em",
- bold: "strong",
- code: "code",
- link: createLinkHandler({ target: "_blank", rel: "noopener noreferrer" }),
- underline: "u",
- strike: "strike",
-};
-
-interface RendererProps {
- json: RemirrorJSON;
- fontFamily?: string;
-}
-
-const Renderer = ({ json, fontFamily }: RendererProps): JSX.Element => {
- const theme = {
- fontFamily: {
- default: fontFamily,
- },
- };
-
- return (
-
-
- );
-};
-
-export default Renderer;
diff --git a/packages/text-editor/src/Toolbar.tsx b/packages/text-editor/src/Toolbar.tsx
deleted file mode 100644
index c3dc002c3..000000000
--- a/packages/text-editor/src/Toolbar.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { FC } from "react";
-import {
- FormattingButtonGroup,
- HeadingLevelButtonGroup,
- InsertHorizontalRuleButton,
- ListButtonGroup,
- RedoButton,
- Toolbar as RemirrorToolbar,
- ToggleBlockquoteButton,
- UndoButton,
-} from "@remirror/react-ui";
-
-const Toolbar: FC = () => {
- return (
-
-
-
-
- );
-};
-
-export default Toolbar;
diff --git a/packages/text-editor/src/WysiwygEditor.tsx b/packages/text-editor/src/WysiwygEditor.tsx
deleted file mode 100644
index c62f4b813..000000000
--- a/packages/text-editor/src/WysiwygEditor.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-"use client";
-
-/* eslint-disable react-hooks/rules-of-hooks */
-import React, { useEffect, FC, PropsWithChildren, useCallback } from "react";
-import {
- EditorComponent,
- Remirror,
- ThemeProvider,
- useRemirror,
-} from "@remirror/react";
-import { TableComponents } from "@remirror/extension-react-tables";
-import { RemirrorContentType } from "@remirror/core-types";
-import {
- getTextContentFromSlice,
- AnyExtension,
- RemirrorEventListenerProps,
- Slice,
-} from "@remirror/core";
-import { InvalidContentHandler } from "remirror";
-import BubbleMenu from "./BubbleMenu";
-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;
- showToolbar?: boolean;
- editable?: boolean;
- refresh?: number;
- fontFamily?: string;
- url: string;
- initialContent?: ReactEditorProps["initialContent"];
- stringHandler?: ReactEditorProps["stringHandler"];
- placeholder?: string;
- autoFocus?: boolean;
- hooks?: ReactEditorProps["hooks"];
-}
-
-interface WysiwygEditorType extends FC> {
- getPlainText: (doc: RemirrorContentType) => string;
- emptyDoc: RemirrorContentType;
-}
-
-const WysiwygEditor: WysiwygEditorType = Object.assign(
- ({
- initialContent,
- onChange,
- placeholder,
- stringHandler,
- children,
- showToolbar = true,
- editable = true,
- refresh,
- fontFamily,
- url,
- ...rest
- }) => {
- const theme = {
- fontFamily: {
- default: fontFamily,
- },
- };
-
- if (typeof window === "undefined") {
- return <>;
- }
-
- useEffect(() => {
- manager.view.updateState(
- manager.createState({
- content: initialContent as RemirrorContentType,
- }),
- );
- }, [refresh]);
-
- const extensions = useCallback(() => {
- const exts = getExtensions(placeholder, url)();
- return exts as unknown as AnyExtension[];
- }, [placeholder, url]);
-
- const onError: InvalidContentHandler = useCallback(
- ({ json, invalidContent, transformers }) => {
- // Automatically remove all invalid nodes and marks.
- return transformers.remove(json, invalidContent);
- },
- [],
- );
-
- const {
- manager,
- state,
- onChange: onChangeRemirror,
- } = useRemirror({
- extensions,
- stringHandler,
- content: (initialContent as RemirrorContentType) || emptyDoc,
- onError,
- });
-
- const onChangeFunc = (
- data: RemirrorEventListenerProps,
- ) => {
- setTimeout(() => onChange(data.helpers.getJSON()), 0);
- };
-
- return (
-
- {
- onChangeRemirror(data);
- onChangeFunc(data);
- }}
- editable={editable}
- i18nFormat={i18nFormat}
- {...rest}
- >
-
- {editable && showToolbar && (
-
-
- )}
-
-
-
- {children}
-
-
- );
- },
- {
- getPlainText: (doc: RemirrorContentType) =>
- getTextContentFromSlice(doc as unknown as Slice),
- emptyDoc,
- },
-) as WysiwygEditorType;
-
-export default WysiwygEditor;
diff --git a/packages/text-editor/src/bubble-menu.tsx b/packages/text-editor/src/bubble-menu.tsx
new file mode 100644
index 000000000..c65f8721e
--- /dev/null
+++ b/packages/text-editor/src/bubble-menu.tsx
@@ -0,0 +1,196 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import type { Editor } from "@tiptap/core";
+import type { BubbleMenuPluginProps } from "@tiptap/extension-bubble-menu";
+import { BubbleMenuPlugin } from "@tiptap/extension-bubble-menu";
+import {
+ Bold,
+ Code,
+ Italic,
+ Link as LinkIcon,
+ Strikethrough,
+ Underline,
+} from "lucide-react";
+import LinkEditorPopover from "./components/link-editor-popover";
+
+interface BubbleMenuProps {
+ editor: Editor;
+}
+
+const buttonBase =
+ "inline-flex h-8 w-8 items-center justify-center rounded text-foreground transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary";
+
+type TipTapBubbleMenuProps = {
+ editor: Editor | null;
+ className?: string;
+ children: React.ReactNode;
+ pluginKey?: string;
+} & Partial>;
+
+const TipTapBubbleMenu = ({
+ editor,
+ className,
+ children,
+ pluginKey = "inlineBubbleMenu",
+ updateDelay,
+ resizeDelay,
+ shouldShow,
+ appendTo,
+ getReferencedVirtualElement,
+ options,
+}: TipTapBubbleMenuProps): JSX.Element => {
+ const menuRef = useRef(null);
+
+ useEffect(() => {
+ const element = menuRef.current;
+
+ if (!editor || editor.isDestroyed || !element) {
+ return;
+ }
+
+ const plugin = BubbleMenuPlugin({
+ editor,
+ element,
+ pluginKey,
+ updateDelay,
+ resizeDelay,
+ shouldShow: shouldShow ?? null,
+ appendTo,
+ getReferencedVirtualElement,
+ options,
+ });
+
+ editor.registerPlugin(plugin);
+
+ return () => {
+ editor.unregisterPlugin(pluginKey);
+ };
+ }, [
+ editor,
+ pluginKey,
+ updateDelay,
+ resizeDelay,
+ shouldShow,
+ appendTo,
+ getReferencedVirtualElement,
+ options,
+ ]);
+
+ return (
+
+ {children}
+
+ );
+};
+
+function InlineButton({
+ icon: Icon,
+ label,
+ active,
+ onClick,
+}: {
+ icon: React.ComponentType<{ className?: string }>;
+ label: string;
+ active?: boolean;
+ onClick: () => void;
+}): JSX.Element {
+ return (
+
+
+ );
+}
+
+const InlineBubbleMenu = ({ editor }: BubbleMenuProps): JSX.Element | null => {
+ const [isLinkEditing, setIsLinkEditing] = useState(false);
+
+ const openLinkEditor = useCallback(() => {
+ setIsLinkEditing((prev) => !prev);
+ }, []);
+
+ useEffect(() => {
+ const handleSelectionUpdate = () => {
+ setIsLinkEditing(false);
+ };
+
+ editor.on("selectionUpdate", handleSelectionUpdate);
+
+ return () => {
+ editor.off("selectionUpdate", handleSelectionUpdate);
+ };
+ }, [editor]);
+
+ if (!editor) {
+ return null;
+ }
+
+ return (
+
+
+ editor.chain().focus().toggleBold().run()}
+ />
+ editor.chain().focus().toggleItalic().run()}
+ />
+
+ editor.chain().focus().toggleMark("underline").run()
+ }
+ />
+ editor.chain().focus().toggleStrike().run()}
+ />
+ editor.chain().focus().toggleCode().run()}
+ />
+
+ {isLinkEditing && (
+ setIsLinkEditing(false)}
+ variant="inline"
+ />
+ )}
+
+ );
+};
+
+export default InlineBubbleMenu;
diff --git a/packages/text-editor/src/components/custom-code-mirror.tsx b/packages/text-editor/src/components/custom-code-mirror.tsx
new file mode 100644
index 000000000..b9a4fbb35
--- /dev/null
+++ b/packages/text-editor/src/components/custom-code-mirror.tsx
@@ -0,0 +1,27 @@
+// This is only to maintain backward compatibility for codeMirror node type
+
+import { Node } from "@tiptap/core";
+
+export const CodeMirrorNode = Node.create({
+ name: "codeMirror",
+ content: "block+",
+ code: true,
+
+ addOptions() {
+ return {
+ HTMLAttributes: {},
+ };
+ },
+
+ parseHTML() {
+ return [
+ {
+ tag: "pre",
+ },
+ ];
+ },
+
+ renderHTML({ HTMLAttributes }) {
+ return ["pre", HTMLAttributes, 0];
+ },
+});
diff --git a/packages/text-editor/src/components/link-editor-popover.tsx b/packages/text-editor/src/components/link-editor-popover.tsx
new file mode 100644
index 000000000..552e1b747
--- /dev/null
+++ b/packages/text-editor/src/components/link-editor-popover.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import type { Editor } from "@tiptap/react";
+import { Check, Trash2, X } from "lucide-react";
+
+interface LinkEditorPopoverProps {
+ editor: Editor;
+ onClose: () => void;
+ variant?: "panel" | "inline";
+ containerRef?: React.MutableRefObject;
+}
+
+const LinkEditorPopover = ({
+ editor,
+ onClose,
+ variant = "panel",
+ containerRef,
+}: LinkEditorPopoverProps): JSX.Element => {
+ const [linkValue, setLinkValue] = useState("");
+ const inputRef = useRef(null);
+ const localContainerRef = useRef(null);
+
+ const assignContainerRef = (node: HTMLDivElement | null) => {
+ localContainerRef.current = node;
+ if (containerRef) {
+ containerRef.current = node;
+ }
+ };
+
+ useEffect(() => {
+ const current = editor.getAttributes("link").href as string | undefined;
+ setLinkValue(current ?? "");
+ }, [editor]);
+
+ useEffect(() => {
+ const timer = window.setTimeout(() => {
+ inputRef.current?.focus();
+ }, 20);
+
+ return () => window.clearTimeout(timer);
+ }, []);
+
+ const applyLink = () => {
+ const value = linkValue.trim();
+ if (!value) {
+ editor.chain().focus().extendMarkRange("link").unsetLink().run();
+ } else {
+ editor
+ .chain()
+ .focus()
+ .extendMarkRange("link")
+ .setLink({ href: value })
+ .run();
+ }
+
+ onClose();
+ };
+
+ const removeLink = () => {
+ editor.chain().focus().extendMarkRange("link").unsetLink().run();
+ onClose();
+ };
+
+ const handleKeyDown = (event: React.KeyboardEvent) => {
+ if (event.key === "Enter") {
+ event.preventDefault();
+ applyLink();
+ }
+
+ if (event.key === "Escape") {
+ event.preventDefault();
+ onClose();
+ }
+ };
+
+ if (variant === "inline") {
+ return (
+ event.stopPropagation()}
+ >
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ Link URL
+
+
setLinkValue(event.target.value)}
+ onKeyDown={handleKeyDown}
+ className="w-full rounded border border-border bg-background px-2 py-1 text-sm text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+ />
+
+
+
+
+
+
+
+
+
+
> {
+ getPlainText: (doc: JSONContent) => string;
+ emptyDoc: JSONContent;
+}
+
+const Editor: EditorType = Object.assign(
+ ({
+ initialContent,
+ onChange,
+ placeholder,
+ children,
+ showToolbar = true,
+ editable = true,
+ refresh,
+ url,
+ autoFocus,
+ imageSizeLimit,
+ onError,
+ }) => {
+ const [isUploading, setIsUploading] = useState(false);
+ const fileInputRef = useRef(null);
+ const hasInteractedRef = useRef(false);
+ const lastSerializedContentRef = useRef(
+ JSON.stringify(initialContent ?? emptyDoc),
+ );
+ const refreshRef = useRef(refresh);
+
+ const extensions = useMemo(
+ () => createExtensions({ placeholder }),
+ [placeholder],
+ );
+
+ const changeTimeoutRef = useRef(null);
+
+ const editor = useEditor(
+ {
+ immediatelyRender: false,
+ extensions,
+ content: initialContent ?? emptyDoc,
+ autofocus: autoFocus ? "end" : false,
+ editable,
+ editorProps: {
+ attributes: {
+ class: "tiptap-content",
+ "data-placeholder": placeholder ?? "",
+ },
+ },
+ onUpdate: ({ editor: instance }) => {
+ if (changeTimeoutRef.current) {
+ clearTimeout(changeTimeoutRef.current);
+ }
+
+ changeTimeoutRef.current = setTimeout(() => {
+ hasInteractedRef.current = true;
+ onChange(instance.getJSON());
+ changeTimeoutRef.current = null;
+ }, 1000);
+ },
+ onSelectionUpdate: ({ editor: instance }) => {
+ hasInteractedRef.current = true;
+ },
+ },
+ [extensions],
+ );
+ useEffect(() => {
+ return () => {
+ if (changeTimeoutRef.current) {
+ clearTimeout(changeTimeoutRef.current);
+ }
+ };
+ }, []);
+
+ useEffect(() => {
+ if (!editor) {
+ return;
+ }
+
+ editor.setEditable(editable);
+ }, [editor, editable]);
+
+ useEffect(() => {
+ if (!editor) {
+ return;
+ }
+
+ const nextContent = initialContent ?? emptyDoc;
+ const nextSerialized = JSON.stringify(nextContent);
+ const refreshChanged = refreshRef.current !== refresh;
+
+ if (refreshChanged) {
+ refreshRef.current = refresh;
+ hasInteractedRef.current = false;
+ lastSerializedContentRef.current = nextSerialized;
+ editor.commands.setContent(nextContent, {
+ emitUpdate: false,
+ });
+ return;
+ }
+
+ if (!hasInteractedRef.current) {
+ if (lastSerializedContentRef.current !== nextSerialized) {
+ lastSerializedContentRef.current = nextSerialized;
+ editor.commands.setContent(nextContent, {
+ emitUpdate: false,
+ });
+ }
+ return;
+ }
+
+ lastSerializedContentRef.current = nextSerialized;
+ }, [editor, initialContent, refresh]);
+
+ const handleImageUpload = useCallback(
+ async (file: File) => {
+ try {
+ setIsUploading(true);
+ const result = await uploadImageToMediaLit({
+ url,
+ file,
+ fileSizeLimit: imageSizeLimit,
+ onError,
+ });
+ editor
+ ?.chain()
+ .focus()
+ .setImage({
+ src: result.src,
+ alt: result.fileName,
+ title: result.fileName,
+ })
+ .run();
+ } catch (error) {
+ console.error("Image upload failed", error);
+ } finally {
+ setIsUploading(false);
+ }
+ },
+ [editor, url],
+ );
+
+ const handleSelectFile = useCallback(
+ (event: React.ChangeEvent) => {
+ const files = event.target.files;
+ if (!files || files.length === 0) {
+ return;
+ }
+
+ const file = files[0];
+ void handleImageUpload(file);
+ event.target.value = "";
+ },
+ [handleImageUpload],
+ );
+
+ const openFileDialog = useCallback(() => {
+ fileInputRef.current?.click();
+ }, []);
+
+ if (typeof window === "undefined") {
+ return <>;
+ }
+
+ return (
+
+ {editable && showToolbar && (
+
+
+ )}
+
+
+
+
+
;
- text?: string;
-}
-
-export function extractHeadings(json: JSONDoc): Heading[] {
+export function extractHeadings(
+ json: JSONContent | null | undefined,
+): Heading[] {
const headings: Heading[] = [];
- const exts = getExtensions("", "")() as unknown as AnyExtension[];
- const manager = RemirrorManager.create(exts);
- const doc = Node.fromJSON(manager.schema as Schema, json);
- doc.descendants((node) => {
- if (node.type.name === "heading") {
+ const collectHeadings = (node?: JSONContent) => {
+ if (!node) {
+ return;
+ }
+
+ if (node.type === "heading") {
+ const level =
+ typeof node.attrs?.level === "number" ? node.attrs.level : 1;
+
+ const collectText = (current?: JSONContent): string => {
+ if (!current) {
+ return "";
+ }
+
+ if (typeof current.text === "string") {
+ return current.text;
+ }
+
+ if (!current.content) {
+ return "";
+ }
+
+ return current.content.map(collectText).join("");
+ };
+
+ const textContent = collectText(node);
+
headings.push({
- level: node.attrs.level as number,
- text: node.textContent,
- id: createId(node.textContent),
+ level,
+ text: textContent,
+ id: createId(textContent),
});
}
- });
+
+ if (Array.isArray(node.content)) {
+ node.content.forEach((child) => {
+ collectHeadings(child as JSONContent);
+ });
+ }
+ };
+
+ collectHeadings(json || undefined);
return headings;
}
diff --git a/packages/text-editor/src/extract-text-from-node.ts b/packages/text-editor/src/extract-text-from-node.ts
new file mode 100644
index 000000000..dfbeb9ef8
--- /dev/null
+++ b/packages/text-editor/src/extract-text-from-node.ts
@@ -0,0 +1,42 @@
+export function extractTextFromNode(node): string {
+ if (!node) {
+ return "";
+ }
+
+ // ProseMirror nodes have a textContent property that contains all text
+ if (typeof node.textContent === "string") {
+ return node.textContent;
+ }
+
+ // Fallback: if content is a Fragment, access its content array
+ if (
+ node.content &&
+ node.content.content &&
+ Array.isArray(node.content.content)
+ ) {
+ return node.content.content
+ .map((child: any) => {
+ // Text nodes have a text property
+ if (child.text) {
+ return child.text;
+ }
+ // Recursively extract from child nodes
+ return extractTextFromNode(child);
+ })
+ .join("");
+ }
+
+ // Fallback: if content is directly an array
+ if (Array.isArray(node.content)) {
+ return node.content
+ .map((child: any) => {
+ if (child.text) {
+ return child.text;
+ }
+ return extractTextFromNode(child);
+ })
+ .join("");
+ }
+
+ return "";
+}
diff --git a/packages/text-editor/src/file-upload-extention.ts b/packages/text-editor/src/file-upload-extention.ts
index a48a05b86..923076364 100644
--- a/packages/text-editor/src/file-upload-extention.ts
+++ b/packages/text-editor/src/file-upload-extention.ts
@@ -1,14 +1,5 @@
-import { DelayedPromiseCreator, ErrorConstant, invariant } from "remirror";
import { FetchBuilder } from "@courselit/utils";
import { Media } from "@courselit/common-models";
-import { ImageAttributes } from "remirror/extensions";
-
-type SetProgress = (progress: number) => void;
-
-interface FileWithProgress {
- file: File;
- progress: SetProgress;
-}
async function getPresignedUrl(url: string) {
const fetch = new FetchBuilder()
@@ -18,55 +9,52 @@ async function getPresignedUrl(url: string) {
return await fetch.exec();
}
-export function getUploadHandler(url: string) {
- return function uploadFileToMediaLit(
- files: FileWithProgress[],
- ): DelayedPromiseCreator[] {
- invariant(files.length > 0, {
- code: ErrorConstant.EXTENSION,
- message:
- "The upload handler was applied for the image extension without any valid files",
- });
+export interface UploadedImage {
+ mediaId: string;
+ src: string;
+ fileName?: string;
+}
- let completed = 0;
- const promises: DelayedPromiseCreator[] = [];
+export async function uploadImageToMediaLit({
+ url,
+ file,
+ fileSizeLimit = 2097152, // 2 MB,
+ onError,
+}: {
+ url: string;
+ file: File;
+ fileSizeLimit?: number;
+ onError?: (args: any) => void;
+}): Promise {
+ if (file.size > fileSizeLimit) {
+ if (onError) {
+ onError("File is larger than 2MB");
+ return { src: "", mediaId: "", fileName: "" };
+ } else {
+ throw new Error("File is larger than 2MB");
+ }
+ }
- for (const { file, progress } of files) {
- promises.push(
- () =>
- new Promise((resolve, reject) => {
- if (file.size > 2097152) {
- // 2 MB (taken from: https://stackoverflow.com/a/49490014)
- return reject("File is larger than 2MB");
- }
- getPresignedUrl(url)
- .then(({ signature, endpoint }) => {
- const fD = new FormData();
- fD.append("caption", file.name);
- fD.append("access", "public");
- fD.append("file", file);
+ const { signature, endpoint } = await getPresignedUrl(url);
- return fetch(`${endpoint}/media/create`, {
- method: "POST",
- headers: {
- "x-medialit-signature": signature,
- },
- body: fD,
- });
- })
- .then((data) => data.json())
- .then((data: Media) => {
- completed += 1;
- progress(completed / files.length);
- resolve({
- src: data.file,
- fileName: data.originalFileName,
- });
- })
- .catch((err) => reject(err.message));
- }),
- );
- }
- return promises;
+ const formData = new FormData();
+ formData.append("caption", file.name);
+ formData.append("access", "public");
+ formData.append("file", file);
+
+ const response = await fetch(`${endpoint}/media/create`, {
+ method: "POST",
+ headers: {
+ "x-medialit-signature": signature,
+ },
+ body: formData,
+ });
+
+ const data: Media = await response.json();
+
+ return {
+ src: data.file,
+ fileName: data.originalFileName,
+ mediaId: data.mediaId,
};
}
diff --git a/packages/text-editor/src/index.tsx b/packages/text-editor/src/index.tsx
index 71f330911..52f082d3f 100644
--- a/packages/text-editor/src/index.tsx
+++ b/packages/text-editor/src/index.tsx
@@ -1,4 +1,7 @@
-export { default as WysiwygEditor } from "./WysiwygEditor";
-export { default as Renderer } from "./Renderer";
+export { default as Editor } from "./editor";
+export type { EditorProps } from "./editor";
export { default as emptyDoc } from "./empty-doc";
-export { extractHeadings } from "./extract-headings";
+export * from "./extract-headings";
+export * from "./extensions";
+export * from "./create-id";
+export * from "./extract-text-from-node";
diff --git a/packages/text-editor/src/toolbar.tsx b/packages/text-editor/src/toolbar.tsx
new file mode 100644
index 000000000..0819b8b74
--- /dev/null
+++ b/packages/text-editor/src/toolbar.tsx
@@ -0,0 +1,416 @@
+import React, { useEffect, useRef, useState } from "react";
+import type { Editor } from "@tiptap/core";
+import type { Level } from "@tiptap/extension-heading";
+import {
+ Bold,
+ Code,
+ CodeSquare,
+ Heading1,
+ Heading2,
+ Heading3,
+ Image as ImageIcon,
+ Italic,
+ Link as LinkIcon,
+ List as ListIcon,
+ ListOrdered,
+ Minus,
+ Quote,
+ Redo2,
+ SquarePen,
+ Strikethrough,
+ Table as TableIcon,
+ Trash2,
+ Underline,
+ Undo2,
+} from "lucide-react";
+import LinkEditorPopover from "./components/link-editor-popover.js";
+
+interface ToolbarProps {
+ editor: Editor | null;
+ onRequestImageUpload: () => void;
+ isUploadingImage?: boolean;
+}
+
+type PopoverType = "link" | "table" | null;
+
+const iconButtonBase =
+ "inline-flex h-8 w-8 items-center justify-center rounded border border-transparent text-foreground transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-50";
+
+function IconButton({
+ icon: Icon,
+ label,
+ active,
+ disabled,
+ onClick,
+}: {
+ icon: React.ComponentType<{ className?: string }>;
+ label: string;
+ active?: boolean;
+ disabled?: boolean;
+ onClick?: () => void;
+}): JSX.Element {
+ return (
+
+
+ );
+}
+
+const headingButtons: Array<{
+ label: string;
+ value: string;
+ icon: React.ComponentType<{ className?: string }>;
+ level?: Level;
+}> = [
+ { label: "Paragraph", value: "paragraph", icon: SquarePen },
+ { label: "Heading 1", value: "h1", icon: Heading1, level: 1 },
+ { label: "Heading 2", value: "h2", icon: Heading2, level: 2 },
+ { label: "Heading 3", value: "h3", icon: Heading3, level: 3 },
+];
+
+const Toolbar = ({
+ editor,
+ onRequestImageUpload,
+ isUploadingImage,
+}: ToolbarProps): JSX.Element | null => {
+ const [activePopover, setActivePopover] = useState(null);
+
+ const popoverRef = useRef(null);
+
+ useEffect(() => {
+ if (!activePopover) {
+ return undefined;
+ }
+
+ const handleClick = (event: MouseEvent) => {
+ if (
+ popoverRef.current &&
+ !popoverRef.current.contains(event.target as Node)
+ ) {
+ setActivePopover(null);
+ }
+ };
+
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (event.key === "Escape") {
+ setActivePopover(null);
+ }
+ };
+
+ document.addEventListener("mousedown", handleClick);
+ document.addEventListener("keydown", handleKeyDown);
+
+ return () => {
+ document.removeEventListener("mousedown", handleClick);
+ document.removeEventListener("keydown", handleKeyDown);
+ };
+ }, [activePopover]);
+
+ if (!editor) {
+ return null;
+ }
+
+ const togglePopover = (type: PopoverType, onBeforeOpen?: () => void) => {
+ setActivePopover((current) => {
+ if (current === type) {
+ return null;
+ }
+
+ onBeforeOpen?.();
+ return type;
+ });
+ };
+
+ const toggleTablePopover = () => {
+ togglePopover("table");
+ };
+
+ const insertTable = () => {
+ editor
+ .chain()
+ .focus()
+ .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+ .run();
+ setActivePopover(null);
+ };
+
+ const addRowAfter = () => {
+ editor.chain().focus().addRowAfter().run();
+ setActivePopover(null);
+ };
+
+ const deleteRow = () => {
+ editor.chain().focus().deleteRow().run();
+ setActivePopover(null);
+ };
+
+ const addColumnAfter = () => {
+ editor.chain().focus().addColumnAfter().run();
+ setActivePopover(null);
+ };
+
+ const deleteColumn = () => {
+ editor.chain().focus().deleteColumn().run();
+ setActivePopover(null);
+ };
+
+ const deleteTable = () => {
+ editor.chain().focus().deleteTable().run();
+ setActivePopover(null);
+ };
+
+ const canInsertTable = editor
+ .can()
+ .chain()
+ .focus()
+ .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+ .run();
+ const canAddRow = editor.can().chain().focus().addRowAfter().run();
+ const canDeleteRow = editor.can().chain().focus().deleteRow().run();
+ const canAddColumn = editor.can().chain().focus().addColumnAfter().run();
+ const canDeleteColumn = editor.can().chain().focus().deleteColumn().run();
+ const canDeleteTable = editor.can().chain().focus().deleteTable().run();
+
+ return (
+
+
+
+
+ editor.chain().focus().undo().run()}
+ />
+ editor.chain().focus().redo().run()}
+ />
+
+
+ {headingButtons.map((button) => (
+ {
+ const chain = editor.chain().focus();
+ if (button.level) {
+ chain
+ .toggleHeading({
+ level: button.level,
+ })
+ .run();
+ } else {
+ chain.setParagraph().run();
+ }
+ }}
+ />
+ ))}
+
+
+
+ editor.chain().focus().toggleBold().run()
+ }
+ />
+
+ editor.chain().focus().toggleItalic().run()
+ }
+ />
+
+ editor
+ .chain()
+ .focus()
+ .toggleMark("underline")
+ .run()
+ }
+ />
+
+ editor.chain().focus().toggleStrike().run()
+ }
+ />
+
+ editor.chain().focus().toggleCode().run()
+ }
+ />
+ togglePopover("link")}
+ />
+
+
+
+ editor.chain().focus().toggleBulletList().run()
+ }
+ />
+
+ editor.chain().focus().toggleOrderedList().run()
+ }
+ />
+
+ editor.chain().focus().toggleBlockquote().run()
+ }
+ />
+
+ editor.chain().focus().setHorizontalRule().run()
+ }
+ />
+
+ editor.chain().focus().toggleCodeBlock().run()
+ }
+ />
+
+
+
+
+
+
+ {activePopover === "link" && (
+
setActivePopover(null)}
+ containerRef={popoverRef}
+ />
+ )}
+
+ {activePopover === "table" && (
+
+
+
+ Create 3×3 table
+
+
+ Add row
+
+
+ Delete row
+
+
+ Add column
+
+
+ Delete column
+
+
+ Remove table
+
+
+