wysiwygido 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to this project are documented here. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and the project uses [Semantic Versioning](https://semver.org/). Until 1.0, minor versions may contain breaking changes; they are listed under "Changed" or "Removed".
 
+## 0.4.0
+
+- Added: colour themes (`Themes` plugin): light, dark, sepia, ocean, forest, rose, solarized, midnight, nord and high-contrast, a View → Themes menu, `colorTheme` / `cycleColorTheme` / `clearColorTheme` commands, your own theme from a handful of colours, and `<wysiwyg-editor theme="sepia">`.
+- Added: the editor emits a `theme` event when Dark Mode or Switch Background changes.
+
 ## 0.3.0
 
 - Added: change case (UPPER, lower, toggle, snake_case, camelCase, Title, Sentence, PascalCase, kebab-case) with shortcuts, a Home-tab menu and a right-click submenu; `Shift+F3` cycles.

package/README.md

@@ -469,6 +469,30 @@ tOGGLE cASE (`Ctrl/⌘+Alt+G`), snake_case (`Ctrl/⌘+Alt+S`), camelCase (`Ctrl/
 in the right-click menu. Upper/lower/toggle/title/sentence keep every bold, link and colour in place; snake/camel/kebab join the words into one
 identifier that takes the formatting of its first letter. From code: `editor.execute('changeCase', 'snake')` or the pure `convertCase(text, 'camel')`.
 
+## Themes
+
+Ten colour themes ship with the editor: `light`, `dark`, `sepia`, `ocean`, `forest`, `rose`, `solarized`, `midnight`, `nord` and `high-contrast`. A theme restyles the toolbar, ribbon, panels and the paper, and only inside the editor.
+
+```ts
+import { createEditor, defaultPlugins, Themes } from 'wysiwygido';
+
+createEditor({ element, plugins: [...defaultPlugins, Themes({ initial: 'sepia' })] });
+editor.execute('colorTheme', 'midnight');
+editor.execute('cycleColorTheme');
+editor.execute('clearColorTheme'); // back to the stock look
+```
+
+Pick one from **View → Themes** in the ribbon, or use `<wysiwyg-editor theme="nord">`. Dark Mode on its own returns to the stock look.
+
+Your own theme is a handful of colours; hover, borders, selection and the rest are derived from them:
+
+```ts
+Themes({ extra: [{ name: 'brand', label: 'Brand', palette: { mode: 'light', bg: '#fff8f0', surface: '#ffeede', fg: '#2a1a10',
+  muted: '#7a5a44', border: '#f0d6bf', accent: '#e8590c', workspace: '#f0d2b8', pageBg: '#fff', pageFg: '#2a1a10' } }] });
+```
+
+`editor.extensions.themes` gives `list()`, `current()`, `register(theme)`, `apply(name)` and `clear()`. A theme can also set any `--wy-*` variable through `vars`.
+
 ## Cover page
 
 `Cover` (in `defaultPlugins`) adds a cover page: one picture that fills the whole first page, edge to edge, with the text starting on page 2. Use

package/dist/adapter.js

@@ -1,4 +1,4 @@
-import { t as createEditor } from "./src-CW6adV6q.js";
+import { t as createEditor } from "./src-DmooWA6v.js";
 //#region src/adapter.ts
 /**
 * Framework-neutral binding for anything that needs a "value in, value out" control: Angular's `ControlValueAccessor`, Svelte, Solid,

package/dist/element.d.ts

@@ -16,7 +16,7 @@ export interface WysiwygElement extends HTMLElement {
  *
  *   <wysiwyg-editor value="<p>Hello</p>" ribbon paged theme="dark" name="body"></wysiwyg-editor>
  *
- * Attributes: `value`, `readonly`, `theme` (light | dark | auto), `placeholder`, `locale`, `ribbon`, `paged` (A4 pages with a ruler),
+ * Attributes: `value`, `readonly`, `theme` (light | dark | auto, or the name of a colour theme such as sepia), `placeholder`, `locale`, `ribbon`, `paged` (A4 pages with a ruler),
  * `outline`, `name` (the HTML is submitted with a surrounding form under this name). Properties: `value`, `readOnly`, `plugins`, `config`,
  * `editor`. Events: `editor-ready` and `editor-change` (`detail.html`). Load the stylesheet (`wysiwygido/style.css`) in the page:
  * the element renders in the light DOM so the document can be styled and printed like any other content.

package/dist/plugins/index.d.ts

@@ -92,3 +92,5 @@ export { Recording, isSafeClip } from './recording.js';
 export type { RecordingOptions } from './recording.js';
 export { PdfEpub } from './pdf-epub.js';
 export type { PdfEpubOptions } from './pdf-epub.js';
+export { Themes, defaultThemes, themeVars } from './themes.js';
+export type { Theme, ThemePalette, ThemesOptions, ThemeApi } from './themes.js';

package/dist/plugins/themes.d.ts

@@ -0,0 +1,54 @@
+import type { EditorPlugin } from '../types.js';
+/** A colour theme in a few colours. The rest of the interface colours are derived from these. */
+export interface ThemePalette {
+    /** Decides the browser's own controls (scrollbars, form fields) and the `light` / `dark` state of the editor. */
+    mode: 'light' | 'dark';
+    /** Toolbar, ribbon and panels. */
+    bg: string;
+    surface: string;
+    fg: string;
+    muted: string;
+    border: string;
+    /** Buttons, selections, focus. */
+    accent: string;
+    /** Area around the pages. */
+    workspace: string;
+    /** The paper and its text. */
+    pageBg: string;
+    pageFg: string;
+    /** Links in the document. Default: the accent. */
+    link?: string;
+}
+export interface Theme {
+    /** Id used by `editor.execute('colorTheme', id)`. */
+    name: string;
+    label: string;
+    palette: ThemePalette;
+    /** Any further `--wy-*` variables to set, with or without the leading dashes. */
+    vars?: Record<string, string>;
+}
+/** Expands a palette into the editor's CSS variables. */
+export declare function themeVars(p: ThemePalette): Record<string, string>;
+/** The themes that come with the editor. `light` and `dark` are the stock look. */
+export declare const defaultThemes: Theme[];
+export interface ThemesOptions {
+    /** Theme applied on start. Default: leave the editor's own `theme` option as it is. */
+    initial?: string;
+    /** Replace the built-in list. */
+    themes?: Theme[];
+    /** Add to the built-in list (same name replaces). */
+    extra?: Theme[];
+}
+/** The API stored on `editor.extensions.themes`. */
+export interface ThemeApi {
+    list(): Theme[];
+    current(): string | null;
+    register(theme: Theme): void;
+    apply(name: string): boolean;
+    clear(): void;
+}
+/**
+ * Colour themes: `editor.execute('colorTheme', 'sepia')`, the View → Themes menu, or `editor.extensions.themes`.
+ * A theme sets the CSS variables on the editor element, so it never leaks outside it. Switching Dark Mode afterwards returns to the stock look.
+ */
+export declare function Themes(options?: ThemesOptions): EditorPlugin;

package/dist/react.js

@@ -1,4 +1,4 @@
-import { t as createEditor } from "./src-CW6adV6q.js";
+import { t as createEditor } from "./src-DmooWA6v.js";
 import { createElement, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react";
 //#region src/react.ts
 /** React wrapper (needs the optional `react` peer dependency). */