fixed global css issue with highlight js

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";

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;
 }

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,

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) => {
               >
                 <Icon
                   iconName={access.icon}
-                  className={`w-4 h-4 -mt-1 ${props.accessValue === access.key
+                  className={`w-4 h-4 -mt-1 ${props.commentAccessSpecifier?.accessValue === access.key
                     ? "!text-custom-text-100"
                     : "!text-custom-text-400"
                     }`}

packages/editor/lite-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,

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",

packages/editor/rich-text-editor/src/index.ts

@@ -1 +1,3 @@
+import "./styles/github-dark.css";
+
 export { RichTextEditor, RichTextEditorWithRef } from "@/ui";

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}

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,
+    }),
   ];

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,

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: {