UnitTest.asynctest('browser.tinymce.plugins.emoticons.AutocompletionTest', (success, failure) => {
EmoticonsPlugin();
TinyLoader.setup(function (editor, onSuccess, onFailure) {
const tinyApis = TinyApis(editor);
const eDoc = Element.fromDom(editor.getDoc());
// NOTE: This is almost identical to charmap
Pipeline.async({},
Log.steps('TBA', 'Emoticons: Autocomplete, trigger an autocomplete and check it appears', [
tinyApis.sFocus,
tinyApis.sSetContent('<p>:ha</p>'),
tinyApis.sSetCursor([ 0, 0 ], 3),
Keyboard.sKeypress(eDoc, 'a'.charCodeAt(0), { }),
UiFinder.sWaitForVisible('Waiting for autocomplete menu', Body.body(), '.tox-autocompleter .tox-collection__item'),
Keyboard.sKeydown(eDoc, Keys.right(), { }),
Keyboard.sKeydown(eDoc, Keys.right(), { }),
Keyboard.sKeydown(eDoc, Keys.enter(), { }),
tinyApis.sAssertContent('<p>😂</p>')
])
, onSuccess, onFailure);
}, {
plugins: 'emoticons',
toolbar: 'emoticons',
theme: 'silver',
base_url: '/project/tinymce/js/tinymce',
emoticons_database_url: '/project/tinymce/src/plugins/emoticons/test/js/test-emojis.js'
}, success, failure);
});
UnitTest.asynctest('browser.tinymce.plugins.emoticons.SearchTest', (success, failure) => {
EmoticonsPlugin();
TinyLoader.setup(function (editor, onSuccess, onFailure) {
const tinyApis = TinyApis(editor);
const tinyUi = TinyUi(editor);
const doc = Element.fromDom(document);
Pipeline.async({},
Log.steps('TBA', 'Emoticons: Open dialog, Search for "rainbow", Rainbow should be first option', [
tinyApis.sFocus,
tinyUi.sClickOnToolbar('click emoticons', 'button'),
Chain.asStep({}, [
tinyUi.cWaitForPopup('wait for popup', 'div[role="dialog"]'),
]),
FocusTools.sTryOnSelector('Focus should start on input', doc, 'input'),
FocusTools.sSetActiveValue(doc, 'rainbow'),
Chain.asStep(doc, [
FocusTools.cGetFocused,
cFakeEvent('input')
]),
Waiter.sTryUntil(
'Wait until Euro is the first choice (search should filter)',
Chain.asStep(Body.body(), [
UiFinder.cFindIn('.tox-collection__item:first'),
Chain.mapper((item) => {
return Attr.get(item, 'data-collection-item-value');
}),
Assertions.cAssertEq('Search should show rainbow', '🌈')
]),
100,
1000
),
Keyboard.sKeydown(doc, Keys.tab(), { }),
FocusTools.sTryOnSelector('Focus should have moved to collection', doc, '.tox-collection__item'),
Keyboard.sKeydown(doc, Keys.enter(), { }),
Waiter.sTryUntil(
'Waiting for content update',
tinyApis.sAssertContent('<p>🌈</p>'),
100,
1000
)
])
, onSuccess, onFailure);
}, {
plugins: 'emoticons',
toolbar: 'emoticons',
theme: 'silver',
base_url: '/project/tinymce/js/tinymce',
emoticons_database_url: '/project/tinymce/src/plugins/emoticons/main/js/emojis.js'
}, success, failure);
});
UnitTest.asynctest('browser.tinymce.plugins.emoticons.DifferentEmojiDatabaseTest', (success, failure) => {
EmoticonsPlugin();
const sTestEditorWithSettings = (categories, databaseUrl) => Step.async((onStepSuccess, onStepFailure) => {
TinyLoader.setup(function (editor, onSuccess, onFailure) {
const tinyApis = TinyApis(editor);
const tinyUi = TinyUi(editor);
Pipeline.async({}, [
tinyApis.sFocus,
tinyUi.sClickOnToolbar('click emoticons', 'button'),
Chain.asStep({}, [
tinyUi.cWaitForPopup('wait for popup', 'div[role="dialog"]'),
]),
Waiter.sTryUntil(
'Wait for emojis to load',
UiFinder.sNotExists(Body.body(), '.tox-spinner'),
100,
1000
),
Chain.asStep(Body.body(), [
UiFinder.cFindAllIn('[role="tab"]'),
Chain.mapper((elements: Element[]) => {
return Arr.map(elements, (elm: Element) => {
return elm.dom().textContent;
});
}),
Assertions.cAssertEq('Categories match', categories)
])
], onSuccess, onFailure);
}, {
plugins: 'emoticons',
toolbar: 'emoticons',
theme: 'silver',
base_url: '/project/tinymce/js/tinymce',
emoticons_database_url: databaseUrl
}, onStepSuccess, onStepFailure);
});
Pipeline.async({},
Log.steps('TBA', 'Emoticon: Loading databases from different urls', [
sTestEditorWithSettings([ 'All', 'People' ], '/project/tinymce/src/plugins/emoticons/test/js/test-emojis.js'),
sTestEditorWithSettings([ 'All', 'Travel and Places' ], '/project/tinymce/src/plugins/emoticons/test/js/test-emojis-alt.js')
]), success, failure);
});
UnitTest.asynctest('browser.tinymce.plugins.emoticons.EmoticonSanityTest', function () {
const success = arguments[arguments.length - 2];
const failure = arguments[arguments.length - 1];
ModernTheme();
EmoticonPlugin();
TinyLoader.setup(function (editor, onSuccess, onFailure) {
const tinyUi = TinyUi(editor);
const tinyApis = TinyApis(editor);
Pipeline.async({}, [
tinyUi.sClickOnToolbar('click on emoticons button', 'div[aria-label="Emoticons"] > button'),
tinyUi.sClickOnUi('click on kiss', 'a[aria-label="kiss"]'),
tinyApis.sAssertContentStructure(ApproxStructure.build(function (s, str) {
return s.element('body', {
children: [
s.element('p', {
children: [
s.element('img', {
attrs: {
alt: str.is('kiss')
}
})
]
})
]
});
}))
], onSuccess, onFailure);
}, {
plugins: 'emoticons',
toolbar: 'emoticons',
skin_url: '/project/js/tinymce/skins/lightgray'
}, success, failure);
});
export default function () {
AdvListPlugin();
AnchorPlugin();
AutoLinkPlugin();
AutoResizePlugin();
AutoSavePlugin();
BbCodePlugin();
CharMapPlugin();
CodePlugin();
CodeSamplePlugin();
ColorPickerPlugin();
ContextMenuPlugin();
DirectionalityPlugin();
EmoticonsPlugin();
FullPagePlugin();
FullScreenPlugin();
HrPlugin();
ImagePlugin();
ImageToolsPlugin();
ImportCssPlugin();
InsertDatetimePlugin();
LegacyOutputPlugin();
LinkPlugin();
ListsPlugin();
MediaPlugin();
NonBreakingPlugin();
NonEditablePlugin();
PageBreakPlugin();
PastePlugin();
PreviewPlugin();
PrintPlugin();
SavePlugin();
SearchReplacePlugin();
SpellCheckerPlugin();
TabFocusPlugin();
TablePlugin();
TemplatePlugin();
TextColorPlugin();
TextPatternPlugin();
TocPlugin();
VisualBlocksPlugin();
VisualCharsPlugin();
WordCountPlugin();
ModernTheme();
MobileTheme();
HelpPlugin();
PluginManager.urls.emoticons = '../../../../js/tinymce/plugins/emoticons';
const settings = {
skin_url: '../../../../js/tinymce/skins/lightgray',
codesample_content_css: '../../../../js/tinymce/plugins/codesample/css/prism.css',
visualblocks_content_css: '../../../../js/tinymce/plugins/visualblocks/css/visualblocks.css',
images_upload_url: 'd',
selector: 'textarea',
// rtl_ui: true,
link_list: [
{ title: 'My page 1', value: 'http://www.tinymce.com' },
{ title: 'My page 2', value: 'http://www.moxiecode.com' }
],
image_list: [
{ title: 'My page 1', value: 'http://www.tinymce.com' },
{ title: 'My page 2', value: 'http://www.moxiecode.com' }
],
image_class_list: [
{ title: 'None', value: '' },
{ title: 'Some class', value: 'class-name' }
],
importcss_append: true,
height: 400,
file_picker_callback (callback, value, meta) {
// Provide file and text for the link dialog
if (meta.filetype === 'file') {
callback('https://www.google.com/logos/google.jpg', { text: 'My text' });
}
// Provide image and alt text for the image dialog
if (meta.filetype === 'image') {
callback('https://www.google.com/logos/google.jpg', { alt: 'My alt text' });
}
// Provide alternative source and posted for the media dialog
if (meta.filetype === 'media') {
callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.google.com/logos/google.jpg' });
}
},
spellchecker_callback (method, text, success, failure) {
const words = text.match(this.getWordCharPattern());
if (method === 'spellcheck') {
const suggestions = {};
for (let i = 0; i < words.length; i++) {
suggestions[words[i]] = ['First', 'Second'];
}
success(suggestions);
}
if (method === 'addToDictionary') {
success();
}
},
templates: [
{ title: 'Some title 1', description: 'Some desc 1', content: 'My content' },
{ title: 'Some title 2', description: 'Some desc 2', content: '<div class="mceTmpl"><span class="cdate">cdate</span><span class="mdate">mdate</span>My content2</div>' }
],
template_cdate_format: '[CDATE: %m/%d/%Y : %H:%M:%S]',
template_mdate_format: '[MDATE: %m/%d/%Y : %H:%M:%S]',
image_caption: true,
theme: 'modern',
mobile: {
plugins: [
'autosave lists'
]
},
plugins: [
'autosave advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker toc',
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
'save table contextmenu directionality emoticons template paste textcolor importcss colorpicker textpattern',
'codesample help noneditable print'
],
add_unload_trigger: false,
toolbar: 'insertfile undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | ' +
'bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons table codesample code | ltr rtl'
};
EditorManager.init(settings);
EditorManager.init(Merger.deepMerge(settings, { inline: true, selector: 'div.tinymce' }));
window.tinymce = EditorManager;
}
/**
* Demo.js
*
* Released under LGPL License.
* Copyright (c) 1999-2016 Ephox Corp. All rights reserved
*
* License: http://www.tinymce.com/license
* Contributing: http://www.tinymce.com/contributing
*/
import EmoticonsPlugin from 'tinymce/plugins/emoticons/Plugin';
declare let tinymce: any;
EmoticonsPlugin();
tinymce.init({
selector: 'textarea.tinymce',
theme: 'modern',
skin_url: '../../../../../js/tinymce/skins/lightgray',
plugins: 'emoticons code',
toolbar: 'emoticons code',
height: 600
});
UnitTest.asynctest('browser.tinymce.plugins.emoticons.AppendTest', (success, failure) => {
EmoticonsPlugin();
const tabElement = (s, str, arr) => (name): StructAssert => {
return s.element('div', {
attrs: {
role: str.is('tab')
},
classes: [ arr.has('tox-tab'), arr.has('tox-dialog__body-nav-item') ],
children: [
s.text(str.is(name))
]
});
};
TinyLoader.setup(function (editor, onSuccess, onFailure) {
const tinyApis = TinyApis(editor);
const tinyUi = TinyUi(editor);
const doc = Element.fromDom(document);
const body = Body.body();
Pipeline.async({},
Log.steps('TBA', 'Emoticons: Open dialog, verify custom categories listed and search for custom emoticon', [
tinyApis.sFocus,
tinyUi.sClickOnToolbar('click emoticons', 'button'),
Chain.asStep({}, [
tinyUi.cWaitForPopup('wait for popup', 'div[role="dialog"]'),
]),
FocusTools.sTryOnSelector('Focus should start on input', doc, 'input'),
Chain.asStep(body, [
UiFinder.cFindIn('[role="tablist"]'),
Assertions.cAssertStructure('check custom categories are shown', ApproxStructure.build((s, str, arr) => {
return s.element('div', {
children: [
tabElement(s, str, arr)('All'),
tabElement(s, str, arr)('People'),
tabElement(s, str, arr)('User Defined')
]
});
})),
]),
FocusTools.sSetActiveValue(doc, 'clock'),
Chain.asStep(doc, [
FocusTools.cGetFocused,
cFakeEvent('input')
]),
Waiter.sTryUntil(
'Wait until clock is the first choice (search should filter)',
Chain.asStep(body, [
UiFinder.cFindIn('.tox-collection__item:first'),
Chain.mapper((item) => {
return Attr.get(item, 'data-collection-item-value');
}),
Assertions.cAssertEq('Search should show custom clock', '⏲')
]),
100,
1000
),
Keyboard.sKeydown(doc, Keys.tab(), {}),
FocusTools.sTryOnSelector('Focus should have moved to collection', doc, '.tox-collection__item'),
Keyboard.sKeydown(doc, Keys.enter(), {}),
Waiter.sTryUntil(
'Waiting for content update',
tinyApis.sAssertContent('<p>⏲</p>'),
100,
1000
)
])
, onSuccess, onFailure);
}, {
plugins: 'emoticons',
toolbar: 'emoticons',
theme: 'silver',
base_url: '/project/tinymce/js/tinymce',
emoticons_database_url: '/project/tinymce/src/plugins/emoticons/test/js/test-emojis.js',
emoticons_append: {
clock: {
keywords: [ 'clock', 'time' ],
char: '⏲'
},
brain_explode: {
keywords: [ 'brain', 'explode', 'blown' ],
char: '🤯'
}
}
}, success, failure);
});
export default function () {
AdvListPlugin();
AnchorPlugin();
AutoLinkPlugin();
AutoResizePlugin();
AutoSavePlugin();
BbCodePlugin();
CharMapPlugin();
CodePlugin();
CodeSamplePlugin();
ColorPickerPlugin();
ContextMenuPlugin();
DirectionalityPlugin();
EmoticonsPlugin();
FullPagePlugin();
FullScreenPlugin();
HrPlugin();
ImagePlugin();
ImageToolsPlugin();
ImportCssPlugin();
InsertDatetimePlugin();
LegacyOutputPlugin();
LinkPlugin();
ListsPlugin();
MediaPlugin();
NonBreakingPlugin();
NonEditablePlugin();
PageBreakPlugin();
PastePlugin();
PreviewPlugin();
PrintPlugin();
SavePlugin();
SearchReplacePlugin();
SpellCheckerPlugin();
TabFocusPlugin();
TablePlugin();
TemplatePlugin();
TextColorPlugin();
TextPatternPlugin();
TocPlugin();
VisualBlocksPlugin();
VisualCharsPlugin();
WordCountPlugin();
ModernTheme();
const cmd = function (command, value?) {
return { command, value };
};
const commands = [
cmd('Bold'),
cmd('Italic'),
cmd('Underline'),
cmd('Strikethrough'),
cmd('Superscript'),
cmd('Subscript'),
cmd('Cut'),
cmd('Copy'),
cmd('Paste'),
cmd('Unlink'),
cmd('JustifyLeft'),
cmd('JustifyCenter'),
cmd('JustifyRight'),
cmd('JustifyFull'),
cmd('JustifyNone'),
cmd('InsertUnorderedList'),
cmd('InsertOrderedList'),
cmd('ForeColor', 'red'),
cmd('HiliteColor', 'green'),
cmd('FontName', 'Arial'),
cmd('FontSize', 7),
cmd('RemoveFormat'),
cmd('mceBlockQuote'),
cmd('FormatBlock', 'h1'),
cmd('mceInsertContent', 'abc'),
cmd('mceToggleFormat', 'bold'),
cmd('mceSetContent', 'abc'),
cmd('Indent'),
cmd('Outdent'),
cmd('InsertHorizontalRule'),
cmd('mceToggleVisualAid'),
cmd('mceInsertLink', 'url'),
cmd('selectAll'),
cmd('delete'),
cmd('mceNewDocument'),
cmd('Undo'),
cmd('Redo'),
cmd('mceAutoResize'),
cmd('mceShowCharmap'),
cmd('mceCodeEditor'),
cmd('mceDirectionLTR'),
cmd('mceDirectionRTL'),
cmd('mceFullPageProperties'),
cmd('mceFullscreen'),
cmd('mceImage'),
cmd('mceInsertDate'),
cmd('mceInsertTime'),
cmd('InsertDefinitionList'),
cmd('mceNonBreaking'),
cmd('mcePageBreak'),
cmd('mcePreview'),
cmd('mcePrint'),
cmd('mceSave'),
cmd('SearchReplace'),
cmd('mceSpellcheck'),
cmd('mceInsertTemplate', '{$user}'),
cmd('mceVisualBlocks'),
cmd('mceVisualChars'),
cmd('mceMedia'),
cmd('mceAnchor'),
cmd('mceTableSplitCells'),
cmd('mceTableMergeCells'),
cmd('mceTableInsertRowBefore'),
cmd('mceTableInsertRowAfter'),
cmd('mceTableInsertColBefore'),
cmd('mceTableInsertColAfter'),
cmd('mceTableDeleteCol'),
cmd('mceTableDeleteRow'),
cmd('mceTableCutRow'),
cmd('mceTableCopyRow'),
cmd('mceTablePasteRowBefore'),
cmd('mceTablePasteRowAfter'),
cmd('mceTableDelete'),
cmd('mceInsertTable'),
cmd('mceTableProps'),
cmd('mceTableRowProps'),
cmd('mceTableCellProps'),
cmd('mceEditImage')
];
Arr.each(commands, function (cmd) {
const btn = document.createElement('button');
btn.innerHTML = cmd.command;
btn.onclick = function () {
EditorManager.activeEditor.execCommand(cmd.command, false, cmd.value);
};
document.querySelector('#ephox-ui').appendChild(btn);
});
EditorManager.init({
skin_url: '../../../../js/tinymce/skins/lightgray',
selector: 'textarea.tinymce',
plugins: [
'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker toc',
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
'save table contextmenu directionality emoticons template paste textcolor importcss colorpicker textpattern codesample'
],
theme: 'modern',
toolbar1: 'bold italic',
menubar: false
});
}