truerte-react 0.0.3

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

@@ -0,0 +1,94 @@
+/**
+ * Official TrueRTE React component
+ * Copyright (c) 2022 Ephox Corporation DBA Tiny Technologies, Inc.
+ * Copyright (c) 2024 TrueRTE contributors
+ * Licensed under the MIT license (https://github.com/truerte/truerte-react/blob/main/LICENSE.TXT)
+ */
+import type { Editor as TrueRTEEditor, EditorEvent, Events } from 'truerte';
+import { customEvents, nativeEvents, validEvents } from './EventNames';
+export type EventHandler<A> = (a: EditorEvent<A>, editor: TrueRTEEditor) => unknown;
+type EEventHandler<K extends keyof Events.EditorEventMap> = EventHandler<Events.EditorEventMap[K]>;
+/** Ensures that T extends U, and returns T. */
+type EnsureExtends<T extends U, U> = T;
+export type INativeEvents = EnsureExtends<{
+    onBeforePaste: EEventHandler<'beforepaste'>;
+    onBlur: EEventHandler<'blur'>;
+    onClick: EEventHandler<'click'>;
+    onCompositionEnd: EEventHandler<'compositionend'>;
+    onCompositionStart: EEventHandler<'compositionstart'>;
+    onCompositionUpdate: EEventHandler<'compositionupdate'>;
+    onContextMenu: EEventHandler<'contextmenu'>;
+    onCopy: EEventHandler<'copy'>;
+    onCut: EEventHandler<'cut'>;
+    onDblclick: EEventHandler<'dblclick'>;
+    onDrag: EEventHandler<'drag'>;
+    onDragDrop: EEventHandler<'dragdrop'>;
+    onDragEnd: EEventHandler<'dragend'>;
+    onDragGesture: EEventHandler<'draggesture'>;
+    onDragOver: EEventHandler<'dragover'>;
+    onDrop: EEventHandler<'drop'>;
+    onFocus: EEventHandler<'focus'>;
+    onFocusIn: EEventHandler<'focusin'>;
+    onFocusOut: EEventHandler<'focusout'>;
+    onInput: EEventHandler<'input'>;
+    onKeyDown: EEventHandler<'keydown'>;
+    onKeyPress: EEventHandler<'keypress'>;
+    onKeyUp: EEventHandler<'keyup'>;
+    onMouseDown: EEventHandler<'mousedown'>;
+    onMouseEnter: EEventHandler<'mouseenter'>;
+    onMouseLeave: EEventHandler<'mouseleave'>;
+    onMouseMove: EEventHandler<'mousemove'>;
+    onMouseOut: EEventHandler<'mouseout'>;
+    onMouseOver: EEventHandler<'mouseover'>;
+    onMouseUp: EEventHandler<'mouseup'>;
+    onPaste: EEventHandler<'paste'>;
+    onSelectionChange: EEventHandler<'selectionchange'>;
+}, Record<`on${typeof nativeEvents[number]}`, unknown>>;
+export type ICustomEvents = EnsureExtends<{
+    onActivate: EEventHandler<'activate'>;
+    onAddUndo: EEventHandler<'AddUndo'>;
+    onBeforeAddUndo: EEventHandler<'BeforeAddUndo'>;
+    onBeforeExecCommand: EEventHandler<'BeforeExecCommand'>;
+    onBeforeGetContent: EEventHandler<'BeforeGetContent'>;
+    onBeforeRenderUI: EventHandler<unknown>;
+    onBeforeSetContent: EEventHandler<'BeforeSetContent'>;
+    onChange: EventHandler<unknown>;
+    onClearUndos: EEventHandler<'ClearUndos'>;
+    onCommentChange: EventHandler<unknown>;
+    onDeactivate: EEventHandler<'deactivate'>;
+    onDirty: EventHandler<unknown>;
+    onExecCommand: EEventHandler<'ExecCommand'>;
+    onGetContent: EEventHandler<'GetContent'>;
+    onHide: EventHandler<unknown>;
+    onInit: EEventHandler<'init'>;
+    onLoadContent: EEventHandler<'LoadContent'>;
+    onNodeChange: EEventHandler<'NodeChange'>;
+    onPostProcess: EventHandler<unknown>;
+    onPostRender: EEventHandler<'PostRender'>;
+    onPreProcess: EventHandler<unknown>;
+    onProgressState: EEventHandler<'ProgressState'>;
+    onRedo: EEventHandler<'Redo'>;
+    onRemove: EEventHandler<'remove'>;
+    onReset: EventHandler<unknown>;
+    onResizeEditor: EventHandler<unknown>;
+    onSaveContent: EventHandler<unknown>;
+    onSetAttrib: EventHandler<unknown>;
+    onObjectResizeStart: EEventHandler<'ObjectResizeStart'>;
+    onObjectResized: EEventHandler<'ObjectResized'>;
+    onObjectSelected: EEventHandler<'ObjectSelected'>;
+    onSetContent: EEventHandler<'SetContent'>;
+    onShow: EventHandler<unknown>;
+    onSubmit: EventHandler<unknown>;
+    onUndo: EEventHandler<'Undo'>;
+    onVisualAid: EventHandler<unknown>;
+    onSkinLoadError: EEventHandler<'SkinLoadError'>;
+    onThemeLoadError: EEventHandler<'ThemeLoadError'>;
+    onModelLoadError: EEventHandler<'ModelLoadError'>;
+    onPluginLoadError: EEventHandler<'PluginLoadError'>;
+    onIconsLoadError: EEventHandler<'IconsLoadError'>;
+    onLanguageLoadError: EEventHandler<'LanguageLoadError'>;
+    onScriptsLoad: () => void;
+    onScriptsLoadError: (err: unknown) => void;
+}, Record<`on${typeof customEvents[number]}`, unknown>>;
+export type IEvents = EnsureExtends<INativeEvents & ICustomEvents, Record<`on${typeof validEvents[number]}`, unknown>>;
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,10 @@
+export type CallbackFn = () => void;
+export interface ScriptItem {
+    src: string;
+    async?: boolean;
+    defer?: boolean;
+}
+export declare const ScriptLoader: {
+    loadList: (doc: Document, items: ScriptItem[], delay: number, success: () => void, failure?: (err: unknown) => void) => void;
+    reinitialize: () => void;
+};

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

@@ -0,0 +1,135 @@
+/**
+ * Official TrueRTE React component
+ * Copyright (c) 2022 Ephox Corporation DBA Tiny Technologies, Inc.
+ * Copyright (c) 2024 TrueRTE contributors
+ * Licensed under the MIT license (https://github.com/truerte/truerte-react/blob/main/LICENSE.TXT)
+ */
+import { uuid } from './Uuid';
+const injectScriptTag = (doc, item, handler) => {
+    var _a, _b;
+    const scriptTag = doc.createElement('script');
+    scriptTag.referrerPolicy = 'origin';
+    scriptTag.type = 'application/javascript';
+    scriptTag.id = item.id;
+    scriptTag.src = item.src;
+    scriptTag.async = (_a = item.async) !== null && _a !== void 0 ? _a : false;
+    scriptTag.defer = (_b = item.defer) !== null && _b !== void 0 ? _b : false;
+    const loadHandler = () => {
+        scriptTag.removeEventListener('load', loadHandler);
+        scriptTag.removeEventListener('error', errorHandler);
+        handler(item.src);
+    };
+    const errorHandler = (err) => {
+        scriptTag.removeEventListener('load', loadHandler);
+        scriptTag.removeEventListener('error', errorHandler);
+        handler(item.src, err);
+    };
+    scriptTag.addEventListener('load', loadHandler);
+    scriptTag.addEventListener('error', errorHandler);
+    if (doc.head) {
+        doc.head.appendChild(scriptTag);
+    }
+};
+const createDocumentScriptLoader = (doc) => {
+    let lookup = {};
+    const scriptLoadOrErrorHandler = (src, err) => {
+        const item = lookup[src];
+        item.done = true;
+        item.error = err;
+        for (const h of item.handlers) {
+            h(src, err);
+        }
+        item.handlers = [];
+    };
+    const loadScripts = (items, success, failure) => {
+        // eslint-disable-next-line no-console
+        const failureOrLog = (err) => failure !== undefined ? failure(err) : console.error(err);
+        if (items.length === 0) {
+            failureOrLog(new Error('At least one script must be provided'));
+            return;
+        }
+        let successCount = 0;
+        let failed = false;
+        const loaded = (_src, err) => {
+            if (failed) {
+                return;
+            }
+            if (err) {
+                failed = true;
+                failureOrLog(err);
+            }
+            else if (++successCount === items.length) {
+                success();
+            }
+        };
+        for (const item of items) {
+            const existing = lookup[item.src];
+            if (existing) {
+                if (existing.done) {
+                    loaded(item.src, existing.error);
+                }
+                else {
+                    existing.handlers.push(loaded);
+                }
+            }
+            else {
+                // create a new entry
+                const id = uuid('tiny-');
+                lookup[item.src] = {
+                    id,
+                    src: item.src,
+                    done: false,
+                    error: null,
+                    handlers: [loaded],
+                };
+                injectScriptTag(doc, Object.assign({ id }, item), scriptLoadOrErrorHandler);
+            }
+        }
+    };
+    const deleteScripts = () => {
+        var _a;
+        for (const item of Object.values(lookup)) {
+            const scriptTag = doc.getElementById(item.id);
+            if (scriptTag != null && scriptTag.tagName === 'SCRIPT') {
+                (_a = scriptTag.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(scriptTag);
+            }
+        }
+        lookup = {};
+    };
+    const getDocument = () => doc;
+    return {
+        loadScripts,
+        deleteScripts,
+        getDocument
+    };
+};
+const createScriptLoader = () => {
+    const cache = [];
+    const getDocumentScriptLoader = (doc) => {
+        let loader = cache.find((l) => l.getDocument() === doc);
+        if (loader === undefined) {
+            loader = createDocumentScriptLoader(doc);
+            cache.push(loader);
+        }
+        return loader;
+    };
+    const loadList = (doc, items, delay, success, failure) => {
+        const doLoad = () => getDocumentScriptLoader(doc).loadScripts(items, success, failure);
+        if (delay > 0) {
+            setTimeout(doLoad, delay);
+        }
+        else {
+            doLoad();
+        }
+    };
+    const reinitialize = () => {
+        for (let loader = cache.pop(); loader != null; loader = cache.pop()) {
+            loader.deleteScripts();
+        }
+    };
+    return {
+        loadList,
+        reinitialize
+    };
+};
+export const ScriptLoader = createScriptLoader();

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

@@ -0,0 +1,3 @@
+import type { TrueRTE as TrueRTEGlobal } from 'truerte';
+declare const getTrueRTE: (view: Window) => TrueRTEGlobal | null;
+export { getTrueRTE };

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

@@ -0,0 +1,5 @@
+const getTrueRTE = (view) => {
+    const global = view;
+    return global && global.truerte ? global.truerte : null;
+};
+export { getTrueRTE };

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

@@ -0,0 +1,18 @@
+/**
+ * Official TrueRTE React component
+ * Copyright (c) 2022 Ephox Corporation DBA Tiny Technologies, Inc.
+ * Copyright (c) 2024 TrueRTE contributors
+ * Licensed under the MIT license (https://github.com/truerte/truerte-react/blob/main/LICENSE.TXT)
+ */
+import { IEvents } from './Events';
+import { IAllProps } from './components/Editor';
+import type { Editor as TrueRTEEditor, EditorEvent } from 'truerte';
+export declare const isFunction: (x: unknown) => x is Function;
+type PropLookup = <K extends keyof IAllProps>(key: K) => IAllProps[K] | undefined;
+export declare const configHandlers2: <H>(handlerLookup: PropLookup, on: (name: string, handler: H) => void, off: (name: string, handler: H) => void, adapter: <K extends keyof IEvents>(lookup: PropLookup, key: K) => H, prevProps: Partial<IAllProps>, props: Partial<IAllProps>, boundHandlers: Record<string, H>) => void;
+export declare const configHandlers: (editor: TrueRTEEditor, prevProps: Partial<IAllProps>, props: Partial<IAllProps>, boundHandlers: Record<string, (event: EditorEvent<any>) => unknown>, lookup: PropLookup) => void;
+export declare const isTextareaOrInput: (element: Element | null) => element is (HTMLTextAreaElement | HTMLInputElement);
+export declare const mergePlugins: (initPlugins: string | string[] | undefined, inputPlugins: string | string[] | undefined) => string[];
+export declare const isBeforeInputEventAvailable: () => boolean;
+export declare const setMode: (editor: TrueRTEEditor | undefined, mode: "readonly" | "design") => void;
+export {};

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

@@ -0,0 +1,43 @@
+// TODO: Use what possible from `@truerte/framework-integration-shared`
+export const isFunction = (x) => typeof x === 'function';
+const isEventProp = (name) => {
+    return name.startsWith('on') /*  && name !== 'onEditorChange' */;
+};
+const eventAttrToEventName = (attrName) => attrName.substring(2);
+export const configHandlers2 = (handlerLookup, on, off, adapter, prevProps, props, boundHandlers) => {
+    const prevEventKeys = Object.keys(prevProps).filter(isEventProp);
+    const currEventKeys = Object.keys(props).filter(isEventProp);
+    const removedKeys = prevEventKeys.filter((key) => props[key] === undefined);
+    const addedKeys = currEventKeys.filter((key) => prevProps[key] === undefined);
+    removedKeys.forEach((key) => {
+        // remove event handler
+        const eventName = eventAttrToEventName(key);
+        const wrappedHandler = boundHandlers[eventName];
+        off(eventName, wrappedHandler);
+        delete boundHandlers[eventName];
+    });
+    addedKeys.forEach((key) => {
+        const wrappedHandler = adapter(handlerLookup, key);
+        const eventName = eventAttrToEventName(key);
+        boundHandlers[eventName] = wrappedHandler;
+        on(eventName, wrappedHandler);
+    });
+};
+export const configHandlers = (editor, prevProps, props, boundHandlers, lookup) => configHandlers2(lookup, editor.on.bind(editor), editor.off.bind(editor), 
+// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+(handlerLookup, key) => (e) => { var _a; return (_a = handlerLookup(key)) === null || _a === void 0 ? void 0 : _a(e, editor); }, prevProps, props, boundHandlers);
+export const isTextareaOrInput = (element) => element !== null && (element.tagName.toLowerCase() === 'textarea' || element.tagName.toLowerCase() === 'input');
+const normalizePluginArray = (plugins) => {
+    if (typeof plugins === 'undefined' || plugins === '') {
+        return [];
+    }
+    return Array.isArray(plugins) ? plugins : plugins.split(' ');
+};
+// eslint-disable-next-line max-len
+export const mergePlugins = (initPlugins, inputPlugins) => normalizePluginArray(initPlugins).concat(normalizePluginArray(inputPlugins));
+export const isBeforeInputEventAvailable = () => window.InputEvent && typeof InputEvent.prototype.getTargetRanges === 'function';
+export const setMode = (editor, mode) => {
+    if (editor !== undefined) {
+        editor.mode.set(mode);
+    }
+};

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

@@ -0,0 +1,6 @@
+/**
+ * Official TrueRTE React component
+ * Copyright (c) 2026 TrueRTE contributors
+ * Licensed under the MIT license (https://github.com/truerte/truerte-react/blob/main/LICENSE.TXT)
+ */
+export declare const uuid: (prefix: string) => string;

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

@@ -0,0 +1,12 @@
+/**
+ * Official TrueRTE React component
+ * Copyright (c) 2026 TrueRTE contributors
+ * Licensed under the MIT license (https://github.com/truerte/truerte-react/blob/main/LICENSE.TXT)
+ */
+let unique = 0;
+export const uuid = (prefix) => {
+    const time = Date.now();
+    const random = Math.floor(Math.random() * 1000000000);
+    unique++;
+    return prefix + '_' + random + unique + String(time);
+};

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

@@ -0,0 +1,171 @@
+/**
+ * Official TrueRTE React component
+ * Copyright (c) 2022 Ephox Corporation DBA Tiny Technologies, Inc.
+ * Copyright (c) 2024 TrueRTE contributors
+ * Licensed under the MIT license (https://github.com/truerte/truerte-react/blob/main/LICENSE.TXT)
+ */
+import * as React from 'react';
+import { IEvents } from '../Events';
+import type { Editor as TrueRTEEditor, TrueRTE } from 'truerte';
+type OmitStringIndexSignature<T> = {
+    [K in keyof T as string extends K ? never : K]: T[K];
+};
+interface DoNotUse<T extends string> {
+    __brand: T;
+}
+type OmittedInitProps = 'selector' | 'target' | 'readonly';
+type EditorOptions = Parameters<TrueRTE['init']>[0];
+export type InitOptions = Omit<OmitStringIndexSignature<EditorOptions>, OmittedInitProps> & {
+    selector?: DoNotUse<'selector prop is handled internally by the component'>;
+    target?: DoNotUse<'target prop is handled internally by the component'>;
+    readonly?: DoNotUse<'readonly prop is overridden by the component, use the `disabled` prop instead'>;
+} & {
+    [key: string]: unknown;
+};
+export type Version = `${'1'}${'' | `.${number}` | `.${number}.${number}`}`;
+export type EditorInstanceRef = React.Ref<TrueRTEEditor | null>;
+export interface IProps {
+    /**
+     * @see {@link https://www.truerte.org/docs/truerte/1/react-ref/#id React Tech Ref - id}
+     * @description The ID of the element to render the editor into.
+     */
+    id: string;
+    /**
+     * @see {@link https://www.truerte.org/docs/truerte/1/react-ref/#inline React Tech Ref - inline}
+     * @description Whether the editor should be rendered inline. Equivalent to the `inline` option in TrueRTE.
+     */
+    inline: boolean;
+    /**
+     * @see {@link https://www.truerte.org/docs/truerte/1/react-ref/#initialvalue React Tech Ref - initialValue}
+     * @description The initial HTML content of the editor.
+     *
+     * IMPORTANT: Ensure that this is **not** updated by `onEditorChange` or the editor will be unusable.
+     */
+    initialValue: string;
+    /**
+     * @see {@link https://www.truerte.org/docs/truerte/1/react-ref/#oneditorchange React Tech Ref - onEditorChange}
+     * @description Used to store the state of the editor outside the component. Typically used for controlled components.
+     * @param a The current HTML content of the editor.
+     * @param editor The TrueRTE editor instance.
+     * @returns void
+     */
+    onEditorChange: (a: string, editor: TrueRTEEditor) => void;
+    /**
+     * @see {@link https://www.truerte.org/docs/truerte/1/react-ref/#value React Tech Ref - value}
+     * @description The current HTML content of the editor. Typically used for controlled components.
+     */
+    value: string;
+    /**
+     * @see {@link https://www.truerte.org/docs/truerte/1/react-ref/#init React Tech Ref - init}
+     * @description Additional settings passed to `truerte.init()` when initializing the editor.
+     */
+    init: InitOptions;
+    /**
+     * @see {@link https://www.truerte.org/docs/truerte/1/react-ref/#tagname React Tech Ref - tagName}
+     * @description The tag name of the element to render the editor into. Only valid when `inline` is `true`.
+     */
+    tagName: string;
+    /**
+     * @see {@link https://www.truerte.org/docs/truerte/1/react-ref/#tabIndex React Tech Ref - tabIndex}
+     * @description The tab index of the element that the editor wraps.
+     */
+    tabIndex: number;
+    /**
+     * @description The TrueRTE version to use when loading from jsDelivr CDN. 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;
+    /**
+     * @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.
+     */
+    plugins: NonNullable<EditorOptions['plugins']>;
+    /**
+     * @see {@link https://www.truerte.org/docs/truerte/1/react-ref/#toolbar React Tech Ref - toolbar}
+     * @description The toolbar to load into the editor. Equivalent to the `toolbar` option in TrueRTE.
+     */
+    toolbar: NonNullable<EditorOptions['toolbar']>;
+    /**
+     * @see {@link https://www.truerte.org/docs/truerte/1/react-ref/#disabled React Tech Ref - disabled}
+     * @description Whether the editor should be "disabled" (read-only).
+     */
+    disabled: boolean;
+    /**
+     * @see {@link https://www.truerte.org/docs/truerte/1/react-ref/#textareaname React Tech Ref - textareaName}
+     * @description Set the `name` attribute of the `textarea` element used for the editor in forms. Only valid in iframe mode.
+     */
+    textareaName: string;
+    /**
+     * @description Optional external ref that receives the underlying TrueRTE editor instance.
+     * Use this for imperative control from outside the component.
+     */
+    editorRef: EditorInstanceRef;
+    /**
+     * @description The URL of the TrueRTE script to lazy load.
+     */
+    truerteScriptSrc: string;
+    /**
+     * @description When true, automatically configures `icons: 'truerte-lucide'`
+     * unless you explicitly provide `init.icons` or `init.icons_url`.
+     */
+    useLucideIcons: boolean;
+    /**
+     * @see {@link https://www.truerte.org/docs/truerte/1/react-ref/#rollback React Tech Ref - rollback}
+     * @description The number of milliseconds to wait before reverting to the previous value when the editor's content changes.
+     */
+    rollback: number | false;
+    /**
+     * @see {@link https://www.truerte.org/docs/truerte/1/react-ref/#scriptloading React Tech Ref - scriptLoading}
+     * @description Options for how the TrueRTE script should be loaded.
+     * @property async Whether the script should be loaded with the `async` attribute.
+     * @property defer Whether the script should be loaded with the `defer` attribute.
+     * @property delay The number of milliseconds to wait before loading the script.
+     */
+    scriptLoading: {
+        async?: boolean;
+        defer?: boolean;
+        delay?: number;
+    };
+}
+export interface IAllProps extends Partial<IProps>, Partial<IEvents> {
+}
+/**
+ * @see {@link https://www.truerte.org/docs/truerte/1/react-ref/ TrueRTE React Technical Reference}
+ */
+export declare class Editor extends React.Component<IAllProps> {
+    static defaultProps: Partial<IAllProps>;
+    editor?: TrueRTEEditor;
+    private id;
+    private elementRef;
+    private inline;
+    private currentContent?;
+    private boundHandlers;
+    private rollbackTimer;
+    private valueCursor;
+    constructor(props: Partial<IAllProps>);
+    private get view();
+    componentDidUpdate(prevProps: Partial<IAllProps>): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): React.ReactElement<{
+        ref: React.RefObject<HTMLElement | null>;
+        id: string;
+        tabIndex: number | undefined;
+    }, string | React.JSXElementConstructor<any>>;
+    getEditor(): TrueRTEEditor | undefined;
+    private beforeInputEvent;
+    private renderInline;
+    private renderIframe;
+    private getScriptSources;
+    private getInitialValue;
+    private bindHandlers;
+    private rollbackChange;
+    private handleBeforeInput;
+    private handleBeforeInputSpecial;
+    private handleEditorChange;
+    private handleEditorChangeSpecial;
+    private assignEditorRef;
+    private initialise;
+}
+export {};