@multiplatform.one/rich-text 6.0.4 → 6.3.0

package/dist/cjs/editor/editorStyles.cjs

@@ -30,15 +30,35 @@ function getEditorCSS(options = {}) {
     minHeight = 150,
     maxHeight,
     bodyFontFamily,
-    headingFontFamily
+    headingFontFamily,
+    fullscreen,
+    motionMs = 120,
+    scopeClass
   } = options;
   const bodyFont = bodyFontFamily || "inherit";
   const headingFont = headingFontFamily || bodyFont;
+  const bubbleScope = scopeClass ? `.${scopeClass} .rt-bubble-menu` : ".rt-bubble-menu";
   return `
+    /*
+      LC-24 A-ENTEREXIT: the bubble-menu plugin persists its element and
+      flips inline visibility/opacity on show/hide. A transition on the same
+      element pairs enter AND exit: the destination-state selector (inline
+      style attribute) picks instant visibility on show and delayed
+      visibility on hide so the exit fade stays visible. motionMs 0
+      (animation none) silences both.
+    */
+    ${bubbleScope} {
+      transition: opacity ${motionMs}ms ease, transform ${motionMs}ms ease,
+        visibility 0s linear ${motionMs}ms;
+    }
+    ${bubbleScope}[style*="visibility: visible"] {
+      transition: opacity ${motionMs}ms ease, transform ${motionMs}ms ease, visibility 0s;
+    }
+
     .ProseMirror {
       padding: 12px 12px 12px 16px;
-      min-height: ${minHeight}px;
-      ${maxHeight ? `max-height: ${maxHeight}px; overflow-y: auto;` : ""}
+      ${fullscreen ? "min-height: 100%;" : `min-height: ${minHeight}px;
+      ${maxHeight ? `max-height: ${maxHeight}px; overflow-y: auto;` : ""}`}
       outline: none;
       font-family: ${bodyFont};
       color: var(--color12);
@@ -46,7 +66,35 @@ function getEditorCSS(options = {}) {
     .ProseMirror:focus {
       outline: none;
     }
+    /* Axiom 12 LEGIBLE FLOOR: non-removable >=2px focus ring on the
+       keyboard-focused editing surface */
+    .ProseMirror:focus-visible {
+      outline: 2px solid var(--color8);
+      outline-offset: -2px;
+    }
+    /* Mention chips (@ mention nodes) */
+    .ProseMirror .rt-mention {
+      background-color: var(--color4);
+      border-radius: 4px;
+      padding: 0.1em 0.3em;
+      color: var(--color12);
+      font-weight: 500;
+      white-space: nowrap;
+    }
+    /* Attachment chips (non-image file uploads) */
+    .ProseMirror a.rt-attachment {
+      display: inline-flex;
+      align-items: center;
+      background-color: var(--color3);
+      border: 1px solid var(--color6);
+      border-radius: 999px;
+      padding: 0.05em 0.6em;
+      text-decoration: none;
+      color: var(--color12);
+    }
     .ProseMirror p {
+      /* @tamagui/core reset.css does p { all: unset } (display -> inline); restore block flow */
+      display: block;
       margin: 0 0 0.5em 0;
     }
     .ProseMirror p:last-child {
@@ -92,7 +140,10 @@ function getEditorCSS(options = {}) {
     }
     .ProseMirror ul,
     .ProseMirror ol {
-      padding-left: 1em;
+      /* reset.css also unsets ul/ol display; restore block flow.
+         Logical padding so list indent mirrors in RTL content. */
+      display: block;
+      padding-inline-start: 1em;
       margin: 0.5em 0;
     }
     .ProseMirror ul {
@@ -116,8 +167,8 @@ function getEditorCSS(options = {}) {
     }
     .ProseMirror ul[data-type="taskList"] {
       list-style: none;
-      padding-left: 0;
-      margin-left: 0;
+      padding-inline-start: 0;
+      margin-inline-start: 0;
     }
     .ProseMirror ul[data-type="taskList"] li {
       display: flex;
@@ -142,16 +193,17 @@ function getEditorCSS(options = {}) {
       border-radius: 4px;
     }
     .ProseMirror img.ProseMirror-selectednode {
-      outline: 2px solid var(--blue10, #0066cc);
+      outline: 2px solid var(--blue10);
     }
     .ProseMirror blockquote {
-      border-left: 3px solid var(--color6, #ccc);
-      padding-left: 1em;
+      /* Logical start rail so the quote accent mirrors in RTL. */
+      border-inline-start: 3px solid var(--color6);
+      padding-inline-start: 1em;
       margin: 0.5em 0;
-      color: var(--color10, #666);
+      color: var(--color10);
     }
     .ProseMirror code {
-      background-color: var(--color4, rgba(0,0,0,0.05));
+      background-color: var(--color4);
       padding: 0.15em 0.35em;
       border-radius: 4px;
       font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
@@ -159,8 +211,8 @@ function getEditorCSS(options = {}) {
       word-break: break-word;
     }
     .ProseMirror pre {
-      background-color: var(--color3, rgba(0,0,0,0.04));
-      border: 1px solid var(--color5, rgba(0,0,0,0.08));
+      background-color: var(--color3);
+      border: 1px solid var(--color5);
       padding: 0.75em 1em;
       border-radius: 4px;
       overflow-x: auto;
@@ -180,25 +232,34 @@ function getEditorCSS(options = {}) {
       white-space: pre;
     }
     .ProseMirror a {
-      color: var(--blue10, #0066cc);
+      color: var(--blue10);
       text-decoration: underline;
     }
+    /* Highlight marks: the swatch palette rides scheme-aware theme ramps
+       (radix step-5 washes \u2014 pastel in light, deep-dim in dark), so the
+       inherited scheme ink stays legible on them; no forced ink needed. */
     .ProseMirror hr {
       border: none;
-      border-top: 2px solid var(--color6, #ccc);
+      border-top: 2px solid var(--color6);
       margin: 1em 0;
     }
     .ProseMirror p.is-editor-empty:first-child::before {
       content: attr(data-placeholder);
-      color: var(--color8, #aaa);
+      /* Axiom 12: placeholder is an owned text role \u2014 color11 is the muted
+         step that still clears 4.5:1 on the color2 editor surface in both
+         schemes (color10 measured 3.76:1 light / 3.87:1 dark) */
+      color: var(--color11);
       pointer-events: none;
-      float: left;
+      float: inline-start;
       height: 0;
     }
 
-    /* Block drag handle */
+    /* Block drag handle (decorative fade stops at animation none) */
+    .block-drag-handle {
+      transition: opacity ${motionMs}ms ease;
+    }
     .block-drag-handle:hover {
-      background-color: var(--color4, rgba(0,0,0,0.05));
+      background-color: var(--color4);
       opacity: 1 !important;
     }
     .block-drag-handle:active {
@@ -214,18 +275,18 @@ function getEditorCSS(options = {}) {
     }
     .ProseMirror td,
     .ProseMirror th {
-      border: 1px solid var(--color6, #ddd);
+      border: 1px solid var(--color6);
       padding: 0.4em 0.6em;
       vertical-align: top;
       position: relative;
       min-width: 80px;
     }
     .ProseMirror th {
-      background-color: var(--color3, #f5f5f5);
+      background-color: var(--color3);
       font-weight: 600;
     }
     .ProseMirror .selectedCell {
-      background-color: var(--blue3, rgba(0, 102, 204, 0.08));
+      background-color: var(--blue3);
     }
     .ProseMirror .column-resize-handle {
       position: absolute;
@@ -233,39 +294,147 @@ function getEditorCSS(options = {}) {
       top: 0;
       bottom: 0;
       width: 4px;
-      background-color: var(--blue10, #0066cc);
+      background-color: var(--blue10);
       pointer-events: none;
     }
     .ProseMirror.resize-cursor {
       cursor: col-resize;
     }
 
+    /* Inline math (KaTeX-rendered atom; raw TeX while loading) */
+    .ProseMirror .rt-math-inline {
+      display: inline-block;
+      padding: 0 0.15em;
+      border-radius: 4px;
+      cursor: pointer;
+      max-width: 100%;
+    }
+    .ProseMirror .rt-math-inline.ProseMirror-selectednode {
+      outline: 2px solid var(--blue10);
+    }
+    .ProseMirror .rt-math-inline.rt-math-error {
+      color: var(--red10);
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      font-size: 0.875em;
+      text-decoration: underline dashed var(--red10);
+      text-underline-offset: 3px;
+    }
+    .ProseMirror .rt-math-inline.rt-math-empty {
+      color: var(--color10);
+      font-style: italic;
+      border: 1px dashed var(--color8);
+      padding: 0 0.4em;
+    }
+    .ProseMirror .katex { font-size: 1.06em; }
+
+    /* Code block wrapper with live preview pane (mermaid / math) */
+    .ProseMirror .rt-codeblock { margin: 0.5em 0; }
+    .ProseMirror .rt-codeblock pre { margin: 0; }
+    .ProseMirror .rt-block-preview[data-state="hidden"] { display: none; }
+    .ProseMirror .rt-codeblock:has(.rt-block-preview:not([data-state="hidden"])) pre {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    .ProseMirror .rt-block-preview {
+      border: 1px solid var(--color5);
+      border-top: 1px dashed var(--color6);
+      border-radius: 0 0 4px 4px;
+      padding: 0.75em 1em;
+      background-color: var(--color2);
+      overflow-x: auto;
+    }
+    .ProseMirror .rt-preview-diagram { display: flex; justify-content: center; }
+    .ProseMirror .rt-preview-diagram svg { max-width: 100%; height: auto; }
+    .ProseMirror .rt-preview-math .katex-display { margin: 0.25em 0; }
+    .ProseMirror .rt-preview-error {
+      color: var(--red10);
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      font-size: 0.8125em;
+      white-space: pre-wrap;
+    }
+    .ProseMirror .rt-preview-hint {
+      color: var(--color10);
+      font-size: 0.8125em;
+      font-style: italic;
+    }
+
+    /* Collapsible details sections (GitLab <details> parity) */
+    .ProseMirror [data-type="details"] {
+      display: flex;
+      gap: 0.4em;
+      border: 1px solid var(--color5);
+      border-radius: 4px;
+      padding: 0.5em 0.75em;
+      margin: 0.5em 0;
+    }
+    .ProseMirror [data-type="details"] > button {
+      flex: 0 0 auto;
+      width: 1.5em;
+      height: 1.5em;
+      margin-top: 0.1em;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: none;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      color: var(--color11);
+      font-size: 1em;
+      padding: 0;
+    }
+    .ProseMirror [data-type="details"] > button:hover {
+      background-color: var(--color4);
+    }
+    .ProseMirror [data-type="details"] > button::before {
+      content: "\\25B8";
+      display: block;
+      transition: transform ${motionMs}ms ease;
+    }
+    .ProseMirror [data-type="details"].is-open > button::before {
+      transform: rotate(90deg);
+    }
+    .ProseMirror [data-type="details"] > div {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+    .ProseMirror [data-type="details"] summary {
+      display: block;
+      font-weight: 600;
+      list-style: none;
+    }
+    .ProseMirror [data-type="details"] summary::-webkit-details-marker { display: none; }
+    .ProseMirror [data-type="detailsContent"] { margin-top: 0.25em; }
+    /* The tamagui reset defeats the UA's [hidden] display:none \u2014 restore
+       it so the details toggle actually collapses the content */
+    .ProseMirror [data-type="detailsContent"][hidden] { display: none; }
+
     /* Syntax highlighting (lowlight / highlight.js compatible) */
     .ProseMirror pre .hljs-comment,
-    .ProseMirror pre .hljs-quote { color: var(--color9, #6a737d); font-style: italic; }
+    .ProseMirror pre .hljs-quote { color: var(--color9); font-style: italic; }
     .ProseMirror pre .hljs-keyword,
     .ProseMirror pre .hljs-selector-tag,
-    .ProseMirror pre .hljs-meta { color: var(--purple10, #d73a49); }
+    .ProseMirror pre .hljs-meta { color: var(--purple10); }
     .ProseMirror pre .hljs-string,
     .ProseMirror pre .hljs-attr,
     .ProseMirror pre .hljs-template-tag,
-    .ProseMirror pre .hljs-template-variable { color: var(--green10, #22863a); }
+    .ProseMirror pre .hljs-template-variable { color: var(--green10); }
     .ProseMirror pre .hljs-number,
     .ProseMirror pre .hljs-literal,
     .ProseMirror pre .hljs-type,
-    .ProseMirror pre .hljs-params { color: var(--blue10, #005cc5); }
+    .ProseMirror pre .hljs-params { color: var(--blue10); }
     .ProseMirror pre .hljs-built_in,
-    .ProseMirror pre .hljs-builtin-name { color: var(--orange10, #e36209); }
+    .ProseMirror pre .hljs-builtin-name { color: var(--orange10); }
     .ProseMirror pre .hljs-title,
-    .ProseMirror pre .hljs-section { color: var(--blue10, #005cc5); font-weight: 600; }
+    .ProseMirror pre .hljs-section { color: var(--blue10); font-weight: 600; }
     .ProseMirror pre .hljs-name,
-    .ProseMirror pre .hljs-tag { color: var(--green10, #22863a); }
-    .ProseMirror pre .hljs-attribute { color: var(--purple10, #6f42c1); }
+    .ProseMirror pre .hljs-tag { color: var(--green10); }
+    .ProseMirror pre .hljs-attribute { color: var(--purple10); }
     .ProseMirror pre .hljs-variable,
     .ProseMirror pre .hljs-symbol,
-    .ProseMirror pre .hljs-bullet { color: var(--orange10, #e36209); }
-    .ProseMirror pre .hljs-addition { color: var(--green10, #22863a); background-color: rgba(34,134,58,0.1); }
-    .ProseMirror pre .hljs-deletion { color: var(--red10, #b31d28); background-color: rgba(179,29,40,0.1); }
+    .ProseMirror pre .hljs-bullet { color: var(--orange10); }
+    .ProseMirror pre .hljs-addition { color: var(--green10); background-color: color-mix(in srgb, var(--green10) 12%, transparent); }
+    .ProseMirror pre .hljs-deletion { color: var(--red10); background-color: color-mix(in srgb, var(--red10) 12%, transparent); }
     .ProseMirror pre .hljs-emphasis { font-style: italic; }
     .ProseMirror pre .hljs-strong { font-weight: bold; }
   `;