@mdaemon/html-editor 1.6.0 → 1.7.0

package/README.md

@@ -1,3 +1,5 @@
+[![Dynamic JSON Badge](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Fmdaemon-technologies%2FMDHTMLEditor%2Fmaster%2Fpackage.json&query=%24.version&prefix=v&label=npm&color=blue)](https://www.npmjs.com/package/@mdaemon/html-editor) [![install size](https://packagephobia.com/badge?p=@mdaemon/html-editor)](https://packagephobia.com/result?p=@mdaemon/html-editor) [![Dynamic JSON Badge](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Fmdaemon-technologies%2FMDHTMLEditor%2Fmaster%2Fpackage.json&query=%24.license&prefix=v&label=license&color=green)](https://github.com/mdaemon-technologies/MDHTMLEditor/blob/master/LICENSE) [![Node.js CI](https://github.com/mdaemon-technologies/MDHTMLEditor/actions/workflows/ci.yml/badge.svg)](https://github.com/mdaemon-technologies/MDHTMLEditor/actions/workflows/ci.yml)
+
 # MDHTMLEditor
 
 A TinyMCE-compatible HTML editor built on TipTap. This is the core vanilla TypeScript package - for React usage, see `@mdaemon/html-editor-react`.
@@ -54,6 +56,26 @@ editor.on('dirty', (isDirty) => {
 editor.destroy();
 ```
 
+### Browser (CDN / script tag)
+
+For static pages without a bundler, load the self-contained UMD bundle via a `<script>` tag.
+It exposes the entire public API under the `MDHTMLEditor` global. Styles must be loaded
+separately — the UMD bundle contains JavaScript only.
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/@mdaemon/html-editor/dist/styles.css">
+<script src="https://unpkg.com/@mdaemon/html-editor"></script>
+<script>
+  const editor = new MDHTMLEditor.HTMLEditor(
+    document.getElementById('editor'),
+    { height: 400 }
+  );
+</script>
+```
+
+`unpkg` and `jsdelivr` both serve the package; pin a version for production
+(e.g. `https://unpkg.com/@mdaemon/html-editor@1.7.0`).
+
 ### Custom Toolbar Buttons
 
 ```typescript
@@ -719,6 +741,36 @@ The editor DOM uses BEM-style classes you can target for further customization:
 - Safari (latest)
 - Edge (latest)
 
+## Development
+
+Clone the repo and install dependencies with `npm install`, then use:
+
+```bash
+npm run build        # production build → dist/ (ES, CJS, UMD, .d.ts, styles.css)
+npm run build:dev    # development build (unminified, sourcemaps)
+npm run dev          # rebuild on change (watch mode)
+npm test             # run the Jest suite
+npm run test:dist    # build, then smoke-test the built UMD bundle
+npm run typecheck    # tsc --noEmit (strict)
+npm run lint         # eslint src
+```
+
+### Demos
+
+```bash
+npm run demo         # live demo from TypeScript source (Vite dev server, HTTPS)
+npm run demo:umd     # build, then serve the UMD/script-tag demo as static files
+```
+
+- **`npm run demo`** serves `test/index.html` through Vite's dev server, importing the editor
+  directly from `src/`. Use this for day-to-day feature work — it hot-reloads and exercises the
+  full toolbar. It runs over HTTPS (self-signed cert) so microphone-dependent features
+  (Speech-to-Text, Dictation) work.
+- **`npm run demo:umd`** runs a production build and then serves `test/umd.html` as raw static
+  files (via `test/serve-umd.mjs`), loading the built `dist/index.umd.js` and `dist/styles.css`
+  exactly the way a CDN / `<script>`-tag consumer would. Use this to verify the UMD bundle and
+  the `MDHTMLEditor` global.
+
 ## License
 
 LGPL 3.0 or later - MDaemon Technologies

package/dist/index.d.ts

@@ -864,15 +864,21 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        lineHeight: {
-            /**
-             * Set the line height
-             */
-            setLineHeight: (lineHeight: string) => ReturnType;
-            /**
-             * Unset the line height
-             */
-            unsetLineHeight: () => ReturnType;
+        inlineStyle: {
+            /** Apply a CSS class to the current selection via the textStyle mark. */
+            setInlineClass: (className: string) => ReturnType;
+            /** Remove the textStyle class. */
+            unsetInlineClass: () => ReturnType;
+        };
+    }
+}
+
+
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        anchor: {
+            /** Insert a named anchor at the cursor. */
+            setAnchor: (name: string) => ReturnType;
         };
     }
 }
@@ -896,21 +902,15 @@ declare module '@tiptap/core' {
 
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
-        anchor: {
-            /** Insert a named anchor at the cursor. */
-            setAnchor: (name: string) => ReturnType;
-        };
-    }
-}
-
-
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        inlineStyle: {
-            /** Apply a CSS class to the current selection via the textStyle mark. */
-            setInlineClass: (className: string) => ReturnType;
-            /** Remove the textStyle class. */
-            unsetInlineClass: () => ReturnType;
+        lineHeight: {
+            /**
+             * Set the line height
+             */
+            setLineHeight: (lineHeight: string) => ReturnType;
+            /**
+             * Unset the line height
+             */
+            unsetLineHeight: () => ReturnType;
         };
     }
 }