mirror of
https://github.com/WordPress/WordPress.git
synced 2024-06-27 15:24:59 +02:00
90bedf8f9d
* Code editor is integrated into the Theme/Plugin Editor, Additional CSS in Customizer, and Custom HTML widget. Code editor is not yet integrated into the post editor, and it may not be until accessibility concerns are addressed. * The CodeMirror component in the Custom HTML widget is integrated in a similar way to TinyMCE being integrated into the Text widget, adopting the same approach for integrating dynamic JavaScript-initialized fields. * Linting is performed for JS, CSS, HTML, and JSON via JSHint, CSSLint, HTMLHint, and JSONLint respectively. Linting is not yet supported for PHP. * When user lacks `unfiltered_html` the capability, the Custom HTML widget will report any Kses-invalid elements and attributes as errors via a custom Kses rule for HTMLHint. * When linting errors are detected, the user will be prevented from saving the code until the errors are fixed, reducing instances of broken websites. * The placeholder value is removed from Custom CSS in favor of a fleshed-out section description which now auto-expands when the CSS field is empty. See #39892. * The CodeMirror library is included as `wp.CodeMirror` to prevent conflicts with any existing `CodeMirror` global. * An `wp.codeEditor.initialize()` API in JS is provided to convert a `textarea` into CodeMirror, with a `wp_enqueue_code_editor()` function in PHP to manage enqueueing the assets and settings needed to edit a given type of code. * A user preference is added to manage whether or not "syntax highlighting" is enabled. The feature is opt-out, being enabled by default. * Allowed file extensions in the theme and plugin editors have been updated to include formats which CodeMirror has modes for: `conf`, `css`, `diff`, `patch`, `html`, `htm`, `http`, `js`, `json`, `jsx`, `less`, `md`, `php`, `phtml`, `php3`, `php4`, `php5`, `php7`, `phps`, `scss`, `sass`, `sh`, `bash`, `sql`, `svg`, `xml`, `yml`, `yaml`, `txt`. Props westonruter, georgestephanis, obenland, melchoyce, pixolin, mizejewski, michelleweber, afercia, grahamarmfield, samikeijonen, rianrietveld, iseulde. See #38707. Fixes #12423, #39892. Built from https://develop.svn.wordpress.org/trunk@41376 git-svn-id: http://core.svn.wordpress.org/trunk@41209 1a063a9b-81f0-0310-95a4-ce76da25c4cd
1 line
5.1 KiB
JavaScript
1 line
5.1 KiB
JavaScript
wp.customHtmlWidgets=function(a){"use strict";var b={idBases:["custom_html"],codeEditorSettings:{},l10n:{errorNotice:{singular:"",plural:""}}};return b.CustomHtmlWidgetControl=Backbone.View.extend({events:{},initialize:function(a){var c=this;if(!a.el)throw new Error("Missing options.el");if(!a.syncContainer)throw new Error("Missing options.syncContainer");Backbone.View.prototype.initialize.call(c,a),c.syncContainer=a.syncContainer,c.widgetIdBase=c.syncContainer.parent().find(".id_base").val(),c.widgetNumber=c.syncContainer.parent().find(".widget_number").val(),c.customizeSettingId="widget_"+c.widgetIdBase+"["+String(c.widgetNumber)+"]",c.$el.addClass("custom-html-widget-fields"),c.$el.html(wp.template("widget-custom-html-control-fields")({codeEditorDisabled:b.codeEditorSettings.disabled})),c.errorNoticeContainer=c.$el.find(".code-editor-error-container"),c.currentErrorAnnotations=[],c.saveButton=c.syncContainer.add(c.syncContainer.parent().find(".widget-control-actions")).find(".widget-control-save, #savewidget"),c.saveButton.addClass("custom-html-widget-save-button"),c.fields={title:c.$el.find(".title"),content:c.$el.find(".content")},_.each(c.fields,function(a,b){a.on("input change",function(){var d=c.syncContainer.find(".sync-input."+b);d.val()!==a.val()&&(d.val(a.val()),d.trigger("change"))}),a.val(c.syncContainer.find(".sync-input."+b).val())})},updateFields:function(){var a,b=this;b.fields.title.is(document.activeElement)||(a=b.syncContainer.find(".sync-input.title"),b.fields.title.val(a.val())),b.contentUpdateBypassed=b.fields.content.is(document.activeElement)||b.editor&&b.editor.codemirror.state.focused||0!==b.currentErrorAnnotations,b.contentUpdateBypassed||(a=b.syncContainer.find(".sync-input.content"),b.fields.content.val(a.val()).trigger("change"))},updateErrorNotice:function(c){var d,e,f=this,g="";1===c.length?g=b.l10n.errorNotice.singular.replace("%d","1"):c.length>1&&(g=b.l10n.errorNotice.plural.replace("%d",String(c.length))),f.fields.content[0].setCustomValidity&&f.fields.content[0].setCustomValidity(g),wp.customize&&wp.customize.has(f.customizeSettingId)?(e=wp.customize(f.customizeSettingId),e.notifications.remove("htmlhint_error"),0!==c.length&&e.notifications.add("htmlhint_error",new wp.customize.Notification("htmlhint_error",{message:g,type:"error"}))):0!==c.length?(d=a('<div class="inline notice notice-error notice-alt"></div>'),d.append(a("<p></p>",{text:g})),f.errorNoticeContainer.empty(),f.errorNoticeContainer.append(d),f.errorNoticeContainer.slideDown("fast"),wp.a11y.speak(g)):f.errorNoticeContainer.slideUp("fast")},initializeEditor:function(){var a,c=this;b.codeEditorSettings.disabled||(a=_.extend({},b.codeEditorSettings,{onTabPrevious:function(){c.fields.title.focus()},onTabNext:function(){var a=c.syncContainer.add(c.syncContainer.parent().find(".widget-position, .widget-control-actions")).find(":tabbable");a.first().focus()},onChangeLintingErrors:function(a){c.currentErrorAnnotations=a},onUpdateErrorNotice:function(a){c.saveButton.toggleClass("validation-blocked",a.length),c.updateErrorNotice(a)}}),c.editor=wp.codeEditor.initialize(c.fields.content,a),c.fields.content.on("change",function(){this.value!==c.editor.codemirror.getValue()&&c.editor.codemirror.setValue(this.value)}),c.editor.codemirror.on("change",function(){var a=c.editor.codemirror.getValue();a!==c.fields.content.val()&&c.fields.content.val(a).trigger("change")}),c.editor.codemirror.on("blur",function(){c.contentUpdateBypassed&&c.syncContainer.find(".sync-input.content").trigger("change")}),wp.customize&&c.editor.codemirror.on("keydown",function(a,b){var c=27;c===b.keyCode&&b.stopPropagation()}))}}),b.widgetControls={},b.handleWidgetAdded=function(c,d){var e,f,g,h,i,j,k,l=50;e=d.find("> .widget-inside > .form, > .widget-inside > form"),f=e.find("> .id_base").val(),-1!==b.idBases.indexOf(f)&&(h=e.find(".widget-id").val(),b.widgetControls[h]||(j=a("<div></div>"),k=d.find(".widget-content:first"),k.before(j),g=new b.CustomHtmlWidgetControl({el:j,syncContainer:k}),b.widgetControls[h]=g,(i=function(){(wp.customize?d.parent().hasClass("expanded"):d.hasClass("open"))?g.initializeEditor():setTimeout(i,l)})()))},b.setupAccessibleMode=function(){var c,d,e,f,g;c=a(".editwidget > form"),0!==c.length&&(d=c.find("> .widget-control-actions > .id_base").val(),-1!==b.idBases.indexOf(d)&&(f=a("<div></div>"),g=c.find("> .widget-inside"),g.before(f),e=new b.CustomHtmlWidgetControl({el:f,syncContainer:g}),e.initializeEditor()))},b.handleWidgetUpdated=function(a,c){var d,e,f,g;d=c.find("> .widget-inside > .form, > .widget-inside > form"),g=d.find("> .id_base").val(),-1!==b.idBases.indexOf(g)&&(e=d.find("> .widget-id").val(),f=b.widgetControls[e],f&&f.updateFields())},b.init=function(c){var d=a(document);_.extend(b.codeEditorSettings,c),d.on("widget-added",b.handleWidgetAdded),d.on("widget-synced widget-updated",b.handleWidgetUpdated),a(function(){var c;"widgets"===window.pagenow&&(c=a(".widgets-holder-wrap:not(#available-widgets)").find("div.widget"),c.one("click.toggle-widget-expanded",function(){var c=a(this);b.handleWidgetAdded(new jQuery.Event("widget-added"),c)}),a(window).on("load",function(){b.setupAccessibleMode()}))})},b}(jQuery); |