@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/styles/code-context.css

@@ -1,155 +0,0 @@
-/**
- * Code-context sections — host-supplied markdown blurbs rendered inside
- * Monaco view zones above anchor lines (see src/codeContext/).
- *
- * The zone dom node lives in Monaco's `.view-zones` layer, which sits below
- * `.view-lines` in hit-test order. Raising the zone's z-index inside that
- * shared stacking context is what makes section content clickable; Monaco's
- * own `suppressMouseDown` keeps the cursor from jumping.
- */
-
-.squisq-ccx-zone {
-  z-index: 10;
-  pointer-events: auto;
-  overflow: hidden;
-}
-
-.squisq-ccx-section {
-  --ccx-fg: #57606a;
-  --ccx-fg-strong: #24292f;
-  --ccx-bg: rgba(175, 184, 193, 0.12);
-  --ccx-bg-hover: rgba(175, 184, 193, 0.22);
-  --ccx-border: rgba(140, 149, 159, 0.35);
-  --ccx-accent: #0969da;
-  font-family: var(--squisq-ux-font, system-ui, -apple-system, sans-serif);
-  font-size: 12px;
-  line-height: 1.45;
-  color: var(--ccx-fg);
-  border-left: 2px solid var(--ccx-border);
-  background: var(--ccx-bg);
-  margin: 2px 8px 2px 4px;
-  border-radius: 4px;
-}
-
-.squisq-editor-shell[data-theme='dark'] .squisq-ccx-section {
-  --ccx-fg: #9198a1;
-  --ccx-fg-strong: #e6edf3;
-  --ccx-bg: rgba(110, 118, 129, 0.14);
-  --ccx-bg-hover: rgba(110, 118, 129, 0.26);
-  --ccx-border: rgba(110, 118, 129, 0.45);
-  --ccx-accent: #4493f8;
-}
-
-/* ── Collapsed strip ─────────────────────────────────────────────── */
-
-.squisq-ccx-strip {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  padding: 3px 10px;
-  border: none;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-  border-radius: 4px;
-}
-
-.squisq-ccx-strip:hover {
-  background: var(--ccx-bg-hover);
-}
-
-.squisq-ccx-chevron {
-  flex: 0 0 auto;
-  font-size: 9px;
-  opacity: 0.7;
-}
-
-.squisq-ccx-strip-text {
-  flex: 1 1 auto;
-  min-width: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Flatten the strip's markdown to a single inline line. */
-.squisq-ccx-strip-text .squisq-md,
-.squisq-ccx-strip-text .squisq-md-p {
-  display: inline;
-  margin: 0;
-}
-
-.squisq-ccx-strip-text .squisq-md-strong {
-  color: var(--ccx-fg-strong);
-}
-
-/* ── Expanded body ───────────────────────────────────────────────── */
-
-.squisq-ccx-body {
-  padding: 2px 12px 8px 24px;
-  font-size: 12px;
-  user-select: text;
-}
-
-.squisq-ccx-body--loading {
-  opacity: 0.6;
-  font-style: italic;
-}
-
-.squisq-ccx-body .squisq-md-p {
-  margin: 4px 0;
-}
-
-.squisq-ccx-body .squisq-md-strong {
-  color: var(--ccx-fg-strong);
-  font-size: 11px;
-  text-transform: none;
-}
-
-.squisq-ccx-body .squisq-md-list {
-  margin: 2px 0 6px;
-  padding-left: 18px;
-}
-
-.squisq-ccx-body .squisq-md-li {
-  margin: 1px 0;
-}
-
-.squisq-ccx-body .squisq-md-link {
-  color: var(--ccx-accent);
-  text-decoration: none;
-}
-
-.squisq-ccx-body .squisq-md-link:hover {
-  text-decoration: underline;
-}
-
-.squisq-ccx-body .squisq-md-inline-code,
-.squisq-ccx-body .squisq-md-link .squisq-md-inline-code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
-  padding: 0 3px;
-  border-radius: 3px;
-  background: rgba(140, 149, 159, 0.18);
-}
-
-.squisq-ccx-body .squisq-md-link .squisq-md-inline-code {
-  color: var(--ccx-accent);
-}
-
-.squisq-ccx-body .squisq-md-code-block {
-  margin: 4px 0;
-  padding: 6px 8px;
-  border-radius: 4px;
-  background: rgba(140, 149, 159, 0.14);
-  overflow-x: auto;
-}
-
-.squisq-ccx-body .squisq-md-code-block code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 11px;
-  white-space: pre;
-}

package/src/styles/code-snippet.css

@@ -1,76 +0,0 @@
-/* Monaco inset for ordinary explicit-language Markdown code fences. */
-
-.squisq-wysiwyg-editor pre.squisq-code-snippet-fence-hidden {
-  display: none;
-}
-
-.squisq-code-snippet-widget-host {
-  margin: 0.75rem 0 1.25rem;
-}
-
-.squisq-code-snippet-shell {
-  box-sizing: border-box;
-  display: flex;
-  width: 100%;
-  height: 240px;
-  min-height: 128px;
-  max-height: 70vh;
-  flex-direction: column;
-  overflow: hidden;
-  resize: vertical;
-  border: 1px solid var(--squisq-border, #d1d5db);
-  border-radius: 8px;
-  background: var(--squisq-surface, #ffffff);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-}
-
-.squisq-code-snippet-header {
-  box-sizing: border-box;
-  display: flex;
-  min-height: 34px;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 0 10px;
-  border-bottom: 1px solid var(--squisq-border, #d1d5db);
-  background: var(--squisq-surface-muted, #f8fafc);
-  color: var(--squisq-text-muted, #64748b);
-  font-family: var(--squisq-ux-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
-  font-size: 12px;
-  user-select: none;
-}
-
-.squisq-code-snippet-title {
-  display: inline-flex;
-  min-width: 0;
-  align-items: center;
-  gap: 7px;
-  color: var(--squisq-text, #334155);
-  font-weight: 600;
-}
-
-.squisq-code-snippet-header code {
-  overflow: hidden;
-  color: inherit;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.squisq-code-snippet-editor {
-  position: relative;
-  min-height: 0;
-  flex: 1;
-  overflow: hidden;
-}
-
-.squisq-code-snippet-loading {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  color: var(--squisq-text-muted, #64748b);
-  font-family: var(--squisq-ux-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
-  font-size: 12px;
-}

package/src/styles/diagram.css

@@ -1,183 +0,0 @@
-/**
- * Diagram editor styles.
- *
- * `.squisq-diagram-widget-host`: the wrapper ProseMirror inserts after a
- *   `### Foo {[diagram]}` heading. Hosts a React-Flow canvas at a fixed
- *   inline height; flipping the `maximized` state portals the canvas out
- *   to an overlay (`.squisq-diagram-maximized-overlay`) instead.
- *
- * `[data-squisq-diagram-child]`: ProseMirror marks each direct sub-heading
- *   of a diagram parent. CSS hides those headings (and the body content
- *   between them) so the diagram canvas is the only visual representation
- *   of the section in the WYSIWYG view. Authors can still edit them
- *   through the canvas, or via the Raw / Linear views.
- */
-
-.squisq-diagram-widget-host {
-  margin: 0.75rem 0 1.25rem;
-}
-
-.squisq-diagram-inline {
-  position: relative;
-  width: 100%;
-  height: 420px;
-  border: 1px solid var(--squisq-border, #e2e8f0);
-  border-radius: 8px;
-  overflow: hidden;
-  background: var(--squisq-surface, #ffffff);
-}
-
-.squisq-diagram-canvas {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-/* Drag bar along the bottom edge — pins the canvas to a fixed pixel
- * height (persisted as `height=` on the `{[diagram …]}` heading). Sits
- * above the Scene so the gesture is captured by the handle, not the
- * canvas. Double-click reverts to the default height. */
-.squisq-diagram-resize-handle {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: ns-resize;
-  z-index: 11;
-  touch-action: none;
-}
-.squisq-diagram-resize-handle::before {
-  content: '';
-  width: 44px;
-  height: 4px;
-  border-radius: 2px;
-  background: var(--squisq-border, #cbd5e1);
-  transition: background 0.12s;
-}
-.squisq-diagram-resize-handle:hover::before {
-  background: var(--squisq-text-muted, #94a3b8);
-}
-
-.squisq-diagram-canvas .react-flow {
-  width: 100%;
-  height: 100%;
-}
-
-.squisq-diagram-empty {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  pointer-events: none;
-  text-align: center;
-  padding: 24px;
-}
-
-.squisq-diagram-empty-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--squisq-text, #1e293b);
-}
-
-.squisq-diagram-empty-hint {
-  font-size: 12px;
-  color: var(--squisq-text-muted, #64748b);
-  max-width: 320px;
-  line-height: 1.45;
-}
-
-.squisq-diagram-empty-btn {
-  pointer-events: auto;
-  margin-top: 4px;
-  padding: 6px 12px;
-  font-size: 12px;
-  font-weight: 500;
-  color: #ffffff;
-  background: #6366f1;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: background 0.1s;
-}
-
-.squisq-diagram-empty-btn:hover {
-  background: #4f46e5;
-}
-
-.squisq-diagram-maximize-btn {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 10;
-  width: 32px;
-  height: 32px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--squisq-surface, #ffffff);
-  border: 1px solid var(--squisq-border, #e2e8f0);
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 16px;
-  line-height: 1;
-  color: var(--squisq-text, #1e293b);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
-}
-.squisq-diagram-maximize-btn:hover {
-  background: var(--squisq-surface-hover, #f8fafc);
-}
-
-.squisq-diagram-maximized-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  background: rgba(15, 23, 42, 0.6);
-  display: flex;
-  align-items: stretch;
-  justify-content: stretch;
-}
-
-.squisq-diagram-maximized-content {
-  position: relative;
-  flex: 1;
-  margin: 24px;
-  background: var(--squisq-surface, #ffffff);
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-}
-
-.squisq-diagram-maximized-content .squisq-diagram-canvas {
-  width: 100%;
-  height: 100%;
-}
-
-/* Child headings owned by a diagram are hidden in the WYSIWYG.
- * They still exist in the doc (and in markdown) — the diagram canvas
- * is the editing surface for them. */
-[data-squisq-diagram-child='true'] {
-  display: none;
-}
-
-.squisq-diagram-inline-placeholder {
-  /* Reserved space so the document layout doesn't jump when the canvas
-   * portals into the maximize overlay. */
-  height: 420px;
-  border: 1px dashed var(--squisq-border, #e2e8f0);
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--squisq-text-muted, #64748b);
-  font-size: 14px;
-}
-.squisq-diagram-inline-placeholder::before {
-  content: 'Diagram open in full screen — press Esc to return';
-}