From 56f9ba699ca2b9955af4cc87ee2ea3d9fe3480ac Mon Sep 17 00:00:00 2001 From: miteruzo Date: Wed, 11 Jun 2025 00:04:21 +0900 Subject: [PATCH] =?UTF-8?q?#19=20Wiki=20=E6=96=B0=E8=A6=8F=E4=BD=9C?= =?UTF-8?q?=E6=88=90=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/controllers/wiki_pages_controller.rb | 21 ++- backend/app/models/wiki_page.rb | 6 +- backend/config/routes.rb | 3 +- frontend/package-lock.json | 66 ++++++- frontend/package.json | 2 +- frontend/src/pages/WikiDetailPage.tsx | 13 +- frontend/src/pages/WikiNewPage.tsx | 178 +++--------------- 7 files changed, 109 insertions(+), 180 deletions(-) diff --git a/backend/app/controllers/wiki_pages_controller.rb b/backend/app/controllers/wiki_pages_controller.rb index 477fa83..c098995 100644 --- a/backend/app/controllers/wiki_pages_controller.rb +++ b/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 diff --git a/backend/app/models/wiki_page.rb b/backend/app/models/wiki_page.rb index 2722238..dce407d 100644 --- a/backend/app/models/wiki_page.rb +++ b/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 diff --git a/backend/config/routes.rb b/backend/config/routes.rb index 4640fb9..d57426e 100644 --- a/backend/config/routes.rb +++ b/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' diff --git a/frontend/package-lock.json b/frontend/package-lock.json index b546095..550a659 100644 --- a/frontend/package-lock.json +++ b/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", diff --git a/frontend/package.json b/frontend/package.json index 4af0c76..9ab3f97 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/pages/WikiDetailPage.tsx b/frontend/src/pages/WikiDetailPage.tsx index 488360e..d9a52b0 100644 --- a/frontend/src/pages/WikiDetailPage.tsx +++ b/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 (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]) diff --git a/frontend/src/pages/WikiNewPage.tsx b/frontend/src/pages/WikiNewPage.tsx index f5c566a..5499f21 100644 --- a/frontend/src/pages/WikiNewPage.tsx +++ b/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 (null) - const [thumbnailPreview, setThumbnailPreview] = useState ('') - const [thumbnailAutoFlg, setThumbnailAutoFlg] = useState (true) - const [thumbnailLoading, setThumbnailLoading] = useState (false) - const [tags, setTags] = useState ([]) - const [tagIds, setTagIds] = useState ([]) - 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 (

新規 Wiki ページ

- {/* URL */} -
- - setURL (e.target.value)} - className="w-full border p-2 rounded" - onBlur={handleURLBlur} /> -
- {/* タイトル */} + {/* TODO: タグ補完 */}
-
- - -
+ setTitle (e.target.value)} - disabled={titleAutoFlg} /> -
- - {/* サムネール */} -
-
- - -
- {thumbnailAutoFlg - ? (thumbnailLoading - ?

Loading...

- : !(thumbnailPreview) && ( -

- URL から自動取得されます。 -

)) - : ( - { - const file = e.target.files?.[0] - if (file) - { - setThumbnailFile (file) - setThumbnailPreview (URL.createObjectURL (file)) - } - }} />)} - {thumbnailPreview && ( - preview)} + className="w-full border p-2 rounded" />
- {/* タグ */} + {/* 本文 */}
- - + + mdParser.render (text)} + onChange={({ text }) => setBody (text)} />
{/* 送信 */}
)