@uxf/wysiwyg 12.7.0 → 13.0.0

package/README.md

@@ -18,7 +18,7 @@ All Plate/Slate packages and the UXF packages are **peer dependencies** with pin
 
 - UXF: `@uxf/core`, `@uxf/core-react`, `@uxf/ui`
 - Plate: `platejs` (`53.3.9`), `@platejs/basic-nodes` (`53.0.0`), `@platejs/floating` (`53.0.0`), `@platejs/link` (`53.3.5`), `@platejs/list-classic` (`53.0.0`), `@platejs/media` (`53.1.4`)
-- `react` / `react-dom` (`>=18.2.0`)
+- `react` / `react-dom` (`^19.3.0`)
 
 `slate` and `slate-react` are deliberately **not** peer dependencies. Plate owns the whole Slate stack, and declaring them here made npm resolve a second physical copy of `slate-react` — two copies mean two React contexts and a silently broken `useSelected()`.
 
@@ -110,18 +110,18 @@ Everything below is exported from the package root (`@uxf/wysiwyg`) unless a dee
 
 `import { WysiwygEditor } from "@uxf/wysiwyg";`
 
-| Prop                          | Type                                | Required | Description                                                                                                                                                                                          |
-| ----------------------------- | ----------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                          | `string`                            | yes      | Unique Plate instance id. Must be unique per editor on the page.                                                                                                                                     |
-| `initialValue`                | `WysiwygContent \| undefined`       | yes      | Document the editor is seeded with on mount.                                                                                                                                                         |
-| `onChange`                    | `(value: WysiwygContent) => void`   | yes      | Called on every edit with the full document.                                                                                                                                                         |
-| `plugins`                     | `UxfPlatePlugin[]`                  | yes      | Build with `createAllPluginsWithUi` / `createPluginsWithUi`.                                                                                                                                         |
-| `className`                   | `string`                            | no       | Class on the editor root wrapper.                                                                                                                                                                    |
-| `editableProps`               | `TEditableProps<WysiwygContent>`    | no       | Passed to Plate's editable area (`placeholder`, `readOnly`, `autoFocus`, `spellCheck`, `className`, …). Defaults: `autoFocus: false`, `readOnly: false`, `spellCheck: false`, localized placeholder. |
-| `editorRef`                   | `ForwardedRef<WysiwygEditorHandle>` | no       | Imperative handle exposing `focus()`, which selects the end of the document and then focuses the editable area.                                                                                      |
-| `customPluginsToolbarButtons` | `ReactNode`                         | no       | Extra toolbar buttons appended to the built-in ones.                                                                                                                                                 |
-| `toolbarLeftElement`          | `ReactNode`                         | no       | Node rendered at the toolbar's left edge.                                                                                                                                                            |
-| `toolbarRightElement`         | `ReactNode`                         | no       | Node rendered at the toolbar's right edge.                                                                                                                                                           |
+| Prop                          | Type                              | Required | Description                                                                                                                                                                                          |
+| ----------------------------- | --------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`                          | `string`                          | yes      | Unique Plate instance id. Must be unique per editor on the page.                                                                                                                                     |
+| `initialValue`                | `WysiwygContent \| undefined`     | yes      | Document the editor is seeded with on mount.                                                                                                                                                         |
+| `onChange`                    | `(value: WysiwygContent) => void` | yes      | Called on every edit with the full document.                                                                                                                                                         |
+| `plugins`                     | `UxfPlatePlugin[]`                | yes      | Build with `createAllPluginsWithUi` / `createPluginsWithUi`.                                                                                                                                         |
+| `className`                   | `string`                          | no       | Class on the editor root wrapper.                                                                                                                                                                    |
+| `editableProps`               | `TEditableProps<WysiwygContent>`  | no       | Passed to Plate's editable area (`placeholder`, `readOnly`, `autoFocus`, `spellCheck`, `className`, …). Defaults: `autoFocus: false`, `readOnly: false`, `spellCheck: false`, localized placeholder. |
+| `ref`                         | `Ref<WysiwygEditorHandle>`        | no       | Imperative handle exposing `focus()`, which selects the end of the document and then focuses the editable area.                                                                                      |
+| `customPluginsToolbarButtons` | `ReactNode`                       | no       | Extra toolbar buttons appended to the built-in ones.                                                                                                                                                 |
+| `toolbarLeftElement`          | `ReactNode`                       | no       | Node rendered at the toolbar's left edge.                                                                                                                                                            |
+| `toolbarRightElement`         | `ReactNode`                       | no       | Node rendered at the toolbar's right edge.                                                                                                                                                           |
 
 ### Plugin builders
 
@@ -183,7 +183,7 @@ serializeToPlaintext(value); // keepIndentation defaults to true (joins blocks w
 
 ### Types
 
-`WysiwygEditorHandle` — the shape behind `editorRef`:
+`WysiwygEditorHandle` — the shape behind `ref`:
 
 ```tsx
 import { WysiwygEditor } from "@uxf/wysiwyg";
@@ -193,7 +193,7 @@ import { useRef } from "react";
 
 const editorRef = useRef<WysiwygEditorHandle>(null);
 
-<WysiwygEditor editorRef={editorRef} id="body" initialValue={value} onChange={setValue} plugins={plugins} />;
+<WysiwygEditor id="body" initialValue={value} onChange={setValue} plugins={plugins} ref={editorRef} />;
 
 editorRef.current?.focus(); // caret goes to the end of the document
 ```

package/create-all-plugins-with-ui.js

@@ -9,7 +9,7 @@ const button_1 = require("./plugins/button");
 const create_video_plugin_1 = require("./plugins/embedded/video/create-video-plugin");
 const constants_1 = require("./plugins/heading/constants");
 const create_headings_plugin_1 = require("./plugins/heading/create-headings-plugin");
-const createHighlightPlugin_1 = require("./plugins/highlight/createHighlightPlugin");
+const create_highlight_plugin_1 = require("./plugins/highlight/create-highlight-plugin");
 const create_image_plugin_1 = require("./plugins/image/create-image-plugin");
 const create_link_plugin_1 = require("./plugins/link/create-link-plugin");
 const create_list_plugin_1 = require("./plugins/list/create-list-plugin");
@@ -60,7 +60,7 @@ const createBoldPluginWithUi = () => ({
 });
 exports.createBoldPluginWithUi = createBoldPluginWithUi;
 const createHighlightPluginWithUi = (color = tw_colors_1.twColors.yellow["300"]) => ({
-    plugin: (0, createHighlightPlugin_1.createHighlightPlugin)(color),
+    plugin: (0, create_highlight_plugin_1.createHighlightPlugin)(color),
     component: highlight_mark_1.HighlightMark,
 });
 exports.createHighlightPluginWithUi = createHighlightPluginWithUi;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/wysiwyg",
-    "version": "12.7.0",
+    "version": "13.0.0",
     "description": "UXF Wysiwyg editor",
     "author": "Robin Dvorak <dvorak@uxf.cz>",
     "homepage": "https://gitlab.com/uxf-npm/wysiwyg",
@@ -18,12 +18,12 @@
         "@platejs/link": "53.3.5",
         "@platejs/list-classic": "53.0.0",
         "@platejs/media": "53.1.4",
-        "@uxf/core": "12.7.0",
-        "@uxf/core-react": "12.7.0",
-        "@uxf/ui": "12.7.0",
+        "@uxf/core": "13.0.0",
+        "@uxf/core-react": "13.0.0",
+        "@uxf/ui": "13.0.0",
         "platejs": "53.3.15",
-        "react": ">=18.2.0",
-        "react-dom": ">=18.2.0"
+        "react": "^19.3.0",
+        "react-dom": "^19.3.0"
     },
     "devDependencies": {
         "@platejs/basic-nodes": "53.0.0",
@@ -31,13 +31,13 @@
         "@platejs/link": "53.3.5",
         "@platejs/list-classic": "53.0.0",
         "@platejs/media": "53.1.4",
-        "@types/react": "18.3.31",
-        "@types/react-dom": "18.3.7",
-        "@uxf/core": "12.7.0",
-        "@uxf/core-react": "12.7.0",
-        "@uxf/ui": "12.7.0",
+        "@types/react": "19.3.0",
+        "@types/react-dom": "19.3.0",
+        "@uxf/core": "13.0.0",
+        "@uxf/core-react": "13.0.0",
+        "@uxf/ui": "13.0.0",
         "platejs": "53.3.15",
-        "react": "18.3.1",
-        "react-dom": "18.3.1"
+        "react": "19.3.0",
+        "react-dom": "19.3.0"
     }
 }

package/plugins/marks.test.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const platejs_1 = require("platejs");
-const createHighlightPlugin_1 = require("./highlight/createHighlightPlugin");
+const create_highlight_plugin_1 = require("./highlight/create-highlight-plugin");
 const create_bold_plugin_1 = require("./mark-bold/create-bold-plugin");
 const create_code_plugin_1 = require("./mark-code/create-code-plugin");
 const create_italic_plugin_1 = require("./mark-italic/create-italic-plugin");
@@ -12,7 +12,7 @@ const editor = (0, platejs_1.createSlateEditor)({
         (0, create_italic_plugin_1.createItalicPlugin)(),
         (0, create_underline_plugin_1.createUnderlinePlugin)(),
         (0, create_code_plugin_1.createCodePlugin)(),
-        (0, createHighlightPlugin_1.createHighlightPlugin)("red"),
+        (0, create_highlight_plugin_1.createHighlightPlugin)("red"),
     ],
 });
 describe("marks", () => {

package/wysiwyg-editor.d.ts

@@ -1,6 +1,6 @@
 import { Noop } from "@uxf/core/types";
 import { PlateContentProps } from "platejs/react";
-import { FC, ForwardedRef, ReactNode } from "react";
+import { FC, ReactNode, RefAttributes } from "react";
 import { UxfPlatePlugin, WysiwygContent } from "./types";
 export interface WysiwygEditorHandle {
     focus: Noop;
@@ -9,7 +9,6 @@ export interface WysiwygEditorProps {
     className?: string;
     customPluginsToolbarButtons?: ReactNode;
     editableProps?: PlateContentProps;
-    editorRef?: ForwardedRef<WysiwygEditorHandle>;
     id: string;
     initialValue: WysiwygContent | undefined;
     onChange: (value: WysiwygContent) => void;
@@ -17,4 +16,4 @@ export interface WysiwygEditorProps {
     toolbarLeftElement?: ReactNode;
     toolbarRightElement?: ReactNode;
 }
-export declare const WysiwygEditor: FC<WysiwygEditorProps>;
+export declare const WysiwygEditor: FC<WysiwygEditorProps & RefAttributes<WysiwygEditorHandle>>;

package/wysiwyg-editor.js

@@ -49,9 +49,9 @@ const CLASS_NAME = "uxf-wysiwyg";
  * Component that accesses the editor from Slate context and exposes focus method via ref
  * Must be rendered inside Plate component
  */
-const EditorRefHandler = (0, react_2.forwardRef)((props, ref) => {
+function EditorRefHandler(props) {
     const editor = (0, hooks_1.useUxfEditorRef)();
-    (0, react_2.useImperativeHandle)(ref, () => ({
+    (0, react_2.useImperativeHandle)(props.ref, () => ({
         focus: () => {
             // Select the end of the document first
             editor.tf.select(editor.api.end([]));
@@ -60,7 +60,7 @@ const EditorRefHandler = (0, react_2.forwardRef)((props, ref) => {
         },
     }));
     return null;
-});
+}
 EditorRefHandler.displayName = "EditorRefHandler";
 const Editor = (props) => {
     var _a, _b;
@@ -84,7 +84,7 @@ const Editor = (props) => {
                 spellCheck: false,
                 ...props.editableProps,
                 className: `${CLASS_NAME}__editable ${(_b = (_a = props.editableProps) === null || _a === void 0 ? void 0 : _a.className) !== null && _b !== void 0 ? _b : ""}` }),
-            props.editorRef && react_2.default.createElement(EditorRefHandler, { ref: props.editorRef }))));
+            props.ref && react_2.default.createElement(EditorRefHandler, { ref: props.ref }))));
 };
 const WysiwygEditor = (props) => {
     var _a, _b;
@@ -94,6 +94,6 @@ const WysiwygEditor = (props) => {
             react_2.default.createElement(loader_1.Loader, { className: `${CLASS_NAME}__loader` })));
     }
     return (react_2.default.createElement("div", { className: `${CLASS_NAME} ${(_b = props.className) !== null && _b !== void 0 ? _b : ""}` },
-        react_2.default.createElement(Editor, { customPluginsToolbarButtons: props.customPluginsToolbarButtons, editableProps: props.editableProps, editorRef: props.editorRef, id: props.id, initialValue: props.initialValue, onChange: props.onChange, plugins: props.plugins, toolbarLeftElement: props.toolbarLeftElement, toolbarRightElement: props.toolbarRightElement })));
+        react_2.default.createElement(Editor, { customPluginsToolbarButtons: props.customPluginsToolbarButtons, editableProps: props.editableProps, id: props.id, initialValue: props.initialValue, onChange: props.onChange, plugins: props.plugins, ref: props.ref, toolbarLeftElement: props.toolbarLeftElement, toolbarRightElement: props.toolbarRightElement })));
 };
 exports.WysiwygEditor = WysiwygEditor;

package/wysiwyg-editor.test.js

@@ -65,7 +65,7 @@ async function settle() {
 }
 async function renderEditor(editorRef) {
     const result = (0, react_1.render)(react_2.default.createElement(context_1.UiContextProvider, { value: UI_CONTEXT },
-        react_2.default.createElement(wysiwyg_editor_1.WysiwygEditor, { editorRef: editorRef, id: "test-editor", initialValue: INITIAL_VALUE, onChange: () => undefined, plugins: (0, create_plugins_with_ui_1.createPluginsWithUi)([(0, create_all_plugins_with_ui_1.createBoldPluginWithUi)()]) })));
+        react_2.default.createElement(wysiwyg_editor_1.WysiwygEditor, { id: "test-editor", initialValue: INITIAL_VALUE, onChange: () => undefined, plugins: (0, create_plugins_with_ui_1.createPluginsWithUi)([(0, create_all_plugins_with_ui_1.createBoldPluginWithUi)()]), ref: editorRef })));
     await settle();
     return result;
 }
@@ -130,11 +130,11 @@ afterEach(() => {
     expect(actWarnings).toEqual([]);
 });
 describe("WysiwygEditor", () => {
-    it("renders without an editorRef", async () => {
+    it("renders without a ref", async () => {
         const { container } = await renderEditor();
         expect(container.querySelector(".uxf-wysiwyg__editable")).not.toBeNull();
     });
-    it("exposes focus() through editorRef", async () => {
+    it("exposes focus() through its ref", async () => {
         var _a;
         const editorRef = (0, react_2.createRef)();
         await renderEditor(editorRef);