fable-editor 1.2.7 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fable-editor",
-  "version": "1.2.7",
+  "version": "1.3.0",
   "description": "FableEditor — a rich text editor with React and Angular wrappers",
   "author": "Sajin Satheesan <an.sajinsatheesan@gmail.com>",
   "repository": {

package/style.css

@@ -194,6 +194,14 @@
                stroke-linejoin: round;
           }
 
+          /* undo/redo swap sides under dir=rtl (normal flex reordering of the
+             toolbar), but their glyphs stay fixed - without this, both arrows end
+             up pointing at each other instead of outward from their new position */
+          [dir=rtl] .tbtn[data-id=undo] svg,
+          [dir=rtl] .tbtn[data-id=redo] svg {
+               transform: scaleX(-1);
+          }
+
           .tbtn svg .f {
                fill: #2f3744;
                stroke: none;
@@ -350,6 +358,20 @@
                height: auto;
           }
 
+          /* the preview dialog mounts on document.body, outside .earea, so it needs
+             the same clamping or an image previews at its raw pixel size */
+          .dlg .pv-box img, .dlg .pv-box video {
+               max-width: 100%;
+               height: auto;
+          }
+
+          /* preview is sized to the editor's own content column so what it shows is
+             the size that will actually be sent; that needs more room than the
+             standard dialog cap allows */
+          .dlg.dlg-preview {
+               max-width: 96vw;
+          }
+
           /* image / video upload placeholder */
           .earea .img-ph {
                display: flex;
@@ -1711,8 +1733,13 @@
                color: #556;
           }
 
-          kbd {
+          /* scoped (not a bare kbd selector) and with its own explicit color -
+             a host page's own kbd styling can otherwise out-specificity a bare
+             tag selector and override just one of background/color, leaving
+             light-on-light text */
+          .dlg kbd {
                background: #f3f4f6;
+               color: #444c58;
                border-radius: 4px;
                padding: 2px 7px;
                font: 12px Consolas, monospace;