mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-08-19 13:41:19 +02:00
* fix: types for richtext.tsx * fix: types for check-lists, code-highlighting and custom placeholder * fix: types for editable-voids, embeds, forced-layout, hovering-toolbar * fix: types for remaining examples * fix: typescript error for files in image element * fix: types for examples and some minor fixes * fix: normalize-tokens.ts type * fix: types for [example].tsx
139 lines
2.5 KiB
TypeScript
139 lines
2.5 KiB
TypeScript
import { css, cx } from '@emotion/css'
|
|
import React, { PropsWithChildren, ReactNode, Ref } from 'react'
|
|
import ReactDOM from 'react-dom'
|
|
|
|
interface BaseProps {
|
|
className: string
|
|
[key: string]: unknown
|
|
}
|
|
|
|
export const Button = React.forwardRef(
|
|
(
|
|
{
|
|
className,
|
|
active,
|
|
reversed,
|
|
...props
|
|
}: PropsWithChildren<
|
|
{
|
|
active: boolean
|
|
reversed: boolean
|
|
} & BaseProps
|
|
>,
|
|
ref: Ref<HTMLSpanElement>
|
|
) => (
|
|
<span
|
|
{...props}
|
|
ref={ref}
|
|
className={cx(
|
|
className,
|
|
css`
|
|
cursor: pointer;
|
|
color: ${reversed
|
|
? active
|
|
? 'white'
|
|
: '#aaa'
|
|
: active
|
|
? 'black'
|
|
: '#ccc'};
|
|
`
|
|
)}
|
|
/>
|
|
)
|
|
)
|
|
|
|
export const Icon = React.forwardRef(
|
|
(
|
|
{ className, ...props }: PropsWithChildren<BaseProps>,
|
|
ref: Ref<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<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<HTMLDivElement>
|
|
) => (
|
|
<div
|
|
{...props}
|
|
data-test-id="menu"
|
|
ref={ref}
|
|
className={cx(
|
|
className,
|
|
css`
|
|
& > * {
|
|
display: inline-block;
|
|
}
|
|
|
|
& > * + * {
|
|
margin-left: 15px;
|
|
}
|
|
`
|
|
)}
|
|
/>
|
|
)
|
|
)
|
|
|
|
export const Portal = ({ children }: { children?: ReactNode }) => {
|
|
return typeof document === 'object'
|
|
? ReactDOM.createPortal(children, document.body)
|
|
: null
|
|
}
|
|
|
|
export const Toolbar = React.forwardRef(
|
|
(
|
|
{ className, ...props }: PropsWithChildren<BaseProps>,
|
|
ref: Ref<HTMLDivElement>
|
|
) => (
|
|
<Menu
|
|
{...props}
|
|
ref={ref}
|
|
className={cx(
|
|
className,
|
|
css`
|
|
position: relative;
|
|
padding: 1px 18px 17px;
|
|
margin: 0 -20px;
|
|
border-bottom: 2px solid #eee;
|
|
margin-bottom: 20px;
|
|
`
|
|
)}
|
|
/>
|
|
)
|
|
)
|