From cd974c535ad7c080867870601014ecf1247bf16b Mon Sep 17 00:00:00 2001 From: jossmac <2730833+jossmac@users.noreply.github.com> Date: Fri, 1 Dec 2023 14:56:22 +1100 Subject: [PATCH 1/5] support "trim" prop on `Kbd` typography component --- design-system/pkg/src/typography/Kbd.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/design-system/pkg/src/typography/Kbd.tsx b/design-system/pkg/src/typography/Kbd.tsx index 048fd6c1e..166215523 100644 --- a/design-system/pkg/src/typography/Kbd.tsx +++ b/design-system/pkg/src/typography/Kbd.tsx @@ -13,6 +13,7 @@ import { DOMProps } from '@react-types/shared'; import { useSlotProps } from '@keystar/ui/slots'; import { BaseStyleProps, css } from '@keystar/ui/style'; +import { TextProps } from '@keystar/ui/types'; import { useTextStyles } from './text'; @@ -50,7 +51,8 @@ export type KbdProps = { * @default 'kbd' */ slot?: string; -} & DOMProps & +} & Pick & + DOMProps & BaseStyleProps; /** Represents text that specifies a keyboard command. */ From 07f7d5f4a7b3faca24e6380ce8b1a490ebb6cdea Mon Sep 17 00:00:00 2001 From: jossmac <2730833+jossmac@users.noreply.github.com> Date: Fri, 1 Dec 2023 14:57:14 +1100 Subject: [PATCH 2/5] improve prose styles; - style `kbd` element - basic table styles --- design-system/pkg/src/typography/Prose.tsx | 42 +++++++++++++++++++--- 1 file changed, 38 insertions(+), 4 deletions(-) diff --git a/design-system/pkg/src/typography/Prose.tsx b/design-system/pkg/src/typography/Prose.tsx index f9e4186df..c064655c8 100644 --- a/design-system/pkg/src/typography/Prose.tsx +++ b/design-system/pkg/src/typography/Prose.tsx @@ -117,10 +117,20 @@ export function useProseStyleProps(props: ProseProps) { a: { color: tokenSchema.color.foreground.accent, }, + kbd: { + backgroundColor: tokenSchema.color.alias.backgroundIdle, + borderRadius: tokenSchema.size.radius.small, + border: `${tokenSchema.size.border.regular} solid ${tokenSchema.color.alias.borderIdle}`, + color: tokenSchema.color.foreground.neutralEmphasis, + display: 'inline', + fontSize: '0.85em', + fontFamily: tokenSchema.typography.fontFamily.code, + padding: '.2em .4em', + }, // code block pre: { - backgroundColor: tokenSchema.color.background.surface, + backgroundColor: tokenSchema.color.alias.backgroundIdle, borderRadius: tokenSchema.size.radius.medium, color: tokenSchema.color.foreground.neutralEmphasis, fontFamily: tokenSchema.typography.fontFamily.code, @@ -137,13 +147,13 @@ export function useProseStyleProps(props: ProseProps) { }, // inline code '& :not(pre) > code': { - backgroundColor: tokenSchema.color.background.accent, + backgroundColor: tokenSchema.color.alias.backgroundSelected, borderRadius: tokenSchema.size.radius.small, color: tokenSchema.color.foreground.neutralEmphasis, - display: 'inline-block', + display: 'inline', fontSize: '0.85em', fontFamily: tokenSchema.typography.fontFamily.code, - paddingInline: tokenSchema.size.space.small, + padding: '.2em .4em', }, // Headings @@ -183,6 +193,30 @@ export function useProseStyleProps(props: ProseProps) { fontWeight: tokenSchema.typography.fontWeight.semibold, letterSpacing: '0.0125em', }, + + // Tables + // --------------------------------------------------------------------- + table: { + borderCollapse: 'collapse', + borderSpacing: 0, + width: '100%', + // tableLayout: 'fixed', + }, + th: { + fontWeight: tokenSchema.typography.fontWeight.semibold, + padding: '0.5rem', + textAlign: 'start', + verticalAlign: 'top', + }, + ':where(th:first-child)': { paddingInlineStart: 0 }, + ':where(th:last-child)': { paddingInlineEnd: 0 }, + td: { + padding: '0.5rem', + verticalAlign: 'top', + }, + ':where(td:first-child)': { paddingInlineStart: 0 }, + ':where(td:last-child)': { paddingInlineEnd: 0 }, + ...getListStyles(), }), styleProps.className From 72b940f0ec81c2cebc8ce696867803920273702a Mon Sep 17 00:00:00 2001 From: jossmac <2730833+jossmac@users.noreply.github.com> Date: Fri, 1 Dec 2023 14:58:08 +1100 Subject: [PATCH 3/5] document editor features, in situ --- .../fields/markdoc/editor/editor-footer.tsx | 215 ++++++++++++++++++ .../src/form/fields/markdoc/editor/index.tsx | 2 + 2 files changed, 217 insertions(+) create mode 100644 packages/keystatic/src/form/fields/markdoc/editor/editor-footer.tsx diff --git a/packages/keystatic/src/form/fields/markdoc/editor/editor-footer.tsx b/packages/keystatic/src/form/fields/markdoc/editor/editor-footer.tsx new file mode 100644 index 000000000..41ea5e69a --- /dev/null +++ b/packages/keystatic/src/form/fields/markdoc/editor/editor-footer.tsx @@ -0,0 +1,215 @@ +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 ( + + + + + + Markdown support + + + + + + + + Paste, drop, or click to add images + + + + ); +} + +function MarkdownDialog() { + return ( + + Basic writing and formatting syntax + + +

+ Markdown is a way to style text; it is intended to be as + easy-to-read and easy-to-write as is feasible. +

+ +

Headings

+

+ To create a heading, add one to six # symbols before + your heading text. The number of # you use will + determine the hierarchy level and typeface size of the heading. +

+ 
+            {`# A first-level heading\n## A second-level heading\n### A third-level heading`}
+
+ +

Styling text

+

+ You can indicate emphasis with bold, italic, or strikethrough text. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StyleSyntaxShortcutExampleOutput
Bold + ** ** + + + B + + + **This is bold text** + + This is bold text +
Italic + _ _ + + + I + + + _This text is italicized_ + + This text is italicized +
Strikethrough + ~~ ~~ + None + ~~This was mistaken text~~ + + This was mistaken text +
Nested emphasis + ** ** and _ _ + None + **This text is _extremely_ important** + + + This text is extremely important + +
+ +

Lists

+

+ You can make an unordered (bulleted) list by preceding one or more + lines of text with -, or *. +

+ 
+            {`- Red\n- Green\n- Blue`}
+
+ +

To order your list, precede each line with a number.

+ 
+            {`1. Red\n1. Green\n1. Blue`}
+
+ +

Quoting text

+

+ You can quote text with a {'>'}. +

+ 
+            {`Text that is not a quote\n\n> Text that is a quote`}
+
+ +

Quoting code

+

+ You can call out code or a command within a sentence with single + backticks {'`'}. The text within the backticks will not + be formatted. +

+ 
+            {`Use \`npm create @keystatic@latest\` to start editing static files today.`}
+
+ +

+ To format code or text into its own distinct block, use triple + backticks {'```'}. +

+ 
+            {`Keystatic project expects an exported config.
+
+\`\`\`
+import { config } from '@keystatic/core'
+
+export default config({
+  ...
+})
+\`\`\``}
+
+ + + + ); +} diff --git a/packages/keystatic/src/form/fields/markdoc/editor/index.tsx b/packages/keystatic/src/form/fields/markdoc/editor/index.tsx index 1058cdb59..15c18a87b 100644 --- a/packages/keystatic/src/form/fields/markdoc/editor/index.tsx +++ b/packages/keystatic/src/form/fields/markdoc/editor/index.tsx @@ -25,6 +25,7 @@ import { } from './context'; import { useEntryLayoutSplitPaneContext } from '../../../../app/entry-form'; import { useContentPanelSize } from '../../../../app/shell/context'; +import { EditorFooter } from './editor-footer'; const contentStyles = css({ flex: 1, @@ -108,6 +109,7 @@ export const Editor = forwardRef(function Editor( id={getContentId(id)} data-keystatic-editor="content" /> + From b752fd6af1927c3446bc37c6a4574e40d422edd2 Mon Sep 17 00:00:00 2001 From: jossmac <2730833+jossmac@users.noreply.github.com> Date: Fri, 1 Dec 2023 15:00:01 +1100 Subject: [PATCH 4/5] add changesets --- .changeset/chilled-students-relate.md | 7 +++++++ .changeset/fast-chicken-look.md | 5 +++++ 2 files changed, 12 insertions(+) create mode 100644 .changeset/chilled-students-relate.md create mode 100644 .changeset/fast-chicken-look.md diff --git a/.changeset/chilled-students-relate.md b/.changeset/chilled-students-relate.md new file mode 100644 index 000000000..98463c27c --- /dev/null +++ b/.changeset/chilled-students-relate.md @@ -0,0 +1,7 @@ +--- +'@keystar/ui': patch +--- + +Improve prose styles: +- style `kbd` elements +- basic table styles diff --git a/.changeset/fast-chicken-look.md b/.changeset/fast-chicken-look.md new file mode 100644 index 000000000..0b9602f52 --- /dev/null +++ b/.changeset/fast-chicken-look.md @@ -0,0 +1,5 @@ +--- +'@keystatic/core': patch +--- + +Document editor features, within footer actions. From dc0beadba94a406911cf5da5d4de15f69a53f0e5 Mon Sep 17 00:00:00 2001 From: jossmac <2730833+jossmac@users.noreply.github.com> Date: Fri, 1 Dec 2023 15:06:32 +1100 Subject: [PATCH 5/5] tweak content --- .../src/form/fields/markdoc/editor/editor-footer.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/keystatic/src/form/fields/markdoc/editor/editor-footer.tsx b/packages/keystatic/src/form/fields/markdoc/editor/editor-footer.tsx index 41ea5e69a..c1a0556f2 100644 --- a/packages/keystatic/src/form/fields/markdoc/editor/editor-footer.tsx +++ b/packages/keystatic/src/form/fields/markdoc/editor/editor-footer.tsx @@ -170,7 +170,10 @@ function MarkdownDialog() { {`- Red\n- Green\n- Blue`} -

To order your list, precede each line with a number.

+

+ Create an ordered (numbered) list by preceding each line with a + number. + 

             {`1. Red\n1. Green\n1. Blue`}
@@ -198,7 +201,7 @@ function MarkdownDialog() { backticks {'```'}. 

-            {`Keystatic project expects an exported config.
+            {`Keystatic projects expect an exported config:
 
 \`\`\`
 import { config } from '@keystatic/core'