{
diff --git a/packages/editor/core/src/ui/components/editor-content.tsx b/packages/editor/core/src/ui/components/editor-content.tsx
index 972184b08..d0531da01 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;
@@ -10,10 +9,8 @@ interface EditorContentProps {
}
export const EditorContentWrapper = ({ editor, editorContentCustomClassNames = '', children }: EditorContentProps) => (
-
diff --git a/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
index a42421b04..cf0d78688 100644
--- a/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
@@ -1,5 +1,5 @@
import { Editor } from "@tiptap/react";
-import { BoldIcon, LucideIcon } from "lucide-react";
+import { BoldIcon } from "lucide-react";
import {
BoldItem,
@@ -14,7 +14,6 @@ import {
TableItem,
UnderLineItem,
} from "@plane/editor-core";
-import { Icon } from "./icon";
import { Tooltip } from "../../tooltip";
import { UploadImage } from "../..";
@@ -41,8 +40,9 @@ type EditorBubbleMenuProps = {
};
uploadFile: UploadImage;
setIsSubmitting?: (
- isSubmitting: "submitting" | "submitted" | "saved"
+ isSubmitting: "submitting" | "submitted" | "saved",
) => void;
+ submitButton: React.ReactNode;
};
export const FixedMenu = (props: EditorBubbleMenuProps) => {
@@ -73,115 +73,145 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
};
return (
-
- {/* @ts-ignore */}
+
+}
+
+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..57137dedd
--- /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..712ca65f0
--- /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..9ecc2c0ae
--- /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..e922e7fa1
--- /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..d3159d4aa
--- /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..5dbd0f38a
--- /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..f5ec958a4
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/table-controls.ts
@@ -0,0 +1,117 @@
+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..6e3f9318e
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
@@ -0,0 +1,530 @@
+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",
+ 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",
+ 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("button", {
+ onClick: () => this.selectRow(),
+ }),
+ );
+
+ this.columnsControl = h(
+ "div",
+ { className: "columnsControl" },
+ h("button", {
+ onClick: () => this.selectColumn(),
+ }),
+ );
+
+ this.controls = h(
+ "div",
+ { className: "tableControls", contentEditable: "false" },
+ this.rowsControl,
+ this.columnsControl,
+ );
+
+ this.columnsToolbox = createToolbox({
+ triggerButton: this.columnsControl.querySelector("button"),
+ 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..eab3cad92
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/table.ts
@@ -0,0 +1,298 @@
+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..a3d7f2da8
--- /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..75bf7cb41
--- /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..dcb20b323
--- /dev/null
+++ b/packages/editor/core/src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected.ts
@@ -0,0 +1,39 @@
+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..293878cb0
--- /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..3c36bf055
--- /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..9fcf200fb 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,43 @@ interface CustomEditorProps {
extensions?: any;
editorProps?: EditorProps;
forwardedRef?: any;
+ mentionHighlights?: string[];
+ mentionSuggestions?: IMentionSuggestion[];
}
-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,
+ 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), ...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,15 +77,9 @@ 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;
}
return editor;
-};
+};
\ No newline at end of file
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..9243c2f4e 100644
--- a/packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx
+++ b/packages/editor/core/src/ui/hooks/useReadOnlyEditor.tsx
@@ -1,27 +1,44 @@
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 { 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 +51,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..ba1a9ed0b
--- /dev/null
+++ b/packages/editor/core/src/ui/mentions/index.tsx
@@ -0,0 +1,15 @@
+// @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..b4bbc53a6
--- /dev/null
+++ b/packages/editor/core/src/ui/mentions/suggestion.ts
@@ -0,0 +1,59 @@
+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/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/plugins/delete-image.tsx b/packages/editor/core/src/ui/plugins/delete-image.tsx
index ba21d686d..56284472b 100644
--- a/packages/editor/core/src/ui/plugins/delete-image.tsx
+++ b/packages/editor/core/src/ui/plugins/delete-image.tsx
@@ -16,7 +16,7 @@ const TrackImageDeletionPlugin = (deleteImage: DeleteImage): Plugin =>
new Plugin({
key: deleteKey,
appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => {
- const newImageSources = new Set();
+ const newImageSources = new Set();
newState.doc.descendants((node) => {
if (node.type.name === IMAGE_NODE_TYPE) {
newImageSources.add(node.attrs.src);
diff --git a/packages/editor/core/src/ui/read-only/extensions.tsx b/packages/editor/core/src/ui/read-only/extensions.tsx
index 2246c64f9..8901d34c5 100644
--- a/packages/editor/core/src/ui/read-only/extensions.tsx
+++ b/packages/editor/core/src/ui/read-only/extensions.tsx
@@ -8,15 +8,19 @@ 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: {
@@ -87,6 +91,7 @@ export const CoreReadOnlyEditorExtensions = [
}),
Table,
TableHeader,
- CustomTableCell,
+ TableCell,
TableRow,
+ Mentions(mentionConfig.mentionSuggestions, mentionConfig.mentionHighlights, true),
];
diff --git a/packages/editor/lite-text-editor/package.json b/packages/editor/lite-text-editor/package.json
index 47ef154c6..3b6cd720b 100644
--- a/packages/editor/lite-text-editor/package.json
+++ b/packages/editor/lite-text-editor/package.json
@@ -2,6 +2,7 @@
"name": "@plane/lite-text-editor",
"version": "0.0.1",
"description": "Package that powers Plane's Comment Editor",
+ "private": true,
"main": "./dist/index.mjs",
"module": "./dist/index.mjs",
"types": "./dist/index.d.mts",
@@ -29,9 +30,6 @@
"dependencies": {
"@plane/editor-core": "*",
"@tiptap/extension-list-item": "^2.1.11",
- "@types/node": "18.15.3",
- "@types/react": "^18.2.5",
- "@types/react-dom": "18.0.11",
"class-variance-authority": "^0.7.0",
"clsx": "^1.2.1",
"eslint": "8.36.0",
@@ -46,6 +44,9 @@
"use-debounce": "^9.0.4"
},
"devDependencies": {
+ "@types/node": "18.15.3",
+ "@types/react": "^18.2.35",
+ "@types/react-dom": "^18.2.14",
"eslint": "^7.32.0",
"postcss": "^8.4.29",
"tailwind-config-custom": "*",
diff --git a/packages/editor/lite-text-editor/src/index.ts b/packages/editor/lite-text-editor/src/index.ts
index de9323b3c..392928ccf 100644
--- a/packages/editor/lite-text-editor/src/index.ts
+++ b/packages/editor/lite-text-editor/src/index.ts
@@ -1,2 +1,3 @@
export { LiteTextEditor, LiteTextEditorWithRef } from "./ui";
export { LiteReadOnlyEditor, LiteReadOnlyEditorWithRef } from "./ui/read-only";
+export type { IMentionSuggestion, IMentionHighlight } from "./ui"
diff --git a/packages/editor/lite-text-editor/src/ui/extensions/custom-list-extension.tsx b/packages/editor/lite-text-editor/src/ui/extensions/custom-list-extension.tsx
deleted file mode 100644
index f0bc70cff..000000000
--- a/packages/editor/lite-text-editor/src/ui/extensions/custom-list-extension.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import ListItem from '@tiptap/extension-list-item'
-
-export const CustomListItem = ListItem.extend({
- addKeyboardShortcuts() {
- return {
- 'Shift-Enter': () => this.editor.chain().focus().splitListItem('listItem').run(),
- }
- },
-})
diff --git a/packages/editor/lite-text-editor/src/ui/extensions/enter-key-extension.tsx b/packages/editor/lite-text-editor/src/ui/extensions/enter-key-extension.tsx
index 04c4a1fbe..129efa4ee 100644
--- a/packages/editor/lite-text-editor/src/ui/extensions/enter-key-extension.tsx
+++ b/packages/editor/lite-text-editor/src/ui/extensions/enter-key-extension.tsx
@@ -1,16 +1,25 @@
-import { Extension } from '@tiptap/core';
+import { Extension } from "@tiptap/core";
-export const EnterKeyExtension = (onEnterKeyPress?: () => void) => Extension.create({
- name: 'enterKey',
+export const EnterKeyExtension = (onEnterKeyPress?: () => void) =>
+ Extension.create({
+ name: "enterKey",
- addKeyboardShortcuts() {
- return {
- 'Enter': () => {
- if (onEnterKeyPress) {
- onEnterKeyPress();
- }
- return true;
- },
- }
- },
-});
+ addKeyboardShortcuts() {
+ return {
+ Enter: () => {
+ if (onEnterKeyPress) {
+ onEnterKeyPress();
+ }
+ return true;
+ },
+ "Shift-Enter": ({ editor }) =>
+ editor.commands.first(({ commands }) => [
+ () => commands.newlineInCode(),
+ () => commands.splitListItem("listItem"),
+ () => commands.createParagraphNear(),
+ () => commands.liftEmptyBlock(),
+ () => commands.splitBlock(),
+ ]),
+ };
+ },
+ });
diff --git a/packages/editor/lite-text-editor/src/ui/extensions/index.tsx b/packages/editor/lite-text-editor/src/ui/extensions/index.tsx
index ccd04a395..4531e9516 100644
--- a/packages/editor/lite-text-editor/src/ui/extensions/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/extensions/index.tsx
@@ -1,7 +1,5 @@
-import { CustomListItem } from "./custom-list-extension";
import { EnterKeyExtension } from "./enter-key-extension";
export const LiteTextEditorExtensions = (onEnterKeyPress?: () => void) => [
- CustomListItem,
- EnterKeyExtension(onEnterKeyPress),
+ // EnterKeyExtension(onEnterKeyPress),
];
diff --git a/packages/editor/lite-text-editor/src/ui/index.tsx b/packages/editor/lite-text-editor/src/ui/index.tsx
index 5b525d92b..ef321d511 100644
--- a/packages/editor/lite-text-editor/src/ui/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/index.tsx
@@ -1,4 +1,3 @@
-"use client";
import * as React from "react";
import {
EditorContainer,
@@ -11,6 +10,16 @@ import { LiteTextEditorExtensions } from "./extensions";
export type UploadImage = (file: File) => Promise;
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;
@@ -38,6 +47,9 @@ interface ILiteTextEditor {
}[];
};
onEnterKeyPress?: (e?: any) => void;
+ mentionHighlights?: string[];
+ mentionSuggestions?: IMentionSuggestion[];
+ submitButton?: React.ReactNode;
}
interface LiteTextEditorProps extends ILiteTextEditor {
@@ -49,22 +61,27 @@ 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,
+ debouncedUpdatesEnabled,
+ setIsSubmitting,
+ setShouldShowAlert,
+ editorContentCustomClassNames,
+ value,
+ uploadFile,
+ deleteFile,
+ noBorder,
+ borderOnFocus,
+ customClassName,
+ forwardedRef,
+ commentAccessSpecifier,
+ onEnterKeyPress,
+ mentionHighlights,
+ mentionSuggestions,
+ submitButton,
+ } = props;
+
const editor = useEditor({
onChange,
debouncedUpdatesEnabled,
@@ -75,6 +92,8 @@ const LiteTextEditor = ({
deleteFile,
forwardedRef,
extensions: LiteTextEditorExtensions(onEnterKeyPress),
+ mentionHighlights,
+ mentionSuggestions,
});
const editorClassNames = getEditorClassNames({
@@ -98,6 +117,7 @@ const LiteTextEditor = ({
uploadFile={uploadFile}
setIsSubmitting={setIsSubmitting}
commentAccessSpecifier={commentAccessSpecifier}
+ submitButton={submitButton}
/>
-
-
+ {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..c3bfa3703
--- /dev/null
+++ b/packages/editor/core/src/ui/mentions/custom.tsx
@@ -0,0 +1,55 @@
+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
+ )}
+
+
{props.commentAccessSpecifier && (
-
,
- 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/package.json b/packages/editor/rich-text-editor/package.json
index 7bdd0a58b..db793261c 100644
--- a/packages/editor/rich-text-editor/package.json
+++ b/packages/editor/rich-text-editor/package.json
@@ -2,6 +2,7 @@
"name": "@plane/rich-text-editor",
"version": "0.0.1",
"description": "Rich Text Editor that powers Plane",
+ "private": true,
"main": "./dist/index.mjs",
"module": "./dist/index.mjs",
"types": "./dist/index.d.mts",
@@ -21,19 +22,19 @@
"check-types": "tsc --noEmit"
},
"peerDependencies": {
+ "@tiptap/core": "^2.1.11",
"next": "12.3.2",
"next-themes": "^0.2.1",
"react": "^18.2.0",
- "react-dom": "18.2.0",
- "@tiptap/core": "^2.1.11"
+ "react-dom": "18.2.0"
},
"dependencies": {
"@plane/editor-core": "*",
"@tiptap/extension-code-block-lowlight": "^2.1.11",
"@tiptap/extension-horizontal-rule": "^2.1.11",
"@tiptap/extension-placeholder": "^2.1.11",
- "class-variance-authority": "^0.7.0",
"@tiptap/suggestion": "^2.1.7",
+ "class-variance-authority": "^0.7.0",
"clsx": "^1.2.1",
"highlight.js": "^11.8.0",
"lowlight": "^3.0.0",
@@ -41,8 +42,8 @@
},
"devDependencies": {
"@types/node": "18.15.3",
- "@types/react": "^18.2.5",
- "@types/react-dom": "18.0.11",
+ "@types/react": "^18.2.35",
+ "@types/react-dom": "^18.2.14",
"eslint": "^7.32.0",
"postcss": "^8.4.29",
"react": "^18.2.0",
diff --git a/packages/editor/rich-text-editor/src/index.ts b/packages/editor/rich-text-editor/src/index.ts
index 36d0a95f9..e296a6171 100644
--- a/packages/editor/rich-text-editor/src/index.ts
+++ b/packages/editor/rich-text-editor/src/index.ts
@@ -2,3 +2,4 @@ import "./styles/github-dark.css";
export { RichTextEditor, RichTextEditorWithRef } from "./ui";
export { RichReadOnlyEditor, RichReadOnlyEditorWithRef } from "./ui/read-only";
+export type { IMentionSuggestion, IMentionHighlight } from "./ui"
diff --git a/packages/editor/rich-text-editor/src/ui/extensions/slash-command.tsx b/packages/editor/rich-text-editor/src/ui/extensions/slash-command.tsx
index e00585dd8..bab13304a 100644
--- a/packages/editor/rich-text-editor/src/ui/extensions/slash-command.tsx
+++ b/packages/editor/rich-text-editor/src/ui/extensions/slash-command.tsx
@@ -1,4 +1,11 @@
-import { useState, useEffect, useCallback, ReactNode, useRef, useLayoutEffect } from "react";
+import {
+ useState,
+ useEffect,
+ useCallback,
+ ReactNode,
+ useRef,
+ useLayoutEffect,
+} from "react";
import { Editor, Range, Extension } from "@tiptap/core";
import Suggestion from "@tiptap/suggestion";
import { ReactRenderer } from "@tiptap/react";
@@ -18,7 +25,18 @@ import {
Table,
} from "lucide-react";
import { UploadImage } from "../";
-import { cn, insertTableCommand, toggleBlockquote, toggleBulletList, toggleOrderedList, toggleTaskList, insertImageCommand, toggleHeadingOne, toggleHeadingTwo, toggleHeadingThree } from "@plane/editor-core";
+import {
+ cn,
+ insertTableCommand,
+ toggleBlockquote,
+ toggleBulletList,
+ toggleOrderedList,
+ toggleTaskList,
+ insertImageCommand,
+ toggleHeadingOne,
+ toggleHeadingTwo,
+ toggleHeadingThree,
+} from "@plane/editor-core";
interface CommandItemProps {
title: string;
@@ -37,7 +55,15 @@ const Command = Extension.create({
return {
suggestion: {
char: "/",
- command: ({ editor, range, props }: { editor: Editor; range: Range; props: any }) => {
+ command: ({
+ editor,
+ range,
+ props,
+ }: {
+ editor: Editor;
+ range: Range;
+ props: any;
+ }) => {
props.command({ editor, range });
},
},
@@ -59,127 +85,135 @@ const Command = Extension.create({
const getSuggestionItems =
(
uploadFile: UploadImage,
- setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+ setIsSubmitting?: (
+ isSubmitting: "submitting" | "submitted" | "saved",
+ ) => void,
) =>
- ({ query }: { query: string }) =>
- [
- {
- title: "Text",
- description: "Just start typing with plain text.",
- searchTerms: ["p", "paragraph"],
- icon:
{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}
-
-