RubyGems - collavre - Versions diffs - 0.21.0 → 0.23.0 - Mend

collavre 0.21.0 → 0.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (200) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f24eeb18d0272f998210dbfd04bd15a5ac4bf9fab0a61c400ac64298b17cdf3c
-  data.tar.gz: dd4c2d977abfb6831b971f6c9ed8a7343329a48af8cff04674502a2840bd0f37
+  metadata.gz: 6f4893a3f3e45871df84841cc2d16c81e9f0f3805f8cbfe5f40b4dac85ca9e89
+  data.tar.gz: 8032ab111bea535825ddbcfa1b0be5b7469e586e05b00ad9117e3f69b373b990
 SHA512:
-  metadata.gz: 55aa0ac2253e57cf0b4ac5d3de3a8028aa254b1b9d0b02fce88f4ac5cc3ab532588e574aebf1392bc40328f24061b1e75c74a3576f48ebc5b24d0aa5d3beebef
-  data.tar.gz: 97d1c389fdd7d00635a4ce87c5b3c9b4f0238f4c69f94e794dcbf42284da51994d35d9821da7f04f91d58857cef4ee697a128df54e914743be31d15a70d52c9b
+  metadata.gz: 4b1585a65d7385ebfca1c6b9c5ca4f76f6c5c37454b5a8b9ce550b4d11a1a10445a314202b01b958928d2093bf012d057c549d013c7ea4c94699dbe2cba494df
+  data.tar.gz: fce204b25581ce93e72abf20dd076a8af40624d9fd49d3728d4e6c9932e5e7abd8cc345d0d87e3ffe2b35053ebf05736b93db93ddc06f4c2b6c7f909fe0c86d0

data/README.md CHANGED Viewed

@@ -90,6 +90,7 @@ Add to your application layout:
 <%= stylesheet_link_tag "collavre/actiontext" %>
 <%= stylesheet_link_tag "collavre/activity_logs" %>
 <%= stylesheet_link_tag "collavre/comments_popup" %>
+<%= stylesheet_link_tag "collavre/tables" %>
 <%= stylesheet_link_tag "collavre/dark_mode" %>
 <%= stylesheet_link_tag "collavre/mention_menu" %>
 <%= stylesheet_link_tag "collavre/popup" %>

data/app/assets/stylesheets/collavre/actiontext.css CHANGED Viewed

@@ -273,30 +273,157 @@
   top: 0.6rem;
 }
-.lexical-paragraph {
+/* Tables: editor theme classes plus the matching display tags, mirroring the
+   pattern used for the other .lexical-* rules below. */
+.lexical-table-wrapper {
+  overflow-x: auto;
+  margin: 0.75rem 0;
+}
+.lexical-table,
+.creative-content table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
+  margin: 0.75rem 0;
+}
+.lexical-table-cell,
+.creative-content th,
+.creative-content td {
+  border: 1px solid var(--border-color);
+  padding: 0.35rem 0.5rem;
+  min-width: 4.5rem;
+  vertical-align: top;
+  text-align: start;
+  position: relative;
+  word-break: break-word;
+}
+.lexical-table-cell-header,
+.creative-content th {
+  background-color: var(--surface-hover);
+  font-weight: var(--weight-6);
+}
+.lexical-table-selected {
+  outline: 2px solid var(--color-link);
+  outline-offset: -1px;
+}
+.lexical-table-selection *::selection {
+  background-color: transparent;
+}
+/* Cell-boundary add-row / add-column buttons (portaled to <body>). */
+.lexical-table-add-rows,
+.lexical-table-add-columns {
+  position: absolute;
+  z-index: 5;
+  border: 1px solid var(--border-color);
+  background-color: var(--surface-section);
+  cursor: pointer;
+  padding: 0;
+}
+.lexical-table-add-rows::after,
+.lexical-table-add-columns::after {
+  content: "+";
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--text-muted);
+  font-size: 0.9rem;
+  line-height: 1;
+}
+.lexical-table-add-rows:hover,
+.lexical-table-add-columns:hover {
+  background-color: var(--surface-hover);
+}
+/* Cell-gutter delete-row / delete-column buttons. Shown on cell hover in the
+   hovered row's left gutter / column's top gutter (mousemove-driven, same proven
+   mechanism as the "+" buttons — no focus/selection dependency). */
+.lexical-table-delete-rows,
+.lexical-table-delete-columns {
+  position: absolute;
+  z-index: 5;
+  border: 1px solid var(--border-color);
+  background-color: var(--surface-section);
+  cursor: pointer;
+  padding: 0;
+}
+.lexical-table-delete-rows::after,
+.lexical-table-delete-columns::after {
+  content: "×";
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--text-muted);
+  font-size: 0.9rem;
+  line-height: 1;
+}
+.lexical-table-delete-rows:hover,
+.lexical-table-delete-columns:hover {
+  background-color: var(--danger-surface, var(--surface-hover));
+  color: var(--danger-text, var(--text-primary));
+}
+/* The .lexical-* classes are the editor theme (contenteditable). Markdown is now
+   the canonical persisted/displayed form, so .creative-content renders plain
+   semantic tags without those classes — mirror each rule onto the matching
+   element so the display view matches the editor. .lexical-* kept for the
+   editor and for legacy class-bearing HTML saved before the markdown switch.
+   .creative-title-content is the title (h1) display of the same description HTML,
+   so it needs the identical mirror — otherwise a markdown title renders a plain
+   <p> with the browser-default margin and the single-line title style breaks. */
+.lexical-paragraph,
+.creative-content p,
+.creative-title-content p {
   margin: 0 0 0 0;
 }
 .lexical-heading-h1,
 .lexical-heading-h2,
-.lexical-heading-h3 {
+.lexical-heading-h3,
+.creative-content h1,
+.creative-content h2,
+.creative-content h3,
+.creative-title-content h1,
+.creative-title-content h2,
+.creative-title-content h3 {
   font-weight: var(--weight-6);
   margin: 0 0 var(--space-2) 0;
 }
-.lexical-heading-h1 {
+.lexical-heading-h1,
+.creative-content h1,
+.creative-title-content h1 {
   font-size: 1.35rem;
 }
-.lexical-heading-h2 {
+.lexical-heading-h2,
+.creative-content h2,
+.creative-title-content h2 {
   font-size: 1.2rem;
 }
-.lexical-heading-h3 {
+.lexical-heading-h3,
+.creative-content h3,
+.creative-title-content h3 {
   font-size: 1.1rem;
 }
-.lexical-quote {
+.lexical-quote,
+.creative-content blockquote,
+.creative-title-content blockquote {
   border-left: var(--space-1) solid var(--border-color);
   color: var(--text-muted);
   margin: 0 0 0.75rem 0;
@@ -304,34 +431,65 @@
 }
 .lexical-list-ul,
-.lexical-list-ol {
+.lexical-list-ol,
+.creative-content ul,
+.creative-content ol,
+.creative-title-content ul,
+.creative-title-content ol {
   margin: 0 0 0.75rem 1.25rem;
   padding: 0;
 }
-.lexical-list-item {
+.lexical-list-item,
+.creative-content li,
+.creative-title-content li {
   margin: 0.35rem 0;
 }
-.lexical-link {
+/* The wrapper <li> Lexical emits for a nested list holds no text of its own;
+   hiding its marker prevents a stray bullet from appearing above the sub-list. */
+.lexical-nested-list-item {
+  list-style-type: none;
+}
+/* Content links only — the clickable creative-row anchor is an ancestor of
+   .creative-content, not a descendant, so this never restyles the row wrapper.
+   a[download] is excluded: attachment chips carry their own .lexical-attachment style. */
+.lexical-link,
+.creative-content a:not([download]),
+.creative-title-content a:not([download]) {
   color: var(--color-link);
   text-decoration: underline;
   text-decoration-thickness: 1px;
 }
-.lexical-text-bold {
+.lexical-text-bold,
+.creative-content strong,
+.creative-content b,
+.creative-title-content strong,
+.creative-title-content b {
   font-weight: var(--weight-6);
 }
-.lexical-text-italic {
+.lexical-text-italic,
+.creative-content em,
+.creative-content i,
+.creative-title-content em,
+.creative-title-content i {
   font-style: italic;
 }
-.lexical-text-underline {
+.lexical-text-underline,
+.creative-content u,
+.creative-title-content u {
   text-decoration: underline;
 }
-.lexical-text-strike {
+.lexical-text-strike,
+.creative-content s,
+.creative-content del,
+.creative-title-content s,
+.creative-title-content del {
   text-decoration: line-through;
 }
@@ -343,18 +501,23 @@
   padding: 0.1em 0.3em;
 }
+/* Match the rendered/preview/comment code-block container in code_highlight.css
+ * (.creative-content pre et al.) exactly — same font, size, line-height, padding,
+ * border — so a code block looks identical in the editor and every rendered surface.
+ * Token colors are already shared via the global `.lexical-token-*` rules; this
+ * aligns the box so edit mode and view mode no longer diverge in font/size. */
 .lexical-code-block {
   display: block;
   background: var(--color-code-bg);
-  border: 1px solid var(--border-color);
+  border: var(--border-1) solid var(--border-color);
   border-radius: var(--radius-2);
   color: var(--color-code-text);
-  font-family: ui-monospace, SFMono-Regular, SFMono, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  font-size: 0.9em;
-  line-height: 1.5;
-  margin: 0 0 0.75rem 0;
+  font-family: var(--font-mono);
+  font-size: var(--text-0);
+  line-height: var(--leading-3);
+  margin: var(--space-2) 0;
   overflow-x: auto;
-  padding: 0.75rem;
+  padding: var(--space-2) var(--space-3);
   white-space: pre;
 }
@@ -368,101 +531,99 @@
   white-space: inherit;
 }
-/* stylelint-disable color-no-hex -- syntax highlight theme colors are intentionally hardcoded */
-:root {
-  --lexical-token-comment: #6a737d;
-  --lexical-token-punctuation: #393a34;
-  --lexical-token-property: #b31d28;
-  --lexical-token-string: #1a7f37;
-  --lexical-token-operator: #9a6e3a;
-  --lexical-token-keyword: #0550ae;
-  --lexical-token-function: #bc4c00;
-  --lexical-token-regex: #1a7f37;
-}
-body.dark-mode {
-  --lexical-token-comment: #8b949e;
-  --lexical-token-punctuation: #c9d1d9;
-  --lexical-token-property: #ff7b72;
-  --lexical-token-string: #7ee787;
-  --lexical-token-operator: #ffa657;
-  --lexical-token-keyword: #79c0ff;
-  --lexical-token-function: #d2a8ff;
-  --lexical-token-regex: #7ee787;
-}
-@media (prefers-color-scheme: dark) {
-  body:not(.light-mode):not(.dark-mode) {
-    --lexical-token-comment: #8b949e;
-    --lexical-token-punctuation: #c9d1d9;
-    --lexical-token-property: #ff7b72;
-    --lexical-token-string: #7ee787;
-    --lexical-token-operator: #ffa657;
-    --lexical-token-keyword: #79c0ff;
-    --lexical-token-function: #d2a8ff;
-    --lexical-token-regex: #7ee787;
-  }
-}
-/* stylelint-enable color-no-hex */
+/*
+ * Code block syntax highlighting inside the Lexical editor.
+ *
+ * The editor tokenizes code with Prism (@lexical/code) and tags each token
+ * with a `.lexical-token-*` class, while the persisted/rendered creative is
+ * highlighted with highlight.js (`.hljs-*`, see code_highlight.css). To keep
+ * the editing view identical to the rendered view, both surfaces share the
+ * single GitHub-style palette defined as `--syntax-*` in code_highlight.css
+ * (loaded alongside this sheet via collavre_stylesheets). Each Prism token
+ * below maps to the same `--syntax-*` color its highlight.js equivalent uses,
+ * so light/dark/auto themes stay in sync with one source of truth — no
+ * duplicate `--lexical-token-*` variables to drift.
+ */
 .lexical-token-comment,
 .lexical-token-prolog,
 .lexical-token-doctype,
 .lexical-token-cdata {
-  color: var(--lexical-token-comment);
+  color: var(--syntax-comment);
+  font-style: italic;
 }
-.lexical-token-punctuation {
-  color: var(--lexical-token-punctuation);
+.lexical-token-keyword,
+.lexical-token-atrule,
+.lexical-token-namespace {
+  color: var(--syntax-keyword);
 }
-.lexical-token-property,
-.lexical-token-tag,
-.lexical-token-constant,
-.lexical-token-symbol,
-.lexical-token-deleted,
+.lexical-token-string,
+.lexical-token-char,
+.lexical-token-url {
+  color: var(--syntax-string);
+}
+.lexical-token-number,
 .lexical-token-boolean,
-.lexical-token-number {
-  color: var(--lexical-token-property);
+.lexical-token-constant,
+.lexical-token-symbol {
+  color: var(--syntax-number);
+}
+.lexical-token-builtin {
+  color: var(--syntax-builtin);
+}
+.lexical-token-function,
+.lexical-token-class,
+.lexical-token-classname {
+  color: var(--syntax-title);
 }
-.lexical-token-selector,
 .lexical-token-attr,
-.lexical-token-string,
-.lexical-token-char,
-.lexical-token-builtin,
-.lexical-token-inserted {
-  color: var(--lexical-token-string);
+.lexical-token-property {
+  color: var(--syntax-attr);
 }
-.lexical-token-operator,
-.lexical-token-entity,
-.lexical-token-url,
 .lexical-token-variable {
-  color: var(--lexical-token-operator);
+  color: var(--syntax-variable);
 }
-.lexical-token-atrule,
-.lexical-token-keyword,
-.lexical-token-class,
-.lexical-token-classname,
-.lexical-token-namespace {
-  color: var(--lexical-token-keyword);
+.lexical-token-regex {
+  color: var(--syntax-regexp);
 }
-.lexical-token-function,
+.lexical-token-tag {
+  color: var(--syntax-tag);
+}
+.lexical-token-selector {
+  color: var(--syntax-selector);
+}
+/* highlight.js renders `.hljs-meta` (CSS !important) with color only, no
+   bold — match that so the editor doesn't diverge from the rendered view. */
 .lexical-token-important {
-  color: var(--lexical-token-function);
+  color: var(--syntax-meta);
 }
-.lexical-token-regex {
-  color: var(--lexical-token-regex);
+/* highlight.js leaves operators and punctuation at the default code color;
+   match that here instead of the old custom operator hue. */
+.lexical-token-punctuation,
+.lexical-token-operator,
+.lexical-token-entity {
+  color: var(--color-code-text);
 }
-.lexical-token-tag,
-.lexical-token-selector,
-.lexical-token-keyword {
-  font-weight: var(--weight-6);
+.lexical-token-deleted {
+  color: var(--syntax-deletion-text);
+  background: var(--syntax-deletion-bg);
+}
+.lexical-token-inserted {
+  color: var(--syntax-addition-text);
+  background: var(--syntax-addition-bg);
 }
 .lexical-attachment {

data/app/assets/stylesheets/collavre/code_highlight.css CHANGED Viewed

@@ -2,11 +2,14 @@
  * Code Syntax Highlighting Theme
  *
  * Uses Collavre design tokens (--color-code-bg, --color-code-text, --font-mono).
- * Syntax color tokens defined as CSS variables — overridden per theme context.
- * Based on GitHub-style highlighting.
+ * Defines the GitHub-style `--syntax-*` color variables (overridden per theme
+ * context) plus the code-block container and inline-code styling. The per-token
+ * color rules live in actiontext.css keyed on the `.lexical-token-*` classes that
+ * every surface now emits (editor + rendered creative + preview + comments all
+ * tokenize with the same Prism), and consume these `--syntax-*` variables.
  *
- * Scoped to the markdown rendering surfaces so they share container,
- * inline-code, and syntax-token styles:
+ * Scoped to the markdown rendering surfaces so they share container and
+ * inline-code styles:
  *   .comment-content        — chat / comments
  *   .markdown-preview       — creative inline editor live preview
  *   .creative-content       — persisted creative description in the tree view
@@ -144,200 +147,3 @@ body.dark-mode {
   font-family: var(--font-mono);
   font-size: 0.9em;
 }
-/* ============================================================================
- * SYNTAX HIGHLIGHTING RULES (token-based, theme-agnostic)
- * ============================================================================ */
-.comment-content .hljs-comment,
-.comment-content .hljs-quote,
-.markdown-preview .hljs-comment,
-.markdown-preview .hljs-quote,
-.creative-content .hljs-comment,
-.creative-content .hljs-quote,
-.creative-title-content .hljs-comment,
-.creative-title-content .hljs-quote {
-  color: var(--syntax-comment);
-  font-style: italic;
-}
-.comment-content .hljs-keyword,
-.comment-content .hljs-selector-tag,
-.comment-content .hljs-type,
-.markdown-preview .hljs-keyword,
-.markdown-preview .hljs-selector-tag,
-.markdown-preview .hljs-type,
-.creative-content .hljs-keyword,
-.creative-content .hljs-selector-tag,
-.creative-content .hljs-type,
-.creative-title-content .hljs-keyword,
-.creative-title-content .hljs-selector-tag,
-.creative-title-content .hljs-type {
-  color: var(--syntax-keyword);
-}
-.comment-content .hljs-string,
-.markdown-preview .hljs-string,
-.creative-content .hljs-string,
-.creative-title-content .hljs-string {
-  color: var(--syntax-string);
-}
-.comment-content .hljs-number,
-.comment-content .hljs-literal,
-.markdown-preview .hljs-number,
-.markdown-preview .hljs-literal,
-.creative-content .hljs-number,
-.creative-content .hljs-literal,
-.creative-title-content .hljs-number,
-.creative-title-content .hljs-literal {
-  color: var(--syntax-number);
-}
-.comment-content .hljs-built_in,
-.comment-content .hljs-builtin-name,
-.markdown-preview .hljs-built_in,
-.markdown-preview .hljs-builtin-name,
-.creative-content .hljs-built_in,
-.creative-content .hljs-builtin-name,
-.creative-title-content .hljs-built_in,
-.creative-title-content .hljs-builtin-name {
-  color: var(--syntax-builtin);
-}
-.comment-content .hljs-title,
-.comment-content .hljs-title.function_,
-.markdown-preview .hljs-title,
-.markdown-preview .hljs-title.function_,
-.creative-content .hljs-title,
-.creative-content .hljs-title.function_,
-.creative-title-content .hljs-title,
-.creative-title-content .hljs-title.function_ {
-  color: var(--syntax-title);
-}
-.comment-content .hljs-attr,
-.comment-content .hljs-attribute,
-.markdown-preview .hljs-attr,
-.markdown-preview .hljs-attribute,
-.creative-content .hljs-attr,
-.creative-content .hljs-attribute,
-.creative-title-content .hljs-attr,
-.creative-title-content .hljs-attribute {
-  color: var(--syntax-attr);
-}
-.comment-content .hljs-variable,
-.comment-content .hljs-template-variable,
-.markdown-preview .hljs-variable,
-.markdown-preview .hljs-template-variable,
-.creative-content .hljs-variable,
-.creative-content .hljs-template-variable,
-.creative-title-content .hljs-variable,
-.creative-title-content .hljs-template-variable {
-  color: var(--syntax-variable);
-}
-.comment-content .hljs-params,
-.markdown-preview .hljs-params,
-.creative-content .hljs-params,
-.creative-title-content .hljs-params {
-  color: var(--color-code-text);
-}
-.comment-content .hljs-regexp,
-.markdown-preview .hljs-regexp,
-.creative-content .hljs-regexp,
-.creative-title-content .hljs-regexp {
-  color: var(--syntax-regexp);
-}
-.comment-content .hljs-tag,
-.markdown-preview .hljs-tag,
-.creative-content .hljs-tag,
-.creative-title-content .hljs-tag {
-  color: var(--syntax-tag);
-}
-.comment-content .hljs-name,
-.markdown-preview .hljs-name,
-.creative-content .hljs-name,
-.creative-title-content .hljs-name {
-  color: var(--syntax-name);
-}
-.comment-content .hljs-selector-class,
-.comment-content .hljs-selector-id,
-.markdown-preview .hljs-selector-class,
-.markdown-preview .hljs-selector-id,
-.creative-content .hljs-selector-class,
-.creative-content .hljs-selector-id,
-.creative-title-content .hljs-selector-class,
-.creative-title-content .hljs-selector-id {
-  color: var(--syntax-selector);
-}
-.comment-content .hljs-selector-attr,
-.comment-content .hljs-selector-pseudo,
-.markdown-preview .hljs-selector-attr,
-.markdown-preview .hljs-selector-pseudo,
-.creative-content .hljs-selector-attr,
-.creative-content .hljs-selector-pseudo,
-.creative-title-content .hljs-selector-attr,
-.creative-title-content .hljs-selector-pseudo {
-  color: var(--syntax-attr);
-}
-.comment-content .hljs-symbol,
-.comment-content .hljs-bullet,
-.markdown-preview .hljs-symbol,
-.markdown-preview .hljs-bullet,
-.creative-content .hljs-symbol,
-.creative-content .hljs-bullet,
-.creative-title-content .hljs-symbol,
-.creative-title-content .hljs-bullet {
-  color: var(--syntax-number);
-}
-.comment-content .hljs-meta,
-.markdown-preview .hljs-meta,
-.creative-content .hljs-meta,
-.creative-title-content .hljs-meta {
-  color: var(--syntax-meta);
-}
-.comment-content .hljs-punctuation,
-.markdown-preview .hljs-punctuation,
-.creative-content .hljs-punctuation,
-.creative-title-content .hljs-punctuation {
-  color: var(--color-code-text);
-}
-.comment-content .hljs-deletion,
-.markdown-preview .hljs-deletion,
-.creative-content .hljs-deletion,
-.creative-title-content .hljs-deletion {
-  color: var(--syntax-deletion-text);
-  background: var(--syntax-deletion-bg);
-}
-.comment-content .hljs-addition,
-.markdown-preview .hljs-addition,
-.creative-content .hljs-addition,
-.creative-title-content .hljs-addition {
-  color: var(--syntax-addition-text);
-  background: var(--syntax-addition-bg);
-}
-.comment-content .hljs-emphasis,
-.markdown-preview .hljs-emphasis,
-.creative-content .hljs-emphasis,
-.creative-title-content .hljs-emphasis {
-  font-style: italic;
-}
-.comment-content .hljs-strong,
-.markdown-preview .hljs-strong,
-.creative-content .hljs-strong,
-.creative-title-content .hljs-strong {
-  font-weight: var(--weight-7);
-}