diff --git a/packages/app/src/components/editor.tsx b/packages/app/src/components/editor.tsx index 45c2556aa0..1dfce1378c 100644 --- a/packages/app/src/components/editor.tsx +++ b/packages/app/src/components/editor.tsx @@ -6,26 +6,29 @@ import '@blocksuite/editor'; import '@blocksuite/blocks/style'; import { useEditor } from '@/components/editor-provider'; import pkg from '../../package.json'; - +import exampleMarkdown from './example-markdown'; export const Editor = () => { const editorRef = useRef(); const { setEditor } = useEditor(); useEffect(() => { setEditor(editorRef.current!); const { store } = editorRef.current as EditorContainer; - - const version = pkg.dependencies['@blocksuite/editor'].substring(1); const pageId = store.addBlock({ flavour: 'page', - title: `BlockSuite live demo ${version}`, + title: 'Welcome to the AFFiNE Alpha', }); const groupId = store.addBlock({ flavour: 'group' }, pageId); - - const text = new Text(store, 'Legend from here...'); - store.addBlock({ flavour: 'paragraph', text }, groupId); + // const text = new Text(store, 'Legend from here...'); + // store.addBlock({ flavour: 'paragraph', text }, groupId); + editorRef.current!.clipboard.importMarkdown(exampleMarkdown, `${groupId}`); store.resetHistory(); }, [setEditor]); + useEffect(() => { + const version = pkg.dependencies['@blocksuite/editor'].substring(1); + console.log(`BlockSuite live demo ${version}`); + }, []); + return ( Error!}> diff --git a/packages/app/src/components/example-markdown.ts b/packages/app/src/components/example-markdown.ts new file mode 100644 index 0000000000..663c6965e7 --- /dev/null +++ b/packages/app/src/components/example-markdown.ts @@ -0,0 +1,62 @@ +const exampleMarkdown = `The [AFFiNE Alpha](https://pathfinder.affine.systems/) is here! 👏 + +**What's different in AFFiNE Alpha?** + +1. A much ~smoother editing~ experience, with much ~greater stability~; +2. More complete ~Markdown~ support and improved ~keyboard shortcuts~; +3. New features such as ~dark mode~ + * **Switch between view styles using the** ☀ **and** 🌙. +4. ~Clean and modern UI/UX~ design. + +**Looking for Markdown syntax or keyboard shortcuts?** + +* Find the (?) in the bottom right, then the ️, to view a full list. of \`Keyboard Shortcuts\` + +**Have an enjoyable editing experience !!!** **😃** + +Have some feedback or just want to get in touch? Use the (?), then 🎧 to get in touch and join our communities. + +**Still in development** + +There also somethings you should consider about this AFFiNE Alpha including some ~limitations~: + +* Single page editing - currently editing multiple docs/pages is not supported; +* Changes are not automatically stored, to save changes you should export your data. Options can be found by going to the top right and finding the \`⋮\` icon. +* Without an import/open feature you are still able to access your data by copying it back in. + +**Keyboard Shortcuts:** + +1. Undo: \`⌘ + Z\` or \`Ctrl+Z\` +2. Redo: \`⌘ + ⇧ + Z\` or \`Ctrl+Shift+Z\` +3. Bold: \`⌘ + B\` or \`Ctrl+B\` +4. Italic: \`⌘ + I\` or \`Ctrl+I\` +5. Underline: \`⌘ + U\` or \`Ctrl+U\` +6. Strikethrough: \`⌘ + ⇧ + S\` or \`Ctrl+Shift+S\` +7. Inline code: \`⌘ + E\` or \`Ctrl+E\` +8. Link: \`⌘ + K\` or \`Ctrl+K\` +9. Body text: \`⌘ + ⌥ + 0\` or \`Ctrl+Shift+0\` +10. Heading 1: \`⌘ + ⌥ + 1\` or \`Ctrl+Shift+1\` +11. Heading 2: \`⌘ + ⌥ + 2\` or \`Ctrl+Shift+2\` +12. Heading 3: \`⌘ + ⌥ + 3\` or \`Ctrl+Shift+3\` +13. Heading 4: \`⌘ + ⌥ + 4\` or \`Ctrl+Shift+4\` +14. Heading 5: \`⌘ + ⌥ + 5\` or \`Ctrl+Shift+5\` +15. Heading 6: \`⌘ + ⌥ + 6\` or \`Ctrl+Shift+6\` +16. Increase indent: \`Tab\` +17. Reduce indent: \`⇧ + Tab\` or \`Shift+Tab\` + +_Markdown Syntax:_ + +1. Bold: \`**text**\` +2. Italic: \`*text*\` +3. Underline: \`~text~\` +4. Strikethrough: \`~~text~~\` +5. Inline code: \`\` \`code\` \`\` +6. Heading 1: \`# text\` +7. Heading 2: \`## text\` +8. Heading 3: \`### text\` +9. Heading 4: \`#### text\` +10. Heading 5: \`##### text\` +11. Heading 6: \`###### text\` +`; + +export default exampleMarkdown;