stilo-editor 0.1.0 → 0.2.0

package/dist/style.css

@@ -96,6 +96,60 @@ li.ProseMirror-selectednode:after {
   display: block;
 }
 
+/*
+ * prosemirror-tables/style/tables.css. Copyright (C) 2015-2016 by Marijn Haverbeke and others,
+ * MIT license. Adapted: one `cursor` value, the colors from the Stilo custom properties.
+ */
+.ProseMirror .tableWrapper {
+  overflow-x: auto;
+}
+
+.ProseMirror table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
+  overflow: hidden;
+}
+
+.ProseMirror td,
+.ProseMirror th {
+  vertical-align: top;
+  box-sizing: border-box;
+  position: relative;
+}
+
+.ProseMirror td:not([data-colwidth]):not(.column-resize-dragging),
+.ProseMirror th:not([data-colwidth]):not(.column-resize-dragging) {
+  min-width: var(--default-cell-min-width);
+}
+
+.ProseMirror .column-resize-handle {
+  position: absolute;
+  right: -2px;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  z-index: 20;
+  background-color: var(--stilo-color-focus, #0969da);
+  pointer-events: none;
+}
+
+.ProseMirror.resize-cursor {
+  cursor: col-resize;
+}
+
+.ProseMirror .selectedCell:after {
+  z-index: 2;
+  position: absolute;
+  content: "";
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: var(--stilo-color-selected-cell, rgb(9 105 218 / 0.12));
+  pointer-events: none;
+}
+
 /* Stilo content defaults */
 
 /* Lists: list items hold paragraphs, which must not add their own margins. */
@@ -107,10 +161,81 @@ li.ProseMirror-selectednode:after {
 
 .stilo-content li > p,
 .stilo-content li > ul,
-.stilo-content li > ol {
+.stilo-content li > ol,
+.stilo-content .stilo-task-item__content > p,
+.stilo-content .stilo-task-item__content > ul,
+.stilo-content .stilo-task-item__content > ol {
   margin: 0;
 }
 
+/* Task lists: a checkbox in place of the bullet, done items struck through. In the editor the
+   item is a flex row: its <input> checkbox, then the content (ProseMirror needs a container that
+   holds only the content). Content shown elsewhere under the class stilo-content gets a box drawn
+   from data-checked instead. Either way the box is centered on the first line, not on the whole
+   item, which may hold more paragraphs and sub-lists. */
+.stilo-content ul[data-type="taskList"] {
+  list-style: none;
+}
+
+.stilo-content.ProseMirror ul[data-type="taskList"] {
+  padding-left: 0.25em;
+}
+
+.stilo-content.ProseMirror ul[data-type="taskList"] > li {
+  display: flex;
+  gap: 0.5em;
+}
+
+.stilo-task-item__content {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Form controls have their own font: inherit it, so that em and lh are those of the text. */
+.stilo-task-item__checkbox {
+  flex: none;
+  width: 1em;
+  height: 1em;
+  margin: calc(0.5lh - 0.5em) 0 0;
+  font-size: inherit;
+  line-height: inherit;
+  accent-color: var(--stilo-color-focus, #0969da);
+  cursor: pointer;
+}
+
+.stilo-content:not(.ProseMirror) ul[data-type="taskList"] > li {
+  position: relative;
+}
+
+.stilo-content:not(.ProseMirror) ul[data-type="taskList"] > li::before {
+  content: "";
+  display: flex;
+  position: absolute;
+  top: calc(0.5lh - 0.5em);
+  left: -1.5em;
+  box-sizing: border-box;
+  width: 1em;
+  height: 1em;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--stilo-color-muted, #59636e);
+  border-radius: 0.2em;
+  color: #ffffff;
+}
+
+.stilo-content:not(.ProseMirror) ul[data-type="taskList"] > li[data-checked="true"]::before {
+  content: "\2713";
+  border-color: var(--stilo-color-focus, #0969da);
+  background: var(--stilo-color-focus, #0969da);
+}
+
+.stilo-content [data-checked="true"] > .stilo-task-item__content > p:first-child,
+.stilo-content:not(.ProseMirror) [data-checked="true"] > p:first-child,
+.stilo-content:not(.ProseMirror) [data-checked="true"]:not(:has(> p)) {
+  color: var(--stilo-color-muted, #59636e);
+  text-decoration: line-through;
+}
+
 .stilo-content blockquote {
   margin: 0.5em 0;
   padding-left: 1em;
@@ -132,6 +257,109 @@ li.ProseMirror-selectednode:after {
   font-size: 0.9em;
 }
 
+/* Code block: the <code> inside it drops the inline code box. */
+.stilo-content pre {
+  margin: 0.5em 0;
+  padding: 0.75em 1em;
+  border-radius: 0.375em;
+  background: var(--stilo-color-hover, #eef1f4);
+  font-family: ui-monospace, monospace;
+  font-size: 0.9em;
+  line-height: 1.5;
+}
+
+.stilo-content pre code {
+  padding: 0;
+  border-radius: 0;
+  background: none;
+  font-size: inherit;
+}
+
+/* Tables: a cell holds blocks, whose outer margins would pad the cell twice. */
+.stilo-content .tableWrapper {
+  margin: 1em 0;
+}
+
+.stilo-content td,
+.stilo-content th {
+  padding: 6px 8px;
+  border: 1px solid var(--stilo-color-border, #d1d9e0);
+}
+
+.stilo-content th {
+  background: var(--stilo-color-table-header, #f6f8fa);
+  font-weight: 600;
+  text-align: start;
+}
+
+.stilo-content td > :first-child,
+.stilo-content th > :first-child {
+  margin-top: 0;
+}
+
+/* The resize handle shown on hover is the last child of its cell: the block before it is the last
+   block, otherwise its margin would come back and the table grow under the mouse. */
+.stilo-content td > :last-child,
+.stilo-content th > :last-child,
+.stilo-content td > :has(+ .column-resize-handle:last-child),
+.stilo-content th > :has(+ .column-resize-handle:last-child) {
+  margin-bottom: 0;
+}
+
+/* Images: never wider than the content; with width and height they keep their ratio. */
+.stilo-content img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Image in the editor: two side handles, inside the image (a top-level block clips what
+   overflows it, see "Large documents" below), shown while the image is selected. Only a selected
+   image is positioned: a positioned element paints over the caret placed right after it. */
+.stilo-image {
+  display: inline-block;
+  max-width: 100%;
+}
+
+.stilo-image.ProseMirror-selectednode {
+  position: relative;
+}
+
+.stilo-image img {
+  display: block;
+}
+
+.stilo-image__handle {
+  display: none;
+  position: absolute;
+  top: 50%;
+  width: 6px;
+  height: min(48px, 50%);
+  min-height: 16px;
+  transform: translateY(-50%);
+  border: 1px solid #ffffff;
+  border-radius: 3px;
+  background: var(--stilo-color-text, #1f2328);
+  opacity: 0.7;
+  cursor: ew-resize;
+  touch-action: none;
+}
+
+.stilo-image__handle--left {
+  left: 6px;
+}
+
+.stilo-image__handle--right {
+  right: 6px;
+}
+
+.stilo-content[contenteditable="true"] .stilo-image.ProseMirror-selectednode .stilo-image__handle {
+  display: block;
+}
+
+.stilo-image__handle:hover {
+  opacity: 1;
+}
+
 /* Placeholder: shown only while the content is editable. */
 .stilo-content[contenteditable="true"] .stilo-placeholder::before {
   content: attr(data-placeholder);
@@ -160,6 +388,15 @@ li.ProseMirror-selectednode:after {
   margin-bottom: 0;
 }
 
+/* Find and replace (T-043): the matches and the selected one */
+.stilo-search-match {
+  background: var(--stilo-color-search-match, #fff1a8);
+}
+
+.stilo-search-match--current {
+  background: var(--stilo-color-search-current, #ffb347);
+}
+
 /* Stilo default UI styles. */
 
 /*
@@ -302,6 +539,11 @@ li.ProseMirror-selectednode:after {
   background: var(--stilo-color-active);
 }
 
+/* The find button while its bar is open (T-043) */
+.stilo-toolbar__button[data-item="find"][aria-expanded="true"] {
+  background: var(--stilo-color-active);
+}
+
 .stilo-toolbar__button[aria-disabled="true"] {
   opacity: 0.4;
   cursor: default;
@@ -346,13 +588,24 @@ li.ProseMirror-selectednode:after {
   width: auto;
   min-width: 120px;
   justify-content: space-between;
+  gap: 6px;
   padding: 0 8px;
 }
 
+.stilo-dropdown__trigger[data-item="fontFamily"] {
+  width: 120px;
+}
+
+/* A long value is truncated, the chevron keeps its size */
+.stilo-dropdown__trigger .stilo-icon {
+  flex-shrink: 0;
+}
+
 .stilo-dropdown__value {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  font-weight: 600;
 }
 
 .stilo-dropdown__menu {
@@ -434,6 +687,87 @@ li.ProseMirror-selectednode:after {
   font-weight: 600;
 }
 
+/* Font size control: − field + */
+.stilo-font-size {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--stilo-toolbar-gap);
+}
+
+.stilo-font-size__input {
+  box-sizing: border-box;
+  width: 2.5em;
+  height: calc(var(--stilo-button-size) - 4px);
+  padding: 0 4px;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  background: var(--stilo-color-bg);
+  color: var(--stilo-color-text);
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  text-align: center;
+  font-weight: 600;
+}
+
+.stilo-font-size__input:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: -1px;
+}
+
+.stilo-font-size__input[aria-invalid="true"] {
+  border-color: var(--stilo-color-error);
+}
+
+.stilo-font-size__input[aria-disabled="true"] {
+  opacity: 0.4;
+}
+
+.stilo-font-size__list {
+  min-width: 4.5em;
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.stilo-font-size__option {
+  padding: 4px 12px;
+  border-radius: var(--stilo-radius);
+  cursor: pointer;
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  color: var(--stilo-color-text);
+  text-align: center;
+}
+
+.stilo-font-size__option:hover,
+.stilo-font-size__option--active {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-font-size__option[aria-selected="true"] {
+  background: var(--stilo-color-active);
+}
+
+/* Icon menu (text alignment): the options in a row. An icon dropdown (line spacing) has the same
+   trigger. */
+.stilo-icon-menu__trigger,
+.stilo-dropdown__trigger--icon {
+  width: auto;
+  min-width: var(--stilo-button-size);
+  gap: 2px;
+  padding: 0 4px;
+}
+
+.stilo-icon-menu {
+  display: flex;
+  gap: var(--stilo-toolbar-gap);
+}
+
+.stilo-icon-menu__trigger .stilo-icon:last-child,
+.stilo-dropdown__trigger--icon .stilo-icon:last-child {
+  width: 12px;
+  height: 12px;
+}
+
 /* Link popover */
 .stilo-link-popover__form {
   display: flex;
@@ -624,6 +958,132 @@ li.ProseMirror-selectednode:after {
   color: var(--stilo-color-muted);
 }
 
+/* Table menu (T-045): insert grid of 10 columns (GRID_COLUMNS in table-menu.ts), operations */
+.stilo-table-menu {
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  color: var(--stilo-color-text);
+}
+
+.stilo-table-menu__picker {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 4px;
+}
+
+.stilo-table-menu__picker[hidden],
+.stilo-table-menu__actions[hidden] {
+  display: none;
+}
+
+.stilo-table-menu__grid {
+  display: grid;
+  grid-template-columns: repeat(10, 18px);
+  gap: 3px;
+}
+
+.stilo-table-menu__cell {
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: 3px;
+  background: var(--stilo-color-bg);
+  cursor: pointer;
+}
+
+.stilo-table-menu__cell--active {
+  border-color: var(--stilo-color-focus);
+  background: var(--stilo-color-active);
+}
+
+.stilo-table-menu__cell:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: 1px;
+}
+
+.stilo-table-menu__size {
+  text-align: center;
+  color: var(--stilo-color-muted);
+}
+
+.stilo-table-menu__header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+}
+
+.stilo-table-menu__actions {
+  min-width: 200px;
+}
+
+.stilo-table-menu__actions .stilo-dropdown__option[aria-checked] {
+  background: transparent;
+}
+
+.stilo-table-menu__actions .stilo-dropdown__option[aria-checked]:hover,
+.stilo-table-menu__actions .stilo-dropdown__option[aria-checked]:focus-visible {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-table-menu__actions .stilo-dropdown__option[aria-checked]::after {
+  content: "✓";
+  margin-left: auto;
+  visibility: hidden;
+}
+
+.stilo-table-menu__actions .stilo-dropdown__option[aria-checked="true"]::after {
+  visibility: visible;
+}
+
+/* Table handles (T-049): row, column and corner, over the editor */
+.stilo-table-handle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: var(--stilo-z-popover);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  background: var(--stilo-color-bg);
+  color: var(--stilo-color-muted);
+  cursor: pointer;
+}
+
+.stilo-table-handle[hidden] {
+  display: none;
+}
+
+.stilo-table-handle:hover,
+.stilo-table-handle[aria-expanded="true"] {
+  border-color: var(--stilo-color-focus);
+  color: var(--stilo-color-focus);
+}
+
+.stilo-table-handle .stilo-icon {
+  width: 14px;
+  height: 14px;
+}
+
+.stilo-table-handle-menu {
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  color: var(--stilo-color-text);
+}
+
+.stilo-table-menu__separator {
+  height: 1px;
+  margin: 4px 0;
+  background: var(--stilo-color-separator);
+}
+
 /* Color split button (T-026): the main part shows the last used color under its icon */
 .stilo-split {
   display: flex;
@@ -795,3 +1255,141 @@ li.ProseMirror-selectednode:after {
   font: inherit;
   cursor: pointer;
 }
+
+/*
+ * Find bar (T-043): a floating panel at the top right, just under the toolbar, over the content
+ * (the content does not move). It lives in the toolbar container, so it stays at the top with a
+ * sticky toolbar; without `sticky` the container is made a positioned ancestor.
+ */
+.stilo-find-bar-host:not(.stilo-toolbar-host) {
+  position: relative;
+}
+
+.stilo-find-bar {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 8px;
+  /* Under the popovers of the toolbar (character picker, colors, menus), which open over it. */
+  z-index: calc(var(--stilo-z-popover) - 1);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-width: calc(100% - 16px);
+  padding: 6px 8px;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  background: var(--stilo-color-bg);
+  box-shadow: var(--stilo-popover-shadow);
+  color: var(--stilo-color-text);
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease,
+    display 0.15s allow-discrete;
+}
+
+/* Slides in from above; browsers without @starting-style show it at once. */
+@starting-style {
+  .stilo-find-bar {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .stilo-find-bar {
+    transition: none;
+  }
+}
+
+.stilo-find-bar__row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.stilo-find-bar[hidden] {
+  display: none;
+  opacity: 0;
+  transform: translateY(-6px);
+}
+
+.stilo-find-bar__row[hidden] {
+  display: none;
+}
+
+.stilo-find-bar__input {
+  box-sizing: border-box;
+  width: 200px;
+  min-width: 0;
+  flex: 1 1 auto;
+  padding: 4px 8px;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  background: var(--stilo-color-bg);
+  color: inherit;
+  font: inherit;
+}
+
+.stilo-find-bar__input:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: -1px;
+}
+
+.stilo-find-bar__count {
+  min-width: 7em;
+  color: var(--stilo-color-muted);
+  font-size: 0.9em;
+  white-space: nowrap;
+}
+
+.stilo-find-bar__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: var(--stilo-radius);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+}
+
+.stilo-find-bar__button:hover {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-find-bar__button:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: 1px;
+}
+
+.stilo-find-bar__toggle[aria-pressed="true"] {
+  background: var(--stilo-color-active);
+}
+
+.stilo-find-bar__button--text {
+  padding: 0 10px;
+  white-space: nowrap;
+  border: 1px solid var(--stilo-color-border);
+  background: var(--stilo-color-bg);
+}
+
+/* Status bar (T-043): word and character count under the editor */
+.stilo-status-bar {
+  display: flex;
+  gap: 16px;
+  padding: 4px 12px;
+  border-top: 1px solid var(--stilo-color-separator);
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+  background: var(--stilo-color-toolbar-bg);
+  color: var(--stilo-color-muted);
+  font-family: var(--stilo-font-family);
+  font-size: 12px;
+}

package/dist/ui/components/dropdown.d.ts

@@ -1,13 +1,20 @@
+import { type IconNode } from 'lucide';
 /** One option as displayed: label and shortcut already resolved and formatted. */
 export interface DropdownOptionView {
     id: string;
     label: string;
     shortcut?: string;
+    /** The label is drawn in this font family. */
+    fontFamily?: string;
+    /** An action (`menuitem`), never checked; otherwise a `menuitemradio`. */
+    action?: boolean;
 }
 export interface DropdownOptions {
     /** Accessible name of the trigger and of the menu; shown when no option is active. */
     label: string;
     options: DropdownOptionView[];
+    /** Shown by the trigger instead of the value; the value stays in its accessible name. */
+    icon?: IconNode;
     /** The popover container (the toolbar element). */
     container: HTMLElement;
     onSelect(id: string): void;
@@ -15,6 +22,8 @@ export interface DropdownOptions {
 export interface DropdownState {
     activeId: string | null;
     disabledIds: ReadonlySet<string>;
+    /** Shown by the trigger when no option is active; default: the dropdown label. */
+    valueLabel?: string | null;
 }
 export interface Dropdown {
     /** The trigger button; the toolbar inserts it in its group. */

package/dist/ui/components/find-bar.d.ts

@@ -0,0 +1,24 @@
+import type { Editor } from '../../index';
+import type { Messages } from '../i18n/types';
+/** Options of {@link createFindBar}. */
+export interface FindBarOptions {
+    /** The find bar is appended inside it, after the toolbar. */
+    container: HTMLElement;
+    messages: Messages;
+    /** The toolbar button that toggles the bar: it gets `aria-expanded`. */
+    button?: HTMLElement | null;
+}
+/** The find and replace bar (T-043). */
+export interface FindBar {
+    readonly element: HTMLElement;
+    readonly isOpen: boolean;
+    /** Shows the bar and focuses the find field, prefilled with the selected text. */
+    open(): void;
+    /** Hides the bar, clears the search and gives the focus back to the editor. */
+    close(): void;
+    /** Closes the bar when it is open, otherwise opens it. */
+    toggle(): void;
+    destroy(): void;
+}
+/** Creates the find bar (hidden). */
+export declare function createFindBar(editor: Editor, options: FindBarOptions): FindBar;