From d9c3407eeda0294fba5fe0b759f26a4f699e8abc Mon Sep 17 00:00:00 2001 From: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com> Date: Tue, 10 Oct 2023 14:35:07 +0530 Subject: [PATCH] fixed ts issues with link plugin --- packages/editor/core/Readme.md | 36 +++++++++++++++++-- .../editor/core/src/lib/editor-commands.ts | 9 +++++ .../ui/menus/bubble-menu/link-selector.tsx | 6 ++-- 3 files changed, 45 insertions(+), 6 deletions(-) diff --git a/packages/editor/core/Readme.md b/packages/editor/core/Readme.md index fd82856f7..ee272c348 100644 --- a/packages/editor/core/Readme.md +++ b/packages/editor/core/Readme.md @@ -2,11 +2,41 @@ ## Description -The `@plane/editor-core` package serves as the foundation for our editor system. It provides the base functionality for our other editor packages, but it will not be used directly in any of the projects. +The `@plane/editor-core` package serves as the foundation for our editor system. It provides the base functionality for our other editor packages, but it will not be used directly in any of the projects but only for extending other editors. -## Key Features +## Utilities + +We provide a wide range of utilities for extending the core itself. + +1. Merging classes and custom styling +2. Adding new extensions +3. Adding custom props +4. Base menu items, and their commands + +This allows for extensive customization and flexibility in the Editors created using our `editor-core` package. + +### Here's a detailed overview of what's exported + + +## Core features -- **Extensive Utilities**: We provide a wide range of utilities for extending the core itself. These include merging classes, adding new extensions, custom props, menu items, and their commands. This allows for extensive customization and flexibility in the Editors created using our `editor-core` package. - **Content Trimming**: The Editor’s content is now automatically trimmed of empty line breaks from the start and end before submitting it to the backend. This ensures cleaner, more consistent data. - **Value Cleaning**: The Editor’s value is cleaned at the editor core level, eliminating the need for additional validation before sending from our app. This results in cleaner code and less potential for errors. - **Turbo Pipeline**: We have added a turbo pipeline for both dev and build tasks for the editor package. This results in faster, more efficient development and build processes. + +## Base extensions included + +- BulletList +- OrderedList +- Blockquote +- Code +- Gapcursor +- Link +- Image +- Basic Marks + - Underline + - TextStyle + - Color +- TaskList +- Markdown +- Table \ No newline at end of file diff --git a/packages/editor/core/src/lib/editor-commands.ts b/packages/editor/core/src/lib/editor-commands.ts index d2ed73ae3..e00146b6d 100644 --- a/packages/editor/core/src/lib/editor-commands.ts +++ b/packages/editor/core/src/lib/editor-commands.ts @@ -46,6 +46,14 @@ export const insertTableCommand = (editor: Editor, range?: Range) => { else editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(); }; +export const unsetLinkEditor = (editor: Editor) => { + editor.chain().focus().unsetLink().run(); +}; + +export const setLinkEditor = (editor: Editor, url: string) => { + editor.chain().focus().setLink({ href: url }).run(); +}; + export const insertImageCommand = (editor: Editor, uploadFile: UploadImage, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void, range?: Range) => { if (range) editor.chain().focus().deleteRange(range).run(); const input = document.createElement("input"); @@ -60,3 +68,4 @@ export const insertImageCommand = (editor: Editor, uploadFile: UploadImage, setI }; input.click(); }; + diff --git a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx index 1bccaa1ed..7dddc9d98 100644 --- a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx +++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/link-selector.tsx @@ -1,7 +1,7 @@ import { Editor } from "@tiptap/core"; import { Check, Trash } from "lucide-react"; import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from "react"; -import { cn, isValidHttpUrl } from "@plane/editor-core"; +import { cn, isValidHttpUrl, setLinkEditor, unsetLinkEditor, } from "@plane/editor-core"; interface LinkSelectorProps { editor: Editor; @@ -16,7 +16,7 @@ export const LinkSelector: FC = ({ editor, isOpen, setIsOpen const input = inputRef.current; const url = input?.value; if (url && isValidHttpUrl(url)) { - editor.chain().focus().setLink({ href: url }).run(); + setLinkEditor(editor, url); setIsOpen(false); } }, [editor, inputRef, setIsOpen]); @@ -68,7 +68,7 @@ export const LinkSelector: FC = ({ editor, isOpen, setIsOpen type="button" className="flex items-center rounded-sm p-1 text-red-600 transition-all hover:bg-red-100 dark:hover:bg-red-800" onClick={() => { - editor.chain().focus().unsetLink().run(); + unsetLinkEditor(editor); setIsOpen(false); }} >