stilo-editor 0.2.1 → 0.3.1

package/dist/style.css

@@ -152,6 +152,15 @@ li.ProseMirror-selectednode:after {
 
 /* Stilo content defaults */
 
+/*
+ * The editable area gets some room around the text and a visible height when empty.
+ * `:where()` has no specificity, so any rule of the page replaces these values.
+ */
+:where(.stilo-content.ProseMirror) {
+  min-height: 6em;
+  padding: 12px 16px;
+}
+
 /* Lists: list items hold paragraphs, which must not add their own margins. */
 .stilo-content ul,
 .stilo-content ol {

package/dist/svelte/action.d.ts

@@ -0,0 +1,5 @@
+/** Public API of `stilo-editor/svelte/action`: the Svelte actions, for Svelte 4 and 5. */
+/** The editor alone, for a custom UI. */
+export { type StiloEditorOptions, stiloEditor } from './editor-action';
+/** The editor with the default UI. */
+export { type StiloEditorCallbacks, type StiloEditorWithUIOptions, stiloEditorWithUI, } from './editor-with-ui-action';

package/dist/svelte/action.js

@@ -0,0 +1 @@
+export { n as stiloEditor, t as stiloEditorWithUI } from "../action-lB2jnYNO.js";

package/dist/svelte/editor-action.d.ts

@@ -0,0 +1,15 @@
+import type { ActionReturn } from 'svelte/action';
+import { Editor, type EditorOptions } from '../index';
+/** Options of {@link stiloEditor}: the editor options without `element`. */
+export interface StiloEditorOptions extends Omit<EditorOptions, 'element'> {
+    /** Called with the editor once it is created. */
+    onready?: (editor: Editor) => void;
+}
+/**
+ * Svelte action that creates an editor inside its element and destroys it when the element
+ * goes: `<div use:stiloEditor={options}>`. The options are read once, when the editor is
+ * created; only `editable` follows their changes.
+ */
+export declare function stiloEditor(node: HTMLElement, options: StiloEditorOptions): ActionReturn<StiloEditorOptions>;
+/** Applies a new value of the `editable` option. */
+export declare function followEditable(editor: Editor, editable: boolean | undefined): void;

package/dist/svelte/editor-with-ui-action.d.ts

@@ -0,0 +1,35 @@
+import type { ActionReturn } from 'svelte/action';
+import { type EditorEvents, type EditorOptions, type EventHandler } from '../index';
+import { type Messages, type ToolbarOptions } from '../ui/index';
+import { type StiloEditorOptions } from './editor-action';
+/** Editor events forwarded to the callbacks of {@link stiloEditorWithUI}. */
+declare const CALLBACKS: {
+    readonly input: 'oninput';
+    readonly selectionchange: 'onselectionchange';
+    readonly transaction: 'ontransaction';
+    readonly focus: 'onfocus';
+    readonly blur: 'onblur';
+};
+type ForwardedEvent = keyof typeof CALLBACKS;
+/** Callbacks of {@link stiloEditorWithUI}: `oninput` for `input`, and so on. */
+export type StiloEditorCallbacks = {
+    [E in ForwardedEvent as (typeof CALLBACKS)[E]]?: EventHandler<EditorEvents[E]>;
+};
+/** Options of {@link stiloEditorWithUI}, and props of the `StiloEditor` component. */
+export interface StiloEditorWithUIOptions extends Omit<StiloEditorOptions, 'extensions'>, StiloEditorCallbacks {
+    /** Extensions to load. Default: `[defaultExtensions()]`. */
+    extensions?: EditorOptions['extensions'];
+    /** The default toolbar: `true` (default), `false`, or its options without `container`. */
+    toolbar?: boolean | Omit<ToolbarOptions, 'container' | 'messages'>;
+    /** The status bar with the word and character count, under the editor. Default: `false`. */
+    statusBar?: boolean;
+    /** Strings of the toolbar and the status bar. Default: `en`. */
+    messages?: Messages;
+}
+/**
+ * Svelte action that creates the editor with the default UI inside its element:
+ * `<div use:stiloEditorWithUI={options}>`. The options are read once, when the editor is
+ * created, except `editable` and the callbacks, which follow their changes.
+ */
+export declare function stiloEditorWithUI(node: HTMLElement, options?: StiloEditorWithUIOptions): ActionReturn<StiloEditorWithUIOptions>;
+export {};

package/dist/svelte/index.d.ts

@@ -0,0 +1,5 @@
+/** Public API of the Stilo Svelte wrapper, for Svelte 5. */
+/** The actions. */
+export * from './action';
+/** The editor with the default UI. */
+export { default as StiloEditor, type StiloEditorProps } from './stilo-editor.svelte';

package/dist/svelte/index.js

@@ -0,0 +1,3 @@
+import { n as e, t } from "../action-lB2jnYNO.js";
+import n from "./stilo-editor.svelte";
+export { n as StiloEditor, e as stiloEditor, t as stiloEditorWithUI };

package/dist/svelte/stilo-editor.svelte

@@ -0,0 +1,47 @@
+<script>
+  import { stiloEditorWithUI } from './action.js';
+
+  let {
+    editor = $bindable(null),
+    extensions,
+    content,
+    editable,
+    autofocus,
+    ariaLabel,
+    compactParagraphs,
+    toolbar,
+    statusBar,
+    messages,
+    onready,
+    oninput,
+    onselectionchange,
+    ontransaction,
+    onfocus,
+    onblur,
+    ...attributes
+  } = $props();
+</script>
+
+<div
+  {...attributes}
+  use:stiloEditorWithUI={{
+    extensions,
+    content,
+    editable,
+    autofocus,
+    ariaLabel,
+    compactParagraphs,
+    toolbar,
+    statusBar,
+    messages,
+    oninput,
+    onselectionchange,
+    ontransaction,
+    onfocus,
+    onblur,
+    onready: (created) => {
+      editor = created;
+      onready?.(created);
+    },
+  }}
+></div>

package/dist/svelte/stilo-editor.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Component } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Editor } from '../index';
+import type { StiloEditorWithUIOptions } from './editor-with-ui-action';
+
+/**
+ * Props of `StiloEditor`: the options of `stiloEditorWithUI`, `editor` to bind, and the
+ * attributes of its element.
+ */
+export interface StiloEditorProps
+  extends StiloEditorWithUIOptions,
+    Omit<HTMLAttributes<HTMLDivElement>, keyof StiloEditorWithUIOptions> {
+  /** The editor, for `bind:editor`; `null` until it is created. */
+  editor?: Editor | null;
+}
+
+/**
+ * The editor with the default UI. The props are read once, when the editor is created, except
+ * `editable` and the callbacks, which follow their changes.
+ */
+declare const StiloEditor: Component<StiloEditorProps, object, 'editor'>;
+export default StiloEditor;

package/dist/ui/components/link-popover.d.ts

@@ -14,7 +14,10 @@ export interface LinkPopover {
     close(): void;
     destroy(): void;
 }
-/** Whether the selection is in a link or can be linked (a cursor outside a link cannot). */
+/**
+ * Whether the editor is editable and the selection is in a link or can be linked (a cursor
+ * outside a link cannot).
+ */
 export declare function canEditLink(editor: Editor): boolean;
 /** Creates the link popover (closed), anchored to the selection of `editor`. */
 export declare function createLinkPopover(editor: Editor, options: LinkPopoverOptions): LinkPopover;