feat: change editor style

Author: winverse

Diff for: 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 for: 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 for: 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 for: 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 for: 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 for: 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 for: 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 for: 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 for: 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 for: 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 for: 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 for: 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 for: 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'>