@open-wysiwyg-editor/astro 0.0.0-stage → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 alhassan-ahmed and open-wysiwyg-editor contributors
+
+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,121 @@
-# Temporary Holding Version
+<p align="center"><a href="https://alhassan73.github.io/open-wysiwyg-editor/"><img src="https://raw.githubusercontent.com/alhassan73/open-wysiwyg-editor/main/.github/assets/banner.png" alt="Open WYSIWYG Editor — accessible, RTL-first rich text editor for every framework" width="100%"></a></p>
 
-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.
+# @open-wysiwyg-editor/astro
+
+[![npm version](https://img.shields.io/npm/v/@open-wysiwyg-editor/astro)](https://www.npmjs.com/package/@open-wysiwyg-editor/astro)
+[![license](https://img.shields.io/npm/l/@open-wysiwyg-editor/astro)](https://github.com/alhassan73/open-wysiwyg-editor/blob/main/LICENSE)
+
+**[Live demo →](https://alhassan73.github.io/open-wysiwyg-editor/)** · [GitHub](https://github.com/alhassan73/open-wysiwyg-editor) · [npm](https://www.npmjs.com/package/@open-wysiwyg-editor/astro)
+
+An Astro component for the [Open WYSIWYG Editor](https://github.com/alhassan73/open-wysiwyg-editor#readme): an accessible (WCAG 2.2 AA), RTL-first rich text editor that runs under a strict Content Security Policy. It renders an `<owe-editor>` form field, so it works with plain form posts and needs no UI framework or client island.
+
+```astro
+<RichTextEditor name="body" value="<p>Hello</p>" />
+```
+
+## Install
+
+```bash
+npm install @open-wysiwyg-editor/astro
+```
+
+Requires Astro 4 or newer.
+
+## Usage
+
+The component imports its own script and styles, so you don't add anything else.
+
+```astro
+---
+import { RichTextEditor } from "@open-wysiwyg-editor/astro";
+---
+
+<form method="post" action="/api/save">
+  <label for="body">Article</label>
+  <RichTextEditor id="body" name="body" value="<p>Hello <strong>world</strong></p>" />
+  <button>Save</button>
+</form>
+```
+
+The editor is form-associated: the HTML is submitted under `name` with the surrounding `<form>`, and `form.reset()` restores the field.
+
+### Props
+
+| Prop | Type | Notes |
+| --- | --- | --- |
+| `name` | `string` | Form field name |
+| `value` | `string` | Initial content as HTML |
+| `placeholder` | `string` | |
+| `label` | `string` | Accessible name. Or point a `<label for>` at the component's `id` |
+| `readonly`, `disabled` | `boolean` | |
+| `language` | `string` | UI language, for example `"ar"`. Defaults to `<html lang>` |
+| `dir` | `"ltr"`, `"rtl"` or `"auto"` | Base direction of the content |
+| `toolbar` | `string` | Toolbar items separated by spaces, for example `"bold italic \| link"`, or `"none"` |
+| other | | Any HTML attribute (`id`, `class`, `data-*`…) is passed to the element |
+
+`language` and `toolbar` are read when the editor is created. The rest follow later changes.
+
+### Arabic and a custom toolbar
+
+```astro
+<RichTextEditor
+  name="body"
+  language="ar"
+  dir="rtl"
+  label="المحتوى"
+  toolbar="bold italic underline | link bulletList orderedList"
+/>
+```
+
+### Reading the value in a page script
+
+The element fires `input` on every change and `change` when it loses focus after a change. `element.value` is the HTML, and `element.editor` is the editor instance once it has started.
+
+```astro
+<RichTextEditor id="body" name="body" />
+
+<script>
+  const field = document.querySelector<HTMLElement & { value: string }>("#body")!;
+  field.addEventListener("input", () => console.log(field.value));
+</script>
+```
+
+For the full editor API (`getHTML()`, `commands`, `on()`…), use `field.editor`. For extra `createEditor` options, set `field.options = { … }` before the element connects. See the [HTML forms](https://github.com/alhassan73/open-wysiwyg-editor#html-forms) and [options](https://github.com/alhassan73/open-wysiwyg-editor#options) sections of the core docs.
+
+### Saving: form post and API route
+
+`src/pages/api/save.ts` (needs an adapter, or a prerender-off route):
+
+```ts
+import type { APIRoute } from "astro";
+
+export const prerender = false;
+
+export const POST: APIRoute = async ({ request }) => {
+  const form = await request.formData();
+  const body = String(form.get("body") ?? "");
+  // Sanitize again on the server before you store or render it for other users.
+  return Response.json({ length: body.length });
+};
+```
+
+In an Astro page (server output), read the same field with `await Astro.request.formData()` when `Astro.request.method === "POST"`.
+
+## Styling
+
+The component already imports `open-wysiwyg-editor/style.css`, and Astro bundles it with your page. Theme it with CSS variables; see [Styling](https://github.com/alhassan73/open-wysiwyg-editor#styling) in the core docs. To show saved HTML elsewhere, import `open-wysiwyg-editor/content.css`.
+
+## SSR and static builds
+
+The server (or the static build) renders only the `<owe-editor>` element, with the initial HTML in its `value` attribute. Astro escapes that attribute, so content from users can't run before the editor sanitizes it. The editor starts in the browser, and the field works with a plain form post in both `static` and `server` output.
+
+## Links
+
+- [Core docs](https://github.com/alhassan73/open-wysiwyg-editor#readme)
+- [Live demo](https://alhassan73.github.io/open-wysiwyg-editor/)
+- [Changelog](https://github.com/alhassan73/open-wysiwyg-editor/blob/main/CHANGELOG.md)
+- [Report an issue](https://github.com/alhassan73/open-wysiwyg-editor/issues)
+
+## License
+
+[MIT](https://github.com/alhassan73/open-wysiwyg-editor/blob/main/LICENSE) © alhassan-ahmed

package/RichTextEditor.astro

@@ -0,0 +1,32 @@
+---
+// Renders <owe-editor>. The initial HTML travels in the escaped `value` attribute, so content that
+// came from users can't run before the editor sanitizes it. The editor itself starts in the browser.
+import type { HTMLAttributes } from "astro/types";
+
+export interface Props extends HTMLAttributes<"div"> {
+  /** Initial content as HTML. */
+  value?: string;
+  /** Form field name: the HTML is submitted with the surrounding <form>. */
+  name?: string;
+  placeholder?: string;
+  /** Accessible name (or point a <label for> at the element's id). */
+  label?: string;
+  readonly?: boolean;
+  disabled?: boolean;
+  /** UI language, e.g. "ar". Defaults to <html lang>. */
+  language?: string;
+  /** Base direction of the content. */
+  dir?: "ltr" | "rtl" | "auto";
+  /** Toolbar items separated by spaces ("bold italic | link"), or "none". */
+  toolbar?: string;
+}
+
+const { value = "", ...attributes } = Astro.props;
+---
+
+<owe-editor value={value} {...attributes}></owe-editor>
+
+<script>
+  import "open-wysiwyg-editor/element";
+  import "open-wysiwyg-editor/style.css";
+</script>

package/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="astro/client" />
+export { default as RichTextEditor } from "./RichTextEditor.astro";

package/index.js

@@ -0,0 +1 @@
+export { default as RichTextEditor } from "./RichTextEditor.astro";

package/package.json

@@ -1,6 +1,56 @@
 {
   "name": "@open-wysiwyg-editor/astro",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "Astro component for open-wysiwyg-editor: <RichTextEditor name value />, works with plain form posts. Accessible (WCAG 2.2 AA), RTL-first, CSP-safe.",
+  "license": "MIT",
+  "author": "alhassan-ahmed",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./RichTextEditor.astro": "./RichTextEditor.astro",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "RichTextEditor.astro"
+  ],
+  "keywords": [
+    "astro",
+    "astro-component",
+    "withastro",
+    "wysiwyg",
+    "rich-text-editor",
+    "editor",
+    "accessibility",
+    "a11y",
+    "rtl",
+    "arabic"
+  ],
+  "dependencies": {
+    "open-wysiwyg-editor": "^1.0.0"
+  },
+  "peerDependencies": {
+    "astro": ">=4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "astro": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://alhassan73.github.io/open-wysiwyg-editor/",
+  "bugs": {
+    "url": "https://github.com/alhassan73/open-wysiwyg-editor/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alhassan73/open-wysiwyg-editor.git",
+    "directory": "packages/astro"
+  }
+}