@octane-xplat/richtext 0.9.0 → 0.11.0

package/dist/native/RichTextEditor.android.js

@@ -1,7 +1,7 @@
-import { defineUniversalComponent, hookSlots, registerElement, universalPlan, universalValue, useCallback, useEffect, useRef } from "@nativescript-community/octane";
+import { defineUniversalComponent, hookSlots, registerElement, universalPlan, universalValue, useCallback, useEffect, useImperativeHandle, useRef } from "@nativescript-community/octane";
 import { View } from "@nativescript/core";
 //#region src/RichTextEditor.android.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(10);
+var _hs$ = /* @__PURE__ */ hookSlots(11);
 var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
 var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
@@ -12,6 +12,7 @@ var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
 var _h$7 = /* @__PURE__ */ Symbol(_hs$ + 7);
 var _h$8 = /* @__PURE__ */ Symbol(_hs$ + 8);
 var _h$9 = /* @__PURE__ */ Symbol(_hs$ + 9);
+var _h$10 = /* @__PURE__ */ Symbol(_hs$ + 10);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
 	"type": "xplatrichtext",
@@ -87,9 +88,10 @@ var RichTextEditor = defineUniversalComponent("nativescript", function RichTextE
 	const applyingValue = useRef(false, _h$2);
 	const keyListener = useRef(null, _h$3);
 	const emitTimer = useRef(null, _h$4);
+	useImperativeHandle(props.ref, () => handle(editor()), [], _h$5);
 	const bindHost = useCallback((v) => {
 		host.current = v;
-	}, [], _h$5);
+	}, [], _h$6);
 	const editor = () => host.current?.android;
 	const setEditable = (next) => {
 		const e = editor();
@@ -154,6 +156,45 @@ var RichTextEditor = defineUniversalComponent("nativescript", function RichTextE
 		},
 		undo: () => e.undo(),
 		redo: () => e.redo(),
+		split: () => {
+			const selStart = e.getSelectionStart();
+			const selEnd = e.getSelectionEnd();
+			if (selStart < 0 || selEnd < 0) return false;
+			const start = Math.min(selStart, selEnd);
+			const end = Math.max(selStart, selEnd);
+			const text = e.getText();
+			if (end > String(text).length) return false;
+			if (end > start) text.delete(start, end);
+			text.insert(start, "\n");
+			e.setSelection(start + 1);
+			emitChange();
+			return true;
+		},
+		join: () => {
+			const start = e.getSelectionStart();
+			if (start <= 0 || e.getSelectionEnd() !== start) return false;
+			const text = e.getText();
+			const s = String(text);
+			if (start > s.length || s.charAt(start - 1) !== "\n") return false;
+			text.delete(start - 1, start);
+			e.setSelection(start - 1);
+			emitChange();
+			return true;
+		},
+		indent: () => {
+			if (!e.isIndentAvailable()) return false;
+			e.indent();
+			emitChange();
+			return true;
+		},
+		outdent: () => {
+			if (!e.isOutdentAvailable()) return false;
+			e.outdent();
+			emitChange();
+			return true;
+		},
+		canIndent: () => Boolean(e.isIndentAvailable()),
+		canOutdent: () => Boolean(e.isOutdentAvailable()),
 		focus: () => {
 			e.requestFocus();
 			showKeyboard(e);
@@ -191,9 +232,8 @@ var RichTextEditor = defineUniversalComponent("nativescript", function RichTextE
 			showKeyboard(e);
 		}
 		if (props.android) Object.assign(e, props.android);
-		props.bind?.(handle(e));
 		props.onReady?.();
-	}, [], _h$6);
+	}, [], _h$7);
 	useEffect(() => {
 		const e = editor();
 		if (!e || props.value === void 0) return;
@@ -204,14 +244,14 @@ var RichTextEditor = defineUniversalComponent("nativescript", function RichTextE
 		} finally {
 			applyingValue.current = false;
 		}
-	}, [props.value], _h$7);
+	}, [props.value], _h$8);
 	useEffect(() => {
 		setEditable(props.editable !== false);
-	}, [props.editable], _h$8);
+	}, [props.editable], _h$9);
 	useEffect(() => {
 		const e = editor();
 		if (e && props.placeholder !== void 0) e.setHint(props.placeholder);
-	}, [props.placeholder], _h$9);
+	}, [props.placeholder], _h$10);
 	return universalValue(__octaneUniversalPlan0, [
 		bindHost,
 		props.id,

package/dist/native/RichTextEditor.ios.js

@@ -1,21 +1,207 @@
-import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+import { defineUniversalComponent, hookSlots, registerElement, universalPlan, universalValue, useCallback, useEffect, useImperativeHandle, useRef } from "@nativescript-community/octane";
+import { View } from "@nativescript/core";
 //#region src/RichTextEditor.ios.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(11);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
+var _h$5 = /* @__PURE__ */ Symbol(_hs$ + 5);
+var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
+var _h$7 = /* @__PURE__ */ Symbol(_hs$ + 7);
+var _h$8 = /* @__PURE__ */ Symbol(_hs$ + 8);
+var _h$9 = /* @__PURE__ */ Symbol(_hs$ + 9);
+var _h$10 = /* @__PURE__ */ Symbol(_hs$ + 10);
 var __octaneUniversalPlan0 = universalPlan("nativescript", {
 	"kind": "host",
-	"type": "label",
-	"props": { "text": "Rich text editing is not supported on iOS yet." },
+	"type": "xplatrichtext",
 	"bindings": [
-		["id", 0],
-		["className", 1],
-		["style", 2]
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3],
+		["row", 4],
+		["col", 5],
+		["rowSpan", 6],
+		["colSpan", 7],
+		["dock", 8],
+		["left", 9],
+		["top", 10],
+		["flexGrow", 11],
+		["flexShrink", 12],
+		["alignSelf", 13],
+		["order", 14]
 	]
 });
-var supported = false;
+var UNSUPPORTED = /* @__PURE__ */ new Set([
+	"taskList",
+	"alignLeft",
+	"alignCenter",
+	"alignRight"
+]);
+var AztecEditor = class extends View {
+	createNativeView() {
+		return new XplatAztecEditorView();
+	}
+};
+registerElement("xplatrichtext", AztecEditor);
+var supported = true;
 var RichTextEditor = defineUniversalComponent("nativescript", function RichTextEditor(props) {
+	const host = useRef(null, _h$0);
+	const lastEmitted = useRef(void 0, _h$1);
+	const applyingValue = useRef(false, _h$2);
+	const emitTimer = useRef(null, _h$3);
+	const warned = useRef(/* @__PURE__ */ new Set(), _h$4);
+	useImperativeHandle(props.ref, () => handle(editor()), [], _h$5);
+	const bindHost = useCallback((v) => {
+		host.current = v;
+	}, [], _h$6);
+	const editor = () => host.current?.ios;
+	const emitChange = () => {
+		if (!editor() || applyingValue.current) return;
+		clearTimeout(emitTimer.current);
+		emitTimer.current = setTimeout(() => {
+			const current = editor();
+			if (!current || applyingValue.current) return;
+			const html = current.getHTML();
+			lastEmitted.current = html;
+			props.onChange?.(html);
+		}, 150);
+	};
+	const reportUnsupported = (format) => {
+		if (warned.current.has(format)) return;
+		warned.current.add(format);
+		console.warn(`[richtext] apply('${format}') is not supported by the iOS Aztec surface`);
+	};
+	const handle = (e) => ({
+		getHTML: () => e.getHTML(),
+		setHTML: (html) => {
+			applyingValue.current = true;
+			try {
+				e.setHTML(html);
+				lastEmitted.current = html;
+			} finally {
+				applyingValue.current = false;
+			}
+		},
+		apply: (format) => {
+			if (format === "link") return;
+			if (UNSUPPORTED.has(format) || !e.applyFormat(format)) {
+				reportUnsupported(format);
+				return;
+			}
+			emitChange();
+		},
+		linkTo: (url, anchor) => {
+			e.linkTo(url, anchor ?? null);
+			emitChange();
+		},
+		removeLink: () => {
+			e.removeLink();
+			emitChange();
+		},
+		isActive: (format) => !UNSUPPORTED.has(format) && Boolean(e.isFormatActive(format)),
+		undo: () => e.undo(),
+		redo: () => e.redo(),
+		split: () => {
+			const ok = Boolean(e.split());
+			if (ok) emitChange();
+			return ok;
+		},
+		join: () => {
+			const ok = Boolean(e.join());
+			if (ok) emitChange();
+			return ok;
+		},
+		indent: () => {
+			const ok = Boolean(e.indent());
+			if (ok) emitChange();
+			return ok;
+		},
+		outdent: () => {
+			const ok = Boolean(e.outdent());
+			if (ok) emitChange();
+			return ok;
+		},
+		canIndent: () => Boolean(e.canIndent()),
+		canOutdent: () => Boolean(e.canOutdent()),
+		focus: () => e.focus(),
+		blur: () => e.blur(),
+		isFocused: () => e.focused(),
+		native: e
+	});
+	useEffect(() => {
+		const e = editor();
+		if (!e) return;
+		e.onTextChange = () => emitChange();
+		e.onSelectionChange = (start, end, active) => {
+			const formats = [];
+			const count = active?.count ?? 0;
+			for (let i = 0; i < count; i++) formats.push(active.objectAtIndex(i));
+			props.onSelectionChange?.({
+				start,
+				end,
+				active: formats
+			});
+		};
+		e.onFocus = () => props.onFocus?.();
+		e.onBlur = () => props.onBlur?.();
+		if (props.placeholder !== void 0) e.placeholder = props.placeholder;
+		e.editable = props.editable !== false;
+		if (props.value !== void 0) {
+			applyingValue.current = true;
+			try {
+				e.setHTML(props.value);
+			} finally {
+				applyingValue.current = false;
+			}
+		}
+		if (props.autofocus) e.focus();
+		if (props.ios) Object.assign(e, props.ios);
+		props.onReady?.();
+		return () => {
+			e.onTextChange = null;
+			e.onSelectionChange = null;
+			e.onFocus = null;
+			e.onBlur = null;
+		};
+	}, [], _h$7);
+	useEffect(() => {
+		const e = editor();
+		if (!e || props.value === void 0) return;
+		if (props.value === lastEmitted.current) return;
+		applyingValue.current = true;
+		try {
+			e.setHTML(props.value);
+		} finally {
+			applyingValue.current = false;
+		}
+	}, [props.value], _h$8);
+	useEffect(() => {
+		const e = editor();
+		if (e) e.editable = props.editable !== false;
+	}, [props.editable], _h$9);
+	useEffect(() => {
+		const e = editor();
+		if (e && props.placeholder !== void 0) e.placeholder = props.placeholder;
+	}, [props.placeholder], _h$10);
 	return universalValue(__octaneUniversalPlan0, [
+		bindHost,
 		props.id,
 		props.className,
-		props.style
+		props.style,
+		props.row,
+		props.col,
+		props.rowSpan,
+		props.colSpan,
+		props.dock,
+		props.left,
+		props.top,
+		props.flexGrow,
+		props.flexShrink,
+		props.alignSelf,
+		props.order
 	]);
 }, { "module": "@nativescript-community/octane" });
 //#endregion

package/dist/native/octane-client-build.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "f6769804-c57f-408a-9066-2cfebe36da4e",
+  "buildId": "933ede86-144c-4cb6-9763-762ae7aea462",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/dist/web/octane-client-build.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "bd95f265-682a-446a-a284-1f3419b2fb06",
+  "buildId": "10dfc210-9d43-431b-bdf5-f06486fddbf1",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/nativescript.config.ts

@@ -0,0 +1,22 @@
+import type { NativeScriptConfig } from '@nativescript/core'
+
+// Plugin-level NativeScript config — read by the CLI's plugin discovery for
+// every app that depends on @octane-xplat/richtext directly. Declares the
+// iOS Swift facade's engine dependency so consuming apps don't wire it
+// themselves.
+export default {
+	ios: {
+		SPMPackages: [
+			{
+				name: 'AztecEditor-iOS',
+				libs: ['Aztec'],
+				repositoryURL:
+					'https://github.com/wordpress-mobile/AztecEditor-iOS',
+				// '#' prefix selects a revision requirement in the generated
+				// pbxproj — develop @ 44aeac6 (podspec version 1.20.0, first
+				// with SPM support). MPL-2.0; see platforms/ios/UPSTREAM.md.
+				version: '#44aeac606a3cff6d6ecb1d49ea3f9068082567e1',
+			},
+		],
+	},
+} as NativeScriptConfig

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@octane-xplat/richtext",
-  "version": "0.9.0",
-  "description": "Native rich-text editing leaf for Octane xplat — WordPress Aztec on Android (iOS stubbed, deferred)",
+  "version": "0.11.0",
+  "description": "Native rich-text editing leaf for Octane xplat — Android Aztec and AppKit WKWebView StarterKit",
   "keywords": [
     "android",
     "aztec",
@@ -23,13 +23,14 @@
     "dist",
     "types",
     "src",
-    "platforms"
+    "platforms",
+    "nativescript.config.ts"
   ],
   "type": "module",
   "exports": {
     ".": {
       "macos": {
-        "types": "./types/index.d.ts",
+        "types": "./types/index.macos.d.ts",
         "default": "./src/index.macos.ts"
       },
       "web": {
@@ -42,6 +43,14 @@
       },
       "types": "./types/index.d.ts",
       "default": "./dist/native/index.js"
+    },
+    "./macos-host": {
+      "types": "./types/macos-host.d.ts",
+      "default": "./src/NativeEditor.macos.tsx"
+    },
+    "./browser-transport": {
+      "types": "./types/browser-transport.d.ts",
+      "default": "./src/browser-transport.web.ts"
     }
   },
   "publishConfig": {
@@ -50,7 +59,10 @@
   "devDependencies": {
     "@nativescript-community/octane": "0.2.4",
     "@nativescript/core": "9.1.2",
+    "@octane-xplat/macos-renderer": "0.11.0",
     "@octanejs/vite-plugin": "0.1.61",
+    "@tiptap/core": "3.28.0",
+    "@tiptap/starter-kit": "3.28.0",
     "octane": "0.6.3",
     "typescript": "5.9.3",
     "vite": "8.3.0"
@@ -77,7 +89,17 @@
       "ios": "9.1.0"
     }
   },
+  "xplat": {
+    "macos": {
+      "frameworks": [
+        "WebKit"
+      ]
+    }
+  },
   "scripts": {
-    "build": "vite build && vite build --mode native && tsc -p tsconfig.types.json && node ../../scripts/check-native-dist.mjs"
+    "build": "vite build && vite build --mode native && tsc -p tsconfig.types.json && node ../../scripts/check-native-dist.mjs && node build-browser.mjs",
+    "test": "node --test test/*.test.mjs",
+    "test:macos": "node test/verify-wk.mjs",
+    "test:packed": "node test/packed-consumer.mjs"
   }
 }