From b1c6eaf2f04453c989bf46ac6c16ee2f76276fd4 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Mon, 14 Aug 2023 18:51:54 +0530 Subject: [PATCH] chore: update custom css variables --- .../components/tiptap/bubble-menu/index.tsx | 14 +++------- .../tiptap/bubble-menu/link-selector.tsx | 15 ++++------ .../tiptap/bubble-menu/node-selector.tsx | 28 +++++++------------ .../components/tiptap/extensions/index.tsx | 25 ++++++++--------- .../tiptap/plugins/upload-image.tsx | 26 ++++++++--------- .../components/tiptap/slash-command/index.tsx | 8 +++--- 6 files changed, 47 insertions(+), 69 deletions(-) diff --git a/apps/app/components/tiptap/bubble-menu/index.tsx b/apps/app/components/tiptap/bubble-menu/index.tsx index a70481b88..a3f11049b 100644 --- a/apps/app/components/tiptap/bubble-menu/index.tsx +++ b/apps/app/components/tiptap/bubble-menu/index.tsx @@ -1,16 +1,10 @@ import { BubbleMenu, BubbleMenuProps } from "@tiptap/react"; import { FC, useState } from "react"; -import { - BoldIcon, - ItalicIcon, - UnderlineIcon, - StrikethroughIcon, - CodeIcon, -} from "lucide-react"; +import { BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon } from "lucide-react"; import { NodeSelector } from "./node-selector"; import { LinkSelector } from "./link-selector"; -import { cn } from "../utils" +import { cn } from "../utils"; export interface BubbleMenuItem { name: string; @@ -81,7 +75,7 @@ export const EditorBubbleMenu: FC = (props) => { return ( = (props) => { > diff --git a/apps/app/components/tiptap/bubble-menu/link-selector.tsx b/apps/app/components/tiptap/bubble-menu/link-selector.tsx index c58c0de0b..d4248e3cc 100644 --- a/apps/app/components/tiptap/bubble-menu/link-selector.tsx +++ b/apps/app/components/tiptap/bubble-menu/link-selector.tsx @@ -1,7 +1,7 @@ import { Editor } from "@tiptap/core"; import { Check, Trash } from "lucide-react"; import { Dispatch, FC, SetStateAction, useEffect, useRef } from "react"; -import { cn } from '../utils'; +import { cn } from "../utils"; interface LinkSelectorProps { editor: Editor; @@ -9,11 +9,7 @@ interface LinkSelectorProps { setIsOpen: Dispatch>; } -export const LinkSelector: FC = ({ - editor, - isOpen, - setIsOpen, -}) => { +export const LinkSelector: FC = ({ editor, isOpen, setIsOpen }) => { const inputRef = useRef(null); useEffect(() => { @@ -46,13 +42,13 @@ export const LinkSelector: FC = ({ editor.chain().focus().setLink({ href: input.value }).run(); setIsOpen(false); }} - className="fixed top-full z-[99999] mt-1 flex w-60 overflow-hidden rounded border border-custom-border-100 bg-custom-background-100 dow-xl animate-in fade-in slide-in-from-top-1" + className="fixed top-full z-[99999] mt-1 flex w-60 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 dow-xl animate-in fade-in slide-in-from-top-1" > {editor.getAttributes("link").href ? ( @@ -66,7 +62,7 @@ export const LinkSelector: FC = ({ ) : ( - )} @@ -75,4 +71,3 @@ export const LinkSelector: FC = ({ ); }; - diff --git a/apps/app/components/tiptap/bubble-menu/node-selector.tsx b/apps/app/components/tiptap/bubble-menu/node-selector.tsx index e74bfa400..c671f4362 100644 --- a/apps/app/components/tiptap/bubble-menu/node-selector.tsx +++ b/apps/app/components/tiptap/bubble-menu/node-selector.tsx @@ -22,17 +22,12 @@ interface NodeSelectorProps { setIsOpen: Dispatch>; } -export const NodeSelector: FC = ({ - editor, - isOpen, - setIsOpen, -}) => { +export const NodeSelector: FC = ({ editor, isOpen, setIsOpen }) => { const items: BubbleMenuItem[] = [ { name: "Text", icon: TextIcon, - command: () => - editor.chain().focus().toggleNode("paragraph", "paragraph").run(), + command: () => editor.chain().focus().toggleNode("paragraph", "paragraph").run(), isActive: () => editor.isActive("paragraph") && !editor.isActive("bulletList") && @@ -78,12 +73,7 @@ export const NodeSelector: FC = ({ name: "Quote", icon: TextQuote, command: () => - editor - .chain() - .focus() - .toggleNode("paragraph", "paragraph") - .toggleBlockquote() - .run(), + editor.chain().focus().toggleNode("paragraph", "paragraph").toggleBlockquote().run(), isActive: () => editor.isActive("blockquote"), }, { @@ -117,10 +107,13 @@ export const NodeSelector: FC = ({ item.command(); setIsOpen(false); }} - className={cn("flex items-center justify-between rounded-sm px-2 py-1 text-sm text-custom-text-200 hover:bg-gray-800 hover:text-custom-text-100", { "bg-gray-800": activeItem.name === item.name })} + className={cn( + "flex items-center justify-between rounded-sm px-2 py-1 text-sm text-custom-text-200 hover:bg-custom-background-100/5 hover:text-custom-text-100", + { "bg-custom-primary-100/5": activeItem.name === item.name } + )} >
-
+
{item.name} @@ -129,8 +122,7 @@ export const NodeSelector: FC = ({ ))} - ) - } -
+ )} +
); }; diff --git a/apps/app/components/tiptap/extensions/index.tsx b/apps/app/components/tiptap/extensions/index.tsx index 6eed0108a..9ca078b10 100644 --- a/apps/app/components/tiptap/extensions/index.tsx +++ b/apps/app/components/tiptap/extensions/index.tsx @@ -11,18 +11,18 @@ import TaskList from "@tiptap/extension-task-list"; import { Markdown } from "tiptap-markdown"; import Highlight from "@tiptap/extension-highlight"; import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight"; -import { lowlight } from 'lowlight/lib/core' +import { lowlight } from "lowlight/lib/core"; import SlashCommand from "../slash-command"; import { InputRule } from "@tiptap/core"; -import { Node as ProseMirrorNode } from '@tiptap/pm/model'; +import { Node as ProseMirrorNode } from "@tiptap/pm/model"; -import ts from 'highlight.js/lib/languages/typescript' +import ts from "highlight.js/lib/languages/typescript"; -import 'highlight.js/styles/github-dark.css'; +import "highlight.js/styles/github-dark.css"; import UploadImagesPlugin from "../plugins/upload-image"; import UniqueID from "@tiptap-pro/extension-unique-id"; -lowlight.registerLanguage('ts', ts) +lowlight.registerLanguage("ts", ts); const CustomImage = TiptapImage.extend({ addProseMirrorPlugins() { @@ -49,13 +49,12 @@ export const TiptapExtensions = [ }, blockquote: { HTMLAttributes: { - class: "border-l-4 border-stone-700", + class: "border-l-4 border-custom-border-300", }, }, code: { HTMLAttributes: { - class: - "rounded-md bg-custom-bg-1000 px-1 py-1 font-mono font-medium text-stone-900", + class: "rounded-md bg-custom-bg-1000 px-1 py-1 font-mono font-medium text-custom-text-200", spellcheck: "false", }, }, @@ -84,25 +83,25 @@ export const TiptapExtensions = [ 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-400", + class: "mb-6 border-t border-custom-border-300", }, }), TiptapLink.configure({ HTMLAttributes: { class: - "text-stone-400 underline underline-offset-[3px] hover:text-stone-600 transition-colors cursor-pointer", + "text-custom-text-200 underline underline-offset-[3px] hover:text-custom-text-100 transition-colors cursor-pointer", }, }), CustomImage.configure({ allowBase64: true, HTMLAttributes: { - class: "rounded-lg border border-stone-200", + class: "rounded-lg border border-custom-border-300", }, }), Placeholder.configure({ @@ -116,7 +115,7 @@ export const TiptapExtensions = [ includeChildren: true, }), UniqueID.configure({ - types: ['image'], + types: ["image"], }), SlashCommand, TiptapUnderline, diff --git a/apps/app/components/tiptap/plugins/upload-image.tsx b/apps/app/components/tiptap/plugins/upload-image.tsx index 3f372d9d4..547a516a5 100644 --- a/apps/app/components/tiptap/plugins/upload-image.tsx +++ b/apps/app/components/tiptap/plugins/upload-image.tsx @@ -22,10 +22,7 @@ const UploadImagesPlugin = () => const placeholder = document.createElement("div"); placeholder.setAttribute("class", "img-placeholder"); const image = document.createElement("img"); - image.setAttribute( - "class", - "opacity-10 rounded-lg border border-stone-200", - ); + image.setAttribute("class", "opacity-10 rounded-lg border border-custom-border-300"); image.src = src; placeholder.appendChild(image); const deco = Decoration.widget(pos + 1, placeholder, { @@ -33,9 +30,7 @@ const UploadImagesPlugin = () => }); set = set.add(tr.doc, [deco]); } else if (action && action.remove) { - set = set.remove( - set.find(undefined, undefined, (spec) => spec.id == action.remove.id), - ); + set = set.remove(set.find(undefined, undefined, (spec) => spec.id == action.remove.id)); } return set; }, @@ -43,7 +38,7 @@ const UploadImagesPlugin = () => props: { decorations(state) { return this.getState(state); - } + }, }, }); @@ -51,7 +46,11 @@ 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); + const found = decos.find( + undefined, + undefined, + (spec: { id: number | undefined }) => spec.id == id + ); return found.length ? found[0].from : null; } @@ -81,7 +80,7 @@ export async function startImageUpload(file: File, view: EditorView, pos: number }; const src = await UploadImageHandler(file); - console.log(src, "src") + console.log(src, "src"); const { schema } = view.state; pos = findPlaceholder(view.state, id); @@ -111,10 +110,9 @@ const UploadImageHandler = (file: File): Promise => { image.onload = () => { resolve(imageUrl); }; - }) - } - catch (error) { - console.log(error) + }); + } catch (error) { + console.log(error); return Promise.reject(error); } }; diff --git a/apps/app/components/tiptap/slash-command/index.tsx b/apps/app/components/tiptap/slash-command/index.tsx index 94899d41c..7f8b56485 100644 --- a/apps/app/components/tiptap/slash-command/index.tsx +++ b/apps/app/components/tiptap/slash-command/index.tsx @@ -261,19 +261,19 @@ const CommandList = ({
{items.map((item: CommandItemProps, index: number) => ( ))}