diff --git a/packages/editor/core/package.json b/packages/editor/core/package.json index 2f458995c..ef2be61e3 100644 --- a/packages/editor/core/package.json +++ b/packages/editor/core/package.json @@ -28,28 +28,22 @@ "react-dom": "18.2.0" }, "dependencies": { - "@plane/editor-types": "*", - "@tiptap/core": "^2.1.7", + "@tiptap/core": "^2.1.13", "@tiptap/extension-blockquote": "^2.1.13", - "@tiptap/extension-code-block-lowlight": "^2.1.12", - "@tiptap/extension-color": "^2.1.11", - "@tiptap/extension-image": "^2.1.7", - "@tiptap/extension-link": "^2.1.7", - "@tiptap/extension-list-item": "^2.1.12", - "@tiptap/extension-mention": "^2.1.12", - "@tiptap/extension-table": "^2.1.6", - "@tiptap/extension-table-cell": "^2.1.6", - "@tiptap/extension-table-header": "^2.1.6", - "@tiptap/extension-table-row": "^2.1.6", - "@tiptap/extension-task-item": "^2.1.7", - "@tiptap/extension-task-list": "^2.1.7", - "@tiptap/extension-text-style": "^2.1.11", - "@tiptap/extension-underline": "^2.1.7", - "@tiptap/pm": "^2.1.7", - "@tiptap/prosemirror-tables": "^1.1.4", - "@tiptap/react": "^2.1.7", - "@tiptap/starter-kit": "^2.1.10", - "@tiptap/suggestion": "^2.0.4", + "@tiptap/extension-code-block-lowlight": "^2.1.13", + "@tiptap/extension-color": "^2.1.13", + "@tiptap/extension-image": "^2.1.13", + "@tiptap/extension-link": "^2.1.13", + "@tiptap/extension-list-item": "^2.1.13", + "@tiptap/extension-mention": "^2.1.13", + "@tiptap/extension-task-item": "^2.1.13", + "@tiptap/extension-task-list": "^2.1.13", + "@tiptap/extension-text-style": "^2.1.13", + "@tiptap/extension-underline": "^2.1.13", + "@tiptap/pm": "^2.1.13", + "@tiptap/react": "^2.1.13", + "@tiptap/starter-kit": "^2.1.13", + "@tiptap/suggestion": "^2.0.13", "class-variance-authority": "^0.7.0", "clsx": "^1.2.1", "highlight.js": "^11.8.0", diff --git a/packages/editor/core/src/ui/hooks/use-editor.tsx b/packages/editor/core/src/hooks/use-editor.tsx similarity index 86% rename from packages/editor/core/src/ui/hooks/use-editor.tsx rename to packages/editor/core/src/hooks/use-editor.tsx index 149f9b453..c2923c1e9 100644 --- a/packages/editor/core/src/ui/hooks/use-editor.tsx +++ b/packages/editor/core/src/hooks/use-editor.tsx @@ -1,10 +1,13 @@ import { useEditor as useCustomEditor, Editor } from "@tiptap/react"; import { useImperativeHandle, useRef, MutableRefObject } from "react"; -import { CoreEditorProps } from "../props"; -import { CoreEditorExtensions } from "../extensions"; +import { CoreEditorProps } from "src/ui/props"; +import { CoreEditorExtensions } from "src/ui/extensions"; import { EditorProps } from "@tiptap/pm/view"; -import { getTrimmedHTML } from "../../lib/utils"; -import { DeleteImage, IMentionSuggestion, RestoreImage, UploadImage } from "@plane/editor-types"; +import { getTrimmedHTML } from "src/lib/utils"; +import { DeleteImage } from "src/types/delete-image"; +import { IMentionSuggestion } from "src/types/mention-suggestion"; +import { RestoreImage } from "src/types/restore-image"; +import { UploadImage } from "src/types/upload-image"; interface CustomEditorProps { uploadFile: UploadImage; diff --git a/packages/editor/core/src/ui/hooks/use-read-only-editor.tsx b/packages/editor/core/src/hooks/use-read-only-editor.tsx similarity index 88% rename from packages/editor/core/src/ui/hooks/use-read-only-editor.tsx rename to packages/editor/core/src/hooks/use-read-only-editor.tsx index 5c2429108..ecd49255c 100644 --- a/packages/editor/core/src/ui/hooks/use-read-only-editor.tsx +++ b/packages/editor/core/src/hooks/use-read-only-editor.tsx @@ -1,9 +1,9 @@ import { useEditor as useCustomEditor, Editor } from "@tiptap/react"; import { useImperativeHandle, useRef, MutableRefObject } from "react"; -import { CoreReadOnlyEditorExtensions } from "../read-only/extensions"; -import { CoreReadOnlyEditorProps } from "../read-only/props"; +import { CoreReadOnlyEditorExtensions } from "src/ui/read-only/extensions"; +import { CoreReadOnlyEditorProps } from "src/ui/read-only/props"; import { EditorProps } from "@tiptap/pm/view"; -import { IMentionSuggestion } from "@plane/editor-types"; +import { IMentionSuggestion } from "src/types/mention-suggestion"; interface CustomReadOnlyEditorProps { value: string; diff --git a/packages/editor/core/src/index.ts b/packages/editor/core/src/index.ts index bdf533193..c7e39d240 100644 --- a/packages/editor/core/src/index.ts +++ b/packages/editor/core/src/index.ts @@ -1,23 +1,32 @@ // styles // import "./styles/tailwind.css"; -// import "./styles/editor.css"; -import "./styles/github-dark.css"; +import "src/styles/editor.css"; +import "src/styles/table.css"; +import "src/styles/github-dark.css"; -export { isCellSelection } from "./ui/extensions/table/table/utilities/is-cell-selection"; +export { isCellSelection } from "src/ui/extensions/table/table/utilities/is-cell-selection"; // utils -export * from "./lib/utils"; -export * from "./ui/extensions/table/table"; -export { startImageUpload } from "./ui/plugins/upload-image"; +export * from "src/lib/utils"; +export * from "src/ui/extensions/table/table"; +export { startImageUpload } from "src/ui/plugins/upload-image"; // components -export { EditorContainer } from "./ui/components/editor-container"; -export { EditorContentWrapper } from "./ui/components/editor-content"; +export { EditorContainer } from "src/ui/components/editor-container"; +export { EditorContentWrapper } from "src/ui/components/editor-content"; // hooks -export { useEditor } from "./ui/hooks/use-editor"; -export { useReadOnlyEditor } from "./ui/hooks/use-read-only-editor"; +export { useEditor } from "src/hooks/use-editor"; +export { useReadOnlyEditor } from "src/hooks/use-read-only-editor"; // helper items -export * from "./ui/menus/menu-items"; -export * from "./lib/editor-commands"; +export * from "src/ui/menus/menu-items"; +export * from "src/lib/editor-commands"; + +// types +export type { DeleteImage } from "src/types/delete-image"; +export type { UploadImage } from "src/types/upload-image"; +export type { RestoreImage } from "src/types/restore-image"; +export type { IMentionHighlight, IMentionSuggestion } from "src/types/mention-suggestion"; +export type { ISlashCommandItem, CommandProps } from "src/types/slash-commands-suggestion"; +export type { LucideIconType } from "src/types/lucide-icon"; diff --git a/packages/editor/core/src/lib/editor-commands.ts b/packages/editor/core/src/lib/editor-commands.ts index 4a331e7cd..147797e2d 100644 --- a/packages/editor/core/src/lib/editor-commands.ts +++ b/packages/editor/core/src/lib/editor-commands.ts @@ -1,7 +1,7 @@ -import { UploadImage } from "@plane/editor-types"; import { Editor, Range } from "@tiptap/core"; -import { startImageUpload } from "../ui/plugins/upload-image"; -import { findTableAncestor } from "./utils"; +import { startImageUpload } from "src/ui/plugins/upload-image"; +import { findTableAncestor } from "src/lib/utils"; +import { UploadImage } from "src/types/upload-image"; export const toggleHeadingOne = (editor: Editor, range?: Range) => { if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run(); diff --git a/packages/editor/core/src/styles/editor.css b/packages/editor/core/src/styles/editor.css index 85d881eeb..ab0312789 100644 --- a/packages/editor/core/src/styles/editor.css +++ b/packages/editor/core/src/styles/editor.css @@ -6,6 +6,12 @@ height: 0; } +/* block quotes */ +.ProseMirror blockquote p::before, +.ProseMirror blockquote p::after { + display: none; +} + .ProseMirror .is-empty::before { content: attr(data-placeholder); float: left; @@ -15,7 +21,6 @@ } /* Custom image styles */ - .ProseMirror img { transition: filter 0.1s ease-in-out; @@ -53,11 +58,12 @@ ul[data-type="taskList"] li > label input[type="checkbox"] { background-color: rgb(var(--color-background-100)); margin: 0; cursor: pointer; - width: 1.2rem; - height: 1.2rem; + width: 0.8rem; + height: 0.8rem; position: relative; - border: 2px solid rgb(var(--color-text-100)); - margin-right: 0.3rem; + border: 1.5px solid rgb(var(--color-text-100)); + margin-right: 0.2rem; + margin-top: 0.15rem; display: grid; place-content: center; @@ -71,8 +77,8 @@ ul[data-type="taskList"] li > label input[type="checkbox"] { &::before { content: ""; - width: 0.65em; - height: 0.65em; + width: 0.5em; + height: 0.5em; transform: scale(0); transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em; @@ -229,3 +235,34 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p { .ProseMirror table * .is-empty::before { opacity: 0; } + +.ProseMirror pre { + background: rgba(var(--color-background-80)); + border-radius: 0.5rem; + color: rgba(var(--color-text-100)); + font-family: "JetBrainsMono", monospace; + padding: 0.75rem 1rem; +} + +.ProseMirror pre code { + background: none; + color: inherit; + font-size: 0.8rem; + padding: 0; +} + +div[data-type="horizontalRule"] { + line-height: 0; + padding: 0.25rem 0; + margin-top: 0; + margin-bottom: 0; + + & > div { + border-bottom: 1px solid rgb(var(--color-text-100)); + } +} + +/* image resizer */ +.moveable-control-box { + z-index: 10 !important; +} diff --git a/space/styles/table.css b/packages/editor/core/src/styles/table.css similarity index 100% rename from space/styles/table.css rename to packages/editor/core/src/styles/table.css diff --git a/packages/editor/types/src/types/delete-image.ts b/packages/editor/core/src/types/delete-image.ts similarity index 100% rename from packages/editor/types/src/types/delete-image.ts rename to packages/editor/core/src/types/delete-image.ts diff --git a/packages/editor/core/src/types/lucide-icon.ts b/packages/editor/core/src/types/lucide-icon.ts new file mode 100644 index 000000000..2211c18e8 --- /dev/null +++ b/packages/editor/core/src/types/lucide-icon.ts @@ -0,0 +1,3 @@ +import { Smile } from "lucide-react"; + +export type LucideIconType = typeof Smile; diff --git a/packages/editor/types/src/types/mention-suggestion.ts b/packages/editor/core/src/types/mention-suggestion.ts similarity index 100% rename from packages/editor/types/src/types/mention-suggestion.ts rename to packages/editor/core/src/types/mention-suggestion.ts diff --git a/packages/editor/types/src/types/restore-image.ts b/packages/editor/core/src/types/restore-image.ts similarity index 100% rename from packages/editor/types/src/types/restore-image.ts rename to packages/editor/core/src/types/restore-image.ts diff --git a/packages/editor/types/src/types/slash-commands-suggestion.ts b/packages/editor/core/src/types/slash-commands-suggestion.ts similarity index 100% rename from packages/editor/types/src/types/slash-commands-suggestion.ts rename to packages/editor/core/src/types/slash-commands-suggestion.ts diff --git a/packages/editor/types/src/types/upload-image.ts b/packages/editor/core/src/types/upload-image.ts similarity index 100% rename from packages/editor/types/src/types/upload-image.ts rename to packages/editor/core/src/types/upload-image.ts diff --git a/packages/editor/core/src/ui/components/editor-content.tsx b/packages/editor/core/src/ui/components/editor-content.tsx index f66edbb12..9c0938788 100644 --- a/packages/editor/core/src/ui/components/editor-content.tsx +++ b/packages/editor/core/src/ui/components/editor-content.tsx @@ -1,6 +1,6 @@ import { Editor, EditorContent } from "@tiptap/react"; import { ReactNode } from "react"; -import { ImageResizer } from "../extensions/image/image-resize"; +import { ImageResizer } from "src/ui/extensions/image/image-resize"; interface EditorContentProps { editor: Editor | null; diff --git a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/get-next-list-depth.ts b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/get-next-list-depth.ts index f7583f195..2e4f5fbaa 100644 --- a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/get-next-list-depth.ts +++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/get-next-list-depth.ts @@ -1,7 +1,7 @@ import { getNodeAtPosition } from "@tiptap/core"; import { EditorState } from "@tiptap/pm/state"; -import { findListItemPos } from "./find-list-item-pos"; +import { findListItemPos } from "src/ui/extensions/custom-list-keymap/list-helpers/find-list-item-pos"; export const getNextListDepth = (typeOrName: string, state: EditorState) => { const listItemPos = findListItemPos(typeOrName, state); diff --git a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/handle-backspace.ts b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/handle-backspace.ts index 08906148b..a4f2d5db9 100644 --- a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/handle-backspace.ts +++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/handle-backspace.ts @@ -1,8 +1,8 @@ import { Editor, isAtStartOfNode, isNodeActive } from "@tiptap/core"; import { Node } from "@tiptap/pm/model"; -import { findListItemPos } from "./find-list-item-pos"; -import { hasListBefore } from "./has-list-before"; +import { findListItemPos } from "src/ui/extensions/custom-list-keymap/list-helpers/find-list-item-pos"; +import { hasListBefore } from "src/ui/extensions/custom-list-keymap/list-helpers/has-list-before"; export const handleBackspace = (editor: Editor, name: string, parentListTypes: string[]) => { // this is required to still handle the undo handling diff --git a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/handle-delete.ts b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/handle-delete.ts index 5f47baf9d..9179e0f20 100644 --- a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/handle-delete.ts +++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/handle-delete.ts @@ -1,7 +1,7 @@ import { Editor, isAtEndOfNode, isNodeActive } from "@tiptap/core"; -import { nextListIsDeeper } from "./next-list-is-deeper"; -import { nextListIsHigher } from "./next-list-is-higher"; +import { nextListIsDeeper } from "src/ui/extensions/custom-list-keymap/list-helpers/next-list-is-deeper"; +import { nextListIsHigher } from "src/ui/extensions/custom-list-keymap/list-helpers/next-list-is-higher"; export const handleDelete = (editor: Editor, name: string) => { // if the cursor is not inside the current node type diff --git a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/next-list-is-deeper.ts b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/next-list-is-deeper.ts index 425458b2a..7cd1a63f7 100644 --- a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/next-list-is-deeper.ts +++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/next-list-is-deeper.ts @@ -1,7 +1,7 @@ import { EditorState } from "@tiptap/pm/state"; -import { findListItemPos } from "./find-list-item-pos"; -import { getNextListDepth } from "./get-next-list-depth"; +import { findListItemPos } from "src/ui/extensions/custom-list-keymap/list-helpers/find-list-item-pos"; +import { getNextListDepth } from "src/ui/extensions/custom-list-keymap/list-helpers/get-next-list-depth"; export const nextListIsDeeper = (typeOrName: string, state: EditorState) => { const listDepth = getNextListDepth(typeOrName, state); diff --git a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/next-list-is-higher.ts b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/next-list-is-higher.ts index 8b853b5af..3364c3b87 100644 --- a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/next-list-is-higher.ts +++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/next-list-is-higher.ts @@ -1,7 +1,7 @@ import { EditorState } from "@tiptap/pm/state"; -import { findListItemPos } from "./find-list-item-pos"; -import { getNextListDepth } from "./get-next-list-depth"; +import { findListItemPos } from "src/ui/extensions/custom-list-keymap/list-helpers/find-list-item-pos"; +import { getNextListDepth } from "src/ui/extensions/custom-list-keymap/list-helpers/get-next-list-depth"; export const nextListIsHigher = (typeOrName: string, state: EditorState) => { const listDepth = getNextListDepth(typeOrName, state); diff --git a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-keymap.ts b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-keymap.ts index b61695973..aabd836d2 100644 --- a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-keymap.ts +++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-keymap.ts @@ -1,6 +1,6 @@ import { Extension } from "@tiptap/core"; -import { handleBackspace, handleDelete } from "./list-helpers"; +import { handleBackspace, handleDelete } from "src/ui/extensions/custom-list-keymap/list-helpers"; export type ListKeymapOptions = { listTypes: Array<{ diff --git a/packages/editor/core/src/ui/extensions/horizontal-rule.tsx b/packages/editor/core/src/ui/extensions/horizontal-rule.tsx index a7bbf50e1..cee0ded83 100644 --- a/packages/editor/core/src/ui/extensions/horizontal-rule.tsx +++ b/packages/editor/core/src/ui/extensions/horizontal-rule.tsx @@ -22,7 +22,7 @@ declare module "@tiptap/core" { } } -export default Node.create({ +export const HorizontalRule = Node.create({ name: "horizontalRule", addOptions() { diff --git a/packages/editor/core/src/ui/extensions/image/index.tsx b/packages/editor/core/src/ui/extensions/image/index.tsx index b11bfefce..db8b1c97b 100644 --- a/packages/editor/core/src/ui/extensions/image/index.tsx +++ b/packages/editor/core/src/ui/extensions/image/index.tsx @@ -1,9 +1,10 @@ import { EditorState, Plugin, PluginKey, Transaction } from "@tiptap/pm/state"; import { Node as ProseMirrorNode } from "@tiptap/pm/model"; -import UploadImagesPlugin from "../../plugins/upload-image"; +import { UploadImagesPlugin } from "src/ui/plugins/upload-image"; import ImageExt from "@tiptap/extension-image"; -import { onNodeDeleted, onNodeRestored } from "../../plugins/delete-image"; -import { DeleteImage, RestoreImage } from "@plane/editor-types"; +import { onNodeDeleted, onNodeRestored } from "src/ui/plugins/delete-image"; +import { DeleteImage } from "src/types/delete-image"; +import { RestoreImage } from "src/types/restore-image"; interface ImageNode extends ProseMirrorNode { attrs: { @@ -15,7 +16,7 @@ interface ImageNode extends ProseMirrorNode { const deleteKey = new PluginKey("delete-image"); const IMAGE_NODE_TYPE = "image"; -const ImageExtension = (deleteImage: DeleteImage, restoreFile: RestoreImage, cancelUploadImage?: () => any) => +export const ImageExtension = (deleteImage: DeleteImage, restoreFile: RestoreImage, cancelUploadImage?: () => any) => ImageExt.extend({ addProseMirrorPlugins() { return [ @@ -130,5 +131,3 @@ const ImageExtension = (deleteImage: DeleteImage, restoreFile: RestoreImage, can }; }, }); - -export default ImageExtension; diff --git a/packages/editor/core/src/ui/extensions/image/read-only-image.tsx b/packages/editor/core/src/ui/extensions/image/read-only-image.tsx index 73a763d04..8112eba4e 100644 --- a/packages/editor/core/src/ui/extensions/image/read-only-image.tsx +++ b/packages/editor/core/src/ui/extensions/image/read-only-image.tsx @@ -1,6 +1,6 @@ import Image from "@tiptap/extension-image"; -const ReadOnlyImageExtension = Image.extend({ +export const ReadOnlyImageExtension = Image.extend({ addAttributes() { return { ...this.parent?.(), @@ -13,5 +13,3 @@ const ReadOnlyImageExtension = Image.extend({ }; }, }); - -export default ReadOnlyImageExtension; diff --git a/packages/editor/core/src/ui/extensions/index.tsx b/packages/editor/core/src/ui/extensions/index.tsx index 4ab82f3c8..1406cde67 100644 --- a/packages/editor/core/src/ui/extensions/index.tsx +++ b/packages/editor/core/src/ui/extensions/index.tsx @@ -7,22 +7,25 @@ import TaskItem from "@tiptap/extension-task-item"; import TaskList from "@tiptap/extension-task-list"; import { Markdown } from "tiptap-markdown"; -import TableHeader from "./table/table-header/table-header"; -import Table from "./table/table"; -import TableCell from "./table/table-cell/table-cell"; -import TableRow from "./table/table-row/table-row"; -import HorizontalRule from "./horizontal-rule"; +import { TableHeader } from "src/ui/extensions/table/table-header/table-header"; +import { Table } from "src/ui/extensions/table/table"; +import { TableCell } from "src/ui/extensions/table/table-cell/table-cell"; +import { TableRow } from "src/ui/extensions/table/table-row/table-row"; +import { HorizontalRule } from "src/ui/extensions/horizontal-rule"; -import ImageExtension from "./image"; +import { ImageExtension } from "src/ui/extensions/image"; -import { isValidHttpUrl } from "../../lib/utils"; -import { Mentions } from "../mentions"; +import { isValidHttpUrl } from "src/lib/utils"; +import { Mentions } from "src/ui/mentions"; -import { CustomKeymap } from "./keymap"; -import { CustomCodeBlock } from "./code"; -import { CustomQuoteExtension } from "./quote"; -import { ListKeymap } from "./custom-list-keymap"; -import { IMentionSuggestion, DeleteImage, RestoreImage } from "@plane/editor-types"; +import { CustomKeymap } from "src/ui/extensions/keymap"; +import { CustomCodeBlock } from "src/ui/extensions/code"; +import { CustomQuoteExtension } from "src/ui/extensions/quote"; +import { ListKeymap } from "src/ui/extensions/custom-list-keymap"; + +import { DeleteImage } from "src/types/delete-image"; +import { IMentionSuggestion } from "src/types/mention-suggestion"; +import { RestoreImage } from "src/types/restore-image"; export const CoreEditorExtensions = ( mentionConfig: { diff --git a/packages/editor/core/src/ui/extensions/table/table-cell/index.ts b/packages/editor/core/src/ui/extensions/table/table-cell/index.ts index fb2183381..68a25a9c3 100644 --- a/packages/editor/core/src/ui/extensions/table/table-cell/index.ts +++ b/packages/editor/core/src/ui/extensions/table/table-cell/index.ts @@ -1 +1 @@ -export { default as default } from "./table-cell"; +export { TableCell } from "./table-cell"; diff --git a/packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts b/packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts index 1d3e57af9..aedb59411 100644 --- a/packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts +++ b/packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts @@ -4,7 +4,7 @@ export interface TableCellOptions { HTMLAttributes: Record; } -export default Node.create({ +export const TableCell = Node.create({ name: "tableCell", addOptions() { 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 index cb036c505..290f37d0b 100644 --- a/packages/editor/core/src/ui/extensions/table/table-header/index.ts +++ b/packages/editor/core/src/ui/extensions/table/table-header/index.ts @@ -1 +1 @@ -export { default as default } from "./table-header"; +export { TableHeader } 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 index 0148f1a6f..c0decdbf8 100644 --- 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 @@ -3,7 +3,8 @@ import { mergeAttributes, Node } from "@tiptap/core"; export interface TableHeaderOptions { HTMLAttributes: Record; } -export default Node.create({ + +export const TableHeader = Node.create({ name: "tableHeader", addOptions() { 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 index 8c6eb55aa..24dafb7e0 100644 --- a/packages/editor/core/src/ui/extensions/table/table-row/index.ts +++ b/packages/editor/core/src/ui/extensions/table/table-row/index.ts @@ -1 +1 @@ -export { default as default } from "./table-row"; +export { TableRow } 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 index 5df20e6ef..28c9a9a48 100644 --- 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 @@ -4,7 +4,7 @@ export interface TableRowOptions { HTMLAttributes: Record; } -export default Node.create({ +export const TableRow = Node.create({ name: "tableRow", addOptions() { diff --git a/packages/editor/core/src/ui/extensions/table/table/icons.ts b/packages/editor/core/src/ui/extensions/table/table/icons.ts index 65e8b8540..c08710ec3 100644 --- a/packages/editor/core/src/ui/extensions/table/table/icons.ts +++ b/packages/editor/core/src/ui/extensions/table/table/icons.ts @@ -1,4 +1,4 @@ -const icons = { +export const icons = { colorPicker: ``, deleteColumn: ``, deleteRow: ``, @@ -47,5 +47,3 @@ const icons = { `, }; - -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 index ac51d0e2c..8efc43120 100644 --- a/packages/editor/core/src/ui/extensions/table/table/index.ts +++ b/packages/editor/core/src/ui/extensions/table/table/index.ts @@ -1 +1 @@ -export { default as default } from "./table"; +export { Table } from "./table"; 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 index 5b0622243..bc42b49ff 100644 --- a/packages/editor/core/src/ui/extensions/table/table/table-view.tsx +++ b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx @@ -4,9 +4,9 @@ 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 { CellSelection, TableMap, updateColumnsOnResize } from "@tiptap/pm/tables"; -import icons from "./icons"; +import { icons } from "src/ui/extensions/table/table/icons"; export function updateColumns( node: ProseMirrorNode, diff --git a/packages/editor/core/src/ui/extensions/table/table/table.ts b/packages/editor/core/src/ui/extensions/table/table/table.ts index 71c75f616..5600fd82a 100644 --- a/packages/editor/core/src/ui/extensions/table/table/table.ts +++ b/packages/editor/core/src/ui/extensions/table/table/table.ts @@ -19,12 +19,12 @@ import { tableEditing, toggleHeader, toggleHeaderCell, -} from "@tiptap/prosemirror-tables"; +} from "@tiptap/pm/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"; +import { tableControls } from "src/ui/extensions/table/table/table-controls"; +import { TableView } from "src/ui/extensions/table/table/table-view"; +import { createTable } from "src/ui/extensions/table/table/utilities/create-table"; +import { deleteTableWhenAllCellsSelected } from "src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected"; export interface TableOptions { HTMLAttributes: Record; @@ -72,7 +72,7 @@ declare module "@tiptap/core" { } } -export default Node.create({ +export const Table = Node.create({ name: "table", addOptions() { 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 index 5a2299fb4..7299dd442 100644 --- 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 @@ -1,7 +1,7 @@ import { Fragment, Node as ProsemirrorNode, Schema } from "@tiptap/pm/model"; -import { createCell } from "./create-cell"; -import { getTableNodeTypes } from "./get-table-node-types"; +import { createCell } from "src/ui/extensions/table/table/utilities/create-cell"; +import { getTableNodeTypes } from "src/ui/extensions/table/table/utilities/get-table-node-types"; export function createTable( schema: Schema, 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 index 7b5386382..c08228a00 100644 --- 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 @@ -1,6 +1,6 @@ import { findParentNodeClosestToPos, KeyboardShortcutCommand } from "@tiptap/core"; -import { isCellSelection } from "./is-cell-selection"; +import { isCellSelection } from "src/ui/extensions/table/table/utilities/is-cell-selection"; export const deleteTableWhenAllCellsSelected: KeyboardShortcutCommand = ({ editor }) => { const { selection } = editor.state; 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 index 28917a299..42ea5759c 100644 --- 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 @@ -1,4 +1,4 @@ -import { CellSelection } from "@tiptap/prosemirror-tables"; +import { CellSelection } from "@tiptap/pm/tables"; export function isCellSelection(value: unknown): value is CellSelection { return value instanceof CellSelection; diff --git a/packages/editor/core/src/ui/mentions/custom.tsx b/packages/editor/core/src/ui/mentions/custom.tsx index e25da6f47..6a47d79f0 100644 --- a/packages/editor/core/src/ui/mentions/custom.tsx +++ b/packages/editor/core/src/ui/mentions/custom.tsx @@ -1,8 +1,8 @@ import { Mention, MentionOptions } from "@tiptap/extension-mention"; import { mergeAttributes } from "@tiptap/core"; import { ReactNodeViewRenderer } from "@tiptap/react"; -import mentionNodeView from "./mentionNodeView"; -import { IMentionHighlight } from "@plane/editor-types"; +import { MentionNodeView } from "src/ui/mentions/mention-node-view"; +import { IMentionHighlight } from "src/types/mention-suggestion"; export interface CustomMentionOptions extends MentionOptions { mentionHighlights: IMentionHighlight[]; @@ -31,7 +31,7 @@ export const CustomMention = Mention.extend({ }, addNodeView() { - return ReactNodeViewRenderer(mentionNodeView); + return ReactNodeViewRenderer(MentionNodeView); }, parseHTML() { diff --git a/packages/editor/core/src/ui/mentions/index.tsx b/packages/editor/core/src/ui/mentions/index.tsx index b78923f6c..f6d3e5b1f 100644 --- a/packages/editor/core/src/ui/mentions/index.tsx +++ b/packages/editor/core/src/ui/mentions/index.tsx @@ -1,8 +1,8 @@ // @ts-nocheck -import suggestion from "./suggestion"; -import { CustomMention } from "./custom"; -import { IMentionHighlight, IMentionSuggestion } from "@plane/editor-types"; +import { Suggestion } from "src/ui/mentions/suggestion"; +import { CustomMention } from "src/ui/mentions/custom"; +import { IMentionHighlight } from "src/types/mention-suggestion"; export const Mentions = (mentionSuggestions: IMentionSuggestion[], mentionHighlights: IMentionHighlight[], readonly) => CustomMention.configure({ @@ -11,5 +11,5 @@ export const Mentions = (mentionSuggestions: IMentionSuggestion[], mentionHighli }, readonly: readonly, mentionHighlights: mentionHighlights, - suggestion: suggestion(mentionSuggestions), + suggestion: Suggestion(mentionSuggestions), }); diff --git a/packages/editor/core/src/ui/mentions/MentionList.tsx b/packages/editor/core/src/ui/mentions/mention-list.tsx similarity index 91% rename from packages/editor/core/src/ui/mentions/MentionList.tsx rename to packages/editor/core/src/ui/mentions/mention-list.tsx index d103a9e0a..afbf10970 100644 --- a/packages/editor/core/src/ui/mentions/MentionList.tsx +++ b/packages/editor/core/src/ui/mentions/mention-list.tsx @@ -1,6 +1,6 @@ -import { IMentionSuggestion } from "@plane/editor-types"; import { Editor } from "@tiptap/react"; -import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from "react"; +import { forwardRef, useEffect, useImperativeHandle, useState } from "react"; +import { IMentionSuggestion } from "src/types/mention-suggestion"; interface MentionListProps { items: IMentionSuggestion[]; @@ -9,7 +9,7 @@ interface MentionListProps { } // eslint-disable-next-line react/display-name -const MentionList = forwardRef((props: MentionListProps, ref) => { +export const MentionList = forwardRef((props: MentionListProps, ref) => { const [selectedIndex, setSelectedIndex] = useState(0); const selectItem = (index: number) => { @@ -98,5 +98,3 @@ const MentionList = forwardRef((props: MentionListProps, ref) => { }); MentionList.displayName = "MentionList"; - -export default MentionList; diff --git a/packages/editor/core/src/ui/mentions/mentionNodeView.tsx b/packages/editor/core/src/ui/mentions/mention-node-view.tsx similarity index 89% rename from packages/editor/core/src/ui/mentions/mentionNodeView.tsx rename to packages/editor/core/src/ui/mentions/mention-node-view.tsx index 8e9672d9f..1c3755f6c 100644 --- a/packages/editor/core/src/ui/mentions/mentionNodeView.tsx +++ b/packages/editor/core/src/ui/mentions/mention-node-view.tsx @@ -1,12 +1,12 @@ /* eslint-disable react/display-name */ // @ts-nocheck import { NodeViewWrapper } from "@tiptap/react"; -import { cn } from "../../lib/utils"; +import { cn } from "src/lib/utils"; import { useRouter } from "next/router"; -import { IMentionHighlight } from "@plane/editor-types"; +import { IMentionHighlight } from "src/types/mention-suggestion"; // eslint-disable-next-line import/no-anonymous-default-export -export default (props) => { +export const MentionNodeView = (props) => { const router = useRouter(); const highlights = props.extension.options.mentionHighlights as IMentionHighlight[]; diff --git a/packages/editor/core/src/ui/mentions/suggestion.ts b/packages/editor/core/src/ui/mentions/suggestion.ts index 60ba6f4bc..6d706cb79 100644 --- a/packages/editor/core/src/ui/mentions/suggestion.ts +++ b/packages/editor/core/src/ui/mentions/suggestion.ts @@ -2,10 +2,10 @@ import { ReactRenderer } from "@tiptap/react"; import { Editor } from "@tiptap/core"; import tippy from "tippy.js"; -import MentionList from "./MentionList"; -import { IMentionSuggestion } from "@plane/editor-types"; +import { MentionList } from "src/ui/mentions/mention-list"; +import { IMentionSuggestion } from "src/types/mention-suggestion"; -const Suggestion = (suggestions: IMentionSuggestion[]) => ({ +export const Suggestion = (suggestions: IMentionSuggestion[]) => ({ items: ({ query }: { query: string }) => suggestions.filter((suggestion) => suggestion.title.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5), render: () => { @@ -55,5 +55,3 @@ const Suggestion = (suggestions: IMentionSuggestion[]) => ({ }; }, }); - -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 98069b694..610d677f8 100644 --- a/packages/editor/core/src/ui/menus/menu-items/index.tsx +++ b/packages/editor/core/src/ui/menus/menu-items/index.tsx @@ -30,14 +30,15 @@ import { toggleStrike, toggleTaskList, toggleUnderline, -} from "../../../lib/editor-commands"; -import { UploadImage } from "@plane/editor-types"; +} from "src/lib/editor-commands"; +import { LucideIconType } from "src/types/lucide-icon"; +import { UploadImage } from "src/types/upload-image"; export interface EditorMenuItem { name: string; isActive: () => boolean; command: () => void; - icon: typeof BoldIcon; + icon: LucideIconType; } export const HeadingOneItem = (editor: Editor): EditorMenuItem => ({ diff --git a/packages/editor/core/src/ui/plugins/delete-image.tsx b/packages/editor/core/src/ui/plugins/delete-image.tsx index 6b772cebf..afe13730a 100644 --- a/packages/editor/core/src/ui/plugins/delete-image.tsx +++ b/packages/editor/core/src/ui/plugins/delete-image.tsx @@ -1,6 +1,7 @@ import { EditorState, Plugin, PluginKey, Transaction } from "@tiptap/pm/state"; import { Node as ProseMirrorNode } from "@tiptap/pm/model"; -import { DeleteImage, RestoreImage } from "@plane/editor-types"; +import { DeleteImage } from "src/types/delete-image"; +import { RestoreImage } from "src/types/restore-image"; const deleteKey = new PluginKey("delete-image"); const IMAGE_NODE_TYPE = "image"; @@ -12,7 +13,7 @@ interface ImageNode extends ProseMirrorNode { }; } -const TrackImageDeletionPlugin = (deleteImage: DeleteImage): Plugin => +export const TrackImageDeletionPlugin = (deleteImage: DeleteImage): Plugin => new Plugin({ key: deleteKey, appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => { @@ -53,8 +54,6 @@ const TrackImageDeletionPlugin = (deleteImage: DeleteImage): Plugin => }, }); -export default TrackImageDeletionPlugin; - export async function onNodeDeleted(src: string, deleteImage: DeleteImage): Promise { try { const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1); diff --git a/packages/editor/core/src/ui/plugins/upload-image.tsx b/packages/editor/core/src/ui/plugins/upload-image.tsx index 4dee70da4..323f3834a 100644 --- a/packages/editor/core/src/ui/plugins/upload-image.tsx +++ b/packages/editor/core/src/ui/plugins/upload-image.tsx @@ -1,10 +1,10 @@ -import { UploadImage } from "@plane/editor-types"; import { EditorState, Plugin, PluginKey } from "@tiptap/pm/state"; import { Decoration, DecorationSet, EditorView } from "@tiptap/pm/view"; +import { UploadImage } from "src/types/upload-image"; const uploadKey = new PluginKey("upload-image"); -const UploadImagesPlugin = (cancelUploadImage?: () => any) => +export const UploadImagesPlugin = (cancelUploadImage?: () => any) => new Plugin({ key: uploadKey, state: { @@ -60,8 +60,6 @@ const UploadImagesPlugin = (cancelUploadImage?: () => any) => }, }); -export default UploadImagesPlugin; - function findPlaceholder(state: EditorState, id: {}) { const decos = uploadKey.getState(state); const found = decos.find(undefined, undefined, (spec: { id: number | undefined }) => spec.id == id); diff --git a/packages/editor/core/src/ui/props.tsx b/packages/editor/core/src/ui/props.tsx index edd070d7b..2aaeb4264 100644 --- a/packages/editor/core/src/ui/props.tsx +++ b/packages/editor/core/src/ui/props.tsx @@ -1,7 +1,7 @@ -import { UploadImage } from "@plane/editor-types"; import { EditorProps } from "@tiptap/pm/view"; -import { findTableAncestor } from "../lib/utils"; -import { startImageUpload } from "./plugins/upload-image"; +import { findTableAncestor } from "src/lib/utils"; +import { UploadImage } from "src/types/upload-image"; +import { startImageUpload } from "src/ui/plugins/upload-image"; export function CoreEditorProps( uploadFile: UploadImage, diff --git a/packages/editor/core/src/ui/read-only/extensions.tsx b/packages/editor/core/src/ui/read-only/extensions.tsx index cdf7f88e5..5795d6c4a 100644 --- a/packages/editor/core/src/ui/read-only/extensions.tsx +++ b/packages/editor/core/src/ui/read-only/extensions.tsx @@ -8,15 +8,16 @@ import TaskList from "@tiptap/extension-task-list"; import { Markdown } from "tiptap-markdown"; import Gapcursor from "@tiptap/extension-gapcursor"; -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 { TableHeader } from "src/ui/extensions/table/table-header/table-header"; +import { Table } from "src/ui/extensions/table/table"; +import { TableCell } from "src/ui/extensions/table/table-cell/table-cell"; +import { TableRow } from "src/ui/extensions/table/table-row/table-row"; +import { HorizontalRule } from "src/ui/extensions/horizontal-rule"; -import ReadOnlyImageExtension from "../extensions/image/read-only-image"; -import { isValidHttpUrl } from "../../lib/utils"; -import { Mentions } from "../mentions"; -import { IMentionSuggestion } from "@plane/editor-types"; +import { ReadOnlyImageExtension } from "src/ui/extensions/image/read-only-image"; +import { isValidHttpUrl } from "src/lib/utils"; +import { Mentions } from "src/ui/mentions"; +import { IMentionSuggestion } from "src/types/mention-suggestion"; export const CoreReadOnlyEditorExtensions = (mentionConfig: { mentionSuggestions: IMentionSuggestion[]; @@ -71,6 +72,7 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: { class: "rounded-lg border border-custom-border-300", }, }), + HorizontalRule, TiptapUnderline, TextStyle, Color, diff --git a/packages/editor/core/tsconfig.json b/packages/editor/core/tsconfig.json index 57d0e9a74..c15534037 100644 --- a/packages/editor/core/tsconfig.json +++ b/packages/editor/core/tsconfig.json @@ -1,5 +1,15 @@ { "extends": "tsconfig/react-library.json", - "include": ["src/**/*", "index.d.ts"], - "exclude": ["dist", "build", "node_modules"] + "include": [ + "src/**/*", + "index.d.ts" + ], + "exclude": [ + "dist", + "build", + "node_modules" + ], + "compilerOptions": { + "baseUrl": "." + } } diff --git a/packages/editor/document-editor/package.json b/packages/editor/document-editor/package.json index 737a0eae0..61a075e5f 100644 --- a/packages/editor/document-editor/package.json +++ b/packages/editor/document-editor/package.json @@ -30,12 +30,11 @@ "dependencies": { "@plane/editor-core": "*", "@plane/editor-extensions": "*", - "@plane/editor-types": "*", "@plane/ui": "*", - "@tiptap/core": "^2.1.7", - "@tiptap/extension-placeholder": "^2.1.11", - "@tiptap/pm": "^2.1.12", - "@tiptap/suggestion": "^2.1.12", + "@tiptap/core": "^2.1.13", + "@tiptap/extension-placeholder": "^2.1.13", + "@tiptap/pm": "^2.1.13", + "@tiptap/suggestion": "^2.1.13", "eslint": "8.36.0", "eslint-config-next": "13.2.4", "react-popper": "^2.3.0", diff --git a/packages/editor/document-editor/src/ui/hooks/use-editor-markings.tsx b/packages/editor/document-editor/src/hooks/use-editor-markings.tsx similarity index 93% rename from packages/editor/document-editor/src/ui/hooks/use-editor-markings.tsx rename to packages/editor/document-editor/src/hooks/use-editor-markings.tsx index 9dfef6c39..1eb72eaab 100644 --- a/packages/editor/document-editor/src/ui/hooks/use-editor-markings.tsx +++ b/packages/editor/document-editor/src/hooks/use-editor-markings.tsx @@ -1,6 +1,5 @@ -import { Editor } from "@tiptap/react"; import { useState } from "react"; -import { IMarking } from ".."; +import { IMarking } from "src/types/editor-types"; export const useEditorMarkings = () => { const [markings, setMarkings] = useState([]); diff --git a/packages/editor/document-editor/src/index.ts b/packages/editor/document-editor/src/index.ts index 356e1faf9..c074009f4 100644 --- a/packages/editor/document-editor/src/index.ts +++ b/packages/editor/document-editor/src/index.ts @@ -1,3 +1,3 @@ -export { DocumentEditor, DocumentEditorWithRef } from "./ui"; -export { DocumentReadOnlyEditor, DocumentReadOnlyEditorWithRef } from "./ui/readonly"; -export { FixedMenu } from "./ui/menu/fixed-menu"; +export { DocumentEditor, DocumentEditorWithRef } from "src/ui"; +export { DocumentReadOnlyEditor, DocumentReadOnlyEditorWithRef } from "src/ui/readonly"; +export { FixedMenu } from "src/ui/menu/fixed-menu"; diff --git a/packages/editor/document-editor/src/ui/types/editor-types.ts b/packages/editor/document-editor/src/types/editor-types.ts similarity index 59% rename from packages/editor/document-editor/src/ui/types/editor-types.ts rename to packages/editor/document-editor/src/types/editor-types.ts index 10e9b16b6..5a28daf9e 100644 --- a/packages/editor/document-editor/src/ui/types/editor-types.ts +++ b/packages/editor/document-editor/src/types/editor-types.ts @@ -5,3 +5,9 @@ export interface DocumentDetails { last_updated_by: string; last_updated_at: Date; } +export interface IMarking { + type: "heading"; + level: number; + text: string; + sequence: number; +} diff --git a/packages/editor/document-editor/src/types/mark.ts b/packages/editor/document-editor/src/types/mark.ts new file mode 100644 index 000000000..e69de29bb diff --git a/packages/editor/document-editor/src/ui/types/menu-actions.d.ts b/packages/editor/document-editor/src/types/menu-actions.d.ts similarity index 100% rename from packages/editor/document-editor/src/ui/types/menu-actions.d.ts rename to packages/editor/document-editor/src/types/menu-actions.d.ts diff --git a/packages/editor/document-editor/src/ui/components/alert-label.tsx b/packages/editor/document-editor/src/ui/components/alert-label.tsx index 395ea2317..69b6dd02d 100644 --- a/packages/editor/document-editor/src/ui/components/alert-label.tsx +++ b/packages/editor/document-editor/src/ui/components/alert-label.tsx @@ -1,12 +1,11 @@ -import { Icon } from "lucide-react"; +import { LucideIconType } from "@plane/editor-core"; interface IAlertLabelProps { - Icon?: Icon; + Icon?: LucideIconType; backgroundColor: string; textColor?: string; label: string; } - export const AlertLabel = (props: IAlertLabelProps) => { const { Icon, backgroundColor, textColor, label } = props; diff --git a/packages/editor/document-editor/src/ui/components/content-browser.tsx b/packages/editor/document-editor/src/ui/components/content-browser.tsx index a21ca268f..18a50a5a8 100644 --- a/packages/editor/document-editor/src/ui/components/content-browser.tsx +++ b/packages/editor/document-editor/src/ui/components/content-browser.tsx @@ -1,7 +1,7 @@ -import { HeadingComp, HeadingThreeComp, SubheadingComp } from "./heading-component"; -import { IMarking } from ".."; +import { HeadingComp, HeadingThreeComp, SubheadingComp } from "src/ui/components/heading-component"; +import { IMarking } from "src/types/editor-types"; import { Editor } from "@tiptap/react"; -import { scrollSummary } from "../utils/editor-summary-utils"; +import { scrollSummary } from "src/utils/editor-summary-utils"; interface ContentBrowserProps { editor: Editor; diff --git a/packages/editor/document-editor/src/ui/components/editor-header.tsx b/packages/editor/document-editor/src/ui/components/editor-header.tsx index 7e2167ba0..3501785a7 100644 --- a/packages/editor/document-editor/src/ui/components/editor-header.tsx +++ b/packages/editor/document-editor/src/ui/components/editor-header.tsx @@ -1,13 +1,12 @@ import { Editor } from "@tiptap/react"; import { Archive, RefreshCw, Lock } from "lucide-react"; -import { IMarking } from ".."; -import { FixedMenu } from "../menu"; -import { UploadImage } from "@plane/editor-types"; -import { DocumentDetails } from "../types/editor-types"; -import { AlertLabel } from "./alert-label"; -import { IVerticalDropdownItemProps, VerticalDropdownMenu } from "./vertical-dropdown-menu"; -import { SummaryPopover } from "./summary-popover"; -import { InfoPopover } from "./info-popover"; +import { IMarking, DocumentDetails } from "src/types/editor-types"; +import { FixedMenu } from "src/ui/menu"; +import { UploadImage } from "@plane/editor-core"; +import { AlertLabel } from "src/ui/components/alert-label"; +import { IVerticalDropdownItemProps, VerticalDropdownMenu } from "src/ui/components/vertical-dropdown-menu"; +import { SummaryPopover } from "src/ui/components/summary-popover"; +import { InfoPopover } from "src/ui/components/info-popover"; interface IEditorHeader { editor: Editor; diff --git a/packages/editor/document-editor/src/ui/components/info-popover.tsx b/packages/editor/document-editor/src/ui/components/info-popover.tsx index 0d650667e..f78dd3473 100644 --- a/packages/editor/document-editor/src/ui/components/info-popover.tsx +++ b/packages/editor/document-editor/src/ui/components/info-popover.tsx @@ -2,7 +2,7 @@ import { useState } from "react"; import { usePopper } from "react-popper"; import { Calendar, History, Info } from "lucide-react"; // types -import { DocumentDetails } from "../types/editor-types"; +import { DocumentDetails } from "src/types/editor-types"; type Props = { documentDetails: DocumentDetails; diff --git a/packages/editor/document-editor/src/ui/components/page-renderer.tsx b/packages/editor/document-editor/src/ui/components/page-renderer.tsx index d25e9ca43..c2d001abe 100644 --- a/packages/editor/document-editor/src/ui/components/page-renderer.tsx +++ b/packages/editor/document-editor/src/ui/components/page-renderer.tsx @@ -1,7 +1,7 @@ import { EditorContainer, EditorContentWrapper } from "@plane/editor-core"; import { Editor } from "@tiptap/react"; import { useState } from "react"; -import { DocumentDetails } from "../types/editor-types"; +import { DocumentDetails } from "src/types/editor-types"; type IPageRenderer = { documentDetails: DocumentDetails; diff --git a/packages/editor/document-editor/src/ui/components/summary-popover.tsx b/packages/editor/document-editor/src/ui/components/summary-popover.tsx index 61361c049..d3ec64f1c 100644 --- a/packages/editor/document-editor/src/ui/components/summary-popover.tsx +++ b/packages/editor/document-editor/src/ui/components/summary-popover.tsx @@ -3,9 +3,9 @@ import { Editor } from "@tiptap/react"; import { usePopper } from "react-popper"; import { List } from "lucide-react"; // components -import { ContentBrowser } from "./content-browser"; +import { ContentBrowser } from "src/ui/components/content-browser"; // types -import { IMarking } from ".."; +import { IMarking } from "src/types/editor-types"; type Props = { editor: Editor; diff --git a/packages/editor/document-editor/src/ui/components/summary-side-bar.tsx b/packages/editor/document-editor/src/ui/components/summary-side-bar.tsx index b3bf23464..44ede3e8d 100644 --- a/packages/editor/document-editor/src/ui/components/summary-side-bar.tsx +++ b/packages/editor/document-editor/src/ui/components/summary-side-bar.tsx @@ -1,6 +1,6 @@ import { Editor } from "@tiptap/react"; -import { IMarking } from ".."; -import { ContentBrowser } from "./content-browser"; +import { IMarking } from "src/types/editor-types"; +import { ContentBrowser } from "src/ui/components/content-browser"; interface ISummarySideBarProps { editor: Editor; @@ -8,14 +8,12 @@ interface ISummarySideBarProps { sidePeekVisible: boolean; } -export const SummarySideBar = ({ editor, markings, sidePeekVisible }: ISummarySideBarProps) => { - return ( -
- -
- ); -}; +export const SummarySideBar = ({ editor, markings, sidePeekVisible }: ISummarySideBarProps) => ( +
+ +
+); diff --git a/packages/editor/document-editor/src/ui/components/vertical-dropdown-menu.tsx b/packages/editor/document-editor/src/ui/components/vertical-dropdown-menu.tsx index 93fea4730..43843e507 100644 --- a/packages/editor/document-editor/src/ui/components/vertical-dropdown-menu.tsx +++ b/packages/editor/document-editor/src/ui/components/vertical-dropdown-menu.tsx @@ -1,5 +1,6 @@ -import { Button, CustomMenu } from "@plane/ui"; -import { ChevronUp, Icon, MoreVertical } from "lucide-react"; +import { LucideIconType } from "@plane/editor-core"; +import { CustomMenu } from "@plane/ui"; +import { MoreVertical } from "lucide-react"; type TMenuItems = | "archive_page" @@ -14,7 +15,7 @@ type TMenuItems = export interface IVerticalDropdownItemProps { key: number; type: TMenuItems; - Icon: Icon; + Icon: LucideIconType; label: string; action: () => Promise | void; } @@ -23,27 +24,23 @@ export interface IVerticalDropdownMenuProps { items: IVerticalDropdownItemProps[]; } -const VerticalDropdownItem = ({ Icon, label, action }: IVerticalDropdownItemProps) => { - return ( - - -
{label}
- - ); -}; +const VerticalDropdownItem = ({ Icon, label, action }: IVerticalDropdownItemProps) => ( + + +
{label}
+ +); -export const VerticalDropdownMenu = ({ items }: IVerticalDropdownMenuProps) => { - return ( - } - > - {items.map((item, index) => ( - - ))} - - ); -}; +export const VerticalDropdownMenu = ({ items }: IVerticalDropdownMenuProps) => ( + } + > + {items.map((item) => ( + + ))} + +); diff --git a/packages/editor/document-editor/src/ui/extensions/index.tsx b/packages/editor/document-editor/src/ui/extensions/index.tsx index 968328a76..155245f9e 100644 --- a/packages/editor/document-editor/src/ui/extensions/index.tsx +++ b/packages/editor/document-editor/src/ui/extensions/index.tsx @@ -1,11 +1,11 @@ import Placeholder from "@tiptap/extension-placeholder"; -import { IssueWidgetExtension } from "./widgets/IssueEmbedWidget"; +import { IssueWidgetExtension } from "src/ui/extensions/widgets/issue-embed-widget"; -import { IIssueEmbedConfig } from "./widgets/IssueEmbedWidget/types"; +import { IIssueEmbedConfig } from "src/ui/extensions/widgets/issue-embed-widget/types"; import { SlashCommand, DragAndDrop } from "@plane/editor-extensions"; -import { ISlashCommandItem, UploadImage } from "@plane/editor-types"; -import { IssueSuggestions } from "./widgets/IssueEmbedSuggestionList"; +import { ISlashCommandItem, UploadImage } from "@plane/editor-core"; +import { IssueSuggestions } from "src/ui/extensions/widgets/issue-embed-suggestion-list"; import { LayersIcon } from "@plane/ui"; export const DocumentEditorExtensions = ( diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-items.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-items.tsx deleted file mode 100644 index b1f27ece3..000000000 --- a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-items.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { IIssueListSuggestion } from "."; - -export const getIssueSuggestionItems = (issueSuggestions: Array) => { - return ({ query }: { query: string }) => { - const search = query.toLowerCase(); - const filteredSuggestions = issueSuggestions.filter((item) => { - return ( - item.title.toLowerCase().includes(search) || - item.identifier.toLowerCase().includes(search) || - item.priority.toLowerCase().includes(search) - ); - }); - - return filteredSuggestions; - }; -}; diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/index.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/index.tsx similarity index 79% rename from packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/index.tsx rename to packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/index.tsx index 07a10031d..acc6213c2 100644 --- a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/index.tsx +++ b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/index.tsx @@ -1,7 +1,7 @@ import { Editor, Range } from "@tiptap/react"; -import { IssueEmbedSuggestions } from "./issue-suggestion-extension"; -import { getIssueSuggestionItems } from "./issue-suggestion-items"; -import { IssueListRenderer } from "./issue-suggestion-renderer"; +import { IssueEmbedSuggestions } from "src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-extension"; +import { getIssueSuggestionItems } from "src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-items"; +import { IssueListRenderer } from "src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-renderer"; import { v4 as uuidv4 } from "uuid"; export type CommandProps = { @@ -19,7 +19,7 @@ export interface IIssueListSuggestion { export const IssueSuggestions = (suggestions: any[]) => { const mappedSuggestions: IIssueListSuggestion[] = suggestions.map((suggestion): IIssueListSuggestion => { - let transactionId = uuidv4(); + const transactionId = uuidv4(); return { title: suggestion.name, priority: suggestion.priority.toString(), diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-extension.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-extension.tsx similarity index 100% rename from packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-extension.tsx rename to packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-extension.tsx diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-items.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-items.tsx new file mode 100644 index 000000000..df468f2ee --- /dev/null +++ b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-items.tsx @@ -0,0 +1,15 @@ +import { IIssueListSuggestion } from "src/ui/extensions/widgets/issue-embed-suggestion-list"; + +export const getIssueSuggestionItems = + (issueSuggestions: Array) => + ({ query }: { query: string }) => { + const search = query.toLowerCase(); + const filteredSuggestions = issueSuggestions.filter( + (item) => + item.title.toLowerCase().includes(search) || + item.identifier.toLowerCase().includes(search) || + item.priority.toLowerCase().includes(search) + ); + + return filteredSuggestions; + }; diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-renderer.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-renderer.tsx similarity index 99% rename from packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-renderer.tsx rename to packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-renderer.tsx index 487d4f075..0a166c3e3 100644 --- a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedSuggestionList/issue-suggestion-renderer.tsx +++ b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-suggestion-list/issue-suggestion-renderer.tsx @@ -171,7 +171,7 @@ const IssueSuggestionList = ({ section === currentSection && index === selectedIndex, } )} - key={index} + key={item.identifier} onClick={() => selectItem(index)} >
{item.identifier}
diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/index.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/index.tsx similarity index 55% rename from packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/index.tsx rename to packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/index.tsx index fb521efef..9bbb34aa5 100644 --- a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/index.tsx +++ b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/index.tsx @@ -1,5 +1,5 @@ -import { IssueWidget } from "./issue-widget-node"; -import { IIssueEmbedConfig } from "./types"; +import { IssueWidget } from "src/ui/extensions/widgets/issue-embed-widget/issue-widget-node"; +import { IIssueEmbedConfig } from "src/ui/extensions/widgets/issue-embed-widget/types"; interface IssueWidgetExtensionProps { issueEmbedConfig?: IIssueEmbedConfig; diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/issue-widget-card.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx similarity index 91% rename from packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/issue-widget-card.tsx rename to packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx index 18dad8cae..78554c26d 100644 --- a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/issue-widget-card.tsx +++ b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-card.tsx @@ -4,7 +4,7 @@ import { NodeViewWrapper } from "@tiptap/react"; import { Avatar, AvatarGroup, Loader, PriorityIcon } from "@plane/ui"; import { Calendar, AlertTriangle } from "lucide-react"; -const IssueWidgetCard = (props) => { +export const IssueWidgetCard = (props) => { const [loading, setLoading] = useState(1); const [issueDetails, setIssueDetails] = useState(); @@ -42,11 +42,9 @@ const IssueWidgetCard = (props) => {
- {issueDetails.assignee_details.map((assignee) => { - return ( - - ); - })} + {issueDetails.assignee_details.map((assignee) => ( + + ))}
{issueDetails.target_date && ( @@ -76,5 +74,3 @@ const IssueWidgetCard = (props) => { ); }; - -export default IssueWidgetCard; diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/issue-widget-node.tsx b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-node.tsx similarity index 94% rename from packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/issue-widget-node.tsx rename to packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-node.tsx index c30fe5e5b..c13637bd9 100644 --- a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/issue-widget-node.tsx +++ b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/issue-widget-node.tsx @@ -1,5 +1,5 @@ import { mergeAttributes, Node } from "@tiptap/core"; -import IssueWidgetCard from "./issue-widget-card"; +import { IssueWidgetCard } from "src/ui/extensions/widgets/issue-embed-widget/issue-widget-card"; import { ReactNodeViewRenderer } from "@tiptap/react"; export const IssueWidget = Node.create({ diff --git a/packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/types.ts b/packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/types.ts similarity index 100% rename from packages/editor/document-editor/src/ui/extensions/widgets/IssueEmbedWidget/types.ts rename to packages/editor/document-editor/src/ui/extensions/widgets/issue-embed-widget/types.ts diff --git a/packages/editor/document-editor/src/ui/index.tsx b/packages/editor/document-editor/src/ui/index.tsx index a99d1e6a8..df3554024 100644 --- a/packages/editor/document-editor/src/ui/index.tsx +++ b/packages/editor/document-editor/src/ui/index.tsx @@ -1,17 +1,16 @@ "use client"; import React, { useState } from "react"; -import { getEditorClassNames, useEditor } from "@plane/editor-core"; -import { DocumentEditorExtensions } from "./extensions"; -import { IDuplicationConfig, IPageArchiveConfig, IPageLockConfig } from "./types/menu-actions"; -import { EditorHeader } from "./components/editor-header"; -import { useEditorMarkings } from "./hooks/use-editor-markings"; -import { SummarySideBar } from "./components/summary-side-bar"; -import { DocumentDetails } from "./types/editor-types"; -import { PageRenderer } from "./components/page-renderer"; -import { getMenuOptions } from "./utils/menu-options"; +import { UploadImage, DeleteImage, RestoreImage, getEditorClassNames, useEditor } from "@plane/editor-core"; +import { DocumentEditorExtensions } from "src/ui/extensions"; +import { IDuplicationConfig, IPageArchiveConfig, IPageLockConfig } from "src/types/menu-actions"; +import { EditorHeader } from "src/ui/components/editor-header"; +import { useEditorMarkings } from "src/hooks/use-editor-markings"; +import { SummarySideBar } from "src/ui/components/summary-side-bar"; +import { DocumentDetails } from "src/types/editor-types"; +import { PageRenderer } from "src/ui/components/page-renderer"; +import { getMenuOptions } from "src/utils/menu-options"; import { useRouter } from "next/router"; -import { IEmbedConfig } from "./extensions/widgets/IssueEmbedWidget/types"; -import { UploadImage, DeleteImage, RestoreImage } from "@plane/editor-types"; +import { IEmbedConfig } from "src/ui/extensions/widgets/issue-embed-widget/types"; interface IDocumentEditor { // document info @@ -59,13 +58,6 @@ interface EditorHandle { setEditorValue: (content: string) => void; } -export interface IMarking { - type: "heading"; - level: number; - text: string; - sequence: number; -} - const DocumentEditor = ({ documentDetails, onChange, diff --git a/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx b/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx index f4b205484..cac42e1f9 100644 --- a/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx +++ b/packages/editor/document-editor/src/ui/menu/fixed-menu.tsx @@ -17,8 +17,8 @@ import { HeadingThreeItem, findTableAncestor, EditorMenuItem, + UploadImage, } from "@plane/editor-core"; -import { UploadImage } from "@plane/editor-types"; export type BubbleMenuItem = EditorMenuItem; diff --git a/packages/editor/document-editor/src/ui/readonly/index.tsx b/packages/editor/document-editor/src/ui/readonly/index.tsx index e7897755e..7445bfd6d 100644 --- a/packages/editor/document-editor/src/ui/readonly/index.tsx +++ b/packages/editor/document-editor/src/ui/readonly/index.tsx @@ -1,15 +1,15 @@ import { getEditorClassNames, useReadOnlyEditor } from "@plane/editor-core"; import { useRouter } from "next/router"; import { useState, forwardRef, useEffect } from "react"; -import { EditorHeader } from "../components/editor-header"; -import { PageRenderer } from "../components/page-renderer"; -import { SummarySideBar } from "../components/summary-side-bar"; -import { IssueWidgetExtension } from "../extensions/widgets/IssueEmbedWidget"; -import { IEmbedConfig } from "../extensions/widgets/IssueEmbedWidget/types"; -import { useEditorMarkings } from "../hooks/use-editor-markings"; -import { DocumentDetails } from "../types/editor-types"; -import { IPageArchiveConfig, IPageLockConfig, IDuplicationConfig } from "../types/menu-actions"; -import { getMenuOptions } from "../utils/menu-options"; +import { EditorHeader } from "src/ui/components/editor-header"; +import { PageRenderer } from "src/ui/components/page-renderer"; +import { SummarySideBar } from "src/ui/components/summary-side-bar"; +import { IssueWidgetExtension } from "src/ui/extensions/widgets/issue-embed-widget"; +import { IEmbedConfig } from "src/ui/extensions/widgets/issue-embed-widget/types"; +import { useEditorMarkings } from "src/hooks/use-editor-markings"; +import { DocumentDetails } from "src/types/editor-types"; +import { IPageArchiveConfig, IPageLockConfig, IDuplicationConfig } from "src/types/menu-actions"; +import { getMenuOptions } from "src/utils/menu-options"; interface IDocumentReadOnlyEditor { value: string; diff --git a/packages/editor/document-editor/src/ui/utils/editor-summary-utils.ts b/packages/editor/document-editor/src/utils/editor-summary-utils.ts similarity index 94% rename from packages/editor/document-editor/src/ui/utils/editor-summary-utils.ts rename to packages/editor/document-editor/src/utils/editor-summary-utils.ts index 248f439e3..b5160fddd 100644 --- a/packages/editor/document-editor/src/ui/utils/editor-summary-utils.ts +++ b/packages/editor/document-editor/src/utils/editor-summary-utils.ts @@ -1,5 +1,5 @@ import { Editor } from "@tiptap/react"; -import { IMarking } from ".."; +import { IMarking } from "src/types/editor-types"; function findNthH1(editor: Editor, n: number, level: number): number { let count = 0; diff --git a/packages/editor/document-editor/src/ui/utils/menu-actions.ts b/packages/editor/document-editor/src/utils/menu-actions.ts similarity index 100% rename from packages/editor/document-editor/src/ui/utils/menu-actions.ts rename to packages/editor/document-editor/src/utils/menu-actions.ts diff --git a/packages/editor/document-editor/src/ui/utils/menu-options.ts b/packages/editor/document-editor/src/utils/menu-options.ts similarity index 93% rename from packages/editor/document-editor/src/ui/utils/menu-options.ts rename to packages/editor/document-editor/src/utils/menu-options.ts index 0b4d02476..befed424d 100644 --- a/packages/editor/document-editor/src/ui/utils/menu-options.ts +++ b/packages/editor/document-editor/src/utils/menu-options.ts @@ -1,19 +1,9 @@ import { Editor } from "@tiptap/react"; -import { - Archive, - ArchiveIcon, - ArchiveRestoreIcon, - ClipboardIcon, - Copy, - Link, - Lock, - Unlock, - XCircle, -} from "lucide-react"; +import { Archive, ArchiveRestoreIcon, ClipboardIcon, Copy, Link, Lock, Unlock } from "lucide-react"; import { NextRouter } from "next/router"; -import { IVerticalDropdownItemProps } from "../components/vertical-dropdown-menu"; -import { IDuplicationConfig, IPageArchiveConfig, IPageLockConfig } from "../types/menu-actions"; -import { copyMarkdownToClipboard, CopyPageLink } from "./menu-actions"; +import { IVerticalDropdownItemProps } from "src/ui/components/vertical-dropdown-menu"; +import { IDuplicationConfig, IPageArchiveConfig, IPageLockConfig } from "src/types/menu-actions"; +import { copyMarkdownToClipboard, CopyPageLink } from "src/utils/menu-actions"; export interface MenuOptionsProps { editor: Editor; diff --git a/packages/editor/document-editor/tsconfig.json b/packages/editor/document-editor/tsconfig.json index 57d0e9a74..c15534037 100644 --- a/packages/editor/document-editor/tsconfig.json +++ b/packages/editor/document-editor/tsconfig.json @@ -1,5 +1,15 @@ { "extends": "tsconfig/react-library.json", - "include": ["src/**/*", "index.d.ts"], - "exclude": ["dist", "build", "node_modules"] + "include": [ + "src/**/*", + "index.d.ts" + ], + "exclude": [ + "dist", + "build", + "node_modules" + ], + "compilerOptions": { + "baseUrl": "." + } } diff --git a/packages/editor/extensions/package.json b/packages/editor/extensions/package.json index 48abd7701..dda0e58db 100644 --- a/packages/editor/extensions/package.json +++ b/packages/editor/extensions/package.json @@ -29,11 +29,10 @@ }, "dependencies": { "@plane/editor-core": "*", - "@plane/editor-types": "*", - "@tiptap/core": "^2.1.7", - "@tiptap/pm": "^2.1.7", - "@tiptap/react": "^2.1.7", - "@tiptap/suggestion": "^2.0.4", + "@tiptap/core": "^2.1.13", + "@tiptap/pm": "^2.1.13", + "@tiptap/react": "^2.1.13", + "@tiptap/suggestion": "^2.1.13", "eslint": "8.36.0", "eslint-config-next": "13.2.4", "lucide-react": "^0.294.0", diff --git a/packages/editor/extensions/src/extensions/slash-commands.tsx b/packages/editor/extensions/src/extensions/slash-commands.tsx index 92152b43a..4b12494b2 100644 --- a/packages/editor/extensions/src/extensions/slash-commands.tsx +++ b/packages/editor/extensions/src/extensions/slash-commands.tsx @@ -3,7 +3,6 @@ import { Editor, Range, Extension } from "@tiptap/core"; import Suggestion from "@tiptap/suggestion"; import { ReactRenderer } from "@tiptap/react"; import tippy from "tippy.js"; -import type { UploadImage, ISlashCommandItem, CommandProps } from "@plane/editor-types"; import { CaseSensitive, Code2, @@ -19,6 +18,9 @@ import { Table, } from "lucide-react"; import { + UploadImage, + ISlashCommandItem, + CommandProps, cn, insertTableCommand, toggleBlockquote, diff --git a/packages/editor/extensions/src/index.ts b/packages/editor/extensions/src/index.ts index 76461c2e6..c0532c594 100644 --- a/packages/editor/extensions/src/index.ts +++ b/packages/editor/extensions/src/index.ts @@ -1,2 +1,4 @@ -export { SlashCommand } from "./extensions/slash-commands"; -export { DragAndDrop } from "./extensions/drag-drop"; +import "src/styles/drag-drop.css"; + +export { SlashCommand } from "src/extensions/slash-commands"; +export { DragAndDrop } from "src/extensions/drag-drop"; diff --git a/packages/editor/extensions/src/styles/drag-drop.css b/packages/editor/extensions/src/styles/drag-drop.css new file mode 100644 index 000000000..d95a8654b --- /dev/null +++ b/packages/editor/extensions/src/styles/drag-drop.css @@ -0,0 +1,53 @@ +.drag-handle { + position: fixed; + opacity: 1; + transition: opacity ease-in 0.2s; + height: 18px; + width: 15px; + display: grid; + place-items: center; + z-index: 10; + cursor: grab; + border-radius: 2px; + background-color: rgb(var(--color-background-90)); +} + +.drag-handle:hover { + background-color: rgb(var(--color-background-80)); + transition: background-color 0.2s; +} + +.drag-handle.hidden { + opacity: 0; + pointer-events: none; +} + +@media screen and (max-width: 600px) { + .drag-handle { + display: none; + pointer-events: none; + } +} + +.drag-handle-container { + height: 15px; + width: 15px; + cursor: grab; + display: grid; + place-items: center; +} + +.drag-handle-dots { + height: 100%; + width: 12px; + display: grid; + grid-template-columns: repeat(2, 1fr); + place-items: center; +} + +.drag-handle-dot { + height: 2.75px; + width: 3px; + background-color: rgba(var(--color-text-200)); + border-radius: 50%; +} diff --git a/packages/editor/extensions/tsconfig.json b/packages/editor/extensions/tsconfig.json index 57d0e9a74..c15534037 100644 --- a/packages/editor/extensions/tsconfig.json +++ b/packages/editor/extensions/tsconfig.json @@ -1,5 +1,15 @@ { "extends": "tsconfig/react-library.json", - "include": ["src/**/*", "index.d.ts"], - "exclude": ["dist", "build", "node_modules"] + "include": [ + "src/**/*", + "index.d.ts" + ], + "exclude": [ + "dist", + "build", + "node_modules" + ], + "compilerOptions": { + "baseUrl": "." + } } diff --git a/packages/editor/lite-text-editor/package.json b/packages/editor/lite-text-editor/package.json index bcaa36a02..7882d60ff 100644 --- a/packages/editor/lite-text-editor/package.json +++ b/packages/editor/lite-text-editor/package.json @@ -30,8 +30,7 @@ }, "dependencies": { "@plane/editor-core": "*", - "@plane/ui": "*", - "@plane/editor-types": "*" + "@plane/ui": "*" }, "devDependencies": { "@types/node": "18.15.3", diff --git a/packages/editor/lite-text-editor/src/index.ts b/packages/editor/lite-text-editor/src/index.ts index f09ce54a4..c37d45039 100644 --- a/packages/editor/lite-text-editor/src/index.ts +++ b/packages/editor/lite-text-editor/src/index.ts @@ -1,3 +1,3 @@ -export { LiteTextEditor, LiteTextEditorWithRef } from "./ui"; -export { LiteReadOnlyEditor, LiteReadOnlyEditorWithRef } from "./ui/read-only"; -export type { IMentionSuggestion, IMentionHighlight } from "@plane/editor-types"; +export { LiteTextEditor, LiteTextEditorWithRef } from "src/ui"; +export { LiteReadOnlyEditor, LiteReadOnlyEditorWithRef } from "src/ui/read-only"; +export type { IMentionSuggestion, IMentionHighlight } from "@plane/editor-core"; 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 4531e9516..527fd5674 100644 --- a/packages/editor/lite-text-editor/src/ui/extensions/index.tsx +++ b/packages/editor/lite-text-editor/src/ui/extensions/index.tsx @@ -1,4 +1,4 @@ -import { EnterKeyExtension } from "./enter-key-extension"; +import { EnterKeyExtension } from "src/ui/extensions/enter-key-extension"; export const LiteTextEditorExtensions = (onEnterKeyPress?: () => void) => [ // 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 0eb0e20df..57774ab5d 100644 --- a/packages/editor/lite-text-editor/src/ui/index.tsx +++ b/packages/editor/lite-text-editor/src/ui/index.tsx @@ -1,8 +1,16 @@ import * as React from "react"; -import { EditorContainer, EditorContentWrapper, getEditorClassNames, useEditor } from "@plane/editor-core"; -import { FixedMenu } from "./menus/fixed-menu"; -import { LiteTextEditorExtensions } from "./extensions"; -import { UploadImage, DeleteImage, IMentionSuggestion, RestoreImage } from "@plane/editor-types"; +import { + UploadImage, + DeleteImage, + IMentionSuggestion, + RestoreImage, + EditorContainer, + EditorContentWrapper, + getEditorClassNames, + useEditor, +} from "@plane/editor-core"; +import { FixedMenu } from "src/ui/menus/fixed-menu"; +import { LiteTextEditorExtensions } from "src/ui/extensions"; interface ILiteTextEditor { value: string; 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 95bd8d6dd..71ad4e0e1 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 @@ -9,27 +9,21 @@ import { ImageItem, isCellSelection, ItalicItem, + LucideIconType, NumberedListItem, QuoteItem, StrikeThroughItem, TableItem, UnderLineItem, + UploadImage, } from "@plane/editor-core"; import { Tooltip } from "@plane/ui"; -import type { SVGProps } from "react"; -import { UploadImage } from "@plane/editor-types"; -interface LucideProps extends Partial> { - size?: string | number; - absoluteStrokeWidth?: boolean; -} - -type LucideIcon = (props: LucideProps) => JSX.Element; export interface BubbleMenuItem { name: string; isActive: () => boolean; command: () => void; - icon: LucideIcon; + icon: LucideIconType; } type EditorBubbleMenuProps = { @@ -127,8 +121,8 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
- {basicTextFormattingItems.map((item, index) => ( - {item.name}}> + {basicTextFormattingItems.map((item) => ( + {item.name}}>
- {listFormattingItems.map((item, index) => ( - {item.name}}> + {listFormattingItems.map((item) => ( + {item.name}}>
- {userActionItems.map((item, index) => ( - {item.name}}> + {userActionItems.map((item) => ( + {item.name}}>
- {complexItems.map((item, index) => ( - {item.name}}> + {complexItems.map((item) => ( + {item.name}}>
- } - position={position} - renderTarget={({ isOpen: isTooltipOpen, ref: eleReference, ...tooltipProps }) => - React.cloneElement(children, { - ref: eleReference, - ...tooltipProps, - ...children.props, - }) - } - /> - ); -}; diff --git a/packages/editor/lite-text-editor/tsconfig.json b/packages/editor/lite-text-editor/tsconfig.json index 57d0e9a74..c15534037 100644 --- a/packages/editor/lite-text-editor/tsconfig.json +++ b/packages/editor/lite-text-editor/tsconfig.json @@ -1,5 +1,15 @@ { "extends": "tsconfig/react-library.json", - "include": ["src/**/*", "index.d.ts"], - "exclude": ["dist", "build", "node_modules"] + "include": [ + "src/**/*", + "index.d.ts" + ], + "exclude": [ + "dist", + "build", + "node_modules" + ], + "compilerOptions": { + "baseUrl": "." + } } diff --git a/packages/editor/rich-text-editor/package.json b/packages/editor/rich-text-editor/package.json index baac553b8..245248d45 100644 --- a/packages/editor/rich-text-editor/package.json +++ b/packages/editor/rich-text-editor/package.json @@ -31,9 +31,8 @@ "dependencies": { "@plane/editor-core": "*", "@plane/editor-extensions": "*", - "@plane/editor-types": "*", - "@tiptap/core": "^2.1.11", - "@tiptap/extension-placeholder": "^2.1.11", + "@tiptap/core": "^2.1.13", + "@tiptap/extension-placeholder": "^2.1.13", "lucide-react": "^0.294.0" }, "devDependencies": { diff --git a/packages/editor/rich-text-editor/src/index.ts b/packages/editor/rich-text-editor/src/index.ts index 7dc0783d9..eb745c45b 100644 --- a/packages/editor/rich-text-editor/src/index.ts +++ b/packages/editor/rich-text-editor/src/index.ts @@ -1,4 +1,4 @@ -export { RichTextEditor, RichTextEditorWithRef } from "./ui"; -export { RichReadOnlyEditor, RichReadOnlyEditorWithRef } from "./ui/read-only"; -export type { RichTextEditorProps, IRichTextEditor } from "./ui"; -export type { IMentionHighlight, IMentionSuggestion } from "@plane/editor-types"; +export { RichTextEditor, RichTextEditorWithRef } from "src/ui"; +export { RichReadOnlyEditor, RichReadOnlyEditorWithRef } from "src/ui/read-only"; +export type { RichTextEditorProps, IRichTextEditor } from "src/ui"; +export type { IMentionHighlight, IMentionSuggestion } from "@plane/editor-core"; diff --git a/packages/editor/rich-text-editor/src/ui/extensions/index.tsx b/packages/editor/rich-text-editor/src/ui/extensions/index.tsx index 9a9d406b7..1e81c8173 100644 --- a/packages/editor/rich-text-editor/src/ui/extensions/index.tsx +++ b/packages/editor/rich-text-editor/src/ui/extensions/index.tsx @@ -1,7 +1,6 @@ -import { SlashCommand } from "@plane/editor-extensions"; +import { SlashCommand, DragAndDrop } from "@plane/editor-extensions"; import Placeholder from "@tiptap/extension-placeholder"; -import { DragAndDrop } from "@plane/editor-extensions"; -import { UploadImage } from "@plane/editor-types"; +import { UploadImage } from "@plane/editor-core"; export const RichTextEditorExtensions = ( uploadFile: UploadImage, diff --git a/packages/editor/rich-text-editor/src/ui/index.tsx b/packages/editor/rich-text-editor/src/ui/index.tsx index 5d34eb85d..17d701600 100644 --- a/packages/editor/rich-text-editor/src/ui/index.tsx +++ b/packages/editor/rich-text-editor/src/ui/index.tsx @@ -1,9 +1,17 @@ "use client"; import * as React from "react"; -import { EditorContainer, EditorContentWrapper, getEditorClassNames, useEditor } from "@plane/editor-core"; -import { EditorBubbleMenu } from "./menus/bubble-menu"; -import { RichTextEditorExtensions } from "./extensions"; -import { DeleteImage, IMentionSuggestion, RestoreImage, UploadImage } from "@plane/editor-types"; +import { + DeleteImage, + EditorContainer, + EditorContentWrapper, + getEditorClassNames, + IMentionSuggestion, + RestoreImage, + UploadImage, + useEditor, +} from "@plane/editor-core"; +import { EditorBubbleMenu } from "src/ui/menus/bubble-menu"; +import { RichTextEditorExtensions } from "src/ui/extensions"; export type IRichTextEditor = { value: string; diff --git a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx index 7e9c834a7..2e7dd25b8 100644 --- a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx +++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx @@ -1,15 +1,15 @@ import { BubbleMenu, BubbleMenuProps, isNodeSelection } from "@tiptap/react"; import { FC, useEffect, useState } from "react"; -import { BoldIcon } from "lucide-react"; -import { NodeSelector } from "./node-selector"; -import { LinkSelector } from "./link-selector"; +import { NodeSelector } from "src/ui/menus/bubble-menu/node-selector"; +import { LinkSelector } from "src/ui/menus/bubble-menu/link-selector"; import { BoldItem, cn, CodeItem, isCellSelection, ItalicItem, + LucideIconType, StrikeThroughItem, UnderLineItem, } from "@plane/editor-core"; @@ -18,7 +18,7 @@ export interface BubbleMenuItem { name: string; isActive: () => boolean; command: () => void; - icon: typeof BoldIcon; + icon: LucideIconType; } type EditorBubbleMenuProps = Omit; @@ -117,9 +117,9 @@ export const EditorBubbleMenu: FC = (props: any) => { }} />
- {items.map((item, index) => ( + {items.map((item) => (