tiptap: update the way to set default title

This commit is contained in:
fantasticit 2022-06-18 14:03:38 +08:00
parent a03312b816
commit 3aa2f2013d
5 changed files with 43 additions and 13 deletions

View File

@ -8,7 +8,7 @@ import { prosemirrorJSONToYDoc } from 'tiptap/core/thritypart/y-prosemirror/y-pr
import { markdownToProsemirror } from 'tiptap/markdown/markdown-to-prosemirror'; import { markdownToProsemirror } from 'tiptap/markdown/markdown-to-prosemirror';
import * as Y from 'yjs'; import * as Y from 'yjs';
export const ImportEditor = ({ content, onChange, onError }) => { export const ImportEditor = ({ filename, content, onChange, onError }) => {
const parsed = useRef(false); const parsed = useRef(false);
const ydoc = useMemo(() => new Y.Doc(), []); const ydoc = useMemo(() => new Y.Doc(), []);
const editor = useEditor( const editor = useEditor(
@ -24,7 +24,12 @@ export const ImportEditor = ({ content, onChange, onError }) => {
if (!content || !editor || !ydoc || parsed.current) return; if (!content || !editor || !ydoc || parsed.current) return;
try { try {
const prosemirrorNode = markdownToProsemirror({ schema: editor.schema, content, needTitle: true }); const prosemirrorNode = markdownToProsemirror({
schema: editor.schema,
content,
needTitle: true,
defaultTitle: filename.replace(/\.md$/gi, ''),
});
const title = prosemirrorNode.content[0].content[0].text; const title = prosemirrorNode.content[0].content[0].text;
editor.commands.setContent(prosemirrorNode); editor.commands.setContent(prosemirrorNode);
@ -48,7 +53,7 @@ export const ImportEditor = ({ content, onChange, onError }) => {
ydoc.destroy(); ydoc.destroy();
editor.destroy(); editor.destroy();
}; };
}, [editor, ydoc, content, onChange, onError]); }, [editor, ydoc, filename, content, onChange, onError]);
return null; return null;
}; };

View File

@ -127,6 +127,7 @@ export const Import: React.FC<IProps> = ({ wikiId }) => {
return ( return (
<ImportEditor <ImportEditor
key={filename} key={filename}
filename={filename}
content={texts[filename]} content={texts[filename]}
onChange={onParsedFile(filename)} onChange={onParsedFile(filename)}
onError={onParsedFileError(filename)} onError={onParsedFileError(filename)}

View File

@ -6,19 +6,27 @@ const renderer = new Renderer();
* HTML prosemirror node * HTML prosemirror node
* @param body * @param body
* @param forceATitle * @param forceATitle
* @param defaultTitle heading paragraph
* @returns * @returns
*/ */
export const htmlToPromsemirror = (body, forceATitle = false) => { export const htmlToPromsemirror = (body, forceATitle = false, defaultTitle = '') => {
const json = renderer.render(body); const json = renderer.render(body);
// 设置标题 // 设置标题
if (forceATitle) { if (forceATitle) {
const firstNode = json.content[0]; const forceTitleNode = json.content.find((node) => {
if (firstNode && firstNode.type !== 'title') { return node.type === 'heading' || node.type === 'paragraph';
if (firstNode.type === 'heading' || firstNode.type === 'paragraph') { });
firstNode.type = 'title';
} json.content.unshift({
} type: 'title',
content: [
{
type: 'text',
text: defaultTitle || forceTitleNode?.content[0]?.text.slice(0, 50),
},
],
});
} }
const nodes = json.content; const nodes = json.content;

View File

@ -25,7 +25,7 @@ const extractImage = (html) => {
}; };
// 将 markdown 字符串转换为 ProseMirror JSONDocument // 将 markdown 字符串转换为 ProseMirror JSONDocument
export const markdownToProsemirror = ({ schema, content, needTitle }) => { export const markdownToProsemirror = ({ schema, content, needTitle, defaultTitle = '' }) => {
const html = markdownToHTML(content); const html = markdownToHTML(content);
if (!html) return null; if (!html) return null;
@ -34,7 +34,7 @@ export const markdownToProsemirror = ({ schema, content, needTitle }) => {
const { body } = parser.parseFromString(extractImage(html), 'text/html'); const { body } = parser.parseFromString(extractImage(html), 'text/html');
body.append(document.createComment(content)); body.append(document.createComment(content));
const node = htmlToPromsemirror(body, needTitle); const node = htmlToPromsemirror(body, needTitle, defaultTitle);
return node; return node;
}; };

View File

@ -248,7 +248,7 @@ importers:
eslint: 8.14.0 eslint: 8.14.0
eslint-config-prettier: 8.5.0_eslint@8.14.0 eslint-config-prettier: 8.5.0_eslint@8.14.0
eslint-plugin-import: 2.26.0_eslint@8.14.0 eslint-plugin-import: 2.26.0_eslint@8.14.0
eslint-plugin-prettier: 4.0.0_740be41c8168d0cc214a306089357ad0 eslint-plugin-prettier: 4.0.0_74ebb802163a9b4fa8f89d76ed02f62a
eslint-plugin-react: 7.29.4_eslint@8.14.0 eslint-plugin-react: 7.29.4_eslint@8.14.0
eslint-plugin-react-hooks: 4.5.0_eslint@8.14.0 eslint-plugin-react-hooks: 4.5.0_eslint@8.14.0
eslint-plugin-simple-import-sort: 7.0.0_eslint@8.14.0 eslint-plugin-simple-import-sort: 7.0.0_eslint@8.14.0
@ -5605,6 +5605,22 @@ packages:
prettier-linter-helpers: 1.0.0 prettier-linter-helpers: 1.0.0
dev: true dev: true
/eslint-plugin-prettier/4.0.0_74ebb802163a9b4fa8f89d76ed02f62a:
resolution: {integrity: sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==}
engines: {node: '>=6.0.0'}
peerDependencies:
eslint: '>=7.28.0'
eslint-config-prettier: '*'
prettier: '>=2.0.0'
peerDependenciesMeta:
eslint-config-prettier:
optional: true
dependencies:
eslint: 8.14.0
eslint-config-prettier: 8.5.0_eslint@8.14.0
prettier-linter-helpers: 1.0.0
dev: true
/eslint-plugin-react-hooks/4.5.0_eslint@8.14.0: /eslint-plugin-react-hooks/4.5.0_eslint@8.14.0:
resolution: {integrity: sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==} resolution: {integrity: sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==}
engines: {node: '>=10'} engines: {node: '>=10'}