In Title and Button, content is not editable when defaut content is removed #426
Comments
|
OK. Are you able to focus it again if you focus the previous or next editable text and use TAB or CTRL+TAB to move the focus to the "missing" editable? If yes, then it is still editable, but being empty you are not able anymore to select it via mouse. In this case it should be easier to fix. Otherwise I need more infos.. please let me know. |
|
yes, with TAB and CTRL+TAB I can reach those fields, good work-around, thanks |
|
OK, I can reproduce it. Title and buttons are no more focusable if they are emptied. This is somehow template-related but maybe we need a fix (either in the template or in the editor) so that even empty inline editable elements can be focused. |
bago
added a commit
that referenced
this issue
Mar 20, 2018
You can now configure:
"ko.bindingHandlers.wysiwyg.getContentOptions: {};" in order to use standard getContent instead of "raw" getContent (it could work better) with regard to empty contents (see #428 and #426).
ko.bindingHandlers.wysiwyg.useTarget to skip creating id attributes for every editable element and run tinymce against the dom element instead of the selector.
Added ko.bindingHandlers.wysiwyg.initializingClass defaulting to "wysiwyg-loading" that will add the class to the element during the tinymce initialization. Also added some CSS to prevent the editable to be clickable during initialization and show a fade animation in that timeframe.
|
I added some defaull style to make sure inline editable are inline-block, have a minimum width and are never empty. |
Hiswe
added a commit
to abernier/mosaico-backend
that referenced
this issue
Sep 1, 2018
* More conditions for scrollfix.js Fixes voidlabs#374 . Should work with any 4+ version of tinymce. * Dependency updates + ko 3.4.2 compatibility Updated build/dev (npm/bower) dependencies + add ko 3.4.2 support for subscriptions tracking. * Modified README with link to ASP.NET Core backend * Modified README with link to ASP.NET MVC 5 backend * Revert ko-reactor to 1.3.9 + Embed ko-undomanager and ko-wrap Fixes voidlabs#407 and voidlabs#408 * Move away from bower. Switch to plain npm Fix voidlabs#409 * Move away from bower. Switch to plain npm Fix voidlabs#409 * Added reference to Rails engine * Force jquery-ui 1.11 because of jquery-ui 1.12 not being compatible There are quirks with jquery ui 1.12 that introduced incompatibilities and knockout-jqueryui doesn't deal with them. * Fix specs according to bower removal refactoring * Fixes for bower removal * Minor change trying to debug a weird issue with npm on CI tools * Update dev dependencies * Fix travis declaration (we don't support node 5, but we support node 6, 7 and 8) * Use jquery3+jquery migrate instead of jquery 1.12 (security issues) * Forgot a change in the jquery 3 upgrade * Depdendencies update (ko 3.4.2, reactor 1.4.0, ko-sortable 1.0.0) Support for ko 3.4.2 and ko 3.5.0-beta (both in our code and by upgrading ko-reactor to latest 1.4.0 release). Update to jquery ui 1.12 includes even if we stick to jquery ui 1.11 for compatibility reasons so we can easily bundle the latest ko-sortable version (that moved to the newest release) Another attempt to fix voidlabs#379 * Updated jasmine to 3.0.0 + added grunt clean task * Basic wrapper/undomanager spec Include commented code for "known failing tests" * Replace knockout-wrap with a simple adhoc function Fix voidlabs#408 * grunt-contrib-clean is a dev dependency, not a runtime dependency * build fixes + package-lock update * Update versafix to 1.1.16 release from the versafix-template project Versafix now have its own repository: https://github.com/voidlabs/versafix-template * Move to official evol-colorpicker npm (new releases merged our PR, so we don't need a fork anymore) + also fixed a comment in the colorpicker integration code. Complete the fix for #3 * Added community links to README * Reduce logging + Prepare 0.17 release Translated a missed italian log, moved to console.debug for some very verbose logging. * Logging improvements * Switch back from console.debug to console.log Console.debug is not available in node < 9 nor in some browsers. * Add license banner + Grunt compress task to make the binary release asset Also simplify the browserify build to avoid double builds. * Show debug where console.debug is available, otherwise mute it. * Automatically inject package version number in the code during the build * Added grunt release task * Testing grunt release plugin * release 0.17.0 * Explicit bin naming for the release assets Skip npm publishing during release. * New license_check grunt goal + new dist goal. * Fixes with test popup prompt 1) Edge Metro doesn't have a prompt method 2) When closing the window without email addresses this produced an error and stuck the button. * Minor fixes for package.json * Minor fixes to grunt release and lib minification size * Merge external dependencies to a single js+css file * Make "dist" folder more comprehensive * Moved index/editor.html to src folder * use passive events by default + sourcemaps for dependencies bundle * wysiwyg/tinymce: add debug option + default to "br" newlines on short texts. * Rename droppable binding to avoid name clash knockout-sortable 1.1.0 introduced its own droppable binding. It is not compatible with our needs, so we prefer to rename our binding, instead of overwriting the original binding with our code. * Fast fail on unsupported jqueryui version jquery ui 12 introduced backward incompatible changes. Our dependency (knockout-jqueryui) only supports 1.08 to 1.11, so we stick to 1.11 * we now supprot latest ko-sortable (bump devdependencies) * Attempt to catch some tinymce exceptions * DOWNGRADE tinymce to 4.5.8 + Fix for ko-sortable 1.1.0 support We experienced major random issues with TinyMCE 4.6.0+ (including latest 4.7.9), so we downgrade to the latest "stable" release. * Update README.md * Fix order for deps being bundled Fix voidlabs#421 Also removed explicit dependency on load-image/canvas-to-blob as we get them via file-upload. * Support quoted strings in template language declarations Fix voidlabs#391 * revert test changes * deal with both JSON and JS for the data parameter during startup * avoid use deprecated properties to detect webkit * use debug for expected exceptions * trim options key/labels for select widget * Missing localization string for gallery paginator * placeholder for pt_BR lang * Update mosaico-nl.json (POEditor.com) * Update mosaico-en.json (POEditor.com) * Update mosaico-fr.json (POEditor.com) * Update mosaico-de.json (POEditor.com) * Update mosaico-it.json (POEditor.com) * Update mosaico-ru.json (POEditor.com) * Update mosaico-sr_RS.json (POEditor.com) * Update mosaico-es.json (POEditor.com) * Update mosaico-sv.json (POEditor.com) * Update mosaico-pt_BR.json (POEditor.com) * Some 3rd party CI conf (appveyor + circleci) More CI, more environments. * Trim option keys while dealing with variants * Cleanup * Update versafix-1 parsing test + basic variant test * Coverage test with travisCI * Testing with travis and codecov * Docs refactoring * "dist" is better than "bin" * release 0.17.1 * Revert build optimization to keep npm3 compatibility Fix voidlabs#427 * Minor style fixes (sync upstream) * tinymce binding improvements You can now configure: "ko.bindingHandlers.wysiwyg.getContentOptions: {};" in order to use standard getContent instead of "raw" getContent (it could work better) with regard to empty contents (see voidlabs#428 and voidlabs#426). ko.bindingHandlers.wysiwyg.useTarget to skip creating id attributes for every editable element and run tinymce against the dom element instead of the selector. Added ko.bindingHandlers.wysiwyg.initializingClass defaulting to "wysiwyg-loading" that will add the class to the element during the tinymce initialization. Also added some CSS to prevent the editable to be clickable during initialization and show a fade animation in that timeframe. * wywisyg: more options - new ko.bindingHandlers.wysiwyg.removeSelectionOnBlur option defaulting to "true" that will force browser selection to be emptied when you unfocus an editor (set this to false to revert to the old behaviour). - new ko.bindingHandlers.wysiwyg.emptyClass option that will add an "wysiwyg-empty" class on contents with no "text" (remove html tags and trims to check this), so you can add CSS to add behaviour. By default no styles are added to this. - new debug console error when wysiwyg is started on inline elements (inline-block or block support is better) * Default to inline-block for editable contents and outline them on hover - Also changed the spacing for mid-tools (editing icons for images). - Force cursor icon for empty editables. * Added image tool to browser the gallery Set viewModel.selectImage to undefined if you want to remove the new icon. Override viewModel.selectImage to your own function if you want to change the behaviour of this icon. * Update mosaico-nl.json (POEditor.com) * Update mosaico-en.json (POEditor.com) * Update mosaico-fr.json (POEditor.com) * Update mosaico-de.json (POEditor.com) * Update mosaico-it.json (POEditor.com) * Update mosaico-pt_BR.json (POEditor.com) * Update mosaico-ru.json (POEditor.com) * Update mosaico-sr_RS.json (POEditor.com) * Update mosaico-es.json (POEditor.com) * Update mosaico-sv.json (POEditor.com) * trivial: package.lock was not updated according to npm3 compatibility refactoring * Trying to prevent inline-editable to collapse when empty We use \U2063 that is the unicode for the "invisible separator"/"invisible comma". * Move debug about inline editable after tinymce have initialized It raised false positives when ran before. * extract unused bindings to their own file + extracted preloader to its own file, so to shring fileupload bindings. * release 0.17.2 * Temporary workaround for voidlabs#430 Simply revert latest CSS changes for webkit browsers (Safari/Midori..). Those browsers won't show the outline on editable contents while hovering the blocks. * Avoid opacity "on hover" in Safari/Midori Attempt to fix voidlabs#430 * Refactor hover/selection effects to deal with webkit (safari) issues Trying to workaround voidlabs#430 * minor visual tweak for selections * prevent double tooltips on image upload button (safari/edge) Hopefully fix voidlabs#432 * Prevent downloading resources while parsing the master template Attempt to fix voidlabs#433 by using jQuery(jQuery.parseHTML()) instead of jQuery(). This also require jQuery 3+ (on older jquery it will work, but it will temporarily try to download remote resources from invalid urls) * Move makeEditableHover to style_mosaico.less near the makeSelectable * release 0.17.3 * Rename dependencies bundle to fix a tinymce issue in IE11 Tinymce tries to find the path for skin resources on its own. On IE11 the "correct" method fails and it tries to detect the folder by searching the tinymce script urls. But we bundled it and it cannot find itself.. so if we name it so it ends with tinymce.min.js this will "fool" it and fix it. Fix voidlabs#459 * Update versafix to 1.1.17 Fix for voidlabs#467 * Add a comment about a broken option See voidlabs#446 * Update/improve dependencies Declare node/npm dependencies Add NOTES files about dependencies not updated by purpose (and why) Update other dependencies Hopefully fixes voidlabs#454 * Prepare for 0.17.4 release / downgrade csswring to 6.0.3 to keep node 6/7 compat csswring 7.0.0 broke the build under older node versions. * Fix lock file for downgraded csswring * NODE – update version * DEPENDENCIES – update patch/minor * PRETTIER – add * DEPENDENCIES – update and fix code * DEPENDENCIES – add back mosaico's editor's one * DEPENDENCIES – remove bower * BUILD – can do again \O/ * DEPENDENCIES – update * I18N – fix some * DOWNLOAD – first step of making a download without the images * ICONS – fix some * DOWNLOAD – implement CDN images * ICONS – fix more * ICONS – fix some more * DEPENDENCIES – update * DEPENDENCIES – update font-awesome * PREVIEW – begin to add on smaller devices * PREVIEW – change icon when active * BUILD – fix tinymce plugins * PREVIEW – fix edit zone resizing on small device * PREVIEW – highlight current item selected * BUILD – forcing “npm install” should be obsolete: no more use of bower * README – update * RELEASE – keep bin folder * HEROKU – revert back dependencies install for installing in heroku * HEROKU – add back gulpfile for building * HEROKU – add back src folder
|
Works perfectly, thanks |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
In Firefox 52/Debian and Firefox 59/Ubuntu, on every button and title when I remove the default content then click outside the field, I can't focus on it again to write the new content.
it doesn't happen on text paragraph, the field is still focusable with a black border when I mouseover it. And when I click in the rectangle I have a orange limit at the beginning and the end.
If I click in 'Content' in the button link to write an url (in the left side of the screen), the button text field (in the right side) becomes focusable again with the orange limits.
There is no editable property for the title to help make the title text field focusable again.
I reproduced it on https://mosaico.io/editor-0.17.4.html
The text was updated successfully, but these errors were encountered: