@octane-xplat/richtext 0.10.0 → 0.11.0

package/platforms/ios/src/XplatAztecEditor.swift

@@ -0,0 +1,357 @@
+import Aztec
+import Foundation
+import UIKit
+
+/// NativeScript-facing facade over AztecEditor-iOS `TextView`.
+///
+/// Every member reachable from JavaScript is `@objc`-visible and uses only
+/// ObjC-representable types (String, Bool, NSNumber, NSArray, blocks), so the
+/// NativeScript metadata generator sees the whole surface. The leaf drives
+/// this view directly; block properties carry the event callbacks.
+///
+/// `placeholder` and sub/superscript toggles are wrapper-built: Aztec exposes
+/// no native API for either. `taskList` and text alignment have no Aztec-iOS
+/// equivalent at all — `applyFormat`/`isFormatActive` report them as
+/// unsupported instead of faking a result.
+@objcMembers
+public final class XplatAztecEditorView: UIView, UITextViewDelegate {
+
+	/// FormattingIdentifier rawValue -> leaf format name. Aztec's identifier
+	/// map has no entries for `pre`, sub/superscript, task lists, or
+	/// alignment; those are checked at the attribute level below or honestly
+	/// reported as unsupported.
+	private static let identifierFormats: [String: String] = [
+		"bold": "bold",
+		"italic": "italic",
+		"underline": "underline",
+		"strikethrough": "strikethrough",
+		"code": "code",
+		"blockquote": "blockquote",
+		"orderedlist": "orderedList",
+		"unorderedlist": "bulletList",
+		"mark": "highlight",
+		"p": "paragraph",
+		"header1": "heading1",
+		"header2": "heading2",
+		"header3": "heading3",
+		"header4": "heading4",
+		"header5": "heading5",
+		"header6": "heading6",
+		"horizontalruler": "horizontalRule",
+		"link": "link",
+	]
+
+	public let textView = TextView(
+		defaultFont: UIFont.preferredFont(forTextStyle: .body),
+		defaultMissingImage: UIImage())
+	private let placeholderLabel = UILabel()
+
+	// MARK: - JS callbacks
+
+	public var onTextChange: (() -> Void)?
+	public var onSelectionChange: ((NSNumber, NSNumber, NSArray) -> Void)?
+	public var onFocus: (() -> Void)?
+	public var onBlur: (() -> Void)?
+
+	public override init(frame: CGRect) {
+		super.init(frame: frame)
+		textView.delegate = self
+		textView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+		addSubview(textView)
+
+		placeholderLabel.textColor = .secondaryLabel
+		placeholderLabel.font = textView.font
+		placeholderLabel.numberOfLines = 1
+		placeholderLabel.isUserInteractionEnabled = false
+		addSubview(placeholderLabel)
+		updatePlaceholderVisibility()
+	}
+
+	@available(*, unavailable)
+	public required init?(coder: NSCoder) {
+		fatalError("init(coder:) is not supported")
+	}
+
+	public override func layoutSubviews() {
+		super.layoutSubviews()
+		textView.frame = bounds
+		let inset = textView.textContainerInset
+		let padding = textView.textContainer.lineFragmentPadding
+		placeholderLabel.frame = CGRect(
+			x: inset.left + padding,
+			y: inset.top,
+			width: max(0, bounds.width - inset.left - inset.right - padding * 2),
+			height: placeholderLabel.font.lineHeight)
+	}
+
+	// MARK: - Props
+
+	public var placeholder: String? {
+		get { placeholderLabel.text }
+		set {
+			placeholderLabel.text = newValue
+			updatePlaceholderVisibility()
+		}
+	}
+
+	public var editable: Bool {
+		get { textView.isEditable }
+		set { textView.isEditable = newValue }
+	}
+
+	private func updatePlaceholderVisibility() {
+		let hasText = textView.textStorage.length > 0
+		placeholderLabel.isHidden = hasText || (placeholderLabel.text ?? "").isEmpty
+	}
+
+	// MARK: - Document
+
+	public func getHTML() -> String {
+		textView.getHTML(prettify: false)
+	}
+
+	public func setHTML(_ html: String) {
+		textView.setHTML(html)
+		updatePlaceholderVisibility()
+	}
+
+	// MARK: - Formats
+
+	/// Returns false for formats this engine cannot apply (`taskList`,
+	/// `align*`, `link` — the link API is `linkTo`) and unknown names.
+	public func applyFormat(_ format: String) -> Bool {
+		let range = textView.selectedRange
+		switch format {
+		case "bold": textView.toggleBold(range: range)
+		case "italic": textView.toggleItalic(range: range)
+		case "underline": textView.toggleUnderline(range: range)
+		case "strikethrough": textView.toggleStrikethrough(range: range)
+		case "code": textView.toggleCode(range: range)
+		case "blockquote": textView.toggleBlockquote(range: range)
+		case "bulletList": textView.toggleUnorderedList(range: range)
+		case "orderedList": textView.toggleOrderedList(range: range)
+		case "codeBlock": textView.togglePre(range: range)
+		case "paragraph": textView.toggleHeader(.none, range: range)
+		case "heading1": textView.toggleHeader(.h1, range: range)
+		case "heading2": textView.toggleHeader(.h2, range: range)
+		case "heading3": textView.toggleHeader(.h3, range: range)
+		case "heading4": textView.toggleHeader(.h4, range: range)
+		case "heading5": textView.toggleHeader(.h5, range: range)
+		case "heading6": textView.toggleHeader(.h6, range: range)
+		case "highlight": textView.toggleMark(range: range, color: nil, resetColor: true)
+		case "horizontalRule": textView.replaceWithHorizontalRuler(at: range)
+		case "subscript": toggleBaselineOffset(-4, in: range)
+		case "superscript": toggleBaselineOffset(4, in: range)
+		default: return false
+		}
+		return true
+	}
+
+	public func isFormatActive(_ format: String) -> Bool {
+		activeFormatSet().contains(format)
+	}
+
+	public func activeFormats() -> [String] {
+		activeFormatSet().sorted()
+	}
+
+	private func activeFormatSet() -> Set<String> {
+		var out = Set<String>()
+		for identifier in textView.formattingIdentifiersSpanningRange(textView.selectedRange) {
+			if let name = XplatAztecEditorView.identifierFormats[identifier.rawValue] {
+				out.insert(name)
+			}
+		}
+		let attributeSets = activeAttributeSets()
+		if !attributeSets.isEmpty {
+			if attributeSets.allSatisfy(hasPreProperty) { out.insert("codeBlock") }
+			if attributeSets.allSatisfy({ baselineOffset(of: $0) > 0 }) { out.insert("superscript") }
+			if attributeSets.allSatisfy({ baselineOffset(of: $0) < 0 }) { out.insert("subscript") }
+		}
+		return out
+	}
+
+	/// The attribute dictionaries the identifier check would consult:
+	/// typing attributes on an empty document, the attributes at the caret
+	/// for a collapsed selection, every run in the selection otherwise.
+	private func activeAttributeSets() -> [[NSAttributedString.Key: Any]] {
+		let storage = textView.textStorage
+		let range = textView.selectedRange
+		guard storage.length > 0 else { return [textView.typingAttributes] }
+		if range.length == 0 {
+			let index = min(range.location, storage.length - 1)
+			return [storage.attributes(at: index, effectiveRange: nil)]
+		}
+		var sets: [[NSAttributedString.Key: Any]] = []
+		storage.enumerateAttributes(in: range, options: []) { attributes, _, _ in
+			sets.append(attributes)
+		}
+		return sets
+	}
+
+	private func hasPreProperty(_ attributes: [NSAttributedString.Key: Any]) -> Bool {
+		guard let style = attributes[.paragraphStyle] as? ParagraphStyle else { return false }
+		// HTMLPre is module-internal to Aztec — match the property by type name.
+		return style.hasProperty { String(describing: Swift.type(of: $0)) == "HTMLPre" }
+	}
+
+	private func baselineOffset(of attributes: [NSAttributedString.Key: Any]) -> Int {
+		(attributes[.baselineOffset] as? NSNumber)?.intValue ?? 0
+	}
+
+	/// Aztec-iOS has no public sub/superscript toggle — apply or clear
+	/// `.baselineOffset` directly; the HTML converter serializes it back as
+	/// `<sub>`/`<sup>`. Collapsed selections toggle the typing attributes.
+	private func toggleBaselineOffset(_ offset: Int, in range: NSRange) {
+		let storage = textView.textStorage
+		if range.length == 0 || storage.length == 0 {
+			var attributes = textView.typingAttributes
+			let current = baselineOffset(of: attributes)
+			attributes[.baselineOffset] = current == offset ? nil : NSNumber(value: offset)
+			textView.typingAttributes = attributes
+			return
+		}
+		guard range.location + range.length <= storage.length else { return }
+
+		let original = storage.attributedSubstring(from: range)
+		let restoredRange = NSRange(location: range.location, length: range.length)
+		textView.undoManager?.registerUndo(withTarget: textView) { target in
+			target.textStorage.replaceCharacters(in: restoredRange, with: original)
+			target.delegate?.textViewDidChange?(target)
+		}
+
+		storage.beginEditing()
+		storage.enumerateAttribute(.baselineOffset, in: range, options: []) { value, subrange, _ in
+			let current = (value as? NSNumber)?.intValue ?? 0
+			if current == offset {
+				storage.removeAttribute(.baselineOffset, range: subrange)
+			} else {
+				storage.addAttribute(.baselineOffset, value: NSNumber(value: offset), range: subrange)
+			}
+		}
+		storage.endEditing()
+		textViewDidChange(textView)
+	}
+
+	// MARK: - Links
+
+	public func linkTo(_ urlString: String, anchor: String?) -> Bool {
+		guard let url = URL(string: urlString) else { return false }
+		textView.setLink(url, title: anchor ?? urlString, inRange: textView.selectedRange)
+		return true
+	}
+
+	public func removeLink() {
+		textView.removeLink(inRange: textView.selectedRange)
+	}
+
+	// MARK: - History
+
+	public func undo() {
+		textView.undoManager?.undo()
+	}
+
+	public func redo() {
+		textView.undoManager?.redo()
+	}
+
+	// MARK: - Structural commands
+
+	/// Block split at the caret — Aztec's `insertText` runs the same
+	/// paragraph/list handling as a real Enter keystroke. A non-collapsed
+	/// selection is deleted first, matching the leaf contract.
+	public func split() -> Bool {
+		let range = textView.selectedRange
+		guard range.location != NSNotFound,
+			range.location + range.length <= textView.textStorage.length
+		else { return false }
+		if range.length > 0 {
+			textView.deleteBackward()
+		}
+		textView.insertText("\n")
+		return true
+	}
+
+	/// Merge into the previous block — Backspace at a collapsed caret that
+	/// sits directly after a `\n` boundary, matching the leaf contract.
+	public func join() -> Bool {
+		let range = textView.selectedRange
+		guard range.length == 0, range.location > 0,
+			range.location <= textView.textStorage.length
+		else { return false }
+		let text = textView.textStorage.string as NSString
+		guard text.character(at: range.location - 1) == 0x000A else { return false }
+		textView.deleteBackward()
+		return true
+	}
+
+	/// `increaseIndent` nests a list item under its previous sibling or
+	/// deepens a blockquote; on plain blocks Aztec falls back to a `\t`
+	/// insert, so indent is available whenever the view can edit.
+	public func canIndent() -> Bool {
+		textView.isEditable
+	}
+
+	public func indent() -> Bool {
+		guard canIndent() else { return false }
+		textView.increaseIndent()
+		return true
+	}
+
+	/// `decreaseIndent` only acts on list/blockquote typing attributes —
+	/// there is no plain-block outdent, so report availability up front.
+	public func canOutdent() -> Bool {
+		guard textView.isEditable else { return false }
+		guard let style = textView.typingAttributes[.paragraphStyle] as? ParagraphStyle else {
+			return false
+		}
+		// TextList/Blockquote/HTMLLi are module-internal to Aztec.
+		return style.hasProperty {
+			let name = String(describing: Swift.type(of: $0))
+			return name == "TextList" || name == "Blockquote" || name == "HTMLLi"
+		}
+	}
+
+	public func outdent() -> Bool {
+		guard canOutdent() else { return false }
+		textView.decreaseIndent()
+		return true
+	}
+
+	// MARK: - Focus
+
+	public func focus() {
+		_ = textView.becomeFirstResponder()
+	}
+
+	public func blur() {
+		_ = textView.resignFirstResponder()
+	}
+
+	public func focused() -> Bool {
+		textView.isFirstResponder
+	}
+
+	// MARK: - UITextViewDelegate
+
+	public func textViewDidChange(_ textView: UITextView) {
+		updatePlaceholderVisibility()
+		onTextChange?()
+	}
+
+	public func textViewDidChangeSelection(_ textView: UITextView) {
+		let range = self.textView.selectedRange
+		onSelectionChange?(
+			NSNumber(value: range.location),
+			NSNumber(value: range.location + range.length),
+			activeFormats() as NSArray)
+	}
+
+	public func textViewDidBeginEditing(_ textView: UITextView) {
+		onFocus?()
+	}
+
+	public func textViewDidEndEditing(_ textView: UITextView) {
+		onBlur?()
+	}
+}

package/src/RichTextEditor.android.tsrx

@@ -178,6 +178,45 @@ export function RichTextEditor(props: RichTextEditorProps) @{
 		},
 		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)

package/src/RichTextEditor.ios.tsrx

@@ -1,15 +1,230 @@
 /** @jsxImportSource @nativescript-community/octane */
-import type { RichTextEditorProps } from './types'
+import { useImperativeHandle, useCallback, useEffect, useRef } from 'octane'
+import { View } from '@nativescript/core'
+import { registerElement } from '@nativescript-community/octane'
+import type { Attributes } from '@nativescript-community/octane/intrinsics'
+import type {
+	RichTextEditorHandle,
+	RichTextEditorProps,
+	RichTextFormat,
+} from './types'
 
-export const supported = false
+/** `XplatAztecEditorView` arrives through the leaf's
+ *  `platforms/ios/src` Swift facade over `Aztec.TextView` — there are no
+ *  generated typings for it, so every touch goes through `as any` at one
+ *  boundary instead of `declare const` per call site. */
+declare const XplatAztecEditorView: any
 
-/** iOS bring-up is deferred — the Swift facade over Aztec-iOS lands in a
- *  follow-up. Renders the placeholder so a shared screen still mounts. */
+/** AztecEditor-iOS has no task-list or text-alignment API — the facade
+ *  reports these as unsupported rather than faking a result. `link` is
+ *  valid but goes through `linkTo`, matching the Android leaf. */
+const UNSUPPORTED: ReadonlySet<RichTextFormat> = new Set([
+	'taskList',
+	'alignLeft',
+	'alignCenter',
+	'alignRight',
+])
+
+class AztecEditor extends View {
+	createNativeView() {
+		return new XplatAztecEditorView()
+	}
+}
+
+declare module '@nativescript-community/octane/intrinsics' {
+	interface NativeScriptElements {
+		xplatrichtext: Attributes<typeof AztecEditor>
+	}
+}
+
+registerElement('xplatrichtext', AztecEditor)
+
+export const supported = true
+
+/** WordPress AztecEditor-iOS surface — a UITextView-backed native editor,
+ *  not a WebView. Content in/out is HTML (`setHTML`/`getHTML`); JSON
+ *  interchange lives one layer up in @octane-xplat/tiptap. */
 export function RichTextEditor(props: RichTextEditorProps) @{
-	<label
+	const host = useRef<any>(null)
+	const lastEmitted = useRef<string | undefined>(undefined)
+	const applyingValue = useRef(false)
+	const emitTimer = useRef<any>(null)
+	const warned = useRef<Set<string>>(new Set())
+
+	// Stable identity — an inline closure re-fires ref(null)/ref(v) per
+	// render, which would bounce host.current around the effects below.
+	useImperativeHandle(props.ref, () => handle(editor()), []);
+
+	const bindHost = useCallback((v: any) => {
+		host.current = v
+	}, [])
+
+	const editor = () => host.current?.ios
+
+	const emitChange = () => {
+		const e = editor()
+		if (!e || 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: RichTextFormat) => {
+		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: any): RichTextEditorHandle => ({
+		getHTML: () => e.getHTML(),
+		setHTML: (html: string) => {
+			applyingValue.current = true
+			try {
+				e.setHTML(html)
+				lastEmitted.current = html
+			} finally {
+				applyingValue.current = false
+			}
+		},
+		apply: (format: RichTextFormat) => {
+			if (format === 'link') return
+			if (UNSUPPORTED.has(format) || !e.applyFormat(format)) {
+				reportUnsupported(format)
+				return
+			}
+
+			emitChange()
+		},
+		linkTo: (url: string, anchor?: string) => {
+			e.linkTo(url, anchor ?? null)
+			emitChange()
+		},
+		removeLink: () => {
+			e.removeLink()
+			emitChange()
+		},
+		isActive: (format: RichTextFormat) =>
+			!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: number, end: number, active: any) => {
+			const formats: RichTextFormat[] = []
+			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 !== undefined) e.placeholder = props.placeholder
+		e.editable = props.editable !== false
+
+		if (props.value !== undefined) {
+			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
+		}
+	}, [])
+
+	// `value` lands like a controlled prop, minus the loop: text the editor
+	// emitted through onChange is never pushed back; any other change is an
+	// external reset (Aztec-iOS setHTML is non-undoable, matching Android).
+	useEffect(() => {
+		const e = editor()
+		if (!e || props.value === undefined) return
+		if (props.value === lastEmitted.current) return
+		applyingValue.current = true
+		try {
+			e.setHTML(props.value)
+		} finally {
+			applyingValue.current = false
+		}
+	}, [props.value])
+
+	useEffect(() => {
+		const e = editor()
+		if (e) e.editable = props.editable !== false
+	}, [props.editable])
+
+	useEffect(() => {
+		const e = editor()
+		if (e && props.placeholder !== undefined) e.placeholder = props.placeholder
+	}, [props.placeholder])
+
+	<xplatrichtext
+		ref={bindHost}
 		id={props.id}
 		className={props.className}
 		style={props.style}
-		text="Rich text editing is not supported on iOS yet."
+		row={props.row}
+		col={props.col}
+		rowSpan={props.rowSpan}
+		colSpan={props.colSpan}
+		dock={props.dock}
+		left={props.left}
+		top={props.top}
+		flexGrow={props.flexGrow}
+		flexShrink={props.flexShrink}
+		alignSelf={props.alignSelf}
+		order={props.order}
 	/>;
 }

package/src/host-session.macos.ts

@@ -49,6 +49,15 @@ export function createEditorSession(
 		isActive: (format) => active.includes(format),
 		undo: () => command('undo'),
 		redo: () => command('redo'),
+		// Structural commands are Aztec-only for now: the AppKit transport
+		// is one-way async dispatch, so a synchronous "applied" result cannot
+		// be reported and a fire-and-forget forward would lie to the caller.
+		split: () => false,
+		join: () => false,
+		indent: () => false,
+		outdent: () => false,
+		canIndent: () => false,
+		canOutdent: () => false,
 		focus: () => command('focus'),
 		blur: () => command('blur'),
 		isFocused: () => focused,

package/src/index.ts

@@ -1,5 +1,5 @@
 // Keep this relative import extensionless so the NativeScript resolver picks
-// the Android (Aztec) or iOS (stub until the Swift facade lands) component
-// for the current build target.
+// the Android (Aztec) or iOS (AztecEditor-iOS facade) component for the
+// current build target.
 export { RichTextEditor, supported } from './RichTextEditor'
 export type * from './types'