From 3b9c29cfd42f3a30893d5132120d1c721e51f7dc Mon Sep 17 00:00:00 2001 From: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com> Date: Wed, 20 Sep 2023 11:26:16 +0530 Subject: [PATCH] exported tiptap editor with and without ref --- packages/editor/package.json | 13 +++- packages/editor/src/index.ts | 2 +- packages/editor/src/ui/editor/index.tsx | 77 ++++++++++++---------- packages/editor/tailwind.config.js | 2 +- web/components/issues/description-form.tsx | 4 +- web/package.json | 4 +- web/tailwind.config.js | 2 +- 7 files changed, 61 insertions(+), 43 deletions(-) diff --git a/packages/editor/package.json b/packages/editor/package.json index b27a020ac..dac6c7164 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -1,5 +1,5 @@ { - "name": "@plane/editor", + "name": "plane-editor", "version": "0.0.1", "description": "Rich Text Editor that powers Plane", "main": "./dist/index.js", @@ -69,7 +69,7 @@ "eslint": "^7.32.0", "postcss": "^8.4.29", "react": "^18.2.0", - "tailwind-config": "*", + "tailwind-config-custom": "*", "tsconfig": "*", "tsup": "^7.2.0", "typescript": "4.9.5" @@ -80,5 +80,12 @@ "markdown", "nextjs", "react" - ] + ], + "typesVersions": { + "*": { + "*": [ + "src/*" + ] + } + } } diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts index 2141d356b..14c8c2656 100644 --- a/packages/editor/src/index.ts +++ b/packages/editor/src/index.ts @@ -1,4 +1,4 @@ import "@/styles/tailwind.css"; import "@/styles/editor.css"; -export { TipTapEditor } from "@/ui/editor"; +export { TiptapEditor, TiptapEditorWithRef } from "@/ui/editor"; diff --git a/packages/editor/src/ui/editor/index.tsx b/packages/editor/src/ui/editor/index.tsx index e296d400a..a24c6ac44 100644 --- a/packages/editor/src/ui/editor/index.tsx +++ b/packages/editor/src/ui/editor/index.tsx @@ -10,8 +10,9 @@ import { ImageResizer } from '@/ui/editor/extensions/image/image-resize'; import { TiptapEditorProps } from '@/ui/editor/props'; import { UploadImage } from '@/types/upload-image'; import { DeleteImage } from '@/types/delete-image'; +import { cn } from '@/lib/utils'; -export interface ITipTapRichTextEditor { +interface ITiptapEditor { value: string; uploadFile: UploadImage; deleteFile: DeleteImage; @@ -28,28 +29,37 @@ export interface ITipTapRichTextEditor { debouncedUpdatesEnabled?: boolean; } -const Tiptap = (props: ITipTapRichTextEditor) => { - const { - onChange, - debouncedUpdatesEnabled, - forwardedRef, - editable, - setIsSubmitting, - setShouldShowAlert, - editorContentCustomClassNames, - value, - uploadFile, - deleteFile, - noBorder, - workspaceSlug, - borderOnFocus, - customClassName, - } = props; +interface TiptapProps extends ITiptapEditor { + forwardedRef?: React.Ref; +} +interface EditorHandle { + clearEditor: () => void; + setEditorValue: (content: string) => void; +} + +const DEBOUNCE_DELAY = 1500; + +const TiptapEditor = ({ + onChange, + debouncedUpdatesEnabled, + editable, + setIsSubmitting, + setShouldShowAlert, + editorContentCustomClassNames, + value, + uploadFile, + deleteFile, + noBorder, + workspaceSlug, + borderOnFocus, + customClassName, + forwardedRef, +}: TiptapProps) => { const editor = useEditor({ editable: editable ?? true, editorProps: TiptapEditorProps(workspaceSlug, uploadFile, setIsSubmitting), - // @ts-ignore + // @ts-expect-error extensions: TiptapExtensions(workspaceSlug, uploadFile, deleteFile, setIsSubmitting), content: (typeof value === "string" && value.trim() !== "") ? value : "

", onUpdate: async ({ editor }) => { @@ -65,6 +75,7 @@ const Tiptap = (props: ITipTapRichTextEditor) => { }); const editorRef: React.MutableRefObject = useRef(null); + editorRef.current = editor; useImperativeHandle(forwardedRef, () => ({ clearEditor: () => { @@ -76,19 +87,19 @@ const Tiptap = (props: ITipTapRichTextEditor) => { })); const debouncedUpdates = useDebouncedCallback(async ({ onChange, editor }) => { - setTimeout(async () => { - if (onChange) { - onChange(editor.getJSON(), editor.getHTML()); - } - }, 500); - }, 1000); + if (onChange) { + onChange(editor.getJSON(), editor.getHTML()); + } + }, DEBOUNCE_DELAY); - const editorClassNames = `relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md - ${noBorder ? "" : "border border-custom-border-200"} ${borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0" - } ${customClassName}`; + const editorClassNames = cn( + 'relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md', + noBorder ? '' : 'border border-custom-border-200', + borderOnFocus ? 'focus:border border-custom-border-300' : 'focus:border-0', + customClassName + ); if (!editor) return null; - editorRef.current = editor; return (
{ ); }; -const TipTapEditor = forwardRef((props, ref) => ( - +const TiptapEditorWithRef = forwardRef((props, ref) => ( + )); -TipTapEditor.displayName = "TipTapEditor"; +TiptapEditorWithRef.displayName = "TiptapEditorWithRef"; -export { TipTapEditor }; +export { TiptapEditor, TiptapEditorWithRef }; diff --git a/packages/editor/tailwind.config.js b/packages/editor/tailwind.config.js index 12079a19b..f32063158 100644 --- a/packages/editor/tailwind.config.js +++ b/packages/editor/tailwind.config.js @@ -1,4 +1,4 @@ -const sharedConfig = require("tailwind-config/tailwind.config.js"); +const sharedConfig = require("tailwind-config-custom/tailwind.config.js"); module.exports = { // prefix ui lib classes to avoid conflicting with the app diff --git a/web/components/issues/description-form.tsx b/web/components/issues/description-form.tsx index 6f80a7d4b..8f3cb65f4 100644 --- a/web/components/issues/description-form.tsx +++ b/web/components/issues/description-form.tsx @@ -9,7 +9,7 @@ import { useDebouncedCallback } from "use-debounce"; import { TextArea } from "components/ui"; // types import { IIssue } from "types"; -import { TipTapEditor } from "@plane/editor" +import { TiptapEditor } from "plane-editor" import fileService from "services/file.service"; export interface IssueDescriptionFormValues { @@ -134,7 +134,7 @@ export const IssueDescriptionForm: FC = ({ if (!value) return <>; return ( -