@openeditor/ui 0.0.29 → 0.0.31

package/README.md

@@ -7,11 +7,44 @@ Optional styled UI components for OpenEditor.
 - `OpenEditor` for a composed editor surface
 - `OpenEditorSlashMenu` for the default slash menu UI
 - `OpenEditorSelectionBubble` for inline formatting UI
+- `OpenEditorTableMenu` for selection-aware row, column, header, cell, and table actions
 - `OpenEditorButton`, `OpenEditorToggle`, `OpenEditorToggleGroup`, and `OpenEditorInput` as Base UI-backed app primitives
 - `OpenEditorContent` and `useOpenEditorController` re-exported from `@openeditor/react`
 
 The UI package owns the default CSS and interactive primitives. User-facing controls are built on Base UI so focus management, keyboard behavior, dismiss behavior, and overlay positioning share one foundation.
 
+## Editor interaction contract
+
+OpenEditor keeps keyboard ownership in the editable surface unless the user
+explicitly enters another control:
+
+- Selecting text shows the formatting toolbar without moving focus. Delete,
+  Backspace, typing, arrow keys, and formatting/history shortcuts therefore keep
+  their normal editing meaning. The toolbar follows its document selection in
+  the editor's actual scroll container and hides once that selection is clipped.
+  Pointer presses on toolbar actions preserve the document selection. `Alt+F10`
+  moves focus into the toolbar, its arrow keys move between controls, and
+  `Escape` returns focus to the document.
+- Typing `/` opens one flat, filtered command list. Focus stays in the document;
+  `ArrowUp`/`ArrowDown`, `Home`/`End`, and `PageUp`/`PageDown` change the active
+  command, `Enter` runs it, and `Escape` dismisses the current slash session.
+  Its anchor is resolved live from the document position while scrolling and is
+  hidden when clipped. A dismissed session does not reopen merely because more
+  query characters are typed.
+- The block handle menu is an explicit focus-owning menu. `Enter` or `Space`
+  opens it, menu arrow keys navigate it, `Enter` runs an action, and `Escape` or
+  an outside press closes it. Closing, dragging, and running an action all pass
+  through the same unlock transition, so hover targeting cannot remain frozen.
+- Selecting a table cell shows a toolbar anchored to the table. Row and column
+  menus preserve the cell selection while insert/delete commands run, and
+  header, merge/split, and whole-table actions use the same transactional table
+  controller as custom host UI.
+
+Formatting and history shortcuts come from Tiptap's registered mark and history
+extensions. OpenEditor keeps focus in the editor so those extension-owned
+bindings receive `Cmd` on macOS and `Ctrl` elsewhere without a competing global
+shortcut layer.
+
 ## Theming
 
 Use the typed theme contract instead of targeting OpenEditor implementation classes or defining global custom properties. The provider scopes tokens to editor content and automatically forwards them to portaled menus and dialogs.
@@ -47,7 +80,7 @@ export function Editor() {
 export function HeadlessComposition() {
   return (
     <OpenEditorThemeProvider theme={theme}>
-      {/* OpenEditorContent, OpenEditorSelectionBubble, OpenEditorSlashMenu */}
+      {/* OpenEditorContent, OpenEditorSelectionBubble, OpenEditorTableMenu, OpenEditorSlashMenu */}
     </OpenEditorThemeProvider>
   );
 }

package/dist/index.css

@@ -188,6 +188,229 @@
   margin: var(--oe-space-block, 16px) 0;
   max-width: 100%;
 }
+.oe-image {
+  border-radius: var(--oe-radius-medium, 8px);
+  margin: var(--oe-space-block, 16px) 0;
+  max-width: 100%;
+  position: relative;
+}
+.oe-image-preview {
+  border-radius: inherit;
+  overflow: hidden;
+  position: relative;
+}
+.oe-prosemirror .oe-image img {
+  border-radius: inherit;
+  height: auto;
+  margin: 0;
+  max-width: 100%;
+}
+.oe-image-empty {
+  align-items: center;
+  background: var(--oe-block-surface, var(--oe-surface-muted, #f5f5f5));
+  border: 1px dashed var(--oe-border, #d4d4d4);
+  border-radius: inherit;
+  display: flex;
+  gap: 8px;
+  min-height: 56px;
+  padding: 8px;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+.oe-image:focus-within .oe-image-empty,
+.oe-image[data-selected=true] .oe-image-empty,
+.oe-image-empty:hover {
+  background: color-mix(in srgb, var(--oe-block-surface, var(--oe-surface-muted, #f5f5f5)) 92%, var(--oe-text, #171717));
+  border-color: var(--oe-muted, #737373);
+}
+.oe-image-empty-icon {
+  align-items: center;
+  color: var(--oe-muted, #737373);
+  display: inline-flex;
+  flex: 0 0 28px;
+  height: 28px;
+  justify-content: center;
+}
+.oe-image-empty-icon svg {
+  height: 17px;
+  width: 17px;
+}
+.oe-image-empty-copy {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  line-height: 1.25;
+  min-width: 0;
+}
+.oe-image-empty-copy strong {
+  font-size: 13px;
+  font-weight: 600;
+}
+.oe-image-empty-copy span {
+  color: var(--oe-muted, #737373);
+  font-size: 11px;
+  margin-top: 2px;
+}
+.oe-image-empty > .oe-image-empty-action {
+  background: transparent;
+  border-color: transparent;
+  color: var(--oe-muted, #737373);
+  flex: 0 0 24px;
+  height: 24px;
+  padding: 0;
+  width: 24px;
+}
+.oe-image-empty > .oe-image-empty-action:hover,
+.oe-image-empty > .oe-image-empty-action:focus-visible {
+  background: transparent;
+  border-color: transparent;
+  color: var(--oe-text, #171717);
+}
+.oe-image-empty > .oe-image-empty-action + .oe-image-empty-action {
+  margin-left: -6px;
+}
+.oe-image button {
+  align-items: center;
+  background: var(--oe-surface, #fff);
+  border: 1px solid var(--oe-border, #d4d4d4);
+  border-radius: 6px;
+  color: var(--oe-text, #171717);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 500;
+  gap: 4px;
+  height: 26px;
+  justify-content: center;
+  padding: 0 7px;
+}
+.oe-image button:hover,
+.oe-image button:focus-visible {
+  border-color: var(--oe-muted, #737373);
+  outline: none;
+}
+.oe-image button:disabled {
+  cursor: default;
+  opacity: .55;
+}
+.oe-image button svg {
+  height: 13px;
+  width: 13px;
+}
+.oe-image button.oe-image-primary {
+  background: var(--oe-text, #171717);
+  border-color: var(--oe-text, #171717);
+  color: var(--oe-surface, #fff);
+}
+.oe-image button.oe-image-remove {
+  background: transparent;
+  border-color: transparent;
+  color: var(--oe-muted, #737373);
+  padding: 0;
+  width: 24px;
+}
+.oe-image button.oe-image-remove:hover,
+.oe-image button.oe-image-remove:focus-visible {
+  color: #c83232;
+}
+.oe-image-actions {
+  align-items: center;
+  background: color-mix(in srgb, var(--oe-surface, #fff) 94%, transparent);
+  border: 1px solid var(--oe-border, #d4d4d4);
+  border-radius: 8px;
+  bottom: 10px;
+  box-shadow: 0 8px 24px var(--oe-shadow, rgb(0 0 0 / 12%));
+  display: flex;
+  gap: 3px;
+  opacity: 0;
+  padding: 3px;
+  pointer-events: none;
+  position: absolute;
+  right: 10px;
+  transform: translateY(4px);
+  transition: opacity 120ms ease, transform 120ms ease;
+}
+.oe-image-preview:hover .oe-image-actions,
+.oe-image:focus-within .oe-image-actions,
+.oe-image[data-selected=true] .oe-image-actions {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+.oe-image-actions button {
+  border: 0;
+}
+.oe-image-panel,
+.oe-image-upload-status,
+.oe-image-error {
+  align-items: end;
+  background: var(--oe-block-surface, var(--oe-surface-muted, #f5f5f5));
+  border-radius: 0 0 var(--oe-radius-medium, 8px) var(--oe-radius-medium, 8px);
+  display: flex;
+  gap: 8px;
+  padding: 10px;
+}
+.oe-image-panel label {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 5px;
+  min-width: 0;
+}
+.oe-image-panel label span {
+  color: var(--oe-muted, #737373);
+  font-size: 11px;
+  font-weight: 600;
+}
+.oe-image-panel input {
+  background: var(--oe-surface, #fff);
+  border: 1px solid var(--oe-border, #d4d4d4);
+  border-radius: 6px;
+  color: var(--oe-text, #171717);
+  font: inherit;
+  height: 32px;
+  outline: none;
+  padding: 0 9px;
+  width: 100%;
+}
+.oe-image-panel input:focus {
+  border-color: var(--oe-muted, #737373);
+}
+.oe-image-upload-status {
+  align-items: center;
+  color: var(--oe-muted, #737373);
+  font-size: 12px;
+}
+.oe-image-progress {
+  background: var(--oe-border, #d4d4d4);
+  border-radius: 2px;
+  flex: 1;
+  height: 4px;
+  overflow: hidden;
+}
+.oe-image-progress span {
+  background: var(--oe-accent-strong, #171717);
+  display: block;
+  height: 100%;
+  transition: width 90ms linear;
+}
+.oe-image-error {
+  align-items: center;
+  color: #b42318;
+  font-size: 12px;
+}
+.oe-image-error span {
+  flex: 1;
+}
+@media (max-width: 560px) {
+  .oe-image-panel {
+    align-items: stretch;
+    flex-wrap: wrap;
+  }
+  .oe-image-panel label {
+    flex-basis: 100%;
+  }
+}
 .oe-prosemirror blockquote,
 .oe-viewer blockquote {
   border-left: 3px solid var(--oe-structural-line, var(--oe-border, #e5e5e5));
@@ -287,15 +510,15 @@
 .oe-viewer li {
   margin: 4px 0;
 }
-.oe-prosemirror [data-openeditor-toggle-list],
-.oe-viewer [data-openeditor-toggle-list] {
+.oe-prosemirror ul[data-openeditor-toggle-list],
+.oe-viewer ul[data-openeditor-toggle-list] {
   list-style: none;
   margin: 18px 0;
   padding: 0;
 }
 .oe-toggle-list-item:not(details) {
   display: grid;
-  gap: 8px;
+  column-gap: 8px;
   grid-template-columns: 24px minmax(0, 1fr);
 }
 details.oe-toggle-list-item {
@@ -303,15 +526,22 @@ details.oe-toggle-list-item {
   margin: 8px 0;
 }
 details.oe-toggle-list-item > summary {
+  color: var(--oe-text-soft, #262626);
   cursor: pointer;
   font-weight: 500;
 }
+details.oe-toggle-list-item > summary::marker {
+  color: currentColor;
+}
+details.oe-toggle-list-item > summary + * {
+  margin-top: 8px;
+}
 .oe-toggle-list-trigger {
   align-items: center;
   align-self: start;
   background: transparent;
   border: 0;
-  color: var(--oe-muted, #737373);
+  color: var(--oe-text-soft, #262626);
   cursor: pointer;
   display: inline-flex;
   height: 24px;
@@ -349,6 +579,14 @@ details.oe-toggle-list-item > summary {
 .oe-toggle-list-content > [data-node-view-content-react] > :first-child {
   margin-top: 0;
 }
+.oe-toggle-list-content > :first-child:not(:last-child),
+.oe-toggle-list-content > [data-node-view-content-react] > :first-child:not(:last-child) {
+  margin-bottom: 8px;
+}
+.oe-toggle-list-content > :first-child + *,
+.oe-toggle-list-content > [data-node-view-content-react] > :first-child + * {
+  margin-top: 8px;
+}
 .oe-toggle-list-content > :last-child,
 .oe-toggle-list-content > [data-node-view-content-react] > :last-child {
   margin-bottom: 0;
@@ -406,11 +644,12 @@ details.oe-toggle-list-item > summary {
   min-height: 34px;
   padding: 3px 6px;
   text-align: left;
+  transition: background 120ms ease;
   width: 100%;
 }
 .oe-page:hover,
 .oe-page:focus-within {
-  background: var(--oe-surface-muted, #f5f5f5);
+  background: var(--oe-block-surface, var(--oe-surface-muted, #f5f5f5));
 }
 .oe-page[data-page-id]:not([data-page-id=""]) {
   cursor: pointer;
@@ -815,6 +1054,15 @@ details.oe-toggle-list-item > summary {
   table-layout: fixed;
   width: 100%;
 }
+.oe-prosemirror .tableWrapper {
+  margin: 18px 0;
+  max-width: 100%;
+  overflow-x: auto;
+  padding: 2px;
+}
+.oe-prosemirror .tableWrapper > table {
+  margin: 0;
+}
 .oe-prosemirror .tableWrapper > table th,
 .oe-prosemirror .tableWrapper > table td,
 .oe-prosemirror table[data-openeditor-table] th,
@@ -832,6 +1080,31 @@ details.oe-toggle-list-item > summary {
 .oe-viewer table[data-openeditor-table] th {
   font-weight: 700;
 }
+.oe-prosemirror .selectedCell {
+  position: relative;
+}
+.oe-prosemirror .selectedCell::after {
+  background: color-mix(in srgb, var(--oe-accent-strong, #171717) 10%, transparent);
+  border: 2px solid var(--oe-accent-strong, #171717);
+  content: "";
+  inset: -1px;
+  pointer-events: none;
+  position: absolute;
+  z-index: 1;
+}
+.oe-prosemirror .column-resize-handle {
+  background: var(--oe-accent-strong, #171717);
+  bottom: -1px;
+  pointer-events: none;
+  position: absolute;
+  right: -2px;
+  top: -1px;
+  width: 3px;
+  z-index: 2;
+}
+.oe-prosemirror.resize-cursor {
+  cursor: col-resize;
+}
 .oe-button,
 .oe-input {
   border: 1px solid var(--oe-border-strong, #d4d4d4);
@@ -877,6 +1150,10 @@ details.oe-toggle-list-item > summary {
   outline: none;
   z-index: 1002;
 }
+.oe-anchored-overlay-positioner[data-anchor-hidden] {
+  visibility: hidden;
+  pointer-events: none;
+}
 .oe-cascade-panel {
   flex: 0 0 auto;
 }
@@ -965,6 +1242,93 @@ details.oe-toggle-list-item > summary {
   padding: 3px;
   z-index: 1000;
 }
+.oe-table-menu {
+  background: var(--oe-surface, #ffffff);
+  border-radius: 999px;
+  box-shadow: 0 0 0 1px var(--oe-shadow, rgb(0 0 0 / 7%)), 0 10px 28px var(--oe-shadow, rgb(0 0 0 / 12%));
+  padding: 3px;
+  z-index: 1000;
+}
+.oe-table-toolbar {
+  align-items: center;
+  display: flex;
+  gap: 2px;
+}
+.oe-table-toolbar-button,
+.oe-table-toolbar-trigger {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 999px;
+  color: var(--oe-text, #171717);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 650;
+  gap: 5px;
+  justify-content: center;
+  min-height: 28px;
+  min-width: 28px;
+  padding: 0 8px;
+  white-space: nowrap;
+}
+.oe-table-toolbar-button:hover,
+.oe-table-toolbar-button:focus-visible,
+.oe-table-toolbar-button[data-active],
+.oe-table-toolbar-trigger:hover,
+.oe-table-toolbar-trigger:focus-visible,
+.oe-table-toolbar-trigger[data-popup-open] {
+  background: var(--oe-surface-muted, #f5f5f5);
+  outline: none;
+}
+.oe-table-toolbar-button[data-danger] {
+  color: #b42318;
+}
+.oe-table-toolbar-button:disabled,
+.oe-table-action-item:disabled {
+  cursor: default;
+  opacity: 0.38;
+}
+.oe-table-toolbar-separator {
+  background: var(--oe-border, #e5e5e5);
+  height: 18px;
+  margin: 0 2px;
+  width: 1px;
+}
+.oe-table-action-menu {
+  background: var(--oe-surface, #ffffff);
+  border-radius: 16px;
+  box-shadow: 0 0 0 1px var(--oe-shadow, rgb(0 0 0 / 7%)), 0 12px 32px var(--oe-shadow, rgb(0 0 0 / 14%));
+  display: grid;
+  gap: 2px;
+  min-width: 190px;
+  padding: 5px;
+  z-index: 1002;
+}
+.oe-table-action-item {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 12px;
+  color: var(--oe-text, #171717);
+  cursor: pointer;
+  display: flex;
+  font-size: 13px;
+  font-weight: 620;
+  gap: 9px;
+  min-height: 34px;
+  outline: none;
+  padding: 0 10px;
+}
+.oe-table-action-item:hover,
+.oe-table-action-item:focus-visible,
+.oe-table-action-item[data-highlighted] {
+  background: var(--oe-surface-muted, #f5f5f5);
+}
+.oe-table-action-item[data-danger] {
+  color: #b42318;
+}
 .oe-selection-toolbar {
   align-items: center;
   display: flex;
@@ -1205,48 +1569,61 @@ details.oe-toggle-list-item > summary {
   opacity: 0.88;
 }
 .oe-attachment {
+  --oe-attachment-inset: 3px;
+  --oe-attachment-radius: 6px;
+  --oe-attachment-thumbnail-radius: calc(var(--oe-attachment-radius) - var(--oe-attachment-inset));
   align-items: center;
-  background: var(--oe-surface, #fff);
-  border: 1px solid var(--oe-border, #e5e5e5);
-  border-radius: 12px;
+  background: var(--oe-block-surface, var(--oe-surface-muted, #f5f5f5));
+  border: 0;
+  border-radius: var(--oe-attachment-radius);
   color: var(--oe-text, #171717);
   display: flex;
-  gap: 12px;
-  margin: 8px 0;
-  min-height: 68px;
-  padding: 10px 12px;
+  font: inherit;
+  gap: 8px;
+  margin: 4px 0;
+  min-height: 34px;
+  padding: var(--oe-attachment-inset) calc(var(--oe-attachment-inset) + var(--oe-attachment-inset));
+  position: relative;
   text-align: left;
   text-decoration: none;
-  transition:
-    border-color 140ms,
-    box-shadow 140ms,
-    background 140ms;
+  transition: background 120ms ease;
   width: 100%;
 }
 .oe-attachment:hover,
+.oe-attachment-viewer:focus-visible,
 .oe-attachment:focus-within {
-  border-color: var(--oe-border-strong, #d4d4d4);
-  box-shadow: 0 4px 18px var(--oe-shadow, rgb(0 0 0 / 8%));
+  background: color-mix(in srgb, var(--oe-block-surface, var(--oe-surface-muted, #f5f5f5)) 88%, var(--oe-text, #171717));
   outline: none;
 }
 .oe-attachment[data-state=error],
 .oe-attachment[data-state=missing] {
-  border-color: #efb0b0;
+  background: color-mix(in srgb, var(--oe-surface-muted, #f5f5f5) 90%, #c83232);
 }
-.oe-attachment-icon {
-  align-items: center;
-  background: var(--oe-surface-muted, #f5f5f5);
-  border-radius: 9px;
-  display: flex;
-  flex: 0 0 42px;
-  height: 48px;
-  justify-content: center;
+.oe-attachment-thumbnail {
+  border-radius: var(--oe-attachment-thumbnail-radius);
+  flex: 0 0 28px;
+  height: 28px;
+  margin-left: calc(0px - var(--oe-attachment-inset));
+  overflow: hidden;
 }
-.oe-attachment-icon span {
-  color: var(--oe-muted, #737373);
-  font-size: 9px;
-  font-weight: 750;
-  letter-spacing: .04em;
+.oe-attachment-thumbnail img {
+  border-radius: 0;
+  display: block;
+  height: 100%;
+  margin: 0;
+  object-fit: cover;
+  width: 100%;
+}
+.oe-attachment-open-control {
+  background: transparent;
+  border: 0;
+  border-radius: inherit;
+  cursor: pointer;
+  inset: 0;
+  outline: none;
+  padding: 0;
+  position: absolute;
+  z-index: 1;
 }
 .oe-attachment-body {
   display: flex;
@@ -1259,7 +1636,7 @@ details.oe-toggle-list-item > summary {
   border: 0;
   color: inherit;
   font: inherit;
-  font-weight: 650;
+  font-weight: 500;
   min-width: 0;
   outline: none;
   overflow: hidden;
@@ -1267,11 +1644,10 @@ details.oe-toggle-list-item > summary {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.oe-attachment-meta {
-  color: var(--oe-muted, #737373);
-  display: block;
-  font-size: 12px;
-  margin-top: 3px;
+.oe-attachment-name-input {
+  position: relative;
+  width: 100%;
+  z-index: 2;
 }
 .oe-attachment-progress {
   background: var(--oe-surface-muted, #f5f5f5);
@@ -1295,26 +1671,40 @@ details.oe-toggle-list-item > summary {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
-  gap: 4px;
+  gap: 2px;
   justify-content: flex-end;
+  position: relative;
+  z-index: 2;
 }
 .oe-attachment-actions button {
+  align-items: center;
   background: transparent;
   border: 0;
-  border-radius: 7px;
   color: var(--oe-muted, #737373);
   cursor: pointer;
+  display: inline-flex;
+  flex: 0 0 24px;
   font: inherit;
-  font-size: 12px;
-  min-height: 34px;
-  padding: 0 8px;
+  height: 24px;
+  justify-content: center;
+  min-width: 24px;
+  padding: 0;
+  width: 24px;
+}
+.oe-attachment-actions button svg {
+  height: 13px;
+  width: 13px;
 }
 .oe-attachment-actions button:hover,
 .oe-attachment-actions button:focus-visible {
-  background: var(--oe-surface-muted, #f5f5f5);
+  background: transparent;
   color: var(--oe-text, #171717);
   outline: none;
 }
+.oe-attachment-actions .oe-attachment-remove:hover,
+.oe-attachment-actions .oe-attachment-remove:focus-visible {
+  color: #c83232;
+}
 .oe-attachment-viewer {
   cursor: pointer;
 }