forked from slab/quill
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
305 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| themeName = 'cuco' | ||
| activeColor = #0086a8 | ||
| borderColor = #ccc | ||
| backgroundColor = #fff | ||
| inactiveColor = #444 | ||
| shadowColor = #ddd | ||
| textColor = #444 | ||
|
|
||
| @import './core' | ||
| @import './base' | ||
| @import './cuco/*' | ||
|
|
||
| .ql-cuco | ||
| a | ||
| color: activeColor | ||
|
|
||
| .ql-container.ql-cuco | ||
| border: 1px solid borderColor |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| .ql-toolbar.ql-cuco | ||
| border: 1px solid borderColor | ||
| box-sizing: border-box | ||
| font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif | ||
| padding: 8px | ||
|
|
||
| .ql-formats | ||
| margin-right: 15px | ||
|
|
||
| .ql-picker-label | ||
| border: 1px solid transparent | ||
| .ql-picker-options | ||
| border: 1px solid transparent | ||
| box-shadow: rgba(0,0,0,0.2) 0 2px 8px | ||
| .ql-picker.ql-expanded | ||
| .ql-picker-label | ||
| border-color: borderColor | ||
| .ql-picker-options | ||
| border-color: borderColor | ||
|
|
||
| .ql-color-picker | ||
| .ql-picker-item.ql-selected, .ql-picker-item:hover | ||
| border-color: #000 | ||
|
|
||
| .ql-toolbar.ql-cuco + .ql-container.ql-cuco | ||
| border-top: 0px; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| tooltipMargin = 8px | ||
|
|
||
| .ql-cuco | ||
| .ql-tooltip | ||
| background-color: #fff | ||
| border: 1px solid borderColor | ||
| box-shadow: 0px 0px 5px shadowColor | ||
| color: textColor | ||
| padding: 5px 12px | ||
| white-space: nowrap | ||
| &::before | ||
| content: "Ir a:" | ||
| line-height: 26px | ||
| margin-right: tooltipMargin | ||
| input[type=text] | ||
| display: none | ||
| border: 1px solid borderColor | ||
| font-size: 13px | ||
| height: 26px | ||
| margin: 0px | ||
| padding: 3px 5px | ||
| width: 170px | ||
| a.ql-preview | ||
| display: inline-block | ||
| max-width: 200px | ||
| overflow-x: hidden | ||
| text-overflow: ellipsis | ||
| vertical-align: top | ||
| a.ql-action::after | ||
| border-right: 1px solid borderColor | ||
| content: 'Editar' | ||
| margin-left: tooltipMargin*2 | ||
| padding-right: tooltipMargin | ||
| a.ql-remove::before | ||
| content: 'Quitar' | ||
| margin-left: tooltipMargin | ||
| a | ||
| line-height: 26px | ||
| .ql-tooltip.ql-editing | ||
| a.ql-preview, a.ql-remove | ||
| display: none | ||
| input[type=text] | ||
| display: inline-block | ||
| a.ql-action::after | ||
| border-right: 0px | ||
| content: 'Guardar' | ||
| padding-right: 0px | ||
| .ql-tooltip[data-mode=link]::before | ||
| content: "Liga:" | ||
| .ql-tooltip[data-mode=formula]::before | ||
| content: "Formula:" | ||
| .ql-tooltip[data-mode=tweet]::before | ||
| content: "Liga del tweet:" | ||
| .ql-tooltip[data-mode=video]::before | ||
| content: "Liga del video:" |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { BlockEmbed } from '../blots/block'; | ||
|
|
||
| const {warn} = console; | ||
|
|
||
| class Tweet extends BlockEmbed { | ||
| static create(id) { | ||
| let node = super.create(); | ||
| node.dataset.id = id; | ||
|
|
||
| if (typeof twttr === 'undefined') { | ||
| warn('There is no Twitter Widget Library. Add it!'); | ||
| node.insertAdjacentHTML('afterbegin', '[Tuvimos problemas para desplegar el Tweet: '); | ||
| node.insertAdjacentHTML('beforeend', `<a href="https://twitter.com/a/status/${id}">${id}</a>`); | ||
| node.insertAdjacentHTML('beforeend', ' (Aquí se desplegará)]'); | ||
| node.setAttribute('style', 'text-align:center;'); | ||
| } else { | ||
| twttr.widgets.createTweet(id, node, { | ||
| align: 'center', | ||
| lang: 'es', | ||
| width: 350 | ||
| }); | ||
| } | ||
|
|
||
| return node; | ||
| } | ||
|
|
||
| static value(domNode) { | ||
| return domNode.dataset.id; | ||
| } | ||
| } | ||
| Tweet.blotName = 'tweet'; | ||
| Tweet.className = 'ql-tweet'; | ||
| Tweet.tagName = 'DIV'; | ||
|
|
||
| export default Tweet; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| import extend from 'extend'; | ||
| import Emitter from '../core/emitter'; | ||
| import BaseTheme, { BaseTooltip } from './base'; | ||
| import LinkBlot from '../formats/link'; | ||
| import { Range } from '../core/selection'; | ||
| import icons from '../ui/icons'; | ||
|
|
||
|
|
||
| const TOOLBAR_CONFIG = [ | ||
| 'bold', | ||
| 'italic', | ||
| 'link', | ||
| {align: []}, | ||
| 'image', | ||
| 'video', | ||
| 'code-block', | ||
| 'tweet' | ||
| ]; | ||
|
|
||
| class CucoTheme extends BaseTheme { | ||
| constructor(quill, options) { | ||
| if (options.modules.toolbar != null && options.modules.toolbar.container == null) { | ||
| options.modules.toolbar.container = TOOLBAR_CONFIG; | ||
| } | ||
| super(quill, options); | ||
| this.quill.container.classList.add('ql-cuco'); | ||
| } | ||
|
|
||
| extendToolbar(toolbar) { | ||
| toolbar.container.classList.add('ql-cuco'); | ||
| this.buildButtons([].slice.call(toolbar.container.querySelectorAll('button')), icons); | ||
| this.buildPickers([].slice.call(toolbar.container.querySelectorAll('select')), icons); | ||
| this.tooltip = new CucoTooltip(this.quill, this.options.bounds); | ||
| if (toolbar.container.querySelector('.ql-link')) { | ||
| this.quill.keyboard.addBinding({ key: 'K', shortKey: true }, function(range, context) { | ||
| toolbar.handlers['link'].call(toolbar, !context.format.link); | ||
| }); | ||
| } | ||
| } | ||
| } | ||
| CucoTheme.DEFAULTS = extend(true, {}, BaseTheme.DEFAULTS, { | ||
| modules: { | ||
| toolbar: { | ||
| handlers: { | ||
| link: function(value) { | ||
| if (value) { | ||
| let range = this.quill.getSelection(); | ||
| if (range == null || range.length == 0) return; | ||
| let preview = this.quill.getText(range); | ||
| if (/^\S+@\S+\.\S+$/.test(preview) && preview.indexOf('mailto:') !== 0) { | ||
| preview = 'mailto:' + preview; | ||
| } | ||
| let tooltip = this.quill.theme.tooltip; | ||
| tooltip.edit('link', preview); | ||
| } else { | ||
| this.quill.format('link', false); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }); | ||
|
|
||
|
|
||
| class CucoTooltip extends BaseTooltip { | ||
| constructor(quill, bounds) { | ||
| super(quill, bounds); | ||
| this.preview = this.root.querySelector('a.ql-preview'); | ||
| } | ||
|
|
||
| listen() { | ||
| super.listen(); | ||
| this.root.querySelector('a.ql-action').addEventListener('click', (event) => { | ||
| if (this.root.classList.contains('ql-editing')) { | ||
| this.save(); | ||
| } else { | ||
| this.edit('link', this.preview.textContent); | ||
| } | ||
| event.preventDefault(); | ||
| }); | ||
| this.root.querySelector('a.ql-remove').addEventListener('click', (event) => { | ||
| if (this.linkRange != null) { | ||
| let range = this.linkRange; | ||
| this.restoreFocus(); | ||
| this.quill.formatText(range, 'link', false, Emitter.sources.USER); | ||
| delete this.linkRange; | ||
| } | ||
| event.preventDefault(); | ||
| this.hide(); | ||
| }); | ||
| this.quill.on(Emitter.events.SELECTION_CHANGE, (range, oldRange, source) => { | ||
| if (range == null) return; | ||
| if (range.length === 0 && source === Emitter.sources.USER) { | ||
| let [link, offset] = this.quill.scroll.descendant(LinkBlot, range.index); | ||
| if (link != null) { | ||
| this.linkRange = new Range(range.index - offset, link.length()); | ||
| let preview = LinkBlot.formats(link.domNode); | ||
| this.preview.textContent = preview; | ||
| this.preview.setAttribute('href', preview); | ||
| this.show(); | ||
| this.position(this.quill.getBounds(this.linkRange)); | ||
| return; | ||
| } | ||
| } else { | ||
| delete this.linkRange; | ||
| } | ||
| this.hide(); | ||
| }); | ||
| } | ||
|
|
||
| show() { | ||
| super.show(); | ||
| this.root.removeAttribute('data-mode'); | ||
| } | ||
| } | ||
| CucoTooltip.TEMPLATE = [ | ||
| '<a class="ql-preview" target="_blank" href="about:blank"></a>', | ||
| '<input type="text" ', | ||
| 'data-formula="e=mc^2" ', | ||
| 'data-link="http://culturacolectiva.com" ', | ||
| 'data-video="Link" ', | ||
| 'data-tweet="Tweet">', | ||
| '<a class="ql-action"></a>', | ||
| '<a class="ql-remove"></a>' | ||
| ].join(''); | ||
|
|
||
|
|
||
| export default CucoTheme; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters