@dou-ui/editor 0.0.0-stage → 0.1.0-alpha.0

package/dist/types/extensions/colors/palette.d.ts

@@ -0,0 +1,7 @@
+import type { Command } from 'prosemirror-state';
+import { isColor, textColors, type TextColor } from '../../core/colors';
+export { isColor, textColors, type TextColor };
+/** Set (or with `null` clear) the text color of the selection. */
+export declare function setTextColor(color: TextColor | null): Command;
+/** Set (or with `null` clear) the background color of the selection. */
+export declare function setHighlight(color: TextColor | null): Command;

package/dist/types/extensions/editor-kit.d.ts

@@ -0,0 +1,37 @@
+import type { EditorExtension } from '../core/extension';
+import { divider, heading, paragraph, quote } from './blocks';
+import { align } from './align';
+import { callout } from './callout';
+import { colors } from './colors';
+import { codeBlock, type CodeBlockOptions } from './code-block';
+import { formatting, link } from './formatting';
+import { lists } from './lists';
+import { table } from './table';
+import { toggle } from './toggle';
+export interface EditorKitOptions {
+    heading?: boolean;
+    lists?: boolean;
+    quote?: boolean;
+    /**
+     * Options for the code block, e.g. its highlighter, or `false` to leave
+     * it out. Another code block extension takes its place, e.g.
+     * `codeEditorBlock()` from `@dou-ui/editor/code`.
+     */
+    codeBlock?: boolean | CodeBlockOptions | EditorExtension;
+    divider?: boolean;
+    toggle?: boolean;
+    callout?: boolean;
+    table?: boolean;
+    formatting?: boolean;
+    link?: boolean;
+    /** Text and background colors. */
+    colors?: boolean;
+    /** Aligning paragraphs, headings and quotes. */
+    align?: boolean;
+}
+/**
+ * The built-in blocks and formatting. Pass `false` for any part to leave
+ * it out, e.g. `editorKit({ codeBlock: false })`.
+ */
+export declare function editorKit(options?: EditorKitOptions): EditorExtension[];
+export { align, callout, colors, codeBlock, divider, formatting, heading, link, lists, paragraph, quote, table, toggle, };

package/dist/types/extensions/embed/embed-block.vue.d.ts

@@ -0,0 +1,16 @@
+import type { BlockProps } from '../../core/model';
+import { type EmbedTarget } from './targets';
+type __VLS_Props = {
+    block: {
+        id: string;
+        type: string;
+        props: BlockProps;
+    };
+    updateProps: (props: BlockProps) => void;
+    selected: boolean;
+    editable: boolean;
+    resolve: (url: string) => EmbedTarget | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/extensions/embed/index.d.ts

@@ -0,0 +1,18 @@
+import type { EditorExtension } from '../../core/extension';
+import { resolveEmbed, type EmbedResolver, type EmbedTarget } from './targets';
+export interface EmbedOptions {
+    /**
+     * Turn a link into what the block shows: a frame, a video or an audio
+     * player, or `null` to refuse it. The block keeps the link itself, so a
+     * changed resolver applies to documents already written. Only https
+     * addresses are ever loaded. By default media files play in the browser's
+     * player and other pages show in a frame.
+     */
+    resolve?: EmbedResolver;
+}
+/**
+ * Embed blocks: a web page, a video or an audio file from a link, with a
+ * caption. Only https links are embedded.
+ */
+export declare function embed(options?: EmbedOptions): EditorExtension;
+export { resolveEmbed, type EmbedResolver, type EmbedTarget };

package/dist/types/extensions/embed/targets.d.ts

@@ -0,0 +1,32 @@
+/** What an embed block shows for its link. */
+export interface EmbedTarget {
+    /** A web page in a frame, or the browser's own video or audio player. */
+    kind: 'frame' | 'video' | 'audio';
+    /** The address the frame or player loads; it may differ from the link, as for a player page. */
+    src: string;
+    /** Width over height of a frame or video. Default `16 / 9`. */
+    aspectRatio?: number;
+    /** A frame's fixed height in px, instead of `aspectRatio`. */
+    height?: number;
+}
+/** Turns a link into what the block shows, or `null` to refuse the link. */
+export type EmbedResolver = (url: string) => EmbedTarget | null;
+/** The link as a URL, when it is an absolute https address. */
+export declare function httpsUrl(value: string): URL | null;
+/**
+ * The default: https links only. Media files play in the browser's player,
+ * any other page shows in a frame. Frames of the editor's own site are
+ * refused whatever the resolver (see `checkTarget`).
+ */
+export declare const resolveEmbed: EmbedResolver;
+/** What frames may do: run scripts, open links in a new tab, go full screen. */
+export declare const frameSandbox = "allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-presentation allow-forms";
+export declare const frameAllow = "fullscreen; picture-in-picture; encrypted-media; clipboard-write";
+/**
+ * A resolver's answer, checked: only https addresses get through, and no
+ * frame of the page's own site, which the sandbox would not keep apart
+ * (it allows scripts and the site's own storage). Without a page (on a
+ * server) the site is unknown: see the docs.
+ */
+export declare function checkTarget(target: EmbedTarget | null | undefined): EmbedTarget | null;
+export declare function ratioOf(target: EmbedTarget): number;

package/dist/types/extensions/formatting.d.ts

@@ -0,0 +1,8 @@
+/** Bold, italic, underline, strikethrough and inline code, with shortcuts and toolbar toggles. */
+export declare const formatting: import("..").EditorExtension;
+/**
+ * Links. Only web pages, mail, phone numbers and relative paths are kept;
+ * the formatting toolbar edits them, and `Mod+K` opens the editor for the
+ * selected text.
+ */
+export declare const link: import("..").EditorExtension;

package/dist/types/extensions/image/image-block.vue.d.ts

@@ -0,0 +1,16 @@
+import type { BlockProps } from '../../core/model';
+import { type Uploads } from './uploads';
+type __VLS_Props = {
+    block: {
+        id: string;
+        type: string;
+        props: BlockProps;
+    };
+    updateProps: (props: BlockProps) => void;
+    selected: boolean;
+    editable: boolean;
+    uploads: Uploads;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/extensions/image/index.d.ts

@@ -0,0 +1,16 @@
+import type { EditorExtension } from '../../core/extension';
+import { isSafeImageSrc, readAsDataUrl, type FileUploader } from './uploads';
+export interface ImageOptions {
+    /**
+     * Store a picked, pasted or dropped file and resolve with its address.
+     * Without it, images are kept in the document as data URLs, which suits
+     * trying things out but makes documents large.
+     */
+    upload?: FileUploader;
+}
+/**
+ * Image blocks: upload a file, paste or drop images, or embed a link. The
+ * image can be resized and given a caption.
+ */
+export declare function image(options?: ImageOptions): EditorExtension;
+export { isSafeImageSrc, readAsDataUrl, type FileUploader };

package/dist/types/extensions/image/uploads.d.ts

@@ -0,0 +1,35 @@
+import type { EditorView } from 'prosemirror-view';
+/** Stores a picked, pasted or dropped file (an image or an attachment) and resolves with its address. */
+export type FileUploader = (file: File) => Promise<string>;
+/** Without an uploader the image is kept in the document as a data URL. */
+export declare const readAsDataUrl: FileUploader;
+/** Image addresses that are safe to show: web, relative, and images held in the page. */
+export declare function isSafeImageSrc(src: string): boolean;
+export interface Upload {
+    /** A local copy shown while uploading. */
+    preview: string;
+    failed: boolean;
+}
+/** What blocks hold uploaded files: an image or an attachment. */
+export interface UploadTarget {
+    /** The block type. */
+    type: string;
+    /** Whether an uploader's address may be stored. */
+    isSafe: (src: string) => boolean;
+    /** Props taken from the file when it is picked, e.g. its name and size. */
+    propsOf?: (file: File) => Record<string, unknown>;
+    /** The addresses `isSafe` takes, for the warning when an uploader returns another. */
+    allowed: string;
+}
+/**
+ * Uploads in progress, by block id. They live outside the document: only
+ * the finished address is written into it, so other collaborators never
+ * see a half-done image.
+ */
+export declare function createUploads(upload: FileUploader, target?: UploadTarget): {
+    items: import("vue").Reactive<Map<string, Upload>>;
+    start: (view: EditorView, id: string, file: File, describe?: boolean) => void;
+    insert: (view: EditorView, files: File[], pos: number) => number;
+    setSrc: (view: EditorView, id: string, src: string) => void;
+};
+export type Uploads = ReturnType<typeof createUploads>;

package/dist/types/extensions/list-html.d.ts

@@ -0,0 +1,11 @@
+import { type BlockOutputContext } from '../core/output';
+/**
+ * Lists from other apps nest a list inside an item (`<li>text<ul>…</ul></li>`),
+ * but a list item here is a block of text with child blocks. Rewrite them
+ * into blocks before parsing, so nesting survives. Task lists
+ * (`<li><input type="checkbox">`, or `[ ]` / `[x]` before the text as
+ * Markdown writes them) become to-do items.
+ */
+export declare function prepareLists(root: HTMLElement): void;
+/** A list item in Markdown: the marker, the text, and the children indented under it. */
+export declare function listItemMarkdown(marker: string, { content, children }: BlockOutputContext): string;

package/dist/types/extensions/lists.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Bulleted, numbered and to-do lists. Each item is a block of its own:
+ * `Enter` continues the list, `Tab` nests an item. Pasted HTML lists keep
+ * their nesting, and task lists become to-do items.
+ */
+export declare const lists: import("..").EditorExtension;

package/dist/types/extensions/mention/index.d.ts

@@ -0,0 +1,11 @@
+import { type EditorExtension } from '../../core/extension';
+import { type MentionItem } from './state';
+export interface MentionOptions {
+    /**
+     * Finds who matches what was typed after the `@` (empty right after it).
+     * Can return a Promise; only the answer to the latest query is shown.
+     */
+    search: (query: string) => MentionItem[] | Promise<MentionItem[]>;
+}
+export declare function mention(options: MentionOptions): EditorExtension;
+export type { MentionItem };

package/dist/types/extensions/mention/mention-menu.vue.d.ts

@@ -0,0 +1,7 @@
+import { type MentionItem } from './state';
+type __VLS_Props = {
+    search: (query: string) => MentionItem[] | Promise<MentionItem[]>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/extensions/mention/state.d.ts

@@ -0,0 +1,28 @@
+import { Plugin, PluginKey, type EditorState } from 'prosemirror-state';
+import type { EditorView } from 'prosemirror-view';
+/** Someone (or something) that can be mentioned. */
+export interface MentionItem {
+    /** Stored in the document. */
+    id: string;
+    /** Shown after the `@`, and stored too so the mention reads without a lookup. */
+    label: string;
+    /** A second line in the suggestions, e.g. a team or an email. */
+    description?: string;
+    /** An image shown in the suggestions. */
+    avatar?: string;
+}
+/** The suggestions: open from the `@` at `from` to the cursor, with what was typed as the query. */
+export interface MentionState {
+    from: number;
+    query: string;
+    items: MentionItem[];
+    active: number;
+}
+export declare const mentionKey: PluginKey<MentionState | null>;
+export declare function getMention(state: EditorState | null): MentionState | null;
+export declare const closeMention: (view: EditorView) => void;
+export declare const setMentionItems: (view: EditorView, items: MentionItem[]) => void;
+export declare const setMentionActive: (view: EditorView, active: number) => void;
+/** Replace the `@query` with a mention and a space after it. */
+export declare function chooseMention(view: EditorView, item: MentionItem): void;
+export declare function mentionPlugin(): Plugin<MentionState | null>;

package/dist/types/extensions/table/commands.d.ts

@@ -0,0 +1,69 @@
+import type { Node as PMNode, ResolvedPos } from 'prosemirror-model';
+import { type Command, type EditorState, type Transaction } from 'prosemirror-state';
+import { TableMap } from 'prosemirror-tables';
+import { type TableAlign } from './schema';
+/** The table around the selection: its node, position and grid. */
+export interface TableAt {
+    node: PMNode;
+    /** Position right before the table node. */
+    pos: number;
+    map: TableMap;
+}
+export declare function tableAt($pos: ResolvedPos): TableAt | null;
+/** Add a column before or after the selected ones. */
+export declare function insertColumn(side: 'before' | 'after'): Command;
+/** Add a row above or below the selected ones. */
+export declare function insertRow(side: 'before' | 'after'): Command;
+/** Remove the selected columns; not all of them (that is deleting the table). */
+export declare const deleteColumns: Command;
+/** Remove the selected rows; not all of them. */
+export declare const deleteRows: Command;
+/**
+ * Where rows (or columns) can be cut: the boundaries no merged cell
+ * crosses. A run of rows between two of them moves as one.
+ */
+export declare function boundaries(map: TableMap, axis: 'row' | 'column'): number[];
+/** The run of rows (or columns) that holds `[from, to)` and can move as one. */
+export declare function band(map: TableMap, axis: 'row' | 'column', from: number, to: number): {
+    start: number;
+    end: number;
+    cuts: number[];
+};
+/**
+ * Move the selected rows (or columns), with any merged cells they belong
+ * to, one step up or down (left or right). Ids, widths and alignment move
+ * along.
+ */
+export declare function moveLines(axis: 'row' | 'column', direction: -1 | 1): Command;
+/**
+ * Move rows (or columns) `[start, end)` of the table at `tablePos` to the
+ * boundary `to`, given as the index of the line they go before. Both the
+ * run and `to` have to be on boundaries no merged cell crosses.
+ */
+export declare function moveLinesTo(tablePos: number, axis: 'row' | 'column', start: number, end: number, to: number): Command;
+/** Select whole rows (or columns) `[from, to)` of the table at `tablePos`. */
+export declare function selectLines(tr: Transaction, tablePos: number, axis: 'row' | 'column', from: number, to: number): Transaction;
+/**
+ * Merge the selected cells into the top-left one. Their text joins it,
+ * each on a line of its own.
+ */
+export declare const mergeCells: Command;
+/** Whether the selection is in (or on) a merged cell. */
+export declare function inMergedCell(state: EditorState): boolean;
+/** Split a merged cell back into single cells; its text stays in the first. */
+export declare const splitMergedCell: Command;
+/** Empty the selected cells. */
+export declare const clearCells: Command;
+/** Align the text of the selected columns. */
+export declare function alignColumns(align: TableAlign | null): Command;
+/** Turn the first row (or column) into a header, or back. */
+export declare function toggleHeader(which: 'headerRow' | 'headerColumn'): Command;
+/**
+ * `Tab` / `Shift+Tab`: the next or previous cell, its text selected.
+ * `Tab` in the last cell adds a row.
+ */
+export declare function goToCell(direction: 1 | -1): Command;
+/** `Enter`: the cell below, adding a row at the bottom. */
+export declare const goDown: Command;
+/** `Backspace` at the start of a cell, `Delete` at its end: nothing, so cells never join. */
+export declare function stopAtCellEdge(side: 'start' | 'end'): Command;

package/dist/types/extensions/table/html.d.ts

@@ -0,0 +1,4 @@
+import type { BlockOutput } from '../../core/output';
+export declare const tableOutput: BlockOutput;
+/** Get pasted and imported tables ready: widths onto the cells, and each cell down to one line of text. */
+export declare function prepareTables(root: HTMLElement): void;

package/dist/types/extensions/table/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Tables: rows and columns of formatted text. Cells can be merged; rows
+ * and columns are added, moved and removed from the handles on their
+ * edges, and columns resized by dragging their borders.
+ */
+export declare const table: import("../..").EditorExtension;
+export { alignColumns, clearCells, deleteColumns, deleteRows, insertColumn, insertRow, mergeCells, moveLines, moveLinesTo, splitMergedCell, toggleHeader, } from './commands';
+export type { TableAlign, TableColumn } from './schema';

package/dist/types/extensions/table/plugin.d.ts

@@ -0,0 +1,4 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { DecorationSet } from 'prosemirror-view';
+export declare const tableKey: PluginKey<DecorationSet>;
+export declare function tablePlugin(): Plugin<DecorationSet>;

package/dist/types/extensions/table/schema.d.ts

@@ -0,0 +1,23 @@
+import type { NodeSpec } from 'prosemirror-model';
+import { type RowsSpec } from '../../core/model';
+/** A column of a table: a stable id, and how its cells align. */
+export interface TableColumn {
+    id: string;
+    /** In pixels; without it the column takes its share of the width. */
+    width?: number;
+    align?: TableAlign;
+}
+export type TableAlign = 'left' | 'center' | 'right';
+/** The columns as stored on the table node: id and alignment (widths live on the cells). */
+interface StoredColumn {
+    id: string;
+    align?: TableAlign;
+}
+export declare const isAlign: (value: unknown) => value is TableAlign;
+/** One column record per column of the grid, keeping ids and alignment that are there. */
+export declare function fitColumns(columns: unknown, width: number): StoredColumn[];
+export declare const isHeaderAt: (attrs: Record<string, unknown>, row: number, col: number) => boolean;
+export declare const tableRows: RowsSpec;
+export declare const tableSpec: NodeSpec;
+export declare const tableNodes: Record<string, NodeSpec>;
+export {};

package/dist/types/extensions/table/table-controls.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/extensions/table/view.d.ts

@@ -0,0 +1,13 @@
+import type { Node as PMNode } from 'prosemirror-model';
+import { TableView } from 'prosemirror-tables';
+import type { NodeView, ViewMutationRecord } from 'prosemirror-view';
+/** The narrowest a column gets, without a width of its own and when resized. */
+export declare const CELL_MIN_WIDTH = 96;
+/**
+ * A table in the editor: a scrolling frame (the block's content element)
+ * around the table, with a `<colgroup>` that holds the column widths.
+ */
+export declare class TableBlockView extends TableView implements NodeView {
+    constructor(node: PMNode);
+    ignoreMutation(record: ViewMutationRecord): boolean;
+}

package/dist/types/extensions/toggle/index.d.ts

@@ -0,0 +1,7 @@
+import { isToggleOpen } from './state';
+/**
+ * A toggle: a title with a button that shows or hides the blocks nested
+ * under it. Whether it is open belongs to the reader, not the document.
+ */
+export declare const toggle: import("../..").EditorExtension;
+export { isToggleOpen };

package/dist/types/extensions/toggle/state.d.ts

@@ -0,0 +1,17 @@
+import { Plugin, PluginKey, type EditorState } from 'prosemirror-state';
+import { DecorationSet, type EditorView } from 'prosemirror-view';
+/**
+ * Which toggles are closed, by block id. This is how one reader sees the
+ * document, not part of it: opening a toggle does not change the document,
+ * works while read-only, and is not shared with collaborators.
+ */
+interface ToggleState {
+    closed: ReadonlySet<string>;
+    decorations: DecorationSet;
+}
+export declare const toggleKey: PluginKey<ToggleState>;
+export declare function togglePlugin(): Plugin<ToggleState>;
+export declare function isToggleOpen(state: EditorState | null, id: string): boolean;
+/** Open or close the toggle with this block id. */
+export declare function flipToggle(view: EditorView, id: string): void;
+export {};

package/dist/types/extensions/toggle/toggle-block.vue.d.ts

@@ -0,0 +1,14 @@
+import type { BlockProps } from '../../core/model';
+type __VLS_Props = {
+    block: {
+        id: string;
+        type: string;
+        props: BlockProps;
+    };
+    updateProps: (props: BlockProps) => void;
+    selected: boolean;
+    editable: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;