@themarioga/grid-editor 6.0.0-beta.3 → 6.0.0-beta.5

package/BUILDING.md

@@ -23,7 +23,9 @@ the languages and the container plugins it actually wants. See
 
 The text editor plugins - tinyMCE, CKEditor and summernote - are built to
 `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.
+bundle. Up to 5.x the bundle carried a copy of each. Each one is built as
+`src/js/text/grideditor.text.js`, what every text editor shares, followed by
+the editor's own file: that shared file is never published on its own.
 
 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,79 @@ 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.5] - 2026-09-28
+### Added
+- `edit_source`: whether the toolbar has its source button, `true` by
+  default.
+- The codemirror plugin, `grideditor.codemirror.js`: the source view in
+  CodeMirror 5, highlighted and with line numbers, where it was a plain
+  textarea; `codemirror.config` for CodeMirror's own options. See
+  [example/codemirror.html](example/codemirror.html).
+- `onSourceOpen` and `onSourceClose` for a feature plugin: the source view
+  opening, with the canvas's html in the textarea, and closing.
+- The codemirror-inline plugin, `grideditor.codemirror-inline.js`: a </> tool
+  in the drawer of every row, column, text, element, section and container,
+  and of the host's plain content, that edits the block's html in place in
+  CodeMirror - the block itself and everything in it - and puts what was
+  written in its place on *Apply*, through the new `before-edit-html`
+  (cancelable) and `after-edit-html` events.
+- `plainTools` for a feature plugin: tools in the drawer of the host's plain
+  content, which has no `drawerTools`.
+
+### Fixed
+- `destroy` with the source view open left the canvas hidden and the html
+  being written unused; it closes the source first.
+
+
+## [6.0.0-beta.4] - 2026-09-28
+### Added
+- `iconClass` for a container plugin and a text editor plugin: their toolbar
+  button shows the icon alone, with the label as its title, where it showed a
+  plus and the label.
+- **Plain content.** What the editor wraps that is not the grid's - loose
+  markup in a column, a page with no row - is the host's plain content: a
+  content area with no text type, `<div class="ge-content">`. A block to move
+  and delete, with no gear, edited in the source, and never made by the
+  editor's tools; `kind: 'plain'` in the events. With a text editor loaded a
+  click makes it a text of that editor, or of the one chosen when several are
+  offered, through the new `before-convert` (cancelable) and `after-convert`
+  events. See [docs/plugins.md](docs/plugins.md#text).
+- `textTypes` for a feature plugin: the text types it edits, which is how the
+  core knows whose a text is and what plain content can be made.
+  [example/custom_editor.html](example/custom_editor.html) is a text editor
+  written that way, with none of the shipped ones.
+- `onBeforeDeinit` for a plugin, run by every `deinit` before the drawers come
+  off; `inColumn`, `label` and `className` for a feature plugin's toolbar
+  item; `ge.attachPicker`, `ge.openPicker` and `ge.closePicker` in the handle.
+
+### Changed
+- **Text is out of the core.** The text block's drawer, the *Text* buttons,
+  the *Add text* tool, `createText`, opening and closing an editor and the
+  `content_types`, `text_tools` and `text_classes` settings are the text
+  editor plugins': each of `grideditor.tinymce.js`, `grideditor.ckeditor.js`
+  and `grideditor.summernote.js` carries them, installed once however many a
+  page loads. Without one, `createText` warns and returns null.
+- **New columns start empty**, whatever makes them: the add column tool, the
+  row buttons, `createRow`, `createColumn`, a container's or a pane's region.
+  `createColumn(size, { content })` holds its content as a text of the first
+  editor offered, or as plain content with none.
+- Loose content was wrapped as a text of the first `content_types`; it is
+  plain content now, and a click makes it a text.
+- `content_types` defaults to every text editor loaded, in the order the page
+  loaded them, where it was `['tinymce']`.
+- A text whose type no plugin declares has a drawer of move, the missing
+  editor's notice and delete, with no gear, whatever else is loaded.
+- The *Text* buttons stand after the containers' in the toolbar.
+- A feature plugin's toolbar item with an `iconClass` shows the icon alone,
+  with its label as the title, wherever it is in the toolbar. It showed the
+  icon and the label unless it had `align: 'end'`.
+
+### Removed
+- `$.fn.gridEditor.RTEs`, 5.x's registry of text editors: what is registered
+  there is ignored, with a warning. `$.fn.gridEditor.texts` is no longer a
+  documented contract: it is the shipped editors' own registry.
+
+
 ## [6.0.0-beta.3] - 2026-09-23
 ### Changed
 - Which editor edits a text is shown first in its settings, as a read-only
@@ -120,7 +193,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   `$.fn.gridEditor.texts`, with a contract a host can write its own editor to:
   `start`, `stop`, `initialContent`, `available`, and `ge.textReady` in the
   handle. They are chosen by `content_types`, not by the `plugins` setting.
-  See [docs/plugins.md](docs/plugins.md#text-editor-plugins).
+  See [docs/plugins.md](docs/plugins.md#text).
 
 ### Deprecated
 - The copies of the three text editors in the main bundle. A page that edits

package/README.md

@@ -120,10 +120,10 @@ $('#myGrid').gridEditor('method', argument);
 | `getView` | — | `String` | The view the editor is in |
 | `setLocale` | `code` | `this` | Switch language and re-render the controls |
 | `createRow` | `layout?`, `options?` | `jQuery` | A row, optionally with columns: `createRow([8, 4])`, `createRow(['auto', 'equal'])`, `createRow({ row_cols: { xs: 1, md: 3 }, columns: 6 })` |
-| `createColumn` | `size`, `options?` | `jQuery` | A column: units, `'equal'` or `'auto'`; no size into a row with row-cols takes the row's share. `options`: `offset`, `content` |
+| `createColumn` | `size`, `options?` | `jQuery` | An empty column: units, `'equal'` or `'auto'`; no size into a row with row-cols takes the row's share. `options`: `offset`, `content` - a text of the first editor offered, or plain content with none |
 | `createSection` | `options?` | `jQuery` | A section, with the sections plugin. `options`: `width` (`'fixed'`, `'fluid'` or a breakpoint), `rows` (layouts), and a placement |
 | `createElement` | `content`, `options?` | `jQuery` | Host markup wrapped as an element. `options`: `type`, `label` |
-| `createText` | `type?`, `options?` | `jQuery` | A content area for a text editor, the first one offered by default. `options`: `content`, and a placement. `null` if the editor is not loaded |
+| `createText` | `type?`, `options?` | `jQuery` | A content area for a text editor, the first one offered by default. `options`: `content`, and a placement. `null` if the editor is not loaded, or no text editor is |
 | `createContainer` | `type`, `options?` | `jQuery` | `'tabs'`, `'accordion'` or `'popup'` |
 | `addTab` | `container`, `options?` | `jQuery` | Appends a tab, returns its pane |
 | `addAccordionItem` | `container`, `options?` | `jQuery` | Appends an item, returns its body |
@@ -444,6 +444,16 @@ $('#myGrid').gridEditor('createText', { content: '<p>Hello</p>', appendTo: '#myC
 A text whose editor's plugin is not loaded is still a block, to move and
 delete, and its drawer says it cannot be edited.
 
+What the editor finds in a column that is not the grid's - loose markup, or a
+page that had no row at all - is the host's *plain content*: a content area
+with no text editor's type on it. It moves and deletes like any block, is
+edited in the source (the toolbar's code button, or the codemirror-inline
+plugin's </> tool), and nothing in the editor makes a new one. With a text editor loaded, a click makes it a text of that
+editor - of the one chosen, when there are several - through the
+`before-convert` and `after-convert` events. New columns start empty, and
+`createColumn(size, { content })` holds its content as a text of the first
+editor offered, or as plain content with none.
+
 __`text_tools`:__ Extra tools on every text drawer, same shape as `row_tools`.
 
 __`text_classes`:__ Preset class toggles on a text's settings panel, as `row_classes`.
@@ -698,6 +708,61 @@ $('form.myForm').on('submit', function() {
 });
 ```
 
+### Source view
+
+The toolbar's <i>code</i> button turns the canvas into its html, to edit by
+hand, and back again with what was written.
+
+__`edit_source`:__ Whether the toolbar has that button. Default value: `true`.
+
+```javascript
+$('#myGrid').gridEditor({
+    edit_source: false,
+});
+```
+
+The html is edited in a plain textarea. With the codemirror plugin it is
+edited in [CodeMirror 5](https://codemirror.net/5/), highlighted and with line
+numbers - load CodeMirror, its `htmlmixed` mode and the modes it is made of,
+then the plugin ([example](example/codemirror.html)):
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.65.21/lib/codemirror.min.css">
+<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.21/lib/codemirror.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.21/mode/xml/xml.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.21/mode/javascript/javascript.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.21/mode/css/css.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.21/mode/htmlmixed/htmlmixed.min.js"></script>
+<script src="grid-editor/dist/plugins/grideditor.codemirror.min.js"></script>
+```
+
+__`codemirror.config`:__ Anything `CodeMirror.fromTextArea` takes, over the
+plugin's defaults: `mode: 'htmlmixed'`, `lineNumbers`, `lineWrapping`, a tab
+of 2.
+
+```javascript
+$('#myGrid').gridEditor({
+    codemirror: { config: { theme: 'monokai' } },
+});
+```
+
+CodeMirror 5 rather than 6: 6 comes as ES modules, for a bundler, where 5
+loads from a script tag like the rest of the page. Without CodeMirror loaded
+the source view is the textarea, and the console says why.
+
+The codemirror-inline plugin edits one block's html instead of the whole
+canvas's: a </> tool in the drawer of every row, column, text, element,
+section and container, and of the host's plain content, opens the block's
+html - the block itself and everything in it - in CodeMirror where the block
+was, and *Apply* puts what was written in its place, through the
+`before-edit-html` and `after-edit-html` events. A tab or an accordion item
+has no tool of its own: its html is its container's. It uses CodeMirror the
+same way, `codemirror.config` included, and a textarea without it.
+
+```html
+<script src="grid-editor/dist/plugins/grideditor.codemirror-inline.min.js"></script>
+```
+
 ### Rich text editor options
 
 Grid editor comes with support for the following rich text editors (RTEs), each a plugin of its own to load after the editor:
@@ -708,10 +773,11 @@ Grid editor comes with support for the following rich text editors (RTEs), each
 A text editor is chosen by `content_types`, not by the `plugins` setting: a page
 that names its containers in `plugins` still has its editor. Summernote 0.9.1
 calls `$.now()`, which jQuery 4 removed; its plugin gives it back, and only if
-it is missing. [docs/plugins.md](docs/plugins.md#text-editor-plugins) says how
-to write a plugin for another editor.
+it is missing. Another editor is a plugin of your own:
+[docs/plugins.md](docs/plugins.md#text) says how, and
+[example/custom_editor.html](example/custom_editor.html) is one.
 
-__`content_types`:__ Specify the RTE to use. Valid values: `['tinymce']`, `['summernote']`, `['ckeditor']`, or the name of a text editor plugin of your own. Default value: `['tinymce']`.
+__`content_types`:__ Specify the RTEs to offer, in order. Valid values: any of `'tinymce'`, `'summernote'`, `'ckeditor'` whose plugin is loaded. Default value: every text editor loaded, in the order the page loaded them.
 
 ```javascript
 $('#myGrid').gridEditor({

package/UPGRADING.md

@@ -1,9 +1,11 @@
 Upgrading from grid-editor `5.*` to `6.*`
 =========================================
 
-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.
+Three changes make it a major: **elements are blocks of the column**, no longer
+part of a text, **the text editors are not in the main bundle** - text itself
+is theirs, not the core's - and **what is not the grid's is the host's plain
+content**. 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:
@@ -62,10 +64,37 @@ part of a text, and **the text editors are not in the main bundle**. Markup
   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, 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.
+* __Loose content is plain content, not a text.__ Up to 5.x the markup the
+  editor found loose in a column - or a whole page with no row - was wrapped
+  as a text of the first `content_types`, `<div class="ge-content"
+  data-ge-content-type="tinymce">`. Now it is wrapped with no type, as the
+  host's plain content: a block to move and delete, edited in the source, and
+  a click with a text editor loaded makes it a text, through
+  `before-convert` and `after-convert`. Markup 5.x saved, with its content
+  areas typed, loads as texts, as before. What to do: nothing, unless you
+  read the saved markup expecting every content area to carry a type.
+
+* __New columns are empty.__ A column the add column tool, a row button,
+  `createRow` or `createColumn` makes - and a new container's or pane's
+  region - has no content area in it. Add a text with the column's *Add text*
+  tool, the toolbar's *Text* button or `createText`. `createColumn(size, {
+  content })` still holds its content: as a text of the first editor
+  offered, or as plain content with none.
+
+* __`content_types` defaults to every text editor loaded__, in the order the
+  page loaded them, where it was `['tinymce']`. A page that loads one editor
+  needs no `content_types`; one that loads several and wants one names it.
+
+* __`text_tools`, `text_classes` and `createText` are the text editors'.__
+  They work as before with any of the shipped editors loaded; with none,
+  `createText` warns and returns null.
+
+* __An integration of your own under `$.fn.gridEditor.RTEs`__ is ignored,
+  with a warning, and so is one under `$.fn.gridEditor.texts` on a page
+  that loads none of the shipped editors: `texts` is their own registry. An
+  editor of your own is a feature plugin that declares its type with
+  `textTypes`; [docs/plugins.md](docs/plugins.md#text) has the contract, and
+  [example/custom_editor.html](example/custom_editor.html) is one in full.
 
 
 Upgrading from grid-editor `4.*` to `5.*`

package/dist/grideditor.css

@@ -65,6 +65,52 @@
   width: 100%;
   display: none;
 }
+/* A block's html edited in place, with the codemirror-inline plugin: the
+   block is hidden behind its editor while it is open */
+.ge-canvas.ge-editing .ge-code-hidden {
+  display: none !important;
+}
+.ge-canvas.ge-editing .ge-tools-drawer.ge-code-inline {
+  position: relative;
+  width: 100%;
+  margin: 0 0 5px;
+  padding: 4px;
+  background: #f8f9fa;
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  cursor: auto;
+  -webkit-user-select: text;
+  user-select: text;
+}
+.ge-canvas.ge-editing .ge-tools-drawer.ge-code-inline > .ge-code-inline-source {
+  width: 100%;
+  min-height: 120px;
+  font-family: monospace;
+  font-size: 13px;
+}
+.ge-canvas.ge-editing .ge-tools-drawer.ge-code-inline .CodeMirror {
+  height: auto;
+  border: 1px solid #ced4da;
+  font-size: 13px;
+}
+.ge-canvas.ge-editing .ge-tools-drawer.ge-code-inline .CodeMirror-scroll {
+  min-height: 120px;
+  max-height: 60vh;
+}
+.ge-canvas.ge-editing .ge-tools-drawer.ge-code-inline > .ge-code-inline-bar {
+  display: flex;
+  gap: 4px;
+  justify-content: flex-end;
+  padding-top: 4px;
+}
+/* The source view in a code editor, with the codemirror plugin: where the
+   textarea was, and as wide */
+.ge-code-editor {
+  width: 100%;
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  font-size: 13px;
+}
 /* Not editing */
 .ge-canvas .ge-tools-drawer {
   display: none;
@@ -295,6 +341,8 @@
        rather than solid, so a page full of them still reads as content */
   /* A text block: a content area and, beside it rather than inside,
        where the text editor would take it, its drawer */
+  /* The host's plain content: a block to move and delete, edited in the
+       source - greyer than a text, which an editor edits in place */
   /* A column with nothing in it but its drawer still has room to drop a
        block into */
   /* Sorting. The dragged node stays in the list and shows where it would
@@ -567,6 +615,8 @@
   /* 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 */
+  /* The choice of editor a click on plain content offers hangs off
+           the drawer, which sits at the right: so it opens leftwards */
 }
 .ge-canvas.ge-editing .ge-text-block > .ge-text-drawer {
   position: absolute;
@@ -615,6 +665,16 @@
   left: 0;
   border-radius: 0;
 }
+.ge-canvas.ge-editing .ge-text-block > .ge-text-drawer > .ge-convert-picker {
+  left: auto;
+  right: 0;
+}
+.ge-canvas.ge-editing .ge-text-block.ge-plain-block {
+  outline-color: rgba(0, 0, 0, 0.25);
+}
+.ge-canvas.ge-editing .ge-text-block.ge-plain-block > .ge-text-drawer {
+  background: #e9ecef;
+}
 .ge-canvas.ge-editing .column:not(:has( > :not(.ge-tools-drawer, .ge-resize-handle)))::after {
   content: '';
   display: block;