mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-13 10:40:28 +03:00
Add ESC btn to toolbar to quickly exit formatting (#1283)
* Add ESC btn to toolbar to quickly exit formatting * add horizontal scroll to toolbar item * make editor toolbar usable in touch device * fix editor hotkeys not working in window * remove unused import
This commit is contained in:
Ajay Bura
GitHub
parent
2883b4c35b
commit
bc5e7445d9
7 changed files with 210 additions and 108 deletions
|
|
@ -10,6 +10,7 @@ import {
|
|||
Line,
|
||||
Menu,
|
||||
PopOut,
|
||||
Scroll,
|
||||
Text,
|
||||
Tooltip,
|
||||
TooltipProvider,
|
||||
|
|
@ -17,7 +18,14 @@ import {
|
|||
} from 'folds';
|
||||
import React, { ReactNode, useState } from 'react';
|
||||
import { ReactEditor, useSlate } from 'slate-react';
|
||||
import { isBlockActive, isMarkActive, toggleBlock, toggleMark } from './common';
|
||||
import {
|
||||
isAnyMarkActive,
|
||||
isBlockActive,
|
||||
isMarkActive,
|
||||
removeAllMark,
|
||||
toggleBlock,
|
||||
toggleMark,
|
||||
} from './common';
|
||||
import * as css from './Editor.css';
|
||||
import { BlockType, MarkType } from './Elements';
|
||||
import { HeadingLevel } from './slate';
|
||||
|
|
@ -44,6 +52,11 @@ function BtnTooltip({ text, shortCode }: { text: string; shortCode?: string }) {
|
|||
type MarkButtonProps = { format: MarkType; icon: IconSrc; tooltip: ReactNode };
|
||||
export function MarkButton({ format, icon, tooltip }: MarkButtonProps) {
|
||||
const editor = useSlate();
|
||||
const disableInline = isBlockActive(editor, BlockType.CodeBlock);
|
||||
|
||||
if (disableInline) {
|
||||
removeAllMark(editor);
|
||||
}
|
||||
|
||||
const handleClick = () => {
|
||||
toggleMark(editor, format);
|
||||
|
|
@ -58,10 +71,11 @@ export function MarkButton({ format, icon, tooltip }: MarkButtonProps) {
|
|||
variant="SurfaceVariant"
|
||||
onClick={handleClick}
|
||||
aria-pressed={isMarkActive(editor, format)}
|
||||
size="300"
|
||||
size="400"
|
||||
radii="300"
|
||||
disabled={disableInline}
|
||||
>
|
||||
<Icon size="50" src={icon} />
|
||||
<Icon size="200" src={icon} />
|
||||
</IconButton>
|
||||
)}
|
||||
</TooltipProvider>
|
||||
|
|
@ -89,10 +103,10 @@ export function BlockButton({ format, icon, tooltip }: BlockButtonProps) {
|
|||
variant="SurfaceVariant"
|
||||
onClick={handleClick}
|
||||
aria-pressed={isBlockActive(editor, format)}
|
||||
size="300"
|
||||
size="400"
|
||||
radii="300"
|
||||
>
|
||||
<Icon size="50" src={icon} />
|
||||
<Icon size="200" src={icon} />
|
||||
</IconButton>
|
||||
)}
|
||||
</TooltipProvider>
|
||||
|
|
@ -115,6 +129,7 @@ export function HeadingBlockButton() {
|
|||
return (
|
||||
<PopOut
|
||||
open={open}
|
||||
offset={5}
|
||||
align="Start"
|
||||
position="Top"
|
||||
content={
|
||||
|
|
@ -130,14 +145,14 @@ export function HeadingBlockButton() {
|
|||
>
|
||||
<Menu style={{ padding: config.space.S100 }}>
|
||||
<Box gap="100">
|
||||
<IconButton onClick={() => handleMenuSelect(1)} size="300" radii="300">
|
||||
<Icon size="100" src={Icons.Heading1} />
|
||||
<IconButton onClick={() => handleMenuSelect(1)} size="400" radii="300">
|
||||
<Icon size="200" src={Icons.Heading1} />
|
||||
</IconButton>
|
||||
<IconButton onClick={() => handleMenuSelect(2)} size="300" radii="300">
|
||||
<Icon size="100" src={Icons.Heading2} />
|
||||
<IconButton onClick={() => handleMenuSelect(2)} size="400" radii="300">
|
||||
<Icon size="200" src={Icons.Heading2} />
|
||||
</IconButton>
|
||||
<IconButton onClick={() => handleMenuSelect(3)} size="300" radii="300">
|
||||
<Icon size="100" src={Icons.Heading3} />
|
||||
<IconButton onClick={() => handleMenuSelect(3)} size="400" radii="300">
|
||||
<Icon size="200" src={Icons.Heading3} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Menu>
|
||||
|
|
@ -151,97 +166,143 @@ export function HeadingBlockButton() {
|
|||
variant="SurfaceVariant"
|
||||
onClick={() => (isActive ? toggleBlock(editor, BlockType.Heading) : setOpen(!open))}
|
||||
aria-pressed={isActive}
|
||||
size="300"
|
||||
size="400"
|
||||
radii="300"
|
||||
>
|
||||
<Icon size="50" src={Icons[`Heading${level}`]} />
|
||||
<Icon size="50" src={isActive ? Icons.Cross : Icons.ChevronBottom} />
|
||||
<Icon size="200" src={Icons[`Heading${level}`]} />
|
||||
<Icon size="200" src={isActive ? Icons.Cross : Icons.ChevronBottom} />
|
||||
</IconButton>
|
||||
)}
|
||||
</PopOut>
|
||||
);
|
||||
}
|
||||
|
||||
export function Toolbar() {
|
||||
type ExitFormattingProps = { tooltip: ReactNode };
|
||||
export function ExitFormatting({ tooltip }: ExitFormattingProps) {
|
||||
const editor = useSlate();
|
||||
const allowInline = !isBlockActive(editor, BlockType.CodeBlock);
|
||||
const modKey = isMacOS() ? KeySymbol.Command : 'Ctrl';
|
||||
|
||||
const handleClick = () => {
|
||||
if (isAnyMarkActive(editor)) {
|
||||
removeAllMark(editor);
|
||||
} else if (!isBlockActive(editor, BlockType.Paragraph)) {
|
||||
toggleBlock(editor, BlockType.Paragraph);
|
||||
}
|
||||
ReactEditor.focus(editor);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box className={css.EditorToolbar} alignItems="Center" gap="300">
|
||||
<Box gap="100">
|
||||
<HeadingBlockButton />
|
||||
<BlockButton
|
||||
format={BlockType.OrderedList}
|
||||
icon={Icons.OrderList}
|
||||
tooltip={
|
||||
<BtnTooltip text="Ordered List" shortCode={`${modKey} + ${KeySymbol.Shift} + 0`} />
|
||||
}
|
||||
/>
|
||||
<BlockButton
|
||||
format={BlockType.UnorderedList}
|
||||
icon={Icons.UnorderList}
|
||||
tooltip={
|
||||
<BtnTooltip text="Unordered List" shortCode={`${modKey} + ${KeySymbol.Shift} + 8`} />
|
||||
}
|
||||
/>
|
||||
<BlockButton
|
||||
format={BlockType.BlockQuote}
|
||||
icon={Icons.BlockQuote}
|
||||
tooltip={
|
||||
<BtnTooltip text="Block Quote" shortCode={`${modKey} + ${KeySymbol.Shift} + '`} />
|
||||
}
|
||||
/>
|
||||
<BlockButton
|
||||
format={BlockType.CodeBlock}
|
||||
icon={Icons.BlockCode}
|
||||
tooltip={
|
||||
<BtnTooltip text="Block Code" shortCode={`${modKey} + ${KeySymbol.Shift} + ;`} />
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
{allowInline && (
|
||||
<>
|
||||
<Line variant="SurfaceVariant" direction="Vertical" style={{ height: toRem(12) }} />
|
||||
<Box gap="100">
|
||||
<MarkButton
|
||||
format={MarkType.Bold}
|
||||
icon={Icons.Bold}
|
||||
tooltip={<BtnTooltip text="Bold" shortCode={`${modKey} + B`} />}
|
||||
<TooltipProvider tooltip={tooltip} delay={500}>
|
||||
{(triggerRef) => (
|
||||
<IconButton
|
||||
ref={triggerRef}
|
||||
variant="SurfaceVariant"
|
||||
onClick={handleClick}
|
||||
size="400"
|
||||
radii="300"
|
||||
>
|
||||
<Text size="B400">{`Exit ${KeySymbol.Hyper}`}</Text>
|
||||
</IconButton>
|
||||
)}
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export function Toolbar() {
|
||||
const editor = useSlate();
|
||||
const modKey = isMacOS() ? KeySymbol.Command : 'Ctrl';
|
||||
|
||||
const canEscape = isAnyMarkActive(editor) || !isBlockActive(editor, BlockType.Paragraph);
|
||||
|
||||
return (
|
||||
<Box className={css.EditorToolbarBase}>
|
||||
<Scroll direction="Horizontal" size="0">
|
||||
<Box className={css.EditorToolbar} alignItems="Center" gap="300">
|
||||
<>
|
||||
<Box shrink="No" gap="100">
|
||||
<MarkButton
|
||||
format={MarkType.Bold}
|
||||
icon={Icons.Bold}
|
||||
tooltip={<BtnTooltip text="Bold" shortCode={`${modKey} + B`} />}
|
||||
/>
|
||||
<MarkButton
|
||||
format={MarkType.Italic}
|
||||
icon={Icons.Italic}
|
||||
tooltip={<BtnTooltip text="Italic" shortCode={`${modKey} + I`} />}
|
||||
/>
|
||||
<MarkButton
|
||||
format={MarkType.Underline}
|
||||
icon={Icons.Underline}
|
||||
tooltip={<BtnTooltip text="Underline" shortCode={`${modKey} + U`} />}
|
||||
/>
|
||||
<MarkButton
|
||||
format={MarkType.StrikeThrough}
|
||||
icon={Icons.Strike}
|
||||
tooltip={
|
||||
<BtnTooltip
|
||||
text="Strike Through"
|
||||
shortCode={`${modKey} + ${KeySymbol.Shift} + U`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<MarkButton
|
||||
format={MarkType.Code}
|
||||
icon={Icons.Code}
|
||||
tooltip={<BtnTooltip text="Inline Code" shortCode={`${modKey} + [`} />}
|
||||
/>
|
||||
<MarkButton
|
||||
format={MarkType.Spoiler}
|
||||
icon={Icons.EyeBlind}
|
||||
tooltip={<BtnTooltip text="Spoiler" shortCode={`${modKey} + H`} />}
|
||||
/>
|
||||
</Box>
|
||||
<Line variant="SurfaceVariant" direction="Vertical" style={{ height: toRem(12) }} />
|
||||
</>
|
||||
<Box shrink="No" gap="100">
|
||||
<BlockButton
|
||||
format={BlockType.BlockQuote}
|
||||
icon={Icons.BlockQuote}
|
||||
tooltip={
|
||||
<BtnTooltip text="Block Quote" shortCode={`${modKey} + ${KeySymbol.Shift} + '`} />
|
||||
}
|
||||
/>
|
||||
<MarkButton
|
||||
format={MarkType.Italic}
|
||||
icon={Icons.Italic}
|
||||
tooltip={<BtnTooltip text="Italic" shortCode={`${modKey} + I`} />}
|
||||
<BlockButton
|
||||
format={BlockType.CodeBlock}
|
||||
icon={Icons.BlockCode}
|
||||
tooltip={
|
||||
<BtnTooltip text="Block Code" shortCode={`${modKey} + ${KeySymbol.Shift} + ;`} />
|
||||
}
|
||||
/>
|
||||
<MarkButton
|
||||
format={MarkType.Underline}
|
||||
icon={Icons.Underline}
|
||||
tooltip={<BtnTooltip text="Underline" shortCode={`${modKey} + U`} />}
|
||||
<BlockButton
|
||||
format={BlockType.OrderedList}
|
||||
icon={Icons.OrderList}
|
||||
tooltip={
|
||||
<BtnTooltip text="Ordered List" shortCode={`${modKey} + ${KeySymbol.Shift} + 7`} />
|
||||
}
|
||||
/>
|
||||
<MarkButton
|
||||
format={MarkType.StrikeThrough}
|
||||
icon={Icons.Strike}
|
||||
<BlockButton
|
||||
format={BlockType.UnorderedList}
|
||||
icon={Icons.UnorderList}
|
||||
tooltip={
|
||||
<BtnTooltip
|
||||
text="Strike Through"
|
||||
shortCode={`${modKey} + ${KeySymbol.Shift} + U`}
|
||||
text="Unordered List"
|
||||
shortCode={`${modKey} + ${KeySymbol.Shift} + 8`}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<MarkButton
|
||||
format={MarkType.Code}
|
||||
icon={Icons.Code}
|
||||
tooltip={<BtnTooltip text="Inline Code" shortCode={`${modKey} + [`} />}
|
||||
/>
|
||||
<MarkButton
|
||||
format={MarkType.Spoiler}
|
||||
icon={Icons.EyeBlind}
|
||||
tooltip={<BtnTooltip text="Spoiler" shortCode={`${modKey} + H`} />}
|
||||
/>
|
||||
<HeadingBlockButton />
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
{canEscape && (
|
||||
<>
|
||||
<Line variant="SurfaceVariant" direction="Vertical" style={{ height: toRem(12) }} />
|
||||
<Box shrink="No" gap="100">
|
||||
<ExitFormatting
|
||||
tooltip={<BtnTooltip text="Exit Formatting" shortCode={`${modKey} + E`} />}
|
||||
/>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Scroll>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue