@alpaca-editor/core 1.0.0 → 1.0.3764-editor-mono

package/dist/editor/field-types/MultiLineText.js

@@ -0,0 +1,35 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiLineText = MultiLineText;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const inputtextarea_1 = require("primereact/inputtextarea");
+const editContext_1 = require("../client/editContext");
+const react_1 = require("react");
+function MultiLineText({ field, readOnly, updateFieldValue, }) {
+    const editContextRef = (0, editContext_1.useEditContextRef)();
+    const inputRef = (0, react_1.useRef)(null);
+    const fieldItem = field.descriptor.item;
+    const [value, setValue] = (0, react_1.useState)(field.value);
+    const modifiedFieldsContext = (0, editContext_1.useModifiedFieldsContext)();
+    const modifiedField = modifiedFieldsContext?.modifiedFields.find((x) => x.fieldId === field.id &&
+        x.item.id === fieldItem.id &&
+        x.item.language === fieldItem.language &&
+        x.item.version === fieldItem.version);
+    (0, react_1.useEffect)(() => {
+        if (inputRef.current !== document.activeElement) {
+            if (field.isHistoric)
+                setValue(field.value);
+            else
+                setValue(modifiedField?.value ?? field.value);
+        }
+    }, [field.value, modifiedFieldsContext?.modifiedFields]);
+    if (!editContextRef.current)
+        return;
+    if (!fieldItem)
+        return;
+    return ((0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, { ref: inputRef, value: value, disabled: readOnly, className: "p-2 focus-shadow text-sm", style: { width: "100%" }, rows: 12, onChange: (e) => {
+            setValue(e.target.value);
+            updateFieldValue(e.target.value);
+        } }, fieldItem.id + field.id + fieldItem.language + fieldItem.version));
+}

package/dist/editor/field-types/PictureFieldEditor.js

@@ -0,0 +1,59 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PictureFieldEditor = PictureFieldEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+const inputtext_1 = require("primereact/inputtext");
+const PictureEditor_1 = require("../PictureEditor");
+const react_1 = require("react");
+const SimpleIconButton_1 = require("../ui/SimpleIconButton");
+function PictureFieldEditor({ field, readOnly, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const [altText, setAltText] = (0, react_1.useState)("");
+    if (!field || !editContext)
+        return;
+    var item = field.descriptor.item;
+    (0, react_1.useEffect)(() => {
+        setAltText(field.value?.alt || "");
+    }, [field.value?.alt]);
+    if (field.value?.error) {
+        return (0, jsx_runtime_1.jsx)("div", { children: field.value?.error });
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex gap-2 h-full focus-shadow flex-wrap", children: field?.value?.variants?.map((variant) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "h-48 w-48 border border-gray-300 relative cursor-pointer flex justify-center items-center", children: [variant.src && (0, jsx_runtime_1.jsx)("img", { src: variant.thumbSrc }), !readOnly && ((0, jsx_runtime_1.jsx)(PictureEditor_1.PictureEditor, { field: field, variantName: variant.name }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs", children: variant.name }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs", children: variant.aspectRatioLockText })] }), variant.videoUrl && ((0, jsx_runtime_1.jsxs)("div", { className: "text-xs", children: ["Video: ", variant.videoUrl, (0, jsx_runtime_1.jsx)(SimpleIconButton_1.SimpleIconButton, { onClick: () => {
+                                        const raw = field.rawValue
+                                            ? JSON.parse(field?.rawValue)
+                                            : { Variants: [] };
+                                        if (!raw.Variants)
+                                            return;
+                                        let rawVariant = raw.Variants.find((v) => v.Name === variant.name);
+                                        if (rawVariant) {
+                                            rawVariant.VideoId = undefined;
+                                        }
+                                        else {
+                                            rawVariant = {
+                                                Name: variant.name,
+                                                VideoId: undefined,
+                                            };
+                                            raw.Variants.push(rawVariant);
+                                        }
+                                        editContext.operations.editField({
+                                            field: field.descriptor,
+                                            rawValue: JSON.stringify(raw),
+                                            refresh: "immediate",
+                                        });
+                                    }, icon: "pi pi-trash", label: "Remove" })] }))] }, variant.name))) }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-1", children: "Alt Text" }), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: altText, disabled: readOnly, className: "p-2 focus-shadow text-sm", style: { width: "100%" }, onChange: (e) => {
+                            setAltText(e.target.value);
+                            const raw = field?.rawValue
+                                ? JSON.parse(field?.rawValue)
+                                : { Variants: [] };
+                            raw.AltText = e.target.value;
+                            if (field.value)
+                                field.value.alt = e.target.value;
+                            editContext.operations.editField({
+                                field: field.descriptor,
+                                rawValue: JSON.stringify(raw),
+                                refresh: "waitForQuietPeriod",
+                            });
+                        } }, item.id + field.id + item.language + item.version)] })] }));
+}

package/dist/editor/field-types/RawEditor.js

@@ -0,0 +1,33 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RawEditor = RawEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const inputtextarea_1 = require("primereact/inputtextarea");
+const editContext_1 = require("../client/editContext");
+const react_1 = require("react");
+const use_debounce_1 = require("use-debounce");
+function RawEditor({ field, readOnly, }) {
+    const editContext = (0, editContext_1.useEditContext)();
+    const inputRef = (0, react_1.useRef)(null);
+    if (!editContext)
+        return;
+    const [value, setValue] = (0, react_1.useState)(field.rawValue);
+    (0, react_1.useEffect)(() => {
+        if (inputRef.current !== document.activeElement)
+            setValue(field.rawValue);
+    }, [field.rawValue]);
+    const debouncedSetFieldvalue = (0, use_debounce_1.useDebouncedCallback)((value) => {
+        editContext.operations.editField({
+            field: field.descriptor,
+            rawValue: value,
+            refresh: "waitForQuietPeriod",
+        });
+    }, 200);
+    const fieldItem = field.descriptor.item;
+    return ((0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, { ref: inputRef, value: value || "", disabled: readOnly, className: "p-2 focus-shadow text-sm", style: { width: "100%" }, rows: 12, onChange: (e) => {
+            setValue(e.target.value);
+            debouncedSetFieldvalue(e.target.value);
+            // field.value = e.target.value;
+        } }, fieldItem.id + field.id + fieldItem.language + fieldItem.version));
+}

package/dist/editor/field-types/ReactQuill.js

@@ -0,0 +1,366 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactQuill = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/*
+React-Quill
+https://github.com/zenoamaro/react-quill
+*/
+const react_1 = __importDefault(require("react"));
+const isEqual_1 = __importDefault(require("lodash/isEqual"));
+const quill_1 = __importDefault(require("quill"));
+class ReactQuill extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        /*
+        Changing one of these props should cause a full re-render and a
+        re-instantiation of the Quill editor.
+        */
+        this.dirtyProps = [
+            "modules",
+            "formats",
+            "bounds",
+            "theme",
+            "children",
+        ];
+        /*
+        Changing one of these props should cause a regular update. These are mostly
+        props that act on the container, rather than the quillized editing area.
+        */
+        this.cleanProps = [
+            "id",
+            "className",
+            "style",
+            "placeholder",
+            "tabIndex",
+            "onChange",
+            "onChangeSelection",
+            "onFocus",
+            "onBlur",
+            "onKeyPress",
+            "onKeyDown",
+            "onKeyUp",
+        ];
+        this.state = {
+            generation: 0,
+        };
+        /*
+        Tracks the internal selection of the Quill editor
+        */
+        this.selection = null;
+        this.editingAreaRef = react_1.default.createRef();
+        this.onEditorChange = (eventName, rangeOrDelta, 
+        //oldRangeOrDelta: Range | DeltaStatic,
+        source) => {
+            if (eventName === "text-change") {
+                this.onEditorChangeText?.(this.editor.root.innerHTML, rangeOrDelta, source, this.unprivilegedEditor);
+            }
+            else if (eventName === "selection-change") {
+                this.onEditorChangeSelection?.(rangeOrDelta, source, this.unprivilegedEditor);
+            }
+        };
+        const value = this.isControlled() ? props.value : props.defaultValue;
+        this.value = value ?? "";
+    }
+    validateProps(props) {
+        if (react_1.default.Children.count(props.children) > 1)
+            throw new Error("The Quill editing area can only be composed of a single React element.");
+        if (react_1.default.Children.count(props.children)) {
+            const child = react_1.default.Children.only(props.children);
+            if (child?.type === "textarea")
+                throw new Error("Quill does not support editing on a <textarea>. Use a <div> instead.");
+        }
+        if (this.lastDeltaChangeSet && props.value === this.lastDeltaChangeSet)
+            throw new Error("You are passing the `delta` object from the `onChange` event back " +
+                "as `value`. You most probably want `editor.getContents()` instead. " +
+                "See: https://github.com/zenoamaro/react-quill#using-deltas");
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        this.validateProps(nextProps);
+        // If the editor hasn't been instantiated yet, or the component has been
+        // regenerated, we already know we should update.
+        if (!this.editor || this.state.generation !== nextState.generation) {
+            return true;
+        }
+        // Handle value changes in-place
+        if ("value" in nextProps) {
+            const prevContents = this.getEditorContents();
+            const nextContents = nextProps.value ?? "";
+            // NOTE: Seeing that Quill is missing a way to prevent edits, we have to
+            //       settle for a hybrid between controlled and uncontrolled mode. We
+            //       can't prevent the change, but we'll still override content
+            //       whenever `value` differs from current state.
+            // NOTE: Comparing an HTML string and a Quill Delta will always trigger a
+            //       change, regardless of whether they represent the same document.
+            if (!this.isEqualValue(nextContents, prevContents)) {
+                this.setEditorContents(this.editor, nextContents);
+            }
+        }
+        // Handle read-only changes in-place
+        if (nextProps.readOnly !== this.props.readOnly) {
+            this.setEditorReadOnly(this.editor, nextProps.readOnly);
+        }
+        // Clean and Dirty props require a render
+        return [...this.cleanProps, ...this.dirtyProps].some((prop) => {
+            return !(0, isEqual_1.default)(nextProps[prop], this.props[prop]);
+        });
+    }
+    shouldComponentRegenerate(nextProps) {
+        // Whenever a `dirtyProp` changes, the editor needs reinstantiation.
+        return this.dirtyProps.some((prop) => {
+            return !(0, isEqual_1.default)(nextProps[prop], this.props[prop]);
+        });
+    }
+    componentDidMount() {
+        this.instantiateEditor();
+        this.setEditorContents(this.editor, this.getEditorContents());
+    }
+    componentWillUnmount() {
+        this.destroyEditor();
+    }
+    componentDidUpdate(prevProps, prevState) {
+        // If we're changing one of the `dirtyProps`, the entire Quill Editor needs
+        // to be re-instantiated. Regenerating the editor will cause the whole tree,
+        // including the container, to be cleaned up and re-rendered from scratch.
+        // Store the contents so they can be restored later.
+        if (this.editor && this.shouldComponentRegenerate(prevProps)) {
+            const delta = this.editor.getContents();
+            const selection = this.editor.getSelection();
+            this.regenerationSnapshot = { delta, selection };
+            this.setState({ generation: this.state.generation + 1 });
+            this.destroyEditor();
+        }
+        // The component has been regenerated, so it must be re-instantiated, and
+        // its content must be restored to the previous values from the snapshot.
+        if (this.state.generation !== prevState.generation) {
+            const { delta, selection } = this.regenerationSnapshot;
+            delete this.regenerationSnapshot;
+            this.instantiateEditor();
+            const editor = this.editor;
+            editor.setContents(delta);
+            postpone(() => this.setEditorSelection(editor, selection));
+        }
+    }
+    instantiateEditor() {
+        if (this.editor) {
+            this.hookEditor(this.editor);
+        }
+        else {
+            this.editor = this.createEditor(this.getEditingArea(), this.getEditorConfig());
+        }
+    }
+    destroyEditor() {
+        if (!this.editor)
+            return;
+        this.unhookEditor(this.editor);
+    }
+    /*
+    We consider the component to be controlled if `value` is being sent in props.
+    */
+    isControlled() {
+        return "value" in this.props;
+    }
+    getEditorConfig() {
+        return {
+            bounds: this.props.bounds,
+            formats: this.props.formats,
+            modules: this.props.modules,
+            placeholder: this.props.placeholder,
+            readOnly: this.props.readOnly,
+            scrollingContainer: this.props.scrollingContainer,
+            tabIndex: this.props.tabIndex,
+            theme: this.props.theme,
+        };
+    }
+    getEditor() {
+        if (!this.editor)
+            throw new Error("Accessing non-instantiated editor");
+        return this.editor;
+    }
+    /**
+    Creates an editor on the given element. The editor will be passed the
+    configuration, have its events bound,
+    */
+    createEditor(element, config) {
+        const editor = new quill_1.default(element, config);
+        if (config.tabIndex != null) {
+            this.setEditorTabIndex(editor, config.tabIndex);
+        }
+        this.hookEditor(editor);
+        return editor;
+    }
+    hookEditor(editor) {
+        // Expose the editor on change events via a weaker, unprivileged proxy
+        // object that does not allow accidentally modifying editor state.
+        this.unprivilegedEditor = this.makeUnprivilegedEditor(editor);
+        // Using `editor-change` allows picking up silent updates, like selection
+        // changes on typing.
+        editor.on("editor-change", this.onEditorChange);
+    }
+    unhookEditor(editor) {
+        editor.off("editor-change", this.onEditorChange);
+    }
+    getEditorContents() {
+        return this.value;
+    }
+    getEditorSelection() {
+        return this.selection;
+    }
+    /*
+    True if the value is a Delta instance or a Delta look-alike.
+    */
+    isDelta(value) {
+        return value && value.ops;
+    }
+    /*
+    Special comparison function that knows how to compare Deltas.
+    */
+    isEqualValue(value, nextValue) {
+        if (this.isDelta(value) && this.isDelta(nextValue)) {
+            return (0, isEqual_1.default)(value.ops, nextValue.ops);
+        }
+        else {
+            return (0, isEqual_1.default)(value, nextValue);
+        }
+    }
+    /*
+    Replace the contents of the editor, but keep the previous selection hanging
+    around so that the cursor won't move.
+    */
+    setEditorContents(editor, value) {
+        this.value = value;
+        //const sel = this.getEditorSelection();
+        if (typeof value === "string") {
+            editor.setContents(editor.clipboard.convert({ html: value }));
+        }
+        else {
+            editor.setContents(value);
+        }
+        // THIS STEALS FOCUS!
+        //  postpone(() => this.setEditorSelection(editor, sel));
+    }
+    setEditorSelection(editor, range) {
+        this.selection = range;
+        if (range) {
+            // Validate bounds before applying.
+            const length = editor.getLength();
+            range.index = Math.max(0, Math.min(range.index, length - 1));
+            range.length = Math.max(0, Math.min(range.length, length - 1 - range.index));
+            editor.setSelection(range);
+        }
+    }
+    setEditorTabIndex(editor, tabIndex) {
+        if (editor?.scroll?.domNode) {
+            editor.scroll.domNode.tabIndex = tabIndex;
+        }
+    }
+    setEditorReadOnly(editor, value) {
+        if (value) {
+            editor.disable();
+        }
+        else {
+            editor.enable();
+        }
+    }
+    /*
+    Returns a weaker, unprivileged proxy object that only exposes read-only
+    accessors found on the editor instance, without any state-modifying methods.
+    */
+    makeUnprivilegedEditor(editor) {
+        const e = editor;
+        return {
+            getHTML: () => e.root.innerHTML,
+            getLength: e.getLength.bind(e),
+            getText: e.getText.bind(e),
+            getContents: e.getContents.bind(e),
+            getSelection: e.getSelection.bind(e),
+            getBounds: e.getBounds.bind(e),
+        };
+    }
+    getEditingArea() {
+        if (!this.editingAreaRef.current) {
+            throw new Error("Editing area is not available");
+        }
+        return this.editingAreaRef.current;
+    }
+    /*
+    Renders an editor area, unless it has been provided one to clone.
+    */
+    renderEditingArea() {
+        const { children, preserveWhitespace } = this.props;
+        const { generation } = this.state;
+        if (react_1.default.Children.count(children)) {
+            return react_1.default.cloneElement(react_1.default.Children.only(children), {
+                ref: this.editingAreaRef,
+            });
+        }
+        return preserveWhitespace ? ((0, jsx_runtime_1.jsx)("pre", { ref: this.editingAreaRef }, generation)) : ((0, jsx_runtime_1.jsx)("div", { ref: this.editingAreaRef }, generation));
+    }
+    render() {
+        return ((0, jsx_runtime_1.jsx)("div", { id: this.props.id, style: this.props.style, className: `quill ${this.props.className ?? ""}`, onKeyPress: this.props.onKeyPress, onKeyDownCapture: this.props.onKeyDown, onKeyUp: this.props.onKeyUp, children: this.renderEditingArea() }, this.state.generation));
+    }
+    onEditorChangeText(value, delta, source, editor) {
+        if (!this.editor)
+            return;
+        // We keep storing the same type of value as what the user gives us,
+        // so that value comparisons will be more stable and predictable.
+        const nextContents = this.isDelta(this.value)
+            ? editor.getContents()
+            : editor.getHTML();
+        if (nextContents !== this.getEditorContents()) {
+            // Taint this `delta` object, so we can recognize whether the user
+            // is trying to send it back as `value`, preventing a likely loop.
+            this.lastDeltaChangeSet = delta;
+            this.value = nextContents;
+            this.props.onChange?.(value, delta, source, editor);
+        }
+    }
+    onEditorChangeSelection(nextSelection, source, editor) {
+        if (!this.editor)
+            return;
+        const currentSelection = this.getEditorSelection();
+        const hasGainedFocus = !currentSelection && nextSelection;
+        const hasLostFocus = currentSelection && !nextSelection;
+        if ((0, isEqual_1.default)(nextSelection, currentSelection))
+            return;
+        this.selection = nextSelection;
+        this.props.onChangeSelection?.(nextSelection, source, editor);
+        if (hasGainedFocus) {
+            this.props.onFocus?.(nextSelection, source, editor);
+        }
+        else if (hasLostFocus) {
+            this.props.onBlur?.(currentSelection, source, editor);
+        }
+    }
+    focus() {
+        if (!this.editor)
+            return;
+        this.editor.focus();
+    }
+    blur() {
+        if (!this.editor)
+            return;
+        this.selection = null;
+        this.editor.blur();
+    }
+}
+exports.ReactQuill = ReactQuill;
+ReactQuill.displayName = "React Quill";
+/*
+Export Quill to be able to call `register`
+*/
+ReactQuill.Quill = quill_1.default;
+ReactQuill.defaultProps = {
+    theme: "snow",
+    modules: {},
+    readOnly: false,
+};
+/*
+Small helper to execute a function in the next micro-tick.
+*/
+function postpone(fn) {
+    Promise.resolve().then(fn);
+}

package/dist/editor/field-types/RichTextEditor.js

@@ -0,0 +1,46 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextEditor = RichTextEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dynamic_1 = __importDefault(require("next/dynamic"));
+const RichTextEditorComponent = (0, dynamic_1.default)(() => Promise.resolve().then(() => __importStar(require("./RichTextEditorComponent"))).then((dnd) => dnd.RichTextEditorComponent), { ssr: false });
+function RichTextEditor({ field, readOnly, }) {
+    return (0, jsx_runtime_1.jsx)(RichTextEditorComponent, { field: field, readOnly: readOnly });
+}

package/dist/editor/field-types/RichTextEditorComponent.js

@@ -0,0 +1,72 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextEditorComponent = RichTextEditorComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const editContext_1 = require("../client/editContext");
+const use_debounce_1 = require("use-debounce");
+const react_1 = require("react");
+const ReactQuill_1 = require("./ReactQuill");
+require("react-quill-new/dist/quill.snow.css");
+const utils_1 = require("primereact/utils");
+function RichTextEditorComponent({ field, readOnly, }) {
+    const editContextRef = (0, editContext_1.useEditContextRef)();
+    const modifiedFieldsContext = (0, editContext_1.useModifiedFieldsContext)();
+    const state = (0, react_1.useRef)({ focus: false });
+    const inputRef = (0, react_1.useRef)(null);
+    if (!editContextRef.current)
+        return;
+    const [value, setValue] = (0, react_1.useState)(field.value);
+    const fieldItem = field.descriptor.item;
+    if (!fieldItem)
+        return;
+    const modifiedField = modifiedFieldsContext?.modifiedFields.find((x) => x.fieldId === field.id &&
+        x.item.id === fieldItem.id &&
+        x.item.language === fieldItem.language &&
+        x.item.version === fieldItem.version);
+    (0, react_1.useEffect)(() => {
+        if (!state.current.focus ||
+            !document.activeElement?.classList.contains("ql-editor")) {
+            if (field.isHistoric)
+                setValue(field.value);
+            else
+                setValue(modifiedField?.value ?? field.value);
+        }
+    }, [field.value, modifiedFieldsContext?.modifiedFields]);
+    const debouncedSetFieldvalue = (0, use_debounce_1.useThrottledCallback)((value) => {
+        editContextRef.current?.operations.editField({
+            field: field.descriptor,
+            value: value,
+            refresh: "none",
+        });
+    }, editContextRef.current?.configuration.debounceFieldEditsInterval);
+    const handleChange = (newValue) => {
+        if (newValue === "<p><br></p>" && !field.value)
+            return;
+        if (newValue !== value && state.current.focus && !readOnly) {
+            setValue(newValue);
+            debouncedSetFieldvalue(newValue);
+        }
+    };
+    return (
+    // Primereact 10.6.6: - Editor takes focus on value change
+    // <Editor
+    //   className="focus-shadow"
+    //   key={fieldItem.id + field.id + fieldItem.language + fieldItem.version}
+    //   disabled={readOnly}
+    //   value={value}
+    //   style={{ width: "100%" }}
+    //   // onTextChange={(e) => {
+    //   //   const val = e.htmlValue ?? "";
+    //   //   setValue(val);
+    //   //   debouncedSetFieldvalue(val);
+    //   // }}
+    // />
+    (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.classNames)(readOnly ? "bg-gray-100" : "bg-white", "focus-shadow"), children: (0, jsx_runtime_1.jsx)(ReactQuill_1.ReactQuill, { ref: inputRef, theme: "snow", value: value, onChange: handleChange, onFocus: () => {
+                setTimeout(() => {
+                    state.current.focus = true;
+                }, 101);
+            }, onBlur: () => {
+                state.current.focus = false;
+            }, readOnly: readOnly }) }));
+}