mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-07-11 10:46:22 +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
96 lines
1.9 KiB
JavaScript
96 lines
1.9 KiB
JavaScript
import { css, cx } from '@emotion/css'
|
|
import React from 'react'
|
|
import ReactDOM from 'react-dom'
|
|
|
|
export const Button = React.forwardRef(
|
|
({ className, active, reversed, ...props }, ref) => (
|
|
<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 }, ref) => (
|
|
<span
|
|
{...props}
|
|
ref={ref}
|
|
className={cx(
|
|
'material-icons',
|
|
className,
|
|
css`
|
|
font-size: 18px;
|
|
vertical-align: text-bottom;
|
|
`
|
|
)}
|
|
/>
|
|
))
|
|
export const Instruction = React.forwardRef(({ className, ...props }, ref) => (
|
|
<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 }, ref) => (
|
|
<div
|
|
{...props}
|
|
data-test-id="menu"
|
|
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 }, ref) => (
|
|
<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;
|
|
`
|
|
)}
|
|
/>
|
|
))
|