mirror of https://github.com/fantasticit/think.git
tiptap: update the way to set default title
parent
a03312b816
commit
3aa2f2013d
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
|
@ -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)}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
|
@ -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'}
|
||||||
|
|
Loading…
Reference in New Issue