@oix1987/yjd 1.0.2 → 2.0.0

package/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2024 Oix1987
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -1,142 +1,146 @@
-# @oix1987/yjd - Professional Rich Text Editor
-
-A powerful, commercial-grade rich text editor with real-time content change tracking for web applications. Built with vanilla JavaScript for maximum performance and compatibility.
-
-## 🚀 Features
-
-- **Rich Text Formatting**: Bold, Italic, Underline, Strikethrough, Subscript, Superscript
-- **Advanced Formatting**: Text alignment, line height, font family, text size, background colors
-- **Content Management**: Images, tables, links, lists, emojis, videos
-- **Real-time Tracking**: `onChange` callback for live content monitoring
-- **Modern UI**: Customizable toolbar with intuitive controls
-- **TypeScript Support**: Full type definitions included
-- **Lightweight**: Pure JavaScript implementation, no heavy dependencies
-- **Cross-browser**: Compatible with all modern browsers
-
-## 📦 Installation
-
-```bash
-npm install @oix1987/yjd
-```
-
-## 💻 Usage
-
-### Basic Implementation
-
-```javascript
-import RichEditor from "@oix1987/yjd";
-
-const editor = new RichEditor("#editor-container", {
-  content: "<p>Initial content</p>",
-  height: 400,
-  width: 800,
-  theme: "light",
-  placeholder: "Start typing...",
-  onChange: (content) => {
-    // Handle content changes here
-    console.log("Content changed:", content);
-    // Update your output container
-    document.getElementById("output").innerHTML = content;
-  },
-});
-```
-
-### CDN Usage
-
-```html
-<!-- Using jsDelivr CDN -->
-<script src="https://cdn.jsdelivr.net/npm/@oix1987/yjd@1.0.2/dist/rich-editor.min.js"></script>
-<script>
-  const editor = new RichEditor("#editor-container", {
-    // configuration options
-  });
-</script>
-```
-
-### Alternative CDN
-
-```html
-<!-- Using unpkg CDN -->
-<script src="https://unpkg.com/@oix1987/yjd@1.0.2/dist/rich-editor.min.js"></script>
-```
-
-## ⚙️ Configuration Options
-
-| Option        | Type     | Default        | Description                                   |
-| ------------- | -------- | -------------- | --------------------------------------------- |
-| `content`     | string   | null           | Initial content for the editor                |
-| `height`      | number   | 400            | Editor height in pixels                       |
-| `width`       | number   | 800            | Editor width in pixels                        |
-| `theme`       | string   | 'light'        | Editor theme (light/dark)                     |
-| `placeholder` | string   | 'Type here...' | Placeholder text                              |
-| `onChange`    | function | undefined      | Callback function called when content changes |
-
-### onChange Callback
-
-The `onChange` callback receives the current HTML content as a parameter:
-
-```javascript
-onChange: (content) => {
-  // content is the HTML string of the editor content
-  console.log("New content:", content);
-
-  // Example: Update an output container
-  document.getElementById("output").innerHTML = content;
-
-  // Example: Send to server
-  fetch("/api/save-content", {
-    method: "POST",
-    body: JSON.stringify({ content }),
-    headers: { "Content-Type": "application/json" },
-  });
-};
-```
-
-## 🎯 Events
-
-The editor supports comprehensive event handling:
-
-```javascript
-// Listen for text changes
-editor.on("text-change", (content) => {
-  console.log("Text changed:", content);
-});
-
-// Listen for focus events
-editor.on("focus", () => {
-  console.log("Editor focused");
-});
-
-// Remove event listener
-editor.off("text-change", handler);
-```
-
-## 🔧 API Methods
-
-| Method                | Description              | Parameters                         | Returns  |
-| --------------------- | ------------------------ | ---------------------------------- | -------- |
-| `getContent()`        | Get current HTML content | -                                  | `string` |
-| `setContent(content)` | Set editor content       | `content: string`                  | `void`   |
-| `focus()`             | Focus the editor         | -                                  | `void`   |
-| `on(event, handler)`  | Add event listener       | `event: string, handler: function` | `void`   |
-| `off(event, handler)` | Remove event listener    | `event: string, handler: function` | `void`   |
-
-## 💼 Commercial License
-
-This is a commercial product. For licensing information and pricing, please contact:
-
-- **Author**: Oix1987
-- **License**: ISC (Commercial)
-- **Version**: 1.0.1
-
-## 📄 License
-
-Copyright (c) 2024 Oix1987. All rights reserved.
-
-This software is licensed under the ISC License. Commercial use requires a valid license.
-
-## 🆘 Support
-
-For technical support, feature requests, or licensing inquiries, please contact the author.
-
-See `index.html` and `main.js` for a complete working example that demonstrates the `onChange` functionality with real-time output display.
+# yjd
+
+**Rich text, without the weight.** A dependency-free, tree-shakeable rich text editor for the web. Compose it from a `/core` entry and ship **16 KB**, not the whole library.
+
+🔗 **[yjd.io](https://yjd.io)** · [Live playground](https://yjd.io/demos/) · [Docs](https://yjd.io/site/docs.html)
+
+```js
+import RichEditor from '@oix1987/yjd';
+new RichEditor('#editor', { placeholder: 'Start writing…' });
+```
+
+---
+
+## Why yjd
+
+- **Tree-shakeable core** — register only the formats/modules you use; the rest is dropped.
+- **Zero runtime dependencies** — plain DOM, ESM + UMD builds.
+- **Framework-agnostic** — drop it into React, Vue, Svelte, or a static page.
+- **Responsive** — toolbar fills the width on desktop, a single swipe-row on mobile.
+- **XSS-safe paste** — sanitises pasted HTML (scripts/handlers/unsafe URLs stripped; only trusted embeds survive).
+- **Accessible** — keyboard navigable, WCAG-AA contrast (Lighthouse a11y 100).
+
+## Bundle size (gzipped JS)
+
+Every preset is built from the same `/core` entry — pick a profile, tree-shake the rest.
+
+| Preset | Includes | Size |
+|---|---|---|
+| Minimal | bold · italic · underline · link | **~16 KB** |
+| Bubble | floating bar, no toolbar + slash menu | **~21 KB** |
+| Basic | + strike · headings · lists · align | **~25 KB** |
+| Standard | + colour · image · table · find · code view | **~38 KB** |
+| Full | everything (CSS inlined) | **~54 KB** |
+
+> For comparison, Quill 2 is ~60 KB. The stylesheet (~8 KB gzip) ships once and is cached, kept out of the JS.
+
+## Install
+
+```bash
+npm i @oix1987/yjd
+```
+
+Or via CDN (all-in-one UMD):
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@oix1987/yjd/lib/styles.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@oix1987/yjd"></script>
+<script> new RichEditor('#editor'); </script>
+```
+
+## Quick start (all-in-one)
+
+The default build registers everything and injects its CSS:
+
+```js
+import RichEditor from '@oix1987/yjd';
+
+const editor = new RichEditor('#editor', {
+  placeholder: 'Start writing…',
+  onChange: (html) => console.log(html),
+});
+```
+
+## Tree-shakeable core
+
+For the smallest bundle, import from `@oix1987/yjd/core` (side-effect-free) and register only what you need. Link the stylesheet once.
+
+```js
+import { Editor, registry, Bold, Italic, Underline, Link, Toolbar, History }
+  from '@oix1987/yjd/core';
+
+registry.register('formats/bold', Bold);
+registry.register('formats/italic', Italic);
+registry.register('formats/underline', Underline);
+registry.register('formats/link', Link);
+registry.register('modules/toolbar', Toolbar);
+registry.register('modules/history', History);
+
+new Editor('#editor', {
+  formats: ['bold', 'italic', 'underline', 'link'],
+  modules: ['toolbar', 'history'],
+});
+```
+
+```html
+<link rel="stylesheet" href="@oix1987/yjd/lib/styles.min.css">
+```
+
+## Options
+
+| Option | Type | Description |
+|---|---|---|
+| `placeholder` | string | Empty-state text. |
+| `content` | string | Initial HTML. |
+| `width` / `maxWidth` | number｜string | Number = px; string (e.g. `'100%'`) = responsive. |
+| `height` / `maxHeight` | number | Editor body height in px. |
+| `onChange` | fn(html) | Called on every content change. |
+| `toolbar1` / `toolbar2` | array | Toolbar groups: `{ group, items: [] }`. |
+| `formats` / `modules` | string[] | Which registered features to activate. |
+| `features` | object | `{ wordCount, breadcrumb, … }` — toggle the status bar. |
+| `maxLength` | number | Hard character limit. |
+
+## Formats & modules
+
+**Formats** — `bold` · `italic` · `underline` · `strike` · `subscript` · `superscript` · `color` · `background` · `link` · `heading` · `font-family` · `text-size` · `line-height` · `capitalization` · `text-align` · `list` · `indent-increase` · `indent-decrease` · `image` · `video` · `table` · `emoji` · `tag`
+
+**Modules** — `toolbar` · `history` · `slash-menu` · `block-toolbar` (bubble bar) · `table-toolbar` · `find-replace` · `code-view` · `resize-handles`
+
+## Methods
+
+`getHTML()` · `getText()` · `insertHTML(html)` · `insertText(t)` · `clear()` · `isEmpty()` · `focus()` · `setReadOnly(bool)` · `undo()` · `redo()`
+
+## Styling
+
+Theme via CSS custom properties:
+
+```css
+.yjd-rich-editor {
+  --rte-accent: #6d5efc;   /* primary */
+  --rte-ink:    #20242f;   /* text */
+  --rte-radius: 14px;
+  --rte-border: #e9e9f1;
+}
+```
+
+## Development
+
+```bash
+npm install
+npm run build        # dist/ (UMD + ESM) + bundled /core; regenerates CSS
+npm test             # unit tests (sanitize, exec-command)
+npm run build:demos  # preset demo bundles
+
+# Static site (landing + docs + playground) for Cloudflare Pages
+npm run build:pages  # build + assemble ./public
+```
+
+### Deploy to Cloudflare Pages (yjd.io)
+
+- **Build command:** `npm run build:pages`
+- **Output directory:** `public`
+- Add `yjd.io` as a custom domain in the Pages project.
+
+## License
+
+ISC

package/core.js

@@ -0,0 +1,77 @@
+/**
+ * Tree-shakeable entry point.
+ *
+ * Unlike the default entry (./index.js) — which registers every format/module
+ * and injects the stylesheet on import (convenient, but pulls the whole editor)
+ * — this entry only RE-EXPORTS classes with no side effects. A bundler can drop
+ * anything you don't import.
+ *
+ * Usage (only what you need ends up in your bundle):
+ *
+ *   import { Editor, registry, StylesLoader, Bold, Italic, Toolbar, History }
+ *     from '@oix1987/yjd/core';
+ *   StylesLoader.loadStyles();
+ *   registry.register('formats/bold', Bold);
+ *   registry.register('formats/italic', Italic);
+ *   registry.register('modules/toolbar', Toolbar);
+ *   registry.register('modules/history', History);
+ *   const editor = new Editor('#app', {
+ *     formats: ['bold', 'italic'],
+ *     modules: ['toolbar', 'history'],
+ *   });
+ */
+
+// Core
+export { default as Editor } from './lib/core/editor.js';
+export { default as Module } from './lib/core/module.js';
+export { Format, InlineFormat, BlockFormat } from './lib/core/format.js';
+export { default as registry } from './lib/core/registry.js';
+export { default as StylesLoader } from './lib/styles-loader.js';
+
+// Formats
+export { default as Bold } from './lib/formats/bold.js';
+export { default as Italic } from './lib/formats/italic.js';
+export { default as Underline } from './lib/formats/underline.js';
+export { default as Strike } from './lib/formats/strike.js';
+export { default as Subscript } from './lib/formats/subscript.js';
+export { default as Superscript } from './lib/formats/superscript.js';
+export { default as Color } from './lib/formats/color.js';
+export { default as Background } from './lib/formats/background.js';
+export { default as Link } from './lib/formats/link.js';
+export { default as Table } from './lib/formats/table.js';
+export { default as Heading } from './lib/formats/heading.js';
+export { default as FontFamily } from './lib/formats/font-family.js';
+export { default as LineHeight } from './lib/formats/line-height.js';
+export { default as Capitalization } from './lib/formats/capitalization.js';
+export { default as TextAlign } from './lib/formats/text-align.js';
+export { default as List } from './lib/formats/list.js';
+export { default as Indent, IndentIncrease, IndentDecrease } from './lib/formats/indent.js';
+export { default as Emoji } from './lib/formats/emoji.js';
+export { default as Image } from './lib/formats/image.js';
+export { default as Video } from './lib/formats/video.js';
+export { default as Tag } from './lib/formats/tag.js';
+export { default as TextSize } from './lib/formats/text-size.js';
+export { default as Import } from './lib/formats/import.js';
+
+// Modules
+export { default as Toolbar } from './lib/modules/toolbar.js';
+export { default as History } from './lib/modules/history.js';
+export { default as BlockToolbar } from './lib/modules/block-toolbar.js';
+export { default as TableToolbar } from './lib/modules/table-toolbar.js';
+export { default as CodeView } from './lib/modules/code-view.js';
+export { default as FindReplace } from './lib/modules/find-replace.js';
+export { default as SlashMenu } from './lib/modules/slash-menu.js';
+export { default as ResizeHandles } from './lib/modules/resize-handles.js';
+
+// UI
+export { default as IconUtils } from './lib/ui/icons.js';
+export { default as ColorPicker } from './lib/ui/color-picker.js';
+export { default as LinkPopup } from './lib/ui/link-popup.js';
+export { default as TablePopup } from './lib/ui/table-popup.js';
+export { default as TextAlignPicker } from './lib/ui/text-align-picker.js';
+export { default as ListPicker } from './lib/ui/list-picker.js';
+export { default as EmojiPicker } from './lib/ui/emoji-picker.js';
+export { default as ImagePopup } from './lib/ui/image-popup.js';
+export { default as VideoPopup } from './lib/ui/video-popup.js';
+export { default as TagPopup } from './lib/ui/tag-popup.js';
+export { default as createCustomButton } from './lib/ui/select-button.js';