-
Notifications
You must be signed in to change notification settings - Fork 632
/
index.tsx
184 lines (159 loc) · 5.4 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
/*
* This file is part of ORY Editor.
*
* ORY Editor is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* ORY Editor is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with ORY Editor. If not, see <http://www.gnu.org/licenses/>.
*
* @license LGPL-3.0
* @copyright 2016-2018 Aeneas Rekkas
* @author Aeneas Rekkas <aeneas+oss@aeneas.io>
*
*/
import * as React from 'react';
import * as ReactDOM from 'react-dom';
// The editor core
import Editor, { Editable, createEmptyState } from '@react-page/core';
import '@react-page/core/lib/index.css'; // we also want to load the stylesheets
// The default ui components
import EditorUi from '@react-page/ui';
import '@react-page/ui/lib/index.css';
// The rich text area plugin
import slate from '@react-page/plugins-slate';
import '@react-page/plugins-slate/lib/index.css';
// The spacer plugin
import spacer from '@react-page/plugins-spacer';
import '@react-page/plugins-spacer/lib/index.css';
// The image plugin
import { imagePlugin } from '@react-page/plugins-image';
import '@react-page/plugins-image/lib/index.css';
// The video plugin
import video from '@react-page/plugins-video';
import '@react-page/plugins-video/lib/index.css';
// The parallax plugin
import parallax from '@react-page/plugins-parallax-background';
import '@react-page/plugins-parallax-background/lib/index.css';
// The background plugin
import background from '@react-page/plugins-background';
import { ModeEnum } from '@react-page/plugins-background';
import '@react-page/plugins-background/lib/index.css';
// The html5-video plugin
import html5video from '@react-page/plugins-html5-video';
import '@react-page/plugins-html5-video/lib/index.css';
// The native handler plugin
import native from '@react-page/plugins-default-native';
// The divider plugin
import divider from '@react-page/plugins-divider';
// Renders json state to html, can be used on server and client side
import { HTMLRenderer } from '@react-page/renderer';
import customContentPlugin from './customContentPlugin';
import customLayoutPlugin from './customLayoutPlugin';
// The content state
import content from './content';
import './styles.css';
import { ImageUploadType } from '@react-page/ui/lib/ImageUpload/types';
import { Plugins } from '@react-page/core';
import customSlatePlugin from './customSlatePlugin';
const fakeImageUploadService: (url: string) => ImageUploadType = defaultUrl => (
file,
reportProgress
) => {
return new Promise((resolve, reject) => {
let counter = 0;
const interval = setInterval(() => {
counter++;
reportProgress(counter * 10);
if (counter > 9) {
clearInterval(interval);
alert(
'This is a fake image upload service, please provide actual implementation via plugin properties'
);
resolve({ url: defaultUrl });
}
}, 500);
});
};
if (
process.env.NODE_ENV !== 'production' &&
process.env.REACT_APP_TRACE_UPDATES
) {
const { whyDidYouUpdate } = require('why-did-you-update');
whyDidYouUpdate(React);
}
const slatePlugin = slate(def => ({
...def,
plugins: [...def.plugins, customSlatePlugin()],
}));
// Define which plugins we want to use (all of the above)
const plugins: Plugins = {
content: [
slatePlugin,
spacer,
imagePlugin({ imageUpload: fakeImageUploadService('/images/react.png') }),
video,
divider,
html5video,
customContentPlugin(),
],
layout: [
background({
defaultPlugin: slatePlugin,
imageUpload: fakeImageUploadService('/images/sea-bg.jpg'),
enabledModes:
ModeEnum.COLOR_MODE_FLAG |
ModeEnum.IMAGE_MODE_FLAG |
ModeEnum.GRADIENT_MODE_FLAG,
}),
parallax({ defaultPlugin: slatePlugin }),
customLayoutPlugin({ defaultPlugin: slatePlugin }),
],
// If you pass the native key the editor will be able to handle native drag and drop events (such as links, text, etc).
// The native plugin will then be responsible to properly display the data which was dropped onto the editor.
native,
};
const editor = new Editor({
plugins: plugins,
// pass the content states
editables: [
...content,
// creates an empty state, basically like the line above
createEmptyState(),
],
});
editor.trigger.mode.edit();
// Render the editables - the areas that are editable
const elements = document.querySelectorAll<HTMLDivElement>('.editable');
elements.forEach(element => {
ReactDOM.render(
<Editable
editor={editor}
id={element.dataset.id as string}
/*onChange={(state) => {
if (element.dataset.id === '1') {
console.log(state)
}
}}*/
/>,
element
);
});
// Render the ui controls, you could implement your own here, of course.
ReactDOM.render(
<EditorUi editor={editor} />,
document.getElementById('controls')
);
// Render as beautified mark up (html)
ReactDOM.render(
<HTMLRenderer state={content[0]} plugins={plugins} />,
document.getElementById('editable-static')
);
editor.trigger.editable.add({ id: '10', cells: [] });