#19 Wiki 新規作成完成

backend/app/controllers/wiki_pages_controller.rb

@@ -1,19 +1,24 @@
 class WikiPagesController < ApplicationController
   def show
+    wiki_page = WikiPage.find(params[:id])
+    render json: wiki_page.as_json
+  end
+
+  def show_by_title
     wiki_page = WikiPage.find_by(title: params[:title])
-    if wiki_page
-      render plain: wiki_page.markdown
-    else
-      head :not_found
-    end
+    body = wiki_page&.body
+    return head :not_found unless body
+
+    render plain: body
   end
 
   def create
     return head :unauthorized unless current_user
+    return head :forbidden unless ['admin', 'member'].include?(current_user.role)
 
-    wiki_page = WikiPage.new(title: params[:title], tag_id: params[:tag_id], created_user: current_user, updated_user: current_user)
-    wiki_page.markdown = params[:markdown], user: current_user
+    wiki_page = WikiPage.new(title: params[:title], created_user: current_user, updated_user: current_user)
     if wiki_page.save
+      wiki_page.set_body params[:body], user: current_user
       render json: wiki_page, status: :created
     else
       render json: { errors: wiki_page.errors.full_messages }, status: :unprocessable_entity
@@ -27,7 +32,7 @@ class WikiPagesController < ApplicationController
     return head :not_found unless wiki_pages
 
     wiki_page.updated_user = current_user
-    wiki_page.markdown = params[:markdown], user: current_user
+    wiki_page.set_body params[:body], user: current_user
     wiki_page.save!
     head :ok
   end

backend/app/models/wiki_page.rb

@@ -13,17 +13,17 @@ class WikiPage < ApplicationRecord
     page&.raw_data
   end
 
-  def body= content, user:
+  def set_body content, user:
     page = wiki.page("#{ id }.md")
 
     commit_info = { message:  "Update #{ title }",
-                    name:     user.id,
+                    name:     user.id.to_s,
                     email:    'dummy@example.com' }
 
     if page
       page.update(content, commit: commit_info)
     else
-      wiki.write_page("#{ id }.md", :markdown, content, commit_info)
+      wiki.write_page(id.to_s, :markdown, content, commit_info)
     end
   end
 

backend/config/routes.rb

@@ -20,7 +20,8 @@ Rails.application.routes.draw do
   delete 'posts/:id/viewed', to: 'posts#unviewed'
   get 'preview/title', to: 'preview#title'
   get 'preview/thumbnail', to: 'preview#thumbnail'
-  get 'wiki/:title', to: 'wiki_pages#show'
+  get 'wiki/title/:title', to: 'wiki_pages#show_by_title'
+  get 'wiki/:id', to: 'wiki_pages#show'
   post 'wiki', to: 'wiki_pages#create'
   put 'wiki/:id', to: 'wiki_pages#update'
 

frontend/package-lock.json

@@ -17,7 +17,7 @@
         "clsx": "^2.1.1",
         "humps": "^2.0.1",
         "lucide-react": "^0.511.0",
-        "marked": "^15.0.12",
+        "markdown-it": "^14.1.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-markdown": "^10.1.0",
@@ -2411,7 +2411,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true,
       "license": "Python-2.0"
     },
     "node_modules/aria-hidden": {
@@ -2978,6 +2977,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -4067,6 +4078,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "license": "MIT",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -4119,16 +4139,21 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/marked": {
-      "version": "15.0.12",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-15.0.12.tgz",
-      "integrity": "sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==",
+    "node_modules/markdown-it": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
       "license": "MIT",
-      "bin": {
-        "marked": "bin/marked.js"
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
       },
-      "engines": {
-        "node": ">= 18"
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
       }
     },
     "node_modules/math-intrinsics": {
@@ -4293,6 +4318,12 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+      "license": "MIT"
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -5279,6 +5310,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -6131,6 +6171,12 @@
         "typescript": ">=4.8.4 <5.9.0"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+      "license": "MIT"
+    },
     "node_modules/unified": {
       "version": "11.0.5",
       "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",

frontend/package.json

@@ -18,7 +18,7 @@
     "clsx": "^2.1.1",
     "humps": "^2.0.1",
     "lucide-react": "^0.511.0",
-    "marked": "^15.0.12",
+    "markdown-it": "^14.1.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-markdown": "^10.1.0",

frontend/src/pages/WikiDetailPage.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Link, useParams } from 'react-router-dom'
+import { Link, useParams, useNavigate } from 'react-router-dom'
 import ReactMarkdown from 'react-markdown'
 import axios from 'axios'
 import { API_BASE_URL } from '@/config'
@@ -8,10 +8,19 @@ import { API_BASE_URL } from '@/config'
 const WikiDetailPage = () => {
   const { name } = useParams ()
 
+  const navigate = useNavigate ()
+
   const [markdown, setMarkdown] = useState<string | null> (null)
 
   useEffect (() => {
-    void (axios.get (`${ API_BASE_URL }/wiki/${ encodeURIComponent (name) }`)
+    if (/^\d+$/.test (name))
+      {
+        void (axios.get (`${ API_BASE_URL }/wiki/${ name }`)
+              .then (res => navigate (`/wiki/${ res.data.title }`, { replace: true })))
+        return
+      }
+
+    void (axios.get (`${ API_BASE_URL }/wiki/title/${ encodeURIComponent (name) }`)
           .then (res => setMarkdown (res.data))
           .catch (() => setMarkdown (null)))
   }, [name])

frontend/src/pages/WikiNewPage.tsx

@@ -6,48 +6,38 @@ import NicoViewer from '@/components/NicoViewer'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import { cn } from '@/lib/utils'
+import MarkdownIt from 'markdown-it'
+import MdEditor from 'react-markdown-editor-lite'
+import 'react-markdown-editor-lite/lib/index.css'
 
 type Tag = { id:        number
              name:      string
              category:  string }
 
-type Post = { id:         number
-              url:        string
-              title:      string
-              thumbnail:  string
-              tags:       Tag[]
-              viewed:     boolean }
+const mdParser = new MarkdownIt
 
 
 const WikiNewPage = () => {
   const location = useLocation ()
   const navigate = useNavigate ()
 
-  const [title, setTitle] = useState ('')
-  const [titleAutoFlg, setTitleAutoFlg] = useState (true)
-  const [titleLoading, setTitleLoading] = useState (false)
-  const [url, setURL] = useState ('')
-  const [thumbnailFile, setThumbnailFile] = useState<File | null> (null)
-  const [thumbnailPreview, setThumbnailPreview] = useState<string> ('')
-  const [thumbnailAutoFlg, setThumbnailAutoFlg] = useState (true)
-  const [thumbnailLoading, setThumbnailLoading] = useState (false)
-  const [tags, setTags] = useState<Tag[]> ([])
-  const [tagIds, setTagIds] = useState<number[]> ([])
-  const previousURLRef = useRef ('')
+  const query = new URLSearchParams (location.search)
+  const titleQuery = query.get ('title') ?? ''
+
+  const [title, setTitle] = useState (titleQuery)
+  const [body, setBody] = useState ('')
 
   const handleSubmit = () => {
     const formData = new FormData ()
     formData.append ('title', title)
-    formData.append ('url', url)
-    formData.append ('tags', JSON.stringify (tagIds))
-    formData.append ('thumbnail', thumbnailFile)
+    formData.append ('body', body)
 
-    void (axios.post (`${ API_BASE_URL }/posts`, formData, { headers: {
+    void (axios.post (`${ API_BASE_URL }/wiki`, formData, { headers: {
               'Content-Type':     'multipart/form-data',
               'X-Transfer-Code':  localStorage.getItem ('user_code') || '' } })
-          .then (() => {
+          .then (res => {
             toast ({ title: '投稿成功!' })
-            navigate ('/posts')
+            navigate (`/wiki/${ res.data.title }`)
           })
           .catch (e => toast ({ title:        '投稿失敗',
                                 description:  '入力を確認してください。' })))
@@ -55,156 +45,34 @@ const WikiNewPage = () => {
 
   useEffect (() => {
     document.title = `新規 Wiki ページ | ${ SITE_TITLE }`
-    void (axios.get ('/api/tags')
-          .then (res => setTags (res.data))
-          .catch (() => toast ({ title: 'タグ一覧の取得失敗' })))
   }, [])
 
-  useEffect (() => {
-    if (titleAutoFlg && url)
-      fetchTitle ()
-  }, [titleAutoFlg])
-
-  useEffect (() => {
-    if (thumbnailAutoFlg && url)
-      fetchThumbnail ()
-  }, [thumbnailAutoFlg])
-
-  const handleURLBlur = () => {
-    if (!(url) || url === previousURLRef.current)
-      return
-
-    if (titleAutoFlg)
-      fetchTitle ()
-    if (thumbnailAutoFlg)
-      fetchThumbnail ()
-    previousURLRef.current = url
-  }
-
-  const fetchTitle = () => {
-    setTitle ('')
-    setTitleLoading (true)
-    void (axios.get (`${ API_BASE_URL }/preview/title`, {
-              params:   { url },
-              headers:  { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' } })
-          .then (res => {
-            setTitle (res.data.title || '')
-            setTitleLoading (false)
-          })
-          .finally (() => setTitleLoading (false)))
-  }
-
-  const fetchThumbnail = () => {
-    setThumbnailPreview ('')
-    setThumbnailFile (null)
-    setThumbnailLoading (true)
-    if (thumbnailPreview)
-      URL.revokeObjectURL (thumbnailPreview)
-    void (axios.get (`${ API_BASE_URL }/preview/thumbnail`, {
-              params:       { url },
-              headers:      { 'X-Transfer-Code': localStorage.getItem ('user_code') || '' },
-              responseType: 'blob' })
-          .then (res => {
-            const imageURL = URL.createObjectURL (res.data)
-            setThumbnailPreview (imageURL)
-            setThumbnailFile (new File ([res.data],
-                                        'thumbnail.png',
-                                        { type: res.data.type || 'image/png' }))
-            setThumbnailLoading (false)
-          })
-          .finally (() => setThumbnailLoading (false)))
-  }
-
   return (
       <div className="max-w-xl mx-auto p-4 space-y-4">
         <h1 className="text-2xl font-bold mb-2">新規 Wiki ページ</h1>
 
-        {/* URL */}
-        <div>
-          <label className="block font-semibold mb-1">URL</label>
-          <input type="text"
-                 placeholder="例：https://www.nicovideo.jp/watch/..."
-                 value={url}
-                 onChange={e => setURL (e.target.value)}
-                 className="w-full border p-2 rounded"
-                 onBlur={handleURLBlur} />
-        </div>
-
         {/* タイトル */}
+        {/* TODO: タグ補完 */}
         <div>
-          <div className="flex gap-2 mb-1">
-            <label className="flex-1 block font-semibold">タイトル</label>
-            <label className="flex items-center block gap-1">
-              <input type="checkbox"
-                     checked={titleAutoFlg}
-                     onChange={e => setTitleAutoFlg (e.target.checked)} />
-              自動
-            </label>
-          </div>
+          <label className="block font-semibold mb-1">タイトル</label>
           <input type="text"
-                 className="w-full border rounded p-2"
                  value={title}
-                 placeholder={titleLoading ? 'Loading...' : ''}
                  onChange={e => setTitle (e.target.value)}
-                 disabled={titleAutoFlg} />
-        </div>
-
-        {/* サムネール */}
-        <div>
-          <div className="flex gap-2 mb-1">
-            <label className="block font-semibold flex-1">サムネール</label>
-            <label className="flex items-center gap-1">
-              <input type="checkbox"
-                     checked={thumbnailAutoFlg}
-                     onChange={e => setThumbnailAutoFlg (e.target.checked)} />
-              自動
-            </label>
-          </div>
-          {thumbnailAutoFlg
-           ? (thumbnailLoading
-              ? <p className="text-gray-500 text-sm">Loading...</p>
-              : !(thumbnailPreview) && (
-                  <p className="text-gray-500 text-sm">
-                    URL から自動取得されます。
-                  </p>))
-           : (
-              <input type="file"
-                     accept="image/*"
-                     onChange={e => {
-                       const file = e.target.files?.[0]
-                       if (file)
-                         {
-                           setThumbnailFile (file)
-                           setThumbnailPreview (URL.createObjectURL (file))
-                         }
-                     }} />)}
-          {thumbnailPreview && (
-              <img src={thumbnailPreview}
-                   alt="preview"
-                   className="mt-2 max-h-48 rounded border" />)}
+                 className="w-full border p-2 rounded" />
         </div>
 
-        {/* タグ */}
+        {/* 本文 */}
         <div>
-          <label className="block font-semibold">タグ</label>
-          <select multiple
-                  value={tagIds.map (String)}
-                  onChange={e => {
-                    const values = Array.from (e.target.selectedOptions).map (o => Number (o.value))
-                    setTagIds (values)
-                  }}
-                  className="w-full p-2 border rounded h-32">
-            {tags.map ((tag: Tag) => (
-                <option key={tag.id} value={tag.id}>
-                  {tag.name}
-                </option>))}
-          </select>
+          <label className="block font-semibold mb-1">本文</label>
+          <MdEditor value={body}
+                    style={{ height: '500px' }}
+                    renderHTML={text => mdParser.render (text)}
+                    onChange={({ text }) => setBody (text)} />
         </div>
 
         {/* 送信 */}
         <button onClick={handleSubmit}
-                className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400"
-                disabled={titleLoading || thumbnailLoading}>
+                className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
           追加
         </button>
       </div>)