@@ -17,7 +17,7 @@ ClassicEditor
.create( document.querySelector( '#snippet-autosave' ), {
cloudServices: CS_CONFIG,
toolbar: {
- viewportTopOffset: 100
+ viewportTopOffset: window.getViewportTopOffsetConfig()
},
autosave: {
save( editor ) {
@@ -18,7 +18,7 @@ ClassicEditor
.create( document.querySelector( '#snippet-manualsave' ), {
}
} )
.then( editor => {
@@ -11,7 +11,7 @@ ClassicEditor
.create( document.querySelector( '#snippet-classic-editor-short' ), {
.create( document.querySelector( '#snippet-classic-editor' ), {
@@ -33,7 +33,7 @@ ClassicEditor
],
items: [ 'bold', 'italic', 'underline', 'strikethrough', 'code', '|', 'highlight', '|', 'undo', 'redo' ],
cloudServices: CS_CONFIG
@@ -17,7 +17,7 @@ Array.from( inlineInjectElements ).forEach( inlineElement => {
styles: [ 'full', 'alignLeft', 'alignRight' ]
};
.create( document.querySelector( '#snippet-image-upload' ), {
.create( document.querySelector( '#snippet-read-only' ), {
@@ -15,7 +15,7 @@ ClassicEditor
.create( document.querySelector( '#snippet-ui-language' ), {
@@ -2,6 +2,20 @@
* Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
*/
+:root {
+ /* This custom property is read by the JS and passed to editor configurations
+ as config.toolbar.viewportTopOffset. */
+ --ck-snippet-viewport-top-offset: 100
+}
+
+@media (max-width: 960px) {
+ :root {
+ /* The mobile layout of Umberto is different and the toolbar offset must be
+ smaller (https://github.com/ckeditor/ckeditor5/issues/1348). */
+ --ck-snippet-viewport-top-offset: 55;
+ }
.ck.ck-editor {
margin: 1.5em 0;
@@ -0,0 +1,21 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+/* globals window, document */
+ * Returns the `config.toolbar.viewportTopOffset` config value for editors using floating toolbars that
+ * stick to the top of the viewport to remain visible to the user.
+ *
+ * The value is determined in styles by the `--ck-snippet-viewport-top-offset` custom property
+ * and may differ e.g. according to the used media queries.
+ * @returns {Number} The value of the offset.
+window.getViewportTopOffsetConfig = function() {
+ const documentElement = document.documentElement;
+ return parseInt( window.getComputedStyle( documentElement ).getPropertyValue( '--ck-snippet-viewport-top-offset' ) );
+};
@@ -82,7 +82,7 @@
"raw-loader": "^0.5.1",
"style-loader": "^0.23.0",
"uglifyjs-webpack-plugin": "^1.2.7",
- "umberto": "^0.11.0",
+ "umberto": "^0.12.0",
"webpack": "^4.15.0"
"engines": {
@@ -69,6 +69,10 @@ module.exports = function snippetAdapter( data ) {
html: fs.readFileSync( data.snippetSource.html ),
assets: {
js: [
+ // Load snippet helpers first.
+ path.join( data.basePath, 'assets', 'snippet.js' ),
+ // Then load the actual snippet code.
path.join( data.relativeOutputPath, data.snippetPath, 'snippet.js' )
css: cssFiles