@jotx-labs/editor 2.4.130 → 2.4.131

package/src/styles/ReadonlyBlockRenderer.css

@@ -0,0 +1,389 @@
+.readonly-block-renderer {
+    position: relative;
+    margin: 8px 0;
+}
+
+/* Make readonly content truly uneditable - block all user interaction */
+.readonly-block-renderer .readonly-block-content {
+    pointer-events: none;
+    user-select: none;
+    cursor: default;
+}
+
+/* Allow interaction with specific elements like buttons */
+.readonly-block-renderer .edit-source-btn,
+.readonly-block-renderer .readonly-block-header {
+    pointer-events: auto;
+    user-select: auto;
+    cursor: pointer;
+}
+
+/* Prevent focus outline on readonly content */
+.readonly-block-renderer .ProseMirror {
+    outline: none;
+    cursor: default;
+    caret-color: transparent;
+}
+
+/* Block contenteditable behavior */
+.readonly-block-renderer [contenteditable="true"] {
+    pointer-events: none;
+    user-select: none;
+}
+
+.edit-source-btn {
+    background: var(--vscode-button-background);
+    border: none;
+    color: var(--vscode-button-foreground);
+    padding: 4px 10px;
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 11px;
+    margin-top: 8px;
+}
+
+.edit-source-btn:hover {
+    background: var(--vscode-button-hoverBackground);
+}
+
+/* Document block */
+.readonly-document {
+    padding: 16px;
+    border: 1px solid var(--vscode-panel-border);
+    border-radius: 6px;
+    background: var(--vscode-editor-background);
+}
+
+.document-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: var(--vscode-foreground);
+}
+
+.document-meta {
+    font-size: 13px;
+    color: var(--vscode-descriptionForeground);
+    margin-bottom: 12px;
+}
+
+.document-properties {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.property-row {
+    display: flex;
+    gap: 8px;
+    font-size: 13px;
+}
+
+.property-key {
+    color: var(--vscode-descriptionForeground);
+    min-width: 100px;
+}
+
+.property-value {
+    color: var(--vscode-foreground);
+}
+
+/* Mermaid block */
+.readonly-mermaid {
+    padding: 16px;
+    border: 1px solid var(--vscode-panel-border);
+    border-radius: 6px;
+    background: var(--vscode-textBlockQuote-background);
+}
+
+.readonly-mermaid-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--vscode-panel-border);
+}
+
+.readonly-mermaid-container {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.readonly-mermaid-svg {
+    display: flex;
+    justify-content: center;
+    padding: 16px;
+    background: var(--vscode-editor-background);
+    border-radius: 4px;
+    overflow: auto;
+}
+
+.readonly-mermaid-svg svg {
+    max-width: 100%;
+    height: auto;
+}
+
+.readonly-mermaid-error {
+    color: var(--vscode-errorForeground);
+    padding: 12px;
+    background: var(--vscode-inputValidation-errorBackground);
+    border-radius: 4px;
+    font-size: 13px;
+}
+
+.readonly-mermaid-source {
+    font-size: 13px;
+}
+
+.readonly-mermaid-source details {
+    margin-top: 8px;
+}
+
+.readonly-mermaid-source summary {
+    cursor: pointer;
+    color: var(--vscode-descriptionForeground);
+    padding: 4px 0;
+}
+
+.readonly-mermaid-source pre {
+    margin: 8px 0 0 0;
+    padding: 12px;
+    background: var(--vscode-textCodeBlock-background);
+    border-radius: 4px;
+    overflow-x: auto;
+    font-size: 12px;
+    max-height: 200px;
+}
+
+/* Code block */
+.readonly-code {
+    padding: 16px;
+    border: 1px solid var(--vscode-panel-border);
+    border-radius: 6px;
+    background: var(--vscode-editor-background);
+}
+
+.readonly-code-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.readonly-code-block {
+    margin: 0;
+    padding: 12px;
+    background: var(--vscode-textCodeBlock-background);
+    border-radius: 4px;
+    overflow-x: auto;
+}
+
+.readonly-code-block code {
+    font-family: var(--vscode-editor-font-family);
+    font-size: 13px;
+    color: var(--vscode-editor-foreground);
+}
+
+/* Math block */
+.readonly-math {
+    padding: 16px;
+    border: 1px solid var(--vscode-panel-border);
+    border-radius: 6px;
+    background: var(--vscode-editor-background);
+}
+
+.readonly-math-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.math-source pre {
+    margin: 0;
+    padding: 12px;
+    background: var(--vscode-textCodeBlock-background);
+    border-radius: 4px;
+    font-family: var(--vscode-editor-font-family);
+    font-size: 13px;
+}
+
+/* Chart block */
+.readonly-chart {
+    padding: 16px;
+    border: 1px solid var(--vscode-panel-border);
+    border-radius: 6px;
+    background: var(--vscode-editor-background);
+}
+
+.readonly-chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.chart-json {
+    margin: 8px 0 0 0;
+    padding: 12px;
+    background: var(--vscode-textCodeBlock-background);
+    border-radius: 4px;
+    overflow-x: auto;
+    font-size: 12px;
+    max-height: 200px;
+}
+
+/* Heading block */
+.readonly-heading {
+    padding: 12px 16px;
+    border: 1px solid var(--vscode-panel-border);
+    border-radius: 6px;
+    background: var(--vscode-editor-background);
+}
+
+.heading-content {
+    font-weight: 600;
+    color: var(--vscode-foreground);
+}
+
+.heading-level-1 {
+    font-size: 24px;
+}
+
+.heading-level-2 {
+    font-size: 20px;
+}
+
+.heading-level-3 {
+    font-size: 18px;
+}
+
+.heading-level-4 {
+    font-size: 16px;
+}
+
+.heading-level-5 {
+    font-size: 14px;
+}
+
+.heading-level-6 {
+    font-size: 13px;
+}
+
+/* Paragraph block */
+.readonly-paragraph {
+    padding: 12px 16px;
+    border: 1px solid var(--vscode-panel-border);
+    border-radius: 6px;
+    background: var(--vscode-editor-background);
+}
+
+.paragraph-content {
+    font-size: 14px;
+    line-height: 1.6;
+    color: var(--vscode-foreground);
+}
+
+/* Callout block */
+.readonly-callout {
+    padding: 16px;
+    border-radius: 6px;
+    border-left: 4px solid var(--vscode-notificationsInfoIcon-foreground);
+    background: var(--vscode-textBlockQuote-background);
+}
+
+.callout-info {
+    border-left-color: var(--vscode-notificationsInfoIcon-foreground);
+}
+
+.callout-warning {
+    border-left-color: var(--vscode-notificationsWarningIcon-foreground);
+}
+
+.callout-error {
+    border-left-color: var(--vscode-notificationsErrorIcon-foreground);
+}
+
+.callout-header {
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+
+.callout-content {
+    font-size: 14px;
+    color: var(--vscode-foreground);
+}
+
+/* Table and checklist */
+.readonly-table,
+.readonly-checklist {
+    padding: 16px;
+    border: 1px solid var(--vscode-panel-border);
+    border-radius: 6px;
+    background: var(--vscode-editor-background);
+}
+
+.table-header,
+.checklist-header {
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+
+.table-columns,
+.checklist-content {
+    font-size: 14px;
+    color: var(--vscode-foreground);
+}
+
+/* Image block */
+.readonly-image {
+    padding: 16px;
+    border: 1px solid var(--vscode-panel-border);
+    border-radius: 6px;
+    background: var(--vscode-editor-background);
+}
+
+.image-header {
+    font-weight: 600;
+    margin-bottom: 12px;
+}
+
+.readonly-image-preview {
+    max-width: 100%;
+    max-height: 300px;
+    object-fit: contain;
+    border-radius: 4px;
+    margin-bottom: 8px;
+}
+
+/* Generic block */
+.readonly-generic {
+    padding: 16px;
+    border: 1px solid var(--vscode-panel-border);
+    border-radius: 6px;
+    background: var(--vscode-editor-background);
+}
+
+.generic-header {
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: var(--vscode-foreground);
+}
+
+.generic-label {
+    font-size: 14px;
+    margin-bottom: 4px;
+    color: var(--vscode-foreground);
+}
+
+.generic-content {
+    font-size: 13px;
+    color: var(--vscode-descriptionForeground);
+    margin-top: 8px;
+    padding: 8px;
+    background: var(--vscode-textCodeBlock-background);
+    border-radius: 4px;
+    overflow-x: auto;
+}

package/src/styles/SearchBar.css

@@ -0,0 +1,167 @@
+/**
+ * Floating Search Bar Styles
+ * Positioned top-right, floating above content
+ */
+
+.jotx-search-bar {
+  position: fixed;
+  top: 80px;
+  right: 24px;
+  z-index: 1000;
+  
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  
+  background: var(--jotx-backgroundSecondary, #ffffff);
+  border: 1px solid var(--jotx-border, #e2e8f0);
+  border-radius: 12px;
+  padding: 8px 12px;
+  
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1),
+              0 2px 4px rgba(0, 0, 0, 0.05);
+  
+  backdrop-filter: blur(8px);
+  transition: all 0.2s ease;
+}
+
+.jotx-search-bar:focus-within {
+  border-color: var(--jotx-primary, #4f46e5);
+  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.15),
+              0 2px 6px rgba(79, 70, 229, 0.1);
+}
+
+/* Search icon */
+.jotx-search-icon {
+  display: flex;
+  align-items: center;
+  color: var(--jotx-textSecondary, #64748b);
+  flex-shrink: 0;
+}
+
+/* Input field */
+.jotx-search-input {
+  flex: 1;
+  min-width: 200px;
+  max-width: 300px;
+  height: 28px;
+  padding: 0 8px;
+  
+  font-family: inherit;
+  font-size: 13px;
+  color: var(--jotx-text, #111827);
+  
+  background: transparent;
+  border: none;
+  outline: none;
+  
+  transition: all 0.15s ease;
+}
+
+.jotx-search-input::placeholder {
+  color: var(--jotx-textSecondary, #94a3b8);
+}
+
+/* Match counter */
+.jotx-search-counter {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--jotx-textSecondary, #64748b);
+  white-space: nowrap;
+  flex-shrink: 0;
+  padding: 0 4px;
+}
+
+/* Navigation buttons */
+.jotx-search-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  
+  color: var(--jotx-textSecondary, #64748b);
+  cursor: pointer;
+  
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+}
+
+.jotx-search-btn:hover:not(:disabled) {
+  background: var(--jotx-background, #f8fafc);
+  color: var(--jotx-primary, #4f46e5);
+}
+
+.jotx-search-btn:active:not(:disabled) {
+  transform: scale(0.95);
+}
+
+.jotx-search-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+/* Close button */
+.jotx-search-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  margin-left: 4px;
+  
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  
+  color: var(--jotx-textSecondary, #64748b);
+  cursor: pointer;
+  
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+}
+
+.jotx-search-close:hover {
+  background: var(--jotx-danger, #ef4444);
+  color: #ffffff;
+}
+
+.jotx-search-close:active {
+  transform: scale(0.95);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .jotx-search-bar {
+    right: 12px;
+    top: 60px;
+  }
+  
+  .jotx-search-input {
+    min-width: 150px;
+    max-width: 200px;
+  }
+}
+
+/* Dark mode adjustments */
+body.vscode-dark .jotx-search-bar,
+body.vscode-high-contrast .jotx-search-bar {
+  background: var(--jotx-backgroundSecondary, #1e293b);
+  border-color: var(--jotx-border, #334155);
+}
+
+body.vscode-dark .jotx-search-btn:hover:not(:disabled),
+body.vscode-high-contrast .jotx-search-btn:hover:not(:disabled) {
+  background: var(--jotx-background, #0f172a);
+}
+
+
+

package/src/styles/SearchHighlight.css

@@ -0,0 +1,48 @@
+/**
+ * Search Highlight Styles
+ * Yellow for all matches, Orange for current match
+ */
+
+/* All search matches - Yellow highlight */
+.jotx-search-match {
+  background-color: #fef08a;
+  color: inherit;
+  border-radius: 2px;
+  padding: 1px 0;
+  transition: background-color 0.15s ease;
+}
+
+/* Current match - Orange highlight + more prominent */
+.jotx-search-current {
+  background-color: #fb923c;
+  color: #000000;
+  border-radius: 2px;
+  padding: 1px 0;
+  font-weight: 500;
+  box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.3);
+  transition: all 0.15s ease;
+}
+
+/* Dark mode adjustments */
+body.vscode-dark .jotx-search-match,
+body.vscode-high-contrast .jotx-search-match {
+  background-color: #854d0e;
+  color: #fef08a;
+}
+
+body.vscode-dark .jotx-search-current,
+body.vscode-high-contrast .jotx-search-current {
+  background-color: #ea580c;
+  color: #ffffff;
+  box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.4);
+}
+
+/* Smooth scroll animation when jumping to matches */
+@media (prefers-reduced-motion: no-preference) {
+  .ProseMirror {
+    scroll-behavior: smooth;
+  }
+}
+
+
+

package/src/styles/SectionNodeView.css

@@ -0,0 +1,90 @@
+/* Section Node - Collapsible section with title */
+.jotx-section {
+  margin: 1em 0;
+  border: 1px solid var(--vscode-panel-border, #e0e0e0);
+  border-radius: 6px;
+  background: var(--vscode-editor-background, #ffffff);
+  overflow: hidden;
+}
+
+.jotx-section-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  background: var(--vscode-editorGroupHeader-tabsBackground, #f5f5f5);
+  border-bottom: 1px solid var(--vscode-panel-border, #e0e0e0);
+  cursor: pointer;
+}
+
+.jotx-section.is-collapsed .jotx-section-header {
+  border-bottom: none;
+}
+
+.jotx-section-chevron {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--vscode-foreground, #333);
+  transition: transform 0.15s ease;
+}
+
+.jotx-section-chevron:hover {
+  background: var(--vscode-list-hoverBackground, rgba(0, 0, 0, 0.05));
+  border-radius: 3px;
+}
+
+.jotx-section-title {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--vscode-foreground, #333);
+  padding: 4px 6px;
+  border-radius: 3px;
+  transition: background 0.15s ease;
+}
+
+.jotx-section-title:hover {
+  background: var(--vscode-input-background, rgba(255, 255, 255, 0.5));
+}
+
+.jotx-section-title:focus {
+  background: var(--vscode-input-background, #fff);
+  box-shadow: 0 0 0 1px var(--vscode-focusBorder, #007acc);
+}
+
+.jotx-section-content {
+  padding: 12px;
+}
+
+.jotx-section-content-inner {
+  /* Nested blocks */
+}
+
+.jotx-section.is-collapsed .jotx-section-content {
+  display: none;
+}
+
+/* Dark theme support */
+body[data-vscode-theme-kind="vscode-dark"] .jotx-section {
+  background: var(--vscode-editor-background, #1e1e1e);
+  border-color: var(--vscode-panel-border, #3c3c3c);
+}
+
+body[data-vscode-theme-kind="vscode-dark"] .jotx-section-header {
+  background: var(--vscode-editorGroupHeader-tabsBackground, #252526);
+  border-bottom-color: var(--vscode-panel-border, #3c3c3c);
+}
+
+body[data-vscode-theme-kind="vscode-dark"] .jotx-section-title {
+  color: var(--vscode-foreground, #ccc);
+}
+
+