From b5228bb0efb072e5292f62b764177a110283accb Mon Sep 17 00:00:00 2001 From: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com> Date: Mon, 2 Oct 2023 14:15:16 +0530 Subject: [PATCH] fixed global css issue with highlight js --- packages/editor/core/src/index.ts | 1 - .../editor/core/src/ui/hooks/useEditor.tsx | 4 +- packages/editor/core/tsup.config.ts | 2 +- .../src/ui/menus/fixed-menu/index.tsx | 4 +- .../src/ui/{menus/fixed-menu => }/tooltip.tsx | 0 .../editor/lite-text-editor/tsup.config.ts | 2 +- packages/editor/rich-text-editor/package.json | 13 ++++-- packages/editor/rich-text-editor/src/index.ts | 2 + .../src/styles/github-dark.css | 2 + .../src/ui/extensions/index.tsx | 46 +++++++++++++++++-- .../editor/rich-text-editor/tsup.config.ts | 2 +- .../tailwind-config-custom/tailwind.config.js | 2 + 12 files changed, 65 insertions(+), 15 deletions(-) rename packages/editor/lite-text-editor/src/ui/{menus/fixed-menu => }/tooltip.tsx (100%) create mode 100644 packages/editor/rich-text-editor/src/styles/github-dark.css diff --git a/packages/editor/core/src/index.ts b/packages/editor/core/src/index.ts index 1fc9b618c..8b72e0bf3 100644 --- a/packages/editor/core/src/index.ts +++ b/packages/editor/core/src/index.ts @@ -2,7 +2,6 @@ import "@/styles/tailwind.css"; import "@/styles/editor.css"; export { startImageUpload } from "@/ui/plugins/upload-image"; -// export { TiptapEditor, TiptapEditorWithRef } from "@/ui"; export { useEditor } from "@/ui/hooks/useEditor"; export { cn } from "@/lib/utils"; export { getEditorClassNames } from "@/lib/utils"; diff --git a/packages/editor/core/src/ui/hooks/useEditor.tsx b/packages/editor/core/src/ui/hooks/useEditor.tsx index cec52d25f..66d904cf1 100644 --- a/packages/editor/core/src/ui/hooks/useEditor.tsx +++ b/packages/editor/core/src/ui/hooks/useEditor.tsx @@ -1,4 +1,4 @@ -import { useEditor as useCustomEditor, Editor, Extension } from "@tiptap/react"; +import { useEditor as useCustomEditor, Editor, Extension, Node, Mark } from "@tiptap/react"; import { useImperativeHandle, useRef, MutableRefObject, forwardRef } from "react"; import { useDebouncedCallback } from "use-debounce"; import { UploadImage } from '@/types/upload-image'; @@ -18,7 +18,7 @@ interface CustomEditorProps { deleteFile: DeleteImage; debouncedUpdatesEnabled?: boolean; onChange?: (json: any, html: string) => void; - extensions?: Extension[]; + extensions?: any; editorProps?: EditorProps; forwardedRef?: any; } diff --git a/packages/editor/core/tsup.config.ts b/packages/editor/core/tsup.config.ts index 5e89e04af..907f339a1 100644 --- a/packages/editor/core/tsup.config.ts +++ b/packages/editor/core/tsup.config.ts @@ -3,7 +3,7 @@ import { defineConfig, Options } from "tsup"; export default defineConfig((options: Options) => ({ entry: ["src/index.ts"], format: ["cjs", "esm"], - dts: true, + dts: false, clean: false, external: ["react"], injectStyle: true, 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 0cece1d58..cc3205238 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 @@ -2,8 +2,8 @@ import { Editor } from "@tiptap/react"; import { BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon } from "lucide-react"; import { cn } from "@plane/editor-core"; -import { Tooltip } from "./tooltip"; import { Icon } from "./icon"; +import { Tooltip } from "@/ui/tooltip"; export interface BubbleMenuItem { name: string; @@ -81,7 +81,7 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => { > ({ entry: ["src/index.ts"], format: ["cjs", "esm"], - dts: true, + dts: false, clean: false, external: ["react"], injectStyle: true, diff --git a/packages/editor/rich-text-editor/package.json b/packages/editor/rich-text-editor/package.json index 27ca22ac4..2c7d4ff4f 100644 --- a/packages/editor/rich-text-editor/package.json +++ b/packages/editor/rich-text-editor/package.json @@ -24,19 +24,24 @@ "react": "^18.2.0" }, "dependencies": { + "@plane/editor-core": "*", + "@tiptap/core": "^2.1.11", + "@tiptap/extension-code-block-lowlight": "^2.1.11", + "@tiptap/extension-horizontal-rule": "^2.1.11", + "@tiptap/extension-placeholder": "^2.1.11", "class-variance-authority": "^0.7.0", "clsx": "^1.2.1", - "lowlight": "^2.9.0", + "highlight.js": "^11.8.0", + "lowlight": "^3.0.0", "lucide-react": "^0.244.0", "next": "12.3.2", "react": "18.2.0", - "react-dom": "18.2.0", - "@plane/editor-core": "*" + "react-dom": "18.2.0" }, "devDependencies": { "@types/node": "18.15.3", - "@types/react-dom": "18.0.11", "@types/react": "^18.2.5", + "@types/react-dom": "18.0.11", "eslint": "^7.32.0", "postcss": "^8.4.29", "react": "^18.2.0", diff --git a/packages/editor/rich-text-editor/src/index.ts b/packages/editor/rich-text-editor/src/index.ts index eeca9f837..b5196a8b5 100644 --- a/packages/editor/rich-text-editor/src/index.ts +++ b/packages/editor/rich-text-editor/src/index.ts @@ -1 +1,3 @@ +import "./styles/github-dark.css"; + export { RichTextEditor, RichTextEditorWithRef } from "@/ui"; diff --git a/packages/editor/rich-text-editor/src/styles/github-dark.css b/packages/editor/rich-text-editor/src/styles/github-dark.css new file mode 100644 index 000000000..20a7f4e66 --- /dev/null +++ b/packages/editor/rich-text-editor/src/styles/github-dark.css @@ -0,0 +1,2 @@ +pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px} +.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c} 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 7c394b53e..69f89e2f1 100644 --- a/packages/editor/rich-text-editor/src/ui/extensions/index.tsx +++ b/packages/editor/rich-text-editor/src/ui/extensions/index.tsx @@ -1,20 +1,60 @@ import HorizontalRule from "@tiptap/extension-horizontal-rule"; import Placeholder from "@tiptap/extension-placeholder"; import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight"; -import { lowlight } from "lowlight/lib/core"; +import { common, createLowlight } from 'lowlight' import { InputRule } from "@tiptap/core"; import ts from "highlight.js/lib/languages/typescript"; -import "highlight.js/styles/github-dark.css"; +// import "highlight.js/styles/github-dark.css"; import SlashCommand from "./slash-command"; import { UploadImage } from ".."; -lowlight.registerLanguage("ts", ts); +const lowlight = createLowlight(common) +lowlight.register("ts", ts); export const RichTextEditorExtensions = ( uploadFile: UploadImage, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void ) => [ + HorizontalRule.extend({ + addInputRules() { + return [ + new InputRule({ + find: /^(?:---|—-|___\s|\*\*\*\s)$/, + handler: ({ state, range, commands }) => { + commands.splitBlock(); + + const attributes = {}; + const { tr } = state; + const start = range.from; + const end = range.to; + // @ts-ignore + tr.replaceWith(start - 1, end, this.type.create(attributes)); + }, + }), + ]; + }, + }).configure({ + HTMLAttributes: { + class: "mb-6 border-t border-custom-border-300", + }, + }), SlashCommand(uploadFile, setIsSubmitting), + CodeBlockLowlight.configure({ + lowlight, + }), + Placeholder.configure({ + placeholder: ({ node }) => { + if (node.type.name === "heading") { + return `Heading ${node.attrs.level}`; + } + if (node.type.name === "image" || node.type.name === "table") { + return ""; + } + + return "Press '/' for commands..."; + }, + includeChildren: true, + }), ]; diff --git a/packages/editor/rich-text-editor/tsup.config.ts b/packages/editor/rich-text-editor/tsup.config.ts index 5e89e04af..907f339a1 100644 --- a/packages/editor/rich-text-editor/tsup.config.ts +++ b/packages/editor/rich-text-editor/tsup.config.ts @@ -3,7 +3,7 @@ import { defineConfig, Options } from "tsup"; export default defineConfig((options: Options) => ({ entry: ["src/index.ts"], format: ["cjs", "esm"], - dts: true, + dts: false, clean: false, external: ["react"], injectStyle: true, diff --git a/packages/tailwind-config-custom/tailwind.config.js b/packages/tailwind-config-custom/tailwind.config.js index 061168c4f..b58baa284 100644 --- a/packages/tailwind-config-custom/tailwind.config.js +++ b/packages/tailwind-config-custom/tailwind.config.js @@ -1,5 +1,6 @@ const convertToRGB = (variableName) => `rgba(var(${variableName}))`; +/** @type {import('tailwindcss').Config} */ module.exports = { darkMode: "class", content: [ @@ -8,6 +9,7 @@ module.exports = { "./layouts/**/*.tsx", "./pages/**/*.tsx", "./ui/**/*.tsx", + "../../packages/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {