<\/p>)+/, ''); - html = html.replace(/(
<\/p>)+$/, ''); + html = html.replace(/^(
<\/p>)+/, ""); + html = html.replace(/(
<\/p>)+$/, ""); return html; -} +}; export const isValidHttpUrl = (string: string): boolean => { let url: URL; @@ -42,4 +47,4 @@ export const isValidHttpUrl = (string: string): boolean => { } return url.protocol === "http:" || url.protocol === "https:"; -} +}; diff --git a/packages/editor/core/src/types/mention-suggestion.ts b/packages/editor/core/src/types/mention-suggestion.ts new file mode 100644 index 000000000..dcaa3148d --- /dev/null +++ b/packages/editor/core/src/types/mention-suggestion.ts @@ -0,0 +1,10 @@ +export type IMentionSuggestion = { + id: string; + type: string; + avatar: string; + title: string; + subtitle: string; + redirect_uri: string; +}; + +export type IMentionHighlight = string; diff --git a/packages/editor/core/src/ui/components/editor-container.tsx b/packages/editor/core/src/ui/components/editor-container.tsx index 8de6298b5..050755f5a 100644 --- a/packages/editor/core/src/ui/components/editor-container.tsx +++ b/packages/editor/core/src/ui/components/editor-container.tsx @@ -7,7 +7,11 @@ interface EditorContainerProps { children: ReactNode; } -export const EditorContainer = ({ editor, editorClassNames, children }: EditorContainerProps) => ( +export const EditorContainer = ({ + editor, + editorClassNames, + children, +}: EditorContainerProps) => (
{
diff --git a/packages/editor/core/src/ui/components/editor-content.tsx b/packages/editor/core/src/ui/components/editor-content.tsx
index 972184b08..830b87d9c 100644
--- a/packages/editor/core/src/ui/components/editor-content.tsx
+++ b/packages/editor/core/src/ui/components/editor-content.tsx
@@ -1,7 +1,6 @@
import { Editor, EditorContent } from "@tiptap/react";
import { ReactNode } from "react";
import { ImageResizer } from "../extensions/image/image-resize";
-import { TableMenu } from "../menus/table-menu";
interface EditorContentProps {
editor: Editor | null;
@@ -9,12 +8,16 @@ interface EditorContentProps {
children?: ReactNode;
}
-export const EditorContentWrapper = ({ editor, editorContentCustomClassNames = '', children }: EditorContentProps) => (
- ();
newState.doc.descendants((node) => {
if (node.type.name === IMAGE_NODE_TYPE) {
newImageSources.add(node.attrs.src);
@@ -55,7 +59,10 @@ const TrackImageDeletionPlugin = (deleteImage: DeleteImage): Plugin =>
export default TrackImageDeletionPlugin;
-async function onNodeDeleted(src: string, deleteImage: DeleteImage): Promise {
+async function onNodeDeleted(
+ src: string,
+ deleteImage: DeleteImage,
+): Promise {
try {
const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
const resStatus = await deleteImage(assetUrlWithWorkspaceId);
diff --git a/packages/editor/core/src/ui/plugins/upload-image.tsx b/packages/editor/core/src/ui/plugins/upload-image.tsx
index cdd62ae48..256460073 100644
--- a/packages/editor/core/src/ui/plugins/upload-image.tsx
+++ b/packages/editor/core/src/ui/plugins/upload-image.tsx
@@ -4,7 +4,7 @@ import { Decoration, DecorationSet, EditorView } from "@tiptap/pm/view";
const uploadKey = new PluginKey("upload-image");
-const UploadImagesPlugin = () =>
+const UploadImagesPlugin = (cancelUploadImage?: () => any) =>
new Plugin({
key: uploadKey,
state: {
@@ -21,15 +21,46 @@ const UploadImagesPlugin = () =>
const placeholder = document.createElement("div");
placeholder.setAttribute("class", "img-placeholder");
const image = document.createElement("img");
- image.setAttribute("class", "opacity-10 rounded-lg border border-custom-border-300");
+ image.setAttribute(
+ "class",
+ "opacity-10 rounded-lg border border-custom-border-300",
+ );
image.src = src;
placeholder.appendChild(image);
+
+ // Create cancel button
+ const cancelButton = document.createElement("button");
+ cancelButton.style.position = "absolute";
+ cancelButton.style.right = "3px";
+ cancelButton.style.top = "3px";
+ cancelButton.setAttribute("class", "opacity-90 rounded-lg");
+
+ cancelButton.onclick = () => {
+ cancelUploadImage?.();
+ };
+
+ // Create an SVG element from the SVG string
+ const svgString = ``;
+ const parser = new DOMParser();
+ const svgElement = parser.parseFromString(
+ svgString,
+ "image/svg+xml",
+ ).documentElement;
+
+ cancelButton.appendChild(svgElement);
+ placeholder.appendChild(cancelButton);
const deco = Decoration.widget(pos + 1, placeholder, {
id,
});
set = set.add(tr.doc, [deco]);
} else if (action && action.remove) {
- set = set.remove(set.find(undefined, undefined, (spec) => spec.id == action.remove.id));
+ set = set.remove(
+ set.find(
+ undefined,
+ undefined,
+ (spec) => spec.id == action.remove.id,
+ ),
+ );
}
return set;
},
@@ -48,19 +79,39 @@ function findPlaceholder(state: EditorState, id: {}) {
const found = decos.find(
undefined,
undefined,
- (spec: { id: number | undefined }) => spec.id == id
+ (spec: { id: number | undefined }) => spec.id == id,
);
return found.length ? found[0].from : null;
}
+const removePlaceholder = (view: EditorView, id: {}) => {
+ const removePlaceholderTr = view.state.tr.setMeta(uploadKey, {
+ remove: { id },
+ });
+ view.dispatch(removePlaceholderTr);
+};
+
export async function startImageUpload(
file: File,
view: EditorView,
pos: number,
uploadFile: UploadImage,
- setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+ setIsSubmitting?: (
+ isSubmitting: "submitting" | "submitted" | "saved",
+ ) => void,
) {
+ if (!file) {
+ alert("No file selected. Please select a file to upload.");
+ return;
+ }
+
if (!file.type.includes("image/")) {
+ alert("Invalid file type. Please select an image file.");
+ return;
+ }
+
+ if (file.size > 5 * 1024 * 1024) {
+ alert("File size too large. Please select a file smaller than 5MB.");
return;
}
@@ -82,28 +133,42 @@ export async function startImageUpload(
view.dispatch(tr);
};
+ // Handle FileReader errors
+ reader.onerror = (error) => {
+ console.error("FileReader error: ", error);
+ removePlaceholder(view, id);
+ return;
+ };
+
setIsSubmitting?.("submitting");
- const src = await UploadImageHandler(file, uploadFile);
- const { schema } = view.state;
- pos = findPlaceholder(view.state, id);
- if (pos == null) return;
- const imageSrc = typeof src === "object" ? reader.result : src;
+ try {
+ const src = await UploadImageHandler(file, uploadFile);
+ const { schema } = view.state;
+ pos = findPlaceholder(view.state, id);
- const node = schema.nodes.image.create({ src: imageSrc });
- const transaction = view.state.tr
- .replaceWith(pos, pos, node)
- .setMeta(uploadKey, { remove: { id } });
- view.dispatch(transaction);
+ if (pos == null) return;
+ const imageSrc = typeof src === "object" ? reader.result : src;
+
+ const node = schema.nodes.image.create({ src: imageSrc });
+ const transaction = view.state.tr
+ .replaceWith(pos, pos, node)
+ .setMeta(uploadKey, { remove: { id } });
+ view.dispatch(transaction);
+ } catch (error) {
+ console.error("Upload error: ", error);
+ removePlaceholder(view, id);
+ }
}
-const UploadImageHandler = (file: File,
- uploadFile: UploadImage
+const UploadImageHandler = (
+ file: File,
+ uploadFile: UploadImage,
): Promise => {
try {
return new Promise(async (resolve, reject) => {
try {
- const imageUrl = await uploadFile(file)
+ const imageUrl = await uploadFile(file);
const image = new Image();
image.src = imageUrl;
@@ -118,9 +183,6 @@ const UploadImageHandler = (file: File,
}
});
} catch (error) {
- if (error instanceof Error) {
- console.log(error.message);
- }
return Promise.reject(error);
}
};
diff --git a/packages/editor/core/src/ui/props.tsx b/packages/editor/core/src/ui/props.tsx
index 8f002b76c..865e0d2c7 100644
--- a/packages/editor/core/src/ui/props.tsx
+++ b/packages/editor/core/src/ui/props.tsx
@@ -5,7 +5,9 @@ import { UploadImage } from "../types/upload-image";
export function CoreEditorProps(
uploadFile: UploadImage,
- setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+ setIsSubmitting?: (
+ isSubmitting: "submitting" | "submitted" | "saved",
+ ) => void,
): EditorProps {
return {
attributes: {
@@ -32,7 +34,11 @@ export function CoreEditorProps(
}
}
}
- if (event.clipboardData && event.clipboardData.files && event.clipboardData.files[0]) {
+ if (
+ event.clipboardData &&
+ event.clipboardData.files &&
+ event.clipboardData.files[0]
+ ) {
event.preventDefault();
const file = event.clipboardData.files[0];
const pos = view.state.selection.from;
@@ -51,7 +57,12 @@ export function CoreEditorProps(
}
}
}
- if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
+ if (
+ !moved &&
+ event.dataTransfer &&
+ event.dataTransfer.files &&
+ event.dataTransfer.files[0]
+ ) {
event.preventDefault();
const file = event.dataTransfer.files[0];
const coordinates = view.posAtCoords({
@@ -59,7 +70,13 @@ export function CoreEditorProps(
top: event.clientY,
});
if (coordinates) {
- startImageUpload(file, view, coordinates.pos - 1, uploadFile, setIsSubmitting);
+ startImageUpload(
+ file,
+ view,
+ coordinates.pos - 1,
+ uploadFile,
+ setIsSubmitting,
+ );
}
return true;
}
diff --git a/packages/editor/core/src/ui/read-only/extensions.tsx b/packages/editor/core/src/ui/read-only/extensions.tsx
index 2246c64f9..b8fc9bb95 100644
--- a/packages/editor/core/src/ui/read-only/extensions.tsx
+++ b/packages/editor/core/src/ui/read-only/extensions.tsx
@@ -8,15 +8,20 @@ import TaskList from "@tiptap/extension-task-list";
import { Markdown } from "tiptap-markdown";
import Gapcursor from "@tiptap/extension-gapcursor";
-import { CustomTableCell } from "../extensions/table/table-cell";
-import { Table } from "../extensions/table";
-import { TableHeader } from "../extensions/table/table-header";
-import { TableRow } from "@tiptap/extension-table-row";
+import TableHeader from "../extensions/table/table-header/table-header";
+import Table from "../extensions/table/table";
+import TableCell from "../extensions/table/table-cell/table-cell";
+import TableRow from "../extensions/table/table-row/table-row";
import ReadOnlyImageExtension from "../extensions/image/read-only-image";
import { isValidHttpUrl } from "../../lib/utils";
+import { Mentions } from "../mentions";
+import { IMentionSuggestion } from "../../types/mention-suggestion";
-export const CoreReadOnlyEditorExtensions = [
+export const CoreReadOnlyEditorExtensions = (mentionConfig: {
+ mentionSuggestions: IMentionSuggestion[];
+ mentionHighlights: string[];
+}) => [
StarterKit.configure({
bulletList: {
HTMLAttributes: {
@@ -53,40 +58,45 @@ export const CoreReadOnlyEditorExtensions = [
},
gapcursor: false,
}),
- Gapcursor,
- TiptapLink.configure({
- protocols: ["http", "https"],
- validate: (url) => isValidHttpUrl(url),
- HTMLAttributes: {
- class:
- "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
- },
- }),
- ReadOnlyImageExtension.configure({
- HTMLAttributes: {
- class: "rounded-lg border border-custom-border-300",
- },
- }),
- TiptapUnderline,
- TextStyle,
- Color,
- TaskList.configure({
- HTMLAttributes: {
- class: "not-prose pl-2",
- },
- }),
- TaskItem.configure({
- HTMLAttributes: {
- class: "flex items-start my-4",
- },
- nested: true,
- }),
- Markdown.configure({
- html: true,
- transformCopiedText: true,
- }),
- Table,
- TableHeader,
- CustomTableCell,
- TableRow,
- ];
+ Gapcursor,
+ TiptapLink.configure({
+ protocols: ["http", "https"],
+ validate: (url) => isValidHttpUrl(url),
+ HTMLAttributes: {
+ class:
+ "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
+ },
+ }),
+ ReadOnlyImageExtension.configure({
+ HTMLAttributes: {
+ class: "rounded-lg border border-custom-border-300",
+ },
+ }),
+ TiptapUnderline,
+ TextStyle,
+ Color,
+ TaskList.configure({
+ HTMLAttributes: {
+ class: "not-prose pl-2",
+ },
+ }),
+ TaskItem.configure({
+ HTMLAttributes: {
+ class: "flex items-start my-4",
+ },
+ nested: true,
+ }),
+ Markdown.configure({
+ html: true,
+ transformCopiedText: true,
+ }),
+ Table,
+ TableHeader,
+ TableCell,
+ TableRow,
+ Mentions(
+ mentionConfig.mentionSuggestions,
+ mentionConfig.mentionHighlights,
+ true,
+ ),
+];
diff --git a/packages/editor/core/src/ui/read-only/props.tsx b/packages/editor/core/src/ui/read-only/props.tsx
index 25db2b68c..79f9fcb0d 100644
--- a/packages/editor/core/src/ui/read-only/props.tsx
+++ b/packages/editor/core/src/ui/read-only/props.tsx
@@ -1,7 +1,6 @@
import { EditorProps } from "@tiptap/pm/view";
-export const CoreReadOnlyEditorProps: EditorProps =
-{
+export const CoreReadOnlyEditorProps: EditorProps = {
attributes: {
class: `prose prose-brand max-w-full prose-headings:font-display font-default focus:outline-none`,
},
diff --git a/packages/editor/lite-text-editor/Readme.md b/packages/editor/lite-text-editor/Readme.md
index 948e2c34b..1f10f5ff4 100644
--- a/packages/editor/lite-text-editor/Readme.md
+++ b/packages/editor/lite-text-editor/Readme.md
@@ -10,25 +10,25 @@ The `@plane/lite-text-editor` package extends from the `editor-core` package, in
`LiteTextEditor` & `LiteTextEditorWithRef`
-- **Read Only Editor Instances**: We have added a really light weight *Read Only* Editor instance for the Lite editor types (with and without Ref)
+- **Read Only Editor Instances**: We have added a really light weight _Read Only_ Editor instance for the Lite editor types (with and without Ref)
`LiteReadOnlyEditor` &`LiteReadOnlyEditorWithRef`
## LiteTextEditor
-| Prop | Type | Description |
-| --- | --- | --- |
-| `uploadFile` | `(file: File) => Promise` | A function that handles file upload. It takes a file as input and handles the process of uploading that file. |
-| `deleteFile` | `(assetUrlWithWorkspaceId: string) => Promise` | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image. |
-| `value` | `html string` | The initial content of the editor. |
-| `onEnterKeyPress` | `(e) => void` | The event that happens on Enter key press |
-| `debouncedUpdatesEnabled` | `boolean` | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. |
-| `onChange` | `(json: any, html: string) => void` | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats. |
-| `setIsSubmitting` | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status. |
-| `setShouldShowAlert` | `(showAlert: boolean) => void` | This function is used to show or hide an alert incase of content not being "saved". |
-| `noBorder` | `boolean` | If set to true, the editor will not have a border. |
-| `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. |
-| `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. |
-| `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. |
+| Prop | Type | Description |
+| ------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `uploadFile` | `(file: File) => Promise` | A function that handles file upload. It takes a file as input and handles the process of uploading that file. |
+| `deleteFile` | `(assetUrlWithWorkspaceId: string) => Promise` | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image. |
+| `value` | `html string` | The initial content of the editor. |
+| `onEnterKeyPress` | `(e) => void` | The event that happens on Enter key press |
+| `debouncedUpdatesEnabled` | `boolean` | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. |
+| `onChange` | `(json: any, html: string) => void` | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats. |
+| `setIsSubmitting` | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status. |
+| `setShouldShowAlert` | `(showAlert: boolean) => void` | This function is used to show or hide an alert incase of content not being "saved". |
+| `noBorder` | `boolean` | If set to true, the editor will not have a border. |
+| `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. |
+| `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. |
+| `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. |
### Usage
@@ -36,62 +36,62 @@ The `@plane/lite-text-editor` package extends from the `editor-core` package, in
```tsx
{
- onChange(comment_html);
- }}
- />
+ onEnterKeyPress={handleSubmit(handleCommentUpdate)}
+ uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
+ deleteFile={fileService.deleteImage}
+ value={value}
+ debouncedUpdatesEnabled={false}
+ customClassName="min-h-[50px] p-3 shadow-sm"
+ onChange={(comment_json: Object, comment_html: string) => {
+ onChange(comment_html);
+ }}
+/>
```
2. Example of how to use the `LiteTextEditorWithRef` component
```tsx
- const editorRef = useRef(null);
+const editorRef = useRef(null);
- // can use it to set the editor's value
- editorRef.current?.setEditorValue(`${watch("description_html")}`);
+// can use it to set the editor's value
+editorRef.current?.setEditorValue(`${watch("description_html")}`);
- // can use it to clear the editor
- editorRef?.current?.clearEditor();
+// can use it to clear the editor
+editorRef?.current?.clearEditor();
- return (
- {
- onChange(comment_html);
- }}
- />
-)
+return (
+ {
+ onChange(comment_html);
+ }}
+ />
+);
```
## LiteReadOnlyEditor
-| Prop | Type | Description |
-| --- | --- | --- |
-| `value` | `html string` | The initial content of the editor. |
-| `noBorder` | `boolean` | If set to true, the editor will not have a border. |
-| `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. |
-| `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. |
-| `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. |
+| Prop | Type | Description |
+| ------------------------------- | ------------- | --------------------------------------------------------------------- |
+| `value` | `html string` | The initial content of the editor. |
+| `noBorder` | `boolean` | If set to true, the editor will not have a border. |
+| `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. |
+| `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. |
+| `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. |
### Usage
Here is an example of how to use the `RichReadOnlyEditor` component
```tsx
- ;
export type DeleteImage = (assetUrlWithWorkspaceId: string) => Promise;
+export type IMentionSuggestion = {
+ id: string;
+ type: string;
+ avatar: string;
+ title: string;
+ subtitle: string;
+ redirect_uri: string;
+};
+
+export type IMentionHighlight = string;
interface ILiteTextEditor {
value: string;
@@ -22,7 +31,7 @@ interface ILiteTextEditor {
editorContentCustomClassNames?: string;
onChange?: (json: any, html: string) => void;
setIsSubmitting?: (
- isSubmitting: "submitting" | "submitted" | "saved"
+ isSubmitting: "submitting" | "submitted" | "saved",
) => void;
setShouldShowAlert?: (showAlert: boolean) => void;
forwardedRef?: any;
@@ -38,6 +47,10 @@ interface ILiteTextEditor {
}[];
};
onEnterKeyPress?: (e?: any) => void;
+ cancelUploadImage?: () => any;
+ mentionHighlights?: string[];
+ mentionSuggestions?: IMentionSuggestion[];
+ submitButton?: React.ReactNode;
}
interface LiteTextEditorProps extends ILiteTextEditor {
@@ -49,24 +62,31 @@ interface EditorHandle {
setEditorValue: (content: string) => void;
}
-const LiteTextEditor = ({
- onChange,
- debouncedUpdatesEnabled,
- setIsSubmitting,
- setShouldShowAlert,
- editorContentCustomClassNames,
- value,
- uploadFile,
- deleteFile,
- noBorder,
- borderOnFocus,
- customClassName,
- forwardedRef,
- commentAccessSpecifier,
- onEnterKeyPress,
-}: LiteTextEditorProps) => {
+const LiteTextEditor = (props: LiteTextEditorProps) => {
+ const {
+ onChange,
+ cancelUploadImage,
+ debouncedUpdatesEnabled,
+ setIsSubmitting,
+ setShouldShowAlert,
+ editorContentCustomClassNames,
+ value,
+ uploadFile,
+ deleteFile,
+ noBorder,
+ borderOnFocus,
+ customClassName,
+ forwardedRef,
+ commentAccessSpecifier,
+ onEnterKeyPress,
+ mentionHighlights,
+ mentionSuggestions,
+ submitButton,
+ } = props;
+
const editor = useEditor({
onChange,
+ cancelUploadImage,
debouncedUpdatesEnabled,
setIsSubmitting,
setShouldShowAlert,
@@ -75,6 +95,8 @@ const LiteTextEditor = ({
deleteFile,
forwardedRef,
extensions: LiteTextEditorExtensions(onEnterKeyPress),
+ mentionHighlights,
+ mentionSuggestions,
});
const editorClassNames = getEditorClassNames({
@@ -98,6 +120,7 @@ const LiteTextEditor = ({
uploadFile={uploadFile}
setIsSubmitting={setIsSubmitting}
commentAccessSpecifier={commentAccessSpecifier}
+ submitButton={submitButton}
/>
@@ -106,7 +129,7 @@ const LiteTextEditor = ({
};
const LiteTextEditorWithRef = React.forwardRef
- {/* @ts-ignore */}
+export const EditorContentWrapper = ({
+ editor,
+ editorContentCustomClassNames = "",
+ children,
+}: EditorContentProps) => (
+
;
+}
+
+export default Node.create({
+ name: "tableCell",
+
+ addOptions() {
+ return {
+ HTMLAttributes: {},
+ };
+ },
+
+ content: "paragraph+",
+
+ addAttributes() {
+ return {
+ colspan: {
+ default: 1,
+ },
+ rowspan: {
+ default: 1,
+ },
+ colwidth: {
+ default: null,
+ parseHTML: (element) => {
+ const colwidth = element.getAttribute("colwidth");
+ const value = colwidth ? [parseInt(colwidth, 10)] : null;
+
+ return value;
+ },
+ },
+ background: {
+ default: "none",
+ },
+ };
+ },
+
+ tableRole: "cell",
+
+ isolating: true,
+
+ parseHTML() {
+ return [{ tag: "td" }];
+ },
+
+ renderHTML({ node, HTMLAttributes }) {
+ return [
+ "td",
+ mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+ style: `background-color: ${node.attrs.background}`,
+ }),
+ 0,
+ ];
+ },
+});
diff --git a/packages/editor/core/src/ui/extensions/table/table-header.ts b/packages/editor/core/src/ui/extensions/table/table-header.ts
deleted file mode 100644
index f23aa93ef..000000000
--- a/packages/editor/core/src/ui/extensions/table/table-header.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { TableHeader as BaseTableHeader } from "@tiptap/extension-table-header";
-
-const TableHeader = BaseTableHeader.extend({
- content: "paragraph",
-});
-
-export { TableHeader };
diff --git a/packages/editor/core/src/ui/extensions/table/table-header/index.ts b/packages/editor/core/src/ui/extensions/table/table-header/index.ts
new file mode 100644
index 000000000..cb036c505
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table-header/index.ts
@@ -0,0 +1 @@
+export { default as default } from "./table-header";
diff --git a/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts b/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts
new file mode 100644
index 000000000..0148f1a6f
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table-header/table-header.ts
@@ -0,0 +1,57 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+
+export interface TableHeaderOptions {
+ HTMLAttributes: Record;
+}
+export default Node.create({
+ name: "tableHeader",
+
+ addOptions() {
+ return {
+ HTMLAttributes: {},
+ };
+ },
+
+ content: "paragraph+",
+
+ addAttributes() {
+ return {
+ colspan: {
+ default: 1,
+ },
+ rowspan: {
+ default: 1,
+ },
+ colwidth: {
+ default: null,
+ parseHTML: (element) => {
+ const colwidth = element.getAttribute("colwidth");
+ const value = colwidth ? [parseInt(colwidth, 10)] : null;
+
+ return value;
+ },
+ },
+ background: {
+ default: "rgb(var(--color-primary-100))",
+ },
+ };
+ },
+
+ tableRole: "header_cell",
+
+ isolating: true,
+
+ parseHTML() {
+ return [{ tag: "th" }];
+ },
+
+ renderHTML({ node, HTMLAttributes }) {
+ return [
+ "th",
+ mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+ style: `background-color: ${node.attrs.background}`,
+ }),
+ 0,
+ ];
+ },
+});
diff --git a/packages/editor/core/src/ui/extensions/table/table-row/index.ts b/packages/editor/core/src/ui/extensions/table/table-row/index.ts
new file mode 100644
index 000000000..8c6eb55aa
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table-row/index.ts
@@ -0,0 +1 @@
+export { default as default } from "./table-row";
diff --git a/packages/editor/core/src/ui/extensions/table/table-row/table-row.ts b/packages/editor/core/src/ui/extensions/table/table-row/table-row.ts
new file mode 100644
index 000000000..1b576623b
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table-row/table-row.ts
@@ -0,0 +1,31 @@
+import { mergeAttributes, Node } from "@tiptap/core";
+
+export interface TableRowOptions {
+ HTMLAttributes: Record;
+}
+
+export default Node.create({
+ name: "tableRow",
+
+ addOptions() {
+ return {
+ HTMLAttributes: {},
+ };
+ },
+
+ content: "(tableCell | tableHeader)*",
+
+ tableRole: "row",
+
+ parseHTML() {
+ return [{ tag: "tr" }];
+ },
+
+ renderHTML({ HTMLAttributes }) {
+ return [
+ "tr",
+ mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+ 0,
+ ];
+ },
+});
diff --git a/packages/editor/core/src/ui/extensions/table/table/icons.ts b/packages/editor/core/src/ui/extensions/table/table/icons.ts
new file mode 100644
index 000000000..eda520759
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/icons.ts
@@ -0,0 +1,55 @@
+const icons = {
+ colorPicker: ``,
+ deleteColumn: ``,
+ deleteRow: ``,
+ insertLeftTableIcon: `
+`,
+ insertRightTableIcon: `
+`,
+ insertTopTableIcon: `
+`,
+ insertBottomTableIcon: `
+`,
+};
+
+export default icons;
diff --git a/packages/editor/core/src/ui/extensions/table/table/index.ts b/packages/editor/core/src/ui/extensions/table/table/index.ts
new file mode 100644
index 000000000..ac51d0e2c
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/index.ts
@@ -0,0 +1 @@
+export { default as default } from "./table";
diff --git a/packages/editor/core/src/ui/extensions/table/table/table-controls.ts b/packages/editor/core/src/ui/extensions/table/table/table-controls.ts
new file mode 100644
index 000000000..efaf84970
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/table-controls.ts
@@ -0,0 +1,122 @@
+import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+import { findParentNode } from "@tiptap/core";
+import { DecorationSet, Decoration } from "@tiptap/pm/view";
+
+const key = new PluginKey("tableControls");
+
+export function tableControls() {
+ return new Plugin({
+ key,
+ state: {
+ init() {
+ return new TableControlsState();
+ },
+ apply(tr, prev) {
+ return prev.apply(tr);
+ },
+ },
+ props: {
+ handleDOMEvents: {
+ mousemove: (view, event) => {
+ const pluginState = key.getState(view.state);
+
+ if (
+ !(event.target as HTMLElement).closest(".tableWrapper") &&
+ pluginState.values.hoveredTable
+ ) {
+ return view.dispatch(
+ view.state.tr.setMeta(key, {
+ setHoveredTable: null,
+ setHoveredCell: null,
+ }),
+ );
+ }
+
+ const pos = view.posAtCoords({
+ left: event.clientX,
+ top: event.clientY,
+ });
+
+ if (!pos) return;
+
+ const table = findParentNode((node) => node.type.name === "table")(
+ TextSelection.create(view.state.doc, pos.pos),
+ );
+ const cell = findParentNode(
+ (node) =>
+ node.type.name === "tableCell" ||
+ node.type.name === "tableHeader",
+ )(TextSelection.create(view.state.doc, pos.pos));
+
+ if (!table || !cell) return;
+
+ if (pluginState.values.hoveredCell?.pos !== cell.pos) {
+ return view.dispatch(
+ view.state.tr.setMeta(key, {
+ setHoveredTable: table,
+ setHoveredCell: cell,
+ }),
+ );
+ }
+ },
+ },
+ decorations: (state) => {
+ const pluginState = key.getState(state);
+ if (!pluginState) {
+ return null;
+ }
+
+ const { hoveredTable, hoveredCell } = pluginState.values;
+ const docSize = state.doc.content.size;
+ if (
+ hoveredTable &&
+ hoveredCell &&
+ hoveredTable.pos < docSize &&
+ hoveredCell.pos < docSize
+ ) {
+ const decorations = [
+ Decoration.node(
+ hoveredTable.pos,
+ hoveredTable.pos + hoveredTable.node.nodeSize,
+ {},
+ {
+ hoveredTable,
+ hoveredCell,
+ },
+ ),
+ ];
+
+ return DecorationSet.create(state.doc, decorations);
+ }
+
+ return null;
+ },
+ },
+ });
+}
+
+class TableControlsState {
+ values;
+
+ constructor(props = {}) {
+ this.values = {
+ hoveredTable: null,
+ hoveredCell: null,
+ ...props,
+ };
+ }
+
+ apply(tr: any) {
+ const actions = tr.getMeta(key);
+
+ if (actions?.setHoveredTable !== undefined) {
+ this.values.hoveredTable = actions.setHoveredTable;
+ }
+
+ if (actions?.setHoveredCell !== undefined) {
+ this.values.hoveredCell = actions.setHoveredCell;
+ }
+
+ return this;
+ }
+}
diff --git a/packages/editor/core/src/ui/extensions/table/table/table-view.tsx b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
new file mode 100644
index 000000000..7f72a212e
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
@@ -0,0 +1,536 @@
+import { h } from "jsx-dom-cjs";
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { Decoration, NodeView } from "@tiptap/pm/view";
+import tippy, { Instance, Props } from "tippy.js";
+
+import { Editor } from "@tiptap/core";
+import {
+ CellSelection,
+ TableMap,
+ updateColumnsOnResize,
+} from "@tiptap/prosemirror-tables";
+
+import icons from "./icons";
+
+export function updateColumns(
+ node: ProseMirrorNode,
+ colgroup: HTMLElement,
+ table: HTMLElement,
+ cellMinWidth: number,
+ overrideCol?: number,
+ overrideValue?: any,
+) {
+ let totalWidth = 0;
+ let fixedWidth = true;
+ let nextDOM = colgroup.firstChild as HTMLElement;
+ const row = node.firstChild;
+
+ if (!row) return;
+
+ for (let i = 0, col = 0; i < row.childCount; i += 1) {
+ const { colspan, colwidth } = row.child(i).attrs;
+
+ for (let j = 0; j < colspan; j += 1, col += 1) {
+ const hasWidth =
+ overrideCol === col ? overrideValue : colwidth && colwidth[j];
+ const cssWidth = hasWidth ? `${hasWidth}px` : "";
+
+ totalWidth += hasWidth || cellMinWidth;
+
+ if (!hasWidth) {
+ fixedWidth = false;
+ }
+
+ if (!nextDOM) {
+ colgroup.appendChild(document.createElement("col")).style.width =
+ cssWidth;
+ } else {
+ if (nextDOM.style.width !== cssWidth) {
+ nextDOM.style.width = cssWidth;
+ }
+
+ nextDOM = nextDOM.nextSibling as HTMLElement;
+ }
+ }
+ }
+
+ while (nextDOM) {
+ const after = nextDOM.nextSibling;
+
+ nextDOM.parentNode?.removeChild(nextDOM);
+ nextDOM = after as HTMLElement;
+ }
+
+ if (fixedWidth) {
+ table.style.width = `${totalWidth}px`;
+ table.style.minWidth = "";
+ } else {
+ table.style.width = "";
+ table.style.minWidth = `${totalWidth}px`;
+ }
+}
+
+const defaultTippyOptions: Partial = {
+ allowHTML: true,
+ arrow: false,
+ trigger: "click",
+ animation: "scale-subtle",
+ theme: "light-border no-padding",
+ interactive: true,
+ hideOnClick: true,
+ placement: "right",
+};
+
+function setCellsBackgroundColor(editor: Editor, backgroundColor) {
+ return editor
+ .chain()
+ .focus()
+ .updateAttributes("tableCell", {
+ background: backgroundColor,
+ })
+ .updateAttributes("tableHeader", {
+ background: backgroundColor,
+ })
+ .run();
+}
+
+const columnsToolboxItems = [
+ {
+ label: "Add Column Before",
+ icon: icons.insertLeftTableIcon,
+ action: ({ editor }: { editor: Editor }) =>
+ editor.chain().focus().addColumnBefore().run(),
+ },
+ {
+ label: "Add Column After",
+ icon: icons.insertRightTableIcon,
+ action: ({ editor }: { editor: Editor }) =>
+ editor.chain().focus().addColumnAfter().run(),
+ },
+ {
+ label: "Pick Column Color",
+ icon: icons.colorPicker,
+ action: ({
+ editor,
+ triggerButton,
+ controlsContainer,
+ }: {
+ editor: Editor;
+ triggerButton: HTMLElement;
+ controlsContainer;
+ }) => {
+ createColorPickerToolbox({
+ triggerButton,
+ tippyOptions: {
+ appendTo: controlsContainer,
+ },
+ onSelectColor: (color) => setCellsBackgroundColor(editor, color),
+ });
+ },
+ },
+ {
+ label: "Delete Column",
+ icon: icons.deleteColumn,
+ action: ({ editor }: { editor: Editor }) =>
+ editor.chain().focus().deleteColumn().run(),
+ },
+];
+
+const rowsToolboxItems = [
+ {
+ label: "Add Row Above",
+ icon: icons.insertTopTableIcon,
+ action: ({ editor }: { editor: Editor }) =>
+ editor.chain().focus().addRowBefore().run(),
+ },
+ {
+ label: "Add Row Below",
+ icon: icons.insertBottomTableIcon,
+ action: ({ editor }: { editor: Editor }) =>
+ editor.chain().focus().addRowAfter().run(),
+ },
+ {
+ label: "Pick Row Color",
+ icon: icons.colorPicker,
+ action: ({
+ editor,
+ triggerButton,
+ controlsContainer,
+ }: {
+ editor: Editor;
+ triggerButton: HTMLButtonElement;
+ controlsContainer:
+ | Element
+ | "parent"
+ | ((ref: Element) => Element)
+ | undefined;
+ }) => {
+ createColorPickerToolbox({
+ triggerButton,
+ tippyOptions: {
+ appendTo: controlsContainer,
+ },
+ onSelectColor: (color) => setCellsBackgroundColor(editor, color),
+ });
+ },
+ },
+ {
+ label: "Delete Row",
+ icon: icons.deleteRow,
+ action: ({ editor }: { editor: Editor }) =>
+ editor.chain().focus().deleteRow().run(),
+ },
+];
+
+function createToolbox({
+ triggerButton,
+ items,
+ tippyOptions,
+ onClickItem,
+}: {
+ triggerButton: HTMLElement;
+ items: { icon: string; label: string }[];
+ tippyOptions: any;
+ onClickItem: any;
+}): Instance {
+ const toolbox = tippy(triggerButton, {
+ content: h(
+ "div",
+ { className: "tableToolbox" },
+ items.map((item) =>
+ h(
+ "div",
+ {
+ className: "toolboxItem",
+ itemType: "button",
+ onClick() {
+ onClickItem(item);
+ },
+ },
+ [
+ h("div", {
+ className: "iconContainer",
+ innerHTML: item.icon,
+ }),
+ h("div", { className: "label" }, item.label),
+ ],
+ ),
+ ),
+ ),
+ ...tippyOptions,
+ });
+
+ return Array.isArray(toolbox) ? toolbox[0] : toolbox;
+}
+
+function createColorPickerToolbox({
+ triggerButton,
+ tippyOptions,
+ onSelectColor = () => {},
+}: {
+ triggerButton: HTMLElement;
+ tippyOptions: Partial;
+ onSelectColor?: (color: string) => void;
+}) {
+ const items = {
+ Default: "rgb(var(--color-primary-100))",
+ Orange: "#FFE5D1",
+ Grey: "#F1F1F1",
+ Yellow: "#FEF3C7",
+ Green: "#DCFCE7",
+ Red: "#FFDDDD",
+ Blue: "#D9E4FF",
+ Pink: "#FFE8FA",
+ Purple: "#E8DAFB",
+ };
+
+ const colorPicker = tippy(triggerButton, {
+ ...defaultTippyOptions,
+ content: h(
+ "div",
+ { className: "tableColorPickerToolbox" },
+ Object.entries(items).map(([key, value]) =>
+ h(
+ "div",
+ {
+ className: "toolboxItem",
+ itemType: "button",
+ onClick: () => {
+ onSelectColor(value);
+ colorPicker.hide();
+ },
+ },
+ [
+ h("div", {
+ className: "colorContainer",
+ style: {
+ backgroundColor: value,
+ },
+ }),
+ h(
+ "div",
+ {
+ className: "label",
+ },
+ key,
+ ),
+ ],
+ ),
+ ),
+ ),
+ onHidden: (instance) => {
+ instance.destroy();
+ },
+ showOnCreate: true,
+ ...tippyOptions,
+ });
+
+ return colorPicker;
+}
+
+export class TableView implements NodeView {
+ node: ProseMirrorNode;
+ cellMinWidth: number;
+ decorations: Decoration[];
+ editor: Editor;
+ getPos: () => number;
+ hoveredCell;
+ map: TableMap;
+ root: HTMLElement;
+ table: HTMLElement;
+ colgroup: HTMLElement;
+ tbody: HTMLElement;
+ rowsControl?: HTMLElement;
+ columnsControl?: HTMLElement;
+ columnsToolbox?: Instance;
+ rowsToolbox?: Instance;
+ controls?: HTMLElement;
+
+ get dom() {
+ return this.root;
+ }
+
+ get contentDOM() {
+ return this.tbody;
+ }
+
+ constructor(
+ node: ProseMirrorNode,
+ cellMinWidth: number,
+ decorations: Decoration[],
+ editor: Editor,
+ getPos: () => number,
+ ) {
+ this.node = node;
+ this.cellMinWidth = cellMinWidth;
+ this.decorations = decorations;
+ this.editor = editor;
+ this.getPos = getPos;
+ this.hoveredCell = null;
+ this.map = TableMap.get(node);
+
+ if (editor.isEditable) {
+ this.rowsControl = h(
+ "div",
+ { className: "rowsControl" },
+ h("div", {
+ itemType: "button",
+ className: "rowsControlDiv",
+ onClick: () => this.selectRow(),
+ }),
+ );
+
+ this.columnsControl = h(
+ "div",
+ { className: "columnsControl" },
+ h("div", {
+ itemType: "button",
+ className: "columnsControlDiv",
+ onClick: () => this.selectColumn(),
+ }),
+ );
+
+ this.controls = h(
+ "div",
+ { className: "tableControls", contentEditable: "false" },
+ this.rowsControl,
+ this.columnsControl,
+ );
+
+ this.columnsToolbox = createToolbox({
+ triggerButton: this.columnsControl.querySelector(".columnsControlDiv"),
+ items: columnsToolboxItems,
+ tippyOptions: {
+ ...defaultTippyOptions,
+ appendTo: this.controls,
+ },
+ onClickItem: (item) => {
+ item.action({
+ editor: this.editor,
+ triggerButton: this.columnsControl?.firstElementChild,
+ controlsContainer: this.controls,
+ });
+ this.columnsToolbox?.hide();
+ },
+ });
+
+ this.rowsToolbox = createToolbox({
+ triggerButton: this.rowsControl.firstElementChild,
+ items: rowsToolboxItems,
+ tippyOptions: {
+ ...defaultTippyOptions,
+ appendTo: this.controls,
+ },
+ onClickItem: (item) => {
+ item.action({
+ editor: this.editor,
+ triggerButton: this.rowsControl?.firstElementChild,
+ controlsContainer: this.controls,
+ });
+ this.rowsToolbox?.hide();
+ },
+ });
+ }
+
+ // Table
+
+ this.colgroup = h(
+ "colgroup",
+ null,
+ Array.from({ length: this.map.width }, () => 1).map(() => h("col")),
+ );
+ this.tbody = h("tbody");
+ this.table = h("table", null, this.colgroup, this.tbody);
+
+ this.root = h(
+ "div",
+ {
+ className: "tableWrapper controls--disabled",
+ },
+ this.controls,
+ this.table,
+ );
+
+ this.render();
+ }
+
+ update(node: ProseMirrorNode, decorations) {
+ if (node.type !== this.node.type) {
+ return false;
+ }
+
+ this.node = node;
+ this.decorations = decorations;
+ this.map = TableMap.get(this.node);
+
+ if (this.editor.isEditable) {
+ this.updateControls();
+ }
+
+ this.render();
+
+ return true;
+ }
+
+ render() {
+ if (this.colgroup.children.length !== this.map.width) {
+ const cols = Array.from({ length: this.map.width }, () => 1).map(() =>
+ h("col"),
+ );
+ this.colgroup.replaceChildren(...cols);
+ }
+
+ updateColumnsOnResize(
+ this.node,
+ this.colgroup,
+ this.table,
+ this.cellMinWidth,
+ );
+ }
+
+ ignoreMutation() {
+ return true;
+ }
+
+ updateControls() {
+ const { hoveredTable: table, hoveredCell: cell } = Object.values(
+ this.decorations,
+ ).reduce(
+ (acc, curr) => {
+ if (curr.spec.hoveredCell !== undefined) {
+ acc["hoveredCell"] = curr.spec.hoveredCell;
+ }
+
+ if (curr.spec.hoveredTable !== undefined) {
+ acc["hoveredTable"] = curr.spec.hoveredTable;
+ }
+ return acc;
+ },
+ {} as Record,
+ ) as any;
+
+ if (table === undefined || cell === undefined) {
+ return this.root.classList.add("controls--disabled");
+ }
+
+ this.root.classList.remove("controls--disabled");
+ this.hoveredCell = cell;
+
+ const cellDom = this.editor.view.nodeDOM(cell.pos) as HTMLElement;
+
+ const tableRect = this.table.getBoundingClientRect();
+ const cellRect = cellDom.getBoundingClientRect();
+
+ this.columnsControl.style.left = `${
+ cellRect.left - tableRect.left - this.table.parentElement!.scrollLeft
+ }px`;
+ this.columnsControl.style.width = `${cellRect.width}px`;
+
+ this.rowsControl.style.top = `${cellRect.top - tableRect.top}px`;
+ this.rowsControl.style.height = `${cellRect.height}px`;
+ }
+
+ selectColumn() {
+ if (!this.hoveredCell) return;
+
+ const colIndex = this.map.colCount(
+ this.hoveredCell.pos - (this.getPos() + 1),
+ );
+ const anchorCellPos = this.hoveredCell.pos;
+ const headCellPos =
+ this.map.map[colIndex + this.map.width * (this.map.height - 1)] +
+ (this.getPos() + 1);
+
+ const cellSelection = CellSelection.create(
+ this.editor.view.state.doc,
+ anchorCellPos,
+ headCellPos,
+ );
+ this.editor.view.dispatch(
+ // @ts-ignore
+ this.editor.state.tr.setSelection(cellSelection),
+ );
+ }
+
+ selectRow() {
+ if (!this.hoveredCell) return;
+
+ const anchorCellPos = this.hoveredCell.pos;
+ const anchorCellIndex = this.map.map.indexOf(
+ anchorCellPos - (this.getPos() + 1),
+ );
+ const headCellPos =
+ this.map.map[anchorCellIndex + (this.map.width - 1)] +
+ (this.getPos() + 1);
+
+ const cellSelection = CellSelection.create(
+ this.editor.state.doc,
+ anchorCellPos,
+ headCellPos,
+ );
+ this.editor.view.dispatch(
+ // @ts-ignore
+ this.editor.view.state.tr.setSelection(cellSelection),
+ );
+ }
+}
diff --git a/packages/editor/core/src/ui/extensions/table/table/table.ts b/packages/editor/core/src/ui/extensions/table/table/table.ts
new file mode 100644
index 000000000..8571fdfba
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/table.ts
@@ -0,0 +1,312 @@
+import { TextSelection } from "@tiptap/pm/state";
+
+import {
+ callOrReturn,
+ getExtensionField,
+ mergeAttributes,
+ Node,
+ ParentConfig,
+} from "@tiptap/core";
+import {
+ addColumnAfter,
+ addColumnBefore,
+ addRowAfter,
+ addRowBefore,
+ CellSelection,
+ columnResizing,
+ deleteColumn,
+ deleteRow,
+ deleteTable,
+ fixTables,
+ goToNextCell,
+ mergeCells,
+ setCellAttr,
+ splitCell,
+ tableEditing,
+ toggleHeader,
+ toggleHeaderCell,
+} from "@tiptap/prosemirror-tables";
+
+import { tableControls } from "./table-controls";
+import { TableView } from "./table-view";
+import { createTable } from "./utilities/create-table";
+import { deleteTableWhenAllCellsSelected } from "./utilities/delete-table-when-all-cells-selected";
+
+export interface TableOptions {
+ HTMLAttributes: Record;
+ resizable: boolean;
+ handleWidth: number;
+ cellMinWidth: number;
+ lastColumnResizable: boolean;
+ allowTableNodeSelection: boolean;
+}
+
+declare module "@tiptap/core" {
+ interface Commands {
+ table: {
+ insertTable: (options?: {
+ rows?: number;
+ cols?: number;
+ withHeaderRow?: boolean;
+ }) => ReturnType;
+ addColumnBefore: () => ReturnType;
+ addColumnAfter: () => ReturnType;
+ deleteColumn: () => ReturnType;
+ addRowBefore: () => ReturnType;
+ addRowAfter: () => ReturnType;
+ deleteRow: () => ReturnType;
+ deleteTable: () => ReturnType;
+ mergeCells: () => ReturnType;
+ splitCell: () => ReturnType;
+ toggleHeaderColumn: () => ReturnType;
+ toggleHeaderRow: () => ReturnType;
+ toggleHeaderCell: () => ReturnType;
+ mergeOrSplit: () => ReturnType;
+ setCellAttribute: (name: string, value: any) => ReturnType;
+ goToNextCell: () => ReturnType;
+ goToPreviousCell: () => ReturnType;
+ fixTables: () => ReturnType;
+ setCellSelection: (position: {
+ anchorCell: number;
+ headCell?: number;
+ }) => ReturnType;
+ };
+ }
+
+ interface NodeConfig {
+ tableRole?:
+ | string
+ | ((this: {
+ name: string;
+ options: Options;
+ storage: Storage;
+ parent: ParentConfig>["tableRole"];
+ }) => string);
+ }
+}
+
+export default Node.create({
+ name: "table",
+
+ addOptions() {
+ return {
+ HTMLAttributes: {},
+ resizable: true,
+ handleWidth: 5,
+ cellMinWidth: 100,
+ lastColumnResizable: true,
+ allowTableNodeSelection: true,
+ };
+ },
+
+ content: "tableRow+",
+
+ tableRole: "table",
+
+ isolating: true,
+
+ group: "block",
+
+ allowGapCursor: false,
+
+ parseHTML() {
+ return [{ tag: "table" }];
+ },
+
+ renderHTML({ HTMLAttributes }) {
+ return [
+ "table",
+ mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+ ["tbody", 0],
+ ];
+ },
+
+ addCommands() {
+ return {
+ insertTable:
+ ({ rows = 3, cols = 3, withHeaderRow = true } = {}) =>
+ ({ tr, dispatch, editor }) => {
+ const node = createTable(editor.schema, rows, cols, withHeaderRow);
+
+ if (dispatch) {
+ const offset = tr.selection.anchor + 1;
+
+ tr.replaceSelectionWith(node)
+ .scrollIntoView()
+ .setSelection(TextSelection.near(tr.doc.resolve(offset)));
+ }
+
+ return true;
+ },
+ addColumnBefore:
+ () =>
+ ({ state, dispatch }) =>
+ addColumnBefore(state, dispatch),
+ addColumnAfter:
+ () =>
+ ({ state, dispatch }) =>
+ addColumnAfter(state, dispatch),
+ deleteColumn:
+ () =>
+ ({ state, dispatch }) =>
+ deleteColumn(state, dispatch),
+ addRowBefore:
+ () =>
+ ({ state, dispatch }) =>
+ addRowBefore(state, dispatch),
+ addRowAfter:
+ () =>
+ ({ state, dispatch }) =>
+ addRowAfter(state, dispatch),
+ deleteRow:
+ () =>
+ ({ state, dispatch }) =>
+ deleteRow(state, dispatch),
+ deleteTable:
+ () =>
+ ({ state, dispatch }) =>
+ deleteTable(state, dispatch),
+ mergeCells:
+ () =>
+ ({ state, dispatch }) =>
+ mergeCells(state, dispatch),
+ splitCell:
+ () =>
+ ({ state, dispatch }) =>
+ splitCell(state, dispatch),
+ toggleHeaderColumn:
+ () =>
+ ({ state, dispatch }) =>
+ toggleHeader("column")(state, dispatch),
+ toggleHeaderRow:
+ () =>
+ ({ state, dispatch }) =>
+ toggleHeader("row")(state, dispatch),
+ toggleHeaderCell:
+ () =>
+ ({ state, dispatch }) =>
+ toggleHeaderCell(state, dispatch),
+ mergeOrSplit:
+ () =>
+ ({ state, dispatch }) => {
+ if (mergeCells(state, dispatch)) {
+ return true;
+ }
+
+ return splitCell(state, dispatch);
+ },
+ setCellAttribute:
+ (name, value) =>
+ ({ state, dispatch }) =>
+ setCellAttr(name, value)(state, dispatch),
+ goToNextCell:
+ () =>
+ ({ state, dispatch }) =>
+ goToNextCell(1)(state, dispatch),
+ goToPreviousCell:
+ () =>
+ ({ state, dispatch }) =>
+ goToNextCell(-1)(state, dispatch),
+ fixTables:
+ () =>
+ ({ state, dispatch }) => {
+ if (dispatch) {
+ fixTables(state);
+ }
+
+ return true;
+ },
+ setCellSelection:
+ (position) =>
+ ({ tr, dispatch }) => {
+ if (dispatch) {
+ const selection = CellSelection.create(
+ tr.doc,
+ position.anchorCell,
+ position.headCell,
+ );
+
+ // @ts-ignore
+ tr.setSelection(selection);
+ }
+
+ return true;
+ },
+ };
+ },
+
+ addKeyboardShortcuts() {
+ return {
+ Tab: () => {
+ if (this.editor.commands.goToNextCell()) {
+ return true;
+ }
+
+ if (!this.editor.can().addRowAfter()) {
+ return false;
+ }
+
+ return this.editor.chain().addRowAfter().goToNextCell().run();
+ },
+ "Shift-Tab": () => this.editor.commands.goToPreviousCell(),
+ Backspace: deleteTableWhenAllCellsSelected,
+ "Mod-Backspace": deleteTableWhenAllCellsSelected,
+ Delete: deleteTableWhenAllCellsSelected,
+ "Mod-Delete": deleteTableWhenAllCellsSelected,
+ };
+ },
+
+ addNodeView() {
+ return ({ editor, getPos, node, decorations }) => {
+ const { cellMinWidth } = this.options;
+
+ return new TableView(
+ node,
+ cellMinWidth,
+ decorations,
+ editor,
+ getPos as () => number,
+ );
+ };
+ },
+
+ addProseMirrorPlugins() {
+ const isResizable = this.options.resizable && this.editor.isEditable;
+
+ const plugins = [
+ tableEditing({
+ allowTableNodeSelection: this.options.allowTableNodeSelection,
+ }),
+ tableControls(),
+ ];
+
+ if (isResizable) {
+ plugins.unshift(
+ columnResizing({
+ handleWidth: this.options.handleWidth,
+ cellMinWidth: this.options.cellMinWidth,
+ // View: TableView,
+
+ // @ts-ignore
+ lastColumnResizable: this.options.lastColumnResizable,
+ }),
+ );
+ }
+
+ return plugins;
+ },
+
+ extendNodeSchema(extension) {
+ const context = {
+ name: extension.name,
+ options: extension.options,
+ storage: extension.storage,
+ };
+
+ return {
+ tableRole: callOrReturn(
+ getExtensionField(extension, "tableRole", context),
+ ),
+ };
+ },
+});
diff --git a/packages/editor/core/src/ui/extensions/table/table/utilities/create-cell.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/create-cell.ts
new file mode 100644
index 000000000..7811341e0
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/create-cell.ts
@@ -0,0 +1,12 @@
+import { Fragment, Node as ProsemirrorNode, NodeType } from "prosemirror-model";
+
+export function createCell(
+ cellType: NodeType,
+ cellContent?: Fragment | ProsemirrorNode | Array,
+): ProsemirrorNode | null | undefined {
+ if (cellContent) {
+ return cellType.createChecked(null, cellContent);
+ }
+
+ return cellType.createAndFill();
+}
diff --git a/packages/editor/core/src/ui/extensions/table/table/utilities/create-table.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/create-table.ts
new file mode 100644
index 000000000..5805ecf86
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/create-table.ts
@@ -0,0 +1,45 @@
+import { Fragment, Node as ProsemirrorNode, Schema } from "@tiptap/pm/model";
+
+import { createCell } from "./create-cell";
+import { getTableNodeTypes } from "./get-table-node-types";
+
+export function createTable(
+ schema: Schema,
+ rowsCount: number,
+ colsCount: number,
+ withHeaderRow: boolean,
+ cellContent?: Fragment | ProsemirrorNode | Array,
+): ProsemirrorNode {
+ const types = getTableNodeTypes(schema);
+ const headerCells: ProsemirrorNode[] = [];
+ const cells: ProsemirrorNode[] = [];
+
+ for (let index = 0; index < colsCount; index += 1) {
+ const cell = createCell(types.cell, cellContent);
+
+ if (cell) {
+ cells.push(cell);
+ }
+
+ if (withHeaderRow) {
+ const headerCell = createCell(types.header_cell, cellContent);
+
+ if (headerCell) {
+ headerCells.push(headerCell);
+ }
+ }
+ }
+
+ const rows: ProsemirrorNode[] = [];
+
+ for (let index = 0; index < rowsCount; index += 1) {
+ rows.push(
+ types.row.createChecked(
+ null,
+ withHeaderRow && index === 0 ? headerCells : cells,
+ ),
+ );
+ }
+
+ return types.table.createChecked(null, rows);
+}
diff --git a/packages/editor/core/src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected.ts
new file mode 100644
index 000000000..7fed53705
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected.ts
@@ -0,0 +1,42 @@
+import {
+ findParentNodeClosestToPos,
+ KeyboardShortcutCommand,
+} from "@tiptap/core";
+
+import { isCellSelection } from "./is-cell-selection";
+
+export const deleteTableWhenAllCellsSelected: KeyboardShortcutCommand = ({
+ editor,
+}) => {
+ const { selection } = editor.state;
+
+ if (!isCellSelection(selection)) {
+ return false;
+ }
+
+ let cellCount = 0;
+ const table = findParentNodeClosestToPos(
+ selection.ranges[0].$from,
+ (node) => node.type.name === "table",
+ );
+
+ table?.node.descendants((node) => {
+ if (node.type.name === "table") {
+ return false;
+ }
+
+ if (["tableCell", "tableHeader"].includes(node.type.name)) {
+ cellCount += 1;
+ }
+ });
+
+ const allCellsSelected = cellCount === selection.ranges.length;
+
+ if (!allCellsSelected) {
+ return false;
+ }
+
+ editor.commands.deleteTable();
+
+ return true;
+};
diff --git a/packages/editor/core/src/ui/extensions/table/table/utilities/get-table-node-types.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/get-table-node-types.ts
new file mode 100644
index 000000000..28c322a1f
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/get-table-node-types.ts
@@ -0,0 +1,21 @@
+import { NodeType, Schema } from "prosemirror-model";
+
+export function getTableNodeTypes(schema: Schema): { [key: string]: NodeType } {
+ if (schema.cached.tableNodeTypes) {
+ return schema.cached.tableNodeTypes;
+ }
+
+ const roles: { [key: string]: NodeType } = {};
+
+ Object.keys(schema.nodes).forEach((type) => {
+ const nodeType = schema.nodes[type];
+
+ if (nodeType.spec.tableRole) {
+ roles[nodeType.spec.tableRole] = nodeType;
+ }
+ });
+
+ schema.cached.tableNodeTypes = roles;
+
+ return roles;
+}
diff --git a/packages/editor/core/src/ui/extensions/table/table/utilities/is-cell-selection.ts b/packages/editor/core/src/ui/extensions/table/table/utilities/is-cell-selection.ts
new file mode 100644
index 000000000..28917a299
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/is-cell-selection.ts
@@ -0,0 +1,5 @@
+import { CellSelection } from "@tiptap/prosemirror-tables";
+
+export function isCellSelection(value: unknown): value is CellSelection {
+ return value instanceof CellSelection;
+}
diff --git a/packages/editor/core/src/ui/hooks/useEditor.tsx b/packages/editor/core/src/ui/hooks/useEditor.tsx
index 837700915..258da8652 100644
--- a/packages/editor/core/src/ui/hooks/useEditor.tsx
+++ b/packages/editor/core/src/ui/hooks/useEditor.tsx
@@ -1,18 +1,24 @@
import { useEditor as useCustomEditor, Editor } from "@tiptap/react";
-import { useImperativeHandle, useRef, MutableRefObject } from "react";
-import { useDebouncedCallback } from "use-debounce";
-import { DeleteImage } from '../../types/delete-image';
+import {
+ useImperativeHandle,
+ useRef,
+ MutableRefObject,
+ useEffect,
+} from "react";
+import { DeleteImage } from "../../types/delete-image";
import { CoreEditorProps } from "../props";
import { CoreEditorExtensions } from "../extensions";
-import { EditorProps } from '@tiptap/pm/view';
+import { EditorProps } from "@tiptap/pm/view";
import { getTrimmedHTML } from "../../lib/utils";
import { UploadImage } from "../../types/upload-image";
-
-const DEBOUNCE_DELAY = 1500;
+import { useInitializedContent } from "./useInitializedContent";
+import { IMentionSuggestion } from "../../types/mention-suggestion";
interface CustomEditorProps {
uploadFile: UploadImage;
- setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
+ setIsSubmitting?: (
+ isSubmitting: "submitting" | "submitted" | "saved",
+ ) => void;
setShouldShowAlert?: (showAlert: boolean) => void;
value: string;
deleteFile: DeleteImage;
@@ -21,27 +27,55 @@ interface CustomEditorProps {
extensions?: any;
editorProps?: EditorProps;
forwardedRef?: any;
+ mentionHighlights?: string[];
+ mentionSuggestions?: IMentionSuggestion[];
+ cancelUploadImage?: () => any;
}
-export const useEditor = ({ uploadFile, deleteFile, editorProps = {}, value, extensions = [], onChange, setIsSubmitting, debouncedUpdatesEnabled, forwardedRef, setShouldShowAlert, }: CustomEditorProps) => {
- const editor = useCustomEditor({
- editorProps: {
- ...CoreEditorProps(uploadFile, setIsSubmitting),
- ...editorProps,
- },
- extensions: [...CoreEditorExtensions(deleteFile), ...extensions],
- content: (typeof value === "string" && value.trim() !== "") ? value : "",
- onUpdate: async ({ editor }) => {
- // for instant feedback loop
- setIsSubmitting?.("submitting");
- setShouldShowAlert?.(true);
- if (debouncedUpdatesEnabled) {
- debouncedUpdates({ onChange: onChange, editor });
- } else {
+export const useEditor = ({
+ uploadFile,
+ deleteFile,
+ cancelUploadImage,
+ editorProps = {},
+ value,
+ extensions = [],
+ onChange,
+ setIsSubmitting,
+ forwardedRef,
+ setShouldShowAlert,
+ mentionHighlights,
+ mentionSuggestions,
+}: CustomEditorProps) => {
+ const editor = useCustomEditor(
+ {
+ editorProps: {
+ ...CoreEditorProps(uploadFile, setIsSubmitting),
+ ...editorProps,
+ },
+ extensions: [
+ ...CoreEditorExtensions(
+ {
+ mentionSuggestions: mentionSuggestions ?? [],
+ mentionHighlights: mentionHighlights ?? [],
+ },
+ deleteFile,
+ cancelUploadImage,
+ ),
+ ...extensions,
+ ],
+ content:
+ typeof value === "string" && value.trim() !== "" ? value : "",
+ onUpdate: async ({ editor }) => {
+ // for instant feedback loop
+ setIsSubmitting?.("submitting");
+ setShouldShowAlert?.(true);
onChange?.(editor.getJSON(), getTrimmedHTML(editor.getHTML()));
- }
+ },
},
- });
+ [],
+ );
+
+ useInitializedContent(editor, value);
const editorRef: MutableRefObject = useRef(null);
editorRef.current = editor;
@@ -55,12 +89,6 @@ export const useEditor = ({ uploadFile, deleteFile, editorProps = {}, value, ext
},
}));
- const debouncedUpdates = useDebouncedCallback(async ({ onChange, editor }) => {
- if (onChange) {
- onChange(editor.getJSON(), getTrimmedHTML(editor.getHTML()));
- }
- }, DEBOUNCE_DELAY);
-
if (!editor) {
return null;
}
diff --git a/packages/editor/core/src/ui/hooks/useInitializedContent.tsx b/packages/editor/core/src/ui/hooks/useInitializedContent.tsx
new file mode 100644
index 000000000..8e2ce1717
--- /dev/null
+++ b/packages/editor/core/src/ui/hooks/useInitializedContent.tsx
@@ -0,0 +1,19 @@
+import { Editor } from "@tiptap/react";
+import { useEffect, useRef } from "react";
+
+export const useInitializedContent = (editor: Editor | null, value: string) => {
+ const hasInitializedContent = useRef(false);
+
+ useEffect(() => {
+ if (editor) {
+ const cleanedValue =
+ typeof value === "string" && value.trim() !== "" ? value : "";
+ if (cleanedValue !== "" && !hasInitializedContent.current) {
+ editor.commands.setContent(cleanedValue);
+ hasInitializedContent.current = true;
+ } else if (cleanedValue === "" && hasInitializedContent.current) {
+ hasInitializedContent.current = false;
+ }
+ }
+ }, [value, editor]);
+};
diff --git a/packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx b/packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx
index 3e32c5044..75ebddd3c 100644
--- a/packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx
+++ b/packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx
@@ -1,27 +1,57 @@
import { useEditor as useCustomEditor, Editor } from "@tiptap/react";
-import { useImperativeHandle, useRef, MutableRefObject } from "react";
+import {
+ useImperativeHandle,
+ useRef,
+ MutableRefObject,
+ useEffect,
+} from "react";
import { CoreReadOnlyEditorExtensions } from "../../ui/read-only/extensions";
import { CoreReadOnlyEditorProps } from "../../ui/read-only/props";
-import { EditorProps } from '@tiptap/pm/view';
+import { EditorProps } from "@tiptap/pm/view";
+import { IMentionSuggestion } from "../../types/mention-suggestion";
interface CustomReadOnlyEditorProps {
value: string;
forwardedRef?: any;
extensions?: any;
editorProps?: EditorProps;
+ mentionHighlights?: string[];
+ mentionSuggestions?: IMentionSuggestion[];
}
-export const useReadOnlyEditor = ({ value, forwardedRef, extensions = [], editorProps = {} }: CustomReadOnlyEditorProps) => {
+export const useReadOnlyEditor = ({
+ value,
+ forwardedRef,
+ extensions = [],
+ editorProps = {},
+ mentionHighlights,
+ mentionSuggestions,
+}: CustomReadOnlyEditorProps) => {
const editor = useCustomEditor({
editable: false,
- content: (typeof value === "string" && value.trim() !== "") ? value : "",
+ content:
+ typeof value === "string" && value.trim() !== "" ? value : "",
editorProps: {
...CoreReadOnlyEditorProps,
...editorProps,
},
- extensions: [...CoreReadOnlyEditorExtensions, ...extensions],
+ extensions: [
+ ...CoreReadOnlyEditorExtensions({
+ mentionSuggestions: mentionSuggestions ?? [],
+ mentionHighlights: mentionHighlights ?? [],
+ }),
+ ...extensions,
+ ],
});
+ const hasIntiliazedContent = useRef(false);
+ useEffect(() => {
+ if (editor && !value && !hasIntiliazedContent.current) {
+ editor.commands.setContent(value);
+ hasIntiliazedContent.current = true;
+ }
+ }, [value]);
+
const editorRef: MutableRefObject = useRef(null);
editorRef.current = editor;
@@ -34,7 +64,6 @@ export const useReadOnlyEditor = ({ value, forwardedRef, extensions = [], editor
},
}));
-
if (!editor) {
return null;
}
diff --git a/packages/editor/core/src/ui/index.tsx b/packages/editor/core/src/ui/index.tsx
index 3c64e8ba6..a314a2650 100644
--- a/packages/editor/core/src/ui/index.tsx
+++ b/packages/editor/core/src/ui/index.tsx
@@ -1,13 +1,14 @@
-"use client"
-import * as React from 'react';
+"use client";
+import * as React from "react";
import { Extension } from "@tiptap/react";
-import { UploadImage } from '../types/upload-image';
-import { DeleteImage } from '../types/delete-image';
-import { getEditorClassNames } from '../lib/utils';
-import { EditorProps } from '@tiptap/pm/view';
-import { useEditor } from './hooks/useEditor';
-import { EditorContainer } from '../ui/components/editor-container';
-import { EditorContentWrapper } from '../ui/components/editor-content';
+import { UploadImage } from "../types/upload-image";
+import { DeleteImage } from "../types/delete-image";
+import { getEditorClassNames } from "../lib/utils";
+import { EditorProps } from "@tiptap/pm/view";
+import { useEditor } from "./hooks/useEditor";
+import { EditorContainer } from "../ui/components/editor-container";
+import { EditorContentWrapper } from "../ui/components/editor-content";
+import { IMentionSuggestion } from "../types/mention-suggestion";
interface ICoreEditor {
value: string;
@@ -18,7 +19,9 @@ interface ICoreEditor {
customClassName?: string;
editorContentCustomClassNames?: string;
onChange?: (json: any, html: string) => void;
- setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
+ setIsSubmitting?: (
+ isSubmitting: "submitting" | "submitted" | "saved",
+ ) => void;
setShouldShowAlert?: (showAlert: boolean) => void;
editable?: boolean;
forwardedRef?: any;
@@ -30,6 +33,8 @@ interface ICoreEditor {
key: string;
label: "Private" | "Public";
}[];
+ mentionHighlights?: string[];
+ mentionSuggestions?: IMentionSuggestion[];
extensions?: Extension[];
editorProps?: EditorProps;
}
@@ -61,7 +66,6 @@ const CoreEditor = ({
const editor = useEditor({
onChange,
debouncedUpdatesEnabled,
- editable,
setIsSubmitting,
setShouldShowAlert,
value,
@@ -70,22 +74,29 @@ const CoreEditor = ({
forwardedRef,
});
- const editorClassNames = getEditorClassNames({ noBorder, borderOnFocus, customClassName });
+ const editorClassNames = getEditorClassNames({
+ noBorder,
+ borderOnFocus,
+ customClassName,
+ });
if (!editor) return null;
return (
+
);
};
-const CoreEditorWithRef = React.forwardRef((props, ref) => (
- (
+ (props, ref) => ({
+ addAttributes() {
+ return {
+ id: {
+ default: null,
+ },
+ label: {
+ default: null,
+ },
+ target: {
+ default: null,
+ },
+ self: {
+ default: false,
+ },
+ redirect_uri: {
+ default: "/",
+ },
+ };
+ },
+
+ addNodeView() {
+ return ReactNodeViewRenderer(mentionNodeView);
+ },
+
+ parseHTML() {
+ return [
+ {
+ tag: "mention-component",
+ getAttrs: (node: string | HTMLElement) => {
+ if (typeof node === "string") {
+ return null;
+ }
+ return {
+ id: node.getAttribute("data-mention-id") || "",
+ target: node.getAttribute("data-mention-target") || "",
+ label: node.innerText.slice(1) || "",
+ redirect_uri: node.getAttribute("redirect_uri"),
+ };
+ },
+ },
+ ];
+ },
+ renderHTML({ HTMLAttributes }) {
+ return ["mention-component", mergeAttributes(HTMLAttributes)];
+ },
+});
diff --git a/packages/editor/core/src/ui/mentions/index.tsx b/packages/editor/core/src/ui/mentions/index.tsx
new file mode 100644
index 000000000..42ec92554
--- /dev/null
+++ b/packages/editor/core/src/ui/mentions/index.tsx
@@ -0,0 +1,22 @@
+// @ts-nocheck
+
+import suggestion from "./suggestion";
+import { CustomMention } from "./custom";
+import {
+ IMentionHighlight,
+ IMentionSuggestion,
+} from "../../types/mention-suggestion";
+
+export const Mentions = (
+ mentionSuggestions: IMentionSuggestion[],
+ mentionHighlights: IMentionHighlight[],
+ readonly,
+) =>
+ CustomMention.configure({
+ HTMLAttributes: {
+ class: "mention",
+ },
+ readonly: readonly,
+ mentionHighlights: mentionHighlights,
+ suggestion: suggestion(mentionSuggestions),
+ });
diff --git a/packages/editor/core/src/ui/mentions/mentionNodeView.tsx b/packages/editor/core/src/ui/mentions/mentionNodeView.tsx
new file mode 100644
index 000000000..331c701e2
--- /dev/null
+++ b/packages/editor/core/src/ui/mentions/mentionNodeView.tsx
@@ -0,0 +1,41 @@
+/* eslint-disable react/display-name */
+// @ts-nocheck
+import { NodeViewWrapper } from "@tiptap/react";
+import { cn } from "../../lib/utils";
+import { useRouter } from "next/router";
+import { IMentionHighlight } from "../../types/mention-suggestion";
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default (props) => {
+ const router = useRouter();
+ const highlights = props.extension.options
+ .mentionHighlights as IMentionHighlight[];
+
+ const handleClick = () => {
+ if (!props.extension.options.readonly) {
+ router.push(props.node.attrs.redirect_uri);
+ }
+ };
+
+ return (
+
+
+ @{props.node.attrs.label}
+
+
+ );
+};
diff --git a/packages/editor/core/src/ui/mentions/suggestion.ts b/packages/editor/core/src/ui/mentions/suggestion.ts
new file mode 100644
index 000000000..ce09cb092
--- /dev/null
+++ b/packages/editor/core/src/ui/mentions/suggestion.ts
@@ -0,0 +1,63 @@
+import { ReactRenderer } from "@tiptap/react";
+import { Editor } from "@tiptap/core";
+import tippy from "tippy.js";
+
+import MentionList from "./MentionList";
+import { IMentionSuggestion } from "../../types/mention-suggestion";
+
+const Suggestion = (suggestions: IMentionSuggestion[]) => ({
+ items: ({ query }: { query: string }) =>
+ suggestions
+ .filter((suggestion) =>
+ suggestion.title.toLowerCase().startsWith(query.toLowerCase()),
+ )
+ .slice(0, 5),
+ render: () => {
+ let reactRenderer: ReactRenderer | null = null;
+ let popup: any | null = null;
+
+ return {
+ onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
+ reactRenderer = new ReactRenderer(MentionList, {
+ props,
+ editor: props.editor,
+ });
+ // @ts-ignore
+ popup = tippy("body", {
+ getReferenceClientRect: props.clientRect,
+ appendTo: () => document.querySelector("#editor-container"),
+ content: reactRenderer.element,
+ showOnCreate: true,
+ interactive: true,
+ trigger: "manual",
+ placement: "bottom-start",
+ });
+ },
+
+ onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => {
+ reactRenderer?.updateProps(props);
+
+ popup &&
+ popup[0].setProps({
+ getReferenceClientRect: props.clientRect,
+ });
+ },
+ onKeyDown: (props: { event: KeyboardEvent }) => {
+ if (props.event.key === "Escape") {
+ popup?.[0].hide();
+
+ return true;
+ }
+
+ // @ts-ignore
+ return reactRenderer?.ref?.onKeyDown(props);
+ },
+ onExit: () => {
+ popup?.[0].destroy();
+ reactRenderer?.destroy();
+ },
+ };
+ },
+});
+
+export default Suggestion;
diff --git a/packages/editor/core/src/ui/menus/menu-items/index.tsx b/packages/editor/core/src/ui/menus/menu-items/index.tsx
index f31b6601e..8a2651d1e 100644
--- a/packages/editor/core/src/ui/menus/menu-items/index.tsx
+++ b/packages/editor/core/src/ui/menus/menu-items/index.tsx
@@ -1,7 +1,37 @@
-import { BoldIcon, Heading1, CheckSquare, Heading2, Heading3, QuoteIcon, ImageIcon, TableIcon, ListIcon, ListOrderedIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon } from "lucide-react";
+import {
+ BoldIcon,
+ Heading1,
+ CheckSquare,
+ Heading2,
+ Heading3,
+ QuoteIcon,
+ ImageIcon,
+ TableIcon,
+ ListIcon,
+ ListOrderedIcon,
+ ItalicIcon,
+ UnderlineIcon,
+ StrikethroughIcon,
+ CodeIcon,
+} from "lucide-react";
import { Editor } from "@tiptap/react";
import { UploadImage } from "../../../types/upload-image";
-import { insertImageCommand, insertTableCommand, toggleBlockquote, toggleBold, toggleBulletList, toggleCode, toggleHeadingOne, toggleHeadingThree, toggleHeadingTwo, toggleItalic, toggleOrderedList, toggleStrike, toggleTaskList, toggleUnderline, } from "../../../lib/editor-commands";
+import {
+ insertImageCommand,
+ insertTableCommand,
+ toggleBlockquote,
+ toggleBold,
+ toggleBulletList,
+ toggleCode,
+ toggleHeadingOne,
+ toggleHeadingThree,
+ toggleHeadingTwo,
+ toggleItalic,
+ toggleOrderedList,
+ toggleStrike,
+ toggleTaskList,
+ toggleUnderline,
+} from "../../../lib/editor-commands";
export interface EditorMenuItem {
name: string;
@@ -15,95 +45,101 @@ export const HeadingOneItem = (editor: Editor): EditorMenuItem => ({
isActive: () => editor.isActive("heading", { level: 1 }),
command: () => toggleHeadingOne(editor),
icon: Heading1,
-})
+});
export const HeadingTwoItem = (editor: Editor): EditorMenuItem => ({
name: "H2",
isActive: () => editor.isActive("heading", { level: 2 }),
command: () => toggleHeadingTwo(editor),
icon: Heading2,
-})
+});
export const HeadingThreeItem = (editor: Editor): EditorMenuItem => ({
name: "H3",
isActive: () => editor.isActive("heading", { level: 3 }),
command: () => toggleHeadingThree(editor),
icon: Heading3,
-})
+});
export const BoldItem = (editor: Editor): EditorMenuItem => ({
name: "bold",
isActive: () => editor?.isActive("bold"),
command: () => toggleBold(editor),
icon: BoldIcon,
-})
+});
export const ItalicItem = (editor: Editor): EditorMenuItem => ({
name: "italic",
isActive: () => editor?.isActive("italic"),
command: () => toggleItalic(editor),
icon: ItalicIcon,
-})
+});
export const UnderLineItem = (editor: Editor): EditorMenuItem => ({
name: "underline",
isActive: () => editor?.isActive("underline"),
command: () => toggleUnderline(editor),
icon: UnderlineIcon,
-})
+});
export const StrikeThroughItem = (editor: Editor): EditorMenuItem => ({
name: "strike",
isActive: () => editor?.isActive("strike"),
command: () => toggleStrike(editor),
icon: StrikethroughIcon,
-})
+});
export const CodeItem = (editor: Editor): EditorMenuItem => ({
name: "code",
isActive: () => editor?.isActive("code"),
command: () => toggleCode(editor),
icon: CodeIcon,
-})
+});
export const BulletListItem = (editor: Editor): EditorMenuItem => ({
name: "bullet-list",
isActive: () => editor?.isActive("bulletList"),
command: () => toggleBulletList(editor),
icon: ListIcon,
-})
+});
export const TodoListItem = (editor: Editor): EditorMenuItem => ({
name: "To-do List",
isActive: () => editor.isActive("taskItem"),
command: () => toggleTaskList(editor),
icon: CheckSquare,
-})
+});
export const NumberedListItem = (editor: Editor): EditorMenuItem => ({
name: "ordered-list",
isActive: () => editor?.isActive("orderedList"),
command: () => toggleOrderedList(editor),
- icon: ListOrderedIcon
-})
+ icon: ListOrderedIcon,
+});
export const QuoteItem = (editor: Editor): EditorMenuItem => ({
name: "quote",
isActive: () => editor?.isActive("quote"),
command: () => toggleBlockquote(editor),
- icon: QuoteIcon
-})
+ icon: QuoteIcon,
+});
export const TableItem = (editor: Editor): EditorMenuItem => ({
- name: "quote",
+ name: "table",
isActive: () => editor?.isActive("table"),
command: () => insertTableCommand(editor),
- icon: TableIcon
-})
+ icon: TableIcon,
+});
-export const ImageItem = (editor: Editor, uploadFile: UploadImage, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void): EditorMenuItem => ({
+export const ImageItem = (
+ editor: Editor,
+ uploadFile: UploadImage,
+ setIsSubmitting?: (
+ isSubmitting: "submitting" | "submitted" | "saved",
+ ) => void,
+): EditorMenuItem => ({
name: "image",
isActive: () => editor?.isActive("image"),
command: () => insertImageCommand(editor, uploadFile, setIsSubmitting),
icon: ImageIcon,
-})
+});
diff --git a/packages/editor/core/src/ui/menus/table-menu/InsertBottomTableIcon.tsx b/packages/editor/core/src/ui/menus/table-menu/InsertBottomTableIcon.tsx
deleted file mode 100644
index 0e42ba648..000000000
--- a/packages/editor/core/src/ui/menus/table-menu/InsertBottomTableIcon.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-const InsertBottomTableIcon = (props: any) => (
-
-);
-
-export default InsertBottomTableIcon;
diff --git a/packages/editor/core/src/ui/menus/table-menu/InsertLeftTableIcon.tsx b/packages/editor/core/src/ui/menus/table-menu/InsertLeftTableIcon.tsx
deleted file mode 100644
index 1fd75fe87..000000000
--- a/packages/editor/core/src/ui/menus/table-menu/InsertLeftTableIcon.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-const InsertLeftTableIcon = (props: any) => (
-
-);
-export default InsertLeftTableIcon;
diff --git a/packages/editor/core/src/ui/menus/table-menu/InsertRightTableIcon.tsx b/packages/editor/core/src/ui/menus/table-menu/InsertRightTableIcon.tsx
deleted file mode 100644
index 1a6570969..000000000
--- a/packages/editor/core/src/ui/menus/table-menu/InsertRightTableIcon.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-const InsertRightTableIcon = (props: any) => (
-
-);
-
-export default InsertRightTableIcon;
diff --git a/packages/editor/core/src/ui/menus/table-menu/InsertTopTableIcon.tsx b/packages/editor/core/src/ui/menus/table-menu/InsertTopTableIcon.tsx
deleted file mode 100644
index 8f04f4f61..000000000
--- a/packages/editor/core/src/ui/menus/table-menu/InsertTopTableIcon.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-const InsertTopTableIcon = (props: any) => (
-
-);
-export default InsertTopTableIcon;
diff --git a/packages/editor/core/src/ui/menus/table-menu/index.tsx b/packages/editor/core/src/ui/menus/table-menu/index.tsx
deleted file mode 100644
index c115196db..000000000
--- a/packages/editor/core/src/ui/menus/table-menu/index.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { useState, useEffect } from "react";
-import { Rows, Columns, ToggleRight } from "lucide-react";
-import InsertLeftTableIcon from "./InsertLeftTableIcon";
-import InsertRightTableIcon from "./InsertRightTableIcon";
-import InsertTopTableIcon from "./InsertTopTableIcon";
-import InsertBottomTableIcon from "./InsertBottomTableIcon";
-import { cn, findTableAncestor } from "../../../lib/utils";
-import { Tooltip } from "./tooltip";
-
-interface TableMenuItem {
- command: () => void;
- icon: any;
- key: string;
- name: string;
-}
-
-
-
-export const TableMenu = ({ editor }: { editor: any }) => {
- const [tableLocation, setTableLocation] = useState({ bottom: 0, left: 0 });
- const isOpen = editor?.isActive("table");
-
- const items: TableMenuItem[] = [
- {
- command: () => editor.chain().focus().addColumnBefore().run(),
- icon: InsertLeftTableIcon,
- key: "insert-column-left",
- name: "Insert 1 column left",
- },
- {
- command: () => editor.chain().focus().addColumnAfter().run(),
- icon: InsertRightTableIcon,
- key: "insert-column-right",
- name: "Insert 1 column right",
- },
- {
- command: () => editor.chain().focus().addRowBefore().run(),
- icon: InsertTopTableIcon,
- key: "insert-row-above",
- name: "Insert 1 row above",
- },
- {
- command: () => editor.chain().focus().addRowAfter().run(),
- icon: InsertBottomTableIcon,
- key: "insert-row-below",
- name: "Insert 1 row below",
- },
- {
- command: () => editor.chain().focus().deleteColumn().run(),
- icon: Columns,
- key: "delete-column",
- name: "Delete column",
- },
- {
- command: () => editor.chain().focus().deleteRow().run(),
- icon: Rows,
- key: "delete-row",
- name: "Delete row",
- },
- {
- command: () => editor.chain().focus().toggleHeaderRow().run(),
- icon: ToggleRight,
- key: "toggle-header-row",
- name: "Toggle header row",
- },
- ];
-
- useEffect(() => {
- if (!window) return;
-
- const handleWindowClick = () => {
- const selection: any = window?.getSelection();
-
- if (selection.rangeCount !== 0) {
- const range = selection.getRangeAt(0);
- const tableNode = findTableAncestor(range.startContainer);
-
- if (tableNode) {
- const tableRect = tableNode.getBoundingClientRect();
- const tableCenter = tableRect.left + tableRect.width / 2;
- const menuWidth = 45;
- const menuLeft = tableCenter - menuWidth / 2;
- const tableBottom = tableRect.bottom;
-
- setTableLocation({ bottom: tableBottom, left: menuLeft });
- }
- }
- };
-
- window.addEventListener("click", handleWindowClick);
-
- return () => {
- window.removeEventListener("click", handleWindowClick);
- };
- }, [tableLocation, editor]);
-
- return (
-
- {items.map((item, index) => (
-
-
-
- ))}
-
- );
-};
diff --git a/packages/editor/core/src/ui/menus/table-menu/tooltip.tsx b/packages/editor/core/src/ui/menus/table-menu/tooltip.tsx
deleted file mode 100644
index f29d8a491..000000000
--- a/packages/editor/core/src/ui/menus/table-menu/tooltip.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import * as React from 'react';
-
-// next-themes
-import { useTheme } from "next-themes";
-// tooltip2
-import { Tooltip2 } from "@blueprintjs/popover2";
-
-type Props = {
- tooltipHeading?: string;
- tooltipContent: string | React.ReactNode;
- position?:
- | "top"
- | "right"
- | "bottom"
- | "left"
- | "auto"
- | "auto-end"
- | "auto-start"
- | "bottom-left"
- | "bottom-right"
- | "left-bottom"
- | "left-top"
- | "right-bottom"
- | "right-top"
- | "top-left"
- | "top-right";
- children: JSX.Element;
- disabled?: boolean;
- className?: string;
- openDelay?: number;
- closeDelay?: number;
-};
-
-export const Tooltip: React.FC = ({
- tooltipHeading,
- tooltipContent,
- position = "top",
- children,
- disabled = false,
- className = "",
- openDelay = 200,
- closeDelay,
-}) => {
- const { theme } = useTheme();
-
- return (
-
- {tooltipHeading && (
-
- }
- position={position}
- renderTarget={({ isOpen: isTooltipOpen, ref: eleReference, ...tooltipProps }) =>
- React.cloneElement(children, { ref: eleReference, ...tooltipProps, ...children.props })
- }
- />
- );
-};
diff --git a/packages/editor/core/src/ui/plugins/delete-image.tsx b/packages/editor/core/src/ui/plugins/delete-image.tsx
index ba21d686d..48ec244fc 100644
--- a/packages/editor/core/src/ui/plugins/delete-image.tsx
+++ b/packages/editor/core/src/ui/plugins/delete-image.tsx
@@ -15,8 +15,12 @@ interface ImageNode extends ProseMirrorNode {
const TrackImageDeletionPlugin = (deleteImage: DeleteImage): Plugin =>
new Plugin({
key: deleteKey,
- appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => {
- const newImageSources = new Set();
+ appendTransaction: (
+ transactions: readonly Transaction[],
+ oldState: EditorState,
+ newState: EditorState,
+ ) => {
+ const newImageSources = new Set
-
-
+ {props.items.length ? (
+ props.items.map((item, index) => (
+
+ ) : (
+ <>
+ );
+});
+
+MentionList.displayName = "MentionList";
+
+export default MentionList;
diff --git a/packages/editor/core/src/ui/mentions/custom.tsx b/packages/editor/core/src/ui/mentions/custom.tsx
new file mode 100644
index 000000000..dc4ab5aad
--- /dev/null
+++ b/packages/editor/core/src/ui/mentions/custom.tsx
@@ -0,0 +1,57 @@
+import { Mention, MentionOptions } from "@tiptap/extension-mention";
+import { mergeAttributes } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import mentionNodeView from "./mentionNodeView";
+import { IMentionHighlight } from "../../types/mention-suggestion";
+export interface CustomMentionOptions extends MentionOptions {
+ mentionHighlights: IMentionHighlight[];
+ readonly?: boolean;
+}
+
+export const CustomMention = Mention.extend selectItem(index)}
+ >
+
+ ))
+ ) : (
+
+ {item.avatar && item.avatar.trim() !== "" ? (
+ 
+ ) : (
+
+
+ {item.title[0]}
+
+ )}
+
+
+ {item.title}
+ {/*{item.subtitle}
*/} +No result
+ )}
+ - {tooltipHeading} -
- )} - {tooltipContent} -
+
{props.commentAccessSpecifier && (
- ` | A function that handles file upload. It takes a file as input and handles the process of uploading that file. |
-| `deleteFile` | `(assetUrlWithWorkspaceId: string) => Promise` | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image. |
-| `value` | `html string` | The initial content of the editor. |
-| `debouncedUpdatesEnabled` | `boolean` | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. |
-| `onChange` | `(json: any, html: string) => void` | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats. |
-| `setIsSubmitting` | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status. |
-| `setShouldShowAlert` | `(showAlert: boolean) => void` | This function is used to show or hide an alert incase of content not being "saved". |
-| `noBorder` | `boolean` | If set to true, the editor will not have a border. |
-| `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. |
-| `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. |
-| `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. |
+| Prop | Type | Description |
+| ------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `uploadFile` | `(file: File) => Promise` | A function that handles file upload. It takes a file as input and handles the process of uploading that file. |
+| `deleteFile` | `(assetUrlWithWorkspaceId: string) => Promise` | A function that handles deleting an image. It takes the asset url from your bucket and handles the process of deleting that image. |
+| `value` | `html string` | The initial content of the editor. |
+| `debouncedUpdatesEnabled` | `boolean` | If set to true, the `onChange` event handler is debounced, meaning it will only be invoked after the specified delay (default 1500ms) once the user has stopped typing. |
+| `onChange` | `(json: any, html: string) => void` | This function is invoked whenever the content of the editor changes. It is passed the new content in both JSON and HTML formats. |
+| `setIsSubmitting` | `(isSubmitting: "submitting" \| "submitted" \| "saved") => void` | This function is called to update the submission status. |
+| `setShouldShowAlert` | `(showAlert: boolean) => void` | This function is used to show or hide an alert incase of content not being "saved". |
+| `noBorder` | `boolean` | If set to true, the editor will not have a border. |
+| `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. |
+| `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. |
+| `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. |
### Usage
@@ -57,43 +57,47 @@ The `@plane/rich-text-editor` package extends from the `editor-core` package, in
2. Example of how to use the `RichTextEditorWithRef` component
```tsx
- const editorRef = useRef(null);
+const editorRef = useRef(null);
- // can use it to set the editor's value
- editorRef.current?.setEditorValue(`${watch("description_html")}`);
+// can use it to set the editor's value
+editorRef.current?.setEditorValue(`${watch("description_html")}`);
- // can use it to clear the editor
- editorRef?.current?.clearEditor();
+// can use it to clear the editor
+editorRef?.current?.clearEditor();
- return ( {
- onChange(description_html);
- // custom stuff you want to do
- } } />)
+return (
+ {
+ onChange(description_html);
+ // custom stuff you want to do
+ }}
+ />
+);
```
## RichReadOnlyEditor
-| Prop | Type | Description |
-| --- | --- | --- |
-| `value` | `html string` | The initial content of the editor. |
-| `noBorder` | `boolean` | If set to true, the editor will not have a border. |
-| `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. |
-| `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. |
-| `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. |
+| Prop | Type | Description |
+| ------------------------------- | ------------- | --------------------------------------------------------------------- |
+| `value` | `html string` | The initial content of the editor. |
+| `noBorder` | `boolean` | If set to true, the editor will not have a border. |
+| `borderOnFocus` | `boolean` | If set to true, the editor will show a border when it is focused. |
+| `customClassName` | `string` | This is a custom CSS class that can be applied to the editor. |
+| `editorContentCustomClassNames` | `string` | This is a custom CSS class that can be applied to the editor content. |
### Usage
Here is an example of how to use the `RichReadOnlyEditor` component
```tsx
-
,
- command: ({ editor, range }: CommandProps) => {
- insertTableCommand(editor, range);
- },
+ },
+ {
+ title: "Table",
+ description: "Create a Table",
+ searchTerms: ["table", "cell", "db", "data", "tabular"],
+ icon:
,
+ command: ({ editor, range }: CommandProps) => {
+ insertTableCommand(editor, range);
},
- {
- title: "Numbered List",
- description: "Create a list with numbering.",
- searchTerms: ["ordered"],
- icon:
+
+
);
};
-const LiteReadOnlyEditorWithRef = React.forwardRef((props, ref) => (
- = ({
}
position={position}
- renderTarget={({ isOpen: isTooltipOpen, ref: eleReference, ...tooltipProps }) =>
- React.cloneElement(children, { ref: eleReference, ...tooltipProps, ...children.props })
+ renderTarget={({
+ isOpen: isTooltipOpen,
+ ref: eleReference,
+ ...tooltipProps
+ }) =>
+ React.cloneElement(children, {
+ ref: eleReference,
+ ...tooltipProps,
+ ...children.props,
+ })
}
/>
);
diff --git a/packages/editor/rich-text-editor/Readme.md b/packages/editor/rich-text-editor/Readme.md
index c8414f62d..44ed9ba5e 100644
--- a/packages/editor/rich-text-editor/Readme.md
+++ b/packages/editor/rich-text-editor/Readme.md
@@ -10,24 +10,24 @@ The `@plane/rich-text-editor` package extends from the `editor-core` package, in
`RichTextEditor` & `RichTextEditorWithRef`
-- **Read Only Editor Instances**: We have added a really light weight *Read Only* Editor instance for the Rich editor types (with and without Ref)
+- **Read Only Editor Instances**: We have added a really light weight _Read Only_ Editor instance for the Rich editor types (with and without Ref)
`RichReadOnlyEditor` &`RichReadOnlyEditorWithRef`
## RichTextEditor
-| Prop | Type | Description |
-| --- | --- | --- |
-| `uploadFile` | `(file: File) => Promise
{props?.commentAccessSpecifier.commentAccess?.map((access) => (
))}
)}
-
- {basicMarkItems.map((item, index) => (
-
- ))}
-
-
- {listItems.map((item, index) => (
-
- ))}
-
-
- {userActionItems.map((item, index) => (
-
- ))}
-
-
- {complexItems.map((item, index) => (
-
- ))}
+
);
diff --git a/packages/editor/lite-text-editor/src/ui/read-only/index.tsx b/packages/editor/lite-text-editor/src/ui/read-only/index.tsx
index 3990cb734..a3de061ae 100644
--- a/packages/editor/lite-text-editor/src/ui/read-only/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/read-only/index.tsx
@@ -1,6 +1,10 @@
-"use client"
-import { EditorContainer, EditorContentWrapper, getEditorClassNames, useReadOnlyEditor } from '@plane/editor-core';
-import * as React from 'react';
+import * as React from "react";
+import {
+ EditorContainer,
+ EditorContentWrapper,
+ getEditorClassNames,
+ useReadOnlyEditor,
+} from "@plane/editor-core";
interface ICoreReadOnlyEditor {
value: string;
@@ -8,6 +12,7 @@ interface ICoreReadOnlyEditor {
noBorder?: boolean;
borderOnFocus?: boolean;
customClassName?: string;
+ mentionHighlights: string[];
}
interface EditorCoreProps extends ICoreReadOnlyEditor {
@@ -26,29 +31,39 @@ const LiteReadOnlyEditor = ({
customClassName,
value,
forwardedRef,
+ mentionHighlights,
}: EditorCoreProps) => {
const editor = useReadOnlyEditor({
value,
forwardedRef,
+ mentionHighlights,
});
- const editorClassNames = getEditorClassNames({ noBorder, borderOnFocus, customClassName });
+ const editorClassNames = getEditorClassNames({
+ noBorder,
+ borderOnFocus,
+ customClassName,
+ });
if (!editor) return null;
return (
+
+
+
+ {basicMarkItems.map((item, index) => (
+ {item.name}}
+ >
+
+
+ ))}
+
+
+ {listItems.map((item, index) => (
+ {item.name}}
+ >
+
+
+ ))}
+
+
+ {userActionItems.map((item, index) => (
+ {item.name}}
+ >
+
+
+ ))}
+
+
+ {complexItems.map((item, index) => (
+ {item.name}}
+ >
+
+
+ ))}
+
+ {props.submitButton}
-
-