truerte-react 0.0.5 → 0.0.6

package/README.md

@@ -12,7 +12,7 @@ This package is a thin wrapper around [TrueRTE](https://github.com/TrueRTE/truer
 ## Installation
 
 ```bash
-npm install truerte truerte-react
+npm install truerte-react
 ```
 
 ## Quick Example
@@ -23,7 +23,6 @@ import { Editor } from "truerte-react";
 export default function App() {
   return (
     <Editor
-      truerteScriptSrc="/truerte/truerte.min.js"
       useLucideIcons={true}
       init={{
         height: 500,
@@ -35,6 +34,9 @@ export default function App() {
 }
 ```
 
+`truerte-react` now loads bundled TrueRTE core assets from the installed package by default.
+If you need script URL loading, provide `truerteScriptSrc` (or set `bundleCoreEditor={false}` to use the CDN fallback).
+
 ## Issues
 
 Have you found an issue with `truerte-react` or do you have a feature request?

package/lib/cjs/main/ts/BundledTrueRTE.d.ts

@@ -0,0 +1,10 @@
+export declare const parsePluginNames: (plugins: unknown) => string[];
+export interface BundledTrueRTELoadOptions {
+    plugins: unknown;
+    icons?: unknown;
+    model?: unknown;
+    theme?: unknown;
+    skin?: unknown;
+    contentCss?: unknown;
+}
+export declare const loadBundledTrueRTE: (options: BundledTrueRTELoadOptions) => Promise<void>;

package/lib/cjs/main/ts/BundledTrueRTE.js

@@ -0,0 +1,140 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadBundledTrueRTE = exports.parsePluginNames = void 0;
+const toTokens = (value) => value
+    .split(/[\s,]+/)
+    .map((token) => token.trim())
+    .filter((token) => token.length > 0);
+const unique = (items) => Array.from(new Set(items));
+const parsePluginNames = (plugins) => {
+    if (typeof plugins === 'string') {
+        return unique(toTokens(plugins));
+    }
+    if (Array.isArray(plugins)) {
+        return unique(plugins.flatMap((item) => typeof item === 'string' ? toTokens(item) : []));
+    }
+    return [];
+};
+exports.parsePluginNames = parsePluginNames;
+const parseContentCssNames = (contentCss) => {
+    if (typeof contentCss === 'string') {
+        return unique(toTokens(contentCss));
+    }
+    if (Array.isArray(contentCss)) {
+        return unique(contentCss.flatMap((item) => typeof item === 'string' ? toTokens(item) : []));
+    }
+    return [];
+};
+const MODEL_LOADERS = {
+    dom: () => Promise.resolve().then(() => require('truerte/js/truerte/models/dom/model.js'))
+};
+const THEME_LOADERS = {
+    silver: () => Promise.resolve().then(() => require('truerte/js/truerte/themes/silver/theme.js'))
+};
+const ICON_LOADERS = {
+    default: () => Promise.resolve().then(() => require('truerte/js/truerte/icons/default/icons.js')),
+    'truerte-lucide': () => Promise.resolve().then(() => require('truerte/js/truerte/icons/truerte-lucide/icons.js'))
+};
+const SKIN_LOADERS = {
+    oxide: () => Promise.resolve().then(() => require('truerte/js/truerte/skins/ui/oxide/skin.js')),
+    'oxide-dark': () => Promise.resolve().then(() => require('truerte/js/truerte/skins/ui/oxide-dark/skin.js')),
+    'truerte-5': () => Promise.resolve().then(() => require('truerte/js/truerte/skins/ui/truerte-5/skin.js')),
+    'truerte-5-dark': () => Promise.resolve().then(() => require('truerte/js/truerte/skins/ui/truerte-5-dark/skin.js'))
+};
+const CONTENT_CSS_LOADERS = {
+    default: () => Promise.resolve().then(() => require('truerte/js/truerte/skins/content/default/content.js')),
+    dark: () => Promise.resolve().then(() => require('truerte/js/truerte/skins/content/dark/content.js')),
+    document: () => Promise.resolve().then(() => require('truerte/js/truerte/skins/content/document/content.js')),
+    writer: () => Promise.resolve().then(() => require('truerte/js/truerte/skins/content/writer/content.js')),
+    'truerte-5': () => Promise.resolve().then(() => require('truerte/js/truerte/skins/content/truerte-5/content.js')),
+    'truerte-5-dark': () => Promise.resolve().then(() => require('truerte/js/truerte/skins/content/truerte-5-dark/content.js'))
+};
+const PLUGIN_LOADERS = {
+    accordion: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/accordion/plugin.js')),
+    advlist: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/advlist/plugin.js')),
+    anchor: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/anchor/plugin.js')),
+    autolink: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/autolink/plugin.js')),
+    autoresize: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/autoresize/plugin.js')),
+    autosave: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/autosave/plugin.js')),
+    casechange: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/casechange/plugin.js')),
+    charmap: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/charmap/plugin.js')),
+    code: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/code/plugin.js')),
+    codesample: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/codesample/plugin.js')),
+    directionality: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/directionality/plugin.js')),
+    emoticons: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/emoticons/plugin.js')),
+    fullscreen: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/fullscreen/plugin.js')),
+    help: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/help/plugin.js')),
+    image: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/image/plugin.js')),
+    importcss: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/importcss/plugin.js')),
+    insertdatetime: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/insertdatetime/plugin.js')),
+    letterspacing: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/letterspacing/plugin.js')),
+    link: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/link/plugin.js')),
+    lists: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/lists/plugin.js')),
+    lucideicons: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/lucideicons/plugin.js')),
+    media: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/media/plugin.js')),
+    nonbreaking: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/nonbreaking/plugin.js')),
+    pagebreak: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/pagebreak/plugin.js')),
+    paragraphspacing: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/paragraphspacing/plugin.js')),
+    preview: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/preview/plugin.js')),
+    quickbars: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/quickbars/plugin.js')),
+    save: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/save/plugin.js')),
+    searchreplace: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/searchreplace/plugin.js')),
+    table: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/table/plugin.js')),
+    template: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/template/plugin.js')),
+    visualblocks: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/visualblocks/plugin.js')),
+    visualchars: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/visualchars/plugin.js')),
+    wordcount: () => Promise.resolve().then(() => require('truerte/js/truerte/plugins/wordcount/plugin.js'))
+};
+const loadedModels = new Set();
+const loadedThemes = new Set();
+const loadedIcons = new Set();
+const loadedSkins = new Set();
+const loadedContentCss = new Set();
+const loadedPlugins = new Set();
+let corePromise;
+const loadCore = () => __awaiter(void 0, void 0, void 0, function* () {
+    corePromise !== null && corePromise !== void 0 ? corePromise : (corePromise = Promise.resolve().then(() => require('truerte/js/truerte/truerte.js')).then(() => undefined));
+    yield corePromise;
+});
+const loadCachedResource = (cache, name, loaders) => __awaiter(void 0, void 0, void 0, function* () {
+    if (cache.has(name)) {
+        return;
+    }
+    const loader = loaders[name];
+    if (!loader) {
+        return;
+    }
+    yield loader();
+    cache.add(name);
+});
+const loadBundledTrueRTE = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    yield loadCore();
+    const model = typeof options.model === 'string' ? options.model : 'dom';
+    const theme = typeof options.theme === 'string' ? options.theme : 'silver';
+    const iconPack = typeof options.icons === 'string' ? options.icons : 'default';
+    const skin = options.skin === false ? false : (typeof options.skin === 'string' ? options.skin : 'oxide');
+    const contentCss = options.contentCss === false
+        ? []
+        : options.contentCss === undefined
+            ? ['default']
+            : parseContentCssNames(options.contentCss);
+    const plugins = (0, exports.parsePluginNames)(options.plugins);
+    yield Promise.all([
+        loadCachedResource(loadedModels, model, MODEL_LOADERS),
+        loadCachedResource(loadedThemes, theme, THEME_LOADERS),
+        loadCachedResource(loadedIcons, iconPack, ICON_LOADERS),
+        ...(skin ? [loadCachedResource(loadedSkins, skin, SKIN_LOADERS)] : []),
+        ...contentCss.map((name) => loadCachedResource(loadedContentCss, name, CONTENT_CSS_LOADERS)),
+    ]);
+    yield Promise.all(plugins.map((plugin) => loadCachedResource(loadedPlugins, plugin, PLUGIN_LOADERS)));
+});
+exports.loadBundledTrueRTE = loadBundledTrueRTE;

package/lib/cjs/main/ts/components/Editor.d.ts

@@ -71,11 +71,17 @@ export interface IProps {
      */
     tabIndex: number;
     /**
-     * @description The TrueRTE version to use when loading from jsDelivr CDN. By default, version 1
+     * @description The TrueRTE version to use when loading from jsDelivr CDN. This is only used when
+     * `bundleCoreEditor` is `false` and `truerteScriptSrc` is not specified. By default, version 1
      * (that is, the latest minor and patch release of the major version 1) will be used.
      * For more info about the possible version formats, see the {@link https://www.jsdelivr.com/documentation#id-npm jsDelivr documentation}.
      */
     cdnVersion: Version;
+    /**
+     * @description When true (default), load bundled TrueRTE core/assets from the installed `truerte` package
+     * instead of injecting a script tag. Set to false to use script URL loading fallback behavior.
+     */
+    bundleCoreEditor: boolean;
     /**
      * @see {@link https://www.truerte.org/docs/truerte/1/react-ref/#plugins React Tech Ref - plugins}
      * @description The plugins to load into the editor. Equivalent to the `plugins` option in TrueRTE.
@@ -102,9 +108,9 @@ export interface IProps {
      */
     editorRef: EditorInstanceRef;
     /**
-     * @description The URL of the TrueRTE script to lazy load.
+     * @description URL(s) of TrueRTE script files to lazy load at runtime.
      */
-    truerteScriptSrc: string;
+    truerteScriptSrc: string | string[];
     /**
      * @description When true, automatically configures `icons: 'truerte-lucide'`
      * unless you explicitly provide `init.icons` or `init.icons_url`.
@@ -147,6 +153,7 @@ export declare class Editor extends React.Component<IAllProps> {
     private get view();
     componentDidUpdate(prevProps: Partial<IAllProps>): void;
     componentDidMount(): void;
+    private bootstrapEditor;
     componentWillUnmount(): void;
     render(): React.ReactElement<{
         ref: React.RefObject<HTMLElement | null>;
@@ -167,5 +174,7 @@ export declare class Editor extends React.Component<IAllProps> {
     private handleEditorChangeSpecial;
     private assignEditorRef;
     private initialise;
+    private resolvePlugins;
+    private resolveIconPack;
 }
 export {};

package/lib/cjs/main/ts/components/Editor.js

@@ -1,4 +1,13 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Editor = void 0;
 /**
@@ -8,6 +17,7 @@ exports.Editor = void 0;
  * Licensed under the MIT license (https://github.com/truerte/truerte-react/blob/main/LICENSE.TXT)
  */
 const React = require("react");
+const BundledTrueRTE_1 = require("../BundledTrueRTE");
 const ScriptLoader2_1 = require("../ScriptLoader2");
 const TrueRTE_1 = require("../TrueRTE");
 const Utils_1 = require("../Utils");
@@ -22,6 +32,53 @@ class Editor extends React.Component {
         super(props);
         this.rollbackTimer = undefined;
         this.valueCursor = undefined;
+        this.bootstrapEditor = () => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            if ((0, TrueRTE_1.getTrueRTE)(this.view) !== null) {
+                this.initialise();
+                return;
+            }
+            if (!((_a = this.elementRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument)) {
+                return;
+            }
+            const scriptSources = this.getScriptSources();
+            if (scriptSources.length > 0) {
+                const successHandler = () => {
+                    var _a, _b;
+                    (_b = (_a = this.props).onScriptsLoad) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    this.initialise();
+                };
+                const errorHandler = (err) => {
+                    var _a, _b;
+                    (_b = (_a = this.props).onScriptsLoadError) === null || _b === void 0 ? void 0 : _b.call(_a, err);
+                };
+                ScriptLoader2_1.ScriptLoader.loadList(this.elementRef.current.ownerDocument, scriptSources, (_c = (_b = this.props.scriptLoading) === null || _b === void 0 ? void 0 : _b.delay) !== null && _c !== void 0 ? _c : 0, successHandler, errorHandler);
+                return;
+            }
+            if (Array.isArray(this.props.truerteScriptSrc) && this.props.truerteScriptSrc.length === 0) {
+                (_e = (_d = this.props).onScriptsLoadError) === null || _e === void 0 ? void 0 : _e.call(_d, new Error('No `truerte` global is present but the `truerteScriptSrc` prop was an empty array.'));
+                return;
+            }
+            try {
+                const delay = (_g = (_f = this.props.scriptLoading) === null || _f === void 0 ? void 0 : _f.delay) !== null && _g !== void 0 ? _g : 0;
+                if (delay > 0) {
+                    yield new Promise((resolve) => setTimeout(resolve, delay));
+                }
+                yield (0, BundledTrueRTE_1.loadBundledTrueRTE)({
+                    plugins: this.resolvePlugins(),
+                    icons: this.resolveIconPack(),
+                    model: (_h = this.props.init) === null || _h === void 0 ? void 0 : _h.model,
+                    theme: (_j = this.props.init) === null || _j === void 0 ? void 0 : _j.theme,
+                    skin: (_k = this.props.init) === null || _k === void 0 ? void 0 : _k.skin,
+                    contentCss: (_l = this.props.init) === null || _l === void 0 ? void 0 : _l.content_css
+                });
+                (_o = (_m = this.props).onScriptsLoad) === null || _o === void 0 ? void 0 : _o.call(_m);
+                this.initialise();
+            }
+            catch (err) {
+                (_q = (_p = this.props).onScriptsLoadError) === null || _q === void 0 ? void 0 : _q.call(_p, err);
+            }
+        });
         this.rollbackChange = () => {
             const editor = this.editor;
             const value = this.props.value;
@@ -92,7 +149,7 @@ class Editor extends React.Component {
             }
         };
         this.initialise = (attempts = 0) => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b;
             const target = this.elementRef.current;
             if (!target) {
                 return; // Editor has been unmounted
@@ -120,12 +177,9 @@ class Editor extends React.Component {
             if (!truerte) {
                 throw new Error('truerte should have been loaded into global scope');
             }
-            const resolvedPlugins = (0, Utils_1.mergePlugins)((_a = this.props.init) === null || _a === void 0 ? void 0 : _a.plugins, this.props.plugins);
-            const hasExplicitIconConfig = ((_b = this.props.init) === null || _b === void 0 ? void 0 : _b.icons) !== undefined || ((_c = this.props.init) === null || _c === void 0 ? void 0 : _c.icons_url) !== undefined;
-            const resolvedIconPack = this.props.useLucideIcons === true && !hasExplicitIconConfig
-                ? 'truerte-lucide'
-                : (_d = this.props.init) === null || _d === void 0 ? void 0 : _d.icons;
-            const finalInit = Object.assign(Object.assign({}, this.props.init), { selector: undefined, target, readonly: this.props.disabled, inline: this.inline, plugins: resolvedPlugins, icons: resolvedIconPack, toolbar: (_e = this.props.toolbar) !== null && _e !== void 0 ? _e : (_f = this.props.init) === null || _f === void 0 ? void 0 : _f.toolbar, setup: (editor) => {
+            const resolvedPlugins = this.resolvePlugins();
+            const resolvedIconPack = this.resolveIconPack();
+            const finalInit = Object.assign(Object.assign({}, this.props.init), { selector: undefined, target, readonly: this.props.disabled, inline: this.inline, plugins: resolvedPlugins, icons: resolvedIconPack, toolbar: (_a = this.props.toolbar) !== null && _a !== void 0 ? _a : (_b = this.props.init) === null || _b === void 0 ? void 0 : _b.toolbar, setup: (editor) => {
                     this.editor = editor;
                     this.assignEditorRef(this.props.editorRef, editor);
                     this.bindHandlers({});
@@ -171,6 +225,14 @@ class Editor extends React.Component {
             }
             truerte.init(finalInit);
         };
+        this.resolvePlugins = () => { var _a; return (0, Utils_1.mergePlugins)((_a = this.props.init) === null || _a === void 0 ? void 0 : _a.plugins, this.props.plugins); };
+        this.resolveIconPack = () => {
+            var _a, _b, _c;
+            const hasExplicitIconConfig = ((_a = this.props.init) === null || _a === void 0 ? void 0 : _a.icons) !== undefined || ((_b = this.props.init) === null || _b === void 0 ? void 0 : _b.icons_url) !== undefined;
+            return this.props.useLucideIcons === true && !hasExplicitIconConfig
+                ? 'truerte-lucide'
+                : (_c = this.props.init) === null || _c === void 0 ? void 0 : _c.icons;
+        };
         this.id = this.props.id || (0, Uuid_1.uuid)('truerte-react');
         this.elementRef = React.createRef();
         this.inline = (_c = (_a = this.props.inline) !== null && _a !== void 0 ? _a : (_b = this.props.init) === null || _b === void 0 ? void 0 : _b.inline) !== null && _c !== void 0 ? _c : false;
@@ -239,25 +301,7 @@ class Editor extends React.Component {
         }
     }
     componentDidMount() {
-        var _a, _b, _c, _d, _e;
-        if ((0, TrueRTE_1.getTrueRTE)(this.view) !== null) {
-            this.initialise();
-        }
-        else if (Array.isArray(this.props.truerteScriptSrc) && this.props.truerteScriptSrc.length === 0) {
-            (_b = (_a = this.props).onScriptsLoadError) === null || _b === void 0 ? void 0 : _b.call(_a, new Error('No `truerte` global is present but the `truerteScriptSrc` prop was an empty array.'));
-        }
-        else if ((_c = this.elementRef.current) === null || _c === void 0 ? void 0 : _c.ownerDocument) {
-            const successHandler = () => {
-                var _a, _b;
-                (_b = (_a = this.props).onScriptsLoad) === null || _b === void 0 ? void 0 : _b.call(_a);
-                this.initialise();
-            };
-            const errorHandler = (err) => {
-                var _a, _b;
-                (_b = (_a = this.props).onScriptsLoadError) === null || _b === void 0 ? void 0 : _b.call(_a, err);
-            };
-            ScriptLoader2_1.ScriptLoader.loadList(this.elementRef.current.ownerDocument, this.getScriptSources(), (_e = (_d = this.props.scriptLoading) === null || _d === void 0 ? void 0 : _d.delay) !== null && _e !== void 0 ? _e : 0, successHandler, errorHandler);
-        }
+        void this.bootstrapEditor();
     }
     componentWillUnmount() {
         const editor = this.editor;
@@ -306,15 +350,24 @@ class Editor extends React.Component {
         var _a, _b;
         const async = (_a = this.props.scriptLoading) === null || _a === void 0 ? void 0 : _a.async;
         const defer = (_b = this.props.scriptLoading) === null || _b === void 0 ? void 0 : _b.defer;
+        const toScriptItem = (src) => ({ src, async, defer });
         if (this.props.truerteScriptSrc !== undefined) {
             if (typeof this.props.truerteScriptSrc === 'string') {
-                return [{ src: this.props.truerteScriptSrc, async, defer }];
+                return this.props.truerteScriptSrc.length > 0 ? [toScriptItem(this.props.truerteScriptSrc)] : [];
+            }
+            if (Array.isArray(this.props.truerteScriptSrc)) {
+                return this.props.truerteScriptSrc
+                    .filter((src) => typeof src === 'string' && src.length > 0)
+                    .map(toScriptItem);
             }
         }
-        // fallback to jsDelivr CDN when the truerteScriptSrc is not specified
-        // `cdnVersion` is in `defaultProps`, so it's always defined.
-        const cdnLink = `https://cdn.jsdelivr.net/npm/truerte@${this.props.cdnVersion}/truerte.min.js`;
-        return [{ src: cdnLink, async, defer }];
+        if (this.props.bundleCoreEditor === false) {
+            // fallback to jsDelivr CDN when bundled loading is disabled and no explicit script source is provided
+            // `cdnVersion` is in `defaultProps`, so it's always defined.
+            const cdnLink = `https://cdn.jsdelivr.net/npm/truerte@${this.props.cdnVersion}/truerte.min.js`;
+            return [toScriptItem(cdnLink)];
+        }
+        return [];
     }
     getInitialValue() {
         if (typeof this.props.initialValue === 'string') {
@@ -355,4 +408,5 @@ class Editor extends React.Component {
 exports.Editor = Editor;
 Editor.defaultProps = {
     cdnVersion: '1',
+    bundleCoreEditor: true,
 };

package/lib/es2015/main/ts/BundledTrueRTE.d.ts

@@ -0,0 +1,10 @@
+export declare const parsePluginNames: (plugins: unknown) => string[];
+export interface BundledTrueRTELoadOptions {
+    plugins: unknown;
+    icons?: unknown;
+    model?: unknown;
+    theme?: unknown;
+    skin?: unknown;
+    contentCss?: unknown;
+}
+export declare const loadBundledTrueRTE: (options: BundledTrueRTELoadOptions) => Promise<void>;

package/lib/es2015/main/ts/BundledTrueRTE.js

@@ -0,0 +1,135 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+const toTokens = (value) => value
+    .split(/[\s,]+/)
+    .map((token) => token.trim())
+    .filter((token) => token.length > 0);
+const unique = (items) => Array.from(new Set(items));
+export const parsePluginNames = (plugins) => {
+    if (typeof plugins === 'string') {
+        return unique(toTokens(plugins));
+    }
+    if (Array.isArray(plugins)) {
+        return unique(plugins.flatMap((item) => typeof item === 'string' ? toTokens(item) : []));
+    }
+    return [];
+};
+const parseContentCssNames = (contentCss) => {
+    if (typeof contentCss === 'string') {
+        return unique(toTokens(contentCss));
+    }
+    if (Array.isArray(contentCss)) {
+        return unique(contentCss.flatMap((item) => typeof item === 'string' ? toTokens(item) : []));
+    }
+    return [];
+};
+const MODEL_LOADERS = {
+    dom: () => import('truerte/js/truerte/models/dom/model.js')
+};
+const THEME_LOADERS = {
+    silver: () => import('truerte/js/truerte/themes/silver/theme.js')
+};
+const ICON_LOADERS = {
+    default: () => import('truerte/js/truerte/icons/default/icons.js'),
+    'truerte-lucide': () => import('truerte/js/truerte/icons/truerte-lucide/icons.js')
+};
+const SKIN_LOADERS = {
+    oxide: () => import('truerte/js/truerte/skins/ui/oxide/skin.js'),
+    'oxide-dark': () => import('truerte/js/truerte/skins/ui/oxide-dark/skin.js'),
+    'truerte-5': () => import('truerte/js/truerte/skins/ui/truerte-5/skin.js'),
+    'truerte-5-dark': () => import('truerte/js/truerte/skins/ui/truerte-5-dark/skin.js')
+};
+const CONTENT_CSS_LOADERS = {
+    default: () => import('truerte/js/truerte/skins/content/default/content.js'),
+    dark: () => import('truerte/js/truerte/skins/content/dark/content.js'),
+    document: () => import('truerte/js/truerte/skins/content/document/content.js'),
+    writer: () => import('truerte/js/truerte/skins/content/writer/content.js'),
+    'truerte-5': () => import('truerte/js/truerte/skins/content/truerte-5/content.js'),
+    'truerte-5-dark': () => import('truerte/js/truerte/skins/content/truerte-5-dark/content.js')
+};
+const PLUGIN_LOADERS = {
+    accordion: () => import('truerte/js/truerte/plugins/accordion/plugin.js'),
+    advlist: () => import('truerte/js/truerte/plugins/advlist/plugin.js'),
+    anchor: () => import('truerte/js/truerte/plugins/anchor/plugin.js'),
+    autolink: () => import('truerte/js/truerte/plugins/autolink/plugin.js'),
+    autoresize: () => import('truerte/js/truerte/plugins/autoresize/plugin.js'),
+    autosave: () => import('truerte/js/truerte/plugins/autosave/plugin.js'),
+    casechange: () => import('truerte/js/truerte/plugins/casechange/plugin.js'),
+    charmap: () => import('truerte/js/truerte/plugins/charmap/plugin.js'),
+    code: () => import('truerte/js/truerte/plugins/code/plugin.js'),
+    codesample: () => import('truerte/js/truerte/plugins/codesample/plugin.js'),
+    directionality: () => import('truerte/js/truerte/plugins/directionality/plugin.js'),
+    emoticons: () => import('truerte/js/truerte/plugins/emoticons/plugin.js'),
+    fullscreen: () => import('truerte/js/truerte/plugins/fullscreen/plugin.js'),
+    help: () => import('truerte/js/truerte/plugins/help/plugin.js'),
+    image: () => import('truerte/js/truerte/plugins/image/plugin.js'),
+    importcss: () => import('truerte/js/truerte/plugins/importcss/plugin.js'),
+    insertdatetime: () => import('truerte/js/truerte/plugins/insertdatetime/plugin.js'),
+    letterspacing: () => import('truerte/js/truerte/plugins/letterspacing/plugin.js'),
+    link: () => import('truerte/js/truerte/plugins/link/plugin.js'),
+    lists: () => import('truerte/js/truerte/plugins/lists/plugin.js'),
+    lucideicons: () => import('truerte/js/truerte/plugins/lucideicons/plugin.js'),
+    media: () => import('truerte/js/truerte/plugins/media/plugin.js'),
+    nonbreaking: () => import('truerte/js/truerte/plugins/nonbreaking/plugin.js'),
+    pagebreak: () => import('truerte/js/truerte/plugins/pagebreak/plugin.js'),
+    paragraphspacing: () => import('truerte/js/truerte/plugins/paragraphspacing/plugin.js'),
+    preview: () => import('truerte/js/truerte/plugins/preview/plugin.js'),
+    quickbars: () => import('truerte/js/truerte/plugins/quickbars/plugin.js'),
+    save: () => import('truerte/js/truerte/plugins/save/plugin.js'),
+    searchreplace: () => import('truerte/js/truerte/plugins/searchreplace/plugin.js'),
+    table: () => import('truerte/js/truerte/plugins/table/plugin.js'),
+    template: () => import('truerte/js/truerte/plugins/template/plugin.js'),
+    visualblocks: () => import('truerte/js/truerte/plugins/visualblocks/plugin.js'),
+    visualchars: () => import('truerte/js/truerte/plugins/visualchars/plugin.js'),
+    wordcount: () => import('truerte/js/truerte/plugins/wordcount/plugin.js')
+};
+const loadedModels = new Set();
+const loadedThemes = new Set();
+const loadedIcons = new Set();
+const loadedSkins = new Set();
+const loadedContentCss = new Set();
+const loadedPlugins = new Set();
+let corePromise;
+const loadCore = () => __awaiter(void 0, void 0, void 0, function* () {
+    corePromise !== null && corePromise !== void 0 ? corePromise : (corePromise = import('truerte/js/truerte/truerte.js').then(() => undefined));
+    yield corePromise;
+});
+const loadCachedResource = (cache, name, loaders) => __awaiter(void 0, void 0, void 0, function* () {
+    if (cache.has(name)) {
+        return;
+    }
+    const loader = loaders[name];
+    if (!loader) {
+        return;
+    }
+    yield loader();
+    cache.add(name);
+});
+export const loadBundledTrueRTE = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    yield loadCore();
+    const model = typeof options.model === 'string' ? options.model : 'dom';
+    const theme = typeof options.theme === 'string' ? options.theme : 'silver';
+    const iconPack = typeof options.icons === 'string' ? options.icons : 'default';
+    const skin = options.skin === false ? false : (typeof options.skin === 'string' ? options.skin : 'oxide');
+    const contentCss = options.contentCss === false
+        ? []
+        : options.contentCss === undefined
+            ? ['default']
+            : parseContentCssNames(options.contentCss);
+    const plugins = parsePluginNames(options.plugins);
+    yield Promise.all([
+        loadCachedResource(loadedModels, model, MODEL_LOADERS),
+        loadCachedResource(loadedThemes, theme, THEME_LOADERS),
+        loadCachedResource(loadedIcons, iconPack, ICON_LOADERS),
+        ...(skin ? [loadCachedResource(loadedSkins, skin, SKIN_LOADERS)] : []),
+        ...contentCss.map((name) => loadCachedResource(loadedContentCss, name, CONTENT_CSS_LOADERS)),
+    ]);
+    yield Promise.all(plugins.map((plugin) => loadCachedResource(loadedPlugins, plugin, PLUGIN_LOADERS)));
+});

package/lib/es2015/main/ts/components/Editor.d.ts

@@ -71,11 +71,17 @@ export interface IProps {
      */
     tabIndex: number;
     /**
-     * @description The TrueRTE version to use when loading from jsDelivr CDN. By default, version 1
+     * @description The TrueRTE version to use when loading from jsDelivr CDN. This is only used when
+     * `bundleCoreEditor` is `false` and `truerteScriptSrc` is not specified. By default, version 1
      * (that is, the latest minor and patch release of the major version 1) will be used.
      * For more info about the possible version formats, see the {@link https://www.jsdelivr.com/documentation#id-npm jsDelivr documentation}.
      */
     cdnVersion: Version;
+    /**
+     * @description When true (default), load bundled TrueRTE core/assets from the installed `truerte` package
+     * instead of injecting a script tag. Set to false to use script URL loading fallback behavior.
+     */
+    bundleCoreEditor: boolean;
     /**
      * @see {@link https://www.truerte.org/docs/truerte/1/react-ref/#plugins React Tech Ref - plugins}
      * @description The plugins to load into the editor. Equivalent to the `plugins` option in TrueRTE.
@@ -102,9 +108,9 @@ export interface IProps {
      */
     editorRef: EditorInstanceRef;
     /**
-     * @description The URL of the TrueRTE script to lazy load.
+     * @description URL(s) of TrueRTE script files to lazy load at runtime.
      */
-    truerteScriptSrc: string;
+    truerteScriptSrc: string | string[];
     /**
      * @description When true, automatically configures `icons: 'truerte-lucide'`
      * unless you explicitly provide `init.icons` or `init.icons_url`.
@@ -147,6 +153,7 @@ export declare class Editor extends React.Component<IAllProps> {
     private get view();
     componentDidUpdate(prevProps: Partial<IAllProps>): void;
     componentDidMount(): void;
+    private bootstrapEditor;
     componentWillUnmount(): void;
     render(): React.ReactElement<{
         ref: React.RefObject<HTMLElement | null>;
@@ -167,5 +174,7 @@ export declare class Editor extends React.Component<IAllProps> {
     private handleEditorChangeSpecial;
     private assignEditorRef;
     private initialise;
+    private resolvePlugins;
+    private resolveIconPack;
 }
 export {};

package/lib/es2015/main/ts/components/Editor.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 /**
  * Official TrueRTE React component
  * Copyright (c) 2022 Ephox Corporation DBA Tiny Technologies, Inc.
@@ -5,6 +14,7 @@
  * Licensed under the MIT license (https://github.com/truerte/truerte-react/blob/main/LICENSE.TXT)
  */
 import * as React from 'react';
+import { loadBundledTrueRTE } from '../BundledTrueRTE';
 import { ScriptLoader } from '../ScriptLoader2';
 import { getTrueRTE } from '../TrueRTE';
 import { isFunction, isTextareaOrInput, mergePlugins, configHandlers, isBeforeInputEventAvailable, setMode } from '../Utils';
@@ -19,6 +29,53 @@ export class Editor extends React.Component {
         super(props);
         this.rollbackTimer = undefined;
         this.valueCursor = undefined;
+        this.bootstrapEditor = () => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            if (getTrueRTE(this.view) !== null) {
+                this.initialise();
+                return;
+            }
+            if (!((_a = this.elementRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument)) {
+                return;
+            }
+            const scriptSources = this.getScriptSources();
+            if (scriptSources.length > 0) {
+                const successHandler = () => {
+                    var _a, _b;
+                    (_b = (_a = this.props).onScriptsLoad) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    this.initialise();
+                };
+                const errorHandler = (err) => {
+                    var _a, _b;
+                    (_b = (_a = this.props).onScriptsLoadError) === null || _b === void 0 ? void 0 : _b.call(_a, err);
+                };
+                ScriptLoader.loadList(this.elementRef.current.ownerDocument, scriptSources, (_c = (_b = this.props.scriptLoading) === null || _b === void 0 ? void 0 : _b.delay) !== null && _c !== void 0 ? _c : 0, successHandler, errorHandler);
+                return;
+            }
+            if (Array.isArray(this.props.truerteScriptSrc) && this.props.truerteScriptSrc.length === 0) {
+                (_e = (_d = this.props).onScriptsLoadError) === null || _e === void 0 ? void 0 : _e.call(_d, new Error('No `truerte` global is present but the `truerteScriptSrc` prop was an empty array.'));
+                return;
+            }
+            try {
+                const delay = (_g = (_f = this.props.scriptLoading) === null || _f === void 0 ? void 0 : _f.delay) !== null && _g !== void 0 ? _g : 0;
+                if (delay > 0) {
+                    yield new Promise((resolve) => setTimeout(resolve, delay));
+                }
+                yield loadBundledTrueRTE({
+                    plugins: this.resolvePlugins(),
+                    icons: this.resolveIconPack(),
+                    model: (_h = this.props.init) === null || _h === void 0 ? void 0 : _h.model,
+                    theme: (_j = this.props.init) === null || _j === void 0 ? void 0 : _j.theme,
+                    skin: (_k = this.props.init) === null || _k === void 0 ? void 0 : _k.skin,
+                    contentCss: (_l = this.props.init) === null || _l === void 0 ? void 0 : _l.content_css
+                });
+                (_o = (_m = this.props).onScriptsLoad) === null || _o === void 0 ? void 0 : _o.call(_m);
+                this.initialise();
+            }
+            catch (err) {
+                (_q = (_p = this.props).onScriptsLoadError) === null || _q === void 0 ? void 0 : _q.call(_p, err);
+            }
+        });
         this.rollbackChange = () => {
             const editor = this.editor;
             const value = this.props.value;
@@ -89,7 +146,7 @@ export class Editor extends React.Component {
             }
         };
         this.initialise = (attempts = 0) => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b;
             const target = this.elementRef.current;
             if (!target) {
                 return; // Editor has been unmounted
@@ -117,12 +174,9 @@ export class Editor extends React.Component {
             if (!truerte) {
                 throw new Error('truerte should have been loaded into global scope');
             }
-            const resolvedPlugins = mergePlugins((_a = this.props.init) === null || _a === void 0 ? void 0 : _a.plugins, this.props.plugins);
-            const hasExplicitIconConfig = ((_b = this.props.init) === null || _b === void 0 ? void 0 : _b.icons) !== undefined || ((_c = this.props.init) === null || _c === void 0 ? void 0 : _c.icons_url) !== undefined;
-            const resolvedIconPack = this.props.useLucideIcons === true && !hasExplicitIconConfig
-                ? 'truerte-lucide'
-                : (_d = this.props.init) === null || _d === void 0 ? void 0 : _d.icons;
-            const finalInit = Object.assign(Object.assign({}, this.props.init), { selector: undefined, target, readonly: this.props.disabled, inline: this.inline, plugins: resolvedPlugins, icons: resolvedIconPack, toolbar: (_e = this.props.toolbar) !== null && _e !== void 0 ? _e : (_f = this.props.init) === null || _f === void 0 ? void 0 : _f.toolbar, setup: (editor) => {
+            const resolvedPlugins = this.resolvePlugins();
+            const resolvedIconPack = this.resolveIconPack();
+            const finalInit = Object.assign(Object.assign({}, this.props.init), { selector: undefined, target, readonly: this.props.disabled, inline: this.inline, plugins: resolvedPlugins, icons: resolvedIconPack, toolbar: (_a = this.props.toolbar) !== null && _a !== void 0 ? _a : (_b = this.props.init) === null || _b === void 0 ? void 0 : _b.toolbar, setup: (editor) => {
                     this.editor = editor;
                     this.assignEditorRef(this.props.editorRef, editor);
                     this.bindHandlers({});
@@ -168,6 +222,14 @@ export class Editor extends React.Component {
             }
             truerte.init(finalInit);
         };
+        this.resolvePlugins = () => { var _a; return mergePlugins((_a = this.props.init) === null || _a === void 0 ? void 0 : _a.plugins, this.props.plugins); };
+        this.resolveIconPack = () => {
+            var _a, _b, _c;
+            const hasExplicitIconConfig = ((_a = this.props.init) === null || _a === void 0 ? void 0 : _a.icons) !== undefined || ((_b = this.props.init) === null || _b === void 0 ? void 0 : _b.icons_url) !== undefined;
+            return this.props.useLucideIcons === true && !hasExplicitIconConfig
+                ? 'truerte-lucide'
+                : (_c = this.props.init) === null || _c === void 0 ? void 0 : _c.icons;
+        };
         this.id = this.props.id || uuid('truerte-react');
         this.elementRef = React.createRef();
         this.inline = (_c = (_a = this.props.inline) !== null && _a !== void 0 ? _a : (_b = this.props.init) === null || _b === void 0 ? void 0 : _b.inline) !== null && _c !== void 0 ? _c : false;
@@ -236,25 +298,7 @@ export class Editor extends React.Component {
         }
     }
     componentDidMount() {
-        var _a, _b, _c, _d, _e;
-        if (getTrueRTE(this.view) !== null) {
-            this.initialise();
-        }
-        else if (Array.isArray(this.props.truerteScriptSrc) && this.props.truerteScriptSrc.length === 0) {
-            (_b = (_a = this.props).onScriptsLoadError) === null || _b === void 0 ? void 0 : _b.call(_a, new Error('No `truerte` global is present but the `truerteScriptSrc` prop was an empty array.'));
-        }
-        else if ((_c = this.elementRef.current) === null || _c === void 0 ? void 0 : _c.ownerDocument) {
-            const successHandler = () => {
-                var _a, _b;
-                (_b = (_a = this.props).onScriptsLoad) === null || _b === void 0 ? void 0 : _b.call(_a);
-                this.initialise();
-            };
-            const errorHandler = (err) => {
-                var _a, _b;
-                (_b = (_a = this.props).onScriptsLoadError) === null || _b === void 0 ? void 0 : _b.call(_a, err);
-            };
-            ScriptLoader.loadList(this.elementRef.current.ownerDocument, this.getScriptSources(), (_e = (_d = this.props.scriptLoading) === null || _d === void 0 ? void 0 : _d.delay) !== null && _e !== void 0 ? _e : 0, successHandler, errorHandler);
-        }
+        void this.bootstrapEditor();
     }
     componentWillUnmount() {
         const editor = this.editor;
@@ -303,15 +347,24 @@ export class Editor extends React.Component {
         var _a, _b;
         const async = (_a = this.props.scriptLoading) === null || _a === void 0 ? void 0 : _a.async;
         const defer = (_b = this.props.scriptLoading) === null || _b === void 0 ? void 0 : _b.defer;
+        const toScriptItem = (src) => ({ src, async, defer });
         if (this.props.truerteScriptSrc !== undefined) {
             if (typeof this.props.truerteScriptSrc === 'string') {
-                return [{ src: this.props.truerteScriptSrc, async, defer }];
+                return this.props.truerteScriptSrc.length > 0 ? [toScriptItem(this.props.truerteScriptSrc)] : [];
+            }
+            if (Array.isArray(this.props.truerteScriptSrc)) {
+                return this.props.truerteScriptSrc
+                    .filter((src) => typeof src === 'string' && src.length > 0)
+                    .map(toScriptItem);
             }
         }
-        // fallback to jsDelivr CDN when the truerteScriptSrc is not specified
-        // `cdnVersion` is in `defaultProps`, so it's always defined.
-        const cdnLink = `https://cdn.jsdelivr.net/npm/truerte@${this.props.cdnVersion}/truerte.min.js`;
-        return [{ src: cdnLink, async, defer }];
+        if (this.props.bundleCoreEditor === false) {
+            // fallback to jsDelivr CDN when bundled loading is disabled and no explicit script source is provided
+            // `cdnVersion` is in `defaultProps`, so it's always defined.
+            const cdnLink = `https://cdn.jsdelivr.net/npm/truerte@${this.props.cdnVersion}/truerte.min.js`;
+            return [toScriptItem(cdnLink)];
+        }
+        return [];
     }
     getInitialValue() {
         if (typeof this.props.initialValue === 'string') {
@@ -351,4 +404,5 @@ export class Editor extends React.Component {
 }
 Editor.defaultProps = {
     cdnVersion: '1',
+    bundleCoreEditor: true,
 };

package/package.json

@@ -1,5 +1,6 @@
 {
   "name": "truerte-react",
+  "version": "0.0.6",
   "description": "TrueRTE React Component",
   "repository": {
     "type": "git",
@@ -32,15 +33,9 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "truerte": "^0.0.3",
     "react": "^19.0.0 || ^18.0.0 || ^17.0.1 || ^16.7.0",
     "react-dom": "^19.0.0 || ^18.0.0 || ^17.0.1 || ^16.7.0"
   },
-  "peerDependenciesMeta": {
-    "truerte": {
-      "optional": true
-    }
-  },
   "devDependencies": {
     "@ephox/agar": "8.0.1",
     "@ephox/bedrock-client": "^15.0.0",
@@ -50,14 +45,14 @@
     "@types/node": "^22.17.2",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
-    "truerte": "file:../truerte/modules/truerte",
-    "truerte-1": "file:../truerte/modules/truerte",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "rimraf": "^6.0.1",
+    "truerte-1": "file:../truerte/modules/truerte",
     "typescript": "~5.8.3",
     "vite": "^6.3.5"
   },
-  "version": "0.0.5",
-  "dependencies": {}
+  "dependencies": {
+    "truerte": "^0.0.3 || ^1.0.0"
+  }
 }