MarkupEditor

MarkupEditor supports 'local images'—images that reside on the local file system rather than being external URLs. When a user inserts a local image (via the Image Toolbar or by pasting), the editor creates a new image file with a unique UUID filename.

Key Behaviors:

• Default Location: By default, new local images are stored in the same directory as the text being edited.
• Notification: When a new local image is created, your MarkupDelegate is notified via the markupImageAdded(url: URL) method. You are responsible for managing these files (e.g., saving them alongside your document).
• Enabling Support: Local image selection is disabled by default. To allow users to select images from their file system, you must set MarkupEditor.allowLocalImages = true early in your application lifecycle.

On iOS and Mac Catalyst, enabling this adds a 'Select' button to the ImageViewController. On macOS, it adds a 'Select' button to the ImageItem dialog.

// Enable local image support early in the app lifecycle
MarkupEditor.allowLocalImages = true

You can extend the editor's functionality by adding custom JavaScript. There are two ways to provide scripts:

1. Array of Strings: Pass an array of valid JS strings to the userScripts parameter during MarkupEditorView or MarkupEditorUIView instantiation.
2. External File: Specify a file path in MarkupWKWebViewConfiguration.userScriptFile.

Important Constraints

• Module Loading: Scripts are loaded as JavaScript modules. You can import the core API using import { MU } from "./markup-editor.js".
• DOM Modification: You cannot modify the DOM directly to change the editor state. Changes to the document must be made using the MarkupEditor API or ProseMirror APIs. Direct DOM manipulation will not be reflected in getHtml calls.

Invoking JS from Swift

To call a function defined in your custom script from Swift, extend MarkupWKWebView and use executeJavaScript.

// 1. Define function in custom.js
import { MU } from "./markup-editor.js"

MU.wordCount = function() {
    const text = MU.activeView()?.state.doc.textContent
    return text ? text.trim().split(/\s+/).filter(Boolean).length : 0
};

// 2. Extend MarkupWKWebView in Swift to call it
extension MarkupWKWebView {
    public func wordcount(_ handler: ((Int?) -> Void)? = nil) {
        executeJavaScript("MU.wordCount()") { result, error in
            if let error {
                print(error.localizedDescription)
            }
            handler?(result as? Int)
        }
    }
}

Since MarkupEditor produces HTML, you can use CoreSpotlight to make your documents searchable via system-wide search. CoreSpotlight indexes the DOM text content, meaning it will find text within tables or paragraphs but will not index raw HTML tags like <table> or <img> unless they contain text.

To index a document, create a CSSearchableItemAttributeSet with a UTType.html content type and populate the htmlContentData with your document's HTML string. It is recommended to also provide a contentDescription snippet for better search results.

/// Add this instance of MyModelObject to the Spotlight index
func index() {
    let attributeSet = CSSearchableItemAttributeSet(contentType: UTType.html)
    attributeSet.kind = "<MyModelObject>"
    let contentData = contents.data(using: .utf8)
    
    // Set the htmlContentData based on the entire document contents
    attributeSet.htmlContentData = contentData
    
    if let data = contentData, 
       let attributedString = try? NSAttributedString(data: data, options: [.documentType: NSAttributedString.DocumentType.html], documentAttributes: nil) {
        // Provide a snippet for the search result description
        if attributedString.length > 30 {
            attributeSet.contentDescription = "\(attributedString.string.prefix(30))..."
        } else {
            attributeSet.contentDescription = attributedString.string
        }
    }

    let item = CSSearchableItem(uniqueIdentifier: <MyModelObject's id>, domainIdentifier: <MyModelObject's container domain>, attributeSet: attributeSet)
    item.expirationDate = Date.distantFuture
    
    CSSearchableIndex.default().indexSearchableItems([item]) { error in
        if let error = error {
            print("Indexing error: \(error.localizedDescription)")
        } else {
            print("Search item successfully indexed!")
        }
    }
}

If you clone the repository or use a workspace containing the project, you can build and run the provided demo targets to see the editor in action:

• SwiftUIDemo: A SwiftUI-based implementation.
• UIKitDemo: A UIKit-based implementation.

Platform Specifics

iOS and Mac Catalyst

• The demos use demo.html to showcase capabilities.
• On iOS, the MarkupToolbar includes a leftToolbar (a FileToolbar) that allows creating new documents or opening existing HTML files.
• The DemoContentView (SwiftUI) or DemoViewController (UIKit) acts as both the MarkupDelegate and the FileToolbarDelegate.
• Searching: A SearchableContentView is provided to demonstrate searching within an HTML document using a SearchBar.

MacOS

• The MacOS target is only available for the SwiftUI demo.
• It uses a toolbar from the markupeditor-base project rather than the SwiftUI-based MarkupToolbar.
• It does not support FileToolbar because file operations (New, Open, Save, Save As) are handled via the standard Mac menubar (File and View menus).
• The MacOS toolbar includes a Search button by default.

Simplest Implementations

For developers who want to see a minimal integration without the complexity of the full demo (which includes pickers and raw HTML displays), the demo directories contain SimplestContentView (SwiftUI) and SimplestViewController (UIKit). You can use these by pointing your SceneDelegate to them.