truerte-react 0.0.3

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

@@ -0,0 +1,354 @@
+/**
+ * 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 { ScriptLoader } from '../ScriptLoader2';
+import { getTrueRTE } from '../TrueRTE';
+import { isFunction, isTextareaOrInput, mergePlugins, configHandlers, isBeforeInputEventAvailable, setMode } from '../Utils';
+import { uuid } from '../Uuid';
+const changeEvents = 'change keyup compositionend setcontent CommentChange';
+/**
+ * @see {@link https://www.truerte.org/docs/truerte/1/react-ref/ TrueRTE React Technical Reference}
+ */
+export class Editor extends React.Component {
+    constructor(props) {
+        var _a, _b, _c;
+        super(props);
+        this.rollbackTimer = undefined;
+        this.valueCursor = undefined;
+        this.rollbackChange = () => {
+            const editor = this.editor;
+            const value = this.props.value;
+            if (editor && value && value !== this.currentContent) {
+                editor.undoManager.ignore(() => {
+                    editor.setContent(value);
+                    // only restore cursor on inline editors when they are focused
+                    // as otherwise it will cause a focus grab
+                    if (this.valueCursor && (!this.inline || editor.hasFocus())) {
+                        try {
+                            editor.selection.moveToBookmark(this.valueCursor);
+                        }
+                        catch (e) { /* ignore */ }
+                    }
+                });
+            }
+            this.rollbackTimer = undefined;
+        };
+        this.handleBeforeInput = (_evt) => {
+            if (this.props.value !== undefined && this.props.value === this.currentContent && this.editor) {
+                if (!this.inline || this.editor.hasFocus()) {
+                    try {
+                        // getBookmark throws exceptions when the editor has not been focused
+                        // possibly only in inline mode but I'm not taking chances
+                        this.valueCursor = this.editor.selection.getBookmark(3);
+                    }
+                    catch (e) { /* ignore */ }
+                }
+            }
+        };
+        this.handleBeforeInputSpecial = (evt) => {
+            if (evt.key === 'Enter' || evt.key === 'Backspace' || evt.key === 'Delete') {
+                this.handleBeforeInput(evt);
+            }
+        };
+        this.handleEditorChange = (_evt) => {
+            const editor = this.editor;
+            if (editor && editor.initialized) {
+                const newContent = editor.getContent();
+                if (this.props.value !== undefined && this.props.value !== newContent && this.props.rollback !== false) {
+                    // start a timer and revert to the value if not applied in time
+                    if (!this.rollbackTimer) {
+                        this.rollbackTimer = window.setTimeout(this.rollbackChange, typeof this.props.rollback === 'number' ? this.props.rollback : 200);
+                    }
+                }
+                if (newContent !== this.currentContent) {
+                    this.currentContent = newContent;
+                    if (isFunction(this.props.onEditorChange)) {
+                        this.props.onEditorChange(newContent, editor);
+                    }
+                }
+            }
+        };
+        this.handleEditorChangeSpecial = (evt) => {
+            if (evt.key === 'Backspace' || evt.key === 'Delete') {
+                this.handleEditorChange(evt);
+            }
+        };
+        this.assignEditorRef = (editorRef, editor) => {
+            if (editorRef === undefined || editorRef === null) {
+                return;
+            }
+            if (typeof editorRef === 'function') {
+                editorRef(editor);
+            }
+            else {
+                editorRef.current = editor;
+            }
+        };
+        this.initialise = (attempts = 0) => {
+            var _a, _b, _c, _d, _e, _f;
+            const target = this.elementRef.current;
+            if (!target) {
+                return; // Editor has been unmounted
+            }
+            if (!target.isConnected) {
+                // this is probably someone trying to help by rendering us offscreen
+                // but we can't do that because the editor iframe must be in the document
+                // in order to have state
+                // TODO: how will this do when we use web component?
+                if (attempts === 0) {
+                    // we probably just need to wait for the current events to be processed
+                    setTimeout(() => this.initialise(1), 1);
+                }
+                else if (attempts < 100) {
+                    // wait for ten seconds, polling every tenth of a second
+                    setTimeout(() => this.initialise(attempts + 1), 100);
+                }
+                else {
+                    // give up, at this point it seems that more polling is unlikely to help
+                    throw new Error('truerte can only be initialised when in a document');
+                }
+                return;
+            }
+            const truerte = getTrueRTE(this.view);
+            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) => {
+                    this.editor = editor;
+                    this.assignEditorRef(this.props.editorRef, editor);
+                    this.bindHandlers({});
+                    // When running in inline mode the editor gets the initial value
+                    // from the innerHTML of the element it is initialized on.
+                    // However we don't want to take on the responsibility of sanitizing
+                    // to remove XSS in the react integration so we have a chicken and egg
+                    // problem... We avoid it by sneaking in a set content before the first
+                    // "official" setContent and using TrueRTE to do the sanitization.
+                    if (this.inline && !isTextareaOrInput(target)) {
+                        editor.once('PostRender', (_evt) => {
+                            editor.setContent(this.getInitialValue(), { no_events: true });
+                        });
+                    }
+                    if (this.props.init && isFunction(this.props.init.setup)) {
+                        this.props.init.setup(editor);
+                    }
+                }, init_instance_callback: (editor) => {
+                    var _a, _b;
+                    // check for changes that happened since truerte.init() was called
+                    const initialValue = this.getInitialValue();
+                    this.currentContent = (_a = this.currentContent) !== null && _a !== void 0 ? _a : editor.getContent();
+                    if (this.currentContent !== initialValue) {
+                        this.currentContent = initialValue;
+                        // same as resetContent in TrueRTE 5
+                        editor.setContent(initialValue);
+                        editor.undoManager.clear();
+                        editor.undoManager.add();
+                        editor.setDirty(false);
+                    }
+                    const disabled = (_b = this.props.disabled) !== null && _b !== void 0 ? _b : false;
+                    setMode(this.editor, disabled ? 'readonly' : 'design');
+                    // ensure existing init_instance_callback is called
+                    if (this.props.init && isFunction(this.props.init.init_instance_callback)) {
+                        this.props.init.init_instance_callback(editor);
+                    }
+                } });
+            if (!this.inline) {
+                target.style.visibility = '';
+            }
+            if (isTextareaOrInput(target)) {
+                target.value = this.getInitialValue();
+            }
+            truerte.init(finalInit);
+        };
+        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;
+        this.boundHandlers = {};
+    }
+    get view() {
+        var _a, _b;
+        return (_b = (_a = this.elementRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.defaultView) !== null && _b !== void 0 ? _b : window;
+    }
+    componentDidUpdate(prevProps) {
+        var _a, _b, _c;
+        if (this.props.editorRef !== prevProps.editorRef) {
+            this.assignEditorRef(prevProps.editorRef, null);
+            this.assignEditorRef(this.props.editorRef, (_a = this.editor) !== null && _a !== void 0 ? _a : null);
+        }
+        if (this.rollbackTimer) {
+            clearTimeout(this.rollbackTimer);
+            this.rollbackTimer = undefined;
+        }
+        if (this.editor) {
+            this.bindHandlers(prevProps);
+            if (this.editor.initialized) {
+                this.currentContent = (_b = this.currentContent) !== null && _b !== void 0 ? _b : this.editor.getContent();
+                if (typeof this.props.initialValue === 'string' && this.props.initialValue !== prevProps.initialValue) {
+                    // same as resetContent in TinyMCE 5 – TODO what does this mean for TrueRTE?
+                    this.editor.setContent(this.props.initialValue);
+                    this.editor.undoManager.clear();
+                    this.editor.undoManager.add();
+                    this.editor.setDirty(false);
+                }
+                else if (typeof this.props.value === 'string' && this.props.value !== this.currentContent) {
+                    const localEditor = this.editor;
+                    localEditor.undoManager.transact(() => {
+                        // inline editors grab focus when restoring selection
+                        // so we don't try to keep their selection unless they are currently focused
+                        let cursor;
+                        if (!this.inline || localEditor.hasFocus()) {
+                            try {
+                                // getBookmark throws exceptions when the editor has not been focused
+                                // possibly only in inline mode but I'm not taking chances
+                                cursor = localEditor.selection.getBookmark(3);
+                            }
+                            catch (e) { /* ignore */ }
+                        }
+                        const valueCursor = this.valueCursor;
+                        localEditor.setContent(this.props.value);
+                        if (!this.inline || localEditor.hasFocus()) {
+                            for (const bookmark of [cursor, valueCursor]) {
+                                if (bookmark) {
+                                    try {
+                                        localEditor.selection.moveToBookmark(bookmark);
+                                        this.valueCursor = bookmark;
+                                        break;
+                                    }
+                                    catch (e) { /* ignore */ }
+                                }
+                            }
+                        }
+                    });
+                }
+                if (this.props.disabled !== prevProps.disabled) {
+                    const disabled = (_c = this.props.disabled) !== null && _c !== void 0 ? _c : false;
+                    setMode(this.editor, disabled ? 'readonly' : 'design');
+                }
+            }
+        }
+    }
+    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);
+        }
+    }
+    componentWillUnmount() {
+        const editor = this.editor;
+        if (editor) {
+            editor.off(changeEvents, this.handleEditorChange);
+            editor.off(this.beforeInputEvent(), this.handleBeforeInput);
+            editor.off('keypress', this.handleEditorChangeSpecial);
+            editor.off('keydown', this.handleBeforeInputSpecial);
+            editor.off('NewBlock', this.handleEditorChange);
+            Object.keys(this.boundHandlers).forEach((eventName) => {
+                editor.off(eventName, this.boundHandlers[eventName]);
+            });
+            this.boundHandlers = {};
+            editor.remove();
+            this.editor = undefined;
+        }
+        this.assignEditorRef(this.props.editorRef, null);
+    }
+    render() {
+        return this.inline ? this.renderInline() : this.renderIframe();
+    }
+    getEditor() {
+        return this.editor;
+    }
+    beforeInputEvent() {
+        return isBeforeInputEventAvailable() ? 'beforeinput SelectionChange' : 'SelectionChange';
+    }
+    renderInline() {
+        const { tagName = 'div' } = this.props;
+        return React.createElement(tagName, {
+            ref: this.elementRef,
+            id: this.id,
+            tabIndex: this.props.tabIndex
+        });
+    }
+    renderIframe() {
+        return React.createElement('textarea', {
+            ref: this.elementRef,
+            style: { visibility: 'hidden' },
+            name: this.props.textareaName,
+            id: this.id,
+            tabIndex: this.props.tabIndex
+        });
+    }
+    getScriptSources() {
+        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;
+        if (this.props.truerteScriptSrc !== undefined) {
+            if (typeof this.props.truerteScriptSrc === 'string') {
+                return [{ src: this.props.truerteScriptSrc, async, defer }];
+            }
+        }
+        // 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 }];
+    }
+    getInitialValue() {
+        if (typeof this.props.initialValue === 'string') {
+            return this.props.initialValue;
+        }
+        else if (typeof this.props.value === 'string') {
+            return this.props.value;
+        }
+        else {
+            return '';
+        }
+    }
+    bindHandlers(prevProps) {
+        if (this.editor !== undefined) {
+            // typescript chokes trying to understand the type of the lookup function
+            configHandlers(this.editor, prevProps, this.props, this.boundHandlers, (key) => this.props[key]);
+            // check if we should monitor editor changes
+            const isValueControlled = (p) => p.onEditorChange !== undefined || p.value !== undefined;
+            const wasControlled = isValueControlled(prevProps);
+            const nowControlled = isValueControlled(this.props);
+            if (!wasControlled && nowControlled) {
+                this.editor.on(changeEvents, this.handleEditorChange);
+                this.editor.on(this.beforeInputEvent(), this.handleBeforeInput);
+                this.editor.on('keydown', this.handleBeforeInputSpecial);
+                this.editor.on('keyup', this.handleEditorChangeSpecial);
+                this.editor.on('NewBlock', this.handleEditorChange);
+            }
+            else if (wasControlled && !nowControlled) {
+                this.editor.off(changeEvents, this.handleEditorChange);
+                this.editor.off(this.beforeInputEvent(), this.handleBeforeInput);
+                this.editor.off('keydown', this.handleBeforeInputSpecial);
+                this.editor.off('keyup', this.handleEditorChangeSpecial);
+                this.editor.off('NewBlock', this.handleEditorChange);
+            }
+        }
+    }
+}
+Editor.defaultProps = {
+    cdnVersion: '1',
+};

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

@@ -0,0 +1,2 @@
+import { Editor, EditorInstanceRef, IAllProps, IProps, InitOptions } from './components/Editor';
+export { Editor, IAllProps, IProps, InitOptions, EditorInstanceRef };

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

@@ -0,0 +1,2 @@
+import { Editor } from './components/Editor';
+export { Editor };

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "truerte-react",
+  "description": "TrueRTE React Component",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TrueRTE/truerte-react.git"
+  },
+  "bugs": {
+    "url": "https://github.com/TrueRTE/truerte-react/issues"
+  },
+  "files": [
+    "lib",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE.txt"
+  ],
+  "main": "lib/cjs/main/ts/index.js",
+  "module": "lib/es2015/main/ts/index.js",
+  "scripts": {
+    "lint": "eslint 'src/**/*.ts?(x)'",
+    "clean": "rimraf lib",
+    "test": "bedrock-auto -b chrome-headless -f src/test/ts/**/*Test.ts",
+    "test-manual": "bedrock -f src/test/ts/**/*Test.ts",
+    "build": "npm run clean && tsc -p ./tsconfig.es2015.json && tsc -p ./tsconfig.cjs.json",
+    "watch": "tsc -w -p ./tsconfig.es2015.json",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "truerte",
+    "react",
+    "editor"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "truerte": "^1.0.0",
+    "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",
+    "@ephox/bedrock-server": "^15.0.3-alpha.0",
+    "@ephox/mcagar": "^9.0.1",
+    "@tinymce/eslint-plugin": "^3.0.0",
+    "@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",
+    "typescript": "~5.8.3",
+    "vite": "^6.3.5"
+  },
+  "version": "0.0.3",
+  "dependencies": {}
+}