dante2-editor 0.2.0 → 0.3.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.babelrc +20 -0
- data/.eslint +13 -0
- data/.gitignore +15 -0
- data/README.md +5 -1
- data/dante2.gemspec +2 -4
- data/{app → demo}/assets/index.html +2 -2
- data/{app → demo}/assets/license.html +1 -1
- data/{app → demo}/assets/options.html +1 -5
- data/{app → demo}/assets/store.json +0 -0
- data/demo/data/poc.js +9 -0
- data/demo/demo.js +9 -0
- data/demo/initialize.js +7 -0
- data/{app → demo}/styles/layout/layout.scss +0 -0
- data/{app → demo}/styles/layout/normalize.css +0 -0
- data/{app → demo}/styles/layout/scaffold.scss +0 -0
- data/{app → demo}/styles/layout/tooltips.scss +0 -0
- data/dist/Dante2.js +2995 -0
- data/dist/Dante2.min.js +3 -0
- data/dist/Dante2.min.js.map +1 -0
- data/dist/DanteStyles.css +2 -0
- data/dist/DanteStyles.css.map +1 -0
- data/dist/DanteStyles.js +102 -0
- data/dist/DanteStyles.min.js +2 -0
- data/dist/DanteStyles.min.js.map +1 -0
- data/dist/dante-vendors.js +48316 -0
- data/dist/dante-vendors.min.js +29 -0
- data/dist/dante-vendors.min.js.map +1 -0
- data/{app/styles/fonts/dante → dist/fonts}/dante.eot +0 -0
- data/{app/styles/fonts/dante → dist/fonts}/dante.svg +0 -0
- data/{app/styles/fonts/dante → dist/fonts}/dante.ttf +0 -0
- data/{app/styles/fonts/dante → dist/fonts}/dante.woff +0 -0
- data/{app/styles/fonts/dante → dist/fonts}/fontello.eot +0 -0
- data/{app/styles/fonts/dante → dist/fonts}/fontello.svg +0 -0
- data/{app/styles/fonts/dante → dist/fonts}/fontello.ttf +0 -0
- data/{app/styles/fonts/dante → dist/fonts}/fontello.woff +0 -0
- data/docs/app.css +430 -1
- data/docs/app.css.map +1 -1
- data/docs/app.js +62 -2
- data/docs/app.js.map +1 -1
- data/docs/dante-vendors.js +49513 -22
- data/docs/dante-vendors.js.map +1 -1
- data/docs/dante.css +1602 -1
- data/docs/dante.css.map +1 -1
- data/docs/dante.js +3310 -3
- data/docs/dante.js.map +1 -1
- data/docs/doc.html +3 -7
- data/docs/index.html +4 -4
- data/docs/license.html +3 -3
- data/docs/options.html +53 -0
- data/package.json +47 -17
- data/rb_lib/dante2-editor/rails.rb +15 -0
- data/{lib → rb_lib}/dante2-editor/version.rb +1 -1
- data/{lib → rb_lib}/dante2-editor.rb +0 -0
- data/src/components/blocks/embed.js +126 -0
- data/src/components/blocks/image.js +377 -0
- data/src/components/blocks/placeholder.js +68 -0
- data/src/components/blocks/video.js +80 -0
- data/src/components/dante.js +291 -0
- data/src/components/dante_editor.js +928 -0
- data/src/components/debug.js +104 -0
- data/src/components/decorators/link.js +64 -0
- data/src/components/popovers/addButton.js +318 -0
- data/src/components/popovers/image.js +188 -0
- data/src/components/popovers/link.js +107 -0
- data/src/components/popovers/toolTip.js +402 -0
- data/{app/utils/logger.coffee → src/components/wrapper.js} +0 -0
- data/{app → src}/images/dante/media-loading-placeholder.png +0 -0
- data/{app → src}/images/site/dante-demo.png +0 -0
- data/{app → src}/images/site/dante-editor-logo.png +0 -0
- data/{app → src}/images/site/github-logo.png +0 -0
- data/src/index.js +9 -0
- data/{app → src}/model/index.js +0 -0
- data/src/style.js +3 -0
- data/{app → src}/styles/dante/_animations.scss +0 -0
- data/{app → src}/styles/dante/_caption.scss +0 -0
- data/{app → src}/styles/dante/_debug.scss +0 -0
- data/{app → src}/styles/dante/_fonts.scss +0 -0
- data/{app → src}/styles/dante/_graf.scss +0 -0
- data/{app → src}/styles/dante/_icons.scss +0 -0
- data/{app → src}/styles/dante/_media.scss +0 -0
- data/{app → src}/styles/dante/_menu.scss +0 -0
- data/{app → src}/styles/dante/_needsorder.scss +0 -0
- data/{app → src}/styles/dante/_popover.scss +0 -0
- data/{app → src}/styles/dante/_post.scss +0 -0
- data/{app → src}/styles/dante/_scaffold.scss +0 -0
- data/{app → src}/styles/dante/_tooltip.scss +0 -0
- data/{app → src}/styles/dante/_utilities.scss +0 -0
- data/{app → src}/styles/dante/_variables.scss +0 -0
- data/{app → src}/styles/dante/blame.scss +0 -0
- data/{app → src}/styles/dante.scss +0 -0
- data/{app → src}/styles/draft.css +0 -0
- data/src/styles/fonts/dante/dante.eot +0 -0
- data/src/styles/fonts/dante/dante.svg +18 -0
- data/src/styles/fonts/dante/dante.ttf +0 -0
- data/src/styles/fonts/dante/dante.woff +0 -0
- data/src/styles/fonts/dante/fontello.eot +0 -0
- data/src/styles/fonts/dante/fontello.svg +36 -0
- data/src/styles/fonts/dante/fontello.ttf +0 -0
- data/src/styles/fonts/dante/fontello.woff +0 -0
- data/src/utils/find_entities.js +17 -0
- data/src/utils/html2content.js +127 -0
- data/src/utils/save_content.js +80 -0
- data/{app → src}/utils/selection.js +0 -0
- data/tools/.eslintrc +9 -0
- data/tools/amd/README.md +7 -0
- data/tools/amd/bower.json +19 -0
- data/tools/amd/build.js +36 -0
- data/tools/build-cli.js +46 -0
- data/tools/build.js +30 -0
- data/tools/buildBabel.js +32 -0
- data/tools/constants.js +10 -0
- data/tools/dist/build.js +13 -0
- data/tools/docs/build.js +12 -0
- data/tools/es/build.js +27 -0
- data/tools/exec.js +50 -0
- data/tools/fs-utils.js +35 -0
- data/tools/lib/build.js +14 -0
- data/tools/promisify.js +14 -0
- data/webpack/base.config.js +89 -0
- data/webpack/docs.config.js +147 -0
- data/webpack/webpack.config.js +78 -0
- data/webpack.config-doc.js +5 -0
- data/webpack.config.js +3 -147
- data/yarn.lock +973 -718
- metadata +108 -64
- data/app/components/App.cjsx +0 -1083
- data/app/components/blocks/embed.cjsx +0 -109
- data/app/components/blocks/image.cjsx +0 -316
- data/app/components/blocks/placeholder.cjsx +0 -60
- data/app/components/blocks/video.cjsx +0 -75
- data/app/components/debug.cjsx +0 -96
- data/app/components/decorators/link.cjsx +0 -61
- data/app/components/popovers/addButton.cjsx +0 -247
- data/app/components/popovers/image.cjsx +0 -160
- data/app/components/popovers/link.cjsx +0 -87
- data/app/components/popovers/toolTip.cjsx +0 -326
- data/app/data/poc.js +0 -15
- data/app/demo.js +0 -7
- data/app/initialize.js +0 -4
- data/app/utils/find_entities.coffee +0 -20
- data/app/utils/html2content.coffee +0 -120
- data/app/utils/save_content.coffee +0 -63
- data/lib/dante2-editor/rails.rb +0 -16
@@ -0,0 +1,291 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import ReactDOM from 'react-dom'
|
3
|
+
//import Immutable from 'immutable'
|
4
|
+
import { Map, fromJS } from 'immutable'
|
5
|
+
|
6
|
+
import DanteEditor from './dante_editor.js'
|
7
|
+
|
8
|
+
import DanteImagePopover from './popovers/image'
|
9
|
+
import DanteAnchorPopover from './popovers/link'
|
10
|
+
|
11
|
+
//import { getSelectionRect, getSelection } from "../utils/selection.js"
|
12
|
+
import DanteInlineTooltip from './popovers/addButton'
|
13
|
+
import DanteTooltip from './popovers/toolTip'
|
14
|
+
//import Link from './decorators/link'
|
15
|
+
|
16
|
+
//import Debug from './debug'
|
17
|
+
//import findEntities from '../utils/find_entities'
|
18
|
+
import ImageBlock from './blocks/image'
|
19
|
+
import EmbedBlock from './blocks/embed'
|
20
|
+
import VideoBlock from './blocks/video'
|
21
|
+
import PlaceholderBlock from './blocks/placeholder'
|
22
|
+
|
23
|
+
import {
|
24
|
+
resetBlockWithType,
|
25
|
+
addNewBlockAt } from '../model/index.js'
|
26
|
+
|
27
|
+
class Dante {
|
28
|
+
constructor(options) {
|
29
|
+
if (options == null) {
|
30
|
+
options = {}
|
31
|
+
}
|
32
|
+
console.log("init editor Dante!")
|
33
|
+
|
34
|
+
// deep merge on config
|
35
|
+
let config = Map(fromJS(this.defaultOptions(options)))
|
36
|
+
|
37
|
+
this.options = config.mergeDeep(options).toJS()
|
38
|
+
console.log(this.options)
|
39
|
+
}
|
40
|
+
|
41
|
+
defaultOptions(options) {
|
42
|
+
// default options
|
43
|
+
if (options == null) {
|
44
|
+
options = {}
|
45
|
+
}
|
46
|
+
let defaultOptions = {}
|
47
|
+
defaultOptions.el = 'app'
|
48
|
+
defaultOptions.content = ""
|
49
|
+
defaultOptions.read_only = false
|
50
|
+
defaultOptions.spellcheck = false
|
51
|
+
defaultOptions.title_placeholder = "Title"
|
52
|
+
defaultOptions.body_placeholder = "Write your story"
|
53
|
+
// @defaultOptions.api_key = "86c28a410a104c8bb58848733c82f840"
|
54
|
+
|
55
|
+
defaultOptions.widgets = [{
|
56
|
+
title: 'add an image',
|
57
|
+
icon: 'image',
|
58
|
+
type: 'image',
|
59
|
+
block: ImageBlock,
|
60
|
+
editable: true,
|
61
|
+
renderable: true,
|
62
|
+
breakOnContinuous: true,
|
63
|
+
wrapper_class: "graf graf--figure",
|
64
|
+
selected_class: "is-selected is-mediaFocused",
|
65
|
+
selectedFn: block => {
|
66
|
+
const { direction } = block.getData().toJS()
|
67
|
+
switch (direction) {
|
68
|
+
case "left":
|
69
|
+
return "graf--layoutOutsetLeft"
|
70
|
+
case "center":
|
71
|
+
return ""
|
72
|
+
case "wide":
|
73
|
+
return "sectionLayout--fullWidth"
|
74
|
+
case "fill":
|
75
|
+
return "graf--layoutFillWidth"
|
76
|
+
}
|
77
|
+
},
|
78
|
+
handleEnterWithoutText(ctx, block) {
|
79
|
+
const { editorState } = ctx.state
|
80
|
+
return ctx.onChange(addNewBlockAt(editorState, block.getKey()))
|
81
|
+
},
|
82
|
+
handleEnterWithText(ctx, block) {
|
83
|
+
const { editorState } = ctx.state
|
84
|
+
return ctx.onChange(addNewBlockAt(editorState, block.getKey()))
|
85
|
+
},
|
86
|
+
widget_options: {
|
87
|
+
displayOnInlineTooltip: true,
|
88
|
+
insertion: "upload",
|
89
|
+
insert_block: "image"
|
90
|
+
},
|
91
|
+
options: {
|
92
|
+
upload_url: options.upload_url,
|
93
|
+
upload_headers: options.upload_headers,
|
94
|
+
upload_formName: options.upload_formName,
|
95
|
+
upload_callback: options.image_upload_callback,
|
96
|
+
image_delete_callback: options.image_delete_callback,
|
97
|
+
image_caption_placeholder: options.image_caption_placeholder
|
98
|
+
}
|
99
|
+
}, {
|
100
|
+
icon: 'embed',
|
101
|
+
title: 'insert embed',
|
102
|
+
type: 'embed',
|
103
|
+
block: EmbedBlock,
|
104
|
+
editable: true,
|
105
|
+
renderable: true,
|
106
|
+
breakOnContinuous: true,
|
107
|
+
wrapper_class: "graf graf--mixtapeEmbed",
|
108
|
+
selected_class: "is-selected is-mediaFocused",
|
109
|
+
widget_options: {
|
110
|
+
displayOnInlineTooltip: true,
|
111
|
+
insertion: "placeholder",
|
112
|
+
insert_block: "embed"
|
113
|
+
},
|
114
|
+
options: {
|
115
|
+
endpoint: `//api.embed.ly/1/extract?key=${ options.api_key }&url=`,
|
116
|
+
placeholder: 'Paste a link to embed content from another site (e.g. Twitter) and press Enter'
|
117
|
+
},
|
118
|
+
handleEnterWithoutText(ctx, block) {
|
119
|
+
const { editorState } = ctx.state
|
120
|
+
return ctx.onChange(addNewBlockAt(editorState, block.getKey()))
|
121
|
+
},
|
122
|
+
handleEnterWithText(ctx, block) {
|
123
|
+
const { editorState } = ctx.state
|
124
|
+
return ctx.onChange(addNewBlockAt(editorState, block.getKey()))
|
125
|
+
}
|
126
|
+
}, {
|
127
|
+
icon: 'video',
|
128
|
+
title: 'insert video',
|
129
|
+
editable: true,
|
130
|
+
type: 'video',
|
131
|
+
block: VideoBlock,
|
132
|
+
renderable: true,
|
133
|
+
breakOnContinuous: true,
|
134
|
+
wrapper_class: "graf--figure graf--iframe",
|
135
|
+
selected_class: " is-selected is-mediaFocused",
|
136
|
+
widget_options: {
|
137
|
+
displayOnInlineTooltip: true,
|
138
|
+
insertion: "placeholder",
|
139
|
+
insert_block: "video"
|
140
|
+
},
|
141
|
+
options: {
|
142
|
+
endpoint: `//api.embed.ly/1/oembed?key=${ options.api_key }&url=`,
|
143
|
+
placeholder: 'Paste a YouTube, Vine, Vimeo, or other video link, and press Enter',
|
144
|
+
caption: 'Type caption for embed (optional)'
|
145
|
+
},
|
146
|
+
|
147
|
+
handleEnterWithoutText(ctx, block) {
|
148
|
+
const { editorState } = ctx.state
|
149
|
+
return ctx.onChange(addNewBlockAt(editorState, block.getKey()))
|
150
|
+
},
|
151
|
+
|
152
|
+
handleEnterWithText(ctx, block) {
|
153
|
+
const { editorState } = ctx.state
|
154
|
+
return ctx.onChange(addNewBlockAt(editorState, block.getKey()))
|
155
|
+
}
|
156
|
+
}, {
|
157
|
+
renderable: true,
|
158
|
+
editable: true,
|
159
|
+
block: PlaceholderBlock,
|
160
|
+
type: 'placeholder',
|
161
|
+
wrapper_class: "is-embedable",
|
162
|
+
selected_class: " is-selected is-mediaFocused",
|
163
|
+
widget_options: {
|
164
|
+
displayOnInlineTooltip: false
|
165
|
+
},
|
166
|
+
handleEnterWithText(ctx, block) {
|
167
|
+
const { editorState } = ctx.state
|
168
|
+
const data = {
|
169
|
+
provisory_text: block.getText(),
|
170
|
+
endpoint: block.getData().get('endpoint'),
|
171
|
+
type: block.getData().get('type')
|
172
|
+
}
|
173
|
+
|
174
|
+
return ctx.onChange(resetBlockWithType(editorState, data.type, data))
|
175
|
+
}
|
176
|
+
}]
|
177
|
+
|
178
|
+
defaultOptions.tooltips = [{
|
179
|
+
ref: 'insert_tooltip',
|
180
|
+
component: DanteTooltip,
|
181
|
+
displayOnSelection: true,
|
182
|
+
selectionElements: [
|
183
|
+
"unstyled",
|
184
|
+
"blockquote",
|
185
|
+
"ordered-list",
|
186
|
+
"unordered-list",
|
187
|
+
"unordered-list-item",
|
188
|
+
"ordered-list-item",
|
189
|
+
"code-block",
|
190
|
+
'header-one',
|
191
|
+
'header-two',
|
192
|
+
'header-three',
|
193
|
+
'header-four'],
|
194
|
+
widget_options: {
|
195
|
+
block_types: [
|
196
|
+
// {label: 'p', style: 'unstyled'},
|
197
|
+
{ label: 'h2', style: 'header-one', type: "block" },
|
198
|
+
{ label: 'h3', style: 'header-two', type: "block" },
|
199
|
+
{ label: 'h4', style: 'header-three', type: "block" },
|
200
|
+
{ label: 'blockquote', style: 'blockquote', type: "block" },
|
201
|
+
{ label: 'insertunorderedlist', style: 'unordered-list-item', type: "block" },
|
202
|
+
{ label: 'insertorderedlist', style: 'ordered-list-item', type: "block" },
|
203
|
+
{ label: 'code', style: 'code-block', type: "block" },
|
204
|
+
{ label: 'bold', style: 'BOLD', type: "inline" },
|
205
|
+
{ label: 'italic', style: 'ITALIC', type: "inline" }]
|
206
|
+
}
|
207
|
+
}, {
|
208
|
+
ref: 'add_tooltip',
|
209
|
+
component: DanteInlineTooltip
|
210
|
+
}, {
|
211
|
+
ref: 'anchor_popover',
|
212
|
+
component: DanteAnchorPopover
|
213
|
+
}, {
|
214
|
+
ref: 'image_popover',
|
215
|
+
component: DanteImagePopover
|
216
|
+
}]
|
217
|
+
|
218
|
+
defaultOptions.xhr = {
|
219
|
+
before_handler: null,
|
220
|
+
success_handler: null,
|
221
|
+
error_handler: null
|
222
|
+
}
|
223
|
+
|
224
|
+
defaultOptions.data_storage = {
|
225
|
+
url: null,
|
226
|
+
method: "POST",
|
227
|
+
success_handler: null,
|
228
|
+
failure_handler: null,
|
229
|
+
interval: 1500
|
230
|
+
}
|
231
|
+
|
232
|
+
defaultOptions.default_wrappers = [
|
233
|
+
{ className: 'graf--p', block: 'unstyled' },
|
234
|
+
{ className: 'graf--h2', block: 'header-one' },
|
235
|
+
{ className: 'graf--h3', block: 'header-two' },
|
236
|
+
{ className: 'graf--h4', block: 'header-three' },
|
237
|
+
{ className: 'graf--blockquote', block: 'blockquote' },
|
238
|
+
{ className: 'graf--insertunorderedlist', block: 'unordered-list-item' },
|
239
|
+
{ className: 'graf--insertorderedlist', block: 'ordered-list-item' },
|
240
|
+
{ className: 'graf--code', block: 'code-block' },
|
241
|
+
{ className: 'graf--bold', block: 'BOLD' },
|
242
|
+
{ className: 'graf--italic', block: 'ITALIC' }]
|
243
|
+
|
244
|
+
defaultOptions.continuousBlocks = [
|
245
|
+
"unstyled",
|
246
|
+
"blockquote",
|
247
|
+
"ordered-list",
|
248
|
+
"unordered-list",
|
249
|
+
"unordered-list-item",
|
250
|
+
"ordered-list-item",
|
251
|
+
"code-block"
|
252
|
+
]
|
253
|
+
|
254
|
+
defaultOptions.key_commands = {
|
255
|
+
"alt-shift": [{ key: 65, cmd: 'add-new-block' }],
|
256
|
+
"alt-cmd": [{ key: 49, cmd: 'toggle_block:header-one' },
|
257
|
+
{ key: 50, cmd: 'toggle_block:header-two' },
|
258
|
+
{ key: 53, cmd: 'toggle_block:blockquote' }],
|
259
|
+
"cmd": [{ key: 66, cmd: 'toggle_inline:BOLD' },
|
260
|
+
{ key: 73, cmd: 'toggle_inline:ITALIC' },
|
261
|
+
{ key: 75, cmd: 'insert:link' }]
|
262
|
+
}
|
263
|
+
|
264
|
+
defaultOptions.character_convert_mapping = {
|
265
|
+
'> ': "blockquote",
|
266
|
+
'*.': "unordered-list-item",
|
267
|
+
'* ': "unordered-list-item",
|
268
|
+
'- ': "unordered-list-item",
|
269
|
+
'1.': "ordered-list-item",
|
270
|
+
'# ': 'header-one',
|
271
|
+
'##': 'header-two',
|
272
|
+
'==': "unstyled",
|
273
|
+
'` ': "code-block"
|
274
|
+
}
|
275
|
+
|
276
|
+
return defaultOptions
|
277
|
+
}
|
278
|
+
|
279
|
+
getContent() {
|
280
|
+
return this.options.content
|
281
|
+
}
|
282
|
+
|
283
|
+
render() {
|
284
|
+
return this.editor = ReactDOM.render(
|
285
|
+
<DanteEditor content={this.getContent()} config={this.options} />,
|
286
|
+
document.getElementById(this.options.el)
|
287
|
+
)
|
288
|
+
}
|
289
|
+
}
|
290
|
+
|
291
|
+
module.exports = Dante
|