Skip to content

Commit a5a25f9

Browse files
ianstormtaylorianstormtaylor
authored
Introduce annotations (ianstormtaylor#2747)
* first stab at removing leaves with tests passing * fixes * add iterables to the element interface * use iterables in more places * update examples to use iterables * update naming * fix tests * convert more key-based logic to paths * add range support to iterables * refactor many methods to use iterables, deprecate cruft * clean up existing iterables * more cleanup * more cleaning * fix word count example * work * split decoration and annotations * update examples for `renderNode` useage * deprecate old DOM-based helpers, update examples * make formats first class, refactor leaf rendering * fix examples, fix isAtomic checking * deprecate leaf model * convert Text and Leaf to functional components * fix lint and tests
1 parent 5b8a6bb commit a5a25f9

File tree

202 files changed

+5295
-4710
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

202 files changed

+5295
-4710
lines changed

‎examples/app.js

Lines changed: 184 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import styled from 'react-emotion'
2+
import { cx, css } from 'emotion'
33
import {
44
HashRouter,
55
Link as RouterLink,
@@ -72,126 +72,193 @@ const EXAMPLES = [
7272
]
7373

7474
/**
75-
* Some styled components.
75+
* Some components.
7676
*
7777
* @type {Component}
7878
*/
7979

80-
const Header = styled('div')`
81-
align-items: center;
82-
background: #000;
83-
color: #aaa;
84-
display: flex;
85-
height: 42px;
86-
position: relative;
87-
z-index: 1; /* To appear above the underlay */
88-
`
89-
90-
const Title = styled('span')`
91-
margin-left: 1em;
92-
`
93-
94-
const LinkList = styled('div')`
95-
margin-left: auto;
96-
margin-right: 1em;
97-
`
98-
99-
const Link = styled('a')`
100-
margin-left: 1em;
101-
color: #aaa;
102-
text-decoration: none;
103-
104-
&:hover {
105-
color: #fff;
106-
text-decoration: underline;
107-
}
108-
`
109-
110-
const TabList = styled('div')`
111-
background-color: #222;
112-
display: flex;
113-
flex-direction: column;
114-
overflow: hidden;
115-
padding-top: 0.2em;
116-
position: absolute;
117-
transition: width 0.2s;
118-
width: ${props => (props.isVisible ? '200px' : '0')};
119-
white-space: nowrap;
120-
z-index: 1; /* To appear above the underlay */
121-
`
122-
123-
const TabListUnderlay = styled('div')`
124-
background-color: rgba(200, 200, 200, 0.8);
125-
display: ${props => (props.isVisible ? 'block' : 'none')};
126-
height: 100%;
127-
top: 0;
128-
position: fixed;
129-
width: 100%;
130-
`
131-
132-
const TabButton = styled('span')`
133-
margin-left: 0.8em;
134-
135-
&:hover {
136-
cursor: pointer;
137-
}
138-
139-
.material-icons {
140-
color: #aaa;
141-
font-size: 24px;
142-
}
143-
`
144-
145-
const MaskedRouterLink = ({ active, ...props }) => <RouterLink {...props} />
146-
147-
const Tab = styled(MaskedRouterLink)`
148-
display: inline-block;
149-
margin-bottom: 0.2em;
150-
padding: 0.2em 1em;
151-
border-radius: 0.2em;
152-
text-decoration: none;
153-
color: ${p => (p.active ? 'white' : '#777')};
154-
background: ${p => (p.active ? '#333' : 'transparent')};
155-
156-
&:hover {
157-
background: #333;
158-
}
159-
`
160-
161-
const Wrapper = styled('div')`
162-
max-width: 42em;
163-
margin: 20px auto;
164-
padding: 20px;
165-
`
166-
167-
const ExampleHeader = styled('div')`
168-
align-items: center;
169-
background-color: #555;
170-
color: #ddd;
171-
display: flex;
172-
height: 42px;
173-
position: relative;
174-
z-index: 1; /* To appear above the underlay */
175-
`
176-
177-
const ExampleTitle = styled('span')`
178-
margin-left: 1em;
179-
`
180-
181-
const ExampleContent = styled(Wrapper)`
182-
background: #fff;
183-
`
184-
185-
const Warning = styled(Wrapper)`
186-
background: #fffae0;
187-
188-
& > pre {
189-
background: #fbf1bd;
190-
white-space: pre;
191-
overflow-x: scroll;
192-
margin-bottom: 0;
193-
}
194-
`
80+
const Header = props => (
81+
<div
82+
{...props}
83+
className={css`
84+
align-items: center;
85+
background: #000;
86+
color: #aaa;
87+
display: flex;
88+
height: 42px;
89+
position: relative;
90+
z-index: 1; /* To appear above the underlay */
91+
`}
92+
/>
93+
)
94+
95+
const Title = props => (
96+
<span
97+
{...props}
98+
className={css`
99+
margin-left: 1em;
100+
`}
101+
/>
102+
)
103+
104+
const LinkList = props => (
105+
<div
106+
{...props}
107+
className={css`
108+
margin-left: auto;
109+
margin-right: 1em;
110+
`}
111+
/>
112+
)
113+
114+
const Link = props => (
115+
<a
116+
{...props}
117+
className={css`
118+
margin-left: 1em;
119+
color: #aaa;
120+
text-decoration: none;
121+
122+
&:hover {
123+
color: #fff;
124+
text-decoration: underline;
125+
}
126+
`}
127+
/>
128+
)
129+
130+
const TabList = ({ isVisible, ...props }) => (
131+
<div
132+
{...props}
133+
className={css`
134+
background-color: #222;
135+
display: flex;
136+
flex-direction: column;
137+
overflow: auto;
138+
padding-top: 0.2em;
139+
position: absolute;
140+
transition: width 0.2s;
141+
width: ${isVisible ? '200px' : '0'};
142+
white-space: nowrap;
143+
max-height: 70vh;
144+
z-index: 1; /* To appear above the underlay */
145+
`}
146+
/>
147+
)
148+
149+
const TabListUnderlay = ({ isVisible, ...props }) => (
150+
<div
151+
{...props}
152+
className={css`
153+
background-color: rgba(200, 200, 200, 0.8);
154+
display: ${isVisible ? 'block' : 'none'};
155+
height: 100%;
156+
top: 0;
157+
position: fixed;
158+
width: 100%;
159+
`}
160+
/>
161+
)
162+
163+
const TabButton = props => (
164+
<span
165+
{...props}
166+
className={css`
167+
margin-left: 0.8em;
168+
169+
&:hover {
170+
cursor: pointer;
171+
}
172+
173+
.material-icons {
174+
color: #aaa;
175+
font-size: 24px;
176+
}
177+
`}
178+
/>
179+
)
180+
181+
const Tab = ({ active, ...props }) => (
182+
<RouterLink
183+
{...props}
184+
className={css`
185+
display: inline-block;
186+
margin-bottom: 0.2em;
187+
padding: 0.2em 1em;
188+
border-radius: 0.2em;
189+
text-decoration: none;
190+
color: ${active ? 'white' : '#777'};
191+
background: ${active ? '#333' : 'transparent'};
192+
193+
&:hover {
194+
background: #333;
195+
}
196+
`}
197+
/>
198+
)
199+
200+
const Wrapper = ({ className, ...props }) => (
201+
<div
202+
{...props}
203+
className={cx(
204+
className,
205+
css`
206+
max-width: 42em;
207+
margin: 20px auto;
208+
padding: 20px;
209+
`
210+
)}
211+
/>
212+
)
213+
214+
const ExampleHeader = props => (
215+
<div
216+
{...props}
217+
className={css`
218+
align-items: center;
219+
background-color: #555;
220+
color: #ddd;
221+
display: flex;
222+
height: 42px;
223+
position: relative;
224+
z-index: 1; /* To appear above the underlay */
225+
`}
226+
/>
227+
)
228+
229+
const ExampleTitle = props => (
230+
<span
231+
{...props}
232+
className={css`
233+
margin-left: 1em;
234+
`}
235+
/>
236+
)
237+
238+
const ExampleContent = props => (
239+
<Wrapper
240+
{...props}
241+
className={css`
242+
background: #fff;
243+
`}
244+
/>
245+
)
246+
247+
const Warning = props => (
248+
<Wrapper
249+
{...props}
250+
className={css`
251+
background: #fffae0;
252+
253+
& > pre {
254+
background: #fbf1bd;
255+
white-space: pre;
256+
overflow-x: scroll;
257+
margin-bottom: 0;
258+
}
259+
`}
260+
/>
261+
)
195262

196263
/**
197264
* App.

0 commit comments

Comments
 (0)