1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-07-11 10:46:22 +02:00
Files
slate/site/examples/js/components/index.jsx
Ravi Lamkoti 4f992cff5c Fix example types (#5812)
* 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
2025-03-10 09:20:10 -07:00

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;
`
)}
/>
))