Initial content
\",\n hashtag: true,\n urllink: true,\n fontSize: {\n desktop: 18, // px when number is passed\n tablet: 16,\n phone: 14,\n h1: 4.2, // em when number is passed\n h2: 3.56,\n h3: 2.92,\n h4: 2.28,\n h5: 1.64,\n h6: 1.15,\n small: 0.8\n },\n extensions: [],\n callback: (payload) => payload\n});\n```\n\n## Callback payload\n\nThe callback can receive updates for:\n- `commandTracker`\n- `range`\n- `caratPosition`\n- `loading`\n- `image`\n- `hashtag`\n- `urllink`\n\nExample:\n\n```js\nconst colorInput = document.getElementById(\"colorInput\");\nconst bgInput = document.getElementById(\"bgInput\");\n\nconst wysiwyg = new Wysiwyg4All({\n elementId: \"myeditor\",\n callback: (c) => {\n if (c.commandTracker) {\n const ct = c.commandTracker;\n console.log(\"commandTrackerColor\", ct.color, \"commandTrackerBg\", ct.backgroundColor);\n\n // Keep pickers in sync with caret position style.\n if (colorInput && typeof ct.color === \"string\" && ct.color) {\n colorInput.value = ct.color;\n }\n if (bgInput && typeof ct.backgroundColor === \"string\" && ct.backgroundColor) {\n bgInput.value = ct.backgroundColor;\n }\n }\n\n return c;\n }\n});\n```\n\n`commandTracker.color` and `commandTracker.backgroundColor` are strings in hex form when resolvable (for example `#0d9488`).\n\n## Commands\n\nUse `wysiwyg.command(...)`.\n\n### Inline style commands\n\n```js\nwysiwyg.command(\"bold\");\nwysiwyg.command(\"italic\");\nwysiwyg.command(\"underline\");\nwysiwyg.command(\"strike\");\nwysiwyg.command(\"h1\");\nwysiwyg.command(\"h2\");\nwysiwyg.command(\"h3\");\nwysiwyg.command(\"h4\");\nwysiwyg.command(\"h5\");\nwysiwyg.command(\"h6\");\nwysiwyg.command(\"small\");\n```\n\nBehavior:\n- These commands toggle on/off when applied to selected text.\n- For collapsed caret selections, style is applied to the next typed characters.\n\n![](\"https://github.com/broadwayinc/wysiwyg4all/blob/main/Manual%20figures/txt%20style.gif\")
\n\n### Text color and background color\n\n```js\n// Uses current highlightColor\nwysiwyg.command(\"color\");\n\n// Explicit text color\nwysiwyg.command({ color: \"#ef4444\" });\n\n// Explicit background color\nwysiwyg.command({ backgroundColor: \"#fef08a\" });\n\n// Color string shortcut is also supported\nwysiwyg.command(\"#3b82f6\");\n```\n\n![](\"https://github.com/broadwayinc/wysiwyg4all/blob/main/Manual%20figures/txtcolor.gif\")
\n\n### Layout and block commands\n\n```js\nwysiwyg.command(\"alignLeft\");\nwysiwyg.command(\"alignCenter\");\nwysiwyg.command(\"alignRight\");\nwysiwyg.command(\"quote\");\nwysiwyg.command(\"unorderedList\");\nwysiwyg.command(\"orderedList\");\nwysiwyg.command(\"divider\");\nwysiwyg.command(\"image\");\n```\n\nAlignment preview:\n\n![](\"https://github.com/broadwayinc/wysiwyg4all/blob/main/Manual%20figures/text%20alignment.gif\")
\n\nQuote preview:\n\n![](\"https://github.com/broadwayinc/wysiwyg4all/blob/main/Manual%20figures/Quote.PNG\")
\n\nList preview:\n\n![](\"https://github.com/broadwayinc/wysiwyg4all/blob/main/Manual%20figures/unordered%20list.gif\")
\n\nDivider preview:\n\n![](\"https://github.com/broadwayinc/wysiwyg4all/blob/main/Manual%20figures/Divider.PNG\")
\n\nImage insertion preview:\n\n![](\"https://github.com/broadwayinc/wysiwyg4all/blob/main/Manual%20figures/Image%20insertion.gif\")
\n\n### Custom insertion\n\n```js\n// Text node insertion\nwysiwyg.command({ element: \"Hello\" });\n\n// HTMLElement insertion\nconst badge = document.createElement(\"span\");\nbadge.textContent = \"NEW\";\nbadge.style.background = \"#111827\";\nbadge.style.color = \"#fff\";\nbadge.style.padding = \"2px 6px\";\nbadge.style.borderRadius = \"999px\";\n\nwysiwyg.command({\n element: badge,\n elementId: \"custom_badge\",\n style: {\n marginLeft: \"8px\"\n }\n});\n```\n\n![](\"https://github.com/broadwayinc/wysiwyg4all/blob/main/Manual%20figures/emoji.gif\")
\n\n## Image, hashtag, and URL decorators\n\nUse callback payloads to decorate generated tokens and uploaded images.\n\n```js\nconst wysiwyg = new Wysiwyg4All({\n elementId: \"myeditor\",\n hashtag: true,\n urllink: true,\n callback: (c) => {\n if (c.image) {\n for (const img of c.image) {\n img.style = {\n width: \"20rem\",\n border: \"solid 2px red\"\n };\n }\n }\n\n if (c.hashtag) {\n for (const h of c.hashtag) {\n h.style = { color: \"red\" };\n }\n }\n\n if (c.urllink) {\n for (const u of c.urllink) {\n u.style = { color: \"red\" };\n }\n }\n\n return c;\n }\n});\n```\n\nHashtag preview:\n\n![](\"https://github.com/broadwayinc/wysiwyg4all/blob/main/Manual%20figures/hashtag.gif\")
\n\nURL preview:\n\n![](\"https://github.com/broadwayinc/wysiwyg4all/blob/main/Manual%20figures/url%20link.gif\")
\n\n## Loading and exporting\n\n```js\nawait wysiwyg.loadHTML(\"Hello world
\", true);\n\nconst exported = await wysiwyg.export((setup) => {\n // optional preprocessing before export\n return setup;\n});\n\nconsole.log(exported.html);\nconsole.log(exported.text);\nconsole.log(exported.title);\n```\n\n## License\n\nThis project is licensed under the terms of the [MIT license](https://github.com/broadwayinc/wysiwyg4all/blob/main/LICENSE).\n","readmeFilename":"README.md"}