@dotvoid/textbit-plugins 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright 2023-2026 Dotvoid AB
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,3 +1,195 @@
-# Temporary Holding Version
+# @dotvoid/textbit-plugins
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Ready to use plugins for [`@dotvoid/textbit`](https://github.com/dotvoid/textbit/tree/main/packages/textbit): headings, formatting,
+lists, links, tables, code, quotes, images and audio.
+
+The plugins are headless. They render semantic HTML with `tb-*` classes and no
+styling of their own, apart from what text needs to read right, like bold being
+bold. Add [`@dotvoid/textbit-styles`](https://github.com/dotvoid/textbit/tree/main/packages/styles) for a default look, or style the
+classes yourself.
+
+```bash
+npm install @dotvoid/textbit @dotvoid/textbit-plugins
+```
+
+```tsx
+import { Textbit } from '@dotvoid/textbit'
+import { Text, Bold, Italic, Link, UnorderedList, OrderedList } from '@dotvoid/textbit-plugins'
+
+const plugins = [Text(), Bold(), Italic(), Link(), UnorderedList(), OrderedList()]
+
+<Textbit.Root value={value} onChange={setValue} plugins={plugins}>
+  <Textbit.Editable aria-label='Article' />
+</Textbit.Root>
+```
+
+Create the plugin list once, for example with `useMemo`, not on every render.
+
+## Only what you import
+
+Every plugin is a named export, and the package is built so bundlers keep only
+the plugins you import. Importing `Bold` does not bring `Table` along. The build
+checks this for every plugin against its ES modules output.
+
+## Plugins
+
+Every type and mark is named `base/*`, the namespace for textbit's standard
+content. A `base/image` is always this package's image, with this package's
+document format, in every application that uses textbit.
+
+So a plugin of your own gets a namespace of your own, also when it does the same
+job as one of these: your own image plugin is `acme/image`, not `base/image`.
+Registered as `base/image`, it would replace this one under the same name with a
+different document format, and documents, copy and paste, and anything else that
+reads `base/image` could no longer tell the two apart. To change how one of these
+plugins looks or behaves, use its options and the styles.
+
+The one exception is `base/text`. Textbit itself creates `base/text` blocks, on
+Enter, on paste and in an empty document, so a plugin that renders text in your
+own way has to keep that name and its format: no role for a paragraph, and
+`properties.role` for anything else.
+
+| Plugin | Element types | Default shortcut |
+|--------|---------------|------------------|
+| `Text` | `base/text`, role `heading-1` to `heading-6` or `preamble` | Ctrl+Alt+0 to 4 (⌘⌥0 to 4) |
+| `Bold`, `Italic`, `Underline` | marks `base/bold`, `base/italic`, `base/underline` | Ctrl/⌘+B, I, U |
+| `Strikethrough` | mark `base/strikethrough` | none |
+| `Code` | mark `base/code` | none |
+| `UnorderedList`, `OrderedList` | `base/unordered-list`, `base/ordered-list` | Ctrl/⌘+Shift+8, Ctrl/⌘+Shift+7 |
+| `CodeBlock` | `base/code-block` | none |
+| `Table` | `base/table` | none |
+| `Link` | inline `base/link` | Ctrl/⌘+K |
+| `LocalizedQuotationMarks` | none, it changes typed quotes | none |
+| `Image` | `base/image` | none |
+| `Audio` | `base/audio` | none |
+| `Blockquote` | `base/blockquote` | none |
+
+`Text` replaces textbit's built-in plain paragraph and keeps its format, adding
+roles for headings and the lead-in.
+
+### Text
+
+Paragraphs, headings and a lead-in. A paragraph has no role; a heading has the
+role `heading-1` to `heading-6` and renders as `h1` to `h6`; a lead-in, the
+larger opening paragraph of an article, has the role `preamble` and renders as a
+`p`. The lead-in has no default shortcut.
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `headings` | `(1 \| 2 \| 3 \| 4 \| 5 \| 6)[]` | Levels to offer. Default `[1, 2, 3, 4]`. |
+| `preamble` | `boolean` | Offer the lead-in. Default `true`. |
+| `singleLine` | `boolean` | No Enter and no soft breaks, for a title field. |
+| `titles` | `Partial<Record<TextRole, string>>` | Action names, e.g. translations. |
+| `placeholders` | `Partial<Record<TextRole, string>>` | Hint in an empty block, per role. |
+| `hotkeys` | `Partial<Record<TextRole, string \| false>>` | Replace or remove a role's shortcut. |
+
+### Formatting marks
+
+`Bold`, `Italic`, `Underline`, `Strikethrough` and `Code` take `{ hotkey, title }`.
+The first four style themselves inline. `Code` renders with the class `tb-code`,
+since a monospace font and a background belong in a stylesheet.
+
+### Lists
+
+`UnorderedList` and `OrderedList` take `{ title, placeholder, hotkey }`. Use both
+to switch a list between bullets and numbers. Enter on the last item adds an item;
+Enter on an empty last item leaves the list.
+
+### Code block and table
+
+`CodeBlock({ indentSize, title, placeholder, hotkey })`: Tab indents inside the
+block. `Table({ rows, columns, titles })`: Tab and Shift+Tab move between cells,
+and Tab in the last cell adds a row. Its actions insert and delete rows and
+columns; they show in menus while the caret is in a cell.
+
+Both use Tab only in their own context, through textbit's `when()` on actions, so
+they work side by side.
+
+### Link
+
+`Link({ hotkey, labels })`. Ctrl/⌘+K links the selection and moves to its address
+field; Ctrl/⌘-click opens a link in a new tab. Addresses are checked whenever a
+link is rendered, not only when typed, so a `javascript:` address arriving through
+paste, a collaborator or stored data never becomes a live link. `labels` names the
+address field and buttons, e.g. for translation.
+
+### Localized quotation marks
+
+Turns typed `"` and `'` into the quotation marks of the editor's language (“…” in
+English, ”…” in Swedish, «…» in Norwegian), and two hyphens into an en dash.
+
+### Image and audio
+
+Reference plugins: complete, and meant to be read when you build your own. Give
+yours a namespace of your own, such as `acme/image` (see [Plugins](#plugins)).
+
+```tsx
+Image({
+  upload: async (file) => {
+    const { url, width, height } = await myStorage.put(file)
+    return { src: url, width, height }   // or undefined to drop the file
+  }
+})
+```
+
+Dropped and picked files go to your `upload` function, and its answer becomes the
+image. Without `upload` the plugin only renders images and offers no way to add
+one: textbit never stores a file in the document itself. While the upload runs,
+textbit's upload marker shows it, if you place `Textbit.UploadMarker` in the editor.
+
+| Option | Description |
+|--------|-------------|
+| `upload` | `(file: File) => Promise<{ src, width?, height?, alt? } \| undefined>` |
+| `accept` | MIME types. Image default: JPEG, PNG, GIF, WebP, AVIF. Audio default: MP3, MP4/AAC, Ogg, WAV, WebM. |
+| `maxSize` | Largest file, in bytes. |
+| `labels` | Action name, field labels and hints, and other text. |
+
+Images have alternative text, so screen readers can describe them. It is a text
+field in the document (`base/image/alt`) between the image and its caption: the
+caret moves in and out of it like any other text, and no `<input>` captures
+the keyboard. Images without the field get an empty one when normalized.
+
+The caption and the alternative text are labelled fields (`.tb-field`, with
+`.tb-field-label` and `.tb-field-text`); a click on a label puts the caret in its
+field. Only `http`, `https`, `blob` and image or audio `data` addresses are
+rendered.
+
+`imageNode()` and `audioNode()` build a complete block, for inserting media you
+already store.
+
+### Blockquote
+
+`Blockquote({ labels, hotkey })`: a quote and its source. Leave the source empty
+when there is none.
+
+## Translation
+
+The plugins ship English defaults for every visible and announced text: action
+titles, placeholders, labels. Each plugin's options replace them.
+
+```tsx
+Text({ titles: { 'heading-1': 'Rubrik 1' }, placeholders: { 'heading-1': 'Rubrik' } })
+Link({ labels: { title: 'Länk', address: 'Länkadress' } })
+```
+
+## Shortcuts
+
+A shortcut that a browser or operating system already uses never reaches the page,
+so defaults are only set where the key is known to be free. They were checked
+against Chrome's published shortcuts (which Edge shares) and Firefox's developer
+tools.
+
+- **No default** for `Code`, `CodeBlock` and `Strikethrough`. The usual keys are
+  taken: Ctrl+Shift+C opens the element picker in Chrome and Firefox, and
+  Ctrl+Shift+K opens Firefox's web console. Set your own with `hotkey`.
+- **Ctrl/⌘+K** for links overrides Chrome's address bar search on Windows and Linux,
+  as Google Docs does; pages are allowed to.
+- Firefox's browser shortcut list could not be checked for the heading and list
+  keys. They follow Google Docs.
+
+Every plugin takes `hotkey: false` (or `hotkeys` for `Text`) to remove a shortcut.
+
+## Credits
+
+Icons are from [Lucide](https://lucide.dev), used under the ISC License; the notice
+is in `lib/shared/icons.tsx`.

package/dist/Audio/audioNode.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function d({src:e,title:t},o=""){return{id:crypto.randomUUID(),class:"block",type:"base/audio",properties:{src:e,title:t??""},children:[{id:crypto.randomUUID(),class:"void",type:"base/audio/content",children:[{text:""}]},{id:crypto.randomUUID(),class:"text",type:"base/audio/caption",children:[{text:o}]}]}}exports.audioNode=d;

package/dist/Audio/audioNode.d.ts

@@ -0,0 +1,8 @@
+import { Element } from 'slate';
+export type AudioUpload = {
+    src: string;
+    title?: string;
+};
+/** A complete audio block, e.g. to insert audio the host already stores */
+export declare function audioNode({ src, title }: AudioUpload, caption?: string): Element;
+//# sourceMappingURL=audioNode.d.ts.map

package/dist/Audio/audioNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"audioNode.d.ts","sourceRoot":"","sources":["../../lib/Audio/audioNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAEpC,MAAM,MAAM,WAAW,GAAG;IACxB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,2EAA2E;AAC3E,wBAAgB,SAAS,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,SAAK,GAAG,OAAO,CAW5E"}

package/dist/Audio/audioNode.js

@@ -0,0 +1,15 @@
+function d({ src: t, title: e }, o = "") {
+  return {
+    id: crypto.randomUUID(),
+    class: "block",
+    type: "base/audio",
+    properties: { src: t, title: e ?? "" },
+    children: [
+      { id: crypto.randomUUID(), class: "void", type: "base/audio/content", children: [{ text: "" }] },
+      { id: crypto.randomUUID(), class: "text", type: "base/audio/caption", children: [{ text: o }] }
+    ]
+  };
+}
+export {
+  d as audioNode
+};

package/dist/Audio/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("slate"),d=require("slate-react"),p=require("../shared/icons.cjs"),b=require("../shared/Field.cjs"),l=require("../shared/media.cjs"),x=require("./audioNode.cjs"),u="base/audio",g=["audio/mpeg","audio/mp4","audio/aac","audio/ogg","audio/wav","audio/webm"],f={title:"Audio",caption:"Caption",captionHint:"Add a caption",missing:"Audio not available"},j=(a={})=>{const n={...f,...a.labels},s=a.accept??g,i=l.uploadConsumer({type:u,accept:t=>s.includes(t),maxSize:a.maxSize,upload:a.upload,build:(t,o)=>x.audioNode({...t,title:t.title??o.name})});return{class:"block",name:u,...i?{consumer:i}:{},actions:[{name:"insert",title:n.title,tool:()=>e.jsx(p.AudioQuoteIcon,{}),visibility:()=>[!!i,!!i,!1],handler:t=>l.pickFiles(t,s.join(","))}],componentEntry:{class:"block",component:({children:t})=>e.jsx("figure",{className:"tb-audio",children:t}),children:[{type:"content",class:"void",component:t=>e.jsx(h,{...t,labels:n}),constraints:{min:1,max:1}},{type:"caption",class:"text",asOwnElement:!0,component:({children:t,element:o,attributes:c})=>e.jsx("figcaption",{...c,className:"tb-field tb-audio-caption",children:e.jsx(b.FieldContent,{element:o,label:n.caption,hint:n.captionHint,children:t})}),constraints:{allowBreak:!1,min:1,max:1}}]}}};function h({element:a,children:n,labels:s}){const i=d.useSlateStatic(),t=r.Node.get(i,d.ReactEditor.findPath(i,a).slice(0,-1)),o=r.Element.isElement(t)?t.properties??{}:{},c=l.safeMediaSrc(o.src),m=typeof o.title=="string"?o.title:void 0;return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"tb-audio-content",contentEditable:!1,children:c?e.jsx("audio",{controls:!0,preload:"metadata",src:c,"aria-label":m,style:{width:"100%"}}):e.jsx("div",{className:"tb-audio-missing",children:s.missing})}),n]})}exports.Audio=j;

package/dist/Audio/index.d.ts

@@ -0,0 +1,22 @@
+import { TBPluginDefinition } from '@dotvoid/textbit';
+import { AudioUpload } from './audioNode';
+export type AudioLabels = {
+    /** The insert action's name in menus and for screen readers */
+    title: string;
+    /** Label before the caption field */
+    caption: string;
+    /** Hint in the empty caption field */
+    captionHint: string;
+    missing: string;
+};
+export type AudioOptions = {
+    /** Store a dropped or picked file and return where it now lives; see Image */
+    upload?: (file: File) => Promise<AudioUpload | undefined>;
+    /** MIME types to accept. Default: MP3, MP4/AAC, Ogg, WAV and WebM audio. */
+    accept?: string[];
+    maxSize?: number;
+    labels?: Partial<AudioLabels>;
+};
+/** An audio player with a caption. A reference for your own, like Image, under your own namespace. */
+export declare const Audio: (options?: AudioOptions) => TBPluginDefinition;
+//# sourceMappingURL=index.d.ts.map

package/dist/Audio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/Audio/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgD,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAMxG,OAAO,EAAa,KAAK,WAAW,EAAE,MAAM,aAAa,CAAA;AAIzD,MAAM,MAAM,WAAW,GAAG;IACxB,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAA;IACb,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAA;IACf,sCAAsC;IACtC,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC,CAAA;IACzD,4EAA4E;IAC5E,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;CAC9B,CAAA;AAUD,sGAAsG;AACtG,eAAO,MAAM,KAAK,GAAI,UAAS,YAAiB,KAAG,kBA+ClD,CAAA"}

package/dist/Audio/index.js

@@ -0,0 +1,63 @@
+import { jsx as i, jsxs as d, Fragment as m } from "react/jsx-runtime";
+import { Node as p, Element as u } from "slate";
+import { useSlateStatic as f, ReactEditor as b } from "slate-react";
+import { AudioQuoteIcon as g } from "../shared/icons.js";
+import { FieldContent as h } from "../shared/Field.js";
+import { uploadConsumer as E, pickFiles as x, safeMediaSrc as A } from "../shared/media.js";
+import { audioNode as v } from "./audioNode.js";
+const l = "base/audio", y = ["audio/mpeg", "audio/mp4", "audio/aac", "audio/ogg", "audio/wav", "audio/webm"], C = {
+  title: "Audio",
+  caption: "Caption",
+  captionHint: "Add a caption",
+  missing: "Audio not available"
+}, B = (a = {}) => {
+  const n = { ...C, ...a.labels }, c = a.accept ?? y, e = E({
+    type: l,
+    accept: (t) => c.includes(t),
+    maxSize: a.maxSize,
+    upload: a.upload,
+    build: (t, o) => v({ ...t, title: t.title ?? o.name })
+  });
+  return {
+    class: "block",
+    name: l,
+    ...e ? { consumer: e } : {},
+    actions: [{
+      name: "insert",
+      title: n.title,
+      tool: () => /* @__PURE__ */ i(g, {}),
+      visibility: () => [!!e, !!e, !1],
+      handler: (t) => x(t, c.join(","))
+    }],
+    componentEntry: {
+      class: "block",
+      component: ({ children: t }) => /* @__PURE__ */ i("figure", { className: "tb-audio", children: t }),
+      children: [
+        {
+          type: "content",
+          class: "void",
+          component: (t) => /* @__PURE__ */ i(N, { ...t, labels: n }),
+          constraints: { min: 1, max: 1 }
+        },
+        {
+          type: "caption",
+          class: "text",
+          // A figcaption must sit directly in its figure, without a wrapping <div>
+          asOwnElement: !0,
+          component: ({ children: t, element: o, attributes: s }) => /* @__PURE__ */ i("figcaption", { ...s, className: "tb-field tb-audio-caption", children: /* @__PURE__ */ i(h, { element: o, label: n.caption, hint: n.captionHint, children: t }) }),
+          constraints: { allowBreak: !1, min: 1, max: 1 }
+        }
+      ]
+    }
+  };
+};
+function N({ element: a, children: n, labels: c }) {
+  const e = f(), t = p.get(e, b.findPath(e, a).slice(0, -1)), o = u.isElement(t) ? t.properties ?? {} : {}, s = A(o.src), r = typeof o.title == "string" ? o.title : void 0;
+  return /* @__PURE__ */ d(m, { children: [
+    /* @__PURE__ */ i("div", { className: "tb-audio-content", contentEditable: !1, children: s ? /* @__PURE__ */ i("audio", { controls: !0, preload: "metadata", src: s, "aria-label": r, style: { width: "100%" } }) : /* @__PURE__ */ i("div", { className: "tb-audio-missing", children: c.missing }) }),
+    n
+  ] });
+}
+export {
+  B as Audio
+};

package/dist/Blockquote/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("../shared/icons.cjs"),s=require("../shared/ChildPlaceholder.cjs"),u=require("../shared/hotkey.cjs"),i=require("../shared/insertBlock.cjs"),o="base/blockquote",d={title:"Quote",body:"Quote",citation:"Source"},b=(n={})=>{const l={...d,...n.labels};return{class:"block",name:o,actions:[{name:"insert",title:l.title,tool:()=>t.jsx(a.BlockquoteIcon,{}),hotkey:u.hotkeyOption(n.hotkey),visibility:e=>[!0,!0,e.type===o],handler:({editor:e})=>{i.insertBlockAfterCaret(e,{id:crypto.randomUUID(),class:"block",type:o,children:[i.textNode(`${o}/body`),i.textNode(`${o}/citation`)]})}}],componentEntry:{class:"block",component:({children:e})=>t.jsx("figure",{className:"tb-blockquote",children:e}),children:[{type:"body",class:"text",component:({children:e,element:c})=>t.jsxs("blockquote",{className:"tb-blockquote-body",style:{position:"relative",margin:0},children:[t.jsx(s.ChildPlaceholder,{element:c,children:l.body}),e]}),constraints:{min:1,max:1,allowSoftBreak:!0}},{type:"citation",class:"text",asOwnElement:!0,component:({children:e,element:c,attributes:r})=>t.jsxs("figcaption",{...r,className:"tb-blockquote-citation",style:{position:"relative"},children:[t.jsx(s.ChildPlaceholder,{element:c,children:l.citation}),e]}),constraints:{min:1,max:1,allowBreak:!1}}]}}};exports.Blockquote=b;

package/dist/Blockquote/index.d.ts

@@ -0,0 +1,15 @@
+import { TBPluginDefinition } from '@dotvoid/textbit';
+export type BlockquoteLabels = {
+    /** The insert action's name in menus and for screen readers */
+    title: string;
+    body: string;
+    citation: string;
+};
+export type BlockquoteOptions = {
+    labels?: Partial<BlockquoteLabels>;
+    /** A shortcut that inserts a quote. None by default. */
+    hotkey?: string | false;
+};
+/** A quotation with its source. The source is optional: leave it empty. */
+export declare const Blockquote: (options?: BlockquoteOptions) => TBPluginDefinition;
+//# sourceMappingURL=index.d.ts.map

package/dist/Blockquote/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/Blockquote/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgD,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAQxG,MAAM,MAAM,gBAAgB,GAAG;IAC7B,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;IAClC,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;CACxB,CAAA;AAID,2EAA2E;AAC3E,eAAO,MAAM,UAAU,GAAI,UAAS,iBAAsB,KAAG,kBAoD5D,CAAA"}

package/dist/Blockquote/index.js

@@ -0,0 +1,56 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { BlockquoteIcon as m } from "../shared/icons.js";
+import { ChildPlaceholder as r } from "../shared/ChildPlaceholder.js";
+import { hotkeyOption as b } from "../shared/hotkey.js";
+import { insertBlockAfterCaret as p, textNode as a } from "../shared/insertBlock.js";
+const o = "base/blockquote", d = { title: "Quote", body: "Quote", citation: "Source" }, x = (c = {}) => {
+  const l = { ...d, ...c.labels };
+  return {
+    class: "block",
+    name: o,
+    actions: [{
+      name: "insert",
+      title: l.title,
+      tool: () => /* @__PURE__ */ e(m, {}),
+      hotkey: b(c.hotkey),
+      visibility: (t) => [!0, !0, t.type === o],
+      handler: ({ editor: t }) => {
+        p(t, {
+          id: crypto.randomUUID(),
+          class: "block",
+          type: o,
+          children: [a(`${o}/body`), a(`${o}/citation`)]
+        });
+      }
+    }],
+    componentEntry: {
+      class: "block",
+      component: ({ children: t }) => /* @__PURE__ */ e("figure", { className: "tb-blockquote", children: t }),
+      children: [
+        {
+          type: "body",
+          class: "text",
+          component: ({ children: t, element: i }) => /* @__PURE__ */ n("blockquote", { className: "tb-blockquote-body", style: { position: "relative", margin: 0 }, children: [
+            /* @__PURE__ */ e(r, { element: i, children: l.body }),
+            t
+          ] }),
+          constraints: { min: 1, max: 1, allowSoftBreak: !0 }
+        },
+        {
+          type: "citation",
+          class: "text",
+          // A figcaption must sit directly in its figure, without a wrapping <div>
+          asOwnElement: !0,
+          component: ({ children: t, element: i, attributes: s }) => /* @__PURE__ */ n("figcaption", { ...s, className: "tb-blockquote-citation", style: { position: "relative" }, children: [
+            /* @__PURE__ */ e(r, { element: i, children: l.citation }),
+            t
+          ] }),
+          constraints: { min: 1, max: 1, allowBreak: !1 }
+        }
+      ]
+    }
+  };
+};
+export {
+  x as Blockquote
+};

package/dist/CodeBlock/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),c=require("slate"),i=require("../shared/icons.cjs"),a=require("../shared/ChildPlaceholder.cjs"),d=require("../shared/hotkey.cjs"),s=require("../shared/insertBlock.cjs"),n="base/code-block",y=(t={})=>({class:"block",name:n,actions:[{name:"insert",title:t.title??"Code block",tool:()=>l.jsx(i.CodeBlockIcon,{}),hotkey:d.hotkeyOption(t.hotkey),visibility:e=>[!0,!0,e.type===n],handler:({editor:e})=>{s.insertBlockAfterCaret(e,{id:crypto.randomUUID(),class:"block",type:n,children:[s.textNode(`${n}/body`)]})}},{name:"indent",hotkey:"tab",when:k,visibility:()=>[!1,!1,!1],handler:({editor:e,event:o})=>{o?.preventDefault(),e.insertText(" ".repeat(t.indentSize??2))}}],componentEntry:{class:"block",component:({children:e})=>l.jsx("div",{className:"tb-code-block",children:e}),children:[{type:"body",class:"text",component:({children:e,element:o})=>l.jsxs("pre",{className:"tb-code-block-body",style:{position:"relative",margin:0,whiteSpace:"pre-wrap"},children:[l.jsx(a.ChildPlaceholder,{element:o,children:t.placeholder}),l.jsx("code",{children:e})]}),constraints:{min:1,max:1,allowBreak:!0,allowSoftBreak:!1,allowExitBreak:!1}}]}});function k(t){const{selection:e}=t;if(!e||!c.Range.isCollapsed(e))return!1;const[o]=c.Editor.nodes(t,{match:r=>c.Element.isElement(r)&&r.type===`${n}/body`});return!!o}exports.CodeBlock=y;

package/dist/CodeBlock/index.d.ts

@@ -0,0 +1,14 @@
+import { TBPluginDefinition } from '@dotvoid/textbit';
+export type CodeBlockOptions = {
+    /** Spaces Tab inserts. Default: 2. */
+    indentSize?: number;
+    /** The action's name in menus and for screen readers, e.g. a translation */
+    title?: string;
+    /** Hint in an empty code block */
+    placeholder?: string;
+    /** A shortcut that inserts a code block. None by default. */
+    hotkey?: string | false;
+};
+/** A block of preformatted code. Tab indents inside it. */
+export declare const CodeBlock: (options?: CodeBlockOptions) => TBPluginDefinition;
+//# sourceMappingURL=index.d.ts.map

package/dist/CodeBlock/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/CodeBlock/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAoB,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAS5E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;CACxB,CAAA;AAED,2DAA2D;AAC3D,eAAO,MAAM,SAAS,GAAI,UAAS,gBAAqB,KAAG,kBAmDzD,CAAA"}

package/dist/CodeBlock/index.js

@@ -0,0 +1,65 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { Range as i, Editor as c, Element as s } from "slate";
+import { CodeBlockIcon as d } from "../shared/icons.js";
+import { ChildPlaceholder as m } from "../shared/ChildPlaceholder.js";
+import { hotkeyOption as p } from "../shared/hotkey.js";
+import { insertBlockAfterCaret as y, textNode as b } from "../shared/insertBlock.js";
+const l = "base/code-block", w = (t = {}) => ({
+  class: "block",
+  name: l,
+  actions: [
+    {
+      name: "insert",
+      title: t.title ?? "Code block",
+      tool: () => /* @__PURE__ */ r(d, {}),
+      hotkey: p(t.hotkey),
+      visibility: (e) => [!0, !0, e.type === l],
+      handler: ({ editor: e }) => {
+        y(e, {
+          id: crypto.randomUUID(),
+          class: "block",
+          type: l,
+          children: [b(`${l}/body`)]
+        });
+      }
+    },
+    {
+      name: "indent",
+      hotkey: "tab",
+      when: f,
+      visibility: () => [!1, !1, !1],
+      handler: ({ editor: e, event: o }) => {
+        o?.preventDefault(), e.insertText(" ".repeat(t.indentSize ?? 2));
+      }
+    }
+  ],
+  componentEntry: {
+    class: "block",
+    component: ({ children: e }) => /* @__PURE__ */ r("div", { className: "tb-code-block", children: e }),
+    children: [{
+      type: "body",
+      class: "text",
+      component: ({ children: e, element: o }) => /* @__PURE__ */ a("pre", { className: "tb-code-block-body", style: { position: "relative", margin: 0, whiteSpace: "pre-wrap" }, children: [
+        /* @__PURE__ */ r(m, { element: o, children: t.placeholder }),
+        /* @__PURE__ */ r("code", { children: e })
+      ] }),
+      constraints: {
+        min: 1,
+        max: 1,
+        allowBreak: !0,
+        allowSoftBreak: !1,
+        allowExitBreak: !1
+      }
+    }]
+  }
+});
+function f(t) {
+  const { selection: e } = t;
+  if (!e || !i.isCollapsed(e))
+    return !1;
+  const [o] = c.nodes(t, { match: (n) => s.isElement(n) && n.type === `${l}/body` });
+  return !!o;
+}
+export {
+  w as CodeBlock
+};

package/dist/Image/imageNode.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function i({src:a,width:e,height:t,alt:o},r=""){return{id:crypto.randomUUID(),class:"block",type:"base/image",properties:{src:a,...e?{width:e}:{},...t?{height:t}:{}},children:[{id:crypto.randomUUID(),class:"void",type:"base/image/content",children:[{text:""}]},{id:crypto.randomUUID(),class:"text",type:"base/image/alt",children:[{text:o??""}]},{id:crypto.randomUUID(),class:"text",type:"base/image/caption",children:[{text:r}]}]}}exports.imageNode=i;

package/dist/Image/imageNode.d.ts

@@ -0,0 +1,11 @@
+import { Element } from 'slate';
+export type ImageUpload = {
+    src: string;
+    width?: number;
+    height?: number;
+    /** Alternative text, if the host already has one */
+    alt?: string;
+};
+/** A complete image block, e.g. to insert an image the host already stores */
+export declare function imageNode({ src, width, height, alt }: ImageUpload, caption?: string): Element;
+//# sourceMappingURL=imageNode.d.ts.map

package/dist/Image/imageNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageNode.d.ts","sourceRoot":"","sources":["../../lib/Image/imageNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAEpC,MAAM,MAAM,WAAW,GAAG;IACxB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oDAAoD;IACpD,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED,8EAA8E;AAC9E,wBAAgB,SAAS,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,WAAW,EAAE,OAAO,SAAK,GAAG,OAAO,CAYzF"}

package/dist/Image/imageNode.js

@@ -0,0 +1,16 @@
+function o({ src: a, width: e, height: t, alt: r }, c = "") {
+  return {
+    id: crypto.randomUUID(),
+    class: "block",
+    type: "base/image",
+    properties: { src: a, ...e ? { width: e } : {}, ...t ? { height: t } : {} },
+    children: [
+      { id: crypto.randomUUID(), class: "void", type: "base/image/content", children: [{ text: "" }] },
+      { id: crypto.randomUUID(), class: "text", type: "base/image/alt", children: [{ text: r ?? "" }] },
+      { id: crypto.randomUUID(), class: "text", type: "base/image/caption", children: [{ text: c }] }
+    ]
+  };
+}
+export {
+  o as imageNode
+};

package/dist/Image/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("slate"),r=require("slate-react"),b=require("../shared/icons.cjs"),p=require("../shared/Field.cjs"),m=require("../shared/media.cjs"),f=require("./imageNode.cjs"),d="base/image",x=["image/jpeg","image/png","image/gif","image/webp","image/avif"],j={title:"Image",caption:"Caption",captionHint:"Add a caption",alt:"Alt text",altHint:"Describe the image for those who cannot see it",missing:"Image not available"},y=(i={})=>{const a={...j,...i.labels},c=i.accept??x,n=m.uploadConsumer({type:d,accept:e=>c.includes(e),maxSize:i.maxSize,upload:i.upload,build:e=>f.imageNode(e)});return{class:"block",name:d,...n?{consumer:n}:{},actions:[{name:"insert",title:a.title,tool:()=>t.jsx(b.ImageIcon,{}),visibility:()=>[!!n,!!n,!1],handler:e=>m.pickFiles(e,c.join(","))}],componentEntry:{class:"block",component:({children:e})=>t.jsx("figure",{className:"tb-image",children:e}),children:[{type:"content",class:"void",component:e=>t.jsx(E,{...e,labels:a}),constraints:{min:1,max:1}},{type:"alt",class:"text",component:({children:e,element:o})=>t.jsx("div",{className:"tb-field tb-image-alt",children:t.jsx(p.FieldContent,{element:o,label:a.alt,hint:a.altHint,children:e})}),constraints:{allowBreak:!1,min:1,max:1}},{type:"caption",class:"text",asOwnElement:!0,component:({children:e,element:o,attributes:s})=>t.jsx("figcaption",{...s,className:"tb-field tb-image-caption",children:t.jsx(p.FieldContent,{element:o,label:a.caption,hint:a.captionHint,children:e})}),constraints:{allowBreak:!1,min:1,max:1}}]}}};function E({element:i,children:a,labels:c}){const n=r.useSlateStatic(),e=r.ReactEditor.findPath(n,i),o=l.Node.get(n,e.slice(0,-1)),s=l.Element.isElement(o)?o.properties??{}:{},g=m.safeMediaSrc(s.src),u=r.useSlateSelector(h=>v(h,i));return t.jsxs(t.Fragment,{children:[t.jsx("div",{className:"tb-image-content",contentEditable:!1,draggable:"true",children:g?t.jsx("img",{src:g,alt:u,width:typeof s.width=="number"?s.width:void 0,height:typeof s.height=="number"?s.height:void 0,style:{display:"block",maxWidth:"100%",height:"auto"}}):t.jsx("div",{className:"tb-image-missing",role:"img","aria-label":c.missing,children:c.missing})}),a]})}function v(i,a){try{const n=l.Node.parent(i,r.ReactEditor.findPath(i,a)).children.find(e=>l.Element.isElement(e)&&e.type===`${d}/alt`);return n?l.Node.string(n):""}catch{return""}}exports.Image=y;

package/dist/Image/index.d.ts

@@ -0,0 +1,37 @@
+import { TBPluginDefinition } from '@dotvoid/textbit';
+import { ImageUpload } from './imageNode';
+export type ImageLabels = {
+    /** The insert action's name in menus and for screen readers */
+    title: string;
+    /** Label before the caption field */
+    caption: string;
+    /** Hint in the empty caption field */
+    captionHint: string;
+    /** Label before the alternative text field */
+    alt: string;
+    /** Hint in the empty alternative text field */
+    altHint: string;
+    missing: string;
+};
+export type ImageOptions = {
+    /**
+     * Store a dropped or picked file and return where it now lives. Return
+     * undefined to drop the file, e.g. when the user cancels. Without it the
+     * plugin only renders images; it cannot add them.
+     */
+    upload?: (file: File) => Promise<ImageUpload | undefined>;
+    /** MIME types to accept. Default: JPEG, PNG, GIF, WebP and AVIF. */
+    accept?: string[];
+    /** Largest file to accept, in bytes */
+    maxSize?: number;
+    /** Labels and hints, e.g. translations */
+    labels?: Partial<ImageLabels>;
+};
+/**
+ * An image with a caption and alternative text. Files reach it by drop or from
+ * the insert action, and are stored by your `upload` function. Also a reference
+ * for building your own, which gets a namespace of your own (`acme/image`, not
+ * `base/image`).
+ */
+export declare const Image: (options?: ImageOptions) => TBPluginDefinition;
+//# sourceMappingURL=index.d.ts.map

package/dist/Image/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/Image/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgD,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAMxG,OAAO,EAAa,KAAK,WAAW,EAAE,MAAM,aAAa,CAAA;AAIzD,MAAM,MAAM,WAAW,GAAG;IACxB,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAA;IACb,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAA;IACf,sCAAsC;IACtC,WAAW,EAAE,MAAM,CAAA;IACnB,8CAA8C;IAC9C,GAAG,EAAE,MAAM,CAAA;IACX,+CAA+C;IAC/C,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC,CAAA;IACzD,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,uCAAuC;IACvC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAA;CAC9B,CAAA;AAYD;;;;;GAKG;AACH,eAAO,MAAM,KAAK,GAAI,UAAS,YAAiB,KAAG,kBA6DlD,CAAA"}