comfy_middle_seat 4.2.0 → 4.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 25bec879fab0f69cf22d27320c22441fd04a2dd10d489223b5f4dfe42d4647e4
-  data.tar.gz: 0ca964528011c2f24c8d804c965f08fb46e1dea98d7b9286557bf9f6cc0da27a
+  metadata.gz: 9433cede5d17f15d7c30a4a6bb30e9951ddb944129c317dc8b9a008f8e8d69f0
+  data.tar.gz: 6f30614dae87dfc9735ee436c640f5431ef66e58a084483549fb105ab43bffa2
 SHA512:
-  metadata.gz: ddc4be334bbdd4dcde5f7a703b2f22c8dd6645b79c36ea3ed1e13e77d4d6a077d0e8193c5de10b29520893d7f8463d019921a12553cd3dd5827b9d1d91741ba0
-  data.tar.gz: 4ea20039aeef0f0c580252eee42f09bf1804c7376f2944f5c5dba4927e86126bff5d7c681eda6f4de3e1e79ee33f23d16fa01345a06f90b4f6f178ab9aeea80b
+  metadata.gz: fba6ed160d2930727df376eb665f184df898ad3bf732b45a734abbee4f4edbe0f063f056db66c8f95adcba9111b9fd43a0640f8f5aebb1860c36b451ddcc09d5
+  data.tar.gz: f0801cb516d4d98bd8adc25c8e51bf73c2fc13b25f8930a6597c854abd216dd7a98ba5b08dd214cd45f85f73139844a7e5a6a3bb7771e8bd6c66954dd026c187

data/CHANGELOG.md

@@ -12,16 +12,27 @@ This changelog follows the project's lineage: **Comfortable Mexican Sofa → Com
 
 ## [Unreleased]
 
+### Added
+
+- Add CMS comment blocks and short notes to hide content without processing enclosed tags.
+- Expand CMS tags with editor shortcuts and searchable completion.
+- Open the shortcut selector with `;;` + Tab and filter with fuzzy search.
+
+## [v4.2.0] - 2026-10-13
+
 ### Changed
 
 - Keep Page editing actions together in a sticky top toolbar.
 - Save edits and publish or unpublish a page with one button.
-- Shorten publication notices and show save hints as button tooltips.
-- Auto-dismiss success and informational notices; keep warnings and errors visible.
+- Show unpublished status below the heading and save hints as button tooltips.
+- Simplify the save confirmation to “Page updated.”
+- Fade success and informational notices after five seconds; pause on hover or focus.
+- Keep warnings and errors visible and respect reduced-motion preferences.
 
 ### Fixed
 
 - Keep editing buttons aligned with the page heading above publication status.
+- Keep editing controls usable after Preview.
 - Restore dismissal of admin flash notices.
 - Keep Add Child Layout on one line when space allows.
 
@@ -251,7 +262,8 @@ First release of `comfortable_media_surfer`. This new gem is a revival of [Comfo
 
 - Rebranded **ComfortableMexicanSofa** as **ComfortableMediaSurfer** in order to publish new gem (database table names and schema have not changed).
 
-[Unreleased]: https://github.com/avonderluft/comfy-middle-seat/compare/v4.1.0...master
+[Unreleased]: https://github.com/avonderluft/comfy-middle-seat/compare/v4.2.0...master
+[v4.2.0]: https://github.com/avonderluft/comfy-middle-seat/compare/v4.1.0...v4.2.0
 [v4.1.0]: https://github.com/avonderluft/comfy-middle-seat/compare/v4.0.4...v4.1.0
 [v4.0.4]: https://github.com/avonderluft/comfy-middle-seat/compare/ea2bb99c0398e1f4d6e850a25e0c13afc577c3ad...v4.0.4
 [v4.0.3]: https://github.com/avonderluft/comfy-middle-seat/compare/v4.0.2...ea2bb99c0398e1f4d6e850a25e0c13afc577c3ad

data/README.md

@@ -114,6 +114,70 @@ A Site defines a hostname, path, and language. Layouts define page structure and
 
 When an editor creates a Page using this Layout, the admin automatically presents fields for `title` and `content`. Content tags can also provide Markdown, files, images, dates, numbers, checkboxes, snippets, partials, helpers, navigation, and other reusable content.
 
+### Editor shortcuts
+
+In HTML and Markdown code editors, type a shortcut and press **Tab** to insert a CMS tag. The parameter placeholder is selected so you can replace it immediately. For example, `;md` inserts `{{ cms:markdown content }}` with `content` selected.
+
+Type **`;;` then Tab**, or press **Ctrl+Space**, for a searchable shortcut list. Search by shortcut or tag name: `c` prioritizes comment, children, and other `c` shortcuts; `p fl` finds `page_file_link`. Exact and prefix matches appear before fuzzy matches.
+
+Use the arrow keys and **Enter** or **Tab** to choose. The tag replaces the entire trigger and search text. **Escape** closes the list without changing your text. Full names such as `;markdown` also work for direct expansion. One **Undo** reverses the expansion without removing what you typed.
+
+| Shortcut | Inserts | Selected placeholder |
+| --- | --- | --- |
+| `;md` | `markdown` | `content` |
+| `;tx` | `text` | `field` |
+| `;ta` | `textarea` | `content` |
+| `;wys` | `wysiwyg` | `content` |
+| `;da` | `date` | `field` |
+| `;dt` | `datetime` | `field` |
+| `;num` | `number` | `field` |
+| `;cb` | `checkbox` | `field` |
+| `;fi` | `file`, as a link | `attachment` |
+| `;fs` | `files`, as links | `attachments` |
+| `;im` | `image` | `image label` |
+| `;au` | `audio` | `path/to/audio` |
+| `;fl` | `file_link`, as a link | `file_id` |
+| `;pfl` | `page_file_link`, as a link | `attachment` |
+| `;sn` | `snippet` | `identifier` |
+| `;as`, `;css` | CSS `asset` tag | `layout_identifier` |
+| `;js` | JavaScript `asset` tag | `layout_identifier` |
+| `;hlp` | `helper` | `method_name` |
+| `;par` | `partial` | `path/to/partial` |
+| `;tpl` | `template` | `path/to/template` |
+| `;cr` | `breadcrumbs` | — |
+| `;ch` | `children` | — |
+| `;si` | `siblings` | — |
+| `;com` | Complete multiline comment block | `Comment here` |
+| `;nt` | `comment "Note"` (also `;note`) | `Note` |
+| `;ec` | `endcomment` | — |
+| `;end` | `end` | — |
+
+Placeholders are examples: replace them with your field names, identifiers, paths, or IDs. `;asset` inserts the CSS version; `;comment` inserts a full comment block.
+
+Shortcuts work at the start of a line, after whitespace, or after `>`, outside an existing CMS tag. Unrecognized shortcuts retain normal Tab behavior. CSS, JavaScript, ordinary text fields, and visual editors are unchanged. Saved content uses the standard `{{ cms:... }}` syntax.
+
+### CMS comments
+
+Use a quoted note for a short comment:
+
+```html
+{{cms:comment "Replace this banner in December"}}
+```
+
+Use a block to hide a section, including any CMS tags inside it:
+
+```html
+{{cms:comment}}
+Internal note: this section is not ready.
+{{cms:markdown old_content}}
+{{cms:snippet seasonal_banner}}
+{{cms:endcomment}}
+```
+
+Comments produce no rendered output and do not create editor fields. Unlike HTML comments, enclosed CMS tags are not processed. Source text and existing field values remain stored; removing a comment restores normal processing.
+
+Blocks may be nested and must end with `{{cms:endcomment}}`, not `{{cms:end}}`. Short notes accept single or double quotes, with backslash-escaped quotes. Unclosed blocks and malformed comment tags raise a clear syntax error. Comments work in layouts, snippets, and rendered fragment content, including Markdown. They are not a place for secrets: original source remains available to editors and may be exposed by APIs that include raw content.
+
 ### Publishing pages
 
 A page is publicly visible only when it and all its ancestors are published. Unpublishing a parent hides its branch without changing descendants’ individual publication settings. Republishing the parent restores only descendants whose full ancestor chain is published; drafts stay unpublished. Translations must also satisfy their own publication settings.

data/app/assets/javascripts/comfy/admin/cms/cms_tag_completions.js

@@ -0,0 +1,177 @@
+import CodeMirror from "codemirror";
+import "codemirror/addon/hint/show-hint";
+
+const tag = (shortcut, name, params = "", placeholder = null, aliases = []) => ({
+  shortcut,
+  name,
+  aliases: [shortcut, name, ...aliases],
+  text: `{{ cms:${name}${params ? ` ${params}` : ""} }}`,
+  placeholder,
+});
+
+const completions = [
+  tag("md", "markdown", "content", "content"),
+  tag("tx", "text", "field", "field"),
+  tag("ta", "textarea", "content", "content"),
+  tag("wys", "wysiwyg", "content", "content"),
+  tag("da", "date", "field", "field"),
+  tag("dt", "datetime", "field", "field"),
+  tag("num", "number", "field", "field"),
+  tag("cb", "checkbox", "field", "field"),
+  tag("fi", "file", "attachment, as: link", "attachment"),
+  tag("fs", "files", "attachments, as: link", "attachments"),
+  tag("im", "image", '"image label"', "image label"),
+  tag("au", "audio", '"path/to/audio"', "path/to/audio"),
+  tag("fl", "file_link", "file_id, as: link", "file_id"),
+  tag("pfl", "page_file_link", "attachment, as: link", "attachment"),
+  tag("sn", "snippet", "identifier", "identifier"),
+  tag("as", "asset", "layout_identifier, type: css, as: tag", "layout_identifier"),
+  tag("css", "asset", "layout_identifier, type: css, as: tag", "layout_identifier"),
+  tag("js", "asset", "layout_identifier, type: js, as: tag", "layout_identifier"),
+  tag("hlp", "helper", "method_name", "method_name"),
+  tag("par", "partial", '"path/to/partial"', "path/to/partial"),
+  tag("tpl", "template", '"path/to/template"', "path/to/template"),
+  tag("cr", "breadcrumbs"),
+  tag("ch", "children"),
+  tag("si", "siblings"),
+  {
+    ...tag("com", "comment", "", "Comment here"),
+    text: "{{ cms:comment }}\nComment here\n{{ cms:endcomment }}",
+  },
+  tag("nt", "comment", '"Note"', "Note", ["note"]),
+  tag("ec", "endcomment"),
+  tag("end", "end"),
+];
+
+const byAlias = new Map();
+for (const completion of completions) {
+  for (const alias of completion.aliases) {
+    // Shared full names use the primary entry: asset => ;as, comment => ;com.
+    if (!byAlias.has(alias)) byAlias.set(alias, completion);
+  }
+}
+
+const completionContext = (editor, requireSemicolon = false, start = null) => {
+  if (editor.getOption("readOnly") || editor.somethingSelected() ||
+      editor.listSelections().length !== 1) return null;
+
+  const to = editor.getCursor();
+  const line = editor.getLine(to.line);
+  if (/\w/.test(line.charAt(to.ch))) return null;
+
+  if (start && (start.line !== to.line || start.ch > to.ch)) return null;
+  // Keep the menu's original start so spaces in a fuzzy query are not lost.
+  const match = start
+    ? /^(;{0,2}[\w ]*)$/.exec(line.slice(start.ch, to.ch))
+    : /(?:^|[\s>])(;;[\w ]*|;?\w*)$/.exec(line.slice(0, to.ch));
+  if (!match || (requireSemicolon && !match[1].startsWith(";"))) return null;
+
+  const from = start || CodeMirror.Pos(to.line, to.ch - match[1].length);
+  const before = editor.getRange(CodeMirror.Pos(0, 0), from);
+  if (before.lastIndexOf("{{") > before.lastIndexOf("}}")) return null;
+
+  return {
+    from,
+    to,
+    selector: match[1].startsWith(";;"),
+    query: match[1].replace(/^;{1,2}/, "").toLowerCase().replace(/ /g, ""),
+  };
+};
+
+const insertCompletion = (editor, completion, from, to) => {
+  const indent = editor.getLine(from.line).match(/^\s*/)[0];
+  const text = completion.text.replace(/\n/g, `\n${indent}`);
+  const start = editor.indexFromPos(from);
+
+  editor.operation(() => {
+    // A distinct history origin keeps the expansion separate from preceding typing.
+    editor.replaceRange(text, from, to, "cms-completion");
+    if (completion.placeholder) {
+      const offset = text.indexOf(completion.placeholder);
+      editor.setSelection(
+        editor.posFromIndex(start + offset),
+        editor.posFromIndex(start + offset + completion.placeholder.length)
+      );
+    } else {
+      editor.setCursor(editor.posFromIndex(start + text.length));
+    }
+  });
+};
+
+const matchRank = (alias, query) => {
+  if (alias === query) return 0;
+  if (alias.startsWith(query)) return 1;
+  if (alias.includes(query)) return 2;
+
+  let position = 0;
+  for (const character of query) {
+    position = alias.indexOf(character, position);
+    if (position === -1) return Infinity;
+    position += 1;
+  }
+  return 3;
+};
+
+const displayNames = {
+  as: "asset (CSS)",
+  css: "asset (CSS)",
+  js: "asset (JavaScript)",
+  com: "comment (block)",
+  nt: "comment (note)",
+};
+
+const hints = (editor, start) => {
+  const context = completionContext(editor, false, start);
+  if (!context) return null;
+
+  return {
+    from: context.from,
+    to: context.to,
+    list: completions
+      .map((completion) => ({
+        completion,
+        rank: Math.min(...completion.aliases.map((alias) => matchRank(alias, context.query))),
+      }))
+      .filter(({ rank }) => Number.isFinite(rank))
+      .sort((a, b) => a.rank - b.rank)
+      .map(({ completion }) => ({
+        text: completion.text,
+        displayText: `;${completion.shortcut} ${displayNames[completion.shortcut] || completion.name}`,
+        hint(cm, data) {
+          insertCompletion(cm, completion, data.from, data.to);
+        },
+      })),
+  };
+};
+
+const showCompletions = (editor, context) => {
+  editor.showHint({
+    hint: (cm) => hints(cm, context.from),
+    completeSingle: false,
+    closeCharacters: /[\t\r\n()[\]{}:>,]/,
+  });
+};
+
+export const cmsTagCompletionKeys = (mode) => {
+  if (!["text/html", "htmlmixed", "text/x-markdown", "markdown"].includes(mode)) return {};
+
+  return {
+    Tab(editor) {
+      const context = completionContext(editor, true);
+      if (context?.selector) {
+        showCompletions(editor, context);
+        return;
+      }
+      const completion = context && byAlias.get(context.query);
+      if (!completion) return CodeMirror.Pass;
+
+      insertCompletion(editor, completion, context.from, context.to);
+    },
+    "Ctrl-Space"(editor) {
+      const context = completionContext(editor);
+      if (!context) return CodeMirror.Pass;
+
+      showCompletions(editor, context);
+    },
+  };
+};

data/app/assets/javascripts/comfy/admin/cms/codemirror.js

@@ -1,5 +1,6 @@
 import jQuery from "jquery";
 import CodeMirror from "codemirror";
+import { cmsTagCompletionKeys } from "./cms_tag_completions";
 import "codemirror/mode/markdown/markdown";
 import "codemirror/mode/htmlmixed/htmlmixed";
 
@@ -12,6 +13,7 @@ import "codemirror/mode/htmlmixed/htmlmixed";
       )) {
         const codemirror = CodeMirror.fromTextArea(textarea, {
           mode: textarea.dataset.cmsCmMode,
+          extraKeys: cmsTagCompletionKeys(textarea.dataset.cmsCmMode),
           tabSize: 2,
           lineWrapping: true,
           autoCloseTags: true,
@@ -52,6 +54,7 @@ import "codemirror/mode/htmlmixed/htmlmixed";
     },
     dispose() {
       for (const codemirror of codeMirrorInstances) {
+        codemirror.closeHint();
         codemirror.toTextArea();
       }
       codeMirrorInstances.length = 0;

data/app/assets/stylesheets/comfy/admin/cms/application.sass

@@ -2,6 +2,7 @@
 @import "comfy/vendor/bootstrap/bootstrap"
 
 @import "codemirror/lib/codemirror"
+@import "codemirror/addon/hint/show-hint"
 @import "comfy/vendor/fontawesome"
 @import "comfy/vendor/redactor"
 @import "flatpickr/dist/flatpickr.min"

data/app/assets/stylesheets/comfy/admin/cms/codemirror_overrides.sass

@@ -12,6 +12,17 @@ body#comfy
     .CodeMirror-scroll
       min-height: 160px
 
+  .CodeMirror-hints
+    z-index: 1060
+    max-width: calc(100vw - 1rem)
+    border-color: $gray-400
+    background-color: $white
+    .CodeMirror-hint
+      color: $body-color
+    .CodeMirror-hint-active
+      background-color: $primary
+      color: $white
+
   .CodeMirror-focused
     border-color: rgba(82, 168, 236, 0.8)
     outline: 0

data/lib/comfy_middle_seat/content/renderer.rb

@@ -22,6 +22,9 @@ class ComfyMiddleSeat::Content::Renderer
 
   # tags are in this format: {{ cms:tag_class params }}
   TAG_REGEX = %r{\{\{\s*?cms:(?<class>\w+)(?<params>.*?)\}\}}
+  COMMENT_START_REGEX = %r{\{\{\s*cms:(?<comment>comment|endcomment)(?=\s|\}\}|\z)}
+  TOKEN_REGEX = %r{#{COMMENT_START_REGEX}|#{TAG_REGEX}}
+  COMMENT_NOTE_REGEX = %r{(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|“(?:\\.|[^”\\])*”|‘(?:\\.|[^’\\])*’)\s*\}\}}m
 
   class << self
     # @return [Hash<String, Class<ComfyMiddleSeat::Content::Tag>>]
@@ -73,23 +76,35 @@ class ComfyMiddleSeat::Content::Renderer
 
   # Splitting text with tags into tokens we can process down the line
   # @return [Array<String, {Symbol => String}>]
-  def tokenize(string)
+  def tokenize(string, preserve_whitespace: false)
     tokens = []
     ss = StringScanner.new(string.to_s)
-    while (string = ss.scan_until(TAG_REGEX))
+    while (string = ss.scan_until(TOKEN_REGEX))
       text = string.sub(ss[0], '')
       tokens << text unless text.empty?
-      tokens << {
-        tag_class: ss[:class],
-        tag_params: ss[:params].strip,
-        source: ss[0]
-      }
+      case ss[:comment]
+      when 'comment'
+        skip_comment(ss)
+      when 'endcomment'
+        raise SyntaxError, 'Unexpected {{cms:endcomment}} without {{cms:comment}}'
+      else
+        tokens << {
+          tag_class: ss[:class],
+          tag_params: ss[:params].strip,
+          source: ss[0]
+        }
+      end
     end
     text = ss.rest
-    tokens << text if text.present?
+    tokens << text if text.present? || (preserve_whitespace && !text.empty?)
     tokens
   end
 
+  # Remove comments before formatters such as Markdown can transform their contents.
+  def strip_comments(string)
+    tokenize(string, preserve_whitespace: true).map { |token| token.is_a?(Hash) ? token[:source] : token }.join
+  end
+
   # Constructing node tree for content. It's a list of strings and tags with
   # their own `nodes` method that has array of strings and tags with their own
   # `nodes` method that... you get the idea.
@@ -143,4 +158,34 @@ class ComfyMiddleSeat::Content::Renderer
 
     nodes.flatten
   end
+
+private
+
+  # Comments are lexical: their contents must never become tag instances or form fields.
+  def skip_comment(scanner)
+    return unless comment_block?(scanner)
+
+    depth = 1
+    while scanner.scan_until(COMMENT_START_REGEX)
+      if scanner[:comment] == 'comment'
+        depth += 1 if comment_block?(scanner)
+      else
+        unless scanner.skip(%r{\s*\}\}})
+          raise SyntaxError, 'Invalid CMS comment closing tag: use {{cms:endcomment}} without parameters'
+        end
+
+        depth -= 1
+        return if depth.zero?
+      end
+    end
+    raise SyntaxError, 'Unclosed CMS comment: expected {{cms:endcomment}}'
+  end
+
+  def comment_block?(scanner)
+    scanner.skip(%r{\s*})
+    return true if scanner.skip(%r{\}\}})
+    return false if scanner.skip(COMMENT_NOTE_REGEX)
+
+    raise SyntaxError, 'Invalid CMS comment: use {{cms:comment "note"}} or {{cms:comment}}...{{cms:endcomment}}'
+  end
 end

data/lib/comfy_middle_seat/content/tags/markdown.rb

@@ -5,7 +5,10 @@
 #
 class ComfyMiddleSeat::Content::Tags::Markdown < ComfyMiddleSeat::Content::Tags::Fragment
   def render
-    renderable ? Kramdown::Document.new(content.to_s).to_html : ''
+    return '' unless renderable
+
+    source = ComfyMiddleSeat::Content::Renderer.new(context).strip_comments(content)
+    Kramdown::Document.new(source).to_html
   end
 
   def form_field(object_name, view, index)

data/lib/comfy_middle_seat/content/tags/snippet.rb

@@ -18,7 +18,8 @@ class ComfyMiddleSeat::Content::Tags::Snippet < ComfyMiddleSeat::Content::Tag
 
   def content
     if snippet.markdown
-      Kramdown::Document.new(snippet.content.to_s).to_html
+      source = ComfyMiddleSeat::Content::Renderer.new(context).strip_comments(snippet.content)
+      Kramdown::Document.new(source).to_html
     else
       snippet.content
     end

data/lib/comfy_middle_seat/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ComfyMiddleSeat
-  VERSION = '4.2.0'
+  VERSION = '4.3.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: comfy_middle_seat
 version: !ruby/object:Gem::Version
-  version: 4.2.0
+  version: 4.3.0
 platform: ruby
 authors:
 - Oleg Khabarov
@@ -230,6 +230,7 @@ files:
 - app/assets/javascripts/comfy/admin/cms/application.js
 - app/assets/javascripts/comfy/admin/cms/base.js
 - app/assets/javascripts/comfy/admin/cms/categories.js
+- app/assets/javascripts/comfy/admin/cms/cms_tag_completions.js
 - app/assets/javascripts/comfy/admin/cms/codemirror.js
 - app/assets/javascripts/comfy/admin/cms/custom.js
 - app/assets/javascripts/comfy/admin/cms/diff.js