@themarioga/grid-editor 5.3.1 → 6.0.0-beta.2

package/BUILDING.md

@@ -22,10 +22,8 @@ the languages and the container plugins it actually wants. See
 [docs/plugins.md](docs/plugins.md) for what a container plugin is.
 
 The text editor plugins - tinyMCE, CKEditor and summernote - are built to
-`dist/plugins/` like the others, and up to 6.0 also go into the main bundle,
-followed by `src/js/compat/bundled-texts.js`, which marks them as the bundle's
-copies so the editor can warn a page that relies on them. 6.0 drops both from
-`jsFiles` in the Gruntfile.
+`dist/plugins/` like the others, and like them are not part of the main
+bundle. Up to 5.x the bundle carried a copy of each.
 
 One more file comes out of it: `dist/jquery.grideditor.bundle.min.js`, the
 minified editor concatenated with the copy of SortableJS in `node_modules`,

package/CHANGELOG.md

@@ -5,6 +5,65 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 
+## [6.0.0-beta.2] - 2026-09-23
+### Added
+- `settings_panel`: where a gear's settings open - a Bootstrap offcanvas at
+  the side, the default; a popover under the gear; a modal; or `'inline'` in
+  the drawer, as before. Each is titled after its node, the node is outlined
+  while they are open, and Escape closes them. The editor opens and places
+  them with Bootstrap's markup and css, and needs neither Popper nor
+  Bootstrap's javascript for it. [example/utilities.html](example/utilities.html)
+  switches between them.
+- `ge.detailsOf(node)` in the plugin handle: a node's settings panel,
+  wherever it is open.
+
+### Changed
+- The settings' fields are Bootstrap 5's own - labelled `form-control-sm`
+  inputs and `form-select-sm` selects - and the preset class buttons
+  `btn-outline-secondary`, where they carried Bootstrap 3's `btn-default`,
+  which Bootstrap 5 has not got.
+
+### Fixed
+- While dragging, the copy that follows the pointer came out unstyled - its
+  drawers laid out as plain links, their settings panels open - because it was
+  appended to the page's body, outside the canvas the editor's styles apply
+  to. It is appended to the list the drag started in, and looks like what it
+  copies.
+- With `drag_handle: 'drawer'` a text could not be dragged: its drawer is
+  small and made of tools, and a drag never starts on a tool. It has a grip at
+  its start now, and an info tool - the text's and an element's - which does
+  nothing when clicked, starts a drag too.
+
+## [6.0.0-beta.1] - 2026-09-23
+### Changed
+- **Elements are blocks of the column.** An element sits in a column beside
+  its texts, rows and containers, never inside a content area's text, and
+  drags within a column and between columns; the canvas and sections turn one
+  away. Markup 5.x saved, with elements in the text, is converted as the editor
+  starts: a content area is cut at each element among its own children, the
+  text after going into a new content area of the same type. Rows and
+  containers inside a content area come out the same way. `getPlainHtml`
+  publishes what 5.x published, except that a content area's own id and classes
+  stay on its first part. See [UPGRADING.md](UPGRADING.md).
+- **The text editors are not in the main bundle**, nor in the bundle with
+  SortableJS: load `dist/plugins/grideditor.<editor>.min.js`.
+- `elements.auto: true` makes every loose node of a column an element.
+- `createElement` into a content area puts the element beside it, and warns.
+- A text dragged between columns is `kind: 'text'`, as when it is added or
+  deleted; it was `kind: 'content'`.
+- Elements carry no `contenteditable` and their drawers no `data-mce-bogus`.
+- While a text is being edited its drawer stays faint, so as not to hide the
+  end of the line being typed, until the pointer is on the drawer itself; with
+  its settings open it stays whole.
+
+### Added
+- A feature plugin's `cuts`: the nodes that are never part of a text, which
+  cut the content area they sit in.
+
+### Removed
+- The copies of the text editors in the main bundle, and the warning about
+  using them.
+
 ## [5.3.1] - 2026-09-23
 ### Changed
 - A text's drawer sits over the text's top right corner instead of in a bar

package/README.md

@@ -47,7 +47,7 @@ Installation
     * If you want to use the tinyMCE integration, include tinyMCE 6 as well, and `dist/plugins/grideditor.tinymce.min.js` after the editor. The tinyMCE jQuery plugin is no longer needed, and no longer exists as of tinyMCE 6.
     * If you want to use the summernote integration, include summernote and `dist/plugins/grideditor.summernote.min.js`.
     * If you want to use the CKEditor integration... you get the point: CKEditor and `dist/plugins/grideditor.ckeditor.min.js`.
-    * Up to 5.x the main bundle still carries a copy of the three, so a page that does not load the plugin keeps working, and the console says, once, to load it. 6.0 leaves the copies out.
+    * Up to 5.x the main bundle carried a copy of the three; since 6.0 the plugin of the editor you use has to be loaded, as above. See [UPGRADING.md](UPGRADING.md).
 * From npm:
 
 ```
@@ -362,6 +362,21 @@ $('#myGrid').gridEditor({
 });
 ```
 
+__`settings_panel`:__ Where the settings a gear opens are shown - a node's id, its classes, the presets and the *Responsive* fields. Default `'offcanvas'`.
+
+| Value | Where |
+| --- | --- |
+| `'offcanvas'` | A Bootstrap offcanvas at the side of the window, from the bottom on a phone. It does not move the canvas, and has room for every field |
+| `'popover'` | A Bootstrap popover under the gear, or over it when there is more room there; a press anywhere else puts it away |
+| `'modal'` | A Bootstrap modal |
+| `'inline'` | Unfolded in the drawer itself, as up to 5.x |
+
+Each is titled after its node ("Column settings"), the node is outlined while its settings are open, and Escape closes them. The editor opens and places them itself, with Bootstrap's markup and css: a page needs neither Popper nor Bootstrap's javascript, and the modal is Bootstrap's own when Bootstrap is there. [example/utilities.html](example/utilities.html) switches between the four.
+
+```javascript
+$('#myGrid').gridEditor({ settings_panel: 'popover' });
+```
+
 __`confirm_delete`:__ Whether to ask before deleting a row, column, element or container. Default `true`. The question is asked in a Bootstrap modal the editor builds outside your canvas, in the interface language; a page that loaded Bootstrap's css but not its javascript gets the browser's own confirm instead. Set it to `false` if you cancel `before-delete` and ask in your own way.
 
 __`drag`:__ How a drag behaves, wherever the editor drags something. Named for the gesture rather than for the library underneath, so it survives a change of library. Every gesture works from a touchscreen, which is what `touch_delay` is for: a touch drag that started instantly would take the page's scrolling with it, so a finger has to rest for a moment before it moves anything. Setting `delay` makes both gestures wait that long.
@@ -413,7 +428,9 @@ The markup does not change: the drawer sits beside the content area in a
 wrapper that only exists while editing, because inside it the text editor would
 take it for text. It sits over the text's top right corner and takes no room,
 showing while the pointer is over the text, while the text is being edited or
-holds the focus, and while its settings are open.
+holds the focus, and while its settings are open. While the text is being
+edited it stays faint, not to hide the end of the line being typed, until the
+pointer is on the drawer itself.
 
 A column's drawer has an *Add text* tool, and the toolbar a *Text* button, one
 per editor when `content_types` offers several (*Text (tinyMCE)*, *Text
@@ -433,9 +450,9 @@ __`text_classes`:__ Preset class toggles on a text's settings panel, as `row_cla
 
 ### Elements
 
-An element is a node inside a content area that the editor treats as one
-movable, deletable thing instead of as rich text. It is a plugin, like the
-containers:
+An element is a node the editor treats as one movable, deletable block instead
+of as rich text: a block of the column, beside its texts, rows and containers,
+never part of a text. It is a plugin, like the containers:
 
 ```html
 <script src="grid-editor/dist/plugins/grideditor.elements.min.js"></script>
@@ -444,11 +461,20 @@ containers:
 You mark the elements themselves:
 
 ```html
-<div class="ge-content">
+<div class="col-md-6">
+  <div class="ge-content"><p>Some text</p></div>
   <blockquote data-ge-element="quote" data-ge-label="Pull quote">…your markup…</blockquote>
 </div>
 ```
 
+Up to 5.x an element lived inside a content area, among its text. Markup saved
+that way still loads: each element comes out of the text it sits in, into the
+column, and the text is cut there - before it, and after it in a new content
+area of the same type. Only a content area's own children count, as in 5.x;
+a marked node inside a paragraph is text. What `getPlainHtml` publishes is the
+same as before. `createElement` with `appendTo` a content area puts the element
+beside it instead, with a warning.
+
 __`elements`:__ Defaults:
 
 ```javascript
@@ -456,7 +482,7 @@ $('#myGrid').gridEditor({
     elements: {
         enabled: 'auto',                 // on when the page has any; true or false to decide yourself
         selector: '[data-ge-element]',   // what counts as an element
-        auto: false,                     // true treats every child of a content area as one
+        auto: false,                     // true treats every loose node of a column as one
     },
 });
 ```
@@ -562,7 +588,7 @@ nowhere else:
 | a section | the canvas, from the toolbar's paste button |
 | a container (tabs, accordion, popup, card) | a column |
 | a text | a column |
-| an element | a column's content area |
+| an element | a column |
 
 The toolbar's paste button is the clipboard icon on the right, beside the
 source and preview buttons, and shows only while a row or a section is copied.

package/UPGRADING.md

@@ -1,25 +1,70 @@
-Getting ready for grid-editor `6.*`, from `5.2`
-===============================================
+Upgrading from grid-editor `5.*` to `6.*`
+=========================================
 
-Nothing here breaks in 5.x. It is what 6.0 will need, and 5.2 already
-accepts, so a page can make the change at its own pace.
+Two changes make it a major: **elements are blocks of the column**, no longer
+part of a text, and **the text editors are not in the main bundle**. Markup
+5.x saved loads as it is, and `getPlainHtml` publishes the same from it.
 
-* __Load your text editor as a plugin.__ tinyMCE, CKEditor and summernote
-  are plugins in `dist/plugins/`, loaded after the editor:
+* __Load your text editor as a plugin.__ tinyMCE, CKEditor and summernote are
+  plugins in `dist/plugins/`, loaded after the editor:
 
   ```html
   <script src="grid-editor/dist/jquery.grideditor.min.js"></script>
   <script src="grid-editor/dist/plugins/grideditor.tinymce.min.js"></script>
   ```
 
-  Up to 5.x the main bundle, and the bundle with SortableJS, still carry a
-  copy of each, so a page that does not load the plugin keeps working. When a
-  content area is edited with one of those copies the console says so, once.
-  6.0 leaves the copies out.
+  Up to 5.x the main bundle, and the bundle with SortableJS, carried a copy of
+  each, and since 5.2 editing with one said so in the console. Without the
+  plugin a text is still a block, to move and delete, and its drawer says it
+  cannot be edited.
+
+* __Elements are blocks of the column.__ Up to 5.x an element lived inside a
+  content area, among the text a rich text editor edited. Now it sits in the
+  column beside the texts, and markup saved the 5.x way is converted as the
+  editor starts: each content area is cut at each element among its own
+  children - the text before it stays, the element goes into the column, the
+  text after goes into a new content area of the same type - and the next
+  `getHtml` saves the 6.0 shape.
+
+  ```html
+  <!-- 5.x -->
+  <div class="ge-content"><p>Before</p><blockquote data-ge-element="quote">…</blockquote><p>After</p></div>
+
+  <!-- 6.0 -->
+  <div class="ge-content"><p>Before</p></div>
+  <blockquote data-ge-element="quote">…</blockquote>
+  <div class="ge-content"><p>After</p></div>
+  ```
+
+  What `getPlainHtml` publishes is the same, `div.ge-content` being taken off,
+  with one exception: a content area with an id or classes of the host's
+  keeps them on its first part only. What to do: nothing, unless you style a
+  `div.ge-content` of your own as a whole, or read the saved markup expecting
+  elements inside a content area. A marked node inside a paragraph or a list
+  was text in 5.x and is text still.
+
+  Rows and containers found inside a content area come out of it the same way.
+
+* __`createElement` into a content area__ - `appendTo` or `prependTo` one - puts
+  the element beside it instead, after or before, and warns once. Place it in a
+  column.
+
+* __`elements.auto: true`__ means every loose node of a column is an element,
+  where it meant every child of a content area. A 5.x content area's children
+  still come out as elements, so a page that relied on it looks the same.
+
+* __A text dragged between columns is `kind: 'text'`__ in `before-move` and
+  `after-move`, as it is in its add and delete events since 5.3. It was
+  `kind: 'content'`.
+
+* __No more `contenteditable="false"` or `data-mce-bogus` on elements__, which
+  only existed to live inside a text editor. And a plugin that wrote an
+  element's attributes through tinyMCE's `undoManager.transact` can write them
+  with a plain `attr()`.
 
 * __An integration of your own under `$.fn.gridEditor.RTEs`__ still works,
-  wrapped by the editor, with a warning that it is deprecated. Register it
-  under `$.fn.gridEditor.texts` instead; [docs/plugins.md](docs/plugins.md#text-editor-plugins)
+  wrapped, with a warning that it is deprecated. Register it under
+  `$.fn.gridEditor.texts` instead; [docs/plugins.md](docs/plugins.md#text-editor-plugins)
   has the contract. `RTEs` goes in 7.0.
 
 

package/dist/grideditor.css

@@ -109,6 +109,9 @@
 /* Dragging by the whole drawer rather than by the move tool */
 .ge-canvas.ge-editing.ge-drag-drawer {
   /* The tools in it are still tools, and do not start a drag */
+  /* An info tool does nothing when clicked, so it is somewhere to hold */
+  /* A text's drawer sits over the text, small, and is mostly tools: a grip
+       at its start says where to take hold of it */
 }
 .ge-canvas.ge-editing.ge-drag-drawer .ge-tools-drawer {
   cursor: move;
@@ -120,6 +123,154 @@
 .ge-canvas.ge-editing.ge-drag-drawer .ge-tools-drawer .ge-details {
   cursor: auto;
 }
+.ge-canvas.ge-editing.ge-drag-drawer .ge-tools-drawer > a.ge-text-info,
+.ge-canvas.ge-editing.ge-drag-drawer .ge-tools-drawer > a.ge-element-info {
+  cursor: move;
+}
+.ge-canvas.ge-editing.ge-drag-drawer .ge-text-block > .ge-text-drawer {
+  padding-left: 14px;
+}
+.ge-canvas.ge-editing.ge-drag-drawer .ge-text-block > .ge-text-drawer::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 4px;
+  width: 6px;
+  height: 14px;
+  transform: translateY(-50%);
+  background-image: radial-gradient(circle, #50637b 1px, transparent 1.3px);
+  background-size: 3px 3px;
+  opacity: 0.7;
+}
+/* A node's settings, wherever settings_panel shows them: in its drawer, or
+   in one of Bootstrap's offcanvas, popover or modal, outside the canvas. The
+   fields are Bootstrap's own - form-control-sm, form-select-sm,
+   btn-outline-secondary - and this only lays them out. */
+.ge-details {
+  font-size: 0.8125rem;
+  /* The utility plugins' fields, folded under one toggle */
+}
+.ge-details .ge-details-general {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.ge-details .ge-field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+}
+.ge-details .ge-field-label,
+.ge-details .ge-utility-label {
+  color: var(--bs-secondary-color, #6c757d);
+  font-size: 0.75rem;
+}
+.ge-details .ge-presets:empty {
+  display: none;
+}
+.ge-details .ge-utilities {
+  margin-top: 10px;
+  /* The spacing plugin: a side and a value per group */
+}
+.ge-details .ge-utilities > .ge-utilities-toggle {
+  display: block;
+  color: var(--bs-body-color, #333);
+  font-weight: 500;
+  cursor: pointer;
+  text-decoration: none;
+}
+.ge-details .ge-utilities > .ge-utilities-toggle::before {
+  content: '\25B8';
+  display: inline-block;
+  width: 1em;
+}
+.ge-details .ge-utilities.ge-open > .ge-utilities-toggle::before {
+  content: '\25BE';
+}
+.ge-details .ge-utilities > .ge-utilities-body {
+  display: none;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 8px 10px;
+  margin-top: 6px;
+}
+.ge-details .ge-utilities.ge-open > .ge-utilities-body {
+  display: grid;
+}
+.ge-details .ge-utilities .ge-utility {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+}
+.ge-details .ge-utilities .ge-utility-note {
+  color: var(--bs-secondary-color, #666);
+  font-size: 0.6875rem;
+}
+.ge-details .ge-utilities .ge-spacing {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 8px 10px;
+  grid-column: 1 / -1;
+}
+.ge-details .ge-utilities .ge-spacing-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  /* The group names the field once */
+}
+.ge-details .ge-utilities .ge-spacing-group .ge-utility > .ge-utility-label {
+  display: none;
+}
+.ge-details .ge-utilities .ge-spacing-gutter {
+  grid-column: 1 / -1;
+  color: var(--bs-secondary-color, #666);
+  font-size: 0.6875rem;
+}
+/* In a drawer it is part of the drawer, compact */
+.ge-tools-drawer > .ge-details {
+  font-size: 11px;
+}
+.ge-tools-drawer > .ge-details .ge-utilities > .ge-utilities-body {
+  grid-template-columns: repeat(auto-fill, minmax(120px, 160px));
+}
+/* In one of Bootstrap's, outside the canvas */
+.ge-settings-panel .ge-details {
+  display: block;
+}
+.ge-settings-panel .ge-settings-title {
+  font-size: 1rem;
+  font-weight: 500;
+}
+.ge-settings-offcanvas {
+  /* Beside the canvas rather than over most of it */
+  --bs-offcanvas-width: 340px;
+  --bs-offcanvas-height: 60vh;
+}
+.ge-settings-popover {
+  /* Popper would position it; without Popper that is the editor's job */
+  position: absolute;
+  --bs-popover-max-width: 360px;
+  width: 360px;
+  max-width: calc(100vw - 16px);
+}
+.ge-settings-popover > .popover-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.ge-settings-popover > .popover-header > .btn-close {
+  font-size: 0.65rem;
+}
+.ge-settings-popover > .popover-body {
+  overflow-y: auto;
+}
+/* The node whose settings are open */
+.ge-canvas.ge-editing .ge-settings-target {
+  outline: 2px solid var(--bs-primary, #0d6efd);
+  outline-offset: 1px;
+}
 /* While editing */
 .ge-canvas.ge-editing {
   /* Content area */
@@ -175,6 +326,7 @@
   width: calc(100% + 2 * 5px);
   /* Its node may align text, and the drawer's tools would follow */
   text-align: left;
+  /* A node's settings, unfolded in its drawer: settings_panel 'inline' */
 }
 .ge-canvas.ge-editing .ge-tools-drawer.ge-picker-open {
   z-index: 200;
@@ -187,102 +339,23 @@
   background: rgba(255, 255, 255, 0.5);
   cursor: pointer;
 }
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details {
+.ge-canvas.ge-editing .ge-tools-drawer > .ge-details {
+  display: none;
   padding: 5px;
   border-top: 1px solid rgba(0, 0, 0, 0.05);
-  display: none;
-  /* The utility plugins' fields, folded under one toggle */
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .btn-group a {
-  color: #333;
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .btn-group a.active {
-  color: white;
+  text-align: left;
+  cursor: auto;
 }
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .btn-group a:hover {
-  text-decoration: none;
-  cursor: pointer;
+.ge-canvas.ge-editing .ge-tools-drawer > .ge-details .ge-details-general {
+  flex-direction: row;
+  align-items: flex-end;
 }
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details input.ge-id,
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details input.ge-classes {
-  border: 1px solid #7F7F7F;
-  border-radius: 4px;
-  font-size: 11px;
-  padding: 2px 5px;
-  margin-right: 5px;
-  width: 80px;
+.ge-canvas.ge-editing .ge-tools-drawer > .ge-details input.ge-id {
+  width: 90px;
 }
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details input.ge-classes {
+.ge-canvas.ge-editing .ge-tools-drawer > .ge-details input.ge-classes {
   width: 200px;
 }
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities {
-  margin-top: 5px;
-  font-size: 11px;
-  /* The spacing plugin: a side and a value per group */
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities > .ge-utilities-toggle {
-  color: #333;
-  cursor: pointer;
-  text-decoration: none;
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities > .ge-utilities-toggle::before {
-  content: '\25B8';
-  display: inline-block;
-  width: 1em;
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities.ge-open > .ge-utilities-toggle::before {
-  content: '\25BE';
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities > .ge-utilities-body {
-  display: none;
-  flex-wrap: wrap;
-  gap: 4px 10px;
-  margin-top: 4px;
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities.ge-open > .ge-utilities-body {
-  display: flex;
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-utility {
-  display: inline-flex;
-  flex-direction: column;
-  margin: 0;
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-utility select {
-  border: 1px solid #7F7F7F;
-  border-radius: 4px;
-  font-size: 11px;
-  padding: 1px 2px;
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-utility-note {
-  color: #666;
-  font-size: 10px;
-  max-width: 160px;
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-spacing {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px 10px;
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-spacing-group {
-  display: inline-flex;
-  flex-direction: column;
-  /* The group names the field once */
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-spacing-group > .ge-spacing-side {
-  border: 1px solid #7F7F7F;
-  border-radius: 4px;
-  font-size: 11px;
-  padding: 1px 2px;
-  margin-bottom: 2px;
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-spacing-group .ge-utility > .ge-utility-label {
-  display: none;
-}
-.ge-canvas.ge-editing .ge-tools-drawer .ge-details .ge-utilities .ge-spacing-gutter {
-  flex-basis: 100%;
-  color: #666;
-  font-size: 10px;
-}
 .ge-canvas.ge-editing .row {
   background-color: #efefef;
   border: 1px solid #999999;
@@ -488,6 +561,11 @@
            while it is wanted - the pointer over the text, the text being
            edited or holding the focus, its settings open, a drag under way -
            and takes no room either way. */
+  /* While the text is being edited it would sit over the end of its
+           first line, so it stands back - faint, still there to click - until
+           the pointer is on the drawer itself */
+  /* Except when something in it is in use: its settings, a choice it
+           offers, a drag */
   /* With its settings open it spans the text, so the panel has room */
 }
 .ge-canvas.ge-editing .ge-text-block > .ge-text-drawer {
@@ -525,6 +603,14 @@
   visibility: visible;
   transition-delay: 0s;
 }
+.ge-canvas.ge-editing .ge-text-block:has(> .ge-rte-active) > .ge-text-drawer:not(:hover) {
+  opacity: 0.35;
+}
+.ge-canvas.ge-editing .ge-text-block.ge-drag-chosen > .ge-text-drawer:not(:hover),
+.ge-canvas.ge-editing .ge-text-block:has(> .ge-text-drawer.ge-picker-open) > .ge-text-drawer:not(:hover),
+.ge-canvas.ge-editing .ge-text-block:has(> .ge-text-drawer > .ge-details[style*="block"]) > .ge-text-drawer:not(:hover) {
+  opacity: 1;
+}
 .ge-canvas.ge-editing .ge-text-block:has(> .ge-text-drawer > .ge-details[style*="block"]) > .ge-text-drawer {
   left: 0;
   border-radius: 0;
@@ -4452,18 +4538,11 @@
   color: #785f33;
 }
 /* The width field, in the section's settings panel beside id and classes */
-.ge-canvas.ge-editing .ge-details .ge-section-width {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
+.ge-details .ge-section-width {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
   margin: 0;
-  font-size: 11px;
-}
-.ge-canvas.ge-editing .ge-details .ge-section-width select {
-  border: 1px solid #7F7F7F;
-  border-radius: 4px;
-  font-size: 11px;
-  padding: 1px 2px;
 }
 .ge-canvas.ge-layout-xs > .container {
   max-width: 100%;