Add custom editor

This commit is contained in:
Ajay Bura 2023-03-05 16:23:14 +05:30
parent 23de3aa4a3
commit 0119811a67
13 changed files with 854 additions and 8 deletions

97
package-lock.json generated
View file

@ -25,10 +25,11 @@
"file-saver": "2.0.5",
"flux": "4.0.3",
"focus-trap-react": "10.0.2",
"folds": "1.0.4",
"folds": "1.0.5",
"formik": "2.2.9",
"html-react-parser": "3.0.4",
"immer": "9.0.16",
"is-hotkey": "0.2.0",
"jotai": "1.12.0",
"katex": "0.16.4",
"linkify-html": "4.0.2",
@ -44,6 +45,8 @@
"react-google-recaptcha": "2.1.0",
"react-modal": "3.16.1",
"sanitize-html": "2.8.0",
"slate": "0.90.0",
"slate-react": "0.90.0",
"tippy.js": "6.3.7",
"twemoji": "14.0.2"
},
@ -922,6 +925,11 @@
"@jridgewell/sourcemap-codec": "1.4.14"
}
},
"node_modules/@juggle/resize-observer": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
"integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
},
"node_modules/@khanacademy/simple-markdown": {
"version": "0.8.6",
"resolved": "https://registry.npmjs.org/@khanacademy/simple-markdown/-/simple-markdown-0.8.6.tgz",
@ -1032,6 +1040,11 @@
"resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
"integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g=="
},
"node_modules/@types/is-hotkey": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/@types/is-hotkey/-/is-hotkey-0.1.7.tgz",
"integrity": "sha512-yB5C7zcOM7idwYZZ1wKQ3pTfjA9BbvFqRWvKB46GFddxnJtHwi/b9y84ykQtxQPg5qhdpg4Q/kWU3EGoCTmLzQ=="
},
"node_modules/@types/json-schema": {
"version": "7.0.11",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@ -1044,6 +1057,11 @@
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
"dev": true
},
"node_modules/@types/lodash": {
"version": "4.14.191",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
"integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ=="
},
"node_modules/@types/prop-types": {
"version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@ -1904,6 +1922,11 @@
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
},
"node_modules/compute-scroll-into-view": {
"version": "1.0.20",
"resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz",
"integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg=="
},
"node_modules/computed-style": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/computed-style/-/computed-style-0.1.4.tgz",
@ -2071,6 +2094,18 @@
"node": ">=8"
}
},
"node_modules/direction": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/direction/-/direction-1.0.4.tgz",
"integrity": "sha512-GYqKi1aH7PJXxdhTeZBFrg8vUBeKXi+cNprXsC1kpJcbcVnV9wBsrOu1cQEdG0WeQwlfHiy3XvnKfIrJ2R0NzQ==",
"bin": {
"direction": "cli.js"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/dnd-core": {
"version": "15.1.2",
"resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-15.1.2.tgz",
@ -3022,9 +3057,9 @@
}
},
"node_modules/folds": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/folds/-/folds-1.0.4.tgz",
"integrity": "sha512-oFtFutLaTW3CBvNlWOK8GDOWAw9CARZ/XVxGSHp6gucZRs0tNhD9bBy/oH0qbwzYfNIm4CmlBUdV5nMEaOnZsw==",
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/folds/-/folds-1.0.5.tgz",
"integrity": "sha512-j5QTgWL0+fpQ6v2SymealBgsMmt0BmXUbMXzXY2NO9SWgbvBbekRyEzNZfRUpX63vnLgQ1kK7s9Np/s/UrsDRw==",
"peerDependencies": {
"@vanilla-extract/css": "^1.9.2",
"@vanilla-extract/recipes": "^0.3.0",
@ -3548,6 +3583,11 @@
"node": ">=0.10.0"
}
},
"node_modules/is-hotkey": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/is-hotkey/-/is-hotkey-0.2.0.tgz",
"integrity": "sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw=="
},
"node_modules/is-negative-zero": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
@ -4882,6 +4922,14 @@
"object-assign": "^4.1.1"
}
},
"node_modules/scroll-into-view-if-needed": {
"version": "2.2.31",
"resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz",
"integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==",
"dependencies": {
"compute-scroll-into-view": "^1.0.20"
}
},
"node_modules/sdp-transform": {
"version": "2.14.1",
"resolved": "https://registry.npmjs.org/sdp-transform/-/sdp-transform-2.14.1.tgz",
@ -4946,6 +4994,42 @@
"node": ">=8"
}
},
"node_modules/slate": {
"version": "0.90.0",
"resolved": "https://registry.npmjs.org/slate/-/slate-0.90.0.tgz",
"integrity": "sha512-dv8idv0JjYyHiAJcVKf5yWKPDMTDi+PSZyfjsnquEI8VB5nmTVGjeJab06lc3o69O7aN05ROwO9/OY8mU1IUPA==",
"dependencies": {
"immer": "^9.0.6",
"is-plain-object": "^5.0.0",
"tiny-warning": "^1.0.3"
}
},
"node_modules/slate-react": {
"version": "0.90.0",
"resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.90.0.tgz",
"integrity": "sha512-z6pGd6jjU5VazLxlDi6zL3a6yaPBPJ+A2VyIlE/h/rvDywaLYGvk0xcrA9NrK71Dr47HK5ZN2zFEZNleh6wlPA==",
"dependencies": {
"@juggle/resize-observer": "^3.4.0",
"@types/is-hotkey": "^0.1.1",
"@types/lodash": "^4.14.149",
"direction": "^1.0.3",
"is-hotkey": "^0.1.6",
"is-plain-object": "^5.0.0",
"lodash": "^4.17.4",
"scroll-into-view-if-needed": "^2.2.20",
"tiny-invariant": "1.0.6"
},
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0",
"slate": ">=0.65.3"
}
},
"node_modules/slate-react/node_modules/is-hotkey": {
"version": "0.1.8",
"resolved": "https://registry.npmjs.org/is-hotkey/-/is-hotkey-0.1.8.tgz",
"integrity": "sha512-qs3NZ1INIS+H+yeo7cD9pDfwYV/jqRh1JG9S9zYrNudkoUQg7OL7ziXqRKu+InFjUIDoP2o6HIkLYMh1pcWgyQ=="
},
"node_modules/source-map-js": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@ -5084,6 +5168,11 @@
"integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
"dev": true
},
"node_modules/tiny-invariant": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.6.tgz",
"integrity": "sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA=="
},
"node_modules/tiny-warning": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",

View file

@ -35,10 +35,11 @@
"file-saver": "2.0.5",
"flux": "4.0.3",
"focus-trap-react": "10.0.2",
"folds": "1.0.4",
"folds": "1.0.5",
"formik": "2.2.9",
"html-react-parser": "3.0.4",
"immer": "9.0.16",
"is-hotkey": "0.2.0",
"jotai": "1.12.0",
"katex": "0.16.4",
"linkify-html": "4.0.2",
@ -54,6 +55,8 @@
"react-google-recaptcha": "2.1.0",
"react-modal": "3.16.1",
"sanitize-html": "2.8.0",
"slate": "0.90.0",
"slate-react": "0.90.0",
"tippy.js": "6.3.7",
"twemoji": "14.0.2"
},

View file

@ -0,0 +1,44 @@
import { style } from '@vanilla-extract/css';
import { color, config, DefaultReset, toRem } from 'folds';
export const Editor = style([
DefaultReset,
{
backgroundColor: color.SurfaceVariant.Container,
border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
borderRadius: config.radii.R400,
},
]);
export const EditorOptions = style([
DefaultReset,
{
padding: config.space.S200,
},
]);
export const EditorTextareaScroll = style({});
export const EditorTextarea = style([
DefaultReset,
{
flexGrow: 1,
height: '100%',
padding: `${toRem(13)} 0`,
selectors: {
[`${EditorTextareaScroll}:first-child &`]: {
paddingLeft: toRem(13),
},
[`${EditorTextareaScroll}:last-child &`]: {
paddingRight: toRem(13),
},
},
},
]);
export const EditorToolbar = style([
DefaultReset,
{
padding: config.space.S100,
},
]);

View file

@ -0,0 +1,80 @@
import React, { useState } from 'react';
import FocusTrap from 'focus-trap-react';
import {
config,
Icon,
IconButton,
Icons,
Line,
Modal,
Overlay,
OverlayBackdrop,
OverlayCenter,
} from 'folds';
import { CustomEditor } from './Editor';
import { Toolbar } from './Toolbar';
export function EditorPreview() {
const [open, setOpen] = useState(false);
const [toolbar, setToolbar] = useState(false);
return (
<>
<IconButton variant="SurfaceVariant" onClick={() => setOpen(!open)}>
<Icon src={Icons.BlockQuote} />
</IconButton>
<Overlay open={open} backdrop={<OverlayBackdrop />}>
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setOpen(false),
clickOutsideDeactivates: true,
}}
>
<Modal size="500">
<div style={{ padding: config.space.S400 }}>
<CustomEditor
placeholder="Send a message..."
before={
<IconButton variant="SurfaceVariant" size="300" radii="300">
<Icon src={Icons.PlusCircle} />
</IconButton>
}
after={
<>
<IconButton
variant="SurfaceVariant"
size="300"
radii="300"
onClick={() => setToolbar(!toolbar)}
aria-pressed={toolbar}
>
<Icon src={toolbar ? Icons.AlphabetUnderline : Icons.Alphabet} />
</IconButton>
<IconButton variant="SurfaceVariant" size="300" radii="300">
<Icon src={Icons.Smile} />
</IconButton>
<IconButton variant="SurfaceVariant" size="300" radii="300">
<Icon src={Icons.Send} />
</IconButton>
</>
}
bottom={
toolbar && (
<div>
<Line variant="SurfaceVariant" size="300" />
<Toolbar />
</div>
)
}
/>
</div>
</Modal>
</FocusTrap>
</OverlayCenter>
</Overlay>
</>
);
}

View file

@ -0,0 +1,85 @@
import React, { KeyboardEventHandler, ReactNode, useCallback, useState } from 'react';
import { Box, Scroll } from 'folds';
import { createEditor } from 'slate';
import { Slate, Editable, withReact, RenderLeafProps, RenderElementProps } from 'slate-react';
import { BlockType, RenderElement, RenderLeaf } from './Elements';
import { CustomElement } from './slate';
import * as css from './Editor.css';
import { toggleKeyboardShortcut } from './keyboard';
const initialValue: CustomElement[] = [
{
type: BlockType.Paragraph,
children: [{ text: 'A line of text in paragraph' }],
},
];
type CustomEditorProps = {
top?: ReactNode;
bottom?: ReactNode;
before?: ReactNode;
after?: ReactNode;
maxHeight?: string;
placeholder?: string;
};
export function CustomEditor({
top,
bottom,
before,
after,
maxHeight = '50vh',
placeholder,
}: CustomEditorProps) {
const [editor] = useState(() => withReact(createEditor()));
const renderElement = useCallback(
(props: RenderElementProps) => <RenderElement {...props} />,
[]
);
const renderLeaf = useCallback((props: RenderLeafProps) => <RenderLeaf {...props} />, []);
const handleKeydown: KeyboardEventHandler = useCallback(
(evt) => {
toggleKeyboardShortcut(editor, evt);
},
[editor]
);
return (
<div className={css.Editor}>
<Slate editor={editor} value={initialValue}>
{top}
<Box alignItems="Start">
{before && (
<Box className={css.EditorOptions} alignItems="Center" gap="100" shrink="No">
{before}
</Box>
)}
<Scroll
className={css.EditorTextareaScroll}
variant="SurfaceVariant"
style={{ maxHeight }}
size="300"
visibility="Hover"
hideTrack
>
<Editable
className={css.EditorTextarea}
placeholder={placeholder}
renderElement={renderElement}
renderLeaf={renderLeaf}
onKeyDown={handleKeydown}
/>
</Scroll>
{after && (
<Box className={css.EditorOptions} alignItems="Center" gap="100" shrink="No">
{after}
</Box>
)}
</Box>
{bottom}
</Slate>
</div>
);
}

View file

@ -0,0 +1,55 @@
import { style } from '@vanilla-extract/css';
import { color, config, DefaultReset } from 'folds';
const MarginBottom = style({
marginBottom: config.space.S200,
selectors: {
'&:last-child': {
marginBottom: 0,
},
},
});
export const Paragraph = style([MarginBottom]);
export const Heading = style([MarginBottom]);
export const BlockQuote = style([
DefaultReset,
MarginBottom,
{
paddingLeft: config.space.S200,
borderLeft: `${config.borderWidth.B700} solid ${color.SurfaceVariant.ContainerLine}`,
fontStyle: 'italic',
},
]);
const BaseCode = style({
fontFamily: 'monospace',
color: color.Warning.OnContainer,
background: color.Warning.Container,
border: `${config.borderWidth.B300} solid ${color.Warning.ContainerLine}`,
borderRadius: config.radii.R300,
});
export const Code = style([
DefaultReset,
BaseCode,
{
padding: `0 ${config.space.S100}`,
},
]);
export const CodeBlock = style([DefaultReset, BaseCode, MarginBottom]);
export const CodeBlockInternal = style({
padding: `${config.space.S200} ${config.space.S200} 0`,
});
export const List = style([
DefaultReset,
MarginBottom,
{
padding: `0 ${config.space.S100}`,
paddingLeft: config.space.S600,
},
]);

View file

@ -0,0 +1,108 @@
import { Scroll, Text } from 'folds';
import React from 'react';
import { RenderElementProps, RenderLeafProps } from 'slate-react';
import * as css from './Elements.css';
export enum MarkType {
Bold = 'bold',
Italic = 'italic',
Underline = 'underline',
StrikeThrough = 'strikeThrough',
Code = 'code',
}
export enum BlockType {
Paragraph = 'paragraph',
Heading = 'heading',
CodeLine = 'code-line',
CodeBlock = 'code-block',
QuoteLine = 'quote-line',
BlockQuote = 'block-quote',
ListItem = 'list-item',
OrderedList = 'ordered-list',
UnorderedList = 'unordered-list',
}
export function RenderElement({ attributes, element, children }: RenderElementProps) {
switch (element.type) {
case BlockType.Paragraph:
return (
<Text className={css.Paragraph} {...attributes}>
{children}
</Text>
);
case BlockType.Heading:
if (element.level === 1)
return (
<Text className={css.Heading} as="h2" size="H2" {...attributes}>
{children}
</Text>
);
if (element.level === 2)
return (
<Text className={css.Heading} as="h3" size="H3" {...attributes}>
{children}
</Text>
);
if (element.level === 3)
return (
<Text className={css.Heading} as="h4" size="H4" {...attributes}>
{children}
</Text>
);
return (
<Text className={css.Heading} as="h3" size="H3" {...attributes}>
{children}
</Text>
);
case BlockType.CodeLine:
return <div>{children}</div>;
case BlockType.CodeBlock:
return (
<Text as="pre" className={css.CodeBlock}>
<Scroll direction="Horizontal" variant="Warning" size="300" visibility="Hover" hideTrack>
<div className={css.CodeBlockInternal}>{children}</div>
</Scroll>
</Text>
);
case BlockType.QuoteLine:
return <div>{children}</div>;
case BlockType.BlockQuote:
return (
<Text as="blockquote" className={css.BlockQuote}>
{children}
</Text>
);
case BlockType.ListItem:
return <Text as="li">{children}</Text>;
case BlockType.OrderedList:
return <ol className={css.List}>{children}</ol>;
case BlockType.UnorderedList:
return <ul className={css.List}>{children}</ul>;
default:
return (
<Text className={css.Paragraph} {...attributes}>
{children}
</Text>
);
}
}
export function RenderLeaf({ attributes, leaf, children }: RenderLeafProps) {
let child = children;
if (leaf.bold) child = <strong {...attributes}>{child}</strong>;
if (leaf.italic) child = <i {...attributes}>{child}</i>;
if (leaf.underline) child = <u {...attributes}>{child}</u>;
if (leaf.strikeThrough) child = <s {...attributes}>{child}</s>;
if (leaf.code)
child = (
<code className={css.Code} {...attributes}>
{child}
</code>
);
if (child !== children) return child;
return <span {...attributes}>{child}</span>;
}

View file

@ -0,0 +1,132 @@
import FocusTrap from 'focus-trap-react';
import { Box, config, Icon, IconButton, Icons, IconSrc, Line, Menu, PopOut, toRem } from 'folds';
import React, { useState } from 'react';
import { useSlate } from 'slate-react';
import { isBlockActive, isMarkActive, toggleBlock, toggleMark } from './common';
import * as css from './Editor.css';
import { BlockType, MarkType } from './Elements';
import { HeadingLevel } from './slate';
type MarkButtonProps = { format: MarkType; icon: IconSrc };
export function MarkButton({ format, icon }: MarkButtonProps) {
const editor = useSlate();
return (
<IconButton
variant="SurfaceVariant"
onClick={() => toggleMark(editor, format)}
aria-pressed={isMarkActive(editor, format)}
size="300"
radii="300"
>
<Icon size="50" src={icon} />
</IconButton>
);
}
type BlockButtonProps = { format: BlockType; icon: IconSrc };
export function BlockButton({ format, icon }: BlockButtonProps) {
const editor = useSlate();
return (
<IconButton
variant="SurfaceVariant"
onClick={() => toggleBlock(editor, format, { level: 1 })}
aria-pressed={isBlockActive(editor, format)}
size="300"
radii="300"
>
<Icon size="50" src={icon} />
</IconButton>
);
}
export function HeadingBlockButton() {
const editor = useSlate();
const [level, setLevel] = useState<HeadingLevel>(1);
const [open, setOpen] = useState(false);
const isActive = isBlockActive(editor, BlockType.Heading);
const handleMenuSelect = (selectedLevel: HeadingLevel) => {
setOpen(false);
setLevel(selectedLevel);
toggleBlock(editor, BlockType.Heading, { level: selectedLevel });
};
return (
<PopOut
open={open}
align="start"
position="top"
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setOpen(false),
clickOutsideDeactivates: true,
isKeyForward: (evt: KeyboardEvent) =>
evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
}}
>
<Menu style={{ padding: config.space.S100 }}>
<Box gap="100">
<IconButton onClick={() => handleMenuSelect(1)} size="300" radii="300">
<Icon size="100" src={Icons.Heading1} />
</IconButton>
<IconButton onClick={() => handleMenuSelect(2)} size="300" radii="300">
<Icon size="100" src={Icons.Heading2} />
</IconButton>
<IconButton onClick={() => handleMenuSelect(3)} size="300" radii="300">
<Icon size="100" src={Icons.Heading3} />
</IconButton>
</Box>
</Menu>
</FocusTrap>
}
>
{(ref) => (
<IconButton
style={{ width: 'unset' }}
ref={ref}
variant="SurfaceVariant"
onClick={() => (isActive ? toggleBlock(editor, BlockType.Heading) : setOpen(!open))}
aria-pressed={isActive}
size="300"
radii="300"
>
<Icon size="50" src={Icons[`Heading${level}`]} />
<Icon size="50" src={isActive ? Icons.Cross : Icons.ChevronBottom} />
</IconButton>
)}
</PopOut>
);
}
export function Toolbar() {
const editor = useSlate();
const allowInline = !isBlockActive(editor, BlockType.CodeBlock);
return (
<Box className={css.EditorToolbar} alignItems="Center" gap="300">
<Box gap="100">
<HeadingBlockButton />
<BlockButton format={BlockType.OrderedList} icon={Icons.OrderList} />
<BlockButton format={BlockType.UnorderedList} icon={Icons.UnorderList} />
<BlockButton format={BlockType.BlockQuote} icon={Icons.BlockQuote} />
<BlockButton format={BlockType.CodeBlock} icon={Icons.BlockCode} />
</Box>
{allowInline && (
<>
<Line direction="Vertical" style={{ height: toRem(12) }} />
<Box gap="100">
<MarkButton format={MarkType.Bold} icon={Icons.Bold} />
<MarkButton format={MarkType.Italic} icon={Icons.Italic} />
<MarkButton format={MarkType.Underline} icon={Icons.Underline} />
<MarkButton format={MarkType.StrikeThrough} icon={Icons.Strike} />
<MarkButton format={MarkType.Code} icon={Icons.Code} />
</Box>
</>
)}
</Box>
);
}

View file

@ -0,0 +1,96 @@
import { Editor, Element, Transforms } from 'slate';
import { BlockType, MarkType } from './Elements';
import { HeadingLevel } from './slate';
export const isMarkActive = (editor: Editor, format: MarkType) => {
const marks = Editor.marks(editor);
return marks ? marks[format] === true : false;
};
export const toggleMark = (editor: Editor, format: MarkType) => {
const isActive = isMarkActive(editor, format);
if (isActive) {
Editor.removeMark(editor, format);
} else {
Editor.addMark(editor, format, true);
}
};
export const isBlockActive = (editor: Editor, format: BlockType) => {
const [match] = Editor.nodes(editor, {
match: (node) => Element.isElement(node) && node.type === format,
});
return !!match;
};
type BlockOption = { level: HeadingLevel };
const NESTED_BLOCK = [
BlockType.OrderedList,
BlockType.UnorderedList,
BlockType.BlockQuote,
BlockType.CodeBlock,
];
export const toggleBlock = (editor: Editor, format: BlockType, option?: BlockOption) => {
const isActive = isBlockActive(editor, format);
Transforms.unwrapNodes(editor, {
match: (node) => Element.isElement(node) && NESTED_BLOCK.includes(node.type),
split: true,
});
if (isActive) {
Transforms.setNodes(editor, {
type: BlockType.Paragraph,
});
return;
}
if (format === BlockType.OrderedList || format === BlockType.UnorderedList) {
Transforms.setNodes(editor, {
type: BlockType.ListItem,
});
const block = {
type: format,
children: [],
};
Transforms.wrapNodes(editor, block);
return;
}
if (format === BlockType.CodeBlock) {
Transforms.setNodes(editor, {
type: BlockType.CodeLine,
});
const block = {
type: format,
children: [],
};
Transforms.wrapNodes(editor, block);
return;
}
if (format === BlockType.BlockQuote) {
Transforms.setNodes(editor, {
type: BlockType.QuoteLine,
});
const block = {
type: format,
children: [],
};
Transforms.wrapNodes(editor, block);
return;
}
if (format === BlockType.Heading) {
Transforms.setNodes(editor, {
type: format,
level: option?.level ?? 1,
});
}
Transforms.setNodes(editor, {
type: format,
});
};

View file

@ -0,0 +1,48 @@
import { isHotkey } from 'is-hotkey';
import { KeyboardEvent } from 'react';
import { Editor } from 'slate';
import { isBlockActive, toggleBlock, toggleMark } from './common';
import { BlockType, MarkType } from './Elements';
export const INLINE_HOTKEYS: Record<string, MarkType> = {
'ctrl+b': MarkType.Bold,
'mod+b': MarkType.Bold,
'ctrl+i': MarkType.Italic,
'mod+i': MarkType.Italic,
'ctrl+u': MarkType.Underline,
'mod+u': MarkType.Underline,
'ctrl+shift+u': MarkType.StrikeThrough,
'mod+shift+u': MarkType.StrikeThrough,
'ctrl+[': MarkType.Code,
'mod+[': MarkType.Code,
};
const INLINE_KEYS = Object.keys(INLINE_HOTKEYS);
export const BLOCK_HOTKEYS: Record<string, BlockType> = {
'ctrl+shift+0': BlockType.OrderedList,
'mod+shift+0': BlockType.OrderedList,
'ctrl+shift+8': BlockType.UnorderedList,
'mod+shift+8': BlockType.UnorderedList,
'ctrl+shift+.': BlockType.BlockQuote,
'mod+shift+.': BlockType.BlockQuote,
'ctrl+shift+m': BlockType.CodeBlock,
'mod+shift+m': BlockType.CodeBlock,
};
const BLOCK_KEYS = Object.keys(BLOCK_HOTKEYS);
export const toggleKeyboardShortcut = (editor: Editor, event: KeyboardEvent<Element>) => {
BLOCK_KEYS.forEach((hotkey) => {
if (isHotkey(hotkey, event)) {
event.preventDefault();
toggleBlock(editor, BLOCK_HOTKEYS[hotkey]);
}
});
if (!isBlockActive(editor, BlockType.CodeBlock))
INLINE_KEYS.forEach((hotkey) => {
if (isHotkey(hotkey, event)) {
event.preventDefault();
toggleMark(editor, INLINE_HOTKEYS[hotkey]);
}
});
};

106
src/app/components/editor/slate.d.ts vendored Normal file
View file

@ -0,0 +1,106 @@
import { BaseEditor } from 'slate';
import { ReactEditor } from 'slate-react';
import { BlockType } from './Elements';
export type HeadingLevel = 1 | 2 | 3;
export type Text = {
text: string;
};
export type FormattedText = Text & {
bold?: boolean;
italic?: boolean;
underline?: boolean;
strikeThrough?: boolean;
code?: boolean;
};
export type LinkElement = {
type: 'link';
href: string;
children: FormattedText[];
};
export type SpoilerElement = {
type: 'spoiler';
children: FormattedText[];
};
export type UserPillElement = {
type: 'user-pill';
userId: string;
children: Text[];
};
export type RoomPillElement = {
type: 'room-pill';
roomId: string;
children: Text[];
};
export type EmoticonElement = {
type: 'emoticon';
mxc: string;
children: Text[];
};
export type ParagraphElement = {
type: BlockType.Paragraph;
children: FormattedText[];
};
export type HeadingElement = {
type: BlockType.Heading;
level: HeadingLevel;
children: FormattedText[];
};
export type CodeLineElement = {
type: BlockType.CodeLine;
children: Text[];
};
export type CodeBlockElement = {
type: BlockType.CodeBlock;
children: CodeLineElement[];
};
export type QuoteLineElement = {
type: BlockType.QuoteLine;
children: FormattedText[];
};
export type BlockQuoteElement = {
type: BlockType.BlockQuote;
children: QuoteLineElement[];
};
export type ListItemElement = {
type: BlockType.ListItem;
children: FormattedText[];
};
export type OrderedListElement = {
type: BlockType.OrderedList;
children: ListItemElement[];
};
export type UnorderedListElement = {
type: BlockType.UnorderedList;
children: ListItemElement[];
};
export type CustomElement =
// | LinkElement
// | SpoilerElement
// | UserPillElement
// | RoomPillElement
// | EmoticonElement
| ParagraphElement
| HeadingElement
| CodeLineElement
| CodeBlockElement
| QuoteLineElement
| BlockQuoteElement
| ListItemElement
| OrderedListElement
| UnorderedListElement;
export type CustomEditor = BaseEditor & ReactEditor;
declare module 'slate' {
interface CustomTypes {
Editor: BaseEditor & ReactEditor;
Element: CustomElement;
Text: FormattedText & Text;
}
}

View file

@ -1,14 +1,14 @@
import React from 'react';
import './Navigation.scss';
import { Sidebar1 } from './Sidebar1';
import SideBar from './SideBar';
import Drawer from './Drawer';
import { EditorPreview } from '../../components/editor/Editor.preview';
function Navigation() {
return (
<div className="navigation">
<Sidebar1 />
<EditorPreview />
<SideBar />
<Drawer />
</div>

View file

@ -2,7 +2,7 @@
"compilerOptions": {
"sourceMap": true,
"jsx": "react",
"target": "ES6",
"target": "ES2016",
"allowJs": true,
"strict": true,
"esModuleInterop": true,