feat: change editor style

winverse · winverse · commit beeadee3306d · 2024-06-20T16:31:52.000+09:00
diff --git a/apps/book-server/src/graphql/Page.gql b/apps/book-server/src/graphql/Page.gql
@@ -29,6 +29,7 @@ type Query {
 type Mutation {
   create(input: CreatePageInput!): Page @auth
   reorder(input: ReorderInput!): Void @auth
+  update(input: UpdatePageInput!): Page @auth
 }
 
 input GetPagesInput {
@@ -54,3 +55,11 @@ input ReorderInput {
   parent_url_slug: String
   index: Int!
 }
+
+input UpdatePageInput {
+  title: String
+  body: String
+  is_deleted: Boolean
+  page_url_slug: String!
+  book_url_slug: String!
+}
diff --git a/apps/book-server/src/graphql/generated.ts b/apps/book-server/src/graphql/generated.ts
@@ -65,6 +65,7 @@ export type Mutation = {
   create?: Maybe<Page>
   deploy?: Maybe<Scalars['Void']['output']>
   reorder?: Maybe<Scalars['Void']['output']>
+  update?: Maybe<Page>
 }
 
 export type MutationBuildArgs = {
@@ -83,6 +84,10 @@ export type MutationReorderArgs = {
   input: ReorderInput
 }
 
+export type MutationUpdateArgs = {
+  input: UpdatePageInput
+}
+
 export type Page = {
   body: Scalars['String']['output']
   book_id: Scalars['ID']['output']
@@ -149,6 +154,14 @@ export type SubscriptionBookDeployCompletedArgs = {
   input: BookIdInput
 }
 
+export type UpdatePageInput = {
+  body?: InputMaybe<Scalars['String']['input']>
+  book_url_slug: Scalars['String']['input']
+  is_deleted?: InputMaybe<Scalars['Boolean']['input']>
+  page_url_slug: Scalars['String']['input']
+  title?: InputMaybe<Scalars['String']['input']>
+}
+
 export type Writer = {
   email: Scalars['String']['output']
   fk_user_id: Scalars['String']['output']
@@ -260,6 +273,7 @@ export type ResolversTypes = {
   String: ResolverTypeWrapper<Scalars['String']['output']>
   SubScriptionPayload: ResolverTypeWrapper<SubScriptionPayload>
   Subscription: ResolverTypeWrapper<{}>
+  UpdatePageInput: UpdatePageInput
   Void: ResolverTypeWrapper<Scalars['Void']['output']>
   Writer: ResolverTypeWrapper<WriterModel>
 }
@@ -284,6 +298,7 @@ export type ResolversParentTypes = {
   String: Scalars['String']['output']
   SubScriptionPayload: SubScriptionPayload
   Subscription: {}
+  UpdatePageInput: UpdatePageInput
   Void: Scalars['Void']['output']
   Writer: WriterModel
 }
@@ -345,6 +360,12 @@ export type MutationResolvers<
     ContextType,
     RequireFields<MutationReorderArgs, 'input'>
   >
+  update?: Resolver<
+    Maybe<ResolversTypes['Page']>,
+    ParentType,
+    ContextType,
+    RequireFields<MutationUpdateArgs, 'input'>
+  >
 }
 
 export type PageResolvers<
diff --git a/apps/book-server/src/graphql/resolvers/pageResolvers.mts b/apps/book-server/src/graphql/resolvers/pageResolvers.mts
@@ -19,6 +19,7 @@ const pageResolvers: Resolvers = {
       const page = await pageService.create(input, ctx.writer?.id)
       return page
     },
+
     reorder: async (_, { input }, ctx) => {
       const pageService = container.resolve(PageService)
       await pageService.reorder(input, ctx.writer?.id)
diff --git a/apps/book-server/src/services/PageService/index.mts b/apps/book-server/src/services/PageService/index.mts
@@ -1,7 +1,12 @@
 import { ConfilctError } from '@errors/ConfilctError.mjs'
 import { NotFoundError } from '@errors/NotfoundError.mjs'
 import { UnauthorizedError } from '@errors/UnauthorizedError.mjs'
-import type { CreatePageInput, GetPageInput, ReorderInput } from '@graphql/generated.js'
+import type {
+  CreatePageInput,
+  GetPageInput,
+  ReorderInput,
+  UpdatePageInput,
+} from '@graphql/generated.js'
 import { MongoService } from '@lib/mongo/MongoService.mjs'
 import { UtilsService } from '@lib/utils/UtilsService.mjs'
 import { Page, Prisma } from '@packages/database/velog-book-mongo'
@@ -13,6 +18,7 @@ interface Service {
   getPages(bookUrlSlug: string, signedWriterId?: string): Promise<Page[]>
   getPage(input: GetPageInput, signedWriterId?: string): Promise<Page | null>
   create(input: CreatePageInput, signedWriterId?: string): Promise<Page>
+  update(input: UpdatePageInput, signedWriterId?: string): Promise<Page>
   reorder(input: ReorderInput, signedWriterId?: string): Promise<void>
 }
 
@@ -137,8 +143,6 @@ export class PageService implements Service {
 
     const { book_url_slug, page_url_slug } = input
 
-    console.log('page_url_slug', page_url_slug)
-
     const book = await this.bookSerivce.findByUrlSlug(book_url_slug)
 
     if (!book) {
@@ -161,7 +165,6 @@ export class PageService implements Service {
       where: whereQuery,
     })
 
-    console.log('page', page?.title)
     return page
   }
 
@@ -220,6 +223,20 @@ export class PageService implements Service {
     return `${this.utils.removeCodeFromUrlSlug(parent_url_slug)}/${this.utils.escapeForUrl(title).toLowerCase()}-${code}`
   }
 
+  public async update(input: UpdatePageInput, signedWriterId?: string): Promise<Page> {
+    if (!signedWriterId) {
+      throw new UnauthorizedError('Not authorized')
+    }
+
+    const { book_url_slug, page_url_slug, ...whereQuery } = input
+
+    const book = await this.bookSerivce.findByUrlSlug(book_url_slug)
+
+    if (!book) {
+      throw new NotFoundError('Not found book')
+    }
+  }
+
   public async reorder(input: ReorderInput, signedWriterId?: string): Promise<void> {
     if (!signedWriterId) {
       throw new UnauthorizedError('Not authorized')
diff --git a/apps/book-web/src/layouts/NextraLayout/NextraLayout.tsx b/apps/book-web/src/layouts/NextraLayout/NextraLayout.tsx
@@ -82,9 +82,9 @@ function NextraLayout({ children, mdxText }: Props) {
       })
       getPagesRefetch()
     }
-    window.addEventListener(nextraCustomEventName.addAction, addAction)
+    window.addEventListener(nextraCustomEventName.addActionEvent, addAction)
     return () => {
-      window.removeEventListener(nextraCustomEventName.addAction, addAction)
+      window.removeEventListener(nextraCustomEventName.addActionEvent, addAction)
     }
   })
 
@@ -106,9 +106,23 @@ function NextraLayout({ children, mdxText }: Props) {
       getPagesRefetch()
     }
 
-    window.addEventListener(nextraCustomEventName.changeItem, changeItem)
+    window.addEventListener(nextraCustomEventName.changeItemEvent, changeItem)
     return () => {
-      window.removeEventListener(nextraCustomEventName.changeItem, changeItem)
+      window.removeEventListener(nextraCustomEventName.changeItemEvent, changeItem)
+    }
+  }, [])
+
+  useEffect(() => {
+    const saveItemBody = async (e: CustomEventInit<CustomEventDetail['saveItemBodyEvent']>) => {
+      if (!e.detail) return
+      const { body } = e.detail
+      console.log('body!', body)
+      
+    }
+
+    window.addEventListener(nextraCustomEventName.saveItemBodyEvent, saveItemBody)
+    return () => {
+      window.removeEventListener(nextraCustomEventName.saveItemBodyEvent, saveItemBody)
     }
   }, [])
 
diff --git a/packages/database/prisma/velog-book-mongo/schema.prisma b/packages/database/prisma/velog-book-mongo/schema.prisma
@@ -58,6 +58,7 @@ model Page {
   url_slug     String  @unique // example /${escapeUrl(${parent.title}/${title}).toLowerCase()}}-${code}
   code         String  @unique
   depth        Int     @default(1) @db.Int // max depth 3
+  is_deleted   Boolean @default(false)
 
   created_at DateTime @default(now())
   updated_at DateTime @default(now())
diff --git a/packages/nextra-editor/src/components/markdown-editor/toolbar/commands/save.tsx b/packages/nextra-editor/src/components/markdown-editor/toolbar/commands/save.tsx
@@ -1,12 +1,14 @@
 import { EditorView, KeyBinding } from '@codemirror/view'
 import { ToolbarCommand } from './type'
+import { CustomEventDetail } from '@/types'
+import { nextraCustomEventName } from '@/index'
 
 export const saveKeymap: KeyBinding = {
   linux: 'Ctrl-s',
   win: 'Ctrl-s',
   mac: 'Meta-s',
   run: (view) => {
-    execute(view)
+    saveExecute(view)
     return true
   },
   preventDefault: true,
@@ -33,13 +35,18 @@ const save: ToolbarCommand = {
       <path d="M7 3v4a1 1 0 0 0 1 1h7" />
     </svg>
   ),
-  execute,
+  execute: saveExecute,
 }
 
-function execute(view: EditorView) {
+export function saveExecute(view: EditorView) {
   const doc = view.state.doc.toString()
-  console.log(doc)
-  console.log('save')
+  const event = new CustomEvent<CustomEventDetail['saveItemBodyEvent']>(
+    nextraCustomEventName.saveItemBodyEvent,
+    {
+      detail: { body: doc },
+    },
+  )
+  window.dispatchEvent(event)
 }
 
 export default save
diff --git a/packages/nextra-editor/src/components/markdown-editor/toolbar/toolbar.tsx b/packages/nextra-editor/src/components/markdown-editor/toolbar/toolbar.tsx
@@ -76,10 +76,6 @@ const Toolbar = ({ state, view }: Props) => {
     upload({ file, info: { type: 'book', refId: '' } })
   }
 
-  const onCickSaveButton = () => {
-    console.log('save')
-  }
-
   useEffect(() => {
     // Handle Uploaded Image
     if (uploading) return
@@ -106,9 +102,6 @@ const Toolbar = ({ state, view }: Props) => {
       case 'image':
         onClickImageButton()
         return
-      case 'save':
-        onCickSaveButton()
-        return
       default:
         onClick(command.execute!)
     }
diff --git a/packages/nextra-editor/src/components/sidebar/sidebar-controller/add-inputs.tsx b/packages/nextra-editor/src/components/sidebar/sidebar-controller/add-inputs.tsx
@@ -52,12 +52,11 @@ function AddInputs({ type }: Props): ReactElement {
     const { parentUrlSlug, bookUrlSlug, index, type } = sidebar.actionInfo
     if (type === '') return
     const event = new CustomEvent<CustomEventDetail['addActionEvent']>(
-      nextraCustomEventName.addAction,
+      nextraCustomEventName.addActionEvent,
       {
         detail: { title, parentUrlSlug, index, bookUrlSlug, type },
       },
     )
-
     window.dispatchEvent(event)
   }
 
diff --git a/packages/nextra-editor/src/components/sidebar/sortable-tree/index.tsx b/packages/nextra-editor/src/components/sidebar/sortable-tree/index.tsx
@@ -228,7 +228,7 @@ function SortableTree({ items, sidebarRef, showSidebar, onItemsChanged }: Props)
       const newParentItem = findItemDeep(newItems, parentId)
 
       const event = new CustomEvent<CustomEventDetail['changeItemEvent']>(
-        nextraCustomEventName.changeItem,
+        nextraCustomEventName.changeItemEvent,
         {
           detail: {
             bookUrlSlug,
diff --git a/packages/nextra-editor/src/index.tsx b/packages/nextra-editor/src/index.tsx
@@ -17,7 +17,7 @@ import { useMounted } from './nextra/hooks'
 import { SidebarProvider } from './contexts/sidebar'
 import MarkdownEditor from './components/markdown-editor'
 import { MarkdownEditorProvider, useMarkdownEditor } from './contexts/markdown-editor'
-
+import { CustomEventDetail, MdxCompilerOptions, MdxOptions, SearchResult } from './types'
 interface BodyProps {
   themeContext: PageTheme
   breadcrumb: ReactNode
@@ -236,12 +236,13 @@ export {
   LocaleSwitch,
 } from './components'
 
-export const nextraCustomEventName = {
-  addAction: 'addAction',
-  changeItem: 'changeItem',
+export const nextraCustomEventName: Record<keyof CustomEventDetail, string> = {
+  addActionEvent: 'addActionEvent',
+  changeItemEvent: 'changeItemEvent',
+  saveItemBodyEvent: 'saveItemBodyEvent',
 }
 
-export { CustomEventDetail, MdxCompilerOptions, MdxOptions, SearchResult } from './types'
+export { CustomEventDetail, MdxCompilerOptions, MdxOptions, SearchResult }
 
 export {
   attachMeta,
diff --git a/packages/nextra-editor/src/nextra/components/code.tsx b/packages/nextra-editor/src/nextra/components/code.tsx
@@ -6,7 +6,7 @@ export const Code = ({ children, className, ...props }: ComponentProps<'code'>):
   return (
     <code
       className={cn(
-        'nx-break-words nx-rounded-md nx-border nx-border-black nx-border-opacity-[0.04] nx-bg-black nx-bg-opacity-[0.03] nx-px-[.25em] nx-py-0.5 nx-text-[.9em]',
+        'nx-break-words nx-rounded-md nx-border nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-px-[.25em] nx-py-0.5 nx-text-[.9em]',
         'dark:nx-border-white/10 dark:nx-bg-white/10',
         hasLineNumbers && '[counter-reset:line]',
         className,
diff --git a/packages/nextra-editor/src/types.ts b/packages/nextra-editor/src/types.ts
@@ -20,6 +20,7 @@ export type SearchResult = {
 export interface CustomEventDetail {
   addActionEvent: AddActionEvent
   changeItemEvent: ChangeItemEvent
+  saveItemBodyEvent: SaveItemBodyEvent
 }
 
 type AddActionEvent = {
@@ -37,6 +38,10 @@ type ChangeItemEvent = {
   index: number
 }
 
+type SaveItemBodyEvent = {
+  body: string
+}
+
 // for compiler
 export type MdxOptions = LoaderOptions['mdxOptions'] &
   Pick<ProcessorOptions, 'jsx' | 'outputFormat'>
diff --git a/packages/nextra-editor/style.css b/packages/nextra-editor/style.css

Original file line number	Diff line number	Diff line change
`@@ -52,12 +52,11 @@ function AddInputs({ type }: Props): ReactElement {`
`52`	`52`	`const { parentUrlSlug, bookUrlSlug, index, type } = sidebar.actionInfo`
`53`	`53`	`if (type === '') return`
`54`	`54`	`const event = new CustomEvent<CustomEventDetail['addActionEvent']>(`
`55`		`- nextraCustomEventName.addAction,`
	`55`	`+ nextraCustomEventName.addActionEvent,`
`56`	`56`	`{`
`57`	`57`	`detail: { title, parentUrlSlug, index, bookUrlSlug, type },`
`58`	`58`	`},`
`59`	`59`	`)`
`60`		`-`
`61`	`60`	`window.dispatchEvent(event)`
`62`	`61`	`}`
`63`	`62`
Original file line number	Diff line number	Diff line change
`@@ -228,7 +228,7 @@ function SortableTree({ items, sidebarRef, showSidebar, onItemsChanged }: Props)`
`228`	`228`	`const newParentItem = findItemDeep(newItems, parentId)`
`229`	`229`
`230`	`230`	`const event = new CustomEvent<CustomEventDetail['changeItemEvent']>(`
`231`		`- nextraCustomEventName.changeItem,`
	`231`	`+ nextraCustomEventName.changeItemEvent,`
`232`	`232`	`{`
`233`	`233`	`detail: {`
`234`	`234`	`bookUrlSlug,`