feat: add Slate component ()

* feat: add Slate component

* feat: add slate Read Pretty

* fix: remove unused code

* fix: demo

* feat: rich text field interface

* fix: editor normalize

* fix: modify slate style

* fix: remove debug info

Co-authored-by: chenos <chenlinxh@gmail.com>
This commit is contained in:
SemmyWong 2022-04-10 09:10:25 +08:00 committed by GitHub
parent a4e943ace7
commit 3f3e9b5373
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 776 additions and 3 deletions

View File

@ -25,6 +25,7 @@ import {
SchemaTemplateShortcut,
SigninPage,
SignupPage,
Slate,
SystemSettingsProvider,
SystemSettingsShortcut,
useRoutes,
@ -86,7 +87,7 @@ const providers = [
},
},
],
[SchemaComponentProvider, { components: { Link, NavLink } }],
[SchemaComponentProvider, { components: { Slate, Link, NavLink } }],
// RemoteCollectionManagerProvider,
[
SchemaInitializerProvider,

View File

@ -38,6 +38,9 @@
"react-i18next": "^11.15.1",
"react-image-lightbox": "^5.1.4",
"react-router-dom": "^5.2.0",
"slate": "^0.76.1",
"slate-history": "^0.66.0",
"slate-react": "^0.76.1",
"use-deep-compare-effect": "^1.8.1"
},
"peerDependencies": {

View File

@ -16,6 +16,7 @@ export * from './password';
export * from './percent';
export * from './phone';
export * from './radioGroup';
export * from './richText';
export * from './select';
export * from './subTable';
export * from './textarea';

View File

@ -0,0 +1,29 @@
import type { ISchema } from '@formily/react';
import { defaultProps } from './properties';
import { IField } from './types';
export const richText: IField = {
name: 'richText',
type: 'object',
group: 'media',
order: 2,
title: '{{t("Rich Text")}}',
default: {
interface: 'richText',
type: 'json',
// name,
uiSchema: {
type: 'array',
'x-component': 'Slate.RichText',
},
},
properties: {
...defaultProps,
},
schemaInitialize(schema: ISchema, { block }) {
if (['Table', 'Kanban'].includes(block)) {
schema['x-component-props'] = schema['x-component-props'] || {};
schema['x-component-props']['ellipsis'] = true;
}
},
};

View File

@ -21,7 +21,7 @@ export * from './schema-initializer';
export * from './schema-settings';
export * from './schema-templates';
export * from './settings-form';
export * from './slate';
export * from './system-settings';
export * from './user';
export * from './workflow';

View File

@ -0,0 +1,264 @@
import { css, cx } from '@emotion/css';
import isHotkey from 'is-hotkey';
import React, { useCallback, useMemo } from 'react';
import { createEditor, Editor, Element as SlateElement, Node, Transforms } from 'slate';
import { withHistory } from 'slate-history';
import type { ReactEditor } from 'slate-react';
import { Editable, Slate, useSlate, withReact } from 'slate-react';
import { EllipsisWithTooltip } from '../schema-component/antd/input/EllipsisWithTooltip';
import { Button, Icon, Toolbar } from './components';
const HOTKEYS = {
'mod+b': 'bold',
'mod+i': 'italic',
'mod+u': 'underline',
'mod+`': 'code',
};
const LIST_TYPES = ['numbered-list', 'bulleted-list'];
const TEXT_ALIGN_TYPES = ['left', 'center', 'right', 'justify'];
const DEFAULT_VALUE = [
{
type: 'paragraph',
children: [{ text: '' }],
},
];
export const RichText = (props: any) => {
const { value = DEFAULT_VALUE, placeholder = '', className, readOnly, autop = true, ellipsis, onChange } = props;
const renderElement = useCallback((props) => <Element {...props} />, []);
const renderLeaf = useCallback((props) => <Leaf {...props} />, []);
const editor = useMemo(() => withHistory(withReact(createEditor() as ReactEditor)), []);
const slateValue = useMemo(() => {
editor.children = JSON.parse(JSON.stringify(value));
Editor.normalize(editor, { force: true });
return editor.children;
}, [editor, value]);
if (readOnly) {
const slateContent = (
<Slate editor={editor} value={slateValue}>
<Editable renderElement={renderElement} renderLeaf={renderLeaf} spellCheck autoFocus readOnly={readOnly} />
</Slate>
);
const slatePlainText = serialize(slateValue);
const content = (
<EllipsisWithTooltip ellipsis={ellipsis} popoverContent={autop ? slateContent : slatePlainText}>
{ellipsis ? slatePlainText : slateContent}
</EllipsisWithTooltip>
);
return content;
}
return (
<div
className={cx(
className,
'slate',
css`
border: solid 1px #d2d2d2;
border-radius: 2px;
`,
)}
>
<Slate editor={editor} value={slateValue} onChange={onChange}>
<Toolbar>
<MarkButton format="bold" icon="format_bold" />
<MarkButton format="italic" icon="format_italic" />
<MarkButton format="underline" icon="format_underlined" />
<MarkButton format="code" icon="code" />
<BlockButton format="heading-one" icon="looks_one" />
<BlockButton format="heading-two" icon="looks_two" />
<BlockButton format="block-quote" icon="format_quote" />
<BlockButton format="numbered-list" icon="format_list_numbered" />
<BlockButton format="bulleted-list" icon="format_list_bulleted" />
<BlockButton format="left" icon="format_align_left" />
<BlockButton format="center" icon="format_align_center" />
<BlockButton format="right" icon="format_align_right" />
<BlockButton format="justify" icon="format_align_justify" />
</Toolbar>
<div
className={css`
padding: 5px 11px;
`}
>
<Editable
renderElement={renderElement}
renderLeaf={renderLeaf}
placeholder={placeholder}
spellCheck
autoFocus
readOnly={readOnly}
onKeyDown={(event) => {
for (const hotkey in HOTKEYS) {
if (isHotkey(hotkey, event as any)) {
event.preventDefault();
const mark = HOTKEYS[hotkey];
toggleMark(editor, mark);
}
}
}}
/>
</div>
</Slate>
</div>
);
};
const serialize = (nodes) => {
return nodes.map((n) => Node.string(n)).join('\n');
};
const toggleBlock = (editor, format) => {
const isActive = isBlockActive(editor, format, TEXT_ALIGN_TYPES.includes(format) ? 'align' : 'type');
const isList = LIST_TYPES.includes(format);
Transforms.unwrapNodes(editor, {
match: (n: Node) =>
!Editor.isEditor(n) &&
SlateElement.isElement(n) &&
LIST_TYPES.includes((n as any).type) &&
!TEXT_ALIGN_TYPES.includes(format),
split: true,
});
let newProperties: Partial<SlateElement & { align: any; type: string }>;
if (TEXT_ALIGN_TYPES.includes(format)) {
newProperties = {
align: isActive ? undefined : format,
};
} else {
newProperties = {
type: isActive ? 'paragraph' : isList ? 'list-item' : format,
};
}
Transforms.setNodes<SlateElement>(editor, newProperties);
if (!isActive && isList) {
const block = { type: format, children: [] };
Transforms.wrapNodes(editor, block);
}
};
const toggleMark = (editor, format) => {
const isActive = isMarkActive(editor, format);
if (isActive) {
Editor.removeMark(editor, format);
} else {
Editor.addMark(editor, format, true);
}
};
const isBlockActive = (editor, format, blockType = 'type') => {
const { selection } = editor;
if (!selection) return false;
const [match] = Array.from(
Editor.nodes(editor, {
at: Editor.unhangRange(editor, selection),
match: (n) => !Editor.isEditor(n) && SlateElement.isElement(n) && n[blockType] === format,
}),
);
return !!match;
};
const isMarkActive = (editor, format) => {
const marks = Editor.marks(editor);
return marks ? marks[format] === true : false;
};
const Element = ({ attributes, children, element }) => {
const style = { textAlign: element.align };
switch (element.type) {
case 'block-quote':
return (
<blockquote style={style} {...attributes}>
{children}
</blockquote>
);
case 'bulleted-list':
return (
<ul style={style} {...attributes}>
{children}
</ul>
);
case 'heading-one':
return (
<h1 style={style} {...attributes}>
{children}
</h1>
);
case 'heading-two':
return (
<h2 style={style} {...attributes}>
{children}
</h2>
);
case 'list-item':
return (
<li style={style} {...attributes}>
{children}
</li>
);
case 'numbered-list':
return (
<ol style={style} {...attributes}>
{children}
</ol>
);
default:
return (
<p style={style} {...attributes}>
{children}
</p>
);
}
};
const Leaf = ({ attributes, children, leaf }) => {
if (leaf.bold) {
children = <strong>{children}</strong>;
}
if (leaf.code) {
children = <code>{children}</code>;
}
if (leaf.italic) {
children = <em>{children}</em>;
}
if (leaf.underline) {
children = <u>{children}</u>;
}
return <span {...attributes}>{children}</span>;
};
const BlockButton = ({ format, icon }) => {
const editor = useSlate();
return (
<Button
active={isBlockActive(editor, format, TEXT_ALIGN_TYPES.includes(format) ? 'align' : 'type')}
onMouseDown={(event) => {
event.preventDefault();
toggleBlock(editor, format);
}}
>
<Icon>{icon}</Icon>
</Button>
);
};
const MarkButton = ({ format, icon }) => {
const editor = useSlate();
return (
<Button
active={isMarkActive(editor, format)}
onMouseDown={(event) => {
event.preventDefault();
toggleMark(editor, format);
}}
>
<Icon>{icon}</Icon>
</Button>
);
};

View File

@ -0,0 +1,32 @@
import { Field } from '@formily/core';
import { connect, mapProps, mapReadPretty } from '@formily/react';
import React from 'react';
import { Node } from 'slate';
import './index.less';
import { RichText } from './RichText';
export const Slate = () => null;
const serialize = (nodes) => {
return nodes?.map?.((n) => Node.string(n)).join('');
};
const DEFAULT_VALUE = [
{
type: 'paragraph',
children: [{ text: '' }],
},
];
Slate.RichText = connect(
RichText,
mapProps((props, field: Field) => {
const fieldValue = serialize(field.value)?.trim();
if (!fieldValue) {
field.value = undefined;
}
return {
...props,
};
}),
mapReadPretty((props: any) => <RichText {...props} readOnly />),
);

View File

@ -0,0 +1,172 @@
import { css, cx } from '@emotion/css';
import React, { PropsWithChildren, Ref } from 'react';
import ReactDOM from 'react-dom';
interface BaseProps {
className: string;
[key: string]: unknown;
}
type OrNull<T> = T | null;
export const Button = React.forwardRef(
(
{
className,
active,
reversed,
...props
}: PropsWithChildren<
{
active: boolean;
reversed: boolean;
} & BaseProps
>,
ref: Ref<OrNull<HTMLSpanElement>>,
) => (
<span
{...props}
ref={ref}
className={cx(
className,
css`
cursor: pointer;
color: ${reversed ? (active ? 'white' : '#aaa') : active ? 'black' : '#ccc'};
`,
)}
/>
),
);
export const EditorValue = React.forwardRef(
(
{
className,
value,
...props
}: PropsWithChildren<
{
value: any;
} & BaseProps
>,
ref: Ref<OrNull<null>>,
) => {
const textLines = value.document.nodes
.map((node) => node.text)
.toArray()
.join('\n');
return (
<div
ref={ref}
{...props}
className={cx(
className,
css`
margin: 30px -20px 0;
`,
)}
>
<div
className={css`
font-size: 14px;
padding: 5px 20px;
color: #404040;
border-top: 2px solid #eeeeee;
background: #f8f8f8;
`}
>
Slate's value as text
</div>
<div
className={css`
color: #404040;
font: 12px monospace;
white-space: pre-wrap;
padding: 10px 20px;
div {
margin: 0 0 0.5em;
}
`}
>
{textLines}
</div>
</div>
);
},
);
export const Icon = React.forwardRef(
({ className, ...props }: PropsWithChildren<BaseProps>, ref: Ref<OrNull<HTMLSpanElement>>) => (
<span
{...props}
ref={ref}
className={cx(
'material-icons',
className,
css`
font-size: 18px;
vertical-align: text-bottom;
`,
)}
/>
),
);
export const Instruction = React.forwardRef(
({ className, ...props }: PropsWithChildren<BaseProps>, ref: Ref<OrNull<HTMLDivElement>>) => (
<div
{...props}
ref={ref}
className={cx(
className,
css`
white-space: pre-wrap;
margin: 0 -20px 10px;
padding: 10px 20px;
font-size: 14px;
background: #f8f8e8;
`,
)}
/>
),
);
export const Menu = React.forwardRef(
({ className, ...props }: PropsWithChildren<BaseProps>, ref: Ref<OrNull<HTMLDivElement>>) => (
<div
{...props}
ref={ref}
className={cx(
className,
css`
& > * {
display: inline-block;
}
& > * + * {
margin-left: 15px;
}
`,
)}
/>
),
);
export const Portal = ({ children }) => {
return typeof document === 'object' ? ReactDOM.createPortal(children, document.body) : null;
};
export const Toolbar = React.forwardRef(
({ className, ...props }: PropsWithChildren<BaseProps>, ref: Ref<OrNull<HTMLDivElement>>) => (
<Menu
{...props}
ref={ref}
className={cx(
className,
css`
position: relative;
padding: 5px 11px;
background-color: #f3f3f3;
`,
)}
/>
),
);

View File

@ -0,0 +1,27 @@
import { FormItem } from '@formily/antd';
import { SchemaComponent, SchemaComponentProvider, Slate } from '@nocobase/client';
import React from 'react';
const schema = {
type: 'object',
properties: {
slate: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Slate.RichText',
'x-component-props': {
onChange: (value) => {
console.log(value);
},
},
},
},
};
export default () => {
return (
<SchemaComponentProvider components={{ Slate, FormItem }}>
<SchemaComponent schema={schema} />
</SchemaComponentProvider>
);
};

View File

@ -0,0 +1,79 @@
import { FormItem } from '@formily/antd';
import { SchemaComponent, SchemaComponentProvider, Slate } from '@nocobase/client';
import React from 'react';
let value = [
{
type: 'heading-one',
children: [
{
text: 'Slate Rich Text Editor',
},
],
},
{
type: 'block-quote',
children: [
{
text: 'this is based in Slate',
},
],
},
{
type: 'bulleted-list',
children: [
{
type: 'list-item',
children: [
{
text: 'The editor\'s "schema" was hardcoded and hard to customize. ',
},
],
},
{
type: 'list-item',
children: [
{
text: 'Transforming the documents programmatically was very convoluted. ',
},
],
},
{
type: 'list-item',
children: [
{
text: 'Serializing to HTML, Markdown, etc. seemed like an afterthought. ',
},
],
},
{
type: 'list-item',
children: [
{
text: 'Re-inventing the view layer seemed inefficient and limiting.',
},
],
},
],
},
];
const schema = {
type: 'object',
properties: {
read: {
type: 'string',
'x-read-pretty': true,
'x-decorator': 'FormItem',
'x-component': 'Slate.RichText',
default: value,
},
},
};
export default () => {
return (
<SchemaComponentProvider components={{ Slate, FormItem }}>
<SchemaComponent schema={schema} />
</SchemaComponentProvider>
);
};

View File

@ -0,0 +1,44 @@
/**
* title: Input
*/
import { FormItem } from '@formily/antd';
import { SchemaComponent, SchemaComponentProvider, Slate } from '@nocobase/client';
import React from 'react';
const schema = {
type: 'object',
properties: {
input: {
title: `Editable1`,
'x-decorator': 'FormItem',
'x-component': 'Slate.RichText',
'x-reactions': {
target: '*(input2,read)',
fulfill: {
state: {
value: '{{$self.value}}',
},
},
},
},
input2: {
title: `Editable2`,
'x-decorator': 'FormItem',
'x-component': 'Slate.RichText',
},
read: {
title: `Read pretty`,
'x-read-pretty': true,
'x-decorator': 'FormItem',
'x-component': 'Slate.RichText',
},
},
};
export default () => {
return (
<SchemaComponentProvider components={{ Slate, FormItem }}>
<SchemaComponent schema={schema} />
</SchemaComponentProvider>
);
};

View File

@ -0,0 +1,31 @@
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(./materialicons.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.ant-formily-item-error .slate {
border-color: #ff4d4f !important;
}
.slate:focus-within {
border-color: #40a9ff;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
border-right-width: 1px;
outline: 0;
}

View File

@ -0,0 +1,22 @@
---
nav:
path: /client
group:
path: /client
---
# Slate
基于 [slate](https://github.com/ianstormtaylor/slate) 封装。
## Examples
### Slate Rich Text Editor
<code src="./demos/demo1.tsx" />
### Slate Rich Text Editor is Read Pretty
<code src="./demos/demo2.tsx" />
<code src="./demos/demo3.tsx" />

View File

@ -0,0 +1 @@
export * from './Slate';

Binary file not shown.

View File

@ -3124,6 +3124,11 @@
resolved "https://registry.npmjs.org/@types/http-errors/-/http-errors-1.8.1.tgz#e81ad28a60bee0328c6d2384e029aec626f1ae67"
integrity sha512-e+2rjEwK6KDaNOm5Aa9wNGgyS9oSZU/4pfSMMPYNOfjvFI0WVXm29+ITRFr6aKDvvKo7uU1jV68MW4ScsfDi7Q==
"@types/is-hotkey@^0.1.1":
version "0.1.7"
resolved "https://registry.npmmirror.com/@types/is-hotkey/-/is-hotkey-0.1.7.tgz#30ec6d4234895230b576728ef77e70a52962f3b3"
integrity sha512-yB5C7zcOM7idwYZZ1wKQ3pTfjA9BbvFqRWvKB46GFddxnJtHwi/b9y84ykQtxQPg5qhdpg4Q/kWU3EGoCTmLzQ==
"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
version "2.0.3"
resolved "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
@ -3216,6 +3221,11 @@
"@types/koa-compose" "*"
"@types/node" "*"
"@types/lodash@^4.14.149":
version "4.14.181"
resolved "https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.181.tgz#d1d3740c379fda17ab175165ba04e2d03389385d"
integrity sha512-n3tyKthHJbkiWhDZs3DkhkCzt2MexYHXlX0td5iMplyfwketaOeKboEVBqzceH7juqvEg3q5oUoBFxSLu7zFag==
"@types/lodash@^4.14.177":
version "4.14.177"
resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.177.tgz#f70c0d19c30fab101cad46b52be60363c43c4578"
@ -6355,6 +6365,11 @@ dir-glob@^3.0.1:
dependencies:
path-type "^4.0.0"
direction@^1.0.3:
version "1.0.4"
resolved "https://registry.npmmirror.com/direction/-/direction-1.0.4.tgz#2b86fb686967e987088caf8b89059370d4837442"
integrity sha512-GYqKi1aH7PJXxdhTeZBFrg8vUBeKXi+cNprXsC1kpJcbcVnV9wBsrOu1cQEdG0WeQwlfHiy3XvnKfIrJ2R0NzQ==
doctrine@^2.1.0:
version "2.1.0"
resolved "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
@ -8429,6 +8444,11 @@ ignore@^5.1.1, ignore@^5.1.4, ignore@^5.1.8:
resolved "https://registry.npmjs.org/ignore/-/ignore-5.1.9.tgz#9ec1a5cbe8e1446ec60d4420060d43aa6e7382fb"
integrity sha512-2zeMQpbKz5dhZ9IwL0gbxSW5w0NK/MSAMtNuhgIHEPmaU3vPdKPL0UdvUCXs5SS4JAwsBxysK5sFMW8ocFiVjQ==
immer@^9.0.6:
version "9.0.12"
resolved "https://registry.npmmirror.com/immer/-/immer-9.0.12.tgz#2d33ddf3ee1d247deab9d707ca472c8c942a0f20"
integrity sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA==
import-cwd@^2.0.0:
version "2.1.0"
resolved "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@ -8857,6 +8877,11 @@ is-hexadecimal@^1.0.0:
resolved "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
is-hotkey@^0.1.6:
version "0.1.8"
resolved "https://registry.npmmirror.com/is-hotkey/-/is-hotkey-0.1.8.tgz#6b1f4b2d0e5639934e20c05ed24d623a21d36d25"
integrity sha512-qs3NZ1INIS+H+yeo7cD9pDfwYV/jqRh1JG9S9zYrNudkoUQg7OL7ziXqRKu+InFjUIDoP2o6HIkLYMh1pcWgyQ==
is-installed-globally@^0.1.0:
version "0.1.0"
resolved "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.1.0.tgz#0dfd98f5a9111716dd535dda6492f67bf3d25a80"
@ -10415,7 +10440,7 @@ lodash.truncate@^4.4.2:
resolved "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
lodash@4.x, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
lodash@4.x, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
version "4.17.21"
resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@ -14859,6 +14884,13 @@ screenfull@^5.0.0:
resolved "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz#6533d524d30621fc1283b9692146f3f13a93d1ba"
integrity sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==
scroll-into-view-if-needed@^2.2.20:
version "2.2.29"
resolved "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.29.tgz#551791a84b7e2287706511f8c68161e4990ab885"
integrity sha512-hxpAR6AN+Gh53AdAimHM6C8oTN1ppwVZITihix+WqalywBeFcQ6LdQP5ABNl26nX8GTEL7VT+b8lKpdqq65wXg==
dependencies:
compute-scroll-into-view "^1.0.17"
scroll-into-view-if-needed@^2.2.25:
version "2.2.28"
resolved "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.28.tgz#5a15b2f58a52642c88c8eca584644e01703d645a"
@ -15080,6 +15112,36 @@ slash@^3.0.0:
resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
slate-history@^0.66.0:
version "0.66.0"
resolved "https://registry.npmmirror.com/slate-history/-/slate-history-0.66.0.tgz#ac63fddb903098ceb4c944433e3f75fe63acf940"
integrity sha512-6MWpxGQZiMvSINlCbMW43E2YBSVMCMCIwQfBzGssjWw4kb0qfvj0pIdblWNRQZD0hR6WHP+dHHgGSeVdMWzfng==
dependencies:
is-plain-object "^5.0.0"
slate-react@^0.76.1:
version "0.76.1"
resolved "https://registry.npmmirror.com/slate-react/-/slate-react-0.76.1.tgz#a92915b204d84d59cb42d7818dcf48891d072016"
integrity sha512-deIhlGp8jUd5eZ8fodJ+Os3Eznk2bGJ4T6FPxzX04gFDCFVgXaYLfy9pObkQHW5XGnHwV3rniAyAtHBxNzrm9Q==
dependencies:
"@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"
slate@^0.76.1:
version "0.76.1"
resolved "https://registry.npmmirror.com/slate/-/slate-0.76.1.tgz#6bc46cb923f3b26fdddb80b2a28142c2d7aa9a0b"
integrity sha512-ALsAInU8vUEL65IGWttc1xOzq7KmNtn4XIDxylJnbGXWziKZxxRpL4nL8QHZX553Q1EPmi0w+kWOG+hnLFfcgw==
dependencies:
immer "^9.0.6"
is-plain-object "^5.0.0"
tiny-warning "^1.0.3"
slice-ansi@^3.0.0:
version "3.0.0"
resolved "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz#31ddc10930a1b7e0b67b08c96c2f49b77a789787"
@ -15933,6 +15995,11 @@ timers-browserify@^2.0.4:
dependencies:
setimmediate "^1.0.4"
tiny-invariant@1.0.6:
version "1.0.6"
resolved "https://registry.npmmirror.com/tiny-invariant/-/tiny-invariant-1.0.6.tgz#b3f9b38835e36a41c843a3b0907a5a7b3755de73"
integrity sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==
tiny-invariant@^1.0.2, tiny-invariant@^1.0.6:
version "1.2.0"
resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"