@forgedevstack/ink 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# Changelog
+
+## 1.0.0 — 2026-08-01
+
+### Added
+- `InkEditor` React WYSIWYG with controlled HTML `value` / `onChange`
+- Toolbar: bold, italic, underline, strikethrough, headings, text/highlight colors, lists, links, image paste/insert
+- Typo auto-fix MVP via bundled dictionary (`applyTypoAutoFix`, blur-triggered)
+- AI agent plugin stub (`@forgedevstack/ink/plugins/ai`) — register/run API; full agents in 1.x
+- Angular adapter entry (`@forgedevstack/ink/angular`) with usage helpers
+- WordPress plugin stub under `wordpress/ink-editor`
+- Styles export `@forgedevstack/ink/styles.css`
+- Docs site placeholder **inkforgejs.com** (register at registrar)

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 John Yaghobieh
+
+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

@@ -0,0 +1,83 @@
+# Ink — `@forgedevstack/ink`
+
+**ForgeStack rich text editor** for React. WYSIWYG toolbar, heading styles, colors, lists, links, image paste, built-in typo auto-fix MVP, Angular usage stub, and a WordPress plugin stub.
+
+> **Domain:** [inkforgejs.com](https://inkforgejs.com) — placeholder until registered at your registrar.  
+> Avoid conflating with unrelated brands (e.g. proseforge / forgequill).
+
+## Install
+
+```bash
+npm install @forgedevstack/ink
+```
+
+```tsx
+import { useState } from 'react';
+import { InkEditor } from '@forgedevstack/ink';
+import '@forgedevstack/ink/styles.css';
+
+export function App() {
+  const [value, setValue] = useState('<p>Start typing…</p>');
+  return (
+    <InkEditor
+      value={value}
+      onChange={setValue}
+      placeholder="Write something…"
+      typoAutoFix
+    />
+  );
+}
+```
+
+## Features (1.0.0)
+
+- Controlled `value` / `onChange` (HTML string)
+- Toolbar: bold / italic / underline / strike, headings, text + highlight colors, lists, links, image insert/paste
+- **Typo auto-fix MVP** — small bundled dictionary + heuristics (`applyTypoAutoFix`), runs on blur; no heavy proprietary spell engine
+- **AI agent stub** — `@forgedevstack/ink/plugins/ai` register/run interface; full agents coming in **1.x**
+- **Angular** — `@forgedevstack/ink/angular` thin usage helpers / docs entry
+- **WordPress** — `wordpress/ink-editor` classic meta box stub
+
+## AI plugin (stub)
+
+```ts
+import { inkAi } from '@forgedevstack/ink/plugins/ai';
+
+// Register a real agent in 1.x — interface is stable now:
+inkAi.register({
+  id: 'my-agent',
+  name: 'My Agent',
+  capabilities: ['rewrite'],
+  async run({ html }) {
+    return { html };
+  },
+});
+```
+
+## Angular
+
+```ts
+import { createInkAngularUsage, documentInkAngularAdapter } from '@forgedevstack/ink/angular';
+
+console.log(documentInkAngularAdapter());
+console.log(createInkAngularUsage());
+```
+
+Mount `InkEditor` via your preferred React↔Angular bridge. A dedicated Angular component lands in 1.x.
+
+## WordPress
+
+See [`wordpress/README.md`](./wordpress/README.md).
+
+## Links
+
+| | |
+|---|---|
+| npm | https://www.npmjs.com/package/@forgedevstack/ink |
+| Repo | https://github.com/yaghobieh/ink |
+| Portal | https://inkforgejs.com (register domain) |
+| Companion | https://github.com/yaghobieh/ink-portal |
+
+## License
+
+MIT © John Yaghobieh

package/dist/angular/index.cjs

@@ -0,0 +1,30 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t="ink-editor",e=()=>`
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-editor',
+  template: \`
+    <div
+      id="ink-host"
+      [attr.data-value]="html"
+      contenteditable="false"
+    ></div>
+  \`,
+})
+export class EditorHostComponent {
+  html = '<p>Start typing with Ink…</p>';
+}
+
+// Mount the React InkEditor into #ink-host with your preferred bridge
+// (e.g. @angular/elements, react2angular, or a small custom adapter).
+// Example:
+//
+// import { createRoot } from 'react-dom/client';
+// import { InkEditor } from '@forgedevstack/ink';
+// import '@forgedevstack/ink/styles.css';
+//
+// const root = createRoot(document.getElementById('ink-host')!);
+// root.render(
+//   <InkEditor value={html} onChange={(next) => { this.html = next; }} />
+// );
+`.trim(),o=()=>({packageEntry:"@forgedevstack/ink/angular",status:"stub",note:"Thin Angular usage docs + helper constants for 1.0.0. A dedicated @angular/core wrapper lands in 1.x."});exports.INK_ANGULAR_SELECTOR=t;exports.createInkAngularUsage=e;exports.documentInkAngularAdapter=o;

package/dist/angular/index.d.ts

@@ -0,0 +1,16 @@
+export type InkAngularValueChange = (html: string) => void;
+export interface InkAngularBindings {
+    value: string;
+    placeholder?: string;
+    disabled?: boolean;
+    typoAutoFix?: boolean;
+    onChange?: InkAngularValueChange;
+}
+export declare const INK_ANGULAR_SELECTOR = "ink-editor";
+export declare const createInkAngularUsage: () => string;
+export declare const documentInkAngularAdapter: () => {
+    packageEntry: string;
+    status: "stub";
+    note: string;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/angular/index.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,qBAAqB,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;AAE3D,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,eAAO,MAAM,oBAAoB,eAAe,CAAC;AAEjD,eAAO,MAAM,qBAAqB,QAAO,MA6BjC,CAAC;AAET,eAAO,MAAM,yBAAyB,QAAO;IAC3C,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CAKb,CAAC"}

package/dist/angular/index.js

@@ -0,0 +1,39 @@
+const t = "ink-editor", e = () => `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-editor',
+  template: \`
+    <div
+      id="ink-host"
+      [attr.data-value]="html"
+      contenteditable="false"
+    ></div>
+  \`,
+})
+export class EditorHostComponent {
+  html = '<p>Start typing with Ink…</p>';
+}
+
+// Mount the React InkEditor into #ink-host with your preferred bridge
+// (e.g. @angular/elements, react2angular, or a small custom adapter).
+// Example:
+//
+// import { createRoot } from 'react-dom/client';
+// import { InkEditor } from '@forgedevstack/ink';
+// import '@forgedevstack/ink/styles.css';
+//
+// const root = createRoot(document.getElementById('ink-host')!);
+// root.render(
+//   <InkEditor value={html} onChange={(next) => { this.html = next; }} />
+// );
+`.trim(), o = () => ({
+  packageEntry: "@forgedevstack/ink/angular",
+  status: "stub",
+  note: "Thin Angular usage docs + helper constants for 1.0.0. A dedicated @angular/core wrapper lands in 1.x."
+});
+export {
+  t as INK_ANGULAR_SELECTOR,
+  e as createInkAngularUsage,
+  o as documentInkAngularAdapter
+};

package/dist/components/InkEditor/InkEditor.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),f=require("react"),T=require("../../constants/numbers.const.cjs"),u=require("../../constants/defaults.const.cjs"),ee=require("../../utils/cn.utils.cjs"),te=require("../../utils/typo.utils.cjs"),i=require("./helpers/format.utils.cjs"),I=require("./components/ToolbarButton/ToolbarButton.cjs"),re=require("./components/ToolbarDropdown/ToolbarDropdown.cjs"),O=require("./components/ToolbarColorPicker/ToolbarColorPicker.cjs"),b={bold:"B",italic:"I",underline:"U",strikethrough:"S",bulletList:"•",orderedList:"1.",link:"🔗",image:"🖼",clearFormat:"⌫",alignLeft:"⫷",alignCenter:"☰",alignRight:"⫸",alignJustify:"≡",indent:"→",outdent:"←",blockquote:"“",code:"</>"},ne=v=>{const{value:h,defaultValue:_="",onChange:g,placeholder:x=u.INK_PLACEHOLDER_DEFAULT,disabled:n=!1,readOnly:o=!1,minHeight:m=T.INK_MIN_HEIGHT,maxHeight:C,toolbar:y=u.INK_DEFAULT_TOOLBAR,className:E="",testId:S,allowImagePaste:A=!0,showCharCount:L=!1,charCountMax:N,typoAutoFix:B=!0,...F}=v,r=f.useRef(null),[D,U]=f.useState(new Set),[K,k]=f.useState("p"),[j,R]=f.useState(0),[q,w]=f.useState(T.INK_DEFAULT_TEXT_COLOR),[M,P]=f.useState(T.INK_DEFAULT_HIGHLIGHT_COLOR);f.useEffect(()=>{!r.current||h===void 0||r.current.innerHTML!==h&&(r.current.innerHTML=h)},[h]),f.useEffect(()=>{!r.current||h||!_||(r.current.innerHTML=_)},[]);const H=e=>{var t;g==null||g(e),L&&r.current&&R(((t=r.current.textContent)==null?void 0:t.length)??0)},p=()=>{U(i.getActiveFormats());const e=i.queryCommandValue("formatBlock");e&&k(e.toLowerCase().replace(/[<>]/g,""))},d=()=>{r.current&&(H(r.current.innerHTML),p())},V=()=>{if(!r.current||!B||n||o)return;const e=r.current.innerHTML,t=te.applyTypoAutoFix(e);t.html!==e&&(r.current.innerHTML=t.html,H(t.html))},G=e=>{var c;if(n||o)return;(c=r.current)==null||c.focus();const t=u.INK_BUTTON_CONFIG[e];t&&(t.value?i.execCommand(t.command,t.value):i.execCommand(t.command),d())},$=e=>{var t;n||o||((t=r.current)==null||t.focus(),i.execCommand("formatBlock",e),k(e),d())},W=()=>{var t;if(n||o)return;const e=window.prompt("Enter URL:","https://");e&&((t=r.current)==null||t.focus(),i.insertLink(e),d())},J=async()=>{if(n||o)return;const e=document.createElement("input");e.type="file",e.accept="image/*",e.onchange=async()=>{var a,l;const t=(a=e.files)==null?void 0:a[0];if(!t)return;const c=await i.fileToDataUrl(t);(l=r.current)==null||l.focus(),i.insertImage(c,t.name),d()},e.click()},X=async e=>{var c;if(!A||n||o)return;const t=(c=e.clipboardData)==null?void 0:c.items;if(t)for(const a of Array.from(t)){if(!a.type.startsWith("image/"))continue;e.preventDefault();const l=a.getAsFile();if(!l)continue;const Z=await i.fileToDataUrl(l);i.insertImage(Z),d()}},z=(e,t)=>{if(e==="divider")return s.jsx("span",{className:u.INK_CLASS_DIVIDER},`divider-${t}`);if(e==="headingDropdown")return s.jsx(re.ToolbarDropdown,{title:"Heading",options:u.INK_HEADING_OPTIONS,value:K||"p",disabled:n||o,onChange:$},"heading");if(e==="textColor")return s.jsx(O.ToolbarColorPicker,{title:"Text color",type:"text",value:q,disabled:n||o,onChange:a=>{var l;(l=r.current)==null||l.focus(),i.setTextColor(a),w(a),d()}},"textColor");if(e==="highlightColor")return s.jsx(O.ToolbarColorPicker,{title:"Highlight color",type:"highlight",value:M,disabled:n||o,onChange:a=>{var l;(l=r.current)==null||l.focus(),i.setHighlightColor(a),P(a),d()}},"highlightColor");if(e==="link")return s.jsx(I.ToolbarButton,{icon:b.link,title:"Insert link",disabled:n||o,onClick:W},"link");if(e==="image")return s.jsx(I.ToolbarButton,{icon:b.image,title:"Insert image",disabled:n||o,onClick:()=>{J()}},"image");const c=u.INK_BUTTON_CONFIG[e];return c?s.jsx(I.ToolbarButton,{icon:b[e]??e.slice(0,1).toUpperCase(),title:c.title,active:D.has(e),disabled:n||o,onClick:()=>G(e)},e):null},Q=typeof m=="number"?`${m}px`:m,Y=typeof C=="number"?`${C}px`:C;return s.jsxs("div",{className:ee.cn(u.INK_CLASS_ROOT,E),"data-testid":S,"data-disabled":n||void 0,...F,children:[s.jsx("div",{className:u.INK_CLASS_TOOLBAR,role:"toolbar","aria-label":"Ink formatting toolbar",children:y.map(z)}),s.jsx("div",{ref:r,className:u.INK_CLASS_CONTENT,contentEditable:!n&&!o,role:"textbox","aria-multiline":"true","aria-placeholder":x,"data-placeholder":x,suppressContentEditableWarning:!0,style:{minHeight:Q,maxHeight:Y},onInput:d,onBlur:V,onKeyUp:p,onMouseUp:p,onPaste:e=>{X(e)}}),L?s.jsxs("div",{className:u.INK_CLASS_FOOTER,children:[j,N?` / ${N}`:""]}):null]})};exports.InkEditor=ne;

package/dist/components/InkEditor/InkEditor.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { InkEditorProps } from '../../types';
+export declare const InkEditor: FC<InkEditorProps>;
+//# sourceMappingURL=InkEditor.d.ts.map

package/dist/components/InkEditor/InkEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InkEditor.d.ts","sourceRoot":"","sources":["../../../src/components/InkEditor/InkEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,EAAE,EAAuC,MAAM,OAAO,CAAC;AAClG,OAAO,KAAK,EAAE,cAAc,EAAiB,MAAM,aAAa,CAAC;AAgDjE,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAiQxC,CAAC"}

package/dist/components/InkEditor/InkEditor.js

@@ -0,0 +1,225 @@
+import { jsxs as k, jsx as s } from "react/jsx-runtime";
+import { useRef as nt, useState as d, useEffect as x } from "react";
+import { INK_MIN_HEIGHT as ot, INK_DEFAULT_TEXT_COLOR as it, INK_DEFAULT_HIGHLIGHT_COLOR as at } from "../../constants/numbers.const.js";
+import { INK_PLACEHOLDER_DEFAULT as lt, INK_DEFAULT_TOOLBAR as st, INK_CLASS_TOOLBAR as ct, INK_CLASS_CONTENT as ut, INK_CLASS_FOOTER as dt, INK_CLASS_DIVIDER as ft, INK_HEADING_OPTIONS as mt, INK_BUTTON_CONFIG as v, INK_CLASS_ROOT as ht } from "../../constants/defaults.const.js";
+import { cn as gt } from "../../utils/cn.utils.js";
+import { applyTypoAutoFix as pt } from "../../utils/typo.utils.js";
+import { setTextColor as Ct, setHighlightColor as It, getActiveFormats as Tt, queryCommandValue as Lt, fileToDataUrl as A, insertImage as O, execCommand as p, insertLink as _t } from "./helpers/format.utils.js";
+import { ToolbarButton as C } from "./components/ToolbarButton/ToolbarButton.js";
+import { ToolbarDropdown as bt } from "./components/ToolbarDropdown/ToolbarDropdown.js";
+import { ToolbarColorPicker as E } from "./components/ToolbarColorPicker/ToolbarColorPicker.js";
+const I = {
+  bold: "B",
+  italic: "I",
+  underline: "U",
+  strikethrough: "S",
+  bulletList: "•",
+  orderedList: "1.",
+  link: "🔗",
+  image: "🖼",
+  clearFormat: "⌫",
+  alignLeft: "⫷",
+  alignCenter: "☰",
+  alignRight: "⫸",
+  alignJustify: "≡",
+  indent: "→",
+  outdent: "←",
+  blockquote: "“",
+  code: "</>"
+}, St = (y) => {
+  const {
+    value: u,
+    defaultValue: T = "",
+    onChange: f,
+    placeholder: L = lt,
+    disabled: n = !1,
+    readOnly: o = !1,
+    minHeight: m = ot,
+    maxHeight: h,
+    toolbar: F = st,
+    className: S = "",
+    testId: D,
+    allowImagePaste: K = !0,
+    showCharCount: _ = !1,
+    charCountMax: b,
+    typoAutoFix: U = !0,
+    ...B
+  } = y, r = nt(null), [R, w] = d(/* @__PURE__ */ new Set()), [M, N] = d("p"), [V, P] = d(0), [G, $] = d(it), [j, q] = d(at);
+  x(() => {
+    !r.current || u === void 0 || r.current.innerHTML !== u && (r.current.innerHTML = u);
+  }, [u]), x(() => {
+    !r.current || u || !T || (r.current.innerHTML = T);
+  }, []);
+  const H = (t) => {
+    var e;
+    f == null || f(t), _ && r.current && P(((e = r.current.textContent) == null ? void 0 : e.length) ?? 0);
+  }, g = () => {
+    w(Tt());
+    const t = Lt("formatBlock");
+    t && N(t.toLowerCase().replace(/[<>]/g, ""));
+  }, c = () => {
+    r.current && (H(r.current.innerHTML), g());
+  }, W = () => {
+    if (!r.current || !U || n || o) return;
+    const t = r.current.innerHTML, e = pt(t);
+    e.html !== t && (r.current.innerHTML = e.html, H(e.html));
+  }, J = (t) => {
+    var l;
+    if (n || o) return;
+    (l = r.current) == null || l.focus();
+    const e = v[t];
+    e && (e.value ? p(e.command, e.value) : p(e.command), c());
+  }, X = (t) => {
+    var e;
+    n || o || ((e = r.current) == null || e.focus(), p("formatBlock", t), N(t), c());
+  }, z = () => {
+    var e;
+    if (n || o) return;
+    const t = window.prompt("Enter URL:", "https://");
+    t && ((e = r.current) == null || e.focus(), _t(t), c());
+  }, Q = async () => {
+    if (n || o) return;
+    const t = document.createElement("input");
+    t.type = "file", t.accept = "image/*", t.onchange = async () => {
+      var i, a;
+      const e = (i = t.files) == null ? void 0 : i[0];
+      if (!e) return;
+      const l = await A(e);
+      (a = r.current) == null || a.focus(), O(l, e.name), c();
+    }, t.click();
+  }, Y = async (t) => {
+    var l;
+    if (!K || n || o) return;
+    const e = (l = t.clipboardData) == null ? void 0 : l.items;
+    if (e)
+      for (const i of Array.from(e)) {
+        if (!i.type.startsWith("image/")) continue;
+        t.preventDefault();
+        const a = i.getAsFile();
+        if (!a) continue;
+        const rt = await A(a);
+        O(rt), c();
+      }
+  }, Z = (t, e) => {
+    if (t === "divider")
+      return /* @__PURE__ */ s("span", { className: ft }, `divider-${e}`);
+    if (t === "headingDropdown")
+      return /* @__PURE__ */ s(
+        bt,
+        {
+          title: "Heading",
+          options: mt,
+          value: M || "p",
+          disabled: n || o,
+          onChange: X
+        },
+        "heading"
+      );
+    if (t === "textColor")
+      return /* @__PURE__ */ s(
+        E,
+        {
+          title: "Text color",
+          type: "text",
+          value: G,
+          disabled: n || o,
+          onChange: (i) => {
+            var a;
+            (a = r.current) == null || a.focus(), Ct(i), $(i), c();
+          }
+        },
+        "textColor"
+      );
+    if (t === "highlightColor")
+      return /* @__PURE__ */ s(
+        E,
+        {
+          title: "Highlight color",
+          type: "highlight",
+          value: j,
+          disabled: n || o,
+          onChange: (i) => {
+            var a;
+            (a = r.current) == null || a.focus(), It(i), q(i), c();
+          }
+        },
+        "highlightColor"
+      );
+    if (t === "link")
+      return /* @__PURE__ */ s(
+        C,
+        {
+          icon: I.link,
+          title: "Insert link",
+          disabled: n || o,
+          onClick: z
+        },
+        "link"
+      );
+    if (t === "image")
+      return /* @__PURE__ */ s(
+        C,
+        {
+          icon: I.image,
+          title: "Insert image",
+          disabled: n || o,
+          onClick: () => {
+            Q();
+          }
+        },
+        "image"
+      );
+    const l = v[t];
+    return l ? /* @__PURE__ */ s(
+      C,
+      {
+        icon: I[t] ?? t.slice(0, 1).toUpperCase(),
+        title: l.title,
+        active: R.has(t),
+        disabled: n || o,
+        onClick: () => J(t)
+      },
+      t
+    ) : null;
+  }, tt = typeof m == "number" ? `${m}px` : m, et = typeof h == "number" ? `${h}px` : h;
+  return /* @__PURE__ */ k(
+    "div",
+    {
+      className: gt(ht, S),
+      "data-testid": D,
+      "data-disabled": n || void 0,
+      ...B,
+      children: [
+        /* @__PURE__ */ s("div", { className: ct, role: "toolbar", "aria-label": "Ink formatting toolbar", children: F.map(Z) }),
+        /* @__PURE__ */ s(
+          "div",
+          {
+            ref: r,
+            className: ut,
+            contentEditable: !n && !o,
+            role: "textbox",
+            "aria-multiline": "true",
+            "aria-placeholder": L,
+            "data-placeholder": L,
+            suppressContentEditableWarning: !0,
+            style: { minHeight: tt, maxHeight: et },
+            onInput: c,
+            onBlur: W,
+            onKeyUp: g,
+            onMouseUp: g,
+            onPaste: (t) => {
+              Y(t);
+            }
+          }
+        ),
+        _ ? /* @__PURE__ */ k("div", { className: dt, children: [
+          V,
+          b ? ` / ${b}` : ""
+        ] }) : null
+      ]
+    }
+  );
+};
+export {
+  St as InkEditor
+};

package/dist/components/InkEditor/components/ToolbarButton/ToolbarButton.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),o=require("../../../../constants/defaults.const.cjs"),l=require("../../../../utils/cn.utils.cjs"),c=n=>{const{icon:s,title:t,active:e=!1,onClick:r,disabled:a=!1}=n;return i.jsx("button",{type:"button",title:t,"aria-label":t,"aria-pressed":e,disabled:a,className:l.cn(o.INK_CLASS_BUTTON,e&&o.INK_CLASS_BUTTON_ACTIVE),onClick:r,children:s})};exports.ToolbarButton=c;

package/dist/components/InkEditor/components/ToolbarButton/ToolbarButton.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ToolbarButtonProps } from '../../../../types';
+export declare const ToolbarButton: FC<ToolbarButtonProps>;
+//# sourceMappingURL=ToolbarButton.d.ts.map

package/dist/components/InkEditor/components/ToolbarButton/ToolbarButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/InkEditor/components/ToolbarButton/ToolbarButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAI5D,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAehD,CAAC"}

package/dist/components/InkEditor/components/ToolbarButton/ToolbarButton.js

@@ -0,0 +1,22 @@
+import { jsx as l } from "react/jsx-runtime";
+import { INK_CLASS_BUTTON_ACTIVE as n, INK_CLASS_BUTTON as s } from "../../../../constants/defaults.const.js";
+import { cn as c } from "../../../../utils/cn.utils.js";
+const b = (r) => {
+  const { icon: e, title: t, active: o = !1, onClick: a, disabled: i = !1 } = r;
+  return /* @__PURE__ */ l(
+    "button",
+    {
+      type: "button",
+      title: t,
+      "aria-label": t,
+      "aria-pressed": o,
+      disabled: i,
+      className: c(s, o && n),
+      onClick: a,
+      children: e
+    }
+  );
+};
+export {
+  b as ToolbarButton
+};

package/dist/components/InkEditor/components/ToolbarButton/index.d.ts

@@ -0,0 +1,2 @@
+export { ToolbarButton } from './ToolbarButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/InkEditor/components/ToolbarButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/InkEditor/components/ToolbarButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/InkEditor/components/ToolbarColorPicker/ToolbarColorPicker.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../../../constants/defaults.const.cjs"),d=r=>{const{value:l,onChange:s,title:a,disabled:n=!1,type:t="text"}=r,i=o=>{s(o.target.value)};return e.jsxs("label",{className:"Ink-Editor__color",title:a,"aria-label":a,children:[e.jsx("span",{className:"Ink-Editor__color-swatch",style:{background:l},"data-type":t}),e.jsx("input",{type:"color",value:l,disabled:n,onChange:i,list:`ink-colors-${t}`}),e.jsx("datalist",{id:`ink-colors-${t}`,children:c.INK_COLOR_SWATCHES.map(o=>e.jsx("option",{value:o},o))})]})};exports.ToolbarColorPicker=d;

package/dist/components/InkEditor/components/ToolbarColorPicker/ToolbarColorPicker.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ToolbarColorPickerProps } from '../../../../types';
+export declare const ToolbarColorPicker: FC<ToolbarColorPickerProps>;
+//# sourceMappingURL=ToolbarColorPicker.d.ts.map

package/dist/components/InkEditor/components/ToolbarColorPicker/ToolbarColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarColorPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/InkEditor/components/ToolbarColorPicker/ToolbarColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,EAAE,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAGjE,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAwB1D,CAAC"}

package/dist/components/InkEditor/components/ToolbarColorPicker/ToolbarColorPicker.js

@@ -0,0 +1,24 @@
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { INK_COLOR_SWATCHES as c } from "../../../../constants/defaults.const.js";
+const m = (n) => {
+  const { value: l, onChange: r, title: t, disabled: s = !1, type: e = "text" } = n;
+  return /* @__PURE__ */ i("label", { className: "Ink-Editor__color", title: t, "aria-label": t, children: [
+    /* @__PURE__ */ a("span", { className: "Ink-Editor__color-swatch", style: { background: l }, "data-type": e }),
+    /* @__PURE__ */ a(
+      "input",
+      {
+        type: "color",
+        value: l,
+        disabled: s,
+        onChange: (o) => {
+          r(o.target.value);
+        },
+        list: `ink-colors-${e}`
+      }
+    ),
+    /* @__PURE__ */ a("datalist", { id: `ink-colors-${e}`, children: c.map((o) => /* @__PURE__ */ a("option", { value: o }, o)) })
+  ] });
+};
+export {
+  m as ToolbarColorPicker
+};

package/dist/components/InkEditor/components/ToolbarColorPicker/index.d.ts

@@ -0,0 +1,2 @@
+export { ToolbarColorPicker } from './ToolbarColorPicker';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/InkEditor/components/ToolbarColorPicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/InkEditor/components/ToolbarColorPicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/InkEditor/components/ToolbarDropdown/ToolbarDropdown.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),i=n=>{const{options:o,value:t,onChange:r,title:a,disabled:s=!1}=n,c=e=>{r(e.target.value)};return l.jsx("select",{className:"Ink-Editor__select",title:a,"aria-label":a,value:t,disabled:s,onChange:c,children:o.map(e=>l.jsx("option",{value:e.value,children:e.label},e.value))})};exports.ToolbarDropdown=i;

package/dist/components/InkEditor/components/ToolbarDropdown/ToolbarDropdown.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ToolbarDropdownProps } from '../../../../types';
+export declare const ToolbarDropdown: FC<ToolbarDropdownProps>;
+//# sourceMappingURL=ToolbarDropdown.d.ts.map

package/dist/components/InkEditor/components/ToolbarDropdown/ToolbarDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarDropdown.d.ts","sourceRoot":"","sources":["../../../../../src/components/InkEditor/components/ToolbarDropdown/ToolbarDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,EAAE,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAuBpD,CAAC"}

package/dist/components/InkEditor/components/ToolbarDropdown/ToolbarDropdown.js

@@ -0,0 +1,21 @@
+import { jsx as l } from "react/jsx-runtime";
+const h = (n) => {
+  const { options: o, value: t, onChange: r, title: a, disabled: s = !1 } = n;
+  return /* @__PURE__ */ l(
+    "select",
+    {
+      className: "Ink-Editor__select",
+      title: a,
+      "aria-label": a,
+      value: t,
+      disabled: s,
+      onChange: (e) => {
+        r(e.target.value);
+      },
+      children: o.map((e) => /* @__PURE__ */ l("option", { value: e.value, children: e.label }, e.value))
+    }
+  );
+};
+export {
+  h as ToolbarDropdown
+};

package/dist/components/InkEditor/components/ToolbarDropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { ToolbarDropdown } from './ToolbarDropdown';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/InkEditor/components/ToolbarDropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/InkEditor/components/ToolbarDropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/InkEditor/components/index.d.ts

@@ -0,0 +1,4 @@
+export { ToolbarButton } from './ToolbarButton';
+export { ToolbarDropdown } from './ToolbarDropdown';
+export { ToolbarColorPicker } from './ToolbarColorPicker';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/InkEditor/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/InkEditor/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/InkEditor/helpers/format.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=(t,e)=>document.execCommand(t,!1,e),r=t=>document.queryCommandState(t),a=t=>document.queryCommandValue(t),d=t=>{if(!t)return!1;const e=t.startsWith("http://")||t.startsWith("https://")||t.startsWith("mailto:")?t:`https://${t}`;return o("createLink",e)},l=t=>o("foreColor",t),m=t=>o("hiliteColor",t),s=t=>o("insertHTML",t),c=(t,e="")=>{const i=e.replace(/"/g,"&quot;");return s(`<img src="${t}" alt="${i}" style="max-width:100%;height:auto;" />`)},u=t=>new Promise((e,i)=>{const n=new FileReader;n.onload=()=>e(String(n.result)),n.onerror=i,n.readAsDataURL(t)}),h=()=>{const t=new Set;return r("bold")&&t.add("bold"),r("italic")&&t.add("italic"),r("underline")&&t.add("underline"),r("strikeThrough")&&t.add("strikethrough"),r("insertUnorderedList")&&t.add("bulletList"),r("insertOrderedList")&&t.add("orderedList"),t};exports.execCommand=o;exports.fileToDataUrl=u;exports.getActiveFormats=h;exports.insertHTML=s;exports.insertImage=c;exports.insertLink=d;exports.queryCommandState=r;exports.queryCommandValue=a;exports.setHighlightColor=m;exports.setTextColor=l;

package/dist/components/InkEditor/helpers/format.utils.d.ts

@@ -0,0 +1,13 @@
+import { ToolbarOption } from '../../../types';
+export declare const execCommand: (command: string, value?: string) => boolean;
+export declare const queryCommandState: (command: string) => boolean;
+export declare const queryCommandValue: (command: string) => string;
+export declare const insertLink: (url: string) => boolean;
+export declare const setTextColor: (color: string) => boolean;
+export declare const setHighlightColor: (color: string) => boolean;
+export declare const insertHTML: (html: string) => boolean;
+export declare const insertImage: (src: string, alt?: string) => boolean;
+export declare const fileToDataUrl: (file: File) => Promise<string>;
+export declare const getActiveFormats: () => Set<string>;
+export declare const applyFormat: (format: ToolbarOption) => boolean;
+//# sourceMappingURL=format.utils.d.ts.map

package/dist/components/InkEditor/helpers/format.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/InkEditor/helpers/format.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,eAAO,MAAM,WAAW,GAAI,SAAS,MAAM,EAAE,QAAQ,MAAM,KAAG,OACjB,CAAC;AAE9C,eAAO,MAAM,iBAAiB,GAAI,SAAS,MAAM,KAAG,OACf,CAAC;AAEtC,eAAO,MAAM,iBAAiB,GAAI,SAAS,MAAM,KAAG,MACf,CAAC;AAEtC,eAAO,MAAM,UAAU,GAAI,KAAK,MAAM,KAAG,OAOxC,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,KAAG,OAA0C,CAAC;AAExF,eAAO,MAAM,iBAAiB,GAAI,OAAO,MAAM,KAAG,OAA4C,CAAC;AAE/F,eAAO,MAAM,UAAU,GAAI,MAAM,MAAM,KAAG,OAA0C,CAAC;AAErF,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,EAAE,YAAQ,KAAG,OAGnD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,MAAM,IAAI,KAAG,OAAO,CAAC,MAAM,CAMrD,CAAC;AAEL,eAAO,MAAM,gBAAgB,QAAO,GAAG,CAAC,MAAM,CAS7C,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,QAAQ,aAAa,KAAG,OAuBnD,CAAC"}