Editor feature documentation #798
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@keystar/ui': patch | ||
| --- | ||
|
|
||
| Improve prose styles: | ||
| - style `kbd` elements | ||
| - basic table styles |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@keystatic/core': patch | ||
| --- | ||
|
|
||
| Document editor features, within footer actions. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,218 @@ | ||
| import { useCallback, useMemo } from 'react'; | ||
|
|
||
| import { ActionButton } from '@keystar/ui/button'; | ||
| import { Dialog, DialogTrigger } from '@keystar/ui/dialog'; | ||
| import { Icon } from '@keystar/ui/icon'; | ||
| import { imageIcon } from '@keystar/ui/icon/icons/imageIcon'; | ||
| import { typeIcon } from '@keystar/ui/icon/icons/typeIcon'; | ||
| import { HStack } from '@keystar/ui/layout'; | ||
| import { Content, SlotProvider } from '@keystar/ui/slots'; | ||
| import { Heading, Kbd, Prose, Text } from '@keystar/ui/typography'; | ||
|
|
||
| import { getUploadedFileObject } from '../../image/ui'; | ||
| import { useEditorDispatchCommand } from './editor-view'; | ||
| import { readFileAsDataUrl } from './images'; | ||
|
|
||
| export function EditorFooter() { | ||
| const runCommand = useEditorDispatchCommand(); | ||
| const handleImagePress = useCallback(async () => { | ||
| const file = await getUploadedFileObject('image/*'); | ||
| if (!file) return; | ||
| const src = await readFileAsDataUrl(file); | ||
| runCommand((state, dispatch) => { | ||
| if (dispatch) { | ||
| dispatch( | ||
| state.tr.replaceSelectionWith( | ||
| state.schema.nodes.image.createChecked({ | ||
| src, | ||
| filename: file.name, | ||
| }) | ||
| ) | ||
| ); | ||
| } | ||
| return true; | ||
| }); | ||
| }, [runCommand]); | ||
|
|
||
| const slots = useMemo( | ||
| () => ({ icon: { size: 'small' }, text: { size: 'small' } }) as const, | ||
| [] | ||
| ); | ||
|
|
||
| return ( | ||
| <HStack gap="small" margin="small"> | ||
| <DialogTrigger isDismissable> | ||
| <ActionButton prominence="low"> | ||
| <SlotProvider slots={slots}> | ||
| <Icon src={typeIcon} /> | ||
| <Text>Markdown support</Text> | ||
| </SlotProvider> | ||
| </ActionButton> | ||
| <MarkdownDialog /> | ||
| </DialogTrigger> | ||
| <ActionButton prominence="low" onPress={handleImagePress}> | ||
| <SlotProvider slots={slots}> | ||
| <Icon src={imageIcon} /> | ||
| <Text>Paste, drop, or click to add images</Text> | ||
| </SlotProvider> | ||
| </ActionButton> | ||
| </HStack> | ||
| ); | ||
| } | ||
|
|
||
| function MarkdownDialog() { | ||
| return ( | ||
| <Dialog size="large"> | ||
| <Heading>Basic writing and formatting syntax</Heading> | ||
| <Content> | ||
| <Prose size="regular"> | ||
| <p> | ||
| Markdown is a way to style text; it is intended to be as | ||
| easy-to-read and easy-to-write as is feasible. | ||
| </p> | ||
|
|
||
| <h3>Headings</h3> | ||
| <p> | ||
| To create a heading, add one to six <code>#</code> symbols before | ||
| your heading text. The number of <code>#</code> you use will | ||
| determine the hierarchy level and typeface size of the heading. | ||
| </p> | ||
| <pre> | ||
| <code>{`# A first-level heading\n## A second-level heading\n### A third-level heading`}</code> | ||
| </pre> | ||
|
|
||
| <h3>Styling text</h3> | ||
| <p> | ||
| You can indicate emphasis with bold, italic, or strikethrough text. | ||
| </p> | ||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th scope="col">Style</th> | ||
| <th scope="col">Syntax</th> | ||
| <th scope="col">Shortcut</th> | ||
| <th scope="col">Example</th> | ||
| <th scope="col">Output</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>Bold</td> | ||
| <td> | ||
| <code>** **</code> | ||
| </td> | ||
| <td> | ||
| <Kbd meta trim={false}> | ||
| B | ||
| </Kbd> | ||
| </td> | ||
| <td> | ||
| <code>**This is bold text**</code> | ||
| </td> | ||
| <td> | ||
| <strong>This is bold text</strong> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>Italic</td> | ||
| <td> | ||
| <code>_ _</code> | ||
| </td> | ||
| <td> | ||
| <Kbd meta trim={false}> | ||
| I | ||
| </Kbd> | ||
| </td> | ||
| <td> | ||
| <code>_This text is italicized_</code> | ||
| </td> | ||
| <td> | ||
| <em>This text is italicized</em> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>Strikethrough</td> | ||
| <td> | ||
| <code>~~ ~~</code> | ||
| </td> | ||
| <td>None</td> | ||
| <td> | ||
| <code>~~This was mistaken text~~</code> | ||
| </td> | ||
| <td> | ||
| <del>This was mistaken text</del> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td>Nested emphasis</td> | ||
| <td> | ||
| <code>** **</code> and <code>_ _</code> | ||
| </td> | ||
| <td>None</td> | ||
| <td> | ||
| <code>**This text is _extremely_ important**</code> | ||
| </td> | ||
| <td> | ||
| <strong> | ||
| This text is <em>extremely</em> important | ||
| </strong> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| <h3>Lists</h3> | ||
| <p> | ||
| You can make an unordered (bulleted) list by preceding one or more | ||
| lines of text with <kbd>-</kbd>, or <kbd>*</kbd>. | ||
| </p> | ||
| <pre> | ||
| <code>{`- Red\n- Green\n- Blue`}</code> | ||
| </pre> | ||
|
|
||
| <p> | ||
| Create an ordered (numbered) list by preceding each line with a | ||
| number. | ||
| </p> | ||
| <pre> | ||
| <code>{`1. Red\n1. Green\n1. Blue`}</code> | ||
| </pre> | ||
|
Comment on lines
+164
to
+179
There was a problem hiding this comment. Not sure I'd describe it like this, seems a bit weird since you'd just add e.g. the There was a problem hiding this comment. True, needs to be reconsidered. |
||
|
|
||
| <h3>Quoting text</h3> | ||
| <p> | ||
| You can quote text with a <kbd>{'>'}</kbd>. | ||
| </p> | ||
| <pre> | ||
| <code>{`Text that is not a quote\n\n> Text that is a quote`}</code> | ||
| </pre> | ||
|
|
||
| <h3>Quoting code</h3> | ||
| <p> | ||
| You can call out code or a command within a sentence with single | ||
| backticks <kbd>{'`'}</kbd>. The text within the backticks will not | ||
| be formatted. | ||
| </p> | ||
| <pre> | ||
| <code>{`Use \`npm create @keystatic@latest\` to start editing static files today.`}</code> | ||
| </pre> | ||
|
|
||
| <p> | ||
| To format code or text into its own distinct block, use triple | ||
| backticks <kbd>{'```'}</kbd>. | ||
| </p> | ||
| <pre> | ||
| <code>{`Keystatic projects expect an exported config: | ||
|
|
||
| \`\`\` | ||
| import { config } from '@keystatic/core' | ||
|
|
||
| export default config({ | ||
| ... | ||
| }) | ||
| \`\`\``}</code> | ||
| </pre> | ||
| </Prose> | ||
| </Content> | ||
| </Dialog> | ||
| ); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Feels weird to say this when you're not reading markdown, there are just some markdown shortcuts
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah agreed, this is all pretty green. Switching to draft for now; we can workshop the content whenever, the concept and UI are in place.