Merge pull request #1070 from plone/es6-bootstrap5-tinymce-modal

Make TinyMCE modals bootstrap5 aware

Author: MrTango

src/pat/tinymce/js/links.js

@@ -445,6 +445,9 @@ export default Base.extend({
             html: self.generateModalHtml(),
             content: null,
             buttons: ".plone-btn",
+            templateOptions: {
+                classDialog: "modal-dialog modal-lg"
+            }
         });
         self.modal.on("shown", function (e) {
             self.modalShown.apply(self, [e]);

src/pat/tinymce/templates/image.xml

@@ -11,13 +11,13 @@
         <% if(_.contains(linkTypes, 'image')){ %>
       <fieldset class="linkType image" data-linkType="image">
         <legend id="tinylink-image"><%- internalImageText %></legend>
-        <div class="form-inline">
-          <div class="form-group main">
-            <input type="text" name="image" />
+        <div>
+          <div class="main mb-2">
+            <input type="text" name="image" class="form-control" />
           </div>
-          <div class="form-group scale">
+          <div class="scale mb-2">
             <label><%- scaleText %></label>
-            <select name="scale">
+            <select name="scale" class="form-select">
               <option value="">Original</option>
                 <% _.each(imageScales, function(scale) { %>
                   <option value="<%- scale.value %>" <% if (scale.value === options.defaultScale) { %>selected<% } %> >
@@ -41,38 +41,38 @@
       <fieldset class="linkType externalImage" data-linkType="externalImage">
         <legend id="tinylink-externalImage"><%- externalImage %></legend>
         <div>
-          <div class="form-group main">
+          <div class="main">
             <label><%- externalImageText %></label>
-            <input type="text" name="externalImage" />
+            <input type="text" name="externalImage" class="form-control" />
           </div>
         </div>
       </fieldset>
       <% } %>
 
     </div><!-- / tabs -->
 
-    <div class="common-controls">
-      <div class="form-group title">
+    <div class="common-controls mt-3 border-top pt-3">
+      <div class="title mb-2">
         <label><%- titleText %></label>
-        <input type="text" name="title" />
+        <input type="text" name="title" class="form-control" />
       </div>
-      <div class="form-group text">
+      <div class="text mb-2">
         <label><%- altText %></label>
-        <input type="text" name="alt" />
+        <input type="text" name="alt" class="form-control" />
       </div>
-      <div class="form-group captionFromDescription">
-        <label>
-          <input type="checkbox" name="captionFromDescription" />
+      <div class="captionFromDescription form-check mb-2">
+        <input type="checkbox" name="captionFromDescription" class="form-check-input" />
+        <label for="captionFromDescription" class="form-check-label">
           <%- captionFromDescriptionText %>
         </label>
       </div>
-      <div class="form-group caption">
+      <div class="caption mb-2">
         <label><%- captionText %></label>
-        <textarea name="caption"></textarea>
+        <textarea name="caption" class="form-control"></textarea>
       </div>
-      <div class="form-group align">
+      <div class="align mb-2">
         <label><%- imageAlignText %></label>
-        <select name="align">
+        <select name="align" class="form-select">
           <% _.each(Object.keys(options.imageClasses), function(align){ %>
               <option value="<%- align %>">
               <%- options.imageClasses[align] %>
@@ -82,8 +82,8 @@
       </div>
     </div>
 
-    <input type="submit" class="plone-btn" name="cancel" value="<%- cancelBtn %>" />
-    <input type="submit" class="plone-btn plone-btn-primary context" name="insert" value="<%- insertBtn %>" />
+    <input type="submit" class="btn btn-secondary plone-btn me-1" name="cancel" value="<%- cancelBtn %>" />
+    <input type="submit" class="btn btn-primary plone-btn" name="insert" value="<%- insertBtn %>" />
 
   </div>
 </div>

src/pat/tinymce/templates/link.xml

@@ -12,9 +12,9 @@
       <fieldset class="linkType internal" data-linkType="internal">
         <legend id="tinylink-internal"><%- internal %></legend>
         <div>
-          <div class="form-group main">
+          <div class="main mb-2">
             <!-- this gives the name to the "linkType" -->
-            <input type="text" name="internal" />
+            <input type="text" name="internal" class="form-control" />
           </div>
         </div>
       </fieldset>
@@ -30,24 +30,24 @@
       <% if(_.contains(linkTypes, 'external')){ %>
       <fieldset class="linkType external" data-linkType="external">
         <legend id="tinylink-external"><%- external %></legend>
-        <div class="form-group main">
+        <div class="main mb-2">
           <label for="external"><%- externalText %></label>
-          <input type="text" name="external" />
+          <input type="text" name="external" class="form-control" />
         </div>
       </fieldset>
       <% } %>
 
       <% if(_.contains(linkTypes, 'email')){ %>
       <fieldset class="linkType email" data-linkType="email">
         <legend id="tinylink-email"><%- emailText %></legend>
-        <div class="form-inline">
-          <div class="form-group main">
+        <div>
+          <div class="main mb-2">
             <label><%- emailText %></label>
-            <input type="text" name="email" />
+            <input type="text" name="email" class="form-control" />
           </div>
-          <div class="form-group">
+          <div class="mb-2">
             <label><%- subjectText %></label>
-            <input type="text" name="subject" />
+            <input type="text" name="subject" class="form-control" />
           </div>
         </div>
       </fieldset>
@@ -57,10 +57,10 @@
       <fieldset class="linkType anchor" data-linkType="anchor">
         <legend id="tinylink-anchor"><%- anchor %></legend>
         <div>
-          <div class="form-group main">
+          <div class="main mb-2">
             <label><%- anchorLabel %></label>
             <div class="input-wrapper">
-              <select name="anchor" class="pat-select2" data-pat-select2="width:500px" />
+              <select name="anchor" class="pat-select2" data-pat-select2="width:500px"></select>
             </div>
           </div>
         </div>
@@ -69,22 +69,22 @@
 
     </div><!-- / tabs -->
 
-    <div class="common-controls">
-      <div class="form-group">
+    <div class="common-controls mt-3 border-top pt-3">
+      <div class="mb-2">
         <label><%- target %></label>
-        <select name="target">
+        <select name="target" class="form-select">
           <% _.each(targetList, function(target){ %>
             <option value="<%- target.value %>"><%- target.text %></option>
           <% }); %>
         </select>
       </div>
-      <div class="form-group">
+      <div class="mb-2">
         <label><%- titleText %></label>
-        <input type="text" name="title" />
+        <input type="text" name="title" class="form-control" />
       </div>
     </div>
 
-    <input type="submit" class="plone-btn" name="cancel" value="<%- cancelBtn %>" />
-    <input type="submit" class="plone-btn plone-btn-primary context" name="insert" value="<%- insertBtn %>" />
+    <input type="submit" class="btn btn-secondary plone-btn me-1" name="cancel" value="<%- cancelBtn %>" />
+    <input type="submit" class="btn btn-primary plone-btn" name="insert" value="<%- insertBtn %>" />
   </div>
 </div>

src/pat/tinymce/tinymce.scss

@@ -39,30 +39,12 @@ div.linkModal {
         padding-top: 0;
         margin-right: 20px;
     }
-    hr {
-        margin: 5px 0;
-    }
     div.linkTypes {
         line-height: 15px;
         input {
             margin: 5px 5px 9px 9px;
         }
     }
-    input[name="external"],
-    input[name="externalImage"] {
-        width: 80%;
-    }
-    fieldset {
-        padding-top: 10px;
-        min-height: 90px;
-    }
-    fieldset .input-wrapper {
-        display: inline-flex;
-    }
-    .common-controls {
-        padding-top: 10px;
-        border-top: 1px solid #ccc;
-    }
 }
 
 .tinymce-dropzone {